/* ==========================================================================
   LUX BISS — Premium Website
   Design system: minimalist black / white / warm-neutral, Apple-inspired
   type & motion. Sections alternate dark and light by adding/removing
   the ".on-light" class — every shared component (buttons, cards, text)
   re-themes automatically because the palette is expressed as CSS custom
   properties that cascade per-section.
   ========================================================================== */

/* Inter wird selbst gehostet (assets/fonts/) statt live von Google-Servern geladen.
   So werden beim Seitenaufruf keine Nutzerdaten (IP-Adresse) an Google übertragen,
   und es ist keine Cookie-/Einwilligungs-Anzeige für Schriftarten nötig. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src: url('../assets/fonts/inter-700.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap;
  src: url('../assets/fonts/inter-800.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap;
  src: url('../assets/fonts/inter-900.woff2') format('woff2');
}

:root{
  /* ---- dark (default) palette ---- */
  --c-bg:            #0a0a09;
  --c-surface:       #141210;
  --c-surface-2:     #1d1a16;
  --c-line:          rgba(245,242,236,0.10);
  --c-line-strong:   rgba(245,242,236,0.20);

  --c-text:          #f5f2ec;
  --c-text-muted:    #a39c8c;
  --c-text-faint:    #726c60;

  /* single warm-neutral accent, used sparingly */
  --c-accent:        #c99a66;
  --c-accent-soft:   rgba(201,154,102,0.14);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --container: 1200px;
  --pad: clamp(20px, 6vw, 64px);

  color-scheme: dark;
}

/* ---- light / warm-neutral palette, applied per-section ---- */
.on-light{
  --c-bg:            #f7f4ee;
  --c-surface:       #ffffff;
  --c-surface-2:     #efe9db;
  --c-line:          rgba(17,15,12,0.09);
  --c-line-strong:   rgba(17,15,12,0.16);

  --c-text:          #14120f;
  --c-text-muted:    #6b6457;
  --c-text-faint:    #948d7d;

  --c-accent:        #a97a45;
  --c-accent-soft:   rgba(169,122,69,0.12);

  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
  transition: background .6s var(--ease-soft);
}

img, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.container{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size: clamp(.68rem,1.3vw,.76rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--c-text-faint);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;
  background: var(--c-accent);
}

.section-title{
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.06;
  margin-top:.5em;
  max-width: 15ch;
  color: var(--c-text);
}
.section-lede{
  margin-top:1.1em;
  max-width:52ch;
  color: var(--c-text-muted);
  font-size: clamp(1rem,1.5vw,1.1rem);
  line-height:1.7;
}
.section-note{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:.9em; max-width:52ch;
  font-size:.82rem; line-height:1.55;
}
.section-note svg{ width:15px; height:15px; flex-shrink:0; margin-top:.2em; opacity:.85; }
.section-note.fillme-inline{ border-bottom:none; padding-bottom:0; }
.section-head{ margin-bottom: clamp(2.5rem,6vw,4.5rem); }
.section-head.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head.center .section-title,
.section-head.center .section-lede{ margin-left:auto; margin-right:auto; }

section{ position:relative; background: var(--c-bg); color: var(--c-text); transition: background .6s var(--ease-soft); }
.section-pad{ padding: clamp(4.5rem,10vw,8rem) 0; }

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  --btn-h: 54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  height: var(--btn-h);
  padding: 0 1.8em;
  border-radius: 999px;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .3s var(--ease-soft), border-color .3s var(--ease-soft), color .3s var(--ease-soft);
  white-space:nowrap;
}
.btn:active{ transform: scale(.96); }
.btn-primary{
  background: var(--c-text);
  color: var(--c-bg);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(0,0,0,.35); }
.btn-ghost{
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-line-strong);
}
.btn-ghost:hover{ background: var(--c-accent-soft); border-color: var(--c-accent); transform: translateY(-2px); }
.btn-sm{ --btn-h: 44px; font-size:.85rem; padding:0 1.4em; }

/* ---------------------------------- nav ---------------------------------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--pad);
  background: rgba(10,10,9,0);
  border-bottom: 1px solid transparent;
  color: #f5f2ec;
  transition: background .5s var(--ease-soft), border-color .5s var(--ease-soft), padding .4s var(--ease-soft), color .4s var(--ease-soft);
}
.nav.is-scrolled{
  background: rgba(10,10,9,.68);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(245,242,236,0.1);
  padding-top:12px; padding-bottom:12px;
}
.nav__brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; font-size:1.02rem; z-index:2; color:inherit; }
.nav__brand img{ height:32px; width:30px; object-fit:contain; object-position:center; }
.nav__links{ display:flex; align-items:center; gap:clamp(20px,2.6vw,36px); }
.nav__links a{
  font-size:.88rem; font-weight:500; color: rgba(245,242,236,.72);
  position:relative; padding:6px 0; transition: color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--c-accent); transition: right .35s var(--ease-out);
}
.nav__links a:hover{ color: #fff; }
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__cta .btn-ghost{ color:#f5f2ec; border-color: rgba(245,242,236,.24); }
.nav__cta .btn-primary{ background:#f5f2ec; color:#0a0a09; }
.nav__toggle{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid rgba(245,242,236,.24);
  background:rgba(245,242,236,.05); position:relative; z-index:2; cursor:pointer;
}
.nav__toggle span{
  position:absolute; left:11px; right:11px; height:1.5px; background:#f5f2ec;
  transition: transform .4s var(--ease-out), opacity .3s;
}
.nav__toggle span:nth-child(1){ top:16px; }
.nav__toggle span:nth-child(2){ top:21.5px; }
.nav__toggle span:nth-child(3){ top:27px; }
.nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

.nav__mobile{
  position:fixed; inset:0; z-index:499;
  background: #0a0a09;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft), visibility 0s linear .45s;
}
/* .nav__mobile ist jetzt ein Geschwister-Element von <nav> (nicht mehr
   verschachtelt) — sonst erzeugt .nav.is-scrolled per backdrop-filter einen
   neuen "containing block" für seine fixed-position Kinder, wodurch das
   Vollbild-Menü nur noch innerhalb der kleinen Nav-Leiste positioniert wurde
   und der Hintergrund der Seite durchschimmerte, sobald man beim Scrollen
   das Menü öffnete. */
