/* =========================================================================
   RIVA – "La Costa" · Adria-Editorial Design System
   Design lebt hier + im HTML. Inhalte kommen aus assets/data/content*.js
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Tinted neutrals (never pure black/white) */
  --sand:        #F6F1E8;   /* warm off-white / limestone */
  --sand-deep:   #EDE5D6;   /* muted band */
  --cream:       #FCFAF4;   /* cards */
  --ink:         #14211F;   /* near-black w/ teal cast */
  --ink-soft:    #3C4B47;   /* secondary text */
  --line:        #D9CFBE;   /* hairlines on light */

  /* Brand */
  --teal-deep:   #0A5A63;   /* headings accent / primary */
  --teal:        #08A8B5;   /* brand turquoise (bright accent) */
  --teal-ink:    #063B41;   /* dark teal surfaces */
  --terra:       #B4522E;   /* terracotta accent (<10% surface) */
  --terra-soft:  #C9714E;

  /* Dark surface (night bands) */
  --night:       #072A2E;
  --night-2:     #0B3A3F;
  --on-night:    #F1EADC;
  --on-night-soft:#B9C7C4;

  /* Type scale (clamp) */
  --fs-kicker: clamp(.72rem, .68rem + .3vw, .82rem);
  --fs-body:   clamp(1rem, .96rem + .25vw, 1.12rem);
  --fs-lead:   clamp(1.15rem, 1.02rem + .7vw, 1.5rem);
  --fs-h3:     clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  --fs-h2:     clamp(2.1rem, 1.3rem + 3.6vw, 4.2rem);
  --fs-h1:     clamp(2.8rem, 1.4rem + 6.4vw, 6.6rem);
  --fs-mega:   clamp(4rem, 1rem + 13vw, 12rem);

  /* Spacing */
  --sp-sec:  clamp(72px, 6vw + 40px, 176px);
  --gut:     clamp(20px, 5vw, 96px);
  --maxw:    1320px;

  /* Motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: .5s; --d-2: .8s; --d-3: 1.1s;

  --radius: 3px;
  --shadow: 0 30px 60px -30px rgba(6,59,65,.35), 0 8px 24px -12px rgba(6,59,65,.18);
  --shadow-sm: 0 12px 28px -18px rgba(6,59,65,.35);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:'Karla',system-ui,sans-serif;
  font-size:var(--fs-body); line-height:1.65; color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--teal); color:#fff; }
:focus-visible{ outline:2.5px solid var(--terra); outline-offset:3px; border-radius:2px; }

h1,h2,h3{ font-family:'Playfair Display',Georgia,serif; font-weight:700; line-height:1.02; letter-spacing:-.015em; }
h1{ font-size:var(--fs-h1); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); font-weight:600; }
.serif{ font-family:'Playfair Display',serif; }

/* ---------- Utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.kicker{
  font-size:var(--fs-kicker); text-transform:uppercase; letter-spacing:.22em;
  font-weight:600; color:var(--teal-deep); display:inline-flex; align-items:center; gap:.7em;
}
.kicker::before{ content:""; width:2.4em; height:1px; background:currentColor; opacity:.6; }
.kicker.center::after{ content:""; width:2.4em; height:1px; background:currentColor; opacity:.6; }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--ink); max-width:60ch; }
.muted{ color:var(--ink-soft); }
.tnum{ font-variant-numeric:tabular-nums; }
.section{ padding-block:var(--sp-sec); position:relative; }
.eyebrow-num{ font-family:'Playfair Display',serif; font-style:italic; color:var(--terra); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.6em; font-weight:600; font-size:.98rem; letter-spacing:.01em;
  border-radius:var(--radius); position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
  min-height:48px; will-change:transform;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn-primary{ background:var(--teal-deep); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--terra); transform:translateY(101%); transition:transform var(--d-2) var(--e-out); }
.btn-primary:hover::before{ transform:translateY(0); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--teal-deep); color:var(--teal-deep); transform:translateY(-2px); }
.btn-ghost.on-dark{ color:var(--on-night); border-color:rgba(241,234,220,.32); }
.btn-ghost.on-dark:hover{ border-color:var(--teal); color:#fff; }
.btn-lg{ padding:1.1em 2em; font-size:1.05rem; }

.link-underline{ position:relative; font-weight:600; color:var(--teal-deep); }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px; background:currentColor; transform:scaleX(.0); transform-origin:left; transition:transform var(--d-2) var(--e-out); }
.link-underline:hover::after{ transform:scaleX(1); }

/* ---------- Reveal (motion) ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut); transition:background var(--d-2) var(--e-out), padding var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.hdr.scrolled{ background:rgba(246,241,232,.9); backdrop-filter:blur(12px); padding-block:12px; box-shadow:0 1px 0 var(--line); }
.hdr.on-hero:not(.scrolled){ color:var(--on-night); }
.hdr.on-hero:not(.scrolled) .kicker{ color:var(--on-night-soft); }
.logo{ font-family:'Playfair Display',serif; font-weight:800; font-size:1.5rem; letter-spacing:.02em; display:flex; align-items:baseline; gap:.5em; }
.logo b{ color:var(--teal); font-weight:800; }
.logo span{ font-family:'Karla',sans-serif; font-size:.6rem; text-transform:uppercase; letter-spacing:.24em; font-weight:600; opacity:.7; }
.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{ font-size:.92rem; font-weight:500; letter-spacing:.02em; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:100%; background:var(--teal); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--e-out); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hdr-right{ display:flex; align-items:center; gap:1.2rem; }
.lang{ display:flex; gap:.15rem; font-size:.82rem; font-weight:600; letter-spacing:.05em; }
.lang a{ padding:.2em .45em; border-radius:2px; opacity:.55; transition:opacity .3s; }
.lang a.active{ opacity:1; color:var(--teal-deep); } .lang a:hover{ opacity:1; }
.hdr.on-hero:not(.scrolled) .lang a.active{ color:#fff; }
.nav.mobile{ display:none; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle span{ display:block; width:24px; height:2px; background:currentColor; position:relative; transition:.3s var(--e-out); }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:currentColor; transition:.3s var(--e-out); }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }
body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

/* =========================================================================
   HERO – scroll story (sticky canvas)
   ========================================================================= */
