/* ============================================================
   China-Palast Lübbecke — Warm editorial fine dining
   Designsystem übernommen von Tô 1987, angepasst an
   Buffet-Preise, Platzhalterfotos und chinesische Schriftzeichen.
   Tokens → Base → Layout → Components → Sections → Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces */
  --bone:        #FBF8F3;
  --bone-deep:   #F3EDE3;
  --paper:       #FFFFFF;
  --char:        #1A1613;
  --char-soft:   #241F1A;

  /* Ink */
  --ink:         #1C1A17;
  --ink-soft:    #4A443C;   /* 7.6:1 auf --bone */
  --ink-faint:   #6B6357;   /* 4.8:1 auf --bone */
  --ink-invert:  #F6F1E8;
  --ink-invert-soft: #C9BFB0;

  /* Brand */
  --lacquer:     #8C2B23;   /* 8.0:1 auf --bone */
  --lacquer-deep:#6E1F19;
  --gold:        #A98142;   /* nur große Schrift / Linien (3.4:1) */
  --gold-ink:    #7A5A24;   /* 6.0:1 auf --bone — auch für kleine Schrift */
  --gold-light:  #D8B778;   /* auf dunklen Flächen */

  /* Lines */
  --rule:        #E3DACB;
  --rule-strong: #CFC2AD;
  --rule-dark:   #3A322A;

  /* Feedback */
  --danger:      #A32218;
  --success:     #2F6B46;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-zh:      "Noto Serif SC", "Songti SC", "SimSun", serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5.4rem);

  /* Space (4/8 Rhythmus) */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-5: 3rem;   --sp-6: 4rem;
  --sp-7: 6rem;    --sp-8: 8rem;

  --shell: 1240px;
  --radius: 3px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(28,26,23,.05), 0 4px 14px rgba(28,26,23,.05);
  --shadow-md: 0 4px 12px rgba(28,26,23,.07), 0 18px 44px rgba(28,26,23,.09);
  --shadow-lg: 0 10px 30px rgba(28,26,23,.10), 0 40px 90px rgba(28,26,23,.14);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  240ms;
  /* Das Einblenden beim Scrollen läuft bewusst langsamer als Hover & Co. */
  --dur-reveal: 620ms;
  /* Die Galerie kommt weiter von unten und braucht dafür etwas mehr Zeit */
  --dur-reveal-lg: 760ms;

  /* Layers */
  --z-header: 100;
  --z-scrim: 90;
  --z-skip: 200;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, iframe { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
p { margin: 0 0 var(--sp-2); }
p:last-child { margin-bottom: 0; }

/* Abstand zwischen einer Überschrift und dem Text, der zu ihr gehört.
   Ohne diese Regel stehen beide auf Null: h1–h3 tragen margin: 0, und Absätze
   halten nur nach unten Abstand. Gestaffelt nach Schriftgröße — der große
   Abschnittstitel braucht mehr Luft als eine Säulen-Überschrift, sonst wirkt
   der Abstand oben zu knapp und unten zu weit.
   Die Regeln greifen nur, wenn der Überschrift unmittelbar etwas folgt. In
   .section__head ist sie letztes Kind ihres Wrappers; dort macht den Abstand
   weiterhin die margin-bottom des Kopfes. */
.section__title + * { margin-top: var(--sp-3); }
.pillar h3 + p { margin-top: var(--sp-1); }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lacquer);
  outline-offset: 3px;
  border-radius: 2px;
}

button { font: inherit; cursor: pointer; }

::selection { background: var(--lacquer); color: var(--bone); }

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

