/* CENERE – Holzofenpizza (fiktive Beispielseite von AV Website Solutions)
   Haltung: Ofenglut. Verkohltes Schwarzbraun, Mehlweiß, Glutorange, ein Hauch Basilikum. Bricolage Grotesque in Versalien (Umriss ↔ Vollton),
   Georgia-Kursiv als Gegenstimme. Hauptdarstellerin ist eine echte 3D-Pizza (WebGL, szene.js), nicht ein Foto in einer Karte.
   Kein Inline-Code, keine Fremdanfrage. */

@font-face{font-family:"Bricolage Grotesque";src:url("../../assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --kohle:#0e0a08; --kohle-2:#171009; --kohle-3:#21160e; --mehl:#f3e8d4; --mehl-2:#d6c8ad; --asche:#a39686;
  --glut:#ff6a1f; --glut-hell:#ffab55; --glut-tief:#c2410c; --basil:#9bb868;
  --linie:rgba(243,232,212,.16); --linie-2:rgba(243,232,212,.32);
  --anz:"Bricolage Grotesque","Arial Narrow",Impact,sans-serif; --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --fl:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif; --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --seite:clamp(1.15rem,4.4vw,4.2rem); --kopf-h:72px; --ease:cubic-bezier(.2,.75,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 8px);scroll-padding-bottom:5rem;background:var(--kohle);color-scheme:dark}
body{margin:0;font:400 1.0625rem/1.62 var(--fl);color:var(--mehl);background:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--anz);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;margin:0;text-wrap:balance;overflow-wrap:break-word}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
i{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.01em}
::selection{background:var(--glut);color:var(--kohle)}
:focus-visible{outline:2px solid var(--glut-hell);outline-offset:3px}
.mono{font:500 .72rem/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:-90px;z-index:200;background:var(--mehl);color:var(--kohle);padding:.8em 1.2em;font-weight:700;text-decoration:none}
.sprung:focus{top:12px}

/* ---------- Hintergrund: Ofenschein, Körnung, die 3D-Pizza darüber ---------- */
.hg{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(62vmax 52vmax at var(--gx,74%) var(--gy,52%),rgba(255,106,31,calc(.10 + var(--glut-w,0) * .26)),transparent 62%),
  radial-gradient(50vmax 34vmax at 8% 112%,rgba(255,106,31,calc(.09 + var(--glut-w,0) * .1)),transparent 70%),
  radial-gradient(90vmax 70vmax at 50% -20%,rgba(255,150,60,.05),transparent 60%),var(--kohle)}
