/* ============================================================ KACHELBUNT · COOKIE-CONSENT BANNER (.kb-consent) Erste Ebene fix am unteren Rand, zweite Ebene klappt inline auf. Kein Overlay, kein Scroll-Lock, keine Radien — nur semantische Tokens. Verlinkt im von base/base.html: der Head wird von hx-boost nicht getauscht, und das Banner wird auf jeder Seite gebraucht. ============================================================ */ .kb-consent { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-overlay); /* Weisse Karte auf der hellen Seitenflaeche: Kontrast kommt aus der Hairline oben plus dem weichen Schatten, nicht aus einer Umrandung. */ background: var(--surface-card); border-top: var(--bw) solid var(--border-strong); box-shadow: var(--shadow-lg); color: var(--text-body); /* Nie hoeher als der Viewport; laengere Inhalte scrollen im Banner. */ max-block-size: 100dvh; overflow-y: auto; /* --dur-3 ist in tokens/layout.css unter prefers-reduced-motion auf 0ms gesetzt — die Animation kollabiert dort zum sofortigen Endzustand. */ animation: kb-consent-in var(--dur-3) var(--ease-out) both; } @keyframes kb-consent-in { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } } .kb-consent__inner { padding-block: var(--space-4); } .kb-consent__title { margin: 0; font: var(--type-h4); color: var(--text-strong); } .kb-consent__body { margin: var(--space-2) 0 0; max-width: var(--container-text); font: var(--type-small); color: var(--text-body); } /* Ablehnen und Akzeptieren teilen sich Groesse und Gewicht (.kb-btn ohne Groessen-Modifier) — nur die Variante unterscheidet sich. */ .kb-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .kb-consent__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-3) 0 0; font: var(--type-small); } .kb-consent__links a { color: var(--text-link); } .kb-consent__links a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); } /* ---- Zweite Ebene: Kategorie-Schalter ---------------------- */ .kb-consent__panel { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-dashed); } .kb-consent__cats { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } .kb-consent__cat { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2) var(--space-4); } .kb-consent__cat-name { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-strong); } .kb-consent__cat-hint { justify-self: end; font: var(--type-mono); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } .kb-consent__cat-desc { grid-column: 1 / -1; margin: 0; max-width: var(--container-text); font: var(--type-small); color: var(--text-muted); } .kb-consent__panel-actions { margin-top: var(--space-5); } /* Ohne JavaScript entfernt Alpine das x-cloak nie und die globale [x-cloak]-Regel wuerde das Panel dauerhaft verstecken. Dann bleibt die zweite Ebene stattdessen offen und der (funktionslose) Umschalter weg. */ @media (scripting: none) { .kb-consent__panel[x-cloak] { display: block !important; } .kb-consent__toggle { display: none; } } /* ---- Mobil: volle Breite, gestapelte Aktionen -------------- */ /* Media Queries koennen keine Custom Properties lesen — der Breakpoint ist deshalb ein Literal, wie ueberall sonst im Repo. */ @media (max-width: 600px) { .kb-consent__inner { padding-block: var(--space-3); } .kb-consent__actions { flex-direction: column; align-items: stretch; } .kb-consent__actions .kb-btn { width: 100%; } .kb-consent__cat { grid-template-columns: 1fr; } .kb-consent__cat-hint { justify-self: start; } }