/* Grill Flamme Holzminden — Designsprache „Glut".
   Nacht und Kohle, ein Glutbogen, Kanit 900 als laute Wortmarke.
   Signature ist „Der Spieß": gepinnte Bühne, der Spieß dreht am Scrollrad. */

/* ============ Schriften ============ */
@font-face{font-family:Kanit;src:url(../fonts/kanit-900.woff2)format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Kanit;src:url(../fonts/kanit-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Kanit;src:url(../fonts/kanit-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-700.woff2)format('woff2');font-weight:700;font-display:swap}

/* ============ Token ============ */
:root{
  --nacht:#0d0908; --nacht-tief:#050303; --rauch:#1a1210; --rauch-hoch:#2a1e19;
  --papier:#f6f0e8; --papier-leise:#a8988c; --asche:#6b5b52;
  --glut:#ed302e; --glut-hell:#ffd400; --glut-tief:#b01b18; --kohle:#7a1210;
  --linie:rgba(246,240,232,.12); --linie-hart:rgba(246,240,232,.34);
  --radius:0px; --radius-klein:3px;
  --ease:cubic-bezier(.2,.85,.3,1);
  --pad:clamp(1.1rem,4vw,3rem);
  --takt:clamp(4rem,10vw,8.5rem);
  --kopf-h:4.4rem;
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
img,video,canvas{display:block;max-width:100%;height:auto}      /* height:auto ist Pflicht */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--nacht);color:var(--papier);
  font-family:Satoshi,system-ui,-apple-system,sans-serif;font-weight:500;
  line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
dl,dt,dd{margin:0}
fieldset{border:0}
:focus-visible{outline:2px solid var(--glut-hell);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--glut);color:var(--nacht);
  padding:.8rem 1.2rem;font-weight:700}
.skip:focus{left:0}

/* ============ Bausteine ============ */
.titel{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,4.4rem);line-height:.95;
  letter-spacing:-.018em;word-spacing:.06em}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;
  padding-bottom:clamp(1.6rem,3vw,2.6rem);border-bottom:1px solid var(--linie);
  margin-bottom:clamp(1.8rem,3.5vw,3rem)}
@media(min-width:840px){.kopfzeile{grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  align-items:end;gap:2rem}}
.kopf-notiz{color:var(--papier-leise);font-size:.92rem;max-width:44ch}

.knopf{
  display:inline-block;font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.88rem;letter-spacing:.02em;padding:.95rem 1.6rem;text-align:center;
  color:var(--nacht);background-color:var(--glut);
  background-image:linear-gradient(var(--glut-hell),var(--glut-hell));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 0;
  transition:background-size .34s var(--ease);
}
.knopf:hover{background-size:100% 100%}
.knopf-leer{color:var(--papier);background-color:transparent;border:1px solid var(--linie-hart);
  background-image:linear-gradient(var(--papier),var(--papier))}
.knopf-leer:hover{color:var(--nacht);border-color:var(--papier)}
.knopf-voll{display:block;width:100%}
.knopf[aria-disabled="true"]{opacity:.4;pointer-events:none}

.text-link{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;
  color:var(--papier-leise);border-bottom:1px solid var(--linie);padding-bottom:.25rem;
  transition:color .24s,border-color .24s}
.text-link:hover{color:var(--glut-hell);border-color:var(--glut)}
.pfeil{width:1.1rem;height:1px;background:currentColor;transition:width .24s}
.text-link:hover .pfeil{width:1.7rem}

/* ============ Kopfleiste ============ */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;gap:1.4rem;
  height:var(--kopf-h);padding:0 var(--pad);
  background:rgba(13,9,8,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.kopf.fest{border-bottom-color:var(--linie);background:rgba(13,9,8,.94)}
.marke{display:flex;align-items:center;gap:.65rem;margin-right:auto;
  font-family:Kanit,sans-serif;font-weight:900;font-size:1.02rem;
  letter-spacing:.005em;text-transform:uppercase}
.marke-glut{width:.62rem;height:.62rem;border-radius:50%;background:var(--glut);
  box-shadow:0 0 12px 2px rgba(237,48,46,.72)}
.nav{display:flex;gap:1.5rem;font-size:.86rem;color:var(--papier-leise)}
.nav a{transition:color .22s}
.nav a:hover,.nav a.aktiv{color:var(--glut-hell)}
.kopf-tel{font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--linie-hart);padding:.55rem .95rem;white-space:nowrap;
  background-color:transparent;background-image:linear-gradient(var(--glut),var(--glut));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 0;
  transition:background-size .32s var(--ease),color .26s,border-color .26s}
