/* CENERE EXKLUSIV – ein gepinnter Film in fünf Akten um die 3D-Pizza. Ergänzt cenere.css. Alles Eigene beginnt mit ex-. */

.cn-ex{background:var(--kohle)}
.cn-ex .held-still{display:none}
.js.ohne-gl .ex-still{display:block;position:absolute;right:-8vw;top:50%;width:min(76vh,60vw);transform:translateY(-50%);z-index:0}

/* Kopf */
.ex-kopf{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--kopf-h);display:flex;align-items:center;gap:1.4rem;padding-inline:var(--seite)}
.ex-akt-name{margin-inline:auto;color:var(--asche)}
.ex-cta{margin-left:auto}

/* Strecke und Bühne */
.ex-spur{position:relative;height:640svh}
.ex-buehne{position:sticky;top:0;height:100svh;overflow:clip}
.ex-akte{position:absolute;inset:0;z-index:3}
.ex-akt{position:absolute;inset:0;display:grid;align-content:center;padding:calc(var(--kopf-h) + 1rem) var(--seite) 6rem;opacity:0;pointer-events:none;will-change:opacity}
.ex-akt[data-aktiv]{pointer-events:auto}
.ex-akt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(14,10,8,.88) 0,rgba(14,10,8,.5) 36%,rgba(14,10,8,0) 62%)}
.ex-akt.ex-rechts::before{background:linear-gradient(270deg,rgba(14,10,8,.88) 0,rgba(14,10,8,.5) 36%,rgba(14,10,8,0) 62%)}
.ex-k{display:flex;align-items:center;gap:.8rem;color:var(--asche)}
.ex-k b{color:var(--glut);font-weight:500}
.ex-akt h2{font-size:clamp(2.1rem,4.8vw,4.8rem);margin-top:1rem}
.ex-akt h2 i{color:var(--glut-hell);font-size:.82em;line-height:1.05}
.ex-akt .lead{margin-top:1.3rem;max-width:30rem;color:var(--mehl-2);font-size:1.12rem}
.ex-spalte{width:min(34rem,100%)}
.ex-rechts .ex-spalte{justify-self:end}
.ex-gross{font-size:clamp(3.4rem,10vw,10.5rem);line-height:.84;letter-spacing:-.05em;margin-top:1rem}
.ex-gross span,.ex-gross em{display:block}
/* Umriss ohne Innenlinien: Die variable Schrift hat überlappende Konturen, die -webkit-text-stroke als Linien nachzeichnet (E, T, G). Darum gefüllt zeichnen und per Filter nur den Rand stehen lassen (Füllung minus um 1,6 px geschrumpfte Füllung). */
.ex-filter{position:absolute;width:0;height:0;overflow:hidden}
.ex-gross span{color:var(--mehl);-webkit-text-stroke:0;filter:url(#ex-umriss)}
.ex-gross em{font:inherit;font-style:normal;text-transform:inherit;letter-spacing:inherit;background:linear-gradient(96deg,var(--glut-tief) 0,var(--glut) 40%,var(--glut-hell) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.ex-hinweis{margin-top:2.2rem;color:var(--asche)}
.ex-hinweis span{display:inline-block;margin-right:.6rem;animation:hin 1.8s ease-in-out infinite}
@keyframes hin{50%{transform:translateY(5px)}}

/* Akt I: Daten */
.cn-ex .daten{margin-top:1.8rem}
.cn-ex .daten dd{font-size:1.5rem}

/* Akt II: große Sekunden, Garstufe */
.ex-unten{align-content:end}
.ex-feuer{display:grid;gap:1rem}
.ex-zeit{position:absolute;left:calc(var(--seite) - .04em);top:calc(var(--kopf-h) + 2vh);display:flex;align-items:flex-start;font:800 min(21vw,33vh)/.8 var(--anz);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(255,106,31,calc(.25 + var(--exgar,0) * .6));font-variant-numeric:tabular-nums;user-select:none;pointer-events:none;width:1.4em;justify-content:flex-start}
.ex-zeit span{font-size:.18em;margin-left:.12em;margin-top:.12em;-webkit-text-stroke:0;color:var(--asche);letter-spacing:0}
.cn-ex .gar{justify-self:start;margin-top:1.6rem}

/* Akt III: Markierungen am Belag, Legende */
.ex-marken{position:absolute;inset:0;z-index:2;pointer-events:none}
.pin{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--mehl);background:rgba(14,10,8,.7);font:700 .8rem/1 var(--mono);color:var(--mehl);will-change:transform;transition:background .25s,border-color .25s,color .25s,scale .25s var(--ease)}
.pin::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(243,232,212,.5);animation:puls 2.4s ease-out infinite}
@keyframes puls{from{transform:scale(.7);opacity:1}to{transform:scale(1.5);opacity:0}}
.pin.an{background:var(--glut);border-color:var(--glut);color:var(--kohle);scale:1.25}
.legende{margin-top:1.6rem;display:grid;gap:0;counter-reset:l}
.legende li{position:relative;padding:1rem 0 1rem 3rem;border-top:1px solid var(--linie);counter-increment:l;cursor:default;outline-offset:2px}
.legende li:last-child{border-bottom:1px solid var(--linie)}
.legende li::before{content:counter(l);position:absolute;left:0;top:1rem;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--linie-2);font:700 .78rem/1 var(--mono);transition:background .25s,border-color .25s,color .25s}
.legende li.an::before,.legende li:hover::before,.legende li:focus-visible::before{background:var(--glut);border-color:var(--glut);color:var(--kohle)}
.legende b{display:block;font:800 1.3rem/1.1 var(--anz);text-transform:uppercase;letter-spacing:-.01em}
.legende span{display:block;margin-top:.3rem;color:var(--mehl-2);font-size:.98rem}

/* Akt IV: Reservierung */
.ex-breit{max-width:40rem;width:100%}
.ex-akt-form h2{font-size:clamp(1.9rem,3.8vw,3.6rem)}
.ex-res{margin-top:1.3rem;gap:1rem;padding:clamp(1.1rem,2.2vw,1.7rem)}
.ex-res .chip span{min-height:44px;padding:.3rem .7rem;min-width:58px}

/* Schiene */
.ex-rail{position:absolute;left:var(--seite);bottom:4.6rem;z-index:5;display:flex;gap:.35rem}
.ex-rail button{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:0 .8rem;background:rgba(14,10,8,.7);border:1px solid var(--linie-2);font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ex-rail button i{font-style:normal;font-family:var(--mono);color:var(--glut)}
.ex-rail button[aria-current]{background:var(--glut);border-color:var(--glut);color:var(--kohle)}
.ex-rail button[aria-current] i{color:var(--kohle)}
.ex-rail button:hover{border-color:var(--mehl)}

/* Ohne Fahrt (Weniger Bewegung): Akte sind Schritte */
body.ohne-fahrt .ex-spur{height:auto}
body.ohne-fahrt .ex-buehne{position:relative;height:100svh}
body.ohne-fahrt .ex-hinweis span{animation:none}
.pin::after{animation-play-state:running}
@media (prefers-reduced-motion:reduce){ html:not(.bewegung-an) .pin::after, html:not(.bewegung-an) .ex-hinweis span{animation:none} }

@media (max-width:860px){ .ex-zeit{left:auto;right:calc(var(--seite) - .04em);top:calc(var(--kopf-h) + 1vh);font-size:min(40vw,22vh);opacity:.8;justify-content:flex-end} }
@media (max-width:860px){
  .ex-akt{align-content:end;padding:calc(var(--kopf-h) + 1rem) var(--seite) 8.2rem}
  .ex-akt::before,.ex-akt.ex-rechts::before{background:linear-gradient(0deg,rgba(14,10,8,.95) 0,rgba(14,10,8,.82) 55%,rgba(14,10,8,0) 85%)}
  .ex-rechts .ex-spalte{justify-self:start}
  .ex-gross{font-size:clamp(3rem,15vw,5.4rem)}
  .ex-akt h2{font-size:clamp(1.9rem,8.6vw,2.9rem)}
  .ex-akt .lead{font-size:1rem;margin-top:.8rem}
  .ex-rail{left:0;right:0;bottom:3.4rem;justify-content:center;padding-inline:.5rem}
  .ex-rail button{padding:0 .55rem}
  .ex-rail button span{display:none}
  .ex-rail button[aria-current] span{display:inline}
  .ex-akt-name{display:none}
  .legende li{padding:.7rem 0 .7rem 2.7rem}
  .legende span{font-size:.9rem}
  .cn-ex .daten > div{grid-template-columns:6rem 1fr;padding:.6rem 0}
  .ex-res .felder{grid-template-columns:1fr 1fr}
  .ex-akt-form{align-content:end}
}
@media (max-width:860px) and (max-height:760px){ .ex-akt-form .res-summe{display:none} }
.eingebettet .fuss{padding-bottom:2.6rem}

/* ===== Nach dem Film: Kopf, Karte, Besuch, Fuß (alles mit ex-) ===== */
.ex-heute{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .95rem;border:1px solid var(--linie-2);background:rgba(14,10,8,.72);color:var(--mehl);font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:border-color .18s var(--ease),transform .14s var(--ease)}
.ex-heute i{width:.5rem;height:.5rem;border-radius:50%;background:var(--glut);box-shadow:0 0 .7rem var(--glut)}
@media (hover:hover) and (pointer:fine){ .ex-heute:hover{border-color:var(--mehl)} .ex-rail a:hover{border-color:var(--mehl)} .ex-karte-nav a:hover{background:var(--glut);border-color:var(--glut);color:var(--kohle)} .ex-gerichte li:hover h4{color:var(--glut)} }
.ex-heute:active,.ex-rail a:active,.ex-karte-nav a:active{transform:scale(.97)}
.ex-kopf{transition:background .25s var(--ease),border-color .25s var(--ease)}
.ex-kopf.ex-nach{background:rgba(14,10,8,.94);border-bottom:1px solid var(--linie)}
.ex-rail a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:0 .8rem;background:rgba(14,10,8,.7);border:1px solid var(--linie-2);font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mehl);text-decoration:none;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .14s var(--ease)}
.ex-rail a i{font-style:normal;font-family:var(--mono);color:var(--glut)}

