/* ================================================================
   FOREST CAMP — Unterseite, baut vollständig auf ../styles.css auf.
   Nur seiten-spezifische Komponenten: Hero, Programm, Ticketshop.
   ================================================================ */

/* ----------------------------------------------------------------
   HERO — Luftbild der Lütsche + Logo-Animation
   ---------------------------------------------------------------- */
.fc-hero {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-hero__photo {
  filter: saturate(0.82) contrast(1.05) brightness(0.72);
  object-position: center 35%;
}
.fc-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(0, 0, 0, 0.55) 0%, transparent 70%),
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.72) 0%,
      rgba(10, 10, 10, 0.35) 30%,
      rgba(10, 10, 10, 0.45) 70%,
      var(--c-bg) 100%);
}
.fc-hero__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 140px var(--gutter) 90px;
  /* Ohne width bemisst sich der Block nach seinem breitesten Kind — das
     war die Button-Zeile. Die Logo-Breite hing damit an der Länge der
     Button-Beschriftungen. Jetzt greift max-width wirklich. */
  width: 100%;
  max-width: 980px;
}

/* Logo-Bühne: Die Animation liegt als echtes Alpha-Video vor
   (HEVC-Alpha für Safari, VP9-Alpha für Chrome/Firefox) — kein
   Hintergrund, kein Blend-Trick. Nach einmaligem Abspielen blendet
   JS auf das transparente PNG um; das ist zugleich der Fallback,
   wenn ein Browser keins der Formate abspielt. */
.fc-hero__logo {
  --logo-w: min(620px, 100%);
  /* Die Zeichnung füllt nur den mittleren Streifen der Videofläche: oben
     sind 28,6 %, unten 27,8 % leer (an logo-final.png ausgemessen). Bei
     720 px Breite sind das über 110 px Nichts pro Seite — Zeile, Logo,
     Datum und Ort fallen dadurch optisch auseinander. Die Negativränder
     holen genau diesen Leerraum zurück, der Rest ist der gewollte
     Abstand. Prozentwerte, damit das in jeder Breite stimmt. */
  --logo-void-top:    calc(var(--logo-w) * 0.161);   /* 0,286 × 9/16 */
  --logo-void-bottom: calc(var(--logo-w) * 0.156);   /* 0,278 × 9/16 */
  position: relative;
  width: var(--logo-w);
  aspect-ratio: 16 / 9;
  margin: calc(34px - var(--logo-void-top)) 0 calc(28px - var(--logo-void-bottom));
  filter: drop-shadow(0 6px 40px rgba(0, 0, 0, 0.55));
}
.fc-hero__logo video,
.fc-hero__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fc-hero__logo video {
  opacity: 1;
  transition: opacity .6s ease;
}
.fc-hero__logo img {
  opacity: 0;
  transition: opacity .6s ease;
}
.fc-hero__logo.is-done video { opacity: 0; }
.fc-hero__logo.is-done img   { opacity: 1; }

/* Datum & Ort — ruhige Typo statt Pill */
.fc-hero__date {
  margin-top: 0;   /* der Abstand steckt im Unterrand des Logos */
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--c-ink);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.fc-hero__place {
  margin-top: 8px;
  font-family: var(--t-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
/* Steht jetzt ÜBER dem Logo — die ruhige Einleitungszeile zur Marke.
   Bewusst gemischte Schreibweise: die Ortszeile unter dem Logo ist schon
   Mono/Versal/gesperrt, zwei gleich behandelte Zeilen um das Logo herum
   würden sich gegenseitig Konkurrenz machen. Der Abstand nach unten
   steckt im Oberrand des Logos. */
.fc-hero__sub {
  margin: 0;
  max-width: 560px;
  text-align: center;
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(244, 241, 236, 0.88);
}
.fc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

@media (max-width: 760px) {
  .fc-hero {
    display: flex;               /* überschreibt das Grid der Haupt-Hero */
    height: auto;
    min-height: 100vh;           /* voller Screen, Video läuft hinter
                                    Notch und Home-Indikator */
    min-height: 100dvh;
  }
  .fc-hero .hero__bg { position: absolute; height: 100%; }
  .fc-hero__body {
    padding: calc(96px + env(safe-area-inset-top, 0px)) 20px
             calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .fc-hero__logo {
    margin: calc(16px - var(--logo-void-top)) 0 calc(12px - var(--logo-void-bottom));
  }

  /* Nav unter die Statusleiste schieben statt dahinter */
  .nav { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}

/* ----------------------------------------------------------------
   NAV — Warenkorb-Button mit Zähler
   ---------------------------------------------------------------- */
.nav__cart {
  position: relative;
  width: var(--nav-btn);
  height: var(--nav-btn);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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);
  color: var(--c-ink);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.nav__cart:hover {
  background: rgba(244, 241, 236, 0.12);
  border-color: rgba(244, 241, 236, 0.35);
  transform: translateY(-1px);
}
.nav__cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, color .3s ease, opacity .3s ease;
}
.nav__cart-badge.is-empty {
  background: rgba(60, 60, 58, 0.9);
  color: var(--c-ink-3);
}
.nav__cart-badge.bump { animation: qtyPop .35s cubic-bezier(.16,.84,.25,1); }
@media (max-width: 700px) {
  .nav__cta { display: none; }   /* mobil reicht der Warenkorb */
}

/* ----------------------------------------------------------------
   PROGRAMM — drei Tageskarten auf dunklem Slate
   ---------------------------------------------------------------- */
/* Vier Spalten für vier Tage (Do–So). Auf mittleren Schirmen zwei,
   darunter eine — sonst werden die Karten zu schmal für die Zeiten. */
/* ----------------------------------------------------------------
   PROGRAMM — große Tageskarten auf einer Schiene

   Dunkel, aber mit klarer Kante. Der erste Anlauf war Dunkelgrau ohne
   Rand — die Karten sahen aus wie ein etwas hellerer Fleck. Der zweite
   war Papier auf Schwarz: kontrastreich, aber es passte nicht zum Rest
   der Seite. Was eine Karte zur Karte macht, ist nicht die Helligkeit,
   sondern die Kante: eine warme Haarlinie im Akzent, eine leicht
   angehobene Fläche und ein Schatten, der sie von der Sektion abhebt.

   Die Karten rasten mittig ein, die Nachbartage stehen angeschnitten
   daneben und treten über Maßstab und Deckkraft zurück (--d aus main.js).
   ---------------------------------------------------------------- */
.program-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(30px, 3vw, 44px) clamp(26px, 2.8vw, 40px) clamp(24px, 2.4vw, 32px);
  border-radius: 28px;
  background: var(--c-card);
  border: 1px solid rgba(203, 189, 147, 0.22);
  box-shadow: 0 34px 80px -40px rgba(0, 0, 0, 0.95);
}
.program-day__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.program-day__tag {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(30px, 3vw, 42px);
  color: var(--c-ink);
}
.program-day__date {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.program-day ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.program-day li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 12px 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-ink);
}
.program-day li + li { border-top: 1px solid rgba(244, 241, 236, 0.09); }
/* Zeit als Chip statt als graue Spalte: sie ist die Information, an der
   man die Zeile findet, und darf deshalb etwas sein. */
.program-day li span {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(203, 189, 147, 0.13);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  color: var(--c-accent);
  white-space: nowrap;
}
.program-day li span:empty { display: none; }
.program-day__foot {
  padding-top: 18px;
  border-top: 1px solid rgba(244, 241, 236, 0.09);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
/* Auf heller Fläche: helle Karte, dunkle Schrift, gleiche Logik. */
.slate--light .program-day {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.4);
}
.slate--light .program-day__tag  { color: var(--c-ink-dark); }
.slate--light .program-day__date { color: var(--c-ink-dark-2); }
.slate--light .program-day li    { color: var(--c-ink-dark); }
.slate--light .program-day li + li { border-top-color: rgba(0, 0, 0, 0.08); }
.slate--light .program-day li span { background: rgba(0, 0, 0, 0.06); color: var(--c-ink-dark); }
.slate--light .program-day__foot {
  border-top-color: rgba(0, 0, 0, 0.09);
  color: var(--c-ink-dark-3);
}

@media (max-width: 620px) {
  .program-day li { grid-template-columns: 1fr; gap: 8px; }
  .program-day li span { justify-self: start; }
}

/* ----------------------------------------------------------------
   TICKETSHOP — Camper-Kachel, Personen-Karten, Kloß-Add-on
   ---------------------------------------------------------------- */
/* Der Ticketshop stand bisher als lose Elementfolge auf der Sektion —
   Fortschritt, Karten, Knöpfe, alles gleich gewichtet. Als eigenes Panel
   ist erkennbar, dass hier ein Vorgang läuft und wo er anfängt und
   aufhört. */
.tickets {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1000px;
  margin-inline: auto;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: 32px;
  /* Deckend, nicht durchscheinend. Als 4-Prozent-Schleier lief das
     Muster der Sektion quer durch das Panel und durch alles darin — bei
     der jetzigen Musterstärke sah der ganze Buchungsvorgang aus wie
     hinter Milchglas. Die Karten darin dürfen weiter durchscheinen, sie
     liegen ja auf einer deckenden Fläche. */
  background: var(--c-bg-soft);
  border: 1px solid rgba(244, 241, 236, 0.12);
  box-shadow: 0 44px 110px -55px rgba(0, 0, 0, 0.95);
}
.slate--light .tickets {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 34px 90px -50px rgba(0, 0, 0, 0.35);
}
/* Die Fortschrittsleiste ist die Kopfzeile des Panels. */
.tickets > .steps {
  margin: calc(clamp(24px, 2.6vw, 40px) * -1) calc(clamp(24px, 2.6vw, 40px) * -1) 6px;
  padding: 22px clamp(24px, 2.6vw, 40px);
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
}
.slate--light .tickets > .steps { border-bottom-color: rgba(0, 0, 0, 0.08); }
.tickets__subhead {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-2xl);
  color: var(--c-ink);
  margin: 22px 0 0;
}

