@import url('fonts.css');

/* ============================================================
   Çeto's Döner & Grill — Kempten
   Design-Tokens. Farben stammen aus Logo (PDF) und Menu-Board-CI.
   ============================================================ */
:root{
  /* Navy — Grundton der Menu Boards */
  --navy-950:#061A2C;
  --navy-900:#08243C;
  --navy-800:#0A2C49;
  --navy-700:#0C3557;
  --navy-600:#12456E;
  --navy-500:#1B5789;

  /* Creme */
  --cream:#F4F0E6;
  --cream-2:#E4DECF;
  --cream-dim:#A9A192;

  /* Antikgold — Akzentfarbe der Boards */
  --gold:#BC9C48;
  --gold-400:#D2B25C;
  --gold-300:#E3C87E;
  --gold-line:rgba(188,156,72,.34);
  --gold-soft:rgba(188,156,72,.12);

  /* Ziegelrot — aus dem Logo */
  --brick:#73241D;
  --brick-500:#8E2E24;
  --brick-400:#A93A2D;

  --ink:#1D1D20;

  /* Schriften */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sign:'Archivo Narrow','Archivo',ui-sans-serif,system-ui,sans-serif;

  /* Semantisch */
  --bg:var(--navy-900);
  --surface:var(--navy-800);
  --surface-2:var(--navy-700);
  --text:var(--cream);
  --text-muted:var(--cream-dim);
  --accent:var(--gold);
  --cta:var(--brick-500);

  /* Abstände */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;   --sp-8:8rem;

  /* Radien / Rahmen */
  --r-sm:4px; --r-md:8px; --r-lg:14px;
  --hair:1px solid var(--gold-line);

  /* Bewegung */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms; --t-mid:320ms; --t-slow:700ms;

  --header-h:80px;
  --maxw:1240px;
}

/* ============================================================ Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--gold-400);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--gold);color:var(--navy-950)}

/* ============================================================ Typografie
   Fraunces        -> Display: Titel, Board-Ueberschriften, Preise
   Archivo Narrow  -> Signage: Navigation, Buttons, Gerichtnamen, Labels
   Archivo         -> Fliesstext
   Hierarchie entsteht aus Familie + Groesse + Gewicht, nicht aus Farbe.
   ============================================================ */
h1,h2,.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.018em;
  font-optical-sizing:auto;
}
h1{font-size:clamp(2.7rem,7.4vw,5.4rem);line-height:.95}
h2{font-size:clamp(2.15rem,4.9vw,3.7rem);line-height:1.04}
h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.12rem,1.9vw,1.42rem);
  line-height:1.2;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.price{
  font-family:var(--font-display);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.btn,.eyebrow,.nav a,.tab,.item-name,.tag,.field label,.hours .d,
.footer h4,.open-badge,.scroll-cue,.marquee-group span,
.cf-tag,.cf-sub,.mobile-nav a,.board-head .sub,.stat .lbl,.quote-by{
  font-family:var(--font-sign);
}
p{max-width:66ch}

.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-size:.8rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-400);
}
.eyebrow::before,.eyebrow.center::after{
  content:"";height:1px;width:clamp(28px,5vw,56px);
  background:linear-gradient(90deg,transparent,var(--gold));flex:none;
}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{background:linear-gradient(90deg,var(--gold),transparent)}

.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--cream-2);line-height:1.75}
.muted{color:var(--text-muted)}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================ Layout */
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
@media (max-width:600px){ .wrap{width:min(100% - 2rem,var(--maxw))} }

section{position:relative}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

.sec-head{display:grid;gap:var(--sp-2);margin-bottom:clamp(2.2rem,5vw,3.5rem)}
.sec-head.center{justify-items:center;text-align:center}
.sec-head p{color:var(--text-muted)}

/* Dezente Textur wie bedrucktes Board */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:3px 3px;
}

/* ============================================================ Buttons */
.btn{
  --btn-bg:var(--gold);--btn-fg:var(--navy-950);--btn-bd:var(--gold);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;min-height:52px;padding:.85rem 1.7rem;
  font-size:.92rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--r-sm);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             transform var(--t-fast) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg);
  transform:translateY(0);transition:transform var(--t-mid) var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.btn:active{transform:translateY(0)}
.btn .ico{width:18px;height:18px;flex:none}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--cream);--btn-bd:var(--gold-line)}
.btn--ghost:hover{--btn-fg:var(--navy-950);border-color:var(--gold)}
.btn--ghost::before{background:var(--gold);transform:translateY(101%)}
.btn--ghost:hover::before{transform:translateY(0)}

.btn--brick{--btn-bg:var(--brick-500);--btn-fg:var(--cream);--btn-bd:var(--brick-500)}
.btn--brick:hover{--btn-fg:var(--cream)}
.btn--brick::before{background:var(--brick-400);transform:translateY(101%)}
.btn--brick:hover::before{transform:translateY(0)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* Link mit Unterstrich-Animation */
.link-u{
  position:relative;color:var(--gold-400);font-weight:600;
  padding-bottom:2px;
}
.link-u::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--ease);
}
.link-u:hover::after,.link-u:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ============================================================ Öffnungs-Badge */
.open-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.42rem .85rem;border:var(--hair);border-radius:999px;
  background:rgba(6,26,44,.55);backdrop-filter:blur(6px);
  font-family:var(--font-sign);font-size:.76rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);
}
.open-badge .dot{
  width:8px;height:8px;border-radius:50%;background:var(--cream-dim);flex:none;
}
.open-badge[data-open="true"] .dot{background:#5FBF7F;box-shadow:0 0 0 0 rgba(95,191,127,.6);animation:pulse 2.4s infinite}
.open-badge[data-open="false"] .dot{background:var(--brick-400)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,191,127,.55)}
  70%{box-shadow:0 0 0 9px rgba(95,191,127,0)}
  100%{box-shadow:0 0 0 0 rgba(95,191,127,0)}
}

/* ============================================================ Header */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:height var(--t-mid) var(--ease),background-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
  border-bottom:1px solid transparent;
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,26,44,.9),rgba(6,26,44,0));
  transition:opacity var(--t-mid) var(--ease);
}
.header[data-scrolled="true"]{
  --header-h:64px;
  background:rgba(8,36,60,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--gold-line);
  box-shadow:0 12px 40px -24px rgba(0,0,0,.9);
}
.header[data-scrolled="true"]::before{opacity:0}

.header .wrap{display:flex;align-items:center;gap:var(--sp-3)}
.brand{display:flex;align-items:center;flex:none;min-height:44px}
.brand img{
  width:auto;height:clamp(34px,4.4vw,46px);
  transition:height var(--t-mid) var(--ease);
}
.header[data-scrolled="true"] .brand img{height:clamp(28px,3.4vw,36px)}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a{
  position:relative;font-size:.83rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-2);
  display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--t-fast) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--ease);
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--gold-300)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="true"]::after{
  transform:scaleX(1);transform-origin:left;
}
.header-cta{display:flex;align-items:center;gap:.75rem}
.header-cta .btn{min-height:44px;padding:.6rem 1.15rem;font-size:.78rem;letter-spacing:.13em}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:var(--hair);border-radius:var(--r-sm);
  background:transparent;color:var(--cream-2);cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
