/* ==========================================================================
   Restaurant Hole 19 — Golf Club Kitzingen
   Lailachweg 1, 97318 Kitzingen

   Palette is lifted from the crest: bottle green, aged gold, cream. Nothing
   here invents a brand colour — the greens are sampled from the logo's shield
   and the gold from its rope border, so the mark never sits on a ground that
   fights it.
   ========================================================================== */

:root {
  /* Sampled from assets/img/logo.png */
  --green-900: #08160e;
  --green-800: #0d2418;
  --green-700: #123420;
  --green-600: #1a462b;
  --green-500: #26603a;
  --fairway:   #4e9a4e;

  --gold-400: #e0c579;
  --gold-500: #c9a24b;
  --gold-600: #a8823a;

  --cream:     #f6f2e6;
  --cream-70:  rgba(246, 242, 230, 0.7);
  --cream-52:  rgba(246, 242, 230, 0.52);
  --cream-34:  rgba(246, 242, 230, 0.34);
  --hair:      rgba(246, 242, 230, 0.14);

  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.85, 0.24, 1);

  /* The pinned hero runway. 720vh, then 430vh, then 265vh, now 300vh: the
     scroll distance is 200vh for 14.27s of film — the same ~14vh of scroll
     per second of footage as the 12.27s film had over 165vh, so a single
     wheel notch still moves about a third of a second of film. Two things
     make that feel like a film rather than a flip-book: the scrub position
     is eased in hero.js, so a fast notch plays through its frames instead of
     jumping them, and the encode is 48fps so there are twice as many frames
     to land on. */
  --runway: 300vh;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The hero is pinned with position:sticky; a scroll-padding here would
     offset every anchor jump by the nav height. */
  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--green-900);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
a { color: var(--gold-400); text-decoration: none; }
::selection { background: var(--gold-500); color: var(--green-900); }

/* Long strings (an email address, a dish name) wrap rather than widen the
   page — the thing that turns a 390px phone into a 739px one. */
p, h1, h2, h3, h4, li, a, span, dd, dt { overflow-wrap: break-word; }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.h-display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 7.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.h-section {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 22px;
}
.lede {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.72;
  color: var(--cream-70);
  font-weight: 300;
  max-width: 62ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 32px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.btn--gold {
  background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
  color: var(--green-900);
  box-shadow: 0 14px 40px rgba(201, 162, 75, 0.28);
}
.btn--ghost {
  border-color: rgba(246, 242, 230, 0.34);
  color: var(--cream);
  background: rgba(246, 242, 230, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (hover: hover) {
  .btn--gold:hover  { transform: translateY(-3px); color: var(--green-900); }
  .btn--ghost:hover { transform: translateY(-3px); border-color: var(--gold-400); color: var(--gold-400); }
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(18px, 4vw, 54px);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Before it goes sticky the nav has no background of its own, and the film
   underneath opens on bright fairway — the wordmark and links were sitting
   cream-on-pale-green. A soft scrim under the bar keeps them legible from the
   first frame without putting a hard edge across the footage. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 22, 14, 0.72) 0%, rgba(8, 22, 14, 0.36) 58%, transparent 100%);
  transition: opacity 0.5s var(--ease);
}
/* Once the solid bar takes over, the scrim would double up. */
.nav.is-stuck::before { opacity: 0; }
.nav.is-stuck {
  background: rgba(8, 22, 14, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--hair);
  padding-top: 12px;
  padding-bottom: 12px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.nav__links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); }
.nav__links > a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-70);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}
@media (hover: hover) { .nav__links > a:hover { color: var(--gold-400); } }
.nav__cta { margin-left: 6px; }

.nav__burger {
  display: none;
  position: relative;
  z-index: 3;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 100px;
  border: 1px solid rgba(246, 242, 230, 0.22);
  background: rgba(8, 22, 14, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__burger i {
  position: absolute; left: 14px; width: 18px; height: 1.6px;
  background: var(--cream); border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
.nav__burger i:nth-child(1) { top: 16px; }
.nav__burger i:nth-child(2) { top: 22px; }
.nav__burger i:nth-child(3) { top: 28px; }
.nav.is-open .nav__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

html.is-navlocked, html.is-navlocked body { overflow: hidden; }

/* The drawer. Below 1000px the link row cannot sit beside the wordmark, and
   the links are MOVED here, never rebuilt — same DOM nodes, same anchors. */
@media (max-width: 1000px) {
  .nav__burger { display: inline-flex; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 2;
    width: min(360px, 88vw);
    /* dvh first: on iOS Safari 100vh is the LARGE viewport, so with the
       address bar showing a 100vh drawer runs its last link off-screen. */
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 104px 28px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(26, 70, 43, 0.6), transparent 62%),
      rgba(8, 22, 14, 0.98);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border-left: 1px solid var(--hair);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
  }
  .nav.is-open .nav__links {
    transform: none; visibility: visible;
    transition: transform 0.5s var(--ease), visibility 0s;
  }
  /* Auto margins centre the stack while it fits and stop centring the moment
     it does not — a centred overflowing column clips at the top, unreachably. */
  .nav__links > *:first-child { margin-top: auto; }
  .nav__links > *:last-child  { margin-bottom: auto; }
  .nav__links > a {
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--cream);
    /* 44px is the smallest target Apple and Google both call reliable. */
    min-height: 52px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--hair);
  }
  .nav__cta { margin: 26px 0 0; align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   THE HERO — a pinned runway with the film scrubbed by scroll position.

   Why the real clip and not a re-animation: the brief was that the opening
   match the supplied video exactly. Re-building a tee-off, a ball flight and
   a drone pass over this specific course in WebGL would be an imitation of
   it; playing the frames themselves IS it. `currentTime` is driven from
   scroll progress, so every visual is a pure function of position and
   scrubbing back up is perfectly symmetrical.
   -------------------------------------------------------------------------- */

.hero { position: relative; height: var(--runway); }
.hero__pin {
  position: sticky;
  top: 0;
  /* 100vh, deliberately not 100dvh: on Android Chrome and iOS Safari the
     dynamic unit changes by the height of the address bar while the bar
     slides away, and a pinned film that resizes on every frame of that
     slide is the stutter people felt at the top of the page. 100vh is the
     large viewport on both, stable for the whole scroll; with the bar
     showing, the bottom few percent of the film sit under it, which is
     fine for a full-bleed picture. */
  height: 100vh;
  overflow: hidden;
  background: var(--green-900);
}
.hero__film,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The footage is a wide fisheye; anchoring the crop slightly high keeps the
     horizon out of the dead centre on tall phone viewports. */
  object-position: 50% 46%;
}
.hero__poster { z-index: 1; transition: opacity 0.6s var(--ease); }
.hero__film   { z-index: 2; opacity: 0; transition: opacity 0.6s var(--ease); }
/* On a portrait phone the film is a <canvas> of stills and the <video> is
   put away with `hidden` (hero.js); the reset above gives media elements
   display:block, which would otherwise win over the attribute. The canvas
   shares the class so every film rule applies to it unchanged. */
.hero__film[hidden] { display: none; }
.hero.is-filmready .hero__film   { opacity: 1; }
.hero.is-filmready .hero__poster { opacity: 0; }

/* Vignette + a floor gradient so white copy holds over bright sky and pale
   fairway alike. Sits above the film, below the copy. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(88% 58% at 50% 50%, rgba(8, 22, 14, 0.34) 0%, transparent 72%),
    radial-gradient(120% 78% at 50% 34%, transparent 34%, rgba(8, 22, 14, 0.52) 100%),
    linear-gradient(to top, rgba(8, 22, 14, 0.88) 0%, rgba(8, 22, 14, 0.14) 34%, transparent 58%);
}
/* A separate flash layer for the moment of impact. */
.hero__flash {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 52%, rgba(255, 255, 255, 0.9), transparent 70%);
  opacity: 0;
  mix-blend-mode: screen;
}

.hero__stage {
  position: absolute; inset: 0; z-index: 5;
  display: grid;
  place-items: center;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 60px) clamp(90px, 14vh, 150px);
  text-align: center;
  pointer-events: none;
}
.hero__beat {
  position: absolute;
  max-width: min(1000px, 92vw);
  opacity: 0;
  will-change: opacity, transform;
}
.hero__beat--live { pointer-events: auto; }

