/**
 * A&B Compliance – A&B-Tiefen-Design und dunkles Design
 *
 * Diese Datei wird nur geladen, wenn das Theme "A&B Schulungen" aktiv ist
 * (oder der Filter euwb_enable_ab_theme_design das erzwingt). Sie kommt nach
 * assets/css/frontend.css und überschreibt die neutrale Basis über die
 * Ladereihenfolge – deshalb reichen einklassige beziehungsweise
 * body-qualifizierte Selektoren, und das Theme kann mit
 * ".site-main .euwb-..." weiterhin das letzte Wort haben. Keine
 * Vorrangerklärung nötig, die Reihenfolge genügt.
 *
 * Barrierefreiheit steht bewusst NICHT hier: der Fokusrahmen und die
 * Mindesthöhe der Schaltflächen gelten in der Basis und damit unter jedem
 * Theme.
 *
 * Ebenfalls nicht hier: eine Reaktion der Kategorie-Kästen auf Zeiger oder
 * Fokus. Die Kästen bleiben in beiden Dateien ruhig, das ist so gewünscht.
 */

/* Tiefenstruktur der A&B-Familie: versetzte harte Ebene statt weichem Schatten. */
.euwb-legal-document,
.euwb-cookie-page,
.euwb-legal-links,
.euwb-button,
.euwb-consent,
.euwb-consent-modal {
	--euwb-depth-outline: #1d2327;
	--euwb-depth-shadow: 7px 7px 0 rgba(29, 35, 39, 0.18);
	--euwb-depth-shadow-hover: 11px 11px 0 rgba(29, 35, 39, 0.18);
	--euwb-depth-lift: translate(-2px, -2px);
}

/* --- Schaltflächen: die Ebene in kleiner Form ------------------------------- */