.nav.is-open ~ .nav__mobile{ opacity:1; visibility:visible; transform:none; transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft); }
.nav__mobile a{ font-size: clamp(1.7rem,7vw,2.3rem); font-weight:700; letter-spacing:-0.01em; color:#f5f2ec; }
.nav__mobile .btn{ margin-top:12px; background:#f5f2ec; color:#0a0a09; }

@media (max-width: 880px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  /* keep only the hamburger in the top-right on mobile — the pill buttons
     duplicate the "Speisekarte" link and CTA already inside the opened
     mobile menu, and crowded the corner next to the 3-line icon. */
  .nav__cta .btn-ghost, .nav__cta .btn-primary{ display:none; }
}
/* simplified nav used on the legal pages (no mobile toggle needed) */
.nav--simple{ background: rgba(10,10,9,.68); backdrop-filter: blur(20px); border-bottom-color: rgba(245,242,236,0.1); }
.nav--simple .nav__links{ display:flex; }
.nav--simple .nav__links a{ font-size:.86rem; }

/* solid nav for pages whose first section is a light background right under the nav
   (unlike .nav--simple, this keeps the responsive .nav__links / hamburger behaviour intact) */
.nav--solid{
  background: rgba(10,10,9,.68);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(245,242,236,0.1);
}
.nav--solid .nav__links a.is-current{ color:#fff; }
.nav--solid .nav__links a.is-current::after{ right:0; }

/* ---------------------------------- hero ---------------------------------- */
.hero-wrap{ position:relative; background:#000; }
.hero{
  position: relative; height:100vh; width:100%;
  overflow:hidden; display:flex; align-items:flex-end;
  background:#000;
}
.hero__media{ position:absolute; inset:0; }
.hero__media video, .hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: 50% 30%;
  transform: scale(1.08);
  /* appetitanregend statt entsättigt: leicht wärmer, kontrastreicher und
     satter, damit das Fleisch so saftig und frisch wirkt wie in echt —
     kein grayscale() mehr, das hat die Farben vorher stumpf gemacht */
  filter: saturate(1.2) contrast(1.08) brightness(1.03);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,4,3,.6) 0%, rgba(4,4,3,.22) 32%, rgba(4,4,3,.55) 66%, #050503 100%),
    linear-gradient(0deg, #030302 0%, rgba(3,3,2,0) 34%);
}
.hero__content{
  position:relative; z-index:2; width:100%;
  padding: 0 var(--pad) clamp(56px,9vh,110px);
}
.hero__kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(245,242,236,.6); margin-bottom: clamp(14px,2vw,20px);
}
.hero__kicker::before{ content:""; width:16px; height:1px; background: var(--c-accent); }

/* trust badge: real Google rating, visible immediately at the top of the homepage */
.hero__rating{
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom: clamp(18px,2.6vw,26px);
  padding:9px 16px 9px 12px; border-radius:999px;
  background: rgba(245,242,236,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid rgba(245,242,236,.2);
  color:#f5f2ec; font-size:.84rem;
  transition: transform .3s var(--ease-out), background .3s, border-color .3s;
}
.hero__rating:hover{ transform: translateY(-2px); background: rgba(245,242,236,.14); border-color: rgba(245,242,236,.32); }
.hero__rating-logo{ width:18px; height:18px; flex:none; }
.hero__rating-score{ font-weight:800; }
.hero__rating-stars{ color:#ffc107; letter-spacing:-1px; font-size:.8rem; }
.hero__rating-meta{ color: rgba(245,242,236,.62); border-left:1px solid rgba(245,242,236,.22); padding-left:9px; }
@media (max-width:400px){
  .hero__rating{ font-size:.74rem; gap:7px; padding:8px 13px 8px 10px; }
  .hero__rating-logo{ width:15px; height:15px; }
  .hero__rating-meta{ padding-left:7px; }
}

.hero__title{
  font-size: clamp(2.5rem, 7.6vw, 5.6rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.0;
  color:#f5f2ec;
  max-width: 16ch;
}
.hero__title span{ display:block; }
.hero__title .is-muted{ color: rgba(245,242,236,.42); }
.hero__subtitle{
  margin-top: clamp(14px,2.4vw,22px);
  font-size: clamp(1.05rem,2vw,1.35rem);
  color: rgba(245,242,236,.68); max-width:46ch;
  letter-spacing:.01em;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top: clamp(26px,3.6vw,38px); }
.hero__scrolldown{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: rgba(245,242,236,.5); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero__scrolldown .line{ width:1px; height:34px; background: rgba(245,242,236,.25); position:relative; overflow:hidden; }
.hero__scrolldown .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: linear-gradient(180deg, transparent, #f5f2ec);
  animation: scrollDrip 1.8s ease-in-out infinite;
}
@keyframes scrollDrip{ 0%{ top:-100%; } 100%{ top:100%; } }

@media (max-width: 620px){
  .hero{ height:100svh; }
  .hero__content{ padding-bottom:88px; }
  .hero__title{ max-width:13ch; }
}

/* ---------------------------------- reveal on scroll ---------------------------------- */
.reveal{
  opacity:0; transform: translateY(32px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* Varianten: verschiedene Abschnitte öffnen sich beim Scrollen unterschiedlich,
   damit sich die Seite nicht überall gleich anfühlt. */
.reveal--left{ transform: translateX(-56px); }
.reveal--right{ transform: translateX(56px); }
.reveal--scale{ transform: scale(.93); }
.reveal--rotate{ transform: rotate(-7deg) scale(.92); }
.reveal--blur{ transform:none; filter: blur(14px); }
.reveal--blur.is-visible{ filter: blur(0); }

/* Kaskade: Kinder eines .stagger-children-Elements kommen leicht versetzt
   nacheinander rein, statt alle im selben Moment (z.B. Info-Zeilen, Kennzahlen,
   Bewertungskarten). Braucht auf jedem Kind zusätzlich die Klasse .reveal. */
.stagger-children > *:nth-child(1){ transition-delay: .05s; }
.stagger-children > *:nth-child(2){ transition-delay: .16s; }
.stagger-children > *:nth-child(3){ transition-delay: .27s; }
.stagger-children > *:nth-child(4){ transition-delay: .38s; }
.stagger-children > *:nth-child(5){ transition-delay: .49s; }
.stagger-children > *:nth-child(6){ transition-delay: .60s; }

/* Überschriften: Wörter kommen (per JS in einzelne <span> zerlegt) leicht
   nacheinander reingeflogen, sobald der jeweilige Abschnitt sichtbar wird. */
.word-anim{
  display:inline-block;
  opacity:0; transform: translateY(10px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-visible .word-anim{ opacity:1; transform:none; }

/* Dezenter Parallax-Effekt auf Hintergrundmedien: Bild/Video ist etwas größer
   als sein Rahmen (die Section hat overflow:hidden) und verschiebt sich beim
   Scrollen minimal, damit sich die Tiefe der Seite spielerischer anfühlt. */
.parallax-media{ transform: scale(1.12); will-change: transform; }
@media (prefers-reduced-motion: reduce){
  .parallax-media{ transform: scale(1.12) !important; }
}

/* ---------------------------------- marquee-free divider ---------------------------------- */
.divider-line{ height:1px; background: var(--c-line); }

/* ---------------------------------- menu / dish cards ---------------------------------- */
.grid-products{
  display:grid; gap: clamp(18px,2.2vw,24px);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .grid-products{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid-products{ grid-template-columns: 1fr; } }

.card-product{
  position:relative; border-radius:20px; overflow:hidden;
  background: var(--c-surface);
  border:1px solid var(--c-line);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
  display:flex; flex-direction:column;
}
.card-product:hover{ box-shadow: 0 26px 60px -30px rgba(0,0,0,.35); border-color: var(--c-line-strong); }
.card-product{ will-change: transform; }
.card-product__photo{ position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--c-surface-2); }
.card-product__photo img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-out); }
.card-product:hover .card-product__photo img{ transform: scale(1.06); }
.card-product__photo.is-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: radial-gradient(120% 100% at 50% 0%, var(--c-accent-soft), transparent 65%), var(--c-surface-2);
}
.card-product__photo.is-placeholder svg{ width:34px; height:34px; color: var(--c-text-faint); }
.card-product__photo.is-placeholder span{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color: var(--c-text-faint);
  border:1px solid var(--c-line-strong); padding:5px 11px; border-radius:999px;
}
.badge-soon{
  position:absolute; top:14px; right:14px; z-index:2; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding: 5px 10px; border-radius:999px; background: rgba(10,10,9,.55); backdrop-filter: blur(6px); color:#f5f2ec;
}
.card-product__body{ padding: clamp(20px,2.6vw,26px); display:flex; flex-direction:column; gap:10px; flex:1; }
.card-product h3{ font-size:1.14rem; font-weight:700; letter-spacing:-.01em; }
.card-product p{ color:var(--c-text-muted); font-size:.9rem; line-height:1.6; }
.card-product__price{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--c-text-faint);
}

/* ---------------------------------- speisekarte (black & gold, tabbed menu) ---------------------------------- */
.menu-tabs{
  display:flex; flex-wrap:wrap; gap:12px;
  position: sticky; top:69px; z-index:45;
  margin: 0 calc(var(--pad) * -1) clamp(32px,5vw,48px);
  padding: 16px var(--pad) 18px;
  background: rgba(10,10,9,.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(245,242,236,.12);
  box-shadow: 0 20px 34px -26px rgba(0,0,0,.7);
}
.menu-tab{
  padding:12px 22px; border-radius:999px;
  border:1px solid rgba(245,242,236,.14);
  background: linear-gradient(180deg, rgba(245,242,236,.06), rgba(245,242,236,.01));
  color:var(--c-text-muted); font-size:.86rem; font-weight:600;
  cursor:pointer; white-space:nowrap; flex:none;
  box-shadow: 0 10px 22px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.menu-tab:hover{
  border-color: rgba(201,154,102,.55); color:var(--c-text);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -16px rgba(201,154,102,.4), inset 0 1px 0 rgba(255,255,255,.07);
}
.menu-tab.is-active{
  background: linear-gradient(135deg, #f3d9ab, var(--c-accent) 55%, #9c7440);
  color:#14120f; border-color: transparent;
  box-shadow: 0 18px 34px -14px rgba(201,154,102,.6), inset 0 1px 0 rgba(255,255,255,.4);
  transform: translateY(-2px);
}

.menu-panel{ display:none; }
.menu-panel.is-active{ display:block; animation: menuFade .45s var(--ease-out); }
@keyframes menuFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.menu-group{
  margin-bottom: clamp(26px,4vw,36px);
  background: linear-gradient(165deg, var(--c-surface), var(--c-surface-2));
  border: 1px solid rgba(201,154,102,.2);
  border-radius: 20px;
  padding: clamp(24px,3.4vw,38px) clamp(22px,3.4vw,36px);
  box-shadow: 0 34px 64px -38px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.03);
  position:relative; overflow:hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.menu-group::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity:.75;
}
.menu-group:hover{
  transform: translateY(-5px);
  box-shadow: 0 44px 84px -36px rgba(0,0,0,.8), 0 0 0 1px rgba(201,154,102,.32);
  border-color: rgba(201,154,102,.4);
}
.menu-group:last-child{ margin-bottom:0; }
.menu-group__title{
  font-size: clamp(1.2rem,2.2vw,1.45rem); font-weight:800; letter-spacing:-0.01em;
  color: var(--c-accent); margin-bottom:8px;
  display:flex; align-items:center; gap:10px;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.menu-group__title::before{
  content:""; width:8px; height:8px; flex:none; border-radius:2px; transform:rotate(45deg);
  background: linear-gradient(135deg, #f3d9ab, #8a6535);
  box-shadow: 0 3px 8px -1px rgba(201,154,102,.65);
}
.menu-group__note{ font-size:.85rem; color:var(--c-text-faint); line-height:1.65; max-width:74ch; margin-bottom:22px; }
.menu-group__footnote{ margin-top:18px; padding-top:14px; border-top:1px dashed rgba(201,154,102,.25); font-size:.78rem; color:var(--c-text-faint); line-height:1.6; max-width:80ch; }

.menu-list{ display:flex; flex-direction:column; }
.menu-item{
  padding: 16px 2px; border-bottom:1px solid rgba(245,242,236,.08);
  transition: transform .3s var(--ease-soft);
}
.menu-item:first-child{ padding-top:0; }
.menu-item:last-child{ border-bottom:none; padding-bottom:0; }
.menu-item:hover{ transform: translateX(6px); }
.menu-item__head{ display:flex; align-items:center; gap:12px; }
.menu-item__num{
  font-size:.68rem; font-weight:700; color:var(--c-text-faint); font-variant-numeric: tabular-nums;
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(245,242,236,.05); border:1px solid rgba(201,154,102,.28);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.05), 0 2px 8px -2px rgba(0,0,0,.55);
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.menu-item:hover .menu-item__num{
  background: linear-gradient(135deg, #f3d9ab, var(--c-accent));
  color:#14120f; border-color: transparent;
  box-shadow: 0 6px 16px -4px rgba(201,154,102,.7);
}
.menu-item__name{ font-weight:700; font-size:.98rem; color:var(--c-text); flex:1; letter-spacing:-0.005em; }
.menu-item__price{
  font-weight:700; font-size:.9rem; color: var(--c-accent); white-space:nowrap; font-variant-numeric: tabular-nums; flex:none;
  transition: color .3s var(--ease-soft), text-shadow .3s var(--ease-soft);
}
.menu-item:hover .menu-item__price{ color:#f3d9ab; text-shadow: 0 0 18px rgba(201,154,102,.5); }
.menu-item__desc{ margin:4px 0 0 38px; font-size:.85rem; color:var(--c-text-muted); line-height:1.55; max-width:62ch; }

.menu-disclaimer{
  margin-top: clamp(40px,6vw,60px); padding-top: clamp(20px,3vw,28px); border-top:1px solid rgba(201,154,102,.18);
  font-size:.8rem; color:var(--c-text-faint); line-height:1.6; max-width:70ch;
}

.menu-next{
  margin-top: clamp(32px,5vw,44px);
  padding: clamp(26px,4vw,38px) clamp(20px,4vw,32px);
  border-radius:20px;
  text-align:center;
  background: linear-gradient(165deg, var(--c-surface), var(--c-surface-2));
  border:1px solid var(--c-line);
}
.menu-next__label{ color:var(--c-text-faint); font-size:.86rem; margin-bottom:16px; }
.menu-next__btn svg{ width:18px; height:18px; transition: transform .3s var(--ease-soft); }
.menu-next__btn:hover svg{ transform: translateX(4px); }

.menu-legend{
  margin-top: clamp(40px,6vw,60px); padding-top: clamp(20px,3vw,28px); border-top:1px solid rgba(201,154,102,.18);
  max-width:90ch;
}
.menu-legend__title{ font-size:.82rem; font-weight:700; color:var(--c-text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
.menu-legend__text{ font-size:.76rem; color:var(--c-text-faint); line-height:1.7; margin-top:6px; }
.menu-legend__text strong{ color:var(--c-text-muted); font-weight:600; }

@media (max-width:620px){
  .menu-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px; }
  .menu-tabs::-webkit-scrollbar{ display:none; }
  .menu-item__desc{ margin-left:0; }
  .menu-item__name{ font-size:.94rem; }
  .menu-item:hover{ transform:none; }
}

/* speisekarte as its own page: extra clearance since it sits directly under the nav (no hero above it),
   plus an ambient gold glow for a fine-dining, black & gold atmosphere */
.menu-section--page{ padding-top: clamp(130px,18vw,172px); position:relative; overflow:clip; }
.menu-section--page::before{
  content:""; position:absolute; top:-14%; left:50%; transform:translateX(-50%);
  width:min(1000px,150%); height:600px; z-index:0; pointer-events:none;
  background: radial-gradient(closest-side, rgba(201,154,102,.18), transparent 72%);
}
.menu-section--page > .container{ position:relative; z-index:1; }
.menu-section--page .eyebrow{ color: var(--c-accent); }

.menu-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top: clamp(40px,6vw,60px); }
.menu-cta .btn-primary{
  background: linear-gradient(135deg, #f3d9ab, var(--c-accent) 55%, #9c7440);
  color:#14120f;
  box-shadow: 0 18px 38px -16px rgba(201,154,102,.6);
}
.menu-cta .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 26px 50px -18px rgba(201,154,102,.7); }

/* ---------------------------------- quality statement (full dark, video background) ---------------------------------- */
.quality{
  position:relative;
  min-height: 78vh; display:flex; align-items:center; justify-content:center;
  text-align:center; background:#0a0a09; overflow:hidden;
}
.quality__media{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
}
.quality__media video{
  /* no CSS filter() here on purpose — filters force an extra per-frame render
     pass on the decoded video and are what made playback stutter; the same
     dimmed look is achieved for free by opacity (a cheap compositor blend)
     plus the scrim gradient below */
  /* the source is a vertical 9:16 clip — on a wide desktop screen, filling
     the whole (landscape) section edge-to-edge would crop nearly all of the
     logo away, so the box itself is kept at the clip's own proportions
     (full section height, width derived from it) and centered; on a phone
     that box already fills most of the width, so it looks the same there */
  height:100%; width:auto; max-width:100%; aspect-ratio:9/16;
  object-fit:cover;
  opacity:.32;
}
.quality__scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,10,9,.68) 0%, rgba(10,10,9,.52) 40%, rgba(10,10,9,.82) 100%);
}
.quality__inner{ position:relative; z-index:2; padding: clamp(60px,10vw,100px) var(--pad); }
.quality h2{
  font-size: clamp(2.2rem,6.6vw,4.6rem); font-weight:800; letter-spacing:-0.03em; line-height:1.05;
  max-width:18ch; margin:0 auto; color:#f5f2ec;
}
.quality p{
  margin: clamp(18px,3vw,26px) auto 0; max-width:44ch; color: rgba(245,242,236,.6);
  font-size: clamp(1.05rem,2vw,1.3rem); line-height:1.6;
}
.quality__stats{
  display:flex; justify-content:center; gap: clamp(18px,3vw,28px); flex-wrap:wrap;
  margin-top: clamp(44px,7vw,72px);
}
.quality__stat{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding: clamp(22px,3vw,30px) clamp(26px,4vw,40px);
  border-radius:20px;
  background: linear-gradient(165deg, rgba(245,242,236,.09), rgba(245,242,236,.02));
  border:1px solid rgba(245,242,236,.14);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  will-change: transform;
}
.quality__stat:hover{
  border-color: rgba(201,154,102,.45);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(201,154,102,.3);
}
.quality__stat b{ display:block; font-size: clamp(1.9rem,3.8vw,2.7rem); font-weight:800; color:#f5f2ec; }
.quality__stat span{ font-size:.78rem; letter-spacing:.06em; color: rgba(245,242,236,.55); text-transform:uppercase; }

/* ---------------------------------- ueber uns ---------------------------------- */
.about__story{
  margin-top:1.1em; max-width:56ch;
  color: var(--c-text-muted); font-size: clamp(1rem,1.5vw,1.05rem); line-height:1.75;
  display:flex; flex-direction:column; gap:1em;
}
.about__story-close{ color: var(--c-text); }
.about__story-close b{ font-weight:700; }
.story-trigger{ margin-top: clamp(22px,3vw,30px); }
.story-trigger svg{ width:18px; height:18px; transition: transform .3s var(--ease-out); }
.story-trigger:hover svg{ transform: translateX(3px); }

/* ---- "Unsere Geschichte" modal: keeps the homepage short, full story on demand ---- */
.story-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.story-modal.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .35s var(--ease-out), visibility 0s;
}
.story-modal__backdrop{
  position:absolute; inset:0; background: rgba(10,10,9,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.story-modal__panel{
  position:relative; z-index:1;
  width:min(640px,100%); max-height:min(80vh,720px); overflow-y:auto;
  background: var(--c-bg); color: var(--c-text);
  border-radius:28px; border:1px solid var(--c-line-strong);
  padding: clamp(32px,5vw,52px);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.5);
  transform: translateY(18px) scale(.97);
  transition: transform .4s var(--ease-out);
}
.story-modal.is-open .story-modal__panel{ transform: translateY(0) scale(1); }
.story-modal__panel h3{
  font-size: clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-0.02em; margin-top:.35em;
}
.story-modal .about__story{ max-width:none; }
.story-modal__close{
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--c-line-strong);
  display:flex; align-items:center; justify-content:center; background: var(--c-surface); color: var(--c-text);
  cursor:pointer; transition: border-color .3s, background .3s, transform .3s;
}
.story-modal__close:hover{ border-color: var(--c-accent); background: var(--c-accent-soft); transform: rotate(90deg); }
.story-modal__close svg{ width:16px; height:16px; }
@media (max-width:560px){ .story-modal__panel{ border-radius:22px; padding: 30px 22px; } }
.about{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items:center; }
@media (max-width: 900px){ .about{ grid-template-columns:1fr; } }
.about__media{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio: 4/5; }
.about__media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-out); }
.about__media:hover img{ transform: scale(1.04); }
.about__media::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px var(--c-line-strong); border-radius:24px; }
.about__badge{
  position:absolute; left:16px; bottom:16px; padding:9px 15px; border-radius:12px;
  background: rgba(10,10,9,.6); backdrop-filter: blur(10px); border:1px solid rgba(245,242,236,.18);
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#f5f2ec; z-index:4;
}

/* ---- "Über uns" Bildergalerie: Crossfade-Slideshow mit Pfeilen + Punkten ---- */
.about__gallery{
  position:relative; border-radius:24px; overflow:hidden; aspect-ratio: 4/5;
  background: var(--c-surface-2);
}
.about__gallery::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--c-line-strong); border-radius:24px;
}
.about__gallery-track{ position:relative; width:100%; height:100%; }
.about__gallery-slide{
  position:absolute; inset:0; opacity:0; z-index:0;
  transition: opacity .9s var(--ease-out);
}
.about__gallery-slide.is-active{ opacity:1; z-index:1; }
.about__gallery-slide img, .about__gallery-slide video{ width:100%; height:100%; object-fit:cover; display:block; }
.about__gallery-placeholder{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:20px; text-align:center; color: var(--c-text-faint);
  background: linear-gradient(165deg, var(--c-surface), var(--c-surface-2));
}
.about__gallery-placeholder svg{ width:34px; height:34px; opacity:.7; }
.about__gallery-placeholder .fillme-inline{ font-size:.74rem; }
.about__gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(245,242,236,.3);
  background: rgba(10,10,9,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color:#f5f2ec; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .3s, border-color .3s, transform .3s;
}
.about__gallery-nav:hover{ background: rgba(10,10,9,.65); border-color: var(--c-accent); }
.about__gallery-nav svg{ width:18px; height:18px; }
.about__gallery-nav--prev{ left:12px; }
.about__gallery-nav--next{ right:12px; }
.about__gallery-dots{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:4;
  display:flex; gap:7px;
}
.about__gallery-dots button{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background: rgba(245,242,236,.42); cursor:pointer; transition: background .3s, transform .3s;
}
.about__gallery-dots button.is-active{ background:#f5f2ec; transform: scale(1.35); }
@media (max-width:560px){
  .about__gallery-nav{ width:36px; height:36px; }
  .about__gallery-nav svg{ width:16px; height:16px; }
}
.about__points{ display:flex; flex-direction:column; gap:14px; margin-top: clamp(24px,4vw,32px); }
.about__point{ display:flex; align-items:flex-start; gap:12px; }
.about__point .dot{ flex:none; width:6px; height:6px; border-radius:50%; background: var(--c-accent); margin-top:8px; }
.about__point b{ font-size:.95rem; font-weight:700; display:block; }
.about__point span{ font-size:.88rem; color:var(--c-text-muted); }

/* ---------------------------------- reviews (minimalist) ---------------------------------- */
.bewertungen-section{ position:relative; overflow:hidden; }
.bewertungen-section > .container{ position:relative; z-index:2; }
.bewertungen__media{ position:absolute; inset:0; z-index:0; }
.bewertungen__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.3;
}
.bewertungen__scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,10,9,.78) 0%, rgba(10,10,9,.58) 35%, rgba(10,10,9,.85) 100%);
}
.google-badge{
  position:relative; max-width: 460px; margin: 0 auto clamp(48px,7vw,64px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: clamp(32px,5vw,44px) clamp(24px,4vw,36px);
  border-radius:24px;
  background: var(--c-surface);
  border:1px solid var(--c-line);
  will-change: transform;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.google-badge:hover{ box-shadow: 0 26px 60px -28px rgba(0,0,0,.3); }
.google-badge__logo-wrap{
  width: clamp(48px,6vw,60px); height: clamp(48px,6vw,60px);
  margin-bottom: 18px;
  animation: googleFloat 5.5s ease-in-out infinite;
}
.google-badge__logo{ width:100%; height:100%; display:block; }
@keyframes googleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.google-badge__score{ font-size: clamp(2.2rem,5vw,2.9rem); font-weight:800; letter-spacing:-0.02em; color:var(--c-text); line-height:1; }
.google-badge__score span{ font-size:.46em; color:var(--c-text-faint); font-weight:600; }
.google-badge__stars{ margin-top:10px; color: var(--c-accent); letter-spacing:3px; font-size:1.2rem; }
.google-badge__meta{ margin-top:8px; color:var(--c-text-muted); font-size:.9rem; letter-spacing:.02em; }
.google-badge__cta{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-size:.84rem; font-weight:600; color: var(--c-text);
  padding: 11px 22px; border-radius:999px; border:1px solid var(--c-line-strong);
  transition: border-color .3s, background .3s, transform .3s var(--ease-out);
}
.google-badge__cta svg{ width:15px; height:15px; }
.google-badge__cta:hover{ border-color: var(--c-accent); background: var(--c-accent-soft); transform: translateY(-2px); }

.testimonial__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.testimonial__google{ width:20px; height:20px; flex:none; opacity:.9; }

.testimonials{ margin-top: clamp(36px,5vw,56px); display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.2vw,22px); }
@media (max-width: 900px){ .testimonials{ grid-template-columns:1fr; } }
.testimonial{
  border:1px solid var(--c-line); border-radius:18px; padding: clamp(20px,2.4vw,26px);
  background: var(--c-surface);
}
.testimonial__stars{ color: var(--c-accent); letter-spacing:2px; font-size:.88rem; }
.testimonial p.quote{ margin-top:14px; color:var(--c-text); font-size:.98rem; line-height:1.65; }
.testimonial__who{ margin-top:16px; display:flex; align-items:center; gap:10px; }
.testimonial__avatar{
  width:36px; height:36px; border-radius:50%; background: var(--c-surface-2); border:1px solid var(--c-line-strong);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--c-text); font-size:.82rem;
}
.testimonial__who b{ font-size:.88rem; }
.testimonial__who span{ display:block; font-size:.74rem; color:var(--c-text-faint); }

/* ---------------------------------- standort / über uns background media ---------------------------------- */
#standort, #ueber-uns{ overflow:hidden; }
.standort-media{ position:absolute; inset:0; z-index:0; }
.standort-media img{ width:100%; height:100%; object-fit:cover; }
.standort-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(247,244,238,.8), rgba(247,244,238,.68) 45%, rgba(247,244,238,.85));
}
#standort .container, #ueber-uns .container{ position:relative; z-index:1; }