/* The two lines over the mascot clip stand BESIDE him, not on him. The clip
   is composed on centre — the golf ball walks up the middle of the frame and
   by the end the pizza fills the lower left and the pasta the lower right —
   and the only clear ground is the sky and the wheat in the top corners. So
   on any landscape screen those beats sit top-left, left-aligned, in a
   column that ends before the frame's centre third begins (34% of the frame
   at any crop this layout produces). The course beats stay centred. Portrait
   layouts pin every beat under the film instead; see PHONES and TABLETS. */
@media (orientation: landscape) {
  .hero__beat--side {
    left: clamp(20px, 6vw, 120px); right: auto;
    top: clamp(88px, 21vh, 220px);
    max-width: min(27vw, 560px);
    text-align: left;
  }
  .hero__beat--side .hero__line { font-size: clamp(26px, 3.3vw, 62px); }
  .hero__beat--side .hero__kicker { margin-bottom: 14px; }
}

.hero__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 18px;
  /* Tight edge first, wide glow second: the eyebrow is small gold type and
     spends part of the film sitting on white cloud. */
  text-shadow:
    0 1px 2px rgba(8, 22, 14, 0.95),
    0 2px 10px rgba(8, 22, 14, 0.9),
    0 2px 26px rgba(8, 22, 14, 0.75);
}
.hero__line {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 6.6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow:
    0 1px 3px rgba(8, 22, 14, 0.6),
    0 4px 26px rgba(8, 22, 14, 0.7),
    0 8px 60px rgba(8, 22, 14, 0.6);
  text-wrap: balance;
}
.hero__line em { font-style: italic; color: var(--gold-400); }
.hero__sub {
  margin: 22px auto 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.66;
  font-weight: 300;
  color: var(--cream-70);
  text-shadow:
    0 1px 2px rgba(8, 22, 14, 0.9),
    0 2px 18px rgba(8, 22, 14, 0.85);
}

.hero__crest { width: clamp(150px, 19vw, 250px); margin: 0 auto 4px; filter: drop-shadow(0 18px 50px rgba(8, 22, 14, 0.7)); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* Scroll cue — only while the film has not started. */
.hero__cue {
  position: absolute;
  left: 50%; bottom: clamp(22px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream-52);
  transition: opacity 0.5s var(--ease);
}
.hero__cue span { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold-400), transparent); }

/* Progress rail down the right edge, marking the six beats. */
.hero__rail {
  position: absolute;
  right: clamp(12px, 2vw, 26px);
  top: 50%; transform: translateY(-50%);
  z-index: 6;
  display: flex; flex-direction: column; gap: 12px;
  transition: opacity 0.5s var(--ease);
}
.hero__rail i {
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(246, 242, 230, 0.28);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.hero__rail i.on { background: var(--gold-400); transform: scale(1.9); }
@media (max-width: 700px) { .hero__rail { display: none; } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { position: relative; padding: clamp(84px, 12vh, 168px) clamp(20px, 5vw, 56px); }
.wrap { max-width: 1280px; margin: 0 auto; }
.wrap--narrow { max-width: 940px; }

.section--dark  { background: var(--green-900); }
.section--mid   { background: linear-gradient(180deg, var(--green-900), var(--green-800) 46%, var(--green-900)); }
.section--panel { background: var(--green-800); }

.sec-head { display: grid; gap: 26px; margin-bottom: clamp(40px, 6vh, 76px); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: 56px; }
}

/* Sections below the fold that nothing measures from script are rendered
   only as they come near the viewport (content-visibility). The first
   layout of the page and every style recalc during a scroll skip them
   until then. The hero, the menu (its panels are fixed and must not be
   contained), the gallery (script measures its track) and the reservation
   are left out on purpose. */
#specialita, #oeffnungszeiten, #faq, #kontakt, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Animations that loop forever are parked while their element is off
   screen (site.js toggles is-parked): a ticker or a drifting pizza that
   nobody can see still costs a compositor frame on a phone. */
[data-anim].is-parked, [data-anim].is-parked * { animation-play-state: paused !important; }

/* Reveal-on-scroll. Kept to opacity + a small lift so it never causes layout
   shift, and disabled wholesale under prefers-reduced-motion. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* --- Über uns ------------------------------------------------------------- */
.about { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 940px) { .about { grid-template-columns: 1.05fr 0.95fr; } }
.about__media { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--hair); }
/* Direct child only. As a descendant selector this also matched the pin
   icon inside .about__badge and blew it up to fill the whole frame. */
.about__media > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.about__badge {
  position: absolute; left: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 100px;
  background: rgba(8, 22, 14, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hair);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-70);
}

.facts { display: grid; gap: 1px; margin-top: 40px; background: var(--hair); border-radius: 14px; overflow: hidden; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts > div { background: var(--green-800); padding: 22px 24px; }
.facts dt { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); margin: 0 0 8px; }
.facts dd { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.3; }

/* --- Öffnungszeiten ------------------------------------------------------- */
.hours { display: grid; gap: clamp(30px, 4vw, 56px); }
@media (min-width: 900px) { .hours { grid-template-columns: 1fr 1fr; } }
.hours__list { margin: 0; border-top: 1px solid var(--hair); }
.hours__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--hair);
}
.hours__row.is-today { color: var(--gold-400); }
.hours__row.is-today .hours__day::after {
  content: ' · heute';
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-500);
}
.hours__day { font-family: var(--serif); font-size: 20px; }
.hours__val { font-size: 15px; color: var(--cream-70); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours__row.is-closed .hours__val { color: var(--cream-34); }

.status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 100px;
  border: 1px solid var(--hair); background: rgba(246, 242, 230, 0.04);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 26px;
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--cream-34); flex: 0 0 auto; }
.status.is-open i   { background: var(--fairway); box-shadow: 0 0 12px var(--fairway); }
.status.is-closed i { background: var(--gold-600); }

/* --- Speisekarte ---------------------------------------------------------- */
.menu-grid { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 820px)  { .menu-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }

.menu-card { border: 1px solid var(--hair); border-radius: 18px; padding: clamp(24px, 3vw, 36px); background: var(--green-800); }
.menu-card__title {
  font-family: var(--serif); font-size: 27px; font-weight: 600; margin: 0 0 4px;
}
.menu-card__note { font-size: 12px; color: var(--cream-52); margin: 0 0 22px; line-height: 1.5; }
.menu-card ul { list-style: none; margin: 0; padding: 0; }
.menu-card li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px dotted rgba(246, 242, 230, 0.16);
}
.menu-card li:last-child { border-bottom: none; }
.menu-card .dish { flex: 1 1 auto; font-size: 15.5px; line-height: 1.45; }
.menu-card .price {
  flex: 0 0 auto; font-family: var(--serif); font-size: 18px; color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}

/* Weekly specials — a horizontal rail you can swipe on a phone and that
   becomes a grid once there is room. */
.specials { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.specials::-webkit-scrollbar { height: 6px; }
.specials::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 4px; }
.special {
  scroll-snap-align: start;
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 16px;
  padding: 26px 24px;
  background: linear-gradient(160deg, rgba(201, 162, 75, 0.12), rgba(246, 242, 230, 0.02) 58%);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  min-height: 178px;
}
.special__kind { margin: 0 0 12px; font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); display: flex; align-items: center; gap: 12px; }
.special__kind span { font-family: var(--serif); font-size: 15px; letter-spacing: 0.04em; color: var(--gold-400); }
.special__kind::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(201, 162, 75, 0.28); }
.special__name { font-family: var(--serif); font-size: 21px; line-height: 1.26; }
.special__price { font-family: var(--serif); font-size: 25px; color: var(--gold-400); font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) {
  .specials { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

/* --- Galerie -------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 860px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--hair); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform 1.1s var(--ease); }
.gallery .g-tall { grid-row: span 2; }
.gallery .g-tall img { aspect-ratio: 3 / 4; }
.gallery .g-wide { grid-column: span 2; }
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.05); } }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  font-size: 12px; color: var(--cream-70);
  background: linear-gradient(to top, rgba(8, 22, 14, 0.9), transparent);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
@media (hover: hover) { .gallery figure:hover figcaption { opacity: 1; } }

/* --- Feiern --------------------------------------------------------------- */
.feiern { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(201, 162, 75, 0.28); }
.feiern__bg { position: absolute; inset: 0; }
.feiern__bg img { width: 100%; height: 100%; object-fit: cover; }
.feiern__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8, 22, 14, 0.95) 0%, rgba(8, 22, 14, 0.78) 46%, rgba(8, 22, 14, 0.42) 100%); }
.feiern__body { position: relative; padding: clamp(34px, 6vw, 76px); max-width: 720px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 32px; }
.chips span {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 17px; border-radius: 100px;
  border: 1px solid rgba(201, 162, 75, 0.34); background: rgba(201, 162, 75, 0.08);
  color: var(--cream-70);
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px;
  border-right: 1.5px solid var(--gold-500); border-bottom: 1.5px solid var(--gold-500);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq p { margin: 0 0 24px; color: var(--cream-70); max-width: 74ch; font-weight: 300; }

/* --- Kontakt -------------------------------------------------------------- */
.contact { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 920px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact__block { margin: 0 0 30px; }
.contact__block dt { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 9px; }
.contact__block dd { margin: 0; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.42; }
.contact__block dd a { color: var(--cream); }
@media (hover: hover) { .contact__block dd a:hover { color: var(--gold-400); } }
.contact__map { border-radius: 18px; overflow: hidden; border: 1px solid var(--hair); position: relative; min-height: 320px; }
.contact__map img { width: 100%; height: 100%; object-fit: cover; }
.contact__map a {
  position: absolute; inset: auto 16px 16px auto;
  padding: 12px 22px; border-radius: 100px;
  background: rgba(8, 22, 14, 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hair);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream);
}

/* --- Footer --------------------------------------------------------------- */
.footer { padding: clamp(46px, 6vh, 72px) clamp(20px, 5vw, 56px); border-top: 1px solid var(--hair); background: var(--green-900); }
.footer__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer h4 { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--cream-70); font-size: 14px; }
@media (hover: hover) { .footer a:hover { color: var(--gold-400); } }
.footer__legal {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--cream-34);
}