.ex-sek{position:relative;z-index:4;background:var(--kohle);padding:clamp(4.5rem,11vw,9rem) var(--seite);box-shadow:0 -2.4rem 4rem -.6rem rgba(0,0,0,.7)}
.ex-sek::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--glut) 16%,var(--glut-hell) 50%,transparent 94%)}
.ex-sek h2{font-size:clamp(2.3rem,5.4vw,5.2rem);margin-top:1rem}
.ex-sek h2 i{color:var(--glut-hell);font-size:.82em;line-height:1.05}

/* Karte: die Pizza liegt von oben auf dem Holz, die Karte läuft daneben */
.ex-karte{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem clamp(2rem,6vw,6rem);align-items:start;overflow:clip;background:radial-gradient(60vmax 50vmax at 12% 22%,rgba(255,106,31,.1),transparent 62%),var(--kohle)}
.ex-karte-bild{position:sticky;top:calc(var(--kopf-h) + 2.5rem);align-self:start}
.ex-karte-bild img{width:100%;max-width:36rem;height:auto;aspect-ratio:1;object-fit:contain;transform:rotate(-9deg);filter:drop-shadow(0 .35rem .35rem rgba(0,0,0,.55)) drop-shadow(0 2.4rem 1.8rem rgba(0,0,0,.6))}
.ex-karte-in{min-width:0;max-width:44rem}
.ex-karte-hinweis{margin-top:1.1rem;color:var(--mehl-2);max-width:34rem}
.ex-karte-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.ex-karte-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--linie-2);color:var(--mehl);text-decoration:none;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .14s var(--ease)}
.ex-gruppe{margin-top:clamp(2.2rem,5vw,3.6rem);scroll-margin-top:calc(var(--kopf-h) + 1rem)}
.ex-gruppe h3{font-size:1.15rem;letter-spacing:.1em;color:var(--glut-hell);display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;padding-bottom:.9rem;border-bottom:1px solid var(--linie-2)}
.ex-gruppe h3 small{font:500 .74rem/1 var(--mono);letter-spacing:.14em;color:var(--asche);text-transform:uppercase}
.ex-gerichte li{position:relative;padding:1.15rem 0 1.2rem;border-bottom:1px solid var(--linie)}
.ex-g-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem}
.ex-gerichte h4{margin:0;font:800 clamp(1.45rem,2.6vw,2.15rem)/1.02 var(--anz);text-transform:uppercase;letter-spacing:-.03em;min-width:0;overflow-wrap:break-word;transition:color .2s var(--ease)}
.ex-g-p{flex:none;font:700 1.3rem/1.2 var(--anz);font-variant-numeric:tabular-nums;color:var(--mehl)}
.ex-gerichte p{margin-top:.4rem;color:var(--mehl-2);font-size:1rem;max-width:34rem}
.ex-tag{display:inline-block;margin-top:.6rem;padding:.28rem .6rem;border:1px solid var(--linie-2);color:var(--basil);font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.ex-mehr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem clamp(1.5rem,4vw,3rem)}
.ex-mehr h3{margin-bottom:.2rem}
.ex-kleinliste li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--linie);color:var(--mehl-2)}
.ex-kleinliste li span:last-child{flex:none;font-variant-numeric:tabular-nums;color:var(--mehl)}

