/* ════════════════════════════════════════════════════
   Landingpage-CSS — Vinyasa Yoga Ostheim (VHS-Kurs 262-G090505)
   Ergaenzt brand.css. Nutzt ausschliesslich die Brand-Tokens aus :root.

   Design-Prinzip: Apple-Produktseiten-Choreografie (Vollbild-Buehne, grosse
   Typo, gescrollte Sequenzen, viel Luft) — aber in der Brand-Sprache:
   keine Schatten, keine Rundungen, gedeckte Palette, ruhige Easings.
   ════════════════════════════════════════════════════ */

.lp {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lp-gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* Rundungs-, Schatten- und Glanz-Tokens kommen jetzt global aus brand.css */
}

/* ── Rundungen + Tiefe flaechendeckend ───────────────── */
.lp-split__media,
.lp-scrub__media,
.lp-offer,
.lp-breather__quote,
.lp-hero__facts,
.lp-bring,
.lp-scrub__panel { border-radius: var(--r-card); }

.lp-split__media,
.lp-scrub__media { border-radius: var(--r-media); box-shadow: var(--shadow-lift); }
.lp-offer { border-radius: var(--r-media); box-shadow: var(--shadow-lift); }
/* Glasfläche hinter dem Hero-Text.
   Das Hero-Foto ist durchgehend hell (High-Key) — ein Verlauf allein haette
   es totgeschlagen, bevor der Creme-Text lesbar wird. Die gefrostete Flaeche
   loest das lokal und laesst das Bild drumherum hell. Der Wert 72% ist an
   den gerenderten Pixeln nachgemessen, nicht geschaetzt. */
.lp-hero__panel {
  max-width: 52rem;
  padding: clamp(1.4rem, 2.6vw, 2.25rem) clamp(1.4rem, 2.6vw, 2.5rem) clamp(1.6rem, 2.8vw, 2.25rem);
  background: color-mix(in srgb, #241711 72%, transparent);
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  border: 1px solid color-mix(in srgb, #FFFFFF 15%, transparent);
  border-top-color: color-mix(in srgb, #FFFFFF 30%, transparent);
  border-radius: var(--r-card);
  position: relative;
}
.lp-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.lp-hero__panel > * { position: relative; z-index: 1; }

/* Die Faktenleiste sitzt jetzt IN der Glasflaeche — kein zweites Glas darin */
.lp-hero__panel .lp-hero__facts {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-creme) 22%, transparent);
  border-radius: 0;
  padding: 1rem 0 0;
}
.lp-hero__panel .lp-hero__facts::before { display: none; }

@media (max-width: 430px), (max-height: 680px) and (max-width: 900px) {
  .lp-hero__panel { padding: 1rem 1rem 1.15rem; }
  .lp-hero__panel .lp-hero__facts { padding-top: 0.75rem; }
}

.lp-hero__kicker { border-radius: var(--r-pill); }
.lp-scrub__arrow { border-radius: var(--r-pill); }
.lp .btn { border-radius: var(--r-pill); }
.lp-bring li:first-child { border-top-left-radius: var(--r-card); border-bottom-left-radius: var(--r-card); }
.lp-bring li:last-child  { border-top-right-radius: var(--r-card); border-bottom-right-radius: var(--r-card); }

/* Auf dunklem Grund braucht es dunkle statt warmer Schatten */
.lp-scrub__media { box-shadow: var(--shadow-dark); }
.lp-breather__quote { box-shadow: var(--shadow-dark); }

/* Karten in Boni / Qualifizierung / Benefits bekommen Tiefe */
.lp-card-soft { border-radius: var(--r-card); box-shadow: var(--shadow-soft); }

/* ── Glanzkante auf Glas und Karten ──────────────────── */
.lp-offer,
.lp-breather__quote,
.lp-hero__facts,
.lp-scrub__panel,
.lp-sticky-cta__inner { position: relative; }
.lp-offer::before,
.lp-breather__quote::before,
.lp-hero__facts::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen);
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.lp-offer > *,
.lp-breather__quote > *,
.lp-hero__facts > * { position: relative; z-index: 1; }

