/* fr0nt: Klaro in Markenoptik. * * WICHTIG, sonst passiert nichts: Klaro spritzt sein eigenes CSS zur Laufzeit in den * , also NACH dieser Datei. Bei gleicher Spezifitaet gewinnt der spaetere Block. * Deshalb zwei Ebenen: * 1. Farben und Masse ueber Klaros eigene CSS-Variablen (--green1, --notice-* usw.). * Das ist der vorgesehene Weg und braucht keinen Spezifitaetskampf. * 2. Struktur-Regeln mit "html"-Praefix, damit sie Klaros Selektoren * (.klaro .cookie-notice .cm-btn = 0,3,0) sicher schlagen. * * Tokens kommen aus styles.css (:root). Auf den Showcase-Haeusern gibt es die nicht, * dort greifen die Rueckfallwerte, die Leiste bleibt fr0nt-farben. Das ist gewollt: * Verantwortlicher ist fr0nt, nicht die erfundene Beispielfirma. */ /* ---------- 1. Klaros eigene Stellschrauben ---------- */ .klaro { /* Leiste: volle Breite unten statt schwebender Kasten rechts */ --notice-position: fixed; --notice-max-width: none; --notice-left: 0; --notice-right: 0; --notice-bottom: 0; --notice-top: auto; /* Schrift */ --font-family: var(--display, system-ui, -apple-system, sans-serif); --title-font-family: var(--display, system-ui, sans-serif); --font-size: 15px; /* Kanten: hart, fr0nt-Knopfradius */ --border-radius: 9px; --border-width: 1px; --border-style: solid; /* Farben */ --green1: var(--green, #C6FF3A); /* primaer, "Passt" */ --green2: var(--green-deep, #B0E82A); /* primaer, Hover */ --green3: var(--green-deep, #B0E82A); --button-text-color: #0A0A0A; /* Lime traegt kein Weiss */ --dark1: var(--ink, #0A0A0A); /* Fliesstext */ --dark2: var(--surface, #EDECE5); /* Sekundaerknopf, Flaeche */ --dark3: var(--muted, #6B6B72); --light1: var(--bg, #F5F4EE); --light2: var(--line, #DEDCD3); --light3: var(--muted, #6B6B72); --white2: var(--bg-2, #FBFAF6); --white3: var(--surface, #EDECE5); --blue1: var(--surface, #EDECE5); /* Klaro faerbt damit den Speichern-Knopf */ --blue2: var(--line, #DEDCD3); } /* ---------- 2. Struktur, eine Stufe hoeher als Klaro ---------- */ html .klaro .cookie-notice:not(.cookie-modal-notice) { background: var(--bg-2, #FBFAF6); color: var(--ink, #0A0A0A); border: 0; border-top: 1px solid var(--ink, #0A0A0A); border-radius: 0; box-shadow: 0 -10px 30px rgb(10 10 10 / .07); padding: 18px var(--gut, 28px); } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { max-width: var(--maxw, 1600px); margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p { margin: 0; font-size: 15px; line-height: 1.5; max-width: 74ch; color: var(--ink, #0A0A0A); } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { display: flex; align-items: center; gap: 20px; margin: 0; flex-wrap: wrap; } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display: flex; gap: 10px; margin: 0; } /* Schaltflaechen: Mono, harte Ink-Kante */ html .klaro .cookie-notice .cm-btn, html .klaro .cookie-modal .cm-btn { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; font-weight: 500; padding: 11px 18px; border: 1px solid var(--ink, #0A0A0A); border-radius: 9px; opacity: 1; transition: transform .18s var(--ease, ease), background .18s; } html .klaro .cookie-notice .cm-btn:hover, html .klaro .cookie-modal .cm-btn:hover { transform: translateY(-1px); } html .klaro .cookie-notice .cm-btn.cm-btn-success, html .klaro .cookie-modal .cm-btn.cm-btn-success { font-weight: 600; color: #0A0A0A; } /* Sekundaer ("Messung abschalten") bleibt ruhig, nicht rot, nicht grau-fremd */ html .klaro .cookie-notice .cm-btn.cm-btn-danger, html .klaro .cookie-notice .cm-btn.cn-decline, html .klaro .cookie-modal .cm-btn.cm-btn-danger { background: transparent; color: var(--ink, #0A0A0A); } html .klaro .cookie-notice .cm-btn.cm-btn-danger:hover, html .klaro .cookie-notice .cm-btn.cn-decline:hover { background: var(--surface, #EDECE5); } html .klaro .cm-btn:focus-visible, html .klaro .cm-link:focus-visible, html .klaro button:focus-visible { outline: 2px solid var(--purple, #8B3DFF); outline-offset: 2px; } /* Textlink "Einstellungen" */ html .klaro .cookie-notice .cm-link, html .klaro .cookie-notice .cn-learn-more { color: var(--ink, #0A0A0A); font-family: var(--mono, monospace); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } html .klaro .cookie-notice .cm-link:hover { color: var(--purple, #8B3DFF); } /* ---------- Fenster (Einstellungen) ---------- */ html .klaro .cookie-modal .cm-bg { background: rgb(20 18 26 / .62); } html .klaro .cookie-modal .cm-modal.cm-klaro { background: var(--bg, #F5F4EE); color: var(--ink, #0A0A0A); border: 1px solid var(--ink, #0A0A0A); border-radius: 14px; box-shadow: 8px 8px 0 rgb(10 10 10 / .16); max-width: 760px; } html .klaro .cookie-modal .cm-header { border-bottom: 1px solid var(--line, #DEDCD3); } html .klaro .cookie-modal .cm-footer { border-top: 1px solid var(--line, #DEDCD3); } html .klaro .cookie-modal .cm-header h1 { font-family: var(--display, sans-serif); font-weight: 700; letter-spacing: -.02em; color: var(--ink, #0A0A0A); } html .klaro .cookie-modal .cm-list-title { font-family: var(--display, sans-serif); font-weight: 600; color: var(--ink, #0A0A0A); } html .klaro .cookie-modal .cm-list-description, html .klaro .cookie-modal .purposes { color: var(--muted, #6B6B72); } html .klaro .cookie-modal .cm-opt-out, html .klaro .cookie-modal .cm-required { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6B6B72); } /* Klaro-Eigenwerbung bleibt aus */ html .klaro .cm-powered-by { display: none; } /* ---------- Handy ---------- */ @media (max-width: 760px) { /* Ziel: die Leiste darf auf 390x844 nicht mehr als rund ein Sechstel des Schirms nehmen. Vorher waren es 210 px (25 Prozent). Gemessen, nicht geschaetzt. */ html .klaro .cookie-notice:not(.cookie-modal-notice) { padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { gap: 9px; } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p { font-size: 13px; line-height: 1.4; } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { width: 100%; gap: 12px; flex-wrap: nowrap; justify-content: space-between; } html .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { gap: 8px; flex: 0 1 auto; } html .klaro .cookie-notice .cn-buttons .cm-btn { padding: 9px 12px; font-size: 12px; white-space: nowrap; } html .klaro .cookie-notice .cm-link, html .klaro .cookie-notice .cn-learn-more { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { html .klaro .cookie-notice .cm-btn, html .klaro .cookie-modal .cm-btn { transition: none; } html .klaro .cookie-notice .cm-btn:hover, html .klaro .cookie-modal .cm-btn:hover { transform: none; } } /* ---------- Fusszeilen-Schalter "Datenschutz-Einstellungen" ---------- Sitzt als