/* Besuch: heute geöffnet, Zeiten, Ort */
.ex-besuch{background:linear-gradient(180deg,var(--kohle-2),var(--kohle) 60%)}
.ex-heute-zeile{margin-top:1.2rem;font:600 1.15rem/1.4 var(--fl);color:var(--glut-hell)}
.ex-besuch-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem clamp(2rem,6vw,6rem);margin-top:2.4rem;align-items:start}
.ex-zeiten{margin-top:0;max-width:none}
.ex-zeiten th,.ex-zeiten td{padding:.85rem 0;font-size:1.08rem}
.ex-klein{margin-top:1.2rem;color:var(--asche);font-size:.95rem;max-width:30rem}
.ex-adresse{font-style:normal;color:var(--mehl-2);font-size:1.15rem;line-height:1.55}
.ex-adresse b{display:block;margin-bottom:.35rem;color:var(--mehl);font:800 1.5rem/1.05 var(--anz);text-transform:uppercase;letter-spacing:-.02em}
.ex-adresse span{display:block;margin-top:.35rem;color:var(--asche);font-size:.92rem}
.ex-lage{margin:1.8rem 0 0}
.ex-lage svg{width:100%;height:auto;border:1px solid var(--linie);background:var(--kohle-3)}
.ex-lage figcaption{margin-top:.6rem;color:var(--asche)}
.lg-block rect{fill:var(--kohle-2);stroke:var(--linie);stroke-width:1}
.lg-platz rect{fill:rgba(155,184,104,.08);stroke:rgba(155,184,104,.45);stroke-width:1}
.lg-platz text,.lg-name{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--asche)}
.lg-str path{stroke:var(--linie-2);stroke-width:7;fill:none;stroke-linecap:square}
.lg-pin circle:first-child{fill:rgba(255,106,31,.2);stroke:var(--glut);stroke-width:1.5}
.lg-pin circle:last-child{fill:var(--glut)}
.lg-ort{font:800 15px/1 var(--anz);letter-spacing:.08em;fill:var(--mehl)}
.ex-tisch-knopf{margin-top:1.8rem}

