/* =================================================================
   FONDULI – Brand System & Komponenten
   Mobile first · 375 → 768 → 1280 → 1920
   ================================================================= */

/* ---------- Schriften (selbst gehostet, SIL OFL) ---------- */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Farbe */
  --cream:#FFF8F0;          /* Warm Cream – Grundfläche */
  --fondue:#F2E5D5;         /* Fondue Cream – Flächen 2 */
  --paper:#FFFDF9;          /* Karten */
  --choc:#4A2D26;           /* Chocolate – Primär */
  --dark:#2A1915;           /* Dark Chocolate – Text */
  --caramel:#C89B6B;        /* Akzent */
  --caramel-ink:#8A5E33;    /* Akzent als Text (AA auf Cream) */
  --gold:#E6B953;           /* Cheese Gold */
  --xmas-red:#9F2F2F;       /* Saison, sparsam */
  --xmas-green:#344E3A;     /* Saison, sparsam */
  --ink-soft:#5E4740;       /* Fliesstext gedämpft (AA) */
  --line:rgba(42,25,21,.12);

  /* Typo */
  --f-head:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:.78rem; --fs-s:.9rem; --fs-m:1rem; --fs-l:1.15rem;
  --fs-h3:1.35rem;
  --fs-h2:clamp(2rem,1.3rem + 3.2vw,3.3rem);
  --fs-h1:clamp(2.45rem,1.4rem + 5vw,4.9rem);

  /* Abstand (8er-Raster) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px; --sp-12:96px;
  --gutter:20px;
  --section:clamp(72px,9vw,128px);

  /* Form */
  --r-s:14px; --r-m:22px; --r-l:30px; --r-pill:999px;
  --shadow:0 1px 2px rgba(42,25,21,.06),0 14px 34px -14px rgba(42,25,21,.28);

  /* Bewegung */
  --ease:cubic-bezier(.22,.8,.24,1);
  --dur:.5s;
}
@media (min-width:768px){:root{--gutter:32px}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--dark);font:400 var(--fs-m)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);font-weight:560;line-height:1.06;letter-spacing:-.018em;margin:0 0 .45em;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}
h1 em,h2 em{font-style:italic;font-weight:480;color:var(--choc)}
p{margin:0 0 1em}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section) 0}
.section--fondue{background:var(--fondue)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.eyebrow{display:inline-block;font:italic 480 1.08rem/1.3 var(--f-head);color:var(--caramel-ink);margin-bottom:var(--sp-1)}
.lead{font-size:var(--fs-l);color:var(--ink-soft);max-width:36em;text-wrap:pretty}
.muted{color:var(--ink-soft)}
.nowrap{white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:12px;z-index:200;background:var(--paper);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow)}
.skip-link:focus{left:12px}
:focus-visible{outline:2.5px solid var(--caramel);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:54px;padding:0 28px;border-radius:var(--r-pill);border:0;font:600 var(--fs-m)/1 var(--f-body);text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn--primary{background:var(--choc);color:var(--cream);box-shadow:0 8px 20px -10px rgba(42,25,21,.7)}
.btn--primary:hover{background:var(--dark)}
.btn--light{background:var(--cream);color:var(--dark)}
.btn--light:hover{background:#fff}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--block{width:100%}
.btn--s{min-height:44px;padding:0 18px;font-size:var(--fs-s)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Platzhalter-Markierung (nur interne Vorschau) ---------- */
mark.tbc{background:#FFE9A8;color:#5c4400;padding:.05em .3em;border-radius:4px;outline:1.5px dashed #b8860b;font-weight:600}
.preview-bar{position:relative;z-index:100;background:#5c4400;color:#FFE9A8;font:600 var(--fs-xs)/1.4 var(--f-body);padding:8px var(--gutter);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}
.preview-bar a{color:#fff}
.internal-note{display:block;background:#FFE9A8;color:#5c4400;border:2px dashed #b8860b;border-radius:12px;padding:10px 14px;font:600 var(--fs-s)/1.4 var(--f-body);margin:0 0 var(--sp-3)}

/* ---------- Ankündigung ---------- */
.announce{background:var(--dark);color:var(--cream);font-size:var(--fs-s);text-align:center;padding:9px var(--gutter);line-height:1.4}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.site-header.is-scrolled{border-color:var(--line)}
.site-header__inner{display:flex;align-items:center;gap:10px;height:66px}
.logo{font:700 1.55rem/1 var(--f-head);letter-spacing:.03em;text-decoration:none;margin-right:auto;color:var(--dark)}
.logo span{color:var(--caramel)}
.nav{display:none}
.nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink-soft);padding:8px 2px;transition:color .2s}
.nav a:hover{color:var(--dark)}
.menu{position:static}
.menu>summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu__panel{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line);padding:8px var(--gutter) 20px;box-shadow:0 20px 30px -20px rgba(42,25,21,.35)}
.menu__panel a{display:block;padding:14px 0;font:500 1.2rem/1.2 var(--f-head);text-decoration:none;border-bottom:1px solid var(--line)}
.menu__panel a:last-child{border-bottom:0}
@media (min-width:1000px){
  .nav{display:flex;gap:26px;margin-right:16px}
  .menu{display:none}
}

/* ---------- Scroll-Geschichte (Hero, fotorealistisch) ----------
   Ohne JS / bei «weniger Bewegung»: ruhiger Hero mit Foto + Split-Section.
   Mit GSAP (.story-anim): fixierte Bühne, Bildfolge läuft beim Scrollen. */
.story{position:relative;background:#F7EDDE}
.story__anchor{position:absolute;top:30%}
.story__stage{position:relative;display:grid;gap:var(--sp-3);padding:var(--sp-3) var(--gutter) var(--sp-8);max-width:1200px;margin:0 auto;align-items:center}
.story__media{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;aspect-ratio:3/4;max-height:78svh;justify-self:center;width:100%;max-width:560px;background:#F7EDDE}
.story__poster{width:100%;height:100%;object-fit:cover}
.story__canvas,.story__shade{display:none}
.st-cap h1{font-size:clamp(2.4rem,1.5rem + 4vw,4.3rem);margin-bottom:.3em}
.st-cap h1 .l2{display:block;font-size:.5em;font-weight:420;letter-spacing:-.01em;line-height:1.15;margin-top:.35em;color:var(--choc)}
.st-cap .lead{margin-bottom:var(--sp-3)}
.st-hint,.st-progress{display:none}
.st-cap--chaes,.st-cap--or,.st-cap--schoggi,.st-cap--end{display:none}
@media (min-width:900px){
  .story__stage{grid-template-columns:1fr 1fr;min-height:calc(100svh - 104px);padding-block:var(--sp-6)}
}

/* Animiert */
.story-anim .story{height:560vh}
@media (max-width:767px){.story-anim .story{height:480vh}}
.story-anim .story__stage{position:sticky;top:66px;height:calc(100svh - 66px);display:block;padding:0;max-width:none;overflow:hidden}
.story-anim .story__media{position:absolute;inset:0;max-width:none;max-height:none;border-radius:0;aspect-ratio:auto}
.story-anim .story__poster{object-fit:contain;object-position:50% 100%}
@media (max-width:899px){.story-anim .story__poster{object-fit:cover}}
.story-anim .story__canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.story-anim .story__shade{display:block;position:absolute;inset:0;background:linear-gradient(to bottom,rgba(42,25,21,.35),var(--dark) 85%);opacity:0}
.story-anim .story__canvas.is-ready+.story__shade{}
.story-anim .st-cap{position:absolute;z-index:4;left:50%;transform:translateX(-50%);top:clamp(16px,4svh,48px);width:min(100% - 2 * var(--gutter),760px);text-align:center}
.story-anim .st-cap .lead{margin-inline:auto;max-width:34em}
.story-anim .st-cap--chaes,.story-anim .st-cap--schoggi,.story-anim .st-cap--end{display:block;opacity:0;visibility:hidden}
.story-anim .st-cap--or{display:block;opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:899px){.story-anim .st-cap--hero .lead{font-size:var(--fs-m)}.story-anim .st-cap--hero .hero__note{display:none}}
.st-team{font:560 clamp(2.4rem,1.6rem + 3vw,4rem)/1.02 var(--f-head);letter-spacing:-.02em;margin:0 0 .25em}
.st-cap--chaes .st-team{color:#8A5E33}
.st-cap--schoggi .st-team{color:var(--choc)}
.st-line{font-size:var(--fs-l);color:var(--ink-soft);margin:0 auto;max-width:24em}
.st-or{font:italic 400 clamp(4.5rem,3rem + 8vw,9rem)/1 var(--f-head);color:var(--caramel-ink);margin:0}
.story-anim .st-cap--end{top:auto;bottom:clamp(96px,14svh,140px);color:var(--cream)}
.st-cap--end h2{color:var(--cream);font-size:clamp(2.6rem,1.6rem + 4.6vw,5rem)}
.st-cap--end p{color:rgba(255,248,240,.85);font-size:var(--fs-l);max-width:26em;margin:0 auto}
.story-anim .st-hint{display:flex;position:absolute;z-index:4;left:max(var(--gutter),calc((100vw - 1200px)/2 + var(--gutter)));bottom:24px;flex-direction:column;align-items:flex-start;gap:6px;font:italic 460 .95rem/1 var(--f-head);color:var(--ink-soft)}
@media (max-width:899px){.story-anim .st-hint{display:none}}
.st-hint i{width:1.5px;height:28px;background:linear-gradient(var(--caramel-ink),transparent);animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.story-anim .st-progress{display:block;position:absolute;z-index:4;right:max(var(--gutter),calc((100vw - 1200px)/2 + var(--gutter)));top:50%;width:2px;height:120px;margin-top:-60px;background:rgba(74,45,38,.15);border-radius:2px;overflow:hidden}
.st-progress i{display:block;width:100%;height:100%;background:var(--caramel-ink);transform:scaleY(0);transform-origin:top}
@media (max-width:899px){.story-anim .st-progress{display:none}}
.story-anim .split{display:none}

/* Tropfkante: Schoggi läuft in die nächste helle Section */
.drip-edge{display:block;width:100%;height:clamp(60px,9vw,130px);margin-bottom:calc(-1 * clamp(60px,9vw,130px) + 2px);position:relative;z-index:1;pointer-events:none}
.drip-edge path{fill:var(--dark)}
.choco-zone{background:var(--dark);color:var(--cream)}
.choco-zone h2{color:var(--cream)}
.choco-zone h2 .gold,.choco-zone .gold{color:var(--gold)}
.choco-zone .lead{color:rgba(255,248,240,.8)}
.choco-zone .eyebrow{color:var(--gold)}
.choco-zone .section+.section{border-top:1px solid rgba(255,248,240,.1)}
.choco-zone .bundle__title,.choco-zone .bundle__price{color:var(--dark)}
.choco-zone .shop__meta{color:rgba(255,248,240,.75)}
.choco-zone .shop__meta li::before{color:var(--gold)}
.choco-zone .pay-list li{background:rgba(255,248,240,.08);border-color:rgba(255,248,240,.2);color:var(--cream)}
.choco-zone .pay-list li.twint{background:#fff;color:#000}
.price-display{font:500 clamp(2.6rem,2rem + 2.6vw,3.8rem)/1 var(--f-head);color:var(--gold);margin:var(--sp-2) 0 4px;letter-spacing:-.02em}
.price-display small{font:400 var(--fs-m)/1 var(--f-body);color:rgba(255,248,240,.7);letter-spacing:0;margin-left:8px}
.shop__visual{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:1;background:radial-gradient(70% 60% at 50% 70%,#5a3628 0%,#3a241d 55%,var(--dark) 100%)}
.shop__visual img{width:100%;height:100%;object-fit:cover}
.shop__visual .illo{position:absolute;left:50%;bottom:6%;width:68%;transform:translateX(-50%)}
.shop__visual .illo+.illo{left:30%;width:46%;bottom:5%}


/* ---------- Karte & Formular ---------- */
.card{background:var(--paper);border-radius:var(--r-m);box-shadow:var(--shadow);padding:22px}
@media (min-width:600px){.card{padding:30px}}
.waitlist fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.waitlist legend{font:560 1.2rem/1.25 var(--f-head);margin:0 0 12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:var(--r-pill);background:var(--fondue);font-weight:500;font-size:.95rem;border:1.5px solid transparent;transition:background-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.chip:hover span{border-color:var(--caramel)}
.chip input:checked+span{background:var(--choc);color:var(--cream);transform:translateY(-1px)}
.chip input:focus-visible+span{outline:2.5px solid var(--caramel);outline-offset:2px}
.fields{display:grid;gap:12px;margin-bottom:14px}
@media (min-width:600px){.fields{grid-template-columns:1fr 1.5fr}}
.field label{display:block;font-size:var(--fs-s);font-weight:500;margin-bottom:6px;color:var(--ink-soft)}
.field .opt{font-weight:400;opacity:.75}
.input{width:100%;min-height:54px;border-radius:var(--r-s);border:1.5px solid var(--line);background:#fff;padding:0 16px;font:inherit;font-size:16px;color:var(--dark);transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--caramel);outline:none;box-shadow:0 0 0 4px rgba(200,155,107,.22)}
.input[aria-invalid="true"]{border-color:var(--xmas-red)}
.field-error{color:var(--xmas-red);font-size:var(--fs-s);margin:6px 0 0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.waitlist__note{font-size:var(--fs-s);color:var(--ink-soft);margin:12px 0 0;text-align:center}
.waitlist__fine{font-size:var(--fs-xs);color:var(--ink-soft);margin:8px 0 0;text-align:center;line-height:1.5}
.waitlist__fine a{color:inherit}
.waitlist__early{font-size:var(--fs-s);font-weight:600;color:var(--choc);margin:10px 0 0;text-align:center}
.form-alert{background:#F9E3E0;color:#7d2323;padding:12px 14px;border-radius:12px;font-size:var(--fs-s);margin:0 0 14px}
.waitlist__success{text-align:center;padding:18px 6px}
.waitlist__success-title{font:560 2rem/1.1 var(--f-head);margin:0 0 .35em}
.waitlist__success p{color:var(--ink-soft);margin:0}
.waitlist__success:focus{outline:none}
.waitlist.is-done .waitlist__form{display:none}

/* ---------- Chäs oder Schoggi ---------- */
.split__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:var(--sp-4) 0 var(--sp-3)}
@media (min-width:768px){.split__grid{gap:20px}}
.split__half{position:relative;margin:0;border-radius:var(--r-m);overflow:hidden;aspect-ratio:3/4}
@media (min-width:900px){.split__half{aspect-ratio:4/5}}
.split__half--chaes{background:radial-gradient(110% 80% at 50% 88%,#FBE3A4 0%,#EFC96C 40%,#D9A75E 100%)}
.split__half--schoggi{background:radial-gradient(110% 80% at 50% 88%,#8A5444 0%,#4A2D26 48%,#2A1915 100%)}
.split__half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.split__half .illo{position:absolute;left:50%;bottom:9%;width:86%;transform:translateX(-50%)}
.split__label{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(255,248,240,.94);border-radius:var(--r-pill);padding:10px 12px;font:600 .92rem/1.2 var(--f-body);text-align:center}
@media (min-width:600px){.split__label{left:20px;right:auto;bottom:20px;font-size:1.05rem;padding:12px 22px}}
.split__or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font:italic 500 1.05rem/1 var(--f-head);box-shadow:var(--shadow);z-index:2}
@media (min-width:768px){.split__or{width:76px;height:76px;font-size:1.3rem}}

/* ---------- Weihnachten / dunkle Section ---------- */
.section--dark{background:var(--dark);color:var(--cream)}
.section--dark h2 em{color:var(--gold)}
.section--dark .lead{color:rgba(255,248,240,.8)}
.section--dark .eyebrow{color:var(--gold)}
.gift__grid{display:grid;gap:var(--sp-4);align-items:center}
@media (min-width:900px){.gift__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}}
.gift__visual{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:1;background:radial-gradient(80% 70% at 50% 62%,#6b4334 0%,#3a241d 55%,var(--dark) 100%)}
.gift__visual img{width:100%;height:100%;object-fit:cover}
.gift__visual .illo{position:absolute;left:50%;top:50%;width:78%;transform:translate(-50%,-46%)}
.season-dots{display:inline-flex;gap:5px;margin-right:10px;vertical-align:middle}
.season-dots i{width:7px;height:7px;border-radius:50%;background:var(--xmas-red)}
.season-dots i+i{background:var(--xmas-green);box-shadow:0 0 0 1px rgba(255,248,240,.4)}
.occasions{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-3) 0 var(--sp-4);padding:0;list-style:none}
.occasions li{border:1px solid rgba(255,248,240,.28);border-radius:var(--r-pill);padding:8px 14px;font-size:var(--fs-s)}

/* ---------- Moment ---------- */
.moment__media{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:radial-gradient(60% 45% at 30% 72%,rgba(230,185,83,.55),transparent 70%),radial-gradient(55% 40% at 72% 70%,rgba(200,155,107,.45),transparent 70%),linear-gradient(170deg,#3b2620 0%,var(--dark) 100%)}
@media (min-width:768px){.moment__media{aspect-ratio:16/9}}
@media (min-width:1280px){.moment__media{aspect-ratio:21/9}}
.moment__media img,.moment__media picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.moment__duo{position:absolute;right:6%;bottom:8%;display:flex;align-items:flex-end;width:min(62%,460px)}
.moment__duo .illo{width:56%}
.moment__duo .illo+.illo{margin-left:-12%;width:50%}
@media (max-width:767px){.moment__duo{left:50%;right:auto;top:10%;bottom:auto;transform:translateX(-50%);width:78%}}
.moment__overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--sp-4) var(--sp-3);background:linear-gradient(to top,rgba(42,25,21,.92) 0%,rgba(42,25,21,.45) 40%,transparent 70%);color:var(--cream)}
@media (min-width:768px){.moment__overlay{padding:var(--sp-6);background:linear-gradient(to right,rgba(42,25,21,.9) 0%,rgba(42,25,21,.4) 45%,transparent 70%);align-items:center}}
.moment__content{max-width:470px}
.moment__content h2{color:var(--cream)}
.moment__content p{color:rgba(255,248,240,.85);font-size:var(--fs-l);margin:0}
.moment__content .eyebrow{color:var(--gold)}

/* ---------- So funktioniert's ---------- */
.steps{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:var(--sp-4) 0 0;padding:0;list-style:none}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:20px}}
.step{background:var(--paper);border-radius:var(--r-m);padding:22px 20px;box-shadow:var(--shadow)}
.step__num{font:italic 500 2.6rem/1 var(--f-head);color:var(--caramel);display:block;margin-bottom:10px}
.step h3{margin-bottom:.3em}
.step p{font-size:var(--fs-s);color:var(--ink-soft);margin:0}
.teaser{max-width:640px;margin:0 auto;text-align:center;border:1.5px dashed rgba(138,94,51,.4);border-radius:var(--r-l);padding:var(--sp-6) var(--sp-3)}
.teaser .steam{font-size:2rem;display:block;margin-bottom:8px}

/* ---------- Bundles ---------- */
.shop__grid{display:grid;gap:var(--sp-4);align-items:center}
@media (min-width:900px){.shop__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}}
.bundles{display:grid;gap:14px;margin:var(--sp-3) 0 var(--sp-2);border:0;padding:0}
.bundle{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px;border-radius:18px;background:var(--paper);border:2px solid var(--line);cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .15s var(--ease)}
.bundle:hover{border-color:var(--caramel)}
.bundle input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bundle__radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(42,25,21,.3);display:grid;place-items:center;transition:border-color .2s}
.bundle__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--choc);transform:scale(0);transition:transform .2s var(--ease)}
.bundle:has(input:checked){border-color:var(--choc);box-shadow:0 10px 26px -14px rgba(42,25,21,.5)}
.bundle input:checked~.bundle__radio{border-color:var(--choc)}
.bundle input:checked~.bundle__radio::after{transform:scale(1)}
.bundle input:focus-visible~.bundle__radio{outline:2.5px solid var(--caramel);outline-offset:3px}
.bundle--featured{background:linear-gradient(180deg,#FFF6E2,var(--paper))}
.bundle__title{display:block;font-weight:650}
.bundle__label{display:block;font-size:var(--fs-s);color:var(--ink-soft)}
.bundle__price{text-align:right;font:600 1.15rem/1.2 var(--f-body);white-space:nowrap}
.bundle__unit{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--ink-soft)}
.bundle__save{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--xmas-green)}
.bundle__badge{position:absolute;top:-11px;right:16px;background:var(--gold);color:var(--dark);font:700 .68rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill)}
.shop__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:var(--fs-s);color:var(--ink-soft);margin-top:14px;padding:0;list-style:none}
.shop__meta li::before{content:"✓ ";color:var(--xmas-green);font-weight:700}
.pay-list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.pay-list li{border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:var(--fs-xs);font-weight:600;background:#fff}
.pay-list li.twint{background:#000;color:#fff;border-color:#000}

/* ---------- Produktseite ---------- */
.product{display:grid;gap:var(--sp-4);padding:var(--sp-3) 0 var(--section)}
@media (min-width:900px){.product{grid-template-columns:1.1fr .9fr;gap:var(--sp-8);padding-top:var(--sp-6);align-items:start}.product__info{position:sticky;top:96px}}
.gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r-l);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery::-webkit-scrollbar{display:none}
.gallery__item{position:relative;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1;border-radius:var(--r-l);overflow:hidden;margin:0}
.gallery__item img{width:100%;height:100%;object-fit:cover}
.gallery__item .illo{position:absolute;left:50%;bottom:4%;width:74%;transform:translateX(-50%)}
.gallery__item--chaes{background:radial-gradient(110% 85% at 50% 92%,#F9D58E 0%,#F2E0C6 45%,var(--fondue) 100%)}
.gallery__item--schoggi{background:radial-gradient(110% 80% at 50% 88%,#8A5444 0%,#4A2D26 48%,#2A1915 100%)}
@media (min-width:900px){.gallery{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.gallery__item:first-child{grid-column:1/-1}}
.product__title{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.1rem);margin-bottom:.2em}
.product__subtitle{font:italic 460 1.25rem/1.4 var(--f-head);color:var(--choc);margin-bottom:var(--sp-2)}
.accordion{margin-top:var(--sp-4);border-top:1px solid var(--line)}

/* ---------- FAQ / Accordion ---------- */
.faq{max-width:780px;margin:var(--sp-4) auto 0}
.faq details,.accordion details{border-bottom:1px solid var(--line)}
.faq summary,.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:600 1.05rem/1.35 var(--f-body);min-height:44px}
.faq summary::-webkit-details-marker,.accordion summary::-webkit-details-marker{display:none}
.faq summary::after,.accordion summary::after{content:"";flex:0 0 14px;height:14px;background:linear-gradient(var(--caramel-ink),var(--caramel-ink)) center/14px 2px no-repeat,linear-gradient(var(--caramel-ink),var(--caramel-ink)) center/2px 14px no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after,.accordion details[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 0 22px;color:var(--ink-soft);max-width:62ch}
.faq__a p:last-child{margin:0}

/* ---------- Reels ---------- */
.reels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 10px;margin:var(--sp-4) calc(var(--gutter) * -1) 0;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{flex:0 0 min(64vw,270px);scroll-snap-align:start;margin:0}
.reel__frame{position:relative;aspect-ratio:9/16;border-radius:var(--r-m);overflow:hidden;background:var(--dark)}
.reel__frame video{width:100%;height:100%;object-fit:cover}
.reel__placeholder{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--cream);font-size:var(--fs-s);background:linear-gradient(to top,rgba(42,25,21,.95),rgba(74,45,38,.6)),repeating-linear-gradient(45deg,#3a241d 0 12px,#33201a 12px 24px)}
.reel figcaption{font-size:var(--fs-s);margin-top:10px;color:var(--ink-soft)}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:rgba(255,248,240,.78);padding:var(--sp-8) 0 calc(var(--sp-4) + env(safe-area-inset-bottom));font-size:var(--fs-s)}
.footer__brand{font:700 2rem/1 var(--f-head);color:var(--cream);margin:0 0 8px;letter-spacing:.03em}
.footer__claim{font:italic 460 1.1rem/1.4 var(--f-head);color:var(--gold);margin:0 0 var(--sp-4)}
.footer__links{list-style:none;padding:0;margin:0 0 var(--sp-4);display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
@media (min-width:768px){.footer__links{display:flex;flex-wrap:wrap;gap:4px 30px}}
.footer__links a{display:inline-block;padding:10px 0;text-decoration:none}
.footer__links a:hover{color:var(--cream);text-decoration:underline}
.footer__bottom{border-top:1px solid rgba(255,248,240,.14);padding-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:var(--fs-xs)}

/* ---------- Sticky CTA (mobil) ---------- */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;transform:translateY(150%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s}
.sticky-cta.is-visible{transform:none;visibility:visible;transition:transform .35s var(--ease)}
.sticky-cta .btn{width:100%;box-shadow:0 14px 34px -10px rgba(42,25,21,.6)}
@media (min-width:900px){.sticky-cta{display:none}}

/* ---------- Cookie-Banner ---------- */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;max-width:520px;margin:0 auto;background:var(--paper);border-radius:var(--r-m);box-shadow:0 20px 50px -12px rgba(42,25,21,.45);padding:18px;font-size:var(--fs-s)}
.consent p{margin:0 0 12px;color:var(--ink-soft)}
.consent__actions{display:flex;gap:8px;flex-wrap:wrap}
.consent__actions .btn{flex:1 1 auto}

/* ---------- Einfache Seiten (Recht, Danke) ---------- */
.page{max-width:760px;margin:0 auto;padding:var(--sp-6) var(--gutter) var(--section)}
.page h1{font-size:clamp(2.2rem,1.6rem + 2.5vw,3.3rem)}
.rte h2{font-size:1.5rem;margin:1.6em 0 .5em}
.rte a{color:var(--choc)}
.thanks{text-align:center;padding:var(--section) var(--gutter)}
.thanks .illo{width:200px;margin:0 auto var(--sp-3)}

/* ---------- Illustration ---------- */
.illo text{font-family:var(--f-head)}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.reveal{opacity:1!important;transform:none!important}
}


.hero__note{font-size:var(--fs-s);color:var(--ink-soft);margin:var(--sp-2) 0 0}
.st-cta .btn{min-width:240px}

/* Lesbarkeit der Bild-Texte + Desktop-Hero links neben der Tasse */
.story-anim .st-cap--hero,.story-anim .st-cap--chaes,.story-anim .st-cap--schoggi,.story-anim .st-cap--or{text-shadow:0 1px 18px rgba(247,237,222,.95),0 0 2px rgba(247,237,222,.8)}
.story-anim .st-cap--end{text-shadow:0 2px 24px rgba(42,25,21,.7)}
@media (min-width:900px){
  .story-anim .st-cap--hero{left:max(var(--gutter),calc((100vw - 1200px)/2 + var(--gutter)));top:50%;transform:translateY(-50%);width:min(30vw,430px);text-align:left}
  .story-anim .st-cap--hero .lead{margin-inline:0}
  .story-anim .st-cap--hero h1{font-size:clamp(2.6rem,1.4rem + 2.6vw,4rem)}
}

/* Breite Bildschirme: Bild in 3:4 mittig, Ränder laufen weich in die Bühnenfarbe aus */
.story-anim .story__stage{background:#F3E6D3}
@media (min-width:900px){
  .story-anim .story__media{inset:0 auto 0 50%;transform:translateX(-50%);height:100%;width:auto;aspect-ratio:3/4;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%)}
  .story-anim .story__poster{object-fit:cover;object-position:50% 100%}
}

/* Ruhe-Modus: Überschrift vor dem Foto */
html:not(.story-anim) .st-cap--hero{order:-1}
@media (min-width:900px){html:not(.story-anim) .st-cap--hero{order:0}}