/* LIDO TAVOLA · Version 2 (21.09.2026)
   Eigene Datei der Demo, alle Regeln auf body.demo-restaurant gekapselt.
   Schrift: Bricolage Grotesque (lokal, _shared/fonts) in Gewicht 200 als breite leichte Versal-Sans.
   Grund: einzige vorhandene Schrift mit echtem Leichtgewicht und geometrisch runden C, G, O;
   Inter Tight 300 läuft enger und kräftiger, Schibsted Grotesk hat kein Leichtgewicht. Die Breite
   kommt aus offener Laufweite. Lese- und Formularschrift: Schibsted Grotesk. */

@font-face{font-family:"LT Display";src:url(../_shared/fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"LT Text";src:url(../_shared/fonts/schibsted-grotesk-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}

.demo-restaurant{
  --oliv:#2B362F; --nacht:#171D19; --salbei:#CCD5C6; --terra:#B75C47; --weiss:#F2EFE5; --rein:#FFFFFF;
  --tinte:#171D19;
  --rand:clamp(20px,3.9vw,56px);
  --nav-h:56px; --nav-oben:24px;
  --display:"LT Display","Helvetica Neue",Arial,sans-serif;
  --text:"LT Text","Helvetica Neue",Arial,sans-serif;
  --lauf:.075em;
  --ease:cubic-bezier(.2,.7,.2,1);
  margin:0; background:var(--nacht); color:var(--weiss);
  font:400 16px/1.5 var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.demo-restaurant *,.demo-restaurant *::before,.demo-restaurant *::after{box-sizing:border-box}
html:has(body.demo-restaurant){scroll-behavior:smooth;background:#171D19}
@media (prefers-reduced-motion:reduce){html:has(body.demo-restaurant){scroll-behavior:auto}}
.demo-restaurant:has(dialog[open]){overflow:hidden}
.demo-restaurant img{display:block;max-width:100%}
.demo-restaurant h1,.demo-restaurant h2,.demo-restaurant h3,.demo-restaurant p,.demo-restaurant ul,.demo-restaurant ol,.demo-restaurant dl,.demo-restaurant dd,.demo-restaurant figure{margin:0;padding:0}
.demo-restaurant button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.demo-restaurant a{color:inherit}
.demo-restaurant [hidden]{display:none !important}
.demo-restaurant .lt-sprite{position:absolute;width:0;height:0;overflow:hidden}
.demo-restaurant .ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo-restaurant :focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.demo-restaurant .lt-skip{position:fixed;left:12px;top:-60px;z-index:60;background:var(--weiss);color:var(--tinte);padding:10px 14px;border-radius:6px;text-decoration:none}
.demo-restaurant .lt-skip:focus{top:12px}
.demo-restaurant .lt-bildhinweis{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* gemeinsame Bausteine */
.demo-restaurant .lt-kicker{font:500 12px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase}
.demo-restaurant .lt-link{display:inline-flex;align-items:center;gap:10px;padding:6px 0 7px;font:500 13px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;min-height:44px;box-sizing:border-box}
.demo-restaurant .lt-link .ic{width:12px;height:12px;transition:transform .25s var(--ease)}
.demo-restaurant .lt-link:hover .ic{transform:translate(2px,-2px)}
.demo-restaurant .lt-knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border:1px solid currentColor;border-radius:4px;font:500 13px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.demo-restaurant .lt-knopf .ic{width:12px;height:12px}
.demo-restaurant .lt-marke{font:300 18px/1 var(--display);letter-spacing:.34em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding-left:.34em}

/* ── Schwebende Navigation ─────────────────────────── */
.demo-restaurant .lt-nav{
  position:fixed;z-index:40;top:var(--nav-oben);left:50%;transform:translateX(-50%);
  width:min(760px,calc(100% - 2*var(--rand)));height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 10px 0 12px;
  border-radius:10px;border:1px solid rgba(242,239,229,.18);
  background:rgba(23,29,25,.8);color:var(--weiss);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.demo-restaurant .lt-nav[data-ton="hell"]{background:rgba(242,239,229,.9);color:var(--tinte);border-color:rgba(23,29,25,.16)}
.demo-restaurant .lt-nav-tisch{justify-self:start;height:36px;padding:0 14px;border:1px solid currentColor;border-radius:3px;font:500 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.demo-restaurant .lt-nav-tisch .kurz{display:none}
.demo-restaurant .lt-nav .lt-marke{justify-self:center}
.demo-restaurant .lt-nav-menue{justify-self:end;width:44px;height:44px;display:grid;place-items:center;border-radius:6px}
.demo-restaurant .lt-nav-menue .ic{width:22px;height:22px;stroke-width:1.4}

/* ── 1 · Küche ─────────────────────────────────────── */
.demo-restaurant .lt-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--nacht);isolation:isolate;outline:none}
.demo-restaurant .lt-hero-medien{position:absolute;inset:0;z-index:-1;transform-origin:50% 40%;will-change:transform}
.demo-restaurant .lt-hero-medien::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(15,19,16,.78) 0%,rgba(15,19,16,.52) 34%,rgba(15,19,16,.08) 62%,rgba(15,19,16,0) 100%),
    linear-gradient(180deg,rgba(15,19,16,.55) 0%,rgba(15,19,16,0) 22%,rgba(15,19,16,0) 70%,rgba(15,19,16,.7) 100%)}
.demo-restaurant .lt-sequenz,.demo-restaurant .lt-hero-film{position:absolute;inset:0;width:100%;height:100%}
.demo-restaurant .lt-hero-film{object-fit:cover;opacity:0;transition:opacity .8s ease}
.demo-restaurant .lt-hero.film-laeuft .lt-hero-film{opacity:1}
.demo-restaurant .lt-hero.film-laeuft .lt-sequenz{visibility:hidden}
.demo-restaurant .lt-sequenz .bild{position:absolute;inset:0;overflow:hidden;opacity:0}
.demo-restaurant .lt-sequenz .bild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform-origin:60% 55%}
.demo-restaurant .lt-sequenz .b1{opacity:1}
/* Sequenz: 12 s Schleife, je Bild 4 s, 1,2 s Überblendung, sehr langsamer Zoom.
   Negative Verzögerungen setzen die drei Bilder phasenversetzt in dieselbe Schleife. */
@keyframes lt-blende{0%{opacity:0}10%{opacity:1}33.333%{opacity:1}43.333%{opacity:0}100%{opacity:0}}
@keyframes lt-zoom{0%{transform:scale(1)}43.333%{transform:scale(1.07)}100%{transform:scale(1.07)}}
.demo-restaurant .lt-sequenz.laeuft .bild{animation:lt-blende 12s linear infinite}
.demo-restaurant .lt-sequenz.laeuft .bild img{animation:lt-zoom 12s linear infinite}
.demo-restaurant .lt-sequenz.laeuft .b1,.demo-restaurant .lt-sequenz.laeuft .b1 img{animation-delay:-1.2s}
.demo-restaurant .lt-sequenz.laeuft .b2,.demo-restaurant .lt-sequenz.laeuft .b2 img{animation-delay:-9.2s}
.demo-restaurant .lt-sequenz.laeuft .b3,.demo-restaurant .lt-sequenz.laeuft .b3 img{animation-delay:-5.2s}
.demo-restaurant .lt-hero.aus-dem-bild .lt-sequenz .bild,.demo-restaurant .lt-hero.aus-dem-bild .lt-sequenz .bild img{animation-play-state:paused}

.demo-restaurant .lt-hero-text{position:relative;padding:calc(var(--nav-oben) + var(--nav-h) + 40px) var(--rand) 150px;max-width:900px}
.demo-restaurant .lt-hero h1{font:200 clamp(40px,6.3vw,98px)/.98 var(--display);letter-spacing:var(--lauf);text-transform:uppercase;margin-left:-.04em}
.demo-restaurant .zeile{display:inline-block}
.demo-restaurant .lt-hero h1 .zeile,.demo-restaurant .lt-zeilen .zeile,.demo-restaurant .lt-tisch h2 .zeile{display:block}
.demo-restaurant .lt-unterzeile{margin-top:26px;font:400 17px/1.4 var(--text);letter-spacing:.01em}
.demo-restaurant .lt-hero-links{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:30px}
.demo-restaurant .nur-mobil{display:none}
.demo-restaurant .lt-hero-fuss{position:absolute;left:0;right:0;bottom:22px;display:flex;min-height:44px;justify-content:space-between;align-items:center;padding:0 var(--rand) 0 max(var(--rand),230px);gap:16px}
.demo-restaurant .lt-kapitel{font:500 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase}
.demo-restaurant .lt-kapitel span{margin-left:14px}

/* Zeilenweises Erscheinen: einmal, 700 ms, 20 px Weg; ohne JS steht der Text sofort */
@keyframes lt-auf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.js .demo-restaurant .lt-hero h1 .zeile{animation:lt-auf .7s var(--ease) both}
.js .demo-restaurant .lt-hero h1 .zeile:nth-child(2){animation-delay:.09s}
.js .demo-restaurant .lt-hero h1 .zeile:nth-child(3){animation-delay:.18s}
.js .demo-restaurant .lt-unterzeile,.js .demo-restaurant .lt-hero-links{animation:lt-auf .7s var(--ease) .28s both}
/* Masken für Versalzeilen: lido.js legt .zeile-in hinein, GSAP schiebt sie von unten in die Maske */
.demo-restaurant .lt-zeilen .zeile{overflow:hidden;padding:.16em 0 .08em;margin:-.16em 0 -.08em}
.demo-restaurant .lt-zeilen .zeile-in{display:inline-block;will-change:transform}

/* ── 2 · Raum ──────────────────────────────────────── */
.demo-restaurant .lt-raum{position:relative;z-index:2;background:var(--salbei);color:var(--tinte);display:grid;grid-template-columns:minmax(0,55fr) minmax(0,40fr) minmax(0,5fr);grid-template-rows:minmax(clamp(560px,42vw,700px),auto) auto;outline:none}
.demo-restaurant .lt-raum-text{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:clamp(64px,6vw,100px) var(--rand) clamp(48px,4.5vw,72px)}
.demo-restaurant .lt-raum h2{font:200 clamp(38px,5.1vw,80px)/1.02 var(--display);letter-spacing:.02em;text-transform:uppercase}
.demo-restaurant .lt-raum h2 .kurz{display:none}
.demo-restaurant .lt-raum-notiz p:last-child{margin-top:8px;font-size:17px}
.demo-restaurant .lt-raum-bild{grid-column:2;grid-row:1;position:relative;z-index:3}
.demo-restaurant .lt-raum-bild .rahmen{position:absolute;inset:0}
.demo-restaurant .lt-raum-tisch{grid-column:1;grid-row:2;margin:clamp(72px,8vw,128px) 0 clamp(72px,8vw,128px) var(--rand);--ar:16/9}
.demo-restaurant .lt-raum-fakten{grid-column:2;grid-row:2;list-style:none;align-self:center;padding:clamp(48px,6vw,96px) 0 clamp(48px,6vw,96px) clamp(28px,4vw,64px)}
.demo-restaurant .lt-raum-fakten li{padding:22px 0;border-top:1px solid rgba(23,29,25,.28)}
.demo-restaurant .lt-raum-fakten li p:last-child{margin-top:8px;font-size:16px;line-height:1.5;max-width:40ch}

/* Bildrahmen mit Parallaxe-Reserve und Clip-Reveal */
.demo-restaurant .lt-clip{position:relative}
.demo-restaurant .lt-clip .rahmen{position:relative;overflow:hidden;background:#3a3f38;aspect-ratio:var(--ar,4/5)}
.demo-restaurant .lt-clip .rahmen img{position:absolute;left:0;top:-44px;width:100%;height:calc(100% + 88px);object-fit:cover;will-change:transform}
.demo-restaurant .lt-flaeche{position:absolute;inset:0;z-index:0;background:var(--von);opacity:0;pointer-events:none}

/* ── Die Küche (Oliv) ──────────────────────────────── */
.demo-restaurant .lt-handwerk{position:relative;background:var(--oliv);color:var(--weiss);padding:clamp(96px,10vw,160px) var(--rand) clamp(96px,10vw,160px);outline:none;overflow:hidden}
.demo-restaurant .lt-handwerk>*:not(.lt-flaeche){position:relative;z-index:1}
.demo-restaurant .lt-handwerk-kopf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:end}
.demo-restaurant .lt-handwerk-kopf .lt-kicker{grid-column:1/-1;margin-bottom:22px}
.demo-restaurant .lt-handwerk h2{grid-column:1/8;font:200 clamp(52px,9vw,150px)/.94 var(--display);letter-spacing:.05em;text-transform:uppercase}
.demo-restaurant .lt-handwerk-intro{grid-column:8/13;font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:40ch;padding-bottom:12px}
.demo-restaurant .lt-band{margin:clamp(64px,7vw,112px) calc(-1 * var(--rand)) 0;--ar:21/9}
.demo-restaurant .lt-station{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(80px,9vw,150px);align-items:start}
.demo-restaurant .lt-station-text .nr{font:500 12px/1 var(--text);letter-spacing:.16em;color:#CCD5C6}
.demo-restaurant .lt-station-text h3{margin:14px 0 16px;font:200 clamp(30px,3.2vw,48px)/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.demo-restaurant .lt-station-text p:not(.nr){font-size:17px;line-height:1.6;max-width:38ch;color:#E6E3D9}
.demo-restaurant .s-handwerk>figure:first-child{grid-column:1/9;--ar:16/10}
.demo-restaurant .s-handwerk .lt-klein{grid-column:9/12;grid-row:1;align-self:end;--ar:4/5}
.demo-restaurant .s-handwerk .lt-station-text{grid-column:9/13;grid-row:2}
.demo-restaurant .s-zutaten .lt-station-text{grid-column:2/6;align-self:center}
.demo-restaurant .s-zutaten figure{grid-column:6/13;--ar:3/2}
.demo-restaurant .s-pass figure{grid-column:1/-1;margin:0 calc(-1 * var(--rand));--ar:16/7}
.demo-restaurant .s-pass .lt-station-text{grid-column:7/12}

/* ── 3 · Karte ─────────────────────────────────────── */
.demo-restaurant .lt-karte{position:relative;display:grid;grid-template-columns:minmax(0,59fr) minmax(0,41fr);min-height:clamp(640px,58vw,900px);background:var(--nacht);outline:none}
.demo-restaurant .lt-karte-bild{position:relative;overflow:hidden;background:var(--nacht)}
.demo-restaurant .lt-karte-bild .gericht{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.demo-restaurant .lt-karte-bild .gericht.ist-aktiv{opacity:1}
.demo-restaurant .lt-karte-feld{position:relative;background:var(--terra);color:var(--rein);padding:clamp(72px,6.5vw,112px) var(--rand) 40px clamp(28px,4.6vw,66px);display:flex;flex-direction:column}
.demo-restaurant .lt-karte h2{margin-top:18px;font:200 clamp(38px,4.4vw,68px)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--weiss)}
.demo-restaurant .lt-speisen{list-style:none;margin-top:clamp(40px,5vw,72px)}
.demo-restaurant .lt-speisen li{border-bottom:1px solid rgba(255,255,255,.62)}
.demo-restaurant .lt-speisen button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 0;text-align:left;font:400 16px/1.3 var(--text);letter-spacing:.06em;color:var(--rein)}
.demo-restaurant .lt-speisen button::after{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:1px solid currentColor;transition:background-color .2s}
.demo-restaurant .lt-speisen button[aria-pressed="true"]{font-weight:600}
.demo-restaurant .lt-speisen button[aria-pressed="true"]::after{background:currentColor}
.demo-restaurant .lt-speisen .info{padding:0 0 14px;font-size:15px;line-height:1.45;color:var(--rein)}
.demo-restaurant .lt-karte-aktionen{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(36px,4vw,56px)}
.demo-restaurant .lt-karte-marke{margin-top:auto;padding-top:40px;align-self:flex-end;font:500 11px/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase}

/* ── Speisekarte (Elfenbein) ───────────────────────── */
.demo-restaurant .lt-menuekarte{position:relative;background:var(--weiss);color:var(--tinte);padding:clamp(96px,10vw,160px) var(--rand);outline:none;overflow:hidden}
.demo-restaurant .lt-menuekarte>*:not(.lt-flaeche){position:relative;z-index:1}
.demo-restaurant .lt-menuekarte-kopf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px 24px;align-items:end}
.demo-restaurant .lt-menuekarte-kopf>*{grid-column:1/-1}
.demo-restaurant .lt-menuekarte h2{font:200 clamp(48px,9.4vw,156px)/.94 var(--display);letter-spacing:.04em;text-transform:uppercase}
.demo-restaurant .lt-menuekarte-hinweis{grid-column:1/7 !important;font-size:16px;line-height:1.55;color:#3d4640;max-width:56ch}
.demo-restaurant .lt-menuekarte-kopf>p:last-child{grid-column:8/13 !important;justify-self:end}
.demo-restaurant .lt-gaenge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,80px) clamp(24px,3vw,48px);margin-top:clamp(64px,7vw,112px);align-items:start}
.demo-restaurant .lt-gang-bild{margin-bottom:26px;--ar:4/3}
.demo-restaurant .lt-gang:nth-child(3n+2){margin-top:clamp(0px,6vw,96px)}
.demo-restaurant .lt-gang h3,.demo-restaurant .lt-speisekarte h3{font:500 12px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid rgba(23,29,25,.3)}
.demo-restaurant .lt-gang dl>div,.demo-restaurant .lt-speisekarte dl>div{padding:16px 0;border-bottom:1px solid rgba(23,29,25,.14)}
.demo-restaurant .lt-gang dt,.demo-restaurant .lt-speisekarte dt{font:500 19px/1.3 var(--text)}
.demo-restaurant .lt-gang dd,.demo-restaurant .lt-speisekarte dd{margin-top:4px;font-size:16px;color:#3d4640}
.demo-restaurant .lt-sk-gaenge .lt-gang{margin-top:44px !important}
.demo-restaurant .lt-sk-gaenge .lt-gang-bild{display:none}

/* ── 4 · Abend ─────────────────────────────────────── */
.demo-restaurant .lt-abend{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--oliv);outline:none;isolation:isolate}
.demo-restaurant .lt-abend-medien{position:absolute;inset:0;z-index:-1;overflow:hidden}
.demo-restaurant .lt-abend-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.demo-restaurant .lt-abend-unter{max-width:46ch;margin:-12px 0 28px;font-size:17px;line-height:1.55}
.demo-restaurant .lt-abend::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,19,16,.35) 0%,rgba(15,19,16,.05) 30%,rgba(15,19,16,.6) 62%,rgba(15,19,16,.85) 100%),linear-gradient(90deg,rgba(15,19,16,.5) 0%,rgba(15,19,16,0) 60%)}
.demo-restaurant .lt-abend-text{padding:0 var(--rand) clamp(96px,10vw,140px);max-width:980px}
.demo-restaurant .lt-abend h2{margin:16px 0 36px;font:200 clamp(40px,6.4vw,100px)/.98 var(--display);letter-spacing:var(--lauf);text-transform:uppercase}
.demo-restaurant .lt-abend .lt-knopf{background:rgba(23,29,25,.5)}

