/* ================================================================
   VX4 OVERLAND — Design system (AURUM-inspired)
   ================================================================ */

/* ----------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------- */
:root {
  /* surfaces */
  --c-bg:        #000000;
  --c-bg-soft:   #0f0f10;
  --c-card:      #161617;
  --c-card-hi:   #1c1c1d;
  --c-card-line: #232325;

  /* ink */
  --c-ink:       #f4f1ec;
  --c-ink-2:     #b4b0a8;
  --c-ink-3:     rgba(244, 241, 236, 0.55);
  --c-ink-4:     rgba(244, 241, 236, 0.25);
  --c-line:      rgba(244, 241, 236, 0.08);

  /* Brand palette (from VX4 client guide)
     ------------------------------------
     #CBBD93  light sand  — primary warm accent (Sahara world)
     #BDAF8C  mid sand    — soft accent / borders
     #7E7A55  olive-dark  — secondary cool accent
     #636B2F  deep olive  — primary forest accent (Rennsteig world)
  */

  /* warm sand — Sahara world */
  --c-accent:      #cbbd93;
  --c-accent-soft: #bdaf8c;
  --c-accent-dim:  rgba(203, 189, 147, 0.7);

  /* olive / forest — Rennsteig world */
  --c-cool:        #636b2f;
  --c-cool-soft:   #7e7a55;
  --c-cool-dim:    rgba(99, 107, 47, 0.7);

  /* light surfaces (pure white floor) */
  --c-paper:       #ffffff;
  --c-paper-soft:  #f5f5f4;
  --c-paper-line:  rgba(0, 0, 0, 0.10);
  --c-paper-line-soft: rgba(0, 0, 0, 0.06);
  --c-ink-dark:    #0a0a0a;
  --c-ink-dark-2:  #555555;
  --c-ink-dark-3:  rgba(0, 0, 0, 0.55);

  /* shape */
  --r-pill: 999px;
  /* Warenkorb und Menüknopf stehen in der Leiste nebeneinander und sind
     bis auf die Größe gleich gestaltet — gleicher Grund, gleiche Kante,
     gleicher Weichzeichner. Sie standen mit 57 und 46 px nebeneinander,
     was wie ein Versehen aussah. Eine Zahl für beide. */
  --nav-btn: 57px;
  --r-card: 18px;
  --r-card-lg: 28px;
  --r-tag: 999px;

  /* type stacks */
  /* Deckkraft des VX4-Musters. An einer Stelle, weil es an vier
     Stellen gebraucht wird: helle und dunkle Sektionen, Waldübergang
     und Waldkante im Footer. Auf dunklem Grund braucht es etwas mehr,
     dort arbeitet es aufhellend und wirkt bei gleicher Deckkraft
     schwächer. */
  --fc-pattern-light: 0.09;
  --fc-pattern-dark:  0.20;

  /* ---- Schriftgrößen -------------------------------------------
     Eine Leiter statt zwei Dutzend Einzelwerte. Vorher lagen zwischen
     9 px und 22 px sechzehn verschiedene Größen, die kleinsten Labels
     bei 9–10 px — auf einem normalen Bildschirm kaum lesbar und in der
     Summe unruhig. Jede Stufe hat jetzt eine Aufgabe, und unter 12 px
     geht nichts mehr.

       2xs  Mono-Labels, Eyebrows, Reiter
       xs   Meta-Zeilen, Datumsangaben
       sm   Hinweise, Bildunterschriften
       md   kleiner Fließtext in Karten
       base Fließtext
       lg   hervorgehobener Fließtext
       xl   kleine Überschriften
       2xl  Karten- und Block-Überschriften
       3xl  große Zahlen und Titel in Karten
     -------------------------------------------------------------- */
  --fs-2xs:  12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-md:   15px;
  --fs-base: 16px;
  --fs-lg:   17px;
  --fs-xl:   19px;
  --fs-2xl:  22px;
  --fs-3xl:  26px;
  --fs-4xl:  30px;

  --t-display: 'Inter', system-ui, sans-serif;
  --t-body:    'Inter', system-ui, sans-serif;
  --t-mono:    'JetBrains Mono', ui-monospace, monospace;
  --t-numeric: 'Inter', system-ui, sans-serif;

  /* layout */
  --gutter: 56px;
  --max-w:  1640px;
}

/* ----------------------------------------------------------------
   PRELOADER  — minimal spinner
   ---------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}
.preloader__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(244, 241, 236, 0.12);
  border-top-color: var(--c-accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .preloader__spinner { animation-duration: 2.5s; }
}

.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;
}

/* Lock scroll while the preloader is up */
body.is-loading { overflow: hidden; }

/* ----------------------------------------------------------------
   RESET
   ---------------------------------------------------------------- */
/* Smooth-scroll for in-page anchors — but respect reduced motion */
/* Höhe der fixen Leiste — die Ankersprünge rechnen damit, und sie ist
   auf drei Stufen unterschiedlich. Mit der Statusleiste, weil die Nav
   auf Geräten mit Notch selbst tiefer sitzt. */
:root { --nav-h: calc(124px + env(safe-area-inset-top, 0px)); }
@media (max-width: 860px) { :root { --nav-h: calc(114px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 700px) { :root { --nav-h: calc(98px  + env(safe-area-inset-top, 0px)); } }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 28px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--c-paper-soft);
  color: var(--c-ink);
  font-family: var(--t-body);
  font-weight: 450;             /* heavier default — body text was looking thin */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a       { color: inherit; text-decoration: none; }
ul, ol  { list-style: none; }
img     { display: block; max-width: 100%; }
button  { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
::selection { background: var(--c-accent); color: var(--c-bg); }

/* ----------------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------------- */
.accent     { color: var(--c-accent); font-style: italic; font-weight: 500; }
.eyebrow {
  display: inline-block;
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 28px;
  border-radius: var(--r-pill);
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .35s cubic-bezier(.7,0,.3,1),
              background .25s ease,
              color .25s ease,
              box-shadow .25s ease;
}

.btn--primary {
  background: var(--c-ink);
  color: var(--c-bg);
  box-shadow: 0 12px 36px rgba(244, 241, 236, 0.18);
}
.btn--primary:hover {
  background: var(--c-accent);
  color: var(--c-bg);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(212, 168, 136, 0.3);
}
.btn--primary svg { transition: transform .35s ease; }
.btn--primary:hover svg { transform: translateX(4px); }

.btn--ghost {
  background: rgba(244, 241, 236, 0.06);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}

/* ----------------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px var(--gutter);
  /* Drei Spalten statt flex mit absolut zentrierter Mitte. Die Menüpille
     hing vorher außerhalb des Flusses in der Mitte, die Leiste
     reservierte also keinen Platz für sie — bei 1280 px schob sich der
     Nav-Button „Campertreffen 2027" darüber. Im Raster hat die Mitte
     eine eigene Spur und kann nicht mehr überlagert werden. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  pointer-events: none;
  transition: background .35s ease,
              backdrop-filter .35s ease,
              border-color .35s ease,
              padding .35s ease;
}
.nav > * { pointer-events: auto; }
.nav::after {
  /* invisible at top; turns into a frosted glass bar once .is-scrolled.
     Dark-tinted blur so it works on BOTH light and dark sections — no
     awkward bright slab over the black slates. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background .35s ease,
              backdrop-filter .35s ease,
              -webkit-backdrop-filter .35s ease,
              border-color .35s ease;
}
.nav.is-scrolled::after {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.nav.is-scrolled { padding-top: 16px; padding-bottom: 16px; }

/* On the dark sections the inverted (black) logo would disappear over
   the dark frosted bar — undo the invert so it stays white. */
.nav.is-scrolled .nav__brand-img { filter: none; }
/* Centred nav-bar — absolute so it sits on the viewport mid-line,
   not on the mid-line of whatever Grid column it lived in before. */
.nav__links {
  /* In der mittleren Spur, dort mittig. Sieht aus wie vorher, kollidiert
     aber nicht mehr mit den Nachbarn. */
  justify-self: center;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  height: 56px;
  color: var(--c-ink);
}
.nav__brand-img {
  height: 100%;
  width: auto;
  display: block;
  /* Default (over the hero): warm sand glow that breathes — feels alive
     against the dark video background. */
  filter: drop-shadow(0 0 12px rgba(203, 189, 147, 0.30))
          drop-shadow(0 0 28px rgba(203, 189, 147, 0.18));
  animation: navBrandPulse 5s ease-in-out infinite;
  transition: filter .5s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav__brand:hover .nav__brand-img {
  transform: scale(1.04);
}
@keyframes navBrandPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(203, 189, 147, 0.25))
            drop-shadow(0 0 22px rgba(203, 189, 147, 0.12));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(203, 189, 147, 0.50))
            drop-shadow(0 0 36px rgba(203, 189, 147, 0.28));
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav__brand-img { animation: none; }
}

/* When scrolled past the hero: kill the glow and pulse. The logo stays
   white (no invert) because the frosted bar is dark — see .nav::after. */
.nav.is-scrolled .nav__brand-img {
  filter: none;
  animation: none;
}

/* ----- Glass-pill mixin via shared styles ---------------------- */
.nav__links,
.nav__socials,
.nav__cta {
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-pill);
}

/* ----- Main nav links — Dynamic-Island-style pill bar ---------- */
.nav__links {
  display: inline-flex;
  align-items: center;
  padding: 7px;
  gap: 2px;
}
.nav__links li { list-style: none; }
.nav__links a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  /* Etwas heller als --c-ink-2: Die Punkte stehen auf dunklem Glas und
     sollen auch ohne Pille gut lesbar sein. */
  color: rgba(244, 241, 236, 0.78);
  transition: color .3s ease;
}
.nav__links a.is-active           { color: var(--c-bg); }
.nav__links a:hover,
.nav__links a:focus-visible        { color: var(--c-bg); }
/* While the nav is being hovered, the active link gives up its dark text
   unless it's the one being hovered — so the white pill only ever sits
   under one black-text link at a time. */
.nav__links:hover a.is-active:not(:hover) { color: rgba(244, 241, 236, 0.78); }

/* Sliding indicator — white pill behind the active / hovered item */
.nav__links-indicator {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 7px;          /* JS overrides on load */
  width: 0;
  background: var(--c-ink);
  border-radius: var(--r-pill);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: left .4s cubic-bezier(.4, 0, .2, 1),
              width .4s cubic-bezier(.4, 0, .2, 1),
              opacity .25s ease;
}

/* ----- Right side: socials pill + camp pill -------------------- */
.nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__socials {
  display: inline-flex;
  align-items: center;
  padding: 7px;
  gap: 2px;
}
.nav__socials li { list-style: none; }
.nav__socials a {
  width: 43px; height: 43px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink-2);
  transition: color .25s ease, background .25s ease;
}
.nav__socials a:hover {
  color: var(--c-ink);
  background: rgba(244, 241, 236, 0.10);
}

