/* base.css, Prototyp v2 von frische-theke.de (nur lokal, nichts davon ist live).
   Teil 1 ist der gemeinsame Block aus v1, Zeichen für Zeichen übernommen (in v1 stand er in jeder Seite).
   Teil 2 sind die neuen gemeinsamen Bausteine von v2. Seiten-eigene Regeln stehen weiter im <style> der Seite.
   Alles mit "nur Prototyp" fliegt beim echten Einbau raus. */

/* ================= Teil 1, gemeinsamer Block aus v1 ================= */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-var.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/lora-var.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#FAF7F2;
  --paper:#FFFFFF;
  --ink:#241B16;
  --muted:#6E635C;
  --soft:#6E635C;
  --bordeaux:#8E2B35;
  --bordeaux-dark:#74222B;
  --bordeaux-tint:#F6E9EA;
  --green:#1E7B4F;
  --green-tint:#E7F3EC;
  --orange:#FF7A59;
  --orange-dark:#EA6A47;
  --orange-tint:#FFF1ED;
  --line:#E8E0D6;
  --radius:18px;
  --radius-sm:13px;
  --shadow:0 1px 2px rgba(36,27,22,.04),0 12px 32px -12px rgba(36,27,22,.12);
}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
svg{max-width:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
:focus-visible{outline:3px solid var(--bordeaux);outline-offset:2px;border-radius:6px}

/* ---- Prototyp-Hilfen (nicht Teil der echten Seite) ---- */
.proto-band{
  background:var(--ink);color:#FAF7F2;font-size:.74rem;line-height:1.4;
  padding:8px 16px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;text-align:center;
}
.proto-btn{
  font-family:inherit;font-size:.72rem;font-weight:700;color:var(--ink);background:#FFE08A;
  border:0;border-radius:100px;padding:6px 12px;cursor:pointer;min-height:30px;
}
.proto-btn[aria-pressed="true"]{background:#fff}
.dtag{
  display:none;font-size:.62rem;font-weight:800;letter-spacing:.03em;line-height:1.3;
  background:#FFE08A;color:#4A3500;border-radius:5px;padding:1px 5px;margin-left:5px;
  vertical-align:middle;white-space:normal;overflow-wrap:anywhere;font-style:normal;text-transform:none;
  letter-spacing:0;font-weight:700;text-align:left;
}
body.zeige-d .dtag{display:inline}
.faq summary .dtag{display:none}
body.zeige-d .faq summary .dtag{display:inline}
.platz{
  display:inline;background:#FFF4C2;border:1.5px dashed #C79A00;border-radius:6px;
  padding:1px 6px;color:#5A4300;font-weight:600;font-style:normal;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.proto-nur{display:none}
body.zeige-d .proto-nur{display:block}
.toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:120;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;
  font-size:.82rem;line-height:1.4;max-width:min(90vw,420px);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.toast.show{opacity:1}

/* ---- Kopfzeile ---- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{
  font-family:'Lora',Georgia,serif;font-weight:700;font-size:1.25rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em;white-space:nowrap;
}
.brand span{color:var(--bordeaux)}
.pill-orange{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;
  font-weight:700;color:var(--ink);text-decoration:none;
  background:var(--orange);border-radius:100px;white-space:nowrap;
  box-shadow:0 5px 16px -4px rgba(255,122,89,.65);
  transition:background .2s,transform .15s;
}
.pill-orange:hover{background:var(--orange-dark);transform:translateY(-1px)}

/* ---- FAQ ---- */
.faq details{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;min-height:48px;
  padding:15px 16px;font-size:.94rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.25rem;color:var(--soft);transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 16px 15px;font-size:.88rem;color:var(--muted);line-height:1.6}
.faq .faq-body a{color:var(--bordeaux);font-weight:600;text-underline-offset:2px}
.faq .faq-body a[href^="tel"]{white-space:nowrap}
.faq .faq-body strong{color:var(--ink)}
.faq h2{
  font-family:'Lora',Georgia,serif;font-size:1.45rem;font-weight:700;
  text-align:center;margin-bottom:20px;letter-spacing:-.01em;
}

/* ---- Fuß ---- */
.footer{
  text-align:center;padding:26px 20px 34px;margin-top:auto;
  font-size:.76rem;color:var(--soft);line-height:1.7;
}
.footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.footer .legal-links{display:flex;gap:6px 16px;justify-content:center;flex-wrap:wrap;margin-top:6px}



/* ================= Teil 2, neu in v2 ================= */

/* hidden muss auch gegen display:flex der Knöpfe gewinnen */
[hidden]{display:none!important}

/* Seiten-Leiste im Prototyp-Band (nur Prototyp) */
.proto-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px}
.proto-nav a{color:#FFE08A;font-weight:700;text-decoration:none;white-space:nowrap}
.proto-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.proto-nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Beispielzahl: gelb gestrichelt wie .platz, damit niemand sie für echt hält (nur Prototyp) */
.bsp{
  background:#FFF4C2;border:1.5px dashed #C79A00;border-radius:8px;color:#5A4300;padding:0 .2em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.bsp-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#5A4300;background:#FFF4C2;border:1.5px dashed #C79A00;
  border-radius:100px;padding:4px 10px;line-height:1.3;
}

/* Umschalter für Beispiel-Zustände (nur Prototyp) */
.proto-zustand{
  margin-top:16px;padding:10px 12px 12px;border:1.5px dashed #C79A00;border-radius:12px;background:#FFF9DF;
  font-size:.74rem;line-height:1.4;color:#5A4300;text-align:left;
}
.proto-zustand b{display:block;margin-bottom:7px}
.proto-zustand .knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.proto-zustand button{
  font-family:inherit;font-size:.74rem;font-weight:700;color:#4A3500;background:#FFE08A;
  border:0;border-radius:100px;padding:6px 11px;min-height:32px;cursor:pointer;
}
.proto-zustand button[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 1.5px #C79A00}
.proto-zustand code{font-size:.72rem;overflow-wrap:anywhere;background:#fff;border-radius:5px;padding:1px 5px}

/* Video-Spot (Karina-Spots, Ansage Dominic 31.10.): Hochformat, Poster, Steuerleiste, kein Autoplay */
.spot{max-width:300px;margin:0 auto}
.spot-video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:22px;background:#1D1411;box-shadow:var(--shadow);object-fit:cover}
.spot figcaption{font-size:.8rem;color:var(--muted);line-height:1.5;text-align:center;margin-top:10px}
/* Spots starten stumm von selbst (spot.js, Ansage 31.10. abends), Ton nur per Tipp */
.spot-rahmen{position:relative}
.spot-video{cursor:pointer}
.spot-ton{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;
  border:0;border-radius:100px;padding:10px 15px;background:rgba(36,27,22,.8);color:#fff;font:700 .82rem/1 'Inter',system-ui,sans-serif;
  cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}
.spot-ton:hover{background:rgba(36,27,22,.95)}
.spot-ton:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Backtheke: kein Stand und keine Wunschzeit, nur ein ehrliches Wort (Ansage 31.10. abends), auf Danke, Status und Wunschzeit */
.karten-seite .warum{background:var(--cream);border-left:4px solid var(--bordeaux);border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 18px;font-size:.93rem;line-height:1.6}
.karten-seite .warum strong{display:block;margin-bottom:4px}
.karten-seite .weiter-text{font-size:.98rem;line-height:1.6;margin-bottom:20px}

/* Nur für Screenreader */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Wahl-Chips: Radio und Checkbox als Pillen (Theken-Check, Lohn-Korridor, Wunschzeit) */
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl .chip{position:relative}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl label{
  display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;line-height:1.25;
  border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;font-size:.9rem;font-weight:600;
  cursor:pointer;background:var(--cream);color:var(--ink);transition:background .15s,border-color .15s;
}
.wahl input:checked + label{background:var(--bordeaux-tint);border-color:var(--bordeaux);color:var(--bordeaux)}
.wahl input:focus-visible + label{outline:3px solid var(--bordeaux);outline-offset:2px}
.wahl input:disabled + label{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.wahl input:not(:disabled) + label:hover{border-color:var(--bordeaux)}}

/* Knöpfe */
.knopf{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;width:100%;
  background:var(--bordeaux);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;font-family:inherit;
  line-height:1.25;text-align:center;border:0;border-radius:var(--radius-sm);padding:13px 16px;cursor:pointer;
  transition:background .15s;
}
.knopf:hover{background:var(--bordeaux-dark)}
.knopf svg{width:20px;height:20px;flex-shrink:0}
.knopf.hell{background:var(--paper);color:var(--bordeaux);box-shadow:inset 0 0 0 1.5px var(--bordeaux)}
.knopf.hell:hover{background:var(--bordeaux-tint)}
.knopf.orange{background:var(--orange);color:var(--ink)}
.knopf.orange:hover{background:var(--orange-dark)}
.knopf.klein{min-height:44px;width:auto;font-size:.9rem;padding:10px 15px}

/* ---- Karten-Seiten (Danke, Status, Wunschzeit): eine Karte in der Mitte, wie die Danke-Seite in v1 ---- */
body.karten-seite{display:flex;flex-direction:column}
.karten-seite .topbar-inner{max-width:560px}
.karten-seite main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:28px 16px 36px}
.karten-seite .card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 22px 26px;max-width:520px;width:100%;
  box-shadow:var(--shadow);animation:fadeUp .5s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.karten-seite .ok{width:66px;height:66px;border-radius:50%;background:var(--green-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.karten-seite .ok svg{width:32px;height:32px;color:var(--green)}
.karten-seite h1{font-family:'Lora',Georgia,serif;font-size:1.6rem;font-weight:700;margin-bottom:10px;text-align:center;line-height:1.2}
.karten-seite .lead{color:var(--ink);font-size:1rem;line-height:1.6;text-align:center;margin-bottom:22px}
.karten-seite .dach{display:block;text-align:center;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--bordeaux);margin-bottom:8px}
.kasten-h{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);font-weight:700;margin-bottom:12px}

.karten-seite .nummer-liste{list-style:none;margin:16px 0 0}
.karten-seite .nummer-liste li{padding:12px 0;border-top:1px solid var(--line)}
.karten-seite .nummer-liste .wer{display:block;font-size:.78rem;color:var(--muted);margin-bottom:2px}
.karten-seite .nummer-liste .gross{font-size:1.2rem;font-weight:800;color:var(--bordeaux);text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.karten-seite .nummer-liste .intl{display:block;font-size:.82rem;color:var(--muted);margin-top:1px}
.karten-seite .nummer-liste .intl a{color:var(--muted);text-decoration:none}

.karten-seite .wa-zeile{
  display:flex;gap:10px;align-items:center;margin-bottom:22px;padding:13px 14px;
  background:var(--green-tint);border-radius:var(--radius-sm);font-size:.94rem;line-height:1.45;
}
.karten-seite .wa-zeile svg{width:22px;height:22px;flex-shrink:0;color:var(--green)}
.karten-seite .wa-zeile a{color:var(--bordeaux);font-weight:700;text-underline-offset:2px}

.karten-seite .attrappe{display:none;padding:16px 14px;background:var(--green-tint);border:1px solid rgba(30,123,79,.3);border-radius:var(--radius-sm);font-size:.9rem;line-height:1.55;text-align:left;margin-top:14px}
.karten-seite .attrappe.sichtbar{display:block}
.karten-seite .attrappe strong{display:block;color:var(--green);margin-bottom:4px}
.karten-seite .attrappe a{color:var(--bordeaux);font-weight:700;text-underline-offset:2px}

/* Hinweis zum Schutz des persönlichen Links (Status und Wunschzeit) */
.schutz{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--muted);line-height:1.5;padding:11px 12px;background:var(--cream);border:1px solid var(--line);border-radius:10px}
.schutz svg{width:16px;height:16px;flex-shrink:0;color:var(--green);margin-top:2px}