/* Feine Lichtkante oben — laesst Glas wie Glas aussehen */
.lp-offer,
.lp-breather__quote,
.lp-hero__facts,
.lp-scrub__arrow {
  border-top-color: color-mix(in srgb, #FFFFFF 38%, transparent);
}

/* ── Nahtstellen entschaerfen ────────────────────────
   Harte Wechsel Creme -> Plum wirkten als Bruch. Die dunklen Sektionen
   blenden an Ober- und Unterkante in die Nachbarfarbe aus.
   ───────────────────────────────────────────────────── */
.lp .bg-waldgruen,
.lp .lp-breather,
.lp .lp-offer-section { position: relative; }
.lp .bg-waldgruen::after,
.lp .lp-breather::after,
.lp .lp-offer-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Lange, voll deckende Verlaeufe: der Nachbarfarbton laeuft am Rand
     satt an und loest sich erst nach ~140px auf. Vorher waren es 48px bei
     55% Deckkraft — das las sich als harte Kante statt als Uebergang. */
  background:
    /* Kurz und mit steiler Kurve: Creme laeuft ueber Plum zwangslaeufig
       durch einen Mischton. Je laenger der Verlauf, desto mehr Grau-Band.
       ~44px lesen als weiche Kante, 120px lesen als Schmutzstreifen. */
    linear-gradient(to bottom,
      var(--seam-top, var(--c-creme)) 0,
      color-mix(in srgb, var(--seam-top, var(--c-creme)) 28%, transparent) clamp(14px, 3.5vw, 22px),
      transparent clamp(34px, 9vw, 52px)),
    linear-gradient(to top,
      var(--seam-bottom, var(--c-creme)) 0,
      color-mix(in srgb, var(--seam-bottom, var(--c-creme)) 28%, transparent) clamp(14px, 3.5vw, 22px),
      transparent clamp(34px, 9vw, 52px));
  opacity: 1;
}
/* :not(.lp-scrub__stage) ist wichtig — die Buehne muss position:sticky
   behalten, sonst faellt das Pinning der Ablauf-Sequenz aus. */
.lp .bg-waldgruen > *:not(.lp-scrub__stage) { position: relative; z-index: 1; }
.lp .lp-scrub__stage { z-index: 1; }


/* ── Ueberschriften-Groessen zurueckholen ─────────────
   Das Tailwind-Play-CDN injiziert sein Preflight zur Laufzeit ANS ENDE des
   <head> — also nach brand.css. Dessen Reset
       h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
   hat dieselbe Spezifitaet wie die Element-Regeln in brand.css, steht aber
   spaeter und gewinnt dadurch. Ergebnis: alle Ueberschriften erben 17 px
   vom Body.
   Die Klasse .lp am <body> hebt die Spezifitaet (0,1,1 statt 0,0,1) und
   stellt die Brand-Groessen aus brand.css wieder her — ohne die uebrigen
   Seiten anzufassen.
   ───────────────────────────────────────────────────── */
.lp h1, .lp h2, .lp h3, .lp h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lp h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-family: 'Caprasimo', 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0;
  line-height: 1.05;
}
.lp h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
.lp h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.lp h4 { font-size: 1.1rem; }

/* ── Scroll-Fortschrittsbalken ───────────────────────── */
.lp-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.lp-progress__bar {
  height: 100%;
  background: var(--c-terrakotta);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ── Reveal-Grundzustand ─────────────────────────────
   Nur aktiv, wenn JS laeuft (html.lp-animate). Ohne JS und bei
   prefers-reduced-motion bleibt alles sichtbar.
   ───────────────────────────────────────────────────── */
.lp-animate [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-out) calc(var(--i, 0) * 90ms),
    transform 0.9s var(--ease-out) calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.lp-animate [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Wortweises Aufdecken der Statement-Headline */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word__inner {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out) calc(var(--w, 0) * 55ms);
}
.is-in .word__inner,
[data-reveal].is-in .word__inner { transform: translateY(0); }
.lp-static .word__inner { transform: none; }

/* ── 1. Vollbild-Hero ────────────────────────────────
   100svh statt 100vh: auf iOS springt die Hoehe sonst beim Ein- und
   Ausblenden der Browserleiste.
   ───────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  /* Der Hero beginnt unterhalb der Sticky-Nav — deren Hoehe muss abgezogen
     werden, sonst ragt der untere Rand aus dem Bild. --nav-h setzt
     js/lp-scroll.js, der Fallback 0px greift ohne JS. */
  min-height: calc(100vh - var(--nav-h, 0px));
  min-height: calc(100svh - var(--nav-h, 0px));
  padding: 0;
  overflow: hidden;
  background: var(--c-kakao);
  color: var(--c-creme);
  display: flex;
  align-items: flex-end;
}

.lp-hero__media {
  position: absolute;
  inset: -10% 0 0;
  height: 120%;
  z-index: 0;
  will-change: transform;
}
.lp-hero__media img,
.lp-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Zwei sich ueberlagernde Verlaeufe: einer von unten, einer von links.
     Der Text sitzt unten links und bekommt dadurch beide. Bewusst kraeftig,
     weil das Hero-Foto hell ist — Creme-Text braucht einen dunklen Grund.
     Nachgemessen an den echten Pixeln, nicht geschaetzt. */
  background:
    linear-gradient(180deg,
      rgba(40, 26, 21, 0.42) 0%,
      rgba(40, 26, 21, 0.12) 20%,
      rgba(40, 26, 21, 0.58) 58%,
      rgba(40, 26, 21, 0.86) 100%),
    linear-gradient(95deg,
      rgba(40, 26, 21, 0.78) 0%,
      rgba(40, 26, 21, 0.46) 44%,
      rgba(40, 26, 21, 0.10) 78%,
      transparent 100%);
}

