/* ============================================================================
   DIE INSEL — Mediterrane Küche · Duisburg Wedau
   Design system. Ruhig, hochwertig, mediterran. "Urlaub am See."
   Palette: Dunkelgrün · Creme · Sand · Gold-Akzent · warme Holztöne
   Fonts: Cormorant Garamond (Display) · Jost (Sans)
   ========================================================================== */

/* ---------- tokens -------------------------------------------------------- */
:root{
  --green:#355B44;          /* Marken-Dunkelgrün */
  --green-700:#2A4A38;
  --green-800:#1E3629;
  --green-900:#16281E;      /* fast schwarz-grün, für Hero */
  --green-950:#0F1D16;
  --moss:#6E8A6F;
  --sage:#9FB29B;

  --cream:#F6F0E3;          /* Haupt-Hintergrund */
  --cream-2:#FBF7EE;
  --paper:#FDFBF5;
  --sand:#E7D9BD;
  --sand-2:#DCC9A4;
  --wood:#9C7A50;

  --gold:#C4A052;           /* Akzent — sparsam */
  --gold-soft:#D8BE84;
  --gold-ink:#9A7B34;

  --ink:#24352B;            /* Text auf hell */
  --ink-soft:#586B5C;
  --ink-faint:#8A9789;
  --line:#DACFB8;           /* Haarlinien auf hell */
  --line-dark:rgba(233,217,189,.16);

  --cream-on-dark:#F3ECDC;
  --muted-on-dark:#B9C6B4;

  --white:#ffffff;

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap:1200px;
  --pad:clamp(20px, 5vw, 64px);
  --radius:18px;
  --radius-sm:12px;

  --shadow-sm:0 2px 10px rgba(22,40,30,.06);
  --shadow:0 18px 50px -22px rgba(22,40,30,.32);
  --shadow-lg:0 40px 90px -40px rgba(22,40,30,.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --nav-h:70px;
  --bottomnav-h:64px;
}

/* ---------- reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
input,textarea,select{font:inherit; color:inherit}
ul{list-style:none; padding:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
::selection{background:var(--gold-soft); color:var(--green-900)}

/* ---------- type ---------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:.005em}
.display{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.9rem, 9vw, 6.4rem);
  line-height:.98; letter-spacing:-.01em;
}
.h-sec{font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:1.02}
.italic{font-style:italic}
.eyebrow{
  font-family:var(--sans); font-weight:500;
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-ink);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); opacity:.7}
.eyebrow.center::after{content:""; width:26px; height:1px; background:var(--gold); opacity:.7}
.lede{font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--ink-soft); font-weight:300}

/* ---------- layout -------------------------------------------------------- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(64px,10vw,128px); position:relative}
.section--dark{background:var(--green-900); color:var(--cream-on-dark)}
.section--green{background:var(--green); color:var(--cream-on-dark)}
.section--sand{background:linear-gradient(180deg,var(--cream) 0%, #F0E7D2 100%)}
.section--dark .eyebrow,.section--green .eyebrow{color:var(--gold-soft)}
.section--dark .eyebrow::before,.section--green .eyebrow::before,
.section--dark .eyebrow.center::after,.section--green .eyebrow.center::after{background:var(--gold-soft)}
.section--dark .lede,.section--green .lede{color:var(--muted-on-dark)}
.center{text-align:center}
.sec-head{max-width:640px}
.sec-head.center{margin-inline:auto}
.sec-head .h-sec{margin-top:.35em}

/* soft paper grain on cream */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(120,100,60,.05) 1px, transparent 1px);
  background-size:3px 3px; opacity:.5; mix-blend-mode:multiply;
}
main,header,footer{position:relative; z-index:1}

