/* ═══════════════════════════════════════════════════════════════
   Reedify.de – Keks-Banner „Krümel“ (Cookie-Einwilligung, 15.10.2026)
   Logik: assets/js/keks.js · Server: lib/einwilligung.php, api/einwilligung.php
   Rechtlich: drei gleichwertige Knöpfe auf der ersten Ebene (gleiche Größe, Farbe, Kontrast),
   kein Sperrbildschirm, Impressum und Datenschutz bleiben erreichbar, keine vorausgewählten Kästchen.
   ═══════════════════════════════════════════════════════════════ */
:root{--keks-teig:#e3a85c;--keks-hell:#f6cf8e;--keks-dunkel:#a5652a;--keks-schoko:#4b2a14}
.keks[hidden],.keks-mini[hidden]{display:none!important}
/* Dauerhaft sichtbares Keks-Symbol: Widerruf so einfach wie die Einwilligung (DSK-OH Digitale Dienste Rn. 61 f.) */
.keks-mini{position:fixed;left:20px;bottom:20px;z-index:145;width:42px;height:42px;border-radius:50%;border:1px solid rgba(246,207,142,.4);background:rgba(10,23,32,.88);
  display:grid;place-items:center;cursor:pointer;opacity:.78;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.keks-mini svg{width:26px;height:26px}
.keks-mini:hover,.keks-mini:focus-visible{opacity:1;transform:rotate(-18deg) scale(1.08)}
.keks-mini:focus-visible{outline:3px solid var(--cyan,#22d3ee);outline-offset:2px}
@media(max-width:900px){.keks-mini{left:16px;bottom:calc(84px + env(safe-area-inset-bottom))}}
@media print{.keks,.keks-mini{display:none!important}}
.keks{position:fixed;left:20px;bottom:20px;z-index:400;width:min(460px,calc(100vw - 40px));font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text,#eaf6fa)}
.keks-karte{position:relative;display:grid;grid-template-columns:118px 1fr;gap:4px 18px;padding:22px 22px 18px 16px;border-radius:22px;
  background:linear-gradient(160deg,rgba(17,36,48,.97),rgba(8,20,29,.98));border:1px solid rgba(246,207,142,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 -18px 60px -30px rgba(227,168,92,.35);overflow:hidden;
  transform-origin:bottom left}
.keks-karte::before{content:"";position:absolute;inset:-40% auto auto -30%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,207,142,.16),transparent 65%);pointer-events:none}
.keks-buehne{position:relative;width:118px;height:118px;align-self:start;margin-top:4px}
.keks-svg{width:118px;height:118px;overflow:visible;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.keks-koerper{transform-origin:80px 80px;transform-box:view-box}
.keks-augen .lid{transform-box:fill-box;transform-origin:center;transform:scaleY(0)}
.keks-augen .pupille{transition:transform .12s linear}
.keks-blase{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%) scale(.6);opacity:0;pointer-events:none;white-space:nowrap;
  background:#fff7e8;color:#3a2210;font-weight:700;font-size:.78rem;padding:5px 10px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.keks-blase::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:#fff7e8;transform:translateX(-50%) rotate(45deg)}
.keks-blase.an{opacity:1;transform:translate(-50%,-100%) scale(1)}
.keks-inhalt{min-width:0;position:relative}
.keks-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--keks-hell);font-weight:600;margin-bottom:4px}
.keks h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.32rem;line-height:1.2;margin:0 0 8px;color:#fff}
.keks-text{font-size:.86rem;line-height:1.55;color:#b9cdd6;margin:0 0 14px}
.keks-text b{color:#eaf6fa;font-weight:600}
.keks-knoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;grid-column:1/-1}
/* Gleichwertig: alle drei Knöpfe identisch gestaltet (kein „Nudging“) */
.keks-knopf{appearance:none;border:1px solid rgba(246,207,142,.5);background:rgba(246,207,142,.08);color:#fff3df;font:600 .84rem/1.25 'Inter',sans-serif;
  padding:11px 8px;border-radius:12px;cursor:pointer;transition:background .2s,color .2s,transform .2s,box-shadow .2s;min-height:46px}
.keks-knopf:hover{background:linear-gradient(135deg,var(--keks-hell),var(--keks-teig));color:#2b1a10;transform:translateY(-2px);box-shadow:0 10px 24px rgba(227,168,92,.25)}
.keks-knopf:focus-visible,.keks-mehr:focus-visible,.keks-schalter input:focus-visible+span{outline:3px solid var(--cyan,#22d3ee);outline-offset:2px}
.keks-knopf:active{transform:translateY(0) scale(.97)}
.keks-unten{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:.78rem;color:#8ba4b0}
.keks-mehr{appearance:none;background:none;border:0;color:var(--keks-hell);font:600 .8rem 'Inter',sans-serif;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.keks-unten a{color:#8ba4b0;text-decoration:underline;text-underline-offset:2px}
.keks-unten a:hover{color:#eaf6fa}
.keks-auswahl{grid-column:1/-1;margin-top:12px;display:grid;gap:8px;max-height:min(46vh,420px);overflow:auto;padding-right:2px}
.keks-kat{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.keks-kat h3{font-size:.9rem;margin:0;color:#fff;font-family:'Space Grotesk','Inter',sans-serif;display:flex;align-items:center;gap:6px}
.keks-kat p{grid-column:1/-1;font-size:.78rem;line-height:1.5;color:#9fb6c1;margin:2px 0 0}
.keks-kat details{grid-column:1/-1;font-size:.74rem;color:#8ba4b0;margin-top:4px}
.keks-kat summary{cursor:pointer;color:var(--keks-hell)}
.keks-kat ul{margin:6px 0 0 16px;padding:0}
.keks-kat li{margin:2px 0}
.keks-kat code{font-size:.72rem;background:rgba(255,255,255,.06);padding:1px 4px;border-radius:4px;color:#eaf6fa}
.keks-schalter{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.keks-schalter input{position:absolute;opacity:0;width:1px;height:1px}
.keks-schalter span{width:46px;height:26px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);position:relative;transition:background .25s}
.keks-schalter span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--keks-hell),var(--keks-teig) 60%,var(--keks-dunkel));box-shadow:inset -2px -2px 0 rgba(75,42,20,.35);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.keks-schalter input:checked+span{background:rgba(227,168,92,.55);border-color:rgba(246,207,142,.7)}
.keks-schalter input:checked+span::after{transform:translateX(20px) rotate(200deg)}
.keks-schalter input:disabled+span{opacity:.6;cursor:not-allowed}
.keks-speichern{grid-column:1/-1;margin-top:4px}
.keks-hinweis{grid-column:1/-1;font-size:.74rem;color:#8ba4b0;margin:6px 0 0}
.keks-status{grid-column:1/-1;min-height:0;font-size:.86rem;color:var(--keks-hell);font-weight:600}
.keks-status:empty{display:none}
.keks-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#b9cdd6;cursor:pointer;font-size:.9rem;display:none}
.keks.einstellungen .keks-x{display:block}
.keks-x:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* Krümel (vom Biss) */
.keks-kruemel{position:fixed;width:7px;height:6px;border-radius:45% 55% 40% 60%;background:var(--keks-teig);pointer-events:none;z-index:401;will-change:transform,opacity}
.keks-kruemel.s{background:var(--keks-schoko)}
.keks-kruemel.h{background:var(--keks-hell)}

/* Bewegung */
@media (prefers-reduced-motion:no-preference){
  .keks.rein .keks-karte{animation:keksKarteRein .7s cubic-bezier(.22,1,.36,1) both}
  .keks.rein .keks-koerper{animation:keksRollen 1.05s cubic-bezier(.34,1.3,.64,1) .15s both}
  .keks.da .keks-koerper{animation:keksSchweben 5s ease-in-out infinite}
  .keks.da .keks-augen .lid{animation:keksBlinzeln 5.5s infinite}
  .keks.raus .keks-karte{animation:keksKarteRaus .5s cubic-bezier(.55,0,.75,.2) both}
  .keks.weg .keks-koerper{animation:keksWegrollen 1s cubic-bezier(.55,0,.4,1) both}
  .keks.mampf .keks-koerper{animation:keksMampf .26s ease-out}
  .keks-knopf:hover{animation:keksWackeln .45s ease}
}
@keyframes keksKarteRein{0%{opacity:0;transform:translateY(40px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes keksKarteRaus{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(30px) scale(.94)}}
@keyframes keksRollen{0%{transform:translateX(-170px) rotate(-320deg);opacity:0}55%{opacity:1}78%{transform:translateX(6px) rotate(10deg) scale(1.04,.95)}100%{transform:none}}
@keyframes keksSchweben{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes keksBlinzeln{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
@keyframes keksMampf{0%{transform:scale(1)}40%{transform:scale(.9,.94) rotate(-4deg)}100%{transform:scale(1)}}
@keyframes keksWegrollen{0%{transform:none}20%{transform:translateX(-8px) rotate(-12deg)}100%{transform:translateX(420px) rotate(560deg);opacity:0}}
@keyframes keksWackeln{0%,100%{rotate:0deg}30%{rotate:-1.5deg}60%{rotate:1.5deg}}

/* Gesichtsausdrücke (Mund wird per Klasse umgeschaltet) */
.keks-mund{display:none}
.keks[data-gesicht="laecheln"] .m-laecheln,.keks:not([data-gesicht]) .m-laecheln,
.keks[data-gesicht="lecker"] .m-lecker,.keks[data-gesicht="zwinker"] .m-laecheln,.keks[data-gesicht="froh"] .m-froh,.keks[data-gesicht="neugierig"] .m-neugierig{display:inline}
.keks[data-gesicht="zwinker"] .auge-r .offen,.keks[data-gesicht="froh"] .offen{display:none}
.keks .zu{display:none}
.keks[data-gesicht="zwinker"] .auge-r .zu,.keks[data-gesicht="froh"] .zu{display:inline}

/* Handy: als Leiste unten, Keks kleiner neben der Überschrift */
@media(max-width:640px){
  .keks{left:10px;right:10px;bottom:10px;width:auto}
  .keks-karte{grid-template-columns:74px 1fr;padding:16px 14px 14px 12px;gap:2px 12px}
  .keks-buehne,.keks-svg{width:74px;height:74px}
  .keks h2{font-size:1.12rem}
  .keks-text{font-size:.82rem;margin-bottom:10px}
  .keks-knoepfe{grid-template-columns:1fr;gap:7px}
  .keks-knopf{min-height:44px;font-size:.88rem}
  .keks-auswahl{max-height:42vh}
}
html.keks-offen .chat-teaser,html.keks-offen .mobil-leiste{visibility:hidden}

/* Rechtstexte: Tabelle der Cookies und Speicher (content/datenschutz.html) */
.legal table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:.88rem}
.legal th,.legal td{border:1px solid var(--line2,rgba(255,255,255,.16));padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:rgba(255,255,255,.05);color:#fff}
.legal .tabelle-scroll{overflow-x:auto}
.keks-oeffnen{appearance:none;cursor:pointer;font:inherit;color:var(--cyan,#22d3ee);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px}
.keks-oeffnen.knopf{display:inline-block;margin:6px 0 14px;padding:10px 16px;border-radius:12px;border:1px solid rgba(246,207,142,.5);background:rgba(246,207,142,.08);color:#fff3df;text-decoration:none;font-weight:600}
footer .keks-oeffnen{color:var(--muted,#8ba4b0);font-size:inherit;text-decoration:none;transition:color .25s;text-align:left}
footer .keks-oeffnen:hover{color:var(--cyan,#22d3ee)}