.lp-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--lp-gutter) clamp(4.5rem, 11vh, 8rem);
  will-change: transform, opacity;
}

.lp-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-rose-hell);
  font-weight: 500;
  margin-bottom: 1.25rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--c-rose-hell) 45%, transparent);
  background: color-mix(in srgb, #2E1E18 45%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lp-hero__kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--c-rose);
  flex-shrink: 0;
}

.lp-hero h1 {
  color: var(--c-creme);
  /* Kleiner als frueher: die Headline steht jetzt in der Glasflaeche und
     soll dort in zwei bis drei Zeilen passen, damit die Buttons ueber der
     Falz bleiben. */
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 16em;
  margin: 0;
}
.lp-hero h1 .italic-accent { color: var(--c-rose); }

.lp-hero__lead {
  color: var(--c-creme);
  opacity: 0.92;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  max-width: 32em;
  margin-top: 1.5rem;
  line-height: 1.6;
}

/* Kern-Fakten direkt im Hero — beantwortet Wann/Wo/Was sofort */
.lp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--c-creme) 25%, transparent);
  list-style: none;
  max-width: 46rem;
}
.lp-hero__facts li {
  font-size: 0.95rem;
  color: var(--c-creme);
  opacity: 0.9;
  padding: 0.35rem 0;
}
.lp-hero__facts strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.lp-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  align-items: center;
}

.lp-hero .btn-primary {
  background: var(--c-rose);
  color: var(--c-kakao);
  border-color: var(--c-rose);
}
.lp-hero .btn-primary:hover {
  background: var(--c-creme);
  border-color: var(--c-creme);
  color: var(--c-kakao);
}
.lp-hero .btn-outline { color: var(--c-creme); border-color: color-mix(in srgb, var(--c-creme) 60%, transparent); }
.lp-hero .btn-outline:hover { background: var(--c-creme); color: var(--c-kakao); border-color: var(--c-creme); }
.lp-hero a:focus-visible, .lp-hero .btn:focus-visible { outline-color: var(--c-rose-hell); }

/* Scroll-Hinweis */
.lp-hero__hint {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-creme);
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.lp-hero__hint span::after {
  content: "";
  display: block;
  width: 1px;
  height: 2rem;
  margin: 0.5rem auto 0;
  background: linear-gradient(180deg, var(--c-creme), transparent);
  animation: hintPulse 2.4s var(--ease-soft) infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}

@media (max-width: 768px) {
  .lp-hero { align-items: flex-end; }
  .lp-hero__scrim {
    background: linear-gradient(180deg, rgba(40, 26, 21, 0.45) 0%, rgba(40, 26, 21, 0.28) 24%, rgba(40, 26, 21, 0.78) 58%, rgba(40, 26, 21, 0.94) 100%);
  }
  .lp-hero__inner { padding-bottom: clamp(3.5rem, 9vh, 5rem); }
  .lp-hero__facts { gap: 0 1.5rem; }
  .lp-hero__facts li { flex: 1 1 40%; }
  .lp-hero__actions .btn { flex: 1 1 100%; text-align: center; }
  .lp-hero__hint { display: none; }
}

/* Kleine bzw. niedrige Displays: Hero so verdichten, dass Headline und
   Haupt-Button ueber der Falz bleiben. Auf 320x568 waere der Hero sonst
   ~900 px hoch und der Button erst nach dem Scrollen sichtbar. */
@media (max-width: 430px), (max-height: 680px) and (max-width: 900px) {
  .lp-hero__inner { padding-bottom: 2.25rem; }

  .lp-hero__kicker {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    padding: 0.32rem 0.7rem;
    margin-bottom: 0.85rem;
    gap: 0.45rem;
  }
  .lp-hero__kicker::before { width: 5px; height: 5px; }

  .lp-hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); line-height: 1.08; }

  .lp-hero__lead {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0.9rem;
  }

  /* Fakten als kompakte, punktgetrennte Zeile statt Label-ueber-Wert-Raster.
     Die Labels bleiben fuer Screenreader erhalten, nur optisch entfernt. */
  .lp-hero__facts {
    margin-top: 1rem;
    padding-top: 0.9rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.1rem 0.8rem;
  }
  .lp-hero__facts li {
    flex: 0 1 auto;
    font-size: 0.8rem;
    padding: 0.1rem 0;
    opacity: 0.88;
  }
  /* Trenner haengt am vorangehenden Eintrag (::after), damit beim Umbruch
     kein Punkt am Zeilenanfang landet. */
  .lp-hero__facts li:not(:last-child)::after {
    content: " ·";
    margin-left: 0.55rem;
    opacity: 0.5;
  }
  .lp-hero__facts strong {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .lp-hero__actions { margin-top: 1.25rem; gap: 0.6rem; }
  .lp-hero .btn { padding: 0.9rem 1.1rem; font-size: 0.76rem; letter-spacing: 0.08em; }
}

/* Sehr schmale Geraete (iPhone SE & Co.): noch eine Stufe enger, damit auch
   auf 320x568 der Anmelde-Button ohne Scrollen sichtbar ist. */