.icon-btn:hover{color:var(--navy-950);background:var(--gold);border-color:var(--gold)}
.icon-btn .ico{width:20px;height:20px}

.burger{display:none}

/* Mobiles Menü */
.mobile-nav{
  position:fixed;inset:0;z-index:99;
  background:linear-gradient(160deg,var(--navy-950),var(--navy-800));
  display:grid;align-content:center;justify-items:center;gap:var(--sp-1);
  padding:var(--header-h) var(--sp-3) var(--sp-5);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid);
}
.mobile-nav[data-open="true"]{opacity:1;visibility:visible}
.mobile-nav a{
  font-family:var(--font-sign);font-size:clamp(1.5rem,7vw,2.2rem);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cream);
  padding:.5rem 1rem;min-height:52px;display:flex;align-items:center;
  opacity:0;transform:translateY(18px);
}
.mobile-nav[data-open="true"] a{
  opacity:1;transform:none;
  transition:opacity 460ms var(--ease) calc(var(--i,0)*60ms + 90ms),
             transform 460ms var(--ease) calc(var(--i,0)*60ms + 90ms);
}
.mobile-nav a:hover{color:var(--gold-300)}
.mobile-nav .btn{margin-top:var(--sp-3)}
.mobile-nav .meta{color:var(--text-muted);font-size:.9rem;text-align:center}

@media (max-width:960px){
  .nav{display:none}
  .burger{display:inline-flex;margin-left:auto}
  .header-cta .btn{display:none}
}

/* ============================================================ Hero */
.hero{
  position:relative;min-height:100svh;min-height:100vh;
  overflow:hidden;
}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(1.2rem,4vh,2.4rem);translate:-50% 0;
  display:grid;justify-items:center;gap:.6rem;
  font-family:var(--font-sign);font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cream-dim);
}
.scroll-cue .bar{
  width:1px;height:44px;
  background:linear-gradient(180deg,var(--gold),transparent);
  transform-origin:top;animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%{transform:scaleY(0);opacity:0}35%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ============================================================ Laufband */
.marquee{
  border-block:var(--hair);
  background:var(--navy-950);
  overflow:hidden;padding-block:.95rem;
}
.marquee-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee-group span{
  display:inline-flex;align-items:center;gap:1.6rem;
  padding-inline:1.6rem;
  font-family:var(--font-sign);font-size:.82rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2);white-space:nowrap;
}
.marquee-group span::after{
  content:"";width:5px;height:5px;rotate:45deg;background:var(--gold);flex:none;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================ Story */
.story{background:var(--navy-900)}
.story-grid{
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .story-grid{grid-template-columns:1.05fr .95fr} }
.story-copy{display:grid;gap:var(--sp-3);justify-items:start}
.story-figure{position:relative}
.story-figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-md);
}
.story-figure::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-md);
  border:var(--hair);
  box-shadow:inset 0 0 0 1px rgba(6,26,44,.4);
  pointer-events:none;
}
.story-figure .frame{
  position:absolute;inset:auto -14px -14px auto;width:62%;height:52%;
  border:1px solid var(--gold-line);border-radius:var(--r-md);z-index:-1;
}

.stats{
  display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  width:100%;margin-top:var(--sp-2);
  padding-top:var(--sp-3);border-top:var(--hair);
}
.stat .num{
  font-family:var(--font-display);font-size:clamp(2rem,4.4vw,2.9rem);
  font-weight:600;color:var(--gold-400);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat .lbl{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);margin-top:.45rem;
}

/* ============================================================ Speisekarte
   Optik der digitalen Menu Boards: Navy-Panel, Goldhaarlinie,
   kondensierte Versalien, Preis in Gold, Punktlinie dazwischen.
   ============================================================ */
.menu{background:linear-gradient(180deg,var(--navy-950),var(--navy-900) 60%)}

.tabs{
  position:sticky;top:var(--header-h);z-index:40;
  display:flex;gap:.4rem;overflow-x:auto;
  margin-bottom:clamp(2rem,4vw,3rem);
  padding:.55rem;
  background:rgba(6,26,44,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:var(--hair);border-radius:var(--r-md);
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.5rem 1.05rem;scroll-snap-align:center;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-2);background:transparent;
  border:1px solid transparent;border-radius:var(--r-sm);
  cursor:pointer;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.tab .ico{width:17px;height:17px;opacity:.75;transition:opacity var(--t-fast)}
.tab:hover{color:var(--gold-300);border-color:var(--gold-line)}
.tab[aria-selected="true"]{
  color:var(--navy-950);background:var(--gold);border-color:var(--gold);font-weight:600;
}
.tab[aria-selected="true"] .ico{opacity:1}

.boards{
  display:grid;gap:clamp(1.2rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  align-items:start;
}
.board{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,var(--navy-700),var(--navy-800) 55%,var(--navy-900));
  border:var(--hair);border-radius:var(--r-md);
  padding:clamp(1.4rem,2.6vw,2rem);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
.board[hidden]{display:none}
.board-head{
  display:grid;justify-items:center;gap:.7rem;text-align:center;
  padding-bottom:1.1rem;margin-bottom:1.1rem;
  border-bottom:var(--hair);
}
.board-head .ico{width:30px;height:30px;color:var(--gold)}
.board-head h3{color:var(--cream);letter-spacing:.1em}
.board-head .sub{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
}

.items{display:grid;gap:1.05rem}
.item{display:grid;gap:.22rem}
.item-top{display:flex;align-items:baseline;gap:.6rem}
.item-name{
  font-family:var(--font-sign);font-weight:500;font-size:1.02rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--cream);
}
.item-dots{
  flex:1;height:1px;min-width:12px;align-self:flex-end;margin-bottom:5px;
  background-image:linear-gradient(90deg,var(--gold-line) 33%,transparent 0);
  background-size:6px 1px;background-repeat:repeat-x;
}
.price{
  font-size:1.02rem;font-weight:600;color:var(--gold-400);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.item-desc{font-size:.87rem;line-height:1.55;color:var(--text-muted);max-width:52ch}
.tag{
  display:inline-block;margin-left:.5rem;padding:.1rem .45rem;
  font-family:var(--font-sign);font-size:.62rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-300);border:1px solid var(--gold-line);border-radius:2px;
  vertical-align:middle;white-space:nowrap;
}
.tag--v{color:#8FCF9F;border-color:rgba(143,207,159,.4)}
.tag--hot{color:#E08A72;border-color:rgba(224,138,114,.42)}

.menu-note{
  margin-top:clamp(2rem,4vw,3rem);padding-top:var(--sp-3);
  border-top:var(--hair);font-size:.84rem;color:var(--text-muted);
  display:grid;gap:.5rem;
}

/* ============================================================ Ambiente */
.ambience{position:relative;overflow:hidden;isolation:isolate}
.ambience-bg{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.ambience-bg img{width:100%;height:100%;object-fit:cover}
.ambience::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--navy-950),rgba(6,26,44,.72) 30%,rgba(6,26,44,.78) 70%,var(--navy-950));
}
.ambience .wrap{
  min-height:clamp(420px,62vh,620px);
  display:grid;align-content:center;justify-items:center;
  gap:var(--sp-3);text-align:center;
  padding-block:clamp(4rem,9vw,7rem);
}
.quote{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.35;
  letter-spacing:.02em;color:var(--cream);max-width:22ch;
}
.quote b{color:var(--gold-400);font-weight:600}
.quote-by{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}

/* ============================================================ Reservierung */
.reserve{background:var(--navy-900)}
.reserve-grid{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;align-items:start;
}
@media (min-width:940px){ .reserve-grid{grid-template-columns:.85fr 1.15fr} }

.reserve-aside{display:grid;gap:var(--sp-3);align-content:start}
.aside-card{
  display:grid;gap:.85rem;padding:clamp(1.3rem,2.4vw,1.8rem);
  background:var(--navy-800);border:var(--hair);border-radius:var(--r-md);
}
.aside-card h3{font-size:1.05rem;letter-spacing:.09em;color:var(--cream)}
.aside-row{display:flex;gap:.85rem;align-items:flex-start}
.aside-row .ico{width:19px;height:19px;color:var(--gold);flex:none;margin-top:3px}
.aside-row div{display:grid;gap:.12rem}
.aside-row .k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.aside-row .v{color:var(--cream-2);font-size:.97rem}
.aside-row a.v:hover{color:var(--gold-300)}

.form{
  display:grid;gap:var(--sp-3);
  padding:clamp(1.5rem,3vw,2.4rem);
  background:var(--navy-800);border:var(--hair);border-radius:var(--r-md);
}
.form-grid{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
@media (min-width:620px){
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .col-2{grid-column:span 2}
}
.field{display:grid;gap:.4rem}
.field label{
  font-family:var(--font-sign);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);
}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:.75rem .9rem;
  background:var(--navy-950);color:var(--cream);
  border:1px solid rgba(188,156,72,.22);border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
  font-size:1rem; /* verhindert Auto-Zoom auf iOS */
}
.field textarea{min-height:112px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--gold-line)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);
}
.field .hint{font-size:.78rem;color:var(--text-muted)}
.field .err{
  display:none;align-items:center;gap:.4rem;
  font-size:.8rem;color:#E8A08C;
}
.field .err .ico{width:15px;height:15px;flex:none}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:#C15A44}
.field[data-invalid="true"] .err{display:flex}

