/** * Die Abriegelung des Hosts — und nichts sonst. * * WARUM DIESE DATEI UEBERHAUPT GETRENNT LIEGT, UND ZWAR EHRLICH: Nicht aus Ordnungsliebe, sondern * weil die Gruppe „Banner-CSS" mit 10.144 von 10.240 Byte praktisch voll war und die Begruendung * unten rund 1,2 KB kostet. Es gab drei Wege. Die Grenze anzuheben schliesst CLAUDE.md * ausdruecklich aus. Die Begruendung zu streichen, um Bytes zu sparen, ist der Tausch, den Plan * 02-04 als den schlechtesten denkbaren bezeichnet hat — und ausgerechnet HIER waere er am * teuersten: Wer die naechste Zeile `!important` fuer eine Unart haelt und sie entfernt, macht * damit still Erfolgskriterium 3 kaputt, und niemand sieht es an einer Datei, die der Browser * ohnehin liest. Bleibt der dritte Weg, derselbe wie bei CC-43, CC-45, CC-49 und CC-50: eine * eigene Datei mit eigener Gruppe und eigener Grenze. * * DAS IST ETWAS ANDERES ALS EINE ANGEHOBENE GRENZE, und der Unterschied ist die ganze * Rechtfertigung: Die Trennung folgt einer Sache, nicht der Bequemlichkeit. Hier steht, was den * HOST betrifft — das eine Element, das IM DOKUMENT liegt und deshalb als einziges von aussen * erreichbar ist. In `banner.css` steht, was den INHALT betrifft; dorthin kommt kein fremder * Selektor. Zwei verschiedene Angriffsflaechen, zwei Dateien. * * SIE WIRD ALS ERSTE DER BEIDEN STILDATEIEN IN DEN SHADOW DOM KOPIERT (`src/Frontend/Banner.php`). * Auf die Reihenfolge kommt es fuer die Wirkung NICHT an — alle Zusicherungen hier sind wichtige * Deklarationen und gewinnen gegen jede gewoehnliche. Sie steht trotzdem vorn, damit beim Lesen * zuerst kommt, was traegt. * * DIE TOKEN STEHEN HIER UND NICHT IN `banner.css`, obwohl sie Gestaltung sind: Sie haengen am * `:host`, und `all: initial` haette sie sonst zwischen zwei Dateien verteilt — eine Regel, deren * Wirkung davon abhaengt, ob die andere Datei geladen ist. Ausgenommen ist der Dunkelmodus: Er * ueberschreibt nur Farbwerte und steht weiterhin in `banner.css`. * * WARUM `assets/js/banner-start.js` DEN HOST INLINE AUF `display: none` SETZT — die Begruendung * steht hier, weil im kritischen Pfad jedes Kommentarbyte jeder Besucher mitlaedt: * * Der Host wird als ERSTES Kind von `body` eingehaengt (D-06), lange bevor diese Datei geladen * ist — sie steht als `` IM Shadow DOM und wird erst mit ihm angefordert. In dieser Luecke * ist der Host ein gewoehnlicher `div` mit dem gesamten Bannerinhalt darin: Er liegt IM FLUSS und * schiebt die ganze Seite nach unten. Gemessen in Plan 02-06 mit dem Verschiebungsbeobachter des * Browsers: 0,242 zusaetzliche kumulierte Verschiebung gegenueber derselben Seite ohne das * Plugin. Der Zielwert aus CLAUDE.md und Erfolgskriterium 4 ist null. * * DIE INLINE-ZEILE WIRD NIE WIEDER ENTFERNT, und das ist Absicht: `display: block !important` * unten gewinnt gegen sie, sobald diese Datei da ist. Laedt sie NICHT, bleibt das Banner * verborgen — und das ist die sichere Richtung. Ein unformatiertes Banner haette zwei * verschieden breite Schaltflaechen; die Gleichrangigkeit aus D-13 waere verletzt, und eine * damit eingeholte Einwilligung waere unwirksam. Lieber kein Banner als ein zerlegtes: dieselbe * Abwaegung, die `banner-start.js` schon fuer `attachShadow` trifft. * * @package CookieEinwilligung */ :host { /* * Zuerst die Abriegelung, damit alles Weitere sie ueberschreibt. * * `!important` IST HIER KEINE UNART, SONDERN DIE GANZE ABRIEGELUNG — und gemessen, nicht * vermutet (Plan 02-06, 2026-09-04): Ohne es hat das absichtlich aggressive Testtheme dem * Banner Schriftgroesse, Schriftfamilie und Zeilenhoehe aufgezwungen und dem Host seine * Verankerung genommen (`position: fixed` wurde `static`, `display: block` wurde `inline`). * Der Grund steht in der Kaskade: Der Host ist ein `div` IM DOKUMENT. Eine gewoehnliche * Deklaration am `:host` verliert dort gegen jede Deklaration der Seite; eine WICHTIGE * gewinnt gegen jede — fuer wichtige Deklarationen dreht die Kaskade die Reihenfolge um und * gibt dem inneren Baum den Vorrang. Genau diese Umkehr ist der einzige Weg, einen Host * abzuriegeln. * * DESHALB TRAEGT AUCH JEDE FOLGENDE ZEILE `!important`: `all: initial !important` setzt sonst * alles zurueck, was danach gewoehnlich gesetzt wird — innerhalb einer Regel gewinnt nicht * die spaetere Zeile, sondern die wichtigere. */ all: initial !important; /* Flaechen und Text (DESIGN.md, unveraendert). */ --ce-farbe-flaeche: #ffffff; --ce-farbe-flaeche-leise: #f5f5f7; --ce-farbe-text: #1d1d20; --ce-farbe-text-leise: #5c5c66; --ce-farbe-linie: #e0e0e6; /* Aktion — bewusst EINE Akzentfarbe (DESIGN.md, unveraendert). */ --ce-farbe-akzent: #2b6cb0; --ce-farbe-akzent-text: #ffffff; --ce-farbe-fokus: #1a4a80; /* * DIESELBEN FARBWERTE FUER BEIDE GLEICHRANGIGEN KNOEPFE — die einzige Zuweisung, bei der die * Gleichheit des Kontrasts nicht gerechnet, sondern bewiesen ist (D-13). Getrennte Token, * damit eine Seite sie einzeln anpassen KANN und Plan 02-03 an den BERECHNETEN Werten misst. */ --ce-farbe-zulassen: var(--ce-farbe-akzent); --ce-farbe-zulassen-text: var(--ce-farbe-akzent-text); --ce-farbe-ablehnen: var(--ce-farbe-akzent); --ce-farbe-ablehnen-text: var(--ce-farbe-akzent-text); /* Abstaende: Vielfache von 4 (DESIGN.md, unveraendert). */ --ce-abstand-1: 4px; --ce-abstand-2: 8px; --ce-abstand-3: 12px; --ce-abstand-4: 16px; --ce-abstand-6: 24px; --ce-abstand-8: 32px; /* Form (DESIGN.md, unveraendert). */ --ce-radius: 10px; --ce-radius-knopf: 8px; --ce-schatten: 0 4px 24px rgba(0, 0, 0, .14); /* DESIGN.md setzt `inherit`; hinter `all: initial` erbt der Host nichts mehr, das liefe ins * Leere. Wer die Schrift der Seite will, setzt das Token auf `:root`. */ --ce-schrift: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ce-groesse-text: 0.9375em; /* 15px bei Basis 16px */ --ce-groesse-klein: 0.8125em; /* 13px */ --ce-groesse-titel: 1.125em; /* 18px */ /* * JE KETTE GENAU EIN GROESSENTOKEN, UND ZWAR AM TEXTELEMENT (08-13). Die drei Groessen sind * `em` und rechnen gegen die Schriftgroesse DES ELEMENTS, an dem sie stehen; ihre * Kommentarwerte gelten gegen die `font-size: medium` des Hosts weiter unten. Wer sie an * einem BEHAELTER setzt, zerstoert diesen Bezugspunkt fuer alles darin — bis zum 09.09.2026 * trugen `.ce-leiste` und `.ce-dialog` das Text-Token, und Welle 08-01 hat daraus zwoelf * Befunde gemessen, davon zwei Verstoesse gegen WCAG 1.4.4 (9,9 statt 12 px). * 1. Behaelter setzen KEINE Schriftgroesse und geben die 16 px des Hosts weiter. * 2. Jedes Textelement setzt GENAU EIN Token — dann ist der Wert im Token wieder der Wert * auf dem Bildschirm. * 3. Was schon IN einem Textelement liegt (`.ce-cookies`, `.ce-dienst__name`), traegt * `font-size: inherit`; `inherit` ist keine Laenge und multipliziert nichts. * 4. WEGLASSEN IST KEIN ERSATZ: Ein `button` erbt die Groesse nicht (gemessen 13,3333 px, * waechst nicht mit). `.ce-knopf` und `.ce-dialogknopf` tragen das Token ausdruecklich. * Gemessen von `tests/js/barrierefreiheit.mjs` (1-3) und `gleichrangigkeit-statisch.mjs` (4); * die lange Begruendung samt der drei gemessenen Fehlzustaende steht in der zweiten Datei. */ --ce-zeilenhoehe: 1.55; --ce-staerke-titel: 600; --ce-staerke-knopf: 600; /* Lage (DESIGN.md, unveraendert). */ --ce-z-index: 999999; --ce-breite-max: min(560px, calc(100vw - 32px)); /* Zusaetzliche Token: Nach REQ-10 darf KEIN Mass fest in einer Regel stehen, auch keines, das * DESIGN.md nicht nennt. `--ce-breite-leiste` ist die Inhaltsspalte, `--ce-breite-max` die * Lesebreite darin. */ --ce-breite-leiste: 68em; --ce-linie-staerke: 1px; --ce-fokus-staerke: 2px; --ce-fokus-abstand: 2px; /* PIXEL, als einziges Mass hier: `2.75em` hing an der Schriftgroesse des Knopfes und ergab * gemessen 38,7 statt 44 px (02-03). Untergrenze, keine Deckelung. */ --ce-klickflaeche: 44px; --ce-dauer: 150ms; /* * Was nach `all: initial` ausdruecklich wieder gesetzt werden muss — siehe oben, jede Zeile * wichtig. * * `font-size` STEHT ABSICHTLICH EINZELN UND NICHT IN DER `font`-KURZFORM: Der Pruefer aus Plan * 02-03 sucht im `:host`-Block genau diese Deklaration und rechnet jede `em`-Laenge dagegen. * Mit der Kurzform faende er sie nicht und meldete „jede em-Laenge waere geraten" — eine * Ersparnis von zwanzig Byte gegen eine Zusicherung, die den Rest der Phase traegt. */ position: fixed !important; inset: auto 0 0 0 !important; z-index: var(--ce-z-index) !important; display: block !important; box-sizing: border-box !important; font-family: var(--ce-schrift) !important; font-size: medium !important; font-weight: normal !important; line-height: var(--ce-zeilenhoehe) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--ce-farbe-text) !important; text-align: start !important; /* KEIN `layout` HIER — es macht den Host zum Bezugsrahmen fuer `position: fixed` darin, und der * Dialog rechnete dadurch Position gegen den Host und Hoehe gegen das Fenster: „Auswahl * speichern" war unerreichbar (gemeldet 10.09.2026). Messwerte, Herleitung und der Riegel: * tests/einheit/88-abriegelung-contain.php. `style` bleibt und erzeugt keinen Bezugsrahmen. */ contain: style !important; } /* Verborgener Ausgangszustand: Der kritische Pfad kennt den Einwilligungszustand nicht. * `assets/js/banner.js` nimmt das Attribut weg, sobald `BannerRegel.sichtbar()` dafuer spricht. */ :host([data-ce-verborgen]) { display: none !important; } /* WIDERRUF BEI VERBORGENEM BANNER (Plan 02-05): Wer schon entschieden hat, sieht kein Banner — * und der Dialog liegt darin. `assets/js/banner.js` nimmt dafuer das Verbergen vom Host und setzt * stattdessen dieses Attribut. Das Banner selbst bleibt weg; es wiederkehren zu lassen waere das * Draengen, das D-04 ausschliesst. */ :host([data-ce-nur-dialog]) .ce-leiste { display: none; }