.hero{ position:relative; height:400vh; background:var(--night); }
.hero-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(7,42,46,.72) 0%, rgba(7,42,46,.34) 42%, rgba(7,42,46,0) 68%),
  linear-gradient(0deg, rgba(7,42,46,.6) 0%, rgba(7,42,46,0) 34%); }
.hero-content{ position:absolute; inset:0; display:flex; align-items:center; }
.hero-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); color:var(--on-night); }
.hero-states{ max-width:min(760px, 92%); position:relative; }
.hero-state{ position:absolute; top:0; left:0; opacity:0; transform:translateY(24px); transition:opacity .7s var(--e-out), transform .7s var(--e-out); pointer-events:none; }
.hero-state.active{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.hero-state .kicker{ color:#fff; opacity:.92; margin-bottom:1.1rem; }
.hero-state h1{ color:#fff; margin-bottom:1.2rem; text-shadow:0 2px 40px rgba(0,0,0,.25); }
.hero-state p{ font-size:var(--fs-lead); color:var(--on-night); max-width:46ch; line-height:1.45; }
.hero-cta{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero-cta .btn-primary{ background:var(--teal); }
.hero-cta .btn-primary::before{ background:var(--terra); }
.hero-progress{ position:absolute; left:var(--gut); bottom:38px; display:flex; gap:8px; align-items:center; color:var(--on-night-soft); }
.hero-progress .bar{ width:64px; height:2px; background:rgba(255,255,255,.28); border-radius:2px; overflow:hidden; }
.hero-progress .bar i{ display:block; height:100%; width:0%; background:var(--teal); }
.scroll-hint{ position:absolute; right:var(--gut); bottom:34px; display:flex; align-items:center; gap:.6em; font-size:.72rem; text-transform:uppercase; letter-spacing:.24em; color:var(--on-night-soft); }
.scroll-hint .mouse{ width:20px; height:32px; border:1.5px solid currentColor; border-radius:12px; position:relative; }
.scroll-hint .mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; background:currentColor; border-radius:2px; transform:translateX(-50%); animation:scrolldot 1.6s var(--e-io) infinite; }
@keyframes scrolldot{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,10px)} }
@media (prefers-reduced-motion: reduce){ .scroll-hint .mouse::after{ animation:none; } .hero{ height:auto; } .hero-sticky{ position:relative; height:92svh; } .hero-state{ position:relative; opacity:1; transform:none; } .hero-state:not(:first-child){ display:none; } }

/* =========================================================================
   INTRO / STORY
   ========================================================================= */
.intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,110px); align-items:center; }
.intro-copy .kicker{ margin-bottom:1.4rem; }
.intro-copy h2{ margin-bottom:1.6rem; }
.intro-copy .sig{ margin-top:2rem; font-family:'Playfair Display',serif; font-style:italic; font-size:1.2rem; color:var(--teal-deep); }
.intro-media{ position:relative; }
.intro-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); filter:saturate(1.02); }
.intro-media .badge{ position:absolute; bottom:-26px; left:-26px; background:var(--terra); color:#fff; padding:1.1rem 1.4rem; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.intro-media .badge b{ font-family:'Playfair Display',serif; font-size:2rem; display:block; line-height:1; }
.intro-media .badge span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; }