/* --------------------------------------------------------------------------
   Reduced motion / no-JS.

   The runway collapses to a single viewport and the poster stands in for the
   film, so the page is a normal document: no pinning, no scrubbing, nothing
   that moves on its own.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .hero__pin { position: relative; height: min(88vh, 720px); }
  .hero__film { display: none; }
  .hero__cue, .hero__rail, .hero__flash { display: none; }
  .hero__beat { position: static; opacity: 1 !important; transform: none !important; }
  .hero__beat:not([data-beat="3"]) { display: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .gallery img, .btn, .nav, .nav__links { transition: none; }
}

html.no-js .hero { height: auto; }
html.no-js .hero__pin { position: relative; height: min(88vh, 720px); }
html.no-js .hero__film, html.no-js .hero__cue, html.no-js .hero__rail { display: none; }
html.no-js .hero__beat { position: static; opacity: 1; transform: none; }
html.no-js .hero__beat:not([data-beat="3"]) { display: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }
html.no-js .nav__links { position: static; transform: none; visibility: visible; }

/* Categories whose prices are not yet transcribed from the house card. The
   dish names still earn their place — the note says plainly where the number
   comes from instead of inventing one. */
.menu-card__pending {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 162, 75, 0.26);
  font-size: 12px;
  line-height: 1.55;
  color: var(--gold-500);
}

/* The h1 wraps the crest; it must not inherit heading margins or the crest
   drifts off the vertical centre of the beat. */
.hero__h1 { margin: 0; font-size: 0; line-height: 0; }

/* ==========================================================================
   CINEMA LAYERS
   The film is the hero's whole substance, so the treatment around it is kept
   to things a colourist would actually do: bars, grain, a flare on contact.
   Nothing here is decoration for its own sake.
   ========================================================================== */

/* Grain. A 128px deterministic plate tiled at low opacity — it sits over the
   footage and over the scrim, and it is what stops large flat areas of sky
   from banding on an 8-bit encode. */
.hero__grain {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background-image: url('img/grain.png');
  background-size: 128px 128px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* The shock ring off the club face. Scaled and faded from JS. */
.hero__ring {
  position: absolute; z-index: 4;
  left: 50%; top: 52%;
  width: 36vmin; height: 36vmin;
  margin: -18vmin 0 0 -18vmin;
  border-radius: 50%;
  border: 2px solid rgba(224, 197, 121, 0.9);
  box-shadow: 0 0 60px rgba(224, 197, 121, 0.55), inset 0 0 40px rgba(224, 197, 121, 0.3);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Cinema bars. Closed over the wheat, opening on the dissolve into the
   course. 7vh, not the 12vh the kitchen clip had: the mascot's cap reaches
   the top of its frame and the pizza its foot, and a 2.35:1 crop was taking
   both. */
.hero__bar {
  position: absolute; left: 0; right: 0; z-index: 7;
  height: 7vh;
  background: var(--green-900);
  pointer-events: none;
  will-change: transform;
}
.hero__bar--top { top: 0; }
.hero__bar--bot { bottom: 0; }

/* Document scroll progress. A hairline of gold, nothing more. */
.scrollbar {
  position: fixed; inset: 0 0 auto 0; z-index: 95;
  height: 2px; pointer-events: none;
  background: rgba(246, 242, 230, 0.06);
}
.scrollbar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  box-shadow: 0 0 12px rgba(224, 197, 121, 0.7);
}

/* Word-by-word reveal.

   NOT a clipping mask. The first cut used `overflow: hidden` on each word so
   the letters could rise out of nothing — but the hero copy carries a heavy
   multi-layer text-shadow for legibility over sky, and overflow:hidden clips
   that shadow to the span's box. Every word ended up inside a visible dark
   rectangle. Opacity plus a small lift gets the same staggered entrance and
   lets the shadow spill where it needs to. */
.hero__line .w {
  display: inline-block;
  vertical-align: baseline;
}
.hero__line .w > i {
  display: inline-block;
  font-style: inherit;
  opacity: 0;
  transform: translateY(0.34em);
  /* Short: with the runway halved, a beat can be on screen for well under a
     second of real time, and a word still fading up when its beat has gone
     reads as a stutter. */
  transition: opacity 0.38s var(--ease), transform 0.46s var(--ease);
}
.hero__beat.is-on .hero__line .w > i { opacity: 1; transform: none; }

/* ---- the hero lockup ----------------------------------------------------
   The supplied crest PNG is 616x532 and genuinely soft — at 1:1 the letter
   forms are mushy, so it was clearly enlarged from something smaller. At the
   size the hero wants it (250px CSS, 500+ device px on a retina tablet) that
   softness is the first thing you see, and a blurry logo on the brand moment
   is worse than no logo.

   So the hero sets the name as TYPE instead: razor sharp at any density, and
   it lets the film stay the picture. The bitmap still runs in the nav and the
   footer, where 46px and 132px are far inside what 616px can carry. */
.hero__lockup { margin: 0 0 clamp(22px, 3.4vh, 40px); text-align: center; }
.hero__lockup-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(58px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  background: linear-gradient(178deg, #fbf3d9 6%, var(--gold-400) 42%, var(--gold-600) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* A shadow cannot be painted through background-clip:text, so the depth
     comes from a drop-shadow filter on the element instead. */
  filter: drop-shadow(0 3px 2px rgba(8, 22, 14, 0.55))
          drop-shadow(0 14px 40px rgba(8, 22, 14, 0.8));
  transform: scale(0.965);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.hero__beat.is-on .hero__lockup-name {
  transform: none;
  filter: drop-shadow(0 3px 2px rgba(8, 22, 14, 0.55))
          drop-shadow(0 14px 40px rgba(8, 22, 14, 0.8))
          drop-shadow(0 0 42px rgba(224, 197, 121, 0.42));
}
.hero__lockup-rule {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 18px auto 0;
  max-width: min(560px, 82vw);
}
.hero__lockup-rule::before, .hero__lockup-rule::after {
  content: ''; height: 1px; flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, rgba(224, 197, 121, 0.72));
}
.hero__lockup-rule::after { background: linear-gradient(90deg, rgba(224, 197, 121, 0.72), transparent); }
.hero__lockup-rule span {
  font-family: var(--sans);
  font-size: clamp(9px, 0.85vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-400);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(8, 22, 14, 0.95), 0 2px 16px rgba(8, 22, 14, 0.85);
}

/* ==========================================================================
   ICONS
   Rendered by make_icons.py as transparent PNGs with the crest's gold poured
   through the stroke. Sized in ems so they track the type beside them.
   ========================================================================== */

.ico { width: 1em; height: 1em; flex: 0 0 auto; display: block; }
.ico--lg { width: 46px; height: 46px; }
.ico--md { width: 34px; height: 34px; }

/* A gold rule with a mark set into it — the section divider. */
.ornament {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 26px;
}
.ornament::before, .ornament::after {
  content: ''; height: 1px; flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.5));
}
.ornament::after { background: linear-gradient(90deg, rgba(201, 162, 75, 0.5), transparent); }
.ornament img { width: 26px; height: 26px; opacity: 0.95; }