.kopf-tel:hover{background-size:100% 100%;color:var(--nacht);border-color:var(--glut)}
.kopf-tel-kurz{display:none}

.riegel{display:none;width:2.6rem;height:2.6rem;position:relative;margin-right:-.6rem}
.riegel span{position:absolute;left:.6rem;right:.6rem;height:2px;background:var(--papier);
  transition:transform .3s var(--ease),opacity .2s}
.riegel span:first-child{top:1rem}
.riegel span:last-child{bottom:1rem}
.riegel[aria-expanded="true"] span:first-child{transform:translateY(.3rem)rotate(45deg)}
.riegel[aria-expanded="true"] span:last-child{transform:translateY(-.3rem)rotate(-45deg)}

/* Vollflächenmenü liegt UNTER dem Kopf, sonst ist das Schließkreuz verdeckt. */
.blatt{position:fixed;inset:0;z-index:85;background:var(--nacht-tief);
  padding:calc(var(--kopf-h) + 2rem) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between}
.blatt nav{display:flex;flex-direction:column;gap:.4rem}
.blatt nav a{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,10vw,3rem);line-height:1.18;letter-spacing:-.018em;word-spacing:.06em}
.blatt-fuss{color:var(--papier-leise);font-size:.9rem}

/* ============ Hero ============ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--kopf-h) + var(--pad)) var(--pad) var(--pad);
  background:radial-gradient(96% 62% at 50% 116%, #26100c 0%, #120b08 40%, var(--nacht-tief) 78%);
}
.glut{position:absolute;left:50%;bottom:-46vh;width:min(112vw,1180px);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none}
.glut-kern{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,212,0,.40) 0%, rgba(237,48,46,.26) 20%,
    rgba(176,27,24,.13) 38%, rgba(122,18,16,.05) 54%, transparent 68%);
  filter:blur(30px);animation:atmen 6.5s ease-in-out infinite}
.glut-schleier{position:absolute;inset:0;
  background:radial-gradient(circle at 46% 62%, rgba(237,48,46,.13) 0%, transparent 48%);
  filter:blur(52px);animation:atmen 9s ease-in-out infinite reverse}
@keyframes atmen{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.055)}}

.funken{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.funken span{position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--glut-hell);box-shadow:0 0 7px 1px rgba(253,214,6,.85)}

.hero-typo{position:relative;z-index:3;margin-top:auto;
  font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.5rem,8.6vw,7.4rem);line-height:.92;
  letter-spacing:-.018em;word-spacing:.06em}
.maske{display:block;overflow:hidden;padding-bottom:.045em}
.zeile{display:block;will-change:transform}
.zeile-glut{background:linear-gradient(180deg,var(--glut-hell) 0%,var(--glut) 44%,var(--glut-tief) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero-fuss{position:relative;z-index:3;margin-top:clamp(1.6rem,4vw,2.8rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:end;
  border-top:1px solid var(--linie);padding-top:1.4rem}
@media(min-width:820px){.hero-fuss{grid-template-columns:minmax(0,1.15fr) minmax(0,auto)}}
.hero-text{max-width:34ch;font-size:clamp(.94rem,1.15vw,1.06rem);color:var(--papier-leise)}
.hero-text b{color:var(--papier);font-weight:700}
.hero-tat{display:flex;flex-wrap:wrap;gap:.7rem}

.claim{position:relative;z-index:3;margin-top:1.2rem;
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  font-size:.76rem;letter-spacing:.07em;text-transform:uppercase}
.claim-strich{width:2.4rem;height:1px;background:linear-gradient(90deg,var(--asche),var(--glut))}
.claim-satz{color:var(--glut-hell);font-weight:700}
.claim-notiz{color:var(--asche)}

/* ============ Laufband ============ */
.band{border-block:1px solid var(--linie);background:var(--rauch);overflow:hidden;
  padding:.95rem 0}
.band-reihe{display:flex;gap:2.6rem;width:max-content;white-space:nowrap;
  font-family:Kanit,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.08em;color:var(--papier-leise)}
.band-reihe b{color:var(--glut);font-weight:700}
.band-lesbar{position:absolute;left:-9999px}

/* ============ Signature: Der Spieß ============ */
.spiess{position:relative;height:520vh;background:var(--nacht-tief)}
.spiess-fest{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
  padding:calc(var(--kopf-h) + 1rem) var(--pad) var(--pad)}
@media(min-width:900px){
  /* stretch, nicht center — sonst ist die Bühne nur so hoch wie ihr Inhalt
     und der Canvas fällt auf seine Attributhöhe zurück. */
  .spiess-fest{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(2rem,5vw,5rem);align-items:stretch}
  .spiess-text{align-self:center}
}

