/* ============================================================
   MONA JOHN — Custom Restaurant Website
   Design System & Global Styles
   ============================================================ */

/* ============================================================
   Self-hosted fonts (GDPR-friendly — no third-party requests)
   Generated from Google Fonts woff2 · font-display: swap
   ============================================================ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../assets/fonts/poppins-200-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../assets/fonts/poppins-200-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/poppins-300-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/poppins-300-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Colour palette — refined "maison" palette: warm ivory paper, warm noir
     ink, the brand greens, plus a champagne/brass accent for fine detailing. */
  --bg: #f7f4ed;          /* warm ivory paper */
  --bg-warm: #efeae0;     /* deeper sand for alt surfaces */
  --paper: #fcfaf5;       /* near-white card surface */
  --ink: #1c1a16;         /* warm noir (softer & more luxe than pure black) */
  --ink-soft: #4a463f;    /* warm grey-taupe body text */
  --sage: #6e817d;
  --sage-dark: #5d6f6b;
  --forest: #34504a;      /* slightly deepened for richness */
  --forest-dark: #28403a;
  --mocha: #7c5a4c;
  --champagne: #b3925f;   /* brass/champagne accent — hairlines, small caps */
  --champagne-soft: #c8ad84;
  --noir: #16140f;        /* deep espresso for dramatic dark sections */
  --whatsapp: #25d366;
  --whatsapp-dark: #1ebe5a;
  --champagne-ink: #7f6136; /* brass for small text: 5.2:1 on ivory (#b3925f stays for hairlines and glyphs) */
  --dur-reveal: 0.8s;       /* one reveal duration for the whole site */
  --dur-ui: 0.35s;
  --line: #e2dccd;        /* warm hairline */
  --white: #ffffff;

  /* Shared photo grade: warm, slightly muted, and softly contrasted so the
     mixed source photos sit closer to the team portraits' colour spectrum. */
  --photo-grade: saturate(0.88) contrast(0.96) brightness(0.98) sepia(0.06)
    hue-rotate(-3deg);

  /* Typography — Poppins Light (300) throughout. The original mona-john.de
     used ExtraLight; per request we use the slightly heavier Light weight
     (no serif). */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Poppins", "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale — serif lets us go larger & more dramatic */
  --fs-hero: clamp(3.25rem, 9vw, 7rem);
  --fs-h2: clamp(2.75rem, 7.5vw, 6rem);
  --fs-kicker: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.6rem, 3vw, 2.1rem);
  --fs-menu: clamp(1.35rem, 2.6vw, 1.85rem);
  --fs-body: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-small: 0.95rem;

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius-pill: 999px;
  --radius-card: 14px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Gentle symmetric ease for fades — slow in, slow out (no abrupt start). */
  --ease-fade: cubic-bezier(0.45, 0, 0.3, 1);
  --dur: 0.6s;

  /* Header */
  --header-h: 84px;
}

/* ---------- 2. Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* <picture> is a transparent wrapper for WebP-with-JPEG fallback — it must not
   become a grid/flex item, so the inner <img> keeps participating in layout. */
picture {
  display: contents;
}
/* The <source> candidates must NOT generate layout boxes. Because the wrapping
   <picture> is display:contents, any rendered child (including <source>) gets
   hoisted into the parent grid/flex and would steal cells — which collapsed the
   two-photo quinconce collages into a single column. display:none keeps them
   out of layout while the browser still uses their srcset for WebP selection. */
picture > source {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: 0.005em;
  font-feature-settings: "liga" 1, "dlig" 1;
}

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
  /* A light halo keeps the ring visible on photos and coloured surfaces too (WCAG 2.4.7 / 2.4.11). */
  box-shadow: 0 0 0 5px rgba(247, 244, 237, 0.9);
}
.band :focus-visible,
.update :focus-visible {
  outline-color: #fff;
  box-shadow: none;
}
main:focus {
  outline: none;
}

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Alternating warm surface for rhythm between one-pager sections */
.section--alt {
  background: var(--bg-warm);
}

/* One-pager anchored sections: offset for the sticky header */
[id="top"],
[id="menu"],
[id="experience"],
[id="catering"],
[id="team"],
[id="reservieren"] {
  scroll-margin-top: 76px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--champagne-ink);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lead {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 56ch;
}
.lead--serif {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: 0.005em;
}

/* Hero "Mehr Lesen" expandable bio */
/* Collapsed only with JavaScript (class "js" from js/flag.js); without it the whole story is shown. */
.js .hero__more {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.6s var(--ease), opacity 0.5s var(--ease);
}
.js .hero__more.is-open {
  max-height: 80rem;
  opacity: 1;
}
html:not(.js) .hero__more-toggle,
html:not(.js) .menu-legend {
  display: none;
}
.menu-noscript {
  margin-top: 2rem;
  text-align: center;
  color: var(--ink-soft);
}
.hero__more p {
  margin-top: 1.1rem;
}
.hero__more-toggle {
  align-self: flex-start;
  margin-top: 1.5rem;
}
.hero__more-toggle .arrow {
  transition: transform 0.4s var(--ease);
}
.hero__more-toggle[aria-expanded="true"] .arrow {
  transform: rotate(90deg);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background: var(--forest);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.05rem 2.2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease);
  will-change: transform;
}

.btn--primary {
  background: var(--forest);
  color: var(--white);
  box-shadow: 0 10px 30px -16px rgba(26, 24, 18, 0.55);
}
.btn--primary:hover {
  background: var(--forest-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -16px rgba(26, 24, 18, 0.6);
}

.btn--ghost {
  border: 1px solid var(--champagne);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--light {
  background: var(--white);
  color: var(--forest);
}
.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.35);
}

.btn--wa {
  /* Forest instead of WhatsApp green: white on #25d366 was 2:1; the glyph keeps it recognisable. */
  background: var(--forest);
  color: var(--white);
}
.btn--wa:hover {
  background: var(--forest-dark);
  transform: translateY(-2px);
}

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0.34);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.link-underline:hover::after {
  transform: scaleX(1);
}
.link-underline .arrow {
  transition: transform 0.4s var(--ease);
  color: var(--champagne);
}
.link-underline:hover .arrow {
  transform: translateX(4px);
}

/* ---------- 5. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
    height 0.4s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.site-header.is-scrolled {
  background: rgba(250, 250, 248, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: none; /* no line under the header (owner, Oct 2026) */
  height: 70px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  letter-spacing: 0.34em;
  white-space: nowrap;
  color: var(--ink);
}
.wordmark span {
  letter-spacing: 0.5em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  padding: 0;
}
.nav__links a {
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 0;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current]::after {
  transform: scaleX(1);
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 120;
}
.nav-toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) {
  top: 16px;
}
.nav-toggle span:nth-child(2) {
  top: 22px;
}
.nav-toggle span:nth-child(3) {
  top: 28px;
}
body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- 6. Hero ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.hero__media {
  position: relative;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  max-width: 720px;
}
.hero__title {
  font-size: var(--fs-hero);
  margin-bottom: 1.75rem;
}
.hero__title .salut {
  display: block;
}
.hero__logo {
  margin-top: 2.5rem;
  max-width: 230px;
  opacity: 0.92;
}

/* ---------- 7. Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.split--reverse .split__media {
  order: 2;
}
.split__media {
  position: relative;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.split__media--wide img {
  aspect-ratio: 5 / 4;
}
.split__body h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1.5rem;
}
/* Kicker accent — letter-spaced Poppins ExtraLight, as on the original site. */
.script {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-kicker);
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--mocha);
  display: block;
}
.split__body .script {
  margin-bottom: 0.4rem;
}
/* „Coup de Cœur“ in the „Ein Coup de Cœur“ heading: the heading's own font (the standard Poppins; the
   former script lettering was removed at the owner's request, Oct 2026). */
.logo-script {
  /* The Coup de Cœur lettering of the logo, drawn in the heading colour (mask) and sized with the heading. */
  display: inline-block;
  width: min(100%, 4.7em);
  aspect-ratio: 433 / 158;
  margin-top: 0.08em;
  background-color: currentColor;
  -webkit-mask: url("../assets/images/logo-coupdecoeur.svg") left center / contain no-repeat;
  mask: url("../assets/images/logo-coupdecoeur.svg") left center / contain no-repeat;
}
.split__body p + p {
  margin-top: 1.1rem;
}
.split__body .btn,
.split__body .link-underline {
  margin-top: 2rem;
}

/* color variants */
.h2--forest {
  color: var(--forest);
}
.h2--mocha {
  color: var(--mocha);
}