/* ----- Fortschrittsleiste ----------------------------------------- */
.steps {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.steps li { display: flex; }
.steps__line {
  flex: 1;
  max-width: 90px;
  height: 1px;
  background: rgba(244, 241, 236, 0.15);
}
.step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink-3);
  transition: color .25s ease;
}
.step:disabled { cursor: default; }
.step:not(:disabled):hover { color: var(--c-ink); }
.step__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(244, 241, 236, 0.25);
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-base);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.step__lbl {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.step.is-active { color: var(--c-ink); }
.step.is-active .step__num {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
  transform: scale(1.08);
}
.step.is-done { color: var(--c-ink-2); }
.step.is-done .step__num {
  background: rgba(203, 189, 147, 0.16);
  border-color: rgba(203, 189, 147, 0.5);
  color: var(--c-accent);
}

/* ----- Schritt-Panels ---------------------------------------------- */
.step-panel[hidden] { display: none; }
.step-panel { animation: panelIn .45s cubic-bezier(.16,.84,.25,1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
.step-panel__hint {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--c-ink-2);
  margin: 0 0 16px;
}
/* Hinweis UNTER den Ticket-Karten braucht Luft nach oben, sonst klebt
   er am Rand der letzten Karte. */
.step-panel__hint--after { margin: 18px 0 0; }
.avail-pill {
  display: inline-flex;
  align-items: center;
  /* Umbrechen erlaubt: „Noch 150 von 150 Stellplätzen frei" ist bei
     390 px 292 px breit und passte nicht in den 277 px breiten Kasten
     des Buchungsschritts. In einer starren Zeile ragte sie heraus. */
  flex-wrap: wrap;
  max-width: 100%;
  gap: 9px;
  margin: 0 0 22px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(203, 189, 147, 0.08);
  border: 1px solid rgba(203, 189, 147, 0.30);
  font-size: var(--fs-md);
  color: var(--c-ink-2);
}
.avail-pill strong { color: var(--c-accent); font-weight: 600; }
.avail-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
  animation: availPulse 2.4s ease-in-out infinite;
}
@keyframes availPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(203, 189, 147, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(203, 189, 147, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .avail-pill__dot { animation: none; }
}
/* Der Weiter-Knopf schloss die Schritte bisher unauffällig ab — gleiche
   Größe wie alles andere, direkt unter der letzten Karte, ohne Absatz.
   Er ist aber der einzige Weg vorwärts. Jetzt setzt eine Trennlinie den
   Fuß ab, und der Knopf selbst trägt deutlich mehr Gewicht. */
.step-panel__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 241, 236, 0.10);
}
.step-panel__foot--split { justify-content: space-between; }
.step-panel__foot .btn--primary {
  padding: 18px 30px;
  font-size: var(--fs-lg);
  gap: 12px;
}
/* Die Summe steht auf dem Knopf, damit niemand weiterklickt, ohne zu
   wissen, worauf. Abgesetzt durch einen senkrechten Strich statt durch
   einen Punkt — bei Beträgen liest sich das ruhiger. */
.btn__sum {
  position: relative;
  padding-left: 14px;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.btn__sum:empty { display: none; }
.btn__sum::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.05em;
  background: currentColor;
  opacity: 0.28;
}
.slate--light .step-panel__foot { border-top-color: rgba(0, 0, 0, 0.10); }
.step-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  transition: color .2s ease;
}
.step-back:hover { color: var(--c-accent); }

/* ----- Schritt 1: Ticket-Auswahl ------------------------------------ */
.ticket-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ticket-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  padding: 28px 28px 24px;
  border-radius: 22px;
  background: rgba(244, 241, 236, 0.05);
  border: 1px solid rgba(244, 241, 236, 0.10);
  color: var(--c-ink);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.ticket-option:hover { transform: translateY(-4px); border-color: rgba(244, 241, 236, 0.25); }
.ticket-option.is-selected {
  border-color: var(--c-accent);
  background: rgba(203, 189, 147, 0.08);
}
.ticket-option__check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(244, 241, 236, 0.25);
  color: transparent;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.ticket-option.is-selected .ticket-option__check {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
  transform: scale(1.1);
}
.ticket-option__days {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1;
  color: var(--c-ink);
}
.ticket-option__name {
  font-family: var(--t-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-accent);
  margin-top: 6px;
}
.ticket-option__sub {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink-2);
  margin-top: 4px;
  max-width: 420px;
}
.ticket-option__price {
  margin-top: 18px;
  font-family: var(--t-display);
  font-weight: 900;
  font-size: clamp(26px, 2.2vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .ticket-options { grid-template-columns: 1fr; }
  .steps { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .steps__line { max-width: 40px; }
  .step__lbl { display: none; }
  .step.is-active .step__lbl { display: inline; }
}

/* ----- Crew-Liste: eine Zeile pro Person --------------------------- */
.crew__head { margin-bottom: 18px; }
.crew__head .tickets__subhead { margin: 0 0 6px; }
.crew__hint { font-size: var(--fs-lg); line-height: 1.6; color: var(--c-ink-2); margin: 0; }

.crew-list {
  border-radius: 20px;
  background: rgba(244, 241, 236, 0.05);
  border: 1px solid rgba(244, 241, 236, 0.10);
  padding: 4px 24px;
  margin-bottom: 16px;
}
.crew-row {
  display: grid;
  /* Jede Zeile ist ihr eigenes Raster — eine auto-Spalte richtet sich
     deshalb nur nach der eigenen Zeile aus, und Preis und Kreuz standen
     von Zeile zu Zeile woanders. Feste Mindestbreite plus rechtsbündiger
     Preis stellt die Spalte über alle Zeilen hinweg auf eine Kante. */
  grid-template-columns: 44px 1fr minmax(92px, auto) 28px;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  animation: chipIn .35s cubic-bezier(.16,.84,.25,1);
}
.crew-row + .crew-row { border-top: 1px solid rgba(244, 241, 236, 0.08); }
.crew-row--empty {
  display: block;
  padding: 22px 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-ink-3);
  animation: none;
}
.crew-row--empty strong { color: var(--c-ink-2); font-weight: 600; }
@keyframes chipIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.crew-row__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(203, 189, 147, 0.10);
  color: var(--c-accent);
  flex-shrink: 0;
}
.crew-row__avatar svg { width: 22px; height: 22px; }
.crew-row__who { min-width: 0; }
.crew-row__who strong {
  display: block;
  font-family: var(--t-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-ink);
}
.crew-row__who small {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.crew-row__price {
  text-align: right;
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-xl);
  color: var(--c-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.crew-row__price--muted {
  font-family: var(--t-mono);
  font-weight: 400;
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.crew-row__x {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-4);
  transition: color .2s ease, background .2s ease;
}
.crew-row__x:hover { color: var(--c-ink); background: rgba(244, 241, 236, 0.1); }
.crew-row__x svg { width: 11px; height: 11px; }
.crew-row__x[disabled] { visibility: hidden; }

/* Hinzufügen-Buttons */
.crew-add {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.addp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  border-radius: 18px;
  /* Gestrichelt hieß „hier fehlt etwas". Das sind aber Knöpfe, die man
     drückt — also gefüllt und mit klarer Kante. */
  background: rgba(244, 241, 236, 0.07);
  border: 1px solid rgba(244, 241, 236, 0.16);
  color: var(--c-ink);
  font-family: var(--t-display);
  font-weight: 700;
  font-size: var(--fs-base);
  text-align: left;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.addp:hover:not(:disabled) {
  background: rgba(203, 189, 147, 0.14);
  border-color: var(--c-accent);
  transform: translateY(-2px);
}
.addp:hover:not(:disabled) .addp__plus { transform: scale(1.08); }
.addp:disabled { opacity: 0.35; cursor: default; }
.addp small {
  display: block;
  font-family: var(--t-mono);
  font-weight: 400;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-top: 2px;
}
.addp__plus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  transition: background .3s ease, transform .3s ease;
}
.addp:hover:not(:disabled) .addp__plus { background: var(--c-accent); }

@media (max-width: 900px) {
  .crew-add { grid-template-columns: 1fr; }
  .crew-list { padding: 4px 16px; }
  .crew-row { grid-template-columns: 40px 1fr auto 28px; }
}

/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 2px;
}
.step-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 236, 0.25);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-2xl);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.step-btn:hover:not(:disabled) {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}
.step-btn:disabled { opacity: 0.25; cursor: default; }
.stepper output {
  min-width: 38px;
  text-align: center;
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-xl);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* ----- Bestellübersicht ------------------------------------------ */
.shop__cart {
  position: sticky;
  top: 96px;
}
.cart__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cart__head-icon { color: var(--c-accent); flex-shrink: 0; }
.cart__title {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-2xl);
  color: var(--c-ink);
  margin: 0;
}
.cart__count {
  margin-left: auto;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, color .3s ease;
}
.cart__count.is-empty {
  background: rgba(244, 241, 236, 0.12);
  color: var(--c-ink-3);
}
.cart__count.bump { animation: qtyPop .35s cubic-bezier(.16,.84,.25,1); }
.cart__total-val.bump { animation: totalPop .35s ease; }
@keyframes totalPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Leerer Warenkorb */
.cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  margin: 6px 0 2px;
  border: 1.5px dashed rgba(244, 241, 236, 0.18);
  border-radius: 14px;
  text-align: center;
}
.cart__empty svg { color: var(--c-ink-4); }
.cart__empty p {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-ink-3);
  margin: 0;
  max-width: 220px;
}

