@charset "UTF-8";
/* ===================================================================
   WILFER's 1619 – Entwurf
   Farben und Typografie sind am Bestand (Avada) gemessen und in
   content.md dokumentiert. Alles, was später aus den Globalen
   Einstellungen kommt, steht hier als Token in :root – im Redaxo-
   Template werden genau diese Werte aus glob_* befüllt.
   =================================================================== */

:root {
  /* --- Marke ------------------------------------------------------ */
  --gold:        #bda16b;   /* Markengold – auf dunklem Grund (7,9:1 auf #0b0b0b) */
  --gold-hell:   #d3bd91;   /* für dunkle Flächen, wenn das Gold leuchten soll */
  /* Das Markengold hat auf Weiß nur 2,5:1 und taugt dort nicht als Textfarbe.
     Diese abgedunkelte Fassung kommt auf 5,5:1 und erfüllt AA auch bei den
     kleinen versalen Kickern. */
  --gold-dunkel: #7d6539;

  --schwarz:     #000000;
  --tiefschwarz: #0b0b0b;   /* Sektionsgrund, minimal weicher als reines Schwarz */
  --kohle:       #161616;
  --grau-700:    #333333;
  --grau-600:    #545454;
  --grau-500:    #828282;
  --grau-300:    #bebdbd;
  --grau-200:    #d6d6d6;
  --grau-050:    #f4f2ee;   /* warmes Papierweiß */
  --weiss:       #ffffff;

  /* --- Rollen ----------------------------------------------------- */
  --grund:       var(--weiss);
  --text:        var(--schwarz);
  --text-leise:  var(--grau-600);
  --linie:       var(--grau-200);

  /* --- Schrift ---------------------------------------------------- */
  --f-display: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  --f-ui:      "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-text:    "Lora", Georgia, "Times New Roman", serif;

  /* Typoskala – fluid, obere Werte entsprechen dem Bestand (H1 70px) */
  --t-hero:  clamp(2.9rem, 1.5rem + 5.6vw, 6.6rem);
  --t-h1:    clamp(2.6rem, 1.4rem + 5.2vw, 5.5rem);
  --t-h2:    clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);
  --t-h3:    clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  --t-kicker: 0.9375rem;                     /* 15px, wie Bestand */
  --t-body:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* bis 19px */

  /* --- Maße ------------------------------------------------------- */
  --breite:      1375px;                     /* site_width des Bestands */
  --breite-text: 62ch;
  --rand:        clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
  --luft:        clamp(4.5rem, 2rem + 9vw, 10rem);
  --navi-h:      72px;

  /* Sichere Bereiche des Geräts (iPhone-Notch bzw. Dynamic Island, abgerundete
     Ecken, Home-Indikator). Über eigene Variablen geführt, damit sich das
     Verhalten prüfen lässt, indem man sie überschreibt.
     Erst zusammen mit viewport-fit=cover im <meta> liefert env() Werte > 0. */
  --sicher-oben:   env(safe-area-inset-top, 0px);
  --sicher-unten:  env(safe-area-inset-bottom, 0px);
  --sicher-links:  env(safe-area-inset-left, 0px);
  --sicher-rechts: env(safe-area-inset-right, 0px);

  /* Höhe der Kopfleiste inklusive Notch – Bezug für alle klebenden Elemente */
  --kopf-h: calc(var(--navi-h) + var(--sicher-oben));

  /* Seitenränder, die im Querformat den abgerundeten Ecken ausweichen */
  --rand-links:  max(var(--rand), var(--sicher-links));
  --rand-rechts: max(var(--rand), var(--sicher-rechts));

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-sanft: cubic-bezier(.25, .46, .45, .94);
}

/* ===================================================================
   Grundlagen
   =================================================================== */

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