/* ---------- 8. Sage band (location) ---------- */
.band {
  background: var(--sage-dark);
  color: var(--white);
  text-align: center;
}
.band h2 {
  font-size: var(--fs-h2);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.band__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 760px;
  margin-inline: auto;
}
.band__col h3 {
  font-size: var(--fs-h3);
  font-weight: 300;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.band__col p {
  line-height: 1.9;
  opacity: 0.95;
}
.band__divider {
  width: 1px;
}
.band .btn {
  margin-top: 3rem;
}

/* ---------- 9. Gallery (auto-scrolling marquee, always in colour) ---------- */
.gallery {
  position: relative;
  overflow: hidden;
  padding: 0 0 1.5rem;
}
.gallery__track {
  display: flex;
  width: max-content;
}
.js .gallery__track {
  animation: gallery-scroll 55s linear infinite;
  will-change: transform;
}
/* WCAG 2.2.2: the strip stops on hover, on keyboard focus, with the pause button, and while it is off-screen. */
.gallery:hover .gallery__track,
.gallery:focus-within .gallery__track,
.gallery.is-paused .gallery__track,
.gallery.is-offscreen .gallery__track {
  animation-play-state: paused;
}
.gallery__toggle {
  position: absolute;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: 2.5rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 244, 237, 0.92);
  color: var(--forest);
  cursor: pointer;
  box-shadow: 0 8px 24px -12px rgba(26, 24, 18, 0.5);
  transition: background-color var(--dur-ui) var(--ease);
}
.gallery__toggle:hover {
  background: var(--white);
}
.gallery__toggle::before,
.gallery__toggle::after {
  content: "";
  grid-area: 1 / 1;
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: currentColor;
}
.gallery__toggle::before {
  transform: translateX(-4px);
}
.gallery__toggle::after {
  transform: translateX(4px);
}
.gallery__toggle[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
  transform: translateX(2px);
}
.gallery__toggle[aria-pressed="true"]::after {
  display: none;
}
.gallery figure {
  flex: 0 0 clamp(240px, 32vw, 420px);
  margin-right: 1rem;
  overflow: hidden;
}
.gallery img {
  width: 100%;
  height: clamp(300px, 40vw, 520px);
  object-fit: cover;
}
@keyframes gallery-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 10. Menu ---------- */
.menu-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.menu-head h2 {
  font-size: var(--fs-h2);
}
.menu-head .sub {
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne-ink);
}
.menu-category {
  max-width: 880px;
  margin-inline: auto;
}
.menu-category + .menu-category {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.menu-category__title {
  font-size: var(--fs-h3);
  font-weight: 300;
  text-align: center;
  padding-bottom: 1.1rem;
  margin-bottom: 1.75rem;
  position: relative;
}
.menu-category__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 1px;
  background: var(--champagne);
  transform: translateX(-50%);
}
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-item__name {
  font-family: var(--font-display);
  font-size: var(--fs-menu);
  font-weight: 300;
  letter-spacing: 0.01em;
}
.menu-item__desc {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menu-item__price {
  text-align: right;
  white-space: nowrap;
}
.menu-item__price .label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne-ink);
  margin-bottom: 0.25rem;
}
.menu-item__price .val {
  font-family: var(--font-display);
  font-size: var(--fs-menu);
  font-weight: 300;
}

/* ---------- 11. Update band (dark) ---------- */
.update {
  position: relative;
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.update__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.update__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.update::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(22, 20, 15, 0.55), rgba(22, 20, 15, 0.78));
}
.update h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1.5rem;
}
.update p {
  max-width: 48ch;
  margin-inline: auto;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.7;
}
.update .btn {
  margin-top: 2.5rem;
}

/* ---------- 12. Reservation ---------- */
.reserve {
  background: var(--bg-warm);
}
.reserve__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne-ink);
  margin-bottom: 1rem;
}
.breadcrumb span {
  margin: 0 0.4rem;
}
.reserve__head h2 {
  font-size: var(--fs-h2);
  color: var(--forest);
}
/* ---------- 12b. Catering services (one-pager) ---------- */
.cat-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.cat-service {
  padding-top: 1.5rem;
  border-top: 1px solid var(--champagne);
}
.cat-service h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 300;
  margin-bottom: 0.6rem;
}
.cat-service p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}

/* Catering image+text blocks with staggered (quinconce) photo collages */
.cat-blocks {
  display: flex;
  flex-direction: column;
  gap: 0; /* blocks overlap instead of sitting apart — see .cat-block + .cat-block */
  margin-top: clamp(3rem, 6vw, 5rem);
}
.cat-block {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr; /* collage larger, text narrower (short-text blocks) */
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  position: relative;
}
.cat-block--imgright {
  grid-template-columns: 0.5fr 1.5fr; /* Buffet: longer copy needs a wider text column */
}
/* Pull each block up into the previous one so the staggered photos of adjacent
   services (e.g. Buffet over Fine-Dining) overlap near the centre — weaving the
   three blocks into one continuous composition rather than separate rows. The
   text columns stay vertically centred and shorter than the photos, so the
   overlap band is photo-on-photo and (via z-index) never sits under the copy. */
.cat-block + .cat-block {
  margin-top: clamp(-5.5rem, -7vw, -3rem);
}
.cat-block .cat-text {
  position: relative;
  z-index: 3; /* copy always paints above any overlapping photo edge */
}
.cat-block .cat-collage {
  position: relative;
  z-index: 1;
}
.cat-text h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 300;
  margin-bottom: 1rem;
}
.cat-text p {
  color: var(--ink-soft);
  line-height: 1.8;
}
/* two photos offset vertically (quinconce) AND overlapping horizontally */
.cat-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; /* no gap → the photos can overlap (see negative margin below) */
  align-items: start;
}
.cat-collage > picture {
  position: relative; /* allow the images to stack/overlap */
}
.cat-collage img {
  width: 100%;
  height: auto; /* let aspect-ratio drive height (overrides the HTML height attr) */
  aspect-ratio: 1 / 1; /* larger, taller photos + deeper cross-block overlap + clear text bands */
  object-fit: cover;
  display: block;
}
/* The 1st photo sits underneath; the 2nd is pulled left over it, dropped
   lower, and lifted on top with a soft shadow along the overlapping edge. */
.cat-collage__a {
  position: relative;
  z-index: 1;
}
.cat-collage__b {
  position: relative;
  z-index: 2;
  margin-top: clamp(2rem, 6vw, 5rem); /* 2nd photo dropped lower */
  margin-left: clamp(-3.5rem, -7vw, -1.75rem); /* …and overlapping the 1st */
  box-shadow: -16px 0 36px rgba(20, 18, 15, 0.18);
}
.cat-collage--down-first .cat-collage__a {
  margin-top: clamp(2rem, 6vw, 5rem); /* 1st photo dropped lower */
}
.cat-collage--down-first .cat-collage__b {
  margin-top: 0;
}
/* Flying Buffet (last block): drop only its top-left photo so it stops
   crowding the Buffet paragraph that overlaps just above on the left — adds
   vertical breathing room there without moving the photo that overlaps the
   Buffet collage (so the cross-block chevauchement stays intact). */
.cat-blocks > .cat-block:last-child .cat-collage__a {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
/* three photos in a staggered quinconce (zigzag: top-left, mid-right,
   bottom-left) so they cascade diagonally instead of forming a grid/row */
.cat-collage--triple {
  align-items: stretch;
}
.cat-collage--triple .cat-collage__a {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}
.cat-collage--triple .cat-collage__c {
  grid-column: 1;
  grid-row: 2;
  margin-top: clamp(0.8rem, 1.6vw, 1.4rem);
}
.cat-collage--triple .cat-collage__b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin-top: 0;
}
.cat-wide {
  margin-top: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  /* Full-bleed: break out of the container to span the whole screen width. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* The full-bleed band ends the catering section — drop the leftover bottom
   padding so there's no empty coloured strip below the image. */
#catering {
  padding-bottom: 0;
}
.cat-wide img {
  width: 100%;
  height: clamp(180px, 22vw, 340px);
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Full-width feature band inside the .cat-blocks flex column (canapés).
   margin-inline:calc(50% - 50vw) is flex-safe full-bleed. */
.cat-feature {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}
.cat-feature img {
  width: 100%;
  height: clamp(200px, 26vw, 420px);
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  .cat-block,
  .cat-block--imgright {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  /* stacked single-column: restore normal spacing (no cross-block overlap) */
  .cat-block + .cat-block {
    margin-top: clamp(2.5rem, 8vw, 4rem);
  }
  .cat-blocks > .cat-block:last-child .cat-collage__a {
    margin-top: 0; /* the desktop "breathing room" drop isn't needed when stacked */
  }
  .cat-collage__b,
  .cat-collage--down-first .cat-collage__a {
    margin-top: clamp(1.25rem, 6vw, 2.5rem); /* gentler stagger on mobile */
  }
}
@media (max-width: 768px) {
  .cat-services {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cat-service {
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
  }
  .cat-service:first-child {
    border-top: 1px solid var(--champagne);
  }
}

/* ---------- 13. Team ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.page-hero h1 {
  font-size: var(--fs-h2);
}
.page-hero p {
  margin: 1.25rem auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.team-card {
  display: flex;
  flex-direction: column;
}
.team-card__media {
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.team-card__media img {
  width: 100%;
  height: auto; /* let aspect-ratio drive height (overrides the HTML height attr) */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.team-card:hover .team-card__media img {
  transform: scale(1.05);
}
.team-card h3 {
  font-size: 2rem;
  font-weight: 500;
}
.team-card .role {
  color: var(--champagne-ink);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0.5rem 0 0.9rem;
}
.team-card p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}
.team-card .link-underline {
  margin-top: auto;
}

/* Team detail */
.member {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.member__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.member__body h1 {
  font-size: var(--fs-h2);
}
.member__body .role {
  color: var(--champagne-ink);
  font-family: var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin: 0.9rem 0 2rem;
}
.member__body p + p {
  margin-top: 1.1rem;
}
.member__body .back {
  margin-top: 2.5rem;
}

/* ---------- 14. Catering ---------- */
.catering-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.catering-intro h1 {
  font-size: var(--fs-h2);
  margin-bottom: 1.5rem;
}
.catering-intro img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- 15. Experience ---------- */
.exp-hero {
  position: relative;
  min-height: 70svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem;
}
.exp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.exp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.exp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.4), rgba(5, 5, 5, 0.65));
}
.exp-hero h1 {
  font-size: var(--fs-hero);
}
.exp-hero .price {
  margin-top: 1rem;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: all 0.35s var(--ease);
}
.footer-social a:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
  transform: translateY(-3px);
}
.footer-center {
  text-align: center;
}
.footer-center .wordmark {
  display: inline-block;
  margin-bottom: 1.25rem;
}
.footer-center .btn--wa {
  margin-bottom: 1.5rem;
}
.footer-contact {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.footer-contact a:hover {
  color: var(--forest);
}
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  text-align: right;
}
.footer-links a,
.footer-links .cc-open {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.3s var(--ease);
}
.footer-links a:hover {
  color: var(--forest);
}
.footer-copy {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.9rem;
  color: var(--sage);
}
.footer-copy .heart {
  color: var(--mocha);
}