.skip-link {
  position: absolute; top: -100px; left: var(--sp-2);
  z-index: var(--z-skip);
  background: var(--lacquer); color: var(--bone);
  padding: 0.75rem 1.25rem; text-decoration: none;
  font-weight: 600; font-size: var(--step--1);
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

/* Hält zusammengehörige Angaben (z. B. „17:45 – 22:00") in einer Zeile */
.nowrap { white-space: nowrap; }

/* Chinesische Schriftzeichen — überall gleich behandelt */
.zh {
  font-family: var(--font-zh);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* ---------- 3. Layout ---------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .shell { width: min(100% - 5rem, var(--shell)); }
}

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

.section--dark {
  position: relative;
  background: var(--char);
  color: var(--ink-invert);
  isolation: isolate;
}
/* Angedeutetes 回-Gittermuster statt eines Fotos — sehr zurückhaltend */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    radial-gradient(90% 70% at 78% 0%, rgba(216,183,120,.10), transparent 60%),
    linear-gradient(90deg, rgba(216,183,120,.055) 1px, transparent 1px),
    linear-gradient(rgba(216,183,120,.055) 1px, transparent 1px);
  background-size: 100% 100%, 84px 84px, 84px 84px;
}

.section__head {
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .section__head {
    grid-template-columns: 1fr minmax(280px, 34ch);
    align-items: end;
  }
}
.section__head--light { border-bottom-color: var(--rule-dark); }

.section__note {
  color: var(--ink-faint);
  font-size: var(--step--1);
  line-height: 1.65;
  max-width: 42ch;
}
.section__note--light { color: var(--ink-invert-soft); }

.section__title { font-size: var(--step-3); }
.section__title em { font-style: italic; color: var(--lacquer); }
.section__title--light { color: var(--ink-invert); }
.section__title--light em { color: var(--gold-light); }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  flex: none;
  opacity: .7;
}
.eyebrow--light { color: var(--gold-light); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}
.lede--light { color: var(--ink-invert-soft); }

/* ---------- 4. Buttons & icons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform 120ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--lacquer);
  --btn-fg: #FFF7F1;
  --btn-bd: var(--lacquer);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  --btn-bg: var(--lacquer-deep);
  --btn-bd: var(--lacquer-deep);
  box-shadow: var(--shadow-md);
}

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
.btn--ghost:hover { --btn-bd: var(--ink); background: rgba(28,26,23,.04); }

/* Ghost-Variante auf dunklem Grund */
.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--ink-invert);
  --btn-bd: rgba(216,183,120,.5);
}
.btn--ghost-light:hover { --btn-bd: var(--gold-light); background: rgba(216,183,120,.08); }

.btn--lg { min-height: 52px; padding: 0.9rem 1.9rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none;
}

