/* 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}
/* Links im Vorspann bekommen denselben Goldakzent wie sonst im Text
   (vgl. .lieferzeile a). Ohne das stand dort nur unterstrichene
   Fliesstextfarbe und sah nicht nach Link aus. */
.lead a{color:var(--gold2);text-decoration:none;border-bottom:1px solid var(--linie)}
.lead a:hover{color:var(--gold3);border-color:var(--gold2)}
.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(96px,11vw,124px);aspect-ratio:2.34/1;
  background:currentColor;transition:background-color .3s;
  -webkit-mask:url("../img/logo-marke.svg") center/contain no-repeat;
  mask:url("../img/logo-marke.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}
/* Große Bildschirme: Auf einem Ultrawide wird der Hero sonst 768 px hoch — Knopf und
   Bewertungszeile fallen unter die Kante — und die Überschrift läuft über 1200 px.
   Hier also engere Abstände, ruhigere Schriftgröße und eine begrenzte Textspalte. */
@media (min-width:1500px){
  .hero.mit-bild{padding-top:clamp(104px,6.5vw,132px);padding-bottom:clamp(48px,3.4vw,66px)}
  .hero .xxl{font-size:clamp(2.9rem,3.5vw,4.5rem)}
  .hero-inhalt{max-width:1180px}
  .hero-text{max-width:52ch}
  .hero-bild img{object-position:56% 44%}
}
/* Breit, aber flach — typisches Ultrawide-Fenster. Hier zählt jede Zeile, damit
   Reservierungsknopf und Bewertungszeile über der Kante bleiben. */
@media (min-width:1500px) and (max-height:780px){
  .hero.mit-bild{padding-top:82px;padding-bottom:38px}
  .hero .xxl{font-size:clamp(2.3rem,2.9vw,3.5rem)}
  .hero-marke{margin-bottom:12px}
  .hero-text{margin-top:12px;font-size:1.02rem}
  .hero-tasten{margin-top:20px}
  .hero-zeile{margin-top:18px}
}
.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:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 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;min-width:0}
.tafel-reihe .zeit{font-family:var(--display);font-weight:600;color:var(--creme);
  text-align:right;white-space:nowrap;margin-left:auto}
.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}
/* ---------- Walk-in: der ausfuehrliche Teil ----------
   Der Aufruf oben bleibt kurz und steht neben dem Foto — fuenf weitere Absaetze
   haetten die Textspalte auf das Dreifache der Bildhoehe getrieben. Die
   Erklaerung bekommt darum einen eigenen Block mit ruhigem Grund und laeuft ab
   Tablet zweispaltig, damit keine Textwand entsteht. */
.walkin-mehr{background:var(--kohle);padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,104px);
  box-shadow:inset 0 1px 0 var(--linie2)}
.walkin-mehr .ueber{margin-bottom:1.6rem}
.wm-spalten{columns:2;column-gap:clamp(30px,4.5vw,72px);max-width:1040px}
.wm-spalten p{color:var(--text);margin:0 0 1.15rem;line-height:1.68;
  break-inside:avoid;-webkit-column-break-inside:avoid}
.wm-spalten p:last-child{margin-bottom:0}
.wm-spalten b{color:#c3bfb7}
.wm-schluss{margin:clamp(26px,3.5vw,40px) 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.1vw + .85rem,1.45rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--gold2);max-width:30ch}
/* Eine Spalte, sobald zwei zu schmal wuerden. */
@media (max-width:860px){
  .wm-spalten{columns:1}
  .wm-spalten p{max-width:62ch}
}

/* Der Vorspann im Aufruf: eine Spur groesser als Fliesstext, damit die kurze
   Fassung oben Gewicht behaelt. */
.cta-lead{font-size:clamp(1.02rem,.7vw + .9rem,1.2rem);line-height:1.6}

@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)}

/* ---------- 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 .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}
}
/* Karla-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}

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


/* ---------- Hero zweispaltig ab Tablet-Querformat ----------
   Statt das Tellerfoto über die volle Breite zu beschneiden, bekommt es die rechte
   Hälfte in voller Höhe — dort ist das Seitenverhältnis nah am Original, die
   Komposition bleibt also ganz. Die Schrift steht links auf ruhigem Schwarz.
   Darunter (Handy) bleibt alles wie gehabt: Foto oben, Text darunter. */
@media (min-width:1100px){
  .hero.mit-bild{background:var(--tief);display:flex;align-items:center;
    min-height:min(74svh,660px);
    padding-top:clamp(64px,5vw,96px);padding-bottom:clamp(48px,4vw,72px)}
  .hero-bild{left:48%;right:0;top:0;bottom:0}
  /* <picture> hat von sich aus keine Höhe — ohne das füllt das Foto die Spalte nicht.
     Gilt bewusst nur hier: mobil lebt der Aufbau davon, dass das Bild oben steht. */
  .hero-bild picture{display:block;width:100%;height:100%}
  .hero-bild img{object-position:50% 50%;filter:saturate(1.06) contrast(1.04)}
  /* Nur noch eine weiche Kante zwischen Schwarz und Foto, kein Schleier über dem Essen */
  .hero.mit-bild::after{background:
    linear-gradient(90deg,var(--tief) 0%,var(--tief) 45%,rgba(14,14,17,.92) 50%,
      rgba(14,14,17,.35) 58%,rgba(14,14,17,0) 68%),
    linear-gradient(180deg,rgba(14,14,17,.45) 0%,rgba(14,14,17,0) 16%,
      rgba(14,14,17,0) 84%,rgba(14,14,17,.55) 100%)}
  .hero-inhalt{max-width:min(44%,760px);margin-left:clamp(22px,4.4vw,76px);margin-right:auto}
  .hero .xxl{font-size:clamp(2.3rem,3.1vw,3.7rem)}
  .hero-text{max-width:38ch}
  .hero-marke,.hero .xxl,.hero-text,.hero-zeile{text-shadow:none}
}
@media (min-width:1700px){
  .hero-inhalt{max-width:min(42%,820px);margin-left:clamp(40px,4.4vw,96px);margin-right:auto}
  .hero .xxl{font-size:3.7rem}
}