/* ============================================================
   SCHNITZEL HAUS DAXLANDEN — Karlsruhe
   Warm Wirtshaus + sports-bar. Display: Anton · Accent: Fraunces
   ============================================================ */
:root {
  --bg: #1b130d;
  --ink: #221812;
  --panel: #2b1f16;
  --panel-2: #372718;

  --crust: #f0b64a;
  --amber: #e0932c;
  --paprika: #d8482a;
  --beer: #f2c14e;
  --cream: #f8efe0;
  --dim: rgba(248, 239, 224, 0.66);
  --faint: rgba(248, 239, 224, 0.38);

  --grad: linear-gradient(100deg, #d8482a, #e0932c 46%, #f0b64a);
  --grad-hot: linear-gradient(100deg, #d8482a, #ef7a2e 55%, #f0b64a);

  --line: rgba(248, 239, 224, 0.13);
  --line-2: rgba(248, 239, 224, 0.06);
  --glass: rgba(248, 239, 224, 0.04);
  --shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.85);
  --glow: 0 0 50px -12px rgba(224, 147, 44, 0.6);

  --wrapw: 1240px;
  --r: 14px;
  --r-lg: 24px;
  --nav-h: 74px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: "Inter", system-ui, sans-serif; background: var(--bg); color: var(--cream); line-height: 1.6; overflow-x: clip; max-width: 100vw; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: #201206; }

.wrap { width: min(var(--wrapw), 92vw); margin-inline: auto; }
.disp, .h2, .hero-title .l1, .bw-name, .sig-info h3, .fact b, .mc-head h3 { font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: .01em; }
.script { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-script { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 900; background: var(--grad); }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; padding: .85rem 1.5rem; border-radius: 100px; border: 1px solid var(--line); color: var(--cream); transition: transform .3s var(--ease), background .3s, border-color .3s, filter .3s; white-space: nowrap; cursor: pointer; }
.btn-solid { background: var(--grad); color: #201206; border-color: transparent; box-shadow: var(--glow); font-weight: 700; }
.btn-solid:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-ghost { background: var(--glass); }
.btn-ghost:hover { border-color: var(--amber); color: var(--crust); transform: translateY(-2px); }
.btn.big { padding: 1.1rem 2.1rem; font-size: 1.05rem; }

/* header */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 800; transition: background .5s var(--ease), backdrop-filter .5s, border-color .5s; border-bottom: 1px solid transparent; }
.header.scrolled { background: rgba(27,19,13,.85); backdrop-filter: blur(18px) saturate(1.3); border-bottom-color: var(--line-2); }
.topbar { overflow: hidden; max-height: 44px; border-bottom: 1px solid var(--line-2); transition: max-height .5s var(--ease), opacity .4s; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; font-family: "Space Mono", monospace; font-size: .72rem; letter-spacing: .04em; color: var(--dim); }
.tb-item { display: inline-flex; align-items: center; gap: .5rem; }
.tb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crust); box-shadow: 0 0 9px -1px var(--crust); }
.tb-right { display: inline-flex; align-items: center; gap: .8rem; }
.tb-right a { transition: color .3s; } .tb-right a:hover { color: var(--crust); }
.tb-sep { width: 1px; height: 11px; background: var(--line); display: inline-block; }
.header.scrolled .topbar { max-height: 0; opacity: 0; border-color: transparent; }
.bar { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); box-shadow: var(--glow); }
.brand-mark .lg { width: 27px; height: 27px; display: block; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.bw-name { font-size: 1.12rem; letter-spacing: .04em; }
.bw-kicker { font-family: "Space Mono", monospace; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--crust); margin-top: .32rem; }
.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a:not(.btn) { font-size: .88rem; font-weight: 500; color: var(--dim); position: relative; transition: color .3s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0; background: var(--grad); transition: width .35s var(--ease); }
.nav a:not(.btn):hover { color: var(--cream); } .nav a:not(.btn):hover::after { width: 100%; }
.nav-cta { padding: .7rem 1.35rem; font-size: .82rem; }
.burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 0; z-index: 810; }
.burger span { width: 24px; height: 2px; background: var(--cream); transition: transform .4s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--nav-h) + 40px) 0 clamp(3rem, 8vh, 6rem); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-bg .hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; }
.hero-bg .hs.on { opacity: 1; }
/* Flyer-Slide: kompletter Flyer sichtbar, unverändert */
.hero-bg .hs-flyer { display: block; background: #0c0906; }
.hero-bg .hs-flyer img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: none !important; transform: none !important; }
.hero.flyer-on .hero-in, .hero.flyer-on .scroll-cue { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility .5s; }
.hero.flyer-on .hero-bg::after { opacity: .15; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,19,13,.72) 0%, rgba(27,19,13,.35) 30%, rgba(27,19,13,.55) 60%, var(--bg) 99%), radial-gradient(120% 80% at 20% 90%, rgba(27,19,13,.7), transparent 60%); }
.hero-in { position: relative; z-index: 2; }
.eyebrow { font-family: "Space Mono", monospace; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); display: inline-flex; align-items: center; gap: .6rem; background: rgba(0,0,0,.32); padding: .45rem .9rem; border-radius: 100px; border: 1px solid var(--line); }
.eyebrow .ping { width: 7px; height: 7px; border-radius: 50%; background: var(--crust); box-shadow: 0 0 0 0 rgba(240,182,74,.6); animation: ping 2.2s infinite; }
@keyframes ping { 0%{box-shadow:0 0 0 0 rgba(240,182,74,.55);} 70%{box-shadow:0 0 0 12px rgba(240,182,74,0);} 100%{box-shadow:0 0 0 0 rgba(240,182,74,0);} }
.hero-title { margin: 1.2rem 0 1.2rem; line-height: .9; }
.hero-title .l1 { display: block; font-size: clamp(2.6rem, 8.5vw, 7rem); text-transform: uppercase; color: var(--cream); text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.hero-title .l2 { display: block; font-size: clamp(2.6rem, 8vw, 6rem); line-height: .9; margin-top: -.05em; background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 18px rgba(216,72,42,.3)); }
.hero-lede { max-width: 46ch; color: var(--cream); font-size: clamp(1rem, 1.5vw, 1.16rem); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero-actions { display: flex; gap: .9rem; margin-top: 1.8rem; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; }
.hb { font-size: .78rem; color: var(--dim); display: flex; flex-direction: column; gap: .15rem; padding-left: .9rem; border-left: 2px solid var(--amber); }
.hb b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 1rem; color: var(--cream); letter-spacing: .02em; }
.scroll-cue { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; font-family: "Space Mono", monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--crust), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%,100%{transform:scaleY(.3);opacity:.4;} 50%{transform:scaleY(1);opacity:1;} }

/* reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

/* marquee */
.marquee { border-block: 1px solid var(--line-2); padding: 1.1rem 0; overflow: hidden; white-space: nowrap; background: var(--ink); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-track { display: inline-flex; animation: mq 26s linear infinite; }
.mq-track span { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: .03em; color: var(--cream); }
.mq-track em { color: var(--crust); font-style: normal; padding: 0 1.1rem; }
@keyframes mq { to { transform: translateX(-50%); } }

/* section shared */
.idx { font-family: "Space Mono", monospace; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--crust); display: inline-block; }
.h2 { font-size: clamp(2.1rem, 5.5vw, 4.2rem); line-height: 1; text-transform: uppercase; }
.h2 .script { text-transform: none; }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sec-head .idx { margin-bottom: 1rem; }
.lead { color: var(--dim); max-width: 54ch; margin-top: 1rem; }

/* signature */
.signature { padding: clamp(4.5rem, 9vh, 8rem) 0; }
.sig-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(.8rem, 1.6vw, 1.2rem); }
.sig-card { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); min-height: 220px; display: flex; align-items: flex-end; padding: 1.4rem; box-shadow: var(--shadow); transition: transform .4s var(--ease), border-color .4s; isolation: isolate; }
.sig-card:hover { transform: translateY(-4px); border-color: rgba(224,147,44,.5); }
.sig-card.feat { grid-row: span 2; min-height: 460px; }
.sig-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sig-card:hover img { transform: scale(1.06); }
.sig-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 32%, rgba(15,10,6,.9)); }
.sig-info { position: relative; }
.sig-tag { display: inline-block; font-family: "Space Mono", monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #201206; background: var(--crust); padding: .2rem .55rem; border-radius: 100px; margin-bottom: .5rem; }
.sig-info h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); text-transform: uppercase; line-height: 1; margin-bottom: .35rem; }
.sig-info p { font-size: .84rem; color: var(--dim); max-width: 26ch; }
.sig-price { display: inline-block; margin-top: .7rem; font-family: "Space Mono", monospace; font-weight: 700; color: var(--cream); background: rgba(0,0,0,.35); padding: .25rem .6rem; border-radius: 100px; font-size: .82rem; }
.sig-grid.three { grid-template-columns: repeat(3, 1fr); }
.sig-grid.three .sig-card { aspect-ratio: 4 / 5; min-height: 0; }
@media (max-width: 700px) { .sig-grid.three { grid-template-columns: 1fr; } .sig-grid.three .sig-card { aspect-ratio: 16 / 10; } }