.form-foot{display:grid;gap:var(--sp-2)}
.form-foot .btn{width:100%}
@media (min-width:620px){ .form-foot .btn{width:auto;justify-self:start} }
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.83rem;color:var(--text-muted)}
.consent input{
  width:20px;height:20px;min-height:0;margin-top:2px;flex:none;
  accent-color:var(--gold);cursor:pointer;padding:0;
}
.consent label{cursor:pointer;max-width:60ch}

.form-status{
  display:none;gap:.7rem;align-items:flex-start;
  padding:1rem 1.1rem;border-radius:var(--r-sm);
  border:1px solid rgba(95,191,127,.4);background:rgba(95,191,127,.1);
  color:#B9E6C6;font-size:.92rem;
}
.form-status .ico{width:20px;height:20px;flex:none;color:#7FD196;margin-top:1px}
.form-status[data-show="true"]{display:flex}

/* ============================================================ Kontakt */
.contact{background:var(--navy-950)}
.contact-grid{
  display:grid;gap:clamp(1.5rem,3vw,2.4rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr} }

.hours{display:grid;gap:0;margin-top:.3rem}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid rgba(188,156,72,.14);
  font-size:.95rem;
}
.hours li:last-child{border-bottom:0}
.hours .d{
  font-family:var(--font-sign);font-weight:500;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);
}
.hours .h{color:var(--text-muted);font-variant-numeric:tabular-nums}
.hours li[data-today="true"] .d{color:var(--gold-400)}
.hours li[data-today="true"] .h{color:var(--cream)}
.hours li[data-today="true"]{
  background:linear-gradient(90deg,var(--gold-soft),transparent);
  margin-inline:-.7rem;padding-inline:.7rem;border-radius:var(--r-sm);
}

.map-card{
  position:relative;overflow:hidden;
  border:var(--hair);border-radius:var(--r-md);
  background:var(--navy-800);
  min-height:320px;display:grid;
}
.map-consent{
  display:grid;place-content:center;justify-items:center;gap:1rem;
  padding:var(--sp-4);text-align:center;
}
.map-consent .ico{width:34px;height:34px;color:var(--gold)}
.map-consent p{font-size:.87rem;color:var(--text-muted);max-width:38ch}
.map-card iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

/* ============================================================ Footer */
.footer{
  background:var(--navy-950);border-top:var(--hair);
  padding-block:clamp(3rem,6vw,4.5rem) var(--sp-4);
}
.footer-grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:1fr;align-items:start;
}
@media (min-width:760px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr} }
.footer img.logo{width:min(230px,60vw);height:auto;margin-bottom:var(--sp-2)}
.footer h4{
  font-family:var(--font-sign);font-size:.78rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);
  margin-bottom:.9rem;
}
.footer ul{display:grid;gap:.55rem}
.footer a{color:var(--text-muted);font-size:.92rem;display:inline-flex;align-items:center;gap:.5rem;min-height:32px}
.footer a:hover{color:var(--gold-300)}
.footer .ico{width:17px;height:17px}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
  justify-content:space-between;align-items:center;
  margin-top:clamp(2.4rem,5vw,3.5rem);padding-top:var(--sp-3);
  border-top:1px solid rgba(188,156,72,.16);
  font-size:.82rem;color:var(--text-muted);
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ============================================================ Reveal-Animationen */
.reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--t-slow) var(--ease) var(--d,0ms),
             transform var(--t-slow) var(--ease) var(--d,0ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;will-change:auto}
.reveal--left{transform:translate3d(-26px,0,0)}
.reveal--scale{transform:scale(.965)}

.skip{
  position:absolute;top:.5rem;left:.5rem;z-index:300;
  padding:.7rem 1.1rem;background:var(--gold);color:var(--navy-950);
  border-radius:var(--r-sm);font-weight:600;
  transform:translateY(-160%);transition:transform var(--t-fast) var(--ease);
}
.skip:focus{transform:translateY(0)}

body[data-nav-open="true"]{overflow:hidden}