.icon {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--gold { stroke: var(--gold-ink); width: 20px; height: 20px; }

/* ---------- 5. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-block: var(--sp-2);
  padding-top: max(var(--sp-2), env(safe-area-inset-top));
  background: transparent;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              padding var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: rgba(251, 248, 243, .93);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--rule), 0 8px 30px rgba(28,26,23,.06);
  padding-block: 0.65rem;
}

/* Auf Seiten mit Hero (body.has-hero) steht der ungeankerte Header über dem
   dunklen Foto und wird hell gesetzt — Wortmarke in Gold, Navigation in
   --ink-invert. Sobald .is-stuck greift, liegt wieder heller Grund darunter und
   alles fällt auf die dunkle Grundfassung zurück. */
.has-hero .site-header:not(.is-stuck) .brand__mark--dark { display: none; }
.has-hero .site-header:not(.is-stuck) .brand__mark--light { display: block; }
.has-hero .site-header:not(.is-stuck) .brand__name { color: var(--ink-invert); }
.has-hero .site-header:not(.is-stuck) .brand__sub { color: var(--gold-light); }
.has-hero .site-header:not(.is-stuck) .nav-toggle__bar { background: var(--ink-invert); }
/* Nur ab 900 px: darunter liegen dieselben Links in der Schublade auf hellem
   Grund (.nav background: var(--bone), Abschnitt 16) und müssen dunkel bleiben. */
@media (min-width: 900px) {
  .has-hero .site-header:not(.is-stuck) .nav__link { color: var(--ink-invert-soft); }
  .has-hero .site-header:not(.is-stuck) .nav__link:hover,
  .has-hero .site-header:not(.is-stuck) .nav__link.is-current { color: var(--ink-invert); }
  .has-hero .site-header:not(.is-stuck) .nav__link::after { background: var(--gold-light); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Wortmarke: Palast-Signet + Schriftzug */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.4rem;
  text-decoration: none;
}
.brand__mark {
  width: auto;
  height: 38px;
  flex: none;
  transition: opacity var(--dur) var(--ease);
}
.brand__mark--light { display: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* Die Wortmarke darf nie umbrechen („China-" / „Palast") */
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 4px;
}
/* Fußzeile: goldene Variante auf dunklem Grund */
.brand--light .brand__mark--dark { display: none; }
.brand--light .brand__mark--light { display: block; }
.brand--light .brand__name { color: var(--ink-invert); }
.brand--light .brand__sub { color: var(--gold-light); }

.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.15rem;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.25rem;
  width: 100%; height: 1px;
  background: var(--lacquer);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--lacquer); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
}
.nav-toggle__bar {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(26,22,19,.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav-scrim.is-open { opacity: 1; }

/* ---------- 6. Hero ---------- */
/* Der Hero steht auf dem Wok-Foto. Das Foto liegt als Hintergrund, nicht als
   <img>: Es trägt keine Bildaussage, die eine Alternative bräuchte, und der
   Text soll ohne Überlagerungsschichten darauf sitzen.
   Über dem Foto liegen zwei Schleier, in dieser Reihenfolge:
   1. ein Verlauf von links, der die Textspalte abdunkelt — der Wok sitzt rechts
      der Mitte und bleibt dadurch frei,
   2. ein Verlauf von oben und unten, der den Kopfbereich für den hellen Header
      und den Fuß zum anschließenden dunklen Laufband hin schließt.
   Die Deckung der Schleier ist am Foto gemessen, nicht geschätzt: gerechnet
   über die Textflächen ergibt sich für --ink-invert auf 1440 px mindestens
   7.4:1 (Titel) und für --gold-light 7.5:1 (Eyebrow, Fakten-Label); unter
   900 px sind es 8.9:1 bzw. 5.5:1. Wer das Foto tauscht, muss neu messen —
   die kleine Schrift in Gold ist die knappste Stelle. */
.hero {
  position: relative;
  padding-top: clamp(8rem, 17vw, 12rem);
  padding-bottom: clamp(3.5rem, 8vw, var(--sp-8));
  background-color: var(--char);
  background-image:
    linear-gradient(180deg, rgba(20,17,15,.62) 0%, rgba(20,17,15,0) 34%, rgba(20,17,15,0) 62%, rgba(20,17,15,.72) 100%),
    linear-gradient(96deg, rgba(20,17,15,.90) 0%, rgba(20,17,15,.78) 38%, rgba(20,17,15,.42) 62%, rgba(20,17,15,.30) 100%),
    url("../assets/wok-nudeln.jpg");
  background-repeat: no-repeat;
  background-position: center, center, 62% center;
  background-size: cover, cover, cover;
  color: var(--ink-invert);
  overflow: hidden;
}
/* Unter 900 px steht der Text mittig über dem Wok — dort deckt der Verlauf von
   links nicht mehr, deshalb ein gleichmäßiger Schleier über die ganze Fläche. */
@media (max-width: 899px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(20,17,15,.70) 0%, rgba(20,17,15,.62) 45%, rgba(20,17,15,.80) 100%),
      linear-gradient(0deg, rgba(20,17,15,.42), rgba(20,17,15,.42)),
      url("../assets/wok-nudeln.jpg");
    background-position: center;
  }
}

.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

