/* KOBÉS — Burger & Steak Ulm · WebAndVision
   Die Seite ist so dunkel wie der Hintergrund der Speisefotos. Dadurch
   stehen die Bilder ohne Rahmen und ohne sichtbare Kante auf der Seite. */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Überschriften in der schweren, weichen Serife – wie „Burger" und „Classic Burger" auf der Karte */
@font-face{font-family:"Young Serif";src:url("../fonts/youngserif-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Young Serif";src:url("../fonts/youngserif-latin-ext-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --tief:#0e0e11;         /* Seitengrund — derselbe Ton wie der Fotohintergrund */
  --kohle:#101014;        /* abwechselnde Fläche, kaum unterscheidbar */
  --kohle2:#17171c;
  --gold:#ce9a3d;         /* das Gold vom Logo */
  --gold2:#e2b667;
  --gold3:#f0d09a;
  --creme:#f3f0e9;
  --text:#9b978f;
  --text2:#78756f;
  --linie:rgba(226,182,103,.15);
  --linie2:rgba(243,240,233,.09);
  --schatten:0 40px 90px -40px rgba(0,0,0,.9);
  --display:"Archivo",system-ui,sans-serif;
  --serif:"Young Serif",Georgia,serif;
  --ui:"Inter",system-ui,sans-serif;
  --rand:clamp(18px,4.4vw,54px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--tief);color:var(--text);
  font-family:var(--ui);font-size:clamp(.95rem,.4vw + .87rem,1.06rem);
  line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,picture,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;line-height:1.04;
  color:var(--creme);letter-spacing:-.022em}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.08}
h3{color:var(--gold2)}
p{margin:0 0 1.15rem}
a{color:inherit}
em{font-style:normal;color:var(--gold2)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

.wrap{width:min(760px,100% - var(--rand)*2);margin-inline:auto}
.wrap-weit{width:min(1300px,100% - var(--rand)*2);margin-inline:auto}
.spalte{max-width:60ch}
.ueber{font-family:var(--ui);font-weight:700;font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;
  gap:.85em;margin:0 0 1.1rem}
.ueber{letter-spacing:.42em}
.gross{font-size:clamp(2rem,5.4vw,4.1rem)}
.xxl{font-size:clamp(2.5rem,7.4vw,5.9rem)}
.lead{font-size:clamp(1.02rem,.7vw + .9rem,1.24rem);color:#b9b5ac;line-height:1.62}
.hinweis{font-size:.86rem;color:var(--text2);border-left:2px solid var(--gold);
  padding-left:1rem;margin-top:1.6rem}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);
  color:#101014;padding:.7rem 1.2rem;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;background:rgba(14,14,17,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.kopf.fest{border-bottom-color:var(--linie2);background:rgba(10,10,13,.94)}
.kopf .wrap-weit{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(10px,1.3vw,17px) 0}
.marke{text-decoration:none;flex:none;display:block;color:var(--gold2)}
/* Das Logo des Hauses als SVG-Maske — die Farbe kommt von .marke */
.marke-logo{display:block;width:clamp(104px,13vw,140px);aspect-ratio:4.57/1;
  background:currentColor;transition:background-color .3s;
  -webkit-mask:url("../img/logo-wort.svg") center/contain no-repeat;
  mask:url("../img/logo-wort.svg") center/contain no-repeat}
.marke small{display:block;font-size:.5rem;letter-spacing:.3em;color:var(--text2);
  text-transform:uppercase;margin-top:.62em;font-weight:600}

.nav-links{display:flex;align-items:center;gap:clamp(13px,1.9vw,30px);
  list-style:none;margin:0;padding:0}
.nav-links a:not(.knopf){font-weight:500;font-size:.82rem;letter-spacing:.06em;
  text-decoration:none;color:#cfcbc3;position:relative;padding:.4em 0;
  transition:color .25s}
.nav-links a:not(.knopf)::after{content:"";position:absolute;left:0;bottom:0;
  height:1px;width:0;background:var(--gold);transition:width .3s}
.nav-links a:not(.knopf):hover{color:var(--creme)}
.nav-links a:not(.knopf):hover::after,
.nav-links a:not(.knopf)[aria-current]::after{width:100%}
.nav-links a:not(.knopf)[aria-current]{color:var(--gold2)}
.nav-knopf{display:none}

.knopf{display:inline-block;font-family:var(--ui);font-weight:700;font-size:.73rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1.05em 2em;background:var(--gold);color:#101014;border:0;cursor:pointer;
  transition:transform .25s,background .25s,color .25s}
.knopf:hover{transform:translateY(-2px);background:var(--gold2)}
.knopf.gross{padding:1.2em 2.5em;font-size:.78rem}
.knopf.geist{background:transparent;color:var(--creme);
  box-shadow:inset 0 0 0 1px rgba(243,240,233,.26)}
.knopf.geist:hover{background:var(--creme);color:#101014;
  box-shadow:inset 0 0 0 1px var(--creme)}
.kopf-cta{padding:.9em 1.5em;font-size:.68rem}

.burger{display:none;width:46px;height:40px;border:1px solid var(--linie2);
  background:none;position:relative;cursor:pointer;padding:0}
.burger span{position:absolute;left:12px;right:12px;height:1px;
  background:var(--creme);transition:.3s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:19.5px}
.burger span:nth-child(3){top:25px}
.nav.offen .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.offen .burger span:nth-child(2){opacity:0}
.nav.offen .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:block;position:relative;z-index:3}
  .kopf-cta{display:none}
  .nav-knopf{display:block}
  .nav-links{position:fixed;inset:0;background:var(--tief);flex-direction:column;
    justify-content:center;gap:clamp(14px,3.4vh,26px);
    padding:clamp(84px,13vh,116px) 22px 40px;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:1}
  .nav.offen .nav-links{opacity:1;visibility:visible}
  .nav-links a:not(.knopf){font-family:var(--display);font-weight:700;
    font-size:clamp(1.5rem,6.4vw,2.3rem);letter-spacing:-.02em;color:var(--creme)}
  .nav-links .nav-knopf{margin-top:.7rem}
  .nav-links .nav-knopf a.knopf{font-size:.8rem;letter-spacing:.14em;
    text-transform:uppercase;padding:1.15em 2.4em}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(70px,11vw,140px) 0 clamp(46px,6vw,80px);
  overflow:hidden;background:var(--tief)}
