/* ==========================================================================
   CASA CROCO — Verkaufsfassung
   Dunkel, ohne Gold, ohne Partikel. Die Fotos tragen die Seite.
   Akzent ist ein gedaempftes Rot aus der Markise vor dem Laden.
   ========================================================================== */

:root{
  --ink:#EFE9E1;
  --ink-2:#B5ADA2;
  --ink-3:#7E776D;
  --rojo:#9E3B2E;
  --rojo-hell:#C25A49;
  --line:#232120;
  --nacht:#0A0A0B;
  --nacht-2:#111112;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,80px);
  --w:1440px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--nacht);color:var(--ink);font-family:var(--sans);
  font-weight:300;font-size:16px;line-height:1.7;overflow-x:clip;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--rojo);color:#fff}
:focus-visible{outline:2px solid var(--rojo-hell);outline-offset:3px}

/* ---------- wiederkehrende Bausteine ---------- */
.kick{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--rojo-hell);font-weight:400}
.sec-head{max-width:720px;margin:0 auto 70px;text-align:center}
.sec-head h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.1;margin-top:18px}
.sec-head h2 em{font-style:italic;color:var(--ink-2)}
.sec-lead{margin-top:22px;color:var(--ink-3);font-size:1.02rem;line-height:1.9}

/* Einblenden beim Scrollen — eine einzige, ruhige Bewegung */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.rv.on{opacity:1;transform:none}

.sec-head.rv{transform:none;opacity:1}
.sec-head.rv h2,.sec-head.rv .sec-lead{
  opacity:0;transform:perspective(800px) rotateX(70deg) translateY(30px);transform-origin:bottom center;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.sec-head.rv .sec-lead{transition-delay:.08s}
.sec-head.rv.on h2,.sec-head.rv.on .sec-lead{opacity:1;transform:none}

/* Die Speisenreihen fahren nacheinander von unten ein: laengerer Weg,
   kuerzere Dauer. Den Versatz je Bild setzt main.js. */
.tapas figure.rv,.platos figure.rv,.postres figure.rv{
  transform:translateY(72px);
  transition:opacity .4s cubic-bezier(.22,1,.36,1),
             transform .4s cubic-bezier(.22,1,.36,1)}
.tapas figure.rv.on,.platos figure.rv.on,.postres figure.rv.on{transform:none}

/* ---------- Vorhang ----------
   Der Name blendet an Ort und Stelle ein, steht kurz und blendet wieder
   aus. Erst danach verschwindet der Vorhang. */
.curtain{position:fixed;inset:0;z-index:999;background:var(--nacht);
  display:grid;place-items:center;
  transition:opacity .8s ease 1s,visibility 0s 1.8s}
.curtain.weg{opacity:0;visibility:hidden}
.curtain-in{overflow:hidden;padding:.25em 0}
.curtain-word{display:block;font-family:var(--serif);
  font-size:clamp(1.3rem,4.2vw,2rem);letter-spacing:.44em;text-indent:.44em;
  opacity:0;
  animation:wort-rein 1.6s ease .2s forwards}
@keyframes wort-rein{from{opacity:0}to{opacity:1}}
.curtain.weg .curtain-word{
  animation:wort-raus 1.2s ease forwards}
@keyframes wort-raus{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .curtain-word{opacity:1;animation:none}
  .curtain.weg .curtain-word{animation:none}
}

/* ---------- Kopfzeile ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:90;height:92px;
  display:flex;align-items:center;gap:40px;padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:height .45s ease,background-color .45s,border-color .45s,backdrop-filter .45s}
.top.fest{height:68px;background:rgba(10,10,11,.86);backdrop-filter:blur(16px);
  border-bottom-color:var(--line)}
.top-mark{font-family:var(--serif);font-size:1.12rem;letter-spacing:.3em;
  text-indent:.3em;white-space:nowrap}
.top-nav{display:flex;gap:34px;margin-left:auto;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase}
.top-nav a{color:var(--ink-2);transition:color .35s}
.top-nav a:hover{color:var(--ink)}
.top-cta{padding:11px 26px;border:1px solid rgba(239,233,225,.35);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .4s,color .4s,border-color .4s}
.top-cta:hover{background:var(--ink);color:var(--nacht);border-color:var(--ink)}
.top-burger{display:none;margin-left:auto;width:34px;height:24px;
  background:none;border:0;cursor:pointer;position:relative}
.top-burger i{position:absolute;left:0;width:100%;height:1px;background:var(--ink);
  transition:transform .4s ease,opacity .3s}
.top-burger i:first-child{top:7px}
.top-burger i:last-child{top:16px}
.top-burger[aria-expanded="true"] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.top-burger[aria-expanded="true"] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* Vollbildmenü */
.sheet{position:fixed;inset:0;z-index:80;background:var(--nacht);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.sheet[hidden]{display:none}
.sheet a{font-family:var(--serif);font-size:2.6rem;line-height:1.6}
.sheet a:hover{color:var(--rojo-hell)}
.sheet-adr{margin-top:34px;color:var(--ink-3);font-size:.85rem;letter-spacing:.12em}

/* ---------- Kopfbild ---------- */
.hero{position:relative;height:100svh;min-height:580px;overflow:hidden;
  display:grid;place-items:center;text-align:center}
.hero-pics{position:absolute;inset:0}
.hero-pic{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.hero-pic.is-on{opacity:1}
.hero-pic img{width:100%;height:100%;object-fit:cover;filter:brightness(.82)}
/* Der Gastraum ist hell: weisse Wand, helle Tischdecken. Ohne diese Deckung
   verschwinden die beiden Unterzeilen unter dem Namen. */
.hero-pics::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,11,.84) 0%,rgba(10,10,11,.58) 20%,
    rgba(10,10,11,.7) 56%,rgba(10,10,11,.94) 100%)}

