/* ═══════════════════════════════════════════════════════════════════
   STAR PIZZA SERVICE DELMENHORST — „Sternennacht & Bon"
   Hero: dunkle Bühne, Pizzastück-Fächer, gelbe Sterne (Marke „Star")
   Body: Creme-Papier, Tomatenrot/Sterngelb/Basilikumgrün aus dem Logo,
         Bestellung als Kassenbon. Fonts lokal (DSGVO).
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage';src:url('assets/fonts/bricolage-latin.woff2') format('woff2');
  font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;}
@font-face{font-family:'Figtree';src:url('assets/fonts/figtree-latin.woff2') format('woff2');
  font-weight:300 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Caveat';src:url('assets/fonts/caveat-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;}

:root{
  --night:#140C09;
  --night-2:#1F1511;
  --night-3:#2A1D17;
  --cream:#FBF3E4;
  --paper:#FFFCF6;
  --ink:#1A1210;
  --mute:#76675D;
  --line:#E8DCC8;
  --rot:#E12B1F;
  --rot-dk:#A3160E;
  --gelb:#FFC81F;
  --gelb-hell:#FFE27A;
  --gruen:#1E9C45;

  --glow:#7C1017;   /* setzt hero.js pro Pizza */

  --disp:'Bricolage','Arial Narrow',Impact,sans-serif;
  --body:'Figtree','Segoe UI',system-ui,sans-serif;
  --hand:'Caveat','Segoe Script',cursive;

  --wrap:min(1320px,90vw);
  --nav-h:5.8rem;
  --ease:cubic-bezier(.6,.04,.24,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.3,1.5,.5,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 4.5rem)}
html.no-scroll,html.mob-open{overflow:hidden}
body{
  font-family:var(--body);color:var(--ink);background:var(--cream);
  font-size:clamp(.98rem,.94rem + .2vw,1.06rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
::selection{background:var(--gelb);color:var(--ink)}
[hidden]{display:none!important}
.wrap{width:var(--wrap);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.1rem}

/* ── Bausteine ──────────────────────────────────────────────────── */
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--rot);
  margin-bottom:1rem;
}
.kicker::before{content:'★';color:var(--gelb);font-size:1rem;letter-spacing:0;-webkit-text-stroke:1px var(--rot-dk)}
.kicker--light{color:var(--gelb)}
.kicker--light::before{-webkit-text-stroke:0}
.giant{
  font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;
  font-size:clamp(2.9rem,1.2rem + 6.6vw,6.6rem);line-height:.9;letter-spacing:-.01em;
}
.giant .dot{color:var(--rot)}
.giant--light{color:#fff}
.giant--light .dot{color:var(--gelb)}
.copy{color:var(--mute);max-width:44ch;margin-top:1.4rem;font-size:1.08em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.95rem 1.6rem;border-radius:999px;font-weight:800;font-size:.86rem;letter-spacing:.02em;
  position:relative;overflow:hidden;isolation:isolate;border:2px solid var(--ink);
  transition:color .4s var(--ease),border-color .4s,transform .25s var(--ease-soft);
}
.btn span,.btn svg{position:relative;z-index:2}
.btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-soft)}
.btn::before{content:'';position:absolute;inset:0;z-index:1;background:var(--ink);border-radius:inherit;transform:translateY(102%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn--star{background:var(--rot);border-color:var(--rot);color:#fff;box-shadow:0 6px 0 -1px var(--rot-dk)}
.btn--star::before{background:var(--gelb)}
.btn--star:hover{color:var(--ink);border-color:var(--gelb)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink::before{background:var(--rot)}
.btn--light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--light::before{background:#fff}
.btn--light:hover{color:var(--ink);border-color:#fff}
.btn[disabled]{opacity:.38;pointer-events:none;box-shadow:none}

.demo-flag{
  position:fixed;left:1rem;bottom:1rem;z-index:70;
  background:rgba(20,12,9,.86);color:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  font-size:.66rem;font-weight:600;letter-spacing:.06em;padding:.45rem .8rem;border-radius:99px;
  border:1px solid rgba(255,200,31,.35);pointer-events:none;
}

/* ══════════════ KOPFZEILE ══════════════ */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;
  padding:0 clamp(1rem,3vw,2.4rem);color:#fff;
  transition:background-color .45s var(--ease-soft),color .45s,box-shadow .45s;
}
.nav.is-solid{background:rgba(251,243,228,.92);backdrop-filter:blur(14px) saturate(1.3);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav__logo img{height:5.2rem;width:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));transition:transform .4s var(--ease-pop)}
.nav.is-solid .nav__logo img{filter:none}
.nav__logo:hover img{transform:rotate(-4deg) scale(1.05)}
.nav__links{display:flex;justify-content:center;gap:clamp(1rem,2.2vw,2.2rem);font-weight:600;font-size:.9rem}
.nav__links a{position:relative;padding:.3rem 0;opacity:.86;transition:opacity .3s}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:-.1rem;height:2px;background:var(--gelb);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__act{display:flex;align-items:center;gap:.9rem}
.nav__tel{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums}
.nav__tel svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.nav__cart{position:relative;width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;opacity:.92;transition:background-color .3s,color .3s}
.nav__cart svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav__cart:hover{background:var(--gelb);color:var(--ink);border-color:var(--gelb)}
.nav__count{position:absolute;top:-.3rem;right:-.35rem;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:99px;background:var(--rot);color:#fff;font-size:.7rem;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.nav__cta{padding:.75rem 1.25rem;font-size:.8rem}
.nav__burger{display:none;width:2.8rem;height:2.8rem;position:relative}
.nav__burger span{position:absolute;left:.7rem;right:.7rem;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.nav__burger span:first-child{top:1.1rem}.nav__burger span:last-child{top:1.6rem}
.mob-open .nav__burger span:first-child{transform:translateY(.25rem) rotate(45deg)}
.mob-open .nav__burger span:last-child{transform:translateY(-.25rem) rotate(-45deg)}
.mob-open .nav{background:var(--night);color:#fff}
.mobilnav{position:fixed;inset:var(--nav-h) 0 0;z-index:59;background:var(--night);color:#fff;display:flex;flex-direction:column;padding:2rem clamp(1rem,5vw,2rem);gap:.3rem}
.mobilnav a{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:2.4rem;line-height:1.15;border-bottom:1px solid rgba(255,255,255,.08);padding:.35rem 0}
.mobilnav__cta{margin-top:auto;font-size:1.2rem!important;color:var(--gelb);border:0!important}

@media(max-width:1100px){.nav__links{display:none}.nav{grid-template-columns:auto 1fr}.nav__act{justify-self:end}}
@media(max-width:760px){
  :root{--nav-h:4.4rem}
  .nav__tel span,.nav__cta{display:none}
  .nav__tel{width:2.8rem;height:2.8rem;border-radius:50%;border:1.5px solid currentColor;justify-content:center}
  .nav__burger{display:block}
  .nav__logo img{height:3.6rem}
}

/* ══════════════ HERO ══════════════ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;overflow:clip;isolation:isolate;  /* clip: lässt sich auch per Fokus/scrollIntoView nicht seitlich verschieben */
  background:radial-gradient(120% 80% at 50% 0%,#24140F 0%,var(--night) 60%);color:#fff;
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + clamp(.4rem,2vh,1.6rem)) clamp(1rem,3.2vw,2.6rem) 0;
}
.hero::after{ /* feines Korn */
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64% 46% at 50% 104%,var(--glow) 0%,transparent 72%),
    radial-gradient(40% 30% at 50% 96%,rgba(255,200,31,.12) 0%,transparent 70%);
  transition:background 1.1s var(--ease-soft);
}
.hero__vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(88% 70% at 50% 42%,transparent 40%,rgba(0,0,0,.7) 100%)}

.hero__head{position:relative;z-index:6;text-align:center;pointer-events:none}
.hero__cta{display:none;pointer-events:auto;margin:clamp(.9rem,2.4svh,1.4rem) auto 0;align-items:center;justify-content:center;gap:.6rem;
  width:min(100%,19rem);background:var(--rot);color:#fff;font-weight:800;font-size:1.02rem;padding:1rem 1.4rem;border-radius:99px;
  box-shadow:0 6px 0 -1px var(--rot-dk),0 18px 40px rgba(225,43,31,.42);transition:transform .3s var(--ease-pop),background-color .3s,color .3s}
.hero__cta svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero__cta:active{transform:translateY(2px)}
.hero__sub{display:none;margin-top:.6rem;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.6)}
.hero__kicker{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.5rem;align-items:center;margin-bottom:clamp(.7rem,1.8vh,1.2rem);
  font-size:.78rem;font-weight:700;color:rgba(255,255,255,.86);
}
.hero__kicker>span{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.hero__rate i{font-style:normal;color:var(--gelb);letter-spacing:.06em}
.hero__live .live{margin-right:0}
.hero__title{
  font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;
  font-size:clamp(2.3rem,.7rem + 5.6vw,5.6rem);line-height:.92;letter-spacing:-.008em;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.hero__title em{
  font-style:normal;color:var(--gelb);position:relative;white-space:nowrap;
  display:inline-block;vertical-align:baseline;text-align:center;
  font-size:calc(1em * var(--hw-fit,1));
  font-kerning:none;font-variant-ligatures:none;
  transition:width .42s var(--ease-soft);
}
.hero__title[data-hw-stack] em{display:block;margin-left:auto;margin-right:auto}
.hero__title[data-hw-quiet] em{transition:none!important}
.hero__title em::after{content:none}
.hw__rule{
  position:absolute;left:.04em;right:.04em;bottom:-.08em;height:5px;pointer-events:none;opacity:.95;
  background-image:radial-gradient(circle,var(--rot) 2px,transparent 2.3px);
  background-size:12px 5px;background-position:0 50%;background-repeat:repeat-x;
}
.hw__cut{
  position:absolute;left:0;top:-.14em;bottom:-.18em;width:2px;opacity:0;
  transform:translate3d(-10px,0,0);pointer-events:none;
  background:linear-gradient(180deg,transparent 0,var(--gelb) 14%,#FFF8DC 50%,var(--gelb) 86%,transparent 100%);
  box-shadow:0 0 18px 4px rgba(255,200,31,.45);
}
.hw__rig{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;pointer-events:none}
.hw__rig span{display:inline-block}
.hw__layer{display:inline-block;position:relative;white-space:nowrap}
.hw__layer--out{position:absolute;left:0;right:0;top:0;text-align:center}
.hw__l{display:inline-block}
.hw__layer::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-.5em;right:-.5em;top:-.44em;bottom:-.38em;opacity:0;
  background:radial-gradient(closest-side,rgba(255,200,31,.38) 0%,rgba(225,43,31,.2) 54%,transparent 78%);
  animation:hwGlut .56s cubic-bezier(.36,.06,.2,1) .04s both;
}
.hw__layer--out::before,.hw__layer--still::before{animation:none;opacity:0}
@keyframes hwGlut{
  0%{opacity:0;transform:translate3d(-14%,0,0) scaleX(.6)}
  28%{opacity:.85}62%{opacity:.5}
  100%{opacity:0;transform:translate3d(12%,0,0) scaleX(1.16)}
}
.hw__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .hero__title em{transition:none}.hw__cut{display:none}.hw__layer::before{animation:none;opacity:0}
}

/* Fächer — Mechanik wie La Gondola (acht Plätze à 45°, --push = Lücke) */
.fan{position:absolute;left:50%;bottom:3vh;width:0;height:0;z-index:4;--push:18vh}
.slice,.pick{
  --a:0deg;--s:1;--o:0;--b:.3;
  position:absolute;left:0;top:0;
  width:clamp(10rem,min(39vh,23vw),24rem);aspect-ratio:710/880;
  transform-origin:0 0;
  transform:translateY(var(--ein,0px)) rotate(var(--a)) translateY(calc(-1 * var(--push))) scale(var(--s)) translate(-50%,-100%);
  will-change:transform;
}
.slice{
  opacity:var(--o);filter:brightness(var(--b)) contrast(1.04);
  transition:transform 1.15s var(--ease),opacity .8s var(--ease-soft),filter .8s var(--ease-soft);
}
.slice img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.62))}
.slice--flip img{transform:scaleX(-1)}
.slice[data-p="0"]{--a:0deg;--s:1;--o:1;--b:1;z-index:9}
.slice[data-p="1"],.slice[data-p="7"]{--o:1;--b:.42;z-index:8}
.slice[data-p="2"],.slice[data-p="6"]{--o:1;--b:.22;z-index:7}
.slice[data-p="3"],.slice[data-p="5"],.slice[data-p="4"]{--o:0;--b:.18;z-index:6}
.slice[data-p="1"]{--a:45deg}.slice[data-p="2"]{--a:90deg}
.slice[data-p="3"]{--a:135deg}.slice[data-p="4"]{--a:180deg}
.slice[data-p="5"]{--a:-135deg}.slice[data-p="6"]{--a:-90deg}
.slice[data-p="7"]{--a:-45deg}
.slice.no-anim{transition:none!important}
.fan[data-auftritt] .slice,.fan[data-auftritt] .pick{
  transition:transform 1.5s cubic-bezier(.16,.82,.26,1),opacity .95s var(--ease-soft),filter .95s var(--ease-soft);
}
.fan[data-ein] .slice{--ein:62vh}
.fan[data-ein] .slice,.fan[data-ein] .pick{opacity:0}
.spot{
  position:absolute;left:50%;bottom:20vh;z-index:3;pointer-events:none;
  width:clamp(20rem,52vw,46rem);aspect-ratio:1;transform:translate(-50%,42%);
  background:radial-gradient(closest-side,var(--glow) 0%,transparent 72%);
  opacity:.85;filter:blur(6px);
  transition:background 1.1s var(--ease-soft),opacity 1.2s var(--ease-soft),transform 1.6s cubic-bezier(.16,.82,.26,1);
}
.spot[data-ein]{opacity:0;transform:translate(-50%,86%) scale(.7)}
.pick{z-index:20;pointer-events:none;opacity:1;transition:opacity .3s var(--ease-soft)}
.pick[data-hide]{opacity:0}
.pick svg{width:100%;height:100%;overflow:visible}
.pick path{fill:none;stroke:var(--gelb);stroke-width:1.5;stroke-dasharray:7 6;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.95}
.pick .knob{fill:var(--gelb);stroke:none;vector-effect:non-scaling-stroke}
@media(min-width:901px) and (max-height:820px){
  .fan{bottom:3vh;--push:15vh}
  .slice,.pick{width:clamp(9rem,min(34vh,20vw),17rem)}
  .spot{bottom:16vh}
}


.hero__ctrl{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(1.9rem,6vh,3.5rem);z-index:14;
  display:flex;align-items:center;gap:clamp(9rem,20vw,16rem);
}
.hero__ctrl button{
  width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;backdrop-filter:blur(4px);
  transition:background-color .35s,transform .35s var(--ease-pop),border-color .35s;
}
.hero__ctrl button:hover{background:var(--gelb);border-color:var(--gelb);transform:scale(1.1)}
.hero__ctrl button:hover svg{stroke:var(--ink)}
.hero__ctrl svg{width:1rem;height:1rem;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}

.tag{position:absolute;z-index:15;right:clamp(1rem,3.2vw,2.6rem);bottom:clamp(5.4rem,11vh,7rem);text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.tag > b{display:block;font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.3rem,1rem + 1vw,2rem);line-height:1}
.tag__preis{margin-top:.45rem;font-variant-numeric:tabular-nums}
.tag__add{
  margin-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--rot);color:#fff;font-weight:800;font-size:.84rem;
  padding:.8rem 1.15rem .8rem .95rem;border-radius:99px;box-shadow:0 6px 0 -1px var(--rot-dk),0 14px 30px rgba(225,43,31,.35);
  transition:transform .3s var(--ease-pop),background-color .3s,color .3s;
}
.tag__add svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;transition:transform .4s var(--ease-pop)}
.tag__add:hover{background:var(--gelb);color:var(--ink);transform:translateY(-2px)}
.tag__add:hover svg{transform:rotate(90deg)}
.tag__add:active{transform:scale(.95)}