/* ----- Camp CTA — exact same size/shape as the hero buttons -- */
.nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 7px 7px 7px 22px;
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  color: var(--c-ink);
  transition: background .35s ease,
              color .35s ease,
              border-color .35s ease,
              transform .35s cubic-bezier(.7, 0, .3, 1),
              box-shadow .35s ease;
}
.nav__cta-label { line-height: 1; white-space: nowrap; }
.nav__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-bg);
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.7, 0, .3, 1),
              background .35s ease, color .35s ease;
}
.nav__cta:hover {
  background: var(--c-accent);
  color: var(--c-bg);
  border-color: var(--c-accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(212, 168, 136, 0.32);
}
.nav__cta:hover .nav__cta-icon {
  background: var(--c-bg);
  color: var(--c-accent);
  transform: translateX(2px);
}

/* ================================================================
   FONTS — Inter only (900 for display, 400/500 for body, mono for tags)
   ================================================================
   Display titles use Inter 900 in uppercase with tight tracking — gives
   the bold editorial weight without bringing in another font file.
   ================================================================ */

/* Global display rule — applies to every title across the site */
.hero__title,
.slate__title,
.subhero__title,
.tour-card__title,
.footer__brand-mark {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  /* Notbremse. Die Größen unten sind so gewählt, dass die vorhandenen
     Überschriften passen — aber ein längeres Wort in einem neuen Titel
     würde sonst wieder über den Rand laufen, ohne dass es jemandem
     auffällt. Lieber getrennt als abgeschnitten. */
  overflow-wrap: break-word;
  /* 1.04 war für englische Versalien gesetzt. Deutsche Überschriften
     haben Ü, Ä, Ö — deren Pünktchen sitzen über der Versalhöhe und
     klebten bei zweizeiligen Titeln an der Zeile darüber („OBERHOF
     CAMPING / AM LÜTSCHSEE"). Bei 120 px blieben 11 px Luft, während
     die Pünktchen selbst nur 5 px über dem U stehen — sie lasen sich
     damit als Teil der oberen Zeile. 1.10 schafft 18 px und bleibt
     trotzdem eng. */
  line-height: 1.10;
}
/* em-words: NOT italic (italic Inter 900 looks brittle).
   They just shift to the accent colour — the colour change is the emphasis. */
.hero__title em,
.slate__title em,
.tour-card__title em {
  font-style: normal;
  font-weight: 900;
}

/* ================================================================
   HERO — geteilte Bühne für zwei Reisen
   ================================================================
   Drei Eigenschaften, die früher aneinanderhingen, sind hier getrennt:

     Position — .hero__panel--left / --right
     Farbwelt — .hero__panel--olive / --sand
     Quelle   — entscheidet das Widget, nicht das Stylesheet

   Vorher hießen die Klassen --rennsteig und --sahara und steuerten
   beides. Zwei Reisen mit derselben Farbe bekamen dadurch dieselbe
   Position und dieselben Hover-Selektoren.

   Alles Geteilte (.hero, .hero__bg, .hero__cta, .hero__sub) bleibt
   ungebunden — Forest Camp benutzt dieselbe Grundlage. Der geteilte
   Aufbau hängt durchweg an .hero--split.
   ================================================================ */

.hero {
  position: relative;
  background: var(--c-bg);
  overflow: hidden;
  isolation: isolate;
}

/* Bildfläche. Ob Bild oder Video steckt darin — nie ein leeres
   Videoelement als Bildersatz. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero__bg img,
.hero__bg video,
video.hero__bg,
img.hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--hero-focus, center);
  display: block;
}
.hero__bg--empty { background: linear-gradient(160deg, #15140f, #0a0a0a); }

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Typografie und Aktion — auch von Forest Camp genutzt. */
.hero__title {
  font-size: clamp(30px, 2.6vw, 44px);
  color: var(--c-ink);
  text-shadow: 0 4px 36px rgba(0, 0, 0, 0.6);
  line-height: 1.16;
  letter-spacing: -0.03em;
  margin: 0;
}
.hero__title > span {
  display: block;
  overflow-wrap: break-word;
}
.hero__sub {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(244, 241, 236, 0.92);
  max-width: 42ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  margin: 0;
}
.hero__status {
  display: inline-block;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 12px 26px;
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--c-ink);
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  text-decoration: none;
  transition: background .5s cubic-bezier(.16,.84,.25,1),
              border-color .5s cubic-bezier(.16,.84,.25,1),
              color .5s cubic-bezier(.16,.84,.25,1),
              transform .5s cubic-bezier(.16,.84,.25,1),
              box-shadow .5s cubic-bezier(.16,.84,.25,1);
}
.hero__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-bg);
  flex-shrink: 0;
  transition: transform .5s cubic-bezier(.16,.84,.25,1);
}
.hero__cta:hover .hero__cta-icon,
.hero__cta:focus-visible .hero__cta-icon { transform: translateX(4px); }

/* Nur im Editor sichtbar — öffentlich gibt es keine Resteflächen. */
.hero__hint {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(203, 189, 147, 0.14);
  border: 1px dashed rgba(203, 189, 147, 0.5);
  color: var(--c-accent);
  font-size: var(--fs-md);
  max-width: 44ch;
}

/* ----------------------------------------------------------------
   Der geteilte Aufbau
   ---------------------------------------------------------------- */
.hero--split {
  --edge: 60%;
  /* Mindesthöhe, keine feste: Ein langer Einstieg und ein zweizeiliger
     Reisetitel dürfen die Bühne wachsen lassen, statt sich zu
     überlagern. Früher stand hier height: 100vh und die Reisen wurden
     mit einem fest gerechneten padding-top nach unten geschoben. */
  min-height: min(100vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + clamp(20px, 4vh, 54px));
  transition: --edge .9s cubic-bezier(.4, 0, .2, 1);
}
@property --edge {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 60%;
}

.hero--split .hero__bg--left  { clip-path: inset(0 calc(100% - var(--edge)) 0 0); }
.hero--split .hero__bg--right { clip-path: inset(0 0 0 var(--edge)); }
.hero--split.hero--slots-1 .hero__bg { clip-path: none; }

/* Übernahme beim Überfahren — an der Position, nicht an einem
   Reisenamen. Zwei Reisen mit derselben Farbe stören sich dadurch
   nicht mehr gegenseitig. */
.hero--split:has(.hero__panel--right:hover) { --edge: 34%; }
.hero--split:has(.hero__panel--left:hover)  { --edge: 72%; }
.hero--split .hero__bg img,
.hero--split .hero__bg video {
  filter: saturate(0.92) contrast(1.04);
  transition: filter .9s cubic-bezier(.4, 0, .2, 1);
}
.hero--split:has(.hero__panel--right:hover) .hero__bg--left img,
.hero--split:has(.hero__panel--right:hover) .hero__bg--left video {
  filter: saturate(0.9) contrast(1.04) grayscale(1) brightness(0.55);
}
.hero--split:has(.hero__panel--left:hover) .hero__bg--right img,
.hero--split:has(.hero__panel--left:hover) .hero__bg--right video {
  filter: saturate(0.9) contrast(1.04) grayscale(1) brightness(0.55);
}

/* Abdunklung in drei Stufen — je heller das Bild, desto mehr braucht
   die Schrift. */
.hero--split .hero__veil {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, calc(0.30 * var(--hero-scrim, 1))) 0%,
      rgba(0, 0, 0, calc(0.14 * var(--hero-scrim, 1))) 30%,
      rgba(0, 0, 0, calc(0.72 * var(--hero-scrim, 1))) 100%);
}
/* Eigener Schleier hinter dem Einstieg. Der Verlauf oben ist für die
   Reisen unten gerechnet und dort, wo die Überschrift steht, am
   schwächsten — auf einem hellen Bild war sie damit kaum zu lesen. */
.hero__intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18% -6% -30%;
  pointer-events: none;
  background: radial-gradient(56% 74% at 50% 42%,
    rgba(0, 0, 0, calc(0.66 * var(--hero-scrim, 1))),
    rgba(0, 0, 0, 0) 74%);
}
.hero--scrim-soft   { --hero-scrim: 0.7; }
.hero--scrim-medium { --hero-scrim: 1; }
.hero--scrim-strong { --hero-scrim: 1.35; }

/* Gemeinsamer Einstieg — im Fluss, damit er echten Platz bekommt. */
.hero__intro {
  position: relative;
  z-index: 5;
  isolation: isolate;
  padding: 0 var(--gutter) clamp(24px, 4vh, 56px);
  text-align: center;
  /* Der Wechsel hängt am :hover der beiden Reisen — ein Element darüber
     würde ihn in der Mitte abfangen. Der Übersichtslink bekommt seine
     Klickbarkeit einzeln zurück. */
  pointer-events: none;
}
.hero__intro-eyebrow {
  display: inline-block;
  margin-bottom: clamp(8px, 1.4vh, 16px);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.hero__intro-title {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.06;
  font-size: clamp(32px, 4vw, 68px);
  color: var(--c-ink);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.7);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.hero__intro-title em { font-style: normal; color: var(--c-accent); }
.hero__intro-text {
  margin: clamp(10px, 1.6vh, 20px) auto 0;
  max-width: 58ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: rgba(244, 241, 236, 0.88);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}
.hero__intro-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(12px, 1.8vh, 22px);
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 236, 0.4);
  padding-bottom: 4px;
  transition: color .25s ease, border-color .25s ease;
}
.hero__intro-link:hover,
.hero__intro-link:focus-visible { color: var(--c-accent); border-color: var(--c-accent); }

/* Die beiden Reisen */
.hero__slots {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
}
.hero--split .hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(12px, 1.6vh, 22px);
  padding: clamp(28px, 4vh, 64px) clamp(24px, 3.4vw, 64px);
  min-width: 0;
  transition: flex-basis .9s cubic-bezier(.4, 0, .2, 1);
}
.hero--split .hero__panel--left  { flex: 0 0 var(--edge); align-items: flex-start; text-align: left; }
.hero--split .hero__panel--right { flex: 1 1 auto; align-items: flex-end; text-align: right; }
.hero--split.hero--slots-1 .hero__panel { flex: 1 1 100%; align-items: flex-start; text-align: left; }
.hero--split .hero__panel-body {
  display: flex;
  flex-direction: column;
  gap: inherit;
  max-width: 46ch;
}
.hero--split .hero__panel--right .hero__panel-body { align-items: flex-end; text-align: right; }
.hero--split .hero__panel--right .hero__sub { margin-left: auto; }

/* Farbwelt — unabhängig von der Seite. */
.hero__panel--olive .hero__title em,
.hero__panel--olive .hero__status { color: var(--c-cool-soft); }
.hero__panel--sand  .hero__title em,
.hero__panel--sand  .hero__status { color: var(--c-accent); }
.hero__panel--olive .hero__cta:hover,
.hero__panel--olive .hero__cta:focus-visible {
  background: var(--c-cool);
  border-color: var(--c-cool);
  color: var(--c-bg);
  transform: translateY(-3px);
  box-shadow: 0 22px 54px -18px rgba(99, 107, 47, 0.6);
}
.hero__panel--sand .hero__cta:hover,
.hero__panel--sand .hero__cta:focus-visible {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #15140f;
  transform: translateY(-3px);
  box-shadow: 0 22px 54px -18px rgba(203, 189, 147, 0.55);
}

/* Naht zwischen den beiden Bildwelten */
.hero__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--edge);
  width: 1px;
  z-index: 4;
  pointer-events: none;
  transition: left .9s cubic-bezier(.4, 0, .2, 1);
}
.hero__seam-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
    transparent, rgba(244, 241, 236, 0.28) 22%,
    rgba(244, 241, 236, 0.28) 78%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero--split,
  .hero--split .hero__panel,
  .hero__seam { transition: none; }
}

/* ----------------------------------------------------------------
   Mobil: Einstieg, darunter zwei kompakte Reiseaufmacher
   ---------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero--split {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "a" "b";
    min-height: 0;
    padding-top: 0;
  }
  .hero--split.hero--slots-1 { grid-template-areas: "intro" "a"; }
  .hero__intro { grid-area: intro; }
  /* Wrapper auflösen, damit die beiden Reisen zu eigenen Rasterzellen
     werden und ihr Bild mit sich führen. */
  .hero__slots { display: contents; }

  .hero--split .hero__bg--left,
  .hero--split .hero__panel--left  { grid-area: a; }
  .hero--split .hero__bg--right,
  .hero--split .hero__panel--right { grid-area: b; }

  .hero--split .hero__bg {
    position: relative;
    clip-path: none;
    width: 100%;
    height: 100%;
  }
  .hero--split .hero__bg img,
  .hero--split .hero__bg video {
    object-position: center var(--hero-focus-m, var(--hero-focus, center));
    filter: saturate(0.92) contrast(1.04);
  }

  .hero__intro {
    position: relative;
    padding: calc(var(--nav-h) + 26px) 20px 30px;
    background: var(--c-bg);
    text-align: left;
  }
  .hero__intro-title { margin-inline: 0; max-width: none; font-size: clamp(30px, 8vw, 46px); text-shadow: none; }
  .hero__intro-text  { margin-inline: 0; max-width: none; text-shadow: none; font-size: var(--fs-base); }
  .hero__intro-eyebrow { text-shadow: none; }
  .hero__intro::before { display: none; }

  /* Rund 280–360 px Bildhöhe je Reise, wachsend mit dem Inhalt. */
  .hero--split .hero__panel,
  .hero--split.hero--slots-1 .hero__panel {
    position: relative;
    z-index: 4;
    min-height: clamp(280px, 46vw, 360px);
    padding: 30px 20px 34px;
    align-items: flex-start;
    text-align: left;
    /* Eigener Verlauf je Block: Jeder liegt über seinem eigenen Bild. */
    background: linear-gradient(180deg,
      rgba(0, 0, 0, calc(0.12 * var(--hero-scrim, 1))) 0%,
      rgba(0, 0, 0, calc(0.5 * var(--hero-scrim, 1))) 48%,
      rgba(0, 0, 0, calc(0.86 * var(--hero-scrim, 1))) 100%);
  }
  .hero--split .hero__panel--right .hero__panel-body,
  .hero--split .hero__panel-body { align-items: flex-start; text-align: left; max-width: none; }
  .hero--split .hero__panel--right .hero__sub { margin-left: 0; }
  .hero--split .hero__veil,
  .hero__seam { display: none; }
  .hero__title { font-size: clamp(26px, 6.6vw, 38px); }
}


/* ----------------------------------------------------------------
   PITCH SECTION  ("Landschaften ohne Anschrift")
   ---------------------------------------------------------------- */
.pitch {
  position: relative;
  padding: 160px var(--gutter) 140px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 80px 100px;
}