.hero-bild{position:absolute;inset:0;z-index:0;background:#130f0b}  /* dunkler Grundton, damit der Hero beim Laden nicht als schwarzes Loch dasteht */
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:54% 46%;filter:saturate(1.08) contrast(1.05)}
/* Zwei Verläufe statt einem: quer deckt er die Schriftseite ab, längs hält er
   Kopfzeile und Übergang nach unten ruhig. Dazwischen bleibt das Essen sichtbar. */
.hero.mit-bild::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,8,10,.90) 0%,rgba(8,8,10,.74) 32%,
      rgba(8,8,10,.34) 60%,rgba(8,8,10,.12) 100%),
    linear-gradient(180deg,rgba(8,8,10,.46) 0%,rgba(8,8,10,0) 24%,
      rgba(8,8,10,0) 56%,rgba(14,14,17,.94) 100%)}
.hero.mit-bild{padding-top:clamp(96px,15vw,190px);padding-bottom:clamp(56px,8vw,104px)}
.hero-inhalt{position:relative;z-index:2}
.hero-marke{font-weight:700;font-size:.64rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold2);display:block;
  margin-bottom:clamp(16px,2.2vw,26px)}
.hero .z{display:block}
.hero-text{max-width:52ch;margin-top:clamp(18px,2.4vw,30px);color:#c6c2b9}
.hero-tasten{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  margin-top:clamp(26px,3.4vw,40px)}
.hero-link{color:var(--creme);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px;transition:color .2s}
.hero-link:hover{color:var(--gold2)}
.status{font-weight:600;font-size:.74rem;letter-spacing:.1em;color:var(--text);
  display:inline-flex;align-items:center;gap:.6em}
.status::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--text2);flex:none}
.status.offen{color:var(--gold3)}
.status.offen::before{background:#6dbb62;box-shadow:0 0 0 4px rgba(109,187,98,.18)}
/* Eine Zeile statt vier Zahlenkacheln */
.hero-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .5em;margin:clamp(30px,4vw,48px) 0 0;
  font-size:.9rem;color:#b9b5ac}
.hero-zeile b{color:var(--creme);font-weight:700}
.hero-sterne{color:var(--gold2);letter-spacing:.12em;margin-right:.2em}
.hero-zeile .status{margin-left:.9em}
@media (max-width:760px){
  /* Handy: das Foto zeigt sich oben, der Text sitzt unten auf dem Verlauf */
  .hero.mit-bild{min-height:min(78svh,640px);display:flex;align-items:flex-end;padding-top:96px;padding-bottom:34px}
  .hero-bild img{object-position:58% 30%}
  .hero.mit-bild::after{background:linear-gradient(180deg,rgba(8,8,10,.50) 0%,rgba(8,8,10,.06) 24%,
    rgba(8,8,10,.20) 46%,rgba(8,8,10,.78) 70%,rgba(14,14,17,.98) 92%)}
  .hero-marke{font-size:.56rem;letter-spacing:.16em;line-height:1.6}
  /* Der Text sitzt mobil direkt auf dem Foto — ein weicher Schatten hält ihn lesbar,
     ohne dass das Bild wieder abgedunkelt werden muss. */
  .hero-marke,.hero .xxl,.hero-text,.hero-zeile{text-shadow:0 2px 14px rgba(6,6,8,.78)}
  .hero .xxl{font-size:clamp(1.95rem,8.3vw,2.6rem)}
  .hero-text{font-size:1rem;margin-top:14px}
  .hero-tasten{margin-top:22px}
  .hero-zeile{margin-top:22px;font-size:.82rem}
  .hero-zeile .status{margin-left:0;flex-basis:100%}
}

/* ---------- Laufband ---------- */
.band{background:#08080a;border-block:1px solid var(--linie2);overflow:hidden;
  padding:clamp(13px,1.6vw,19px) 0}
.band-spur{display:flex;gap:clamp(22px,3vw,44px);white-space:nowrap;will-change:transform}
.band-spur span{display:inline-flex;align-items:center;gap:clamp(22px,3vw,44px);
  font-family:var(--display);font-weight:700;font-size:clamp(.78rem,1.3vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:#5d5a55}
.band-spur span::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold);flex:none}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(56px,8.5vw,132px) 0}
.dunkler{background:var(--kohle);
  box-shadow:inset 0 1px 0 var(--linie2),inset 0 -1px 0 var(--linie2)}