/* Menu card headers carry their category's mark. */
.menu-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.menu-card__head .menu-card__title { margin: 0; }

/* Fact tiles and contact rows get a mark above the label. */
.facts > div { display: flex; flex-direction: column; gap: 0; }
.facts .ico--md { margin-bottom: 14px; opacity: 0.95; }
.contact__block dt { display: flex; align-items: center; gap: 9px; }
.contact__block dt .ico { width: 15px; height: 15px; }

/* Chips in the Feiern block take a small mark. */
.chips span { display: inline-flex; align-items: center; gap: 8px; }
.chips .ico { width: 14px; height: 14px; }

/* ==========================================================================
   POLISH
   ========================================================================== */

/* Nav links get a gold underline that sweeps rather than snaps. */
@media (min-width: 1001px) {
  .nav__links > a[href^="#"] { position: relative; padding-bottom: 4px; }
  .nav__links > a[href^="#"]::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--gold-400);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.45s var(--ease);
  }
  @media (hover: hover) {
    .nav__links > a[href^="#"]:hover::after { transform: scaleX(1); }
  }
}

/* Cards lift very slightly and warm their hairline. Restraint is the point:
   a big lift on a menu card reads as a web app, not a restaurant. */
.menu-card, .special {
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
@media (hover: hover) {
  .menu-card:hover, .special:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 162, 75, 0.42);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
  }
}

/* The gold rule that opens each section head. */
.sec-head .eyebrow { display: flex; align-items: center; gap: 12px; }
.sec-head .eyebrow::after {
  content: ''; height: 1px; width: clamp(28px, 5vw, 72px);
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.7), transparent);
}

/* The crest beat's kicker crosses both the crest's dark lower edge and open
   sky within a few frames. Shadows alone could not hold it, so it gets a
   drawn plate: a hairline rule either side and a faint ground behind. */
.hero__kicker--plate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 4px;
  padding: 9px 20px;
  border-radius: 100px;
  background: rgba(8, 22, 14, 0.55);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(201, 162, 75, 0.34);
  letter-spacing: 0.3em;
}

/* ==========================================================================
   THE CONTENT HALF — rebuilt.

   The film is the argument for the restaurant; everything under it has to
   hold that standard or the page falls off a cliff at the end of the hero.
   So the sections below borrow the film's own vocabulary: the real stills as
   grounds, gold as the only accent, depth from a pointer-tracked tilt rather
   than drop shadows, and one pinned horizontal pass that keeps the visitor
   moving along the course instead of just down a page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cursor glow. A soft gold light that follows the pointer over the dark
   sections. Desktop with a real pointer only — it has no meaning under a
   thumb, and on a phone it would just burn battery.
   -------------------------------------------------------------------------- */
.glow {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(520px circle at var(--gx, -50vw) var(--gy, -50vh),
              rgba(224, 197, 121, 0.075), transparent 62%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .glow.on { opacity: 1; } }
main, .footer { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */
.ticker {
  position: relative; overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid rgba(201, 162, 75, 0.28);
  border-bottom: 1px solid rgba(201, 162, 75, 0.28);
  background: linear-gradient(90deg, var(--green-900), var(--green-800), var(--green-900));
  /* Fade both ends so the run enters and leaves rather than snapping. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 44s linear infinite; }
.ticker__run { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__run > span {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--cream-70); white-space: nowrap;
  padding: 0 26px;
}
.ticker__run > i {
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-500); flex: 0 0 auto;
}
@keyframes ticker { to { transform: translateX(-50%); } }
@media (hover: hover) { .ticker:hover .ticker__track { animation-play-state: paused; } }

/* --------------------------------------------------------------------------
   Pointer tilt. JS sets --rx/--ry/--px/--py; CSS does the rest. The sheen
   is a light source that moves with the pointer across the face of the card.
   -------------------------------------------------------------------------- */
/* Hover-only, so only a fine pointer pays for it: on a touch screen the
   3D transform and will-change made a compositor layer of every tile and
   card (48 of them, each the size of its box times the pixel ratio) for an
   effect that can never start there. */
@media (hover: hover) and (pointer: fine) {
  [data-tilt] {
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.55s var(--ease);
    will-change: transform;
  }
  [data-tilt].is-tilting { transition: transform 0.12s ease-out; }
}

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 40px 0 0; background: rgba(201, 162, 75, 0.22);
  border-radius: 16px; overflow: hidden;
}
.stats > div { background: var(--green-800); padding: 24px 22px; }
.stats dd {
  margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: clamp(38px, 4.2vw, 58px); line-height: 1;
  background: linear-gradient(178deg, #fbf3d9, var(--gold-400) 50%, var(--gold-600));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.stats dt { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-52); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } .stats > div { display: flex; align-items: baseline; gap: 16px; } .stats dt { margin: 0; } }

/* Parallax on media: JS sets --py in px. */
[data-parallax] > img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }
[data-parallax] { overflow: hidden; }

/* --------------------------------------------------------------------------
   Menu tiles
   -------------------------------------------------------------------------- */
.menu-tiles {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  /* Wide tiles are placed so that both the two-column phone grid and the
     four-column desktop grid close every row; dense packing is the safety
     net if a tile is ever added out of order. */
  grid-auto-flow: dense;
}
@media (min-width: 900px) { .menu-tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: block; width: 100%; padding: 0; margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hair); border-radius: 20px;
  background: var(--green-800);
  color: var(--cream); text-align: left; cursor: pointer;
  font: inherit;
}
/* A wide tile spans two columns at every width, so the two-column phone grid
   never ends on a lone tile. */
.tile--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
/* 16:10 across two columns is the same height as a 4:5 tile in one, so a
   row of two wide tiles (Pasta and Pizza) stands as tall as a row of four.
   It used to be aspect-ratio:auto on desktop, which only worked while a
   wide tile shared its row with a normal one and collapsed to nothing
   otherwise. */
.tile__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  filter: saturate(0.85) brightness(0.62);
  transition: transform 1.1s var(--ease), filter 0.8s var(--ease);
}
.tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8, 22, 14, 0.94) 0%, rgba(8, 22, 14, 0.42) 48%, rgba(8, 22, 14, 0.1) 100%);
}
.tile__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(18px, 2.4vw, 28px);
  transform: translateZ(30px);
}
.tile__body .ico--lg { width: 40px; height: 40px; margin-bottom: 8px; }
.tile__name { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.1; }
.tile__meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-400); }
.tile__go {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(224, 197, 121, 0.5);
  background: rgba(8, 22, 14, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--gold-400); font-size: 18px;
  transform: translateZ(40px);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
@media (hover: hover) {
  .tile:hover .tile__bg { transform: scale(1.0); filter: saturate(1) brightness(0.78); }
  .tile:hover .tile__go { background: var(--gold-400); color: var(--green-900); transform: translateZ(40px) rotate(-45deg); }
}
.tile:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Menu panels. With JS: a full-screen overlay opened from a tile. Without:
   the panels are ordinary cards in the flow — the menu never depends on a
   script. The `hidden` attribute only bites once JS has taken over.
   -------------------------------------------------------------------------- */
html.no-js .menu-panel[hidden] { display: block; }
html.no-js .menu-panels { display: grid; gap: 18px; margin-top: 18px; }
html.no-js .menu-panel { position: relative; }
html.no-js .menu-panel__bg, html.no-js .menu-panel__close { display: none; }

.menu-panel {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(70px, 11vh, 110px) clamp(16px, 4vw, 48px) clamp(24px, 5vh, 56px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.42s var(--ease), visibility 0s linear 0.42s;
}
.menu-panel.is-open { opacity: 1; visibility: visible; transition: opacity 0.42s var(--ease), visibility 0s; }
/* A closed panel is display:none, not merely invisible: sixteen full-screen
   fixed panels that were only visibility:hidden still intersected the
   viewport, so every lazy photo inside them downloaded on page load — over
   a megabyte a phone never asked for. site.js clears `hidden` two frames
   before it adds is-open, so the transition still runs. */
.menu-panel[hidden] { display: none; }
/* The backdrop is the hero's ground with a soft centre glow, not a blurred
   copy of the photo: one blurred full-screen bitmap per panel was a raster
   pass a phone could feel. */
.menu-panel { background: radial-gradient(70% 60% at 50% 40%, rgba(26, 70, 43, 0.55), rgba(8, 22, 14, 0.9) 70%), rgba(8, 22, 14, 0.9); }
.menu-panel__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.32) saturate(0.8) blur(6px);
  transform: scale(1.08);
}
.menu-panel__card {
  position: relative;
  width: min(640px, 100%); max-height: 100%; overflow-y: auto;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 22px;
  border: 1px solid rgba(201, 162, 75, 0.36);
  background: linear-gradient(160deg, rgba(26, 70, 43, 0.55), rgba(8, 22, 14, 0.92) 60%);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: translateY(22px) scale(0.98);
  transition: transform 0.5s var(--ease);
}
.menu-panel.is-open .menu-panel__card { transform: none; }
.menu-panel__card .ico--md { width: 38px; height: 38px; margin-bottom: 14px; }
.menu-panel__title { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; margin: 0 0 6px; line-height: 1.05; }
.menu-panel__close {
  position: absolute; top: 16px; right: 16px; z-index: 3;   /* above the photo strip, which is transformed and would otherwise paint over it */
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(246, 242, 230, 0.28); background: rgba(8, 22, 14, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream); font-size: 16px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (hover: hover) { .menu-panel__close:hover { background: var(--gold-400); color: var(--green-900); transform: rotate(90deg); } }
/* Page lock behind an open panel. overflow:hidden alone is ignored by iOS
   Safari, which keeps scrolling the page under the card; pinning the body
   at its current offset is the one lock every browser honours (site.js
   records the offset and restores it on close). */
html.is-panellocked, html.is-panellocked body { overflow: hidden; }
html.is-panellocked body { position: fixed; left: 0; right: 0; width: 100%; }

.dishes { list-style: none; margin: 18px 0 0; padding: 0; }
.dishes li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px dotted rgba(246, 242, 230, 0.16);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.menu-panel.is-open .dishes li { opacity: 1; transform: none; }
.dishes li:last-child { border-bottom: none; }
.dishes .dish { flex: 1 1 auto; font-size: 16.5px; line-height: 1.45; }
.dishes .dish::after {
  /* Dotted leader between dish and price. */
  content: ''; display: inline-block; vertical-align: baseline;
}
.dishes .price { flex: 0 0 auto; font-family: var(--serif); font-size: 20px; color: var(--gold-400); font-variant-numeric: tabular-nums; }
/* The card's own descriptions under each dish, and the sub-headings a long
   card is grouped by (Aperitivi, Offene Weine, ...). */
.dish__desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--cream-52); font-weight: 300; }
.dishes__head { border-bottom: none !important; padding: 26px 0 4px !important; }
.dishes__head span { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); font-weight: 600; }
.dishes__head small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--cream-52); font-weight: 300; }
.dishes__head:first-child { padding-top: 6px !important; }
/* Two sizes, two prices: 0,3 l and 0,5 l, klein and groß. */
.price--multi { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 18px; line-height: 1.2; }
.price--multi small { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-52); margin-right: 8px; font-weight: 500; }
/* The drinks half of the card. */
.menu-sub { margin: clamp(40px, 6vw, 72px) 0 22px; }
.menu-sub .h-sub { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; margin: 0; }