.hero__title {
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-3);
  color: var(--ink-invert);
  font-variation-settings: "SOFT" 12, "WONK" 1;
}
.hero__title-line { display: block; }
.hero__title-line--indent { padding-left: clamp(0rem, 4vw, 2.6rem); }
/* Auf dunklem Grund trägt Lackrot keinen Kontrast — der Akzent geht auf Gold. */
.hero__title em { font-style: italic; color: var(--gold-light); }

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-invert-soft);
  max-width: 44ch;
  margin-bottom: var(--sp-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(246,241,232,.28);
}
.fact dt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.25rem;
}
.fact dd {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-invert);
  font-variant-numeric: tabular-nums;
}
.fact dd a {
  position: relative;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(246,241,232,.45);
}
.fact dd a:hover { border-color: var(--gold-light); color: var(--gold-light); }
/* Tippfläche auf 44px vergrößern, ohne die Zeilenhöhe zu verändern */
.fact dd a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Das Siegel füllt die zweite Spalte des Hero-Rasters — dort, wo vorher die
   beiden Fotoplatzhalter standen. Unter 900 px entfällt es (Abschnitt 16),
   sobald die Navigation zum Burger wird. */
.hero__stamp {
  align-self: center;
  justify-self: start;
  margin: 0;
  width: clamp(96px, 13vw, 138px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--lacquer);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.1vw, 1.28rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-md);
}
.hero__stamp span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 3px;
}
@media (min-width: 900px) {
  .hero__stamp { justify-self: center; }
}

/* ---------- 7. Laufband ---------- */
.ticker {
  overflow: hidden;
  background: var(--char);
  color: var(--ink-invert-soft);
  padding-block: 0.85rem;
  border-block: 1px solid var(--rule-dark);
}
.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker 46s linear infinite;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  white-space: nowrap;
}
/* Der Abstand sitzt bewusst innerhalb der Gruppe (gap) und an ihrem Ende
   (padding), nicht als gap auf dem Track: nur so ist die Gruppenbreite exakt
   der Weg, den die Animation zurücklegt, und die Naht bleibt unsichtbar. */
.ticker__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: 1.6rem;
  padding-inline-end: 1.6rem;
}
.ticker__track i { color: var(--gold); font-style: normal; font-size: 0.55rem; }
.ticker__track .zh {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--gold-light);
  margin-left: 0.45rem;
}
/* -25 % = eine von vier Gruppen (index.html:165) — siehe Kommentar dort. */
@keyframes ticker { to { transform: translateX(-25%); } }

/* ---------- 8. Über uns ---------- */
.story__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 960px) {
  .story__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.story__media { position: relative; }
.story__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
/* 3/4 ist das Format der Aufnahme — so steht sie unbeschnitten in der Kachel */
.story__fig--tall { box-shadow: var(--shadow-md); aspect-ratio: 3/4; }
.story__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 960px) {
  .story__media { position: sticky; top: 120px; }
}