.hero-txt{position:relative;z-index:2;padding:0 20px}
.hero-kick{font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 18px rgba(0,0,0,.8)}
.hero-name{font-family:var(--serif);font-weight:400;
  font-size:clamp(3.2rem,11vw,9rem);line-height:1;letter-spacing:.1em;text-indent:.1em;
  margin-top:26px;text-shadow:0 2px 24px rgba(0,0,0,.85),0 1px 70px rgba(0,0,0,.6)}
.hero-line{display:block;width:min(420px,56vw);height:1px;margin:34px auto 0;
  background:rgba(239,233,225,.42);transform:scaleX(0);will-change:transform;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .18s}
.hero-sub{margin-top:30px;font-size:1.06rem;line-height:1.9;color:var(--ink);
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 22px rgba(0,0,0,.85)}
.hero-btn{position:relative;isolation:isolate;display:inline-block;margin-top:46px;padding:17px 45px;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
/* Der Rahmen zeichnet sich selbst: oben und unten von links, dann die Seiten */
.hero-btn::before,.hero-btn::after{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;will-change:transform;
  transition:transform .75s cubic-bezier(.65,0,.35,1),background-color .4s,border-color .4s}
.hero-btn::before{border-top:1px solid rgba(239,233,225,.75);border-bottom:1px solid rgba(239,233,225,.75);
  background:rgba(10,10,11,.38);transform:scaleX(0);transform-origin:left center;transition-delay:.35s,0s,0s}
.hero-btn::after{border-left:1px solid rgba(239,233,225,.75);border-right:1px solid rgba(239,233,225,.75);
  transform:scaleY(0);transform-origin:center bottom;transition-delay:.95s,0s,0s}
.hero.an .hero-btn::before{transform:scaleX(1)}
.hero.an .hero-btn::after{transform:scaleY(1)}
.hero-btn:hover{color:var(--nacht);text-shadow:none}
.hero-btn:hover::before{background:var(--ink);border-color:var(--ink);transition-delay:0s}
.hero-btn:hover::after{border-color:var(--ink);transition-delay:0s}
.hero.an .hero-line{transform:scaleX(1)}

.hero-dots{position:absolute;bottom:40px;right:var(--pad);z-index:2;display:flex;gap:9px}
.hero-dots i{width:5px;height:5px;border-radius:50%;background:rgba(239,233,225,.3);
  transition:background-color .5s}
.hero-dots i.is-on{background:var(--ink)}
.hero-scroll{position:absolute;bottom:40px;left:var(--pad);z-index:2;
  width:1px;height:58px;background:rgba(239,233,225,.2);overflow:hidden}
.hero-scroll span{position:absolute;inset:0;background:var(--ink);
  transform:translateY(-100%);animation:tropf 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes tropf{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ---------- Laufband ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;overflow:hidden;background:var(--nacht-2)}
.band-run{display:flex;gap:30px;white-space:nowrap;width:max-content;
  animation:lauf 46s linear infinite;align-items:center}
.band-run span{font-family:var(--serif);font-size:1.5rem;color:var(--ink-2)}
.band-run i{color:var(--rojo);font-style:normal}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ---------- Haltung ---------- */
.credo{max-width:var(--w);margin:0 auto;padding:clamp(100px,14vw,190px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.credo-txt h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,3.6vw,3.5rem);line-height:1.22;margin-top:22px}
.credo-txt h2 em{font-style:italic;color:var(--ink-2)}
.credo-lead{margin-top:32px;color:var(--ink-3);font-size:1.02rem;line-height:1.95;max-width:46ch}
.credo-sig{margin-top:34px;font-size:.74rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}
.credo-pic{aspect-ratio:4/5;overflow:hidden}
.credo-pic img{width:100%;height:100%;object-fit:cover}

/* ---------- Cocina: Bild bleibt stehen, Text laeuft durch ---------- */
.cocina{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(40px,6vw,90px);align-items:start;padding:0 var(--pad) clamp(90px,12vw,170px)}
.cocina-stick{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.cocina-pic{position:absolute;left:0;width:100%;aspect-ratio:4/5;max-height:76svh;
  overflow:hidden;opacity:0;transition:opacity 1.1s ease}
.cocina-pic.is-on{opacity:1}
.cocina-pic img{width:100%;height:100%;object-fit:cover}
.cocina-txt{padding-top:28svh}
.cocina-step{min-height:78svh;display:flex;flex-direction:column;justify-content:center;
  max-width:440px;opacity:.26;transition:opacity .8s ease}
.cocina-step.is-on{opacity:1}
.cocina-step h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,3.4vw,3.6rem);line-height:1.16;margin:16px 0 20px}
.cocina-step p{color:var(--ink-3);font-size:1.04rem;line-height:1.95}
.cocina-step .preis{margin-top:24px;font-family:var(--serif);font-size:1.6rem;color:var(--ink)}

/* ---------- Angebot ---------- */
.oferta{max-width:var(--w);margin:0 auto;padding:clamp(70px,9vw,120px) var(--pad);
  text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.oferta h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,5vw,4rem);line-height:1.14;margin-top:20px}
.oferta h2 em{font-style:italic;color:var(--ink-2)}
/* Der Untertitel traegt jetzt einen ganzen Satz: Zeile begrenzen und mittig halten. */
.oferta-sub{max-width:40ch;margin:16px auto 0;color:var(--ink-3);font-size:.95rem;line-height:1.8}
.oferta-preis{margin-top:26px;font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.4rem);
  color:var(--rojo-hell);line-height:1}

/* ---------- Carta ---------- */
.carta{max-width:var(--w);margin:0 auto;padding:clamp(100px,13vw,180px) var(--pad)}
.carta-note{margin-top:70px;text-align:center;color:var(--ink-3);font-size:.82rem}

/* Knopf zur vollstaendigen Speisekarte */
.karte-pdf{display:inline-flex;align-items:center;gap:16px;margin-top:34px;
  padding:15px 26px;border:1px solid var(--line);background:none;cursor:pointer;
  font-family:inherit;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
  transition:border-color .4s,color .4s,background-color .4s}
.karte-pdf i{font-style:normal;font-size:.66rem;letter-spacing:.18em;color:var(--rojo-hell)}
.karte-pdf:hover{border-color:var(--rojo);color:var(--ink);background:rgba(158,59,46,.1)}