.pitch__head { grid-column: 1; grid-row: 1; }
.pitch__head .eyebrow { margin-bottom: 24px; }
.pitch__title {
  font-family: var(--t-display);
  font-style: italic;
  font-size: clamp(56px, 8.4vw, 152px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.pitch__body { grid-column: 1; grid-row: 2; max-width: 580px; }
.pitch__lede {
  font-family: var(--t-body);
  font-size: var(--fs-3xl);
  line-height: 1.45;
  margin-bottom: 28px;
  color: var(--c-ink);
}
.pitch__lede em.accent {
  display: inline;
  font-size: inherit;
}
.pitch__copy {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--c-ink-2);
  max-width: 460px;
}

/* Stats grid lives in the right column, taller */
.pitch__stats {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-self: stretch;
}
.stat {
  position: relative;
  padding: 24px;
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(244,241,236,0.04) 0%, rgba(244,241,236,0.01) 100%),
    var(--c-card);
  border: 1px solid var(--c-card-line);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.stat:hover {
  transform: translateY(-3px);
  border-color: var(--c-accent-dim);
  background:
    linear-gradient(180deg, rgba(212,168,136,0.06) 0%, rgba(244,241,236,0.01) 100%),
    var(--c-card);
}
.stat__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244,241,236,0.04);
  border: 1px solid var(--c-line);
  font-size: var(--fs-2xl);
  color: var(--c-accent);
}
.stat__label {
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-top: auto;
  margin-bottom: 6px;
}
.stat__value {
  font-family: var(--t-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.pitch__outro {
  grid-column: 1 / -1;
  grid-row: 3;
  font-family: var(--t-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.4;
  color: var(--c-ink);
  max-width: 900px;
  padding-top: 40px;
  border-top: 1px solid var(--c-line);
}

/* ----------------------------------------------------------------
   FOREST DIVIDER  — bridge from dark mood to light surface
   ---------------------------------------------------------------- */
.divider-forest {
  position: relative;
  height: clamp(360px, 52vh, 560px);
  overflow: hidden;
  background: var(--c-bg);
  isolation: isolate;
}
.divider-forest__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: saturate(0.85) contrast(1.04) brightness(0.92);
  transform: scale(1.04);
}
.divider-forest__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 60%, transparent 30%, rgba(10,10,10,0.50) 100%),
    /* keep the forest dark — transition to cream happens AFTER, in tours::before */
    linear-gradient(180deg,
      var(--c-bg) 0%,
      rgba(10,10,10,0.45) 18%,
      rgba(10,10,10,0.20) 60%,
      rgba(10,10,10,0.35) 100%);
}
.divider-forest__content {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.divider-forest__eyebrow { color: var(--c-cool); }
.divider-forest__title {
  font-family: var(--t-display);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-shadow: 0 4px 30px rgba(0,0,0,0.55);
}
.divider-forest__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-cool);
}
.divider-forest__sub {
  max-width: 460px;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--c-ink);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* ----------------------------------------------------------------
   LIGHT SURFACES — cream paper background with dark ink
   ---------------------------------------------------------------- */
.surface-light {
  background: var(--c-paper);
  color: var(--c-ink-dark);
}
.surface-light .eyebrow      { color: var(--c-cool-soft); }
.surface-light .spec__label  { color: var(--c-ink-dark-3); }
.surface-light .spec__value  { color: var(--c-ink-dark); }

/* Dark button variant for use against the light surface */
.btn--dark {
  background: var(--c-ink-dark);
  color: var(--c-paper);
  box-shadow: 0 12px 36px rgba(21, 20, 15, 0.20);
}
.btn--dark:hover {
  background: var(--c-cool-soft);
  color: var(--c-paper);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(126, 154, 110, 0.35);
}
.btn--dark svg { transition: transform .35s ease; }
.btn--dark:hover svg { transform: translateX(4px); }

/* ----------------------------------------------------------------
   TOURS SECTION (sits on light surface)
   ---------------------------------------------------------------- */
.tours {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 200px var(--gutter) 160px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.tours::before {
  /* clean dark-to-cream gradient just like the footer's reverse — no image,
     no veil tricks. Mirrors .footer-wrap::before in spirit. */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-paper) 100%);
  pointer-events: none;
  z-index: 0;
}
.tours > * {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.tours__head {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tours__head .eyebrow { color: var(--c-ink-dark-3); }
.tours__title {
  font-family: var(--t-display);
  font-size: clamp(48px, 6.4vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--c-ink-dark);
}
.tours__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-cool-soft);
}

.tour {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas: "visual body";
  gap: 60px;
  align-items: center;
}
.tour--reverse {
  grid-template-columns: 1fr 1.2fr;
  grid-template-areas: "body visual";
}
.tour__visual { grid-area: visual; }
.tour__body   { grid-area: body;   }

.tour__visual {
  position: relative;
  border-radius: var(--r-card-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-card);
  box-shadow: 0 30px 80px -30px rgba(21, 20, 15, 0.35);
}
.tour__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.tour__visual-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.55));
}
.tour__badge {
  position: absolute;
  left: 24px; bottom: 22px;
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(244,241,236,0.18);
  backdrop-filter: blur(10px);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.tour__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  max-width: 520px;
}
.tour__eyebrow { color: var(--c-cool-soft); }
.tour--sahara .tour__eyebrow { color: var(--c-accent-soft); }

.tour__title {
  font-family: var(--t-display);
  font-size: clamp(40px, 4.4vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--c-ink-dark);
}
.tour__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-cool-soft);
}
.tour--sahara .tour__title em { color: var(--c-accent-soft); }

.tour__desc {
  font-size: var(--fs-xl);
  line-height: 1.65;
  color: var(--c-ink-dark-2);
  max-width: 480px;
}

.tour__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  width: 100%;
  padding: 22px 0;
  border-top: 1px solid var(--c-paper-line);
  border-bottom: 1px solid var(--c-paper-line);
}
.spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.spec__label {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.spec__value {
  font-family: var(--t-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  white-space: nowrap;
}

.tour__cta { margin-top: 6px; }

/* ----------------------------------------------------------------
   FOOTER  (stays dark — anchors the page after the light section)
   ---------------------------------------------------------------- */
/* (legacy footer rules removed — active rules at the bottom of the file) */

.footer__legal {
  grid-column: 1 / -1;
  display: flex;
  gap: 24px;
  padding-top: 30px;
  margin-top: 40px;
  border-top: 1px solid var(--c-line);
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ----------------------------------------------------------------
   MOBILE NAVIGATION — Burger + Vollbild-Overlay
   Unter 900px weicht die Menü-Pille dem Burger (siehe RESPONSIVE).
   Das Overlay liegt bei z-index 99, also UNTER der Nav-Leiste (100):
   so bleibt der Burger sichtbar und schließt das Menü wieder.
   ---------------------------------------------------------------- */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--nav-btn);
  height: var(--nav-btn);
  padding: 0;
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--c-ink);
  cursor: pointer;
}
.nav__burger-bars { position: relative; display: block; width: 18px; height: 12px; }
.nav__burger-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}
.nav__burger-bars i:nth-child(1) { top: 0; }
.nav__burger-bars i:nth-child(2) { top: 5.25px; }
.nav__burger-bars i:nth-child(3) { top: 10.5px; }
.nav__burger[aria-expanded="true"] .nav__burger-bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-bars i:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

.navmobile { position: fixed; inset: 0; z-index: 99; }
.navmobile[hidden] { display: none; }
/* Vorher lag hier ein halbdurchsichtiges Schwarz mit Weichzeichner —
   darunter lief das Hero-Video weiter durch und das Menü sah aus wie
   ein Schleier über einer Baustelle. Jetzt eine eigene Fläche in der
   Sprache der Sektionen: tiefer Grund, oben ein Hauch Sand, darüber
   dasselbe Höhenlinien-Muster wie auf den dunklen Flächen. */
.navmobile__backdrop {
  position: absolute;
  inset: 0;
  /* Der Schein sitzt unten, hinter der Waldkante — als läge Licht hinter
     den Bäumen. Oben nur so viel Wärme, dass die Fläche nicht tot wirkt. */
  background:
    radial-gradient(115% 48% at 50% 103%, rgba(203, 189, 147, 0.20), transparent 68%),
    radial-gradient(120% 55% at 50% -8%, rgba(203, 189, 147, 0.08), transparent 60%),
    linear-gradient(180deg, #0d0d0b 0%, #070706 55%, #040403 100%);
}
/* Muster wie auf den dunklen Sektionen — zuerst, damit die Waldkante
   darüber liegt und nicht durchgerastert wird. */
.navmobile__backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/muster-kachel-hell.svg') center 0 / 460px auto repeat;
  opacity: var(--fc-pattern-dark);
  pointer-events: none;
}
/* Dieselbe Waldkante wie im Footer. Sie macht aus der Fläche einen Ort
   statt eines grauen Kastens und verbindet das Menü mit dem Rest der
   Seite. Unten angeschlagen, damit sie auf jeder Schirmhöhe sitzt. */
.navmobile__backdrop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: url('../img/footer-szene-dunkel.svg') center bottom / 150% auto no-repeat;
  /* Heruntergedunkelt: In Originalhelligkeit leuchteten die Hügel
     sandfarben aus der Fläche heraus wie ein aufgeklebtes Bild. So
     bleibt eine Silhouette, die sich vom Schein dahinter abhebt. */
  filter: brightness(0.42) saturate(0.75);
  pointer-events: none;
}
.navmobile__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Mittig statt oben angeschlagen: Vier Punkte füllen den Schirm nicht,
     linksbündig oben blieb darunter ein großes leeres Feld stehen. */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 30px;
  /* Oben muss die Statusleiste mit hinein. Die 116 px waren für die Nav
     gerechnet, die auf Geräten mit Notch aber selbst tiefer sitzt —
     der erste Menüpunkt lief dort unter die Nav. */
  padding: calc(112px + env(safe-area-inset-top, 0px)) 28px
           calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navmobile__panel:focus { outline: none; }
.navmobile__links {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 340px;
}
.navmobile__links li { list-style: none; border-bottom: 1px solid var(--c-line); }
/* Die letzte Linie schnitte den Block unten ab; der Abstand zum Knopf
   trennt bereits genug. */
.navmobile__links li:last-child { border-bottom: 0; }
.navmobile__links a {
  display: block;
  padding: 17px 2px;
  font-family: var(--t-display);
  font-size: clamp(26px, 7.5vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
  transition: color .25s ease;
}
.navmobile__links a:hover,
.navmobile__links a:focus-visible { color: var(--c-accent); }
/* Wo man gerade steht — gesetzt vom Scrollspy, der auch die Pille in
   der Leiste führt. Bewusst nicht über current-menu-item: Die Klasse
   hängt WordPress an jeden Anker-Link, der auf die aktuelle Seite zeigt,
   und auf der Startseite waren damit drei von vier Punkten markiert. */
.navmobile__links a.is-active {
  color: var(--c-accent);
}
/* Ein Punkt links neben dem Wort statt einer zweiten Farbe: Die Zeile
   ist mittig gesetzt, ein Balken oder Rahmen würde sie aus der Achse
   ziehen. */
.navmobile__links a.is-active::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  vertical-align: middle;
  margin-right: 12px;
  /* Optisch auf die Versalhöhe heben — an der Grundlinie sähe er aus
     wie ein verrutschter Punkt. */
  transform: translateY(-3px);
}
.navmobile__cta { align-self: center; }
body.nav-open { overflow: hidden; }

/* Einlauf: Die Punkte kommen kurz nacheinander, das nimmt dem Umschalten
   die Härte. Sechs Stufen reichen — mehr Punkte hat das Menü nicht. */
@keyframes navmobileIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.navmobile__links li,
.navmobile__cta {
  animation: navmobileIn .42s cubic-bezier(.2, .7, .2, 1) backwards;
}
.navmobile__links li:nth-child(1) { animation-delay: .04s; }
.navmobile__links li:nth-child(2) { animation-delay: .08s; }
.navmobile__links li:nth-child(3) { animation-delay: .12s; }
.navmobile__links li:nth-child(4) { animation-delay: .16s; }
.navmobile__links li:nth-child(5) { animation-delay: .20s; }
.navmobile__links li:nth-child(6) { animation-delay: .24s; }
.navmobile__cta { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .navmobile__links li,
  .navmobile__cta { animation: none; }
  .nav__burger-bars i,
  .navmobile__links a { transition: none; }
}

/* Schmale Displays: Logo, Warenkorb und Burger brauchen den Platz —
   der Nav-CTA steckt ohnehin prominent im Overlay. */
@media (max-width: 560px) {
  .nav__cta { display: none; }
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --gutter: 36px; }
  .pitch { grid-template-columns: 1fr; gap: 60px; }
  .pitch__stats { grid-column: 1; grid-row: 3; }
  .pitch__outro { grid-row: 4; }
}