.kopfteil{padding:clamp(56px,9vw,124px) 0 clamp(28px,4vw,52px)}
/* direkt nach dem Seitenkopf braucht der erste Abschnitt weniger Luft */
.kopfteil + .abschnitt{padding-top:clamp(20px,3.2vw,48px)}
.kopfteil.schmal{padding-bottom:clamp(16px,2vw,26px)}
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.zwei.mittig{align-items:center}
@media (max-width:940px){
  .zwei{grid-template-columns:1fr}
  .zwei.umgekehrt>div:first-child{order:2}
}

/* ---------- Säulen ---------- */
.saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(34px,4.6vw,58px)}
.saeule{padding:0 clamp(18px,3vw,44px);text-align:center;border-left:1px solid var(--linie)}
.saeule:first-child{border-left:0}
.saeule-nr{display:none}
.saeule h3{font-size:clamp(1.35rem,2.2vw,1.75rem);margin-bottom:.7rem}
.saeule p{font-size:.95rem;margin:0}
@media (max-width:760px){
  .saeulen{grid-template-columns:1fr}
  .saeule{border-left:0;border-top:1px solid var(--linie);padding:24px 0}
  .saeule:first-child{border-top:0;padding-top:0}
}

/* ---------- Teller (Speisekarte) ---------- */
.teller-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(26px,3.4vw,50px);margin-top:clamp(34px,4.6vw,56px)}
.teller-raster.zwei-spalten{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  max-width:1040px}
.teller{margin:0}
.teller-bild{aspect-ratio:4/3;overflow:hidden;margin-bottom:clamp(14px,1.8vw,22px)}
.teller-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.16,.9,.24,1)}
.teller:hover .teller-bild img{transform:scale(1.045)}
.teller-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;border-bottom:1px solid var(--linie2);padding-bottom:.55rem}
.teller-kopf h3{font-size:clamp(1.08rem,1.7vw,1.32rem);letter-spacing:-.015em}
.preis{font-family:var(--display);font-weight:700;font-size:1.02rem;
  color:var(--gold2);white-space:nowrap}
.teller-zusatz{display:block;margin-top:.6rem;font-weight:600;font-size:.6rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--text2)}
.teller-text p{margin:.7rem 0 0;font-size:.93rem;line-height:1.66}

/* ---------- Listen ---------- */
.strich-liste{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:0}
.strich-liste li{display:flex;justify-content:space-between;gap:1.4rem;
  padding:.85rem 0;border-bottom:1px solid var(--linie2)}
.strich-liste li:first-child{border-top:1px solid var(--linie2)}
.strich-liste b{font-family:var(--display);font-weight:700;color:var(--gold2);
  white-space:nowrap}
.punkte{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.62rem}
.punkte li{position:relative;padding-left:1.5rem;font-size:.95rem}
.punkte li::before{content:"";position:absolute;left:0;top:.78em;width:9px;
  height:1px;background:var(--gold)}