/* Der gezeichnete Spieß. Wird später von der Frame-Sequenz ersetzt. */
.spiess-buehne{position:relative;display:grid;place-items:center;height:100%;
  perspective:1100px}

/* Der Film als stehende Saeule. Seitenkanten weich ausmaskiert, sonst steht auf
   dunklem Grund eine sichtbare senkrechte Videokante. */
.spiess-film{position:absolute;inset:0;display:block;width:100%;height:100%;
  opacity:0;transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.spiess-film.da{opacity:1}
.spiess-schleier{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .5s ease;
  background:linear-gradient(180deg,
    var(--nacht-tief) 0%, rgba(5,3,3,.72) 7%, transparent 20%,
    transparent 76%, rgba(5,3,3,.78) 92%, var(--nacht-tief) 100%)}
.spiess-film.da ~ .spiess-schleier{opacity:1}
/* Laeuft der Film, verschwindet der gezeichnete Ersatz-Spieß. */
.film-da [data-ersatz]{display:none}
.spiess-koerper{position:relative;width:min(26vw,190px);height:min(60vh,480px);
  transform-style:preserve-3d;will-change:transform}
/* Schichten: eng gestapelt, Glutkante rechts — nicht als getrennte Reifen. */
.schicht{position:absolute;left:50%;width:100%;height:7.4%;border-radius:44%/34%;
  transform:translateX(-50%);
  background:
    linear-gradient(92deg,
      rgba(255,150,60,.24) 0%, rgba(0,0,0,0) 16%,
      rgba(0,0,0,0) 62%, rgba(255,140,50,.30) 84%, rgba(255,212,0,.42) 100%),
    linear-gradient(96deg,#3d2820 0%,#22150f 26%,#4e3325 56%,#180d09 80%,#35211a 100%);
  box-shadow:inset 0 -5px 11px rgba(0,0,0,.6), inset 0 3px 7px rgba(255,160,70,.11),
             0 2px 5px rgba(0,0,0,.35)}
.schicht:nth-child(1){top:0%;width:52%}
.schicht:nth-child(2){top:5.4%;width:62%}
.schicht:nth-child(3){top:10.8%;width:71%}
.schicht:nth-child(4){top:16.2%;width:79%}
.schicht:nth-child(5){top:21.6%;width:86%}
.schicht:nth-child(6){top:27%;width:92%}
.schicht:nth-child(7){top:32.4%;width:96%}
.schicht:nth-child(8){top:37.8%;width:99%}
.schicht:nth-child(9){top:43.2%;width:100%}
.schicht:nth-child(10){top:48.6%;width:100%}
.schicht:nth-child(11){top:54%;width:99%}
.schicht:nth-child(12){top:59.4%;width:96%}
.schicht:nth-child(13){top:64.8%;width:92%}
.schicht:nth-child(14){top:70.2%;width:86%}
.schicht:nth-child(15){top:75.6%;width:79%}
.schicht:nth-child(16){top:81%;width:70%}
.schicht:nth-child(17){top:86.4%;width:60%}
.schicht:nth-child(18){top:91.8%;width:48%}
/* Stange steht still, sie dreht nicht mit dem Fleisch mit. */
.spiess-stange{position:absolute;left:50%;top:8%;width:4px;height:84%;
  transform:translateX(-50%);border-radius:3px;z-index:-1;
  background:linear-gradient(180deg,#6b625c,#33302d)}
/* Glut hinter dem Spieß — klein und schmal, nicht als Fleck über dem Text. */
.spiess-hitze{position:absolute;left:50%;top:14%;width:min(15vw,120px);height:64%;
  transform:translateX(-24%);border-radius:50%;z-index:-2;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,150,55,.34) 0%, rgba(176,27,24,.15) 44%, transparent 72%);
  filter:blur(30px);animation:atmen 5.5s ease-in-out infinite}

.spiess-text{position:relative;z-index:3}
.spiess-oben{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--asche);margin-bottom:1.4rem}
.takte{position:relative;min-height:16rem}
.takt{position:absolute;inset:0;max-width:34rem}
.takt-nr{font-family:Kanit,sans-serif;font-weight:900;font-size:.86rem;
  letter-spacing:.1em;color:var(--glut);margin-bottom:.7rem}
.takt-titel{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.55rem,3.4vw,2.9rem);line-height:1.02;
  letter-spacing:-.018em;word-spacing:.06em;
  hyphens:auto;overflow-wrap:break-word}