.standort-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items:center; }
@media (max-width: 980px){ .standort-layout{ grid-template-columns:1fr; } }

.info-list{ display:flex; flex-direction:column; gap: clamp(14px,2vw,18px); margin-top: clamp(24px,3vw,34px); }
.info-row{
  display:flex; gap:16px; align-items:flex-start;
  padding: 16px 18px; border-radius:18px;
  background: var(--c-surface);
  border:1px solid var(--c-line-strong);
  box-shadow: 0 20px 40px -28px rgba(20,18,15,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  will-change: transform;
}
.info-row:hover{
  border-color: var(--row-accent, var(--c-accent));
  box-shadow: 0 30px 56px -28px rgba(20,18,15,.4), 0 0 0 1px var(--row-accent, var(--c-accent));
}
.info-row--gold{ --row-accent:#a9793a; --row-accent-soft:rgba(169,122,69,.16); }
.info-row--teal{ --row-accent:#1f8a7c; --row-accent-soft:rgba(31,138,124,.14); }
.info-row--rust{ --row-accent:#c1552c; --row-accent-soft:rgba(193,85,44,.14); }
.info-row__icon{
  flex:none; width:42px; height:42px; border-radius:12px; background: var(--row-accent-soft, var(--c-accent-soft));
  border:1px solid var(--row-accent, var(--c-line-strong)); display:flex; align-items:center; justify-content:center; color: var(--row-accent, var(--c-accent));
}
.info-row__icon svg{ width:19px; height:19px; }
.info-row h4{ font-size:.92rem; font-weight:700; }
.info-row p, .info-row a{ font-size:.9rem; color:var(--c-text-muted); margin-top:2px; }
.info-row a:hover{ color: var(--row-accent, var(--c-text)); }

/* ---- real, live map, visible immediately ---- */
.map-embed{
  position:relative; border-radius:24px; overflow:hidden; aspect-ratio: 1/1;
  border:1px solid var(--c-line-strong);
  box-shadow: 0 40px 80px -40px rgba(20,18,15,.4);
  background: var(--c-surface-2);
}
.map-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter: saturate(1.2) contrast(1.03);
}
.map-embed__cta{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.45);
}
.map-embed__placeholder{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; padding: 24px 24px 84px; background: linear-gradient(165deg, var(--c-surface), var(--c-surface-2));
}
.map-embed.is-loaded .map-embed__placeholder{ display:none; }
.map-embed__pin{ width:34px; height:34px; color: var(--c-accent); flex:none; }
.map-embed__text{ font-weight:700; }
.map-embed__hint{ font-size:.76rem; color:var(--c-text-faint); max-width:280px; line-height:1.5; }
.map-embed__hint a{ color: var(--c-accent); text-decoration:underline; }
@media (max-width:480px){
  .map-embed__placeholder{ gap:10px; padding: 20px 20px 80px; }
  .map-embed__hint{ font-size:.72rem; max-width:240px; }
}

/* ---------------------------------- social ---------------------------------- */
.social-block{ max-width:640px; margin:0 auto; }

/* ---- Instagram / TikTok link cards ---- */
.contact-social{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom: clamp(26px,3.6vw,36px); }
.contact-social__link{
  display:flex; align-items:center; gap:13px;
  padding:14px 18px; border-radius:16px; flex:1; min-width:172px;
  border:1px solid var(--c-line-strong); background: var(--c-surface);
  transition: transform .3s var(--ease-out), border-color .3s, background .3s;
}
.contact-social__link:hover{ transform: translateY(-3px); border-color: var(--c-accent); background: var(--c-accent-soft); }
.contact-social__icon{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #f3d9ab, var(--c-accent) 60%, #9c7440);
  color:#14120f;
  box-shadow: 0 10px 22px -10px rgba(201,154,102,.6);
}
.contact-social__icon svg{ width:19px; height:19px; }
.contact-social__link b{ display:block; font-size:.95rem; font-weight:700; color:var(--c-text); }
.contact-social__link small{ font-size:.78rem; color:var(--c-text-muted); }

/* ---- video carousel: center video sharp, neighbours shrink/blur to the sides,
   loops infinitely in either direction ---- */
.video-carousel{ position:relative; }
.video-carousel__viewport{
  position:relative; height: clamp(320px,40vw,440px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.video-carousel__track{ position:relative; width:100%; height:100%; }
.video-carousel__item{
  position:absolute; top:50%; left:50%;
  width: clamp(150px,19vw,208px); aspect-ratio:9/16;
  border-radius:20px; overflow:hidden; cursor:pointer;
  border:1px solid var(--c-line-strong); background: var(--c-surface);
  box-shadow: 0 34px 64px -32px rgba(0,0,0,.65);
  transform: translate(-50%,-50%);
  transition: transform .55s var(--ease-out), opacity .55s var(--ease-out), filter .55s var(--ease-out);
  will-change: transform, opacity, filter;
}
.video-carousel__item video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-carousel__placeholder{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding: 18px; text-align:center;
  background: linear-gradient(165deg, var(--c-surface), var(--c-surface-2));
}
.video-carousel__play{ width:36px; height:36px; color: var(--c-accent); opacity:.75; }
.video-carousel__placeholder .fillme-inline{ font-size:.74rem; }

.video-carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--c-line-strong);
  background: var(--c-surface); color:var(--c-text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: border-color .3s, background .3s, transform .3s; z-index:20;
}
.video-carousel__nav:hover{ border-color: var(--c-accent); background: var(--c-accent-soft); }
.video-carousel__nav svg{ width:20px; height:20px; }
.video-carousel__nav--prev{ left: clamp(-6px,.5vw,6px); }
.video-carousel__nav--next{ right: clamp(-6px,.5vw,6px); }

@media (max-width:560px){
  .video-carousel__item{ width: clamp(132px,40vw,168px); }
  .video-carousel__nav{ width:38px; height:38px; }
}

.contact-form{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.contact-form input, .contact-form textarea{
  width:100%; background: var(--c-surface-2); border:1px solid var(--c-line-strong);
  border-radius:12px; padding:13px 14px; color:var(--c-text); font-family:inherit; font-size:.92rem;
  transition: border-color .3s, background .3s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--c-text-faint); }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--c-accent); }
.contact-form textarea{ min-height:74px; resize:vertical; }
.form-note{ font-size:.74rem; color:var(--c-text-faint); margin-top:2px; }
.form-success{ display:none; align-items:center; gap:8px; color: var(--c-accent); font-size:.88rem; margin-top:6px; }
.form-success.is-shown{ display:flex; }

@media (max-width: 560px){
  .flipcard__scene{ min-height: 500px; }
}

/* ---------------------------------- footer / cta band ---------------------------------- */
.cta-band{
  position:relative; text-align:center; overflow:hidden;
  padding: clamp(80px,13vw,130px) var(--pad);
  background:#050503;
}
.cta-band__media{ position:absolute; inset:0; z-index:0; }
.cta-band__media img, .cta-band__media video{ width:100%; height:100%; object-fit:cover; filter: grayscale(.2) brightness(.42); }
.cta-band__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(3,3,2,.55), rgba(3,3,2,.85)); }
.cta-band__inner{ position:relative; z-index:1; }
.cta-band h2{ font-size: clamp(2.1rem,5.8vw,3.8rem); font-weight:800; letter-spacing:-0.03em; max-width:16ch; margin:0 auto; color:#f5f2ec; line-height:1.08; }
.cta-band p{ margin:16px auto 0; color: rgba(245,242,236,.62); max-width:40ch; }
.cta-band .btn{ margin-top:30px; background:#f5f2ec; color:#0a0a09; }

footer{ border-top:1px solid var(--c-line); background: var(--c-bg); }
.footer-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  padding: clamp(36px,5vw,52px) 0 clamp(24px,4vw,32px);
}
.footer-brand{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:1.1rem; letter-spacing:.01em; color: var(--c-text); }
.footer-brand img{ height:38px; width:36px; object-fit:contain; object-position:center; }
.footer-tag{ margin-top:10px; color:var(--c-text-muted); font-size:.88rem; max-width:36ch; line-height:1.6; }
.footer-social{ display:flex; align-items:center; gap:10px; }
.footer-social__link{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--c-line-strong); color: var(--c-text-muted);
  transition: color .3s, border-color .3s, transform .3s var(--ease-out);
}
.footer-social__link svg{ width:18px; height:18px; }
.footer-social__link:hover{ color: var(--c-accent); border-color: var(--c-accent); transform: translateY(-2px); }
.footer-bottom{
  border-top:1px solid var(--c-line); padding: 22px 0 34px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  font-size:.8rem; color:var(--c-text-faint);
}
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom .legal-links a:hover{ color: var(--c-text); }