/* ---------- buttons ------------------------------------------------------- */
.btn{
  --bg:var(--green); --fg:var(--cream-on-dark);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.6em; border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.02em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .3s;
  box-shadow:0 10px 24px -12px rgba(22,40,30,.55);
}
.btn svg{width:1.05em; height:1.05em}
.btn::after{ /* glare */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--ease-out);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(22,40,30,.6)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn--gold{--bg:linear-gradient(180deg,var(--gold-soft),var(--gold)); --fg:var(--green-900)}
.btn--ghost{--bg:transparent; --fg:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn--ghost:hover{background:rgba(53,91,68,.06)}
.section--dark .btn--ghost,.section--green .btn--ghost{--fg:var(--cream-on-dark); border-color:var(--line-dark)}
.section--dark .btn--ghost:hover,.section--green .btn--ghost:hover{background:rgba(243,236,220,.08)}
.btn--lg{padding:1.05em 2em; font-size:1.02rem}
.btn--block{display:flex; width:100%}

.link-underline{position:relative; font-weight:500; color:var(--gold-ink)}
.link-underline::after{content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(.0); transform-origin:left; transition:transform .4s var(--ease-out)}
.link-underline:hover::after{transform:scaleX(1)}

/* ============================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.nav__brand{display:flex; align-items:center; gap:.6em}
.nav__brand img{height:38px; width:auto; transition:filter .4s}
.nav__brand .wordmark{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:.02em; line-height:1;
  color:var(--cream-on-dark);
}
.nav__brand .wordmark small{display:block; font-family:var(--sans); font-size:.52rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); font-weight:500; margin-top:.35em}
.nav__links{display:flex; align-items:center; gap:2.1rem}
.nav__links a{font-size:.86rem; letter-spacing:.06em; color:var(--cream-on-dark); opacity:.86; font-weight:400; transition:opacity .3s, color .3s; position:relative}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%; background:var(--gold-soft); transform:scaleX(0); transform-origin:center; transition:transform .35s var(--ease-out)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{display:flex; align-items:center; gap:.8rem}

/* scrolled state */
.nav.is-solid{background:rgba(246,240,227,.86); backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 1px 0 var(--line), var(--shadow-sm); height:60px}
.nav.is-solid .nav__brand .wordmark{color:var(--green-900)}
.nav.is-solid .nav__links a{color:var(--ink)}
.nav.is-solid .nav__brand img{filter:none}

.nav__burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.nav__burger span{display:block; width:22px; height:1.6px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; color:var(--cream-on-dark)}
.nav.is-solid .nav__burger span{background:var(--green-900)}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:70; background:var(--green-900); color:var(--cream-on-dark); display:flex; flex-direction:column; justify-content:center; padding:var(--pad); transform:translateY(-100%); transition:transform .6s var(--ease-out); visibility:hidden}
.drawer.open{transform:translateY(0); visibility:visible}
.drawer a{font-family:var(--serif); font-size:2rem; padding:.35em 0; border-bottom:1px solid var(--line-dark)}
.drawer .drawer__close{position:absolute; top:20px; right:var(--pad); font-size:2rem; font-family:var(--sans)}
.drawer__meta{margin-top:2rem; color:var(--muted-on-dark); font-size:.95rem; line-height:2}

/* ============================================================================
   HERO
   ========================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--green-900); color:var(--cream-on-dark); overflow:hidden}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.hero__scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(15,29,22,0) 40%, rgba(15,29,22,.55) 100%),
    linear-gradient(180deg, rgba(15,29,22,.35) 0%, rgba(15,29,22,0) 30%, rgba(15,29,22,.15) 60%, rgba(15,29,22,.85) 100%);
}
/* fallback (also a real photo behind the canvas for depth / no-webgl) */
.hero__fallback{position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(15,29,22,.55) 0%, rgba(15,29,22,.5) 40%, rgba(15,29,22,.9) 100%),
    radial-gradient(90% 60% at 74% 16%, rgba(196,160,82,.30), transparent 60%),
    url(img/photos/water.jpg) center 40%/cover no-repeat, #16281E;
}
.no-webgl #hero-canvas{display:none}
.hero__inner{position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad) clamp(72px,12vh,140px)}
.hero__eyebrow{color:var(--gold-soft); margin-bottom:1.1rem}
.hero h1{font-size:clamp(3.1rem,11.5vw,8rem); font-weight:500; letter-spacing:-.015em; line-height:.9; color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 .script{font-style:italic; font-weight:500; color:var(--gold-soft)}
.hero__sub{margin-top:1.4rem; max-width:38ch; font-size:clamp(1.05rem,2.4vw,1.35rem); font-weight:300; color:#EEE7D6; text-shadow:0 1px 18px rgba(0,0,0,.4)}
.hero__cta{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.9rem; align-items:center}
.hero__loc{margin-top:1.8rem; display:flex; align-items:center; gap:.6em; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-on-dark)}
.hero__loc svg{width:1em; height:1em; color:var(--gold-soft)}
.hero__scroll{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5em; color:var(--muted-on-dark); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase}
.hero__scroll .line{width:1px; height:42px; background:linear-gradient(var(--gold-soft),transparent); position:relative; overflow:hidden}
.hero__scroll .line::after{content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--gold-soft); animation:scrolldot 2.4s var(--ease) infinite}
@keyframes scrolldot{0%{top:-40%}60%,100%{top:100%}}