@media (max-width: 345px) {
  .lp-hero__inner { padding-bottom: 1.5rem; }
  .lp-hero h1 { font-size: 1.6rem; }
  .lp-hero__lead { font-size: 0.9rem; margin-top: 0.75rem; }
  .lp-hero__facts { margin-top: 0.8rem; padding-top: 0.7rem; }
  .lp-hero__facts li { font-size: 0.76rem; }
  .lp-hero__actions { margin-top: 1rem; }
}

/* ── Mobiler Hero ────────────────────────────────────
   Das Hero-Foto ist 16:9, der Viewport hochkant. Bei object-fit:cover und
   mittiger Position blieb davon nur der Beinbereich uebrig — kein Raum,
   kein Kontext. Drei Korrekturen:
   1. Bildausschnitt nach oben ziehen, damit Oberkoerper und Fenster
      sichtbar bleiben
   2. Panel als bodenbuendiges Sheet statt schwebender Box: volle Breite,
      nur oben gerundet. Gibt dem Text mehr Platz und wirkt ruhiger.
   3. Abstaende so, dass BEIDE Buttons ueber der Falz liegen
   ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Das mobile Motiv ist portraet-nativ (siehe <picture> im HTML),
     deshalb mittig statt nach oben verschoben. */
  .lp-hero__media img,
  .lp-hero__media video { object-position: 50% 42%; }

  /* Der Hero war 100svh hoch und das Panel klebte an der Unterkante — dort
     liegen auf dem Geraet Safari-Leiste und Home-Indikator, die Buttons
     waren kaum sauber zu treffen. Jetzt kuerzer, Panel als Karte mit
     Abstand nach unten. */
  .lp-hero { min-height: calc(76svh - var(--nav-h, 0px)); }

  .lp-hero__inner {
    padding: 0 var(--lp-gutter) calc(1.5rem + env(safe-area-inset-bottom));
  }

  .lp-hero__panel {
    max-width: none;
    margin: 0;
    border-radius: var(--r-card);
    padding: 1.1rem 1.15rem 1.25rem;
  }

  .lp-hero__lead { font-size: 0.95rem; line-height: 1.5; margin-top: 0.8rem; }

  .lp-hero__facts { margin-top: 0.85rem; padding-top: 0.8rem; }

  /* Buttons nebeneinander statt gestapelt — spart eine Zeilenhoehe */
  .lp-hero__actions { margin-top: 1rem; gap: 0.5rem; flex-wrap: nowrap; }
  .lp-hero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0.85rem 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
}

/* Sehr schmal: zweiter Button unter den ersten, sonst bricht der Text */
@media (max-width: 359px) {
  .lp-hero__actions { flex-wrap: wrap; }
  .lp-hero__actions .btn { flex: 1 1 100%; }
  .lp-hero__panel { padding-top: 0.9rem; }
  .lp-hero__lead { font-size: 0.9rem; }
}

/* ── Statement-Sektion (grosse, ruhige Aussage) ──────── */
.lp-statement {
  text-align: center;
  padding-block: clamp(5rem, 14vh, 10rem);
}
.lp-statement h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  max-width: 18em;
  margin-inline: auto;
}

/* ── Split-Sektion: Bild + Text ──────────────────────── */
.lp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .lp-split { grid-template-columns: 1fr 1fr; }
  .lp-split--reverse .lp-split__media { order: 2; }
}
.lp-split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--c-sand) 0%, var(--c-rose) 100%);
}
.lp-split__media img {
  position: relative;
  top: -6%;              /* Ueberstand auf BEIDE Seiten verteilen */
  width: 100%;
  height: 112%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
/* Ohne top:-6% haengt der Ueberstand nur unten. Der Parallax schiebt das
   Bild dann nach unten und legt oben den Karten-Hintergrund frei — das sah
   aus, als wuerde die Karte aufbrechen. */

/* ── 4. Ablauf-Sequenz ───────────────────────────────
   Desktop (>=900px): die Sektion ist hoch, darin bleibt .lp-scrub__stage
   am Viewport gepinnt und JS schaltet den aktiven Schritt weiter.
   Mobil (<900px): kein Pinning, stattdessen ein nativ wischbarer
   Scroll-Snap-Carousel — plus Punkte und Pfeile in beiden Modi.
   Ohne JS: normale Liste untereinander.
   ───────────────────────────────────────────────────── */
.lp-scrub { padding: 0; position: relative; }

.lp-scrub__stage { padding-block: var(--section-y); }

.lp-scrub__grid {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
/* Grid-Items haben per Default min-width:auto und wachsen dann mit ihrem
   Inhalt — der horizontale Wisch-Track hat die 1fr-Spalte dadurch auf 828px
   aufgeblasen und die Seite seitlich ueberlaufen lassen. min-width:0 erlaubt
   den Items zu schrumpfen; der Track scrollt dann intern statt die Spalte zu
   sprengen. */
.lp-scrub__grid > * { min-width: 0; }
.lp-scrub__panels { min-width: 0; }

/* Bildstapel: Ebenen liegen uebereinander und blenden ineinander */
.lp-scrub__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-salbei-tief);
}
.lp-scrub__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out), transform 1.6s var(--ease-out);
  transform: scale(1.08);
}
.lp-scrub__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-scrub__layer.is-active { opacity: 1; transform: scale(1); }
html:not(.lp-animate) .lp-scrub__layer { display: none; }
html:not(.lp-animate) .lp-scrub__layer:first-child { display: block; opacity: 1; transform: none; }