/* Stats strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); margin-top:clamp(40px,6vw,90px); }
.stat{ background:var(--sand); padding:clamp(24px,3vw,44px) clamp(16px,2vw,28px); text-align:center; }
.stat b{ font-family:'Playfair Display',serif; font-size:clamp(2.2rem,1rem+3.5vw,3.6rem); color:var(--teal-deep); line-height:1; display:block; }
.stat span{ display:block; margin-top:.6rem; font-size:.86rem; color:var(--ink-soft); letter-spacing:.02em; }

/* =========================================================================
   WHY (editorial numbered)
   ========================================================================= */
.why{ background:var(--sand-deep); }
.why-head{ display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,72px); }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.why-item{ background:var(--sand-deep); padding:clamp(28px,3.2vw,52px); display:flex; gap:1.4rem; transition:background var(--d-2) var(--e-out); }
.why-item:hover{ background:var(--cream); }
.why-item .n{ font-family:'Playfair Display',serif; font-style:italic; font-size:1.5rem; color:var(--terra); flex:none; }
.why-item h3{ margin-bottom:.5rem; }
.why-item p{ color:var(--ink-soft); }

/* =========================================================================
   SIGNATURE BAND – horizontal "Vom Meer auf den Teller"
   ========================================================================= */
.band{ background:var(--night); color:var(--on-night); padding-block:clamp(64px,7vw,120px); overflow:hidden; }
.band .kicker{ color:var(--teal); margin-left:var(--gut); margin-bottom:2.4rem; }
.band-track{ display:flex; gap:clamp(28px,4vw,64px); align-items:flex-end; padding-inline:var(--gut); will-change:transform; }
.band-item{ flex:none; }
.band-item b{ font-family:'Playfair Display',serif; font-size:clamp(2.4rem,1rem+6vw,6rem); font-weight:500; font-style:italic; line-height:.9; white-space:nowrap; color:var(--on-night); transition:color .4s; }
.band-item span{ display:block; margin-top:.8rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.band-item:nth-child(even) b{ color:var(--teal); } .band-item:nth-child(even) span{ color:var(--on-night-soft); }
.band-hint{ text-align:center; margin-top:2.6rem; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-night-soft); }

/* =========================================================================
   MENU
   ========================================================================= */