/* ---------- 16b. Legal / prose ---------- */
.prose {
  max-width: 760px;
  margin-inline: auto;
}
.prose h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.prose h2:first-of-type {
  margin-top: 0;
}
.prose p,
.prose ul {
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.prose ul {
  padding-left: 1.25rem;
}
.prose a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose .placeholder {
  background: var(--bg-warm);
  border-left: 3px solid var(--mocha);
  padding: 1rem 1.25rem;
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- 17. WhatsApp FAB ---------- */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -12px rgba(26, 24, 18, 0.45);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease-fade), visibility 0s linear 0s;
}
/* Hidden while the reservation section is on screen (js/main.js): the booking app is the way to reserve there. */
.wa-fab.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-fade), visibility 0s linear 0.35s;
}
.wa-fab:hover {
  transform: scale(1.08) translateY(-2px);
}
.wa-fab svg {
  width: 30px;
  height: 30px;
}

/* ---------- 19. Scroll reveal ----------
   Only with JavaScript (class "js" from js/flag.js): without it nothing is hidden. Each element fades in once, 0.8 s. */
.js .reveal {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-fade);
}
.js .reveal.is-in {
  opacity: 1;
}
.reveal[data-delay="1"] {
  transition-delay: 0.08s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.16s;
}
.reveal[data-delay="3"] {
  transition-delay: 0.24s;
}

/* ---------- 20. Mobile nav overlay ---------- */
.nav-backdrop {
  display: none;
}

/* ============================================================
   PREMIUM UX — "Atelier" editorial layer
   ============================================================ */

/* ---------- 21. Film grain texture ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ---------- 22. Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--mocha), var(--forest));
  z-index: 101;
  transition: width 0.1s linear;
}

/* ---------- 24. Mask / line reveals ---------- */
.js .reveal-mask {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-fade);
}
.js .reveal-mask.is-in {
  opacity: 1;
}
/* A heading inside a fading block fades with the block, not a second time. */
.js .reveal .reveal-mask {
  opacity: 1;
  transition: none;
}

.reveal-line {
  display: inline-block;
  vertical-align: top;
}
.reveal-line > span {
  display: inline-block;
}
.js .reveal-line > span {
  opacity: 0;
  transition: opacity 0.7s var(--ease-fade);
}
.js .reveal-line.is-in > span {
  opacity: 1;
}

/* ---------- 25. Hero enhancements ---------- */
.hero {
  position: relative;
}
.hero__media img {
  transform: scale(1.06);
  animation: kenburns 10s var(--ease) forwards;
}
@keyframes kenburns {
  to {
    transform: scale(1);
  }
}
.hero__sidelabel {
  position: absolute;
  top: 50%;
  right: calc(50% - 1.4rem);
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sage);
  z-index: 3;
  pointer-events: none;
}
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage);
  z-index: 3;
}
.hero__cue::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--sage), transparent);
  animation: cueLine 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cueLine {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  40% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1) translateY(56px);
    opacity: 0;
  }
}

/* ---------- 26. Marquee ribbon ---------- */
.marquee {
  overflow: hidden;
  background: var(--forest);
  color: var(--white);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  user-select: none;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  font-size: clamp(1.6rem, 4vw, 3.25rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
}
.marquee__star {
  font-size: 1rem;
  color: var(--mocha);
  filter: brightness(1.6);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 27. Editorial section index ---------- */
.section-index {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.section-index b {
  font-weight: 500;
  color: var(--champagne);
}
.section-index::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--champagne);
  opacity: 0.8;
}
.band .section-index {
  color: rgba(255, 255, 255, 0.78);
  justify-content: center;
}
.band .section-index b {
  color: var(--champagne-soft);
}
.band .section-index::before {
  background: var(--champagne-soft);
}

/* ---------- 28. Button sheen + magnetic ---------- */
.btn {
  position: relative;
  overflow: hidden;
}
.btn--primary::after,
.btn--light::after,
.btn--wa::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.8s var(--ease);
}
.btn--primary:hover::after,
.btn--light:hover::after,
.btn--wa:hover::after {
  left: 150%;
}
.btn__inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

/* ---------- 29. Refined menu interaction ---------- */
.menu-item {
  padding-inline: clamp(0.5rem, 2vw, 1.25rem);
  border-radius: 10px;
  transition: background-color 0.4s var(--ease);
}
.menu-item:hover {
  background: var(--bg-warm);
}
.menu-item:hover .menu-item__price .val {
  color: var(--mocha);
}
.menu-item__price .val {
  transition: color 0.4s var(--ease);
}

/* ---------- 30. Refined gallery (full colour) ---------- */
.gallery figure {
  position: relative;
}

/* Unified photo grade. Team portraits are intentionally excluded: they are the
   reference spectrum. */
.hero__media img,
.split__media img,
.gallery img,
.cat-collage img,
.cat-feature img,
.cat-wide img,
.update__bg img,
.exp-hero__bg img,
.catering-intro img {
  filter: var(--photo-grade);
}

/* ---------- 31. Parallax media ---------- */
.is-parallax {
  overflow: hidden;
}
.is-parallax img {
  scale: 1.18;
  will-change: transform;
}

/* ---------- 32. Outline wordmark accent (footer) ---------- */
.footer-watermark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 13vw, 10rem);
  letter-spacing: 0.06em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  line-height: 1;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Desktop: pull the nav to ~14px from the viewport's right edge so the menu
   links clear Mona's photo (the hero's left half), keeping the wordmark put. */
@media (min-width: 1280px) {
  .nav {
    margin-right: calc(
      -1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter) - 14px)
    );
  }
  /* Compact the header reserve button so it sits proportionally to the nav
     links (the full-size pill is only used for in-content CTAs). */
  .site-header .nav .btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.68rem;
  }
}

/* Below 1280px the 4-item nav + button can't fit beside the hero photo,
   so collapse to the full-screen hamburger menu (no overlap with the photo). */
@media (max-width: 1279px) {
  .nav__links,
  .nav .btn {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    z-index: 110;
  }
  body.nav-open .nav {
    transform: translateX(0);
  }
  body.nav-open .nav__links,
  body.nav-open .nav .btn {
    display: flex;
  }
  .nav__links {
    flex-direction: column;
    text-align: center;
    gap: 1.75rem;
  }
  .nav__links a {
    font-size: 1.6rem;
    font-weight: 300;
  }
  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-links {
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 860px) {
  :root {
    --header-h: 70px;
  }

  .hero {
    grid-template-columns: 1fr;
  }
  .hero__media {
    min-height: 56svh;
    order: -1;
  }
  .hero__content {
    padding-block: 3rem;
  }

  .split,
  .catering-intro,
  .member {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: -1;
  }
  .split__media img,
  .catering-intro img {
    aspect-ratio: 4 / 3;
  }
  .member__media {
    max-width: 420px;
  }

  
  .band__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Premium layer: simplify on smaller screens */
  .hero__sidelabel {
    display: none;
  }
  .hero__cue {
    display: none;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 0.8rem 1.5rem;
  }
    .menu-item {
    grid-template-columns: 1fr;
  }
  .menu-item__price {
    text-align: left;
  }
  .menu-item__price .label {
    display: inline;
    margin-right: 0.5rem;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* an endless animation must not restart every frame */
    transition-duration: 0.001ms !important;
  }
  .js .reveal,
  .js .reveal-mask,
  .js .reveal-line > span {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .js .gallery__track {
    animation: none;
  }
  .gallery {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .gallery figure {
    scroll-snap-align: start;
  }
  .gallery figure[aria-hidden="true"] {
    display: none;
  }
  .hero__media img {
    transform: none;
    animation: none;
  }
  .marquee__track {
    animation: none;
  }
  .hero__cue::after {
    animation: none;
  }
  .is-parallax img {
    scale: 1;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header,
  .wa-fab,
  .cookie,
  .nav-toggle,
  .grain,
  .scroll-progress {
    display: none !important;
  }
}

/* ============ Online booking (book.mona-john.de) ============
   js/cdc-booking.js frames the booking app into .reserve-embed. Until the app has loaded the container
   stays collapsed; if the app does not answer in time, js/cdc-booking.js shows .reserve-status instead
   (retry, WhatsApp, phone; 15 Oct 2026 - there is no other booking form any more). */
.reserve-embed:not(.is-ready) {
  height: 0;
  overflow: hidden;
}
.reserve-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}
.reserve-status {
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
}
.reserve-status[hidden] {
  display: none;
}
.reserve-status__text {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  color: var(--ink);
}
.reserve-status__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1.25rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.reserve-status__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-underline-offset: 0.35em;
}

/* ============ UI/UX pass (Oct 2026): first view, visit band, menu, phone booking bar ============ */
h2 {
  line-height: 1.04;
}
h3 {
  line-height: 1.15;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.25rem;
}
.reserve-embed {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.reserve__meta {
  max-width: 46rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.band__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
}
.band__col a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 0.2em;
}
.band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-top: 3rem;
}
.band__actions .btn {
  margin-top: 0;
}
.band .link-underline {
  color: var(--white);
}
.band .link-underline::after {
  background: rgba(255, 255, 255, 0.7);
}
.menu-item__price .val {
  font-variant-numeric: tabular-nums lining-nums;
}
.menu-legend {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.mobile-bar {
  display: none;
}
@media (max-width: 860px) {
  .band__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mobile-bar ~ .wa-fab {
    display: none;
  }
  body:has(.mobile-bar) .site-footer {
    padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)); /* the tab bar (62 px) floats 10 px above the edge */
  }
}