.lp-scrub__panels { position: relative; }
.lp-scrub__panel { padding: 0; }
html:not(.lp-animate) .lp-scrub__panel + .lp-scrub__panel { margin-top: 2.5rem; }

.lp-scrub__num {
  font-family: 'Caprasimo', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.9;
  color: var(--c-rose);
  display: block;
  margin-bottom: 0.75rem;
}
.lp-scrub__panel h3 {
  color: var(--c-creme);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  margin: 0 0 0.75rem;
}
.lp-scrub__panel p {
  color: var(--c-creme);
  opacity: 0.88;
  max-width: 32em;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
}

/* ── Bedienelemente (Pfeile + Punkte) ───────────────── */
.lp-scrub__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: 2rem;
}
html:not(.lp-animate) .lp-scrub__nav,
html:not(.lp-animate) .lp-scrub__hint { display: none; }

.lp-scrub__arrow {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--c-creme);
  border: 1px solid color-mix(in srgb, var(--c-creme) 32%, transparent);
  background: color-mix(in srgb, var(--c-creme) 8%, transparent);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: background 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft), opacity 0.25s;
}
.lp-scrub__arrow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-rose) 85%, transparent);
  border-color: var(--c-rose);
  color: var(--c-kakao);
}
.lp-scrub__arrow:disabled { opacity: 0.28; cursor: default; }
.lp-scrub__arrow:focus-visible { outline: 3px solid var(--c-rose-hell); outline-offset: 3px; }

.lp-scrub__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-scrub__dot {
  display: block;
  width: 2.4rem;
  height: 44px;            /* volle Tap-Groesse, Strich bleibt duenn */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.lp-scrub__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--c-creme) 25%, transparent);
  transition: background 0.4s var(--ease-soft), height 0.3s var(--ease-soft);
}
.lp-scrub__dot:hover::before { background: color-mix(in srgb, var(--c-creme) 55%, transparent); }
.lp-scrub__dot.is-active::before { background: var(--c-rose); height: 3px; }
.lp-scrub__dot:focus-visible { outline: 3px solid var(--c-rose-hell); outline-offset: 2px; }

.lp-scrub__hint {
  margin: 0.9rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-creme);
  opacity: 0.68;          /* WCAG AA: 6.0:1 auf Plum — 0.45 waren nur 3.58:1 */
}

/* ── Desktop: gepinnte Buehne ───────────────────────── */
@media (min-width: 900px) {
  .lp-scrub__grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); }
  .lp-scrub__media { aspect-ratio: 4 / 5; }

  .lp-animate .lp-scrub {
    height: calc(var(--steps, 5) * 70vh + 100vh);
    height: calc(var(--steps, 5) * 70svh + 100svh);
  }
  .lp-animate .lp-scrub__stage {
    position: sticky;
    top: 0;
    height: calc(100vh - var(--nav-h, 0px));
    height: calc(100svh - var(--nav-h, 0px));
    top: var(--nav-h, 0px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-block: 0;
  }
  .lp-animate .lp-scrub__panels { min-height: 21rem; }

  .lp-animate .lp-scrub__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s var(--ease-out), transform 0.75s var(--ease-out);
    pointer-events: none;
  }
  .lp-animate .lp-scrub__panel.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ── Mobil: wischbarer Carousel ─────────────────────── */
@media (max-width: 899px) {
  .lp-animate .lp-scrub__panels {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lp-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--lp-gutter) * -1);
    padding: 0.25rem var(--lp-gutter) 0.5rem;
    align-items: stretch;
    overscroll-behavior-x: contain;
  }
  .lp-animate .lp-scrub__panels::-webkit-scrollbar { display: none; }

  .lp-animate .lp-scrub__panel {
    flex: 0 0 min(84%, 21rem);
    scroll-snap-align: center;
    /* Glas-Karte auf dunklem Grund */
    background: color-mix(in srgb, var(--c-creme) 9%, transparent);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    border: 1px solid color-mix(in srgb, var(--c-creme) 14%, transparent);
    padding: 1.4rem 1.3rem 1.6rem;
    transition: border-color 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
  }
  .lp-animate .lp-scrub__panel.is-active {
    background: color-mix(in srgb, var(--c-creme) 15%, transparent);
    border-color: color-mix(in srgb, var(--c-rose) 55%, transparent);
  }
  .lp-scrub__panel p { font-size: 0.95rem; }
  .lp-scrub__nav { justify-content: center; }
  .lp-scrub__hint { text-align: center; }
}