html {
  /* overflow-x:hidden würde hier einen Scroll-Container erzeugen und
     scrollgesteuerte Effekte aushebeln – clip tut das nicht. */
  overflow-x: clip;
  /* Diese Farbe füllt am iPhone alles, was nicht der Seiteninhalt ist:
     die Fläche hinter Notch und Statusleiste, die Ränder im Querformat und
     den Überzieh-Bereich beim Gummiband-Scrollen. Sie ist deshalb auf den
     Hero abgestimmt (der oben steht) – der Fuß unten ist ebenfalls schwarz. */
  background: var(--schwarz);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.75;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* <picture> verschwindet aus dem Layout, damit Regeln wie
   ".story-bild img { height:100% }" den Container treffen und nicht das
   inline gesetzte <picture> dazwischen. */
picture { display: contents; }

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

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--schwarz); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 2000;
  background: var(--schwarz); color: var(--weiss);
  padding: .75rem 1.25rem;
  font-family: var(--f-ui); font-size: .875rem;
  letter-spacing: .09em; text-transform: uppercase;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ===================================================================
   Bausteine
   =================================================================== */

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
}
.wrap--schmal { max-width: 900px; }

/* Die Kopfleiste liegt fest über dem Inhalt – ohne diesen Abstand landet
   jeder Ankersprung darunter. Mit Notch fehlt entsprechend mehr. */
main > section[id],
main [id]:target { scroll-margin-top: var(--kopf-h); }

.sektion { padding-block: var(--luft); position: relative; }
.sektion--dunkel { background: var(--tiefschwarz); color: var(--grau-200); }
.sektion--dunkel h1, .sektion--dunkel h2, .sektion--dunkel h3 { color: var(--weiss); }
.sektion--papier { background: var(--grau-050); }
.sektion--eng { padding-block: calc(var(--luft) * .6); }

/* Kicker – Work Sans, versal, gesperrt; mit kurzer Goldlinie davor */
.kicker {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-dunkel);
  margin: 0 0 1.4rem;
  line-height: 1.2;
}
.sektion--dunkel .kicker { color: var(--gold); }
.kicker::before {
  content: ""; flex: 0 0 auto;
  width: 2.5rem; height: 1px;
  background: currentColor;
  transform-origin: left;
}
.kicker--mitte { justify-content: center; }
.kicker--mitte::after {
  content: ""; width: 2.5rem; height: 1px; background: currentColor;
}

.lead {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.6;
  color: var(--text-leise);
}
.sektion--dunkel .lead { color: var(--grau-300); }

.fliess { max-width: var(--breite-text); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-ui);
  font-size: .9375rem; font-weight: 400;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid currentColor;
  color: var(--text);
  background: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-sanft);
}
.btn:hover, .btn:focus-visible { color: var(--schwarz); border-color: var(--gold); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn .pfeil { transition: transform .35s var(--ease); }
.btn:hover .pfeil { transform: translateX(4px); }

.btn--gold { border-color: var(--gold); color: var(--gold); }
.sektion--dunkel .btn { color: var(--weiss); border-color: rgba(255,255,255,.4); }
.sektion--dunkel .btn:hover, .sektion--dunkel .btn:focus-visible {
  color: var(--schwarz); border-color: var(--gold);
}

/* Feine Goldlinie als Trenner */
.trenner {
  border: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: .5;
  margin: 0;
}

/* ===================================================================
   Kopfleiste
   =================================================================== */

.kopf {
  position: fixed; inset: 0 0 auto 0;
  z-index: 1000;
  /* Die Leiste reicht unter die Notch und schiebt ihren Inhalt darunter
     hervor – sonst läge das Logo hinter der Statusleiste. */
  height: var(--kopf-h);
  padding-top: var(--sicher-oben);
  display: flex; align-items: center;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease),
              box-shadow .4s var(--ease), height .4s var(--ease);
}
/* Über dem Hero transparent, danach mit Grund */
.kopf[data-gescrollt="ja"] {
  background: rgba(11, 11, 11, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(189, 161, 107, .28);
}

.kopf-innen {
  width: 100%; max-width: var(--breite);
  margin-inline: auto;
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}

.marke { flex: 0 0 auto; display: block; line-height: 0; }
.marke img {
  height: clamp(30px, 3.4vw, 42px); width: auto;
  transition: height .4s var(--ease);
}

.navi { margin-left: auto; }
.navi ul {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem);
  list-style: none; margin: 0; padding: 0;
}
.navi a {
  position: relative;
  display: inline-block;
  font-family: var(--f-ui);
  font-size: .875rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--weiss);
  padding: .35rem .15rem;
  isolation: isolate;
}
/* Marker-Effekt: Goldbalken über die unteren 42 % des Textes, hinter dem Text */
.navi a::after {
  content: ""; position: absolute; z-index: -1;
  left: -.25rem; right: -.25rem; bottom: .3rem;
  height: 42%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-sanft);
}
.navi a:hover::after,
.navi a:focus-visible::after,
.navi a[aria-current="page"]::after { transform: scaleX(1); }

