/* * schwatzgelb-Branding für Klaro (überschreibt Variablen aus klaro.css) * Farben aus brand-v16: Gelb #edc13f, Dunkel #101217. * Reihenfolge im : klaro.css ZUERST, dann diese Datei. */ :root { --font-family: 'Barlow Semi Condensed', system-ui, sans-serif; --title-font-family: 'Barlow Semi Condensed', system-ui, sans-serif; --border-radius: 6px; /* dunkler Banner-/Modal-Hintergrund passend zum Dark-Theme */ --dark1: #101217; /* Hintergrund Notice/Modal */ --dark2: #1a1d24; /* Flächen/Boxen */ --dark3: #262a33; /* Trenner/Hover */ --light1: #f4f4f4; /* Haupttext */ --light2: #c9ccd2; /* Sekundärtext */ --light3: #9aa0a8; /* Akzent = BVB-Gelb (Buttons „Akzeptieren“, aktive Toggles) */ --green1: #edc13f; --green2: #e0b32c; --green3: #c99e1f; --button-text-color: #101217; /* dunkle Schrift auf gelbem Button */ /* Kein Blau: * --blue1 = „Auswahl speichern“ (cm-btn-info) → heller, kontrastreicher Button * --blue2 = Links in Embed-Platzhaltern → BVB-Gelb statt Blau */ --blue1: #f4f4f4; --blue2: #edc13f; /* dezente Ecke unten rechts */ --notice-position: fixed; --notice-right: 16px; --notice-bottom: 16px; --notice-left: auto; --notice-max-width: 380px; --box-shadow-color: rgba(0, 0, 0, .45); } /* * Kontrast-Fixes für das Dark-Theme. * klaro.css nutzt --dark2/--dark3 als TEXT-Farbe für sekundäre Inhalte – * auf unserem dunklen Hintergrund wäre das dunkel-auf-dunkel (unlesbar). * Daher hier explizit helle Schrift. */ /* Beschreibungstexte unter Zwecken/Diensten */ .klaro .cookie-modal .cm-list-description, .klaro .context-notice .cm-list-description, .klaro .cookie-notice .cm-list-description { color: var(--light2); } /* „purposes“-Zeile unter einzelnen Diensten */ .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes { color: var(--light2); } /* „Immer erforderlich“ / Opt-out-Hinweise neben dem Titel */ .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required { color: var(--light3); } /* „Realized with Klaro“-Footer-Link – dezent, aber sichtbar */ .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: var(--light3); } /* * „Ablehnen“ sichtbar gleichwertig neben „Akzeptieren“ (kein Dark-Pattern). * Braucht helle Schrift + etwas hellere Fläche, sonst dunkel-auf-dunkel. */ .klaro .cookie-notice .cn-decline, .klaro .cookie-modal .cm-btn-decline { opacity: 1; text-decoration: underline; color: var(--light1); background-color: var(--dark3); } /* * Consent-Layer über allem halten. * Der Site-Header/Nav nutzt z-index bis 9999 – Klaros Default (999/1000/1001) * lag darunter, wodurch das Menü das Modal überlappte. */ .klaro .cookie-notice:not(.cookie-modal-notice), .klaro .cookie-modal { z-index: 100000; } /* Kontextuelle Embed-Platzhalter (YouTube/Tweet/FB/Podigee) */ .klaro .context-notice { border-radius: var(--border-radius); background: var(--dark2); color: var(--light1); }