.takt-text{margin-top:.9rem;color:var(--papier-leise);
  font-size:clamp(.94rem,1.1vw,1.05rem);max-width:40ch}

.tiefe{position:absolute;left:var(--pad);bottom:var(--pad);z-index:4;
  display:flex;align-items:center;gap:.8rem;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--asche)}
.tiefe-zahl{font-variant-numeric:tabular-nums;min-width:2.8rem}
.tiefe-balken{display:block;width:min(30vw,9rem);height:2px;background:var(--linie)}
.tiefe-balken>span{display:block;height:100%;width:0;background:var(--glut);
  transform-origin:0 50%}

/* ============ Karte ============ */
.karte{padding:var(--takt) var(--pad)}
/* ---------- Reiterleiste „Die Schiene" ----------
   Klebt unter dem Kopf, verlaeuft an beiden Enden ins Nichts (damit man sieht,
   dass es weitergeht), und unter den Reitern faehrt eine Glutlinie mit.
   Ein nackter overflow-x-Scroller sieht neben den Kacheln billig aus. */
.karte-schiene{position:sticky;top:var(--kopf-h);z-index:40;margin-bottom:1.6rem;
  padding-top:.9rem;background:linear-gradient(180deg,var(--nacht) 62%,transparent)}
.karte-reiter{position:relative;display:flex;gap:.5rem;overflow-x:auto;
  padding-bottom:.85rem;scroll-behavior:smooth;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.2rem,#000 calc(100% - 2.2rem),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2.2rem,#000 calc(100% - 2.2rem),transparent 100%)}
.karte-reiter::-webkit-scrollbar{display:none}
.karte-reiter[data-anfang]{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2.2rem),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2.2rem),transparent 100%)}
.karte-reiter[data-ende]{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.2rem,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2.2rem,#000 100%)}
.karte-reiter[data-anfang][data-ende]{-webkit-mask-image:none;mask-image:none}

.reiter{position:relative;flex:0 0 auto;scroll-snap-align:center;
  font-family:Kanit,sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;padding:.6rem .2rem;white-space:nowrap;
  color:var(--asche);transition:color .24s var(--ease)}
.reiter:hover{color:var(--papier)}
.reiter[aria-selected="true"]{color:var(--papier)}
.reiter + .reiter{margin-left:.9rem}

/* Die Glutlinie faehrt zum aktiven Reiter, statt dass nur eine Farbe umspringt. */
.reiter-linie{position:absolute;left:0;bottom:.5rem;height:2px;width:0;
  background:linear-gradient(90deg,var(--glut-hell),var(--glut));
  box-shadow:0 0 10px 1px rgba(237,48,46,.6);
  transform:translateX(0);transition:transform .38s var(--ease),width .38s var(--ease);
  pointer-events:none}
.karte-schiene::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--linie)}
@media(prefers-reduced-motion:reduce){
  .reiter-linie{transition:none}
  .karte-reiter{scroll-behavior:auto}
}

.gruppe[hidden]{display:none!important}
.gruppe{margin-bottom:clamp(2.4rem,5vw,4rem);scroll-margin-top:calc(var(--kopf-h) + 5.5rem)}
.gruppe-titel{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.014em;word-spacing:.06em;
  padding-bottom:.7rem;border-bottom:1px solid var(--linie-hart)}
.gruppe-info{margin-top:.7rem;font-size:.86rem;color:var(--asche);max-width:60ch}

