/* Knöpfe aus src/css/base.css (.btn, .btn-pri, .btn-sec, .btn-lnk), hier auf das Banner begrenzt, mit :where so schwach wie in base.css (sonst schlagen sie .cb [hidden]). Sie stehen wie dort vor den Bannerregeln. Darunter folgt src/css/consent.css unverändert. */
:where(.cb) .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 52px; padding: var(--s-3) var(--s-4); border-radius: var(--radius-pill); font-family: inherit; font-weight: 600; font-size: var(--fs-ui); line-height: 1.45; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
:where(.cb) .btn:active { transform: scale(0.97); }
:where(.cb) .btn-pri { background: var(--teal); color: var(--paper); }
:where(.cb) .btn-pri:hover { background: #094a66; }
:where(.cb) .btn-sec { border-color: color-mix(in srgb, var(--teal) 30%, transparent); color: var(--teal); background: transparent; }
:where(.cb) .btn-lnk { min-height: 0; padding: 0 0 2px; border-radius: 0; color: var(--teal); border-bottom: 1.5px solid currentColor; background: none; }
:where(.cb) .btn-lnk:hover { color: #094a66; }

/* Einwilligungsbanner. Liegt außerhalb von .page (layout.mjs), darum eigene Werte. */
.cb {
  --paper: #fbf6ef; --card: #fff; --ink: #193153; --teal: #0b5777; --border: #e4d9c7;
  --s-2: 8px; --s-3: 16px; --s-4: 24px;
  --cb-bg: var(--paper); --cb-pb: max(var(--s-3), env(safe-area-inset-bottom));
  --radius-pill: 999px; --radius-card: 18px;
  --fs-ui: 1.0625rem; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-heading: "Gambetta", "Gambetta Fallback", Georgia, serif;
  --font-sans: "General Sans", "General Sans Fallback", ui-sans-serif, system-ui, sans-serif;
  position: fixed; inset: auto 0 0 0; z-index: 50;       /* über .stk (30), .hd (40), unter .skip (100) */
  max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; /* höchstens 60 Prozent, damit im Querformat und auf kleinen Handys Inhalt über dem Banner bleibt; der Rest scrollt im Banner */
  scroll-padding-bottom: calc(60px + 2 * var(--s-3));      /* fokussierte Elemente unter der festen Knopfzeile bleiben sichtbar (WCAG 2.4.11) */
  background: var(--cb-bg); color: var(--ink);
  border-top: 1px solid var(--border);                    /* Rahmen ODER Schatten: hier Rahmen, wie .stk-in */
  font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.62; text-align: left;
  padding: var(--s-3) max(20px, env(safe-area-inset-left)) var(--cb-pb) max(20px, env(safe-area-inset-right));
  box-sizing: border-box; overflow-wrap: anywhere;      /* bei 200 % Schrift und 320 px bricht auch „Datenschutzerklärung“ um, statt über den Rand zu laufen */
}
.cb[hidden], .cb [hidden] { display: none; } /* .btn setzt display und würde hidden am Schließen-Knopf sonst übergehen */
.cb *, .cb *::before, .cb *::after { box-sizing: border-box; }
.cb-in { display: grid; gap: 12px; max-width: 72ch; margin-inline: auto; }
.cb :where(h2, p, ul) { margin: 0; padding: 0; }
.cb-h { font: 600 1.5rem/1.25 var(--font-heading); text-align: center; }
.cb-t, .cb-st { text-align: center; }
.cb-t { font-size: 0.9rem; line-height: 1.5; } /* kurzer Text, bewusst klein: die Überschrift trägt */
.cb-h:focus { outline: none; }
.cb-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.3rem), 1fr)); gap: var(--s-2); } /* drei Knöpfe nebeneinander; bei großer Schrift oder sehr schmalem Fenster umbrechen sie in weitere Zeilen, damit der Text im Knopf bleibt */
.cb-act { position: sticky; bottom: calc(-1 * var(--cb-pb)); padding-bottom: var(--cb-pb); margin-bottom: calc(-1 * var(--cb-pb)); background: var(--cb-bg); } /* scrollt das Banner, bleiben beide Knöpfe unten stehen; ohne Scrollen ändert sich nichts (der Rand deckt genau den Abstand nach unten) */
.cb-act .btn { width: 100%; min-width: 44px; min-height: 52px; padding: 8px 6px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; hyphens: auto; font-size: clamp(0.875rem, 3.9vw, 0.9375rem); } /* alle drei gleich groß; die Schrift schrumpft bis 14 px, damit „Einstellungen“ bei 360 px in den Knopf passt; bei Textabstand oder großer Schrift bricht das Wort um, statt über den Knopf zu laufen */
.cb-act .btn-sec { border: 1.5px solid var(--teal); background: transparent; } /* Einstellungen: Umriss statt Fläche, weil es keine Wahl ist; gleiche Größe wie die anderen */
.cb-opt { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-3); row-gap: 2px; }
.cb-opt label { display: flex; align-items: center; min-height: 44px; font-size: 1.125rem; cursor: pointer; }
.cb-opt p { grid-column: 1 / -1; }
.cb [role="switch"] { appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; width: 60px; height: 36px; border-radius: var(--radius-pill); border: 2px solid var(--ink); background: var(--card); cursor: pointer; }
.cb [role="switch"]::before { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); }
.cb [role="switch"]:checked { background: var(--teal); border-color: var(--teal); }
.cb [role="switch"]:checked::before { transform: translateX(24px); background: #fff; }
.cb-save { width: 100%; white-space: normal; } /* bei 200 % Schrift und 320 px bricht der Text um, statt über den Knopf zu laufen */
@media (prefers-reduced-motion: no-preference) { .cb [role="switch"], .cb [role="switch"]::before { transition: transform 0.2s var(--ease-out), background-color 0.2s; } }
@media (forced-colors: active) { .cb [role="switch"]::before { forced-color-adjust: none; background: CanvasText; } .cb [role="switch"]:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; } .cb [role="switch"]:checked::before { background: HighlightText; } }
.cb-panel { display: grid; gap: var(--s-3); font-size: 1rem; }
.cb-list { list-style: none; display: grid; gap: var(--s-3); }
.cb a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.cb-st { font-weight: 600; }
.cb-close { justify-self: start; min-height: 44px; padding: 0; border-bottom: 0; background: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* Zielgröße 44 px, Unterstreichung wie bei den Links, ohne graue Fläche des Browsers */
.cb :where(a, button, summary, input):focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.cb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* .btn, .btn-pri, .btn-lnk kommen aus base.css; sie lesen --s-2, --s-3, --fs-ui, --radius-pill, --teal, --paper von hier */
@media (max-width: 400px) {
  .cb { padding-inline: max(var(--s-3), env(safe-area-inset-left)) max(var(--s-3), env(safe-area-inset-right)); } /* schmale Handys: 16 px Rand, damit drei Knöpfe nebeneinander passen */
}
@media (min-width: 720px) {
  .cb { inset: auto var(--s-3) var(--s-3) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-card); --cb-bg: var(--card); max-width: 760px; margin-inline: auto; }
  .cb-act { max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .cb:not([hidden]) { animation: cb-in 0.3s var(--ease-out); }
  @keyframes cb-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
}
html.cb-open .stk { display: none; }
html.cb-open .ft { padding-bottom: calc(var(--cb-h, 0px) + 24px); }   /* consent.js setzt --cb-h auf die Bannerhöhe */
html.cb-open { scroll-padding-bottom: calc(var(--cb-h, 0px) + 16px); }  /* WCAG 2.4.11: fokussierte Elemente bleiben über dem Banner */
@media (min-width: 720px) {
  html.cb-open { scroll-padding-bottom: calc(var(--cb-h, 0px) + 32px); } /* das Banner schwebt 16 px über dem unteren Rand; WebKit ließ Formularfelder sonst 15 px unter dem Banner stehen */
}
@media (max-height: 240px) { .cb-act { position: static; } } /* bei 200 % Zoom im Querformat bliebe sonst kaum Platz für den Text */
html.cb-open:has(.mm[open]) .cb { visibility: hidden; }          /* offenes Menü am Handy: Einträge liegen sonst unter dem Banner; es ist keine Wahl, das Banner kommt mit dem Menü zurück */
@media print { .cb { display: none !important; } html.cb-open .ft { padding-bottom: 0; } }

/* Coming-Soon: kleines Banner (Wunsch Jan, 09.10.2026). Texte wie oben, nur kleiner gesetzt: am Handy eine schmale Leiste, am Rechner eine Karte unten rechts.
   Zustimmen und Ablehnen bleiben gleich groß und gleich gestaltet. Die Schalter unter „Einstellungen“ öffnen sich wie bisher. */
.cb { --cb-pb: max(10px, env(safe-area-inset-bottom)); max-height: 70dvh; padding: 10px max(14px, env(safe-area-inset-left)) var(--cb-pb) max(14px, env(safe-area-inset-right)); font-size: 0.875rem; line-height: 1.45; }
.cb-in { gap: 6px; }
.cb-h { font: 600 0.9375rem/1.3 var(--font-sans); text-align: left; }
.cb-t, .cb-st { text-align: left; }
.cb-t { font-size: 0.75rem; line-height: 1.4; }
.cb-act { gap: 6px; }
.cb-act .btn { min-height: 38px; padding: 4px 6px; font-size: 0.8125rem; }
.cb-panel { gap: 10px; font-size: 0.8125rem; }
.cb-list { gap: 10px; }
.cb-opt label { min-height: 36px; font-size: 0.9375rem; }
.cb [role="switch"] { width: 48px; height: 28px; }
.cb [role="switch"]::before { top: 3px; left: 3px; width: 18px; height: 18px; }
.cb [role="switch"]:checked::before { transform: translateX(20px); }
.cb-save { min-height: 38px; padding: 4px 12px; font-size: 0.8125rem; }
.cb a { min-height: 28px; }
.cb-close { min-height: 28px; font-size: 0.8125rem; }
@media (max-width: 400px) {
  .cb { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
}
@media (min-width: 720px) {
  .cb { inset: auto 16px 16px auto; max-width: 380px; margin: 0; padding: 14px 16px; }
  .cb-act { max-width: none; }
}