@media (max-width: 900px) {
  .nav { gap: 16px; }
  /* Menü-Pille raus, Burger rein — die Links wandern ins Overlay. */
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  /* Ohne Pille braucht die Mitte keine eigene Spur mehr. */
  .nav { grid-template-columns: auto 1fr auto; }

  .hero { min-height: auto; height: auto; }
  .hero__sides {
    position: relative;
    grid-template-columns: 1fr;
    padding: 130px 20px 80px;
    gap: 60px;
  }
  .hero__side, .hero__side--right { align-items: flex-start; text-align: left; max-width: 100%; }
  .hero__side--right .hero__meta { justify-content: flex-start; }
  .hero__bottom { position: relative; bottom: auto; padding: 0 20px 30px; }

  .pitch { padding: 80px 20px 60px; gap: 40px; }
  .pitch__stats { grid-template-columns: repeat(2, 1fr); }
  .stat { min-height: 130px; padding: 18px; }

  .tours { padding: 80px 20px 100px; gap: 80px; }
  .tour,
  .tour--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "body";
    gap: 32px;
  }
  .tour__visual { aspect-ratio: 16/10; }
  .tour__specs { grid-template-columns: repeat(2, 1fr); }

  .divider-forest { height: clamp(280px, 60vw, 420px); }
}

/* ================================================================
   PAGE BELOW THE HERO — components & sections
   ================================================================ */

/* Shared building blocks ----------------------------------------- */
.kicker {
  display: inline-block;
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.surface-light .kicker { color: var(--c-cool-soft); }

.display-xl {
  font-family: var(--t-display);
  font-size: clamp(48px, 7vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.display-xl em { color: var(--c-accent); }
.surface-light .display-xl em { color: var(--c-cool-soft); }

.vertical-tag {
  position: absolute;
  top: 120px;
  left: 18px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-ink-4);
}
.surface-light .vertical-tag { color: var(--c-ink-dark-3); }
.vertical-tag--right { left: auto; right: 18px; }

/* Sichtbarer Fokus für alles Bedienbare.
   Bisher gab es Fokusregeln nur an einzelnen Stellen; überall sonst
   blieb der Standardring des Browsers, und der ist auf den dunklen
   Flächen kaum zu sehen. Wer mit der Tastatur unterwegs ist, weiß dann
   nicht, wo er steht. :focus-visible trifft nur die Tastatur, mit der
   Maus bleibt alles wie es war. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-accent);
  /* Kein border-radius hier. Der Wert galt dem Ring, landete aber auf
     dem Element selbst — jeder runde Knopf wurde beim Fokussieren
     eckig. Der Ring folgt der eigenen Rundung des Elements von allein.

     Und nur 2 px Abstand: Liegt das Element in einem Bereich mit
     overflow (Kasse, Warenkorb, Programm-Schiene), schneidet dieser den
     Ring an. Bei größerem Abstand blieb davon ein einzelner Strich am
     Rand stehen. */
  outline-offset: 2px;
}
/* Auf heller Fläche trägt der Sandton zu wenig Kontrast. */
.slate--light a:focus-visible,
.slate--light button:focus-visible,
.slate--light summary:focus-visible,
.slate--light input:focus-visible,
.slate--light select:focus-visible {
  outline-color: var(--c-ink-dark);
}

/* Reveal-on-scroll animation — slower, slightly blurred for Apple-style polish */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(8px);
  transition: opacity 1.1s cubic-bezier(.16, .84, .25, 1),
              transform 1.1s cubic-bezier(.16, .84, .25, 1),
              filter   1.1s cubic-bezier(.16, .84, .25, 1);
  will-change: opacity, transform, filter;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Marquee ticker ------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--c-paper-line-soft);
  border-bottom: 1px solid var(--c-paper-line-soft);
}
.marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 38s linear infinite;
  font-family: var(--t-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--c-ink-dark);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__track > span { padding-right: 1.2em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* PITCH ---------------------------------------------------------- */
.pitch {
  position: relative;
  padding: 140px var(--gutter) 100px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas:
    "head  lead"
    "stats stats";
  gap: 60px 100px;
  max-width: none;
}
.pitch > * { max-width: var(--max-w); width: 100%; }
.pitch__head { grid-area: head; display: flex; flex-direction: column; gap: 22px; }
.pitch__lead {
  grid-area: lead;
  align-self: end;
  font-family: var(--t-body);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  color: var(--c-ink-dark);
  max-width: 480px;
  margin-left: auto;
}

.stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-paper-line);
  border: 1px solid var(--c-paper-line);
  margin-top: 30px;
}
.stat-card {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: background .3s ease;
}
.stat-card:hover { background: var(--c-paper-soft); }
.stat-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--c-paper-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cool-soft);
  background: rgba(20, 18, 14, 0.02);
}
.stat-card__label {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-dark-3);
}
.stat-card__num {
  font-family: var(--t-display);
  font-style: italic;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  color: var(--c-ink-dark);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.stat-card__suffix {
  font-family: var(--t-display);
  font-style: italic;
  font-size: clamp(40px, 4vw, 64px);
  color: var(--c-cool-soft);
  display: inline;
}

/* TOUR MODEL — AURUM "R2" pattern: head row, hero image, spec row */
.tour-model {
  position: relative;
  padding: 120px var(--gutter) 60px;
  max-width: none;
}
.tour-model + .tour-model { padding-top: 80px; }
.tour-model:last-of-type { padding-bottom: 120px; }
.tour-model > * {
  max-width: var(--max-w);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.tour-model__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 28px;
}
.tour-model__head .kicker { grid-column: 1; }
.tour-model__head .display-xl {
  grid-column: 1 / span 2;
  grid-row: 2;
}
.tour-model__cta {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
}
.tour-model .section-lead {
  max-width: 540px;
  margin-left: 0;
  margin-bottom: 48px;
}

.tour-model__visual {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 24px;
}
.tour-model__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  transition: transform 1.5s cubic-bezier(.2,.7,.2,1);
}
.tour-model__visual:hover img { transform: scale(1.03); }
.tour-model__caption {
  position: absolute;
  left: 24px;
  bottom: 22px;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,236,0.95);
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}

/* Spec row — AURUM's bottom-of-section meta strip */
/* Die Trennlinien sind der Hintergrund des Containers, der zwischen den
   Kacheln durchscheint. Als Raster mit fester Spaltenzahl hieß das: wer
   nur zwei von vier Fakten pflegt, bekommt den Rest der Zeile als leere
   graue Fläche. Deshalb Flex — die Kacheln wachsen in die freie Breite
   und füllen die Zeile immer aus, egal wie viele es sind. */
.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--c-paper-line);
  border: 1px solid var(--c-paper-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.spec-row > li {
  flex: 1 1 180px;
  min-width: 0;
  padding: 22px 24px;
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spec-row__icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--c-paper-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cool-soft);
}
.tour-model:nth-of-type(2) .spec-row__icon { color: var(--c-accent-soft); }
.spec-row__label {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-dark-3);
}
.spec-row__val {
  font-family: var(--t-display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  color: var(--c-ink-dark);
  margin-top: auto;
}

/* Dunkle Fläche — die Fakten-Zeile war fest auf Papierweiß gesetzt und
   knallte auf Schwarz als weißer Block heraus. Betrifft die Galerie
   „Der Platz" ebenso wie den Kopf der VX4-Tourseiten. */
.slate--dark .spec-row {
  background: var(--c-card-line);
  border-color: var(--c-card-line);
}
.slate--dark .spec-row > li { background: var(--c-card); }
.slate--dark .spec-row__label { color: var(--c-ink-3); }
.slate--dark .spec-row__val { color: var(--c-ink); }
.slate--dark .spec-row__icon {
  border-color: var(--c-card-line);
  color: var(--c-accent);
}

/* FOREST DIVIDER — sits on pure black, PNG silhouette layered on top.
   Sections BELOW the divider are black; sections ABOVE remain on cream
   (the cream-to-black hand-off happens inside the tour-spot's bottom
   padding via the section below). */
.forest-divider {
  position: relative;
  width: 100%;
  background: var(--c-bg);
  margin-top: -1px;
  margin-bottom: -1px;
  pointer-events: none;
  line-height: 0;
}
.forest-divider img {
  display: block;
  width: 100%;
  height: auto;
}
/* Fallback if forest-divider.png is missing — clean cream-to-black ramp. */
.forest-divider--fallback {
  height: 240px;
  background: linear-gradient(180deg,
    var(--c-paper) 0%,
    rgba(60, 60, 50, 0.55) 50%,
    var(--c-bg) 100%);
}

/* ================================================================
   AURUM-INSPIRED DESIGN SYSTEM  (dark sections below the divider)
   ================================================================
   Building blocks shared by every section below the forest divider.
   Each section pairs:
     .section-head  — kicker + display title (top-left anchor)
     .section-lead  — italic intro paragraph
   Then a Component grid below (feature-cards, guide, faq, etc.).
   ================================================================ */

/* Shared section frame --------------------------------------- */
.features,
.guide,
.faq {
  position: relative;
  padding: 140px var(--gutter) 120px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px 100px;
}
.section-head {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.section-lead {
  font-size: var(--fs-xl);
  line-height: 1.55;
  color: var(--c-ink-2);
  max-width: 560px;
}
.features .section-lead,
.guide   .section-lead,
.faq     .section-lead {
  grid-column: 2;
  align-self: end;
  margin-left: auto;
  max-width: 460px;
}

/* (legacy AURUM-era .feature-grid rule removed — the active one lives
   further down with the rest of the slate system.) */
.feature-card {
  position: relative;
  padding: 32px 28px 36px;
  background: var(--c-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .35s ease;
}
.feature-card:hover { background: var(--c-card-hi); }
.feature-card__plus {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--c-accent);
  opacity: 0.7;
}
.feature-card h3 {
  font-family: var(--t-display);
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--c-ink);
  padding-right: 32px; /* room for the + */
}
.feature-card p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-ink-2);
}

/* GUIDE — Marco profile  --------------------------------- */
.guide {
  grid-template-columns: 1fr;
  gap: 60px;
}
.guide .section-head { grid-column: 1; }
.guide__body {
  grid-column: 1;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.guide__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  border: 1px solid var(--c-card-line);
  background: var(--c-card);
  overflow: hidden;
  margin: 0;
}
.guide__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%; /* keep Marco's face in frame on crop */
  filter: saturate(0.85) contrast(1.04) brightness(0.92);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.guide__portrait:hover img { transform: scale(1.03); }
