/* Quán 19, Startseite "Scroll-Bühne", Fassung 2 mit Texten und Effekten (08.10.2026)
   Ohne JavaScript und bei reduzierter Bewegung steht alles als normale Seite untereinander.
   Erst die Klasse .bewegt am <html> (setzt js/buehne.js) schaltet die Szenen ein. */

@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-vietnamese-wght-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

@property --glut{syntax:"<color>";inherits:true;initial-value:#a8581c}

:root{
  --lack:#170e0a;        /* Bühne, fast schwarzes Braun */
  --lack-hell:#2a1a13;
  --papier:#f3ebdc;      /* ruhige Abschnitte */
  --tinte:#20140f;
  --gold:#c9ad78;        /* aus dem Logo */
  --gold-hell:#e4cf9f;
  --rot:#a3241c;         /* nur Reservieren */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:clamp(1.25rem,5vw,5rem);
  --leiste-h:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--lack);color:var(--papier);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,p,ul,ol,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hell);outline-offset:4px;border-radius:4px}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{position:absolute;left:-999px;top:10px;z-index:100;background:var(--gold);color:var(--tinte);padding:.6rem 1rem;border-radius:999px}
.sprung:focus{left:10px}

/* Knöpfe: schmale Pillen. Die Linien-Variante trägt eine zweite, feine Linie außen. */
.knopf{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.5rem;border-radius:999px;border:1px solid transparent;font:600 .95rem/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.knopf-rot{background:var(--rot);color:#fff}
.knopf-rot:hover{background:#c02c22}
.knopf-linie{border-color:var(--gold);color:var(--gold-hell);box-shadow:0 0 0 3px var(--lack),0 0 0 4px rgb(201 173 120 / .4)}
.knopf-linie:hover{background:var(--gold);color:var(--tinte)}
.knopf-dunkel{background:var(--tinte);color:var(--papier)}
.knopf-dunkel:hover{background:#3a2419}
.knoepfe{display:flex;flex-wrap:wrap;gap:.9rem 1rem}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:1.5rem;padding:.7rem var(--rand);transition:background-color .3s,padding .3s}
.kopf.fest{background:rgb(23 14 10 / .86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kopf-logo{display:block;flex:none}
.kopf-logo img{width:86px;height:auto;transition:width .3s}
.kopf.fest .kopf-logo img{width:64px}
.kopf-nav{margin-left:auto;display:flex;gap:1.75rem;font-size:.95rem}
.kopf-nav a{text-decoration:none;padding:.5rem 0;border-bottom:1px solid transparent}
.kopf-nav a:hover{border-color:var(--gold)}
.kopf-knopf{min-height:42px;padding:.55rem 1.2rem}
.menue{all:unset;box-sizing:border-box;display:none;margin-left:auto;width:48px;height:48px;place-content:center;gap:7px;cursor:pointer;border-radius:50%}
.menue span:not(.nur-vorlesen){display:block;width:24px;height:1.5px;background:var(--papier);transition:transform .25s}
.kopf.offen .menue span:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
.kopf.offen .menue span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg)}
.menue:focus-visible{outline:2px solid var(--gold-hell);outline-offset:2px}

/* ---------- Szene Phở: Grundfassung ohne Bewegung ---------- */
.pho{position:relative;background:var(--lack);--tb:min(24rem,30vw);--d:min(72vh,46vw,calc(112vw - 2*var(--rand) - 2*var(--tb) - 2rem))}
.pho .buehne{position:relative;padding:7.5rem var(--rand) 4rem;display:grid;gap:2.5rem;justify-items:center;text-align:center;overflow:hidden}
.schein{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60vmax 60vmax at var(--sx,50%) var(--sy,62%),color-mix(in srgb,var(--glut) 44%,transparent),transparent 68%);transition:--glut .7s}
.name{position:relative;font:900 min(21vw,15rem)/.9 var(--serif);letter-spacing:-.02em;color:var(--papier)}
.gedeck{position:relative;width:var(--d);height:var(--d);max-width:80vw;max-height:80vw}
.teil{position:absolute;left:50%;top:50%}
.teil img{width:100%;height:auto;filter:drop-shadow(0 22px 28px rgb(0 0 0 / .5))}
.schale{width:100%;transform:translate(-50%,-50%)}
.beilage{width:46%;transform:translate(calc(-50% - var(--d)*.80),calc(-50% + var(--d)*.11))}
.zimt{width:35%;transform:translate(calc(-50% - var(--d)*.16),calc(-50% - var(--d)*.51))}
.kardamom{width:13%;transform:translate(calc(-50% + var(--d)*.17),calc(-50% - var(--d)*.53))}
.dampf{display:none}
.einstieg{position:relative;display:grid;gap:.9rem;justify-items:center}
.einstieg h1{font:500 clamp(1.5rem,2.3vw,2rem)/1.2 var(--serif);max-width:16ch;text-wrap:balance}
.ort{color:var(--gold-hell)}
.offen{display:flex;align-items:baseline;gap:.6rem;font-size:.95rem;color:rgb(243 235 220 / .85)}
.offen::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:#9a8f80;transform:translateY(-.05rem)}
.offen.auf::before{background:#7fc97a;box-shadow:0 0 0 4px rgb(127 201 122 / .2)}
.tel{font:600 1.05rem/1 var(--sans);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.2rem;justify-self:center}
.zerlegt{position:relative;display:grid;gap:.5rem}
.zerlegt h2{font:800 clamp(2.6rem,6.2vw,6rem)/1 var(--serif);letter-spacing:-.015em;margin-bottom:.6rem}
.zutaten li{font:500 clamp(1.35rem,2.5vw,2.4rem)/1.3 var(--serif);color:var(--gold-hell)}
.bruehe{margin-top:.8rem;max-width:30ch;color:rgb(243 235 220 / .8)}
.preis{font:500 clamp(1.5rem,2.2vw,2rem)/1.2 var(--serif);color:var(--gold)}
.quay{position:relative;max-width:22ch;color:rgb(243 235 220 / .85)}
.weiter{display:none}

/* ---------- Szene Drehteller: Grundfassung als Liste ---------- */
.karussell{position:relative;background:var(--lack)}
.teller{--glut:#c2551a;--n:8}
.drinks{--glut:#c98a1c;--n:3}
.karussell .schein{--sx:62%;--sy:58%;background:none}
.karussell .schein::before,.karussell .schein::after{content:"";position:absolute;inset:0;background:radial-gradient(58vmax 58vmax at var(--sx) var(--sy),color-mix(in srgb,var(--c) 60%,transparent),transparent 70%);transition:opacity .7s;will-change:opacity}
.karussell .schein::before{--c:var(--g1,var(--glut));opacity:var(--o1,1)}
.karussell .schein::after{--c:var(--g2,var(--glut));opacity:var(--o2,0)}
.karussell .buehne{position:relative;padding:5rem var(--rand) 5rem;overflow:hidden}
.tafel h2,.kochen-kopf{display:flex;align-items:center;gap:.8rem;font:500 1.35rem/1.2 var(--serif);color:var(--gold);margin-bottom:1.5rem}
.tafel h2::before,.kochen-kopf::before{content:"";flex:none;width:2.4rem;height:1px;background:var(--gold)}
.info,.steuer{display:none}
.ganze-karte{margin-bottom:2.5rem}
.rad,.reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:2.5rem 2rem}
.reihe{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.reihe .gericht img{aspect-ratio:1/1.7}
.gericht{all:unset;display:grid;gap:.35rem;width:100%;cursor:default}
.gericht img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:.6rem;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .5))}
.g-name{font:700 1.5rem/1.15 var(--serif)}
.g-text{font-size:.95rem;color:rgb(243 235 220 / .8)}
.g-preis{font:500 1.2rem/1.2 var(--serif);color:var(--gold)}

/* ---------- Der Gastraum: drei Fotos, die sich wie ein Fächer öffnen ---------- */
.raum{position:relative;background:var(--lack)}
.raum .buehne{padding:clamp(4rem,9vw,7rem) 0;display:grid;gap:2.5rem}
.raum-text{padding:0 var(--rand);display:grid;gap:1rem;max-width:34rem}
.raum-text h2{font:800 clamp(2.4rem,5vw,4.4rem)/1 var(--serif);letter-spacing:-.015em}
.raum-text p{color:rgb(243 235 220 / .88);max-width:30ch;font-size:1.1rem}
.faecher{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) 1rem;scrollbar-width:none}
.faecher::-webkit-scrollbar{display:none}
.faecher img{flex:none;width:min(74vw,22rem);aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center;border-radius:0 0 3rem 0}
/* ---------- Abholen und Liefern ---------- */
.liefern{position:relative;background:var(--lack-hell);padding:clamp(4rem,10vw,8rem) var(--rand);overflow:hidden}
.liefern-innen{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem 4rem;align-items:center}
.liefern h2{font:800 clamp(2.2rem,4.6vw,4rem)/1.02 var(--serif);letter-spacing:-.015em;margin-bottom:1rem;text-wrap:balance}
.liefern-text>p{max-width:40ch;color:rgb(243 235 220 / .85);margin-bottom:2rem}
.wege{border-bottom:1px solid rgb(201 173 120 / .3)}
.wege a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;flex-wrap:wrap;padding:1.05rem .25rem;border-top:1px solid rgb(201 173 120 / .3);text-decoration:none;transition:background-color .2s,padding .2s}
.wege a:hover{background:rgb(201 173 120 / .1);padding-left:.9rem;padding-right:.9rem}
.wege b{font:500 1.5rem/1.2 var(--serif)}
.wege span{color:var(--gold-hell);font-size:.95rem}
.liefern-bild{width:100%;filter:drop-shadow(0 30px 40px rgb(0 0 0 / .55))}
.bewegt .liefern-bild{transform:translateX(calc((1 - var(--f,1)) * 14vw)) rotate(calc((1 - var(--f,1)) * 50deg));will-change:transform}

/* ---------- Häufige Fragen ---------- */
.fragen{position:relative;background:var(--papier);color:var(--tinte);padding:clamp(4rem,9vw,7rem) var(--rand) 0}
.fragen-innen{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(14rem,.8fr) 1.6fr;gap:2rem clamp(2rem,6vw,6rem);align-items:start;padding-bottom:clamp(3rem,7vw,5.5rem);border-bottom:1px solid rgb(32 20 15 / .18)}
.fragen h2{font:800 clamp(2.2rem,4.4vw,3.8rem)/1 var(--serif);letter-spacing:-.015em}
.fragen details{border-top:1px solid rgb(32 20 15 / .18)}
.fragen details:last-child{border-bottom:1px solid rgb(32 20 15 / .18)}
.fragen summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.15rem 0;cursor:pointer;list-style:none;font:500 1.3rem/1.3 var(--serif)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--tinte),var(--tinte)) 50% 50%/100% 1.5px no-repeat,linear-gradient(var(--tinte),var(--tinte)) 50% 50%/1.5px 100% no-repeat;transition:transform .25s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 0 1.4rem;max-width:60ch}
.fragen a{text-decoration-color:var(--gold);text-underline-offset:.25em}
.fragen :focus-visible,.besuch :focus-visible{outline-color:var(--tinte)}
@media (max-width:820px){
  .fragen-innen{grid-template-columns:1fr}
  .fragen summary{font-size:1.15rem}
}
@media (max-width:1100px) and (min-width:821px){
  .besuch-innen{grid-template-columns:1fr 1fr}
  .besuch-karte{grid-column:1/-1;grid-row:2}
}