/* ============ Content from the admin console (Website: Inhalte) ============ */
.menu-intro,
.menu-valid {
  max-width: 46rem;
  margin: 0.75rem auto 0;
  color: var(--ink-soft);
}
.menu-valid {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.menu-category__sub {
  margin: -0.5rem 0 1.25rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.menu-category.is-live {
  animation: menu-in 0.6s var(--ease-fade) both;
}
@keyframes menu-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.menu-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0 0.15rem;
}
.menu-tag {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.menu-tag.is-accent {
  border-color: var(--champagne);
  color: var(--champagne-ink);
}
.menu-tag.is-muted {
  border-style: dashed;
}
.menu-item.is-soldout .menu-item__name,
.menu-item.is-soldout .menu-item__desc,
.menu-item.is-soldout .menu-item__price {
  opacity: 0.55;
}
.menu-item__more {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.menu-item__allergens {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.update__item + .update__item {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.update .update__date {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}
.update__title {
  margin: 0.5rem 0 0.75rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.update__action {
  margin-top: 1.5rem;
}

/* Phones: the two-photo collages stack diagonally instead of side by side, so each photo is larger and in proportion
   with the full-width pictures elsewhere on the page (owner, Oct 2026). The photos still overlap; the collage whose
   first photo sits lower on wide screens is mirrored. The three-photo catering collage keeps its own layout. */
@media (max-width: 640px) {
  .cat-collage:not(.cat-collage--triple) {
    grid-template-columns: minmax(0, 1fr);
  }
  .cat-collage:not(.cat-collage--triple) > picture > img {
    margin: 0;
  }
  .cat-collage:not(.cat-collage--triple) .cat-collage__a {
    width: 80%;
  }
  .cat-collage:not(.cat-collage--triple) .cat-collage__b {
    width: 68%;
    margin: -10% 0 0 auto;
    box-shadow: -12px -10px 30px rgba(20, 18, 15, 0.18);
  }
  .cat-collage--down-first:not(.cat-collage--triple) .cat-collage__a {
    margin-left: auto;
  }
  .cat-collage--down-first:not(.cat-collage--triple) .cat-collage__b {
    margin: -10% auto 0 0;
    box-shadow: 12px -10px 30px rgba(20, 18, 15, 0.18);
  }
}

/* ============ Photos keep their proportions (Oct 2026) ============
   A photo's height must never come from its HTML height attribute: with only the width set, the Table d'Exception and
   Catering photos were stretched into tall boxes (27 % and 23 % of the photo visible on a phone). */
.split__media img {
  height: auto;
}
@media (max-width: 860px) {
  /* One column (phones, small tablets): a photo next to text is shown whole, in its own proportions, without the
     parallax zoom. */
  .split__media > img,
  .split__media > picture > img,
  .catering-intro img {
    aspect-ratio: auto;
    height: auto;
  }
  .is-parallax img {
    scale: 1;
    transform: none !important;
  }
  /* The wide catering band uses a portrait photo: on phones show most of it instead of a thin strip. */
  .cat-wide img {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 640px) {
  /* Phones: every photo of the collages is shown whole too. */
  .cat-collage img {
    aspect-ratio: auto;
    height: auto;
  }
}

/* Phones: the three-photo catering collage cascades like the two-photo ones (left, right, left): larger photos with a
   slight overlap instead of three small photos side by side (owner, Oct 2026). */
@media (max-width: 640px) {
  .cat-collage--triple {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .cat-collage--triple .cat-collage__a,
  .cat-collage--triple .cat-collage__b,
  .cat-collage--triple .cat-collage__c {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    position: relative;
  }
  .cat-collage--triple .cat-collage__a {
    width: 78%;
    margin: 0;
  }
  .cat-collage--triple .cat-collage__b {
    width: 66%;
    margin: -10% 0 0 auto;
    z-index: 2;
    box-shadow: -12px -10px 30px rgba(20, 18, 15, 0.18);
  }
  .cat-collage--triple .cat-collage__c {
    width: 78%;
    margin: -10% 0 0 0;
    z-index: 3;
    box-shadow: 12px -10px 30px rgba(20, 18, 15, 0.18);
  }
}

/* Phones: the "Ein Coup de Cœur" section starts with its photos right after the photos that end the section above.
   Less space between the two photo groups (40 px instead of 112 px; owner, Oct 2026). */
@media (max-width: 640px) {
  section[aria-labelledby="liebe-title"] {
    padding-bottom: 2.5rem;
  }
  section[aria-labelledby="coup-title"] {
    padding-top: 0;
  }
}

/* ============ Check fixes (Oct 2026) ============ */
/* A word longer than the line (e.g. "Datenschutzerklärung" at heading size on a phone) wraps instead of widening the page. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
/* Menu and update texts from the admin console: long words wrap, never widen the page. */
.menu-item > div {
  min-width: 0;
}
.menu-item__name,
.menu-item__desc,
.menu-item__more,
.menu-item__price .val,
.menu-tag,
.update__title,
.update__text {
  overflow-wrap: anywhere;
}
.update__action .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Tablets: the photo pairs next to text show each photo whole, as on phones. */
@media (max-width: 860px) {
  .split__media .cat-collage img {
    aspect-ratio: auto;
    height: auto;
  }
}

/* ============ Lean, mobile-first pass (Oct 2026) ============
   One calm fade per block and nothing else moving: no grain texture, scroll-progress line, parallax, hero zoom,
   word-by-word headings, staggered delays, hover zoom or auto-scrolling gallery. On phones the sections are shorter
   (the team as a swipe row) and the booking bar at the bottom is the one "Tisch reservieren" below the first screen. */
.grain,
.scroll-progress,
.hero__sidelabel,
.hero__cue,
.gallery__toggle {
  display: none !important;
}
.js .reveal {
  transition: opacity 0.6s var(--ease-fade);
}
.js .reveal[data-delay] {
  transition-delay: 0s;
}
.js .reveal-mask,
.js .reveal-line > span {
  opacity: 1;
  transition: none;
}
.hero__media img {
  transform: none;
  animation: none;
}
.is-parallax img {
  scale: 1;
  transform: none;
  will-change: auto;
}
.team-card:hover .team-card__media img,
.team-card__media img {
  transform: none;
  transition: none;
}
/* Gallery: a still set of photos. Desktop shows all five in a row; phones swipe through them. */
.js .gallery__track {
  animation: none;
  will-change: auto;
}
.gallery figure[aria-hidden="true"] {
  display: none;
}
@media (min-width: 861px) {
  .gallery {
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  .gallery__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    width: auto;
  }
  .gallery figure {
    margin: 0;
  }
  .gallery img {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 860px) {
  .gallery {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar {
    display: none;
  }
  .gallery figure {
    flex: 0 0 min(72vw, 420px); /* of the screen, not of the row (a % of a max-content row grows with it) */
    scroll-snap-align: start;
  }
  /* The booking bar at the bottom of the screen is the way to book: no repeated buttons in the sections. */
  .band__actions .js-book,
  .menu-cta .btn {
    display: none;
  }
}
@media (max-width: 640px) {
  /* Team: a row of cards to swipe through (the next card peeks in) instead of four full-screen portraits stacked. */
  .team-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar {
    display: none;
  }
  .team-card {
    scroll-snap-align: start;
  }
  /* The decorative full-width photo after the catering services. */
  .cat-wide {
    display: none;
  }
  #catering {
    padding-bottom: clamp(4rem, 10vw, 8rem);
  }
}
/* Legal pages: long web addresses wrap on small phones. */
.prose a {
  overflow-wrap: anywhere;
}

/* ============ iPhone-standard frosted glass for the bars over the page (owner, Oct 2026) ============
   Header (once scrolled) and the phone booking bar: 72 % of the page colour with Apple's standard bar material
   (saturate 180 %, blur 20 px). Without backdrop-filter support the bars stay nearly opaque, so text stays readable. */
.site-header.is-scrolled {
  background: rgba(250, 250, 248, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: rgba(250, 250, 248, 0.95);
  }
}

/* ============ Lean pass, round 2 (Oct 2026): fixes from the review + calmer phone layout ============ */
/* Photos keep their own proportions and their space is reserved before they load (--r from the photo's size in
   index.html): no jump when lazy photos arrive, so links like /#menu land on their section. */
@media (max-width: 860px) {
  .split__media > img,
  .split__media > picture > img,
  .split__media .cat-collage img {
    aspect-ratio: var(--r, auto);
  }
}
@media (max-width: 640px) {
  .cat-collage img {
    aspect-ratio: var(--r, auto);
  }
}
/* Small screens: the team as one swipe row (cards up to 320 px, the next one peeks in); the decorative wide catering
   photo is left out. Cards in the row show without a fade (most of them start off-screen). */
@media (max-width: 860px) {
  .team-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 320px);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }
  .team-card {
    scroll-snap-align: start;
  }
  .js .team-grid > .team-card.reveal {
    opacity: 1;
    transition: none;
  }
  .cat-wide {
    display: none;
  }
  #catering {
    padding-bottom: 3.5rem;
  }
}
/* Swipe rows: hidden scrollbars only on touch screens; with a mouse a thin scrollbar shows there is more. */
@media (hover: none) {
  .gallery,
  .team-grid {
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar,
  .team-grid::-webkit-scrollbar {
    display: none;
  }
}
@media (hover: hover) {
  .gallery,
  .team-grid {
    scrollbar-width: thin;
  }
}
.gallery:focus-visible,
.team-grid:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 4px;
}
/* 861-1100 px: three larger gallery photos instead of five thumbnails. */
@media (min-width: 861px) and (max-width: 1100px) {
  .gallery__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gallery figure:nth-child(n + 4) {
    display: none;
  }
}
/* Phones: less empty space between sections, compact menu rows (name and price on one line, the translation in
   normal case and a readable size). */
@media (max-width: 640px) {
  .section {
    padding-block: 3.5rem;
  }
  .section--tight {
    padding-block: 2.5rem;
  }
  .menu-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    padding-block: 1rem;
  }
  .menu-item__price {
    text-align: right;
  }
  .menu-item__desc {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    font-weight: 400;
  }
}
/* Less motion when asked: no transitions at all (bars, header, links). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* "Mehr lesen" sits in the hero's button row, next to "Tisch reservieren" (owner, Oct 2026). */
.hero__ctas .hero__more-toggle {
  margin-top: 0;
  align-self: center;
}

/* ============ Larger, responsive photo pairs + a light shadow on every photo (owner, Oct 2026) ============ */
:root {
  --photo-shadow: 0 18px 40px -24px rgba(26, 24, 18, 0.38);
}
/* The same light shadow on every content photo (not the full-width hero, the wide catering band or backgrounds).
   Photos inside a clipping frame (gallery figure, team photo, single photo next to text) carry it on that frame. */
.cat-collage img,
.gallery figure,
.team-card__media,
.member__media,
.split__media:has(> picture > img),
.split__media:has(> img) {
  box-shadow: var(--photo-shadow);
}
/* Side by side (tablet, desktop): the overlapping photo keeps a soft edge shadow on top of the light one. */
@media (min-width: 641px) {
  .cat-collage .cat-collage__b {
    box-shadow: var(--photo-shadow), -14px 0 32px rgba(20, 18, 15, 0.14);
  }
}
/* Desktop: the column with a photo pair gets more room than the text, and the two photos (60 % of that column each,
   upright 4:5) overlap diagonally like on the phone. Everything scales with the window. */
@media (min-width: 861px) {
  .split:has(> .split__media:last-child .cat-collage) {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .split:has(> .split__media:first-child .cat-collage) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .split__media .cat-collage:not(.cat-collage--triple) {
    grid-template-columns: minmax(0, 1fr);
  }
  .split__media .cat-collage:not(.cat-collage--triple) img {
    aspect-ratio: 4 / 5;
  }
  .split__media .cat-collage:not(.cat-collage--triple) .cat-collage__a {
    width: 60%;
    margin: 0;
  }
  .split__media .cat-collage:not(.cat-collage--triple) .cat-collage__b {
    width: 60%;
    margin: -28.5% 0 0 auto;
    box-shadow: var(--photo-shadow), -14px -12px 32px rgba(20, 18, 15, 0.16);
  }
  /* Second pair: the photo with the sign sits top right and overlaps only the dish photo's blurred upper corner,
     so the plate stays fully visible. */
  .split__media .cat-collage--down-first:not(.cat-collage--triple) .cat-collage__a {
    margin: 46.5% 0 0 0; /* dish photo lower left (its top at 62 % of the sign photo's height) */
  }
  .split__media .cat-collage--down-first:not(.cat-collage--triple) .cat-collage__b {
    margin: -121.5% 0 0 auto; /* sign photo top right: pulled up over the dish photo's blurred upper corner */
    box-shadow: var(--photo-shadow), -14px 12px 32px rgba(20, 18, 15, 0.16);
  }
}

/* Catering services: clear space between the blocks instead of photos that overlap the block above (owner, Oct 2026). */
.cat-block + .cat-block {
  margin-top: clamp(2.5rem, 6vw, 6rem);
}
.cat-blocks > .cat-block:last-child .cat-collage__a {
  margin-top: 0;
}

/* "Catering anfragen" again at the end of the catering services (owner, Oct 2026). */
.cat-text__cta {
  margin-top: 1.75rem;
}

/* ============ Fix: the phone navigation menu after scrolling + booking bar timing (Oct 2026) ============
   The frosted glass sits on a layer behind the header's content. A backdrop filter on the header itself makes the
   header the frame of the full-screen navigation menu (position: fixed), which squeezed the open menu into the 70 px
   header strip once the page was scrolled. */
.site-header.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: rgba(250, 250, 248, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: opacity 0.4s var(--ease);
}
.site-header.is-scrolled::before {
  opacity: 1;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: rgba(250, 250, 248, 0.95);
  }
}

/* ============ Table d'Exception · Le Salon (js/experience-salon.js) ============
   Prototype B "Le Salon", approved at tempo "langsamer": every duration is the prototype's times --salon-tempo (1.5).
   "Experience reservieren" opens a dialog over the page: the photo grows from its frame to full screen while the room
   darkens and slowly zooms, then the paper card rises and its champagne frame draws itself (top and right, then bottom
   and left). The card is only paper and frame: the event app in it (js/cdc-booking.js frames
   /embed/table-d-exception with data-variant="salon") brings its own heading, the price and the content.
   The salon stays laid out but invisible while closed, so that frame loads with the page. Reduced motion: short fades
   (.is-calm, set by the script from prefers-reduced-motion). */
html:not(.js) [data-salon-open] {
  display: none; /* the salon needs the script */
}
.exp-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}
.split__media.is-lifted img {
  visibility: hidden; /* the photo is up in the salon */
}
html.salon-open .site-header {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-fade), visibility 0s linear 0.6s;
}

.salon {
  --salon-tempo: 1.5;
  --salon-turn: cubic-bezier(0.65, 0, 0.35, 1);
  --salon-night: #14120f;
  --salon-cream: #f3ece0;
  --salon-frame: rgba(179, 146, 95, 0.45);
  position: fixed;
  inset: 0;
  z-index: 2147483001; /* one above the booking loader's phone overlay, which can stay open under it (an evening
                          picked in the phone widget, 14 Oct 2026); the cookie banner stays above */
  visibility: hidden;
  pointer-events: none;
  outline: none;
}
.salon.is-active {
  visibility: visible;
  pointer-events: auto;
}
.salon__backdrop {
  position: absolute;
  inset: 0;
  background: var(--salon-night);
  opacity: 0;
  transition: opacity calc(1.2s * var(--salon-tempo)) var(--ease);
}
.salon.is-open .salon__backdrop {
  opacity: 0.96;
}
/* The photo: the script puts it on the frame's rectangle, then on the whole screen (a FLIP through top, left and size). */
.salon__photo {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  transition: top calc(1.4s * var(--salon-tempo)) var(--salon-turn), left calc(1.4s * var(--salon-tempo)) var(--salon-turn),
    width calc(1.4s * var(--salon-tempo)) var(--salon-turn), height calc(1.4s * var(--salon-tempo)) var(--salon-turn);
}
.salon__photo.is-still {
  transition: none;
}
.salon__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
  transition: transform calc(16s * var(--salon-tempo)) ease-out;
}
.salon.is-open .salon__photo img {
  transform: scale(1.08); /* the slow zoom */
}
.salon.is-closing .salon__photo img {
  transition-duration: calc(1.4s * var(--salon-tempo)); /* back to the frame's scale on the way back */
}
.salon__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(20, 18, 15, 0.3), rgba(20, 18, 15, 0.82));
  transition: opacity calc(1.4s * var(--salon-tempo)) var(--ease);
}
.salon.is-open .salon__photo::after {
  opacity: 1;
}
.salon__stage {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 11vh 1rem 8vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 236, 224, 0.35) transparent;
}
.salon__card {
  position: relative;
  width: min(580px, 100%);
  padding: clamp(1.75rem, 4vw, 2.9rem);
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  transform: translateY(32px);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7);
  transition: opacity calc(1s * var(--salon-tempo)) var(--ease), transform calc(1s * var(--salon-tempo)) var(--ease);
}
.salon.is-card .salon__card {
  opacity: 1;
  transform: none;
}
/* The champagne frame draws itself: top and right (::before), then bottom and left (::after). */
.salon__card::before,
.salon__card::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 1px solid transparent;
  pointer-events: none;
}
.salon__card::before {
  top: 10px;
  left: 10px;
}
.salon__card::after {
  right: 10px;
  bottom: 10px;
}
.salon.is-card .salon__card::before,
.salon.is-framed .salon__card::before {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-top-color: var(--salon-frame);
  border-right-color: var(--salon-frame);
}
.salon.is-card .salon__card::after,
.salon.is-framed .salon__card::after {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-bottom-color: var(--salon-frame);
  border-left-color: var(--salon-frame);
}
.salon.is-card .salon__card::before {
  transition: width calc(0.6s * var(--salon-tempo)) ease-out calc(0.5s * var(--salon-tempo)),
    height calc(0.6s * var(--salon-tempo)) ease-out calc(1.1s * var(--salon-tempo));
}
.salon.is-card .salon__card::after {
  transition: border-color 0s linear calc(1.7s * var(--salon-tempo)), width calc(0.6s * var(--salon-tempo)) ease-out calc(1.7s * var(--salon-tempo)),
    height calc(0.6s * var(--salon-tempo)) ease-out calc(2.3s * var(--salon-tempo));
}
/* Drawn: from now on the frame follows the card's height at once (the app's chapters change it). */
.salon.is-framed .salon__card::before,
.salon.is-framed .salon__card::after {
  transition: none;
}
.salon__x {
  position: fixed;
  top: calc(1.25rem + env(safe-area-inset-top, 0px));
  right: 1.25rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid rgba(243, 236, 224, 0.85); /* the cream ring reads on the dark photo */
  border-radius: 50%;
  background: rgba(52, 80, 74, 0.92); /* forest ink (--forest): reads on the paper card */
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.55);
  color: var(--salon-cream);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.8s var(--ease-fade), transform 0.7s var(--ease), border-color 0.4s var(--ease);
}
.salon.is-card .salon__x,
.salon__x:focus-visible {
  opacity: 1;
}
.salon__x:hover {
  transform: rotate(90deg);
  border-color: var(--salon-cream);
}
.salon__x:focus-visible {
  outline: 2px solid var(--salon-cream);
  outline-offset: 3px;
}
.salon__sentinel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* Phones: the same sequence; the card spans the width under a band of the photo, and the stage scrolls. */
@media (max-width: 640px) {
  .salon__stage {
    padding: calc(5rem + env(safe-area-inset-top, 0px)) 0 0;
  }
  .salon__card {
    width: 100%;
    min-height: calc(100vh - 5rem);
    min-height: calc(100dvh - 5rem - env(safe-area-inset-top, 0px));
    padding: 1.75rem 1.25rem calc(2.25rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -30px 60px -40px rgba(0, 0, 0, 0.6);
  }
  .salon__x {
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: 1rem;
  }
}
/* Reduced motion (the script sets .is-calm): no flight, no zoom, no drawing; the room, the card and the frame fade.
   !important: the site-wide reduced-motion rule shortens every transition to nothing. */
.salon.is-calm .salon__backdrop,
.salon.is-calm .salon__photo::after,
.salon.is-calm .salon__card,
.salon.is-calm .salon__x {
  transition: opacity 0.2s linear !important;
}
.salon.is-calm .salon__photo {
  opacity: 0;
  transition: opacity 0.2s linear !important;
}
.salon.is-calm.is-open .salon__photo {
  opacity: 1;
}
.salon.is-calm .salon__photo img,
.salon.is-calm .salon__card {
  transform: none !important;
}
.salon.is-calm .salon__photo img,
.salon.is-calm .salon__card::before,
.salon.is-calm .salon__card::after {
  transition: none !important;
}
@media print {
  .salon {
    display: none !important;
  }
}

/* Table d'Exception Salon: the calm note in the card when the booking app does not answer (js/experience-salon.js). */
/* The card's typography: champagne kicker in letter-spaced small caps, the title in forest at weight 200, the links as in
   the app (champagne underline with offset, 44 px targets). */
.salon .exp-embed[hidden],
.salon__fallback[hidden] {
  display: none;
}
.salon__fallback {
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 2.75rem);
  text-align: center;
}
.salon__fallback p {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}
.salon__fallback .salon__fallback-kicker {
  color: var(--champagne-ink);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
}
.salon__fallback-title {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.6vw, 2.05rem);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.salon__fallback-title:focus {
  outline: none;
}
.salon__fallback .salon__fallback-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.75rem;
}
.salon__fallback-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  letter-spacing: 0.05em;
}
.salon__fallback-links a:hover {
  text-decoration-thickness: 2px;
}