/* ============================================================ Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .ambience-bg{transform:none!important}
}

/* ============================================================ Druck */
@media print{
  .header,.mobile-nav,.scroll-cue,.marquee,.cf,.tabs,.map-card,.form,.action-bar{display:none!important}
  body{background:#fff;color:#111}
  .board{border:1px solid #999;background:#fff;box-shadow:none}
  .item-name,.board-head h3{color:#111}
  .price{color:#6b5a1f}
  .item-desc,.muted{color:#444}
}

/* ════════════════════════════════════════════════════════════════
   MOTION
   Kein einheitliches Fade-Up ueber alles. Jede Bewegung hat einen
   Grund: Zeilen steigen aus dem Satzspiegel, Linien werden gezogen,
   Bilder werden aufgedeckt, Listen kommen gestaffelt.
   ════════════════════════════════════════════════════════════════ */

/* Basis dezenter als zuvor */
.reveal{transform:translate3d(0,14px,0);transition-duration:560ms}

/* 1 — Ueberschriften: Zeilen steigen hinter der Maske hervor */
.lines{opacity:1!important;transform:none!important}
.lines .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lines .ln > span{
  display:block;
  transform:translate3d(0,108%,0);
  transition:transform 880ms var(--ease-out) var(--d,0ms);
}
.lines.is-in .ln > span{transform:none}
.lines .ln:nth-child(2) > span{transition-delay:calc(var(--d,0ms) + 100ms)}
.lines .ln:nth-child(3) > span{transition-delay:calc(var(--d,0ms) + 200ms)}

/* 2 — Goldlinien werden gezogen statt eingeblendet */
.eyebrow::before,.eyebrow.center::after{
  transform:scaleX(0);transform-origin:left;
  transition:transform 720ms var(--ease-out) 120ms;
}
.eyebrow.center::after{transform-origin:right}
.eyebrow.is-in::before,.eyebrow.is-in.center::after{transform:scaleX(1)}

.board-head{position:relative}
.board-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform 900ms var(--ease-out) 220ms;
}
.board.is-in .board-head::after{transform:scaleX(1)}

/* 3 — Bilder werden aufgedeckt, nicht eingeblendet */
.uncover{position:relative;overflow:hidden;border-radius:var(--r-md)}
.uncover > img{
  transform:scale(1.12);
  transition:transform 1200ms var(--ease-out);
}
.uncover::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--navy-900);transform-origin:bottom;
  transition:transform 900ms var(--ease-out);
}
.uncover.is-in > img{transform:scale(1)}
.uncover.is-in::after{transform:scaleY(0)}

/* 4 — Kartenzeilen kommen gestaffelt, nicht als Block */
.board .item{
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity 520ms var(--ease) calc(var(--row,0)*55ms + 260ms),
             transform 520ms var(--ease) calc(var(--row,0)*55ms + 260ms);
}
.board.is-in .item{opacity:1;transform:none}
/* Punktlinie zwischen Name und Preis zieht sich auf */
.board .item-dots{transform:scaleX(0);transform-origin:left;
  transition:transform 640ms var(--ease-out) calc(var(--row,0)*55ms + 420ms);}
.board.is-in .item-dots{transform:scaleX(1)}

/* 5 — Board selbst: nur Massstab, keine Reise */
.board.reveal{transform:scale(.985) translate3d(0,10px,0)}
.board.reveal.is-in{transform:none}

/* 6 — Tab-Indikator gleitet zwischen den Kategorien */
.tab-ind{
  position:absolute;top:.55rem;left:0;height:calc(100% - 1.1rem);width:0;
  background:var(--gold);border-radius:var(--r-sm);z-index:0;pointer-events:none;
  transition:transform 520ms var(--ease-out),width 520ms var(--ease-out);
}
.tab{position:relative;z-index:1}
.tab[aria-selected="true"]{background:transparent;border-color:transparent}

@media (prefers-reduced-motion:reduce){
  .lines .ln > span,.board .item,.board .item-dots,
  .uncover > img,.eyebrow::before,.eyebrow.center::after,
  .board-head::after,.tab-ind{transform:none!important;opacity:1!important}
  .uncover::after{transform:scaleY(0)!important}
}

/* ════════════════════════════════════════════════════════════════
   MOBIL — eigene Entscheidungen, kein geschrumpftes Desktop
   ════════════════════════════════════════════════════════════════ */

/* Aktionsleiste im Daumenbereich, nur auf dem Telefon */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(6,26,44,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:var(--hair);
  transform:translateY(110%);
  transition:transform 420ms var(--ease);
}
.action-bar[data-show="true"]{transform:none}
.action-bar .btn{flex:1;min-height:50px;padding:.7rem .8rem;font-size:.8rem;letter-spacing:.1em}

@media (max-width:760px){
  :root{--sp-5:2.25rem;--sp-6:3rem;--sp-7:4rem;--sp-8:5rem}
  .action-bar{display:flex}
  body{padding-bottom:0}
  main{padding-bottom:4.6rem}

  /* Hero: kuerzer, damit der Inhalt darunter angerissen wird */
  .hero{padding-block:calc(var(--header-h) + 1.25rem) 2.5rem}
  .hero-copy{gap:.95rem}
  .hero-logo{width:min(66vw,260px)}
  .hero-head{font-size:clamp(2.1rem,9vw,3rem)}
  .hero .lead{font-size:.95rem;max-width:30ch}
  .hero .btn-row{width:100%;flex-direction:column;gap:.65rem}
  .hero .btn-row .btn{width:100%}
  .scroll-cue{display:none}

  /* Speisekarte: Tabs mit Randverlauf, damit Scrollbarkeit sichtbar ist */
  .tabs{
    margin-inline:-1rem;border-radius:0;border-inline:0;
    padding-inline:1rem;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 26px),transparent);
  }
  .board{padding:1.15rem 1.05rem}
  .item-desc{font-size:.84rem}
  .items{gap:.95rem}

  /* Deko-Rahmen weglassen, er hat auf 375px keinen Platz */
  .story-figure .frame{display:none}
  .stats{grid-template-columns:1fr 1fr;gap:1.25rem}
  .stat:last-child{grid-column:span 2}

  .ambience .wrap{min-height:auto;padding-block:4rem}
  .quote{max-width:none}

  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.9rem}
}

@media (max-width:380px){
  .hero-logo{width:min(72vw,230px)}
  .tab{padding-inline:.85rem}
}

/* ════════════════════════════════════════════════════════════════
   Korrekturen aus dem Geraete-Test
   ════════════════════════════════════════════════════════════════ */

/* Tippziele auf mindestens 44 px — geprueft bei 375 px */
.aside-row a.v{
  display:inline-flex;align-items:center;min-height:44px;
  margin-block:-.35rem;
}
.footer a{min-height:44px}
.footer ul{gap:.15rem}
.consent{min-height:44px;align-items:center}
.consent input{width:24px;height:24px;margin-top:0}
.footer-bottom nav a{display:inline-flex;align-items:center;min-height:44px}


/* ════════════════════════════════════════════════════════════════
   Rechtstexte (Impressum, Datenschutz)
   ════════════════════════════════════════════════════════════════ */
.legal{padding-block:calc(var(--header-h) + 3rem) 5rem;background:var(--navy-900)}
.legal .wrap{max-width:74ch}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.5rem}
.legal h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-top:2.5rem;margin-bottom:.7rem}
.legal p,.legal li{color:var(--cream-2);margin-bottom:.9rem}
.legal ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.legal a{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px}
.legal .todo{
  display:block;padding:1rem 1.15rem;margin:1.5rem 0;
  border:1px dashed var(--gold);border-radius:var(--r-sm);
  background:var(--gold-soft);color:var(--gold-300);font-size:.9rem;
}
.legal .back{margin-top:3rem;display:inline-flex}