.menu-head{ display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,56px); }
.menu-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(28px,3.5vw,48px); }
.menu-tab{ padding:.55em 1.1em; border:1px solid var(--line); border-radius:100px; font-size:.9rem; font-weight:600; letter-spacing:.02em; transition:all .35s var(--e-out); color:var(--ink-soft); }
.menu-tab[aria-selected="true"]{ background:var(--teal-deep); color:#fff; border-color:var(--teal-deep); }
.menu-tab:hover:not([aria-selected="true"]){ border-color:var(--teal-deep); color:var(--teal-deep); }
.menu-list{ border-top:1px solid var(--line); }
.dish{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1.4rem; padding:1.3rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.dish h4{ font-family:'Playfair Display',serif; font-size:1.24rem; font-weight:600; letter-spacing:-.01em; }
.dish .price{ font-family:'Playfair Display',serif; font-size:1.24rem; color:var(--teal-deep); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dish .price::before{ content:"€ "; font-size:.8em; color:var(--ink-soft); }
.dish p{ grid-column:1/2; color:var(--ink-soft); font-size:.98rem; margin-top:.1rem; }
.dish .tags{ display:flex; gap:.4rem; margin-top:.5rem; grid-column:1/-1; }
.tag{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--teal-deep); background:rgba(8,168,181,.1); padding:.25em .7em; border-radius:100px; }
.menu-foot{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; }
.menu-note{ font-size:.86rem; color:var(--ink-soft); max-width:52ch; font-style:italic; }

/* Lunch mini-band */
.lunch{ margin-top:clamp(40px,5vw,80px); background:var(--teal-ink); color:var(--on-night); border-radius:var(--radius); padding:clamp(28px,4vw,56px); display:grid; grid-template-columns:1fr auto; gap:1.5rem 3rem; align-items:center; }
.lunch .kicker{ color:var(--teal); }
.lunch h3{ color:#fff; margin:.6rem 0; font-size:var(--fs-h3); }
.lunch p{ color:var(--on-night-soft); max-width:52ch; }

/* =========================================================================
   FEIERN (events) – dark editorial, primary conversion
   ========================================================================= */
.feiern{ background:var(--night); color:var(--on-night); position:relative; overflow:hidden; }
.feiern::before{ content:""; position:absolute; inset:0; background:url('../images/terrace-golden.webp') center/cover; opacity:.16; }
.feiern .wrap{ position:relative; }
.feiern-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,96px); align-items:center; }
.feiern h2{ color:#fff; margin:1.2rem 0 1.4rem; }
.feiern .lead{ color:var(--on-night); }
.feiern-points{ list-style:none; margin-top:2rem; display:grid; gap:.9rem; }
.feiern-points li{ display:flex; gap:.9rem; align-items:flex-start; color:var(--on-night); }
.feiern-points svg{ width:1.2em; height:1.2em; color:var(--teal); flex:none; margin-top:.25em; }
.occasions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.2rem; }
.occasions span{ font-size:.82rem; letter-spacing:.04em; padding:.5em 1em; border:1px solid rgba(241,234,220,.24); border-radius:100px; color:var(--on-night-soft); }
.feiern-cta{ margin-top:2.4rem; }
.feiern-cta .btn-primary{ background:var(--teal); }

/* =========================================================================
   TERRASSE / GALLERY
   ========================================================================= */
.terrasse-head{ max-width:60ch; margin-bottom:clamp(32px,4vw,60px); }
.terrasse-head h2{ margin:1.2rem 0 1.2rem; }
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(120px,15vw,220px); gap:clamp(10px,1.4vw,18px); }
.gallery figure{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--sand-deep); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e-out); }
.gallery figure:hover img{ transform:scale(1.06); }
.g1{ grid-column:span 7; grid-row:span 2; } .g2{ grid-column:span 5; grid-row:span 1; }
.g3{ grid-column:span 5; grid-row:span 1; } .g4{ grid-column:span 4; grid-row:span 1; }
.g5{ grid-column:span 4; grid-row:span 1; } .g6{ grid-column:span 4; grid-row:span 1; }
.gallery .ph{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink-soft); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; background:
  linear-gradient(135deg, var(--sand-deep), var(--sand)); }
.gallery-note{ margin-top:1.2rem; font-size:.82rem; color:var(--ink-soft); font-style:italic; }

/* =========================================================================
   RESERVATION
   ========================================================================= */
.reserve{ background:var(--sand-deep); }
.reserve-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,96px); align-items:start; }
.reserve-copy h2{ margin:1.2rem 0 1.4rem; }
.reserve-copy .note{ margin-top:1.4rem; padding:1rem 1.2rem; border-left:3px solid var(--teal); background:var(--cream); font-size:.92rem; color:var(--ink-soft); border-radius:0 var(--radius) var(--radius) 0; }
.form{ background:var(--cream); padding:clamp(24px,3vw,44px); border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1.1rem; display:flex; flex-direction:column; }
.field label{ font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45rem; }
.field label .req{ color:var(--terra); }
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; padding:.85em 1em; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--sand); color:var(--ink); transition:border-color .3s, box-shadow .3s; width:100%; min-height:48px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--teal-deep); box-shadow:0 0 0 3px rgba(8,168,181,.15); }
.field .err{ font-size:.8rem; color:var(--terra); margin-top:.4rem; min-height:1em; }
.form-submit{ margin-top:.5rem; }
.form-note{ font-size:.8rem; color:var(--ink-soft); margin-top:1rem; }
.form-success{ display:none; padding:1.4rem 1.2rem; background:rgba(8,168,181,.12); border:1px solid var(--teal); border-radius:var(--radius); color:var(--teal-deep); font-weight:600; }
.form-success.show{ display:block; }