/* ── Fuß ───────────────────────────────────────────── */
.demo-restaurant .lt-fuss{background:var(--nacht);color:var(--weiss);padding:56px var(--rand) 104px;display:grid;grid-template-columns:1fr 1.4fr auto;gap:24px 48px;align-items:start;border-top:1px solid rgba(242,239,229,.12)}
.demo-restaurant .lt-fuss-marke{font:300 18px/1.3 var(--display);letter-spacing:.34em}
.demo-restaurant .lt-fuss-hinweis{font-size:14px;line-height:1.55;color:#D9D6CC;max-width:52ch}
.demo-restaurant .lt-fuss-hinweis strong{color:var(--weiss);font-weight:600}
.demo-restaurant .lt-fuss-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px}

/* ── Ebenen: Menü, Speisekarte, Tischanfrage ───────── */
.demo-restaurant .lt-ebene{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:auto;overscroll-behavior:contain}
.demo-restaurant .lt-ebene::backdrop{background:rgba(15,19,16,.4)}
.demo-restaurant .lt-ebene[open]{display:flex;flex-direction:column}
.js .demo-restaurant .lt-ebene[open]{animation:lt-ebene-auf .38s var(--ease)}
@keyframes lt-ebene-auf{from{opacity:0}to{opacity:1}}
.demo-restaurant .lt-ebene-kopf{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:calc(var(--nav-oben) + var(--nav-h) + 8px);padding:var(--nav-oben) var(--rand) 8px;background:inherit}
.demo-restaurant .lt-ebene-kopf .lt-marke{grid-column:2}
.demo-restaurant .lt-schliessen{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font:500 15px/1 var(--text)}
.demo-restaurant .lt-schliessen .ic{width:18px;height:18px}
.demo-restaurant .lt-ebene-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;padding:20px var(--rand) 24px;font-size:14px}