/* Warenkorb-Zeilen: Einslide + Entfernen-Knopf */
.cart__lines li.line-in { animation: lineIn .35s cubic-bezier(.16,.84,.25,1); }
@keyframes lineIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
.cart__line-x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-4);
  border: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.cart__line-x:hover {
  color: var(--c-ink);
  border-color: rgba(244, 241, 236, 0.3);
  transform: rotate(90deg);
}
.cart__line-x svg { width: 10px; height: 10px; }

/* Hinweis, solange kein Camper-Ticket im Korb liegt */
.cart__gate {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-ink-3);
}
.cart__gate[hidden] { display: none; }
.btn--primary:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
}

/* Fußbereich des Warenkorbs */
.cart__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(244, 241, 236, 0.10);
  padding-top: 22px;
}
.cart__lines {
  display: flex;
  flex-direction: column;
}
.cart__lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
  font-size: var(--fs-base);
  color: var(--c-ink-2);
}
.cart__lines li strong {
  font-weight: 500;
  color: var(--c-ink);
}
.cart__lines li .cart__line-val {
  font-family: var(--t-mono);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cart__lines li.cart__line--free .cart__line-val { color: var(--c-cool-soft); }

.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 22px;
}
.cart__total-lbl {
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.cart__total-val {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: clamp(32px, 2.8vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* Fehlermeldung im Ticketshop und im Kassen-Overlay.
   Hatte bisher gar kein Styling und erschien als nackter Fließtext
   unter dem Bezahlen-Knopf — die wichtigste Rückmeldung des ganzen
   Ablaufs war damit kaum als solche zu erkennen. */
.fc-shop-msg {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(179, 45, 46, 0.14);
  border: 1px solid rgba(179, 45, 46, 0.45);
  color: #ffd9d9;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.fc-shop-msg[hidden] { display: none; }
.fc-shop-msg::before {
  content: "!";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 217, 217, 0.9);
  color: #7a1f20;
  font-weight: 800;
  font-size: var(--fs-md);
  line-height: 20px;
  text-align: center;
}
.slate--light .fc-shop-msg {
  background: rgba(179, 45, 46, 0.08);
  border-color: rgba(179, 45, 46, 0.35);
  color: #7a1f20;
}
.slate--light .fc-shop-msg::before { background: #7a1f20; color: #fff; }

/* Formular */

/* Honigtopf gegen Bots (Tour-Anmeldung): für Menschen unsichtbar, für
   Formular-Ausfüller aber ein ganz normales Feld. Nicht display:none —
   manche Bots überspringen genau das. */
.fc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cart__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cart__field span {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.cart__field span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--c-ink-4);
}
.cart__field input {
  font-family: var(--t-body);
  font-size: var(--fs-lg);
  color: var(--c-ink);
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.16);
  transition: border-color .25s ease, background .25s ease;
  width: 100%;
}
.cart__field input::placeholder { color: var(--c-ink-4); }
.cart__field input:focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(10, 10, 10, 0.65);
}
.cart__field input.is-invalid { border-color: #b3564a; }

/* Zahlungsart — verbundene Optionsgruppe */
.pay-group {
  border: 1px solid rgba(244, 241, 236, 0.16);
  border-radius: 14px;
  overflow: hidden;
}
.pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: rgba(10, 10, 10, 0.35);
  cursor: pointer;
  transition: background .25s ease;
}
.pay-option + .pay-option { border-top: 1px solid rgba(244, 241, 236, 0.10); }
.pay-option:hover { background: rgba(244, 241, 236, 0.04); }
.pay-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pay-option__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(244, 241, 236, 0.4);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s ease;
}
.pay-option__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0;
  transition: opacity .2s ease;
}
.pay-option:has(input:checked) {
  background: rgba(203, 189, 147, 0.10);
}
.pay-option:has(input:checked) .pay-option__dot { border-color: var(--c-accent); }
.pay-option:has(input:checked) .pay-option__dot::after { opacity: 1; }
.pay-option:has(input:focus-visible) {
  outline: 2px solid rgba(203, 189, 147, 0.6);
  outline-offset: 2px;
}
.pay-option__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-ink);
}
.pay-option__label small {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-ink-3);
}

/* Einwilligungen */
.cart__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
  cursor: pointer;
}
.cart__consent a { color: var(--c-accent); text-decoration: underline; }
.cart__consent em { font-style: normal; color: var(--c-ink-4); }
.cart__consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.consent-box {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(244, 241, 236, 0.4);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-bg);
  transition: background .2s ease, border-color .2s ease;
}
.consent-box svg { width: 11px; height: 11px; opacity: 0; }
.cart__consent:has(input:checked) .consent-box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.cart__consent:has(input:checked) .consent-box svg { opacity: 1; }
.cart__consent:has(input:focus-visible) .consent-box {
  outline: 2px solid rgba(203, 189, 147, 0.6);
  outline-offset: 2px;
}
.cart__consent.is-invalid { color: #d98a7f; }
.cart__consent.is-invalid .consent-box { border-color: #b3564a; }

.cart__submit {
  width: 100%;
  margin-top: 6px;
}
.cart__hint {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-ink-3);
}
.cart__trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cart__trust li {
  position: relative;
  padding-left: 24px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.cart__trust li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbbd93" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>')
    center / 9px no-repeat,
    rgba(203, 189, 147, 0.14);
}

/* Erfolgsmeldung */
.cart__success[hidden] { display: none; }
.cart__success {
  text-align: center;
  padding: 26px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cart__success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 107, 47, 0.25);
  border: 1px solid var(--c-cool-soft);
  color: var(--c-ink);
}
/* Haken zeichnet sich, sobald die Bestätigung erscheint */
.cart__success:not([hidden]) .cart__success-icon path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: drawCheck .5s ease .25s forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .crew-row,
  .cart__lines li.line-in,
  .checkout__backdrop,
  .checkout__panel,
  .checkout__success:not([hidden]),
  .stepper output.pop,
  .cart__count.bump,
  .cart__total-val.bump { animation: none; }
}
.cart__success h3 {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: var(--fs-3xl);
  color: var(--c-ink);
}
.cart__success p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-ink-2);
  max-width: 320px;
}

/* ----------------------------------------------------------------
   PLATZ-ABSCHNITT — Fakten & Foto-Credits
   ---------------------------------------------------------------- */
#platz .spec-row { margin-bottom: 28px; }

.fc-credits {
  margin-top: 18px;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-dark-3);
}

/* ----------------------------------------------------------------
   FOOTER — Anpassungen fürs breite Forest-Camp-Logo
   ---------------------------------------------------------------- */
.footer__logo--fc img { width: 220px; }

/* Der Footer der Hauptseite bricht seine zweispaltige Kopfzeile nie um —
   auf schmalen Screens läuft er sonst aus dem Viewport. */
@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}

/* ----------------------------------------------------------------
   MOBILE SHOP-LEISTE — Summe + Zur Kasse, nur auf schmalen Screens
   ---------------------------------------------------------------- */