/* Abhol-Pass (Hero, links unten): gelber Kopf mit den Abholpreisen, Abriss mit Kerben, Papier-Unterteil mit
   „Sofort abholen" / „Vorbestellen" und dem Bestellknopf. Mit Lieferung fällt der Kopf weg (data-nur-abholen). */
.go{
  position:absolute;z-index:15;left:clamp(1rem,3.2vw,2.6rem);bottom:clamp(1.8rem,6vh,3.4rem);
  /* nie unter den linken Pfeil (.hero__ctrl: Mitte − gap/2 − 3rem Knopf, 0,75rem Luft) */
  width:min(27rem,calc(50vw - clamp(4.5rem,10vw,8rem) - 3.75rem - clamp(1rem,3.2vw,2.6rem)));color:var(--ink);
  container-type:inline-size;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.25));
  animation:goRein .95s var(--ease-soft) .35s both;
  --kerbe:.72rem;
}
@keyframes goRein{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.go{animation:none}}

.go__kopf{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.34) 0%,transparent 46%),
    linear-gradient(160deg,#FFD447 0%,var(--gelb) 52%,#F7B800 100%);
  border-radius:1.35rem 1.35rem 0 0;padding:1.05rem 1.25rem 1.05rem;
  -webkit-mask:radial-gradient(circle var(--kerbe) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--kerbe) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--kerbe) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--kerbe) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
}
/* einmaliger Lichtstreif nach dem Einblenden */
.go__kopf::after{content:'';position:absolute;inset:-20% auto -20% -40%;width:34%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg) translateX(-120%);
  animation:goGlanz 1.5s var(--ease-soft) 1.35s both}
@keyframes goGlanz{to{transform:skewX(-18deg) translateX(520%)}}
@media(prefers-reduced-motion:reduce){.go__kopf::after{display:none}}
/* Stern im Papier (Marke „Star"), ganz leise */
.go__kopf::before{content:'';position:absolute;right:-1.4rem;top:-1.6rem;width:8.5rem;height:8.5rem;opacity:.16;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A3160E' d='M12 2.6l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(14deg)}

.go__kicker{position:relative;display:flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--rot-dk)}
.go__kicker svg{width:.95rem;height:.95rem;flex:none;fill:var(--rot)}
.go__titel{position:relative;margin-top:.3rem;font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;
  font-size:clamp(2.2rem,1.5rem + 1.5vw,3rem);line-height:.86;letter-spacing:-.005em;color:var(--ink)}

.go__preise{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:.7rem;
  padding-top:.7rem;border-top:2px dotted rgba(26,18,16,.28)}
.go__haupt{display:flex;align-items:flex-end;gap:.7rem;min-width:0}
.go__was{display:flex;flex-direction:column;font-weight:900;font-size:1rem;line-height:1.05;padding-bottom:.28rem}
.go__was small{font-size:.72rem;font-weight:800;color:rgba(26,18,16,.62);letter-spacing:.04em}
.go__haupt b{display:flex;align-items:flex-start;gap:.22rem;font-family:var(--disp);font-weight:800;font-stretch:75%;
  font-size:clamp(2.6rem,1.9rem + 1.6vw,3.5rem);line-height:.82;color:var(--rot-dk);font-variant-numeric:tabular-nums;white-space:nowrap}
.go__haupt b small{font-family:var(--body);font-stretch:100%;font-size:.8rem;font-weight:900;color:var(--ink);margin-top:.15rem}
.go__mehr{list-style:none;display:flex;flex-direction:column;gap:.2rem;padding-left:.9rem;border-left:2px dotted rgba(26,18,16,.28);padding-bottom:.15rem}
.go__mehr li{display:flex;justify-content:space-between;gap:.7rem;font-size:.78rem;font-weight:700;color:rgba(26,18,16,.7);white-space:nowrap}
.go__mehr b{font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}

/* Abriss: gestrichelte Linie zwischen den Kerben */
.go__riss{position:relative;height:0;margin:-1px calc(var(--kerbe) + .35rem);border-top:2px dashed rgba(26,18,16,.26);z-index:1}

.go__unten{background:var(--paper);border-radius:1.35rem;padding:.6rem}
.go__kopf ~ .go__unten{border-radius:0 0 1.35rem 1.35rem;padding-top:.75rem;
  -webkit-mask:radial-gradient(circle var(--kerbe) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--kerbe) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--kerbe) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle var(--kerbe) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat}
html:not(.nur-abholen) .go__unten{border-radius:1.35rem;-webkit-mask:none;mask:none}

.go__tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;background:#F1E6D3;border-radius:1rem;padding:.25rem}
.go__tabs button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .5rem;border-radius:.8rem;text-align:left;
  color:rgba(26,18,16,.68);transition:background-color .3s var(--ease-soft),color .3s,box-shadow .3s}
.go__tabs button > span{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.go__tabs b{font-weight:900;font-size:.84rem}
.go__tabs small{font-size:.66rem;font-weight:700;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go__tabs svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.go__tabs button:hover{color:var(--ink)}
.go__tabs button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 6px 14px -6px rgba(26,18,16,.55)}
.go__tabs button[aria-selected="true"] small{color:var(--gelb);opacity:1}
.go__tabs button:focus-visible{outline:3px solid var(--rot);outline-offset:2px}

.go__pane{display:flex;flex-direction:column;gap:.5rem;padding:.6rem .1rem 0}
.go__pane[hidden]{display:none}
.go__row{display:flex;gap:.4rem;align-items:stretch}
.go__info{display:grid;grid-template-columns:1.45fr 1fr;gap:.4rem}
.go__info p{display:flex;flex-direction:column;justify-content:center;min-height:3.05rem;padding:.45rem .75rem;border-radius:.85rem;
  background:#FAF1E1;border:1.5px solid var(--line);line-height:1.2;min-width:0}
.go__info span{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.go__info b{font-size:.84rem;font-weight:900;color:var(--ink)}
.go__info a{color:var(--rot-dk);text-decoration:underline;text-underline-offset:2px}
.go input,.go select{flex:1;min-width:0;min-height:3.05rem;background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:.85rem;
  padding:.7rem .85rem;font-weight:800;font-size:.95rem;outline:0;transition:border-color .25s,box-shadow .25s}
.go input{letter-spacing:.1em}
.go input::placeholder{letter-spacing:0;font-weight:600;color:#9A8D84}
.go input:focus,.go select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,200,31,.55)}
.go.is-bad input{border-color:var(--rot);animation:shake .4s}
.go.is-ok input{border-color:#22A653}
.go select{font-size:.9rem;padding:.7rem .6rem;cursor:pointer}
.go__btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:0 1.1rem;min-height:3.05rem;border-radius:.9rem;
  background:var(--rot);color:#fff;font-weight:900;font-size:.9rem;white-space:nowrap;
  box-shadow:0 5px 0 -1px var(--rot-dk);transition:background-color .25s,color .25s,transform .25s var(--ease-pop),box-shadow .25s
}
.go__btn svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-pop)}
.go__btn:hover{background:var(--ink);color:#fff;box-shadow:0 5px 0 -1px #000}
.go__btn:hover svg{transform:translateX(4px);color:var(--gelb)}
.go__btn:active{transform:translateY(3px);box-shadow:0 2px 0 -1px var(--rot-dk)}
.go__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.go__btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;box-shadow:none}
.go__btn--los{width:100%;min-height:3.45rem;font-size:1.06rem;border-radius:1rem;margin-top:.1rem}
.go__msg{font-size:.72rem;line-height:1.4;color:var(--mute);padding:0 .25rem .1rem;min-height:1.4em}
.go__msg b{color:var(--ink)}
.go.is-ok .go__msg{color:#147A35}
.go.is-bad .go__msg{color:var(--rot-dk)}
.go__link{color:var(--rot-dk);font-weight:800;text-decoration:underline;font-size:inherit}

/* Niedrige Bildschirme: Pass kompakter, damit er nicht in den Titel ragt */
@media(min-width:701px) and (max-height:820px){
  .go{bottom:1.2rem}
  .go__kopf{padding:.8rem 1.1rem .85rem}
  .go__titel{font-size:2.15rem}
  .go__preise{margin-top:.5rem;padding-top:.5rem}
  .go__haupt b{font-size:2.6rem}
  .go__info p{min-height:2.7rem;padding:.35rem .7rem}
  .go__btn--los{min-height:3.1rem}
  #goAbholen .go__msg{display:none}
}
@media(min-width:701px) and (max-height:680px){.go__info{display:none}.go__kicker{display:none}}
@media(max-width:900px) and (min-width:701px){.go{width:min(25rem,46vw)}}
/* Schmaler Pass (z. B. Tablet quer): weitere Größen unter den Hauptpreis, nur die Adresse */
@container (max-width:24rem){
  .go__kopf{padding:.85rem 1rem .9rem}
  .go__titel{font-size:2.1rem}
  .go__preise{flex-wrap:wrap;row-gap:.35rem}
  .go__haupt b{font-size:2.6rem}
  .go__mehr{flex-basis:100%;flex-direction:row;flex-wrap:wrap;gap:.25rem 1rem;padding:0;border:0}
  .go__mehr li{justify-content:flex-start;gap:.4rem}
  .go__info{grid-template-columns:1fr}
  .go__info p + p{display:none}
  .go__tabs button{gap:.4rem;padding:.5rem .35rem}
  .go__tabs b{font-size:.78rem}
}

/* Zutaten um das aktive Stück (zutaten.js). Der Container hat bewusst
   KEINEN z-index — so können die Zutaten hinter (e0) und vor (e1/e2)
   den Pizzastücken liegen. */
.zutaten{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.zt{position:absolute;display:block;width:var(--w);aspect-ratio:1;transform:translate(-50%,-50%)}
.zt span{display:block;width:100%;height:100%;transform:rotate(var(--r));animation:ztSchweben var(--t) ease-in-out infinite alternate}
.zt img{width:100%;height:100%;object-fit:contain;user-select:none}
.zt--e0{z-index:3;opacity:.75;filter:blur(1.4px) brightness(.7)}
.zt--e1{z-index:10;filter:drop-shadow(0 16px 18px rgba(0,0,0,.6)) saturate(1.05)}
.zt--e2{z-index:11;opacity:.9;filter:blur(3.5px) drop-shadow(0 20px 24px rgba(0,0,0,.5))}
@keyframes ztSchweben{
  from{transform:translate3d(0,0,0) rotate(var(--r))}
  to{transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--r) + var(--dr)))}
}
@media(prefers-reduced-motion:reduce){.zt span{animation:none}}