/* ── Kurs-Karte / Preis-Anker ────────────────────────── */
.lp-offer {
  max-width: 46rem;
  margin-inline: auto;
  background: var(--c-creme);
  border: 1px solid color-mix(in srgb, var(--c-kakao) 14%, transparent);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.lp-offer__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in srgb, var(--c-kakao) 14%, transparent);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.lp-offer__price {
  font-family: 'Caprasimo', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1;
  color: var(--c-waldgruen);
}
.lp-offer__price small {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.lp-offer dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem 1.5rem;
  font-size: 0.95rem;
  margin: 0 0 1.75rem;
}
.lp-offer dt { font-weight: 500; opacity: 0.65; }
.lp-offer dd { margin: 0; }
.lp-offer .btn { width: 100%; text-align: center; }

/* Belegung: 6 von 11 Plaetzen vergeben */
.lp-seats { margin-bottom: 1.75rem; }
.lp-seats__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}
.lp-seats__label strong { color: var(--c-terrakotta-tief); font-weight: 600; }
.lp-seats__track {
  height: 6px;
  background: color-mix(in srgb, var(--c-kakao) 12%, transparent);
  display: flex;
  gap: 2px;
}
.lp-seats__unit { flex: 1; background: transparent; }
.lp-seats__unit--taken { background: var(--c-terrakotta); }

/* ── Zwei-Spalten-Qualifizierung ─────────────────────── */
.lp-qual { list-style: none; padding: 0; margin: 0; font-size: 0.95rem; }
.lp-qual li { padding: 0.6rem 0 0.6rem 1.7rem; position: relative; line-height: 1.55; }
.lp-qual li::before { position: absolute; left: 0; top: 0.6rem; font-family: var(--f-serif); }
.lp-qual--ja li::before { content: "↳"; color: var(--c-terrakotta-tief); }
.lp-qual--nein li::before { content: "×"; opacity: 0.45; }

/* ── Ausstattungs-/Mitbringen-Liste ──────────────────── */
.lp-bring {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--c-kakao) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-kakao) 14%, transparent);
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-bring li {
  background: var(--c-creme);
  padding: 1.5rem 1.25rem;
  font-size: 0.95rem;
}
.lp-bring strong {
  display: block;
  font-family: var(--f-serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

/* ── Termin-Liste ────────────────────────────────────── */
.lp-dates { list-style: none; padding: 0; margin: 0; max-width: 34rem; margin-inline: auto; }
.lp-dates li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-creme) 22%, transparent);
  font-size: 1rem;
}
.lp-dates li:last-child { border-bottom: none; }
.lp-dates__day { font-family: var(--f-serif); font-size: 1.25rem; }
.lp-dates__time { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }

/* ── 6. Sticky-CTA-Leiste ────────────────────────────── */
.lp-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: color-mix(in srgb, var(--c-waldgruen) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--c-creme) 18%, transparent);
  color: var(--c-creme);
  transform: translateY(105%);
  transition: transform 0.5s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.lp-sticky-cta.is-visible { transform: translateY(0); }
.lp-sticky-cta__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0.85rem var(--lp-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lp-sticky-cta__text { font-size: 0.9rem; line-height: 1.4; }
.lp-sticky-cta__text strong { display: block; font-family: var(--f-serif); font-size: 1.1rem; font-weight: 400; }
.lp-sticky-cta__text span { opacity: 0.75; font-size: 0.8rem; }
.lp-sticky-cta .btn {
  background: var(--c-rose);
  color: var(--c-kakao);
  border-color: var(--c-rose);
  flex-shrink: 0;
  padding: 0.85rem 1.5rem;
}
.lp-sticky-cta .btn:hover { background: var(--c-creme); border-color: var(--c-creme); }
.lp-sticky-cta a:focus-visible { outline-color: var(--c-rose-hell); }

@media (max-width: 640px) {
  .lp-sticky-cta__text span { display: none; }
  .lp-sticky-cta__inner { padding: 0.7rem 1rem; gap: 0.75rem; }
  .lp-sticky-cta .btn { font-size: 0.75rem; padding: 0.8rem 1.1rem; letter-spacing: 0.08em; }
}

/* Anker-Sprungziele weder unter die Sticky-Nav (oben) noch unter die
   Sticky-CTA-Leiste (unten) schieben. */
html.lp-animate, html.lp-static {
  scroll-padding-top: 5.5rem;
  scroll-padding-bottom: 5.5rem;
}

/* ════════════════════════════════════════════════════
   Glas-Elemente
   Glas braucht etwas dahinter — deshalb nur dort, wo ein Bild, ein Video
   oder ein dunkler Grund liegt. Auf Creme waere es wirkungslos.
   Alle Flaechen bleiben scharfkantig (Brand-Regel: kein border-radius).
   ════════════════════════════════════════════════════ */

/* Hero: Fakten als gefrostete Leiste ueber dem Video */
.lp-hero__facts {
  background: color-mix(in srgb, #2E1E18 38%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid color-mix(in srgb, var(--c-creme) 16%, transparent);
  border-top-color: color-mix(in srgb, var(--c-creme) 28%, transparent);
  padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem);
}
@media (max-width: 430px), (max-height: 680px) and (max-width: 900px) {
  .lp-hero__facts { padding: 0.8rem 0.9rem; }
}

/* Hero: feine Vignette, damit die Raender ruhiger werden */
.lp-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 45%, transparent 55%, rgba(30, 18, 14, 0.42) 100%);
  pointer-events: none;
}

