/* RGN Consent v2 · Cookie-Banner rgn-marketing.de (Bauart wie RGN Entrümpelung & Umzug,
   Farben und Radien aus design.css). Klassen kommen aus consent.js – nicht umbenennen. */
/* Stufe 1b: z-index 1200 nach dem Ebenenplan in lp26.css (Kopf 900, Sticky-Leiste und FAB 940, Modal 1100) */
.kekse{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:clamp(1rem,2vw,1.75rem);
  background:rgba(14,17,19,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.22,1,.36,1),visibility .35s}
.kekse.zeig{opacity:1;visibility:visible}
body.kekse-offen{overflow:hidden}
.kekse__karte{width:min(100%,540px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--papier,#fff);
  color:var(--tx,#14181B);border:1px solid var(--li,rgba(42,48,51,.12));border-radius:var(--r-card,20px);
  box-shadow:var(--sh-3);--kekse-rand:clamp(1.4rem,1.1rem + 1vw,1.9rem);padding:var(--kekse-rand) var(--kekse-rand) 0;transform:translateY(22px);
  transition:transform .38s cubic-bezier(.22,1,.36,1);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif}
.kekse.zeig .kekse__karte{transform:none}
.kekse__logo{height:40px;width:auto;margin:0 auto 1.1rem;display:block}
.kekse__karte h2{font-size:1.125rem;line-height:1.3;letter-spacing:-.022em;margin:0 0 .55rem;text-align:center;color:var(--ink,#0E1113)}
/* T-A05: Die Überschrift bekommt beim Öffnen den Fokus (tabindex -1, nicht in der Tab-Reihenfolge), ohne Fokusrahmen */
.kekse__karte h2:focus{outline:none}
.kekse__karte p{font-size:.8125rem;line-height:1.65;color:var(--tx-mut,#5C6569);margin:0}
.kekse__panel{margin-top:1.15rem;border:1px solid var(--li);border-radius:var(--r-sm,14px);overflow:hidden}
/* T-A05: Schalter und „Immer aktiv“ oben neben dem Titel der Zeile. Mittig säße der Schalter bei 320 px in einer
   über 500 px hohen Marketing-Zeile und wäre beim Tabben neben der klebenden Knopfleiste kaum ins Bild zu holen. */
.kekse__zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--li-soft)}
.kekse__zeile b{display:block;font-size:.875rem;font-weight:600;color:var(--ink)}
.kekse__zeile span{display:block;font-size:.75rem;color:var(--tx-mut)}
/* H12 (D-A46): Labels in Archivo aus der Karte, normale Schreibung, ohne Sperrung, 12 px */
.kekse__fest{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--graphit,#2A3033);white-space:nowrap}
.schalter{position:relative;display:flex;align-items:center;gap:.55rem;cursor:pointer;flex:none}
.schalter input{position:absolute;opacity:0;width:0;height:0}
.schalter__bahn{width:40px;height:22px;border-radius:var(--r-pill,999px);background:var(--papier-3,#ECEEEF);display:block;padding:3px;transition:background .2s}
.schalter__punkt{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(14,17,19,.2);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.schalter input:checked + .schalter__bahn{background:var(--ink)}
.schalter input:checked + .schalter__bahn .schalter__punkt{transform:translateX(18px)}
.schalter input:focus-visible + .schalter__bahn{outline:2px solid var(--link,#2456D6);outline-offset:2px}
.schalter__text{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--tx-mut);width:1.6rem}
/* T-A07 und T-B: Knopfleiste klebt am unteren Kartenrand, damit „Alle akzeptieren“ und „Ablehnen“ auch bei
   320×640, im Querformat und mit offenen Einstellungen ohne Scrollen sichtbar sind. Die Karte hat dafür unten
   kein Padding, den Abstand trägt .kekse__links. Linie oben nur, solange darunter noch Inhalt liegt. */
.kekse__knoepfe{position:sticky;bottom:0;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;padding:1.2rem 0 1rem;background:var(--papier,#fff)}
@supports (container-type:scroll-state){
  .kekse__karte{container-type:scroll-state}
  @container scroll-state(scrollable:bottom){.kekse__knoepfe{box-shadow:0 -1px 0 var(--li,rgba(42,48,51,.12))}}
}
.kekse__knoepfe .kekse__knopf--mehr{grid-column:1 / -1}
.kekse__knopf{min-width:0;padding:.82rem 1.1rem;border-radius:var(--r-btn,10px);text-align:center;font:inherit;
  font-size:.875rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s}
.kekse__knopf:focus-visible{outline:2px solid var(--link,#2456D6);outline-offset:2px}
.kekse__knopf--ja{background:var(--ink);color:#fff}
.kekse__knopf--ja:hover{background:var(--graphit)}
.kekse__knopf--nein{background:transparent;color:var(--ink);border-color:var(--li)}
.kekse__knopf--nein:hover{border-color:var(--ink);background:var(--papier-2)}
.kekse__knopf--mehr{background:transparent;color:var(--tx-mut);border-color:var(--li)}
.kekse__knopf--mehr:hover{color:var(--ink);border-color:var(--ink)}
.kekse__panel .kekse__knopf{width:100%;margin:0;border-radius:0;border:none;border-top:1px solid var(--li-soft);background:var(--papier-2)}
.kekse__panel .kekse__knopf:hover{background:var(--papier-3)}
/* Stufe 1b (71 §3.1): Hinweis und Detailansicht im Panel. Kleine Schrift, Kontrast tx-mut auf Weiss 5,97:1,
   auf papier-2 5,47:1. Pfeil aus Rahmenlinien, kein Icon. */
.kekse__panel .kekse__hinweis{padding:.85rem 1rem;font-size:.75rem;line-height:1.6;border-bottom:1px solid var(--li-soft)}
.kekse__details{border-bottom:1px solid var(--li-soft);font-size:.75rem;line-height:1.6;color:var(--tx-mut,#5C6569)}
.kekse__details summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:44px;padding:.7rem 1rem;
  cursor:pointer;list-style:none;font-size:.8125rem;font-weight:600;color:var(--ink,#0E1113)}
.kekse__details summary::-webkit-details-marker{display:none}
.kekse__details summary::after{content:"";flex:none;width:.5rem;height:.5rem;margin-right:.2rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.kekse__details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.kekse__details summary:hover{background:var(--papier-2,#F4F5F6)}
.kekse__details summary:focus-visible{outline:2px solid var(--link,#2456D6);outline-offset:-2px}
.kekse__details .kekse__gruppe{padding:.55rem 1rem 0;font-size:.75rem;font-weight:600;line-height:1.5;color:var(--ink,#0E1113)}
.kekse__details ul{margin:.35rem 1rem .6rem;padding-left:1.1rem;list-style:disc}
.kekse__details li{margin:.35rem 0;overflow-wrap:anywhere}
.kekse__details li b{color:var(--ink,#0E1113);font-weight:600}
.kekse__details .kekse__fuss{padding:0 1rem .9rem;font-size:.75rem;line-height:1.6}
/* Stufe 1b: keine Waisen im Banner und in der Detailansicht (Messlauf 390 px) */
.kekse h2,.kekse p,.kekse li{text-wrap:pretty}
.kekse__karte .kekse__links{margin:0;padding-bottom:var(--kekse-rand);text-align:center;font-size:.75rem}
.kekse__links a{color:var(--tx-mut);text-decoration:underline;text-underline-offset:2px}
.kekse__links a:hover{color:var(--ink)}
/* „Alle akzeptieren“ und „Ablehnen“ auch am Handy gleich groß in einer Reihe */
@media (max-width:480px){.kekse__knopf{padding:.82rem .55rem;min-height:48px}}
@media (prefers-reduced-motion:reduce){.kekse,.kekse__karte,.kekse__details summary::after{transition:none}}