.kopf-kontakt {
  display: flex; align-items: center; gap: .35rem;
  flex: 0 0 auto;
}
.kopf-kontakt a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--weiss);
  transition: color .3s var(--ease);
}
.kopf-kontakt a:hover { color: var(--gold); }
.kopf-kontakt svg { width: 18px; height: 18px; }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: .25rem;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--weiss);
  transition: transform .35s var(--ease), opacity .2s linear;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21.5px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.navi-mobil {
  position: fixed; inset: var(--kopf-h) 0 auto 0;
  background: var(--tiefschwarz);
  border-top: 1px solid rgba(189,161,107,.3);
  padding: 1.5rem var(--rand) 2.25rem;
  z-index: 999;
}
.navi-mobil[hidden] { display: none !important; }
.navi-mobil ul { list-style: none; margin: 0; padding: 0; }
.navi-mobil a {
  display: block;
  font-family: var(--f-display);
  font-size: 1.75rem;
  color: var(--weiss);
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navi-mobil a:hover { color: var(--gold); }

/* ===================================================================
   Hero
   =================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  background: var(--schwarz);
  overflow: hidden;
  isolation: isolate;
}
.hero-bild {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
.hero-bild img {
  width: 100%; height: 100%; object-fit: cover;
  /* Ken Burns: sehr langsam, damit es nicht nach Effekt aussieht */
  animation: kenburns 26s var(--ease-sanft) forwards;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.14) translate3d(1.2%, 1.4%, 0); }
  to   { transform: scale(1)    translate3d(0, 0, 0); }
}
.hero-bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 30%, rgba(0,0,0,.58) 62%, rgba(0,0,0,.92) 100%);
}

.hero-innen {
  position: relative;
  text-align: center;
  padding: calc(var(--kopf-h) + 1.5rem) var(--rand-rechts) 5.5rem var(--rand-links);
  max-width: 1100px;
}

.hero-logo {
  width: clamp(118px, 14vw, 186px);
  margin: 0 auto clamp(1.1rem, 2.2vw, 1.9rem);
}

.hero-kicker {
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-hell);
  margin: 0 0 1.1rem;
  padding-left: .34em;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}

.hero h1 {
  font-size: var(--t-hero);
  color: var(--weiss);
  margin: 0 0 1.35rem;
  line-height: .95;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}

.hero-sub {
  font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem);
  color: rgba(255,255,255,.82);
  max-width: 46ch; margin-inline: auto;
}

/* Scroll-Hinweis */
.hero-scroll {
  position: absolute; left: 50%; bottom: 2.25rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  font-family: var(--f-ui);
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
/* Am Handy wird gewischt statt gescrollt – gleiche Grenze wie beim
   übrigen mobilen Satz. */
.hero-scroll .nur-schmal { display: none; }

.hero-scroll::after {
  content: ""; width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrolllinie 2.4s var(--ease-sanft) infinite;
  transform-origin: top;
}
@keyframes scrolllinie {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* Seitenkopf für Unterseiten */
.seitenkopf {
  position: relative;
  min-height: 62svh;
  display: grid; place-items: end start;
  background: var(--schwarz);
  overflow: hidden; isolation: isolate;
}
.seitenkopf .hero-bild::after {
  background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.82) 100%);
}
.seitenkopf-innen {
  width: 100%; max-width: var(--breite);
  margin-inline: auto;
  padding: calc(var(--kopf-h) + 4rem) var(--rand-rechts) clamp(3rem, 6vw, 5.5rem) var(--rand-links);
}
.seitenkopf h1 { color: var(--weiss); font-size: var(--t-h1); margin-bottom: .3em; }
.seitenkopf .lead { color: rgba(255,255,255,.8); max-width: 52ch; }

/* ===================================================================
   Küche: das Bild links wechselt mit dem Textabschnitt
   =================================================================== */