.pillars {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 640px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
}
.pillar {
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}
.pillar__icon {
  width: 26px; height: 26px;
  fill: none; stroke: var(--lacquer);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 0.6rem;
}
.pillar h3 {
  font-size: var(--step-0);
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0;
  margin-bottom: 0.3rem;
}
.pillar p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ---------- 9. Buffet & Preise ---------- */
.prices {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
@media (min-width: 860px) {
  /* Gleiche Höhe für alle drei Karten — die Listen sitzen unten bündig */
  .prices { grid-template-columns: repeat(3, 1fr); }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  background: var(--bone);
  /* Die Karte steht auf dunklem Grund — Textfarbe zurücksetzen */
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.price-card--featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}
/* Die Karte hebt sich unter dem Zeiger an, der Schatten wächst mit.
   Zwei Eigenheiten, die beim Ändern zu beachten sind:

   1. Die Anhebung läuft über `translate`/`scale`, nicht über `transform`.
      `transform` gehört hier dem Scroll-Reveal (css/style.css:1692) — beide
      auf derselben Eigenschaft würden sich gegenseitig überschreiben.
   2. Deshalb muss auch die Transition erneut gesetzt werden: `.reveal` bringt
      eine eigene mit, die nur `opacity` und `transform` kennt. Die Liste hier
      führt beide Seiten zusammen — Einblenden weiter in `--dur-reveal` samt
      gestaffelter `--reveal-delay`, Hover in den schnellen `--dur`.

   `.prices` davor ist nötig, um `.reveal` zu schlagen; `hover: hover` hält den
   Zustand von Touchgeräten fern, wo er nach dem Tippen hängen bliebe. Die 3 %
   Zuwachs bleiben unter dem Rasterabstand (--sp-2), die Karten überlappen sich
   also nicht; `z-index` legt die angehobene Karte über die Schatten der
   Nachbarn. */
.prices .price-card {
  transition:
    opacity var(--dur-reveal) var(--ease) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease) var(--reveal-delay, 0ms),
    translate var(--dur) var(--ease),
    scale var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .prices .price-card:hover {
    translate: 0 -5px;
    scale: 1.03;
    box-shadow: var(--shadow-lg);
    z-index: 1;
  }
}
@media (min-width: 860px) {
  /* Der Empfehlungstarif steht sichtbar, aber ohne Sprung im Raster */
  .price-card--featured { padding-block: var(--sp-4); }
}

.price-card__tag {
  position: absolute;
  top: 0; left: var(--sp-3);
  transform: translateY(-50%);
  padding: 0.2rem 0.7rem;
  background: var(--lacquer);
  color: #FFF7F1;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.price-card__title {
  font-size: var(--step-2);
  margin-bottom: 0.15rem;
}
.price-card__when {
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-2);
}
.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3rem);
  line-height: 1;
  font-weight: 500;
  color: var(--lacquer);
  font-variant-numeric: tabular-nums;
}
.price-card__amount small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.price-card__per {
  margin: 0.4rem 0 var(--sp-2);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.price-card ul {
  list-style: none;
  margin: auto 0 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.5rem;
}
.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.price-card li .icon {
  width: 16px; height: 16px;
  margin-top: 4px;
  stroke: var(--gold-ink);
  stroke-width: 2;
}

.buffet__note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--step--1);
  color: var(--ink-invert-soft);
  max-width: 68ch;
}
.buffet__note strong { color: var(--ink-invert); }
.buffet__note a { color: var(--gold-light); text-underline-offset: 3px; }

/* ---------- 10. Speisekarte ---------- */
/* Die Gerichte stehen nicht mehr auf der Seite, sondern im PDF unter
   assets/speisekarte.pdf. Übrig bleibt der Kopf des Abschnitts und die
   Schaltfläche dorthin — bewusst ohne Karte, Bild oder Beiwerk. Was das PDF
   enthält, sagt die section__note im Kopf. */
/* Der Abschnitt behält die Abstände von .section, obwohl nur eine Schaltfläche
   darin steht. Ein kürzeres padding-block war ausprobiert und wieder verworfen:
   Es machte den Abschnitt zum einzigen engen im Fluss, und genau das fällt
   zwischen den großzügigen Nachbarn auf. */
/* position trägt das Licht weiter unten */
.menu { background: var(--bone-deep); position: relative; }

/* Der Allergenhinweis steht nicht mehr eigenständig darunter, sondern in der
   section__note im Kopf — zweimal dasselbe neben einer einzelnen Schaltfläche
   war zu viel. */
.menu__cta { display: inline-flex; }
@media (max-width: 560px) {
  .menu__cta { display: flex; }
}

/* Das Licht am Zeiger (js/main.js, Modul 7). Es liegt als eigene Ebene über der
   Fläche, aber unter dem Inhalt, und ist zeigerdurchlässig — die Schaltfläche
   bleibt erreichbar. Die Position kommt als --mx/--my aus dem Modul.
   Der Kern hebt den Grund fast auf --paper an, der Hof darum trägt Gold: auf
   dem warmen --bone-deep liest sich das als Licht, nicht als Fleck. */
