/**
 * Das Aussehen des Banners INNERHALB des Shadow DOM (D-01, DESIGN.md).
 *
 * WAS HIER NICHT MEHR STEHT: die Abriegelung des Hosts. Sie liegt seit Plan 02-06 in
 * `assets/css/abriegelung.css` mit eigenem Budget — der Grund steht ausfuehrlich in deren Kopf.
 * Kurz: Ein Shadow DOM schuetzt vor SELEKTOREN von aussen, nicht vor VERERBUNG durch den Host,
 * und der Host ist ein `div` im Dokument. Alles, was diese Datei hier tut, gilt nur, WEIL dort
 * abgeriegelt wird.
 *
 * FUER DIE REGELN IN DIESER DATEI GIBT ES KEINEN WEG VON AUSSEN. Sie treffen ausschliesslich
 * Elemente im Shadow DOM; ein fremder Selektor erreicht sie nicht. Deshalb steht hier auch kein
 * einziges `!important` — es waere wirkungslose Vorsicht und verdeckte die Stellen, an denen es
 * wirklich traegt.
 *
 * BASIS `medium`, GROESSEN IN `em` STATT `rem` (PL-05): `rem` haengt am Wurzelelement DER SEITE,
 * und genau das trifft ein Theme mit `!important` ebenfalls — das Banner skalierte mit, der
 * verbreitete `62.5%`-Reset in die Gegenrichtung. `medium` ist die vom BENUTZER eingestellte
 * Groesse. Abweichung von der EINHEIT in DESIGN.md, nicht von den WERTEN. Eine Ausnahme:
 * `--ce-klickflaeche` steht in Pixeln, Begruendung in `abriegelung.css`.
 *
 * BUDGET: Die Gruppe „Banner-CSS" misst alle `assets/css/banner*.css` zusammen gegen 10.240
 * Byte. Der Dialog aus Plan 02-04 kommt NICHT hierher, sondern nach `assets/css/dialog.css`
 * mit eigenem Budget (CC-43); die Abriegelung hat seit 02-06 ebenfalls ihre eigene Gruppe.
 * Wer hier ergaenzt, sieht im Tor, was bleibt.
 *
 * @package CookieEinwilligung
 */
*,
*::before,
*::after {
	box-sizing: inherit;
}

.ce-leiste {
	background-color: var(--ce-farbe-flaeche);
	border-top: var(--ce-linie-staerke) solid var(--ce-farbe-linie);
	border-radius: var(--ce-radius) var(--ce-radius) 0 0;
	box-shadow: var(--ce-schatten);
	padding: var(--ce-abstand-4);
	margin: 0 auto;
	max-width: var(--ce-breite-leiste);
	animation: ce-einblenden var(--ce-dauer) ease-out;
}

@keyframes ce-einblenden {
	from { opacity: 0; }
	to { opacity: 1; }
}

/*
 * VERBORGEN, ABER NICHT AUS DER TABULATORREIHENFOLGE GENOMMEN: `display: none` und
 * `visibility: hidden` taeten beides — ein Sprunglink, den man nicht anspringen kann, ist keiner
 * mehr (D-06). Dieselben Regeln tragen die hoefliche Ansage: gehoert, nicht gesehen.
 */
.ce-sprunglink,
.ce-ansage {
	position: absolute;
	width: var(--ce-linie-staerke);
	height: var(--ce-linie-staerke);
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	color: var(--ce-farbe-text);
}

/* EIGENE REGEL FUER DIE ANSAGE: Sie liegt in der Leiste und hatte deren Groesse; der Sprunglink
 * liegt daneben am Host und behaelt seine. Ohne diese Zeile waere aus 15 still 16 px geworden. */
.ce-ansage {
	font-size: var(--ce-groesse-text);
}

.ce-sprunglink:focus-visible {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	padding: var(--ce-abstand-2) var(--ce-abstand-3);
	margin-bottom: var(--ce-abstand-2);
	overflow: visible;
	clip-path: none;
	background-color: var(--ce-farbe-flaeche-leise);
	border-radius: var(--ce-radius-knopf);
}