/* rating pill in hero */
.hero__rating{display:inline-flex; align-items:center; gap:.55em; padding:.5em .9em; border-radius:100px; background:rgba(243,236,220,.1); border:1px solid var(--line-dark); backdrop-filter:blur(6px); font-size:.82rem}
.hero__rating .stars{color:var(--gold-soft); letter-spacing:.1em}
.hero__rating b{font-weight:600; color:#fff}

/* ============================================================================
   MARQUEE (values / atmosphere words)
   ========================================================================== */
.ticker{background:var(--green-900); color:var(--cream-on-dark); border-block:1px solid var(--line-dark); overflow:hidden; padding-block:1.1rem}
.ticker__track{display:flex; gap:3.5rem; white-space:nowrap; width:max-content; animation:marquee 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{font-family:var(--serif); font-style:italic; font-size:1.5rem; opacity:.85; display:inline-flex; align-items:center; gap:3.5rem}
.ticker__track span::after{content:"✦"; font-style:normal; font-size:.7em; color:var(--gold-soft); opacity:.8}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================================
   ATMOSPHERE / STORY
   ========================================================================== */
.story__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center}
.story__copy p{margin-top:1.1rem; color:var(--ink-soft); font-weight:300; font-size:1.08rem}
.story__stats{display:flex; gap:2.4rem; margin-top:2.2rem; flex-wrap:wrap}
.stat b{font-family:var(--serif); font-size:2.4rem; color:var(--green); display:block; line-height:1}
.stat span{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

/* framed media slot (photo-ready placeholder) */
.frame{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 0 6px rgba(255,255,255,.06); border-radius:inherit; pointer-events:none}
.media-slot{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(196,160,82,.22), transparent 55%),
    linear-gradient(160deg, #2E5140 0%, #16281E 70%);
  display:grid; place-items:center; color:var(--muted-on-dark);
}
.media-slot[data-tall]{aspect-ratio:3/4}
.media-slot[data-wide]{aspect-ratio:16/10}
.media-slot .slot-note{position:relative; z-index:2; text-align:center; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; opacity:.5; padding:1em}
.media-slot .palm{position:absolute; inset:0; z-index:1; opacity:.16}
.media-slot::before{content:""; position:absolute; inset:0; z-index:1;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
  mix-blend-mode:overlay; animation:shimmer 7s var(--ease) infinite alternate}
@keyframes shimmer{to{transform:translateX(6%)}}

/* real photo frame (story) */
.photo-frame{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:0}
.photo-frame img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .9s var(--ease-out)}
.photo-frame:hover img{transform:scale(1.04)}
.photo-frame figcaption{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.4rem 1.3rem .95rem; color:#fff;
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  background:linear-gradient(transparent, rgba(15,29,22,.72))}
.photo-frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); border-radius:inherit; pointer-events:none}

/* gallery band */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; margin-top:clamp(28px,4vw,48px)}
.gallery figure{position:relative; margin:0; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%, rgba(15,29,22,.6))}
.gallery figcaption{position:absolute; left:0; bottom:0; z-index:2; padding:.9rem 1rem; color:#fff; font-family:var(--serif); font-style:italic; font-size:1.15rem}
.gallery .g-wide{grid-column:span 2}
.gallery .g-tall{grid-row:span 2}
@media (max-width:820px){
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px}
  .gallery .g-tall{grid-row:span 1}
  .gallery .g-wide{grid-column:span 2}
}

/* glare hover on frames */
.glare{position:relative}
.glare::before{content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; opacity:0; pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 60%); transition:opacity .3s}
.glare:hover::before{opacity:1}

/* ============================================================================
   HIGHLIGHTS (features)
   ========================================================================== */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.feature{
  padding:2rem 1.7rem; border-radius:var(--radius); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.feature:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--sand-2)}
.feature__ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(53,91,68,.08); color:var(--green); margin-bottom:1.1rem}
.feature__ic svg{width:24px; height:24px}
.feature h3{font-size:1.5rem; color:var(--green-900)}
.feature p{margin-top:.5rem; color:var(--ink-soft); font-size:.98rem; font-weight:300}

/* ============================================================================
   POPULAR (Beliebte Gerichte teaser rail)
   ========================================================================== */
