/* ========================================================================= Einwilligungsbanner im Corporate Design Die Bibliothek (orestbida/cookieconsent v3) bringt eigene Variablen mit. Wir setzen sie auf die Farben des Hildegard-Netzwerks um, statt ihr Stylesheet zu überschreiben — so bleibt ein Versionswechsel unproblematisch. Kontraste nachgerechnet: Weiß auf Bordeaux 11,34:1, Dunkelbraun auf Elfenbein 12,71:1, Moosgrün als Fokusfarbe wie im Rest der Seite. Taupe und Altrosa kommen hier nicht vor — beide tragen keinen Text. ========================================================================= */ #cc-main { --cc-font-family: var(--font-family-body); --cc-font-size-body: 0.95rem; --cc-bg: var(--color-ivory, #e6e3dc); --cc-primary-color: var(--color-ink, #241f1d); --cc-secondary-color: var(--color-text-muted, #5c5148); --cc-btn-primary-bg: var(--color-bordeaux, #780231); --cc-btn-primary-color: #fff; --cc-btn-primary-border-color: var(--color-bordeaux, #780231); --cc-btn-primary-hover-bg: #5c0225; --cc-btn-primary-hover-color: #fff; --cc-btn-primary-hover-border-color: #5c0225; --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: var(--color-bordeaux, #780231); --cc-btn-secondary-border-color: var(--color-bordeaux, #780231); --cc-btn-secondary-hover-bg: #fff; --cc-btn-secondary-hover-color: var(--color-bordeaux, #780231); --cc-btn-secondary-hover-border-color: var(--color-bordeaux, #780231); --cc-separator-border-color: rgba(36, 31, 29, 0.16); --cc-toggle-on-bg: var(--color-moss, #287126); --cc-toggle-off-bg: #8b8177; --cc-toggle-readonly-bg: #c6bfb6; --cc-toggle-on-knob-bg: #fff; --cc-toggle-off-knob-bg: #fff; /* Das Häkchen im Knopf des gesperrten Schalters („Notwendig"). Die Bibliothek leitet es auf `:root` aus ihrem eigenen `--cc-toggle-readonly-bg` ab und kam deshalb in #d5dee2 heraus — Buntton 198°, und damit blau, obwohl der Schalter darunter längst warm ist. Die Absicht der Bibliothek ist, dass es in der Schalterfarbe verschwindet; hier wird sie nur nachgezogen. */ --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg, #c6bfb6); --cc-link-color: var(--color-bordeaux, #780231); --cc-link-hover-color: #5c0225; /* Die Fußzeile des Banners war die letzte blaue Fläche im Projekt (E8, 13.08.2026). Die Bibliothek leitet sie mit `--cc-footer-bg: var(--cc-btn-secondary-bg)` aus ihrem eigenen Grundwert #eaeff2 ab — ein Blaugrau mit Buntton 202°, und damit genau die Farbfamilie, die im CD des Hildegard-Netzwerks nicht vorkommt. Auch die Trennlinie darüber (#e4eaed, 203°) und der Grundwert der Linie sind blaustichig. Drei Werte werden hier auf die warme Tonleiter der Seite gezogen: --ton-3 #f1ece3 als Fläche (derselbe Sandton, den die Karten auf weißem Grund tragen), die Trennlinie in derselben Rezeptur wie `--cc-separator-border-color`, und die Textfarbe der Fußzeile. ── Warum die Textfarbe MIT muss, obwohl sie oben schon gesetzt ist ── Die Bibliothek deklariert ihre Variablen auf `:root`, nicht auf `#cc-main` (nachgesehen in cookieconsent.css). Dort steht `--cc-footer-bg: var(--cc-btn-secondary-bg)` und `--cc-footer-color: var(--cc-secondary-color)`. Ein `var()` in einer Custom Property wird an der Stelle aufgelöst, an der die Property DEKLARIERT ist — also auf `:root`, mit den Werten der Bibliothek. Was danach in diesem `#cc-main`-Block steht, kommt zu spät: Der bereits ersetzte Wert erbt unverändert nach unten. Deshalb standen in der Fußzeile weiterhin die Bibliotheksfarben #eaeff2 (Fläche) und #5e6266 (Text, Buntton 200°), obwohl dieses Projekt `--cc-btn-secondary-bg` und `--cc-secondary-color` längst umgesetzt hatte. Im DOM gemessen, nicht gerechnet. Die drei `--cc-footer-*` müssen also direkt gesetzt werden — indirekt greift hier nichts. Kontraste in der Fußzeile (gerechnet, 13.08.2026): Bordeaux #780231 auf #f1ece3 9,64:1 (Rechtstext-Links) Dunkelbraun #241f1d 13,85:1 (beim Überfahren) Fließtext #5c5148 6,55:1 (vorher #5e6266: 5,23:1) Moosgrün #287126 als Fokusring 5,13:1 Vorher auf #eaeff2: 9,79 / 14,07 / 5,31 / 5,21:1 — der Wechsel kostet nichts und bringt beim Fließtext 1,3 Stufen dazu. */ --cc-footer-bg: var(--ton-3, #f1ece3); --cc-footer-color: var(--color-text-muted, #5c5148); --cc-footer-border-color: rgba(36, 31, 29, 0.16); /* ── Kategorieblöcke im Einstellungsfenster (13.08.2026) ──────────── Dieselbe `:root`-Falle wie bei der Fußzeile, nur an fünf weiteren Stellen. Im DOM gemessen standen dort durchweg die Blautöne der Bibliothek: Fläche und Rahmen #f0f4f7 (206°), beim Überfahren #e9eff4 (207°), aufgeklappt und überfahren #dee4e9 (207°). Die warmen Ersatzwerte sind luminanzgleich gewählt, damit die Abstufung der Bibliothek erhalten bleibt und die Blöcke sich genauso deutlich voneinander abheben wie vorher: Fläche #f0f4f7 (0,899) → --ton-3 #f1ece3 (0,842), 39° überfahren #e9eff4 (0,856) → #ebe6dd (0,795), 39° aufgeklappt #dee4e9 (0,769) → #e1dcd3 (0,719), 39° Rezeptur der zwei neuen Werte: --ton-3 mit 3 % beziehungsweise 8 % --color-ink gemischt. Sie bleiben damit in der Ton-Familie 37–40° der Seite und sind keine frei gegriffenen Farben. Die Rahmen laufen nicht mehr in der Flächenfarbe mit (bei der Bibliothek waren Fläche und Rahmen identisch, der Rahmen also unsichtbar), sondern in derselben Rezeptur wie `--cc-separator-border-color` — und werden beim Überfahren kräftiger. Auf #f1ece3 ergibt 0,16 rund 1,4:1, beim Überfahren 0,28 rund 1,9:1. Beides sind Zierlinien: Die Blöcke sind über Titel, Text und Schalter erkennbar, nicht über ihre Kante. Kontraste im Block (gerechnet, 13.08.2026): Titel Bordeaux #780231 auf #f1ece3 9,64:1 ✓ AAA Fließtext #5c5148 auf #f1ece3 6,55:1 ✓ AA Titel/Text auf #ebe6dd (überfahren) 9,12 / 6,20:1 ✓ Titel/Text auf #e1dcd3 (aufgeklappt) 8,31 / 5,64:1 ✓ Fokusring Moosgrün #287126 5,13 bis 4,42:1 ✓ (≥ 3:1) Vorher auf #f0f4f7: 10,25 / 6,97:1, aufgeklappt 8,85 / 6,01:1 — der Wechsel bleibt durchweg über AA und kostet keine Stufe. Die Schalter sind Bedienelemente und brauchen 3:1 (WCAG 1.4.11). Sie liegen IM Block, es zählt also dessen Fläche: an (Moosgrün #287126) 5,13:1 ✓ (vorher 5,46:1) aus (#8b8177) 3,24:1 ✓ (vorher 3,45:1) — knapp, deshalb den Blockton nie weiter aufhellen Knopf weiß auf „aus" 3,82:1 ✓ Der gesperrte Schalter („Notwendig", #c6bfb6, 1,55:1) fällt unter die Ausnahme für inaktive Bedienelemente in 1.4.11 — er ist bewusst nicht bedienbar und trägt zusätzlich das Häkchen. */ --cc-cookie-category-block-bg: var(--ton-3, #f1ece3); --cc-cookie-category-block-border: rgba(36, 31, 29, 0.16); --cc-cookie-category-block-hover-bg: #ebe6dd; --cc-cookie-category-block-hover-border: rgba(36, 31, 29, 0.28); --cc-cookie-category-expanded-block-hover-bg: #e1dcd3; --cc-section-category-border: rgba(36, 31, 29, 0.16); /* Vorsorglich, nicht wirksam: In dieser Fassung der Bibliothek (v3, assets/vendor/cookieconsent) zeichnet der Rollbalken aus `--cc-toggle-readonly-bg` und `--cc-toggle-off-bg` — beide stehen oben schon warm. `--cc-webkit-scrollbar-bg` wird zwar auf `:root` aus dem blauen `--cc-section-category-border` abgeleitet, aber von keiner Regel mehr benutzt (im Stylesheet nachgesehen). Der Wert steht hier, damit ein Versionswechsel das Blau nicht durch die Hintertür zurückbringt. */ --cc-webkit-scrollbar-bg: var(--cc-toggle-readonly-bg, #c6bfb6); --cc-webkit-scrollbar-hover-bg: var(--cc-toggle-off-bg, #8b8177); --cc-overlay-bg: rgba(36, 31, 29, 0.65); --cc-modal-border-radius: 0.5rem; --cc-btn-border-radius: 4px; } /* Überschriften des Banners in der Schrift der Seite */ #cc-main .cm__title, #cc-main .pm__title, #cc-main .pm__section-title { font-family: var(--font-family-heading); color: var(--color-bordeaux, #780231); } /* Links auf die Rechtstexte — sie müssen als Links zu ERKENNEN sein. Anlass: Rückmeldung der TuK vom 07.08.2026, der Verweis auf die Datenschutzerklärung stehe „nur als Fließtext" da. Er war tatsächlich schon ein funktionierender Link — er sah nur nicht so aus. Zwei Ursachen, beide in der Bibliothek: 1. FARBE. `--cc-link-color` vergibt cookieconsent ausschließlich über die Klasse `.cc__link` (`#cc-main .cc__link{color:var(--cc-link-color)}`). Ein blankes in der Fußzeile erbt stattdessen `--cc-footer-color` und kam damit in Grau #5e6266 heraus — derselbe Ton wie der Text daneben. Gemessen im DOM, nicht geschätzt. Deshalb trägt jeder Link aus einwilligung.js jetzt `class="cc__link"`. 2. UNTERSTREICHUNG. Die Bibliothek zeichnet sie als Verlauf im Hintergrund und blendet sie erst beim Überfahren ein (`background-size: 0 1px` im Ruhezustand, `100% 1px` bei :hover). Im Ruhezustand blieb also fetter Text ohne jedes Linkmerkmal. Punkt 2 ist nicht nur Geschmack: Der Link im Einstellungsfenster steht MITTEN IM SATZ. Ein Link, den innerhalb eines Textblocks allein die Farbe kenntlich macht, verstößt gegen WCAG 1.4.1 (Use of Color). Er braucht die Linie von Anfang an. Bewusst die Technik der Bibliothek weitergenutzt statt eigener `text-decoration` — sonst lägen zwei Unterstriche übereinander, sobald jemand darüberfährt. Kontraste im gerenderten Banner gemessen, nicht aus den Tokens gerechnet: Die Fußzeile des Banners hat NICHT die Elfenbeinfläche, sondern ihre eigene `--cc-footer-bg`. Sie stand bis zum 13.08.2026 auf dem Blaugrau #eaeff2 der Bibliothek (Bordeaux dort 9,79:1) und trägt seither --ton-3 #f1ece3 (Bordeaux 9,64:1) — siehe die Begründung oben im `#cc-main`-Block. Im Einstellungsfenster auf Elfenbein #e6e3dc 8,85:1, beim Überfahren Dunkelbraun #241f1d 13,85:1 in der Fußzeile bzw. 12,71:1 im Fenster. Alle weit über den 4,5:1 der Stufe AA. Zielflächen (WCAG 2.2, 2.5.8): Die Links sind 14 px hoch und damit unter 24 px. Sie bestehen über die Abstands-Ausnahme — gemessene Mittelpunktabstände 118 px und 53 px zum nächsten Ziel, und der nächste Knopf endet 18 px über ihnen. Deshalb hier bewusst KEIN `padding-block` wie bei `.footer__einstellungen`: Es würde den Unterstrich (`background-position: 0 100%`) vom Text abheben und löste ein Problem, das messbar keines ist. */ #cc-main .cc__link { background-size: 100% 1px; } /* Zwei Links statt einem — auf schmalen Schirmen müssen sie umbrechen dürfen. Die Bibliothek setzt `display: flex; flex-direction: row` ohne `flex-wrap`; mit „Datenschutzerklärung" und „Impressum" nebeneinander liefen sie bei 320 px sonst aus der Fußzeile heraus. */ #cc-main .cm__link-group { flex-wrap: wrap; row-gap: 0.35rem; } /* Derselbe Fokusring wie überall sonst — nicht der der Bibliothek. Die Schalter im Einstellungsfenster rendert cookieconsent v3 als `.toggle__icon` neben dem Ankreuzfeld, nicht als `.pm__toggle-label` — mit dem alten Selektor blieb dort Chromes blauer Standardring (M4). */ #cc-main button:focus-visible, #cc-main a:focus-visible, #cc-main input:focus-visible + .toggle__icon { outline: 3px solid var(--color-moss, #287126); outline-offset: 3px; } /* Der Knopf in der Fußzeile, über den sich die Entscheidung jederzeit ändern lässt. Er soll aussehen wie die anderen Fußzeilen-Links — und das hieß bis zum 04.08.2026 nur so im Kommentar: `padding: 0` stand gegen das `padding-block: 0.25rem`, das `.footer a` in hildegard.css trägt. Der Knopf saß dadurch vier Pixel höher als seine Nachbarn und war als Einziger unterstrichen. Das Innenmaß ist kein Zierrat: Es bringt die Zielfläche auf die 24 px, die WCAG 2.2 (2.5.8) verlangt — die Zeilenhöhe allein ergibt 18 px (identisch mit `.footer a` in hildegard.css:780-786). Wer hier etwas ändert, ändert es in beiden Dateien. Den Unterstrich beim Überfahren zeichnet seit dem 05.08.2026 animationen.css — dieselbe von links aufwachsende Linie wie bei den Nachbarlinks. Die frühere eigene `text-decoration: underline` ist deshalb hier raus: Sie kam sofort, saß in anderem Abstand und hat (weil einwilligung.css nach animationen.css lädt) die Animation überstimmt. */ .footer__einstellungen { background: none; border: 0; display: inline-block; padding: 0; padding-block: 0.25rem; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }