/* /css/cookies.css Fixes für Vanilla CookieConsent v3 – DARK MODE optimiert (Light-Mode bleibt weitgehend beim Default, nur kleine Tweaks) */ /* ====== Theme Tokens ====== */ :root { /* Buttons/Accent – bleibt in beiden Themes gleich */ --cc-accent: #f6b100; --cc-accent-text: #121212; /* Dark */ --cc-d-bg: #101722; /* Modal-Hintergrund */ --cc-d-surface: #0b111b; /* Karten / Sektionen */ --cc-d-text: #e8ecf4; --cc-d-muted: #b6c0d4; --cc-d-border: #233043; /* Light (nur falls du leicht nachschärfen willst) */ --cc-l-surface: #f7f9fc; --cc-l-border: #dfe5ef; } /* ====== Gemeinsame Button-Optik ====== */ .cm__btn, .pm__btn { border-radius: 10px !important; font-weight: 800 !important; letter-spacing: .2px; height: 42px !important; padding: 0 14px !important; } /* Primär: Accept / Save */ [class*="__btn--accept"], [class*="__btn--save"], [class*="__btn--accept-all"] { background: var(--cc-accent) !important; color: var(--cc-accent-text) !important; border: 1px solid color-mix(in oklab, var(--cc-accent) 70%, black 30%) !important; } /* Sekundär: Essential only / Preferences */ [class*="__btn--secondary"], [class*="__btn--necessary"], [class*="__btn--settings"] { background: transparent !important; border: 1px solid currentColor !important; opacity: 1 !important; /* NICHT verwaschen */ } /* Buttons hübsch absetzen */ .cm__actions, .pm__actions { gap: 10px !important; } /* ====== DARK MODE (per Attribut auf ) ====== */ html[data-cc-theme-dark] .cm, html[data-cc-theme-dark] .pm { background: var(--cc-d-bg) !important; color: var(--cc-d-text) !important; border: 1px solid var(--cc-d-border) !important; border-radius: 14px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .55); } /* Kopf-/Body-Trenner */ html[data-cc-theme-dark] .pm__header, html[data-cc-theme-dark] .cm__body { border-color: var(--cc-d-border) !important; } /* = Sektionen/Kacheln im Preferences-Modal = */ html[data-cc-theme-dark] .pm__section { background: var(--cc-d-surface) !important; border: 1px solid var(--cc-d-border) !important; border-radius: 12px !important; } /* Der helle Balken in den Toggles kommt von der Title-Zeile → dunkler + volle Deckkraft */ html[data-cc-theme-dark] .pm__section-title { background: color-mix(in oklab, var(--cc-d-surface) 96%, black 4%) !important; color: var(--cc-d-text) !important; opacity: 1 !important; border-bottom: 1px solid var(--cc-d-border) !important; border-radius: 10px !important; } /* Pfeil & Label in voller Sichtbarkeit */ html[data-cc-theme-dark] .pm__section-title * { color: var(--cc-d-text) !important; opacity: 1 !important; } /* Beschreibungstexte */ html[data-cc-theme-dark] .pm__section-desc { color: var(--cc-d-muted) !important; background: transparent !important; } /* Switches */ html[data-cc-theme-dark] .pm__switch { background: #223044 !important; border: 1px solid #30435e !important; } html[data-cc-theme-dark] .pm__toggle input:checked+.pm__switch { background: var(--cc-accent) !important; border-color: color-mix(in oklab, var(--cc-accent) 70%, black 30%) !important; } html[data-cc-theme-dark] .pm__toggle input:checked+.pm__switch::after { background: #fff !important; } /* Consent-Banner (unten) lesbarer machen */ html[data-cc-theme-dark] .cm { background: var(--cc-d-bg) !important; border: 1px solid var(--cc-d-border) !important; } html[data-cc-theme-dark] .cm__title { color: var(--cc-d-text) !important; font-weight: 900 !important; } html[data-cc-theme-dark] .cm__desc { color: var(--cc-d-muted) !important; } /* Close-Buttons sichtbarer */ html[data-cc-theme-dark] .pm__close-btn, html[data-cc-theme-dark] .cm__close-btn { opacity: .9 !important; } html[data-cc-theme-dark] .pm__close-btn:hover, html[data-cc-theme-dark] .cm__close-btn:hover { opacity: 1 !important; } /* ====== LIGHT MODE (dezente Nachschärfung) ====== */ html:not([data-cc-theme-dark]) .pm__section { background: var(--cc-l-surface) !important; border: 1px solid var(--cc-l-border) !important; border-radius: 12px !important; } html:not([data-cc-theme-dark]) .pm__section-title { background: #fff !important; color: #0e1726 !important; opacity: 1 !important; border-bottom: 1px solid var(--cc-l-border) !important; border-radius: 10px !important; } /* ===== Dark-Mode: Buttons & Slider (v3) ===== */ html[data-cc-theme-dark] .cm, html[data-cc-theme-dark] .pm { --cc-accent: #f6b100; /* Gelb (dein CI) */ --cc-accent-ink: #121212; --cc-border: #2a3a52; --cc-surface: #0e1622; --cc-surface-2: #0b121d; } /* Footer-Leiste im Modal */ html[data-cc-theme-dark] .pm__footer { background: var(--cc-surface-2) !important; border-top: 1px solid var(--cc-border) !important; } /* Primärbuttons: Accept / Save */ html[data-cc-theme-dark] .cm__btn--accept, html[data-cc-theme-dark] .cm__btn--accept-all, html[data-cc-theme-dark] .pm__btn--accept, html[data-cc-theme-dark] .pm__btn--save { background: var(--cc-accent) !important; color: var(--cc-accent-ink) !important; border: 1px solid color-mix(in oklab, var(--cc-accent) 70%, black 30%) !important; box-shadow: 0 6px 18px rgba(246, 177, 0, .18) !important; } html[data-cc-theme-dark] .cm__btn--accept:hover, html[data-cc-theme-dark] .cm__btn--accept-all:hover, html[data-cc-theme-dark] .pm__btn--accept:hover, html[data-cc-theme-dark] .pm__btn--save:hover { filter: brightness(0.95); } html[data-cc-theme-dark] .pm__btn--save[disabled], html[data-cc-theme-dark] .pm__btn--save.is-disabled { background: #2a3140 !important; color: #98a7c0 !important; border-color: #2a3140 !important; box-shadow: none !important; opacity: 1 !important; /* gut lesbar statt zu blass */ cursor: not-allowed !important; } /* Sekundärbuttons: Essential only / Preferences */ html[data-cc-theme-dark] .cm__btn--secondary, html[data-cc-theme-dark] .cm__btn--necessary, html[data-cc-theme-dark] .pm__btn--secondary, html[data-cc-theme-dark] .pm__btn--necessary { background: transparent !important; color: #e8ecf4 !important; border: 1px solid #3a4a64 !important; } html[data-cc-theme-dark] .cm__btn--secondary:hover, html[data-cc-theme-dark] .cm__btn--necessary:hover, html[data-cc-theme-dark] .pm__btn--secondary:hover, html[data-cc-theme-dark] .pm__btn--necessary:hover { background: #152033 !important; } /* Gleichmäßige Haptik */ .cm__btn, .pm__btn { height: 42px !important; border-radius: 10px !important; font-weight: 800 !important; letter-spacing: .2px; } /* ===== Slider / Toggles ===== */ html[data-cc-theme-dark] .pm__toggle .pm__switch { /* Track (aus) */ width: 52px; height: 28px; background: #263449 !important; border: 1px solid #35506f !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); } html[data-cc-theme-dark] .pm__toggle .pm__switch::after { /* Knopf */ width: 22px; height: 22px; margin: 2px; background: #dfe6f3 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); } /* an: gelber Track + weißer Knopf */ html[data-cc-theme-dark] .pm__toggle input:checked+.pm__switch { background: var(--cc-accent) !important; border-color: color-mix(in oklab, var(--cc-accent) 70%, black 30%) !important; } html[data-cc-theme-dark] .pm__toggle input:checked+.pm__switch::after { background: #fff !important; } /* Abschnittskarten & Titelleisten: klare Kanten */ html[data-cc-theme-dark] .pm__section { background: var(--cc-surface) !important; border: 1px solid var(--cc-border) !important; border-radius: 12px !important; } html[data-cc-theme-dark] .pm__section-title { background: color-mix(in oklab, var(--cc-surface) 92%, black 8%) !important; color: #e8ecf4 !important; border-bottom: 1px solid var(--cc-border) !important; } /* Banner (unten) ebenfalls knackig */ html[data-cc-theme-dark] .cm { background: var(--cc-surface) !important; border: 1px solid var(--cc-border) !important; } html[data-cc-theme-dark] .cm__title { color: #e8ecf4 !important; font-weight: 900 !important; } html[data-cc-theme-dark] .cm__desc { color: #b6c0d4 !important; } /* Fokus sichtbar für Tastatur-Nutzer */ .cm__btn:focus-visible, .pm__btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--cc-accent) 60%, white 40%) !important; outline-offset: 2px; } /* === CookieConsent – Brand & Theme via CSS-Variablen ================== */ /* Light-Mode: (gilt automatisch, wenn html NICHT .cc--darkmode hat) */ :root { /* Farben im Banner/Modal */ --cc-bg: #ffffff; --cc-primary-color: #0e1726; --cc-secondary-color: #5c6883; /* Buttons */ --cc-btn-primary-bg: #f6b100; /* dein Gelb */ --cc-btn-primary-color: #121212; /* lesbarer Text */ --cc-btn-primary-border-color: var(--cc-btn-primary-bg); --cc-btn-primary-hover-bg: #e0a300; --cc-btn-primary-hover-color: #121212; --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg); --cc-btn-secondary-bg: #f2f4f8; --cc-btn-secondary-color: #0e1726; --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg); --cc-btn-secondary-hover-bg: #e6eaf1; --cc-btn-secondary-hover-color: #0e1726; --cc-btn-secondary-hover-border-color: var(--cc-btn-secondary-hover-bg); /* Divider/Fußleiste */ --cc-separator-border-color: #dfe5ef; --cc-footer-bg: #f7f9fc; --cc-footer-color: #5c6883; --cc-footer-border-color: #e8edf5; /* Toggles */ --cc-toggle-off-bg: #ccd7ea; --cc-toggle-off-knob-bg: #ffffff; --cc-toggle-on-bg: #f6b100; --cc-toggle-on-knob-bg: #ffffff; /* Kartenflächen */ --cc-cookie-category-block-bg: #f5f7fb; --cc-cookie-category-block-border: #e8edf5; --cc-cookie-category-block-hover-bg: #eef3fa; --cc-cookie-category-expanded-block-bg: #ffffff; /* Links */ --cc-link-color: #2f6ae5; } /* Dark-Mode: wird aktiv, wenn gesetzt ist */ html.cc--darkmode { --cc-bg: #0f1523; --cc-primary-color: #e8ecf4; --cc-secondary-color: #a7b0c2; --cc-btn-primary-bg: #f6b100; --cc-btn-primary-color: #121212; --cc-btn-primary-border-color: #c28b00; --cc-btn-primary-hover-bg: #dca100; --cc-btn-primary-hover-color: #121212; --cc-btn-primary-hover-border-color: #b88900; --cc-btn-secondary-bg: #1b2434; --cc-btn-secondary-color: #e8ecf4; --cc-btn-secondary-border-color: #2a3245; --cc-btn-secondary-hover-bg: #223049; --cc-btn-secondary-hover-color: #ffffff; --cc-btn-secondary-hover-border-color: #32425d; --cc-separator-border-color: #2a3245; --cc-footer-bg: #0b111b; --cc-footer-color: #a7b0c2; --cc-footer-border-color: #1a2334; --cc-toggle-off-bg: #3d4a5e; --cc-toggle-off-knob-bg: #e6ebf5; --cc-toggle-on-bg: #f6b100; --cc-toggle-on-knob-bg: #ffffff; --cc-cookie-category-block-bg: #121a29; --cc-cookie-category-block-border: #2a3245; --cc-cookie-category-block-hover-bg: #172236; --cc-cookie-category-expanded-block-bg: transparent; --cc-link-color: #8ab8ff; } /* kleine Lesbarkeits-Boosts */ #cc-main .cm__title, #cc-main .pm__title { font-weight: 800; letter-spacing: .2px; } #cc-main .pm__section { border-radius: 12px; } #cc-main .pm__section--toggle .pm__section-title { border-radius: 12px; } #cc-main .pm__footer { border-top: 1px solid var(--cc-separator-border-color); } #cc-main .pm__btn, #cc-main .cm__btn { min-height: 42px; border-radius: 10px; font-weight: 800; letter-spacing: .2px; } /* LIGHT: gilt, wenn KEIN .cc--darkmode an hängt */ html:not(.cc--darkmode) { --cc-bg: #ffffff; --cc-primary-color: #0e1726; --cc-secondary-color: #5c6883; --cc-btn-primary-bg: #f6b100; --cc-btn-primary-color: #121212; --cc-btn-primary-border-color: var(--cc-btn-primary-bg); --cc-btn-primary-hover-bg: #e0a300; --cc-btn-primary-hover-color: #121212; --cc-btn-primary-hover-border-color: #e0a300; --cc-btn-secondary-bg: #f2f4f8; --cc-btn-secondary-color: #0e1726; --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg); --cc-btn-secondary-hover-bg: #e6eaf1; --cc-btn-secondary-hover-color: #0e1726; --cc-btn-secondary-hover-border-color: #e6eaf1; --cc-separator-border-color: #dfe5ef; --cc-footer-bg: #f7f9fc; --cc-footer-color: #5c6883; --cc-footer-border-color: #e8edf5; --cc-toggle-off-bg: #ccd7ea; --cc-toggle-off-knob-bg: #ffffff; --cc-toggle-on-bg: #f6b100; --cc-toggle-on-knob-bg: #ffffff; --cc-cookie-category-block-bg: #f5f7fb; --cc-cookie-category-block-border: #e8edf5; --cc-cookie-category-block-hover-bg: #eef3fa; --cc-cookie-category-expanded-block-bg: #ffffff; --cc-link-color: #2f6ae5; } /* DARK bleibt wie gehabt */ html.cc--darkmode { --cc-bg: #0f1523; --cc-primary-color: #e8ecf4; --cc-secondary-color: #a7b0c2; --cc-btn-primary-bg: #f6b100; --cc-btn-primary-color: #121212; --cc-btn-primary-border-color: #c28b00; --cc-btn-primary-hover-bg: #dca100; --cc-btn-primary-hover-color: #121212; --cc-btn-primary-hover-border-color: #b88900; --cc-btn-secondary-bg: #1b2434; --cc-btn-secondary-color: #e8ecf4; --cc-btn-secondary-border-color: #2a3245; --cc-btn-secondary-hover-bg: #223049; --cc-btn-secondary-hover-color: #ffffff; --cc-btn-secondary-hover-border-color: #32425d; --cc-separator-border-color: #2a3245; --cc-footer-bg: #0b111b; --cc-footer-color: #a7b0c2; --cc-footer-border-color: #1a2334; --cc-toggle-off-bg: #3d4a5e; --cc-toggle-off-knob-bg: #e6ebf5; --cc-toggle-on-bg: #f6b100; --cc-toggle-on-knob-bg: #ffffff; --cc-cookie-category-block-bg: #121a29; --cc-cookie-category-block-border: #2a3245; --cc-cookie-category-block-hover-bg: #172236; --cc-cookie-category-expanded-block-bg: transparent; --cc-link-color: #8ab8ff; } /* kleine Lesbarkeits-Boosts */ #cc-main .cm__title, #cc-main .pm__title { font-weight: 800; letter-spacing: .2px; } #cc-main .pm__section { border-radius: 12px; } #cc-main .pm__section--toggle .pm__section-title { border-radius: 12px; } #cc-main .pm__footer { border-top: 1px solid var(--cc-separator-border-color); } #cc-main .pm__btn, #cc-main .cm__btn { min-height: 42px; border-radius: 10px; font-weight: 800; letter-spacing: .2px; }