/* "Experience reservieren" after a mouse or touch open of the Salon: the focus comes back without a ring (js/experience-salon.js). */
[data-salon-open].is-quiet-focus:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The floating WhatsApp button leaves with the page while the Table d'Exception salon is open (14 Oct 2026). */
html.salon-open .wa-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* ============ Phone tab bar (owner, option B "Tab-Leiste", 14 Oct 2026) ============
   A floating iOS-style glass capsule with four tabs: Menü, Experience, Reservieren (the call to action, js-book) and
   WhatsApp. It waits until the hero's "Tisch reservieren" has scrolled away and steps aside over #reservieren
   (js/main.js .is-shown), with the menu open and while the Table d'Exception salon is open. The section in view
   (#menu, #experience) gets aria-current and a light glass highlight that slides between the two tabs. */
@media (max-width: 860px) {
  .mobile-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 95;
    display: flex;
    align-items: stretch;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(252, 250, 245, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 14px 34px -12px rgba(28, 26, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(179, 146, 95, 0.22);
    transition: transform 0.35s var(--ease), opacity 0.35s ease, visibility 0s linear 0s;
  }
  .js .mobile-bar:not(.is-shown),
  .mobile-bar.is-hidden,
  body.nav-open .mobile-bar,
  html.salon-open .mobile-bar {
    transform: translateY(calc(100% + 16px + env(safe-area-inset-bottom)));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .tb {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding: 6px 2px 5px;
    border-radius: 999px;
    color: #4a463f;
    font: 400 10.5px/1.15 "Poppins", system-ui, sans-serif;
    letter-spacing: 0.02em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, color 0.3s ease;
  }
  .tb svg {
    width: 22px;
    height: 22px;
  }
  .tb__label {
    white-space: nowrap;
  }
  .tb[aria-current="true"] {
    color: var(--forest);
  }
  .tb--cta {
    margin: 0 2px;
    color: #fff;
    background: var(--forest);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px -8px rgba(28, 26, 22, 0.5);
  }
  .tb:active {
    transform: scale(0.96);
  }
  /* the highlight capsule under the tab of the section in view; js/main.js sets --glow-x and --glow-w */
  .mobile-bar__glow {
    position: absolute;
    z-index: 0;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: var(--glow-w, 0px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px -4px rgba(28, 26, 22, 0.25);
    transform: translateX(var(--glow-x, 0px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.34, 1.36, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.36, 0.64, 1), opacity 0.25s ease;
  }
  .mobile-bar[data-active] .mobile-bar__glow {
    opacity: 1;
  }
  .mobile-bar.is-glow-still .mobile-bar__glow {
    transition: opacity 0.25s ease;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 860px) {
    .mobile-bar {
      background: rgba(252, 250, 245, 0.94);
    }
  }
}
@media (max-width: 860px) and (prefers-reduced-transparency: reduce) {
  .mobile-bar {
    background: #fcfaf5;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .mobile-bar,
  .js .mobile-bar:not(.is-shown),
  .mobile-bar.is-hidden,
  body.nav-open .mobile-bar,
  html.salon-open .mobile-bar,
  .tb,
  .mobile-bar__glow {
    transition: none;
  }
  .tb:active {
    transform: none;
  }
}

/* ==========================================================================
   Design-Runde 15. Okt 2026
   Footer "Schaut mal vorbei", Catering, Preis-Hinweis, Handy-Leiste, Fotos über den Textrand.
   Skripte dazu: js/design.js
   ========================================================================== */

/* ---------- Footer: "Schaut mal vorbei" (ersetzt das grüne Band) ---------- */
.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.site-footer .footer-grid .footer-center {
  order: -1;
  flex: 0 0 100%;
  transform: none;
  border-bottom: 0;
}
.footer-visit__t {
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
}
.footer-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 900px;
  margin: 0 auto;
}
.footer-info h3 {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne-ink);
  margin: 0 0 0.8rem;
}
.footer-info p {
  margin: 0;
  line-height: 1.9;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.footer-info a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-underline-offset: 0.2em;
}
.footer-info a:hover {
  color: var(--forest);
}
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2rem 2.2rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.footer-actions .btn--wa {
  margin: 0;
}
.site-footer .footer-links {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem 1.6rem;
}
.site-footer .footer-copy {
  border-top: 0;
  padding-top: 0;
  margin-top: 1rem;
}
@media (max-width: 700px) {
  .footer-info {
    grid-template-columns: 1fr;
  }
  .site-footer .footer-grid {
    justify-content: center;
    flex-direction: column;
  }
  .site-footer .footer-links {
    justify-content: center;
    text-align: center;
    width: 100%;
    gap: 0.6rem 1.4rem;
  }
}

/* ---------- Catering: Foto links, Fotos brechen den Textrand ---------- */
main {
  overflow-x: clip;
}
@media (min-width: 861px) {
  :root {
    --bleed: min(calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter)), clamp(2rem, 9vw, 9rem));
  }
  #catering .split--reverse .split__media {
    order: -1;
  }
  .cat-block--imgleft > .cat-collage {
    margin-left: calc(-1 * var(--bleed));
  }
  .cat-block--imgright > .cat-collage {
    margin-right: calc(-1 * var(--bleed));
  }
  .split > .split__media:first-child > .cat-collage {
    margin-left: calc(-1 * var(--bleed));
  }
  .split > .split__media:last-child > .cat-collage {
    margin-right: calc(-1 * var(--bleed));
  }
  /* Buffet: das obere Foto ist nach rechts versetzt, damit es nicht mit den Fotos darüber und darunter fluchtet */
  .cat-collage--triple .cat-collage__a {
    transform: translateX(clamp(2.5rem, 6vw, 5.5rem));
  }
}

/* ---------- Menü: Preis-Hinweis als Tooltip statt Zeile ---------- */
#menu .menu-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.menu-item__price {
  cursor: help;
}
.price-tip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: var(--noir);
  color: #f3ece0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-100%, calc(-100% - 10px));
  transition: opacity 0.25s var(--ease);
}
.price-tip.on {
  opacity: 1;
}
.price-tip::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--noir);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .price-tip {
    transition: none;
  }
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  /* Titel weiter oben, Foto etwas niedriger */
  .hero__media {
    min-height: 50svh;
  }
  .hero__content {
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }
  .hero__title {
    margin-bottom: 1.25rem;
  }

  /* Leiste: nur WhatsApp (immer) und Reservieren (nur wenn kein Reservieren-Knopf im Bild ist), unten rechts */
  .js .mobile-bar:not(.is-shown) {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.nav-open .mobile-bar,
  html.salon-open .mobile-bar {
    transform: translateY(calc(100% + 16px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .mobile-bar {
    left: auto;
    right: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0;
    justify-content: center;
    gap: 4px;
  }
  .mobile-bar .tb {
    flex: 0 0 auto;
    min-width: 92px;
    padding-inline: 14px;
  }
  .mobile-bar .tb--cta {
    margin: 0;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), max-width 0.35s var(--ease),
      min-width 0.35s var(--ease), padding 0.35s var(--ease);
    max-width: 200px;
    overflow: hidden;
  }
  .mobile-bar.cta-off .tb--cta {
    opacity: 0;
    transform: scale(0.8);
    max-width: 0;
    min-width: 0;
    padding-inline: 0;
    pointer-events: none;
    visibility: hidden;
  }
}
@media (max-width: 640px) {
  /* Fotos wechseln durchgehend links/rechts (Quinconce) */
  .cat-collage--down-first:not(.cat-collage--triple) .cat-collage__a {
    margin-left: 0;
    margin-right: auto;
  }
  .cat-collage--down-first:not(.cat-collage--triple) .cat-collage__b {
    margin: -10% 0 0 auto;
    box-shadow: -12px -10px 30px rgba(20, 18, 15, 0.18);
  }
}

/* ==========================================================================
   Gutschein (Vorschau, 15. Okt 2026): zweite Tür im Reservierungsbereich
   ========================================================================== */
/* Gutschein-Prototyp: gleiche Seite, kein neuer Abschnitt. Der Reservierungsbereich bekommt zwei Türen. */
[hidden]{display:none!important}
.door-tabs{display:flex;justify-content:center;gap:0;margin:0 auto clamp(2rem,4vw,3rem);border:1px solid var(--line);border-radius:999px;padding:4px;width:max-content;max-width:100%}
.door-tabs button{border:0;background:none;border-radius:999px;padding:.8rem 1.6rem;font-family:var(--font-ui);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;transition:background .4s var(--ease),color .4s}
.door-tabs button[aria-selected=true]{background:var(--forest);color:#fff}
.door-tabs button:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.menu-gift,.exp-gift{margin-top:1.6rem;font-size:.95rem;color:var(--ink-soft)}
.menu-gift{text-align:center}
.menu-gift a,.exp-gift a,.gv-link{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--champagne);padding-bottom:1px;transition:border-color .3s}
.menu-gift a:hover,.exp-gift a:hover{border-color:var(--forest)}
#gv-panel{display:none}
#gv-panel.on{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4.5rem);max-width:980px;margin:0 auto;align-items:start}
@media(max-width:860px){#gv-panel.on{grid-template-columns:1fr}.gv-side{order:-1}}
#gv-panel .buy{margin:0;max-width:none}
.gv-side{position:sticky;top:6rem}
@media(max-width:860px){.gv-side{position:static}}
.gv-side .paper{transform:rotate(1.2deg)}
.gv-side p{font-size:.82rem;color:var(--ink-soft);margin:1.4rem 0 0;text-align:center}
.gv-pane-t{display:block}
textarea.line{overflow:hidden}

[hidden]{display:none!important}
/* Prototyp 6: ein Abschnitt der Startseite. Erst Info + Button. Klick: der Abschnitt klappt auf (Betrag), Wahl öffnet den nächsten Teil darunter. */
.ctx{padding:9rem 0 4rem;text-align:center;color:var(--ink-soft);font-size:.85rem}
.ctx span{display:block;font-family:var(--font-ui);letter-spacing:.3em;text-transform:uppercase;font-size:.68rem}

#gutschein .top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,6rem);align-items:center}
@media(max-width:860px){#gutschein .top{grid-template-columns:1fr}}
#gutschein h2{color:var(--forest);margin:0 0 1.4rem}
#gutschein .lead{margin:0 0 1.6rem}
.facts{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.6rem}
.facts li{padding-left:1.6rem;position:relative;color:var(--ink-soft);font-size:.95rem}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:.9rem;height:1px;background:var(--champagne)}
.actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.price-from{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne-ink)}
#toggle[aria-expanded=true]{background:transparent;color:var(--forest);border:1px solid var(--forest)}

/* Gutschein als leises Papier, live */
.paper{position:relative;background:var(--paper);padding:clamp(2rem,5vw,2.8rem) clamp(1.4rem,4vw,2.4rem);text-align:center;box-shadow:0 40px 70px -45px rgba(22,20,15,.5);transform:rotate(1deg);transition:transform .8s var(--ease)}
.paper:hover{transform:none}
.paper::before{content:"";position:absolute;inset:9px;border:1px solid rgba(179,146,95,.5);pointer-events:none}
.paper .w{font-family:var(--font-ui);font-size:.6rem;letter-spacing:.5em;color:var(--forest);padding-left:.5em;text-transform:uppercase}
.paper .a{font-family:var(--font-display);font-weight:200;font-size:clamp(3.4rem,10vw,5rem);line-height:1;color:var(--forest);margin:.9rem 0 .6rem}
.paper .a i{font-style:normal;font-size:.3em;vertical-align:top;position:relative;top:.7em;margin-left:.12em;color:var(--champagne-ink)}
.paper .a.bump{animation:bump .5s var(--ease)}@keyframes bump{40%{transform:scale(1.04)}}
.paper .t{font-size:.85rem;color:var(--ink-soft);min-height:1.3em}
.paper .m{font-style:italic;font-weight:300;font-size:1rem;margin:.9rem auto 0;max-width:28ch;min-height:2.6em}
.paper .c{margin-top:1.2rem;font-family:var(--font-ui);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--champagne-ink)}

/* aufklappender Bereich */
.expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)}
.expand.open{grid-template-rows:1fr}
.expand>div{overflow:hidden;min-height:0}
.buy{max-width:760px;margin:clamp(2.5rem,5vw,4rem) auto 0;border-top:1px solid var(--champagne)}
.step{border-bottom:1px solid var(--line)}
.step__h{display:grid;grid-template-columns:2rem 1fr auto;align-items:baseline;gap:.5rem 1rem;width:100%;background:none;border:0;text-align:left;font:inherit;color:var(--ink);padding:1.3rem .2rem;cursor:pointer}
.step__h:disabled{cursor:default;opacity:.45}
.step__n{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.2em;color:var(--champagne-ink)}
.step__l{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.step__v{font-family:var(--font-display);font-weight:300;font-size:1.05rem;color:var(--forest);text-align:right}
.step__v u{font-family:var(--font-ui);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne-ink);margin-left:.9rem;text-decoration:none;border-bottom:1px solid var(--champagne)}
.step__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.step.open .step__b{grid-template-rows:1fr}
.step__b>div{overflow:hidden;min-height:0}
.step__in{padding:.2rem .2rem 2rem 3rem}
@media(max-width:560px){.step__in{padding-left:.2rem}.step__h{grid-template-columns:1.6rem 1fr auto}}
.step.open .step__l{color:var(--forest)}

