/** * Klaro! Consent-Banner — Brainfood-Brand-Overrides. * * Klaro v0.7.x nutzt CSS Custom Properties (--green1, --dark1, --light1, …). * Wir überschreiben diese auf der `.klaro`-Wurzel — alle Klaro-Defaults erben * dann automatisch Brand-Farben. Geometrie (Padding, Border-Radius, Font), * die Klaro hartcodiert hat, kommt darunter als gezielte Klassen-Overrides. * * Brand-Mapping: * --green1 → #00c3d6 (Primary, »Akzeptieren«, aktive Toggles, Links) * --green2 → #263237 (Secondary, »Auswahl bestätigen«) * --blue1 → transparent (Info wird Ghost-Button — kein eigenes Türkis) * --dark1 → #ffffff (Notice + Modal BG) * --light1 → #263237 (Body-Text) * --dark2/--light2 → gray-20 (Borders) * --title-font-family → DM Serif Display */ /* ════════════════════════════════════════════════════════════════════════ * CSS-VARIABLEN-OVERRIDE (greift in allen Klaro-Default-Regeln) * ═════════════════════════════════════════════════════════════════════ */ .klaro { /* Akzente */ --green1: #00c3d6; /* turquoise — Primary */ --green2: #263237; /* gray-dark — Secondary/Save */ --green3: #00c3d6; /* Focus */ --blue1: #263237; /* Info-Button → wird per Klasse Ghost */ --blue2: #00a5b6; /* turquoise-dark */ /* Surfaces & Borders */ --dark1: #ffffff; /* Banner + Modal BG (war #333) */ --dark2: #d4d6d7; /* gray-20 — borders, dividers */ --dark3: #515b5f; /* gray-80 — meta-text */ --light1: #263237; /* Text-Color (war #fafafa) */ --light2: #d4d6d7; /* alt-borders */ --light3: #7d8487; /* gray-60 — purpose/required-meta */ --white1: #ffffff; --white2: #f7f7f5; /* beige-light — toggle track */ --white3: #e6e6e6; --button-text-color: #ffffff; /* Typo */ --title-font-family: 'DM Serif Display', Georgia, serif; --font-size: 14.5px; /* Border (Buttons), Modal-Radius wird separat überschrieben */ --border-radius: 999px; --border-style: solid; --border-width: 1px; /* Bottom-Banner: full-width, kein Float, kein Radius */ --notice-position: fixed; --notice-right: 0; --notice-left: 0; --notice-bottom: 0; --notice-top: auto; --notice-max-width: 100%; } /* ════════════════════════════════════════════════════════════════════════ * COOKIE-NOTICE (Bottom-Banner) — Geometrie + Typo * * Klaro setzt mit `theme: 'wide'` zur Laufzeit Inline-CSS-Vars auf : * --notice-left: 20px, --notice-right: auto, --notice-max-width: calc(100vw - 60px) * → asymmetrischer Card-Look mit Rechts-Drift. Wir überschreiben die * computed Properties direkt mit !important (statt die Vars zu fighten). * ═════════════════════════════════════════════════════════════════════ */ .klaro .cookie-notice:not(.cookie-modal-notice) { font-family: 'Open Sans', system-ui, sans-serif; border-top: 1px solid var(--bf-gray-20); border-radius: 0 !important; /* Override Klaro-Default 4px */ box-shadow: 0 -8px 28px rgba(11,105,110,.08); color: var(--bf-gray-dark); } /* Desktop: Klaro's @media(min-width:1024px) macht den Banner zu einer 20px- * inset Card mit max-width:calc(100vw-60px). Wir zwingen Full-Width zurück. */ @media (min-width: 1024px) { .klaro .cookie-notice:not(.cookie-modal-notice) { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; max-width: 100% !important; border-radius: 0 !important; } } /* Cookie-Banner ist ein eigenständiges UI-Element (kein Content-Section) → * Inhalt soll bündig über die volle Bannerbreite laufen, NICHT auf 1240px * zentriert (sonst wirkt's auf breiten Screens als "massive Platz links"). * Großzügige Horizontal- + Vertikal-Padding für ruhiges Setting. */ /* Padding sitzt direkt auf #klaro-cookie-notice (User-Wunsch), .cn-body * räumt seine eigene Padding ab, damit sich nichts addiert. */ #klaro-cookie-notice { padding: 20px; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 0; max-width: none; margin: 0; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p, .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body strong { color: var(--bf-gray-80); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-changes { color: var(--bf-pink); text-decoration: none; font-weight: 600; } /* Links: Brand-Farbe, KEINE Underline (User-Wunsch). */ .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a, .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more, .klaro .cookie-notice:not(.cookie-modal-notice) .cm-link { color: var(--bf-turquoise-dark) !important; text-decoration: none !important; border-bottom: 0 !important; font-weight: 600; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a:hover, .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more:hover { color: var(--bf-gray-dark) !important; } /* cn-ok: Link links + Buttons rechts (space-between statt rechts-flush). */ .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { display: flex; flex-flow: row wrap; gap: 10px; align-items: center; justify-content: space-between !important; margin-top: 12px; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-learn-more { flex-grow: 0; /* Klaro setzt flex-grow:1 — verursacht den Rechts-Drift */ margin-right: auto; /* drängt Buttons rechts */ } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display: inline-flex; gap: 10px; margin: 0; } /* ════════════════════════════════════════════════════════════════════════ * BUTTONS — exakte Geometrie wie buttons.css (.btn / .btn--*) * Klaro's defaults: padding:.4em; font-size:1em; radius var(--border-radius) * — überschreiben wir mit der site-weiten Button-Geometrie. * ═════════════════════════════════════════════════════════════════════ */ .klaro .cookie-notice .cm-btn, .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11.5px 22px !important; /* override .4em */ font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; font-size: 14.5px !important; /* override 1em */ letter-spacing: -0.005em; line-height: 1.2; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; margin: 0; transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease); } .klaro .cookie-notice .cm-btn:hover:not([disabled]), .klaro .cookie-modal .cm-btn:hover:not([disabled]), .klaro .context-notice .cm-btn:hover:not([disabled]) { transform: translateY(-2px); } .klaro .cookie-notice .cm-btn:active, .klaro .cookie-modal .cm-btn:active { transform: translateY(0); transition-duration: .08s; } .klaro .cm-btn:focus-visible { outline: 2px solid var(--bf-turquoise); outline-offset: 2px; } /* ── PRIMARY (Akzeptieren / Akzeptieren+OK) ────────────────────────────── */ .klaro .cookie-notice .cm-btn.cm-btn-success, .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success { background-color: var(--bf-turquoise); color: #fff; border-color: var(--bf-turquoise); } .klaro .cookie-notice .cm-btn.cm-btn-success:hover, .klaro .cookie-modal .cm-btn.cm-btn-success:hover { background-color: var(--bf-turquoise-dark); border-color: var(--bf-turquoise-dark); box-shadow: 0 10px 24px rgba(0, 195, 214, 0.35); } /* ── SECONDARY (Auswahl bestätigen / Speichern) — anthrazit ────────────── * Klaro rendert "Auswahl bestätigen" mit BOTH classes: * "cm-btn cm-btn-success cm-btn-info cm-btn-accept" * Die Info-Ghost-Regel weiter unten würde den Button sonst grau-auf-weiß * machen — daher hier mit höherer Spezifität (3 Klassen kombiniert) + * !important den anthrazit-Style erzwingen. * cm-btn-success-var bleibt für das Context-Notice (per-Service-Banner). */ .klaro .cookie-notice .cm-btn.cm-btn-success.cm-btn-info.cm-btn-accept, .klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-info.cm-btn-accept, .klaro .cookie-notice .cm-btn.cm-btn-success-var, .klaro .cookie-modal .cm-btn.cm-btn-success-var, .klaro .context-notice .cm-btn.cm-btn-success-var { background-color: var(--bf-gray-dark) !important; color: #fff !important; border-color: var(--bf-gray-dark) !important; } .klaro .cookie-notice .cm-btn.cm-btn-success.cm-btn-info.cm-btn-accept:hover, .klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-info.cm-btn-accept:hover, .klaro .cookie-notice .cm-btn.cm-btn-success-var:hover, .klaro .cookie-modal .cm-btn.cm-btn-success-var:hover { background-color: var(--bf-green-dark-1) !important; border-color: var(--bf-green-dark-1) !important; box-shadow: 0 10px 24px rgba(38, 50, 55, 0.28); } /* ── INFO + DECLINE als GHOST (kein türkises Outline) ────────────────── */ .klaro .cookie-notice .cm-btn.cm-btn-info, .klaro .cookie-modal .cm-btn.cm-btn-info, .klaro .context-notice .cm-btn.cm-btn-info, .klaro .cookie-notice .cm-btn.cm-btn-decline, .klaro .cookie-modal .cm-btn.cm-btn-decline, .klaro .context-notice .cm-btn.cm-btn-decline, .klaro .cookie-notice .cm-btn.cm-btn-danger, .klaro .cookie-modal .cm-btn.cm-btn-danger { background-color: transparent; color: var(--bf-gray-dark); border-color: var(--bf-gray-20); } .klaro .cookie-notice .cm-btn.cm-btn-info:hover, .klaro .cookie-modal .cm-btn.cm-btn-info:hover, .klaro .cookie-notice .cm-btn.cm-btn-decline:hover, .klaro .cookie-modal .cm-btn.cm-btn-decline:hover, .klaro .cookie-notice .cm-btn.cm-btn-danger:hover, .klaro .cookie-modal .cm-btn.cm-btn-danger:hover { background-color: var(--bf-beige-light); color: var(--bf-gray-dark); border-color: var(--bf-gray-dark); box-shadow: 0 10px 24px rgba(38, 50, 55, 0.14); } /* ── Close-X (Modal-Header) ───────────────────────────────────────────── */ .klaro .cookie-modal .cm-btn.cm-btn-close, .klaro .cookie-notice .cm-btn.cm-btn-close { background-color: transparent !important; border: 0 !important; padding: 8px !important; color: var(--bf-gray-60); } .klaro .cookie-modal .cm-btn.cm-btn-close:hover { color: var(--bf-gray-dark); transform: none; box-shadow: none; } /* ── Banner-Link „Einstellungen anpassen" (Inline-Text-Link) ─────────── */ .klaro .cookie-notice .cm-link.cn-learn-more, .klaro .cookie-notice .cn-body .cn-learn-more { margin-right: 0; vertical-align: middle; border-bottom: 1px solid currentColor; color: var(--bf-turquoise-dark); } /* ════════════════════════════════════════════════════════════════════════ * MODAL (Settings) — Padding + Typo * ═════════════════════════════════════════════════════════════════════ */ .klaro .cookie-modal .cm-bg { background: rgba(38, 50, 55, 0.45); } .klaro .cookie-modal .cm-modal.cm-klaro { font-family: 'Open Sans', system-ui, sans-serif; border-radius: var(--radius-lg) !important; /* Modal: rund, NICHT pill */ box-shadow: var(--shadow-lg); max-width: 720px; width: 92%; overflow: hidden; } /* großzügige Innenabstände */ .klaro .cookie-modal .cm-header { padding: 32px 40px 20px !important; border-bottom: 1px solid var(--bf-gray-20) !important; border-bottom-color: var(--bf-gray-20) !important; } .klaro .cookie-modal .cm-body { padding: 24px 40px 12px !important; } .klaro .cookie-modal .cm-footer { padding: 20px 40px 28px !important; border-top: 1px solid var(--bf-gray-20) !important; border-top-color: var(--bf-gray-20) !important; } /* Header-Titel: DM Serif Display, Brand-Größe */ .klaro .cookie-modal .cm-modal .cm-header h1, .klaro .cookie-modal .cm-modal .cm-header h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; color: var(--bf-gray-dark); font-size: 28px !important; letter-spacing: -0.012em; margin: 0 0 12px; line-height: 1.2; padding-right: 36px; } .klaro .cookie-modal .cm-modal p, .klaro .cookie-modal .cm-modal strong, .klaro .cookie-modal .cm-modal ul, .klaro .cookie-modal .cm-modal li { color: var(--bf-gray-80); line-height: 1.6; font-size: 14.5px; } .klaro .cookie-modal .cm-modal strong { color: var(--bf-gray-dark); } .klaro .cookie-modal .cm-modal a { color: var(--bf-turquoise-dark); text-decoration: none; border-bottom: 0; font-weight: 600; } .klaro .cookie-modal .cm-modal a:hover { color: var(--bf-gray-dark); } /* Footer-Buttons + Powered-By */ .klaro .cookie-modal .cm-modal .cm-footer-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; } .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by { font-size: 11px; color: var(--bf-gray-60); text-align: right; } .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: var(--bf-gray-60); border-bottom: 1px dotted currentColor; } /* Close-X im Modal */ .klaro .cookie-modal .cm-modal .hide { position: absolute; top: 24px; right: 28px; padding: 6px; background: transparent; border: 0; cursor: pointer; } .klaro .cookie-modal .cm-modal .hide svg { stroke: var(--bf-gray-60); } .klaro .cookie-modal .cm-modal .hide:hover svg { stroke: var(--bf-gray-dark); } /* ════════════════════════════════════════════════════════════════════════ * SERVICE-LISTE im Modal (Zwecke + einzelne Dienste mit Toggle) * ═════════════════════════════════════════════════════════════════════ */ .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service { border-top: 1px solid var(--bf-gray-20); padding: 18px 0 18px 70px; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li:first-child, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li:first-child { border-top: 0; } .klaro .cookie-modal .cm-modal .cm-list-title, .klaro .cm-list-title { font-weight: 700 !important; font-size: 15px !important; color: var(--bf-gray-dark); } .klaro .cookie-modal .cm-modal .cm-list-description, .klaro .cm-list-description { color: var(--bf-gray-60) !important; font-size: 13px !important; line-height: 1.55; padding-top: 6px; } .klaro .cookie-modal .cm-modal .cm-services p.purposes, .klaro .cookie-modal .cm-modal span.cm-required, .klaro .cookie-modal .cm-modal span.cm-opt-out { color: var(--bf-gray-60) !important; font-size: 12px !important; font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════ * TOGGLE-SWITCH * ═════════════════════════════════════════════════════════════════════ */ .klaro .cookie-modal .cm-list-label .slider, .klaro .cookie-notice .cm-list-label .slider { background-color: var(--bf-gray-20); box-shadow: none; } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: var(--bf-turquoise); } .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider, .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider { background-color: var(--bf-gray-40); opacity: 0.65; cursor: not-allowed; } .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider { background-color: var(--bf-turquoise-40); opacity: 1; } .klaro .cookie-modal .cm-list-label .slider::before { background-color: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.18); } /* Caret (Expand-Toggle pro Purpose) */ .klaro .cm-caret a { color: var(--bf-gray-60); text-decoration: none; border: 0; } .klaro .cm-caret a:hover { color: var(--bf-gray-dark); } /* ════════════════════════════════════════════════════════════════════════ * Footer-Link »Cookie-Einstellungen« * ═════════════════════════════════════════════════════════════════════ */ .site-footer .bf-klaro-open { color: rgba(255,255,255,.75); transition: color 0.18s var(--ease); } .site-footer .bf-klaro-open:hover { color: var(--bf-turquoise-40); } /* ════════════════════════════════════════════════════════════════════════ * Responsive * ═════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 0; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { flex-direction: column; align-items: stretch; gap: 8px; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { flex-direction: column; gap: 8px; width: 100%; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button { width: 100%; } .klaro .cookie-modal .cm-modal.cm-klaro { width: 100%; border-radius: 0 !important; max-height: 100%; } .klaro .cookie-modal .cm-header { padding: 24px 24px 16px !important; } .klaro .cookie-modal .cm-body { padding: 20px 24px 8px !important; } .klaro .cookie-modal .cm-footer { padding: 16px 24px 20px !important; } }