/* menu */
.menu-sec { padding: clamp(4rem, 8vh, 7rem) 0; background: var(--ink); border-block: 1px solid var(--line-2); }
.menu-grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.mcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 2.5vw, 2.2rem); background: linear-gradient(180deg, var(--panel), var(--ink)); box-shadow: var(--shadow); }
.mcard.drinks { background: linear-gradient(180deg, #3a2312, var(--ink)); }
.mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mc-head h3 { font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; }
.mc-price { font-family: "Space Mono", monospace; font-weight: 700; color: var(--crust); font-size: .9rem; white-space: nowrap; }
.mc-note { font-size: .8rem; color: var(--dim); margin: .5rem 0 1.2rem; }
.mc-list { list-style: none; }
.mc-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; padding: .5rem 0; border-bottom: 1px dashed var(--line-2); }
.mc-list li b { color: var(--cream); font-weight: 600; font-size: .95rem; flex: 0 1 auto; }
.mc-list li .dots { flex: 1 1 auto; align-self: center; min-width: 14px; border-bottom: 1px dotted rgba(201,179,147,.4); margin: 0 .5rem; transform: translateY(-2px); }
.mc-list li em { font-family: "Space Mono", monospace; font-style: normal; font-weight: 700; color: var(--crust); font-size: .84rem; white-space: nowrap; }
.mc-list li .ds, .mc-list li span { font-size: .78rem; color: var(--dim); flex: 1 1 100%; margin-top: 1px; }
/* print-Optik: geregelte Haupt-Header + einheitliche Sub-Header */
.menu-grid2.four .mcard > .mc-head { border-bottom: 1px solid var(--line); padding-bottom: .55rem; margin-bottom: .4rem; }
.menu-grid2.four .mcard > .mc-head h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); white-space: nowrap; }
.mc-sub { font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase; color: var(--crust); margin: 1.4rem 0 .4rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.menu-foot { text-align: center; margin-top: 2.2rem; }
.menu-foot p { color: var(--dim); font-size: .86rem; margin: 0 auto 1.2rem; max-width: 60ch; }

/* sky band */
.sky-band { position: relative; padding: clamp(4rem, 9vh, 7rem) 0; overflow: hidden; }
.sky-bg { position: absolute; inset: 0; z-index: 0; }
.sky-bg img { width: 100%; height: 100%; object-fit: cover; }
.sky-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,12,7,.94) 30%, rgba(20,12,7,.55) 75%, transparent), linear-gradient(0deg, var(--bg), transparent 40%); }
.sky-in { position: relative; z-index: 2; max-width: 620px; }
.sky-in .lead { margin-bottom: 1.6rem; }

