/* CYCLE — Einwilligungs-Dialog (Cookie Script, geladen über GTM) im CD der Reihe Aufbau nach dem Lang-&-Pfahnl-Muster: Cookie Script lädt sein eigenes Stylesheet zur Laufzeit NACH diesem hier und nutzt #id + !important. Bei Gleichstand gewinnt die spätere Regel – daher überall „html body“ davor. Zwei getrennte Wurzeln: #cookiescript_injected (Kurzbanner) und #cookiescript_injected_fsd (Detailansicht, wird bei „Details“ komplett neu aufgebaut) – Regeln deshalb NICHT unter eine Wurzel scopen. Farbwelt je Seite über (setzt tools/inject_gtm.py). */ html { --cs-bg:#FFFFFF; --cs-fg:#3A3C48; --cs-head:#05060A; --cs-muted:#5A5C6B; --cs-line:#E4E2EC; --cs-line-strong:#B9B6C8; --cs-edge:#05060A; --cs-accent:#05060A; --cs-accent-fg:#FFFFFF; --cs-accent-hover:#2A2C38; --cs-ghost-bg:#FFFFFF; --cs-ghost-fg:#05060A; --cs-on:#1F7A4A; --cs-off:#B3261E; --cs-focus:#7A00E0; --cs-overlay:rgba(5,6,10,.6); } html[data-cycle="sustainability"] { --cs-fg:#3F5247; --cs-head:#0B1A12; --cs-muted:#5A6B60; --cs-line:#DDE5D8; --cs-line-strong:#B9C8B2; --cs-edge:#0B7A43; --cs-accent:#0B7A43; --cs-accent-fg:#FFFFFF; --cs-accent-hover:#07542E; --cs-ghost-fg:#0B1A12; --cs-on:#0B7A43; --cs-focus:#0B7A43; --cs-overlay:rgba(11,26,18,.62); } html[data-cycle="ai"] { --cs-bg:#0A0C12; --cs-fg:#C6C3D8; --cs-head:#F3F1FA; --cs-muted:#A9A6BC; --cs-line:#22232E; --cs-line-strong:#3A3D52; --cs-edge:#22E3FF; --cs-accent:#22E3FF; --cs-accent-fg:#05060A; --cs-accent-hover:#7DF9FF; --cs-ghost-bg:#0A0C12; --cs-ghost-fg:#F3F1FA; --cs-on:#22E3FF; --cs-off:#FF5C7A; --cs-focus:#22E3FF; --cs-overlay:rgba(5,6,10,.78); } /* ── Cookie Script, neue Banner-Generation (klassenbasiert) ── Ansichten: .cookiescript_banner_view_firstLayer (Kurzbanner), _secondLayer (Details), _badge. Panel: .cookiescript_injected bzw. .cookiescript_fsd_wrapper. Knöpfe behalten ihre IDs. */ html body .cookiescript_banner_container, html body .cookiescript_banner_container * { font-family:Archivo,system-ui,sans-serif !important; } html body .cookiescript_banner_view_secondLayer { background:var(--cs-overlay) !important; } /* Panels: kantig, Kante oben in der Reihenfarbe */ html body .cookiescript_injected, html body .cookiescript_fsd_wrapper { background:var(--cs-bg) !important; color:var(--cs-fg) !important; border-radius:0 !important; border-top:3px solid var(--cs-edge) !important; box-shadow:0 30px 90px -24px rgba(5,6,10,.55) !important; } html[data-cycle="ai"] body .cookiescript_injected, html[data-cycle="ai"] body .cookiescript_fsd_wrapper { border-top:0 !important; box-shadow:inset 0 3px 0 0 #22E3FF, 0 0 0 1px #22232E, 0 30px 90px -24px rgba(176,38,255,.55) !important; } html body .cookiescript_banner_container .cookiescript_settings_wrapper, html body .cookiescript_banner_container .cookiescript_fsd_tab_container, html body .cookiescript_banner_container .cookiescript_fsd_tab_content, html body .cookiescript_banner_container .cookiescript_fsd_tab_pane, html body .cookiescript_banner_container .cookiescript_fsd_bottom, html body .cookiescript_banner_container .cookiescript_footer { background:transparent !important; } /* Scroll-Schatten des Anbieters sind auf weiß gebaut – auf dunkel stören sie */ html[data-cycle="ai"] body .cookiescript_banner_container [class*="scroll_shadow"]::before, html[data-cycle="ai"] body .cookiescript_banner_container [class*="scroll_shadow"]::after { display:none !important; } /* Kopf: Anbieter-Logo ausblenden, Schließen-Knopf 44 px */ html body .cookiescript_banner_container .cookiescript_logo_container { display:none !important; } html body .cookiescript_banner_container .cookiescript_close_btn { width:44px !important; height:44px !important; min-width:44px !important; border-radius:0 !important; background:var(--cs-ghost-bg) !important; border:1px solid var(--cs-line-strong) !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; } html body .cookiescript_banner_container .cookiescript_close_btn:hover { border-color:var(--cs-edge) !important; } html body .cookiescript_banner_container .cookiescript_bnr_header { justify-content:flex-end !important; } html body .cookiescript_banner_container .cookiescript_xmark { background:transparent !important; } html body .cookiescript_banner_container .cookiescript_xmark::before, html body .cookiescript_banner_container .cookiescript_xmark::after { background-color:var(--cs-head) !important; border-color:var(--cs-head) !important; } html body .cookiescript_banner_container .cookiescript_close_btn svg, html body .cookiescript_banner_container .cookiescript_close_btn svg * { fill:var(--cs-head) !important; stroke:var(--cs-head) !important; } /* Typografie */ html body .cookiescript_banner_container .cookiescript_title { font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800 !important; letter-spacing:-0.03em !important; font-size:clamp(20px,2.4vw,26px) !important; line-height:1.1 !important; color:var(--cs-head) !important; } html body .cookiescript_banner_container .cookiescript_description, html body .cookiescript_banner_container .cookiescript_description_text, html body .cookiescript_banner_container .cookiescript_fsd_declaration_item_description, html body .cookiescript_banner_container .cookiescript_fsd_tab_pane, html body .cookiescript_banner_container .cookiescript_fsd_tab_pane * { color:var(--cs-fg) !important; font-size:14px !important; line-height:1.65 !important; } html body .cookiescript_banner_container .cookiescript_fsd_declaration_title, html body .cookiescript_banner_container .cookiescript_fsd_tab_pane b, html body .cookiescript_banner_container .cookiescript_fsd_tab_pane strong, html body .cookiescript_banner_container .cookiescript_fsd_tab_pane h3, html body .cookiescript_banner_container .cookiescript_fsd_tab_pane h4 { color:var(--cs-head) !important; font-weight:700 !important; } html body .cookiescript_banner_container a, html body .cookiescript_banner_container .cookiescript_link_underline { color:var(--cs-head) !important; text-decoration:underline !important; text-underline-offset:3px !important; } /* Kategorien (Kurzbanner) und Erklärung (Details): Kacheln statt getönter Rundflächen */ html body .cookiescript_banner_container label.cookiescript_switch_block, html body .cookiescript_banner_container .cookiescript_fsd_declaration_item { background:transparent !important; border:1px solid var(--cs-line) !important; border-radius:0 !important; } html body .cookiescript_banner_container .cookiescript_switch_label, html body .cookiescript_banner_container .cookiescript_switch_label span { color:var(--cs-head) !important; font-family:'JetBrains Mono',monospace !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; } html body .cookiescript_banner_container .cookiescript_fsd_declaration_item_action_btn svg, html body .cookiescript_banner_container .cookiescript_fsd_declaration_item_action_btn svg * { fill:var(--cs-head) !important; stroke:var(--cs-head) !important; } /* Schalter: an = Reihenfarbe, aus = Rot, Pflicht grau */ html body .cookiescript_banner_container .cookiescript_switch > .cookiescript_switch_bg { background:var(--cs-off) !important; opacity:1 !important; } html body .cookiescript_banner_container .cookiescript_switch input:checked ~ .cookiescript_switch_bg { background:var(--cs-on) !important; } html body .cookiescript_banner_container .cookiescript_switch input:disabled ~ .cookiescript_switch_bg { background:var(--cs-line-strong) !important; } html body .cookiescript_banner_container .cookiescript_switch_knob::before { background:#FFFFFF !important; box-shadow:0 1px 4px rgba(5,6,10,.45) !important; } html body .cookiescript_banner_container .cookiescript_switch input:focus-visible ~ .cookiescript_switch_bg { outline:3px solid var(--cs-focus) !important; outline-offset:2px !important; } /* Reiter der Detailansicht */ html body .cookiescript_banner_container .cookiescript_fsd_tab_link { font-family:'JetBrains Mono',monospace !important; font-size:10.5px !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--cs-muted) !important; min-height:44px !important; } html body .cookiescript_banner_container .cookiescript_fsd_tab_option[aria-selected="true"] .cookiescript_fsd_tab_link, html body .cookiescript_banner_container .cookiescript_fsd_tab_link[aria-selected="true"] { color:var(--cs-head) !important; } html body .cookiescript_banner_container .cookiescript_fsd_slider { background:var(--cs-edge) !important; border-radius:0 !important; height:2px !important; } html body .cookiescript_banner_container .cookiescript_fsd_slider_line { background:var(--cs-line) !important; } /* Knöpfe: kantig, JetBrains Mono; Akzeptieren in der Reihenfarbe, Ablehnen gleichwertig daneben */ html body #cookiescript_accept, html body #cookiescript_reject, html body #cookiescript_save, html body #cookiescript_manage { display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; min-height:44px !important; padding:10px 18px !important; box-shadow:none !important; border-radius:0 !important; font-family:'JetBrains Mono',monospace !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; line-height:1.15 !important; } html body #cookiescript_accept { background:var(--cs-accent) !important; color:var(--cs-accent-fg) !important; border:1px solid var(--cs-accent) !important; } html[data-cycle="ai"] body #cookiescript_accept { background:linear-gradient(100deg,#22E3FF,#C77DFF) !important; border-color:transparent !important; } html body #cookiescript_accept:hover { filter:brightness(1.08) !important; } html body #cookiescript_reject, html body #cookiescript_save { background:var(--cs-ghost-bg) !important; color:var(--cs-ghost-fg) !important; border:1px solid var(--cs-line-strong) !important; } html body #cookiescript_reject:hover, html body #cookiescript_save:hover { border-color:var(--cs-edge) !important; } html body #cookiescript_manage { background:transparent !important; color:var(--cs-head) !important; border:0 !important; text-decoration:underline !important; text-underline-offset:4px !important; } html body #cookiescript_accept *, html body #cookiescript_reject *, html body #cookiescript_save *, html body #cookiescript_manage * { color:inherit !important; } /* Fuß: „Powered by“ dezent */ html body .cookiescript_banner_container .cookiescript_powered, html body .cookiescript_banner_container .cookiescript_powered * { color:var(--cs-muted) !important; fill:var(--cs-muted) !important; font-size:10.5px !important; } /* Badge des Anbieters ausblenden – unser eigener Knopf (.cycle-cookie-trigger) ersetzt es, sonst lägen zwei übereinander */ html body .cookiescript_banner_container .cookiescript_banner_view_badge, html body #cookiescript_badge { display:none !important; } /* Fokus sichtbar (WCAG 2.4.7) */ html body .cookiescript_banner_container :focus-visible { outline:3px solid var(--cs-focus) !important; outline-offset:2px !important; } /* Der Anbieter fokussiert beim Öffnen das Panel selbst – kein Rahmen um den ganzen Dialog */ html body .cookiescript_banner_container .cookiescript_injected:focus-visible, html body .cookiescript_banner_container .cookiescript_fsd_wrapper:focus-visible, html body .cookiescript_banner_container .cookiescript_banner_view:focus-visible, html body .cookiescript_banner_container [tabindex="-1"]:focus-visible { outline:none !important; } @media (max-width: 620px) { html body #cookiescript_accept, html body #cookiescript_reject, html body #cookiescript_save { flex:1 1 100% !important; } } /* Eigener, dauerhafter Zugang zu den Einstellungen (ersetzt das Badge des Anbieters) */ .cycle-cookie-trigger { position:fixed; left:14px; bottom:14px; z-index:2147483000; display:none; align-items:center; gap:8px; min-height:44px; padding:10px 14px; cursor:pointer; background:var(--cs-bg); color:var(--cs-head); border:1px solid var(--cs-line-strong); box-shadow:0 12px 30px -14px rgba(5,6,10,.5); font:700 10.5px 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; } .cycle-cookie-trigger:hover { border-color:var(--cs-edge); } .cycle-cookie-trigger:focus-visible { outline:3px solid var(--cs-focus); outline-offset:2px; } .cycle-cookie-trigger svg { width:16px; height:16px; flex:none; } @media (max-width: 620px) { .cycle-cookie-trigger .cct-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } } @media print { .cycle-cookie-trigger { display:none !important; } } /* ——— Automatische Cookie-Übersicht auf der Datenschutzseite (#cookie-uebersicht) ——— Das Report-Skript rendert Tabellen als Geschwister im Container – deshalb auf den äußeren Wrapper gescoped; :not([style]) trennt Report-Knoten von eigenen. */ #cookie-uebersicht { margin-top:20px; border-top:3px solid #05060A; } #cookie-uebersicht table:not([style]) { width:100% !important; border:0 !important; border-collapse:collapse !important; margin:0 0 36px !important; font-size:14px !important; } #cookie-uebersicht table:not([style]) th { text-align:left !important; background:transparent !important; border:0 !important; border-bottom:1px solid #B9B6C8 !important; padding:14px 20px 10px 0 !important; font:700 10.5px 'JetBrains Mono',monospace !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:#5A5C6B !important; } #cookie-uebersicht table:not([style]) td { border:0 !important; border-bottom:1px solid #E4E2EC !important; padding:13px 20px 13px 0 !important; vertical-align:top !important; font-family:Archivo,system-ui,sans-serif !important; font-size:14px !important; line-height:1.6 !important; color:#26283A !important; background:transparent !important; } #cookie-uebersicht table:not([style]) td:first-child { font-family:'JetBrains Mono',monospace !important; font-weight:700 !important; font-size:13px !important; color:#05060A !important; } #cookie-uebersicht table:not([style]) a { color:#05060A !important; text-decoration:underline !important; text-underline-offset:3px !important; } #cookie-uebersicht h3:not([style]), #cookie-uebersicht h4:not([style]), #cookie-uebersicht h5:not([style]), #cookie-uebersicht h6:not([style]) { font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800 !important; font-size:20px !important; letter-spacing:-0.03em !important; color:#05060A !important; margin:30px 0 10px !important; } #cookie-uebersicht [class*="CookieScriptReportPageCheckboxes"] { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px 12px !important; background:#F6F5FA !important; border:1px solid #E4E2EC !important; padding:16px 18px !important; margin:20px 0 30px !important; } #cookie-uebersicht [class*="CookieScriptReportPageCheckboxes"] div { display:inline-flex !important; align-items:center !important; background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; } #cookie-uebersicht label:not([style]) { display:inline-flex !important; align-items:center !important; gap:10px !important; margin:0 !important; font-family:Archivo,system-ui,sans-serif !important; font-size:14px !important; color:#26283A !important; min-height:44px !important; padding:8px 14px !important; cursor:pointer !important; background:#FFFFFF !important; border:1px solid #E4E2EC !important; } #cookie-uebersicht label:not([style]):has(input[type="checkbox"]:disabled) { background:#F6F5FA !important; color:#5A5C6B !important; cursor:default !important; } #cookie-uebersicht input[type="checkbox"] { appearance:none !important; -webkit-appearance:none !important; width:18px !important; height:18px !important; margin:0 !important; flex-shrink:0 !important; border:2px solid #8C8FA8 !important; border-radius:0 !important; background:#FFFFFF !important; cursor:pointer !important; position:relative !important; } #cookie-uebersicht input[type="checkbox"]:checked { background:#1F7A4A !important; border-color:#1F7A4A !important; } #cookie-uebersicht input[type="checkbox"]:checked::after { content:'' !important; position:absolute !important; left:5px !important; top:1px !important; width:4px !important; height:9px !important; border:solid #FFFFFF !important; border-width:0 2px 2px 0 !important; transform:rotate(45deg) !important; } #cookie-uebersicht input[type="checkbox"]:disabled { background:#B9B6C8 !important; border-color:#8C8FA8 !important; cursor:default !important; } #cookie-uebersicht input[type="checkbox"]:focus-visible { outline:3px solid #7A00E0 !important; outline-offset:2px !important; } #cookie-uebersicht input[type="submit"], #cookie-uebersicht input[type="button"], #cookie-uebersicht button:not([style]) { appearance:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:#05060A !important; color:#FFFFFF !important; border:0 !important; border-radius:0 !important; padding:12px 22px !important; min-height:44px !important; margin-left:auto !important; font:700 11px 'JetBrains Mono',monospace !important; letter-spacing:.14em !important; text-transform:uppercase !important; cursor:pointer !important; } #cookie-uebersicht input[type="submit"]:hover, #cookie-uebersicht button:not([style]):hover { background:#2A2C38 !important; } @media (max-width: 720px) { #cookie-uebersicht table:not([style]), #cookie-uebersicht table:not([style]) tbody, #cookie-uebersicht table:not([style]) tr, #cookie-uebersicht table:not([style]) td { display:block !important; } #cookie-uebersicht table:not([style]) thead { display:none !important; } #cookie-uebersicht table:not([style]) tr { border-bottom:1px solid #B9B6C8 !important; padding:12px 0 !important; } #cookie-uebersicht table:not([style]) td { border-bottom:0 !important; padding:3px 0 !important; } }