/* Fuß */
.ex-fuss{position:relative;z-index:4;padding:clamp(3.5rem,8vw,6rem) var(--seite) 6.8rem;background:var(--kohle-2);border-top:1px solid var(--linie-2);overflow:clip}
.ex-fuss-marke{margin:0 0 clamp(1.6rem,4vw,3rem);font:800 clamp(4.2rem,19vw,17rem)/.8 var(--anz);letter-spacing:-.06em;text-transform:uppercase;background:linear-gradient(180deg,rgba(243,232,212,.16),rgba(243,232,212,.025) 88%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;white-space:nowrap}
.ex-fuss-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,4rem);max-width:78rem}
.ex-fuss-t{font:600 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--glut);margin:0 0 .9rem}
.ex-fuss-raster p{color:var(--mehl-2);font-size:1rem;line-height:1.7}
.ex-fuss-raster a{color:var(--mehl);text-underline-offset:.2em}
.ex-fuss-klein{color:var(--asche);font-size:.85rem}
.ex-fuss .quelle{margin-top:clamp(2rem,4vw,3rem);max-width:62rem;font:400 .8rem/1.55 var(--fl);color:var(--asche)}
.ex-fuss .quelle a{color:var(--mehl-2)}

@media (max-width:860px){
  .ex-heute{display:none}
  .ex-karte{grid-template-columns:1fr}
  .ex-karte-bild{position:static;justify-self:center;width:min(15rem,60vw)}
  .ex-karte-bild img{transform:rotate(-7deg)}
  .ex-mehr{grid-template-columns:1fr}
  .ex-besuch-raster{grid-template-columns:1fr}
  .ex-fuss-raster{grid-template-columns:1fr}
  .ex-rail a span{display:none}
  .ex-rail a{padding:0 .55rem}
  .ex-g-kopf{gap:.8rem}
  .ex-g-p{font-size:1.15rem}
}