/* ---------------------------------- legal pages ---------------------------------- */
.legal-page{ padding: clamp(120px,16vw,160px) 0 clamp(60px,8vw,90px); }
.legal-page h1{ font-size: clamp(2rem,5vw,2.8rem); font-weight:800; letter-spacing:-0.02em; }
.legal-page h2{ font-size:1.2rem; font-weight:700; margin-top: 2.2em; margin-bottom:.6em; color: var(--c-text); }
.legal-page p, .legal-page li{ color: var(--c-text-muted); line-height:1.8; font-size:.98rem; }
.legal-page ul{ list-style:disc; padding-left:1.4em; display:flex; flex-direction:column; gap:.4em; }
.legal-page a{ color: var(--c-text); text-decoration:underline; text-underline-offset:3px; }
.legal-page > .container{ max-width: 820px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; margin-bottom:26px; color:var(--c-text-muted); font-size:.9rem; }
.back-link:hover{ color:var(--c-text); }

/* ---------------------------------- placeholders (TODO markers) ---------------------------------- */
.fillme-inline{
  color: var(--c-accent);
  border-bottom: 1px dashed var(--c-accent);
  padding-bottom:1px;
}

/* ---------------------------------- utility ---------------------------------- */
.text-center{ text-align:center; }
.mt-lg{ margin-top: clamp(2.5rem,6vw,4.5rem); }