.story { background: var(--tiefschwarz); color: var(--grau-200); }
.story-raster {
  max-width: var(--breite); margin-inline: auto;
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.story-bild {
  position: sticky; top: calc(var(--kopf-h) + 4vh);
  height: min(74svh, 720px);
}

/* Die Lagen liegen deckungsgleich übereinander; sichtbar ist immer genau
   eine. Der Wechsel läuft über opacity, damit nichts springt. */
.story-stapel { position: absolute; inset: 0; overflow: hidden; }
.story-lage {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s var(--ease), transform 1.6s var(--ease-sanft);
}
.story-lage.ist-aktiv { opacity: 1; transform: scale(1); }
.story-lage img { width: 100%; height: 100%; object-fit: cover; }

/* Auf breiten Bildschirmen trägt der klebende Stapel die Bilder –
   die abschnittseigenen Bilder sind dort überflüssig. */
.story-schritt-bild { display: none; }

.story-text { padding-block: clamp(3rem, 10vh, 8rem); }
.story-schritt {
  min-height: 62svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 2rem;
}
.story-schritt h2 { color: var(--weiss); }
.story-schritt p { color: var(--grau-300); max-width: 46ch; }
.story-nummer {
  font-family: var(--f-display);
  font-size: 1.25rem; color: var(--gold);
  letter-spacing: .1em;
  margin-bottom: .9rem;
}

/* ===================================================================
   Dreiklang Essen / Trinken / Feiern
   =================================================================== */

.saeulen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.saeule {
  position: relative;
  display: flex; flex-direction: column;
}
.saeule-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--kohle);
}
.saeule-bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-sanft);
}
.saeule:hover .saeule-bild img { transform: scale(1.05); }
/* Die Original-Illustrationen der Bestandsseite. Sie tragen so viel Detail,
   dass sie Größe brauchen – als 54px-Piktogramm werden sie zu Matsch. */
.saeule-illu {
  width: clamp(112px, 10.5vw, 150px);
  height: auto;
  margin: -.25rem 0 1rem;
  transition: transform .6s var(--ease-sanft);
}
.saeule:hover .saeule-illu { transform: translateY(-4px) rotate(-2deg); }
.saeule h3 { margin-bottom: .45em; }
.saeule p { font-size: 1.0625rem; }

/* ===================================================================
   Formel
   =================================================================== */

.formel {
  text-align: center;
}
.formel-satz {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4rem);
  line-height: 1.15;
  color: var(--weiss);
  margin: 0 auto 1rem;
  max-width: 22ch;
}
.formel-satz .plus,
.formel-satz .gleich { color: var(--gold); }
.formel-ergebnis {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.8rem);
  color: var(--gold);
  line-height: 1.1;
  margin: 0 0 2.5rem;
}

/* ===================================================================
   Zahlenband (Kapazitäten)
   =================================================================== */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(189,161,107,.28);
  border-block: 1px solid rgba(189,161,107,.28);
}
.zahl {
  background: var(--tiefschwarz);
  padding: clamp(1.75rem, 3.5vw, 3rem) 1.25rem;
  text-align: center;
}
.gesamtzahl {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.zahl b {
  display: block;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.4rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.zahl span {
  display: block;
  font-family: var(--f-ui);
  font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grau-300);
  margin-top: .7rem;
}

/* ===================================================================
   Bild-und-Text-Blöcke
   =================================================================== */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.duo--gedreht .duo-bild { order: 2; }
.duo-bild { position: relative; overflow: hidden; }
.duo-bild img { width: 100%; }
.duo-bild--hoch { aspect-ratio: 4 / 5; }
.duo-bild--hoch img { height: 100%; object-fit: cover; }

/* Zwei versetzte Bilder.
   Nicht über :last-child selektieren: wegen `picture { display: contents }`
   ist jedes <img> letztes Kind SEINES <picture>, der Selektor träfe beide –
   dann werden beide absolut und der Container fällt auf Höhe 0 zusammen. */
.bildpaar { position: relative; }
.bildpaar .bildpaar-gross { width: 100%; }
.bildpaar .bildpaar-klein {
  position: absolute;
  right: -6%; bottom: -10%;
  width: 44%;
  border: 8px solid var(--grund);
}
.sektion--dunkel .bildpaar .bildpaar-klein { border-color: var(--tiefschwarz); }
.sektion--papier .bildpaar .bildpaar-klein { border-color: var(--grau-050); }

/* ===================================================================
   Galerie – läuft beim Scrollen seitwärts
   =================================================================== */

.galerie { background: var(--tiefschwarz); color: var(--grau-200); }
.galerie-buehne { position: relative; }
.galerie-kleber {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.galerie-spur {
  display: flex; gap: clamp(1rem, 2vw, 2rem);
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
  will-change: transform;
}
.galerie-spur figure {
  flex: 0 0 auto;
  width: clamp(240px, 30vw, 440px);
  margin: 0;
}
.galerie-spur img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
}
.galerie-spur figcaption {
  font-family: var(--f-ui);
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grau-500);
  margin-top: .85rem;
}
.galerie-kopf {
  padding: 0 var(--rand-rechts) clamp(2rem, 4vw, 3.5rem) var(--rand-links);
  max-width: var(--breite); margin-inline: auto; width: 100%;
}
.galerie-hinweis {
  font-family: var(--f-ui); font-size: .75rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--grau-500);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
}
/* Breit läuft die Spur beim Scrollen seitwärts, schmal wird gewischt –
   der Hinweis muss zum jeweiligen Modus passen. Die Umschaltpunkte sind
   dieselben, die den Modus setzen: 900px und prefers-reduced-motion. */