/* --------------------------------------------------------------------------
   Pinned horizontal gallery
   -------------------------------------------------------------------------- */
.hscroll { position: relative; }
.hscroll__pin {
  position: sticky; top: 0;
  height: 100vh; /* not dvh — see .hero__pin */
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(22px, 4vh, 40px);
  padding-top: 70px;
  background: var(--green-900);
}
.hscroll__head { width: 100%; }
.hscroll__track {
  display: flex; gap: clamp(14px, 2vw, 28px);
  padding: 0 clamp(20px, 5vw, 56px);
  width: max-content;
  will-change: transform;
}
.slide {
  position: relative; flex: 0 0 auto; margin: 0;
  width: clamp(280px, 56vw, 760px);
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hair);
}
.slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.slide figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 18px 22px;
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); font-weight: 600;
  background: linear-gradient(to top, rgba(8, 22, 14, 0.9), transparent);
}
.slide figcaption span { font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; color: var(--gold-400); }

/* Reduced motion / no JS: an ordinary swipeable strip. */
@media (prefers-reduced-motion: reduce) {
  .hscroll__pin { position: relative; height: auto; padding: clamp(60px, 8vh, 100px) 0; }
  .hscroll__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .slide { scroll-snap-align: start; }
}
html.no-js .hscroll__pin { position: relative; height: auto; padding: clamp(60px, 8vh, 100px) 0; }
html.no-js .hscroll__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }

/* --------------------------------------------------------------------------
   Today card
   -------------------------------------------------------------------------- */
.today {
  margin: 30px 0 28px; padding: 24px 26px;
  border-radius: 18px;
  border: 1px solid rgba(201, 162, 75, 0.36);
  background: linear-gradient(150deg, rgba(201, 162, 75, 0.14), rgba(246, 242, 230, 0.02) 60%);
  max-width: 420px;
}
.today .ico--md { width: 30px; height: 30px; margin-bottom: 10px; }
.today__label { margin: 0; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-500); }
.today__val { margin: 4px 0 14px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; }
.today .status { margin: 0; }

/* --------------------------------------------------------------------------
   Contact pin — a pulsing marker on the aerial, over the clubhouse.
   -------------------------------------------------------------------------- */
.contact__map { position: relative; }
.contact__pin {
  position: absolute; left: 21%; top: 61%;
  width: 18px; height: 18px; pointer-events: none;
}
.contact__pin i {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(8, 22, 14, 0.8);
}
.contact__pin i:last-child {
  background: transparent; border: 2px solid var(--gold-400); box-shadow: none;
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(4.2); opacity: 0; } }

/* --------------------------------------------------------------------------
   Footer lockup — type, matching the hero, not the soft bitmap.
   -------------------------------------------------------------------------- */
.footer__lockup {
  margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: 42px; line-height: 1; letter-spacing: 0.02em;
  background: linear-gradient(178deg, #fbf3d9, var(--gold-400) 50%, var(--gold-600));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.footer__sub { margin: 8px 0 0; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-500); }

/* Reduced motion: no ticker, no tilt, no pulse, no parallax. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  [data-tilt] { transform: none !important; transition: none; }
  .contact__pin i:last-child { animation: none; }
  [data-parallax] img { transform: none; }
  .tile__bg { transition: none; }
}

/* Nav wordmark as type, matching the hero and footer. The bitmap crest was
   soft at every size it appeared, so it now lives only in the favicon. */
.nav__brand { flex-direction: column; align-items: flex-start; gap: 0; }
.nav__mark {
  font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1;
  letter-spacing: 0.03em;
  background: linear-gradient(178deg, #fbf3d9, var(--gold-400) 50%, var(--gold-600));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.nav__sub { font-size: 8.5px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold-500); margin-top: 3px; }


/* ==========================================================================
   v3 — the half after the menu
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pizzas in the air. `.after-menu` wraps the specials and the reservation;
   the sections inside go transparent so the wrapper's ground shows through.
   Each pizza is a real cut-out of the kitchen's own photo, given a slow
   drift (translate + rotate, via keyframes on the <img>) and a scroll
   parallax (the --sy translate on the wrapper span, set by site.js). Depth
   comes from size, opacity and a touch of blur on the far ones.
   -------------------------------------------------------------------------- */
.after-menu {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(201, 162, 75, 0.10), transparent 70%),
    linear-gradient(180deg, var(--green-800) 0%, var(--green-900) 38%, var(--green-800) 100%);
}
.after-menu > .section { background: transparent; z-index: 1; }
.after-menu .sec-head, .reserve__intro, .form, .thanks { position: relative; z-index: 1; }
.pizzas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pz {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  opacity: var(--o, 0.7);
  filter: blur(var(--b, 0px));
  transform: translate3d(0, var(--sy, 0px), 0);
}
@media (hover: hover) and (pointer: fine) { .pz { will-change: transform; } }
.pz img {
  width: 100%; height: 100%;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  animation: pz-drift var(--d, 20s) ease-in-out var(--dl, 0s) infinite alternate;
  transform-origin: 50% 50%;
}
@keyframes pz-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(calc(var(--s) * 0.22), calc(var(--s) * -0.26), 0) rotate(var(--r, 12deg)) scale(1.04); }
}
/* One column on a phone means the copy runs over the whole width, so the
   pizzas there are fewer, smaller and fainter — texture, not obstacles. */
@media (max-width: 899px) { .pz--wide { display: none; } .pz { width: calc(var(--s) * 0.72); height: calc(var(--s) * 0.72); opacity: calc(var(--o, 0.7) * 0.55); } }

/* --------------------------------------------------------------------------
   Reservation
   -------------------------------------------------------------------------- */
.reserve__grid { display: grid; gap: 44px; }
@media (min-width: 1000px) {
  .reserve__grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  /* The thank-you takes the form's cell, beside the intro, not a new row. */
  .reserve__grid > .thanks { grid-column: 2; grid-row: 1; }
}
.reserve__intro .lede { max-width: 46ch; }
.perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.perks li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: var(--cream-70); }
.perks .ico { width: 22px; height: 22px; flex: 0 0 auto; }