.zeilen{margin-top:1.2rem;display:grid;gap:clamp(.7rem,1.4vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}

/* Kacheln statt Tresenliste: Bildfeld, Name, Text, Preisleiste.
   Gleiche Sprache wie auf der Bestellseite, damit der Sprung nicht auffaellt. */
.zeile-gericht{position:relative;display:flex;flex-direction:column;
  background-color:var(--nacht-tief);border:1px solid var(--linie);
  transition:border-color .28s var(--ease),transform .28s var(--ease)}
.zeile-gericht:hover{border-color:var(--linie-hart);transform:translateY(-2px)}
.gericht-feld{position:relative;aspect-ratio:16/10;overflow:hidden;background:
  radial-gradient(72% 78% at 50% 118%,rgba(237,48,46,.30),transparent 66%),
  linear-gradient(180deg,#0a0605,#050303)}
.gericht-zeichen{position:absolute;inset:0;display:grid;place-items:center;
  font-family:Kanit,sans-serif;font-weight:900;font-size:3.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,212,0,.22);
  transition:-webkit-text-stroke-color .3s var(--ease)}
.zeile-gericht:hover .gericht-zeichen{-webkit-text-stroke-color:rgba(255,212,0,.34)}
.gericht-koerper{padding:.9rem 1rem .4rem;flex:1;min-width:0}
.gericht-name{font-family:Kanit,sans-serif;font-weight:700;font-size:1rem;line-height:1.2;
  hyphens:auto;overflow-wrap:break-word}
.gericht-text{margin-top:.35rem;font-size:.8rem;color:var(--asche);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gericht-leiste{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.7rem 1rem 1rem;margin-top:auto}
.gericht-preis{font-variant-numeric:tabular-nums;font-family:Kanit,sans-serif;font-weight:900;
  color:var(--glut-hell);white-space:nowrap;font-size:1.05rem}
.dazu{width:2.3rem;height:2.3rem;display:grid;place-items:center;flex:0 0 auto;
  background-color:var(--glut);border:1px solid var(--glut);color:var(--nacht);
  font-family:Satoshi,system-ui,sans-serif;font-weight:700;font-size:1.15rem;line-height:1;
  transition:background-color .22s,border-color .22s}
.dazu:hover{background-color:var(--glut-hell);border-color:var(--glut-hell)}

.karte-fuss{margin-top:1.5rem;font-size:.82rem;color:var(--asche);max-width:60ch}

/* ============ Bestellen ============ */
.bestellen{padding:var(--takt) var(--pad);background:var(--rauch);
  border-top:1px solid var(--linie)}
.best-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:980px){
  /* stretch, sonst fällt das klebende Element aus der Spalte */
  .best-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:stretch}
}

.art{margin-bottom:2rem}
.art legend{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--asche);margin-bottom:.9rem}
.art-reihe{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
@media(min-width:600px){.art-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art-feld{position:relative;display:block;cursor:pointer}
.art-feld input{position:absolute;opacity:0;width:0;height:0}
.art-inhalt{display:block;border:1px solid var(--linie);padding:1rem 1.1rem;
  transition:border-color .22s,background-color .22s}
.art-inhalt b{display:block;font-family:Kanit,sans-serif;font-weight:900;
  text-transform:uppercase;font-size:.95rem;letter-spacing:-.01em}
.art-inhalt em{display:block;margin-top:.3rem;font-style:normal;font-size:.82rem;
  color:var(--asche)}
.art-feld input:checked + .art-inhalt{border-color:var(--glut);background-color:rgba(237,48,46,.07)}
.art-feld input:focus-visible + .art-inhalt{outline:2px solid var(--glut-hell);outline-offset:3px}

.waehler{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.w-gruppe{border-top:1px solid var(--linie)}
.w-kopf{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 0;text-align:left;
  font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.95rem;letter-spacing:-.01em;transition:color .22s}
.w-kopf:hover{color:var(--glut-hell)}
.w-kopf-anzahl{font-family:Satoshi,sans-serif;font-weight:700;font-size:.76rem;
  letter-spacing:.06em;color:var(--asche);font-variant-numeric:tabular-nums}
.w-liste{padding-bottom:1rem}
.w-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:.4rem .9rem;padding:.65rem 0;border-top:1px solid var(--linie)}
.w-name{min-width:0;font-size:.94rem;hyphens:auto;overflow-wrap:break-word}
.w-preis{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--papier-leise);
  white-space:nowrap}
.w-zaehler{display:flex;align-items:center;gap:.5rem}
.w-knopf{width:1.95rem;height:1.95rem;display:grid;place-items:center;
  border:1px solid var(--linie-hart);font-family:Satoshi,system-ui,sans-serif;
  font-weight:700;font-size:1.05rem;line-height:1;
  transition:background-color .2s,color .2s,border-color .2s}
.w-knopf:hover{background-color:var(--glut);border-color:var(--glut);color:var(--nacht)}
.w-menge{min-width:1.4rem;text-align:center;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:.92rem}

/* Die Tüte */
.tuete-spalte{position:relative}
.tuete-klebt{position:static}
@media(min-width:980px){.tuete-klebt{position:sticky;top:calc(var(--kopf-h) + 1.2rem)}}
.tuete{position:relative;width:min(11rem,42vw);margin:0 auto 1.6rem;aspect-ratio:.78}
.tuete-lasche{position:absolute;left:8%;right:8%;top:0;height:14%;
  background:linear-gradient(180deg,#4a382c,#33251d);
  clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.tuete-koerper{position:absolute;left:0;right:0;top:12%;bottom:0;overflow:hidden;
  background:linear-gradient(170deg,#5a4536 0%,#3d2e24 46%,#2a1f18 100%);
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);
  box-shadow:inset 0 8px 18px rgba(0,0,0,.4)}
.tuete-fuellung{position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(180deg,var(--glut-hell),var(--glut) 42%,var(--glut-tief));
  opacity:.85;transition:height .45s var(--ease)}
.tuete-marke{position:absolute;left:0;right:0;top:44%;text-align:center;
  font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.12em;color:rgba(246,240,232,.42);
  mix-blend-mode:overlay}

.korb{border:1px solid var(--linie);padding:1.3rem 1.2rem}
.korb-titel{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:1rem;letter-spacing:-.01em;margin-bottom:1rem}
.korb-liste{display:grid;gap:.6rem;margin-bottom:1rem}
.korb-zeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;
  align-items:baseline;font-size:.88rem}
.korb-menge{font-weight:700;color:var(--glut-hell);font-variant-numeric:tabular-nums}
.korb-name{min-width:0;overflow-wrap:break-word;hyphens:auto}
.korb-preis{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--papier-leise)}
.korb-leer{font-size:.86rem;color:var(--asche);margin-bottom:1rem}
.korb-summe{border-top:1px solid var(--linie);padding-top:.9rem;margin-bottom:1.1rem;
  display:grid;gap:.4rem}
.korb-summe>div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem}
.korb-summe dt{color:var(--papier-leise)}
.korb-summe dd{font-weight:700;font-variant-numeric:tabular-nums}
.korb-summe [data-mindest]{color:var(--glut)}