.menu__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease);
  background: radial-gradient(
    circle 170px at var(--mx, 50%) var(--my, 50%),
    rgba(255, 253, 249, 0.5),
    rgba(216, 183, 120, 0.08) 46%,
    rgba(169, 129, 66, 0) 78%);
}
.menu.is-lit .menu__glow { opacity: 1; }
.menu > .shell { position: relative; z-index: 1; }

/* ---------- 11. Galerie ---------- */
.gallery {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Alle vier Aufnahmen sind hochkant; die Kacheln tragen ihr Format, damit
   nichts beschnitten wird. */
.gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone-deep);
  aspect-ratio: 3/4;
}
.gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Die Kacheln heben beim Überfahren wie die Preiskarten im Buffet — dieselben
   Werte, damit sich beides gleich anfühlt. `translate`/`scale` statt
   `transform`: das fährt schon die Einblendung (Abschnitt 15) und wäre sonst
   überschrieben. Die dritte Klasse ist nötig, um `.gallery .reveal` dort zu
   schlagen — sonst liefe das Anheben in der Dauer der Einblendung (760 ms)
   statt in `--dur`. `hover: hover` hält den Zustand von Touchgeräten fern, wo
   er nach dem Tippen hängen bliebe; `z-index` legt die angehobene Kachel über
   die Schatten der Nachbarn. */
.gallery .gallery__item.reveal {
  transition:
    opacity var(--dur-reveal-lg) var(--ease) var(--reveal-delay, 0ms),
    transform var(--dur-reveal-lg) var(--ease) var(--reveal-delay, 0ms),
    translate var(--dur) var(--ease),
    scale var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .gallery .gallery__item:hover {
    translate: 0 -5px;
    scale: 1.03;
    box-shadow: var(--shadow-lg);
    z-index: 1;
  }
}

/* ---------- 12. Kontakt ---------- */
.kontakt__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 960px) {
  .kontakt__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.kontakt__cards { display: grid; gap: var(--sp-2); align-content: start; }

.info-card {
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.info-card__title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--sp-2);
}
.info-card__note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td {
  padding: 0.45rem 0;
  font-size: var(--step--1);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.hours th { font-weight: 500; color: var(--ink-soft); }
.hours td {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--lacquer); }
.hours tr.is-today th::after {
  content: "Heute";
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* Ruhetag bleibt auch als „heute" ruhig — Rot ist hier keine Warnung */
.hours tr.is-closed td { color: var(--ink-faint); font-weight: 500; }
.hours tr.is-closed.is-today th, .hours tr.is-closed.is-today td { color: var(--ink-soft); }

.address { font-style: normal; line-height: 1.7; color: var(--ink-soft); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-2);
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--lacquer);
  /* Unterstreichung am Text, nicht am 44px hohen Klickfeld */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.contact-list li { display: flex; align-items: center; gap: 0.7rem; }
/* Die E-Mail-Adresse steht als Klartext (Spamschutz) und teilt sich
   Größe und Ausrichtung mit den verlinkten Zeilen — nur die
   Unterstreichung bleibt dem Link vorbehalten. */
.contact-list a,
.contact-list__text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 500;
  word-break: break-word;
}
.contact-list a {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.contact-list a:hover { color: var(--lacquer); text-decoration-color: currentColor; }

.kontakt__map {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  background: var(--bone-deep);
}
/* Die Karte legt sich über den Platzhalter, bis dieser entfernt wird */
.kontakt__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bone-deep);
  filter: saturate(.78) contrast(.96);
}