/* =========================================================================
   HOURS / AMPEL / MAP
   ========================================================================= */
.hours-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:start; }
.hours h2{ margin:1.2rem 0 1.6rem; }
.status{ display:inline-flex; align-items:center; gap:.7em; padding:.6em 1.1em; border-radius:100px; font-weight:700; font-size:.92rem; letter-spacing:.02em; margin-bottom:1.6rem; border:1px solid transparent; }
.status .dot{ width:.72em; height:.72em; border-radius:50%; position:relative; }
.status .dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; opacity:.4; }
.status.open{ background:rgba(31,140,90,.12); color:#1F7A4D; }
.status.open .dot{ background:#25A366; box-shadow:0 0 0 0 rgba(37,163,102,.5); animation:pulse 2.2s infinite; }
.status.soon{ background:rgba(180,120,20,.14); color:#9A6712; } .status.soon .dot{ background:#D69414; }
.status.closed{ background:rgba(180,82,46,.12); color:var(--terra); } .status.closed .dot{ background:var(--terra); }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(37,163,102,.45)} 70%{box-shadow:0 0 0 10px rgba(37,163,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,163,102,0)} }
@media (prefers-reduced-motion: reduce){ .status.open .dot{ animation:none } }
.status-next{ font-size:.92rem; color:var(--ink-soft); margin-bottom:1.6rem; }
.days{ list-style:none; }
.days li{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.98rem; }
.days li.today{ font-weight:700; color:var(--teal-deep); }
.days li .t{ font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.days li.today .t{ color:var(--teal-deep); }
.days li .closed-tag{ color:var(--terra); font-style:italic; }
.contact-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-sm); }
.contact-card address{ font-style:normal; font-size:1.1rem; line-height:1.9; }
.contact-card a{ color:var(--teal-deep); }
.contact-card .map{ margin-top:1.4rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--sand-deep); }
.contact-card .map iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) saturate(1.05); }
.hours-note{ font-size:.82rem; color:var(--ink-soft); margin-top:1rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(32px,5vw,80px); align-items:start; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.3rem 0; text-align:left; font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:600; color:var(--ink); }
.acc-q .ic{ flex:none; width:26px; height:26px; position:relative; transition:transform .4s var(--e-out); }
.acc-q .ic::before,.acc-q .ic::after{ content:""; position:absolute; background:var(--teal-deep); border-radius:2px; transition:.4s var(--e-out); }
.acc-q .ic::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.acc-q .ic::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.acc-item.open .acc-q .ic::after{ transform:translateX(-50%) scaleY(0); }
.acc-a{ overflow:hidden; max-height:0; transition:max-height .5s var(--e-out); }
.acc-a p{ padding-bottom:1.4rem; color:var(--ink-soft); max-width:64ch; }

/* =========================================================================
   JOBS + FOOTER
   ========================================================================= */