.guide__portrait::after {
  /* subtle vignette so the caption stays readable */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.7) 100%);
  pointer-events: none;
}
.guide__portrait-tag {
  position: absolute;
  bottom: 22px;
  left: 22px;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
  z-index: 1;
}
.guide__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.guide__text .section-lead { max-width: none; margin-left: 0; }
.guide__quote {
  font-family: var(--t-body);
  font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.35;
  color: var(--c-ink);
  padding: 22px 0 22px 22px;
  border-left: 2px solid var(--c-accent);
}
.guide__tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-card-line);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.guide__tags li {
  padding: 20px 22px;
  background: var(--c-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.guide__tags li span {
  font-family: var(--t-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  color: var(--c-ink);
}
.guide__tags li b {
  font-family: var(--t-mono);
  font-weight: 400;
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* FAQ — accordion ----------------------------------------- */
.faq__list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  border-top: 1px solid var(--c-card-line);
}
.faq-item {
  border-bottom: 1px solid var(--c-card-line);
}
.faq-item details { padding: 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--t-display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--c-accent); }
.faq-item__plus {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-card-line);
  border-radius: 50%;
  font-family: var(--t-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--c-accent);
  transition: transform .35s cubic-bezier(.7,0,.3,1),
              background .25s ease,
              color .25s ease,
              border-color .25s ease;
}
.faq-item details[open] .faq-item__plus {
  transform: rotate(45deg);
  background: var(--c-accent);
  color: var(--c-bg);
  border-color: var(--c-accent);
}
.faq-item p {
  padding: 0 60px 32px 0;
  font-size: var(--fs-2xl);
  line-height: 1.65;
  color: var(--c-ink-2);
  max-width: 1040px;
}

/* CONTACT — AURUM-style two-column panel ----------------------- */
.contact {
  position: relative;
  padding: 140px var(--gutter) 120px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px 100px;
  align-items: start;
}
.contact .section-head { grid-column: 1; }
.contact__panel {
  grid-column: 2;
  padding: 40px 38px 36px;
  background: var(--c-card);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact__lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--c-ink-2);
}
.contact__channels {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-card-line);
}
.contact__channel {
  position: relative;
  padding: 22px 0;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--c-card-line);
  color: var(--c-ink);
  transition: color .25s ease;
}
.contact__channel:hover { color: var(--c-accent); }
.contact__channel-label {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.contact__channel-val {
  font-family: var(--t-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.01em;
}
.contact__channel-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-card-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.contact__channel:hover .contact__channel-arrow {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
}
.contact__cta { align-self: flex-start; margin-top: 8px; }

/* (legacy footer rule from an earlier iteration removed — the active
   footer rule lives at the bottom of the file.) */
.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer__logo { display: block; line-height: 0; }
.footer__logo img {
  width: 120px;
  height: auto;
  display: block;
}
.footer__claim {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-ink-2);
  margin: 0;
}
.footer__social {
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(244, 241, 236, 0.04);
  border: 1px solid rgba(244, 241, 236, 0.14);
  color: var(--c-ink-2);
  transition: background .35s cubic-bezier(.16,.84,.25,1),
              border-color .35s ease,
              color .35s ease,
              transform .35s cubic-bezier(.16,.84,.25,1);
}
.footer__social a svg { width: 20px; height: 20px; }
.footer__social a:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
  transform: translateY(-2px);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer__hours {
  display: block;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-ink-3);
  margin-bottom: 4px;
}
.footer__col h4 {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer__col a,
.footer__col p {
  display: block;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-ink);
  margin-bottom: 4px;
  transition: color .25s ease;
}
.footer__col a:hover { color: var(--c-accent); }
.footer__legal {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 28px;
  margin-top: 60px;
  border-top: 1px solid var(--c-line);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.footer__legal-links { display: flex; gap: 24px; }
.footer__legal a { color: var(--c-ink-3); transition: color .25s ease; }
.footer__legal a:hover { color: var(--c-accent); }

/* RESPONSIVE ----------------------------------------------------- */
@media (max-width: 1100px) {
  .pitch { grid-template-columns: 1fr; grid-template-areas: "head" "lead" "stats"; gap: 36px; }
  .pitch__lead { margin-left: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }

  .tour-model__head { grid-template-columns: 1fr; gap: 18px; }
  .tour-model__head .kicker,
  .tour-model__head .display-xl,
  .tour-model__cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .tour-model__visual { aspect-ratio: 16 / 10; }

  .features,
  .guide,
  .faq,
  .contact { grid-template-columns: 1fr; gap: 36px; }
  .features .section-lead,
  .guide   .section-lead,
  .faq     .section-lead { grid-column: 1; margin-left: 0; max-width: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .guide__body { grid-template-columns: 1fr; }
  .contact .section-head { grid-column: 1; }
  .contact__panel { grid-column: 1; }
  .footer__inner { grid-template-columns: 1fr; gap: 50px; }
}
/* Tippflächen auf dem Handy: Alles, was man mit dem Daumen trifft,
   braucht rund 44 px Höhe. Drei Stellen lagen darunter — die Schritte
   im Buchungsvorgang, der Apple-Karten-Link und die Zeile mit
   Impressum, Datenschutz und AGB. */
@media (max-width: 700px) {
  /* Auch in der Breite: Bei Schritt 2 und 3 ist die Beschriftung
     ausgeblendet, übrig blieb die Ziffer — 34 px breit. */
  .step { min-height: 44px; min-width: 44px; justify-content: center; }
  .route-card__alt { display: inline-block; padding: 13px 8px; }
  .fc-footer__legal nav { gap: 10px; }
  .fc-footer__legal nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Auch in der Breite: „AGB" ist nur 36 px breit. */
    min-width: 44px;
    padding: 0 4px;
  }
}


@media (max-width: 700px) {
  .pitch, .tour-model, .features, .guide, .faq, .contact {
    padding-left: 20px; padding-right: 20px;
    padding-top: 90px; padding-bottom: 90px;
  }
  .stats { grid-template-columns: 1fr 1fr; }
  .spec-row > li { flex-basis: calc(50% - 1px); }   /* zwei pro Zeile, letzte füllt auf */
  .feature-grid { grid-template-columns: 1fr; }
  .guide__tags { grid-template-columns: 1fr; }
  .faq-item summary { padding: 22px 0; gap: 16px; }
  .faq-item__plus { width: 28px; height: 28px; font-size: var(--fs-2xl); }
  .contact__panel { padding: 28px 22px 26px; }
  .contact__channel { grid-template-columns: 1fr auto; }
  .contact__channel-label { grid-column: 1; }
  .contact__channel-val { grid-column: 1; }
  .contact__channel-arrow { grid-row: 1 / span 2; grid-column: 2; }
  .vertical-tag { display: none; }
  .footer { padding: 60px 20px 30px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ================================================================
   PAGE BELOW THE HERO — Glass / Apple-style design system v2
   ================================================================ */

/* SLATE — shared section frame ----------------------------------- */
.slate {
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(24px, 4vw, 80px);
  max-width: none;
}
/* Section heads stay anchored at the boxed reading width; everything else
   (stat-grid, feature-grid, guide-block, faq-list, contact-panel) goes
   full-bleed inside the section's padding. */
.slate > * {
  position: relative;
  z-index: 1;
}
.slate__head {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

/* Light variant — soft-gray surface so white cards sit on something */
.slate--light {
  background: var(--c-paper-soft);   /* #f5f5f4 */
  color: var(--c-ink-dark);
}
/* Stats-only section — slim vertical padding, no head */
.slate--stats-only {
  padding-top: clamp(56px, 5vw, 80px);
  padding-bottom: clamp(56px, 5vw, 80px);
}

/* VX4-MUSTER — ein durchgehendes Feld über alle Sektionen hinweg.
   ------------------------------------------------------------------
   Zwei Dinge müssen dafür stimmen:

   1. Die Kachel muss nahtlos sein. muster-kachel.svg ist die vierfach
      gespiegelte Fassung des Originals — an jeder Kante trifft Linie
      auf Linie (siehe Kommentar in der Datei).

   2. Die Kachel muss über Sektionsgrenzen hinweg in Phase bleiben.
      Jede Sektion malt ihr eigenes ::before, das per se bei 0 anfängt —
      genau daher der harte Absatz an jeder Kante. Deshalb setzt
      main.js pro Sektion --fc-pattern-y auf ihren Versatz im Dokument
      (modulo Kachelhöhe). Dadurch läuft das Muster durch, als läge es
      unter der ganzen Seite. Ohne JS bleibt es bei 0 — dann sieht es
      aus wie vorher, bricht aber nichts. */
.slate--pattern {
  isolation: isolate;
  overflow: hidden;
  --fc-tile-w: 660px;    /* main.js liest den Wert für die Phase mit */
}
.slate--pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/muster-kachel.svg');
  background-repeat: repeat;
  background-position: var(--fc-pattern-x, center) var(--fc-pattern-y, 0px);
  background-size: var(--fc-tile-w) auto;
  background-attachment: scroll;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 760px) {
  .slate--pattern { --fc-tile-w: 460px; }
}
.slate--light.slate--pattern::before {
  opacity: var(--fc-pattern-light);
  mix-blend-mode: multiply;
}
/* Dunkle Flächen brauchen die helle Kachel. Die Grundfassung zeichnet
   mit currentColor, das als background-image zu Schwarz wird — auf
   schwarzem Grund also unsichtbar, und mix-blend-mode: screen ändert
   daran nichts, weil Screen mit Schwarz nichts tut. Genau deshalb war
   das Muster auf allen dunklen Sektionen nie zu sehen. */
.slate--dark.slate--pattern::before {
  background-image: url('../img/muster-kachel-hell.svg');
  opacity: var(--fc-pattern-dark);
  mix-blend-mode: normal;
}
.slate--light + .slate--light { padding-top: 0; }

/* Dark variant — black surface, like the hero */
.slate--dark {
  background: var(--c-bg);
  color: var(--c-ink);
}
.slate--dark + .slate--dark { padding-top: 0; }

/* Section head — eyebrow / title / lead (boxed reading width).
   More vertical air between elements creates clearer hierarchy. */
.slate__head {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.slate__head > * { max-width: 1100px; }
.slate__head .slate__title { max-width: 1280px; }
.slate__head .slate__lead { max-width: 580px; }
.slate__head .slate__eyebrow + .slate__title { margin-top: -6px; }
.slate__head .slate__title + .slate__lead { margin-top: 12px; }
.slate__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}
/* Eyebrow — chapter-marker style.
   Vertical accent bar + bold Inter caps — feels architectural,
   echoes the brutalist title weight without competing with it. */
.slate__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding-left: 0;
  font-family: var(--t-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.2em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-cool);
}
.slate__eyebrow::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--c-cool);
  flex-shrink: 0;
  border-radius: 1px;
}

.slate--dark .slate__eyebrow { color: var(--c-accent); }
.slate--dark .slate__eyebrow::before { background: var(--c-accent); }

/* Caption eyebrows on highlight-cards (white text on dark gradient) */
.highlight-card figcaption .slate__eyebrow { color: var(--c-accent); }
.highlight-card figcaption .slate__eyebrow::before { background: var(--c-accent); }
.slate__title {
  font-size: clamp(48px, 6.5vw, 120px);
  /* Unterhalb von etwa 740 px greift die Untergrenze von 48 px, und die
     ist für ein Handy zu groß: „HÄNDLERMEILE." misst dort 374 px in
     einem 327 px breiten Kasten und lief rechts aus dem Bild. Die
     eigene Größe unten in der Datei fängt das ab. */
  margin: 0;
}
.slate--light .slate__title { color: var(--c-ink-dark); }
.slate--dark  .slate__title { color: var(--c-ink); }
.slate__title em { color: var(--c-cool-soft); }
.slate--dark .slate__title em { color: var(--c-accent); }
.slate__lead {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  line-height: 1.55;
  max-width: 560px;
}
.slate--light .slate__lead { color: var(--c-ink-dark-2); }
.slate--dark  .slate__lead { color: var(--c-ink-2); }

/* SLATE — Stats: same card style as the warum feature-pills */
.slate__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.stat-pill {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 220px;
  transition: transform .6s cubic-bezier(.16,.84,.25,1),
              box-shadow .6s cubic-bezier(.16,.84,.25,1),
              border-color .6s ease;
}
.stat-pill:hover {
  transform: translateY(-6px);
  border-color: rgba(21, 20, 15, 0.10);
  box-shadow: 0 28px 60px -28px rgba(21,20,15,0.22);
}
.slate--dark .stat-pill {
  background: rgba(244, 241, 236, 0.05);
  border-color: rgba(244, 241, 236, 0.10);
}
.stat-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(99, 107, 47, 0.10);
  color: var(--c-cool);
}
.slate--dark .stat-pill__icon {
  background: rgba(203, 189, 147, 0.12);
  color: var(--c-accent);
}
.stat-pill__icon svg { width: 28px; height: 28px; display: block; }
.stat-pill__value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: auto;
  line-height: 0.95;
}
.stat-pill__num {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: clamp(52px, 5vw, 76px);
  line-height: 0.95;
  color: var(--c-ink-dark);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.slate--dark .stat-pill__num { color: var(--c-ink); }
.stat-pill__suffix {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: clamp(38px, 3.6vw, 56px);
  color: var(--c-cool);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.slate--dark .stat-pill__suffix { color: var(--c-accent); }
.stat-pill__lbl {
  font-family: var(--t-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-dark-3);
}
.slate--dark .stat-pill__lbl { color: var(--c-ink-3); }

/* TOUR-GRID — two big cards, image up top, glass body */
.tour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.tour-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(21, 20, 15, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--c-ink-dark);
  text-decoration: none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1),
              box-shadow .45s ease;
}
.tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 70px -36px rgba(21,20,15,0.35);
}
.tour-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tour-card__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.tour-card:hover .tour-card__visual img { transform: scale(1.04); }
.tour-card__num {
  position: absolute;
  top: 22px;
  left: 24px;
  font-family: var(--t-display);
  font-size: 72px;
  line-height: 0.85;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 4px 20px rgba(0,0,0,0.45);
}
.tour-card__badge {
  position: absolute;
  top: 22px;
  right: 24px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(244, 241, 236, 0.30);
  backdrop-filter: blur(10px);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.tour-card__body {
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tour-card__title {
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.tour-card__title em { color: var(--c-cool-soft); }
.tour-card--soon .tour-card__title em { color: var(--c-accent-soft); }
.tour-card p {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-dark-2);
}
.tour-card__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(21,20,15,0.08);
  border-bottom: 1px solid rgba(21,20,15,0.08);
  margin: 0;
}
.tour-card__specs > div { display: flex; flex-direction: column; gap: 4px; }
.tour-card__specs dt {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-dark-3);
}
.tour-card__specs dd {
  font-family: var(--t-display);
  font-size: var(--fs-2xl);
  color: var(--c-ink-dark);
  margin: 0;
}
.tour-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px 12px 22px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: rgba(21, 20, 15, 0.06);
  border: 1px solid rgba(21,20,15,0.10);
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  color: var(--c-ink-dark);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.tour-card__cta-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink-dark);
  color: var(--c-paper);
  transition: transform .35s cubic-bezier(.7,0,.3,1);
}
.tour-card:hover .tour-card__cta {
  background: var(--c-ink-dark);
  color: var(--c-paper);
  border-color: var(--c-ink-dark);
}
.tour-card:hover .tour-card__cta-icon {
  background: var(--c-paper);
  color: var(--c-ink-dark);
  transform: translateX(3px);
}
.tour-card--soon .tour-card__cta-icon { transform: none; }
.tour-card--soon:hover .tour-card__cta-icon { transform: none; }