/* ============ Formular ============ */
.formular{margin-top:clamp(2.5rem,5vw,4rem);max-width:44rem}
.form-titel{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.014em;margin-bottom:1.3rem}
.form-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media(min-width:680px){.form-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feld{display:block}
.feld-breit{grid-column:1/-1}
.feld>span{display:block;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--asche);margin-bottom:.45rem}
.feld input,.feld textarea{width:100%;background:var(--nacht);border:1px solid var(--linie);
  padding:.8rem .9rem;transition:border-color .22s}
.feld input:focus,.feld textarea:focus{border-color:var(--glut);outline:none}
.feld textarea{resize:vertical;min-height:5rem}
.feld-honig{position:absolute;left:-9999px}     /* Honigtopf gegen Spam */

.zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin:1.4rem 0;
  font-size:.85rem;color:var(--papier-leise)}
.zustimmung input{margin-top:.22rem;accent-color:var(--glut);width:1rem;height:1rem;flex:0 0 auto}
.zustimmung a{color:var(--glut-hell);text-decoration:underline}
.form-notiz{margin-top:1rem;font-size:.82rem;color:var(--asche)}
.form-notiz a{color:var(--glut-hell)}
.form-danke{margin-top:1rem;padding:1rem 1.1rem;border:1px solid var(--glut);
  background:rgba(237,48,46,.08);font-size:.9rem}