.galerie-hinweis .nur-schmal { display: none; }

/* Fallback: unter 900px normale horizontale Wischgalerie */
@media (max-width: 899.98px) {
  .galerie-hinweis .nur-breit { display: none; }
  .galerie-hinweis .nur-schmal { display: inline; }
  .galerie-buehne { height: auto !important; }
  .galerie-kleber { position: static; height: auto; padding-block: 0; }
  .galerie-spur {
    overflow-x: auto; scroll-snap-type: x mandatory;
    transform: none !important;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .galerie-spur figure { scroll-snap-align: start; width: 74vw; }
}

/* ===================================================================
   Speisekarte – Abschnitte als Swiper, Tabs zum Springen
   =================================================================== */

/* clip statt hidden: `overflow: hidden` würde hier einen Scroll-Container
   aufmachen und damit das sticky der Steuerleiste aushebeln. */
.karte { overflow: clip; }
/* Auf die Karte folgt mit "Das Haus" eine zweite helle Sektion. Ohne diese
   Haarlinie verschmelzen beide optisch zu einem Block. */
.karte + .sektion:not(.sektion--dunkel):not(.sektion--papier) {
  border-top: 1px solid var(--linie);
}
.karte-kopf { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.karte-buehne { position: relative; }

.karte-swiper { overflow: hidden; }
/* Ohne JS steht der erste Abschnitt einfach da – kein leerer Kasten. */
.karte-swiper:not(.swiper-initialized) .swiper-wrapper { display: block; }
.karte-swiper:not(.swiper-initialized) .karte-slide + .karte-slide { display: none; }

.karte-slide { height: auto; }
.karte-slide-innen {
  max-width: 880px;
  padding-right: clamp(0px, 2vw, 2rem);
}
.karte-slide h3 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  color: var(--text);
  margin-bottom: .12em;
}
.karte-gruppe-zusatz,
.karte-unterzusatz {
  font-family: var(--f-ui);
  font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-dunkel);
  margin: 0 0 1.75rem;
}
.karte-unterzusatz { margin: .35rem 0 1rem; font-size: .75rem; }

/* Steuerleiste über der Karte.
   Sie klebt beim Lesen unter der Kopfleiste, damit man aus einem langen
   Abschnitt heraus jederzeit weiterspringen kann. */