/* Text: hoechstens drei Groessen (DESIGN.md Regel 3). */

.ce-titel {
	margin: 0 0 var(--ce-abstand-2) 0;
	font-size: var(--ce-groesse-titel);
	font-weight: var(--ce-staerke-titel);
	line-height: var(--ce-zeilenhoehe);
	color: var(--ce-farbe-text);
}

/* Token hier, nicht an `.ce-leiste` — siehe abriegelung.css. */
.ce-text {
	max-width: var(--ce-breite-max);
	margin: 0 0 var(--ce-abstand-3) 0;
	font-size: var(--ce-groesse-text);
	overflow-wrap: break-word;
}

.ce-klein {
	max-width: var(--ce-breite-max);
	margin: 0 0 var(--ce-abstand-3) 0;
	font-size: var(--ce-groesse-klein);
	color: var(--ce-farbe-text-leise);
	overflow-wrap: break-word;
}

.ce-klein ul {
	margin: var(--ce-abstand-1) 0 0 0;
	padding-inline-start: var(--ce-abstand-4);
}

.ce-verweis {
	color: var(--ce-farbe-akzent);
	text-decoration: underline;
}

/*
 * BEIDE GLEICHRANGIGEN KNOEPFE BRECHEN GEMEINSAM UM, NIE EINER ALLEIN. Der aeussere Behaelter darf
 * umbrechen, das Paar darin bleibt eine Einheit. Ohne diese Klammer bliebe „Alle zulassen" neben
 * „Einstellungen" stehen, waehrend „Alle ablehnen" eine Zeile tiefer rutscht — auf schmalen
 * Geraeten waere die Gleichrangigkeit damit aufgehoben, und DSK Rn. 130 verlangt Erkennbarkeit
 * „unabhaengig von der Bildschirmgroesse". Unter etwa 320 px nehmen beide dieselbe volle Breite.
 */
.ce-knoepfe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ce-abstand-2);
	margin: 0;
}

.ce-knopfpaar {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
	gap: var(--ce-abstand-2);
}

/* KEIN `min-width: 0` hier: spezifischer als `.ce-knopf`, es hob die 44 px auf (02-03). Noetig
 * ist es nicht — `.ce-knopf` setzt selbst ein `min-width`, das die automatische Breite ersetzt. */
.ce-knopfpaar > .ce-knopf {
	flex: 1 1 11em;
}

/*
 * DIE GRUNDKLASSE TRAEGT JEDE EIGENSCHAFT, DIE GROESSE, SCHRIFT, FLAECHE ODER KONTRAST
 * BEEINFLUSST; die Modifikatoren setzen nur die beiden Farbwerte. Plan 02-03 setzt diese Struktur
 * voraus — ein Unterschied ueber einen dritten Selektor gilt dort als Befund.
 *
 * HIER STEHT DAS TOKEN SELBST (D-02-03-01, geschlossen in 05-08, neu geschnitten in 08-13). Drei
 * Fassungen sind moeglich, zwei davon sind IM BROWSER GEMESSEN falsch:
 *
 * 1. DIE DEKLARATION ERSATZLOS STREICHEN — gemessen 13,3333 px statt 15. EIN `button` ERBT DIE
 *    SCHRIFTGROESSE NICHT: Das Vorgabestilblatt des Browsers setzt Formularelementen eine eigene
 *    (`font: 400 13.3333px Arial`), und Vererbung greift nur, wo gar keine Deklaration steht.
 *    Schlimmer noch: Der Wert war danach FEST — bei verdoppelter Basisgroesse wuchsen Leiste und
 *    Fliesstext auf 30 px, die Schaltflaechen blieben bei 13,3333 (WCAG 1.4.4). `font-family:
 *    inherit` einen Zeilenumbruch weiter oben steht aus genau demselben Grund seit Plan 02-03.
 *
 * 2. `font-size: inherit` — der Zustand vom 05.09. bis zum 09.09.2026. Er war richtig, SOLANGE
 *    `.ce-leiste` das Token trug. Seit Welle 08-13 traegt sie es nicht mehr (der Grund steht in
 *    abriegelung.css: ein Token am Behaelter verschiebt den Bezugspunkt jedes Kindes und hat
 *    zwoelf Befunde erzeugt). `inherit` naehme jetzt die 16 px des Hosts, und die 15 aus DESIGN.md
 *    waeren still verschwunden — zusammen mit der Wirkung des Reglers auf die Schaltflaechen.
 *
 * 3. RICHTIG IST DAS TOKEN AN DIESER STELLE: genau eine Anwendung auf der Kette Host → Leiste →
 *    Knopf, gegen die bekannten 16 px des Hosts gerechnet, und der Regler wirkt wieder.
 *
 * Der stehende Fall dazu liegt in `tests/js/gleichrangigkeit-statisch.mjs` und misst die
 * DEKLARATIONEN des Blocks, nicht diesen Text — sonst loeste dieser Kommentar ihn selbst aus. Die
 * gerenderte Zahl misst `tests/integration/63-bannerbedienung.php` gegen den Fliesstext.
 */