/* Zwischenueberschrift zwischen den Bildgruppen */
.unter-kick{margin:clamp(80px,10vw,130px) 0 clamp(26px,3vw,40px);
  font-size:.68rem;letter-spacing:.38em;text-transform:uppercase;color:var(--rojo-hell)}

/* Tapas: Hochformate bleiben ganz, klein und leicht versetzt */
.tapas{margin-top:clamp(60px,7vw,90px);
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.9vw,30px);align-items:start}
.tapas figure{background:var(--nacht-2)}
.tapas img{display:block;width:100%;height:auto}
.tapas figure:nth-child(2){margin-top:clamp(26px,4vw,64px)}
.tapas figure:nth-child(4){margin-top:clamp(16px,2.6vw,42px)}
.tapas figure:nth-child(5){margin-top:clamp(36px,5.4vw,88px)}
.tapas figure:nth-child(6){margin-top:clamp(10px,1.6vw,26px)}

/* Von oben fotografiert: quadratischer Ausschnitt, der Teller bleibt rund */
.platos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.9vw,30px)}
.platos figure{background:var(--nacht-2)}
.platos img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.platos figure:hover img{transform:scale(1.03)}

/* Postres */
.postres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.9vw,30px)}
.postres figure{background:var(--nacht-2)}
.postres img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.postre-feld{display:grid;place-items:center;aspect-ratio:1/1;
  border:1px solid var(--line);background:var(--nacht-2)}
.postre-feld em{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;text-align:center;color:var(--ink-2)}

/* Gemeinsame Bildunterschrift fuer Tapas, Platos und Postres */
.tapas figcaption,.platos figcaption,.postres figcaption{
  display:flex;align-items:baseline;gap:10px;margin-top:16px}
.tapas figcaption b,.platos figcaption b,.postres figcaption b{
  font-family:var(--serif);font-weight:400;font-size:1.06rem;line-height:1.35;color:var(--ink)}
.tapas figcaption::before,.platos figcaption::before,.postres figcaption::before{
  content:"";order:1;flex:1;height:1px;background:var(--line);transform:translateY(-4px)}
.tapas figcaption span,.platos figcaption span,.postres figcaption span{
  order:2;font-family:var(--serif);font-size:1.02rem;color:var(--ink-3);white-space:nowrap}

/* ---------- Comedor ---------- */
.comedor{max-width:var(--w);margin:0 auto;padding:0 var(--pad) clamp(100px,13vw,180px)}
.comedor-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,30px)}
.comedor-grid figure{overflow:hidden;background:var(--nacht-2);grid-column:span 3}
/* Wie oben in der Carta: ein breites Querformat, daneben ein schmales Hochformat.
   In der naechsten Reihe andersherum. */
.comedor-grid .quer{grid-column:span 4}
.comedor-grid .hoch{grid-column:span 2}
.comedor-grid img{width:100%;height:100%;object-fit:cover}
.comedor-grid .quer img{aspect-ratio:3/2}
.comedor-grid .hoch img{aspect-ratio:3/4}

/* ---------- Vinos ---------- */
.vinos{background:var(--nacht-2);border-top:1px solid var(--line);
  padding:clamp(100px,13vw,180px) 0}
/* Drei Flaschen gross nebeneinander, die beiden anderen liegen rechts daneben
   und werden durch seitliches Wischen sichtbar. */
.vino-bahn-wrap{max-width:var(--w);margin:clamp(50px,6vw,80px) auto 0}
.vino-bahn{display:flex;gap:clamp(16px,2.2vw,36px);
  padding:0 var(--pad) 8px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.vino-bahn::-webkit-scrollbar{display:none}
.vino-kar{flex:0 0 clamp(240px,30%,440px);scroll-snap-align:center}
.vino-kar img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  background:var(--nacht)}
.vino-kar figcaption{margin-top:20px;text-align:center}
.vino-kar figcaption b{display:block;font-family:var(--serif);font-weight:400;
  font-size:1.28rem;color:var(--ink)}