/* ---------- Stimmen ---------- */
.sterne{display:flex;align-items:baseline;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem}
.sterne-bild{color:var(--gold);letter-spacing:.18em;font-size:1.05rem}
.sterne b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--creme)}
.sterne>span:last-child{font-size:.85rem;color:var(--text2)}
.stimmen{display:grid;gap:clamp(12px,1.6vw,18px)}
.stimme{margin:0;background:var(--kohle2);border-left:2px solid var(--gold);
  padding:clamp(20px,2.6vw,30px)}
.stimme blockquote{margin:0;font-size:clamp(.98rem,1.4vw,1.1rem);line-height:1.58;
  color:#d6d2ca}
.stimme figcaption{margin-top:.9rem;font-weight:700;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- Öffnungstafel ---------- */
.tafel{border:1px solid var(--linie2);background:var(--kohle2)}
.tafel-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px);
  border-bottom:1px solid var(--linie2)}
.tafel-kopf b{font-family:var(--display);font-weight:700;color:var(--creme);
  font-size:1.02rem}
.tafel-reihe{display:grid;grid-template-columns:1fr auto;gap:1rem;
  padding:.82rem clamp(16px,2vw,24px);border-bottom:1px solid rgba(243,240,233,.05);
  font-size:.93rem;transition:background .25s}
.tafel-reihe:last-child{border-bottom:0}
.tafel-reihe:hover{background:rgba(226,182,103,.05)}
.tafel-reihe .tag{color:#c3bfb7}
.tafel-reihe .zeit{font-family:var(--display);font-weight:600;color:var(--creme);
  text-align:right}
.tafel-reihe .zeit.zu{color:var(--text2);font-weight:400}
.tafel-reihe.heute{background:rgba(226,182,103,.08)}
.tafel-reihe.heute .tag{color:var(--gold2);font-weight:600}
.lieferzeile{font-size:.93rem}
.lieferzeile a{color:var(--gold2);text-decoration:none;
  border-bottom:1px solid var(--linie)}
.lieferzeile a:hover{color:var(--gold3);border-color:var(--gold2)}

/* ---------- Bildfelder ---------- */
.bf{margin:0;overflow:hidden}
.bf img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.16,.9,.24,1)}
.bf:hover img{transform:scale(1.035)}
.bf.quer{aspect-ratio:3/2}
.steak-bild{overflow:hidden;aspect-ratio:4/3}
.steak-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.16,.9,.24,1)}
.steak-bild:hover img{transform:scale(1.035)}

/* ---------- Ausstattung ---------- */
/* acht Kacheln — feste Spaltenzahl, damit nie eine Lücke stehen bleibt */
.ausstattung{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--linie2);margin-top:clamp(30px,4vw,50px)}
@media (max-width:1100px){.ausstattung{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ausstattung{grid-template-columns:1fr}}
.aus{background:var(--kohle2);padding:clamp(20px,2.6vw,30px)}
.aus b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.4vw,1.16rem);color:var(--creme);margin-bottom:.45rem}
.aus span{font-size:.9rem}

/* ---------- Merch ---------- */
.merch-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,50px)}
.merch{margin:0}
.merch picture{display:block;aspect-ratio:1/1;overflow:hidden}
.merch img{width:100%;height:100%;object-fit:cover}
.merch figcaption{margin-top:1rem}
.merch b{display:block;font-family:var(--display);font-weight:700;
  color:var(--creme);font-size:1.05rem;margin-bottom:.3rem}
.merch span{font-size:.9rem}

/* ---------- Sprungnavigation ---------- */
.sprung{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(24px,3vw,36px)}
.sprung a{font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:#c3bfb7;
  padding:.7em 1.3em;border:1px solid var(--linie2);transition:.25s}
.sprung a:hover{border-color:var(--gold);color:var(--gold2)}

/* ---------- Anfahrt / Kontakt ---------- */
.anfahrt{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(22px,3vw,44px);margin-top:clamp(28px,3.6vw,46px)}
.anfahrt b{display:block;font-family:var(--display);font-weight:700;
  color:var(--creme);margin-bottom:.5rem;font-size:1.05rem}