/* Sterne treiben durchs Bild */
.stars{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.stars i{position:absolute;display:block;width:var(--w);opacity:var(--op);filter:blur(var(--bl));animation:drift var(--t) ease-in-out infinite alternate}
.stars svg{width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(255,200,31,.45));animation:twinkle 3.2s ease-in-out infinite alternate}
.stars i:nth-child(2n) svg{animation-duration:4.4s;animation-delay:-1.2s}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(var(--r))}to{transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--r) + 40deg))}}
@keyframes twinkle{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.stars i,.stars svg{animation:none}}

/* Statusband */
.strip{background:var(--rot);color:#fff;position:relative;z-index:2}
.strip__in{display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;justify-content:space-between;align-items:center;padding:1rem 0;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.strip b{font-weight:800}
.strip [data-rating] b{color:var(--gelb)}
.live{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#5BE38A;margin-right:.55rem;vertical-align:middle;box-shadow:0 0 0 0 rgba(91,227,138,.6);animation:puls 2s infinite}
[data-status][data-zu] .live{background:var(--gelb);animation:none}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(91,227,138,0)}100%{box-shadow:0 0 0 0 rgba(91,227,138,0)}}

@media(max-width:900px){
  .hero{padding-top:calc(var(--nav-h) + clamp(1rem,4svh,2.4rem))}
  .fan{bottom:2svh;--push:13svh}
  .slice,.pick{width:min(70vw,19rem)}
  .spot{bottom:14svh;width:min(130vw,29rem)}
  .hero__ctrl{gap:min(56vw,14rem);bottom:clamp(1.6rem,5svh,2.6rem)}
}
@media(min-width:701px) and (max-width:900px){
  .fan{bottom:7vh;--push:17vh}
  .slice,.pick{width:min(50vw,23rem)}
  .spot{bottom:18vh;width:min(90vw,34rem)}
}
@media(max-width:700px){
  .hero{padding-bottom:0}
  .hero__kicker{font-size:.7rem;gap:.35rem}
  .hero__kicker>span{padding:.32rem .65rem}
  /* Handy: Tab-Box weg, dafür ein Knopf unter dem Titel — die Pizza bekommt die Bühne */
  .go{display:none}
  .hero__cta{display:inline-flex}
  .hero__sub{display:block}
  .hero__ctrl{bottom:calc(1.2rem + 4.2rem);z-index:16;gap:min(60vw,15rem)}
  .tag{right:auto;left:50%;transform:translateX(-50%);bottom:calc(1.2rem + 4.2rem);align-items:center;text-align:center;flex-direction:row;gap:.6rem}
  .tag > b{display:none}
  .tag__preis{margin:0;text-shadow:0 2px 10px rgba(0,0,0,.8)}
  .tag__add{margin:0;padding:.6rem .8rem;font-size:0;gap:0}
  .tag__add svg{width:1.1rem;height:1.1rem}
  .slice,.pick{width:min(72vw,19rem)}
  .fan{--push:12svh;bottom:4svh}
  .spot{bottom:13svh}
  .hero__rate-x{display:none}
  .strip__in{flex-direction:column;align-items:flex-start;gap:.45rem;letter-spacing:.08em}
}
/* Kurze Handys (iPhone SE & Co.): Stück kleiner, sonst rutscht es unter den Knopf */
@media(max-width:700px) and (max-height:720px){
  .slice,.pick{width:min(56vw,15rem)}
  .fan{--push:10svh;bottom:4svh}
  .spot{bottom:10svh;width:min(110vw,24rem)}
  .hero{padding-top:calc(var(--nav-h) + .6rem)}
  .hero__kicker{margin-bottom:.5rem}
  .hero__cta{margin-top:.8rem;padding:.85rem 1.2rem}
  .hero__sub{display:none}
}

/* Handy und Tablet hochkant ohne Lieferung: der Abhol-Pass steht kompakt unter dem Titel (statt des roten Knopfs) —
   Abholpreis und Bestellknopf sind sofort im Blick, das Pizzastück rückt etwas tiefer */
@media(max-width:900px){
  html.nur-abholen .hero__cta,html.nur-abholen .hero__sub{display:none}
  html.nur-abholen .go{display:block;position:relative;left:auto;bottom:auto;z-index:16;width:min(100%,25rem);
    margin:clamp(.75rem,2svh,1.1rem) auto 0;--kerbe:.6rem;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
  .go__kopf{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:.8rem;padding:.7rem .95rem .75rem}
  .go__kicker{grid-column:1/-1;font-size:.58rem;letter-spacing:.14em}
  .go__titel{font-size:1.85rem;margin-top:.2rem}
  .go__preise{margin:0;padding:0;border:0;justify-content:flex-end}
  .go__mehr{display:none}
  .go__haupt{gap:.45rem}
  .go__was{font-size:.8rem;padding-bottom:.18rem}
  .go__was small{font-size:.64rem}
  .go__haupt b{font-size:2.3rem}
  .go__kopf::before{width:5.5rem;height:5.5rem;right:-1rem;top:-1.2rem}
  .go__unten,.go__kopf ~ .go__unten{padding:.45rem}
  .go__kopf ~ .go__unten{padding-top:.55rem}
  .go__tabs button{padding:.42rem .4rem;gap:.4rem}
  .go__tabs b{font-size:.8rem}
  .go__tabs small{font-size:.6rem}
  .go__info,#goAbholen .go__msg{display:none}
  .go__pane{padding-top:.45rem;gap:.4rem}
  .go input,.go select{min-height:2.9rem}
  .go__btn--los{min-height:3.05rem;font-size:1rem}
  #goVor .go__msg{font-size:.66rem;min-height:0}
}
@media(min-width:701px) and (max-width:900px){
  html.nur-abholen .fan{--push:5vh;bottom:1vh}
  html.nur-abholen .slice,html.nur-abholen .pick{width:min(44vw,20rem)}
  html.nur-abholen .spot{bottom:9vh}
}
@media(max-width:700px){
  html.nur-abholen .fan{--push:9svh;bottom:1svh}
  html.nur-abholen .slice,html.nur-abholen .pick{width:min(64vw,17rem)}
  html.nur-abholen .spot{bottom:9svh}
}
@media(max-width:700px) and (max-height:720px){
  .go__kicker{display:none}
  .go__titel{font-size:1.6rem}
  .go__haupt b{font-size:2rem}
  html.nur-abholen .slice,html.nur-abholen .pick{width:min(50vw,13rem)}
}

/* ══════════════ BESTELLEN ══════════════ */
.order{padding:clamp(4.5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem);background:var(--cream)}
.order__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem}
.order__mode{display:inline-flex;background:var(--paper);border:1.5px solid var(--line);border-radius:99px;padding:.3rem;position:relative}
.order__mode button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.3rem;border-radius:99px;font-weight:800;font-size:.9rem;color:var(--mute);transition:background-color .35s var(--ease-soft),color .35s}
.order__mode svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.order__mode [aria-checked="true"]{background:var(--ink);color:#fff}

.order__bar{position:sticky;top:var(--nav-h);z-index:30;background:var(--cream);transition:box-shadow .3s,background-color .3s}
.order__bar.is-stuck{background:rgba(251,243,228,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line),0 12px 24px -18px rgba(26,18,16,.3)}
.order__bar-in{display:flex;gap:1rem;align-items:center;padding:.8rem 0}
.order__search{flex:0 0 clamp(14rem,26vw,20rem);display:flex;align-items:center;gap:.6rem;background:var(--paper);border:1.5px solid var(--line);border-radius:99px;padding:0 1rem;transition:border-color .3s,box-shadow .3s}
.order__search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,200,31,.4)}
.order__search svg{width:1.1rem;height:1.1rem;flex:none;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.order__search input{border:0;background:none;outline:0;padding:.78rem 0;width:100%;font-size:.92rem}
.order__cats{position:relative;display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;flex:1;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:3rem}
.order__cats::-webkit-scrollbar{display:none}
.order__cats a{flex:none;padding:.55rem 1rem;border-radius:99px;font-weight:700;font-size:.85rem;white-space:nowrap;color:var(--mute);transition:background-color .3s,color .3s}
.order__cats a:hover{color:var(--ink);background:rgba(26,18,16,.06)}
.order__cats a.is-on{background:var(--gelb);color:var(--ink)}

.order__grid{display:grid;grid-template-columns:minmax(0,1fr) 22.5rem;gap:clamp(1.6rem,3vw,3rem);align-items:start;margin-top:1.4rem}
.mcat{padding-top:1.6rem}
.mcat__h{display:flex;align-items:baseline;gap:.8rem;font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem);line-height:1;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink)}
.mcat__h small{font-family:var(--body);font-size:.8rem;font-weight:700;color:var(--rot);letter-spacing:.06em}
.mcat__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.dish{
  display:flex;justify-content:space-between;gap:1rem;background:var(--paper);border:1px solid var(--line);
  border-radius:1rem;padding:.85rem .85rem .85rem 1.1rem;transition:border-color .3s,transform .35s var(--ease-soft),box-shadow .35s;
}
.dish:hover{border-color:#D8C7AB;transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(26,18,16,.4)}
.dish h4{font-size:1rem;font-weight:800;line-height:1.25}
.dish p{font-size:.84rem;color:var(--mute);line-height:1.45;margin-top:.25rem}
.dish__buy{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:.6rem;flex:none}
.dish__buy b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.plus{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background-color .25s,transform .25s var(--ease-pop)}
.plus svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.plus:hover{background:var(--rot);transform:scale(1.1)}
.plus.is-pop{animation:pop .5s var(--ease-pop)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(.8);background:var(--gruen)}100%{transform:scale(1)}}
.chip{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .45rem;border-radius:99px;vertical-align:.15em}
.chip--hot{background:#FFE3DF;color:var(--rot-dk)}
.empty{padding:3rem 0;color:var(--mute);font-size:1.1rem}
.order__menu{min-height:min(70vh,40rem)}
.more{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin-top:1rem;padding:1rem;border:2px dashed #D8C7AB;border-radius:1rem;font-weight:800;color:var(--ink);transition:background-color .3s,border-color .3s}
.more:hover{background:var(--gelb);border-color:var(--gelb);border-style:solid}
.more b{color:var(--rot)}
.mcat{padding-top:.4rem}
.dish--in{animation:dishIn .5s var(--ease-soft) backwards}
@keyframes dishIn{from{opacity:0;transform:translateY(12px)}}

/* Der Bon */
.bon{position:sticky;top:calc(var(--nav-h) + 5rem)}
.bon__paper{
  background:var(--paper);padding:1.6rem 1.4rem 2.2rem;position:relative;
  box-shadow:0 30px 60px -30px rgba(26,18,16,.45),0 1px 0 var(--line);
  border-radius:.4rem .4rem 0 0;
  --zz:radial-gradient(circle at 50% 100%,transparent 7px,#000 7.5px);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,var(--zz) bottom/16px 9px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,var(--zz) bottom/16px 9px repeat-x;
}
.bon__head{text-align:center;padding-bottom:1rem;border-bottom:2px dashed var(--line)}
.bon__head img{height:4.8rem;width:auto;margin:0 auto .5rem}
.bon__head p{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:1.5rem;line-height:1}
.bon__head span{display:inline-block;margin-top:.5rem;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen)}
.bon__items{padding:1rem 0;max-height:min(40vh,24rem);overflow:auto;border-bottom:2px dashed var(--line)}
.bon__empty{text-align:center;color:var(--mute);font-size:.9rem;padding:1.4rem 0;line-height:1.5}
.bon__empty span{display:block;font-size:2rem;color:var(--gelb);margin-bottom:.3rem;animation:twinkle 2.4s ease-in-out infinite alternate}
.line{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.45rem 0;font-size:.9rem}
.line--new{animation:lineIn .55s var(--ease-soft)}
@keyframes lineIn{from{opacity:0;transform:translateY(-8px);background:rgba(255,200,31,.35)}to{opacity:1;transform:none;background:transparent}}
.line__q{display:flex;align-items:center;gap:.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.line__q span{min-width:1.7rem;text-align:center;font-size:.85rem}
.line__q button{width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--line);font-weight:700;line-height:1;transition:background-color .2s,border-color .2s}
.line__q button:hover{background:var(--gelb);border-color:var(--gelb)}
.line__n{font-weight:600;line-height:1.3}
.line b{font-variant-numeric:tabular-nums;font-weight:800}
.bon__sum{padding:1rem 0;display:grid;gap:.35rem;font-size:.9rem}
.bon__sum div{display:flex;justify-content:space-between}
.bon__sum span{color:var(--mute)}
.bon__sum [data-fee-row] b{font-size:.72rem;color:var(--mute);font-weight:600}
.bon__total{margin-top:.4rem;padding-top:.7rem;border-top:2px solid var(--ink);font-size:1.15rem}
.bon__total span{color:var(--ink)!important;font-weight:800}
.bon__total b{font-weight:900}
.bon__go{width:100%;margin-top:.4rem}
.bon__note{text-align:center;font-size:.72rem;color:var(--mute);margin-top:.9rem}

.cartbar{
  display:none;position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:65;
  background:var(--rot);color:#fff;border-radius:99px;padding:.6rem .6rem .6rem 1.4rem;
  align-items:center;gap:.8rem;font-weight:800;box-shadow:0 6px 0 -1px var(--rot-dk),0 18px 40px rgba(225,43,31,.4);
  animation:barIn .5s var(--ease-pop);
}
.cartbar b{margin-left:auto;background:#fff;color:var(--ink);padding:.6rem 1rem;border-radius:99px;font-variant-numeric:tabular-nums}
.cartbar__n{background:var(--gelb);color:var(--ink);min-width:1.7rem;height:1.7rem;border-radius:99px;display:grid;place-items:center;font-size:.8rem}
@keyframes barIn{from{transform:translateY(140%)}to{transform:none}}

@media(max-width:1020px){
  .order__grid{grid-template-columns:1fr}
  .bon{position:fixed;inset:0;z-index:90;top:auto;display:flex;align-items:flex-end;background:rgba(20,12,9,0);pointer-events:none;transition:background-color .35s}
  .bon .bon__paper{width:100%;max-height:88svh;overflow:auto;border-radius:1.4rem 1.4rem 0 0;transform:translateY(105%);transition:transform .5s var(--ease);-webkit-mask:none;mask:none}
  .bon.is-open{background:rgba(20,12,9,.55);pointer-events:auto;height:100%}
  .bon.is-open .bon__paper{transform:none}
  .cartbar{display:flex}
  .demo-flag{display:none}
}
@media(max-width:760px){
  .mcat__items{grid-template-columns:1fr}
  .order__bar-in{flex-direction:column;align-items:stretch;gap:.6rem}
  .order__search{flex:none}
  .order__mode{width:100%}.order__mode button{flex:1;justify-content:center}
}

/* ══════════════ DAS IST STAR ══════════════
   Flyer-Gelb, das Maskottchen groß, echte Zahlen aus der Karte. */
.star{background:var(--gelb);color:var(--ink);padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem);position:relative;overflow:hidden;isolation:isolate}
.star__rays{position:absolute;right:-30vw;top:-20vw;width:100vw;aspect-ratio:1;z-index:-1;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.28) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%);
  animation:rays 80s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.star__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.kicker--ink{color:var(--ink)}
.kicker--ink::before{color:var(--rot);-webkit-text-stroke:0}
.star .giant .dot{color:var(--rot)}
.star__copy{max-width:44ch;margin-top:1.4rem;font-size:1.12em;font-weight:500;color:#3A2A12}
.star__copy b{font-weight:800;background:linear-gradient(transparent 62%,rgba(225,43,31,.28) 62%)}

.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.2rem}
.cats button{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .7rem .6rem 1rem;border-radius:99px;
  background:var(--ink);color:#fff;font-weight:800;font-size:.86rem;transition:background-color .25s,transform .3s var(--ease-pop)}
.cats small{background:var(--gelb);color:var(--ink);border-radius:99px;min-width:1.6rem;padding:.1rem .45rem;font-size:.72rem;text-align:center}
.cats button:hover{background:var(--rot);transform:translateY(-3px) rotate(-1.5deg)}

.star__figur{position:relative;display:grid;place-items:center;min-height:30rem}
.star__burst{position:absolute;width:min(30rem,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FFE680 0%,rgba(255,230,128,0) 68%)}
.star__maskottchen{position:relative;width:min(17rem,58%);height:auto;filter:drop-shadow(0 30px 30px rgba(120,60,0,.35));
  transform:rotate(-6deg);animation:wippen 5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wippen{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(3deg) translateY(-12px)}}
.star__bubble{position:absolute;right:2%;top:6%;background:#fff;border:3px solid var(--ink);border-radius:1.4rem;padding:.8rem 1.1rem;
  font-family:var(--hand);font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem);line-height:1.05;transform:rotate(5deg);box-shadow:6px 6px 0 var(--ink)}
.star__bubble::after{content:'';position:absolute;left:1.4rem;bottom:-1rem;width:1.4rem;height:1.4rem;background:#fff;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewX(30deg) rotate(30deg)}
.star__pick{position:absolute;left:0;bottom:4%;background:var(--ink);color:#fff;border-radius:1.2rem;padding:1rem 1rem 1rem 1.2rem;
  display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:center;transform:rotate(-3deg);box-shadow:0 24px 40px -16px rgba(60,30,0,.55);max-width:20rem}
.star__pick-k{grid-column:1/-1;font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
.star__pick > b{grid-column:1/-1;font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:1.9rem;line-height:1}
.star__pick-d{grid-column:1/-1;font-size:.78rem;color:rgba(255,255,255,.7);line-height:1.35;padding-bottom:.75rem;margin-bottom:.7rem;border-bottom:1px dashed rgba(255,255,255,.2)}
.star__pick-add{grid-column:2;align-self:center;display:grid;place-items:center;width:3rem;height:3rem;background:var(--rot);color:#fff;font-weight:900;
  padding:.65rem .65rem .65rem .9rem;border-radius:99px;white-space:nowrap;box-shadow:0 4px 0 -1px var(--rot-dk);transition:background-color .25s,color .25s,transform .25s var(--ease-pop)}
.star__pick-add i{font-style:normal;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;color:var(--rot);display:grid;place-items:center;font-size:1.1rem;line-height:1}
.star__pick-add:hover{background:var(--gelb);color:var(--ink);transform:scale(1.05)}

.zahlen{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(3rem,6vw,4.5rem);border-top:3px solid var(--ink)}
.zahlen li+li{border-left:3px solid var(--ink)}
.zahlen button,.zahlen a{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.2rem 1rem;width:100%;height:100%;text-align:left;
  padding:1.6rem clamp(1rem,2vw,1.6rem) 1.4rem;transition:background-color .3s}
.zahlen b{grid-column:1/-1;font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:clamp(3.4rem,2rem + 4vw,6rem);line-height:.85;font-variant-numeric:tabular-nums}
.zahlen span{font-weight:700;font-size:.9rem;line-height:1.3;max-width:20ch}
.zahlen i{font-style:normal;font-weight:900;font-size:1.3rem;transition:transform .35s var(--ease-pop)}
.zahlen button:hover,.zahlen a:hover{background:var(--ink);color:var(--gelb)}
.zahlen button:hover i,.zahlen a:hover i{transform:translateX(6px)}

@media(max-width:900px){
  .star__in{grid-template-columns:1fr}
  .star__figur{min-height:26rem}
  .zahlen{grid-template-columns:1fr 1fr}
  .zahlen li:nth-child(3){border-left:0}
  .zahlen li:nth-child(n+3){border-top:3px solid var(--ink)}
}
@media(max-width:480px){
  .star__pick{left:50%;transform:translateX(-50%) rotate(-2deg);bottom:0;width:calc(100% - 1rem)}
  .star__bubble{right:0;top:0}
  .star__maskottchen{width:min(13rem,52%);margin-bottom:6rem}
}
@media(prefers-reduced-motion:reduce){.star__rays,.star__maskottchen{animation:none}}

/* ══════════════ LIEFERGEBIET ══════════════ */
.zone{padding:clamp(5rem,10vw,8rem) 0;background:var(--cream)}
.zone__in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.zone__check{display:flex;gap:.5rem;margin-top:2rem;max-width:26rem}
.zone__check input{flex:1;min-width:0;border:2px solid var(--ink);border-radius:99px;padding:.9rem 1.3rem;background:var(--paper);font-size:1.05rem;font-weight:700;letter-spacing:.12em;outline:0;transition:box-shadow .3s}
.zone__check input:focus{box-shadow:0 0 0 4px rgba(255,200,31,.5)}
.zone__out{margin-top:1rem;min-height:3rem;font-size:.95rem;max-width:40ch}
.zone__out.is-ok{color:var(--gruen)}
.zone__out.is-ok a{color:var(--ink);font-weight:800;border-bottom:2px solid var(--gelb)}
.zone__out.is-warn{color:var(--rot-dk)}
.zone__list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.zone__list li{background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:1rem 1.1rem;display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;transition:background-color .4s,border-color .4s,transform .4s var(--ease-pop)}
.zone__list b{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--rot);grid-row:span 2;font-variant-numeric:tabular-nums}
.zone__list span{font-weight:800}
.zone__list small{color:var(--mute);font-size:.78rem;line-height:1.4}
.zone__list small em{font-style:normal;font-weight:700;color:var(--ink)}
.zone__list li{align-content:start}
.f.is-leer{display:none}
.f__info{display:block;margin-top:.35rem;font-size:.8rem;line-height:1.4;color:var(--rot-dk)}
.f__info a{color:inherit;font-weight:800}
.zone__list li.is-hit{background:var(--gelb);border-color:var(--gelb);transform:scale(1.03)}
.zone__list li.is-hit b{color:var(--ink)}
@media(max-width:860px){.zone__in{grid-template-columns:1fr}}
@media(max-width:460px){.zone__list{grid-template-columns:1fr}}

/* ══════════════ GÄSTE ══════════════ */
.gaeste{padding:clamp(5rem,10vw,8rem) 0 clamp(3rem,6vw,5rem);background:var(--paper);overflow:hidden}
.gaeste .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem}
.gaeste__score{display:grid;grid-template-columns:auto auto;column-gap:1rem;align-items:center}
.score__n{font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:clamp(5rem,3rem + 6vw,9rem);line-height:.8;color:var(--rot);grid-row:span 2}
.score__stars{color:var(--gelb);font-size:1.5rem;letter-spacing:.1em;-webkit-text-stroke:1px #D9A400}
.score__t{font-weight:700;color:var(--mute);font-size:.9rem}
.quotes{margin-top:3.4rem;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.quotes__track{display:flex;width:max-content;animation:band 60s linear infinite}
.quotes:hover .quotes__track{animation-play-state:paused}
.quotes__set{display:flex;gap:1rem;padding-right:1rem}
.quote{width:clamp(17rem,26vw,22rem);background:var(--cream);border-radius:1.2rem;padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.quote:nth-child(3n+2){background:var(--gelb)}
.quote:nth-child(3n){background:var(--night);color:#fff}
.quote__stars{color:var(--rot);letter-spacing:.12em}
.quote:nth-child(3n) .quote__stars{color:var(--gelb)}
.quote blockquote{font-weight:600;font-size:1.02rem;line-height:1.45;flex:1}
.quote figcaption{font-size:.74rem;font-weight:700;letter-spacing:.06em;opacity:.65}
@keyframes band{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.quotes__track{animation:none;overflow-x:auto}}

/* ══════════════ GALERIE ══════════════ */
.galerie{background:var(--paper);padding:0 0 clamp(5rem,9vw,7rem);overflow:hidden}
.galerie__track{display:flex;gap:1.2rem;padding:3rem clamp(1rem,5vw,4rem);overflow-x:auto;scrollbar-width:none;align-items:center;position:relative}
.galerie__track::-webkit-scrollbar{display:none}
.shot{flex:none;width:clamp(14rem,24vw,20rem);aspect-ratio:4/5;border-radius:1rem;overflow:hidden;background:var(--line);box-shadow:0 24px 40px -26px rgba(26,18,16,.6);transition:transform .6s var(--ease-pop)}
.shot--0{transform:rotate(-2.4deg)}.shot--1{transform:rotate(1.6deg) translateY(1.2rem)}.shot--2{transform:rotate(-.8deg) translateY(-.6rem)}
.shot:hover{transform:rotate(0) scale(1.04);z-index:2}
.shot img{width:100%;height:100%;object-fit:cover}
.galerie__cap{flex:none;align-self:flex-end;font-family:var(--hand);font-size:1.5rem;color:var(--mute);padding-left:1rem;max-width:9rem;line-height:1.1}

/* ══════════════ KONTAKT ══════════════ */
.kontakt{background:var(--rot);color:#fff;padding:clamp(5rem,10vw,8rem) 0;position:relative;overflow:hidden}
.kontakt::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 100% 100%,rgba(255,200,31,.25),transparent 70%)}
.kontakt__in{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;position:relative;z-index:1}
.kontakt .giant .dot{color:var(--gelb)}
.kontakt__tel{display:block;font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:clamp(2.6rem,1.4rem + 4.4vw,5.2rem);line-height:1;color:var(--gelb);margin:1.8rem 0 1rem;font-variant-numeric:tabular-nums;transition:letter-spacing .5s var(--ease-soft)}
.kontakt__tel:hover{letter-spacing:.02em}
.kontakt__addr{font-size:1.15rem;font-weight:600;margin-bottom:1.8rem}
.hours{background:var(--night);border-radius:1.4rem;padding:1.6rem 1.8rem;display:grid;gap:.1rem}
.hours div{display:flex;justify-content:space-between;padding:.62rem 0;border-bottom:1px dashed rgba(255,255,255,.12);font-weight:600}
.hours div:last-child{border-bottom:0}
.hours dd{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.75)}
.hours .is-today{color:var(--gelb)}
.hours .is-today dd{color:var(--gelb)}
.hours .is-today dt::after{content:' · heute';font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:860px){.kontakt__in{grid-template-columns:1fr}}

.foot{background:var(--night);color:rgba(255,255,255,.6);font-size:.82rem;padding:1.6rem 0 6rem}
.foot__in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.foot nav{display:flex;gap:1.4rem}
.foot a:hover{color:var(--gelb)}

/* ══════════════ KASSE ══════════════ */
.sheet{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
.sheet__back{position:absolute;inset:0;background:rgba(20,12,9,.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.sheet__box{position:relative;width:min(40rem,100%);max-height:92svh;overflow:auto;background:var(--paper);border-radius:1.6rem;padding:clamp(1.6rem,4vw,2.6rem);transform:translateY(24px) scale(.97);opacity:0;transition:transform .5s var(--ease-pop),opacity .3s}
.sheet.is-open .sheet__back{opacity:1}
.sheet.is-open .sheet__box{transform:none;opacity:1}
.sheet__x,.chat__x{position:absolute;right:1rem;top:1rem;width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;transition:background-color .25s}
.sheet__x:hover{background:var(--cream)}
.sheet__x svg,.chat__x svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.steps{list-style:none;display:flex;gap:.4rem;margin-bottom:1.6rem;counter-reset:s}
.steps li{counter-increment:s;flex:1;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:.6rem;border-top:4px solid var(--line);transition:border-color .4s,color .4s}
.steps li::before{content:counter(s) ' · '}
.steps li.is-on{border-color:var(--rot);color:var(--ink)}
.co h3{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);line-height:.95;margin-bottom:1.4rem;outline:0}
.co__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.f{display:flex;flex-direction:column;gap:.35rem;grid-column:span 1}
.f--full{grid-column:1/-1}.f--wide{grid-column:span 2}
.f span{font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--mute)}
.f input,.f select{font-size:.95rem;border:1.5px solid var(--line);background:#fff;border-radius:.8rem;padding:.8rem .9rem;outline:0;transition:border-color .25s,box-shadow .25s;width:100%}
.f input:focus,.f select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,200,31,.4)}
.f.is-bad input{border-color:var(--rot);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.co__next{margin-top:1.6rem;width:100%}
.pay{display:grid;gap:.6rem}
.pay label{cursor:pointer}
.pay input{position:absolute;opacity:0}
.pay span{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:1rem;padding:1rem 1.2rem 1rem 3.2rem;position:relative;color:var(--mute);font-size:.86rem;transition:border-color .25s,background-color .25s}
.pay span b{color:var(--ink);font-size:1rem}
.pay span::before{content:'';position:absolute;left:1.15rem;top:50%;width:1.2rem;height:1.2rem;margin-top:-.6rem;border-radius:50%;border:2px solid var(--line);transition:border .25s}
.pay input:checked+span{border-color:var(--ink);background:#FFF8E1}
.pay input:checked+span::before{border:6px solid var(--rot)}
.pay input:focus-visible+span{box-shadow:0 0 0 4px rgba(255,200,31,.5)}
.co__sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.4rem;font-weight:800;font-size:1.2rem;border-top:2px solid var(--ink);padding-top:1rem}
.co__legal{font-size:.75rem;color:var(--mute);text-align:center;margin-top:.8rem}
.co__done{text-align:center}
.co__done p{color:var(--mute);max-width:42ch;margin:0 auto 1.6rem}
.done__star{font-size:5rem;line-height:1;color:var(--gelb);-webkit-text-stroke:2px var(--rot);animation:spinIn 1s var(--ease-pop)}
@keyframes spinIn{from{transform:rotate(-200deg) scale(0)}to{transform:none}}
@media(max-width:560px){.co__grid{grid-template-columns:1fr}.f--wide{grid-column:auto}}

/* ══════════════ CHAT „STELLA" ══════════════ */
.chatfab{
  position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;align-items:center;gap:.6rem;
  background:var(--night);color:#fff;border-radius:99px;padding:.45rem 1.2rem .45rem .45rem;
  box-shadow:0 14px 34px rgba(20,12,9,.4);border:1px solid rgba(255,200,31,.35);
  transition:transform .4s var(--ease-pop),opacity .3s,bottom .4s var(--ease-soft);
}
.chatfab:hover{transform:translateY(-3px)}
.chatfab__star{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--gelb);color:var(--rot);display:grid;place-items:center;font-size:1.4rem;line-height:1}
.chatfab__txt{font-weight:800;font-size:.9rem}
.chatfab.is-hidden{opacity:0;transform:scale(.6);pointer-events:none}
.chatfab.is-hello .chatfab__star{animation:wink 1.2s var(--ease-pop) 2}
@keyframes wink{40%{transform:rotate(72deg) scale(1.15)}}
@media(max-width:1020px){[data-cart] .chatfab{bottom:5.6rem}}

.chat{
  position:fixed;right:1rem;bottom:1rem;z-index:85;width:min(24rem,calc(100vw - 2rem));height:min(36rem,calc(100svh - 2rem));
  background:var(--paper);border-radius:1.6rem;box-shadow:0 40px 80px -20px rgba(20,12,9,.5);
  display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;
  transform:translateY(16px) scale(.92);opacity:0;transition:transform .45s var(--ease-pop),opacity .25s;
}
.chat.is-open{transform:none;opacity:1}
.chat__head{background:var(--night);color:#fff;padding:1rem 3.6rem 1rem 1rem;display:flex;gap:.8rem;align-items:center;position:relative}
.chat__ava{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--gelb);color:var(--rot);display:grid;place-items:center;font-size:1.4rem;flex:none;position:relative}
.chat__ava::after{content:'';position:absolute;right:0;bottom:0;width:.7rem;height:.7rem;border-radius:50%;background:#5BE38A;border:2px solid var(--night)}
.chat__head b{display:block;font-family:var(--disp);font-weight:800;font-size:1.15rem;line-height:1.1}
.chat__head small{color:rgba(255,255,255,.6);font-size:.74rem}
.chat__x{top:50%;margin-top:-1.25rem;color:#fff}
.chat__x:hover{background:rgba(255,255,255,.1)}
.chat__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--cream)}
.msg{max-width:88%;padding:.7rem .95rem;border-radius:1.1rem;font-size:.9rem;line-height:1.45}
.msg a{font-weight:800;border-bottom:2px solid var(--gelb)}
.msg--bot{background:#fff;border-bottom-left-radius:.3rem;align-self:flex-start;box-shadow:0 1px 0 var(--line)}
.msg--me{background:var(--ink);color:#fff;border-bottom-right-radius:.3rem;align-self:flex-end;animation:msgIn .3s var(--ease-soft)}
.msg--in{animation:msgIn .35s var(--ease-soft)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:.25rem;padding:.2rem 0}
.typing i{width:.42rem;height:.42rem;border-radius:50%;background:var(--mute);animation:dotty 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dotty{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.cards{display:grid;gap:.4rem;margin-top:.6rem}
.mini{display:flex;justify-content:space-between;gap:.6rem;align-items:center;background:var(--cream);border-radius:.8rem;padding:.55rem .55rem .55rem .75rem}
.mini__txt b{display:block;font-size:.84rem;line-height:1.25}
.mini small{display:block;font-size:.72rem;color:var(--mute);line-height:1.3;margin-top:.1rem}
.mini button{flex:none;background:var(--rot);color:#fff;font-weight:800;font-size:.76rem;padding:.45rem .7rem;border-radius:99px;white-space:nowrap;transition:background-color .25s,transform .25s var(--ease-pop)}
.mini button span{display:inline-block;margin-left:.15rem}
.mini button:hover{background:var(--ink);transform:scale(1.05)}
.chat__chips{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem 1rem 0;scrollbar-width:none;background:var(--cream)}
.chat__chips:empty{display:none}
.chat__chips button{flex:none;border:1.5px solid var(--ink);border-radius:99px;padding:.4rem .8rem;font-size:.78rem;font-weight:700;white-space:nowrap;background:#fff;transition:background-color .25s}
.chat__chips button:hover{background:var(--gelb)}
.chat__form{display:flex;gap:.5rem;padding:.8rem 1rem 1rem;background:var(--cream)}
.chat__form input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:99px;padding:.75rem 1rem;background:#fff;outline:0;font-size:.9rem}
.chat__form input:focus{border-color:var(--ink)}
.chat__form button{width:2.9rem;height:2.9rem;border-radius:50%;background:var(--rot);color:#fff;display:grid;place-items:center;flex:none;transition:transform .25s var(--ease-pop)}
.chat__form button:hover{transform:scale(1.08)}
.chat__form svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.toast{
  position:fixed;left:50%;bottom:1.4rem;z-index:120;transform:translate(-50%,180%);
  background:var(--ink);color:#fff;padding:.75rem 1.2rem;border-radius:99px;font-size:.88rem;
  box-shadow:0 14px 30px rgba(20,12,9,.35);transition:transform .45s var(--ease-pop);pointer-events:none;white-space:nowrap;max-width:calc(100vw - 2rem);overflow:hidden;text-overflow:ellipsis
}
.toast::before{content:'★ ';color:var(--gelb)}
.toast.is-on{transform:translate(-50%,0)}
@media(max-width:1020px){.toast{bottom:auto;top:calc(var(--nav-h) + .6rem);transform:translate(-50%,-260%)}}

/* ══════════════ REVEALS ══════════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
.rv.is-in{opacity:1;transform:none}
.shot.rv.is-in.shot--0{transform:rotate(-2.4deg)}
.shot.rv.is-in.shot--1{transform:rotate(1.6deg) translateY(1.2rem)}
.shot.rv.is-in.shot--2{transform:rotate(-.8deg) translateY(-.6rem)}
.shot.rv.is-in:hover{transform:rotate(0) scale(1.04)}

/* ══════════════ RECHTSSEITEN ══════════════ */
.legal{background:var(--cream);padding:calc(var(--nav-h) + 3rem) 0 5rem}
.legal .wrap{max-width:46rem}
.legal h1{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(2.6rem,2rem + 3vw,4.4rem);line-height:.95;margin-bottom:2rem}
.legal h2{font-size:1.15rem;font-weight:800;margin:2rem 0 .5rem}
.legal p{color:var(--mute);margin-bottom:.8rem}
.legal .ph{background:#FFF1B8;color:var(--ink);padding:0 .3rem;border-radius:.2rem;font-weight:700}
.legal h1{overflow-wrap:break-word}
.legal h3{font-size:1rem;font-weight:800;margin:1.5rem 0 .4rem}
.legal ul,.legal ol{color:var(--mute);margin:0 0 .9rem 1.25rem}
.legal li{margin-bottom:.35rem;padding-left:.15rem}
.legal li::marker{color:var(--rot)}
.legal strong{color:var(--ink)}
.legal a{color:var(--rot-dk);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;overflow-wrap:anywhere}
.legal a:hover{color:var(--rot)}
.legal .stand{font-size:.88rem;margin:-1.2rem 0 2rem}
.legal .inhalt{columns:2 14rem;column-gap:2rem;font-size:.92rem;margin-bottom:2rem}
.legal .kasten{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gelb);border-radius:.5rem;padding:1.1rem 1.3rem;margin:1rem 0 1.5rem}
.legal .kasten--rot{border-left-color:var(--rot)}
.legal .kasten > :first-child{margin-top:0}
.legal .kasten > :last-child{margin-bottom:0}
.legal .strich{list-style:"– "}
.legal .strich li::marker{color:var(--mute)}
.legal-nav{position:fixed;inset:0 0 auto;height:var(--nav-h);background:var(--night);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,3vw,2.4rem);z-index:10;color:#fff}
.legal-nav img{height:3.8rem;width:auto}
.legal-nav a:last-child{font-weight:700;font-size:.9rem}

/* ══════════════ GERICHT ANPASSEN ══════════════ */
.sheet--dish .sheet__box{width:min(36rem,100%);padding:0;display:flex;flex-direction:column;max-height:min(92svh,52rem)}
.dsh{display:flex;flex-direction:column;min-height:0;flex:1}
.dsh__head{padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2rem) 1rem;border-bottom:1px solid var(--line)}
.dsh__no{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rot);margin-bottom:.35rem}
.dsh__head h3{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem);line-height:.95;padding-right:2.4rem}
.dsh__head p{color:var(--mute);font-size:.9rem;margin-top:.4rem}
.dsh__body{overflow-y:auto;padding:.4rem clamp(1.4rem,3vw,2rem) 1rem;flex:1;overscroll-behavior:contain}
.dsh__grp{border:0;padding:1rem 0 .4rem;border-bottom:1px dashed var(--line)}
.dsh__grp legend{font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;width:100%;margin-bottom:.6rem}
.dsh__grp legend em{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:var(--cream);padding:.2rem .5rem;border-radius:99px}
.dsh__grp legend em.pflicht{background:#FFE3DF;color:var(--rot-dk)}
.dsh__gp{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--gruen)}
.dsh__opts{display:flex;flex-wrap:wrap;gap:.4rem}
.dsh__grp.is-zu .dsh__opts{max-height:6.2rem;overflow:hidden;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.dsh__mehr{margin-top:.5rem;font-weight:800;font-size:.82rem;color:var(--rot);text-decoration:underline}
/* Pflichtgruppen (QA-2): ohne Vorauswahl, erledigt = grünes Häkchen, offen nach „Hinzufügen" = rot markiert */
.dsh__grp[data-pflicht] legend em.pflicht{transition:background-color .25s,color .25s}
.dsh__grp.is-ok legend em.pflicht{background:#DDF2E3;color:var(--gruen)}
.dsh__grp.is-offen legend{color:var(--rot-dk)}
.dsh__grp.is-offen legend em.pflicht{background:var(--rot);color:#fff;animation:shake .4s}
.dsh__grp.is-offen .opt span{border-color:#EFA39B;background:#FFF6F4}
.dsh__add.is-offen{background:var(--ink);border-color:var(--ink);box-shadow:0 6px 0 -1px #000}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .85rem;border:1.5px solid var(--line);border-radius:99px;font-size:.86rem;font-weight:600;background:#fff;transition:border-color .2s,background-color .2s,color .2s}
.opt span::before{content:'';width:.9rem;height:.9rem;border-radius:50%;border:1.5px solid #CDBFA9;flex:none;transition:all .2s}
.opt input[type="checkbox"]+span::before{border-radius:.25rem}
.opt input:checked+span{border-color:var(--ink);background:var(--gelb)}
.opt input:checked+span::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 2px var(--gelb)}
.opt input:focus-visible+span{box-shadow:0 0 0 3px rgba(225,43,31,.35)}
.opt input:disabled+span{opacity:.4;cursor:not-allowed}
.dsh__opts--size{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}
.opt--size span{flex-direction:column;align-items:flex-start;border-radius:1rem;padding:.7rem .9rem;gap:.1rem}
.opt--size span::before{display:none}
.opt--size b{font-size:1rem}
.opt--size i{font-style:normal;font-size:.82rem;color:var(--mute);font-variant-numeric:tabular-nums}
.opt--size input:checked+span i{color:var(--ink)}
.dsh__note{display:block;padding:0 clamp(1.4rem,3vw,2rem) .8rem}
.dsh__note span{display:block;font-weight:800;font-size:.85rem;margin-bottom:.4rem}
.dsh__note small{font-weight:500;color:var(--mute)}
.dsh__note textarea{width:100%;resize:vertical;min-height:3rem;border:1.5px solid var(--line);border-radius:.8rem;padding:.7rem .9rem;font:inherit;font-size:.92rem;outline:0}
.dsh__note textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,200,31,.4)}
.dsh__foot{display:flex;gap:.8rem;align-items:center;padding:1rem clamp(1.4rem,3vw,2rem) 1.2rem;border-top:1px solid var(--line);background:var(--paper)}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:99px}
.qty button{width:2.6rem;height:2.6rem;font-size:1.2rem;font-weight:700;border-radius:50%}
.qty button:hover{background:var(--cream)}
.qty output{min-width:1.6rem;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.dsh__add{flex:1}
.dsh__err{color:var(--rot-dk);font-weight:700;font-size:.85rem;padding:0 clamp(1.4rem,3vw,2rem) 1rem}
.dsh__err:empty{display:none}
@media(max-width:560px){
  .sheet--dish{padding:0;align-items:end}
  .sheet--dish .sheet__box{border-radius:1.4rem 1.4rem 0 0;max-height:94svh}
}

/* Karte: Nummer, Größen, Veggie */
.dish__no{display:inline-block;min-width:1.7rem;margin-right:.45rem;padding:.05rem .35rem;border-radius:.35rem;background:var(--cream);color:var(--mute);font-size:.7rem;font-weight:800;text-align:center;vertical-align:.12em;font-variant-numeric:tabular-nums}
.dish__sizes{font-size:.74rem!important;color:#A2958A!important;font-weight:600}
.dish__buy b small{font-size:.7rem;font-weight:700;color:var(--mute)}
.chip--veg{background:#DFF5E5;color:#15703A}
.mcat__sub{margin:-.4rem 0 1rem;color:var(--mute);font-size:.9rem}
.line__n small{display:block;font-size:.74rem;font-weight:500;color:var(--mute);line-height:1.3;margin-top:.1rem}
.line__note{font-style:italic;color:var(--rot-dk)!important}

/* Kasse */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.f small{font-weight:500;letter-spacing:0}
.f.is-bad select{border-color:var(--rot);animation:shake .4s}
.pay--off{opacity:.5;cursor:not-allowed}
.co__list{list-style:none;margin-top:1.2rem;display:grid;gap:.35rem;font-size:.86rem;max-height:12rem;overflow:auto}
.co__list li{display:flex;justify-content:space-between;gap:1rem}
.co__list small{color:var(--mute)}
.co__list b{white-space:nowrap;font-variant-numeric:tabular-nums}
.co__err{color:var(--rot-dk);font-weight:700;font-size:.88rem;margin-top:.8rem;text-align:center}
.co__err:empty{display:none}
.btn.is-busy{pointer-events:none;opacity:.7}
.btn.is-busy span::after{content:' …'}
.track{list-style:none;display:grid;gap:.5rem;text-align:left;max-width:22rem;margin:1.2rem auto 1rem}
.track li{display:flex;align-items:center;gap:.7rem;color:var(--mute);font-weight:600}
.track li::before{content:'';width:1.4rem;height:1.4rem;border-radius:50%;border:2px solid var(--line);flex:none;transition:all .3s}
.track li.is-done{color:var(--ink)}
.track li.is-done::before{background:var(--gruen);border-color:var(--gruen);box-shadow:inset 0 0 0 3px #fff}
.track li.is-now{font-weight:800}
.track li.is-now::before{animation:puls 1.6s infinite}
.track__info{font-size:.95rem;margin-bottom:1.4rem}
.track__info.is-bad{color:var(--rot-dk);font-weight:700}
.track__info a{font-weight:800;border-bottom:2px solid var(--gelb)}
.toast__btn{margin-left:.4rem;color:var(--gelb);font-weight:800;text-decoration:underline;font-size:inherit}
.toast:has(.toast__btn){pointer-events:auto}

/* ══════════════ RABATTE · ALLERGENE · MENÜS · HINWEISE ══════════════ */
.dish__buy s,.opt--size s,.dsh__rabatt s{color:var(--mute);font-weight:600;font-size:.82em;margin-right:.15rem}
.dish__rabatt{display:inline-block;margin:.25rem 0 .1rem!important;padding:.15rem .5rem;border-radius:99px;background:#FFE3DF;color:var(--rot-dk)!important;font-size:.72rem!important;font-weight:800}
.dish__btns{display:flex;align-items:center;gap:.35rem}
.info{width:1.7rem;height:1.7rem;border-radius:50%;border:1.5px solid var(--line);font-size:.78rem;font-weight:900;font-style:italic;font-family:Georgia,serif;color:var(--mute);display:grid;place-items:center;transition:border-color .2s,color .2s}
.info:hover{border-color:var(--ink);color:var(--ink)}
.chip--menue{background:var(--gelb);color:var(--ink)}
.dish--menue{border-color:var(--gelb);background:linear-gradient(135deg,#FFF8E1,var(--paper) 60%)}
.dish--aus{opacity:.55}
.dish--aus .aus,.dish__buy b.aus{color:var(--rot-dk);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.mcat__alter{background:#FFF1B8;border-radius:.6rem;padding:.5rem .8rem;color:var(--ink)!important;font-size:.82rem!important}
.opt--aus span{text-decoration:line-through;opacity:.55}
.opt span em{font-style:normal;font-size:.7rem;font-weight:800;color:var(--rot-dk);margin-left:.2rem}
.opt__rabatt{display:block;font-style:normal;font-size:.68rem;font-weight:800;color:var(--rot-dk)}
.dsh__rabatt{margin-top:.8rem;font-weight:700;color:var(--rot-dk)}
.dsh__allergene{margin-top:1rem;font-size:.84rem;color:var(--mute)}
.dsh__allergene summary{cursor:pointer;font-weight:800;color:var(--ink)}
.dsh__allergene p{margin-top:.4rem}
.sheet--info .sheet__box{width:min(30rem,100%)}
.sheet--info h3{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:2rem;line-height:1;margin:.3rem 2.4rem 1rem 0}
.info__body{font-size:.92rem;display:grid;gap:.6rem}
.info__body h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);margin-top:.4rem}
.info__body ul{padding-left:1.1rem;display:grid;gap:.25rem;color:var(--mute)}
.info__fuss{font-size:.8rem;color:var(--mute);border-top:1px dashed var(--line);padding-top:.7rem}
.info__fuss a{font-weight:800;color:var(--ink)}
.laden-hinweis{background:#FFF1B8;color:var(--ink);border-radius:.7rem;padding:.6rem .8rem;font-size:.85rem;font-weight:700;margin:.6rem 0}
.laden-hinweis.is-bad{background:#FFE3DF;color:var(--rot-dk)}
.line--aus{grid-template-columns:1fr auto;opacity:.85}
.line--aus small{color:var(--rot-dk)!important}
.line__weg{font-size:.75rem;font-weight:800;color:var(--rot-dk);text-decoration:underline}
.bon__spar b{color:var(--gruen)}
.bon__mwst{font-size:.7rem;color:var(--mute);text-align:right;margin-top:-.2rem}
.bon__mindest{font-size:.8rem;font-weight:700;color:var(--gruen);text-align:center;margin:.2rem 0 .6rem}
.bon__mindest.is-bad{color:var(--rot-dk)}
.bon__mindest.is-offen{color:var(--ink)}
/* GELD-2: Liefergebühr noch offen → Summe „zzgl. Lieferung" (Bon und Handy-Leiste) */
.zzgl{display:block;font-size:.66rem;font-weight:700;letter-spacing:.02em;line-height:1.2;color:var(--mute)}
.cartbar .zzgl{color:rgba(255,255,255,.85)}
.co__wann{font-weight:800;color:var(--rot-dk);border-top:1px dashed var(--line);padding-top:.4rem;margin-top:.2rem}

/* ══════════════ KASSE · ÜBERSICHT · BELEG (Runde 1) ══════════════ */
.steps{padding-right:3rem}
.f.is-bad select{border-color:var(--rot);animation:shake .4s}
.co__klein{font-size:.76rem;color:var(--mute);line-height:1.45;margin-top:.6rem}
.co__klein a{font-weight:800;color:var(--ink);border-bottom:1.5px solid var(--gelb)}
.co__wer{background:var(--cream);border-radius:1rem;padding:.9rem 1.1rem;font-size:.88rem;display:grid;gap:.25rem;margin-bottom:1.2rem;overflow-wrap:anywhere}
.co__wer p{color:var(--mute)}
.co__wer p b{color:var(--ink)}
.co__sum small{font-size:.72rem;font-weight:600;color:var(--mute);margin-left:.3rem}
.co__alter{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;padding:.8rem 1rem;border-radius:1rem;background:#FFF1B8;font-size:.86rem;cursor:pointer}
.co__alter input{width:1.25rem;height:1.25rem;flex:none;margin-top:.1rem;accent-color:var(--rot)}
.co__zurueck{display:block;margin:.9rem auto 0;font-size:.84rem;font-weight:800;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.co__zurueck:hover{color:var(--ink)}
.co__beleg{text-align:left;max-width:26rem;margin:0 auto 1.4rem;border-top:1px dashed var(--line);padding-top:.6rem}
.co__beleg .co__list{max-height:none}
.co__beleg .co__sum{font-size:1.05rem;margin-top:.8rem}
.co__beleg .co__klein{text-align:center}
.gaeste__hinweis{display:block!important;font-size:.76rem;color:var(--mute);margin-top:1.6rem;max-width:72ch}
.dish__rabatt small{display:block;font-weight:600;font-size:.66rem;opacity:.85}
.dsh__info,.dsh__bedingung{margin-top:.6rem;font-size:.84rem;color:var(--mute)}
.dsh__bedingung{font-weight:700;color:var(--rot-dk)}
.opt__info{display:block;font-style:normal;font-size:.68rem;color:var(--mute);font-weight:600}
.chip--alk{background:#EDE7FF;color:#4B2BA8}
.info__fehlt{background:#FFE3DF;color:var(--rot-dk);border-radius:.7rem;padding:.6rem .8rem;font-weight:700;font-size:.86rem}
.is-aus{opacity:.55;pointer-events:none}
.bon__letzte{display:block;width:100%;margin:0 0 .6rem;padding:.55rem .8rem;border-radius:.7rem;background:#DFF5E5;color:#15703A;font-weight:800;font-size:.8rem;text-align:left}
.bon__letzte:hover{background:#C9EDD4}
/* Toast: lange Hinweise umbrechen; unsichtbar wirklich unsichtbar */
.toast{visibility:hidden;transition:transform .45s var(--ease-pop),visibility 0s .45s}
.toast.is-on{visibility:visible;transition:transform .45s var(--ease-pop),visibility 0s}
.toast:has(.toast__btn){white-space:normal;text-align:center;border-radius:1.2rem;width:max-content;max-width:min(26rem,calc(100vw - 2rem))}
/* Gericht-Fenster am Handy: Knopftext bleibt einzeilig */
.dsh__add span{white-space:nowrap}
@media(max-width:420px){.dsh__add{font-size:.9rem;padding-inline:1rem}.qty button{width:2.3rem;height:2.3rem}}

.dsh__bedingung{margin-bottom:1rem}

/* ══════════════ VERTRAG WIDERRUFEN (§ 356a BGB) ══════════════ */
.wr{display:grid;gap:1rem;margin-top:1.8rem;background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:clamp(1.2rem,3vw,1.8rem)}
.wr__f{display:grid;gap:.35rem}
.wr__f span{font-size:.8rem;font-weight:800;letter-spacing:.04em;color:var(--ink)}
.wr__f span small{font-weight:600;color:var(--mute);letter-spacing:0}
.wr__f > small{font-size:.76rem;color:var(--mute)}
.wr__f input,.wr__f textarea{font:inherit;font-size:.95rem;border:1.5px solid var(--line);background:#fff;border-radius:.8rem;padding:.8rem .9rem;outline:0;width:100%;transition:border-color .25s,box-shadow .25s}
.wr__f textarea{resize:vertical}
.wr__f input:focus,.wr__f textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,200,31,.4)}
.wr__f.is-bad input{border-color:var(--rot)}
.wr__err{color:var(--rot-dk)!important;font-weight:700;margin:0!important}
.wr__err:empty{display:none}
.wr__btn{justify-self:start;padding:.95rem 1.6rem;border-radius:999px;background:var(--rot);color:#fff;font-weight:800;font-size:.95rem;border:2px solid var(--rot-dk);cursor:pointer;transition:background-color .2s}
.wr__btn:hover{background:var(--rot-dk)}
.wr__btn:disabled{opacity:.6;cursor:wait}
.wr__klein{font-size:.78rem;margin:0!important}
.wr__ok{margin-top:1.8rem;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gruen,#1E9C45);border-radius:1rem;padding:clamp(1.2rem,3vw,1.8rem);outline:0}
.wr__ok h2{margin-top:0!important}
.wr__daten{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:1rem 0;font-size:.92rem}
.wr__daten dt{color:var(--mute)}
.wr__daten dd{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
@media(max-width:480px){.wr__daten{grid-template-columns:1fr}.wr__daten dd{margin-bottom:.4rem}}

/* ══════════════ QA-RUNDE 2 ══════════════ */
.co__voll{grid-column:1/-1}
/* Links zu AGB/Datenschutz/Widerruf direkt über dem Bestellknopf deutlich als Links */
.co__legal a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* Alle Toasts umbrechen statt abschneiden; bei offenem Dialog unten statt über Kopf und × */
.toast{white-space:normal;text-align:center;border-radius:1.2rem;width:max-content;max-width:min(26rem,calc(100vw - 2rem))}
@media(max-width:1020px){
  html.no-scroll .toast{top:auto;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translate(-50%,180%)}
  html.no-scroll .toast.is-on{transform:translate(-50%,0)}
  /* „Vertrag widerrufen" in der Fußzeile darf nicht unter Warenkorb-Leiste und Chat-Knopf liegen (§ 356a BGB) */
  html[data-cart] .foot{padding-bottom:calc(9.5rem + env(safe-area-inset-bottom))}
}
.dsh__allergene .info__body{margin-top:.5rem;font-size:.84rem}
.dsh__allergene .info__body h4{margin-top:.6rem}
.opt span small{font-weight:600;color:var(--mute)}
/* Nährwerttabelle im Info-Fenster (LMIV) */
.info__nw{width:100%;border-collapse:collapse;font-size:.84rem;margin:.2rem 0 .4rem}
.info__nw caption{text-align:left;font-weight:800;font-size:.8rem;margin-bottom:.25rem}
.info__nw th{text-align:left;font-weight:500;color:var(--mute);padding:.2rem .6rem .2rem 0;border-bottom:1px dashed var(--line)}
.info__nw td{text-align:right;font-variant-numeric:tabular-nums;padding:.2rem 0;border-bottom:1px dashed var(--line);white-space:nowrap}

/* ══════════════ QA-RUNDE 3 ══════════════ */
/* „Vertrag widerrufen" hervorgehoben (§ 356a Abs. 1 S. 3 BGB) — Fußzeile und Statusseite */
.foot a[href="widerruf.html"],.knopf-widerruf{display:inline-block;color:#fff;font-weight:800;border:1.5px solid currentColor;border-radius:999px;padding:.25rem .85rem;text-decoration:none}
.knopf-widerruf{color:var(--rot-dk);margin-left:.3rem}
.foot a[href="widerruf.html"]:hover,.knopf-widerruf:hover{background:var(--gelb);color:var(--ink);border-color:var(--gelb)}
.co__wr{text-align:center;margin-top:.8rem}
/* Preisänderung in der Übersicht + fehlende Bestätigungs-Mail */
.co__preisneu,.co__mailfehler{background:#FFF1B8;border-radius:.8rem;padding:.7rem .9rem;font-size:.86rem;font-weight:600;margin-top:1rem}
.co__preisneu button,.co__mailfehler button{display:inline-block;margin-top:.4rem;padding:.45rem .9rem;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;font-size:.82rem}
.co__mailfehler{background:#FFE3DF;color:var(--rot-dk)}
.co__preisneu.is-bad{background:#FFE3DF;color:var(--rot-dk)}
/* Kassen-Schritte: Nummer nicht vom Namen trennen */
.steps li{overflow-wrap:normal}
.steps li::before{white-space:nowrap}
@media(max-width:560px){.steps li{font-size:.62rem;letter-spacing:.04em}}
.info__mehr{margin-top:.3rem}
.info__mehr summary{cursor:pointer;font-weight:700;font-size:.8rem;color:var(--rot-dk)}
.mini__aus{font-style:normal;font-size:.75rem;font-weight:800;color:var(--rot-dk);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.gw:empty{display:none}
.foot nav{flex-wrap:wrap;row-gap:.7rem}
/* Gewährleistungs-Mitteilung vor dem Bestellknopf: vollständig, aber als Karte statt in voller Breite (eigener „vergrößern"-Knopf) */
.co__step .gw{max-width:380px;margin:1.2rem auto .4rem}
/* QA-1 (Runde 4): Am Desktop passt der Bon immer in den Bildschirm — die Positionen scrollen, „Zur Kasse" bleibt sichtbar */
@media(min-width:1021px){
  .bon__paper{display:flex;flex-direction:column;max-height:calc(100vh - var(--nav-h) - 6rem)}
  .bon__paper > *{flex:none}
  .bon__items{flex:1 1 auto;min-height:5rem;max-height:none}
}
@media(min-width:1021px) and (max-height:820px){.bon__head img{height:3.2rem}.bon__head{padding-bottom:.6rem}.bon__note{margin-top:.5rem}}

/* ══════════════ NUR ABHOLUNG (site-data.js lieferung: false) ══════════════
   Die Klasse steht fest im <html> von index.html (die CSP erlaubt kein Inline-Skript → so flackert nichts);
   order.js gleicht sie mit SP_SITE.lieferung ab. Liefer-Teile bleiben im HTML und kommen mit lieferung: true zurück. */
html.nur-abholen [data-nur-liefern]{display:none!important}
html:not(.nur-abholen) [data-nur-abholen]{display:none!important}

/* ══════════════ PREISZEILE: ABHOLPREIS · LIEFERPREIS ══════════════
   Wie eine Zeile auf dem Bon: groß „Abholpreis 7,50 €", daneben „Lieferpreis 10,00 €" mit durchgestrichener Zahl.
   Beide Paare bleiben je für sich zusammen und brechen nur als Ganzes um. Wortlaut: PREIS in order.js. */
.pr{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:1.1rem;row-gap:.2rem;line-height:1.1}
.pr__paar{display:inline-flex;align-items:baseline;gap:.35rem;white-space:nowrap}
.pr__k{font-size:.8rem;font-weight:800;color:var(--rot-dk)}
.pr .pr__ab,.dish__preis .pr__ab{font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:1.45rem;line-height:.9;letter-spacing:.005em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.pr__ab small,.pr__abw{font-family:var(--body);font-stretch:100%;font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--mute)}
.pr__paar .pr__abw{margin-right:-.1rem}
/* Abholpreis kleiner als der Lieferpreis: sterngelb unterlegt wie mit dem Textmarker */
.pr--vgl .pr__ab{background:linear-gradient(transparent 54%,rgba(255,200,31,.8) 54%,rgba(255,200,31,.8) 90%,transparent 90%);padding:0 .12em;margin:0 -.12em}
.pr__lk,.pr__lf{font-size:.8rem;font-weight:600;color:var(--mute)}
.pr__lf{text-decoration:line-through;text-decoration-color:var(--rot);text-decoration-thickness:1.6px;font-variant-numeric:tabular-nums}

/* Karte: Knöpfe oben rechts, Preiszeile über die ganze Breite unten — so passt „Abholpreis · Lieferpreis" in eine Zeile */
.dish{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt buy" "preis preis";column-gap:1rem;align-items:start}
.dish__txt{grid-area:txt;min-width:0}
.dish__buy{grid-area:buy;justify-content:flex-start}
.dish__preis{grid-area:preis;display:flex;justify-content:flex-start;margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.dish--aus .dish__buy{align-self:center}

/* Gericht-Fenster: je Größe eine Zeile wie auf dem Bon, darunter die Erklärung des Lieferpreises */
.dsh__opts--size.is-zeilen{display:grid;grid-template-columns:1fr;gap:.4rem}
.is-zeilen .opt--size > span{display:grid;grid-template-columns:4.2rem minmax(0,1fr);align-items:center;column-gap:.8rem;row-gap:.2rem;border-radius:.9rem;padding:.65rem .95rem}
.is-zeilen .opt__gr{font-family:var(--disp);font-stretch:75%;font-weight:800;font-size:1.15rem;text-transform:uppercase;line-height:1}
/* Preiszeile im Größen-Knopf: die allgemeinen .opt-span-Regeln (Pille + Radiokreis) gelten hier nicht */
.opt .pr,.opt .pr span,.opt .opt__infos{display:inline-flex;flex-direction:row;align-items:baseline;gap:.35rem;padding:0;border:0;border-radius:0;background:none;font-size:inherit;font-weight:inherit;transition:none}
.opt .pr::before,.opt .pr span::before,.opt .opt__infos::before{content:none}
.opt .pr{flex-wrap:wrap;justify-content:flex-end;column-gap:.7rem;row-gap:.15rem;justify-self:end}
@media(max-width:480px){.is-zeilen .opt--size > span{grid-template-columns:3.3rem minmax(0,1fr);column-gap:.5rem;padding:.6rem .8rem}.opt .pr{column-gap:.55rem}}
.opt .pr .pr__k{font-size:.76rem;font-weight:800}
.opt .pr .pr__lk,.opt .pr .pr__lf{font-size:.8rem;font-weight:600}
.opt .pr .pr__ab{font-size:1.3rem}
.opt .opt__infos{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-size:.86rem}
.is-zeilen .opt__infos{grid-column:2;display:flex;flex-wrap:wrap;gap:.1rem .7rem}
.is-zeilen .opt__infos em{display:inline}
.pr--opt .pr__ab{font-size:1.3rem}
.opt input:checked+span .pr--vgl .pr__ab{background:none}
.opt input:checked+span .pr__lk,.opt input:checked+span .pr__lf{color:#4A3B2C}
.dsh__erkl{margin-top:.6rem;font-size:.78rem;line-height:1.45;color:var(--mute);max-width:60ch}
.dsh__preis{margin-top:.9rem}

/* Hero: am aktiven Stück, auf der Nachtbühne */
.tag__preis .pr{justify-content:flex-end}
.tag__preis .pr__k{color:var(--gelb-hell);font-size:.82rem}
.tag__preis .pr__ab{font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:clamp(1.7rem,1.3rem + 1vw,2.3rem);line-height:.9;color:var(--gelb);background:none}
.tag__preis .pr__abw,.tag__preis .pr__ab small{color:rgba(255,255,255,.75)}
.tag__preis .pr__lk,.tag__preis .pr__lf{color:rgba(255,255,255,.78);font-size:.9rem}
.tag__preis .pr__lf{text-decoration-color:rgba(255,255,255,.9)}

/* „Das ist Star": Karte „Pizza Star" */
.star__pick-preis{grid-column:1;align-self:center;min-width:0}
.star__pick-preis .pr{flex-direction:column;align-items:flex-start;row-gap:.3rem}
.star__pick-preis .pr__k{color:var(--gelb)}
.star__pick-preis .pr__ab{color:#fff;font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:1.7rem;line-height:.9;background:none}
.star__pick-preis .pr--vgl .pr__ab{color:var(--gelb)}
.star__pick-preis .pr__abw,.star__pick-preis .pr__ab small{color:rgba(255,255,255,.75)}
.star__pick-preis .pr__lk,.star__pick-preis .pr__lf{color:rgba(255,255,255,.75)}
.star__pick-preis .pr__lf{text-decoration-color:rgba(255,255,255,.85)}
.star__pick-add{padding:0}
.star__pick-add svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}

/* Chat: Gericht-Karten */
.mini{align-items:flex-start}
.mini__txt{min-width:0}
.mini__buy{display:flex;align-items:center;gap:.5rem;flex:none}
.mini .pr{flex-direction:column;align-items:flex-end;row-gap:.1rem;text-align:right}
.mini .pr__k{font-size:.66rem}
.mini .pr .pr__ab,.mini .pr__ab{font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:1.15rem;line-height:.95}
.mini .pr__lk,.mini .pr__lf{font-size:.7rem}
.mini__plus{width:2.1rem!important;height:2.1rem;padding:0!important;border-radius:50%!important;display:grid;place-items:center}
.mini__plus svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.msg del{text-decoration-color:var(--rot);text-decoration-thickness:1.5px;color:var(--mute)}

/* Hero-Box: zwei Reiter, Abhol-Adresse mit Route */

/* ══════════════ KARTE: HINWEIS ABHOLUNG + ABHOLPREISE ══════════════ */
.abholhin{max-width:31rem;background:var(--paper);border:1.5px dashed #D2BFA0;border-radius:1.1rem;padding:1.1rem 1.25rem 1.15rem;display:grid;gap:.5rem}
.abholhin__weg{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:.9rem;color:var(--ink)}
.abholhin__weg svg{flex:none;width:2rem;height:2rem;padding:.42rem;border-radius:50%;background:var(--gelb);fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.abholhin__t{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);line-height:.98;text-wrap:balance}
.abholhin__lg{font-size:.82rem;line-height:1.5;color:#5E5046;text-wrap:pretty}
.abholhin__adr{font-size:.82rem;color:var(--mute)}
.abholhin__adr b{color:var(--ink)}
.abholhin__adr a{color:var(--ink);font-weight:800;border-bottom:2px solid var(--gelb)}

/* Bon: Bestellweg + Zahlung (§ 312j BGB schon im Warenkorb sichtbar) */
.bon__weg{display:grid;gap:.1rem;text-align:center;font-size:.74rem;color:var(--mute);margin:.2rem 0 .7rem;padding:.55rem .6rem;border-radius:.7rem;background:var(--cream)}
.bon__weg b{color:var(--ink);font-size:.8rem;font-weight:800}

/* ══════════════ KASSE: ZAHLART + FAZIT ÜBER DEM KNOPF ══════════════ */
.pay{border:0;min-width:0;margin:0}
.pay span{padding-right:3.6rem}
.pay span svg{position:absolute;right:1.1rem;top:50%;width:1.7rem;height:1.7rem;margin-top:-.85rem;fill:none;stroke:#A89A8C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.pay input:checked+span svg{stroke:var(--ink)}
.pay__hinweis{font-size:.8rem;font-weight:700;color:var(--rot-dk);margin-top:.1rem}
.co__fazit{margin-top:1.2rem;border-top:2px solid var(--ink);padding-top:.9rem}
.co__fazit .co__sum{margin-top:0;border-top:0;padding-top:0}
.co__kurz{display:grid;gap:.25rem;margin-top:.55rem;font-size:.86rem}
.co__kurz div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.6rem}
.co__kurz dt{color:var(--mute)}
.co__kurz dd{font-weight:700;text-align:right;overflow-wrap:anywhere}
.co__kurz em{font-style:normal;color:var(--rot-dk)}
.co__fazit + .co__next{margin-top:1rem}

/* ══════════════ ABHOLEN (ersetzt „Liefergebiet") ══════════════ */
.pickup{padding:clamp(5rem,10vw,8rem) 0;background:var(--cream);overflow:hidden}
.pickup__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.pickup__steps{list-style:none;counter-reset:schritt;margin-top:2.2rem;max-width:34rem;border-top:2px solid var(--ink)}
.pickup__steps li{counter-increment:schritt;display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:1rem;padding:1.05rem 0;border-bottom:1px dashed #D2BFA0}
.pickup__steps li::before{content:counter(schritt);grid-row:span 2;font-family:var(--disp);font-weight:800;font-stretch:75%;font-size:2.7rem;line-height:.8;color:var(--rot)}
.pickup__steps b{font-weight:800;font-size:1.04rem;line-height:1.3}
.pickup__steps li > span{color:var(--mute);font-size:.93rem;line-height:1.5}
.pickup__steps i{font-style:normal;display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:.8rem;line-height:1;vertical-align:-.12em}

.schein{justify-self:center;width:min(100%,25rem);transform:rotate(1.6deg);transition:transform .6s var(--ease-soft)}
.schein:hover{transform:rotate(0)}
.schein__paper{
  background:var(--paper);padding:1.9rem 1.7rem 2.5rem;position:relative;
  box-shadow:0 34px 60px -30px rgba(26,18,16,.5),0 1px 0 var(--line);border-radius:.4rem .4rem 0 0;
  --zz:radial-gradient(circle at 50% 100%,transparent 7px,#000 7.5px);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,var(--zz) bottom/16px 9px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,var(--zz) bottom/16px 9px repeat-x;
}
.schein__k{text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen)}
.schein__name{text-align:center;font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:1.35rem;line-height:1;margin-top:.35rem}
.schein__adr{display:grid;gap:.45rem;text-align:center;margin:1.1rem 0;padding:1.15rem 0 1.1rem;border-block:2px dashed var(--line)}
.schein__str{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(1.75rem,1.35rem + 1.5vw,2.35rem);line-height:.9;white-space:nowrap}
.schein__ort{font-weight:700;font-size:1rem;letter-spacing:.02em;color:var(--mute)}
.schein__rows{display:grid;font-size:.9rem}
.schein__rows div{display:flex;align-items:baseline;gap:.4rem;padding:.42rem 0}
.schein__rows div::after{content:'';order:1;flex:1;min-width:1rem;border-bottom:1.5px dotted #CDBFA9;transform:translateY(-.3em)}
.schein__rows dt{order:0;color:var(--mute);flex:none}
.schein__rows dd{order:2;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.schein__rows a{border-bottom:2px solid var(--gelb)}
.schein__route{width:100%;margin-top:1.3rem}
@media(max-width:860px){.pickup__in{grid-template-columns:1fr}.schein{transform:rotate(1deg)}}
@media(max-width:420px){.schein__paper{padding:1.6rem 1.2rem 2.3rem}.schein__rows{font-size:.84rem}.schein__rows div{flex-wrap:wrap}.schein__rows div::after{display:none}.schein__rows dd{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.schein,.schein:hover{transition:none}}

@media(max-width:760px){
  .abholhin{max-width:none;width:100%}
  .dish__preis{margin-top:.6rem}
}
@media(max-width:420px){
  .pr .pr__ab,.dish__preis .pr__ab{font-size:1.3rem}
  .pr{column-gap:.7rem}
}
@media(max-width:700px){
  .tag__preis .pr{flex-direction:column;align-items:center;row-gap:.2rem}
  .tag__preis .pr__ab{font-size:1.55rem}
  .tag__preis .pr__k{font-size:.72rem}
  .tag__preis .pr__lk,.tag__preis .pr__lf{font-size:.8rem}
}

/* ── PayPal-Rückkehr: Auswahl nach Abbruch / Fehler (order.js paypalFehler) ── */
.co__ppwahl{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.co__ppwahl .btn{width:100%;justify-content:center}

/* ── Kasse aufgeräumt (12.11.2026) ── */
/* E-Mail-Tippfehler: „Meinten Sie max@gmail.com?" direkt unter dem Feld, Vorschlag antippbar */
.co__grid .co__tipp{display:block;margin:-.35rem 0 .1rem;padding:.55rem .8rem;border-radius:.8rem;background:var(--gelb-hell);color:var(--ink);font-size:.86rem;line-height:1.4}
.co__tipp button{font:inherit;font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:2px;word-break:break-all;padding:.15rem 0}
/* Gewährleistungs-Mitteilung jetzt am Ende von Schritt 1, vor „Weiter zur Übersicht" */
.co__step[data-step="1"] .gw{margin:1.4rem auto .2rem}
/* Zahlart: Hinweis ist eine Bitte, kein Fehler (Knopf ist bis zur Wahl gesperrt) · Handy: Kästen kompakter, ohne Symbol */
.pay__hinweis{color:var(--mute);font-weight:600}
@media(max-width:520px){
  .pay span{padding:.8rem 1rem .8rem 2.9rem;font-size:.82rem;line-height:1.4}
  .pay span::before{left:.95rem}
  .pay span svg{display:none}
}