.shop-bar[hidden] { display: none; }
.shop-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100% - 24px));
  bottom: 14px;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 20px;
  border-radius: 18px;
  background: rgba(15, 15, 16, 0.92);
  border: 1px solid rgba(244, 241, 236, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.shop-bar__total {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.shop-bar__total small {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.shop-bar__total strong {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.shop-bar__btn { padding: 14px 22px; font-size: var(--fs-base); }
/* Erst hier wird sie sichtbar: Am Desktop sitzt der Warenkorb in der
   Nav-Leiste, dort wäre die Leiste doppelt gemoppelt. Der Kommentar
   oben sagte das schon — die Media Query fehlte aber. */
@media (max-width: 900px) {
  .shop-bar:not([hidden]) {
    display: flex;
    animation: barIn .4s cubic-bezier(.16, .84, .25, 1);
  }
}
@keyframes barIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ----------------------------------------------------------------
   RESPONSIVE — Shop
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .person-grid { grid-template-columns: 1fr; }

}

/* ----------------------------------------------------------------
   KASSE — eigene View als Overlay
   ---------------------------------------------------------------- */
body.checkout-open { overflow: hidden; }

.checkout[hidden] { display: none; }
.checkout {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(0px, 3vw, 40px);
}
.checkout__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: checkoutFade .35s ease;
}
@keyframes checkoutFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.checkout__panel {
  position: relative;
  width: min(1000px, 100%);
  max-height: min(92dvh, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background: var(--c-bg-soft);
  border: 1px solid rgba(244, 241, 236, 0.14);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
  animation: checkoutRise .45s cubic-bezier(.16,.84,.25,1);
}
@keyframes checkoutRise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Kopfzeile */
.checkout__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
  flex-shrink: 0;
}
.checkout__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  transition: color .2s ease;
}
.checkout__back:hover { color: var(--c-accent); }
.checkout__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-2xl);
  color: var(--c-ink);
  margin: 0;
}
.checkout__close {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 241, 236, 0.06);
  border: 1px solid rgba(244, 241, 236, 0.16);
  color: var(--c-ink);
  transition: background .25s ease, transform .25s ease;
}
.checkout__close:hover { background: rgba(244, 241, 236, 0.14); transform: rotate(90deg); }

/* Inhalt: zwei Spalten */
.checkout__grid {
  --sum-col: 42.5%;           /* 0.85fr von 2fr — muss zu den Spalten passen */
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  overflow: auto;
  /* Der Streifen der linken Spalte liegt auf dem Scroll-Container, nicht
     auf der Übersicht selbst. Hintergründe eines Scroll-Containers
     scrollen nicht mit — die Spalte bleibt also optisch durchgehend,
     auch wenn die Übersicht darin oben klebt. */
  background:
    /* Trennlinie zwischen den Spalten */
    linear-gradient(to right,
      transparent               0,
      transparent               var(--sum-col),
      rgba(244, 241, 236, 0.08) var(--sum-col),
      rgba(244, 241, 236, 0.08) calc(var(--sum-col) + 1px),
      transparent               calc(var(--sum-col) + 1px)),
    /* Fläche der linken Spalte */
    linear-gradient(to right,
      rgba(244, 241, 236, 0.03) var(--sum-col),
      transparent               var(--sum-col));
}
.checkout__grid[hidden] { display: none; }

.checkout__summary {
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
/* Die Übersicht ist kurz, das Formular lang. Bisher scrollte sie einfach
   weg und ließ eine große leere Fläche neben dem Formular zurück — genau
   die, die beim Ausfüllen und Abhaken zu sehen war. Jetzt bleibt sie
   stehen: Ticket, Summe und Zusicherungen sind bis zum Bezahlen im Blick. */
@media (min-width: 821px) {
  .checkout__summary {
    position: sticky;
    top: 0;
    align-self: start;
    /* In sehr flachen Fenstern wäre die Übersicht höher als der sichtbare
       Ausschnitt — an die Summe käme man dann nicht mehr heran. Das Panel
       ist auf 92dvh gedeckelt, abzüglich Kopfzeile bleibt dieser Wert. */
    max-height: calc(92dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .checkout__trust { margin-top: 24px; }
}
.checkout__summary h4 {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.checkout__lines { display: flex; flex-direction: column; }
.checkout__lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244, 241, 236, 0.08);
  font-size: var(--fs-base);
  color: var(--c-ink-2);
}
.checkout__lines li strong { font-weight: 500; color: var(--c-ink); }
.checkout__lines li span:last-child {
  font-family: var(--t-mono);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.checkout__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 6px;
}
.checkout__total span {
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.checkout__total strong {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: clamp(30px, 2.6vw, 40px);
  letter-spacing: -0.03em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
/* Zusicherungen in der Kassen-Übersicht. Solange die Spalte gestreckt
   ist (kurze Fenster), hängen sie unten; klebt die Übersicht oben, folgen
   sie direkt auf die Summe — siehe Media Query oben. */
.checkout__trust {
  margin-top: auto;
  padding-top: 22px;
}
.checkout__note {
  margin-top: auto;
  padding-top: 20px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-ink-3);
}

/* Formular-Spalte */
.checkout__form {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout__step {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  padding-bottom: 2px;
}
.checkout__step:not(:first-child) { margin-top: 14px; }

/* Bestätigung */
.checkout__success[hidden] { display: none; }
.checkout__success {
  padding: clamp(40px, 7vw, 70px) 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  animation: checkoutRise .4s cubic-bezier(.16,.84,.25,1);
}
.checkout__success h3 {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: var(--fs-4xl);
  color: var(--c-ink);
}
.checkout__success p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-ink-2);
  max-width: 340px;
}
.checkout__success .btn { margin-top: 12px; }
.checkout__success:not([hidden]) .cart__success-icon path {
  stroke-dasharray: 26;
  animation: drawCheckIn .55s ease .2s both;
}
@keyframes drawCheckIn {
  from { stroke-dashoffset: 26; }
  to   { stroke-dashoffset: 0; }
}

/* Mobil: Vollbild-Sheet */
@media (max-width: 820px) {
  .checkout { padding: 0; }
  .checkout__panel {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .checkout__grid { grid-template-columns: 1fr; background: none; }
  .checkout__summary {
    background: rgba(244, 241, 236, 0.03);
    border-bottom: 1px solid rgba(244, 241, 236, 0.08);
    padding: 22px 20px;
  }
  .checkout__form { padding: 22px 20px 40px; }
  .checkout__back span { display: none; }
}

/* ----------------------------------------------------------------
   WARENKORB — eigene View als Drawer von rechts
   ---------------------------------------------------------------- */
body.cart-open { overflow: hidden; }

.cartview[hidden] { display: none; }
.cartview {
  position: fixed;
  inset: 0;
  z-index: 140;
}
.cartview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: checkoutFade .3s ease;
}
.cartview__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--c-bg-soft);
  border-left: 1px solid rgba(244, 241, 236, 0.12);
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.55);
  animation: drawerIn .45s cubic-bezier(.16,.84,.25,1);
}
@keyframes drawerIn {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.cartview__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
  flex-shrink: 0;
}
.cartview__head .cart__count { margin-left: 4px; }
.cartview__close {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 241, 236, 0.06);
  border: 1px solid rgba(244, 241, 236, 0.16);
  color: var(--c-ink);
  transition: background .25s ease, transform .25s ease;
}
.cartview__close:hover { background: rgba(244, 241, 236, 0.14); transform: rotate(90deg); }

.cartview__lines {
  flex: 1;
  overflow-y: auto;
  padding: 10px 22px;
}
.cartview__foot {
  flex-shrink: 0;
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(244, 241, 236, 0.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(244, 241, 236, 0.02);
}
.cartview__foot .cart__total { padding: 4px 0 6px; }

/* ----------------------------------------------------------------
   WARENKORB — eigene View als Drawer von rechts
   ---------------------------------------------------------------- */
body.cart-open { overflow: hidden; }

.cartview[hidden] { display: none; }
.cartview {
  position: fixed;
  inset: 0;
  z-index: 140;
}
.cartview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: checkoutFade .3s ease;
}
.cartview__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--c-bg-soft);
  border-left: 1px solid rgba(244, 241, 236, 0.12);
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.55);
  animation: drawerIn .45s cubic-bezier(.16,.84,.25,1);
}
@keyframes drawerIn {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.cartview__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
  flex-shrink: 0;
}
.cartview__head .cart__count { margin-left: 4px; }
.cartview__close {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 241, 236, 0.06);
  border: 1px solid rgba(244, 241, 236, 0.16);
  color: var(--c-ink);
  transition: background .25s ease, transform .25s ease;
}
.cartview__close:hover { background: rgba(244, 241, 236, 0.14); transform: rotate(90deg); }

.cartview__lines {
  flex: 1;
  overflow-y: auto;
  padding: 10px 22px;
}
.cartview__foot {
  flex-shrink: 0;
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(244, 241, 236, 0.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(244, 241, 236, 0.02);
}
.cartview__foot .cart__total { padding: 4px 0 6px; }


/* ----------------------------------------------------------------
   KASSE — Shop-Look: Event-Karte, Gutschein, Express, Blöcke
   ---------------------------------------------------------------- */
.checkout__event {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
}
.checkout__event img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}
.checkout__event strong {
  display: block;
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-lg);
  color: var(--c-ink);
}
.checkout__event small {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* Gutschein */
.checkout__coupon {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.checkout__coupon input {
  flex: 1;
  min-width: 0;
  font-family: var(--t-body);
  font-size: var(--fs-md);
  color: var(--c-ink);
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.16);
}
.checkout__coupon input::placeholder { color: var(--c-ink-4); }
.checkout__coupon input:focus { outline: none; border-color: var(--c-accent); }
.checkout__coupon button {
  padding: 11px 18px;
  border-radius: 10px;
  background: rgba(244, 241, 236, 0.08);
  border: 1px solid rgba(244, 241, 236, 0.18);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  transition: background .25s ease;
}
.checkout__coupon button:hover { background: rgba(244, 241, 236, 0.16); }
.checkout__coupon-msg {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: #d98a7f;
}
.checkout__coupon-msg[hidden] { display: none; }

/* Express-Checkout */
.checkout__express {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}
.checkout__express-lbl {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  text-align: center;
}
.paypal-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: #ffc439;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  transition: filter .2s ease, transform .2s ease;
}
.paypal-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.paypal-btn i { font-style: italic; font-weight: 800; color: #003087; }
.paypal-btn em { font-style: italic; font-weight: 800; color: #0070ba; }
.checkout__or {
  display: flex;
  align-items: center;
  gap: 14px;
}
.checkout__or::before,
.checkout__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(244, 241, 236, 0.12);
}
.checkout__or span {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-4);
}