.euwb-button,
.euwb-consent__actions button {
	border-width: 2px;
	border-radius: 4px;
	box-shadow: 3px 3px 0 rgba(29, 35, 39, 0.28);
	transition: transform 120ms ease, box-shadow 120ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Tastaturfokus hebt die Schaltfläche genauso an wie der Zeiger. */
.euwb-button:focus-visible,
.euwb-consent__actions button:focus-visible {
	box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
	transform: translate(-1px, -1px);
}

/* Rückfallebene für Browser ohne :focus-visible: dort trägt :focus die kleine
   Ebene. Der Fokusrahmen selbst steht in der Basis. */
@supports not selector(:focus-visible) {
	.euwb-button:focus,
	.euwb-consent__actions button:focus {
		box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
		transform: translate(-1px, -1px);
	}
}

@media (hover: hover) {
	.euwb-button:hover,
	.euwb-consent__actions button:hover {
		box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
		transform: translate(-1px, -1px);
	}
}

/*
 * „Alle optionalen ablehnen“ liegt im Einstellungsdialog und ist dort die
 * sekundäre Aktion. Die semantischen Theme-Variablen reagieren sowohl auf
 * die manuelle Darstellungswahl als auch auf die Systemeinstellung.
 */
.euwb-consent-modal .euwb-consent__actions button[data-euwb-consent="necessary"] {
	--euwb-modal-secondary-border: var(--ab-field-border, var(--euwb-border-muted));
	--euwb-modal-secondary-background: var(--ab-ground, #fff);
	--euwb-modal-secondary-color: var(--ab-action, var(--euwb-accent));
	--euwb-modal-secondary-hover-border: var(--ab-action-hover, var(--euwb-accent-hover));
	--euwb-modal-secondary-hover-background: var(--ab-surface, #f0f6fc);
	--euwb-modal-secondary-hover-color: var(--ab-action-hover, var(--euwb-accent-hover));
	border-color: var(--euwb-modal-secondary-border);
	background: var(--euwb-modal-secondary-background);
	color: var(--euwb-modal-secondary-color);
}

@media (hover: hover) {
	.euwb-consent-modal .euwb-consent__actions button[data-euwb-consent="necessary"]:hover {
		border-color: var(--euwb-modal-secondary-hover-border);
		background: var(--euwb-modal-secondary-hover-background);
		color: var(--euwb-modal-secondary-hover-color);
	}
}

/* --- Banner, Einstellungsfenster und Kategorien ---------------------------- */

.euwb-consent {
	border: 2px solid var(--euwb-depth-outline);
	border-radius: 4px;
	box-shadow: var(--euwb-depth-shadow);
}

.euwb-consent-modal__panel {
	border: 2px solid var(--euwb-depth-outline);
	border-radius: 4px;
	box-shadow: var(--euwb-depth-shadow);
}

/* Jede Kategorie ist eine eigene Karte mit versetzter Ebene. Diese Ebene
   bleibt statisch: keine Bewegung bei Zeiger oder Fokus, damit die Liste im
   Einstellungsmenü ruhig wirkt. */
.euwb-consent-category {
	border: 2px solid var(--euwb-depth-outline);
	border-radius: 4px;
	box-shadow: var(--euwb-depth-shadow);
}

/*
 * Der aktive A&B-Theme-Stil kann Karten allgemein mit Hoverzuständen
 * versehen. Die Kategorien im Einwilligungsdialog sind jedoch reine
 * Auswahlzeilen: Ihre Tiefenebene bleibt bei Zeigerkontakt unverändert.
 * Die Theme-Variablen erhalten dabei auch manuell gewählte Hell-/Dunkelmodi.
 */
.euwb-consent-modal .euwb-consent-category {
	--euwb-category-rest-border: var(--ab-depth-outline, var(--euwb-depth-outline));
	--euwb-category-rest-background: var(--ab-ground, #fff);
	--euwb-category-rest-color: var(--ab-text, inherit);
	--euwb-category-rest-shadow: var(--ab-depth-shadow-soft, var(--euwb-depth-shadow));
	border-color: var(--euwb-category-rest-border);
	background: var(--euwb-category-rest-background);
	color: var(--euwb-category-rest-color);
	box-shadow: var(--euwb-category-rest-shadow);
	transition: none;
	transform: none;
}

@media (hover: hover) {
	.euwb-consent-modal .euwb-consent-category:hover {
		border-color: var(--euwb-category-rest-border);
		background: var(--euwb-category-rest-background);
		color: var(--euwb-category-rest-color);
		box-shadow: var(--euwb-category-rest-shadow);
		transform: none;
	}
}

/* Auf schmalen Bildschirmen fällt die Ebene flacher aus. */
@media (max-width: 700px) {
	.euwb-consent,
	.euwb-consent-modal {
		--euwb-depth-shadow: 5px 5px 0 rgba(29, 35, 39, 0.18);
		--euwb-depth-shadow-hover: 7px 7px 0 rgba(29, 35, 39, 0.18);
	}
}

/* Wer weniger Bewegung wünscht, erhält die Ebene ohne Animation. */
@media (prefers-reduced-motion: reduce) {
	.euwb-button,
	.euwb-consent__actions button,
	.euwb-consent-category,
	.euwb-button:hover,
	.euwb-consent__actions button:hover,
	.euwb-button:focus-visible,
	.euwb-consent__actions button:focus-visible {
		transition: none;
		transform: none;
	}
}

/* Im Kontrastmodus tragen die Rahmen die Struktur, nicht die Schatten. */
@media (forced-colors: active) {
	.euwb-button,
	.euwb-consent,
	.euwb-consent__actions button,
	.euwb-consent-modal__panel,
	.euwb-consent-category,
	.euwb-button:hover,
	.euwb-consent__actions button:hover {
		box-shadow: none;
		border-style: solid;
	}
}

/* ── Dunkles Design ──────────────────────────────────────────────────────
   Dunkles Design mit den Farben der A&B-Plugin-Familie (Vorbild:
   A&B Schulungsanmeldung, assets/css/frontend.css): Fläche #11282e,
   kräftigere Fläche #16343b, Text #dbe9eb, Trennlinien #274a52,
   Akzenttext #72aee6.
   Ausnahme mit Absicht: die 2px-Kontur trägt hier die Struktur des Banners
   und der Kategorie-Karten. Der leise Familien-Trennton #274a52 erreicht auf
   der Fläche nur 1,6:1 und wäre als Rahmen nicht wahrnehmbar; deshalb nimmt
   die Kontur den helleren Familien-Kantenton #6f8f97 (4,4:1), den die
   Schulungsanmeldung für sichtbare Feldkanten verwendet.
   Alle Regeln bleiben einklassig, damit das Theme sie mit seinen
   `.site-main`-Regeln weiterhin zuverlässig überschreibt. */
@media (prefers-color-scheme: dark) {
	/*
	 * Fokusrahmen auf dunklem Grund. Das Token --euwb-focus steht in
	 * frontend.css auf #005fcc — dort richtig (5,98:1 gegen Weiss), hier aber
	 * nur 2,2 bis 2,9:1 je nach Flaeche und damit unter den von WCAG 1.4.11
	 * geforderten 3:1. #7fb3ff erreicht 6,2 bis 9,3:1.
	 *
	 * Getauscht wird auf denselben Selektoren, die das Token in frontend.css
	 * belegen. Global definiert die Familie solche Variablen bewusst nicht —
	 * ein eigener Test dieses Plugins wacht darueber.
	 */
	.euwb-legal-document,
	.euwb-cookie-page,
	.euwb-legal-links,
	.euwb-button,
	.euwb-consent,
	.euwb-consent-modal {
		--euwb-focus: var(--ab-focus, #7fb3ff);
	}

	.euwb-consent,
	.euwb-consent-modal {
		--euwb-depth-outline: #6f8f97;
		--euwb-depth-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55);
		--euwb-depth-shadow-hover: 11px 11px 0 rgba(0, 0, 0, 0.55);
	}

	/*
	 * Rückfallwerte für erzwungenes A&B-Design ohne vorhandene --ab-Variablen.
	 * Sind die Theme-Variablen vorhanden, haben sie Vorrang und bilden auch
	 * eine ausdrücklich manuell gewählte helle Darstellung korrekt ab.
	 */
	.euwb-consent-modal .euwb-consent__actions button[data-euwb-consent="necessary"] {
		--euwb-modal-secondary-border: var(--ab-field-border, #6f8f97);
		--euwb-modal-secondary-background: var(--ab-ground, #11282e);
		--euwb-modal-secondary-color: var(--ab-action, #72aee6);
		--euwb-modal-secondary-hover-border: var(--ab-action-hover, #72aee6);
		--euwb-modal-secondary-hover-background: var(--ab-surface, #16343b);
		--euwb-modal-secondary-hover-color: var(--ab-action-hover, #72aee6);
	}

	.euwb-consent,
	.euwb-consent-modal__panel {
		background: #11282e;
		color: #dbe9eb;
		border-color: var(--euwb-depth-outline);
	}

	.euwb-consent-category {
		background: #16343b;
		color: #dbe9eb;
		border-color: var(--euwb-depth-outline);
	}

	.euwb-consent__actions button[data-euwb-consent="necessary"],
	.euwb-consent__actions button[data-euwb-open-settings] {
		border-color: var(--euwb-depth-outline);
		background: #11282e;
		color: #72aee6;
	}

	@media (hover: hover) {
		.euwb-consent__actions button[data-euwb-consent="necessary"]:hover,
		.euwb-consent__actions button[data-euwb-open-settings]:hover {
			border-color: #72aee6;
			background: #16343b;
			color: #72aee6;
		}
	}
}

/* Auch im dunklen Design fällt die Ebene auf schmalen Bildschirmen flacher aus. */
@media (prefers-color-scheme: dark) and (max-width: 700px) {
	.euwb-consent,
	.euwb-consent-modal {
		--euwb-depth-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
		--euwb-depth-shadow-hover: 7px 7px 0 rgba(0, 0, 0, 0.55);
	}
}