/* ============ Finden ============ */
.finden{padding:var(--takt) var(--pad);border-top:1px solid var(--linie)}
.finden-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
@media(min-width:820px){.finden-raster{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem)}}
.finden-titel{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.85rem;letter-spacing:.08em;color:var(--glut);margin-bottom:.9rem}
.finden-text{font-size:1.05rem;line-height:1.7;margin-bottom:.9rem}
.finden-text a{border-bottom:1px solid var(--linie);transition:color .22s,border-color .22s}
.finden-text a:hover{color:var(--glut-hell);border-color:var(--glut)}
.finden-notiz{font-size:.82rem;color:var(--asche);margin-top:.8rem}
.zeiten{display:grid;gap:.55rem}
.zeiten>div{display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--linie);font-size:.92rem}
.zeiten dt{color:var(--papier-leise);min-width:0}
.zeiten dd{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============ Fuß ============ */
.fuss{padding:clamp(2.5rem,5vw,4rem) var(--pad);
  padding-bottom:calc(clamp(2.5rem,5vw,4rem) + 5rem);   /* Platz für den Balken */
  border-top:1px solid var(--linie);background:var(--nacht-tief);
  display:grid;gap:1.2rem}
@media(min-width:760px){.fuss{grid-template-columns:minmax(0,1fr) auto;align-items:center;
  padding-bottom:clamp(2.5rem,5vw,4rem)}
  .fuss-klein{grid-column:1/-1}}
.fuss-marke{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.005em}
.fuss-nav{display:flex;gap:1.4rem;font-size:.86rem;color:var(--papier-leise)}
.fuss-nav a{transition:color .22s}
.fuss-nav a:hover{color:var(--glut-hell)}
.fuss-klein{font-size:.8rem;color:var(--asche)}

/* ============ Klebender Balken (Telefon) ============ */
.balken{position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;align-items:center;gap:1rem;
  padding:.85rem var(--pad);background:rgba(13,9,8,.96);
  border-top:1px solid var(--linie-hart);backdrop-filter:blur(12px)}
.balken-text{flex:1;min-width:0;font-size:.84rem;color:var(--papier-leise);
  font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.balken.weg{display:none!important}
.balken-knopf{flex:0 0 auto;font-family:Kanit,sans-serif;font-weight:900;
  text-transform:uppercase;font-size:.8rem;padding:.7rem 1.1rem;
  background:var(--glut);color:var(--nacht)}

/* ============ Handy ============ */
@media(max-width:860px){
  .nav{display:none}
  .riegel{display:block}
  .kopf-tel-lang{display:none}
  .kopf-tel-kurz{display:inline}
}
@media(max-width:600px){
  .hero-typo{font-size:clamp(2.2rem,10.6vw,3.3rem)}
  .hero-tat .knopf{flex:1 1 auto}
  .spiess{height:460vh}
  .spiess-fest{align-content:center;gap:1.5rem}
  .spiess-buehne{height:34svh}
  .spiess-koerper{width:38vw;height:30svh}
  /* Am Telefon steht der Film hinter dem ganzen Text, nicht daneben. */
  .film-da .spiess-buehne{position:absolute;inset:0;height:100%;z-index:0;margin:0}
  .film-da .spiess-film{object-fit:cover;
    -webkit-mask-image:none;mask-image:none}
  /* Der Text sitzt am Telefon auf dem hellsten Teil des Spießes — der Schleier
     muss über die ganze Textzone tragen, nicht nur an den Rändern. */
  .film-da .spiess-schleier{background:linear-gradient(180deg,
    var(--nacht-tief) 0%, rgba(5,3,3,.55) 12%, rgba(5,3,3,.42) 24%,
    rgba(5,3,3,.74) 36%, rgba(5,3,3,.80) 72%, rgba(5,3,3,.94) 88%, var(--nacht-tief) 100%)}
  .film-da .takt-text{color:rgba(246,240,232,.86)}
  .film-da .spiess-oben{color:rgba(246,240,232,.6)}
  .film-da .spiess-text{position:relative;z-index:3}
  /* align-items MUSS stretch sein — bei flex-column schrumpft `center` die
     Textspalte auf ihre Inhaltsbreite (gemessen: 75 px statt 327 px). */
  .film-da .spiess-fest{display:flex;flex-direction:column;justify-content:center;
    align-items:stretch}
  .film-da .spiess-text{width:100%}
  .takte{min-height:14rem}
  .balken[data-sichtbar]{display:flex}
  .tuete{width:8rem}
}

/* ============ Weniger Bewegung ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important}
  .zeile{transform:none!important}
  .takt{position:relative;inset:auto;opacity:1!important;margin-bottom:2rem}
  .takte{min-height:0}
  .spiess{height:auto}
  .spiess-fest{position:relative;height:auto;padding-block:var(--takt)}
}

/* ================= Schalter: der Griff zur Bestellung =================
   Auf der Startseite steht kein Formular mehr — zwei große Flächen, die
   direkt in die Bestellseite führen. Am Telefon sind das zwei Daumenziele. */
.schalter{padding:var(--takt) var(--pad)}
.schalter-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;
  margin-top:clamp(1.6rem,3vw,2.4rem)}
@media(min-width:820px){.schalter-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}}
.schalt-weg{position:relative;display:grid;gap:.55rem;overflow:hidden;isolation:isolate;
  padding:clamp(1.5rem,3.4vw,2.6rem);border:1px solid var(--linie-hart);
  background-color:var(--nacht-tief);transition:border-color .3s var(--ease)}
.schalt-weg::before{content:'';position:absolute;left:-30%;right:-30%;bottom:-70%;height:130%;
  background:radial-gradient(58% 58% at 50% 100%,rgba(237,48,46,.32),transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);z-index:-1}
.schalt-weg:hover,.schalt-weg:focus-visible{border-color:var(--glut)}
.schalt-weg:hover::before,.schalt-weg:focus-visible::before{opacity:1}
.weg-nummer{font-family:Kanit,sans-serif;font-weight:900;font-size:.78rem;
  letter-spacing:.22em;color:var(--glut)}