/* FEATURE GRID — Apple "feature card with +" --------------------- */
/* Bild zwischen Sektionskopf und Feature-Karten — zeigt, wovon der Text
   spricht: alle Marken nebeneinander. Bewusst schmaler als das
   Karten-Raster, damit es als Einschub liest und nicht als zweiter Hero.
   Marcos Originaldatei liegt inzwischen in 1600 px vor, deshalb darf das
   Bild hier breiter stehen als die 900 px der ersten Fassung.

   Zwei Eigenheiten, beide wegen Elementor. Dessen frontend.min.css wird
   NACH dem Theme geladen und bringt zwei Regeln mit, die hier reingrätschen:

     .elementor img { border-radius: 0; box-shadow: none; max-width: 100% }
     .elementor .elementor-widget:not(…):not(…) figure { margin: 0 }

   Gegen die erste reicht ein .slate davor — dann gewinnt das Theme über
   die Spezifität. Die zweite ist mit vier Klassen so hoch, dass man sie
   sinnvoll nicht überbietet: deshalb steht hier kein margin. Zentriert
   wird über Flex, der Abstand nach unten kommt über padding — beides
   fasst Elementor nicht an. */
.slate .feature-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: clamp(48px, 6vw, 80px);
}
.slate .feature-shot img {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.38);
}
.slate .feature-shot figcaption {
  max-width: 580px;
  text-align: center;
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-dark-3);
}
.slate--dark .feature-shot figcaption { color: var(--c-ink-3); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}
.feature-pill {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  transition: transform .6s cubic-bezier(.16,.84,.25,1),
              box-shadow .6s cubic-bezier(.16,.84,.25,1),
              border-color .6s ease;
}
.feature-pill:hover {
  transform: translateY(-6px);
  border-color: rgba(21, 20, 15, 0.10);
  box-shadow: 0 28px 60px -28px rgba(21,20,15,0.22);
}
.feature-pill__icon {
  transition: transform .6s cubic-bezier(.16,.84,.25,1),
              background .4s ease;
}
.feature-pill:hover .feature-pill__icon {
  transform: scale(1.08) rotate(-2deg);
  background: rgba(99, 107, 47, 0.16);
}
.feature-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(99, 107, 47, 0.10);
  color: var(--c-cool);
  margin-bottom: 6px;
}
.feature-pill__icon svg { width: 30px; height: 30px; display: block; }
.feature-pill h3 {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--c-ink-dark);
}
.feature-pill p {
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 450;
  line-height: 1.55;
  color: var(--c-ink-dark-2);
  margin: 0;
}

/* Feature-Karten auf dunkler Fläche.
   Sie waren immer weiß — auf einer dunklen Sektion also drei grelle
   Blöcke, die mit nichts sonst auf der Seite zusammenpassten. Hier
   dieselbe Karte wie beim Programm und in der Kasse: angehobene Fläche,
   warme Haarlinie, Icon im Akzent. */
.slate--dark .feature-pill {
  background: var(--c-card);
  border-color: rgba(203, 189, 147, 0.16);
}
.slate--dark .feature-pill:hover {
  border-color: rgba(203, 189, 147, 0.4);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.9);
}
.slate--dark .feature-pill h3 { color: var(--c-ink); }
.slate--dark .feature-pill p  { color: var(--c-ink-2); }
.slate--dark .feature-pill__icon {
  background: rgba(203, 189, 147, 0.12);
  color: var(--c-accent);
}
.slate--dark .feature-pill:hover .feature-pill__icon {
  background: rgba(203, 189, 147, 0.22);
}

/* Mittige Sektionsvariante — für Bereiche, deren Inhalt selbst
   zentriert steht (z. B. der Trailer). Ohne das säße der Kopf links
   und die Bühne mittig, was unabsichtlich wirkt. */
/* Sektionsköpfe stehen mittig — Titel wie Lead.
   Wichtig ist der zweite Teil: Die Kinder des Kopfes sind auf
   1100/1280/580px gedeckelt. Ohne Auto-Margins bliebe die Box
   linksbündig, der Text säße dann mittig in einer linken Box statt
   mittig in der Sektion. .slate--center bleibt als Alias bestehen. */
.slate__head,
.slate--center .slate__head { text-align: center; }
.slate__head > *,
.slate--center .slate__head > * { margin-left: auto; margin-right: auto; }
.slate__eyebrow,
.slate--center .slate__eyebrow { justify-content: center; }

/* Bis zum Start liegt das Standbild als Hintergrund darunter; das Video
   blendet sich erst beim Abspielen ein. */
/* Läuft der Film, verschwindet die Auflage komplett. */

/* AKTIVITÄTEN — große Split-Karten, Bildseite im Wechsel ---------
   Gleiche Kartensprache wie .tour-show, aber ruhiger: hier geht es
   um Angebote zum Mitmachen, nicht um verkaufbare Touren. */
.activity-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.activity-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  border-radius: 24px;
  transition: transform .7s cubic-bezier(.16,.84,.25,1),
              box-shadow .7s cubic-bezier(.16,.84,.25,1),
              border-color .6s ease;
}
.activity-card:hover {
  transform: translateY(-6px);
  border-color: rgba(21, 20, 15, 0.10);
  box-shadow: 0 40px 80px -32px rgba(21,20,15,0.26);
}
/* Jede zweite Karte spiegelt die Bildseite (PHP setzt die Klasse). */
.activity-card--flip .activity-card__media { order: 2; }
.activity-card--flip .activity-card__body { order: 1; }
/* Ohne Bild trägt der Text die ganze Karte. */
.activity-card--noimage { grid-template-columns: 1fr; min-height: 0; }

/* Feste Bildproportion statt Mindesthöhe: Damit richtet sich die
   Kartenhöhe nach dem Bild, und die Textspalte bekommt keinen großen
   Leerraum mehr, wenn der Text kurz ist. */
.activity-card__media {
  position: relative;
  overflow: hidden;
  /* Das Seitenverhältnis greift hier nicht: Die Bildspalte wird im
     Raster auf die Zeilenhöhe gestreckt, und die richtet sich nach dem
     Text daneben. Bei kurzen Texten wurde das Foto dadurch zu einem
     schmalen Streifen, bei langen zu einer hohen Säule — die Karten
     sahen von Höhe zu Höhe unruhig aus.

     Die Mindesthöhe setzt eine gemeinsame Grundhöhe für alle Karten.
     Wer mehr Text hat, wächst darüber hinaus; alle anderen stehen auf
     derselben Linie. */
  min-height: clamp(320px, 28vw, 440px);
  background: var(--c-paper-soft);
}
/* Absolut gesetzt, damit das Foto nicht selbst die Höhe bestimmt. Steht
   es im Fluss, löst sich height: 100 % zu seiner eigenen Höhe auf — die
   Karte richtete sich dann nach dem Seitenverhältnis des Bildes, und ein
   quadratisches Foto machte die Karte deutlich höher als ein
   querformatiges daneben. So zählt nur noch die Mindesthöhe und der
   Text. */
.activity-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s cubic-bezier(.16,.84,.25,1);
}
.activity-card:hover .activity-card__media img { transform: scale(1.06); }

.activity-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;   /* Text mittig zur Bildhöhe */
  gap: 17px;
  padding: clamp(28px, 3vw, 44px);
}
.activity-card__tag {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(99, 107, 47, 0.10);
  color: var(--c-cool);
  font-family: var(--t-mono);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.activity-card__title {
  margin: 0;
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: clamp(26px, 2.3vw, 38px);
  line-height: 1.05;
  color: var(--c-ink-dark);
}
/* Die Zeile gehört zum Titel, soll aber nicht daran kleben — der
   negative Abstand hebt den Grid-Gap nur teilweise auf. */
.activity-card__people {
  margin: -4px 0 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-cool);
}
.activity-card__text {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 450;
  line-height: 1.6;
  color: var(--c-ink-dark-2);
}
.activity-card__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(21, 20, 15, 0.04);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--c-ink-dark-3);
}
.activity-card__note svg { flex: none; }
.activity-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--c-cool);
  color: #ffffff;
  font-weight: 600;
  font-size: var(--fs-lg);
  transition: background .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.activity-card__cta:hover { background: var(--c-cool-soft); transform: translateX(3px); }
.activity-card__cta svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.activity-card__cta:hover svg { transform: translateX(3px); }

/* Auf dunkler Fläche dreht sich die Kartenfarbe. */
.slate--dark .activity-card { background: var(--c-card); border-color: var(--c-card-line); }
.slate--dark .activity-card:hover { border-color: rgba(244, 241, 236, 0.18); box-shadow: none; }
.slate--dark .activity-card__title { color: var(--c-ink); }
.slate--dark .activity-card__text { color: var(--c-ink-2); }
.slate--dark .activity-card__tag { background: rgba(203, 189, 147, 0.16); color: var(--c-accent); }
.slate--dark .activity-card__people { color: var(--c-accent); }
.slate--dark .activity-card__note { background: rgba(244, 241, 236, 0.06); color: var(--c-ink-3); }
.slate--dark .activity-card__media { background: var(--c-bg-soft); }
.slate--dark .activity-card__cta { background: var(--c-accent); color: var(--c-ink-dark); }
.slate--dark .activity-card__cta:hover { background: var(--c-accent-soft); }

@media (max-width: 900px) {
  /* Bild oben, Text darunter — die Spiegelung entfällt, sonst stünde
     bei jeder zweiten Karte das Bild unter dem Text. */
  .activity-card,
  .activity-card--flip { grid-template-columns: 1fr; min-height: 0; }
  .activity-card--flip .activity-card__media,
  .activity-card--flip .activity-card__body { order: 0; }
  .activity-card__media { min-height: 240px; max-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .activity-card,
  .activity-card__media img,
  .activity-card__cta,
  .activity-card__cta svg { transition: none; }
  .activity-card:hover { transform: none; }
  .activity-card:hover .activity-card__media img { transform: none; }
}

/* HÄNDLERMEILE — Aussteller-Raster ------------------------------
   Gleiche Kartensprache wie die Feature-Pills, nur flacher und
   dichter: die Logos sollen die Fläche tragen, nicht die Karte. */
.exhibitor-grid {
  display: grid;
  /* auto-fit statt auto-fill: leere Spuren fallen weg, dadurch steht
     eine angefangene Reihe mittig statt linksbündig. Die Obergrenze
     verhindert, dass vier Karten sich über die volle Breite ziehen. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exhibitor-card { list-style: none; }
.exhibitor-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-height: 178px;
  padding: 26px 20px 22px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  text-align: center;
  transition: transform .6s cubic-bezier(.16,.84,.25,1),
              box-shadow .6s cubic-bezier(.16,.84,.25,1),
              border-color .6s ease;
}
a.exhibitor-card__inner:hover {
  transform: translateY(-6px);
  border-color: rgba(21, 20, 15, 0.10);
  box-shadow: 0 28px 60px -28px rgba(21,20,15,0.22);
}
.exhibitor-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 68px;
  margin-bottom: 16px;
}
/* Aussteller liefern Logos in allen Farben, Formaten und Helligkeiten.
   Nebeneinander sieht das nach Zettelwand aus, und auf dunklem Grund
   verschwinden die dunklen ganz. brightness(0) macht jede Form schwarz,
   invert(1) dreht sie auf Weiß — heraus kommt eine saubere Silhouette.

   Die Silhouette bleibt auch beim Überfahren; es ändert sich nur die
   Deckkraft. Im Ruhezustand wirken die Logos dadurch grau und treten
   zurück, unter dem Zeiger stehen sie in vollem Weiß. Weil der Filter
   dabei unverändert bleibt, gibt es beim Wechsel nichts zu
   interpolieren — genau daran hatte es vorher geflackert, als der
   Rückweg auf die Originalfarben ging.

   Eine Bedingung bleibt: Die Dateien brauchen einen durchsichtigen
   Hintergrund. Ein Logo auf weißem Kasten wird zu einem hellen
   Rechteck — das kann kein Filter reparieren, das muss die Datei
   können. */
.exhibitor-card__logo img {
  max-width: 100%;
  max-height: 68px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity .3s ease;
}
.exhibitor-card__inner:hover .exhibitor-card__logo img,
.exhibitor-card__inner:focus-visible .exhibitor-card__logo img {
  opacity: 1;
}
/* Auf heller Fläche andersherum: schwarze Silhouette. */
.slate--light .exhibitor-card__logo img { filter: brightness(0); }
@media (prefers-reduced-motion: reduce) {
  .exhibitor-card__logo img { transition: none; }
}
/* Ohne Logodatei trägt der Name als Wortmarke die Karte. */
.exhibitor-card__wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  /* Ohne Logo entfällt die Namenszeile darunter (siehe Regel weiter
     unten). Deren Höhe wird hier ausgeglichen, damit die Kategorie in
     allen Karten auf einer Linie sitzt — mit Logo wie ohne. */
  margin-bottom: 28px;
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: rgba(21, 20, 15, 0.22);
}
.exhibitor-card__wordmark + .exhibitor-card__name { display: none; }
.exhibitor-card__name {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--c-ink-dark);
}
.exhibitor-card__cat {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-dark-3);
}
/* Steht unter dem zentrierten Raster — also ebenfalls mittig. */
.exhibitor-note {
  margin: 26px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--c-ink-dark-2);
}
/* Der Aufruf steht als eigener Knopf unter dem Satz — als unterstrichenes
   Wort im Fließtext ging er unter. */
