/* ==========================================================================
   Cookie Consent (orestbida/cookieconsent v3)
   Theme-Anpassungen: dunkle Box unten links wie gadget.ch, Checkboxen im
   Banner und Badge zum erneuten Oeffnen der Einstellungen.
   Konfiguration: assets/js/cookieconsent-config.js
   ========================================================================== */

#cc-main {
	/* ueber dem Video-Splash (.video-splash, z-index 999999) */
	z-index: 1000000;

	--cc-font-family: 'Modern Gothic', Arial, sans-serif;
	--cc-modal-border-radius: 12px;
	--cc-btn-border-radius: 2em;

	--cc-bg: #111010;
	--cc-primary-color: #ffffff;
	--cc-secondary-color: #d6d6d6;
	--cc-link-color: #ffffff;

	--cc-btn-primary-bg: var(--oasg-green, #15FF61);
	--cc-btn-primary-color: #000000;
	--cc-btn-primary-border-color: var(--cc-btn-primary-bg);
	--cc-btn-primary-hover-bg: #ffffff;
	--cc-btn-primary-hover-color: #000000;
	--cc-btn-primary-hover-border-color: #ffffff;

	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-color: #ffffff;
	--cc-btn-secondary-border-color: #ffffff;
	--cc-btn-secondary-hover-bg: #ffffff;
	--cc-btn-secondary-hover-color: #000000;
	--cc-btn-secondary-hover-border-color: #ffffff;

	--cc-separator-border-color: #2a2929;
	--cc-toggle-on-bg: var(--oasg-green, #15FF61);
	--cc-toggle-off-bg: #5a5a5a;
	--cc-toggle-on-knob-bg: #000000;
	--cc-toggle-off-knob-bg: #ffffff;
	--cc-toggle-enabled-icon-color: #ffffff;
	--cc-toggle-disabled-icon-color: #000000;
	--cc-toggle-readonly-bg: #3a3a3a;
	--cc-toggle-readonly-knob-bg: #8a8a8a;
	--cc-toggle-readonly-knob-icon-color: #3a3a3a;

	--cc-cookie-category-block-bg: #1c1b1b;
	--cc-cookie-category-block-border: #1c1b1b;
	--cc-cookie-category-block-hover-bg: #252424;
	--cc-cookie-category-block-hover-border: #252424;
	--cc-cookie-category-expanded-block-bg: #1c1b1b;
	--cc-cookie-category-expanded-block-hover-bg: #252424;
	--cc-section-category-border: #2a2929;

	--cc-overlay-bg: rgba(0, 0, 0, 0.7);
	--cc-webkit-scrollbar-bg: #2a2929;
	--cc-webkit-scrollbar-hover-bg: var(--oasg-green, #15FF61);
	--cc-footer-bg: #111010;
	--cc-footer-color: #d6d6d6;
	--cc-footer-border-color: #2a2929;
}

/* Buttons: Grossbuchstaben wie gadget.ch */
#cc-main .cm__btn,
#cc-main .pm__btn {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Banner (consentModal) ---------------------------------------------- */

#cc-main .cm--box {
	max-width: 21rem;
}

/* Titel in Modern Gothic Black wie die Ueberschriften im Theme */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
	font-weight: 900;
}

#cc-main .cm__title {
	font-size: 1.125rem;
	line-height: 1.3;
}

#cc-main .cm__desc {
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* Alle Buttons untereinander, volle Breite */
#cc-main .cm--box .cm__btns,
#cc-main .cm--box .cm__btn-group {
	flex-direction: column;
}

#cc-main .cm--box .cm__btn + .cm__btn,
#cc-main .cm--box .cm__btn-group + .cm__btn-group {
	margin: 0.5rem 0 0 0;
}

#cc-main .cm__btn[hidden] {
	display: none;
}

/* "Details anzeigen" als Textlink */
#cc-main .cm__btn[data-role="show"] {
	background: transparent;
	border-color: transparent;
	color: var(--cc-primary-color);
	min-height: 0;
	padding: 0.25rem 0;
}

#cc-main .cm__btn[data-role="show"]:hover {
	background: transparent;
	border-color: transparent;
	color: var(--oasg-green, #15FF61);
}

/* Checkboxen im Banner */
#cc-main .cm__checks {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

#cc-main .cm__check {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-primary-color);
}

#cc-main .cm__check input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	margin: 0;
	border: 2px solid #ffffff;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-content: center;
}

#cc-main .cm__check input::after {
	content: '';
	width: 0.375rem;
	height: 0.7rem;
	margin-top: -0.15rem;
	border: solid #000000;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.15s ease;
}

#cc-main .cm__check input:checked {
	background: var(--oasg-green, #15FF61);
	border-color: var(--oasg-green, #15FF61);
}

#cc-main .cm__check input:checked::after {
	transform: rotate(45deg) scale(1);
}

#cc-main .cm__check input:focus-visible {
	outline: 2px solid var(--oasg-green, #15FF61);
	outline-offset: 2px;
}

/* --- Einstellungen (preferencesModal) ----------------------------------- */

#cc-main .pm__title {
	font-size: 1.25rem;
}

#cc-main .pm__section-title,
#cc-main .pm__section-desc,
#cc-main .pm__table {
	font-size: 0.875rem;
}

#cc-main .pm__badge {
	background: #2a2929;
	color: var(--cc-primary-color);
}

/* --- Badge zum erneuten Oeffnen ----------------------------------------- */

#cc-badge {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: #111010;
	color: #ffffff;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}

#cc-badge:hover,
#cc-badge:focus-visible {
	color: var(--oasg-green, #15FF61);
	transform: scale(1.08);
}

.show--consent #cc-badge,
.show--preferences #cc-badge {
	display: none;
}