.karte-steuerung {
  position: sticky;
  top: var(--kopf-h);
  z-index: 40;
  display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
  padding: .6rem 0;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.karte-pfeil {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  /* Das reine Markengold käme auf Weiß nur auf 2,5:1 und läge damit unter
     der 3:1-Schwelle für Bedienelemente. Dieselbe Farbe wie die Preise. */
  color: var(--gold-dunkel);
  cursor: pointer;
  transition: color .3s var(--ease), opacity .3s var(--ease),
              transform .3s var(--ease);
}
.karte-pfeil:hover { color: var(--gold); }
.karte-pfeil--zurueck:hover { transform: translateX(-4px); }
.karte-pfeil--vor:hover { transform: translateX(4px); }
.karte-pfeil--vor svg { transform: scaleX(-1); }
.karte-pfeil svg { stroke-width: 1.5; }
.karte-pfeil[disabled] { opacity: .2; pointer-events: none; }

/* Abschnittswahl.
   Bewusst `static`: die Liste soll sich an der ganzen Steuerleiste ausrichten
   (die als sticky den Bezug stellt), nicht an der schmalen Knopfbreite –
   sonst wird sie auf dem Handy nur gut 200 px breit. */
.karte-wahl { position: static; flex: 1 1 auto; min-width: 0; }

.karte-wahl-knopf {
  width: 100%;
  /* Name, Zähler und Aufklapp-Pfeil bilden eine Einheit und stehen mittig
     zwischen den Pfeilen – rechts abgesetzt wirkte der Pfeil losgelöst. */
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  background: transparent; border: 0;
  padding: .6rem .25rem;
  font-family: var(--f-ui);
  font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
}
.karte-wahl-knopf:hover { color: var(--gold-dunkel); }
.karte-zaehler-name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.karte-zaehler-zahl {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.karte-wahl-pfeil {
  display: inline-flex;
  color: var(--gold-dunkel);
  transition: transform .3s var(--ease);
}
.karte-wahl-knopf[aria-expanded="true"] .karte-wahl-pfeil { transform: rotate(180deg); }

.karte-liste {
  position: absolute; top: calc(100% + .55rem);
  left: 50%; transform: translateX(-50%);
  width: min(100%, 620px);
  z-index: 50;
  background: var(--weiss);
  border: 1px solid var(--linie);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  padding: .5rem;
  max-height: min(60svh, 460px);
  overflow-y: auto;
}
.karte-liste[hidden] { display: none !important; }
.karte-liste ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px;
}
.karte-eintrag {
  width: 100%;
  display: block; text-align: left;
  background: transparent; border: 0;
  padding: .7rem .9rem;
  font-family: var(--f-ui);
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-leise);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.karte-eintrag:hover { background: var(--grau-050); color: var(--text); }
.karte-eintrag[aria-current="true"] {
  color: var(--gold-dunkel);
  background: var(--grau-050);
  font-weight: 500;
}

.karte-fuss {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  font-size: .9375rem;
  color: var(--text-leise);
  max-width: 70ch;
}
.karte-fuss a { color: var(--gold-dunkel); text-decoration: underline; }

/* Gerichte */
.gerichte { list-style: none; margin: 0; padding: 0; }
.gericht {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 1.25rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
}
.gericht:first-child { border-top: 1px solid var(--linie); }
.gericht .name {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  line-height: 1.15;
  color: var(--text);
}
.gericht .preis {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  color: var(--gold-dunkel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gericht .beschreibung {
  grid-column: 1 / -1;
  font-size: .9375rem; line-height: 1.55;
  color: var(--text-leise);
  margin: 0;
}
.gericht .zusatz {
  grid-column: 1 / -1;
  font-family: var(--f-ui);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-dunkel);
  margin: .3rem 0 0;
}

/* Getränke in Spalten */
.karte-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(2rem, 4vw, 4rem);
}
.karte-spalte h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--text);
  margin: 1.75rem 0 .6rem;
}
.liste-kompakt { list-style: none; margin: 0; padding: 0; }
.liste-kompakt li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 1rem;
  color: var(--text);
}
.liste-kompakt .preis {
  font-family: var(--f-ui); font-size: .875rem;
  color: var(--gold-dunkel); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hinweis-kasten {
  border-left: 2px solid var(--gold);
  padding: 1rem 0 1rem 1.5rem;
  margin: 2rem 0 0;
  font-style: italic;
  color: var(--text-leise);
}

/* ===================================================================
   Öffnungszeiten & Kontakt
   =================================================================== */

.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.zeiten { list-style: none; margin: 0; padding: 0; }
.zeiten li {
  display: flex; justify-content: space-between; gap: .35rem 1.5rem;
  flex-wrap: wrap;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
/* Reicht der Platz nicht, rutscht die Zeit in die nächste Zeile –
   der Tagesbereich ("Mittwoch – Sonntag") darf nicht zerrissen werden. */
.zeiten dt, .zeiten .tag { color: var(--grau-200); white-space: nowrap; }
.zeiten .zeit {
  font-family: var(--f-ui); letter-spacing: .04em;
  color: var(--weiss); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.zeiten li.ruhetag .zeit { color: var(--gold); }

.status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-ui);
  font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .5rem .9rem;
  border: 1px solid currentColor;
  margin-bottom: 1.75rem;
}
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.status[data-offen="ja"]   { color: #7fbf7f; }
.status[data-offen="nein"] { color: var(--grau-500); }

.kontaktzeile {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 0;
  color: var(--grau-200);
}
.kontaktzeile svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; }
.kontaktzeile a:hover { color: var(--gold); }

/* ===================================================================
   Fuß – bewusst schlank
   Öffnungszeiten und Kontakt stehen im Abschnitt darüber; hier stünden
   sie ein zweites Mal.
   =================================================================== */

.fuss {
  background: var(--schwarz);
  color: var(--grau-500);
  padding-block: clamp(2.5rem, 4vw, 3.5rem) calc(2rem + var(--sicher-unten));
  font-size: .875rem;
}
.fuss-zeile {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.fuss-marke { line-height: 0; }
.fuss-marke img { height: 46px; width: auto; }
.fuss-rechtliches {
  display: flex; gap: 1.75rem;
  margin-left: auto;
  font-family: var(--f-ui);
  font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase;
}
.fuss a:hover { color: var(--gold); }
.fuss-klein {
  margin: 1.5rem 0 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.75rem;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--grau-600);
}
.fuss-gestaltung { margin-left: auto; }
.fuss-gestaltung a { color: var(--grau-500); }
.fuss-gestaltung a:hover { color: var(--gold); }

/* ===================================================================
   Zurück nach oben
   Erscheint beim Hochscrollen und verschwindet beim Runterscrollen –
   die Richtung steuert das Skript über die Klasse .ist-da.
   =================================================================== */

.nach-oben {
  position: fixed;
  right: max(clamp(1rem, 2.5vw, 2.25rem), var(--sicher-rechts));
  bottom: calc(clamp(1rem, 2.5vw, 2.25rem) + var(--sicher-unten));
  z-index: 900;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(11, 11, 11, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(189, 161, 107, .5);
  color: var(--gold);
  cursor: pointer;
  /* visibility statt display: nimmt den Knopf aus der Tabreihenfolge,
     lässt die Ein- und Ausblendung aber weiterlaufen. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              visibility 0s linear .35s, background .3s var(--ease),
              color .3s var(--ease);
}
.nach-oben.ist-da {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              visibility 0s, background .3s var(--ease), color .3s var(--ease);
}
.nach-oben:hover { background: var(--gold); color: var(--schwarz); border-color: var(--gold); }

/* ===================================================================
   Scroll-Animationen
   Grundsatz: ohne JS ist alles sichtbar (.js setzt erst die Startwerte),
   und bei prefers-reduced-motion passiert gar nichts.
   =================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease) var(--verzug, 0s),
    transform .9s var(--ease) var(--verzug, 0s);
}
.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }

/* Bilder fahren unter einer Maske hervor */
.js [data-reveal="bild"] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-sanft) var(--verzug, 0s);
}
.js [data-reveal="bild"].ist-sichtbar { clip-path: inset(0 0 0 0); }

/* Headline zeilenweise aufziehen */
.js [data-reveal="zeilen"] { opacity: 1; transform: none; }
.zeile { display: block; overflow: hidden; }
.zeile > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-sanft) var(--verzug, 0s);
}
.js [data-reveal="zeilen"].ist-sichtbar .zeile > span { transform: none; }