/* Breather und Angebots-Sektion laufen randlos durch.
   Sie waren zwischenzeitlich eingerueckt und gerundet — das ergab aber eine
   gerundete Sektion, in der eine gerundete Karte sitzt: Kachel in Kachel.
   Jetzt traegt nur noch der Inhalt (Zitat, Angebots-Karte) die Rundung,
   die Sektion selbst ist Hintergrund. */

/* ── Breather: vollflaechiges Bild mit Glas-Zitat ────── */
.lp-breather {
  position: relative;
  padding: 0;
  min-height: clamp(26rem, 68vh, 40rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-salbei-tief);
}
.lp-breather__media { position: absolute; inset: -8% 0; height: 116%; z-index: 0; }
.lp-breather__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-breather__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(46, 30, 24, 0.72) 0%, rgba(46, 30, 24, 0.38) 45%, rgba(46, 30, 24, 0.15) 100%);
}
.lp-breather__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}
.lp-breather__quote {
  max-width: 34rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  /* 62%: axe kann Kontrast ueber Bildern nicht messen. Durchgerechnet ueber
     die volle Schichtung (Foto hell -> Scrim -> Glas) erreicht die kleine
     Fusszeile erst ab hier sicher 4.5:1. Das Glas bleibt klar erkennbar. */
  background: color-mix(in srgb, #2E1E18 62%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--c-creme) 18%, transparent);
  color: var(--c-creme);
}
.lp-breather__quote p {
  font-family: var(--f-serif);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.3;
  margin: 0;
  color: var(--c-creme);
  max-width: none;
}
.lp-breather__quote footer {
  margin-top: 1.25rem;
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* Mobil war der Breather 574px hoch. Ein 16:9-Bild wird darin auf 33% seiner
   Breite hochgezoomt — unscharfes, nicht erkennbares Detail. Flachere Sektion
   plus Ausschnitt nach oben zeigt wieder Matten, Decken und Kerze. */
@media (max-width: 767px) {
  .lp-breather { min-height: clamp(19rem, 44svh, 24rem); }
  /* Links liegen die scharfen gefalteten Decken, mittig nur unscharfe Matten */
  .lp-breather__media img { object-position: 22% 46%; }
  .lp-breather__quote { padding: 1.15rem 1.1rem 1.25rem; }
  .lp-breather__quote p { font-size: 1.2rem; line-height: 1.28; }
}

/* Bilder laufen an den Sektionskanten aus.
   Vorher lag dort nur die Nachbarfarbe halbtransparent ueber dem Bild —
   dadurch schimmerte das Foto durch und es entstand ein matschiger grauer
   Streifen. Jetzt verschwindet das BILD selbst, die Sektion zeigt an der
   Kante ihre eigene Volltonfarbe, und die Naht blendet sauber Farbe auf
   Farbe. */
.lp-breather__media,
.lp-offer-section__media {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 clamp(40px, 9vw, 72px),
    #000 calc(100% - clamp(40px, 9vw, 72px)),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 clamp(40px, 9vw, 72px),
    #000 calc(100% - clamp(40px, 9vw, 72px)),
    transparent 100%);
}

/* ── Angebots-Sektion: Bildgrund + gefrostete Karte ──── */
.lp-offer-section { position: relative; overflow: hidden; background: var(--c-salbei-tief); }
.lp-offer-section > .container-wide { position: relative; z-index: 2; }
.lp-offer-section__media { position: absolute; inset: -6% 0; height: 112%; z-index: 0; }
.lp-offer-section__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-offer-section__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(58, 46, 58, 0.93) 0%, rgba(58, 46, 58, 0.80) 45%, rgba(58, 46, 58, 0.93) 100%);
}
/* Nur die Texte AUSSERHALB der hellen Karte aufhellen — in der Karte
   bleibt alles dunkel auf Creme (sonst kippt der Kontrast). */
.lp-offer-section > .container-wide > .center-content > .eyebrow { color: var(--c-rose-hell); }
.lp-offer-section > .container-wide > .center-content > h2 { color: var(--c-creme); }
.lp-offer-section > .container-wide > .center-content > p:not(.eyebrow),
.lp-offer-section > .container-wide > p { color: var(--c-creme); opacity: 0.9; }