.vino-kar figcaption span{display:block;margin-top:7px;font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.vino-wisch{margin-top:26px;padding:0 var(--pad);text-align:center;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}

/* Die Flaschen steigen von unten herein, eine nach der anderen. */
.rv-auf{opacity:0;transform:translateY(90px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.rv-auf.on{opacity:1;transform:none}
.vino-kar:nth-child(2).rv-auf{transition-delay:.14s}
.vino-kar:nth-child(3).rv-auf{transition-delay:.28s}
.vino-kar:nth-child(4).rv-auf{transition-delay:.1s}
.vino-kar:nth-child(5).rv-auf{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .rv-auf{opacity:1;transform:none;transition:none}
}
.vino-listen{max-width:1080px;margin:clamp(60px,8vw,100px) auto 0;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px)}
.vino-liste h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.vino-liste h3.zweit{margin-top:46px}
.vino-liste dl>div{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:6px 20px;padding:15px 0;border-bottom:1px solid var(--line)}
.vino-liste dt{font-family:var(--serif);font-size:1.22rem}
.vino-liste dd{color:var(--ink-3);font-size:.86rem;letter-spacing:.04em;white-space:nowrap}

/* ---------- Reservar ---------- */
.reservar{padding:clamp(100px,13vw,180px) 0 0}
.reservar-pic{max-width:var(--w);margin:0 auto clamp(70px,9vw,120px);
  padding:0 var(--pad)}
.reservar-pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.reservar-in{scroll-margin-top:110px;max-width:1080px;margin:0 auto;padding:0 var(--pad) clamp(90px,12vw,150px)}

.mesa{display:grid;grid-template-columns:1.1fr 1.1fr .9fr auto;gap:26px;align-items:end;
  padding-top:34px;border-top:1px solid var(--line)}
.mesa-feld{display:flex;flex-direction:column;gap:12px}
.mesa-feld>span{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.mesa-feld select,.mesa-feld input{appearance:none;-webkit-appearance:none;width:100%;
  padding:12px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;
  font-family:var(--serif);font-size:1.9rem;transition:border-color .4s}
.mesa-feld select:focus,.mesa-feld input:focus{outline:0;border-bottom-color:var(--ink)}
.mesa-feld option{background:#141415;color:var(--ink);font-size:1rem}
.mesa-go{padding:17px 38px;border:1px solid rgba(239,233,225,.4);background:transparent;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;transition:background-color .4s,color .4s,border-color .4s}
.mesa-go:hover{background:var(--ink);color:var(--nacht);border-color:var(--ink)}
.mesa-go.is-pending{border-color:var(--line);color:#5F5950;cursor:default}
.mesa-go.is-pending:hover{background:transparent;color:#5F5950;border-color:var(--line)}
.mesa-note{margin-top:22px;color:var(--ink-3);font-size:.84rem}
.mesa-note a{color:var(--ink-2);border-bottom:1px solid var(--ink-3)}
.mesa-note a:hover{color:var(--ink)}
/* Zwei gleichwertige Wege nebeneinander: Telefon und E-Mail-Anfrage */
.wege{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);
  align-items:stretch}
.wege>.weg{padding-top:34px;border-top:1px solid var(--line);min-width:0;
  display:flex;flex-direction:column}
.wege>.weg>.mesa{flex:1}
.wege+.mesa-note{margin-top:30px;text-align:center}
.weg-kopf{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.2;
  color:var(--ink);margin-bottom:14px}
.wege .anruf{padding-top:34px;text-align:left}
.wege .anruf-lead{font-size:1rem}
.wege .anruf-nr{font-size:clamp(2.4rem,4.6vw,3.8rem);margin-top:22px;margin-bottom:30px}
.wege .anruf-go{display:flex;align-items:center;justify-content:center;width:100%;max-width:none;
  min-height:56px;margin:auto 0 0;border:1px solid rgba(239,233,225,.4);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  transition:background-color .4s,color .4s,border-color .4s}
.wege .anruf-go:hover{background:var(--ink);color:var(--nacht);border-color:var(--ink)}
@media (max-width:980px){
  .wege .anruf-go{background:var(--rojo);border-color:var(--rojo);color:#fff;font-size:.78rem}
}
.wege .mesa{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;
  padding-top:0;border-top:0}
.wege .mesa .weg-kopf{grid-column:1/-1;margin-bottom:0}
.wege .mesa-datum{grid-column:1/-1}
.wege .mesa-feld select,.wege .mesa-feld input{font-size:1.25rem}

/* Eigene Auswahllisten fuer Uhrzeit und Personen */
.wahl{position:relative}
.wahl-knopf{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:54px;padding:12px 2px;background:none;border:0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:1.25rem;color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .3s}
.wahl-knopf::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-right:6px;
  border-right:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);
  transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.wahl-knopf:hover,.wahl.auf .wahl-knopf{border-bottom-color:var(--ink)}
.wahl.auf .wahl-knopf::after{transform:translateY(2px) rotate(-135deg)}
.wahl-liste{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  max-height:248px;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;list-style:none;
  background:#141415;border:1px solid rgba(239,233,225,.14);box-shadow:0 22px 60px rgba(0,0,0,.65);
  scrollbar-width:thin;scrollbar-color:rgba(239,233,225,.25) transparent;
  animation:wahl-auf .18s ease-out}
@keyframes wahl-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wahl-liste:focus{outline:none}
.wahl-zeile{display:flex;align-items:center;gap:8px;min-height:54px;
  border-bottom:1px solid var(--line);transition:border-color .3s}
.wahl-zeile:hover,.wahl-zeile:focus-within,.wahl.auf .wahl-zeile{border-bottom-color:var(--ink)}
.wahl.falsch .wahl-zeile{border-bottom-color:var(--rojo-hell)}
.wahl-uhr{margin-right:auto}
.wege .mesa-feld .wahl-eingabe{flex:0 0 auto;width:2.75em;min-width:0;min-height:0;padding:12px 2px;
  border:0;font-family:var(--serif);font-size:1.25rem;color:var(--ink);background:none}
.wahl-eingabe:focus{outline:none}
.wahl-eingabe::placeholder{color:var(--ink-3)}
.wahl-uhr{font-family:var(--serif);font-size:1.25rem;color:var(--ink-2)}
.wahl-knopf.wahl-pfeil{width:auto;min-height:0;padding:12px 4px 12px 14px;border:0;align-self:stretch}
.wahl-liste [role="option"]{padding:11px 14px;font-family:var(--serif);font-size:1.12rem;
  color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s}
.wahl-liste [role="option"]:hover,.wahl-liste .aktiv{background:rgba(239,233,225,.07);color:var(--ink)}
.wahl-liste [aria-selected="true"]{color:var(--ink);box-shadow:inset 2px 0 0 var(--rojo-hell)}
.wege .mesa-go{grid-column:1/-1;justify-self:stretch;margin-top:6px;min-height:56px}
@media (max-width:899px){
  .wege{grid-template-columns:minmax(0,1fr);gap:56px}
}

.karten{margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.karte{display:flex;flex-direction:column;gap:12px;padding:26px 24px;
  border:1px solid var(--line);background:#0E0E0F;transition:border-color .4s,background-color .4s}
.karte[href]:hover{border-color:rgba(239,233,225,.34);background:#141415}
.karte-lab{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.karte-wert{font-family:var(--serif);font-size:1.26rem;line-height:1.45}
.karte.is-pending .karte-wert{color:#5F5950}
.hinweis{margin-top:26px;padding:18px 22px;background:#121111;
  border-left:2px solid var(--rojo);color:var(--ink-3);font-size:.86rem;line-height:1.8}

/* ---------- Anfahrt ----------
   Eigene Kartengrafik aus OpenStreetMap-Daten. Kein fremder Kartendienst wird
   eingebunden, erst der Klick fuehrt zu Google Maps. */
.anfahrt{max-width:var(--w);margin:0 auto;padding:0 var(--pad) clamp(90px,12vw,150px)}
.anfahrt-karte{position:relative;display:block;overflow:hidden;
  border:1px solid var(--line);background:#0C0C0D;
  transition:border-color .5s}
.anfahrt-karte:hover{border-color:rgba(194,90,73,.5)}
.anfahrt-karte img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.22,1,.36,1),opacity .5s;opacity:.92}
.anfahrt-karte:hover img{transform:scale(1.03);opacity:1}
.anfahrt-feld{position:absolute;left:0;bottom:0;
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(22px,3vw,38px) clamp(24px,3.4vw,44px);
  background:linear-gradient(90deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.8) 70%,rgba(10,10,11,0) 100%);
  padding-right:clamp(60px,9vw,130px)}
.anfahrt-feld b{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;color:var(--ink)}
.anfahrt-feld i{font-style:normal;font-size:.88rem;color:var(--ink-3)}
.anfahrt-feld u{margin-top:8px;text-decoration:none;font-size:.7rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--rojo-hell)}
.anfahrt-quelle{margin-top:18px;color:#514B44;font-size:.74rem;line-height:1.7}
.anfahrt-insta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:10px 20px;border:1px solid var(--ink-3);border-radius:40px;color:var(--ink-2);font-size:.86rem;letter-spacing:.04em;transition:color .35s,border-color .35s;text-decoration:none}
.anfahrt-insta:hover{color:var(--ink);border-color:var(--ink)}
.anfahrt-insta svg{flex-shrink:0}

@media (max-width:620px){
  .anfahrt-karte img{aspect-ratio:4/5}
  .anfahrt-feld{right:0;padding-right:clamp(24px,3.4vw,44px);
    background:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.92) 46%)}
}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--line);padding:clamp(60px,7vw,90px) var(--pad) 40px}
.fuss-oben{max-width:var(--w);margin:0 auto;display:grid;
  grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.fuss-mark{font-family:var(--serif);font-size:1.3rem;letter-spacing:.3em;text-indent:.3em}
.fuss-adr{margin-top:18px;color:var(--ink-3);font-size:.9rem;line-height:1.8}
.fuss-kon{margin-top:16px;color:var(--ink-3);font-size:.9rem;line-height:1.8}
.fuss-kon a{color:var(--ink-2);transition:color .35s}
.fuss-kon a:hover{color:var(--ink)}
.fuss-kon a.is-pending{color:var(--ink-3);cursor:default}
.fuss-insta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 20px;border:1px solid var(--ink-3);border-radius:40px;color:var(--ink-2);font-size:.86rem;letter-spacing:.04em;transition:color .35s,border-color .35s;text-decoration:none}
.fuss-insta:hover{color:var(--ink);border-color:var(--ink)}
.fuss-insta svg{flex-shrink:0}
.fuss-nav,.fuss-recht{display:flex;flex-direction:column;gap:11px;font-size:.86rem}
.fuss-nav a,.fuss-recht a{color:var(--ink-2);transition:color .35s}
.fuss-nav a:hover,.fuss-recht a:hover{color:var(--ink)}
.fuss-lab{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px}
.fuss-copy{max-width:var(--w);margin:clamp(50px,6vw,80px) auto 0;padding-top:26px;
  border-top:1px solid var(--line);color:#514B44;font-size:.78rem}

/* ==========================================================================
   Schmale Geraete
   ========================================================================== */
@media (max-width:1100px){
  .tapas{grid-template-columns:repeat(3,1fr)}
  .tapas figure:nth-child(2),.tapas figure:nth-child(4),
  .tapas figure:nth-child(5),.tapas figure:nth-child(6){margin-top:0}
  .tapas figure:nth-child(2),.tapas figure:nth-child(5){margin-top:34px}
  .platos{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:980px){
  .top-nav,.top-cta{display:none}
  .top-burger{display:block}
  .credo{grid-template-columns:1fr;gap:50px}
  .credo-pic{aspect-ratio:3/2}

  /* Bild und Text wechseln sich ab, statt zu kleben */
  .cocina{grid-template-columns:1fr;display:flex;flex-direction:column}
  .cocina-stick,.cocina-txt{display:contents}
  .cocina-pic{position:relative;opacity:1;aspect-ratio:4/5;max-height:none;margin-bottom:26px}
  .cocina-pic[data-i="0"]{order:1} .cocina-step[data-i="0"]{order:2}
  .cocina-pic[data-i="1"]{order:3} .cocina-step[data-i="1"]{order:4}
  .cocina-pic[data-i="2"]{order:5} .cocina-step[data-i="2"]{order:6}
  .cocina-pic[data-i="3"]{order:7} .cocina-step[data-i="3"]{order:8}
  .cocina-step{min-height:0;opacity:1;max-width:none;margin-bottom:66px}

  /* Eine Spalte, der Wechsel quer/hoch bleibt erhalten. */
  .comedor-grid{grid-template-columns:1fr}
  .comedor-grid .quer,.comedor-grid .hoch{grid-column:1}
  .vino-listen{grid-template-columns:1fr;gap:48px}
  .mesa{grid-template-columns:1fr 1fr}
  .mesa-go{grid-column:1/-1;justify-self:start;margin-top:6px}
  .karten{grid-template-columns:1fr 1fr}
  .fuss-oben{grid-template-columns:1fr;gap:40px}
}

@media (max-width:620px){
  body{font-size:15px}
  .top{height:72px}
  .hero-name{letter-spacing:.07em;text-indent:.07em}
  .hero-scroll{display:none}
  .band-run span{font-size:1.2rem}
  .tapas{grid-template-columns:repeat(2,1fr);gap:16px}
  .tapas figure:nth-child(2),.tapas figure:nth-child(4){margin-top:0}
  .tapas figure:nth-child(3),.tapas figure:nth-child(5){margin-top:28px}
  .platos,.postres{grid-template-columns:1fr;gap:34px}
  .vino-kar{flex:0 0 76%}
  .vino-liste dl>div{flex-direction:column;gap:4px}
  .vino-liste dd{white-space:normal}
  .mesa{grid-template-columns:1fr;gap:22px}
  .mesa-feld select,.mesa-feld input{font-size:1.6rem}
  .karten{grid-template-columns:1fr}
  .reservar-pic img{aspect-ratio:4/3}
  .sheet a{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .sec-head.rv h2,.sec-head.rv .sec-lead{opacity:1;transform:none}
  .hero-line{transform:none}
  .hero-btn::before,.hero-btn::after{transform:none}
}

/* ==========================================================================
   SCHRIFT-EINBLENDUNG
   Buchstaben drehen sich herein, Zeilen schieben sich aus der Maske hoch.
   Die Werte sind von firstframerealestate.de abgenommen:
   1,2 s, cubic-bezier(.25,1,.5,1), Buchstaben 0,05 s versetzt, Zeilen 0,1 s.
   ========================================================================== */
.sw{display:inline-block;white-space:nowrap}
.sc{display:inline-block;perspective:1200px}
.sc-i{display:inline-block;opacity:0;will-change:transform,opacity;
  transform:translateY(50%) rotateY(90deg);
  transition:opacity 1.2s cubic-bezier(.25,1,.5,1),transform 1.2s cubic-bezier(.25,1,.5,1)}
.ani-on .sc-i{opacity:1;transform:none}

/* Beschriftungen und Knoepfe kippen aus der Tiefe nach vorn */
.sc-a{perspective:1200px}
.sc-a .sc-i{transform:translateX(10rem) rotateX(90deg);transform-origin:center bottom}
@media (max-width:991px){.sc-a .sc-i{transform:translateX(4rem) rotateX(70deg)}}
.ani-on.sc-a .sc-i{transform:none}

/* Absaetze: jede Zeile sitzt in einer eigenen Maske */
.sl{display:block;overflow:hidden;padding-top:.24em;margin-top:-.24em}
.sl-i{display:block;transform:translateY(110%);will-change:transform;
  transition:transform 1.2s cubic-bezier(.25,1,.5,1)}
.ani-on .sl-i{transform:none}
.flach .sl,.flach .sl-i{display:inline;overflow:visible;padding:0;margin:0;transform:none;transition:none}
.flach .sl+.sl::before{content:" "}

@media (prefers-reduced-motion:reduce){
  .sc-i,.sl-i{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   SPEISEKARTE ZUM BLAETTERN
   Kein eingebetteter PDF-Betrachter, nur die Seiten selbst.
   ========================================================================== */
.blatt{position:fixed;inset:0;z-index:120;background:rgba(6,6,7,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,4vh,54px) 0 clamp(50px,7vh,76px);
  opacity:0;transition:opacity .5s ease}
.blatt[hidden]{display:none}
.blatt.auf{opacity:1}

.blatt-buehne{display:flex;align-items:center;gap:clamp(10px,3vw,40px);
  width:100%;max-width:1180px;height:100%;padding:0 12px}
.blatt-fenster{flex:1;height:100%;overflow:hidden;position:relative}
.blatt-bahn{display:flex;height:100%;align-items:center;
  transition:transform .62s cubic-bezier(.75,0,.25,1)}
.blatt-bahn figure{flex:0 0 100%;height:100%;display:flex;
  align-items:center;justify-content:center;padding:0 clamp(4px,1.5vw,22px)}
.blatt-bahn img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 28px 80px rgba(0,0,0,.75);background:#fff;
  opacity:.25;transform:scale(.96);
  transition:opacity .6s ease,transform .62s cubic-bezier(.75,0,.25,1)}
.blatt-bahn figure.is-on img{opacity:1;transform:none}

.blatt-pfeil{flex:0 0 auto;width:clamp(42px,5vw,58px);height:clamp(42px,5vw,58px);
  border:1px solid rgba(239,233,225,.26);background:none;cursor:pointer;position:relative;
  transition:border-color .35s,background-color .35s,opacity .35s}
.blatt-pfeil::before{content:"";position:absolute;top:50%;left:50%;
  width:11px;height:11px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.blatt-pfeil.zurueck::before{transform:translate(-40%,-50%) rotate(45deg)}
.blatt-pfeil.vor::before{transform:translate(-60%,-50%) rotate(-135deg)}
.blatt-pfeil:hover{border-color:var(--ink);background:rgba(239,233,225,.08)}
.blatt-pfeil[disabled]{opacity:.22;cursor:default}

.blatt-zu{position:absolute;top:clamp(14px,2.5vh,28px);right:clamp(14px,3vw,34px);
  width:44px;height:44px;border:1px solid rgba(239,233,225,.26);background:none;
  cursor:pointer;transition:border-color .35s,background-color .35s}
.blatt-zu::before,.blatt-zu::after{content:"";position:absolute;top:50%;left:50%;
  width:15px;height:1px;background:var(--ink)}
.blatt-zu::before{transform:translate(-50%,-50%) rotate(45deg)}
.blatt-zu::after{transform:translate(-50%,-50%) rotate(-45deg)}
.blatt-zu:hover{border-color:var(--ink);background:rgba(239,233,225,.08)}

.blatt-zaehler{position:absolute;bottom:clamp(18px,3vh,30px);left:50%;
  transform:translateX(-50%);font-size:.72rem;letter-spacing:.3em;color:var(--ink-3)}

@media (max-width:700px){
  .blatt-pfeil{position:absolute;bottom:clamp(14px,2.6vh,26px);z-index:2}
  .blatt-pfeil.zurueck{left:18px} .blatt-pfeil.vor{right:18px}
  .blatt-buehne{padding:0}
}

/* ==========================================================================
   HANDY
   Alles ab hier gilt nur fuer schmale Geraete oder ist eine Absicherung,
   die auf dem grossen Bildschirm nichts veraendert.
   ========================================================================== */

/* Kein seitliches Verrutschen, auch nicht waehrend der Schrift-Einblendung. */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}

/* Geraete mit Kerbe im Querformat: der Seitenrand weicht der Kerbe aus. */
@supports (padding:max(0px,env(safe-area-inset-left))){
  :root{--pad:max(clamp(20px,5vw,80px),env(safe-area-inset-left),env(safe-area-inset-right))}
}

/* Aeltere Browser kennen svh nicht. */
@supports not (height:100svh){
  .hero{height:100vh}
  .cocina-stick{height:100vh}
}

/* Auswahlfeld ohne Systempfeil braucht ein eigenes Zeichen. */
.mesa-feld select{padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 12px) 56%,calc(100% - 6px) 56%;
  background-size:6px 6px;background-repeat:no-repeat}
/* iOS setzt Datum und Uhrzeit sonst mittig und ohne Hoehe. */
.mesa-feld input{display:block;min-height:54px;text-align:left}
.mesa-feld input::-webkit-date-and-time-value{text-align:left;margin:0}
.vino-bahn{overflow-y:hidden}
.mesa-feld input,.mesa-feld select{color-scheme:dark}

.sheet-tel,.leiste,.blatt-tipp,.cocina-nav,.tipp-handy{display:none}

@media (max-width:980px){
  /* Auf dem Handy bei Tageslicht: Nebentext heller, nichts unter 12 px. */
  :root{--ink-3:#948D82}
  .anfahrt-quelle,.fuss-copy{color:var(--ink-3)}
  .kick,.hero-kick{font-size:.75rem;letter-spacing:.28em}
  .unter-kick,.vino-kar figcaption span,.vino-wisch,.karte-lab,.fuss-lab,
  .mesa-feld>span,.credo-sig,.anfahrt-feld u,.karte-pdf i{font-size:.75rem;letter-spacing:.2em}
  .hero-btn,.mesa-go,.karte-pdf{font-size:.78rem}
  .anfahrt-quelle,.blatt-zaehler{font-size:.8rem}

  /* Menue: groessere Trefferflaeche, Telefon direkt erreichbar. */
  .top-burger{width:44px;height:44px;margin-right:-5px}
  .top-burger i{left:5px;width:34px}
  .top-burger i:first-child{top:17px}
  .top-burger i:last-child{top:26px}
  .sheet{overflow-y:auto;padding:90px 20px 40px}
  .sheet-tel{display:block;margin-top:28px}
  .sheet a.sheet-tel{font-family:var(--sans);font-size:1.05rem;line-height:1.6;
    letter-spacing:.12em;color:var(--ink-2)}
  .sheet-adr{margin-top:8px}

  /* Schnellzugriff am unteren Rand */
  .leiste{display:grid;grid-template-columns:1fr 1.5fr;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(10,10,11,.95);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(105%);visibility:hidden;
    transition:transform .5s cubic-bezier(.22,1,.36,1),visibility 0s .5s}
  .leiste.da{transform:none;visibility:visible;
    transition:transform .5s cubic-bezier(.22,1,.36,1),visibility 0s}
  .leiste a,.leiste button{display:flex;align-items:center;justify-content:center;
    min-height:54px;padding:0 8px;background:none;border:0;
    border-left:1px solid var(--line);cursor:pointer;
    font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
  .leiste>:first-child{border-left:0}
  .leiste .leiste-haupt{background:var(--rojo);border-left-color:var(--rojo);color:#fff}
  .leiste a.is-pending{color:var(--ink-3)}
  .fuss{padding-bottom:104px;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}

  .cocina-pic{max-height:88svh}
}

@media (max-width:620px){
  body{font-size:16px}
  .top{height:64px}

  /* Kopfbild: der Name steht zweizeilig und gross. */
  .hero{min-height:560px}
  .hero-name{font-size:clamp(3.3rem,17vw,4.6rem);line-height:1.02;margin-top:22px}
  .hero-sub{font-size:1rem;margin-top:26px}
  .hero-btn{margin-top:38px;padding:18px 40px}
  .hero-dots{bottom:26px;right:auto;left:50%;transform:translateX(-50%)}

  /* Weniger Leerlauf zwischen den Abschnitten. */
  .sec-head{margin-bottom:44px}
  .credo{padding-top:76px;padding-bottom:84px;gap:40px}
  .credo-pic{aspect-ratio:4/5}
  .carta,.vinos{padding-top:84px;padding-bottom:84px}
  .comedor{padding-bottom:84px}
  .reservar{padding-top:84px}
  .oferta{padding-top:64px;padding-bottom:64px}

  .cocina-step h3{margin:12px 0 14px}
  .cocina-step .preis{margin-top:16px;font-size:1.3rem;line-height:1.5}

  .karte-pdf{flex-direction:column;justify-content:center;gap:6px;
    width:100%;min-height:60px;padding:16px 20px}

  /* Tapas: Hochformate in zwei Spalten, die rechte Spalte sitzt tiefer.
     So bleibt der Versatz der grossen Ansicht erhalten. */
  .tapas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px 14px;margin-top:14px;padding-bottom:38px}
  .tapas figure{position:relative;cursor:pointer}
  .tapas figure:nth-child(n){margin-top:0}
  .tapas figure:nth-child(even){top:38px}
  .tapas figcaption{display:block;margin-top:12px}
  .tapas figcaption::before{display:none}
  .tapas figcaption b{display:block;font-size:1.12rem;line-height:1.3}
  .tapas figcaption span{display:block;margin-top:3px;font-size:1.05rem}

  /* Hauptgaenge und Nachspeisen: Bild und Name nebeneinander, Seite wechselt. */
  .platos,.postres{display:block}
  .platos figure,.postres figure{display:grid;
    grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:22px;align-items:center;
    margin-bottom:14px;background:none;cursor:pointer}
  .platos figure:last-child,.postres figure:last-child{margin-bottom:0}
  .platos figure:nth-child(even),.postres figure:nth-child(even){
    grid-template-columns:minmax(0,1fr) minmax(0,48%)}
  .platos figure:nth-child(even) img,.postres figure:nth-child(even) img{order:2}
  .platos figure:nth-child(even) figcaption,.postres figure:nth-child(even) figcaption{text-align:right}
  .platos figcaption,.postres figcaption{display:block;margin-top:0}
  .platos figcaption::before,.postres figcaption::before{display:none}
  .platos figcaption b,.postres figcaption b{display:block;font-size:1.4rem;line-height:1.2}
  .platos figcaption span,.postres figcaption span{display:block;margin-top:8px;
    font-size:1.15rem;white-space:normal}
  .tipp-handy{display:block;margin-top:44px;color:var(--ink-3);font-size:.8rem}

  /* Cocina: ein Gericht zur Zeit, mit Pfeilen oder per Wischen weiter. */
  .cocina{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;
    grid-template-rows:auto auto;gap:0;padding:0;align-items:start;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cocina::-webkit-scrollbar{display:none}
  .cocina .cocina-pic{grid-row:1;width:auto;margin:0 var(--pad) 22px;
    aspect-ratio:5/4;scroll-snap-align:center}
  .cocina .cocina-step{grid-row:2;margin:0 var(--pad)}
  .cocina [data-i="0"]{grid-column:1} .cocina [data-i="1"]{grid-column:2}
  .cocina [data-i="2"]{grid-column:3} .cocina [data-i="3"]{grid-column:4}
  .cocina-nav{display:flex;align-items:center;justify-content:space-between;
    margin:26px var(--pad) 76px}
  .unter-kick{margin:64px 0 22px}
  .carta-note{margin-top:44px;font-size:.85rem;line-height:1.8}

  /* Der Raum: ein Querformat ueber die ganze Breite, darunter zwei Hochformate. */
  .comedor-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .comedor-grid .quer{grid-column:1/-1}
  .comedor-grid .hoch{grid-column:auto}

  .vino-kar{flex:0 0 66%}
  .vino-liste dd{font-size:.9rem;line-height:1.7}

  .mesa-feld select,.mesa-feld input{font-size:1.5rem}
  .mesa-go{width:100%;justify-self:stretch;min-height:58px}
  .karten{margin-top:48px;gap:12px}
  .karte{padding:20px}
  .hinweis{font-size:.9rem}

  /* Fuss: Navigation und Rechtliches nebeneinander, gut treffbar. */
  .fuss-oben{grid-template-columns:1fr 1fr;gap:36px 24px}
  .fuss-oben>:first-child{grid-column:1/-1}
  .fuss-nav,.fuss-recht{gap:0;font-size:.95rem}
  .fuss-nav a,.fuss-recht a{padding:8px 0}
  .fuss-lab{margin-bottom:8px}
  .fuss-mark{text-indent:0}
  .fuss-kon{line-height:2.2}

  .sheet a{font-size:2.1rem}

  /* Speisekarte */
  .blatt{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .blatt-pfeil{width:48px;height:48px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .blatt-zaehler{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
  .blatt-tipp{display:block;position:absolute;top:26px;left:18px;
    font-size:.78rem;color:var(--ink-3)}
}

@media (max-width:360px){
  .hero-kick{letter-spacing:.16em}
  .mesa-feld select,.mesa-feld input{font-size:1.35rem}
  .leiste a,.leiste button{letter-spacing:.1em}
}

/* Handy im Querformat: wenig Hoehe. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:400px}
  .hero-name{font-size:clamp(2.6rem,8vw,4rem);margin-top:14px}
  .hero-line{margin-top:18px}
  .hero-sub{margin-top:16px;font-size:.98rem;line-height:1.6}
  .hero-btn{margin-top:22px;padding:13px 34px}
  .cocina-pic{aspect-ratio:16/9}
  .sheet{justify-content:flex-start;padding-top:80px}
  .sheet a{font-size:1.6rem;line-height:1.45}
}

/* ==========================================================================
   RESERVIERUNG AM TELEFON
   Reservierung am Telefon oder als vorformulierte E-Mail-Anfrage.
   ========================================================================== */
.anruf{padding-top:44px;border-top:1px solid var(--line);text-align:center}
.anruf-lead{color:var(--ink-2);font-size:1.08rem;line-height:1.7}
.anruf-nr{display:inline-block;margin-top:14px;font-family:var(--serif);
  font-size:clamp(2.9rem,7vw,5rem);line-height:1.1;color:var(--ink);
  transition:color .35s}
.anruf-nr:hover{color:var(--rojo-hell)}
.anruf-go{display:none}
@media (min-width:621px){
  .karten.zwei{grid-template-columns:1fr 1fr;max-width:760px;margin-left:auto;margin-right:auto}
}
@media (max-width:980px){
  .anruf-go{display:flex;align-items:center;justify-content:center;
    width:100%;max-width:420px;min-height:58px;margin:30px auto 0;
    background:var(--rojo);color:#fff;
    font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}
}

/* ==========================================================================
   PFEILE UND GROSSANSICHT
   ========================================================================== */
.pfeil{flex:0 0 auto;width:48px;height:48px;position:relative;cursor:pointer;
  border:1px solid rgba(239,233,225,.26);background:none;
  transition:border-color .35s,background-color .35s,opacity .35s}
.pfeil::before{content:"";position:absolute;top:50%;left:50%;
  width:11px;height:11px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pfeil.zurueck::before{transform:translate(-40%,-50%) rotate(45deg)}
.pfeil.vor::before{transform:translate(-60%,-50%) rotate(-135deg)}
.pfeil[disabled]{opacity:.25;cursor:default}
.cocina-nr{font-size:.8rem;letter-spacing:.3em;color:var(--ink-3)}

.lupe{position:fixed;inset:0;z-index:110;background:rgba(6,6,7,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:76px 20px 28px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
  opacity:0;transition:opacity .35s ease}
.lupe[hidden]{display:none}
.lupe.auf{opacity:1}
.lupe-bild{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.lupe-bild img{max-width:100%;max-height:calc(100% - 76px);object-fit:contain}
.lupe-bild figcaption{margin-top:20px;text-align:center}
.lupe-bild figcaption b{display:block;font-family:var(--serif);font-weight:400;
  font-size:1.6rem;line-height:1.25}
.lupe-bild figcaption span{display:block;margin-top:4px;font-family:var(--serif);
  font-size:1.25rem;color:var(--rojo-hell)}
.lupe-nav{display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:420px;margin-top:22px}