/* ---------- Besuch ---------- */
.besuch{background:var(--papier);color:var(--tinte);padding:clamp(4rem,10vw,8rem) var(--rand)}
.besuch-innen{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.15fr .8fr 1fr;gap:3rem clamp(2rem,4vw,4.5rem);align-items:start}
.besuch h2{font:800 clamp(2.8rem,5.6vw,5rem)/.95 var(--serif);letter-spacing:-.02em;margin-bottom:.8rem}
.besuch-ort>p{font-size:1.15rem}
.besuch-kontakt{margin:1.2rem 0 1rem;line-height:1.9}
.besuch-lage{max-width:34ch;margin-bottom:2rem}
.besuch-karte{margin:0;color:rgb(32 20 15 / .78);--karte-p:1}
.besuch-karte .karte{display:block;width:100%;max-width:24rem;height:auto;margin:0 auto}
.besuch-karte figcaption{font-size:.8rem;text-align:center;margin-top:.6rem;color:rgb(32 20 15 / .65)}
.besuch-kontakt a{text-decoration-color:var(--gold);text-underline-offset:.25em}
.besuch .knopf-rot{color:#fff}
.besuch .offen{color:var(--tinte)}
.offen-gross{font:500 1.5rem/1.3 var(--serif);margin-bottom:1.5rem}
.besuch table{width:100%;border-collapse:collapse}
.besuch th,.besuch td{padding:1rem 0;border-top:1px solid rgb(32 20 15 / .18);vertical-align:top;text-align:left;font-weight:400}
.besuch td{text-align:right;font-family:var(--serif);font-size:1.15rem;line-height:1.45}
.besuch tr.heute th{font-weight:600}
.besuch tr.heute th::after{content:"heute";margin-left:.7rem;padding:.15rem .55rem;border-radius:999px;background:var(--tinte);color:var(--papier);font-size:.75rem;font-weight:600}
.klein{font-size:.9rem;color:rgb(32 20 15 / .7);margin-top:1rem;border-top:1px solid rgb(32 20 15 / .18);padding-top:1rem}

/* ---------- Fuß ---------- */
.fuss{position:relative;background:var(--lack);padding:4rem var(--rand) calc(4rem + var(--leiste-h));display:grid;gap:1.2rem;justify-items:center;text-align:center;font-size:.95rem;color:rgb(243 235 220 / .8)}
.fuss img{width:110px}
.fuss nav{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:center}
.fuss a{text-underline-offset:.25em;text-decoration-color:rgb(201 173 120 / .6)}

/* Feste Leiste auf dem Handy */
.leiste{display:none}

/* =====================================================================
   Bewegte Fassung
   ===================================================================== */
.bewegt .pho{height:340vh}
.bewegt .pho .buehne{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:block;text-align:left}
.bewegt .name{position:absolute;inset:11vh 0 auto 0;text-align:center;font-size:min(21vw,36vh);will-change:transform,opacity}
.bewegt .name{animation:name-auf 1.35s .1s cubic-bezier(.2,.7,.2,1) backwards}
.bewegt .gedeck{position:absolute;left:44%;top:calc(100% - var(--d)*.86);margin-left:calc(var(--d)/-2);max-width:none;max-height:none;will-change:transform}
.bewegt .teil{will-change:transform}
.bewegt .schale img{animation:schale-rein 1.2s cubic-bezier(.2,.8,.2,1) both}
.bewegt .beilage img{animation:von-links 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
.bewegt .zimt img{animation:von-oben 1s .35s cubic-bezier(.2,.8,.2,1) both}
.bewegt .kardamom img{animation:von-oben 1s .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes auf{from{opacity:0;transform:translateY(3vh)}}
@keyframes schale-rein{from{opacity:0;transform:scale(.8) rotate(-40deg)}}
@keyframes von-links{from{opacity:0;transform:translateX(-45%) rotate(-14deg)}}
@keyframes von-oben{from{opacity:0;transform:translateY(-90%) rotate(40deg)}}

.bewegt .dampf{display:block;position:absolute;left:50%;top:50%;width:66%;height:84%;transform:translate(-50%,-100%);pointer-events:none}
.dampf i{position:absolute;bottom:0;left:calc(18% + var(--n)*22%);width:34%;aspect-ratio:1/2.2;border-radius:50%;background:radial-gradient(closest-side,rgb(255 250 240 / .16),transparent);filter:blur(10px);opacity:0}
.sicht .dampf i{animation:dampf 5.5s calc(var(--n)*1.6s + 1.6s) infinite ease-out}
.dampf i:nth-child(1){--n:0}.dampf i:nth-child(2){--n:1}.dampf i:nth-child(3){--n:2}
@keyframes dampf{0%{opacity:0;transform:translateY(20%) scaleX(.7)}25%{opacity:1}100%{opacity:0;transform:translateY(-70%) scaleX(1.5)}}

.bewegt .einstieg{position:absolute;right:var(--rand);bottom:9vh;width:var(--tb);justify-items:start;text-align:left;animation:auf .8s .7s both}
.bewegt .einstieg h1{max-width:none}
.bewegt .tel{justify-self:start}
.bewegt .zerlegt{position:absolute;right:var(--rand);top:50%;width:min(26rem,27vw);transform:translateY(-46%)}
.bewegt .zerlegt h2{font-size:clamp(2.6rem,5.2vw,5.2rem)}
.bewegt .zerlegt>*,.bewegt .zutaten li,.bewegt .quay{opacity:0;transform:translateY(1.2rem);transition:opacity .45s,transform .45s}
.bewegt .zerlegt .da,.bewegt .zutaten li.da,.bewegt .quay.da{opacity:1;transform:none}
.bewegt .zerlegt .zutaten{opacity:1;transform:none}
.bewegt .quay{position:absolute;left:var(--rand);bottom:3.2vh;max-width:none}

.bewegt .teller{height:calc(100vh + var(--n) * 62vh);--d:min(46vh,34vw);--R:min(66vh,52vw)}
.bewegt .drinks{height:calc(100vh + var(--n) * 62vh);--w:30vh;--g:8vw}
.bewegt .karussell .buehne{position:sticky;top:0;height:100vh;height:100svh;padding:0}
.bewegt .tafel{position:absolute;z-index:2;left:var(--rand);top:17vh;width:min(27rem,30vw)}
.bewegt .info{display:grid;gap:.9rem;min-height:15.5rem;align-content:start;transition:opacity .16s}
.bewegt .info.wechsel{opacity:0}
.info-name{font:800 clamp(2.4rem,4.4vw,4.4rem)/1 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.info-text{color:rgb(243 235 220 / .88);max-width:32ch;font-size:1.08rem;line-height:1.55}
.info-preis{font:500 1.8rem/1 var(--serif);color:var(--gold-hell)}
.bewegt .steuer{display:flex;align-items:center;gap:1rem;margin:1.6rem 0 1.4rem}
.rund{all:unset;box-sizing:border-box;width:50px;height:50px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;cursor:pointer;transition:background-color .2s}
.rund:hover{background:rgb(201 173 120 / .18)}
.rund:focus-visible{outline:2px solid var(--gold-hell);outline-offset:4px}
.rund svg{width:22px;height:22px;fill:none;stroke:var(--gold-hell);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zaehler{font:500 1rem/1 var(--serif);color:rgb(243 235 220 / .75);min-width:4.5rem;text-align:center}
.zaehler b{font-weight:700;color:var(--papier)}
.bewegt .ganze-karte{margin:0}
.bewegt .rad{display:block;position:absolute;left:62%;top:calc(57vh + var(--R));width:0;height:0;transform:rotate(calc(var(--lage,0) * -360deg / var(--n)));will-change:transform}
.bewegt .rad li{position:absolute;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);transform:rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--R)*-1))}
.bewegt .gericht{display:block;width:100%;height:100%;cursor:pointer;border-radius:50%}
.bewegt .gericht img{width:100%;height:100%;margin:0;aspect-ratio:auto;transform:scale(.72);opacity:.42;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s;filter:drop-shadow(0 26px 34px rgb(0 0 0 / .55))}
.bewegt li.aktiv .gericht{cursor:default}
.bewegt li.aktiv .gericht img{transform:scale(1.16);opacity:1}
.bewegt .reihe{display:flex;gap:var(--g);position:absolute;left:62%;top:55vh;transform:translate(calc(var(--w) / -2 - var(--lage,0) * (var(--w) + var(--g))),-50%);will-change:transform}
.bewegt .reihe li{flex:none;width:var(--w);height:62vh}
.bewegt .reihe .gericht{border-radius:0}
.bewegt .reihe .gericht img{aspect-ratio:auto;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
.bewegt .drinks .schein{--sy:55%}
.bewegt .g-name,.bewegt .g-text,.bewegt .g-preis{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Handy und schmale Fenster ---------- */
@media (max-width:820px){
  :root{--leiste-h:64px}
  .kopf{padding:.55rem var(--rand)}
  .kopf-nav{display:none}
  .kopf-knopf{margin-left:auto;display:none}
  .kopf-logo img{width:70px}
  .pho{--d:min(78vw,46svh)}
  .besuch-innen{grid-template-columns:1fr}
  .menue{display:grid}
  .kopf.offen{background:rgb(23 14 10 / .97)}
  .kopf.offen .kopf-nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:.25rem var(--rand) 1.25rem;background:rgb(23 14 10 / .97);border-bottom:1px solid rgb(201 173 120 / .25)}
  .kopf.offen .kopf-nav a{padding:.95rem 0;border-bottom:1px solid rgb(201 173 120 / .18);font:500 1.3rem/1.2 var(--serif)}
  .faecher img{width:74vw}
  .liefern-innen{grid-template-columns:1fr}
  .liefern-bild{max-width:70vw;justify-self:center;order:-1}
  .leiste{position:fixed;inset:auto 0 0 0;z-index:45;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:.5rem;padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));background:rgb(23 14 10 / .94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgb(201 173 120 / .25)}
  .leiste a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;border:1px solid rgb(201 173 120 / .45);font:600 .95rem/1 var(--sans);text-decoration:none}
  .leiste .leiste-haupt{background:var(--rot);border-color:var(--rot);color:#fff}

  .bewegt .pho{height:330vh}
  .bewegt .name{inset:10svh 0 auto 0;font-size:24vw}
  .bewegt .gedeck{left:57%;top:24svh}
  .bewegt .einstieg{left:var(--rand);right:var(--rand);bottom:calc(var(--leiste-h) + 3.2svh);width:auto;gap:.55rem}
  .bewegt .einstieg h1{font-size:1.4rem;max-width:15ch}
  .bewegt .einstieg .knopf-rot,.bewegt .einstieg .tel{display:none}
  .bewegt .einstieg .knopf{min-height:44px;padding:.55rem 1.2rem}
  .bewegt .zerlegt{left:var(--rand);right:var(--rand);top:auto;bottom:calc(var(--leiste-h) + 4svh);width:auto;transform:none;gap:.15rem}
  .bewegt .zerlegt h2{font-size:2.5rem;margin-bottom:.3rem}
  .bewegt .zutaten li{font-size:1.25rem;line-height:1.28}
  .bewegt .bruehe{margin-top:.4rem;font-size:.92rem}
  .bewegt .preis{font-size:1.4rem}
  .bewegt .quay{left:auto;right:var(--rand);bottom:auto;top:46svh;max-width:17ch;font-size:.88rem;text-align:right}

  .bewegt .teller{height:calc(100vh + var(--n) * 56vh);--d:62vw;--R:84vw}
  .bewegt .drinks{height:calc(100vh + var(--n) * 56vh);--w:42vw;--g:12vw}
  .bewegt .reihe{left:50%;top:auto;bottom:calc(var(--leiste-h) + 9svh);transform:translate(calc(var(--w) / -2 - var(--lage,0) * (var(--w) + var(--g))),0)}
  .bewegt .reihe li{height:44svh}
  .bewegt .drinks .schein{--sx:50%;--sy:66%}
  .bewegt .tafel{left:var(--rand);right:var(--rand);top:calc(64px + 2.5svh);width:auto}
  .tafel h2{font-size:1.1rem;margin-bottom:.7rem}
  .bewegt .info{min-height:0;gap:.5rem}
  .info-name{font-size:2.15rem}
  .info-text{font-size:.92rem;line-height:1.45;max-width:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .info-preis{font-size:1.45rem}
  .bewegt .steuer{position:fixed;left:0;right:0;bottom:calc(var(--leiste-h) + 1.6svh);justify-content:center;margin:0;opacity:0;pointer-events:none;transition:opacity .25s}
  .bewegt .karussell.mitte .steuer{opacity:1;pointer-events:auto}
  .rund{width:46px;height:46px;background:rgb(23 14 10 / .6)}
  .bewegt .ganze-karte{display:none}
  .bewegt .rad{left:50%;top:calc(63svh + var(--R))}
  .karussell .schein{--sx:50%;--sy:63%}
}

@media (max-width:820px) and (max-height:720px){
  .bewegt .einstieg h1{font-size:1.2rem;max-width:none}
  .bewegt .einstieg .ort{display:none}
  .bewegt .zerlegt h2{font-size:2rem}
  .bewegt .zutaten li{font-size:1.1rem}
  .info-name{font-size:1.8rem}
}

@media (min-width:821px) and (max-height:700px){
  .bewegt .tafel{top:15vh}
  .info-name{font-size:clamp(2rem,3.6vw,3.2rem)}
  .bewegt .info{min-height:12rem}
}

/* =====================================================================
   Fassung 2: Ornament, Dampf, Zutaten, Laternen, Laufband, Übergänge
   Alles Schmuck. Ohne .bewegt bleibt davon nur stehen, was ruhig ist.
   ===================================================================== */

/* Feine Körnung über allem, damit das Dunkel nicht leer wirkt */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;background:url(../bilder/buehne/korn.png);opacity:.13}

/* ---------- Ornament: Trommel aus Đông Sơn (werkzeug/trommel.py) ---------- */
.trommel{display:none;max-width:none;pointer-events:none;user-select:none}
.bewegt .trommel{display:block}
/* Im Einstieg liegt das Ornament hinter dem Gedeck und wandert mit (js setzt --gx, --gy, --gs) */
.trommel-ort,.blende{display:none}
.bewegt .trommel-ort{display:block;position:absolute;left:44%;top:calc(100% - var(--d) * .36);width:calc(var(--d) * 2.12);aspect-ratio:1;transform:translate(-50%,-50%) translate(var(--gx,0px),var(--gy,0px)) scale(var(--gs,1));pointer-events:none;will-change:transform}
.bewegt .trommel-start{width:100%;height:auto;opacity:.17}
.bewegt .sicht .trommel-start{animation:kreisen 260s linear infinite}
@keyframes kreisen{to{transform:rotate(360deg)}}
/* Blende: Licht und Ornament laufen an den Rändern einer Szene ins Dunkel aus, keine harte Kante beim Weiterscrollen */
.bewegt .blende{display:block;position:absolute;left:0;right:0;bottom:0;height:28vh;background:linear-gradient(rgb(23 14 10 / 0),var(--lack));pointer-events:none}
.bewegt .karussell .blende{top:0;height:auto;background:linear-gradient(var(--lack),rgb(23 14 10 / 0) 15%,rgb(23 14 10 / 0) 80%,var(--lack))}
.borduere{height:28px;background:url(../bilder/buehne/borduere.svg) 50% 50%/96px 28px repeat-x;opacity:.5;-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.liefern>.borduere{position:absolute;left:0;right:0;top:1.2rem}

/* ---------- Einstieg: Dampf gibt den Namen frei ---------- */
.wolke{display:none}
.bewegt .wolke{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.wolke i{position:absolute;width:52vmax;height:52vmax;border-radius:50%;background:radial-gradient(closest-side,rgb(255 248 235 / .5),rgb(255 248 235 / .17) 46%,transparent 72%);opacity:0;animation:wolke 1.5s cubic-bezier(.3,.6,.3,1) both}
.wolke i:nth-child(1){left:-6vmax;top:8vh}
.wolke i:nth-child(2){left:22vmax;top:-4vh;animation-delay:.08s}
.wolke i:nth-child(3){left:50vmax;top:10vh;animation-delay:.16s}
.wolke i:nth-child(4){left:12vmax;top:26vh;animation-delay:.05s;width:44vmax;height:44vmax}
.wolke i:nth-child(5){left:40vmax;top:22vh;animation-delay:.2s;width:40vmax;height:40vmax}
@keyframes wolke{0%{opacity:0;transform:translateY(24vh) scale(.6)}28%{opacity:1}100%{opacity:0;transform:translateY(-40vh) scale(1.5)}}
@keyframes name-auf{0%{opacity:0;filter:blur(20px);transform:translateY(5vh) scale(1.05)}55%{opacity:1}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes von-oben{0%{opacity:0;transform:translateY(-190%) rotate(70deg)}70%{opacity:1;transform:translateY(6%) rotate(-4deg)}100%{transform:none}}
.faeden{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.faeden path{stroke:rgb(255 248 235 / .55);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:80 420;stroke-dashoffset:80;opacity:0}
.sicht .faeden path{animation:faden 6.4s 1.4s linear infinite}
.sicht .faeden path:nth-child(2){animation-duration:7.6s;animation-delay:2.3s}
.sicht .faeden path:nth-child(3){animation-duration:5.8s;animation-delay:3.4s}
.sicht .faeden path:nth-child(4){animation-duration:8.2s;animation-delay:1.9s}
.sicht .faeden path:nth-child(5){animation-duration:6.9s;animation-delay:4.2s}
@keyframes faden{0%{stroke-dashoffset:80;opacity:0}14%{opacity:.9}65%{opacity:.5}100%{stroke-dashoffset:-340;opacity:0}}
.ort{max-width:26ch}
.offen.auf::before{animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgb(127 201 122 / .5)}100%{box-shadow:0 0 0 10px rgb(127 201 122 / 0)}}

/* Stäbchen statt Mauszeiger über der Schale */
.staebchen{position:fixed;left:0;top:0;z-index:70;width:92px;height:92px;margin:-9px 0 0 -9px;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
.staebchen.an{opacity:1}
.staebchen svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 6px rgb(0 0 0 / .45))}
.staebchen g{transform-origin:80% 80%;transition:transform .14s}
.staebchen.zu .s1{transform:rotate(6deg)}
.staebchen.zu .s2{transform:rotate(-6deg)}
.gedeck.stab{cursor:none}

/* ---------- So kochen wir: Grundfassung als Liste ---------- */
.kochen{position:relative;background:var(--lack);padding:clamp(4rem,9vw,7rem) var(--rand)}
.flug,.kochen-zahl{display:none}
.saetze{display:grid;gap:2.2rem;counter-reset:satz}
.saetze li{counter-increment:satz;max-width:24ch;padding-top:1.4rem;border-top:1px solid rgb(201 173 120 / .3);font:700 clamp(1.7rem,4vw,2.9rem)/1.12 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.saetze li::before{content:"0" counter(satz);display:block;margin-bottom:.7rem;font:500 1rem/1 var(--serif);letter-spacing:.08em;color:var(--gold)}
.saetze em{font-style:normal;color:var(--gold-hell)}
.saetze .knopf{margin-top:1.6rem;letter-spacing:0}

.bewegt .kochen{height:calc(100vh + 5 * 80vh);padding:0}
.bewegt .kochen .buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.bewegt .flug{display:block;position:absolute;inset:0;container-type:size;pointer-events:none}
.bewegt .stueck,.bewegt .wort,.bewegt .schwaden,.bewegt .dunst{position:absolute;left:0;top:0;opacity:var(--o,0)}
.bewegt .sicht .stueck,.bewegt .sicht .wort,.bewegt .sicht .saetze li{will-change:transform,opacity}
/* --t läuft von 1 (kommt) über 0 (da) nach -1 (geht). --dx/--dy ist der Weg herein, --ax/--ay der Weg hinaus, falls er abweicht. */
.bewegt .stueck{width:var(--b);transform:translate(calc(var(--x) + var(--dx) * max(var(--t,1),0) + var(--ax,var(--dx)) * min(var(--t,1),0)),calc(var(--y) + var(--dy) * max(var(--t,1),0) + var(--ay,var(--dy)) * min(var(--t,1),0))) translate(-50%,-50%) rotate(calc(var(--r0) + var(--r) * var(--t,1)))}
.stueck img{width:100%;height:auto;filter:drop-shadow(0 22px 28px rgb(0 0 0 / .5))}
.stueck.zutat img{filter:drop-shadow(0 10px 12px rgb(0 0 0 / .45))}
.rund-ornament .trommel{width:100%;height:auto;opacity:.55;filter:none}
.bewegt .schwaden{left:57cqw;top:-4cqh;width:40cqw;height:52cqh}
.schwaden path{stroke:rgb(255 248 235 / .5);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-dasharray:130 900;stroke-dashoffset:130;opacity:0}
.sicht .schwaden path{animation:schwade 7s linear infinite}
.sicht .schwaden path:nth-child(2){animation-duration:8.4s;animation-delay:-2s}
.sicht .schwaden path:nth-child(3){animation-duration:6.2s;animation-delay:-4s}
.sicht .schwaden path:nth-child(4){animation-duration:9s;animation-delay:-1s}
.sicht .schwaden path:nth-child(5){animation-duration:7.6s;animation-delay:-5s}
.sicht .schwaden path:nth-child(6){animation-duration:6.6s;animation-delay:-3s}
.sicht .schwaden path:nth-child(7){animation-duration:8.8s;animation-delay:-6.5s}
@keyframes schwade{0%{stroke-dashoffset:130;opacity:0}15%{opacity:1}70%{opacity:.6}100%{stroke-dashoffset:-700;opacity:0}}
.bewegt .dunst{left:58cqw;top:6cqh;width:36cqw;height:56cqh}
.dunst i{position:absolute;bottom:0;left:calc(8% + var(--n) * 26%);width:38%;aspect-ratio:1/2;border-radius:50%;background:radial-gradient(closest-side,rgb(255 250 240 / .17),rgb(255 250 240 / .07) 52%,rgb(255 250 240 / 0) 100%);opacity:0}
.dunst i:nth-child(1){--n:0}.dunst i:nth-child(2){--n:1}.dunst i:nth-child(3){--n:2}
.sicht .dunst i{animation:dampf 6s calc(var(--n) * -2s) infinite ease-out}
.bewegt .wort{display:grid;justify-items:center;gap:.5rem;margin:0;transform:translate(calc(var(--x) + var(--dx) * var(--t,1)),calc(var(--y) + var(--dy) * var(--t,1))) translate(-50%,-50%) scale(var(--g))}
.wort b{font:900 clamp(3.2rem,9cqw,9.5rem)/.9 var(--serif);letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.3px var(--gold)}
.wort span{font:600 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hell)}
.bewegt .kochen-kopf{position:absolute;z-index:2;left:var(--rand);top:17vh;margin:0}
.bewegt .saetze{display:block;position:absolute;z-index:2;left:var(--rand);top:53%;width:min(47vw,43rem)}
.bewegt .saetze li{position:absolute;left:0;top:0;width:100%;max-width:none;padding:0;border:0;font-weight:800;font-size:clamp(2.3rem,4.9vw,5.2rem);line-height:1.03;opacity:var(--o,0);transform:translateY(calc(-50% + var(--t,1) * 18vh))}
.bewegt .saetze li.lang{font-size:clamp(1.9rem,3.5vw,3.7rem);line-height:1.08}
.bewegt .saetze li::before{margin-bottom:1.2rem;font-size:1.1rem}
.bewegt .saetze li:not(.aktiv){pointer-events:none}
.bewegt .kochen-zahl{display:block;position:absolute;z-index:2;left:var(--rand);bottom:6vh;font:500 1rem/1 var(--serif);color:rgb(243 235 220 / .7)}
.kochen-zahl b{font-weight:700;color:var(--papier)}

/* ---------- Laufband ---------- */
.laufband{position:relative;background:var(--lack);padding:1.4rem 0;overflow:hidden}
.spur{display:flex;align-items:center;width:max-content;padding:.5rem 0}
.spur.rueck{transform:translateX(-50%)}
.laufband.sicht .spur{animation:laufen 70s linear infinite}
.laufband.sicht .spur.rueck{animation-direction:reverse;animation-duration:90s}
.laufband:hover .spur,.laufband:active .spur{animation-play-state:paused}
.spur span{flex:none;padding:0 .4em;font:900 clamp(2.6rem,7vw,6.4rem)/1.05 var(--serif);white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--gold)}
.spur.rueck span{font-weight:500;font-size:clamp(1.5rem,3.2vw,2.9rem);color:rgb(243 235 220 / .9);-webkit-text-stroke:0}
.spur i{flex:none;width:.8rem;height:.8rem;border-radius:50%;border:1px solid var(--gold);background:radial-gradient(circle,var(--gold) 0 28%,transparent 32%)}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Drehteller: Ornament dreht mit, Lichtkegel, große Zahl ---------- */
.kegel,.gross-nr{display:none}
.bewegt .trommel-rad{position:absolute;left:62%;top:calc(57vh + var(--R));width:calc(2 * (var(--R) + var(--d) * .82));height:auto;opacity:.2;transform:translate(-50%,-50%) rotate(calc(var(--lage,0) * -360deg / var(--n)))}
.bewegt .sicht .trommel-rad{will-change:transform}
.bewegt .kegel{display:block;position:absolute;left:62%;top:0;width:min(74vh,54vw);height:58vh;transform:translateX(-50%);background:linear-gradient(rgb(255 236 200 / .13),rgb(255 236 200 / 0) 94%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);-webkit-mask:linear-gradient(90deg,transparent 4%,#000 38%,#000 62%,transparent 96%);mask:linear-gradient(90deg,transparent 4%,#000 38%,#000 62%,transparent 96%);pointer-events:none}
.bewegt .gross-nr{display:block;position:absolute;right:var(--rand);top:13vh;font:900 clamp(6rem,15vw,14rem)/.8 var(--serif);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgb(201 173 120 / .4);pointer-events:none}
.info-name .w{display:inline-block;white-space:nowrap}
.info-name .z{display:inline-block;animation:buchstabe .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--z) * 28ms)}
@keyframes buchstabe{from{opacity:0;transform:translateY(.45em) rotate(7deg)}}
.info-preis{position:relative;width:max-content;padding-top:.9rem}
.info-preis::before{content:"";position:absolute;left:0;top:0;width:2.4rem;height:1px;background:var(--gold)}

/* ---------- Getränke: Bläschen, Gläser neigen sich ---------- */
.blasen{display:none}
.bewegt .blasen{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blasen i{position:absolute;left:var(--x);bottom:-24px;width:calc(var(--g) * 1.3);height:calc(var(--g) * 1.3);border-radius:50%;border:1px solid rgb(255 244 220 / .7);background:radial-gradient(circle at 30% 30%,rgb(255 255 255 / .4),transparent 60%);opacity:0}
.sicht .blasen i{animation:blase var(--z) var(--v) linear infinite}
@keyframes blase{0%{transform:translate(0,0);opacity:0}8%{opacity:.85}50%{transform:translate(var(--w),-56vh)}100%{transform:translate(calc(var(--w) * -.4),-114vh);opacity:0}}
.bewegt .reihe li{transform-origin:50% 100%;transform:rotate(calc((var(--i) - var(--lage,0)) * 5deg))}

/* ---------- Der Gastraum: Laternen an der Schnur, Tor mit zwei Flügeln ---------- */
.raum{position:relative;background:var(--lack);overflow:hidden}
.laternen{position:relative;height:clamp(14rem,36vh,20rem);margin:0 0 1rem;pointer-events:none}
.lat-verlaeufe,.symbole{position:absolute;width:0;height:0;overflow:hidden}
.schnur{position:absolute;left:0;top:0;width:100%;height:12vh;overflow:visible}
.schnur path{stroke:rgb(201 173 120 / .6);stroke-width:1}
.laterne{--lw:calc(clamp(3.1rem,5.6vw,5.4rem) * var(--g));position:absolute;left:var(--x);top:var(--y);width:var(--lw);height:auto;margin-left:calc(var(--lw) / -2);overflow:visible;stroke:var(--gold);transform-origin:50% 0;--an:1;filter:drop-shadow(0 0 calc(16px * var(--an)) color-mix(in srgb,var(--lf) calc(70% * var(--an)),transparent))}
.laterne .licht{fill-opacity:calc(.07 + .93 * var(--an));stroke:none}
.laterne .rand{stroke-width:1.5}
.laterne .fein{stroke-width:.85;stroke-opacity:calc(.85 - .35 * var(--an))}
.bewegt .laterne{--an:clamp(0,calc((var(--f,0) - var(--s) * .08) * 6),1)}
.bewegt .sicht .laterne{animation:schwingen calc(3.6s + var(--s) * .5s) calc(var(--s) * -.9s) ease-in-out infinite alternate}
@keyframes schwingen{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.tor{display:none}
.tor-rahmen{position:relative;min-width:0}
.raum .buehne{grid-template-columns:minmax(0,1fr)}
@media (min-width:821px){
  .bewegt .raum{height:260vh;overflow:visible}
  .bewegt .raum .buehne{position:sticky;top:0;height:100vh;padding:12vh var(--rand) 0;grid-template-columns:minmax(14rem,22vw) 1fr;align-items:center;gap:4vw;overflow:hidden}
  .bewegt .laternen{position:absolute;left:0;right:0;top:0;margin:0}
  .bewegt .raum-text{padding:0}
  .bewegt .tor-rahmen{justify-self:center;width:min(64vw,112vh)}
  .bewegt .faecher{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vw;overflow:visible;padding:0}
  .bewegt .faecher img{width:100%;aspect-ratio:2/3;border-radius:0 0 2.4rem 0;box-shadow:0 30px 60px rgb(0 0 0 / .5);transform:scale(calc(.86 + .14 * var(--f,0)))}
  .bewegt .sicht .faecher img,.bewegt .sicht .fluegel{will-change:transform}
  .bewegt .faecher img:nth-child(2){border-radius:0}
  .bewegt .tor{display:flex;position:absolute;inset:-5% -3.5%;perspective:1500px;pointer-events:none}
  .fluegel{position:relative;flex:1;overflow:hidden;background:linear-gradient(90deg,#3b1810,#2a110b 60%,#34150e);border:1px solid rgb(201 173 120 / .75);box-shadow:inset 0 0 0 9px #241009,inset 0 0 0 10px rgb(201 173 120 / .45);backface-visibility:hidden}
  .fluegel.links{transform-origin:0 50%;transform:rotateY(calc(var(--tf,0) * -102deg))}
  .fluegel.rechts{transform-origin:100% 50%;transform:rotateY(calc(var(--tf,0) * 102deg))}
  .fluegel .trommel{position:absolute;top:50%;height:86%;width:auto;aspect-ratio:1;opacity:.85}
  .fluegel.links .trommel{right:0;transform:translate(50%,-50%)}
  .fluegel.rechts .trommel{left:0;transform:translate(-50%,-50%)}
}

/* ---------- Übergänge als Dampflinie ---------- */
.fragen::before,.fuss::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(34px,6vw,92px);pointer-events:none;background:50% 100%/100% 100% no-repeat}
.fragen::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath fill='%23f3ebdc' d='M0 96V60C110 22 240 14 380 42s250 50 400 22S1010 2 1160 20s210 48 280 32v44Z'/%3E%3C/svg%3E")}
.fuss::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath fill='%23170e0a' d='M0 96V40c90 22 200 36 330 14S590 4 740 26s250 48 400 22 220-30 300-8v56Z'/%3E%3C/svg%3E")}

/* ---------- Knöpfe: Glanz beim Überfahren ---------- */
.knopf::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 34%,rgb(255 255 255 / .3) 50%,transparent 66%);transform:translateX(-130%);transition:transform .75s;pointer-events:none}
@media (hover:hover){.knopf:hover::after{transform:translateX(130%)}}
.magnet{transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s}

/* ---------- Symbole: ein Satz, feine Linie (Zeichnung in index.html ganz oben, <svg class="symbole">) ---------- */
.sym{flex:none;width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.knopf .sym{margin:0 .55em 0 -.15em}
.einstieg .knopf,.besuch .knopf{padding-left:1.15rem;padding-right:1.25rem}
@media (min-width:821px){.bewegt .einstieg .knoepfe{flex-wrap:nowrap}}
.knopf .sym.nach{margin:0 -.2em 0 .6em;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tel{display:inline-flex;align-items:center;gap:.55rem}
.tel .sym{color:var(--gold-hell)}
.rund .sym{width:22px;height:22px;stroke:var(--gold-hell);stroke-width:1.5;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .knopf:hover .sym.nach{transform:translateX(5px)}
  .rund[data-schritt="1"]:hover .sym{transform:translateX(3px)}
  .rund[data-schritt="-1"]:hover .sym{transform:translateX(-3px)}
  .wege a:hover .sym.hin{transform:translate(3px,-3px);opacity:1}
}
.wege a{flex-wrap:nowrap;align-items:center;gap:1rem}
.wege a>.sym:first-child{width:1.7rem;height:1.7rem;color:var(--gold);stroke-width:1.2}
.wege span{margin-left:auto;text-align:right}
.wege .sym.hin{width:1.1rem;height:1.1rem;color:var(--gold-hell);opacity:.7;transition:transform .25s,opacity .25s}
.zeichen{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .75rem .34rem .55rem;border:1px solid;border-radius:999px;font:600 .74rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.zeichen .sym{width:1.15rem;height:1.15rem}
.zeichen.vegan{color:#b6d6a2;border-color:rgb(150 196 128 / .55)}
.zeichen.scharf{color:#f2a58e;border-color:rgb(226 104 72 / .65)}
.g-zeichen{display:block;margin-top:.2rem}
.g-zeichen:empty{display:none}
.bewegt .g-zeichen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.info-fuss{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.6rem 1.1rem}
.info-zeichen{display:flex;gap:.5rem;padding-bottom:.1rem}
.info-zeichen:empty{display:none}
.besuch-adresse{display:flex;align-items:center;gap:.55rem}
.besuch-adresse .sym,.besuch-kontakt .sym,.besuch caption .sym{color:#8a6a2e}
.besuch-kontakt{display:grid;justify-items:start;gap:.35rem;line-height:1.5}
.besuch-kontakt a{display:inline-flex;align-items:center;gap:.6rem}
.besuch caption{display:flex;align-items:center;gap:.5rem;padding-bottom:.8rem;font:600 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgb(32 20 15 / .7);text-align:left}
.leiste a{gap:.45rem}
.leiste .sym{width:1.15rem;height:1.15rem;stroke-width:1.5}

/* ---------- Einblenden beim Hineinscrollen. Nur wenn das Skript läuft (.bereit). ---------- */
.bewegt.bereit [data-ein],.bewegt.bereit [data-ein-kinder]>*{opacity:0;transform:translateY(1.8rem);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--ei,0) * 85ms)}
.bewegt.bereit [data-ein].da,.bewegt.bereit [data-ein-kinder].da>*{opacity:1;transform:none}
.fragen details p{transform-origin:0 0}

/* Schmuck einer Szene ruht, solange die Szene nicht zu sehen ist. Spart Rechenzeit, der Inhalt bleibt erreichbar. */
.bewegt.bereit :is(.pho,.kochen,.karussell,.raum):not(.sicht) :is(.flug,.blasen,.laternen,.trommel,.tor,.kegel,.wolke,.dampf,.gross-nr,.blende){visibility:hidden}

/* Goldener Faden am Rand zeigt, wie weit man ist */
.faden{display:none}
@media (min-width:1100px) and (hover:hover){
  .bewegt .faden{display:block;position:fixed;z-index:30;right:16px;top:24vh;bottom:24vh;width:1px;background:rgb(201 173 120 / .25);pointer-events:none}
  .faden i{position:absolute;inset:0;background:var(--gold);transform-origin:0 0;transform:scaleY(var(--weg,0))}
}

/* ---------- Getränke: Eiswürfel fallen ins Glas ---------- */
.eis{display:none}
.bewegt .eis{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden}
.eis-defs{position:absolute;width:0;height:0;overflow:hidden}
.eis-w{position:absolute;left:0;top:0;width:var(--ew,4rem);height:var(--ew,4rem);margin:calc(var(--ew,4rem) / -2) 0 0 calc(var(--ew,4rem) / -2);opacity:0;visibility:hidden;will-change:transform,opacity;filter:drop-shadow(0 8px 10px rgb(0 0 0 / .35))}
.eis-spritzer{position:absolute;left:0;top:0;width:0;height:0;--s:1}
.eis-spritzer i{position:absolute;left:0;top:0;width:var(--g);height:var(--g);margin:calc(var(--g) / -2) 0 0 calc(var(--g) / -2);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#fffdf6,var(--sf,#f2d48c) 50%,var(--sd,#a8741f));opacity:0}
.eis-spritzer.an i{animation:eis-spritz .85s cubic-bezier(.2,.6,.4,1) var(--v) both}
@keyframes eis-spritz{0%{opacity:1;transform:translate(0,0) scale(.5)}45%{opacity:1;transform:translate(calc(var(--dx) * var(--s) * .6),calc(var(--dy) * var(--s))) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx) * var(--s)),calc(var(--dy) * var(--s) * -.3)) scale(.45)}}

/* ---------- Fragespiel "Was esse ich heute?" ---------- */
.quiz{position:relative;background:var(--lack);padding:clamp(4.5rem,10vw,8rem) var(--rand)}
.quiz>.borduere{position:absolute;left:0;right:0;top:1.4rem}
.quiz-innen{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(15rem,.8fr) 1.5fr;gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.quiz .kochen-kopf{position:static;margin-bottom:1.2rem}
.quiz h2{font:800 clamp(2.4rem,5vw,4.4rem)/1 var(--serif);letter-spacing:-.015em;margin-bottom:1.1rem;text-wrap:balance}
.quiz-text>p:last-child{max-width:28ch;font-size:1.1rem;color:rgb(243 235 220 / .88)}
.quiz-feld{position:relative;min-height:22rem;padding:clamp(1.4rem,3vw,2.6rem);border:1px solid rgb(201 173 120 / .4);border-radius:1.6rem 1.6rem 4rem 1.6rem;background:linear-gradient(160deg,rgb(58 34 22 / .75),rgb(34 20 14 / .75));box-shadow:0 30px 60px rgb(0 0 0 / .35),inset 0 0 0 6px rgb(23 14 10 / .6),inset 0 0 0 7px rgb(201 173 120 / .18)}
.quiz-ohne{color:rgb(243 235 220 / .85)}
.quiz-ohne a{text-decoration-color:var(--gold);text-underline-offset:.25em}
.quiz-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;margin-bottom:1.4rem}
.quiz-stand{display:flex;gap:.5rem}
.quiz-stand i{width:2.2rem;height:3px;border-radius:2px;background:rgb(201 173 120 / .25);transition:background-color .3s}
.quiz-stand i.war{background:rgb(201 173 120 / .6)}
.quiz-stand i.ist{background:var(--gold-hell)}
.quiz-zurueck{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .2rem;cursor:pointer;font:600 .9rem/1 var(--sans);color:var(--gold-hell);border-bottom:1px solid transparent}
.quiz-zurueck:hover{border-color:var(--gold)}
.quiz-zurueck:focus-visible{outline:2px solid var(--gold-hell);outline-offset:4px;border-radius:4px}
.quiz-frage{font:700 clamp(1.8rem,3.2vw,2.8rem)/1.08 var(--serif);letter-spacing:-.01em;margin:0 0 1.6rem;text-wrap:balance}
.quiz-frage:focus,.quiz-name:focus{outline:none}
.quiz-wahl{display:flex;flex-wrap:wrap;gap:.8rem}
.quiz-knopf{all:unset;box-sizing:border-box;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;min-height:64px;padding:.9rem 1.9rem;border:1px solid var(--gold);border-radius:999px;cursor:pointer;font:500 1.45rem/1.1 var(--serif);color:var(--papier);transition:background-color .2s,color .2s,transform .2s}
.quiz-knopf:hover{background:var(--gold);color:var(--tinte)}
.quiz-knopf:active{transform:scale(.97)}
.quiz-knopf:focus-visible{outline:2px solid var(--gold-hell);outline-offset:4px}
.quiz-ergebnis{display:grid;gap:1.6rem 2rem;align-items:center}
.quiz-ergebnis.mit-bild,.quiz-ergebnis{grid-template-columns:minmax(9rem,.7fr) 1.3fr}
.quiz-bild{position:relative;aspect-ratio:1;display:grid;place-items:center}
.quiz-ornament{position:absolute;inset:-6%;width:112%;max-width:none;height:112%;opacity:.3}
.quiz-foto{position:relative;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 18px 22px rgb(0 0 0 / .5))}
.quiz-zeichen{position:relative;width:34%;height:34%;color:var(--gold-hell);stroke-width:.9}
.quiz-vorzeile{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.quiz-name{font:800 clamp(2rem,3.6vw,3.2rem)/1 var(--serif);letter-spacing:-.015em;margin:0 0 .8rem;text-wrap:balance}
.quiz-beschreibung{color:rgb(243 235 220 / .9);max-width:38ch}
.quiz-extra{margin-top:.5rem;color:var(--gold-hell);max-width:38ch}
.quiz-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:1.1rem 0 1.5rem}
.quiz-preis{font:500 1.5rem/1.1 var(--serif);color:var(--gold-hell)}
.quiz-auch{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgb(201 173 120 / .28)}
.quiz-auch li{display:grid;grid-template-columns:1fr auto;gap:.1rem 1.2rem;padding:.55rem 0}
.quiz-auch b{font:500 1.2rem/1.25 var(--serif)}
.quiz-auch span{grid-column:1;font-size:.92rem;color:rgb(243 235 220 / .78)}
.quiz-auch i{grid-column:2;grid-row:1;font:500 1.1rem/1.25 var(--serif);font-style:normal;color:var(--gold-hell);white-space:nowrap}
.quiz-klein{margin-top:1.6rem;font-size:.85rem;color:rgb(243 235 220 / .65)}
/* Bewegung im Spiel: Antworten kommen gestaffelt, das Gericht dreht sich herein */
.bewegt .quiz-neu .quiz-frage,.bewegt .quiz-neu .quiz-text-e{animation:quiz-auf .5s cubic-bezier(.2,.7,.2,1) both}
.bewegt .quiz-neu .quiz-knopf{animation:quiz-auf .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(60ms + var(--qi,0) * 55ms)}
.bewegt .quiz-neu .quiz-foto{animation:quiz-dreh .9s cubic-bezier(.2,.8,.2,1) both}
.bewegt .quiz-neu .quiz-auch,.bewegt .quiz-neu .quiz-klein{animation:quiz-auf .5s .25s cubic-bezier(.2,.7,.2,1) both}
.bewegt .quiz-an.sicht .quiz-ornament{animation:kreisen 120s linear infinite}
@keyframes quiz-auf{from{opacity:0;transform:translateY(1rem)}}
@keyframes quiz-dreh{from{opacity:0;transform:scale(.6) rotate(-120deg)}}
@media (max-width:820px){
  .quiz-innen{grid-template-columns:1fr}
  .quiz-feld{min-height:19rem;border-radius:1.2rem 1.2rem 2.6rem 1.2rem}
  .quiz-ergebnis,.quiz-ergebnis.mit-bild{grid-template-columns:1fr}
  .quiz-bild{width:min(62vw,15rem);justify-self:center}
  .quiz-knopf{font-size:1.1rem;min-height:52px;padding:.7rem 1.3rem}
}

/* ---------- Xích lô: der alte Fahrer radelt beim Scrollen am unteren Rand entlang ---------- */
.rikscha{display:none}
.bewegt.bereit .rikscha{display:block;position:fixed;z-index:35;left:0;right:0;bottom:calc(var(--leiste-h) + 6px);height:0;pointer-events:none;--xl:var(--gold-hell);--xf:var(--lack)}
.bewegt.bereit .rikscha.hell{--xl:var(--tinte);--xf:var(--papier)}
.xl-ort{position:absolute;left:0;bottom:0;width:clamp(9rem,16vw,15rem);will-change:transform;transform:translate3d(-120%,0,0)}
.xl-wende{transition:transform .3s}
.xl-wende.links{transform:scaleX(-1)}
.xl-ort::before{content:"";position:absolute;inset:-18% -12% -6%;background:radial-gradient(closest-side,var(--xf) 35%,transparent);opacity:.7}
.xichlo{position:relative;display:block;width:100%;height:auto;overflow:visible}
.xl-linie,.xl-reifen,.xl-fein,.xl-arm,.xl-bein,.xl-dampf{stroke:var(--xl)}
.xl-linie{stroke-width:1.6}
.xl-reifen{stroke-width:2.2}
.xl-fein{stroke-width:.9}
.xl-voll,.xl-sattel{fill:var(--xl)}
.xl-flaeche{fill:var(--xf)}
.xl-arm,.xl-bein{stroke-width:2.6}
.xl-fern{opacity:.5}
.xl-hut{fill:var(--gold-hell);stroke:var(--xl);stroke-width:1.1}
.xl-hut+.xl-fein{stroke:#8a6a2e}
.xl-bart{fill:#fff}
.rikscha.hell .xl-bart{fill:#9a948a}
.xl-licht{fill:#e9a04a;stroke:var(--xl);stroke-width:.9}
.xl-schatten{fill:rgb(0 0 0 / .3)}
.xl-dampf{stroke-width:1;stroke-dasharray:6 14;animation:xl-dampf 2.4s linear infinite}
.xl-dampf+.xl-dampf{animation-delay:-1.2s}
@keyframes xl-dampf{from{stroke-dashoffset:6;opacity:0}30%{opacity:.8}to{stroke-dashoffset:-14;opacity:0}}
.xl-laterne{animation:schwingen 1.3s ease-in-out infinite alternate}

/* Platz für die Fahrbahn: was unten am Rand steht, rückt ein Stück hoch */
@media (min-width:821px){
  .bewegt .quay{bottom:calc(3vh + 9.5rem)}
  .bewegt .kochen-zahl{bottom:calc(3vh + 9.5rem)}
  .bewegt.bereit .fuss{padding-bottom:11rem}
}

/* ---------- Fassung 2 auf dem Handy ---------- */
@media (max-width:820px){
  body::after{opacity:.1}
  .bewegt .trommel-ort{left:57%;top:calc(24svh + var(--d) / 2);width:calc(var(--d) * 2)}
  .bewegt .trommel-start{opacity:.15}
  .wolke i{width:90vmin;height:90vmin}
  .bewegt .kochen{height:calc(100vh + 5 * 70vh)}
  .bewegt .kochen-kopf{top:calc(64px + 2.5svh);font-size:1.1rem}
  .bewegt .saetze{left:var(--rand);right:var(--rand);top:calc(64px + 9svh);width:auto}
  .bewegt .saetze li{font-size:2.1rem;line-height:1.06;transform:translateY(calc(var(--t,1) * 9vh))}
  .bewegt .saetze li.lang{font-size:1.5rem;line-height:1.14}
  .bewegt .saetze li::before{margin-bottom:.7rem;font-size:1rem}
  .bewegt .saetze .knopf{margin-top:1rem;min-height:44px}
  .bewegt .flug{inset:40svh -5vw var(--leiste-h) -70vw}
  .bewegt .kochen-zahl{display:none}
  .xl-ort{width:6.2rem}
  /* Auf dem Handy fährt er nur, solange gescrollt wird. Steht die Seite, gibt er den Text frei. */
  .rikscha{opacity:0;transition:opacity .6s .2s}
  .rikscha.faehrt{opacity:1;transition:opacity .25s}
  .wege a{display:grid;grid-template-columns:auto 1fr auto;gap:.1rem .9rem;align-items:center}
  .wege a>.sym:first-child{grid-row:1/3}
  .wege b{grid-column:2}
  .wege span{grid-column:2;grid-row:2;margin:0;text-align:left}
  .wege .sym.hin{grid-column:3;grid-row:1/3}
  .bewegt.bereit .rikscha{bottom:calc(var(--leiste-h) + 1px)}
  .bewegt.bereit .fuss{padding-bottom:calc(4rem + var(--leiste-h) + 4.5rem)}
  .wort b{font-size:clamp(2.6rem,15cqw,4.6rem)}
  .wort span{font-size:.7rem}
  .bewegt .trommel-rad{left:50%;top:calc(63svh + var(--R))}
  .bewegt .kegel{left:50%;width:92vw;height:63svh}
  .bewegt .gross-nr{display:none}
  .info-text{font-size:.95rem}
  .laternen{height:clamp(13rem,30vh,17rem)}
  .laterne{--lw:calc(3.5rem * var(--g))}
  .laterne .fein{stroke-width:1}
}
@media (max-width:820px) and (max-height:720px){
  .bewegt .saetze li{font-size:1.8rem}
  .bewegt .saetze li.lang{font-size:1.3rem}
}
@media (min-width:821px) and (max-height:700px){
  .bewegt .name{inset:13.5vh 0 auto 0;font-size:min(20vw,34vh)}
  .bewegt .kochen-kopf{top:15vh}
  .bewegt .saetze{top:56%}
  .bewegt .saetze li{font-size:clamp(2rem,4vw,3.4rem)}
  .bewegt .saetze li.lang{font-size:clamp(1.6rem,2.9vw,2.5rem)}
  .bewegt .saetze li::before{margin-bottom:.8rem}
  .bewegt .gross-nr{font-size:clamp(4.5rem,11vw,8rem)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- Fassung 5: Tisch anfragen ---------- */
.vorzeile{display:flex;align-items:center;gap:.8rem;font:500 1rem/1 var(--serif);color:var(--gold);margin:0 0 1rem}
.vorzeile::before{content:"";width:2.4rem;height:1px;background:currentColor}
.rund{flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgb(201 173 120 / .55);color:var(--gold);background:rgb(201 173 120 / .08)}
.rund .sym{width:1.25rem;height:1.25rem}

.tisch{position:relative;overflow:hidden;color:var(--papier);padding:clamp(5rem,11vw,8.5rem) var(--rand) clamp(4.5rem,10vw,7.5rem);
  background:radial-gradient(ellipse 70% 55% at 15% 25%,rgb(163 36 28 / .22),transparent 70%),radial-gradient(ellipse 60% 50% at 90% 85%,rgb(201 173 120 / .13),transparent 70%),var(--lack)}
.tisch-innen{position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:3.5rem}
.tisch-kopf{position:relative;padding-top:6.5rem}
.tisch h2{font:800 clamp(2.9rem,6.4vw,5.4rem)/.95 var(--serif);letter-spacing:-.02em;margin:0 0 1.2rem}
.tisch-lead{font-size:1.15rem;line-height:1.6;max-width:32ch;color:rgb(243 235 220 / .86);margin:0}
.tisch-wege{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:1.1rem}
.tisch-wege li{display:flex;gap:1rem;align-items:center}
.tisch-wege li>span:last-child{display:grid;gap:.1rem;font-size:.9rem;color:rgb(243 235 220 / .68)}
.tisch-wege a{font:600 1.15rem/1.3 var(--serif);color:var(--papier);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.25em}
.tisch-wege a:hover{color:var(--gold-hell)}
.tisch :focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}

.tisch-laternen{position:absolute;left:0;top:-5.5rem;width:8.5rem;height:12rem;pointer-events:none}
.haenge{position:absolute;top:0;overflow:visible;transform-origin:50% 0;filter:drop-shadow(0 0 16px rgb(255 150 60 / .4))}
.haenge.l1{left:0;width:4.6rem}
.haenge.l2{left:4.4rem;width:3.4rem;top:-1.5rem}
.haenge .faden-l{stroke:rgb(201 173 120 / .55);stroke-width:1;vector-effect:non-scaling-stroke}
.haenge .rand{stroke:var(--gold);stroke-width:1.3;vector-effect:non-scaling-stroke}
.haenge .fein{stroke:rgb(122 74 24 / .55);stroke-width:.8;vector-effect:non-scaling-stroke}
.bewegt .haenge{animation:schwingen 6.5s ease-in-out infinite}
.bewegt .haenge.l2{animation-duration:7.8s;animation-delay:-2.4s}
@keyframes schwingen{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}

.zettel{position:relative;background:var(--papier);color:var(--tinte);padding:3.4rem clamp(1.2rem,4.5vw,2.8rem) 2.2rem;border-radius:3px 3px 6px 6px;
  box-shadow:0 34px 70px -24px rgb(0 0 0 / .7),0 0 0 1px rgb(201 173 120 / .25)}
.zettel::before{content:"";position:absolute;left:0;right:0;top:-7px;height:14px;background:radial-gradient(circle at 9px 7px,var(--lack) 4.5px,transparent 5px) repeat-x;background-size:18px 14px}
.zettel::after{content:"";position:absolute;inset:.75rem;border:1px solid rgb(138 106 46 / .32);border-radius:3px;pointer-events:none}
.zettel-kopf{position:absolute;right:1rem;top:-1.9rem;z-index:1}
.stempel{display:grid;place-content:center;width:5.6rem;height:5.6rem;border-radius:50%;background:var(--papier);color:var(--rot);text-align:center;font:800 1.05rem/1 var(--serif);transform:rotate(-12deg);
  box-shadow:0 0 0 2px var(--rot),inset 0 0 0 4px var(--papier),inset 0 0 0 5.5px var(--rot),0 10px 20px -8px rgb(0 0 0 / .5)}
.stempel small{display:block;margin-top:.3rem;font:600 .56rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.zettel .zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:0 1.2rem}
@media (min-width:600px){.zettel .zeile{grid-template-columns:1fr 1fr}.zettel .zeile.drei{grid-template-columns:1.25fr 1fr 1fr}}
.zettel .feld{display:grid;gap:.3rem;margin:0 0 1.15rem;position:relative}
.zettel .feld>span,.zettel legend{font:600 .76rem/1.25 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:rgb(32 20 15 / .72)}
.zettel .feld small,.zettel legend small{text-transform:none;letter-spacing:0;font-weight:400}
.zettel input,.zettel select,.zettel textarea{width:100%;min-width:0;font:500 1.12rem/1.3 var(--serif);color:var(--tinte);background:transparent;border:0;border-bottom:1.5px solid rgb(32 20 15 / .35);border-radius:0;padding:.55rem 0;min-height:2.9rem;-webkit-appearance:none;appearance:none}
.zettel select{padding-right:1.6rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2320140f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .2rem center / .8rem}
.zettel input[type=date]{padding-right:.2rem}
.zettel textarea{border:1.5px solid rgb(32 20 15 / .25);border-radius:6px;padding:.65rem .8rem;resize:vertical;min-height:5.5rem}
.zettel input:focus,.zettel select:focus{border-bottom-color:var(--rot)}
.zettel textarea:focus{border-color:var(--rot)}
.zettel :focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.zettel .feld-hinweis{font-size:.9rem;line-height:1.5;color:rgb(32 20 15 / .7);margin:-.4rem 0 1.4rem}
.zettel .wuensche{border:0;padding:0;margin:.3rem 0 1.3rem;min-width:0}
.zettel legend{padding:0;margin-bottom:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;padding:.4rem 1rem;border:1px solid rgb(32 20 15 / .3);border-radius:999px;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip span:hover{border-color:var(--tinte)}
.chip input:checked+span{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.chip input:checked+span::before{content:"";width:.5rem;height:.85rem;margin:-.2rem .15rem 0 0;border:solid var(--gold-hell);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chip input:focus-visible+span{outline:2px solid var(--rot);outline-offset:2px}
.chips-hinweis,.klein-hinweis{font-size:.86rem;line-height:1.55;color:rgb(32 20 15 / .66);margin:.7rem 0 0}
.klein-hinweis a{color:inherit}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zettel .knopf-rot{margin-top:1.4rem;width:100%;justify-content:center;min-height:3.4rem;font-size:1.05rem;color:#fff;border:0;cursor:pointer}
@media (min-width:600px){.zettel .knopf-rot{width:auto;padding-left:1.6rem;padding-right:1.8rem}}
.zettel .vorschau-hinweis{margin:1rem 0 0;padding:.8rem 1rem;background:rgb(163 36 28 / .08);border-left:3px solid var(--rot)}
@media (min-width:900px){
  .tisch-innen{grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,6.5rem);align-items:start}
  .tisch-kopf{position:sticky;top:7rem;padding-top:7.5rem}
  .tisch-laternen{top:-6rem;width:10rem;height:14rem}
  .haenge.l1{width:5.4rem}.haenge.l2{left:5.2rem;width:4rem}
}

/* ---------- Fassung 5: Anfahrt und Zeiten ---------- */
.besuch{position:relative;overflow:hidden}
.besuch-innen{grid-template-columns:minmax(0,1fr);gap:2.6rem;align-items:start}
.besuch-kopf,.besuch-ort,.besuch-karte,.besuch-zeiten{grid-column:auto;grid-row:auto;min-width:0}
.besuch .vorzeile{color:#8a6a2e}
.besuch h2{margin:0 0 1.2rem}
.besuch .offen-gross{display:inline-flex;align-items:center;gap:.65rem;margin:0;padding:.6rem 1.15rem .6rem 1rem;border-radius:999px;background:var(--tinte);color:var(--papier);font:500 clamp(1rem,2.4vw,1.15rem)/1.3 var(--serif)}
.besuch .rund{border-color:rgb(110 82 34 / .5);color:#6e5222;background:rgb(201 173 120 / .2)}
.besuch .rund .sym{stroke-width:1.8}
.kontakt-liste{list-style:none;padding:0;margin:0 0 1.5rem}
.kontakt-liste li{display:flex;gap:1rem;align-items:center;padding:.85rem 0;border-bottom:1px dashed rgb(32 20 15 / .22)}
.kontakt-liste li:first-child{border-top:1px dashed rgb(32 20 15 / .22)}
.kontakt-liste li>span:last-child{font:500 1.12rem/1.35 var(--serif);min-width:0;overflow-wrap:anywhere}
.kontakt-liste small{display:block;font:600 .7rem/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:rgb(32 20 15 / .6);margin-bottom:.2rem}
.kontakt-liste a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:.25em}
.besuch .besuch-lage{margin:0 0 1.8rem;max-width:36ch;font-size:1.05rem;line-height:1.65}
.besuch .knoepfe{display:flex;flex-wrap:wrap;gap:.8rem}

.besuch-karte{margin:0;padding:.6rem .4rem 0}
.karte-rahmen{position:relative;max-width:30rem;margin:0 auto;padding:.85rem;border-radius:6px;background:var(--lack-hell);box-shadow:0 30px 55px -26px rgb(32 20 15 / .6);transform:rotate(-1.6deg)}
.karte-rahmen::after{content:"";position:absolute;inset:.85rem;border:1px solid rgb(201 173 120 / .4);border-radius:3px;pointer-events:none}
.klebe{position:absolute;top:-.75rem;z-index:2;width:5.6rem;height:1.6rem;background:linear-gradient(90deg,rgb(228 207 159 / .82),rgb(201 173 120 / .7));box-shadow:0 2px 5px rgb(0 0 0 / .18);clip-path:polygon(3% 0,97% 6%,100% 50%,97% 100%,2% 94%,0 50%)}
.klebe.k1{left:-1.2rem;transform:rotate(-30deg)}
.klebe.k2{right:-1.2rem;transform:rotate(26deg)}
.besuch-karte .karte{display:block;width:100%;max-width:none;height:auto;margin:0;color:var(--gold-hell);border-radius:3px;background:radial-gradient(circle at 66% 55%,rgb(201 173 120 / .13),transparent 62%),#1f130e}
.karte-wasser path{fill:url(#karte-wellen);stroke:rgb(201 173 120 / .7)}
.karte-haupt{stroke:var(--gold-hell)}
.karte-namen{fill:var(--gold-hell)}
.karte-ort .pin{fill:var(--rot);stroke:var(--papier);stroke-width:1.4}
.karte-ort .pin-lat{fill:none;stroke:#f6dda4;stroke-width:1.5}
.karte-ort .pin-punkt{fill:var(--gold-hell);stroke:none}
.karte-ort .puls{fill:none;stroke:var(--gold-hell);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.bewegt .karte-ort .puls{animation:karte-puls 2.6s ease-out infinite}
.bewegt .karte-ort .puls.p2{animation-delay:1.3s}
@keyframes karte-puls{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
.karte-schild,.karte-kompass{stroke-dasharray:none}
.karte-schild rect{fill:var(--papier);stroke:none}
.karte-schild text{fill:var(--tinte);font-weight:700}
.karte-kompass circle{fill:rgb(23 14 10 / .6);stroke:rgb(201 173 120 / .6);stroke-width:1}
.karte-kompass path{fill:rgb(228 207 159 / .45);stroke:none}
.karte-kompass .nord{fill:var(--gold-hell)}
.karte-kompass text{fill:var(--gold-hell);stroke:none;font-family:var(--serif)}
.besuch-karte figcaption{margin-top:1rem}

.tafel-zeiten{position:relative;padding:2.3rem 1.5rem 1.6rem;border-radius:6px;background:radial-gradient(ellipse at 50% 0,rgb(201 173 120 / .12),transparent 70%),var(--lack);color:var(--papier);box-shadow:0 30px 55px -26px rgb(32 20 15 / .65)}
.tafel-zeiten::before{content:"";position:absolute;inset:.6rem;border:1px solid rgb(201 173 120 / .45);border-radius:3px;pointer-events:none}
.ecke{position:absolute;width:.62rem;height:.62rem;background:var(--gold);transform:rotate(45deg)}
.ecke.e1{left:.29rem;top:.29rem}.ecke.e2{right:.29rem;top:.29rem}.ecke.e3{left:.29rem;bottom:.29rem}.ecke.e4{right:.29rem;bottom:.29rem}
.besuch .tafel-zeiten caption{display:table-caption;caption-side:top;padding:0 0 1.1rem;font:700 1.7rem/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--papier);text-align:center}
.besuch .tafel-zeiten caption::after{content:"";display:block;width:3rem;height:1px;margin:.8rem auto 0;background:var(--gold)}
.besuch .tafel-zeiten th,.besuch .tafel-zeiten td{border-top:1px dashed rgb(201 173 120 / .32);color:var(--papier);padding:1rem .2rem}
.besuch .tafel-zeiten tr.heute td{color:var(--gold-hell)}
.besuch .tafel-zeiten tr.heute th::after{background:var(--gold);color:var(--tinte)}
.tafel-zeiten .klein{margin:1rem 0 0;font-size:.85rem;text-align:center;color:rgb(243 235 220 / .62)}

@media (min-width:700px) and (max-width:1099px){
  .besuch-innen{grid-template-columns:1fr 1fr;gap:3rem 2.5rem}
  .besuch-kopf{grid-column:1/-1}
  .besuch-karte{grid-column:1;grid-row:2}
  .besuch-ort{grid-column:2;grid-row:2;align-self:center}
  .besuch-zeiten{grid-column:1/-1;grid-row:3;max-width:34rem;width:100%;justify-self:center}
}
@media (min-width:1100px){
  .besuch-innen{grid-template-columns:1.05fr 1.1fr .95fr;gap:2.5rem clamp(2rem,3.5vw,3.5rem)}
  .besuch-kopf{grid-column:1;grid-row:1}
  .besuch-ort{grid-column:1;grid-row:2}
  .besuch-karte{grid-column:2;grid-row:1/3;align-self:center}
  .besuch-zeiten{grid-column:3;grid-row:1/3;align-self:center}
}
.besuch .tafel-zeiten td{white-space:nowrap;font-size:1.08rem}
.besuch .tafel-zeiten th{padding-right:.8rem}

/* ---------- Fassung 6: mehr Gerichte auf dem Drehteller, Abstand wächst mit der Zahl ---------- */
.bewegt .teller{--R:max(min(66vh,52vw),calc(var(--d) * .6 / sin(180deg / var(--n))))}
@media (max-width:820px){.bewegt .teller{--R:max(84vw,calc(var(--d) * .6 / sin(180deg / var(--n))))}}

/* ---------- Fassung 8: Scroll-Film Pho Bo (10k-Standard) ---------- */
.film{position:relative;background:var(--lack);color:var(--papier);--tshadow:0 1px 2px rgb(10 6 4 / .95),0 3px 12px rgb(10 6 4 / .78),0 10px 44px rgb(10 6 4 / .8)}
.film-buehne{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.film-poster{position:absolute;inset:0;background:url(../bilder/film/pho-bo-start.jpg) 56% 30% / cover no-repeat}
.film-video{display:none}
.film-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgb(14 8 5 / .94) 0%,rgb(14 8 5 / .78) 45%,rgb(14 8 5 / .15) 78%)}
.film-ring{display:none}
.film-baender{position:relative;z-index:1;width:100%;padding:0 var(--rand) clamp(3rem,8vh,5rem);text-shadow:var(--tshadow)}
.film .band{max-width:34rem;margin-top:1rem}
.film .band .knopf{text-shadow:none}
.film h2{font:800 clamp(3.4rem,9vw,7.2rem)/.9 var(--serif);letter-spacing:-.02em;margin:0}
.film-satz{font:500 clamp(1.45rem,3.2vw,2.6rem)/1.2 var(--serif);margin:0;max-width:22ch}
.film-preis{color:var(--gold-hell);white-space:nowrap}
.film .knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.film .vorzeile{color:var(--gold-hell)}
/* Scroll-Modus, nur wenn keine der fünf Bedingungen greift (gleich wie in js/film.js) */
@media not all and (max-width:720px){
  .film.film-an{height:420vh}
  .film-an .film-buehne{position:sticky;top:0;height:100vh;height:100svh;align-items:center}
  .film-an .film-poster{background-position:50% 50%;background-image:none}
  .film-an .film-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease-out,ease);transform:translateZ(0)}
  .film-an .film-bereit .film-video{opacity:1}
  .film-an .film-scrim{background:linear-gradient(90deg,rgb(14 8 5 / .78) 0%,rgb(14 8 5 / .5) 30%,rgb(14 8 5 / 0) 58%),radial-gradient(ellipse 120% 90% at 55% 45%,rgb(14 8 5 / 0) 40%,rgb(14 8 5 / .6) 100%)}
  .film-an .film-ring{display:block;position:absolute;right:var(--rand);bottom:calc(var(--leiste-h,0px) + 2rem);width:44px;height:44px;color:var(--gold-hell);transform:rotate(-90deg);transition:opacity .5s}
  .film-an .film-bereit .film-ring,.film-an .film-ohne .film-ring{opacity:0}
  .film-an .film-baender{position:absolute;inset:0;padding:0}
  .film-an .band{position:absolute;left:var(--rand);top:50%;margin:0;width:min(36rem,42vw);opacity:0;visibility:hidden;transform:translateY(calc(-50% + (1 - var(--k,1)) * 26px))}
  .film-an .band.b1{opacity:1;visibility:visible}
  .film-an .band::before{content:"";position:absolute;inset:-30% -25% -30% -40%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75 * var(--k,1));background:radial-gradient(ellipse 70% 62% at 40% 50%,rgb(10 6 4 / .62) 0%,rgb(10 6 4 / .4) 46%,rgb(10 6 4 / 0) 76%)}
}
@media (prefers-reduced-motion:reduce){.film-video,.film-ring{display:none!important}}

/* ---------- Fassung 8: Bildstrecke "Aus der Küche" (Baukasten Nr. 12 und 16) ---------- */
.kueche-galerie{background:radial-gradient(ellipse 60% 40% at 80% 10%,rgb(201 173 120 / .1),transparent 70%),var(--lack);color:var(--papier);padding:clamp(4.5rem,10vw,8rem) var(--rand)}
.galerie-kopf{max-width:1280px;margin:0 auto}
.galerie-kopf h2{font:800 clamp(2.6rem,6vw,5rem)/.95 var(--serif);letter-spacing:-.02em;margin:0;max-width:16ch}
.galerie-raster{max-width:1280px;margin:clamp(2rem,5vw,3.5rem) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem)}
.g-bild{margin:0;display:flex;flex-direction:column;min-width:0}
.g-rahmen{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4 / 5;background:var(--lack-hell);transform-origin:50% 50%}
.g-rahmen img{display:block;width:100%;height:100%;object-fit:cover}
.g-bild.gross,.g-bild.breit{grid-column:1 / -1}
.g-bild.breit .g-rahmen{aspect-ratio:16 / 10}
.g-bild figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.8rem .2rem 0;border-bottom:1px solid rgb(201 173 120 / .25);padding-bottom:.6rem}
.g-bild figcaption b{font:700 clamp(1.1rem,1.8vw,1.45rem)/1.2 var(--serif)}
.g-bild figcaption span{font:500 1rem/1 var(--serif);color:var(--gold-hell);white-space:nowrap}
.galerie-fuss{max-width:1280px;margin:2.5rem auto 0}
@media (min-width:900px){
  .galerie-raster{grid-template-columns:repeat(12,minmax(0,1fr))}
  .g-bild.gross{grid-column:1 / 8;grid-row:1 / 3}
  .g-bild.gross .g-rahmen{aspect-ratio:auto;flex:1;min-height:0}
  .g-bild.hoch{grid-column:8 / 13;grid-row:1}
  .g-bild:nth-child(3){grid-column:8 / 13;grid-row:2}
  .g-bild.hoch .g-rahmen,.g-bild:nth-child(3) .g-rahmen{aspect-ratio:4 / 3}
  .g-bild:nth-child(4){grid-column:1 / 5}
  .g-bild:nth-child(5){grid-column:5 / 9}
  .g-bild.breit{grid-column:9 / 13}
  .g-bild.breit .g-rahmen{aspect-ratio:4 / 5}
}
/* Fassung 9: Am Tisch, Laufband mit Fotos (Baukasten Nr. 06) */
.am-tisch{background:var(--lack);color:var(--papier);padding:clamp(4.5rem,10vw,8rem) 0;overflow:hidden}
.am-tisch-kopf{max-width:1280px;margin:0 auto;padding:0 var(--rand);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem 2rem}
.am-tisch-kopf .vorzeile{width:100%;margin:0}
.am-tisch-kopf h2{font:800 clamp(2.6rem,6vw,5rem)/.95 var(--serif);letter-spacing:-.02em;margin:0;max-width:14ch}
.am-tisch-baender{margin-top:clamp(2rem,5vw,3.5rem);display:grid;gap:clamp(.8rem,1.6vw,1.4rem)}
.gaeste-band{--abstand:clamp(.8rem,1.6vw,1.4rem);display:flex;gap:var(--abstand);overflow:hidden;width:100%;contain:inline-size;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gaeste-spur{display:flex;flex:none;gap:var(--abstand);min-width:100%;justify-content:space-around;margin:0;padding:0;list-style:none;white-space:nowrap}
.gast{--h:clamp(190px,26vw,330px);height:var(--h);flex:none}
.gast.quer{width:calc(var(--h) * 1.5)}
.gast.hoch{width:calc(var(--h) * .7)}
.gast.quadrat{width:var(--h)}
.gast-rahmen{width:100%;height:100%;border-radius:16px;overflow:hidden;background:var(--lack-hell);transform-origin:50% 50%}
.gast-rahmen img{display:block;width:100%;height:100%;object-fit:cover}
.gaeste-band.rechts .gast{--h:clamp(170px,22vw,280px)}
@media (prefers-reduced-motion:no-preference){
  .gaeste-band .gaeste-spur{animation:gaeste-lauf 70s linear infinite}
  .gaeste-band.rechts .gaeste-spur{animation-duration:85s;animation-direction:reverse}
  .gaeste-band:hover .gaeste-spur{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .gaeste-band{flex-wrap:wrap;mask-image:none;padding:0 var(--rand)}
  .gaeste-spur{flex:1 1 100%;min-width:0;flex-wrap:wrap;white-space:normal;justify-content:flex-start}
  .gaeste-spur[aria-hidden]{display:none}
  .gast,.gaeste-band.rechts .gast{--h:150px}
}
@keyframes gaeste-lauf{to{transform:translateX(calc(-100% - var(--abstand)))}}

/* Fassung 13: Kopfzeile mit Symbolen, Menü als Leiste mit Knöpfen */
.kopf-nav{gap:.25rem;padding:.3rem;border:1px solid rgb(201 173 120 / .3);border-radius:999px;background:rgb(23 14 10 / .45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 24px rgb(0 0 0 / .25)}
.kopf-nav a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:0;border-radius:999px;white-space:nowrap;font:500 .9rem/1 var(--sans);letter-spacing:.01em;color:var(--papier);transition:background-color .25s,color .25s,box-shadow .25s}
.kopf-nav a:hover{border:0;background:rgb(201 173 120 / .16);color:var(--gold-hell)}
.kopf-nav a:focus-visible{outline:2px solid var(--gold-hell);outline-offset:2px}
.kopf-nav a[aria-current="true"]{background:linear-gradient(135deg,var(--gold-hell),var(--gold));color:var(--lack);box-shadow:0 4px 14px rgb(201 173 120 / .35)}
.kopf-sym{width:1.15rem;height:1.15rem;stroke-width:1.6;color:var(--gold);transition:transform .3s cubic-bezier(.2,.8,.2,1),color .25s}
.kopf-nav a:hover .kopf-sym{transform:translateY(-2px) rotate(-6deg);color:var(--gold-hell)}
.kopf-nav a[aria-current="true"] .kopf-sym{color:var(--lack)}
.kopf-knopf{min-height:46px;padding:.6rem 1.35rem;border-radius:999px;font-weight:600;box-shadow:0 6px 20px rgb(163 36 28 / .45),inset 0 0 0 1px rgb(255 255 255 / .14);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-color .25s}
.kopf-knopf:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgb(163 36 28 / .55),inset 0 0 0 1px rgb(255 255 255 / .2)}
.kopf-knopf .sym{width:1.2rem;height:1.2rem;stroke-width:1.6}
.kopf.fest .kopf-nav{background:rgb(23 14 10 / .2)}
/* Zwischen Tablet und kleinem Laptop reicht der Platz nicht für fünf Knöpfe mit Text: Klappmenü */
@media (min-width:821px) and (max-width:1199px){
  .kopf-nav{display:none}
  .kopf-knopf{margin-left:auto}
  .menue{display:grid;margin-left:0}
  .kopf.offen{background:rgb(23 14 10 / .97)}
  .kopf.offen .kopf-nav{display:flex;position:absolute;top:100%;right:var(--rand);flex-direction:column;align-items:stretch;gap:.2rem;padding:.5rem;border-radius:18px;background:rgb(23 14 10 / .97)}
}
@media (max-width:1199px){
  .kopf.offen .kopf-nav a{gap:.8rem;padding:.9rem 1rem;border-radius:12px;font:500 1.15rem/1.2 var(--serif);border-bottom:0}
  .kopf.offen .kopf-nav .kopf-sym{width:1.35rem;height:1.35rem}
}
@media (max-width:820px){
  .kopf.offen .kopf-nav{border-radius:0;border-width:0 0 1px;box-shadow:none;padding:.5rem var(--rand) 1rem}
}
/* Speisekarte als Knopf, sobald das Menü zugeklappt ist */
.kopf-karte{display:none;min-height:46px;padding:.6rem 1.2rem;border-radius:999px;border:1px solid var(--gold);background:rgb(23 14 10 / .55);color:var(--gold-hell);font-weight:600;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s,color .25s}
.kopf-karte .sym{width:1.2rem;height:1.2rem;stroke-width:1.6}
.kopf-karte:hover{transform:translateY(-2px);background:var(--gold);color:var(--lack)}
@media (max-width:1199px){
  .kopf-karte{display:inline-flex;margin-left:auto}
  .kopf-karte~.kopf-knopf{margin-left:0}
}
/* Speisekarte und Tisch reservieren sind in jeder Breite zu sehen (Wunsch Arzu, 13.10.2026) */
.t-kurz{display:none}
@media (max-width:820px){
  .kopf{gap:.5rem}
  .kopf-karte,.kopf-knopf{display:inline-flex;min-height:42px;padding:.5rem .9rem;font-size:.88rem}
  .menue{margin-left:0;width:44px}
}
@media (max-width:520px){
  .kopf-logo img{width:56px}
  .kopf{gap:.35rem}
  .kopf-karte,.kopf-knopf{min-height:40px;padding:.45rem .7rem;font-size:.8rem}
  .kopf-karte .sym,.kopf-knopf .sym{width:1rem;height:1rem;margin-right:.35em}
  .t-lang{display:none}.t-kurz{display:inline}
  .menue{width:40px}
}
@media (max-width:374px){
  .kopf-karte .sym,.kopf-knopf .sym{display:none}
  .kopf-karte,.kopf-knopf{padding:.45rem .65rem}
  .kopf-logo img,.kopf.fest .kopf-logo img{width:48px}
  .kopf{gap:.3rem}
}
/* Ab 560 px ist Platz für beide Knöpfe, darunter steht "Reservieren" in der Leiste unten */
@media (min-width:560px) and (max-width:820px){
  .kopf-knopf{display:inline-flex;min-height:42px;padding:.5rem 1rem;font-size:.9rem}
}

/* Fassung 14b: Feinschliff Kopfzeile (13.10.2026) */
/* Der Punkt der Öffnungszeiten-Anzeige (.offen) traf auch den offenen Kopf */
.kopf.offen::before{content:none}
.kopf-karte,.kopf-knopf{align-items:center;justify-content:center;line-height:1;-webkit-tap-highlight-color:transparent}
.kopf-karte:focus-visible,.kopf-knopf:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}
.kopf-karte:active,.kopf-knopf:active{transform:scale(.97)}
.menue{flex:none}
@media (max-width:1199px){
  /* Klappmenü deckend, sonst schimmern die Bilder durch */
  .kopf.offen,.kopf.fest.offen{background:rgb(23 14 10 / .98)}
  .kopf.offen .kopf-nav,.kopf.fest.offen .kopf-nav{background:rgb(23 14 10 / .98);backdrop-filter:none;-webkit-backdrop-filter:none;max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain}
  .kopf.offen .kopf-nav a[aria-current="true"]{background:rgb(201 173 120 / .14);color:var(--gold-hell);box-shadow:none}
  .kopf.offen .kopf-nav a[aria-current="true"] .kopf-sym{color:var(--gold-hell)}
}
@media (max-width:520px){
  .kopf.fest .kopf-logo img{width:56px}
  .kopf-karte,.kopf-knopf{min-height:44px}
  .menue{width:44px;height:44px}
}
@media (max-width:374px){
  .kopf.fest .kopf-logo img{width:48px}
}
html.menue-auf{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .kopf-karte,.kopf-knopf,.kopf-karte:hover,.kopf-knopf:hover,.kopf-karte:active,.kopf-knopf:active{transform:none;transition:none}
}
.kopf-karte,.kopf-knopf{flex:none}
@media (max-width:399px){
  .kopf-karte .sym,.kopf-knopf .sym{display:none}
  .kopf-logo img,.kopf.fest .kopf-logo img{width:50px}
  .kopf{gap:.3rem}
}
@media (max-width:359px){
  .kopf{padding-left:14px;padding-right:14px}
  .kopf-logo img,.kopf.fest .kopf-logo img{width:44px}
  .kopf-karte,.kopf-knopf{padding:.45rem .55rem;font-size:.78rem}
}
/* .offen (Öffnungszeiten) setzt baseline und Schriftgröße, das darf den offenen Kopf nicht verschieben */
.kopf.offen{align-items:center;font-size:inherit;color:inherit}
@media (max-width:820px){.kopf.offen{gap:.5rem}}
@media (max-width:520px){.kopf.offen{gap:.35rem}}
@media (max-width:399px){.kopf.offen{gap:.3rem}}
@media (min-width:821px){.kopf.offen{gap:1.5rem}}
/* Fassung 18: Formular auf Englisch, Hinweis bei voller Zeit (js/belegung.js) */
.zettel .sprache-knopf{position:absolute;left:1.2rem;top:1.1rem;z-index:2;font:600 .74rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:.45rem .7rem;border:1px solid rgb(138 106 46 / .55);border-radius:999px;background:transparent;color:rgb(32 20 15 / .78);cursor:pointer}
.zettel .sprache-knopf:hover,.zettel .sprache-knopf:focus-visible{background:rgb(138 106 46 / .12)}
.zettel .belegung-hinweis{margin:-.4rem 0 1rem;padding:.6rem .8rem;border-left:3px solid #b3271e;background:rgb(179 39 30 / .07);color:rgb(32 20 15 / .86)}