/* Platzhalter vor dem Laden der Karte */
.map-consent {
  height: 100%;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  /* dezentes Straßenraster als Andeutung eines Stadtplans */
  background-color: var(--bone-deep);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    linear-gradient(115deg, transparent 47%, var(--rule-strong) 47%, var(--rule-strong) 48%, transparent 48%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
}
.map-consent__pin {
  width: 34px; height: 34px;
  fill: none; stroke: var(--lacquer);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.map-consent__title {
  font-size: var(--step-1);
  margin-bottom: 0.1rem;
}
.map-consent__text {
  max-width: 40ch;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}
.map-consent .link-arrow { margin-top: 0.25rem; }

/* ---------- 13. Footer ---------- */
.site-footer {
  background: var(--char);
  color: var(--ink-invert-soft);
  padding-top: var(--sp-6);
  padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
}
.footer__grid {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: var(--sp-5); }
}

.footer__brand p {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: 34ch;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: var(--sp-2);
}

.footer__nav ul, .footer__links {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.1rem;
}
.footer__nav a, .footer__links a {
  /* volle Spaltenbreite: kurze Wörter wie „Buffet" bleiben sonst zu schmal zum Tippen */
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-invert-soft);
  transition: color var(--dur) var(--ease);
  word-break: break-word;
}
.footer__nav a:hover, .footer__links a:hover { color: var(--gold-light); }

.footer__col .address { color: var(--ink-invert-soft); font-size: var(--step--1); }
.footer__links { margin-top: 0.5rem; }

.footer__hours {
  font-size: var(--step--1);
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}
.footer__hours span { color: var(--ink-invert); font-weight: 600; }
.footer__hours em { font-style: normal; color: var(--gold-light); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule-dark);
  font-size: 0.8rem;
}
.footer__bar p { margin: 0; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0; padding: 0;
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__legal a:hover { color: var(--gold-light); }

/* ---------- 14. Rechtliche Seiten ---------- */
.legal { padding-top: clamp(7rem, 14vw, 10rem); }
.legal__body { max-width: 68ch; }
.legal__body h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.legal__body h3 {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  margin-top: var(--sp-3);
  margin-bottom: 0.4rem;
}
.legal__body p, .legal__body li { color: var(--ink-soft); }
.legal__body ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; margin-bottom: var(--sp-2); }
.legal__body a { color: var(--lacquer); }
.legal__note {
  padding: var(--sp-2);
  margin-bottom: var(--sp-4);
  background: var(--bone-deep);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: var(--step--1);
}

/* ---------- 15. Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

/* Die Galerie kommt kräftiger herein als der Rest der Seite: die Kachel zieht
   aus 40 px hoch, das Foto zoomt darin von 1.06 auf 1 zurück. Den Abstand von
   120 ms je Bild gibt `data-reveal-step` am `.gallery`-Container vor, den
   js/main.js (Modul 4) ausliest. Zwei getrennte Bewegungen, damit die Kachel
   ihre Nachbarn nicht überlappt — der Zoom bleibt hinter `overflow: hidden`. */