.jobs{ background:var(--terra); color:#fff; }
.jobs .wrap{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.jobs .kicker{ color:rgba(255,255,255,.8); } .jobs .kicker::before{ background:#fff; }
.jobs h2{ color:#fff; margin:.6rem 0; max-width:16ch; }
.jobs .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.jobs .btn-ghost:hover{ background:#fff; color:var(--terra); border-color:#fff; }

.footer{ background:var(--night); color:var(--on-night-soft); padding-block:clamp(56px,6vw,96px) 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:clamp(36px,5vw,64px); border-bottom:1px solid rgba(241,234,220,.14); }
.footer .logo{ color:#fff; font-size:2rem; margin-bottom:1rem; }
.footer h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.18em; color:var(--teal); margin-bottom:1.2rem; font-family:'Karla',sans-serif; }
.footer address{ font-style:normal; line-height:2; } .footer a:hover{ color:#fff; }
.footer-nav{ display:grid; gap:.7rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:2rem; font-size:.82rem; }
.footer-bottom .legal{ display:flex; gap:1.4rem; }

/* =========================================================================
   STICKY MOBILE CTA
   ========================================================================= */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); box-shadow:0 -8px 24px -14px rgba(6,59,65,.5); }
.sticky-cta a{ display:flex; align-items:center; justify-content:center; gap:.5em; padding:1em; font-weight:700; font-size:.98rem; background:var(--cream); min-height:56px; }
.sticky-cta a.call{ color:var(--teal-deep); } .sticky-cta a.reserve{ background:var(--teal-deep); color:#fff; }
.sticky-cta svg{ width:1.15em; height:1.15em; }

/* =========================================================================
   COOKIE
   ========================================================================= */
.cookie{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(160%); z-index:120; width:min(560px, calc(100% - 32px)); background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.3rem 1.4rem; transition:transform .6s var(--e-out); }
.cookie.show{ transform:translateX(-50%) translateY(0); }
.cookie p{ font-size:.9rem; color:var(--ink-soft); margin-bottom:1rem; }
.cookie .row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cookie .btn{ padding:.6em 1.1em; font-size:.88rem; min-height:42px; }

/* =========================================================================
   SUBPAGES (impressum/datenschutz/404)
   ========================================================================= */
.page-hero{ padding-top:clamp(120px,14vh,180px); padding-bottom:clamp(30px,4vw,50px); background:var(--night); color:var(--on-night); }
.page-hero .kicker{ color:var(--teal); }
.page-hero h1{ color:#fff; margin-top:1rem; font-size:var(--fs-h2); }
.prose{ max-width:74ch; margin-block:clamp(40px,5vw,70px); }
.prose h2{ font-size:var(--fs-h3); margin:2.2rem 0 .8rem; color:var(--teal-deep); }
.prose h3{ font-size:1.15rem; margin:1.6rem 0 .5rem; }
.prose p,.prose li{ color:var(--ink-soft); margin-bottom:.9rem; }
.prose ul{ padding-left:1.2rem; } .prose a{ color:var(--teal-deep); text-decoration:underline; }
.err404{ min-height:80vh; display:flex; align-items:center; }
.err404 .big{ font-size:var(--fs-mega); color:var(--teal); font-family:'Playfair Display',serif; line-height:.9; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px){
  .intro-grid,.feiern-grid,.reserve-grid,.hours-grid,.faq-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .intro-media{ order:-1; } .intro-media img{ aspect-ratio:16/11; }
  .lunch{ grid-template-columns:1fr; }
  .gallery{ grid-auto-rows:clamp(140px,32vw,200px); }
  .g1{ grid-column:span 12; } .g2,.g3{ grid-column:span 6; } .g4,.g5,.g6{ grid-column:span 4; }
}
@media (max-width: 720px){
  .nav, .hdr-right .lang{ display:none; }
  .hdr-right > .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
  .nav.mobile{ display:flex; position:fixed; inset:0; z-index:99; background:var(--night); flex-direction:column; align-items:center; justify-content:center; gap:1.6rem; transform:translateY(-100%); transition:transform .5s var(--e-out); }
  body.nav-open .nav.mobile{ transform:translateY(0); }
  .nav.mobile a{ color:var(--on-night); font-family:'Playfair Display',serif; font-size:1.8rem; }
  .nav.mobile .lang{ display:flex; margin-top:1rem; color:var(--on-night); }
  .sticky-cta{ display:grid; }
  body{ padding-bottom:56px; }
  .footer-top{ grid-template-columns:1fr; gap:2rem; }
  .form-row{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(6,1fr); }
  .g1,.g2,.g3,.g4,.g5,.g6{ grid-column:span 6; grid-row:span 1; }
  .menu-foot{ flex-direction:column; align-items:flex-start; }
  .hero-scrim{ background:linear-gradient(0deg, rgba(7,42,46,.8) 0%, rgba(7,42,46,.15) 55%, rgba(7,42,46,.35) 100%); }
}
@media (max-width: 420px){ .stats{ grid-template-columns:1fr; } }