.hg::after{content:"";position:absolute;inset:0;background:url("../../assets/korn.webp");opacity:.07;mix-blend-mode:overlay}
.szene{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
.html-still{display:none}
main,.fuss{position:relative;z-index:2}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:56px;padding:0 1.7rem;border:2px solid var(--mehl);background:none;color:var(--mehl);text-decoration:none;font:800 .95rem/1 var(--anz);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn::after{content:"→";font-family:var(--fl);font-weight:600;transition:transform .3s var(--ease)}
.btn:hover::after{transform:translateX(5px)}
.btn-glut{background:var(--glut);border-color:var(--glut);color:var(--kohle)}
.btn-glut:hover{background:var(--mehl);border-color:var(--mehl)}
.btn-klein{min-height:44px;padding:0 1.15rem;font-size:.8rem}
.btn-voll{width:100%}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--glut)}
.lnk:hover{color:var(--glut-hell)}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--kopf-h);transition:background .3s,box-shadow .3s}
.kopf-fest{background:rgba(14,10,8,.94);box-shadow:0 1px 0 var(--linie)}
.kopf-in{height:100%;display:flex;align-items:center;gap:1.4rem;padding-inline:var(--seite)}
.marke{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;min-height:44px}
.marke b{font:800 1.4rem/1 var(--anz);letter-spacing:.04em}
.marke-glut{width:.62rem;height:.62rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--glut-hell),var(--glut) 55%,var(--glut-tief));box-shadow:0 0 14px 2px rgba(255,106,31,.75);animation:atmen 2.6s ease-in-out infinite}
@keyframes atmen{50%{box-shadow:0 0 22px 5px rgba(255,106,31,.95)}}
.nav{margin-inline:auto}
.nav ul{display:flex;gap:.2rem}
.nav li a{display:flex;align-items:center;min-height:44px;padding:0 .95rem;text-decoration:none;font:700 .78rem/1 var(--anz);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.nav li a:hover,.nav li a[aria-current]{border-bottom-color:var(--glut)}
.nav-fuss{display:none}
.kopf-cta{margin-left:auto}
.nav-toggle{display:none}

/* ---------- Held ---------- */
.held{position:relative;min-height:max(740px,100svh);display:grid;align-content:center;padding:calc(var(--kopf-h) + 1.5rem) var(--seite) 8rem}
.held::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(14,10,8,.9) 0,rgba(14,10,8,.62) 34%,rgba(14,10,8,0) 62%)}
/* „90 SEKUNDEN“ ist bei der größten Schrift (9 rem) ca. 6,7 em breit = 970 px: ab ca. 1550 px Fensterbreite brach die Überschrift mit 52 rem in fünf bis sechs statt vier Zeilen (1920×1080!) */
.held-in{position:relative;z-index:2;max-width:min(66rem,60vw)}
.held-k{display:flex;align-items:center;gap:.8rem;color:var(--asche)}
.held-k b{color:var(--glut);font-weight:500}
.held-h{font-size:clamp(3.2rem,8vw,9rem);line-height:.86;letter-spacing:-.045em;margin-top:1.1rem}
.held-h span,.held-h em{display:block}
.held-h .z1,.held-h .z3{color:var(--mehl);-webkit-text-stroke:0;filter:url(#umriss) drop-shadow(0 0 .14em rgba(12,8,6,.9)) drop-shadow(0 0 .3em rgba(12,8,6,.55))}
/* Umriss ohne Innenlinien (17.10.2026): die variable Schrift hat überlappende Konturen, die -webkit-text-stroke als Linien nachzeichnet (E, T, G, D). Gefüllt zeichnen und per Filter (#umriss, Inline-SVG der Seite) nur den Rand stehen lassen; der dunkle Hof folgt als drop-shadow. */
.umriss-filter{position:absolute;width:0;height:0;overflow:hidden} /* dunkler Hof: die Umrissschrift bleibt lesbar, wo sie über den Pizzarand läuft (gesehen bei 1440×900) */
.held-h .z2{color:var(--mehl)}
.held-h em{font:inherit;text-transform:inherit;letter-spacing:inherit;font-style:normal}
.held-h .z4{background:linear-gradient(96deg,var(--glut-tief) 0,var(--glut) 38%,var(--glut-hell) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.held .lead{max-width:33rem;margin-top:1.7rem;font-size:clamp(1.05rem,1.4vw,1.28rem);color:var(--mehl-2);text-shadow:0 0 .55em rgba(12,8,6,.85)}
/* Tablet hochkant (861–1100 px breit, höher als breit): die Pizza liegt hinter Überschrift UND Fließtext – der Verlauf deckt deshalb weiter nach rechts (gesehen bei 1024×1366) */
@media (min-width:861px) and (max-width:1100px) and (max-aspect-ratio:1/1){
  .held::before{background:linear-gradient(90deg,rgba(14,10,8,.9) 0,rgba(14,10,8,.76) 44%,rgba(14,10,8,.3) 70%,rgba(14,10,8,0) 90%)}
}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.8rem;margin-top:2rem}
.held-leiste{position:absolute;z-index:2;left:var(--seite);right:var(--seite);bottom:2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:56rem;border-top:1px solid var(--linie-2)}
.held-leiste div{padding:1rem 1rem 0 0}
.held-leiste div + div{padding-left:1.4rem;border-left:1px solid var(--linie)}
.held-leiste dt{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--asche)}
.held-leiste dd{margin-top:.5rem;font:700 1.05rem/1.25 var(--anz);letter-spacing:.01em}
html.hat-demo-leiste .held-leiste{bottom:4.4rem}
@media (min-width:861px) and (max-width:1280px){ .held-leiste{max-width:min(56rem,46vw)} }   /* iPad quer (1024×768, 1180×820): die dritte Angabe „Ofen 485 °C“ lag über der Pizza (kontrast-pruefung 1,3 : 1) */
html.hat-demo-leiste .held{padding-bottom:10.5rem}
html.hat-demo-leiste .feuer-buehne{padding-bottom:5.6rem}
.held-still{position:absolute;right:-6vw;top:50%;width:min(72vh,56vw);height:auto;transform:translateY(-48%);z-index:0;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
/* Platzhalter bis die 3D-Pizza läuft (seit 05.10.2026). Vorher fehlte die Pizza am Start ganz: auf Mobilfunk 2–10 s lang war die rechte Hälfte leer. Das Standbild steht ab dem ersten Bild da,
   in Größe und Lage der 3D-Pose (gemessen bei 1366×768 bis 2560×1440: Höhe ≈ Bildschirmhöhe, linke Kante ≈ Breite − Höhe + 4,5 % der Höhe, Mitte ≈ 51 % der Höhe) und blendet aus, sobald die Szene läuft
   (html.pizza-da, gesetzt von cenere.js). Ohne WebGL (ohne-gl) bleibt es stehen. Nur die PREMIUM-Fassung (index.html); STARTER/EXKLUSIV haben eigene Regeln. */
html.js body.cn:not(.cn-ex):not(.cn-starter) .held-still{display:block;transition:opacity .7s ease,visibility 0s}
@media (min-width:861px){
  html.js:not(.ohne-gl) body.cn:not(.cn-ex):not(.cn-starter) .held-still{position:fixed;top:50%;right:auto;left:calc(100vw - min(100vh,84vw) * .955);width:min(100vh,84vw);transform:translateY(-53%)}
}
html.js.pizza-da:not(.ohne-gl) body.cn:not(.cn-ex):not(.cn-starter) .held-still{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
html.ohne-gl .held-still{display:block}
.noscript-still{display:block}

/* ---------- Sektionen ---------- */
.sek{position:relative;padding:clamp(5rem,12vw,10rem) var(--seite)}
.sek-k{display:flex;align-items:center;gap:1rem;color:var(--asche)}
.sek-k b{color:var(--glut);font-weight:500}
.sek-k::after{content:"";height:1px;width:3.2rem;background:var(--linie-2)}
.sek h2{font-size:clamp(2.3rem,5.4vw,5.4rem);margin-top:1.1rem}
.sek h2 i{color:var(--glut-hell);text-transform:none;font-size:.82em;letter-spacing:-.02em;line-height:1}

/* Teig: Text rechts, Pizza links (Seitenansicht) */
.teig{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 1.5rem;min-height:118svh;align-content:center}
.teig-in{grid-column:7/-1;position:relative;z-index:2}
.teig-text{margin-top:1.5rem;max-width:34rem;color:var(--mehl-2);font-size:1.1rem}
.daten{margin-top:2.2rem;max-width:36rem}
.daten > div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;align-items:baseline;padding:.95rem 0;border-top:1px solid var(--linie)}
.daten > div:last-child{border-bottom:1px solid var(--linie)}
.daten dt{font:500 .7rem/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--asche)}
.daten dd{font:700 1.2rem/1.25 var(--anz);letter-spacing:-.005em}
.daten dd small{display:block;margin-top:.2rem;font:400 .92rem/1.4 var(--fl);color:var(--asche);letter-spacing:0}

/* Feuer: gepinnte Strecke, große Sekundenzahl hinter der Pizza */
.feuer-spur{position:relative;height:250svh}
.feuer-buehne{position:sticky;top:0;height:100svh;overflow:clip;display:grid;align-items:end;padding:0 var(--seite) clamp(2.2rem,5vh,4rem)}
.feuer-zahl{position:absolute;left:calc(var(--seite) - .04em);top:41%;z-index:0;transform:translateY(-50%);font:800 min(46vw,74vh)/.78 var(--anz);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(255,106,31,calc(.2 + var(--gar,0) * .5));white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;user-select:none;width:1.25em;text-align:left}
.feuer-zahl small{position:absolute;left:.1em;top:-.07em;font:600 .05em/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;-webkit-text-stroke:0;color:var(--asche)}
.feuer-in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,34rem) 1fr;gap:2rem;align-items:end;width:100%}
.feuer-in h2{font-size:clamp(2rem,4.4vw,4.4rem);margin-top:.9rem}
.feuer-in h2 i{color:var(--glut-hell);font-size:.82em}
.feuer-in p.t{margin-top:1.1rem;max-width:32rem;color:var(--mehl-2)}
.gar{justify-self:end;width:min(100%,26rem);padding:1.2rem 0 0;border-top:1px solid var(--linie-2)}
.gar-z{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.gar-z output{font:800 2.2rem/1 var(--anz);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gar-z span{font:500 .68rem/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--asche)}
.gar-bahn{position:relative;height:3px;margin-top:.9rem;background:var(--linie)}
.gar-bahn i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--gar,0) * 100%);background:linear-gradient(90deg,var(--glut-tief),var(--glut-hell))}
.gar-bahn i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;transform:translateY(-50%);background:var(--glut-hell);box-shadow:0 0 14px 3px rgba(255,150,60,.8)}
.gar-stufen{display:flex;justify-content:space-between;margin-top:.7rem;font:500 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--asche)}
.gar-stufen span[aria-current]{color:var(--glut-hell)}