/* The Loyalty Card as an object — brushed gold, a chip, the lockup. It tilts
   under the pointer like the tiles. */
.loyalty {
  position: relative; overflow: hidden;
  margin: 36px 0 0; max-width: 400px; aspect-ratio: 1.586;
  border-radius: 22px; padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--green-900);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.10) 60%, rgba(255, 255, 255, 0.18) 100%),
    linear-gradient(150deg, #f1dc9c 0%, var(--gold-400) 28%, var(--gold-500) 58%, var(--gold-600) 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.loyalty__sheen {
  position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.34) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: sheen 6.5s var(--ease) 1.2s infinite;
}
@keyframes sheen { 0% { transform: translateX(-60%); } 35% { transform: translateX(60%); } 100% { transform: translateX(60%); } }
.loyalty__top { display: flex; justify-content: space-between; align-items: baseline; position: relative; }
.loyalty__mark { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: 0.02em; }
.loyalty__type { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 600; }
.loyalty__chip {
  position: relative; display: block; width: 46px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, #fbf3d9, #b99442);
  box-shadow: inset 0 0 0 1px rgba(8, 22, 14, 0.35), inset 0 6px 0 -5px rgba(8, 22, 14, 0.3), inset 0 -6px 0 -5px rgba(8, 22, 14, 0.3);
}
.loyalty__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; position: relative; }
.loyalty__bonus { font-family: var(--serif); font-weight: 700; font-size: clamp(44px, 5vw, 64px); line-height: 0.9; }
.loyalty__note { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; line-height: 1.5; font-weight: 500; }

.form {
  display: grid; gap: 18px 16px; grid-template-columns: 1fr 1fr;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 24px;
  border: 1px solid rgba(201, 162, 75, 0.32);
  background: linear-gradient(160deg, rgba(26, 70, 43, 0.38), rgba(8, 22, 14, 0.72) 62%);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
}
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.field { display: grid; gap: 9px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-52); }
.field label span { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.field input, .field select {
  width: 100%; min-height: 54px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(246, 242, 230, 0.16);
  background: rgba(246, 242, 230, 0.045);
  color: var(--cream); font: inherit; font-size: 16px;
  color-scheme: dark;
  outline: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input::placeholder { color: var(--cream-34); }
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23e0c579' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 18px center;
}
.field select option { background: var(--green-800); color: var(--cream); }
.field input:focus, .field select:focus {
  border-color: rgba(224, 197, 121, 0.85);
  background: rgba(246, 242, 230, 0.07);
  box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.14);
}
.field input:focus-visible, .field select:focus-visible { outline: none; }
.field.is-invalid input, .field.is-invalid select { border-color: rgba(224, 96, 96, 0.8); }
.field .field__err { font-size: 12px; color: #e9a4a4; display: none; }
.field.is-invalid .field__err { display: block; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13px; line-height: 1.55; color: var(--cream-70); }
.check input {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0;
  -webkit-appearance: none; appearance: none;
  border: 1px solid rgba(224, 197, 121, 0.6); border-radius: 5px;
  background: rgba(246, 242, 230, 0.05);
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.check input::after {
  content: ''; width: 9px; height: 5px;
  border-left: 2px solid var(--green-900); border-bottom: 2px solid var(--green-900);
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 0.2s var(--ease);
}
.check input:checked { background: var(--gold-400); border-color: var(--gold-400); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check input:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.form__small { margin: 0; font-size: 12px; color: var(--cream-52); max-width: 38ch; line-height: 1.5; }
.form .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.form__status {
  padding: 16px 20px; border-radius: 14px; font-size: 14.5px; line-height: 1.55;
  border: 1px solid rgba(201, 162, 75, 0.36); background: rgba(201, 162, 75, 0.08); color: var(--cream);
}
.form__status a { text-decoration: underline; text-underline-offset: 3px; }
.form__status.is-error { border-color: rgba(224, 96, 96, 0.5); background: rgba(224, 96, 96, 0.08); }

/* `.form` is display:grid, which would beat the UA's [hidden] rule and keep
   the submitted form on screen under the thank-you. Say it explicitly. */
.form[hidden], .thanks[hidden] { display: none; }
.thanks {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  border: 1px solid rgba(201, 162, 75, 0.4);
  background: linear-gradient(160deg, rgba(201, 162, 75, 0.16), rgba(8, 22, 14, 0.7) 62%);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
  animation: thanks-in 0.7s var(--ease);
}
@keyframes thanks-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.thanks__title { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 3.6vw, 48px); margin: 6px 0 14px; line-height: 1.05; }
.thanks__bonus { margin: 14px 0 0; padding: 14px 18px; border-radius: 12px; background: rgba(201, 162, 75, 0.14); color: var(--gold-400); font-size: 15px; }
.thanks .ornament { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Menu panel photo — the dish photo bleeds to the card's edges above the list
   -------------------------------------------------------------------------- */
.menu-panel__card { --pad: clamp(26px, 4vw, 44px); padding: var(--pad); }
.menu-panel__photo {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 22px;
  aspect-ratio: 16 / 8; overflow: hidden;
  border-radius: 22px 22px 0 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.3);
}
.menu-panel__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.menu-panel__card .ico--md { margin-top: 0; }
html.no-js .menu-panel__photo { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Reduced motion / no JS for the new pieces
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pz img { animation: none; }
  .pz { transform: none; }
  .loyalty__sheen { animation: none; }
  .thanks { animation: none; }
}
html.no-js .pz img { animation: none; }

/* ==========================================================================
   FEIERN — the nav dropdown, the four option cards, and the four pages
   (firmenfeier.html, weihnachtsfeier.html, catering.html, privatfeier.html).
   ========================================================================== */

/* --- Nav group: "Feiern" with a submenu ---------------------------------
   Desktop with a mouse: the submenu opens on hover and on keyboard focus,
   and the "Feiern" link itself still goes to the section. Anything that
   cannot hover (phone, iPad, a touch laptop) opens it on the first tap of
   "Feiern" instead — see site.js. In the drawer it is an accordion row. */
.nav__group { position: relative; display: flex; align-items: center; gap: 4px; }
.nav__group > a {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-70); transition: color 0.3s var(--ease); white-space: nowrap;
}
@media (hover: hover) { .nav__group > a:hover { color: var(--gold-400); } }
.nav__more {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--cream-70); cursor: pointer;
  transition: color 0.3s var(--ease), transform 0.4s var(--ease), background 0.3s var(--ease);
}
.nav__more i {
  display: block; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav__group.is-open .nav__more, .nav__more:hover { color: var(--gold-400); }
.nav__group.is-open .nav__more { transform: rotate(180deg); }
.nav__more:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.nav__menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  min-width: 232px; padding: 10px;
  transform: translateX(-50%) translateY(-6px);
  display: grid; gap: 2px;
  background: rgba(8, 22, 14, 0.96);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(201, 162, 75, 0.28); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
/* A hover bridge so the pointer can travel the 14px gap without closing it. */
.nav__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: 10px;
  font-family: var(--serif); font-size: 19px; line-height: 1.15;
  color: var(--cream); white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__menu a::after { content: '↗'; font-family: var(--sans); font-size: 12px; color: var(--gold-500); opacity: 0.8; }
.nav__menu a[href^="#"]::after, .nav__menu a[href^="index.html#"]::after { content: '→'; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: rgba(201, 162, 75, 0.12); color: var(--gold-400); outline: none; }
.nav__menu a[aria-current="page"] { color: var(--gold-400); }
.nav__menu a[aria-current="page"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); margin-right: -6px; }
.nav__menu__label { display: none; }
@media (min-width: 1001px) {
  @media (hover: hover) {
    .nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s; }
    .nav__group:hover .nav__more { color: var(--gold-400); }
  }
  .nav__group.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s; }
  /* The sweep underline the other links have. */
  .nav__group > a { position: relative; padding-bottom: 4px; }
  .nav__group > a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-400);
    transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
  }
  @media (hover: hover) { .nav__group:hover > a::after { transform: scaleX(1); } }
}
/* In the drawer the group is a row like the others, and the submenu opens
   inline underneath it rather than floating. */