/* Die Karte selbst: hell und gefrostet, damit der dunkle Text AA-sicher bleibt */
.lp-offer {
  background: color-mix(in srgb, var(--c-creme) 93%, transparent);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border-color: color-mix(in srgb, var(--c-creme) 45%, transparent);
}

/* Sticky-CTA: kraeftigeres Glas */
.lp-sticky-cta {
  background: color-mix(in srgb, var(--c-waldgruen) 82%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* ════════════════════════════════════════════════════
   Zusaetzliche Scroll-Animationen
   ════════════════════════════════════════════════════ */

/* Trennstrich zieht sich beim Eintritt auf */
.lp-animate .divider {
  width: 0;
  transition: width 0.9s var(--ease-out) calc(var(--i, 0) * 90ms + 120ms);
}
.lp-animate .divider.is-in,
.lp-animate .is-in .divider,
.lp-animate [data-reveal].is-in .divider { width: 60px; }

/* Bilder decken sich wie ein Vorhang auf statt nur zu faden */
.lp-animate .lp-split__media,
.lp-animate .lp-breather__media,
.lp-animate .lp-offer-section__media { overflow: hidden; }
.lp-animate .lp-split__media[data-reveal] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out);
}
.lp-animate .lp-split__media[data-reveal].is-in img { clip-path: inset(0 0 0 0); }

/* Karten kommen minimal aus der Tiefe */
.lp-animate [data-stagger] > * {
  transform: translateY(28px) scale(0.985);
  transform-origin: 50% 100%;
}
.lp-animate [data-stagger] > *.is-in { transform: none; }

/* Belegungsbalken fuellt sich Feld fuer Feld */
.lp-animate .lp-seats__unit--taken {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-out);
}
.lp-animate .lp-seats.is-in .lp-seats__unit--taken,
.lp-animate [data-seats].is-in .lp-seats__unit--taken { transform: scaleX(1); }
.lp-animate [data-seats] .lp-seats__unit--taken:nth-child(1) { transition-delay: 0.05s; }
.lp-animate [data-seats] .lp-seats__unit--taken:nth-child(2) { transition-delay: 0.14s; }
.lp-animate [data-seats] .lp-seats__unit--taken:nth-child(3) { transition-delay: 0.23s; }
.lp-animate [data-seats] .lp-seats__unit--taken:nth-child(4) { transition-delay: 0.32s; }
.lp-animate [data-seats] .lp-seats__unit--taken:nth-child(5) { transition-delay: 0.41s; }
.lp-animate [data-seats] .lp-seats__unit--taken:nth-child(6) { transition-delay: 0.50s; }

/* Preis-Zahl waehrend des Hochzaehlens ruhig halten */
.lp-offer__price [data-countup] { font-variant-numeric: tabular-nums; }

/* ── Reduced Motion: alles ruhig stellen ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-hero__hint span::after { animation: none; }
  .lp-scrub__layer,
  .lp-scrub__panel,
  .lp-sticky-cta,
  .lp-split__media img,
  .lp-seats__unit--taken,
  .divider,
  .word__inner { transition: none; }
  .word__inner { transform: none; }
  .lp-split__media img { clip-path: none; }
  .lp-seats__unit--taken { transform: none; }
  .lp-scrub__panels { scroll-behavior: auto; }
}

/* ── Verschachtelung entzerren ───────────────────────
   Gefunden beim Nesting-Check: gerundete Flaechen in gerundeten Flaechen
   und gestapeltes Glas. Regel wie in brand.css — der aeussere Rahmen
   rundet und klippt, der Inhalt bleibt flach.
   ───────────────────────────────────────────────────── */

/* Bilder in gerundeten Medien-Containern: kein eigener Radius */
.lp-split__media img,
.lp-scrub__media img,
.lp-breather__media img,
.lp-offer-section__media img { border-radius: 0; box-shadow: none; }

/* Der Kicker sitzt IN der Glasflaeche — zweites Glas darin ist Matsch */
.lp-hero__panel .lp-hero__kicker {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, #FFFFFF 12%, transparent);
}

/* Packliste: der Rahmen rundet, die Felder darin nicht */
.lp-bring { border-radius: var(--r-card); overflow: hidden; }
.lp-bring li:first-child,
.lp-bring li:last-child { border-radius: 0; }

/* Keine Schatten-Stapelung innerhalb gerundeter Flaechen */
.lp-offer .btn,
.lp-hero__panel .btn,
.lp-card-soft .btn,
.lp-breather .lp-breather__quote { box-shadow: none; }
.lp-breather__quote { box-shadow: var(--shadow-dark); }

/* Auf 320px waren Pfeile + Punkte zusammen breiter als der Viewport
   (Ueberlauf 5px). Enger setzen, Trefferhoehe bleibt bei 44px. */
@media (max-width: 400px) {
  .lp-scrub__nav { gap: 0.5rem; }
  .lp-scrub__dots { gap: 0.25rem; }
  .lp-scrub__dot { width: 1.6rem; }
  .lp-scrub__arrow { width: 2.5rem; height: 2.5rem; }
}