.exhibitor-note__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 16px auto 0;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid var(--c-paper-line);
  background: #ffffff;
  color: var(--c-ink-dark);
  font-weight: 650;
  font-size: var(--fs-base);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, background .3s ease;
}
.exhibitor-note__cta svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.exhibitor-note__cta:hover { transform: translateY(-2px); }
.exhibitor-note__cta:hover svg { transform: translateX(3px); }
/* Der Knopf ist der einzige Weg für Aussteller, sich zu melden — er
   trägt die Sektion und bekommt deshalb dasselbe Gewicht wie „Ticket
   sichern": gefüllt, nicht nur umrandet. Als Umriss stand er zwischen
   den Logokacheln, ohne sich abzuheben. */
.slate--dark .exhibitor-note__cta {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
  box-shadow: 0 12px 36px rgba(244, 241, 236, 0.16);
}
.slate--dark .exhibitor-note__cta:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink-dark);
  box-shadow: 0 16px 44px rgba(203, 189, 147, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .exhibitor-note__cta, .exhibitor-note__cta svg { transition: none; }
  .exhibitor-note__cta:hover { transform: none; }
  .exhibitor-note__cta:hover svg { transform: none; }
}

/* Karten ohne Logo lesen sich als freier Platz, nicht als Lücke:
   gestrichelte Kontur statt durchgezogener. */
.exhibitor-card__inner:has(.exhibitor-card__wordmark) { border-style: dashed; }

/* Auf dunkler Fläche würde eine flache Kartenfarbe im Schwarz
   verschwinden. Ein leichter Verlauf hebt die Karte heraus, die
   Kategorie trägt die Akzentfarbe — das gibt dem Raster Rhythmus. */
/* Deckend, nicht durchscheinend: Als Verlauf aus Weiß-Alpha lief das
   Muster der Sektion quer durch jede Kachel und hinter den Logos durch.
   Dieselbe Fläche wie bei den anderen Karten. */
.slate--dark .exhibitor-card__inner {
  background: var(--c-card);
  border-color: rgba(244, 241, 236, 0.13);
}
.slate--dark a.exhibitor-card__inner:hover {
  border-color: var(--c-accent);
  border-style: solid;
  background: linear-gradient(180deg, rgba(203, 189, 147, 0.12), rgba(203, 189, 147, 0.03));
  box-shadow: 0 26px 54px -32px rgba(0, 0, 0, 0.9);
}
.slate--dark .exhibitor-card__name { color: var(--c-ink); }
.slate--dark .exhibitor-card__cat { color: var(--c-accent); }
.slate--dark .exhibitor-card__wordmark { color: rgba(244, 241, 236, 0.32); }
.slate--dark .exhibitor-note { color: var(--c-ink-2); }
/* Dunkle Logos brauchen auf dunklem Grund einen hellen Träger. */
/* Die frühere Regel färbte jedes Logo weiß. Auf der hellen Platte, die
   die Logos seit 3.82 tragen, war es damit unsichtbar — ein Überbleibsel
   aus der Zeit, als sie direkt auf der dunklen Karte standen. */

@media (max-width: 700px) {
  .exhibitor-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .exhibitor-card__inner { min-height: 150px; padding: 20px 14px 18px; }
  .exhibitor-card__logo,
  .exhibitor-card__wordmark { height: 52px; }
  .exhibitor-card__logo img { max-height: 52px; }
  .exhibitor-card__wordmark { font-size: var(--fs-xl); }
}

/* Listen-Variante des Feature-Grids.
   Für Aufzählungen, die im Original Fließtext sind (Marcos „Was dich
   erwartet") — bewusst ohne Karten, damit zwei Grids untereinander
   nicht wie eine Dopplung wirken: eine Spalte, Trennlinien statt
   Kacheln, Icon links neben dem Text. */
/* Die Listenfassung hatte gar keine Fläche — die Zeilen standen frei auf
   der Sektion, das Muster lief quer durch Text und Icons. Als ein Panel
   mit Haarlinien dazwischen ist sie ein Block, so wie die Karten der
   Rasterfassung. */
.feature-grid--list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1080px;
  margin-inline: auto;
  /* Oben mehr als unten, und das mit Absicht: Unter der letzten Zeile
     sitzt der Durchschuss des Textes und macht die Lücke optisch
     größer, als sie gemessen ist. Oben stößt das Icon ohne solchen
     Vorlauf an den Rand. Gleiche Werte sehen deshalb ungleich aus. */
  padding: clamp(18px, 1.8vw, 26px) clamp(22px, 2.4vw, 34px) clamp(8px, 1vw, 14px);
  border-radius: 24px;
  background: var(--c-paper);
  border: 1px solid rgba(21, 20, 15, 0.07);
  text-align: left;   /* der Sektionskopf ist mittig, die Liste nicht */
}
.slate--dark .feature-grid--list {
  background: var(--c-card);
  border-color: rgba(203, 189, 147, 0.16);
}
/* Die Trennlinien zwischen den Zeilen sind in Tinte gesetzt — auf
   dunklem Grund wären sie unsichtbar. */
.slate--dark .feature-grid--list .feature-pill { border-top-color: rgba(244, 241, 236, 0.09); }
/* Drei Spalten: Icon · Titel · Text. Der Titel bekommt eine eigene
   Spalte, damit die Zeilen die Breite tragen — mit Titel und Text
   untereinander sähe die Liste auf großen Schirmen ausgefranst aus. */
.feature-grid--list .feature-pill {
  display: grid;
  grid-template-columns: 46px minmax(180px, 260px) 1fr;
  align-items: baseline;
  gap: 0 26px;
  min-height: 0;
  padding: 24px 0;
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 1px solid rgba(21, 20, 15, 0.10);
  box-shadow: none;
}
/* Nur die Linie weg, das Polster bleibt. Das verkürzte padding-top
   stammt aus der Zeit, als die Liste keine Fläche hatte und die erste
   Zeile bündig mit der Sektion anfangen sollte. Im Panel sorgte es
   dafür, dass oben rund 18 px standen und unten 38 — sichtbar schief. */
.feature-grid--list .feature-pill:first-child { border-top: 0; }
.feature-grid--list .feature-pill:hover { transform: none; box-shadow: none; }
.feature-grid--list .feature-pill__icon {
  align-self: start;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin: -4px 0 0;
}
.feature-grid--list .feature-pill__icon svg { width: 21px; height: 21px; }
.feature-grid--list .feature-pill:hover .feature-pill__icon { transform: none; }
.feature-grid--list .feature-pill h3 { font-size: var(--fs-xl); margin: 0; }
.feature-grid--list .feature-pill p { max-width: 62ch; }
@media (max-width: 860px) {
  /* Schmal: Titel über den Text, Icon bleibt links stehen. */
  .feature-grid--list .feature-pill {
    grid-template-columns: 46px 1fr;
    align-items: start;
    gap: 6px 22px;
  }
  .feature-grid--list .feature-pill__icon { grid-row: span 2; margin-top: 0; }
}
.slate--dark .feature-grid--list .feature-pill { border-top-color: var(--c-card-line); }
.slate--dark .feature-grid--list .feature-pill h3 { color: var(--c-ink); }
.slate--dark .feature-grid--list .feature-pill p { color: var(--c-ink-2); }
.slate--dark .feature-grid--list .feature-pill__icon {
  background: rgba(203, 189, 147, 0.14);
  color: var(--c-accent);
}
@media (max-width: 620px) {
  .feature-grid--list .feature-pill { grid-template-columns: 40px 1fr; gap: 4px 16px; }
  .feature-grid--list .feature-pill__icon { width: 36px; height: 36px; border-radius: 10px; }
  .feature-grid--list .feature-pill__icon svg { width: 20px; height: 20px; }
}

/* TOUR-SHOW — two big tour cards, image left, body right -------- */
.tour-show {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
/* Ab drei Touren ins Raster. Die breite Karte mit Bild links und Text
   rechts ist auf ein oder zwei Angebote gerechnet; bei vier Reisen
   entstünde sonst eine sehr lange Spalte. Im Raster steht das Bild über
   dem Text, damit die Karte schmaler sein darf. */
@media (min-width: 900px) {
  .tour-show--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
  .tour-show--grid .tour-show__card,
  .tour-show--grid .tour-show__card--sahara {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }
  /* Die Sahara-Karte tauscht in der breiten Darstellung Bild und Text,
     damit sich die beiden Showcases spiegeln. Einspaltig stünde der Text
     dadurch über dem Bild — hier also zurückdrehen. */
  .tour-show--grid .tour-show__card--sahara .tour-show__media { order: 1; }
  .tour-show--grid .tour-show__card--sahara .tour-show__body { order: 2; }
  .tour-show--grid .tour-show__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}
/* Zustand der Reise — dieselbe Angabe wie im Hero und auf der
   Detailseite, damit die Übersicht nicht behauptet, es gäbe Termine. */
.tour-show__status {
  margin: 0 0 10px;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cool-soft);
}
.tour-show__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  border-radius: 24px;
  overflow: hidden;
  min-height: 440px;
  transition: transform .7s cubic-bezier(.16,.84,.25,1),
              box-shadow .7s cubic-bezier(.16,.84,.25,1),
              border-color .6s ease;
}
.tour-show__card:hover {
  transform: translateY(-8px);
  border-color: rgba(21, 20, 15, 0.10);
  box-shadow: 0 40px 80px -32px rgba(21,20,15,0.28);
}
.tour-show__card--sahara { grid-template-columns: 1fr 1fr; }
.tour-show__card--sahara .tour-show__media { order: 2; }
.tour-show__card--sahara .tour-show__body { order: 1; }

.tour-show__media {
  position: relative;
  overflow: hidden;
  min-height: 440px;
}
.tour-show__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s cubic-bezier(.16,.84,.25,1);
}
.tour-show__card:hover .tour-show__media img { transform: scale(1.07); }

.tour-show__body {
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tour-show__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(99, 107, 47, 0.10);
  color: var(--c-cool);
  font-family: var(--t-mono);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tour-show__tag--accent {
  background: rgba(203, 189, 147, 0.18);
  color: #8a7c54;
}
.tour-show__title {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.04;
  margin: 0;
  color: var(--c-ink-dark);
}
.tour-show__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  font-size: var(--fs-base);
  color: var(--c-ink-dark-2);
}
.tour-show__facts li {
  padding: 10px 0;
  border-top: 1px solid rgba(21, 20, 15, 0.08);
  line-height: 1.4;
}
.tour-show__facts li strong {
  display: block;
  font-family: var(--t-display);
  font-weight: 900;
  color: var(--c-ink-dark);
  font-size: var(--fs-lg);
  margin-bottom: 2px;
}
.tour-show__copy {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--c-ink-dark-2);
  margin: 0;
}
.tour-show__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--c-ink-dark);
  color: #ffffff;
  font-family: var(--t-display);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-top: auto;
  transition: background .25s ease, transform .25s ease;
}
.tour-show__cta:hover { transform: translateY(-1px); }
.tour-show__cta--soon {
  background: rgba(21, 20, 15, 0.08);
  color: var(--c-ink-dark-2);
  cursor: default;
}
.tour-show__cta--soon:hover { transform: none; }

@media (max-width: 900px) {
  .tour-show__card,
  .tour-show__card--sahara { grid-template-columns: 1fr; }
  .tour-show__card--sahara .tour-show__media { order: 1; }
  .tour-show__card--sahara .tour-show__body { order: 2; }
  .tour-show__media { min-height: 260px; }
  .tour-show__card { min-height: 0; }
}

/* FOREST TRANSITION — der transparente obere Teil des Wald-Bilds gibt den
   Untergrund der Sektion darüber frei. Das Muster läuft mit demselben
   Feld weiter wie in den Sektionen: gleiche Kachel, gleiche Breite,
   gleiche Phase aus main.js. */
.forest-transition {
  position: relative;
  width: 100%;
  /* Zieht den Übergang in das untere Polster der Sektion darüber. Der
     obere Rand der Grafik ist ohnehin fast durchsichtig, dort steht also
     nur leerer Platz — der Wald soll früher anfangen, nicht erst nach
     einem Absatz. Die -1px unten schließen die Haarfuge zur nächsten
     Sektion. */
  margin: clamp(-80px, -5vw, -40px) 0 -1px;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  --fc-tile-w: 660px;
}
.forest-transition::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/muster-kachel.svg');
  background-repeat: repeat;
  background-position: var(--fc-pattern-x, center) var(--fc-pattern-y, 0px);
  background-size: var(--fc-tile-w) auto;
  /* scroll, nicht fixed. `fixed` verankert die Kachel am Fenster statt am
     Element: das Muster stand dann still, während die Seite darunter
     wegscrollte — und passte damit bei jeder Scrollposition anders zur
     Sektion darüber. Genau der Versatz am Waldübergang. Die alte Regel
     hier setzte fixed; die Forest-Camp-Regel überschrieb zwar Kachel,
     Größe und Position, aber nicht die Verankerung. */
  background-attachment: scroll;
  opacity: var(--fc-pattern-light);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 760px) {
  .forest-transition { --fc-tile-w: 460px; }
}
.forest-transition img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
/* Unten läuft das Bild in eine deckende dunkle Fläche aus — dort deckt es
   das Muster ab, das dahinter liegt. Die Sektion darunter trägt es aber,
   und seit es auf dunklem Grund überhaupt sichtbar ist, sah man an der
   Naht eine harte Kante: glatte Fläche trifft Muster.

   Diese Lage legt das Muster deshalb ÜBER das Bild und blendet es genau
   dort ein, wo das Bild deckend wird. Phase und Kachel sind dieselben wie
   überall, der Übergang ist damit nicht mehr zu sehen. */