/* Karte: Liste links, Pizza rechts */
.karte-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem 3rem;max-width:min(47rem,100%)}
.filter{display:flex;flex-wrap:wrap;gap:.5rem}
.filter button{min-height:44px;padding:0 1.05rem;background:none;border:1.5px solid var(--linie-2);border-radius:99px;font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filter button:hover{border-color:var(--mehl)}
.filter button[aria-pressed="true"]{background:var(--mehl);border-color:var(--mehl);color:var(--kohle)}
.liste{margin-top:2.2rem;max-width:min(47rem,100%);position:relative;z-index:2}
.liste::before{content:"";position:absolute;inset:-2rem -10vw -2rem -4vw;z-index:-1;background:linear-gradient(90deg,rgba(14,10,8,.78) 0,rgba(14,10,8,.78) 62%,rgba(14,10,8,0) 100%);pointer-events:none}
.g{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;grid-template-areas:"nr n p" "nr z p";column-gap:1rem;align-items:baseline;padding:1.15rem 0;border-top:1px solid var(--linie);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.g:last-child{border-bottom:1px solid var(--linie)}
.g-nr{grid-area:nr;font:500 .72rem/1.9 var(--mono);letter-spacing:.14em;color:var(--asche)}
.g-n{grid-area:n;font-size:clamp(1.5rem,2.7vw,2.5rem);letter-spacing:-.03em;line-height:1;transition:color .25s,transform .3s var(--ease)}
.g-z{grid-area:z;margin-top:.45rem;color:var(--mehl-2);font-size:.98rem}
.g-p{grid-area:p;align-self:start;font:700 1.35rem/1.2 var(--anz);font-variant-numeric:tabular-nums;letter-spacing:0}
.g-p small{font:500 .7rem/1 var(--mono);letter-spacing:.1em;color:var(--asche);margin-left:.2rem}
.g:hover .g-n{color:var(--glut);transform:translateX(.45rem)}
.g.leise{opacity:.2;transform:none}
.g .tag{display:inline-block;margin-left:.6rem;padding:.2em .55em;border:1px solid var(--basil);border-radius:99px;color:var(--basil);font:500 .6rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;vertical-align:middle}
.liste-fuss{margin-top:1.4rem;color:var(--asche);font-size:.9rem}
.karte-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;margin-top:3rem;max-width:min(47rem,100%);position:relative;z-index:2}
.karte-2 h3{font-size:1.1rem;letter-spacing:.06em;color:var(--glut-hell);margin-bottom:.4rem}
.karte-2 li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px solid var(--linie);font-size:1rem}
.karte-2 li span:last-child{font-variant-numeric:tabular-nums;color:var(--mehl-2)}