.ce-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ce-klickflaeche);
	min-width: var(--ce-klickflaeche);
	padding: var(--ce-abstand-2) var(--ce-abstand-4);
	border: 0;
	border-radius: var(--ce-radius-knopf);
	font-family: inherit;
	font-size: var(--ce-groesse-text);
	font-weight: var(--ce-staerke-knopf);
	line-height: var(--ce-zeilenhoehe);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: transparent;
	color: var(--ce-farbe-text);
}

.ce-knopf--zulassen {
	background-color: var(--ce-farbe-zulassen);
	color: var(--ce-farbe-zulassen-text);
}

.ce-knopf--ablehnen {
	background-color: var(--ce-farbe-ablehnen);
	color: var(--ce-farbe-ablehnen-text);
}

/* „Einstellungen": sichtbar, aber optisch untergeordnet (DESIGN.md Regel 2, D-13) — KEINER der
 * beiden gleichrangigen Knoepfe. Die Klickflaeche kommt unveraendert aus der Grundklasse. */
.ce-knopf--einstellungen {
	background-color: transparent;
	color: var(--ce-farbe-text-leise);
	text-decoration: underline;
}

/* Fokus ist immer sichtbar (DESIGN.md). Kein `outline: none` ohne Ersatz. */
.ce-knopf:focus-visible,
.ce-verweis:focus-visible,
.ce-sprunglink:focus-visible {
	outline: var(--ce-fokus-staerke) solid var(--ce-farbe-fokus);
	outline-offset: var(--ce-fokus-abstand);
}

/* Dunkelmodus: AUSSCHLIESSLICH TOKEN, KEINE REGELN. Beide Knoepfe haben auch hier zwangslaeufig
 * denselben Kontrast. Hier bliebe ein Farbtrick am ehesten unbemerkt — 02-03 misst ihn getrennt. */
@media (prefers-color-scheme: dark) {
	:host {
		--ce-farbe-flaeche: #1d1d20;
		--ce-farbe-flaeche-leise: #26262b;
		--ce-farbe-text: #f2f2f5;
		--ce-farbe-text-leise: #b6b6c0;
		--ce-farbe-linie: #3a3a42;
		--ce-farbe-akzent: #63a2e0;
		--ce-farbe-akzent-text: #10131a;
		--ce-farbe-fokus: #9cc6f0;
		--ce-schatten: 0 4px 24px rgba(0, 0, 0, .55);
	}
}

/* Bewegung ist optional (DESIGN.md Regel 5). */
@media (prefers-reduced-motion: reduce) {
	.ce-leiste {
		animation: none;
	}
}