/* story */
.story { padding: clamp(4.5rem, 9vh, 8rem) 0; }
.story-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.story-copy .idx { margin-bottom: 1rem; }
.story-copy .h2 { margin-bottom: 1.4rem; }
.story-copy .h2 .script { font-size: 1.05em; }
.story-copy p { color: var(--dim); margin-bottom: 1rem; max-width: 54ch; }
.story-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.story-pills span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .82rem; line-height: 1; color: var(--cream); background: var(--glass); border: 1px solid var(--line); border-radius: 100px; padding: .55rem 1rem; transition: border-color .25s var(--ease), background .25s var(--ease); }
.story-pills span:hover { border-color: var(--gold); background: rgba(255,194,75,.08); }
.story-pills span i { font-size: 1rem; font-style: normal; line-height: 1; }
.story-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.fact { border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; background: linear-gradient(180deg, var(--panel), var(--ink)); }
.fact b { display: block; font-size: 1.4rem; text-transform: uppercase; line-height: 1; margin-bottom: .5rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fact span { font-size: .84rem; color: var(--dim); }

/* reviews */
.reviews { padding: clamp(4rem, 8vh, 7rem) 0; }
.rev-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.rev-copy .idx { margin-bottom: .8rem; }
.rev-stars { color: var(--crust); font-size: 1.6rem; letter-spacing: .2em; margin: 1rem 0; text-shadow: 0 0 20px rgba(240,182,74,.4); }
.rev-copy .lead { margin-bottom: 1.4rem; }
.rev-rate { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem); background: linear-gradient(180deg, var(--panel), var(--ink)); text-align: center; box-shadow: var(--shadow); }
.rr-k { font-family: "Space Mono", monospace; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.rr-stars { display: flex; justify-content: center; gap: .2rem; margin: 1rem 0 .6rem; }
.rr-stars button { background: none; border: 0; cursor: pointer; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; color: rgba(248,239,224,.2); transition: color .15s, transform .15s; padding: 0 .1rem; }
.rr-stars button:hover { transform: scale(1.15); }
.rr-stars button.on { color: var(--crust); text-shadow: 0 0 16px rgba(240,182,74,.5); }
.rr-hint { font-size: .78rem; color: var(--faint); }

/* kontakt */
.kontakt { padding: clamp(4.5rem, 9vh, 8rem) 0; }
.k-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.kcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; background: linear-gradient(180deg, var(--panel), var(--ink)); display: flex; flex-direction: column; gap: .3rem; transition: transform .3s var(--ease), border-color .3s; min-height: 150px; }
.kcard:hover { transform: translateY(-3px); border-color: rgba(224,147,44,.5); }
.k-k { font-family: "Space Mono", monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--crust); }
.k-v { font-family: "Anton", sans-serif; font-size: 1.4rem; text-transform: uppercase; margin-top: .3rem; }
.k-s { font-size: .82rem; color: var(--dim); margin-top: auto; }
.k-hours { margin-top: .5rem; }
.k-hours .row { display: flex; justify-content: space-between; font-size: .84rem; padding: .25rem 0; color: var(--cream); }
.k-hours .row.sub { color: var(--dim); font-size: .78rem; }
.map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); height: 340px; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.25) sepia(.15) contrast(1.05); }

/* footer */
.footer { padding: clamp(3.5rem, 6vh, 5rem) 0 2.5rem; border-top: 1px solid var(--line-2); background: var(--ink); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 2.5rem; }
.foot-brand .brand { margin-bottom: 1rem; }
.foot-brand p { color: var(--dim); font-size: .9rem; max-width: 38ch; }
.foot-social { margin-top: 1.2rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.foot-social a { font-family: "Space Mono", monospace; font-size: .78rem; color: var(--crust); border: 1px solid rgba(240,182,74,.3); padding: .5rem 1rem; border-radius: 100px; transition: all .3s; }
.foot-social a:hover { background: rgba(240,182,74,.1); }
.foot-col h4 { font-family: "Space Mono", monospace; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 1rem; }
.foot-col a, .foot-col p { display: block; color: var(--dim); font-size: .9rem; margin-bottom: .5rem; transition: color .3s; }
.foot-col a:hover { color: var(--crust); }
.foot-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--faint); }
.foot-legal { display: inline-flex; gap: 18px; }
.foot-legal button { position: relative; background: none; border: 0; padding: 0; cursor: pointer; font-family: "Space Mono", monospace; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); transition: color .3s; }
.foot-legal button:hover { color: var(--crust); }
.foot-legal button + button::before { content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: var(--line); }