@media (max-width: 1000px) {
  .nav__group { flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--hair); }
  .nav__group > a {
    font-family: var(--serif); font-size: 22px; letter-spacing: 0.02em; text-transform: none; color: var(--cream);
    min-height: 52px; display: flex; align-items: center; padding-right: 44px;
  }
  .nav__more { position: absolute; right: 6px; top: 13px; width: 30px; height: 30px; }
  .nav__more i { width: 9px; height: 9px; }
  .nav__menu {
    position: static; transform: none; min-width: 0; padding: 0 0 6px 14px;
    background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    display: none; opacity: 1; visibility: visible; transition: none;
  }
  .nav__menu::before { display: none; }
  .nav__group.is-open .nav__menu { display: grid; }
  .nav__menu a { font-size: 18px; padding: 10px 6px; min-height: 44px; border-radius: 8px; }
}

/* --- The four option cards in the Feiern section ------------------------- */
.occasions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(22px, 3vw, 34px); }
@media (min-width: 900px) { .occasions { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.occ {
  position: relative; overflow: hidden; isolation: isolate; display: block;
  aspect-ratio: 4 / 5; border-radius: 20px; border: 1px solid var(--hair);
  background: var(--green-800); color: var(--cream);
}
.occ__bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); filter: saturate(0.85) brightness(0.62);
  transition: transform 1.1s var(--ease), filter 0.8s var(--ease);
}
.occ::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8, 22, 14, 0.95) 0%, rgba(8, 22, 14, 0.45) 50%, rgba(8, 22, 14, 0.1) 100%); }
.occ__body { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-direction: column; gap: 7px; padding: clamp(16px, 2.2vw, 26px); }
.occ__kicker { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-500); }
.occ__name { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.1; }
.occ__text { font-size: 13.5px; color: var(--cream-70); line-height: 1.5; max-width: 30ch; }
.occ__cta { margin-top: 6px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-400); }
.occ__go {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(224, 197, 121, 0.5);
  background: rgba(8, 22, 14, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--gold-400); font-size: 16px; transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
@media (hover: hover) {
  .occ:hover .occ__bg { transform: scale(1); filter: saturate(1) brightness(0.78); }
  .occ:hover .occ__go { background: var(--gold-400); color: var(--green-900); }
}
.occ:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 4px; }
@media (max-width: 560px) { .occ { aspect-ratio: 1 / 1; } }

/* --- The pages ----------------------------------------------------------- */
.phero { position: relative; min-height: min(78vh, 720px); display: grid; align-items: end; padding: clamp(120px, 18vh, 200px) clamp(20px, 5vw, 56px) clamp(48px, 8vh, 88px); isolation: isolate; overflow: hidden; }
.phero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.72); }
.phero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--green-900) 0%, rgba(8, 22, 14, 0.72) 42%, rgba(8, 22, 14, 0.28) 100%); }
.phero__body { max-width: 1280px; margin: 0 auto; width: 100%; }
.phero__title { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.01em; margin: 14px 0 20px; max-width: 18ch; }
.phero .lede { max-width: 56ch; }
.phero__crumbs { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-52); margin: 0 0 18px; }
.phero__crumbs a { color: var(--cream-70); }
.phero__crumbs span::before { content: '·'; margin-right: 14px; color: var(--gold-500); }
.phero__crumbs span:first-child::before { display: none; }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.facts li { padding: 22px 22px 20px; border: 1px solid var(--hair); border-radius: 16px; background: rgba(13, 36, 24, 0.5); }
.facts dt, .facts .facts__k { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.facts .ico { width: 14px; height: 14px; }
.facts dd, .facts .facts__v { margin: 0; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; }

.pkgs { display: grid; gap: 16px; }
@media (min-width: 860px) { .pkgs { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.pkg { position: relative; padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--hair); border-radius: 20px; background: linear-gradient(160deg, rgba(26, 70, 43, 0.35), rgba(13, 36, 24, 0.6) 60%); display: flex; flex-direction: column; gap: 14px; }
.pkg--lead { border-color: rgba(201, 162, 75, 0.45); }
.pkg__kind { margin: 0; font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); display: flex; align-items: center; gap: 12px; min-width: 0; }
.pkg__kind span:first-child { flex: 0 0 auto; }
.pkg__kind span { font-family: var(--serif); font-size: 15px; letter-spacing: 0.04em; color: var(--gold-400); }
.pkg__kind::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(201, 162, 75, 0.28); }
.pkg__name { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.12; }
.pkg__for { margin: -6px 0 0; font-size: 13.5px; color: var(--cream-52); }
.pkg__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15px; color: var(--cream-70); font-weight: 300; }
.pkg__list li { display: flex; gap: 10px; align-items: flex-start; }
.pkg__list li::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--gold-500); }
.pkg__price { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pkg__price b { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2vw, 27px); color: var(--gold-400); font-variant-numeric: tabular-nums; }
.pkg__price small { font-size: 12px; color: var(--cream-52); }
.pkg__note { margin: 26px 0 0; font-size: 13px; color: var(--cream-52); max-width: 72ch; line-height: 1.55; }

.steps { counter-reset: step; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.steps li { counter-increment: step; padding: 24px 24px 22px; border: 1px solid var(--hair); border-radius: 16px; }
.steps li::before { content: '0' counter(step); display: block; font-family: var(--serif); font-size: 15px; letter-spacing: 0.04em; color: var(--gold-400); margin-bottom: 12px; }
.steps h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.15; }
.steps p { margin: 0; font-size: 14.5px; color: var(--cream-70); font-weight: 300; }

.field textarea {
  width: 100%; min-height: 120px; resize: vertical; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--hair); background: rgba(8, 22, 14, 0.5); color: var(--cream);
  font: inherit; font-size: 15.5px; line-height: 1.5; transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea::placeholder { color: var(--cream-34); }
.field textarea:focus { outline: none; border-color: rgba(224, 197, 121, 0.7); background: rgba(8, 22, 14, 0.7); }
.field.is-invalid textarea { border-color: rgba(224, 96, 96, 0.8); }
.anfrage__grid { display: grid; gap: 44px; }
@media (min-width: 1000px) { .anfrage__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.anfrage__intro .lede { max-width: 46ch; }
.mini-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 860px) { .mini-gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.mini-gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--hair); }
.mini-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; transition: transform 1.1s var(--ease); }
.mini-gallery .g-tall { grid-row: span 2; }
.mini-gallery .g-tall img { aspect-ratio: auto; height: 100%; }
@media (hover: hover) { .mini-gallery figure:hover img { transform: scale(1.05); } }
.mini-gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 12px 14px; font-size: 12px; color: var(--cream-70); background: linear-gradient(to top, rgba(8, 22, 14, 0.9), transparent); }

/* --- Loyalty Card: coming soon, no percentage ---------------------------- */
.loyalty__soon { font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 2vw, 25px); line-height: 1.08; display: flex; flex-direction: column; gap: 8px; }
.loyalty__soon-tag {
  align-self: flex-start; font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 5px 9px 4px; border-radius: 100px; background: rgba(8, 22, 14, 0.14); color: var(--green-900); border: 1px solid rgba(8, 22, 14, 0.22);
}
.loyalty__note { max-width: 46%; }
@media (max-width: 420px) { .loyalty__note { display: none; } }

/* --- Galerie: two portrait photos among the landscape ones ---------------
   The slides now share one HEIGHT and take their width from their own
   aspect (16:10 wide, 4:5 tall), so a portrait photo is a portrait rather
   than a strip. The height follows the viewport: about half its height on
   a laptop, capped by width on a phone so the wide slide still fits the
   screen, and less on a short landscape phone so the head stays visible. */
.slide { width: auto; height: min(52vh, 60vw, 480px); }
.slide img { height: 100%; width: auto; aspect-ratio: 16 / 10; }
.slide--tall img { aspect-ratio: 4 / 5; }
@media (max-height: 520px) { .slide { height: min(42vh, 60vw, 480px); } }
/* Captions scale with the slide, not the page: a 130px-wide portrait slide
   on a landscape phone cannot carry 28px type. */