/* Besuch: Reservierung (Demo) */
.besuch{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3rem 1.5rem;min-height:100svh;align-content:center}
.besuch-info{grid-column:1/6;position:relative;z-index:2}
.zeiten{margin-top:2rem;max-width:26rem;width:100%;border-collapse:collapse;font-size:1rem}
.zeiten th,.zeiten td{padding:.6rem 0;text-align:left;border-top:1px solid var(--linie);font-weight:500}
.zeiten td{text-align:right;color:var(--mehl-2);font-variant-numeric:tabular-nums}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:1px solid var(--linie)}
.zeiten tr.heute th,.zeiten tr.heute td{color:var(--glut-hell)}
.adresse{margin-top:1.8rem;font-style:normal;color:var(--mehl-2)}
.adresse span{color:var(--asche);font-size:.9rem}
.res{grid-column:7/-1;position:relative;z-index:2;display:grid;gap:1.4rem;padding:clamp(1.4rem,3vw,2.4rem);background:rgba(23,16,9,.92);border:1px solid var(--linie-2);align-content:start}
.res legend,.res .l{font:500 .7rem/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--asche);padding:0}
.res fieldset{border:0;margin:0;padding:0;min-width:0}
.res h3{font-size:1.5rem;letter-spacing:-.02em}
.personen{display:flex;align-items:center;gap:1rem;margin-top:.6rem}
.personen button{flex:none;width:48px;min-width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linie-2);background:none;font:600 1.5rem/1 var(--fl);cursor:pointer;transition:border-color .2s,background .2s}
.personen button:hover{border-color:var(--glut)}
.personen output{min-width:5.5rem;text-align:center;font:800 1.6rem/1 var(--anz);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.chip span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;min-height:50px;padding:.4rem .85rem;border:1.5px solid var(--linie-2);font:700 .86rem/1.15 var(--anz);letter-spacing:.03em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.chip span b{font:500 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--asche);margin-top:.15rem}
.chip input:hover + span{border-color:var(--mehl)}
.chip input:checked + span{background:var(--glut);border-color:var(--glut);color:var(--kohle)}
.chip input:checked + span b{color:rgba(14,10,8,.92)}
.chip input:disabled + span{opacity:.5;text-decoration:line-through;cursor:not-allowed}
.chip input:focus-visible + span{outline:2px solid var(--glut-hell);outline-offset:3px}
.feld label{display:block;font:500 .7rem/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--asche);margin-bottom:.45rem}
.feld input{width:100%;min-height:52px;padding:.7rem .9rem;background:var(--kohle);border:1.5px solid var(--linie-2);border-radius:0;color:var(--mehl);transition:border-color .2s}
.feld input:focus-visible{border-color:var(--glut-hell);outline:2px solid var(--glut-hell);outline-offset:2px}
.feld.fehlt input{border-color:#ff7d6a}
.fehler{min-height:0;margin-top:.4rem;color:#ff9a8a;font-size:.9rem}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.res-summe{font:600 1rem/1.4 var(--fl);color:var(--mehl-2);min-height:1.5em}
.res-summe.ok{color:var(--mehl)}
.demo-h{color:var(--asche)}
.form-ok{padding:1rem 1.2rem;border-left:3px solid var(--basil);background:rgba(155,184,104,.1)}
.form-ok b{display:block;margin-bottom:.2rem}

/* ---------- Fuß ---------- */
.fuss{padding:3rem var(--seite) 6.4rem;border-top:1px solid var(--linie);background:var(--kohle)}   /* unten Platz für die fest stehende Demo-Leiste, sonst verdeckt sie die letzten Verweise */
.fuss-in{display:grid;gap:.9rem;max-width:62rem}
.fuss-marke{font:500 1rem/1 var(--fl);color:var(--mehl-2)}
.fuss-marke b{font:800 1.4rem/1 var(--anz);letter-spacing:.04em;color:var(--mehl);margin-right:.5rem}
.fuss .mono{color:var(--asche);text-transform:none;letter-spacing:.04em;font-size:.78rem}
.fuss a{color:var(--mehl-2)}
.fuss .quelle{font:400 .8rem/1.55 var(--fl);color:var(--asche);letter-spacing:0}

/* ---------- Einblenden ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.da{opacity:1;transform:none}
.js .held-in > *{animation:rein 1.1s var(--ease) both}
.js .held-in > *:nth-child(2){animation-delay:.08s}.js .held-in > *:nth-child(3){animation-delay:.2s}.js .held-in > *:nth-child(4){animation-delay:.3s}
.js .held-leiste{animation:rein 1.1s .45s var(--ease) both}
@keyframes rein{from{opacity:0;transform:translateY(22px)}}

/* ---------- Handy und Tablet ---------- */
@media (max-width:980px){
  .teig-in{grid-column:1/-1}
  .besuch-info,.res{grid-column:1/-1}
  .feuer-in{grid-template-columns:1fr}
  .gar{justify-self:start}
}
@media (max-width:860px){
  :root{--kopf-h:64px}
  .nav{position:fixed;inset:var(--kopf-h) 0 0 0;margin:0;padding:1.5rem var(--seite) 2rem;background:var(--kohle);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility 0s .3s;overflow-y:auto}
  .nav ul{flex-direction:column;gap:0}
  .nav li a{min-height:64px;padding:0;font-size:1.7rem;letter-spacing:.04em;border-bottom:1px solid var(--linie)}
  .nav-fuss{display:block;margin-top:auto;padding-top:2rem;color:var(--asche)}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .9rem;margin-left:.2rem;background:none;border:1.5px solid var(--linie-2);font:700 .78rem/1 var(--anz);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .kopf-cta{display:none}
  body.nav-offen{overflow:hidden}
  .nav-offen .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-offen .kopf{background:var(--kohle)}
  .kopf-in{justify-content:space-between}
  .nav{margin-inline:0}

  /* oben bleibt die Zone der Pizza frei (Pose in cenere.js: mobKopf; Mitte = Leiste + 14 px + 0,37 · Durchmesser, Durchmesser = 0,84 · kürzere Bildseite) */
  .held{min-height:max(720px,100svh);align-content:end;padding:calc(var(--kopf-h) + 14px + min(100vw,100svh) * .63 + 1.1rem) var(--seite) 7.6rem}
  .held::before{background:linear-gradient(0deg,rgba(14,10,8,.94) 0,rgba(14,10,8,.82) 46%,rgba(14,10,8,0) 72%)}
  .held-in{max-width:100%}
  .held-h{font-size:clamp(2.3rem,11vw,4.4rem);line-height:.88}
  .held .lead{margin-top:.9rem;font-size:.98rem}
  .aktionen{margin-top:1.1rem;gap:.8rem 1.4rem}
  .held-leiste{grid-template-columns:repeat(3,auto);bottom:1.1rem;gap:0;max-width:none;justify-content:space-between}
  .held-leiste div{padding:.8rem .6rem 0 0}
  .held-leiste div + div{padding-left:.8rem}
  .held-leiste dd{font-size:.86rem}
  /* Rückfall ohne WebGL: dieselbe Zone wie die 3D-Pose. Das Bild ist quadratisch, die Pizza füllt 98 % der Breite und liegt bei 15–94 % der Höhe */
  .held-still{right:auto;left:50%;top:calc(var(--kopf-h) + 14px - min(100vw,100svh) * .128);width:calc(min(100vw,100svh) * .853);transform:translateX(-50%)}

  .sek{padding:4.5rem var(--seite)}
  .teig{min-height:0}
  .daten > div{grid-template-columns:6.4rem 1fr}
  .feuer-spur{height:230svh}
  .feuer-zahl{top:63%;left:auto;right:calc(var(--seite) - .06em);font-size:min(70vw,34vh);opacity:.7;text-align:right}
  .feuer-in::before{content:"";position:absolute;inset:-5rem calc(var(--seite) * -1) calc(clamp(2.2rem,5vh,4rem) * -1);z-index:-1;background:linear-gradient(0deg,rgba(14,10,8,.96) 72%,rgba(14,10,8,0));pointer-events:none}
  .feuer-in h2{font-size:clamp(1.9rem,8.4vw,2.8rem)}
  .feuer-in p.t{font-size:.98rem}
  .liste::before{inset:-1.4rem -4vw;background:rgba(14,10,8,.84)}
  .g{grid-template-columns:2.4rem minmax(0,1fr) auto}
  .karte-2{grid-template-columns:1fr}
  .besuch{min-height:0}
  .felder{grid-template-columns:1fr}
}
@media (max-width:420px){ .chip span{min-width:56px;padding:.4rem .6rem} .g-n{font-size:1.45rem} }
@media (prefers-reduced-motion:reduce){
  html:not(.bewegung-an){scroll-behavior:auto}
  html.js:not(.bewegung-an) .rv, html.js:not(.bewegung-an) .held-in > *, html.js:not(.bewegung-an) .held-leiste{opacity:1;transform:none;animation:none;transition:none}
  html:not(.bewegung-an) .marke-glut{animation:none}
}
.eingebettet .stufen,.eingebettet .demo-leiste{display:none!important}
.eingebettet .fuss{padding-bottom:2.6rem}

/* Weniger Bewegung: die Pizza steht im Kopf, scrollt mit der Seite weg und folgt nichts */
html.reduziert .szene{position:absolute;inset:0 0 auto 0;height:100svh}
html.reduziert .hg{position:absolute;height:100svh}