/* ════════════════════════════════════════════════════════════════
   HERO MIT BOGEN-PORTAL
   Der Bogen steigt großformatig aus der Unterkante auf, der Text
   liegt darüber. Weil der Bogen unten ohnehin gerade abschließt,
   darf er unten aus dem Bild laufen — er wirkt dadurch größer.
   ════════════════════════════════════════════════════════════════ */
.hero{
  display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
  padding-block:calc(var(--header-h) + 3.5rem) 4rem;
  text-align:center;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(90% 70% at 50% 60%,rgba(18,69,110,.5),transparent 64%),
    linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-950) 100%);
}

/* ── Bogen als Bildebene ── */
.hero-arch{
  --arch-h:min(116vh,1120px);
  --arch-w:calc(var(--arch-h) * 5 / 7);
  position:absolute;top:calc(var(--header-h) + 1.5rem);left:50%;z-index:-2;
  margin-left:calc(var(--arch-w) / -2);
  width:var(--arch-w);height:var(--arch-h);
  pointer-events:none;
}
.arch-glow{
  position:absolute;inset:-10%;z-index:-1;border-radius:50%;
  filter:blur(70px);animation:ember 5s ease-in-out infinite;
  background:radial-gradient(52% 48% at 50% 62%,
    rgba(206,132,52,.5),rgba(150,64,26,.22) 46%,transparent 74%);
}
@keyframes ember{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}

.arch-behind{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  transform:translate(6%,4.5%);
}
.arch-media{
  position:relative;width:100%;height:100%;overflow:hidden;
  clip-path:url(#arch-clip);
}
.arch-media img,.arch-media video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.arch-media video{
  position:absolute;inset:0;z-index:1;
  opacity:0;transition:opacity 700ms var(--ease);
}
.arch-media video[data-ready="true"]{opacity:1}
/* Abdunkeln, damit die Schrift auf dem bewegten Bild steht */
.arch-media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,26,44,.42) 0%,rgba(6,26,44,.1) 26%,
    rgba(6,26,44,.1) 52%,rgba(6,26,44,.55) 80%,rgba(6,26,44,.95) 100%);
}
.arch-blind{
  position:absolute;inset:0;z-index:3;background:var(--navy-950);
  transform-origin:bottom;
  transition:transform 1s var(--ease-out) 150ms;
}
.hero-arch.is-in .arch-blind{transform:scaleY(0)}
.arch-media img,.arch-media video{
  transform:scale(1.12);
  transition:transform 1.4s var(--ease-out) 150ms;
}
.hero-arch.is-in .arch-media img,.hero-arch.is-in .arch-media video{transform:scale(1)}

.arch-outline{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;
}
.arch-outline path{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.8s var(--ease-out) 500ms;
}
.hero-arch.is-in .arch-outline path{stroke-dashoffset:0}

/* ── Text über dem Bogen ── */
.hero-grid{position:relative;z-index:2;display:block}
.hero-copy{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:1.15rem;
  max-width:44rem;margin-inline:auto;
}
.hero-copy::before{
  content:"";position:absolute;inset:-14% -18% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 56% at 50% 44%,
    rgba(6,26,44,.86) 0%,rgba(6,26,44,.6) 52%,rgba(6,26,44,.18) 76%,transparent 88%);
}
.hero-copy .eyebrow{justify-content:center}
.hero-copy .lead{max-width:38ch;color:var(--cream);text-shadow:0 2px 18px rgba(6,26,44,.9),0 1px 3px rgba(6,26,44,.8)}
.hero-head{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.5rem,6vw,4.4rem);line-height:.98;
  letter-spacing:-.02em;color:var(--cream);
  text-shadow:0 4px 30px rgba(6,26,44,.85);
}
.hero-logo{
  width:clamp(220px,28vw,360px);height:auto;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.65));
}
.hero .btn-row{justify-content:center}

/* ════════════════════════════════════════════════════════════════
   COVERFLOW — Empfehlungen des Hauses
   ════════════════════════════════════════════════════════════════ */
.coverflow-sec{background:var(--navy-950);padding-bottom:0}
.cf{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding-block:2rem 4rem;user-select:none;
}
.cf-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cf-bg img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.12);
  filter:brightness(.28) blur(34px);
  transition:opacity 900ms var(--ease);
}
.cf-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(6,26,44,.35) 0%,rgba(6,26,44,.94) 100%);
}
.cf-inner{
  position:relative;z-index:1;width:min(100% - 2rem,1100px);
  display:grid;justify-items:center;gap:1.5rem;
}
.cf-label{margin-bottom:.5rem}

.cf-stage{
  position:relative;width:100%;
  height:440px;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;border-radius:var(--r-md);
  --cf-near:180px;--cf-far:320px;
}
@media (min-width:640px){ .cf-stage{height:520px;--cf-near:240px;--cf-far:430px} }
@media (min-width:1024px){ .cf-stage{--cf-near:285px;--cf-far:510px} }
.cf-stage:focus-visible{outline:2px solid var(--gold-400);outline-offset:6px}

.cf-card{
  position:absolute;overflow:hidden;
  width:240px;height:400px;
  border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:var(--navy-800);
  transform-origin:center center;
  transition:transform 800ms cubic-bezier(.25,1,.5,1),
             opacity 800ms cubic-bezier(.25,1,.5,1),
             filter 800ms cubic-bezier(.25,1,.5,1),
             box-shadow 800ms cubic-bezier(.25,1,.5,1);
  box-shadow:0 15px 35px rgba(0,0,0,.5);
  opacity:0;filter:brightness(.4) blur(2px);
  transform:scale(.4);z-index:0;
}
@media (min-width:640px){ .cf-card{width:300px;height:480px} }
@media (min-width:1024px){ .cf-card{width:330px;height:500px} }

.cf-card > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.cf-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,26,44,.4) 0%,rgba(6,26,44,.08) 25%,
             rgba(6,26,44,.7) 60%,rgba(6,26,44,.97) 100%);
}

/* Positionen, von main.js über data-pos gesetzt */
.cf-card[data-pos="0"]{
  transform:translateX(0) scale(1) rotateY(0);
  opacity:1;z-index:30;filter:brightness(1);
  box-shadow:0 25px 60px rgba(0,0,0,.9),0 0 35px rgba(188,156,72,.25);
}
.cf-card[data-pos="1"]{transform:translateX(var(--cf-near)) scale(.84) rotateY(-24deg);opacity:.65;z-index:20;filter:brightness(.75);cursor:pointer}
.cf-card[data-pos="2"]{transform:translateX(var(--cf-far)) scale(.68) rotateY(-38deg);opacity:.38;z-index:10;filter:brightness(.55) blur(1px);cursor:pointer}
.cf-card[data-pos="-1"]{transform:translateX(calc(var(--cf-near) * -1)) scale(.84) rotateY(24deg);opacity:.65;z-index:20;filter:brightness(.75);cursor:pointer}
.cf-card[data-pos="-2"]{transform:translateX(calc(var(--cf-far) * -1)) scale(.68) rotateY(38deg);opacity:.38;z-index:10;filter:brightness(.55) blur(1px);cursor:pointer}