.rail{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem var(--pad) 1.5rem; margin-inline:calc(var(--pad)*-1); -webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:0}
.pcard{
  scroll-snap-align:start; flex:0 0 min(78vw,320px);
  border-radius:var(--radius); overflow:hidden; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-out), box-shadow .5s;
}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.pcard__media{aspect-ratio:16/11; position:relative; overflow:hidden; background:linear-gradient(160deg,#2E5140,#16281E)}
.pcard__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(15,29,22,.35))}
.pcard__media .tag{position:absolute; top:12px; left:12px; z-index:2}
.pcard__body{padding:1.2rem 1.3rem 1.4rem}
.pcard__body h4{font-size:1.45rem; color:var(--green-900); display:flex; justify-content:space-between; align-items:baseline; gap:.6em}
.pcard__body h4 .price{font-family:var(--sans); font-size:.98rem; font-weight:600; color:var(--gold-ink); white-space:nowrap}
.pcard__body p{margin-top:.35rem; color:var(--ink-soft); font-size:.92rem; font-weight:300}

/* ============================================================================
   MENU — the heart
   ========================================================================== */
.menu{background:linear-gradient(180deg,var(--cream) 0%, #F1E8D4 100%); position:relative}
.menu__head{max-width:640px; margin:0 auto clamp(20px,3vw,34px); text-align:center}

/* sticky control bar: search + category tabs */
.menu__bar{position:sticky; top:calc(var(--nav-h) - 10px); z-index:40; padding-top:12px; margin-bottom:1.6rem}
.menu__bar-inner{background:rgba(251,247,238,.9); backdrop-filter:blur(14px) saturate(1.1); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm); padding:.7rem .7rem .2rem}
.menu__search{display:flex; align-items:center; gap:.7em; padding:.7em 1em; border-radius:14px; background:var(--white); border:1px solid var(--line); margin-bottom:.6rem}
.menu__search svg{width:18px; height:18px; color:var(--ink-faint); flex:0 0 auto}
.menu__search input{border:none; outline:none; background:none; width:100%; font-size:1rem}
.menu__search input::placeholder{color:var(--ink-faint)}
.menu__search .clear{color:var(--ink-faint); font-size:1.1rem; padding:.1em .4em; display:none}
.menu__search.has-value .clear{display:block}

.tabs{display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.55rem; scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; scroll-snap-align:start;
  padding:.6em 1.05em; border-radius:100px; font-size:.9rem; font-weight:500; letter-spacing:.01em;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line);
  white-space:nowrap; transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.tab:hover{border-color:var(--sand-2)}
.tab.active{background:var(--green); color:var(--cream-on-dark); border-color:var(--green)}
.tab .dot{color:var(--gold-soft)}

/* results */
.menu__note{max-width:760px; margin:0 auto 1.6rem; text-align:center; font-size:.86rem; color:var(--ink-faint); font-style:italic}
.menu__group{margin-bottom:2.6rem}
.menu__group-title{display:flex; align-items:center; gap:1em; font-family:var(--serif); font-size:1.7rem; color:var(--green-900); margin-bottom:1.2rem}
.menu__group-title::after{content:""; flex:1; height:1px; background:var(--line)}
.menu__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 2.2rem}