/* Kickerlinie zieht sich auf */
.js .kicker::before,
.js .kicker--mitte::after { transform: scaleX(0); transition: transform .8s var(--ease-sanft) .15s; }
.js .kicker.ist-sichtbar::before,
.js .kicker--mitte.ist-sichtbar::after { transform: scaleX(1); }

/* Sanfter Parallax – wird per JS über --parallax gesteuert */
.parallax { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal="zeilen"] .zeile > span { transform: none !important; }
  .js .kicker::before, .js .kicker--mitte::after { transform: scaleX(1) !important; }
  .hero-bild img { animation: none; }
  .galerie-spur { transform: none !important; }
  .galerie-kleber { position: static; height: auto; }
  .galerie-buehne { height: auto !important; }
  .galerie-spur { overflow-x: auto; }
  .galerie-hinweis .nur-breit { display: none; }
  .galerie-hinweis .nur-schmal { display: inline; }
  .parallax { transform: none !important; }
}

/* ===================================================================
   Umbrüche
   =================================================================== */

@media (max-width: 1099.98px) {
  /* Einspaltig geht der klebende Stapel nicht auf: sein Bezug ist der
     Grid-Container, nicht die eigene Zeile – das Bild bliebe über dem
     gesamten Bereich stehen und der Text würde dahinter durchscrollen.
     Deshalb hier gestapelt: jedes Bild steht bei seinem Abschnitt. */
  .story-raster { grid-template-columns: 1fr; gap: 0; }
  .story-bild { display: none; }
  .story-schritt-bild {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 1.75rem;
    background: var(--kohle);
  }
  .story-schritt-bild img { width: 100%; height: 100%; object-fit: cover; }
  .story-text { padding-block: 0; }
  .story-schritt {
    min-height: 0;
    display: block;
    padding-block: 0 clamp(3rem, 8vw, 4.5rem);
  }
}