.cf-body{
  position:relative;z-index:2;width:100%;height:100%;
  padding:1.25rem 1.1rem 1.35rem;
  display:flex;flex-direction:column;justify-content:space-between;text-align:center;
  opacity:0;transform:translateY(16px);
  transition:opacity 500ms var(--ease),transform 500ms var(--ease);
  pointer-events:none;
}
.cf-card[data-pos="0"] .cf-body{opacity:1;transform:none;pointer-events:auto}
.cf-tag{
  align-self:flex-end;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-300);
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.cf-text{display:grid;justify-items:center;gap:.15rem;margin-top:auto}
.cf-text h3{
  font-family:var(--font-display);font-size:1.55rem;font-weight:700;
  letter-spacing:.02em;color:var(--cream);line-height:1.1;
  text-shadow:0 3px 12px rgba(0,0,0,.95);
}
.cf-sub{
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--cream-2);
  text-shadow:0 3px 10px rgba(0,0,0,.9);
}
.cf-rule{
  width:36px;height:2px;border-radius:2px;background:var(--gold);
  margin:.45rem 0 .3rem;box-shadow:0 0 8px rgba(188,156,72,.7);
}
.cf-text p{
  font-size:.83rem;line-height:1.35;color:var(--cream-2);max-width:280px;
  margin-bottom:.4rem;text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.cf-price{
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;
  color:var(--gold-400);margin-bottom:.55rem;font-variant-numeric:tabular-nums;
}
.cf-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;padding:.6rem 1.2rem;border-radius:999px;
  background:linear-gradient(135deg,var(--gold-300),var(--gold));
  color:var(--navy-950);font-family:var(--font-sign);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 15px rgba(188,156,72,.3);
  transition:transform 200ms var(--ease);
}
.cf-cta:hover{transform:scale(1.05)}

.cf-nav{position:absolute;top:50%;translate:0 -50%;z-index:40;border-radius:50%}
.cf-prev{left:.5rem}
.cf-next{right:.5rem}
@media (min-width:640px){ .cf-prev{left:1.5rem} .cf-next{right:1.5rem} }

.cf-dots{display:flex;align-items:center;justify-content:center;gap:0}
.cf-dots button{
  display:grid;place-items:center;height:44px;min-width:44px;
  background:none;border:0;cursor:pointer;
}
.cf-dots button span{
  display:block;height:8px;width:8px;border-radius:999px;
  background:rgba(244,240,230,.25);transition:all 300ms var(--ease);
}
.cf-dots button[aria-current="true"] span{
  width:28px;background:var(--gold);box-shadow:0 0 10px rgba(188,156,72,.7);
}

@media (prefers-reduced-motion:reduce){
  .cf-card{transition:none}
  .arch-blind{transform:scaleY(0)}
  .arch-media img,.arch-media video{transform:none}
  .arch-outline path{stroke-dashoffset:0}
  .arch-glow{animation:none}
}


/* ════════════════════════════════════════════════════════════════
   Bogengröße nach Bildschirmbreite
   Steht bewusst am Ende: die Basisregel weiter oben hat dieselbe
   Spezifität und würde sonst gewinnen.
   Auf schmalen Geräten bestimmt die Breite die Größe, nicht die
   Höhe — sonst läuft der Bogen seitlich aus dem Bild.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .hero-arch{
    --arch-w:min(74vw,560px);
    --arch-h:calc(var(--arch-w) * 7 / 5);
  }
}
@media (max-width:760px){
  .hero-arch{
    --arch-w:min(94vw,430px);
    --arch-h:calc(var(--arch-w) * 7 / 5);
    top:calc(var(--header-h) + 1rem);
  }
  .hero-copy::before{inset:-16% -10% -10%}
}
@media (max-width:380px){
  .hero-arch{--arch-w:min(98vw,360px)}
}

/* ════════════════════════════════════════════════════════════════
   BOARD-OPTIK
   Bringt die Webseite auf dieselbe Bildsprache wie die Menu Boards
   im Laden: schwere kondensierte Versalien, Putzstruktur, fette
   Preise ohne Punktlinie, Goldrahmen in den Ecken.

   SCHRIFT: Auf den Boards steht Cocogoose Pro Letterpress. Die liegt
   hier nur als Testversion vor und darf nicht ausgeliefert werden.
   Bis eine Lizenz da ist, steht hier Anton — freie Schrift unter der
   Open Font License, kommerziell und als Webfont erlaubt.
   Beim Wechsel genügt es, --font-display unten zu ändern.
   ════════════════════════════════════════════════════════════════ */
:root{
  --font-display:'Anton','Archivo Narrow',ui-sans-serif,sans-serif;
}

/* ── Überschriften wie auf den Boards ── */
h1,h2,.display,h3,.hero-head,.quote{
  font-family:var(--font-display);
  font-weight:400;              /* Anton hat nur einen Schnitt */
  text-transform:uppercase;
}
h1,.hero-head{letter-spacing:.005em;line-height:.92}
h2{letter-spacing:.01em;line-height:1}
h3{letter-spacing:.035em}
.board-head h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.hero-head{font-size:clamp(2.6rem,6.6vw,5rem)}
/* Der Board-Titel steht in Gold, die Unterkategorien in Creme */
.sec-head h2{color:var(--gold-400)}
.stat .num{font-family:var(--font-display);font-weight:400}

/* ── Putzstruktur aus deiner Vorlage ── */
.tex{position:relative;isolation:isolate}
.tex::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('../img/textur-wand.jpg') center/cover;
  mix-blend-mode:overlay;opacity:.16;
}
.tex > *{position:relative;z-index:1}
.tex--hell::before{mix-blend-mode:multiply;opacity:.55}

/* ── Goldrahmen in den Ecken, wie auf den Boards ── */
.rahmen::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:26px;left:26px;right:26px;bottom:26px;
  border:2px solid rgba(188,156,72,.16);
  /* nur die Ecken zeigen, die Kanten dazwischen ausblenden */
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),
                     linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-size:120px 120px;-webkit-mask-repeat:no-repeat;
  -webkit-mask-position:top left,top right,bottom left,bottom right;
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),
                     linear-gradient(#000 0 0),linear-gradient(#000 0 0);
          mask-size:120px 120px;mask-repeat:no-repeat;
          mask-position:top left,top right,bottom left,bottom right;
}