.dish{
  display:grid; grid-template-columns:1fr auto; gap:.2em 1em; align-items:baseline;
  padding:.85rem .2rem; border-bottom:1px solid rgba(218,207,184,.6);
  position:relative; transition:background .3s;
}
.dish:hover{background:rgba(53,91,68,.03)}
.dish__main{min-width:0}
.dish__name{font-family:var(--serif); font-size:1.32rem; font-weight:600; color:var(--green-900); line-height:1.15; display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap}
.dish__num{font-family:var(--sans); font-size:.7rem; font-weight:600; color:var(--ink-faint); letter-spacing:.04em; border:1px solid var(--line); border-radius:6px; padding:.15em .45em; transform:translateY(-1px)}
.dish__desc{color:var(--ink-soft); font-size:.92rem; font-weight:300; margin-top:.15em; max-width:52ch}
.dish__price{font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--gold-ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.dish__price .cur{font-size:.8em; opacity:.7; margin-left:.1em}

/* wine list rows: name + herkunft, price */
.dish--wine .dish__name{font-size:1.18rem}

/* tags */
.tag{display:inline-flex; align-items:center; gap:.35em; font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:.28em .55em; border-radius:100px; line-height:1}
.tag--v{background:rgba(83,138,74,.14); color:#3E7A3A}
.tag--veg{background:rgba(120,150,70,.16); color:#5E7A2E}
.tag--s{background:rgba(190,80,50,.14); color:#B4502F}
.tag--af{background:rgba(80,120,160,.14); color:#3E6F9A}
.tag--h{background:rgba(160,120,60,.16); color:#9A7B34}
.tag--pop{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:var(--green-900)}
.dish__tags{display:inline-flex; gap:.35em; flex-wrap:wrap; margin-left:.3em}

.menu__empty{text-align:center; padding:3rem 1rem; color:var(--ink-faint); display:none}
.menu__empty.show{display:block}
.menu__empty b{font-family:var(--serif); font-size:1.6rem; color:var(--green-900); display:block; margin-bottom:.3em}

/* animate group entrance on category switch */
.menu__results.switching{opacity:0}
.menu__results{transition:opacity .18s ease}

/* ============================================================================
   REVIEWS
   ========================================================================== */
.reviews__top{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.4rem}
.rating-badge{display:flex; align-items:center; gap:1.1rem}
.rating-badge .score{font-family:var(--serif); font-size:4.2rem; line-height:.9; color:var(--gold-soft)}
.rating-badge .stars{color:var(--gold-soft); font-size:1.1rem; letter-spacing:.14em}
.rating-badge .count{color:var(--muted-on-dark); font-size:.9rem; margin-top:.2em}
.counter{font-variant-numeric:tabular-nums}
.rev-marquee{display:flex; gap:1.2rem; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rev-track{display:flex; gap:1.2rem; width:max-content; animation:marquee 60s linear infinite}
.rev-marquee:hover .rev-track{animation-play-state:paused}
.rev{flex:0 0 min(84vw,360px); background:rgba(243,236,220,.05); border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.5rem 1.6rem}
.rev .stars{color:var(--gold-soft); font-size:.85rem; letter-spacing:.12em}
.rev p{margin-top:.7rem; font-weight:300; color:var(--cream-on-dark); font-size:.98rem; line-height:1.55}
.rev .who{margin-top:1rem; font-size:.82rem; color:var(--muted-on-dark); display:flex; align-items:center; gap:.5em}
.rev .who b{color:var(--cream-on-dark); font-weight:500}
.rev .who .g{margin-left:auto; font-size:.7rem; letter-spacing:.1em; opacity:.6}

/* ============================================================================
   EVENTS
   ========================================================================== */
.events__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.6rem}
.event{padding:1.7rem 1.4rem; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); transition:transform .5s var(--ease-out), box-shadow .5s}
.event:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.event .n{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold-ink); opacity:.7}
.event h4{font-size:1.35rem; color:var(--green-900); margin-top:.3em}
.event p{font-size:.9rem; color:var(--ink-soft); font-weight:300; margin-top:.3em}

/* ============================================================================
   LOCATION
   ========================================================================== */
.loc__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:stretch}
.loc__map{position:relative; border-radius:var(--radius); overflow:hidden; min-height:420px; box-shadow:var(--shadow)}
.loc__map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.2) saturate(.9)}
.loc__info{display:flex; flex-direction:column; justify-content:center}
.loc__list{margin-top:1.8rem; display:flex; flex-direction:column; gap:1.1rem}
.loc__row{display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.1rem; border-bottom:1px solid var(--line-dark)}
.loc__row .ic{width:42px; height:42px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; background:rgba(243,236,220,.08); color:var(--gold-soft)}
.loc__row .ic svg{width:20px;height:20px}
.loc__row .k{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-on-dark)}
.loc__row .v{font-size:1.08rem; color:var(--cream-on-dark); margin-top:.1em}
.loc__row a.v:hover{color:var(--gold-soft)}
.loc__actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem}

/* ============================================================================
   RESERVATION
   ========================================================================== */