.demo-restaurant .lt-menue{background:var(--salbei);color:var(--tinte)}
.demo-restaurant .lt-menue-innen{flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(12px,3vw,40px) var(--rand) 0;align-items:stretch}
.demo-restaurant .lt-menue-liste{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,2.2vh,24px);height:100%}
.demo-restaurant .lt-menue-liste a,.demo-restaurant .lt-menue-liste button{display:block;text-align:left;text-decoration:none;color:inherit;padding:4px 0}
.demo-restaurant .lt-menue-liste .nr{display:block;font:500 12px/1 var(--text);letter-spacing:.12em;margin-bottom:6px}
.demo-restaurant .lt-menue-liste .wort{display:block;font:200 clamp(38px,min(6.2vw,9.5vh),96px)/1.02 var(--display);letter-spacing:.02em;text-transform:uppercase;transition:transform .3s var(--ease)}
.demo-restaurant .lt-menue-liste a:hover .wort,.demo-restaurant .lt-menue-liste button:hover .wort{transform:translateX(10px)}
.demo-restaurant .lt-menue-bild{position:relative;min-height:260px;overflow:hidden;background:#3a3a33}
.demo-restaurant .lt-menue-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.demo-restaurant .lt-speisekarte,.demo-restaurant .lt-tisch{background:var(--weiss);color:var(--tinte)}
.demo-restaurant .lt-blatt{width:100%;max-width:640px;margin:0 auto;padding:clamp(24px,5vh,56px) var(--rand) 72px}
.demo-restaurant .lt-blatt h2{font:200 clamp(40px,6vw,76px)/1 var(--display);letter-spacing:.03em;text-transform:uppercase;margin-top:10px}
.demo-restaurant .lt-tisch .lt-blatt h2{margin-top:0;font-size:clamp(36px,4.4vw,60px)}
.demo-restaurant .lt-tisch .lt-blatt{padding-top:clamp(12px,3vh,40px)}
.demo-restaurant .lt-tisch .lt-formular{margin-top:24px;gap:14px}
.demo-restaurant .lt-tisch #zf-titel{font-size:clamp(32px,4vw,52px)}
.demo-restaurant .lt-blatt-unter{margin-top:14px;font-size:18px}
.demo-restaurant .lt-blatt-hinweis{margin-top:22px;font-size:15px;line-height:1.55;color:#3d4640}
.demo-restaurant .lt-blatt-aktion{margin-top:44px}

.demo-restaurant .lt-formular{margin-top:32px;display:flex;flex-direction:column;gap:18px}
.demo-restaurant .feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.demo-restaurant .feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-restaurant .feld label{font:500 15px/1.2 var(--text)}
.demo-restaurant .feld .optional{font-weight:400;color:#4a524c}
.demo-restaurant .feld input,.demo-restaurant .feld select,.demo-restaurant .feld textarea{
  width:100%;min-width:0;min-height:52px;padding:12px 14px;font:400 17px/1.3 var(--text);color:var(--tinte);
  background:#FBFAF6;border:1px solid rgba(23,29,25,.38);border-radius:4px;appearance:none;-webkit-appearance:none}
.demo-restaurant .feld select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171D19' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.demo-restaurant .feld textarea{resize:vertical;min-height:96px}
.demo-restaurant .feld input::placeholder,.demo-restaurant .feld textarea::placeholder{color:#6a716b}
.demo-restaurant .feld input:focus-visible,.demo-restaurant .feld select:focus-visible,.demo-restaurant .feld textarea:focus-visible{outline:2px solid var(--tinte);outline-offset:1px}
.demo-restaurant .feld [aria-invalid="true"]{border-color:#9c3a28;box-shadow:inset 0 0 0 1px #9c3a28}
.demo-restaurant .lt-fehler{font-size:15px;color:#8f3322;font-weight:500}
.demo-restaurant .lt-knopf-voll{width:100%;margin-top:8px;min-height:56px;background:var(--terra);border-color:var(--terra);color:var(--rein);font-weight:600}
.demo-restaurant .lt-knopf-voll:hover{background:#a7513d}
.demo-restaurant .lt-demo-hinweis{text-align:center;font-size:14px;color:#3d4640}
.demo-restaurant .lt-zusammenfassung{margin-top:30px;border-top:1px solid rgba(23,29,25,.3)}
.demo-restaurant .lt-zusammenfassung>div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgba(23,29,25,.14)}
.demo-restaurant .lt-zusammenfassung dt{font-size:14px;color:#3d4640}
.demo-restaurant .lt-zusammenfassung dd{font-size:17px;overflow-wrap:anywhere}
.demo-restaurant .lt-zf-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.demo-restaurant #zf-titel{outline:none}

/* ── Tablet und Handy ──────────────────────────────── */
@media (max-width:900px){
  .demo-restaurant .lt-raum{grid-template-columns:1fr;grid-template-rows:none}
  .demo-restaurant .lt-raum-text{padding:72px var(--rand) 28px;gap:28px}
  .demo-restaurant .lt-raum-bild{grid-column:1;grid-row:auto;margin:0 var(--rand);aspect-ratio:4/5;max-height:78vh}
  .demo-restaurant .lt-raum-tisch{grid-column:1;grid-row:auto;margin:56px var(--rand) 0}
  .demo-restaurant .lt-raum-fakten{grid-column:1;grid-row:auto;padding:32px var(--rand) 72px}
  .demo-restaurant .lt-handwerk h2,.demo-restaurant .lt-handwerk-intro{grid-column:1/-1}
  .demo-restaurant .lt-handwerk-intro{margin-top:28px}
  .demo-restaurant .lt-station{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
  .demo-restaurant .s-handwerk>figure:first-child{grid-column:1/-1}
  .demo-restaurant .s-handwerk .lt-klein{grid-column:1/4;grid-row:auto;margin-top:0}
  .demo-restaurant .s-handwerk .lt-station-text{grid-column:4/7;grid-row:auto;align-self:end}
  .demo-restaurant .s-zutaten .lt-station-text{grid-column:1/-1;order:2}
  .demo-restaurant .s-zutaten figure{grid-column:1/-1}
  .demo-restaurant .s-pass figure{--ar:4/3}
  .demo-restaurant .s-pass .lt-station-text{grid-column:1/-1}
  .demo-restaurant .lt-gaenge{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-restaurant .lt-gang:nth-child(3n+2){margin-top:0}
  .demo-restaurant .lt-gang:nth-child(2n){margin-top:clamp(0px,8vw,72px)}
  .demo-restaurant .lt-menuekarte-hinweis,.demo-restaurant .lt-menuekarte-kopf>p:last-child{grid-column:1/-1 !important;justify-self:start}
  .demo-restaurant .lt-karte{grid-template-columns:1fr;min-height:0}
  .demo-restaurant .lt-karte-bild{aspect-ratio:4/5;max-height:88vh}
  .demo-restaurant .lt-karte-feld{padding:64px var(--rand) 36px}
  .demo-restaurant .lt-fuss{grid-template-columns:1fr}
  .demo-restaurant .lt-menue-innen{grid-template-columns:1fr;padding-left:0;padding-right:0}
  .demo-restaurant .lt-menue nav{padding:0 var(--rand)}
  .demo-restaurant .lt-menue-bild{min-height:0;aspect-ratio:1/1;max-height:46vh}
  .demo-restaurant .lt-menue-liste{justify-content:flex-start}
}
@media (max-width:700px){
  .demo-restaurant{--nav-oben:12px;--nav-h:52px;--rand:24px}
  .demo-restaurant .feld-paar.nur-breit{grid-template-columns:1fr;gap:14px}
  .demo-restaurant .lt-nav{width:calc(100% - 24px);padding:0 6px 0 8px}
  .demo-restaurant .lt-marke{font-size:16px;letter-spacing:.28em;padding-left:.28em}
  .demo-restaurant .lt-hero{justify-content:flex-end}
  .demo-restaurant .lt-hero-text{padding:calc(var(--nav-oben) + var(--nav-h) + 32px) var(--rand) 128px}
  .demo-restaurant .lt-hero h1{font-size:clamp(33px,11vw,52px);letter-spacing:.045em}
  .demo-restaurant .lt-hero-medien::after{background:linear-gradient(180deg,rgba(15,19,16,.55) 0%,rgba(15,19,16,.05) 26%,rgba(15,19,16,.25) 46%,rgba(15,19,16,.82) 78%,rgba(15,19,16,.9) 100%)}
  .demo-restaurant .lt-sequenz .bild img{object-position:72% 50%}
  .demo-restaurant .nur-mobil{display:inline-flex}
  .demo-restaurant .lt-hero-links{flex-direction:column;align-items:flex-start;gap:6px;margin-top:22px}
  .demo-restaurant .lt-unterzeile{margin-top:16px;font-size:16px}
  .demo-restaurant .lt-hero-fuss{bottom:18px;padding:0 var(--rand)}
  .demo-restaurant .lt-kapitel{visibility:hidden}
  .demo-restaurant .lt-raum h2 .lang{display:none}
  .demo-restaurant .lt-raum h2 .kurz{display:block}
  .demo-restaurant .lt-raum h2{font-size:clamp(34px,10.4vw,52px)}
  .demo-restaurant .lt-karte h2{font-size:clamp(34px,10.4vw,52px);letter-spacing:.04em}
  .demo-restaurant .lt-abend h2{font-size:clamp(34px,10.8vw,56px);letter-spacing:.04em}
  .demo-restaurant .lt-abend{min-height:88svh}
  .demo-restaurant .lt-abend-bild{object-position:40% 50%}
  .demo-restaurant .lt-abend::after{background:linear-gradient(180deg,rgba(15,19,16,.4) 0%,rgba(15,19,16,.1) 25%,rgba(15,19,16,.78) 55%,rgba(15,19,16,.9) 100%)}
  .demo-restaurant .lt-karte-marke{align-self:flex-start}
  .demo-restaurant .lt-fuss{padding-bottom:96px}
  .demo-restaurant .lt-ebene-kopf{grid-template-columns:auto 1fr auto;padding-top:14px}
  .demo-restaurant .lt-ebene-kopf .lt-marke{grid-column:2;justify-self:center}
  .demo-restaurant .lt-menue-liste .wort{font-size:clamp(30px,10.4vw,48px)}
  .demo-restaurant .lt-blatt h2{font-size:clamp(34px,11vw,56px)}
  .demo-restaurant .lt-handwerk h2{font-size:clamp(46px,15vw,72px)}
  .demo-restaurant .lt-menuekarte h2{font-size:clamp(34px,10.6vw,64px);letter-spacing:.03em}
  .demo-restaurant .lt-gaenge{grid-template-columns:1fr}
  .demo-restaurant .lt-gang:nth-child(2n){margin-top:0}
  .demo-restaurant .s-handwerk .lt-klein{grid-column:1/4}
  .demo-restaurant .s-handwerk .lt-station-text{grid-column:1/-1}
  .demo-restaurant .lt-band{--ar:4/3}
}
@media (max-width:420px){
  .demo-restaurant .lt-nav-tisch{padding:0 10px}
  .demo-restaurant .lt-nav-tisch .lang{display:none}
  .demo-restaurant .lt-nav-tisch .kurz{display:inline}
}
@media (max-width:360px){
  .demo-restaurant{--rand:18px}
  .demo-restaurant .lt-marke{font-size:14px;letter-spacing:.22em;padding-left:.22em}
  .demo-restaurant .feld-paar{grid-template-columns:1fr}
  .demo-restaurant .lt-zusammenfassung>div{grid-template-columns:1fr;gap:2px}
}
/* kurze Fenster: Text darf nicht verloren gehen */
@media (max-height:700px) and (min-width:701px){
  .demo-restaurant .lt-hero-text{padding-top:calc(var(--nav-oben) + var(--nav-h) + 24px);padding-bottom:96px}
  .demo-restaurant .lt-hero h1{font-size:clamp(40px,min(6.3vw,11vh),98px)}
  .demo-restaurant .lt-menue-liste .wort{font-size:clamp(30px,min(6.2vw,8.6vh),96px)}
}

/* ── Reduzierte Bewegung: Poster, sofortige Wechsel ── */
@media (prefers-reduced-motion:reduce){
  .demo-restaurant *,.demo-restaurant *::before,.demo-restaurant *::after{animation:none !important;transition:none !important}
  .demo-restaurant .lt-sequenz .bild{opacity:0 !important}
  .demo-restaurant .lt-sequenz .b1{opacity:1 !important}
  .demo-restaurant .lt-sequenz .bild img{transform:none !important}
  .demo-restaurant .lt-flaeche{display:none}
}