.weg-kopf{font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.7rem,4.8vw,2.7rem);line-height:.98;letter-spacing:-.022em}
.weg-text{color:var(--papier-leise);font-size:.92rem;max-width:34ch}
.weg-fuss{display:inline-flex;align-items:center;gap:.6rem;margin-top:.4rem;
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--glut-hell)}
.schalt-weg:hover .pfeil{width:1.9rem}
.schalter-notiz{margin-top:1.4rem;font-size:.88rem;color:var(--asche)}
.schalter-notiz a{color:var(--glut-hell)}

/* ================= Griff: fester Balken am Telefon =================
   Bestellen darf nie mehr als einen Daumen weit weg sein — deshalb liegt
   Liefern / Abholen / Anruf dauerhaft am unteren Rand, nicht erst im Korb. */
.griff{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:1px;
  background-color:var(--linie-hart);padding-bottom:env(safe-area-inset-bottom)}
.griff-weg,.griff-tel{min-height:3.5rem;display:grid;place-items:center;
  font-family:Kanit,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.88rem;letter-spacing:.05em;background-color:var(--nacht-tief);color:var(--papier)}
.griff-weg{flex:1 1 0;min-width:0}
.griff-weg:first-child{background-color:var(--glut);color:var(--nacht)}
.griff-tel{flex:0 0 5.5rem;color:var(--glut-hell)}
@media(max-width:820px){
  .griff{display:flex}
  .fuss{padding-bottom:6rem}
}

/* Die Ziffer als Geisterfläche — gibt den beiden Wegen Tiefe, ohne Bild. */
.schalt-weg{min-height:clamp(11rem,21vw,15.5rem);align-content:center}
.schalt-weg::after{content:attr(data-nr);position:absolute;right:-.06em;bottom:-.34em;
  font-family:Kanit,sans-serif;font-weight:900;font-size:clamp(7rem,15vw,12rem);
  line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(246,240,232,.09);
  pointer-events:none;z-index:-1;transition:-webkit-text-stroke-color .4s var(--ease)}
.schalt-weg:hover::after,.schalt-weg:focus-visible::after{-webkit-text-stroke-color:rgba(237,48,46,.34)}
.griff-tel{font-size:.78rem;letter-spacing:.02em}

/* ---------- Hero am Telefon ----------
   Gemessen bei 375 px: zwischen Kopf und Schriftzug standen 340 px leer, weil
   der Hero den Text mit `margin-top:auto` nach unten drueckt. Am Telefon wird
   der Block stattdessen mittig gesetzt, und unten bleibt Platz fuer den Griff. */
@media(max-width:600px){
  .hero{min-height:92svh;justify-content:center;
    padding-top:calc(var(--kopf-h) + 1rem);
    padding-bottom:calc(var(--pad) + 4.4rem)}
  .hero-typo{margin-top:0}
  .hero-fuss{margin-top:1.5rem;padding-top:1.2rem}
  .claim{margin-top:1rem}
}

/* ---------- Wortmarke ----------
   BITEZZA als Vektor (Kanit 900 zu Pfaden, Goldverlauf wie im Logo des Kunden),
   damit es auf jedem Bildschirm scharf steht und nicht matscht.
   Krone + Zierstriche stecken mit drin; logo-marke.svg hat zusaetzlich die Tagline. */
.marke{font-size:0;line-height:0}
/* logo.png = Krone + zwei Zierstriche + Wortmarke, freigestellt (Alpha), wie auf
   dem Schild des Kunden. Die Hoehen sind so gewaehlt, dass der Schriftzug gleich
   gross bleibt wie vorher: er ist 138 von 207 Bildpunkten, also 1.75rem x 207/138. */
.marke-bild{height:2.63rem;width:auto;max-width:none}
@media(max-width:600px){.marke-bild{height:2.18rem}}
.fuss-marke{line-height:0}
.fuss-marke img{height:3.15rem;width:auto;max-width:100%}

/* Karte am Telefon: zwei Kacheln nebeneinander, kompaktere Innenmasse. */
@media(max-width:600px){
  .zeilen{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .gericht-koerper{padding:.65rem .7rem .3rem}
  .gericht-name{font-size:.88rem}
  .gericht-text{font-size:.73rem;-webkit-line-clamp:2}
  .gericht-leiste{padding:.45rem .7rem .7rem}
  .gericht-preis{font-size:.95rem}
  .gericht-zeichen{font-size:2.6rem}
}
.gericht-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gericht-bild.g-bild-v0{object-position:50% 50%}
.gericht-bild.g-bild-v1{transform:scaleX(-1);object-position:52% 48%}
.gericht-bild.g-bild-v2{object-position:44% 54%;scale:1.08}
.gericht-bild.g-bild-v3{transform:scaleX(-1);object-position:56% 44%;scale:1.06}