/* Betrag wie die Personenzahl in der Reservierung */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{min-width:62px;height:54px;padding:0 1.1rem;border:1px solid var(--line);border-radius:999px;background:none;font-family:var(--font-display);font-weight:300;font-size:1.3rem;color:var(--ink);cursor:pointer;transition:.35s var(--ease)}
.chip:hover{border-color:var(--champagne)}
.chip[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:#fff}
.chip.sm{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;height:46px;min-width:0}
.free{display:none;align-items:baseline;gap:.6rem;margin-top:1.2rem}.free.on{display:flex}
.free input{width:5.5em;font:inherit;font-family:var(--font-display);font-weight:300;font-size:1.6rem;border:0;border-bottom:1px solid var(--champagne);background:none;color:var(--forest);padding:.2rem 0;border-radius:0}
.free input:focus{outline:0;border-color:var(--forest)}.free span{color:var(--ink-soft);font-size:.85rem}
.hint{font-size:.82rem;color:var(--ink-soft);margin:1.1rem 0 0}

.lab{display:block;font-family:var(--font-ui);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .15rem}
.line{width:100%;font:inherit;font-weight:300;font-size:1.1rem;padding:.6rem 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);border-radius:0;transition:border-color .3s}
.line:focus{outline:0;border-color:var(--forest)}
textarea.line{resize:none;font-style:italic;font-size:1.2rem;line-height:1.5}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.6rem}.f2 .full{grid-column:1/-1}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
.occ{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:1.4rem 0 1.2rem}
.occ button{background:none;border:0;border-bottom:1px solid transparent;font-family:var(--font-ui);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);padding:.4rem 0;cursor:pointer;transition:.3s}
.occ button:hover{color:var(--forest)}.occ button[aria-pressed=true]{color:var(--forest);border-color:var(--champagne)}
.cnt{text-align:right;font-size:.7rem;color:var(--ink-soft);margin-top:.2rem}
.way{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:1.8rem}
@media(max-width:560px){.way{grid-template-columns:1fr}.way button+button{border-left:0!important;border-top:1px solid var(--line)}}
.way button{background:none;border:0;text-align:left;padding:1.1rem 1rem;cursor:pointer;font:inherit;color:var(--ink);transition:background .4s}
.way button+button{border-left:1px solid var(--line)}
.way h3{font-size:1.1rem;font-weight:300;letter-spacing:.01em;margin:0 0 .25rem;color:var(--ink-soft);transition:color .4s}.way p{margin:0;font-size:.8rem;color:var(--ink-soft)}
.way button[aria-pressed=true]{background:rgba(52,80,74,.06)}.way button[aria-pressed=true] h3{color:var(--forest)}
#gift{margin-top:1.4rem}
.go{display:flex;justify-content:flex-end;margin-top:1.8rem}