/* ── Gerichtzeile im Board-Stil: keine Punktlinie, fetter Preis ── */
.item-dots{display:none}
.item-top{display:flex;align-items:baseline;gap:1.1rem}
.item-name{
  font-family:var(--font-body);font-weight:800;
  font-size:1.06rem;letter-spacing:.005em;line-height:1.15;
}
.price{
  margin-left:auto;font-family:var(--font-body);font-weight:800;
  font-size:1.08rem;letter-spacing:0;
}
.item-desc{
  font-size:.82rem;font-weight:600;line-height:1.35;margin-top:.15rem;
  max-width:46ch;
}
.board-head .sub{font-weight:700;letter-spacing:.14em}

/* ── Ein heller Abschnitt für den Rhythmus dunkel → hell → dunkel ── */
.story{
  background:linear-gradient(168deg,#FCFAF4,var(--cream) 48%,var(--cream-2));
  color:#16232F;
}
.story h2{color:var(--navy-700)}
.story .eyebrow{color:var(--brick)}
.story .eyebrow::before{background:linear-gradient(90deg,transparent,var(--brick))}
.story .lead,.story p{color:#3A4450}
.story .muted{color:#5F584C}
.story .stat .num{color:var(--brick)}
.story .stat .lbl{color:#6B6357}
.story .stats{border-top-color:rgba(115,36,29,.22)}
.story .story-figure::after{border-color:rgba(115,36,29,.24)}
.story .frame{border-color:rgba(115,36,29,.2)}
.story .uncover::after{background:var(--cream)}

/* ════════════════════════════════════════════════════════════════
   INTER als Arbeitsschrift
   Ersetzt Archivo und Archivo Narrow für alles außer den
   Board-Überschriften. Die Gewichte folgen den Menu Boards:
   Gerichtnamen und Preise fett, Beschreibungen halbfett,
   Fließtext etwas kräftiger als üblich.
   Hinweis: Archivo und Lilita One bleiben im Ordner, weil die
   Menu Boards unter menu-boards/ sie weiterhin benutzen.
   ════════════════════════════════════════════════════════════════ */
:root{
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sign:'Inter',ui-sans-serif,system-ui,sans-serif;
}

body{font-weight:450}

/* Kurze Auszeichnungen laufen fett, wie auf den Boards */
.eyebrow,.nav a,.tab,.footer h4,.open-badge,.scroll-cue,
.marquee-group span,.hours .d,.field label,.stat .lbl,.quote-by,
.board-head .sub,.cf-tag,.cf-sub,.extras .lbl{
  font-weight:700;
}
.btn{font-weight:700}
.mobile-nav a{font-weight:800}
.item-name,.price,.cf-price{font-weight:800}
.item-desc{font-weight:500}
.hl-list li,.box .row{font-weight:700}

/* Inter läuft breiter als Archivo Narrow — Laufweite etwas zurück,
   sonst brechen Navigation und Tabs um. */
.nav a{letter-spacing:.12em}
.tab{letter-spacing:.1em}
.btn{letter-spacing:.11em}
.eyebrow{letter-spacing:.22em}
.marquee-group span{letter-spacing:.18em}
.open-badge{letter-spacing:.12em}
.scroll-cue{letter-spacing:.22em}
.stat .lbl,.board-head .sub{letter-spacing:.13em}

/* ── Header: Inter braucht mehr Platz als Archivo Narrow ────────── */
.nav a,.btn,.extras .x,.open-badge{white-space:nowrap}
.nav{gap:clamp(.85rem,1.8vw,1.6rem)}
.nav a{font-size:.79rem;letter-spacing:.1em}
.header-cta .btn{padding-inline:.95rem;font-size:.75rem;letter-spacing:.09em}
/* Mobiles Menü früher einblenden — bei 960 px wurde es zu eng */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex;margin-left:auto}
  .header-cta .btn{display:none}
}

/* ════════════════════════════════════════════════════════════════
   HERO GROSS
   Der Bogen wird breiter als der Bildschirm. Dadurch laufen seine
   geraden Seiten links und rechts aus dem Bild, das Video füllt die
   volle Breite — und oben bleibt die Bogenkurve als Tor stehen.
   ════════════════════════════════════════════════════════════════ */
.hero-arch{
  --arch-w:min(132vw,1700px);
  --arch-h:calc(var(--arch-w) * 7 / 5);
  top:calc(var(--header-h) + .5rem);
}
/* Kontur dünner, sonst wirkt sie auf der großen Fläche wie ein Balken */
.arch-outline path{stroke-width:1.2}
.arch-behind{display:none}          /* Zweitbogen trägt auf dieser Größe nicht mehr */

/* Abdunkeln nach oben verlagern, dort steht der Text */
.arch-media::after{
  background:linear-gradient(180deg,
    rgba(6,26,44,.72) 0%,rgba(6,26,44,.42) 34%,
    rgba(6,26,44,.12) 62%,rgba(6,26,44,.5) 86%,rgba(6,26,44,.92) 100%);
}
.arch-glow{inset:-4% -20%;filter:blur(90px)}

/* ── Text größer ── */
.hero-copy{max-width:52rem;gap:1.35rem}
.hero-logo{width:clamp(260px,32vw,440px)}
.hero-head{
  font-size:clamp(3rem,8.2vw,6.4rem);
  line-height:.9;letter-spacing:0;
}
.hero-copy .lead{
  max-width:44ch;
  font-size:clamp(1.08rem,1.75vw,1.42rem);
  line-height:1.6;font-weight:500;
}
.hero .btn{min-height:58px;padding:1rem 2.1rem;font-size:1rem}
.hero .open-badge{font-size:.84rem;padding:.55rem 1.1rem}
.hero-copy::before{
  inset:-16% -22% -12%;
  background:radial-gradient(56% 58% at 50% 42%,
    rgba(6,26,44,.88) 0%,rgba(6,26,44,.64) 50%,rgba(6,26,44,.2) 76%,transparent 90%);
}

@media (max-width:1023px){
  .hero-arch{--arch-w:min(140vw,1000px)}
}
@media (max-width:760px){
  .hero-arch{--arch-w:min(158vw,620px);top:calc(var(--header-h) + .25rem)}
  .hero-head{font-size:clamp(2.4rem,11vw,3.6rem)}
  .hero-logo{width:min(74vw,300px)}
  .hero-copy .lead{font-size:1.02rem;max-width:32ch}
  .hero .btn{min-height:54px;font-size:.92rem}
}

/* ════════════════════════════════════════════════════════════════
   Hero-Überschrift zurück auf Fraunces
   Auf den Boards passt Anton, im Hero trägt der Serif in Groß- und
   Kleinschreibung mehr. Nur diese eine Stelle weicht ab.
   ════════════════════════════════════════════════════════════════ */
.hero-head{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:700;
  text-transform:none;
  letter-spacing:-.02em;
  line-height:.98;
  font-optical-sizing:auto;
  font-size:clamp(2.9rem,7.6vw,5.8rem);
}

/* ── Video höher: Bogen weiter nach oben, Bildinhalt mit ────────── */
.hero-arch{top:calc(var(--header-h) - 2.5rem)}
.arch-media img,.arch-media video{object-position:center 34%}
/* Der Text rückt mit, sonst sitzt er zu tief im Bogen */
.hero{padding-block:calc(var(--header-h) + 2.25rem) 4rem}

@media (max-width:760px){
  .hero-arch{top:calc(var(--header-h) - 1.25rem)}
  .hero-head{font-size:clamp(2.3rem,10.5vw,3.4rem)}
  .hero{padding-block:calc(var(--header-h) + 1rem) 2.5rem}
}

/* Der Bogen soll sich am Hero ausrichten, nicht am Textcontainer.
   .hero ist Flexbox, deshalb wirkt z-index auch ohne position. */
.hero-grid{position:static}

/* ════════════════════════════════════════════════════════════════
   CI-Schriften: Gobold Bold für Überschriften, Inter für alles andere
   Gobold hat kein Euro-Zeichen und keine türkischen Sonderzeichen.
   Beides steht deshalb nur in Inter — Preise, Währung, Gerichtnamen.
   ════════════════════════════════════════════════════════════════ */
:root{
  --font-display:'Gobold','Anton',ui-sans-serif,sans-serif;
}
/* Preis im Karussell enthält ein €, muss also Inter bleiben */
.cf-price{font-family:var(--font-body);font-weight:800}

/* Korrektur: Gobold hat das Euro-Zeichen. Preise dürfen also in die
   Displayschrift, so wie auf den Boards im Laden.
   Inter steht als Rückfall dahinter — es deckt ş, Ş, ğ und İ ab,
   die Gobold als einzige fehlen. */
:root{
  --font-display:'Gobold','Inter',ui-sans-serif,sans-serif;
}
.item-name,.price,.cf-price,.cf-text h3,.cf-sub{
  font-family:var(--font-display);
  font-weight:400;
}
.item-name{font-size:1.15rem;letter-spacing:.015em}
.price{font-size:1.18rem;letter-spacing:.01em}

/* ── Tab-Leiste ───────────────────────────────────────────────
   Inter läuft breiter als die vorherige Schrift, dadurch lief die
   Leiste am Desktop über und die letzte Kategorie war unsichtbar
   (Scrollbar ist ausgeblendet). Ab 1100 px etwas enger, damit alle
   acht Reiter nebeneinander passen. */
@media (min-width:1100px){
  .tabs{gap:.2rem}
  .tab{padding-inline:.66rem;font-size:.76rem;letter-spacing:.06em}
  .tab .ico{width:16px;height:16px}
}
/* Wo sie wirklich scrollt, zeigt eine weiche Kante, dass es weitergeht.
   Die Klasse setzt main.js, sonst würde die Blende auch dann verlaufen,
   wenn alle Reiter passen. */
.tabs.is-scrollable{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
}

/* ════════════════════════════════════════════════════════════════
   Hero-Überschrift auf Gobold
   Gobold ist eine reine Versalschrift: Klein- und Großbuchstaben
   liegen auf denselben Glyphen. text-transform macht das explizit,
   damit die Zeile auch dann als Versalzeile steht, wenn Inter als
   Rückfall einspringt. Versalien brauchen keine negative Laufweite
   und vertragen eine engere Zeile, weil Unterlängen fehlen.
   ════════════════════════════════════════════════════════════════ */
.hero-head{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.012em;
  line-height:.88;
  font-size:clamp(3.1rem,8.4vw,6.2rem);
}
@media (max-width:760px){
  .hero-head{font-size:clamp(2.5rem,11.4vw,3.8rem)}
}

/* ════════════════════════════════════════════════════════════════
   Hero-Überschrift: zwei gleich lange Zeilen statt Diamant
   Vorher schwankte die Zeilenbreite um 48 % (321 / 621 / 328), das
   liest sich als mittig aufgesetzter Block. Zwei Zeilen mit ~1 %
   Unterschied ergeben ein liegendes Rechteck, das in die Breite zieht.
   Dafür darf die Textspalte breiter werden als der Fließtext, der
   über seine eigene max-width bei 44ch bleibt.
   ════════════════════════════════════════════════════════════════ */
.hero-copy{max-width:min(94vw,1180px)}

.hero-head{
  font-size:clamp(2.4rem,7.6vw,7rem);
  line-height:.95;      /* vorher .88 — die Zeilen klebten aneinander */
  letter-spacing:.03em; /* zieht die Zeile zusätzlich in die Breite */
  text-wrap:nowrap;     /* die Zeilen sind gesetzt, nicht umbrechbar */
}
@media (max-width:760px){
  .hero-head{font-size:clamp(1.85rem,9.4vw,2.9rem);letter-spacing:.02em}
  .hero-copy{max-width:100%}
}

/* ── Hero-Überschrift: Luft ───────────────────────────────────
   0.95 war für zwei Zeilen dieser Größe zu eng, die Versalien
   standen aufeinander. Dazu gab der Flex-Container nur 21,6 px
   nach oben und unten — bei 73 px Schrift zu wenig. */
.hero-head{
  line-height:1.08;
  margin-block:clamp(.75rem,2.2vw,1.75rem);
}
@media (max-width:760px){
  .hero-head{line-height:1.06;margin-block:clamp(.6rem,3.2vw,1.1rem)}
}

/* ════════════════════════════════════════════════════════════════
   Angebote
   Cremefarbener Abschnitt zwischen zwei Navy-Blöcken, darin die
   Aktionen als Navy-Karten — derselbe Rhythmus wie auf den Boards
   im Laden (navy, creme, navy, creme).
   ════════════════════════════════════════════════════════════════ */
.ang-grid{
  display:grid;gap:clamp(1.2rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  margin-top:clamp(2rem,4vw,3rem);
}
.ang{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:linear-gradient(180deg,var(--navy-900),var(--navy-950));
  border:var(--hair);border-radius:var(--r-md);
  color:var(--cream);
}
.ang-head .ico{width:26px;height:26px;color:var(--gold-400)}
.ang-tag{
  margin-top:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);
}
.ang h3{
  margin-top:.3rem;
  font-size:clamp(1.55rem,3vw,2.05rem);
  color:var(--cream);letter-spacing:.02em;line-height:1.05;
}
.ang-deal{
  margin-top:1.15rem;padding-top:1.15rem;
  border-top:var(--hair);
  display:flex;flex-direction:column;gap:.35rem;
}
.ang-zahl{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.3rem,4.8vw,3.2rem);line-height:1;
  color:var(--gold-400);letter-spacing:.01em;
}
.ang-worauf{font-size:.95rem;font-weight:600;color:var(--cream-2)}
.ang-text{
  margin-top:1rem;margin-bottom:1.6rem;
  font-size:.98rem;line-height:1.6;color:var(--cream-2);
}
.ang-btn{margin-top:auto;align-self:flex-start}

/* Der Abschnitt hatte keinen eigenen Grund und lief auf dem, was
   zufällig dahinter lag — dadurch stand Gold auf Hell. Jetzt fest
   auf Creme, mit Textfarben für hellen Grund. Die Karten bleiben
   navy und setzen sich davon ab. */
.angebote{background:var(--cream)}
.angebote .eyebrow{color:var(--brick)}
.angebote .sec-head h2{color:var(--navy-950)}