.res__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center}
.res__aside .h-sec{color:var(--green-900)}
.res__aside .lede{margin-top:1rem}
.res__hours{margin-top:2rem; border-top:1px solid var(--line); padding-top:1.4rem}
.res__hours .row{display:flex; justify-content:space-between; padding:.5em 0; font-size:1rem; border-bottom:1px solid var(--line)}
.res__hours .row span:first-child{color:var(--ink-soft)}
.res__hours .row b{font-weight:600; color:var(--green-900); font-variant-numeric:tabular-nums}
.form{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{margin-bottom:1rem; position:relative}
.field label{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45em}
.field label .req{color:var(--gold-ink)}
.field input,.field textarea,.field select{
  width:100%; padding:.85em 1em; border-radius:12px; border:1px solid var(--line); background:var(--white);
  transition:border-color .3s, box-shadow .3s; font-size:1rem;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(53,91,68,.1); outline:none}
.field textarea{resize:vertical; min-height:90px}
.form__consent{display:flex; gap:.7em; align-items:flex-start; font-size:.84rem; color:var(--ink-soft); margin:.4rem 0 1.2rem}
.form__consent input{width:18px; height:18px; margin-top:.2em; accent-color:var(--green)}
.form__note{font-size:.8rem; color:var(--ink-faint); margin-top:1rem; text-align:center}
.form__ok{display:none; text-align:center; padding:1rem}
.form__ok.show{display:block}
.form__ok .big{font-family:var(--serif); font-size:2rem; color:var(--green); margin-bottom:.3em}
.field.error input,.field.error textarea{border-color:#C0492E; box-shadow:0 0 0 3px rgba(192,73,46,.12)}
.field .err{color:#C0492E; font-size:.75rem; margin-top:.3em; display:none}
.field.error .err{display:block}

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--green-950); color:var(--muted-on-dark); padding-block:clamp(48px,7vw,80px) 0}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; border-bottom:1px solid var(--line-dark)}
.footer__brand .wordmark{font-family:var(--serif); font-size:2rem; color:var(--cream-on-dark); font-weight:600}
.footer__brand .wordmark small{display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); margin-top:.4em}
.footer__brand p{margin-top:1.1rem; font-weight:300; max-width:34ch; font-size:.96rem}
.footer h5{font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:1.1rem}
.footer ul li{margin-bottom:.65rem}
.footer ul a:hover,.footer address a:hover{color:var(--gold-soft)}
.footer address{font-style:normal; font-weight:300; line-height:1.9}
.footer__socials{display:flex; gap:.7rem; margin-top:1.4rem}
.footer__socials a{width:42px; height:42px; border-radius:11px; border:1px solid var(--line-dark); display:grid; place-items:center; transition:background .3s, transform .3s, color .3s}
.footer__socials a:hover{background:rgba(243,236,220,.08); transform:translateY(-3px); color:var(--gold-soft)}
.footer__socials svg{width:19px; height:19px}
.footer__bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.6rem; font-size:.8rem}
.footer__bottom nav{display:flex; gap:1.4rem; flex-wrap:wrap}

/* ============================================================================
   STICKY MOBILE BOTTOM NAV  (Menü · Reservieren · Anrufen · Navigation)
   ========================================================================== */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:65; height:var(--bottomnav-h);
  display:none; grid-template-columns:repeat(4,1fr);
  background:rgba(22,40,30,.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--line-dark);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted-on-dark); font-size:.62rem; letter-spacing:.05em; transition:color .25s; position:relative}
.bottomnav a svg{width:21px; height:21px}
.bottomnav a[data-primary]{color:var(--gold-soft)}
.bottomnav a:active{color:var(--cream-on-dark)}
.bottomnav a::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--gold-soft); transition:width .3s}
.bottomnav a.active::before{width:40%}
.bottomnav a.active{color:var(--cream-on-dark)}

/* ============================================================================
   REVEAL (GSAP fallback + base states)
   ========================================================================== */
.reveal{opacity:0; transform:translateY(28px)}
.reveal.in{opacity:1; transform:none}
.js .reveal{will-change:opacity,transform}
html:not(.js) .reveal{opacity:1; transform:none}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .story__grid{grid-template-columns:1fr; gap:2.4rem}
  .story__media{order:-1}
  .features{grid-template-columns:1fr 1fr}
  .events__grid{grid-template-columns:1fr 1fr}
  .loc__grid{grid-template-columns:1fr}
  .loc__map{min-height:340px}
  .res__grid{grid-template-columns:1fr; gap:2.2rem}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__burger{display:flex}
  .nav__cta{gap:0}
  .bottomnav{display:grid}
  body{padding-bottom:var(--bottomnav-h)}
  .menu__bar{top:6px}   /* nav hides some links; keep bar near top */
  .menu__grid{grid-template-columns:1fr; gap:0}
  .menu__group-title{font-size:1.45rem}
  .features{grid-template-columns:1fr}
  .events__grid{grid-template-columns:1fr 1fr}
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
  .hero{align-items:flex-end}
  .rating-badge .score{font-size:3.2rem}
  .dish__desc{max-width:none}
}
@media (max-width:420px){
  .events__grid{grid-template-columns:1fr}
  .story__stats{gap:1.6rem}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .ticker__track,.rev-track{animation:none}
  .reveal{opacity:1; transform:none}
}