.slide figcaption { font-size: clamp(13px, min(3.6vh, 3.6vw), 26px); padding: clamp(10px, 2vh, 18px) clamp(12px, 2.2vh, 22px); gap: clamp(8px, 1.4vh, 14px); }
.slide figcaption span { font-size: clamp(9px, 1.3vh, 11px); }
.slide--tall figcaption { font-size: clamp(12px, min(3vh, 3vw), 21px); }

/* ==========================================================================
   PHONES — the portrait film, and the effects a phone GPU cannot carry
   ========================================================================== */

/* A portrait phone gets its own film (hero.js picks `data-mp4-phone` on this
   same query): the portrait mascot clip the restaurant supplied for phones,
   sharp across the top 80% of a 9:16 frame over a blurred, darkened copy of
   itself with its sides and its foot feathered in; then, after the same
   dissolve, the course footage as a 16:9 band at 27–59% of the frame over
   a blurred, darkened crop of itself. The film is full-bleed and anchored
   to the top: on a 19.5:9 phone it loses 9% of the frame's width at each
   side — exactly the feathered margin — and nothing of its height; on a
   16:9 phone it loses nothing. The copy lives where the film was composed
   to leave room for it: the two mascot lines under the clip's feathered
   foot, the two course lines under the band. */
@media (max-width: 700px) and (orientation: portrait) {
  .hero__film, .hero__poster { inset: 0; height: 100%; object-position: 50% 0; }
  /* No vignette over the picture; a scrim under the nav and, at the foot, the
     hero's own ground rising to meet the copy — it takes over just where the
     clip's feather ends. */
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(8, 22, 14, 0.62) 0%, rgba(8, 22, 14, 0.2) 9%, transparent 16%),
      linear-gradient(to bottom, transparent 73%, rgba(8, 22, 14, 0.86) 84%, var(--green-900) 92%);
  }
  /* The bars would sit on the mascot's cap; the film carries its own frame. */
  .hero__bar { display: none; }
  /* The beats are absolutely positioned, so the stage's alignment and
     padding do not move them: pin each one where its picture leaves room. */
  .hero__stage { padding: 0; }
  .hero__beat { left: 5vw; right: 5vw; max-width: none; text-align: center; }
  .hero__beat[data-beat="0"], .hero__beat[data-beat="1"] { top: 78vh; }
  .hero__beat[data-beat="2"], .hero__beat[data-beat="3"] { top: 60vh; }
  .hero__kicker { margin-bottom: 10px; }
  .hero__line { font-size: clamp(26px, 7.4vw, 36px); }
  .hero__sub { margin-top: 12px; font-size: 14.5px; }
  .hero__lockup { margin-bottom: 16px; }
  .hero__lockup-name { font-size: clamp(44px, 13vw, 60px); }
  .hero__actions { margin-top: 16px; }
  /* The cue tucks under the copy. */
  .hero__cue { bottom: 8px; gap: 6px; }
  .hero__cue span { height: 24px; }
}
/* A short phone (an iPhone SE is 667px tall) has 41% of its height under
   the band, and the lockup with its two buttons needs every pixel of it:
   the course lines start a little higher and the lockup is set a size
   smaller, and the mascot lines sit a little higher so the scroll cue under
   them has its own room. Checked at 375x667: the buttons end 10px above
   the edge. */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 720px) {
  .hero__beat[data-beat="0"], .hero__beat[data-beat="1"] { top: 75vh; }
  .hero__beat[data-beat="2"], .hero__beat[data-beat="3"] { top: 58vh; }
  .hero__lockup { margin-bottom: 10px; }
  .hero__lockup-name { font-size: clamp(38px, 10.8vw, 48px); }
  .hero__beat[data-beat="3"] .hero__line { font-size: 26px !important; }
  .hero__actions { margin-top: 10px; }
}

/* ==========================================================================
   TABLETS in portrait, and any portrait window over 700px — the landscape
   film letterboxed
   ========================================================================== */

/* A 16:9 frame covered into a 3:4 iPad loses 29% of its width at each side,
   and the mascot clip keeps the pizza and the pasta in exactly those
   margins by the time the second line is up. So the film sits at its own
   aspect across the full width — a 42%-tall band on an iPad — with the
   hero's dark ground above and below and its two edges feathered into it,
   and every beat stands centred beneath the band. */
@media (min-width: 701px) and (orientation: portrait) {
  .hero__film, .hero__poster { top: 11%; bottom: auto; height: 56.25vw; object-position: 50% 50%; }
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        var(--green-900) 0, var(--green-900) calc(11% - 1.2vh),
        transparent calc(11% + 1.6vh), transparent calc(11% + 56.25vw - 1.6vh),
        var(--green-900) calc(11% + 56.25vw + 1.2vh), var(--green-900) 100%);
  }
  .hero__bar { display: none; }
  .hero__ring { top: calc(11% + 28.125vw); }
  .hero__stage { padding: 0; }
  .hero__beat { top: calc(11% + 56.25vw + 4vh); left: 6vw; right: 6vw; max-width: none; text-align: center; }
  .hero__line { font-size: clamp(34px, 5.6vw, 58px); }
  .hero__sub { max-width: 52ch; }
}

/* ==========================================================================
   LANDSCAPE screens squarer than 3:2 (an iPad on its side, a 4:3 or 5:4
   monitor) — the landscape film letterboxed
   ========================================================================== */

/* Covering the 16:9 frame into 4:3 takes 12.5% off each side, which is half
   the pizza by the end of the mascot clip. Here the film keeps its aspect
   across the full width, centred, with the hero's ground above and below;
   the cinema bars fall inside that ground and are simply not seen. The
   copy beside the mascot still fits: the column ends before the centre
   third of the frame. */
@media (orientation: landscape) and (min-width: 701px) and (max-aspect-ratio: 3/2) {
  .hero__film, .hero__poster { top: 50%; bottom: auto; height: 56.25vw; transform: translateY(-50%); object-position: 50% 50%; }
  .hero__scrim {
    background:
      radial-gradient(88% 58% at 50% 50%, rgba(8, 22, 14, 0.3) 0%, transparent 72%),
      linear-gradient(to bottom,
        var(--green-900) 0, var(--green-900) calc(50% - 28.125vw - 1vh),
        transparent calc(50% - 28.125vw + 1.4vh), transparent calc(50% + 28.125vw - 1.4vh),
        var(--green-900) calc(50% + 28.125vw + 1vh), var(--green-900) 100%);
  }
}

/* Backdrop blur, blend modes and blurred, shadowed, drifting floaters are
   what made phones stutter: each is a full-screen or per-frame raster
   pass. On any touch layout they go, and the surfaces they sat on get a
   slightly more opaque ground instead so nothing loses legibility. */
@media (pointer: coarse), (max-width: 1000px) {
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav.is-stuck { background: rgba(8, 22, 14, 0.96); }
  .nav__burger { background: rgba(8, 22, 14, 0.78); }
  .hero__grain { display: none; }
  .hero__flash { mix-blend-mode: normal; opacity: 0 !important; }
  .hero__ring { display: none; }
  .hero__line { text-shadow: 0 2px 6px rgba(8, 22, 14, 0.7), 0 6px 24px rgba(8, 22, 14, 0.6); }
  .pz { filter: none; }
  .pz img { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)); }
  .glow { display: none; }
  .menu-panel__card { background: linear-gradient(160deg, rgba(26, 70, 43, 0.85), rgba(8, 22, 14, 0.98) 60%); }
  .menu-panel__close { background: rgba(8, 22, 14, 0.85); }
  .tile__go, .occ__go { background: rgba(8, 22, 14, 0.7); }
}
/* Below 560px the floaters go entirely: at that size they were behind the
   text anyway, and six drifting layers is six too many on a small GPU. */
@media (max-width: 560px) { .pizzas { display: none; } }

/* --- Loyalty Card: crest, the words, a name. Nothing else. -------------- */
.loyalty__crest { width: 54px; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(8, 22, 14, 0.25)); }
.loyalty__top { align-items: center; }
.loyalty__name { font-family: var(--sans); font-weight: 600; font-size: clamp(14px, 1.5vw, 17px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(8, 22, 14, 0.82); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.loyalty__soon { display: none; }
.loyalty__note { display: none; }
.loyalty-soon { margin: 16px 0 0; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-400); font-weight: 600; display: flex; align-items: center; gap: 12px; }
.loyalty-soon::after { content: ''; flex: 0 0 56px; height: 1px; background: rgba(201, 162, 75, 0.5); }