/* Formular-Blöcke */
.checkout__form { gap: 16px; }
/* Die Felder standen frei auf der Fläche des Overlays — vier Themen
   hintereinander ohne erkennbare Grenze, nur durch Abstände getrennt.
   Als Karten ist jeder Abschnitt ein Block: Kontakt, Adresse, Fahrzeug,
   Zahlung. Dieselbe Sprache wie bei den FAQ und den Programmtagen. */
.checkout__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 20px;
  background: var(--c-card);
  border: 1px solid rgba(203, 189, 147, 0.16);
}
/* Die Zahlungsarten haben ihren eigenen Rahmen — zwei ineinander wären
   einer zu viel. */
.checkout__block .pay-group {
  border: none;
  border-radius: 0;
}
.checkout__block .pay-option:first-child { border-top: none; }
.checkout__block h4 {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-base);
  color: var(--c-ink);
  margin: 0;
}
.checkout__block--consent { gap: 10px; }

/* Bezahlen-Button + Rechtliches */
.checkout__pay {
  width: 100%;
  gap: 10px;
}
.checkout__pay svg { flex-shrink: 0; }
.checkout__legal-hint { text-align: center; }


/* ----------------------------------------------------------------
   NAV — größeres Forest-Camp-Logo
   ---------------------------------------------------------------- */
.nav__brand { height: 76px; }
@media (max-width: 700px) {
  .nav__brand { height: 60px; }
}

/* ----------------------------------------------------------------
   HERO-VIDEO — lädt lazy, Poster steht sofort
   ---------------------------------------------------------------- */
video.fc-hero__photo { object-fit: cover; }

/* ----------------------------------------------------------------
   KLOSS-BOX — Personen antippen, die mitessen
   ---------------------------------------------------------------- */