@media (max-width: 899.98px) {
  :root { --navi-h: 64px; }
  .navi { display: none; }
  .burger { display: block; margin-left: auto; }
  .kopf-kontakt { margin-left: 0; }
  .duo, .duo--gedreht .duo-bild { grid-template-columns: 1fr; order: 0; }
  .bildpaar .bildpaar-klein {
    position: static; width: 100%; border: 0; margin-top: 1rem;
  }
  .karte-pfeil { width: 48px; height: 48px; }
  .karte-wahl-knopf { font-size: .75rem; gap: .5rem; }
  .karte-liste ul { grid-template-columns: 1fr 1fr; }
  .karte-eintrag { padding: .65rem .6rem; letter-spacing: .04em; }
}

@media (max-width: 599.98px) {
  .kopf-kontakt a { width: 36px; height: 36px; }
  .fuss-rechtliches { margin-left: 0; width: 100%; }
  .fuss-gestaltung { margin-left: 0; }
}

/* ===================================================================
   Handy: Fließtext und Überschriften mittig
   Grenze bei 768px – auf Tabletbreite wirkt zentrierter Fließtext
   bereits unruhig. Preis- und Zeitenlisten bleiben ausdrücklich
   ausgenommen: dort tragen die beiden Spalten die Lesbarkeit.
   =================================================================== */

@media (max-width: 767.98px) {

  .hero-scroll .nur-breit { display: none; }
  .hero-scroll .nur-schmal { display: inline; }

  .sektion .wrap,
  .story-schritt,
  .saeule,
  .karte-kopf,
  .galerie-kopf,
  .kontakt-raster > div,
  .fuss { text-align: center; }

  /* Der Kicker trägt links eine kurze Linie – mittig gehört sie auf
     beide Seiten, sonst sitzt die Zeile sichtbar schief. Die Linien sind
     hier kürzer: mit 2,5rem je Seite bleibt für längere Kicker wie
     "Fein essen und trinken." zu wenig Platz und sie brechen um. */
  .kicker { justify-content: center; gap: .7rem; }
  .kicker::before, .kicker::after { width: 1.75rem; }
  .kicker::after {
    content: ""; flex: 0 0 auto;
    height: 1px; background: currentColor;
  }

  .lead, .fliess, .story-schritt p, .saeule p, .karte-fuss {
    margin-inline: auto;
  }

  .saeule-illu { margin-inline: auto; }

  .duo-bild, .bildpaar { margin-inline: auto; }

  .kontaktzeile { justify-content: center; }
  .kontaktzeile span { text-align: center; }

  .status { margin-inline: auto; }

  /* Der Hinweiskasten hängt sonst an einer linken Kante, die im
     zentrierten Satz ins Leere zeigt. */
  .hinweis-kasten {
    border-left: 0;
    border-top: 2px solid var(--gold);
    padding: 1.25rem 0 0;
    text-align: center;
  }

  .fuss-zeile { justify-content: center; }
  .fuss-marke { margin-inline: auto; }
  .fuss-rechtliches { justify-content: center; }
  .fuss-klein { justify-content: center; text-align: center; }

  /* Ausgenommen: zweispaltige Listen. Name links, Preis oder Zeit rechts –
     zentriert wäre nicht mehr zuzuordnen, welcher Preis zu welchem Gericht
     gehört. */
  .gericht,
  .gericht .beschreibung,
  .gericht .zusatz,
  .liste-kompakt li,
  .zeiten li,
  .karte-spalte,
  .karte-eintrag { text-align: left; }

  .karte-spalte h4,
  .karte-slide h3,
  .karte-gruppe-zusatz,
  .karte-unterzusatz { text-align: center; }
}