.gallery .reveal {
  transform: translateY(40px);
  transition-duration: var(--dur-reveal-lg);
}
.gallery__img {
  transform: scale(1.06);
  transition: transform var(--dur-reveal-lg) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.gallery .reveal.is-visible .gallery__img { transform: none; }
html.no-js .gallery__img { transform: none; }

/* ---------- 16. Responsive: Navigationsschublade ---------- */
@media (max-width: 899px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    /* Kein bottom:0 — der Header trägt im Sticky-Zustand einen backdrop-filter
       und wird dadurch zum umgebenden Block. Die Schublade würde sonst auf
       Headerhöhe zusammenschrumpfen. Feste Höhe löst das in beiden Zuständen. */
    top: 0; right: 0; bottom: auto; left: auto;
    height: 100vh;
    height: 100dvh;
    width: min(84vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: calc(env(safe-area-inset-top) + 5.5rem) var(--sp-3) var(--sp-4);
    background: var(--bone);
    box-shadow: -10px 0 40px rgba(28,26,23,.16);
    transform: translateX(100%);
    transition: transform 300ms var(--ease);
    overflow-y: auto;
    z-index: var(--z-header);
    visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    /* block statt inline-block: Trennlinie und Tippfläche über die volle Breite */
    display: block;
    padding: 0.95rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: var(--sp-2); }

  .site-header { z-index: calc(var(--z-header) + 1); }
  .nav-toggle { position: relative; z-index: calc(var(--z-header) + 2); }
}

@media (max-width: 899px) {
  /* Ab hier trägt der Header den Burger. Das Siegel säße dann linksbündig
     unter den Eckdaten und wiederholte nur den Preis, der im Abschnitt
     „Buffet" ohnehin gross auf den Preiskarten steht. */
  .hero__stamp { display: none; }

  /* Der Hero steht auf dem Handy mittig. Ohne das Siegel hat der Text keine
     zweite Spalte mehr, gegen die er sich ausrichten müsste; auf schmalen
     Geräten liest sich eine gemeinsame Mittelachse ruhiger als eine linke
     Kante, an der Titel, Knöpfe und Eckdaten unterschiedlich weit auslaufen. */
  .hero__copy { text-align: center; }
  /* .eyebrow ist ein Flex-Element mit Strich davor — text-align greift dort
     nicht, die Achse muss über justify-content kommen. */
  .hero .eyebrow { justify-content: center; }
  /* Die Einrückung der zweiten Titelzeile setzt eine linke Kante voraus und
     verschöbe die Zeile sonst aus der Mitte. */
  .hero__title-line--indent { padding-left: 0; }
  /* Beide Schaltflächen über die volle Breite: grössere Tippfläche und eine
     klare Kante, statt zweier unterschiedlich breiter Knöpfe in der Mitte. */
  .hero__actions { flex-direction: column; align-items: stretch; }

  /* Weniger Polsterung, damit der Titel höher sitzt. Nicht weiter herunter:
     Der Header liegt fest über dem Hero und ist hier 83 px hoch — bei 7rem
     bleiben knapp 30 px Luft, bevor der Kicker darunter rutscht. */
  .hero { padding-top: 7rem; }

  /* Die Eckdaten stehen nebeneinander statt untereinander: gestapelt kosten
     sie auf 390 px 231 px Höhe und drängen Kicker und Titel nach oben aus dem
     Bild — nebeneinander sind es 93 px. Feste drei Spalten, nicht `auto-fit`:
     das legt bei dieser Breite sonst zwei Spalten an und lässt die dritte
     allein in der zweiten Reihe stehen. Der Spaltenabstand geht auf --sp-2
     zurück, damit die Werte mehr Raum haben; die Zeitspannen tragen je ein
     `.nowrap`, brechen also sauber zwischen den beiden Spannen um. */
  .hero__facts {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--sp-2);
  }
}

@media (max-width: 560px) {
  /* Ohne Führungspunkte schiebt der Preis sich selbst an den rechten Rand */
  .dish__leader { display: none; }
  .dish__price { margin-left: auto; padding-left: 0.5rem; }
}

/* ---------- 17. Reduzierte Bewegung & Druck ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .gallery__img { opacity: 1 !important; transform: none !important; }
  .ticker__track { animation: none; }
  .btn:hover { transform: none; }
  .prices .price-card:hover { translate: none; scale: none; }
  .gallery .gallery__item:hover { translate: none; scale: none; }
}

@media print {
  .site-header, .nav-scrim, .ticker, .hero__stamp,
  .kontakt__map, .site-footer { display: none !important; }
  body { background: #fff; }
  /* Das Wok-Foto samt Schleier fällt im Druck weg — sonst schwarze Fläche */
  .hero { background: none !important; padding-top: var(--sp-4); }
  .hero .eyebrow, .hero__title, .hero__title em,
  .hero__lede, .hero .fact dt, .hero .fact dd { color: #000 !important; }
  .reveal, .gallery__img { opacity: 1; transform: none; }
  .section--dark, .section--dark * { color: #000 !important; }
  .section--dark::before { display: none; }
  .price-card { break-inside: avoid; }
}