.forest-transition::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url('../img/muster-kachel-hell.svg');
  background-repeat: repeat;
  background-position: var(--fc-pattern-x, center) var(--fc-pattern-y, 0px);
  background-size: var(--fc-tile-w) auto;
  opacity: var(--fc-pattern-dark);
  -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 78%);
  mask-image: linear-gradient(180deg, transparent 52%, #000 78%);
}

/* GUIDE BLOCK — Marco profile (dark) — stretched columns ---------- */
.guide-block {
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  align-items: center;
}
.guide-block__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 620px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(244,241,236,0.10);
  background: var(--c-card);
  margin: 0;
}
.guide-block__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: saturate(0.85) contrast(1.04) brightness(0.92);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.guide-block__portrait:hover img { transform: scale(1.03); }
.guide-block__portrait::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.65) 100%);
  pointer-events: none;
}
.guide-block__portrait figcaption {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 1;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.guide-block__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}
.guide-block__quote {
  font-family: var(--t-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  padding: 20px 0 20px 22px;
  border-left: 2px solid var(--c-accent);
  margin: 0;
}
.guide-block__tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.guide-block__tags li {
  padding: 18px 22px;
  background: rgba(203, 189, 147, 0.06);
  border: 1px solid rgba(203, 189, 147, 0.18);
  border-radius: 14px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-ink-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.guide-block__tags li span {
  display: block;
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-xl);
  color: var(--c-ink);
  margin-bottom: 4px;
}

/* FAQ — Accordion on dark --------------------------------------- */
.faq-list {
  border-top: 1px solid rgba(244,241,236,0.10);
}
.faq-item { border-bottom: 1px solid rgba(244,241,236,0.10); }
.faq-item details { padding: 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--t-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  transition: color .35s cubic-bezier(.16,.84,.25,1),
              transform .45s cubic-bezier(.16,.84,.25,1),
              padding-left .45s cubic-bezier(.16,.84,.25,1);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover {
  color: var(--c-accent);
  padding-left: 8px;
}
.faq-item details[open] summary {
  color: var(--c-accent);
}
.faq-item__plus {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(244,241,236,0.05);
  border: 1px solid rgba(244,241,236,0.18);
  position: relative;
  color: var(--c-ink);
  /* Das Plus ist gezeichnet, nicht gesetzt. Als Schriftzeichen hing
     seine Größe an der Typo-Leiter und sein Sitz an den Maßen der
     Schrift — im Kreis stand es zu groß und leicht aus der Mitte, und
     beim Drehen ins Kreuz wanderte es sichtbar. Zwei Balken sind exakt
     mittig und drehen sauber. */
  font-size: 0;
  transition: transform .4s cubic-bezier(.7,0,.3,1),
              background .25s ease,
              color .25s ease,
              border-color .25s ease;
}
.faq-item__plus::before,
.faq-item__plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq-item__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item details[open] .faq-item__plus {
  transform: rotate(45deg);
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}
.faq-item p {
  padding: 0 60px 32px 0;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink-2);
  max-width: 1040px;
  margin: 0;
}

/* FAQ als Karten statt als Strichliste.
   Die Sektionen des Systems arbeiten mit Karten — helle auf Papier,
   dunkle auf angehobenem Grund mit warmer Haarlinie. Die Fragen waren
   das einzige Element, das stattdessen nur Trennlinien hatte. Als Karten
   sind sie einzeln greifbar, und die geöffnete Frage hebt sich ab,
   statt nur weiter unten weiterzulaufen. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: none;
  max-width: 1040px;
  margin-inline: auto;
}
.faq-item {
  border: 1px solid rgba(203, 189, 147, 0.22);
  border-radius: 20px;
  background: var(--c-card);
  padding: 0 clamp(20px, 2vw, 30px);
  transition: border-color .3s ease, background .3s ease;
}
.faq-item:has(details[open]) { border-color: rgba(203, 189, 147, 0.45); }
.faq-item summary { padding: 22px 0; }
.faq-item summary:hover { padding-left: 0; }
.faq-item p { padding: 0 0 24px; max-width: none; }

/* FAQ auf heller Fläche.
   Die Liste war nur für Dunkel gebaut: helle Schrift, Linien in hellem
   Weiß-Alpha. Auf einer hellen Sektion stand damit heller Text auf
   hellem Grund. Hier dieselbe Gestaltung, nur mit den dunklen Tönen —
   damit das Widget seinen Flächen-Schalter überhaupt verdient. */
.slate--light .faq-item {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}
.slate--light .faq-item:has(details[open]) { border-color: rgba(0, 0, 0, 0.2); }
.slate--light .faq-item summary { color: var(--c-ink-dark); }
.slate--light .faq-item summary:hover,
.slate--light .faq-item details[open] summary { color: var(--c-accent-soft); }
.slate--light .faq-item__plus {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--c-ink-dark);
}
.slate--light .faq-item details[open] .faq-item__plus {
  background: var(--c-ink-dark);
  border-color: var(--c-ink-dark);
  color: var(--c-paper);
}
.slate--light .faq-item p { color: var(--c-ink-dark-2); }

/* Text unter dem Bildband. Auf 620 px gedeckelt und mittig — ohne
   automatische Ränder stünde er links statt unter der Mitte. */
.fc-marquee__caption {
  margin: 22px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-ink-3);
}
.slate--light .fc-marquee__caption { color: var(--c-ink-dark-3); }

/* CONTACT — central card with glass-pill channels --------------- */
.slate--contact { text-align: left; }
.contact-panel {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 24px;
  background: rgba(244, 241, 236, 0.04);
  border: 1px solid rgba(244, 241, 236, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.contact-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--c-ink);
  transition: background .5s cubic-bezier(.16,.84,.25,1),
              padding-left .5s cubic-bezier(.16,.84,.25,1);
}
.contact-row + .contact-row { border-top: 1px solid rgba(244,241,236,0.08); }
.contact-row:hover {
  background: rgba(244,241,236,0.05);
  padding-left: 36px;
}
.contact-row:hover .contact-row__arrow {
  background: var(--c-accent);
  color: var(--c-bg);
  border-color: var(--c-accent);
  transform: translate(2px, -2px);
}
.contact-row__lbl {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.contact-row__val {
  font-family: var(--t-display);
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.contact-row__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(244,241,236,0.05);
  border: 1px solid rgba(244,241,236,0.18);
  color: var(--c-ink);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.contact-row:hover .contact-row__arrow {
  background: var(--c-ink);
  color: var(--c-bg);
  transform: translateX(3px);
}

/* FOOTER — continuous with the last dark section above, no top divider */
.footer {
  position: relative;
  padding: 80px clamp(24px, 4vw, 80px) 40px;
  background: var(--c-bg);
  color: var(--c-ink);
}
/* (duplicate legacy footer rules removed — active rules live earlier) */

/* RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1100px) {
  .slate__stats { grid-template-columns: repeat(2, 1fr); }
  .tour-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-block { grid-template-columns: 1fr; gap: 40px; }
  .footer__inner { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 700px) {
  .feature-grid { grid-template-columns: 1fr; }
  .guide-block__tags { grid-template-columns: 1fr; }
  .tour-card__specs { grid-template-columns: 1fr 1fr; }
  .contact-row { grid-template-columns: 1fr auto; }
  .contact-row__lbl { grid-column: 1; }
  .contact-row__val { grid-column: 1; }
  .contact-row__arrow { grid-row: 1 / span 2; grid-column: 2; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ================================================================
   HIGHLIGHTS — full-bleed editorial card grid (light)
   ================================================================ */
.highlights-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}
.highlight-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-card);
  isolation: isolate;
  height: clamp(420px, 38vw, 580px);
  margin: 0;
}
.highlight-card--wide { height: clamp(420px, 38vw, 580px); }
.highlight-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.05);
  transition: transform 1.6s cubic-bezier(.2, .7, .2, 1);
  z-index: 0;
}
.highlight-card:hover img { transform: scale(1.05); }
.highlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 45%,
    rgba(0,0,0,0.55) 70%,
    rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.highlight-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--c-ink);
}
.highlight-card figcaption .slate__eyebrow {
  color: var(--c-accent);
}
.highlight-card h3 {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  color: var(--c-ink);
}
.highlight-card p {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(244, 241, 236, 0.92);
  max-width: 480px;
}

@media (max-width: 1100px) {
  .highlights-grid { grid-template-columns: 1fr 1fr; }
  .highlight-card--wide { grid-column: 1 / -1; aspect-ratio: 16/9; }
}
@media (max-width: 700px) {
  .highlights-grid { grid-template-columns: 1fr; }
  .highlight-card { aspect-ratio: 4/5; }
  .highlight-card--wide { aspect-ratio: 4/5; }
  /* Das Format der Karten kommt mobil aus theme.css (16/10) — hier nur
     die Lesbarkeit: Auf der flachen Karte nimmt die Bildunterschrift
     fast die halbe Höhe ein, der Verlauf muss deshalb früher einsetzen.
     Sonst steht die erste Zeile auf dem ungedämpften Foto. */
  .highlight-card::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.42) 32%,
      rgba(0, 0, 0, 0.78) 64%,
      rgba(0, 0, 0, 0.95) 100%);
  }
  .highlight-card figcaption { padding: 24px 22px 26px; }
}

/* Sektion ohne Kopf: Das obere Polster ist für einen Titel bemessen.
   Fehlt der, bleibt sonst eine leere Zone stehen, die aussieht, als
   fehle etwas. Rund die Hälfte reicht — ganz bündig würde die Sektion
   in die darüber laufen. */
.slate--nohead { padding-top: clamp(40px, 4.5vw, 70px); }
/* Überschriften auf dem Handy. Eigene Kurve statt der Untergrenze aus
   dem Grundwert: Bei 390 px sind das 34 px statt 48 px — genug, dass
   auch ein langes Wort in eine Zeile passt, und immer noch deutlich
   eine Schlagzeile. Der Deckel von 48 px trifft genau den Wert, mit dem
   die Grundregel oberhalb von 560 px weitermacht, damit es beim
   Umschalten nicht springt. */
@media (max-width: 560px) {
  .slate__title { font-size: clamp(28px, 8.6vw, 48px); }
}

/* ----------------------------------------------------------------
   TOURDATEN — Eckdaten als Wertepaare, darunter die Leistungsgruppen.
   Alles kommt aus dem Tourprodukt; leere Gruppen werden gar nicht
   ausgegeben, es gibt hier also keinen Leerzustand zu gestalten.
   ---------------------------------------------------------------- */
.tour-facts { display: grid; gap: clamp(24px, 3vw, 40px); }
.tour-facts__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--c-card-line);
  border: 1px solid var(--c-card-line);
  border-radius: 20px;
  overflow: hidden;
}
.tour-facts__specs > div {
  background: var(--c-card);
  padding: clamp(18px, 2vw, 26px);
}
.tour-facts__specs dt {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 8px;
}
.tour-facts__specs dd {
  margin: 0;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--c-ink);
}
.tour-facts__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.tour-facts__group {
  background: var(--c-card);
  border: 1px solid var(--c-card-line);
  border-radius: 20px;
  padding: clamp(20px, 2.2vw, 28px);
}
.tour-facts__group h3 {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-lg);
  color: var(--c-ink);
  margin: 0 0 14px;
}
.tour-facts__group ul { margin: 0; padding: 0; list-style: none; }
.tour-facts__group li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-ink-2);
}
.tour-facts__group li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
/* Haken und Strich statt zweier Farben: Wer die Farben nicht
   unterscheidet, sieht trotzdem, was enthalten ist und was nicht. */
.tour-facts__group--yes li::before { content: '✓'; color: var(--c-cool-soft); }
.tour-facts__group--no  li::before { content: '–'; color: var(--c-ink-3); }
.tour-facts__group--plain li { padding-left: 0; }
.slate--light .tour-facts__specs > div,
.slate--light .tour-facts__group { background: #ffffff; border-color: rgba(0, 0, 0, 0.09); }
.slate--light .tour-facts__specs { background: rgba(0, 0, 0, 0.09); border-color: rgba(0, 0, 0, 0.09); }
.slate--light .tour-facts__specs dd,
.slate--light .tour-facts__group h3 { color: var(--c-ink-dark); }
.slate--light .tour-facts__specs dt { color: var(--c-ink-dark-3); }
.slate--light .tour-facts__group li { color: var(--c-ink-dark-2); }