.kloss-box[hidden] { display: none; }
.kloss-box {
  /* Seit die Box hinter die Hinzufügen-Knöpfe gewandert ist, braucht sie
     den Abstand nach oben selbst — vorher kam er vom Rand der Liste,
     die davor stand. Ohne ihn klebte sie an den Knöpfen. */
  margin: 18px 0 16px;
  padding: 22px 26px;
  border-radius: 20px;
  background: rgba(203, 189, 147, 0.06);
  border: 1px solid rgba(203, 189, 147, 0.25);
}
.kloss-box__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.kloss-box__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(203, 189, 147, 0.12);
  color: var(--c-accent);
  flex-shrink: 0;
}
.kloss-box__icon svg { width: 26px; height: 26px; }
.kloss-box__txt { flex: 1; min-width: 0; }
.kloss-box__txt h4 {
  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: 0 0 2px;
}
.kloss-box__txt p {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink-2);
  margin: 0;
  max-width: 640px;
}
.kloss-box__sum {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-2xl);
  color: var(--c-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kloss-box__people {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kloss-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px 11px 13px;
  border-radius: 14px;
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(244, 241, 236, 0.18);
  color: var(--c-ink-2);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.kloss-pill:hover { border-color: rgba(203, 189, 147, 0.6); color: var(--c-ink); transform: translateY(-1px); }
.kloss-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.kloss-pill__check {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1.5px solid rgba(244, 241, 236, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.kloss-pill__check svg { width: 10px; height: 10px; }
.kloss-pill.is-on {
  background: rgba(203, 189, 147, 0.14);
  border-color: var(--c-accent);
  color: var(--c-ink);
}
.kloss-pill.is-on .kloss-pill__check {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
}

/* ----------------------------------------------------------------
   ZAHLARTEN — Badges rechts
   ---------------------------------------------------------------- */
.pay-option { position: relative; }
.pay-badge {
  margin-left: auto;
  width: 52px;
  height: 32px;
  border-radius: 6px;
  background: rgba(244, 241, 236, 0.92);
  color: #2b2b28;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pay-badge--pp {
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  background: #ffffff;
}
.pay-badge--pp i { font-style: italic; font-weight: 800; color: #003087; }
.pay-badge--pp em { font-style: italic; font-weight: 800; color: #0070ba; }


/* Kloß-Pill: Textblock mit Preis */
.kloss-pill__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  text-align: left;
}
.kloss-pill__txt small {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.kloss-pill.is-on .kloss-pill__txt small { color: var(--c-accent); }

/* Pflichtfeld-Sternchen */
.req { color: var(--c-accent); font-weight: 700; }

/* ----------------------------------------------------------------
   MOBILE-FEINSCHLIFF & PERFORMANCE
   ---------------------------------------------------------------- */
/* iPhone: Bereich hinter Notch/Statusleiste dunkel statt weiß,
   und Overscroll unter dem Footer bleibt schwarz */
html, body { background: var(--c-bg); }

@media (max-width: 820px) {
  /* Backdrop-Blur ist auf Mobilgeräten teuer: dunkler statt unscharf */
  .cartview__backdrop,
  .checkout__backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.88);
  }
}

@media (max-width: 700px) {
  /* Sektionsköpfe mittig */
  .slate__head {
    text-align: center;
    align-items: center;
  }
  .slate__head .slate__eyebrow { justify-content: center; }

  #platz .fc-credits { text-align: center; }
}

/* Kloß-Box mobil: Kopf stapeln statt quetschen */
@media (max-width: 700px) {
  .kloss-box { padding: 18px; }
  .kloss-box__head {
    flex-wrap: wrap;
    gap: 12px;
  }
  .kloss-box__icon { width: 42px; height: 42px; }
  .kloss-box__txt { flex: 1; min-width: 200px; }
  .kloss-box__sum {
    width: 100%;
    order: 3;
    padding-top: 4px;
  }
  .kloss-box__people { flex-direction: column; }
  .kloss-box__people .kloss-pill { width: 100%; }

  /* Schritt-Footer: Weiter-Button voll, Zurück-Link drunter */
  .step-panel__foot--split {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }
  .step-panel__foot .btn--primary { width: 100%; justify-content: center; }
  .step-panel__foot--split .step-back { align-self: center; }
}

/* ----------------------------------------------------------------
   VX4-MUSTER auf der Forest-Camp-Website
   Früher wurde hier das Muster pro Sektion einmal groß gezogen
   (106% × 104%, no-repeat) und der Waldübergang hatte seine eigene
   Fassung. Beides ist mit der nahtlosen Kachel und der Phasenrechnung
   in base.css/main.js erledigt — die Sonderregeln sind ersatzlos
   entfallen. Eine zweite Definition für den Übergang war sogar
   schädlich: sie überschrieb Kachel, Größe und Position, aber nicht
   background-attachment, sodass dort heimlich `fixed` aus der alten
   Regel weitergalt.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   FOOTER — vereinfacht und zentriert (Desktop & Mobil)
   ---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   FOOTER mit Waldkante

   Die Grafik gibt es in zwei Fassungen, und sie unterscheiden sich nicht
   nur in der Silhouette: Die dunkle hat schwarze Bäume auf schwarzem
   Boden, die helle weiße Bäume auf weißem Boden. Der Boden ist die
   Fläche des Footers — die Wahl der Fassung dreht also den ganzen Footer
   mit.

   Daraus folgt die Regel: Der Footer kippt gegen die Sektion darüber.
   Helle Schlusssektion → dunkler Footer, dunkle → heller. So bleibt die
   Silhouette immer sichtbar, und weil ihr Himmel durchsichtig ist und
   die Farbe der Sektion darüber trägt, entsteht oben nie eine Kante.
   Welcher Fall gilt, trägt main.js ein.

   Der Wechsel von Himmel- auf Bodenfarbe liegt bei 78 % der Bandhöhe:
   ab rund 43 % der ursprünglichen Zeichnung — nach dem Beschnitt also
   gut 90 % — ist sie über die volle Breite deckend, der Übergang
   passiert somit hinter ihr und ist nicht zu sehen.
   ---------------------------------------------------------------- */
.fc-footer {
  /* Farbe des Himmels hinter der Waldkante. main.js trägt hier die
     Fläche der letzten Sektion ein — hell wie dunkel, dadurch entsteht
     oben nie eine Kante. Der Wert hier greift nur ohne JavaScript und
     entspricht der hellen Schlusssektion dieser Seite. */
  --fc-sky: var(--c-paper-soft);
  /* Fläche des Footers und zugleich Farbe von Silhouette und Boden in
     footer-szene-dunkel.svg — beide müssen denselben Wert haben, sonst
     läuft an der Bodenlinie eine Naht. Es ist der Kartenton des Themes:
     derselbe Grund, auf dem Programm-, FAQ- und Kassenkarten stehen. */
  --fc-ground: var(--c-card);
  position: relative;
  /* Wie beim Waldübergang: Der Himmel der Grafik ist leer, er soll nicht
     zusätzlich zum unteren Polster der Sektion darüber stehen. */
  margin-top: clamp(-110px, -7vw, -50px);
  padding: 0;
  background: transparent;
  color: var(--c-ink);
}
.fc-footer__edge {
  --fc-tile-w: 660px;
  position: relative;
  overflow: hidden;   /* kappt den unteren Rand der Kontur, siehe unten */
  background: linear-gradient(180deg,
    var(--fc-sky) 0%,
    var(--fc-sky) 78%,
    var(--fc-ground) 86%);
}
/* Das Muster läuft auch hinter der Waldkante weiter — dieselbe Kachel,
   dieselbe Breite, dieselbe Phase wie in den Sektionen. Sichtbar ist es
   nur im Himmel: ab der Bodenlinie liegt die deckende Grafik darüber. */
.fc-footer__edge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  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;
  opacity: var(--fc-pattern-light);
  mix-blend-mode: multiply;
}
/* Auf dunklem Himmel muss das Muster aufhellen statt abzudunkeln. */
.fc-footer.is-dark-above .fc-footer__edge::before {
  background-image: url('../img/muster-kachel-hell.svg');
  opacity: var(--fc-pattern-dark);
  mix-blend-mode: normal;
}
@media (max-width: 760px) {
  .fc-footer__edge { --fc-tile-w: 460px; }
}
/* Kontur auf der Baumkante, nur über einer dunklen Sektion.
   Dort steht die schwarze Silhouette gegen einen fast gleich dunklen
   Himmel — die Hügel tragen sie, die Spitzen und das Geweih gingen aber
   unter. Der Schlagschatten ist um einen Pixel nach oben versetzt und
   ohne Weichzeichnung: Er zeichnet damit exakt die oberen Kanten nach,
   wie ein Streiflicht. Ein weicher Schein an derselben Stelle sah
   dunstig aus, eine echte Kontur nicht.

   Weiß statt Sand: Der Sandton verschwamm mit den Hügeln der Grafik und
   war kaum als Linie zu erkennen. Weiß setzt sich von allem ab, was in
   der Szene vorkommt.

   Auf heller Sektion bleibt die Kontur weg — dort ist die Silhouette
   ohnehin eindeutig. */
.fc-footer__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Kontur auf der Baumkante, nur über einer dunklen Sektion. Dort steht
   die schwarze Silhouette gegen einen fast gleich dunklen Himmel — die
   Hügel tragen sie, die Spitzen und das Geweih gingen aber unter.

   Gezeichnet wird sie von einem SVG-Filter (siehe footer.php), nicht von
   Schlagschatten: Die werden nacheinander angewendet, jeder wirft den
   Schatten des vorherigen Ergebnisses. Das ergab gestufte Helligkeiten
   und auf Schrägen eine dünnere Linie, was sich am Geweih als doppelte
   Linie las. Der Filter verdickt die Silhouette in einem Zug.

   Fünf Stärken für fünf Größenbereiche — der Radius steht in
   Bildschirmpunkten, die Zeichnung wird aber je nach Fensterbreite
   unterschiedlich groß gerendert. Die Stufen sind so gelegt, dass das
   Verhältnis von Linie zu Zeichnung überall zwischen 2,1 und 2,8
   Zeichnungseinheiten bleibt; bei 1400 px sind es 2,43 — genau die
   bisherige Linie.

   Weiß statt Sand: Der Sandton verschwamm mit den Hügeln der Grafik. */
.fc-footer.is-dark-above .fc-footer__scene { filter: url(#fcEdge2); }
@media (min-width: 1301px) {
  .fc-footer.is-dark-above .fc-footer__scene { filter: url(#fcEdge3); }
}
@media (min-width: 1651px) {
  .fc-footer.is-dark-above .fc-footer__scene { filter: url(#fcEdge4); }
}
@media (min-width: 2051px) {
  .fc-footer.is-dark-above .fc-footer__scene { filter: url(#fcEdge5); }
}
.fc-footer__scene {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Auf dem Handy läuft die Szene über die volle Breite.

   Zwischendurch stand sie hier auf fester Höhe und wurde seitlich
   beschnitten — damals, weil die Kontur aus vier übereinandergelegten
   Schlagschatten bestand und am Geweih doppelte Linien erzeugte, sobald
   die Zeichnung zu klein wurde. Seit die Kontur ein einzelner
   SVG-Umriss ist, der gleichmäßig breit bleibt, ist das nicht mehr
   nötig. Der Beschnitt kostete aber die halbe Szene: Das
   Rennsteig-Schild und der linke Wald waren nie zu sehen.

   Die Linie wird dafür feiner — bei 390 px ist die Zeichnung auf dem
   0,23-fachen ihrer Größe, eine Kontur von 1,3 px wäre dort fast
   sechsmal so grob wie am Rechner. */
@media (max-width: 520px) {
  .fc-footer.is-dark-above .fc-footer__scene { filter: url(#fcEdgea); }
}
@media (min-width: 521px) and (max-width: 760px) {
  .fc-footer.is-dark-above .fc-footer__scene { filter: url(#fcEdgeb); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .fc-footer.is-dark-above .fc-footer__scene { filter: url(#fcEdge1); }
}
.fc-footer__body {
  position: relative;
  background: var(--fc-ground);
  padding: 8px 24px 34px;
}
.fc-footer__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.fc-footer__logo img { width: 230px; height: auto; }
.fc-footer__claim {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-ink-2);
  margin: 0;
}
.fc-footer__claim a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fc-footer__claim a:hover { color: var(--c-accent); }
.fc-footer__legal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 241, 236, 0.10);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.fc-footer__legal nav { display: flex; gap: 22px; }
.fc-footer__legal a { color: var(--c-ink-3); transition: color .25s ease; }
.fc-footer__legal a:hover { color: var(--c-accent); }

/* Lead-Texte am Desktop breiter */
.slate__head .slate__lead { max-width: 760px; }

/* Trenner: transparenter oberer Bereich muss hell bleiben, seit der
   Body (für den Overscroll) schwarz ist */
.forest-transition { background: var(--c-paper-soft); }

/* ----------------------------------------------------------------
   ANFAHRT — Adresskarte + drei Schritte
   ---------------------------------------------------------------- */
.route {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 24px;
  align-items: start;
}
.route-card {
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  border-radius: 20px;
  padding: 30px 30px 28px;
  box-shadow: 0 2px 12px rgba(21, 20, 15, 0.06);
}
.route-card__lbl {
  display: block;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cool-soft);
  margin-bottom: 10px;
}
/* Bewusst kein Display-Schnitt in Versalien: Eine dreizeilige Adresse
   in 900er Uppercase wirkt wie eine Schlagzeile und ist schlechter zu
   lesen als eine Adresse aussehen darf. */
.route-card__addr {
  font-family: var(--t-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--c-ink-dark);
  margin: 0 0 22px;
}
/* Erste Zeile ist der Name des Platzes — die darf hervorstehen. */
.route-card__addr strong {
  display: block;
  font-weight: 800;
  font-size: 1.12em;
  margin-bottom: 2px;
}
.route-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.route-card__btn { gap: 10px; padding: 15px 24px; font-size: var(--fs-base); }
.route-card__alt {
  font-size: var(--fs-md);
  color: var(--c-ink-dark-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.route-card__alt:hover { color: var(--c-ink-dark); }

/* Zwei Anfahrten untereinander: A71 und A4 sind Alternativen, deshalb
   zwei getrennte Kästen mit je eigener Zählung ab 1 — in einer Liste
   von 1 bis 7 läse sich der zweite Weg als Fortsetzung des ersten. */
.route-ways {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.route-way {
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  border-radius: 20px;
  padding: 22px 28px 6px;
  box-shadow: 0 2px 12px rgba(21, 20, 15, 0.06);
}
/* Gleiche Marke wie das Label auf der Adresskarte — beide beschriften
   einen Kasten, also sehen sie gleich aus. */
.route-way__lbl {
  display: block;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cool-soft);
  margin: 0;
}
.route-steps {
  display: flex;
  flex-direction: column;
}
.route-steps li {
  display: flex;
  gap: 18px;
  padding: 20px 0;
}
.route-steps li + li { border-top: 1px solid rgba(21, 20, 15, 0.08); }
.route-steps__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 107, 47, 0.10);
  color: var(--c-cool);
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-base);
}
.route-steps strong {
  display: block;
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-lg);
  color: var(--c-ink-dark);
  margin-bottom: 3px;
}
.route-steps p {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-ink-dark-2);
  margin: 0;
}

/* Dunkle Fläche — die Anfahrt steht am Seitenende, wo es dunkel
   bleibt. Karten drehen auf die dunklen Flächenfarben. */
.route-note {
  margin: 0;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(99, 107, 47, 0.08);
  color: var(--c-ink-dark-2);
  font-size: var(--fs-md);
  line-height: 1.55;
}

.slate--dark .route-card,
.slate--dark .route-way {
  background: var(--c-card);
  border-color: var(--c-card-line);
  box-shadow: none;
}
.slate--dark .route-way__lbl { color: var(--c-accent); }
.slate--dark .route-note {
  background: rgba(203, 189, 147, 0.10);
  color: var(--c-ink-2);
}
.slate--dark .route-card__lbl { color: var(--c-accent); }
.slate--dark .route-card__addr,
.slate--dark .route-steps strong { color: var(--c-ink); }
.slate--dark .route-card__alt { color: var(--c-ink-3); }
.slate--dark .route-card__alt:hover { color: var(--c-ink); }
.slate--dark .route-steps li + li { border-top-color: var(--c-card-line); }
.slate--dark .route-steps__num {
  background: rgba(203, 189, 147, 0.16);
  color: var(--c-accent);
}
.slate--dark .route-steps p { color: var(--c-ink-2); }

@media (max-width: 900px) {
  .route { grid-template-columns: 1fr; }
  .route-card__actions { align-items: stretch; }
  .route-card__btn { justify-content: center; }
  .route-card__alt { text-align: center; }
}

/* MwSt-Hinweis unter Summen */
.vat-note {
  margin: -6px 0 0;
  font-size: var(--fs-md);
  color: var(--c-ink-2);
  text-align: right;
}

/* ----------------------------------------------------------------
   SUB-HERO — Kopf für Unterseiten
   Flacher als der Start-Hero und ohne Video: eine Unterseite soll
   schnell beim Inhalt sein. Der Verlauf läuft unten in --c-bg aus,
   damit die dunkle Sektion darunter ohne Kante anschließt.
   ---------------------------------------------------------------- */
/* Ohne Kopfbild trägt das Muster die Fläche — dieselbe Kachel und
   dieselbe Phase wie überall, main.js rechnet sie mit. Ein Foto ist im
   Widget weiter möglich; es liegt dann darüber und verdeckt das Muster. */
.subhero {
  --fc-tile-w: 660px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(380px, 54vh, 580px);
  /* Oben mehr als unten: Die Nav-Leiste schwebt über dem Kopf und ist
     rund 85 px hoch. Mit dem alten Wert blieben darunter nur gut 40 px
     Luft, das Eyebrow klebte an der Leiste. */
  padding: clamp(152px, 19vh, 230px) clamp(24px, 4vw, 80px) clamp(56px, 6vw, 88px);
  background: var(--c-bg);
  color: var(--c-ink);
  text-align: center;
}
.subhero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  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);
}
@media (max-width: 760px) {
  .subhero { --fc-tile-w: 460px; }
}
.subhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.8) contrast(1.04) brightness(0.6);
}
.subhero--top .subhero__bg    { object-position: center top; }
.subhero--bottom .subhero__bg { object-position: center bottom; }
.subhero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 72% at 50% 48%, rgba(0, 0, 0, 0.5) 0%, transparent 72%),
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.78) 0%,
      rgba(10, 10, 10, 0.32) 42%,
      rgba(10, 10, 10, 0.55) 78%,
      var(--c-bg) 100%);
}
/* Ohne Foto braucht es keinen Schleier — er würde nur das Muster
   zudecken. Nur oben bleibt etwas Abdunkelung, damit die Nav-Leiste
   sicher lesbar bleibt; sie schwebt dort ohne eigene Fläche. */
.subhero:not(:has(.subhero__bg)) .subhero__veil {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.25) 26%,
    transparent 55%);
}
.subhero__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 780px;
}
.subhero__eyebrow {
  font-family: var(--t-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.subhero__title {
  margin: 0;
  font-size: clamp(38px, 5.2vw, 84px);
  overflow-wrap: break-word;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.subhero__title em { color: var(--c-accent); font-style: normal; }
/* Wie beim Sektionstitel: unter 560 px greift sonst die Untergrenze von
   38 px, und damit wird es bei einem langen Wort eng. */
@media (max-width: 560px) {
  .subhero__title { font-size: clamp(26px, 7.4vw, 38px); }
}
.subhero__lead {
  margin: 4px 0 0;
  max-width: 620px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--c-ink-2);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------------
   SCHIENE — Programmtage nebeneinander, seitlich schiebbar

   Bewusst ein ganz normaler Scroll-Container statt selbstgebauter
   Zieherei: Wischen, Trackpad, Schwungscrollen und Tastatur kommen
   dann vom Browser und fühlen sich auf jedem Gerät richtig an. Ohne
   JavaScript fehlen nur Knöpfe und Reiter — schieben geht trotzdem.

   Die Karten sind schmaler als die Schiene. Dadurch schaut der nächste
   Tag immer schon herein, und man sieht auf den ersten Blick, dass es
   seitlich weitergeht.
   ---------------------------------------------------------------- */
.fc-rail {
  position: relative;
  /* Kartenbreite an einer Stelle: die Schiene braucht sie für das
     seitliche Polster, mit dem die erste und letzte Karte mittig
     einrasten können. */
  --card-w: min(88vw, 620px);
}
.fc-rail__track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Seitliches Polster: nur damit können die erste und die letzte Karte
     überhaupt in der Mitte einrasten. Als eine Kurzschreibweise, sonst
     überschreibt sie ein späteres padding wieder — genau das ist mir hier
     schon passiert. Oben und unten Platz für Fokusring und Schatten. */
  padding: 4px max(2px, calc(50% - var(--card-w) / 2)) 10px;
  scrollbar-width: none;
}
.fc-rail__track::-webkit-scrollbar { display: none; }
.fc-rail__track:focus-visible {
  outline: 2px solid var(--c-accent);
  /* Nach innen gesetzt: Außerhalb schneidet der Scroll-Bereich den Ring
     an, übrig bliebe ein einzelner Strich am Rand. */
  outline-offset: -2px;
}
.fc-rail__item {
  --d: 0;
  flex: 0 0 var(--card-w);
  scroll-snap-align: center;
  /* Kein transition: die Karten folgen dem Finger, nicht einer Animation. */
  transform: scale(calc(1 - var(--d) * 0.07));
  opacity: calc(1 - var(--d) * 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .fc-rail__item { transform: none; }
}
.fc-rail__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.fc-rail__controls[hidden] { display: none; }
/* Die Hülle löst sich hier auf, damit Zurück, Reiter und Weiter in einer
   Reihe stehen. Die Reihenfolge macht order — im Markup stehen die
   Pfeile zusammen, weil sie auf dem Handy als Paar zusammenbleiben. */
.fc-rail__navs { display: contents; }
.fc-rail__nav--prev { order: 1; }
.fc-rail__dots      { order: 2; }
.fc-rail__nav--next { order: 3; }
.fc-rail__nav {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  background: rgba(244, 241, 236, 0.06);
  border: 1px solid rgba(244, 241, 236, 0.18);
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.fc-rail__nav:hover:not(:disabled) {
  background: rgba(244, 241, 236, 0.14);
  border-color: rgba(203, 189, 147, 0.5);
}
.fc-rail__nav:disabled { opacity: 0.28; cursor: default; }
.fc-rail__nav--prev svg { transform: scaleX(-1); }
.fc-rail__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fc-rail__dots button {
  /* 9 px Polster plus 12 px Zeile ergaben 36 px — auf dem Handy sind
     das die Reiter, mit denen man zwischen den Tagen springt, und die
     trifft der Daumen dann nur mit Glück. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  border: 1px solid transparent;
  transition: color .2s ease, background .2s ease;
}
.fc-rail__dots button:hover { color: var(--c-ink); }
.fc-rail__dots button[aria-current="true"] {
  color: var(--c-bg);
  background: var(--c-ink);
}
.slate--light .fc-rail__nav {
  color: var(--c-ink-dark);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
.slate--light .fc-rail__dots button { color: var(--c-ink-dark-2); }
.slate--light .fc-rail__dots button[aria-current="true"] {
  color: var(--c-paper);
  background: var(--c-ink-dark);
}

/* Fortschrittsleiste auf schmalen Screens: Die Verbindungsstriche
   zwischen den Schritten hingen beim Umbruch ins Leere, weil sie mit
   umbrechen, ohne etwas zu verbinden. Ohne sie stehen die drei Schritte
   sauber nebeneinander beziehungsweise untereinander. */
@media (max-width: 560px) {
  .steps {
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .steps__line { display: none; }
  .steps li { flex: 0 0 auto; }
  /* Drei ausgeschriebene Schritte passen nicht in eine Zeile, und
     umbrechen sah zerrissen aus. Die Ziffern zeigen den Fortschritt,
     benannt wird nur der Schritt, in dem man gerade steht. */
  .step__lbl { display: none; }
  .step.is-active .step__lbl { display: inline; }
}

/* Schmale Screens: Tagesreiter oben, Pfeile darunter.

   Vorher lag hier ein Raster aus zwei automatischen Spalten. Die Reiter
   spannten über beide, machten die Spalten dadurch sehr breit — und die
   Pfeile klebten je am linken Rand ihrer Spalte, also weit auseinander
   und sichtbar nicht als Paar. Jetzt eine Spalte, und die Pfeile sitzen
   in ihrer eigenen Reihe zusammen.

   Die Reiter selbst standen als 3 + 1 umgebrochen da; im Zweierraster
   stehen alle vier gleich breit untereinander. */
@media (max-width: 620px) {
  .fc-rail__controls {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .fc-rail__dots {
    order: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 320px;
  }
  .fc-rail__dots button { justify-content: center; }
  .fc-rail__navs {
    order: 1;
    display: flex;
    gap: 16px;
  }
}

/* Am Rechner steht das Programm als Raster: vier Tage nebeneinander
   gelesen statt nacheinander gewischt. Auf dem Handy bleibt die
   Schiene — dort ist Wischen die natürlichere Geste, und vier
   untereinandergestapelte Tageskarten wären eine sehr lange Seite.

   Die Steuerung darunter verschwindet von allein: das Skript blendet
   sie aus, sobald die Schiene nicht mehr überläuft. */
@media (min-width: 900px) {
  .fc-rail--grid .fc-rail__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    overflow: visible;
    scroll-snap-type: none;
    /* Das seitliche Polster diente dem mittigen Einrasten; im Raster
       schöbe es die Karten nur aus der Mitte. */
    padding: 4px 0 10px;
    max-width: 1080px;
    margin-inline: auto;
  }
  /* Die Schiene verkleinert und dimmt alles, was nicht in der Mitte
     steht. Im Raster steht nichts in der Mitte — ohne das Zurücksetzen
     wären drei der vier Karten blass und geschrumpft. */
  .fc-rail--grid .fc-rail__item {
    flex: none;
    transform: none;
    opacity: 1;
    scroll-snap-align: none;
  }
  /* „Tag 1 von 4" beantwortet eine Frage, die sich im Raster nicht
     stellt — man sieht ja alle vier. */
  .fc-rail--grid .program-day__foot { display: none; }
  /* Ungerade Anzahl: die letzte Karte über die volle Breite, sonst
     stünde sie allein in einer halben Zeile. */
  .fc-rail--grid .fc-rail__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-rail__track { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------
   SCROLL-HINWEIS im Start-Hero
   Ein Mausrad mit laufendem Punkt. Der Hero füllt den ganzen Schirm —
   ohne Hinweis ist nicht selbstverständlich, dass darunter noch etwas
   kommt. Sobald gescrollt wird, hat er seinen Zweck erfüllt und geht.
   ---------------------------------------------------------------- */
/* Ein Rad allein wird überlesen. Mit Wort daneben, etwas Fläche und
   einer ruhigen Auf-und-ab-Bewegung ist es eine Aufforderung, die man
   nicht übersieht — der Hero füllt den ganzen Schirm, und nichts sonst
   deutet darauf hin, dass es weitergeht. */
.fc-hero__cue {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(20px, 4vh, 38px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 14px;
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(244, 241, 236, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--c-ink);
  transition: opacity .5s ease, transform .5s ease, background .25s ease, border-color .25s ease;
  animation: fcCueNudge 2.8s ease-in-out infinite;
}
.fc-hero__cue-lbl {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fc-hero__cue-lbl:empty { display: none; }
.fc-hero__cue:hover,
.fc-hero__cue:focus-visible {
  background: rgba(10, 10, 10, 0.62);
  border-color: var(--c-accent);
}
@keyframes fcCueNudge {
  0%, 72%, 100% { transform: translateX(-50%) translateY(0); }
  84%           { transform: translateX(-50%) translateY(7px); }
}
.fc-hero__cue.is-gone {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
  animation: none;
}
.fc-hero__mouse {
  display: flex;
  justify-content: center;
  width: 26px;
  height: 42px;
  padding-top: 8px;
  border: 1.5px solid rgba(244, 241, 236, 0.5);
  border-radius: 14px;
  transition: border-color .25s ease;
}
.fc-hero__cue:hover .fc-hero__mouse,
.fc-hero__cue:focus-visible .fc-hero__mouse { border-color: var(--c-accent); }
.fc-hero__mouse > span {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--c-ink);
  animation: fcWheel 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes fcWheel {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  60%  { transform: translateY(14px); opacity: 1; }
  85%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-hero__mouse > span { animation: none; opacity: 1; }
  .fc-hero__cue { animation: none; }
}



/* ----------------------------------------------------------------
   BILDBAND — durchlaufende Galerie

   Der Streifen wird um genau die Hälfte seiner Breite verschoben; weil
   jedes Bild zweimal im Markup steht, sieht das nahtlos aus. Damit die
   Rechnung aufgeht, darf zwischen den Bildern kein gap stehen — der
   fiele beim letzten Bild weg und der Sprung wäre sichtbar. Der Abstand
   steckt deshalb im rechten Rand jedes Bildes.

   Die Ränder blenden aus, sonst tauchen die Bilder an einer harten
   Kante auf. Beim Überfahren hält das Band an, damit man ein Bild in
   Ruhe ansehen kann.
   ---------------------------------------------------------------- */
/* Hülle für die Pfeile. Sie müssen außerhalb von .fc-marquee liegen,
   weil dessen Maske die Ränder ausblendet — genau dort, wo die Pfeile
   stehen. */
.fc-marquee-wrap { position: relative; }
.fc-marquee__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  /* Die Knöpfe sitzen dort, wo die Maske das Band ausblendet — halb über
     Bild, halb über Fläche. Sie nehmen deshalb die Gegenfarbe der Fläche
     und nicht die Kartenfarbe: die ginge auf beiden Seiten unter. */
  background: var(--c-accent);
  color: #15140f;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.fc-marquee__nav svg { width: 22px; height: 22px; }
.fc-marquee__nav--prev { left: clamp(6px, 1.4vw, 20px); }
.fc-marquee__nav--next { right: clamp(6px, 1.4vw, 20px); }
.fc-marquee__nav--next svg { transform: rotate(180deg); }
.fc-marquee__nav:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.06);
}
.slate--light .fc-marquee__nav {
  background: var(--c-ink-dark);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(21, 20, 15, 0.28);
}
.slate--light .fc-marquee__nav:hover { background: var(--c-cool); color: #ffffff; }

.fc-marquee {
  --fc-marquee-dur: 40s;
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.fc-marquee__track {
  display: flex;
  width: max-content;
  animation: fcMarquee var(--fc-marquee-dur) linear infinite;
  will-change: transform;
}
/* Nur solange kein Skript übernommen hat: sonst kämen sich die
   CSS-Pause und die Steuerung über die Animation ins Gehege. */
.fc-marquee:not(.is-js):hover .fc-marquee__track { animation-play-state: paused; }
@keyframes fcMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.fc-marquee__item {
  /* Weniger, dafür größer: Drei Bilder mit Luft dazwischen lesen sich
     ruhiger als fünf im Gedränge. Rundung, Fläche und Haarlinie sind
     dieselben wie bei den Programm- und Aktivitätskarten — das Band ist
     keine eigene Welt, sondern dieselben Karten in Bewegung. */
  /* Die Kachel wächst mit dem Fenster, damit immer etwa drei Bilder
     nebeneinander stehen. Mit dem festen Deckel von 460 px blieb sie ab
     etwa 1400 px stehen, während das Band weiterwuchs — auf einem
     2560er Monitor waren es dann fünf Bilder auf einmal, und ein
     Pfeilschritt verschob nur noch ein Fünftel des Sichtbaren. */
  flex: 0 0 clamp(270px, calc(31vw - 40px), 760px);
  /* Der Abstand steckt im rechten Rand und nicht in gap: gap fiele beim
     letzten Bild weg, und die Verschiebung um genau die halbe Breite
     ginge nicht mehr auf. */
  margin: 0 28px 0 0;
  /* Ein festes Format für alle: Hoch- und Querformate aus der Mediathek
     werden im Widget umgestellt und hier mittig beschnitten, damit das
     Band eine Linie behält statt zu treppen. */
  aspect-ratio: var(--fc-marquee-ar, 3 / 2);
  overflow: hidden;
  border-radius: 28px;
  background: var(--c-card);
  border: 1px solid rgba(203, 189, 147, 0.22);
}
.fc-marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  /* Füllt den Rahmen und schneidet den Überstand ab — ohne cover
     würden unterschiedlich proportionierte Bilder verzerrt. */
  object-fit: cover;
  object-position: center;
}
.slate--light .fc-marquee__item {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.09);
}
/* Die Bildunterschrift gehört zum Band, nicht an dessen Kante. */


/* Ohne Bewegung wird aus dem Band eine Schiene zum Schieben — der
   Inhalt bleibt vollständig erreichbar. */
@media (prefers-reduced-motion: reduce) {
  .fc-marquee {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .fc-marquee__track { animation: none; }
  .fc-marquee__item { scroll-snap-align: center; }
  /* Ohne Maske reichen die Bilder bis an den Rand; die Pfeile brauchen
     dort etwas mehr Abstand, um nicht auf dem Motiv zu kleben. */
  .fc-marquee__nav--prev { left: 8px; }
  .fc-marquee__nav--next { right: 8px; }
}