.sum .row{display:flex;justify-content:space-between;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:.95rem}
.sum .row.tot{border-bottom:0;color:var(--ink)}.sum .row.tot b{font-family:var(--font-display);font-weight:200;font-size:2.2rem;color:var(--forest)}
.wal{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.2rem 0 .8rem}.wal span{background:#14120f;color:#fff;text-align:center;padding:.8rem;border-radius:999px;font-size:.88rem}
.ph{border:1px dashed var(--champagne);padding:.9rem;font-size:.82rem;color:var(--ink-soft);margin-bottom:1.4rem}
.tr{font-size:.75rem;color:var(--ink-soft);margin:.9rem 0 0;text-align:center}
.pay .btn{width:100%;justify-content:center}
.merci{display:none;text-align:center;padding:2.5rem 0 .5rem}
.paid .merci{display:block;animation:fi 1s var(--ease)}.paid .steps{display:none}
@keyframes fi{from{opacity:0;transform:translateY(14px)}}
.merci h3{font-size:clamp(2rem,5vw,3rem);font-weight:200;color:var(--forest);letter-spacing:.03em;margin:0 0 1rem}
.merci p{color:var(--ink-soft);margin:.3rem 0}
@media(prefers-reduced-motion:reduce){.expand,.step__b{transition:none}.paper,.paper .a.bump,.paid .merci{animation:none;transition:none}}

/* ==========================================================================
   Gutschein im Stil der Reservierung (15. Okt 2026): eine zentrierte Spalte, Nummer "01", Frage als Überschrift,
   runde 44-px-Wahl mit Schatten, abgeschlossene Schritte als kleine Zusammenfassung mit ✎.
   ========================================================================== */
#gv-panel.on { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); max-width: 980px; margin: 0 auto; align-items: start; }
#gv-panel .gv-side { position: sticky; top: 6rem; display: block; align-self: start; }
#gv-panel .gv-side .paper { transform: rotate(1.2deg); }

#gv-panel .gv-side p { margin: 1.4rem 0 0; text-align: center; }
#gv-panel .buy { border-top: 0; max-width: none; }
#gv-panel .step { border: 0; padding: 0 0 2.2rem; }
#gv-panel .step:has(> .step__h:disabled) { display: none; }
#gv-panel .step__h { grid-template-columns: 1fr auto; grid-template-areas: "n v" "l v"; gap: .15rem 1rem; align-items: center; padding: 0; }
#gv-panel .step__n { grid-area: n; font-family: var(--font-ui); font-size: .7rem; letter-spacing: .2em; color: var(--ink-soft); }
#gv-panel .step__l { grid-area: l; font-family: var(--font-display); font-weight: 300; font-size: 1.3rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); }
#gv-panel .step.open .step__l { color: var(--ink); }
#gv-panel .step__h:disabled { opacity: .4; }
#gv-panel .step__v { grid-area: v; justify-self: end; }
#gv-panel .step__v:not(:empty) { min-height: 44px; display: inline-flex; align-items: center; padding: 0 1rem; border: 1px solid var(--champagne); border-radius: 999px; background: #fff; color: var(--forest); font-family: var(--font-display); font-weight: 400; font-size: .95rem; }
#gv-panel .step__v u { display: none; }
#gv-panel .step__v:not(:empty)::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: .55rem; background: var(--ink-soft); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
#gv-panel .step.open .step__v { display: none; }
#gv-panel .step__in { padding: 1rem 0 0; }
#gv-panel .chips { gap: .5rem; }
#gv-panel .chip { min-height: 44px; min-width: 3rem; height: auto; padding: 0 1rem; border: 1px solid #8a8377; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 300; font-size: 1rem; }
#gv-panel .chip.sm { letter-spacing: 0; text-transform: none; font-size: 1rem; height: auto; }
#gv-panel .chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; font-weight: 400; box-shadow: 0 8px 20px -14px rgba(26, 24, 18, .55); }
@media (hover: hover) { #gv-panel .chip:hover:not([aria-pressed="true"]) { background: var(--paper); border-color: var(--forest); } }
#gv-panel .hint, #gv-panel .note { color: var(--ink-soft); font-size: .95rem; margin: 1rem 0 0; }
#gv-panel .free input { border: 1px solid #8a8377; border-radius: 999px; padding: .55rem 1rem; background: #fff; font-size: 1.1rem; width: 7rem; }
#gv-panel .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  #gv-panel.on { grid-template-columns: 1fr; max-width: 44rem; gap: 1.5rem; }
  #gv-panel .gv-side { position: static; order: -1; }
  #gv-panel .gv-side .paper { max-width: 340px; margin-inline: auto; transform: none; }
}
#gv-panel textarea.line { min-height: 2.6em; overflow: hidden; line-height: 1.5; padding-bottom: .5rem; }
/* Gutschein-Karte: Titelzeile bleibt in einer Zeile */
.paper .w { white-space: nowrap; letter-spacing: .26em; font-size: .58rem; padding-left: .26em; }
/* Gutschein-Karte: bewegt sich leicht beim Überfahren (hebt sich und dreht sich zurück) */
#gv-panel .gv-side .paper { transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s cubic-bezier(.22,.61,.36,1); will-change: transform; }
@media (hover: hover) and (min-width: 861px) {
  #gv-panel .gv-side .paper:hover { transform: rotate(-1.4deg) translateY(-8px) scale(1.015); box-shadow: 0 50px 80px -40px rgba(22,20,15,.55); }
}
@media (prefers-reduced-motion: reduce) { #gv-panel .gv-side .paper { transition: none; } #gv-panel .gv-side .paper:hover { transform: rotate(1.2deg); } }
/* Gutschein-Karte: das Logo steht oben statt der Textzeile */
.paper .logo { display: block; width: min(64%, 190px); height: auto; margin: .2rem auto .9rem; }

/* ==========================================================================
   Catering-Anfrage (15. Okt 2026): Formular im Stil des Gutscheins, wächst unter den Angeboten auf
   ========================================================================== */
.cat-req { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.7,.2,1); max-width: 44rem; margin: clamp(2rem, 5vw, 3.5rem) auto 0; scroll-margin-top: 6rem; }
.cat-req[hidden] { display: none; }
.cat-req.on { grid-template-rows: 1fr; }
.cat-req > * { overflow: hidden; min-height: 0; }
.cat-req__card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.4rem, 4vw, 2.6rem); box-shadow: 0 24px 50px -36px rgba(26, 24, 18, .4); }
.cat-req__n { font-family: var(--font-ui); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .3rem; }
.cat-req__h { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; line-height: 1.3; color: var(--forest); margin: 0 0 1.6rem; outline: 0; }
.cat-f { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.cat-f .lab { display: block; padding: 0; margin: 0 0 .6rem; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cat-opt { text-transform: none; letter-spacing: 0; opacity: .75; font-size: .8rem; margin-left: .4rem; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-chip { min-height: 44px; padding: 0 1rem; border: 1px solid #8a8377; border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 300; font-size: 1rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.cat-chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; font-weight: 400; box-shadow: 0 8px 20px -14px rgba(26, 24, 18, .55); }
@media (hover: hover) { .cat-chip:hover:not([aria-pressed="true"]) { background: var(--paper); border-color: var(--forest); } }
.cat-in { width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid #8a8377; border-radius: 6px; background: #fff; padding: .6rem .9rem; font: inherit; font-size: 1rem; color: var(--ink); }
textarea.cat-in { resize: vertical; line-height: 1.5; }
.cat-in:focus-visible, .cat-chip:focus-visible, .cat-check input:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.cat-in[aria-invalid="true"] { border-color: #8b2c20; }
.cat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
@media (max-width: 640px) { .cat-row { grid-template-columns: 1fr; } }
.cat-check { display: flex; gap: .6rem; align-items: flex-start; margin-top: .7rem; font-size: .95rem; color: var(--ink-soft); line-height: 1.45; text-transform: none; letter-spacing: 0; }
.cat-check input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--forest); }
.cat-check a { color: var(--forest); }
.cat-err { color: #8b2c20; font-size: .92rem; margin: .5rem 0 0; }
.cat-err[hidden] { display: none; }
.cat-hint { color: var(--ink-soft); font-size: .95rem; margin: 1rem 0 0; text-align: center; }
.cat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cat-req__go { width: 100%; justify-content: center; margin-top: .6rem; }
.cat-merci { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; outline: 0; }
.cat-merci[hidden] { display: none; }
.cat-merci h3 { font-family: var(--font-display); font-weight: 300; font-size: 2.2rem; color: var(--forest); margin: 0 0 .8rem; }
.cat-merci p { color: var(--ink-soft); margin: 0; }
@media (prefers-reduced-motion: reduce) { .cat-req { transition: none; } .cat-chip { transition: none; } }

/* Catering-Formular im Look des Gutschein-Formulars (owner, 16 Okt 2026): kleine Beschriftung, Linienfelder, Anlass als Textreiter. */
.cat-req__card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding-inline: 0; }
.cat-f { margin-bottom: 1.7rem; }
.cat-f .lab { font-size: .64rem; letter-spacing: .26em; margin: 0 0 .15rem; }
.cat-opt { letter-spacing: .08em; font-size: .64rem; opacity: .7; }
.cat-in { min-height: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: .6rem 0; font-weight: 300; font-size: 1.1rem; transition: border-color .3s; }
.cat-in:focus, .cat-in:focus-visible { outline: 0; border-color: var(--forest); }
.cat-in[aria-invalid="true"] { border-color: #8b2c20; }
textarea.cat-in { resize: none; font-style: italic; font-size: 1.2rem; min-height: 2.6em; overflow: auto; }
.cat-in::placeholder { color: var(--ink-soft); opacity: .6; font-style: normal; font-size: 1rem; }
input[type="date"].cat-in { font-family: inherit; }
.cat-chip { border-color: var(--line); background: none; font-size: 1.05rem; min-height: 46px; }
@media (hover: hover) { .cat-chip:hover:not([aria-pressed="true"]) { background: none; border-color: var(--champagne); } }
.cat-chips[data-name="occasion"] { gap: .3rem 1.4rem; }
.cat-chips[data-name="occasion"] .cat-chip { min-height: 0; padding: .4rem 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; font-family: var(--font-ui); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; }
.cat-chips[data-name="occasion"] .cat-chip:hover { color: var(--forest); }
.cat-chips[data-name="occasion"] .cat-chip[aria-pressed="true"] { background: none; color: var(--forest); border-color: var(--champagne); box-shadow: none; }

/* ===== Mein Speiseletter (#speiseletter) ===== */
/* Owner, 16 Okt 2026: WhatsApp-only sign-up after the menu. Reveal, focus ring and reduced motion come from the site's
   own rules (.reveal, :focus-visible, prefers-reduced-motion); nothing here animates. */
section#speiseletter {
  scroll-margin-top: 76px; /* same offset as the other one-pager anchors */
}
.prose #speiseletter {
  scroll-margin-top: calc(var(--header-h) + 1rem); /* datenschutz.html#speiseletter lands below the fixed header */
}
.sl {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
.sl__body h2 {
  margin-top: 0;
  font-size: var(--fs-h2); /* same scale as the other section titles (.split__body h2, .menu-head h2); line-height and letter-spacing come from the base h2 rules */
}
.sl__body .lead {
  margin-top: var(--sp-3);
}
.sl__cta {
  margin-top: var(--sp-4);
}
.sl__note {
  margin-top: var(--sp-3);
  max-width: 60ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-soft);
}
.sl__note a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 1px;
}
.sl__note a:hover {
  border-color: var(--forest);
}
.sl__qr {
  display: none; /* phones and small tablets: the button opens WhatsApp directly */
  margin: 0;
}
@media (min-width: 861px) {
  .sl {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-8);
  }
  .sl__qr {
    display: block;
    justify-self: end;
    width: 13.5rem;
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    text-align: center;
  }
  .sl__qr img {
    display: block;
    width: 160px;
    height: auto;
    margin-inline: auto;
  }
  .sl__qr figcaption {
    margin-top: var(--sp-1);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }
}
/* Text for screen readers only (no such helper existed in this stylesheet). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Gutschein-Karte auf dem Handy: Berühren hebt sie an wie das Überfahren mit der Maus (js/gutschein.js setzt .is-touched) */
#gv-panel .gv-side .paper.is-touched { transform: rotate(-1.4deg) translateY(-8px) scale(1.015); box-shadow: 0 50px 80px -40px rgba(22,20,15,.55); }

/* Link "hier" in der Reservierungszeile (größere Runden): führt zum Catering-Formular. */
.reserve__meta a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.reserve__meta a:hover { color: var(--forest); }