.anfahrt p{font-size:.93rem;margin:0}
.kk{margin-top:1.8rem;display:grid;gap:1.3rem}
.kk p{margin:0;font-size:.98rem}
.kk b{font-family:var(--ui);font-weight:700;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.kk a{color:var(--creme);text-decoration:none;border-bottom:1px solid var(--linie);
  transition:.25s}
.kk a:hover{color:var(--gold2);border-color:var(--gold2)}
.knopf + .knopf{margin-left:.6rem}

/* ---------- CTA ----------
   Durchgehendes Band statt Kasten: links Text und Knöpfe, rechts das
   Burger-und-Steak-Foto, das nach links ins Schwarz ausläuft. */
.cta{position:relative;overflow:hidden;padding:clamp(72px,10vw,150px) 0;
  background-color:var(--tief);border-top:1px solid var(--linie)}
.cta::before{content:"";position:absolute;inset:0;
  background:url("../img/hero-1400.webp") right center/cover no-repeat;
  background-image:image-set(url("../img/hero-1400.webp") 1x,url("../img/hero-2000.webp") 2x)}
.cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--tief) 0%,var(--tief) 34%,rgba(14,14,17,.86) 52%,rgba(14,14,17,.25) 100%)}
.cta .wrap,.cta .wrap-weit{position:relative;z-index:1}
.cta-box{background:none;border:0;padding:0;text-align:left;max-width:560px}
.cta-box h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;margin-bottom:1.1rem}
.cta-box p{max-width:44ch;margin:0;color:#c9c5bc}
.cta-tasten{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px;margin-top:2.2rem}
.cta-tasten .knopf + .knopf{margin-left:0}
@media (max-width:760px){
  .cta{padding:clamp(56px,14vw,90px) 0 0}
  .cta::before{top:auto;height:260px;background-position:center}
  .cta::after{background:linear-gradient(180deg,var(--tief) 0%,var(--tief) calc(100% - 300px),rgba(14,14,17,.35) calc(100% - 120px),rgba(14,14,17,.1) 100%)}
  .cta-box{padding-bottom:280px}
}

/* ---------- Textseiten ---------- */
.text h2{font-size:clamp(1.15rem,2vw,1.45rem);margin:2.2rem 0 .8rem}
.text a{color:var(--gold2)}
.text b{color:#c3bfb7}

/* ---------- Fuß ---------- */
.fuss{background:#08080a;padding:clamp(48px,6.5vw,88px) 0 clamp(22px,3vw,34px);
  position:relative;overflow:hidden;border-top:1px solid var(--linie2)}
.fuss h4{font-family:var(--ui);font-weight:700;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.1em}
.fuss-text{font-size:.9rem;max-width:34ch;margin-top:1.3rem;color:var(--text2)}
.fuss-oben{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);margin-bottom:clamp(30px,4.2vw,54px)}
@media (max-width:900px){
  /* Vorher quetschte „auto-fit" die erste Spalte auf ein Wort pro Zeile */
  .fuss-oben{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .fuss-oben>div:first-child{grid-column:1/-1}
  .fuss-oben>div:nth-child(2){display:none}          /* „Seiten" – steht schon im Menü */
  .fuss-text{max-width:none}
  .fuss-marke{display:none}
  .fuss-unten{flex-direction:column;gap:.4rem}
}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.fuss a:not(.knopf){color:#a5a19a;text-decoration:none;font-size:.9rem;transition:color .25s}
.fuss a:not(.knopf):hover{color:var(--gold2)}
.fuss .marke{color:var(--gold2)}
/* Wortmarke als Streifen — über die Höhe bemessen, damit sie nie überläuft */
.fuss-marke{display:flex;justify-content:center;overflow:hidden;
  margin-bottom:clamp(26px,4vw,54px)}
.fuss-wort{display:block;height:clamp(40px,7vw,104px);width:auto;
  aspect-ratio:4.57/1;background:rgba(226,182,103,.13);
  -webkit-mask:url("../img/logo-wort.svg") center/contain no-repeat;
  mask:url("../img/logo-wort.svg") center/contain no-repeat;
  user-select:none;pointer-events:none}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid rgba(243,240,233,.07);
  font-size:.76rem;color:var(--text2)}
.fuss-unten a{font-size:.76rem}

button.hoch{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);
  z-index:50;width:48px;height:48px;display:grid;place-items:center;
  background:var(--gold);color:#101014;border:0;cursor:pointer;font-size:1.1rem;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
button.hoch.da{opacity:1;pointer-events:auto}
button.hoch:hover{transform:translateY(-3px)}

.demo-band{background:var(--gold);color:#101014;text-align:center;font-weight:700;
  font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.55rem 1rem;line-height:1.5}
.demo-band a{color:#101014}

/* ---------- Einblenden ---------- */
.auf{opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.16,.9,.24,1),transform .75s cubic-bezier(.16,.9,.24,1)}
.auf.sichtbar{opacity:1;transform:none}
.v1{transition-delay:.04s}.v2{transition-delay:.1s}.v3{transition-delay:.16s}
.v4{transition-delay:.22s}.v5{transition-delay:.28s}.v6{transition-delay:.34s}
@media (prefers-reduced-motion:reduce){
  .auf{opacity:1;transform:none;transition:none}
}

/* ---------- Handy-Menü: Kopf darf kein Bezugsrahmen werden ---------- */
body.menue-offen .kopf,
body.menue-offen .kopf.fest{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:transparent;border-color:transparent;transition:none}
body.menue-offen{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.kopf .demo-band{position:relative;z-index:1}
.kopf .wrap-weit{position:relative;z-index:2}
.kopf .marke,.kopf .burger,.kopf .kopf-cta{position:relative;z-index:2}
.kopf .nav-links{z-index:1}

/* ---------- Online-Reservierung (eigenes System) ---------- */
.reserv-raster{align-items:start;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
@media (max-width:940px){.reserv-raster{grid-template-columns:1fr}}
.reserv-info{margin-top:2rem}
.buchung{border:1px solid var(--linie);background:linear-gradient(160deg,var(--kohle2),var(--kohle));padding:clamp(18px,3vw,34px)}
.b-schritt{border:0;margin:0;padding:0 0 1.6rem;min-width:0}
.b-schritt + .b-schritt{border-top:1px solid var(--linie2);padding-top:1.4rem}
.b-schritt[disabled]{opacity:.45}
.b-schritt legend{font-family:var(--display);font-weight:700;color:var(--creme);font-size:1.12rem;padding:0;margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.b-nr{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border:1px solid var(--gold);color:var(--gold2);font-size:.85rem;border-radius:50%}
.b-klein{font-size:.88rem;color:var(--text);margin:.7rem 0 0}
.b-chip{font:inherit;cursor:pointer;background:var(--tief);color:var(--creme);border:1px solid var(--linie2);transition:border-color .15s ease-out,background .15s ease-out}
.b-chip:hover:not([disabled]){border-color:var(--gold)}
.b-chip[aria-checked="true"]{background:var(--gold);border-color:var(--gold);color:#16120a}
.b-chip[disabled]{cursor:not-allowed;opacity:.38;text-decoration:line-through}
.b-chip:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.b-personen{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.b-pers{min-height:48px;font-family:var(--display);font-weight:700;font-size:1.1rem}
.b-tage-rahmen{display:grid;grid-template-columns:40px 1fr 40px;gap:6px;align-items:stretch}
.b-blaettern{background:none;border:1px solid var(--linie2);color:var(--gold2);font-size:1.3rem;cursor:pointer}
.b-blaettern[disabled]{opacity:.25;cursor:default}
.b-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.b-tag{min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;text-decoration:none}
.b-tag b{font-size:.82rem;font-weight:600}
.b-tag span{font-size:.72rem;color:inherit;opacity:.8;white-space:nowrap}
.b-tag[disabled]{text-decoration:none}
.b-tag .b-zu{font-size:.66rem;opacity:.9}
.b-gruppe{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:.4rem 0 .5rem}
.b-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-bottom:.6rem}
.b-zeit{min-height:44px;font-weight:600;font-variant-numeric:tabular-nums}
.b-felder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.b-breit{grid-column:1/-1}
.b-felder label{display:block;font-size:.8rem;color:var(--text);margin-bottom:5px}
.b-felder label span{color:var(--text2)}
.b-felder input,.b-felder textarea{width:100%;min-height:46px;padding:11px 12px;background:var(--tief);border:1px solid var(--linie2);color:var(--creme);font:inherit;border-radius:0}
.b-felder input:focus,.b-felder textarea:focus{outline:none;border-color:var(--gold)}
.b-check{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;color:var(--text);margin:1rem 0}
.b-check input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--gold);flex:none}
.b-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.b-fehler{background:rgba(226,118,106,.12);border:1px solid rgba(226,118,106,.5);color:#f1c2bb;padding:10px 12px;font-size:.9rem}
.b-senden{width:100%;margin-top:.4rem}
.b-senden[disabled]{opacity:.6}
.b-fertig{padding:clamp(10px,2vw,20px) 0}
.b-fertig:focus{outline:none}
.b-fertig h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);margin:.3rem 0 1rem;color:var(--creme)}
.b-zusammen{border-left:2px solid var(--gold);padding-left:1rem;color:var(--creme);font-size:1.05rem}
.b-zusammen span{color:var(--text);font-size:.85rem}
@media (max-width:560px){
  .b-personen{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b-tage-rahmen{grid-template-columns:32px 1fr 32px;gap:4px}
  .b-tage{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b-felder{grid-template-columns:1fr}
}
/* Seatly-Widget im Kobes-Look */
.widget-rahmen{font-family:var(--ui,Inter),system-ui,sans-serif;min-height:520px}

/* ================================================================
   „Kobés sagt:" — die Sprüche von der Speisekarte
   Auf der gedruckten Karte stehen sie weiß in Handschrift zwischen den
   goldenen Gerichten, leicht schief, wie eben hingeschrieben. Hier
   schreiben sie sich beim Hereinscrollen selbst: Zeile für Zeile von links
   nach rechts, danach zieht sich ein Goldstrich darunter. Beim Weiterscrollen
   schweben sie leicht mit. Eigene Schrift nur für diese Stimme.
   ================================================================ */
@font-face{font-family:"Sacramento";src:url("../fonts/sacramento-latin-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
.spruch{position:relative;margin:clamp(2.4rem,5vw,4rem) auto 0;max-width:46rem;text-align:center;color:var(--creme);
  font-family:"Sacramento","Snell Roundhand","Segoe Script",cursive;font-weight:400;
  /* Sacramento ist sehr fein – ein Hauch Kontur gibt ihr die Stärke vom Kartendruck */
  -webkit-text-stroke:.35px currentColor;text-shadow:0 0 .6px currentColor;
  --dreh:-2.2deg}
.spruch,.spruch.auf,.spruch.auf.sichtbar{transform:rotate(var(--dreh))}
.spruch.auf{opacity:1}                        /* sichtbar wird es über das Schreiben, nicht übers Einblenden */
.spruch.rechts{--dreh:1.8deg}
.spruch.links{margin-left:0;text-align:left}
.spruch.gold{color:var(--gold2)}
.spruch figcaption{font-size:clamp(1.7rem,1.2rem + 1.4vw,2.3rem);line-height:1.05;opacity:.85}
.spruch blockquote{margin:.2em 0 0;font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem);line-height:1.12}
.spruch .zeile{display:block}

/* Der Goldstrich darunter */
.spruch-zug{display:block;width:min(62%,260px);height:.9rem;margin:.35rem auto 0;overflow:visible}
.spruch.links .spruch-zug{margin-left:0}
.spruch-zug path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* Schreiben: jede Zeile wird von links aufgedeckt, Zeile um Zeile.
   Die Maske reicht über den Buchstabenrand hinaus, damit Schwünge nicht abgeschnitten werden. */
@media (prefers-reduced-motion:no-preference){
  .js .spruch .zeile{clip-path:inset(-.45em 100% -.45em -.3em);
    transition:clip-path 1.05s cubic-bezier(.55,.08,.35,1);
    transition-delay:calc(var(--z,0) * .62s + .12s)}
  .js .spruch.sichtbar .zeile{clip-path:inset(-.45em -.4em -.45em -.3em)}
  .js .spruch-zug path{stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset .8s cubic-bezier(.6,0,.3,1);transition-delay:calc(var(--z,0) * .62s + .25s)}
  .js .spruch.sichtbar .spruch-zug path{stroke-dashoffset:0}

  /* Schweben: folgt dem Scrollbalken, auch rückwärts. Eigene Eigenschaften
     translate/rotate, damit es sich nicht mit dem Einblenden beißt. */
  @supports (animation-timeline: view()){
    .spruch:not(.riesig){animation:spruchSchwebt linear both;animation-timeline:view();
      animation-range:cover 0% cover 100%}
    @keyframes spruchSchwebt{from{translate:0 38px;rotate:-1.6deg}to{translate:0 -38px;rotate:1.6deg}}
  }
}

/* Zwei nebeneinander */
.spruch-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,4vw,4rem);
  margin-top:clamp(2.6rem,5vw,4.4rem);align-items:start}
.spruch-paar .spruch{margin-top:0}
.spruch-paar .spruch:nth-child(2){margin-top:clamp(0rem,4vw,3.2rem)}   /* versetzt, wie hingeschrieben */

/* ---------- Der Riesen-Spruch quer über die Seite ---------- */
.spruch-gross{position:relative;padding:clamp(70px,11vw,170px) 0;overflow-x:clip;
  background:radial-gradient(60% 55% at 50% 50%,rgba(206,154,61,.10),transparent 70%)}
.spruch-gross::before{content:"„";position:absolute;left:50%;top:50%;translate:-50% -58%;pointer-events:none;
  font-family:"Sacramento",cursive;font-size:clamp(14rem,34vw,34rem);line-height:1;color:var(--gold);opacity:.07}
.spruch.riesig{max-width:none;margin:0;--dreh:-3deg}
.spruch.riesig figcaption{font-size:clamp(2rem,1.2rem + 2.4vw,3.6rem)}
.spruch.riesig blockquote{font-size:clamp(3rem,1.2rem + 7vw,8.4rem);line-height:1}
.spruch.riesig .spruch-zug{width:min(46%,520px);height:1.4rem}
.spruch.riesig .spruch-zug path{stroke-width:3.4}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .spruch.riesig{animation:spruchGleitet linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes spruchGleitet{from{translate:16% 0;rotate:-3deg}to{translate:-16% 0;rotate:2deg}}
    .spruch-gross::before{animation:zeichenGleitet linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes zeichenGleitet{from{translate:-20% -40%}to{translate:-80% -70%}}
  }
}

.fuss-gruss{font-family:"Sacramento","Snell Roundhand",cursive;color:var(--creme);text-align:center;
  font-size:clamp(2rem,1.4rem + 2.2vw,3.2rem);line-height:1.1;margin:0 0 clamp(1.6rem,3vw,2.4rem);
  transform:rotate(-1.5deg);-webkit-text-stroke:.35px currentColor}
@media (max-width:760px){
  .spruch-paar{grid-template-columns:1fr}
  .spruch-paar .spruch:nth-child(2){margin-top:0}
  .spruch.links{margin-left:auto;text-align:center}
  .spruch.links .spruch-zug{margin-left:auto}
}

/* ---------- Goldband: der Streifen vom unteren Kartenrand ---------- */
.guete{background:linear-gradient(100deg,#b8862f,#d9aa55 45%,#c29139);color:#16130d}
.guete-innen{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);padding:clamp(18px,2.4vw,28px) 0}
.guete-stier{flex:none;width:clamp(56px,7vw,86px);aspect-ratio:1188/724;background:#16130d;
  -webkit-mask:url("../img/logo-stier.svg") center/contain no-repeat;mask:url("../img/logo-stier.svg") center/contain no-repeat}
.guete p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(.66rem,.9vw,.78rem);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.7}
.guete b{font-weight:800}
@media (max-width:760px){
  .guete-innen{flex-direction:column;align-items:flex-start;gap:12px}
  .guete p{letter-spacing:.08em}
}

/* ---------- Handy: weniger Luft, damit die Seite nicht endlos wird ---------- */
@media (max-width:760px){
  .abschnitt{padding:56px 0}
  .gross{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .spruch{margin-top:2.2rem}
  .spruch-gross{padding:64px 0}
  .band{display:none}
}

.strich-liste small{color:var(--text2);font-size:.82em;font-weight:400}
/* 7 Kacheln im 4er-Raster: die letzte füllt die Lücke */
@media (min-width:1101px){.ausstattung .aus:last-child:nth-child(4n+3){grid-column:span 2}}
/* Merch: zwei Stück, nicht über die volle Breite gezogen; Namen wie die Gerichte */
.merch-raster{max-width:820px}
.merch b{font-family:var(--serif);font-weight:400;color:var(--gold2);font-size:1.25rem;letter-spacing:0}

/* ---------- Umzugs-Hinweis (rot, über dem Kopf) ---------- */
/* Hinweisband: kein Warnstreifen, sondern eine gesetzte Zeile in Haus-Schwarz und Gold.
   Der Zusatzsatz fällt auf schmalen Geräten weg, damit es einzeilig bleibt. */
.umzug-band{background:#15110c;color:#cfc6b6;border-bottom:1px solid rgba(206,154,61,.32);
  display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  font-size:.76rem;line-height:1.45;padding:.6rem 1.1rem;letter-spacing:.01em}
.umzug-band::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--gold);box-shadow:0 0 0 3px rgba(206,154,61,.16)}
.ub-marke{font-family:var(--mono,inherit);font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.ub-text{font-weight:500}
.umzug-band b{color:#f0e6d2;font-weight:700}
.ub-mehr{font-style:normal;color:#9d9484;margin-left:.3rem}
@media (max-width:620px){
  .umzug-band{font-size:.72rem;padding:.52rem .9rem;gap:.45rem}
  .ub-mehr{display:none}
}
.kopf .umzug-band{position:relative;z-index:1}

/* ---------- Abschluss: Namenszeile ---------- */
.cta-marke{margin:0 0 .6rem;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}