/* modals (legal + feedback) */
.legal, .order-modal { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.legal.open, .order-modal.open { opacity: 1; pointer-events: all; }
.legal-panel, .om-panel { position: relative; width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: clamp(28px, 5vw, 54px); transform: translateX(40px); transition: transform .4s var(--ease); }
.legal.open .legal-panel, .order-modal.open .om-panel { transform: none; }
.legal-close, .om-close { position: sticky; top: 0; float: right; background: none; border: 1px solid var(--line); color: var(--cream); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 14px; transition: border-color .2s, color .2s; }
.legal-close:hover, .om-close:hover { border-color: var(--crust); color: var(--crust); }
.legal-kicker { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--crust); }
.legal-body h2, .om-title { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); text-transform: uppercase; margin: 8px 0 24px; }
.legal-body h3 { font-size: 14px; font-weight: 600; color: var(--crust); margin: 24px 0 6px; }
.legal-body p { font-size: 14px; line-height: 1.7; color: var(--dim); }
.legal-body a { color: var(--crust); text-decoration: underline; }
.om-note { color: var(--dim); font-size: .92rem; margin-bottom: 1.6rem; }
.om-hp { position: absolute; left: -9999px; }
.om-field { display: block; font-family: "Space Mono", monospace; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.1rem; }
.om-field input, .om-field textarea { display: block; width: 100%; margin-top: .4rem; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; color: var(--cream); font-family: "Inter", sans-serif; font-size: .95rem; text-transform: none; letter-spacing: 0; }
.om-field input:focus, .om-field textarea:focus { outline: none; border-color: var(--crust); }
/* Date/Time/Number-Felder auf Handy (iOS) normalisieren — sonst zu breit/groß */
input[type="date"], input[type="time"], input[type="number"] { -webkit-appearance: none; -moz-appearance: textfield; appearance: none; min-width: 0; max-width: 100%; }
.om-field input[type="date"] { min-height: 2.9rem; }
.om-submit { width: 100%; justify-content: center; margin-top: .4rem; }
.om-success { text-align: center; padding: 2rem 0; }
.om-tick { width: 60px; height: 60px; border-radius: 50%; background: var(--grad); color: #201206; display: grid; place-items: center; font-size: 1.8rem; margin: 0 auto 1.2rem; }
.om-success h3 { font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.6rem; text-transform: uppercase; margin-bottom: .5rem; }
.om-success p { color: var(--dim); margin-bottom: 1.4rem; }

/* ============================================================ responsive ============================================================ */
@media (max-width: 940px) {
  .sig-grid { grid-template-columns: 1fr 1fr; }
  .sig-card.feat { grid-column: span 2; grid-row: auto; min-height: 300px; }
  .menu-grid2 { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .rev-in { grid-template-columns: 1fr; }
  .k-grid { grid-template-columns: 1fr 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .topbar { display: none; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.7rem; padding: 3rem; background: rgba(34,24,18,.98); backdrop-filter: blur(20px); border-left: 1px solid var(--line); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform .5s var(--ease); z-index: 805; }
  .nav.open { transform: none; visibility: visible; pointer-events: auto; }
  .nav a:not(.btn) { font-size: 1.1rem; color: var(--cream); }
  .burger { display: flex; }
}
@media (max-width: 560px) {
  .hero-badges { gap: .8rem; }
  .sig-grid { grid-template-columns: 1fr; }
  .sig-card.feat { grid-column: auto; }
  .story-facts { grid-template-columns: 1fr; }
  .k-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 2rem; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .scroll-cue { display: none; }
}

/* rot markierte Platzhalter für fehlende Kundenangaben (website-launch-pro) */
.fehlt{ color:#dc2626; background:#fef2f2; font-weight:700; padding:1px 5px; border:1px dashed #dc2626; border-radius:4px; }

/* ---- Ambiente: Ein Haus, drei Welten ---- */
.worlds{ padding: clamp(3.5rem,8vw,6rem) 0; }
.worlds-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; }
.worlds-copy .h2{ margin:.4rem 0 1rem; }
.worlds-copy > p{ color: rgba(240,230,218,.72); max-width:42ch; margin-bottom:1.4rem; }
.worlds-list{ list-style:none; padding:0; margin:0 0 1.8rem; display:flex; flex-direction:column; gap:.7rem; }
.worlds-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.worlds-list li i{ font-style:normal; font-size:1.15rem; line-height:1.4; }
.worlds-list li span{ color: rgba(240,230,218,.82); font-size:.98rem; }
.worlds-list li b{ color:#f0e6da; }
.worlds-shots{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.worlds-shots .ws{ position:relative; margin:0; border-radius:16px; overflow:hidden; background:#241a12; aspect-ratio:1/1; }
.worlds-shots .ws-big{ grid-column:1 / -1; aspect-ratio:16/9; }
.worlds-shots .ws img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.worlds-shots .ws:hover img{ transform:scale(1.05); }
.worlds-shots figcaption{ position:absolute; left:12px; bottom:10px; background:rgba(20,14,8,.7); backdrop-filter:blur(4px); color:#f0e6da; font-size:.78rem; font-weight:700; letter-spacing:.04em; padding:.28rem .7rem; border-radius:100px; }
@media(max-width:820px){
  .worlds-grid{ grid-template-columns:1fr; }
}

/* ---- Hero: LED-Bar langsamer Pan von rechts nach links ---- */
@keyframes heroPanRL { 0%{ transform:scale(1.14) translateX(3.5%);} 100%{ transform:scale(1.14) translateX(-3.5%);} }
.hero-bg img{ animation: heroPanRL 26s ease-in-out infinite alternate; will-change:transform; }
@media(prefers-reduced-motion:reduce){ .hero-bg img{ animation:none; transform:scale(1.05);} }

/* ---- Bar-Karten-Bild ---- */
.mcard.drinks .mc-img{ border-radius:12px; overflow:hidden; margin-bottom:1rem; aspect-ratio:16/10; background:#241a12; }
.mcard.drinks .mc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.mcard.drinks:hover .mc-img img{ transform:scale(1.05); }

/* ---- Speisekarte: volle Karte, 4 stehende Spalten gleicher Höhe (Desktop) ---- */
.menu-grid2.four{ grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.6vw,1.4rem); align-items:stretch; }
.menu-grid2.four .mcard{ display:flex; flex-direction:column; }
.menu-grid2.four .mcard > .btn{ margin-top:auto; }
@media (max-width:1120px) and (min-width:701px){ .menu-grid2.four{ grid-template-columns:repeat(2,1fr); } }
.mcard .mc-list li em{ color:var(--crust); }

/* ---- Speisekarte: Mobile Swipe-Carousel (gleiche Höhe, Preise ausgerichtet) ---- */
.menu-swipe-hint{ display:none; align-items:center; justify-content:center; gap:.55rem; margin:1rem 0 0; font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--crust); }
.menu-swipe-hint i{ font-style:normal; animation:swipeNudge 1.8s ease-in-out infinite; }
@keyframes swipeNudge{ 0%,100%{ transform:translateX(0); opacity:.55 } 50%{ transform:translateX(5px); opacity:1 } }
@media (max-width: 700px){
  .menu-grid2{
    display:flex; grid-template-columns:none; gap:1rem; align-items:stretch;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:.2rem .1rem 1rem; scroll-padding:.1rem; scrollbar-width:none;
  }
  .menu-grid2::-webkit-scrollbar{ display:none; }
  .menu-grid2 .mcard{ flex:0 0 87%; scroll-snap-align:start; min-width:0; display:flex; flex-direction:column; }
  .menu-grid2 .mcard .mc-list:last-of-type{ margin-bottom:auto; }
  .menu-grid2 .mcard .btn{ margin-top:1.4rem; }
  .menu-swipe-hint{ display:flex; }
}
/* Preise & Zeilen sauber ausgerichtet (auch Desktop) */
.mc-list li{ align-content:start; }
.mc-list li b{ flex:1 1 auto; }
.mc-list li em{ flex:0 0 auto; }

/* ===== Speisekarte — Kategorie-Tabs (clean, Handy + Desktop) ===== */
.menu-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; max-width:760px; margin:0 auto 2.2rem; }
.menu-tab{ font-family:"Inter",sans-serif; font-size:.92rem; font-weight:600; color:var(--cream); background:var(--glass); border:1px solid var(--line); border-radius:100px; padding:.66rem 1.25rem; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); white-space:nowrap; }
.menu-tab:hover{ border-color:var(--amber); transform:translateY(-2px); }
.menu-tab.on{ background:var(--grad); color:#201206; border-color:transparent; box-shadow:var(--glow); font-weight:700; }
.menu-swipe-tip{ display:none; text-align:center; font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--crust); margin:-1.2rem 0 1.6rem; }
.menu-swipe-tip i{ font-style:normal; animation:swipeNudge 1.8s ease-in-out infinite; display:inline-block; }
.menu-panels{ max-width:760px; margin:0 auto; touch-action:pan-y; }
.menu-panel{ display:none; }
.menu-panel.on{ display:block; animation:menuFade .34s var(--ease); }
@keyframes menuFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.menu-subhead{ font-family:"Anton",sans-serif; font-weight:400; font-size:1.1rem; letter-spacing:.02em; text-transform:uppercase; color:var(--crust); margin:1.3rem 0 .3rem; padding-bottom:.4rem; border-bottom:1px solid var(--line); }
.menu-subhead:first-child{ margin-top:0; }
.menu-list{ list-style:none; }
.menu-list li{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; column-gap:.55rem; padding:.5rem 0; border-bottom:1px dashed var(--line-2); }
.menu-list li:last-child{ border-bottom:0; }
.menu-list .mi-name{ grid-column:1; font-weight:600; font-size:.97rem; color:var(--cream); }
.menu-list .mi-dots{ grid-column:2; align-self:center; border-bottom:1px dotted rgba(201,179,147,.4); transform:translateY(-3px); }
.menu-list .mi-price{ grid-column:3; font-family:"Space Mono",monospace; font-weight:700; font-size:.88rem; color:var(--crust); white-space:nowrap; }
.menu-list .mi-desc{ grid-column:1 / -1; font-size:.8rem; color:var(--dim); margin-top:.05rem; }
@media (max-width:760px){ .menu-swipe-tip{ display:block; } }
@media (max-width:520px){
  .menu-tab{ font-size:.86rem; padding:.55rem .95rem; }
  .menu-list .mi-name{ font-size:.94rem; }
  .menu-list li{ padding:.46rem 0; }
}

/* ===== Reservierungs-Modal ===== */
.res-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:6vw; background:rgba(12,8,5,.72); backdrop-filter:blur(6px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease), visibility .3s; }
.res-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
.res-panel{ position:relative; width:min(440px,100%); background:linear-gradient(180deg,var(--panel),var(--ink)); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:clamp(1.7rem,6vw,2.6rem); text-align:center; transform:translateY(18px) scale(.97); transition:transform .35s var(--ease); }
.res-overlay.open .res-panel{ transform:none; }
.res-close{ position:absolute; top:.7rem; right:.9rem; background:none; border:0; color:var(--dim); font-size:1.3rem; cursor:pointer; line-height:1; padding:.3rem; }
.res-close:hover{ color:var(--cream); }
.res-emoji{ font-size:2.4rem; line-height:1; }
.res-panel h3{ font-family:"Anton",sans-serif; font-weight:400; font-size:clamp(1.5rem,6vw,2rem); text-transform:uppercase; margin:.5rem 0 .2rem; }
.res-sub{ color:var(--dim); font-size:.92rem; margin:0 auto 1.5rem; max-width:34ch; }
.res-fields{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1.1rem; text-align:left; }
.res-fields label:first-child{ grid-column:1 / -1; }
.res-fields label{ display:flex; flex-direction:column; gap:.35rem; font-family:"Inter",sans-serif; font-size:.78rem; letter-spacing:.02em; color:var(--dim); text-transform:uppercase; }
.res-fields input{ background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:.75rem .85rem; color:var(--cream); font-family:"Inter",sans-serif; font-size:.98rem; text-transform:none; letter-spacing:0; width:100%; color-scheme:dark; }
.res-fields input:focus{ outline:none; border-color:var(--crust); }
.res-hint{ margin-top:1rem; font-size:.85rem; color:var(--dim); }
.res-hint a{ color:var(--crust); }

/* ===== Events / Nächstes Topspiel ===== */
.events{ position:relative; padding:clamp(4rem,9vw,7rem) 0; overflow:hidden; }
.events-bg{ position:absolute; inset:0; z-index:0; }
.events-bg img{ width:100%; height:100%; object-fit:cover; }
.events-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,14,8,.84),rgba(20,14,8,.93)); }
.events-in{ position:relative; z-index:2; text-align:center; max-width:840px; }
.events-in .lead{ margin:0 auto 2.2rem; max-width:60ch; }
.events-note{ margin-top:1.4rem; font-size:.86rem; color:rgba(240,230,218,.6); }
.flyer-frame{ display:block; max-width:440px; margin:2rem auto 0; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.6); transition:transform .4s var(--ease); }
.flyer-frame:hover{ transform:translateY(-5px); }
.flyer-frame img{ width:100%; height:auto; display:block; }
.match-card{ border:1px solid var(--line); border-radius:20px; padding:clamp(1.6rem,4vw,2.6rem); background:linear-gradient(180deg,rgba(40,29,19,.82),rgba(20,14,8,.9)); backdrop-filter:blur(6px); box-shadow:var(--shadow); }
.teams{ display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,4vw,2.5rem); }
.team{ display:flex; flex-direction:column; align-items:center; gap:.7rem; flex:1; min-width:0; }
.crest{ width:clamp(60px,15vw,92px); height:clamp(60px,15vw,92px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"Anton",sans-serif; font-size:clamp(1.1rem,4vw,1.9rem); color:#fff; letter-spacing:.02em; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.crest.fck{ background:radial-gradient(circle at 35% 30%,#c0392b,#7a1f18); }
.crest.ksc{ background:radial-gradient(circle at 35% 30%,#2f6fd6,#123c86); }
.team b{ color:var(--cream); font-size:.9rem; line-height:1.25; }
.vs{ font-family:"Anton",sans-serif; font-size:clamp(1.3rem,5vw,2.1rem); color:var(--crust); flex:none; }
.match-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.2rem; margin:1.8rem 0; padding:1.4rem 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.mm{ display:flex; align-items:center; gap:.6rem; }
.mm i{ font-style:normal; font-size:1.3rem; line-height:1; }
.mm span{ display:flex; flex-direction:column; text-align:left; font-size:.76rem; color:var(--dim); }
.mm span b{ color:var(--cream); font-size:.95rem; }
@media(max-width:560px){ .match-meta{ flex-direction:column; align-items:flex-start; gap:.9rem; width:max-content; margin-inline:auto; } .team b{ font-size:.8rem; } }

/* ===== Angebote / Extras ===== */
.angebote{ padding:clamp(3.5rem,8vw,6rem) 0; }
.ang-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; max-width:840px; margin:0 auto; }
.ang-card{ border:1px solid var(--line); border-radius:18px; padding:clamp(1.6rem,3.5vw,2.3rem); background:linear-gradient(180deg,var(--panel),var(--ink)); box-shadow:var(--shadow); }
.ang-card.ksc{ border-color:rgba(47,111,214,.4); background:linear-gradient(180deg,rgba(18,60,134,.2),var(--ink)); }
.ang-price{ font-family:"Anton",sans-serif; font-weight:400; font-size:2.2rem; color:var(--gold2); display:block; line-height:1; }
.ang-card.ksc .ang-price{ color:#9cc0ff; }
.ang-card h3{ font-family:"Anton",sans-serif; font-weight:400; font-size:1.3rem; text-transform:uppercase; margin:.5rem 0 .6rem; letter-spacing:.01em; }
.ang-card p{ color:var(--dim); font-size:.92rem; line-height:1.6; }
@media(max-width:560px){ .ang-grid{ grid-template-columns:1fr; } }

/* ---- animierter Agentur-Credit ---- */
.agency-credit{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; text-decoration:none; }
.agency-credit .ac-spark{ width:7px; height:7px; border-radius:50%; background:#e0932c; box-shadow:0 0 8px #e0932c; animation:acPulse 2.2s ease-in-out infinite; flex:none; }
.agency-credit b{ font-weight:700; background:linear-gradient(90deg,#e0932c,#f6c66a,#e0932c); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:acShine 3.5s linear infinite; }
.agency-credit .ac-hint{ opacity:0; max-width:0; overflow:hidden; white-space:nowrap; color:#e0932c; transition:opacity .3s, max-width .4s; }
.agency-credit:hover .ac-hint{ opacity:1; max-width:170px; }
@keyframes acPulse{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.55); opacity:.5;} }
@keyframes acShine{ to{ background-position:200% center; } }
@media(prefers-reduced-motion:reduce){ .agency-credit .ac-spark,.agency-credit b{ animation:none; } }

/* ---- Story-Stube-Bild ---- */
.story-shot{ margin:0 0 1rem; border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#241a12; grid-column:1 / -1; }
.story-shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.story-shot:hover img{ transform:scale(1.05); }

/* ---- Feiern: Conversion-Streifen (Social Proof + Dringlichkeit) ---- */
.feier-trust{ padding: 0 0 clamp(1rem,3vw,2rem); }
.feier-trust-in{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; background:linear-gradient(100deg,rgba(224,147,44,.12),rgba(224,147,44,.05)); border:1px solid rgba(224,147,44,.28); border-radius:16px; padding:1.2rem 1.4rem; }
.feier-trust .ft-item{ text-align:center; }
.feier-trust .ft-item b{ display:block; font-family:"Anton",sans-serif; font-weight:400; font-size:1.25rem; color:#e0932c; letter-spacing:.01em; }
.feier-trust .ft-item span{ display:block; color:rgba(240,230,218,.7); font-size:.8rem; margin-top:.2rem; }
@media(max-width:680px){ .feier-trust-in{ grid-template-columns:repeat(2,1fr); } }
