/* ------------------------------------------------------------------------
   Gäste-Landing-Page (v1.33.178, Karte t_9cef2a0d)
   ------------------------------------------------------------------------
   Eigenes Stylesheet, ausschließlich `lp_*`-Klassen — style.css bleibt
   unangetastet (kein Eingriff in Bestandsseiten). Farben kommen aus den
   Theme-Token in style.css (`:root` + `[data-theme="dark"]`), damit hell und
   dunkel automatisch stimmen. Nur wo ein Token nicht reicht (CTA-Kontrast,
   Video-Flächen), setzt dieser Block eigene, weiter unten dokumentierte
   Landing-Token.

   Kontrast (geprüft, WCAG 2.1 AA ≥ 4.5:1 für Text):
     hell:  #2b2320 auf #faf7f2 = 14.4 · #6b5f57 auf #faf7f2 = 5.8
            CTA #ffffff auf #a34a2b = 5.9 · Link #a34a2b auf #faf7f2 = 5.5
     dunkel: #f3ece4 auf #171310 = 15.8 · #c9beb2 auf #171310 = 10.1
            CTA #171310 auf #e8b49c = 10.1
   (gemessen mit relativer Luminanz nach WCAG; Werte im Karten-Beleg.)
   ---------------------------------------------------------------------- */

.lp {
  --lp-cta-bg: #a34a2b;
  --lp-cta-bg-hover: #8f3f24;
  --lp-cta-ink: #ffffff;
  --lp-media-bg: var(--surface-soft);
  --lp-media-line: var(--line);
  /* Haken-Badge in Schritt 3 („im Kochbuch gespeichert") — bewusst gedecktes
     Moosgrün, das sich in beiden Themes vom warmen Umfeld absetzt. */
  --lp-check-bg: #5f8a4e;
  --lp-check-ink: #ffffff;
  --lp-hero-glow: radial-gradient(120% 120% at 85% 15%, var(--hero-b) 0%, var(--bg) 60%);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

[data-theme="dark"] .lp {
  --lp-cta-bg: #e8b49c;
  --lp-cta-bg-hover: #f2c4ae;
  --lp-cta-ink: #171310;
  --lp-check-bg: #8fb46b;
  --lp-check-ink: #171310;
  --lp-hero-glow: radial-gradient(120% 120% at 85% 15%, #2d231b 0%, var(--bg) 65%);
}

/* ------------------------------- Hero ---------------------------------- */
.lp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  background: var(--lp-hero-glow);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin: 6px 0 30px;
}

.lp-hero h1 {
  font-size: clamp(1.75rem, 6vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}

.lp-hero-sub {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 46ch;
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.lp-hero-login {
  margin: 14px 0 0;
  font-size: 0.95rem;
}

.lp-hero-login a {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

[data-theme="dark"] .lp-hero-login a { color: #e8b49c; }

.lp-hero-media { order: -1; }

.lp-pic {
  display: block;
  margin: 0;
}

.lp-pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
}

/* --------------------- Hero-Bühne: echte Karten (v1.33.194) -------------
   Bennet (24.10.2026): Der Hero ist keine eingebackene 2400×1400-Grafik mehr,
   sondern eine Komposition aus drei ECHTEN Rezeptkarten (Cover aus
   /uploads/…, Titel/Kategorie in der Anzeigesprache) plus dem korrigierten,
   saisonalen Nom-Nom-WebP.

   Aufbau:
     .lp-hero-stage   feste Seitenratio → reserviert Platz vor dem Laden
                      (kein Layout-Sprung, CLS ≈ 0)
     .lp-hero-deck    drei Karten nebeneinander, dezent gestapelt/gedreht
     .lp-hero-mascot  Nom Nom davor, unten rechts (dekorativ, alt="")
     .lp-hero-card--1.. sind die Ehrenplätze: Rotation + vertikaler Versatz
                      je Kartenindex (--lp-rot/--lp-lift), damit die
                      Reveal-Animation vorne nur translateY/scale ergänzen muss.
   Die Karten sind bewusst NICHT klickbar — der Hero ist Anschauung, die
   Rezepte selbst stehen weiter unten als echte Links. */
.lp-hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.78;
}

.lp-hero-deck {
  list-style: none;
  margin: 0;
  padding: 2% 1% 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2%;
}

.lp-hero-card {
  width: 31%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--lp-media-line);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(60, 40, 25, 0.16);
  transform: translateY(var(--lp-lift, 0)) rotate(var(--lp-rot, 0deg));
  transform-origin: 50% 88%;
}

.lp-hero-card--1 { --lp-rot: -5deg;   --lp-lift: 6%;  z-index: 1; }
.lp-hero-card--2 { --lp-rot: 2.5deg;  --lp-lift: -1%; z-index: 2; }
.lp-hero-card--3 { --lp-rot: -2.5deg; --lp-lift: 8%;  z-index: 3; }

.lp-hero-cover {
  display: block;
  background: var(--lp-media-bg);
}

.lp-hero-cover img {
  display: block;
  width: 100%;
  height: auto;
  /* 4:5 wie die width/height-Attribute im Template — der Beschnitt ist
     gewollt (Hochformat-Karte) und die drei Motive sind dafür geprüft. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.lp-hero-cardtext {
  display: block;
  padding: 6px 8px 8px;
  min-width: 0;
}

.lp-hero-cat {
  display: block;
  font-size: 0.56rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .lp-hero-cat { color: #e8b49c; }

.lp-hero-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.22;
  font-weight: 700;
  color: var(--ink);
  margin-top: 1px;
}

/* Nom Nom steht VOR dem Kartenfächer, unten rechts. Das WebP bringt echtes
   Alpha mit (v1.33.149) — keine Blend-Modi nötig, funktioniert in beiden
   Themes. Die Breite ist gedeckelt, damit die Figur auf 390 px nicht größer
   als die Karten wird; die Figur selbst ist im Quadrat zentriert. */
.lp-hero-mascot {
  position: absolute;
  right: -1%;
  bottom: -3%;
  width: clamp(84px, 27%, 172px);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(43, 35, 32, 0.18));
}

.lp-hero-mascot img,
img.lp-hero-nomnom {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Reveal (einmalig, per IntersectionObserver in landing.js) ----------
   Nur wenn der Nutzer Bewegung erlaubt: unter `prefers-reduced-motion:
   reduce` steht die Bühne von Anfang an fertig da (kein opacity 0). Ohne
   JavaScript bleibt ohne diese Klasse ebenfalls alles sichtbar (zusätzlich
   schützt das <noscript>-Style im Template). Ablauf: opacity 0→1,
   translateY 14px→0, scale .96→1, gestaffelt 0/120/240 ms, je 380 ms
   ease-out — genau die Werte aus der Karte. */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-deck[data-lp-reveal] .lp-hero-card {
    opacity: 0;
    transform: translateY(calc(var(--lp-lift, 0%) + 14px)) scale(0.96)
               rotate(var(--lp-rot, 0deg));
    transition: opacity 0.38s ease-out, transform 0.38s ease-out;
  }

  .lp-hero-deck[data-lp-reveal].is-in .lp-hero-card {
    opacity: 1;
    transform: translateY(var(--lp-lift, 0)) scale(1) rotate(var(--lp-rot, 0deg));
  }

  .lp-hero-deck[data-lp-reveal] .lp-hero-card--1 { transition-delay: 0ms; }
  .lp-hero-deck[data-lp-reveal] .lp-hero-card--2 { transition-delay: 120ms; }
  .lp-hero-deck[data-lp-reveal] .lp-hero-card--3 { transition-delay: 240ms; }
}

/* ------------------------------ Buttons -------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lp-btn--primary {
  background: var(--lp-cta-bg);
  color: var(--lp-cta-ink);
}

.lp-btn--primary:hover,
.lp-btn--primary:focus-visible {
  background: var(--lp-cta-bg-hover);
  color: var(--lp-cta-ink);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.lp-btn--ghost:hover,
.lp-btn--ghost:focus-visible {
  background: var(--surface-hover);
  border-color: var(--brand-soft-border);
}

.lp-btn:focus-visible,
.lp a:focus-visible,
.lp-card-link:focus-visible {
  outline: 3px solid var(--brand-dark);
  outline-offset: 3px;
}

[data-theme="dark"] .lp-btn:focus-visible,
[data-theme="dark"] .lp a:focus-visible,
[data-theme="dark"] .lp-card-link:focus-visible {
  outline-color: #e8b49c;
}

/* ----------------------------- Abschnitte ------------------------------ */
.lp-section {
  margin: 0 0 38px;
}

.lp-section h2 {
  font-size: clamp(1.3rem, 3.6vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink);
}

.lp-intro {
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 62ch;
}

/* --------------------------- Schritte 1-3 ------------------------------ */
.lp-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.lp-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 18px;
  box-shadow: var(--shadow);
}

/* v1.33.193 (Karte t_9a559c6c, Bennet 24.10.): Die drei Schritt-Karten zeigen
   ECHTE Inhalte statt gezeichneter SVG-Motive —
     Schritt 1: Foto (WebP)          → .lp-step-media > img
     Schritt 2: App-Screenshot       → .lp-scan mit orangen Eckwinkeln (CSS)
     Schritt 3: Raster echter Karten → .lp-saved mit echten Cover-URLs
   Alle drei sitzen in einem quadratischen Rahmen, damit die Karten in einer
   Reihe gleich hoch bleiben und nichts springt (CLS ≈ 0). */
.lp-step-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: var(--lp-media-bg);
}

.lp-step-media > img {          /* Schritt 1: Foto füllt den Rahmen */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Schritt 2: echter Screenshot im Scan-Rahmen ----------------------- */
.lp-scan {
  position: relative;
  display: block;
  height: calc(100% - 26px);
  aspect-ratio: 808 / 1216;     /* = Format des Screenshots (kein Beschnitt) */
  max-width: calc(100% - 30px);
}

.lp-scan-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--lp-media-line);
  box-shadow: 0 6px 18px rgba(43, 35, 32, 0.16);
}

.lp-scan-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--brand);
  pointer-events: none;
}

.lp-scan-corner--tl {
  top: -9px; left: -9px;
  border-top-width: 3px; border-left-width: 3px;
  border-top-left-radius: 7px;
}

.lp-scan-corner--tr {
  top: -9px; right: -9px;
  border-top-width: 3px; border-right-width: 3px;
  border-top-right-radius: 7px;
}

.lp-scan-corner--bl {
  bottom: -9px; left: -9px;
  border-bottom-width: 3px; border-left-width: 3px;
  border-bottom-left-radius: 7px;
}

.lp-scan-corner--br {
  bottom: -9px; right: -9px;
  border-bottom-width: 3px; border-right-width: 3px;
  border-bottom-right-radius: 7px;
}

/* --- Schritt 3: Raster aus echten Rezeptkarten ------------------------- */
.lp-saved {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.lp-saved-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.lp-saved-card {
  position: relative;            /* Bezugsrahmen für den grünen Haken */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--lp-media-line);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(60, 40, 25, 0.07);
}

.lp-saved-img {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--lp-media-bg);
}

.lp-saved-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-saved-img--leer {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-soft);
}

.lp-saved-body {
  flex: 0 0 auto;
  padding: 5px 7px 6px;
  display: block;
}

.lp-saved-cat {
  display: block;
  font-size: 0.56rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-saved-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.22;
  font-weight: 700;
  color: var(--ink);
  margin-top: 1px;
}

.lp-saved-meta {
  display: block;
  font-size: 0.6rem;
  line-height: 1.2;
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der Haken sitzt IN der letzten Karte (nicht mehr als Overlay über dem
   Raster) — sonst landete er optisch auf der zweiten Karte, obwohl der
   Alt-Text „die letzte trägt einen grünen Haken" sagt. */
.lp-saved-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-check-bg);
  color: var(--lp-check-ink);
  border: 3px solid var(--surface);
  box-shadow: 0 4px 12px rgba(60, 40, 25, 0.18);
}

.lp-saved-check svg {
  width: 58%;
  height: 58%;
}

.lp-step h3 {
  font-size: 1.08rem;
  margin: 0 0 6px;
  color: var(--ink);
}

.lp-step p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 0.97rem;
}

/* ------------------------------ Features ------------------------------- */
.lp-features {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.lp-feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.lp-feature-body .lp-pic img {
  aspect-ratio: 1800 / 1400;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--lp-media-bg);
}

.lp-feature h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
  color: var(--ink);
}

.lp-feature p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 0.97rem;
}

/* ---------------------------- Beispiel-Karten -------------------------- */
.lp-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.lp-card { min-width: 0; }

.lp-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.lp-card-link:hover {
  transform: translateY(-2px);
  border-color: var(--brand-soft-border);
}

.lp-card-img {
  display: block;
  background: var(--lp-media-bg);
}

.lp-card-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 800;
  object-fit: cover;
}

.lp-card-img--leer {
  aspect-ratio: 1200 / 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}

.lp-card-cat {
  display: block;
  margin: 12px 14px 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

[data-theme="dark"] .lp-card-cat { color: #e8b49c; }

.lp-card-title {
  display: block;
  margin: 0 14px 16px;
  font-weight: 600;
  line-height: 1.35;
}

/* ------------------------------- Videos -------------------------------- */
.lp-video {
  margin: 18px 0 0;
}

.lp-video-el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--lp-media-bg);
  border: 1px solid var(--lp-media-line);
  border-radius: calc(var(--radius) - 2px);
}

.lp-feature .lp-video { margin: 0; }

/* v1.33.199 (Karte t_96e6b47a): Der Anhalten-Knopf (WCAG 2.2.2, v1.33.178)
   ist entfallen — Markup, Styles und JS-Handler. Die Loops laufen dauerhaft;
   die A11y-Absicherung ist `prefers-reduced-motion: reduce` (Poster, kein
   MP4). Die relativen Positionen unten gelten nur noch für die Text-Leiste. */

/* ------------------- Text-Einblendungen im Video (v1.33.183) ------------ */
/* Karte t_d160873b: Zu jedem Schritt der Animation läuft unten im Clip ein
   Satz mit, der den Schritt erklärt (HTML-Leiste, KEIN Burn-in im MP4).
   Lesbarkeit auf hell UND dunkel: die Leiste legt einen eigenen, warm
   getönten Scrim unter den Text — sie hängt damit nicht von der Helligkeit
   des jeweiligen Videobildes ab.

   Kontrast (WCAG 2.1, relativ gemessen — Werte im Karten-Beleg):
     Text #faf7f2 auf rgba(23,19,16,.88):
       über heller Karte (#faf7f2)  = 12,5 : 1
       über reinem Weiß             = 12,4 : 1
       über dunklem Theme (#171310) = 17,3 : 1
   → deutlich über AA (4,5:1) und AAA (7:1), auch im schlechtesten Fall. */
.lp-video-frame { position: relative; }

.lp-video-caps {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 9px 13px 9px 15px;
  border-radius: 10px;
  border-left: 4px solid var(--lp-cta-bg);
  background: rgba(23, 19, 16, 0.88);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.26);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  /* Nie Klicks/Scrollen über dem Video abfangen. */
  pointer-events: none;
}

/* Grundzustand ohne JS = versteckt; das Skript schaltet die Leiste frei. */
.lp-video-caps[hidden] { display: none; }

.lp-video-cap {
  margin: 0;
  color: #faf7f2;
  font-size: clamp(0.84rem, 2.1vw, 0.98rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

/* Kurzer Fade bei jedem Wechsel (Klasse setzt landing-video-captions.js neu). */
.lp-video-cap.is-in { animation: lp-cap-in 0.26s ease-out; }

@keyframes lp-cap-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* Statische Textliste unter dem Video (Ohne-JS- und Reduced-Motion-Zustand).
   v1.33.195 (Karte t_f891d74a): Grundzustand ist AUS, sobald JavaScript läuft
   — die Einblend-Leiste übernimmt. Wichtig ist der ZEITPUNKT: Bis v1.33.194
   setzte erst das defer-Skript (landing-video-captions.js) `hidden` auf diese
   Liste. Das geschah NACH dem ersten Paint und nahm der Schritt-Sektion
   142 px (390 px breit) bzw. 78 px (1440 px) Höhe → alles darunter (Beispiele,
   Abschluss-CTA, Footer) sprang nach oben, gemessener seitenweiter CLS bis
   0,158. Der Zustand steht deshalb jetzt im ersten Paint fest:
     * JavaScript an  → Regel greift, Liste ist von Anfang an ausgeblendet
     * JavaScript aus → <noscript><style> in templates/landing.html zeigt sie
     * prefers-reduced-motion → Regel am Ende dieser Datei zeigt sie (dort
       schaltet das Skript bewusst nichts um)
   `[hidden]` bleibt als zweite Sicherung (das Skript setzt es weiterhin). */
.lp-video-steps {
  display: none;
  margin: 10px 0 0;
  padding-left: 22px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.lp-video-steps[hidden] { display: none; }

.lp-video-steps li { margin: 2px 0; }

.lp-video-steps li::marker { color: var(--lp-cta-bg); font-weight: 700; }

/* Wer Bewegung reduziert haben will, sieht das Poster — das MP4 wird nicht
   geladen (landing.js startet dort nichts; preload="none" bleibt). */
@media (prefers-reduced-motion: reduce) {
  .lp-video-el { pointer-events: none; }
  .lp-card-link { transition: none; }
  .lp-card-link:hover { transform: none; }
  /* v1.33.195 (Karte t_f891d74a): Ohne Bewegung schaltet
     landing-video-captions.js nichts um — dann bleibt die statische Textliste
     die Inhaltsquelle. Der Zustand kommt aus dem Stylesheet (nicht aus dem
     Skript), damit auch hier kein Layout-Shift entsteht. */
  .lp-video-steps { display: block; }
}

/* --- Vertrauen-Abschnitt: entfallen (v1.33.191, Karte t_20a12519) ---------
   Bennet hat den Abschnitt „Deine Rezepte bleiben deine“ von der Landing
   gestrichen — die Regeln .lp-trust/.lp-trust h2/.lp-trust p sind mit dem
   Markup ersatzlos entfernt (kein toter CSS-Rest). */

/* ---------------------------- Abschluss-CTA ---------------------------- */
.lp-closing {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.lp-closing h2 {
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  margin: 0 0 10px;
}

.lp-closing-text {
  margin: 0 auto 18px;
  color: var(--ink-soft);
  max-width: 52ch;
  line-height: 1.6;
}

.lp-note {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --------------------------- Ab 600 px (Tablet) ------------------------ */
@media (min-width: 600px) {
  .lp-hero { padding: 26px 24px; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
  .lp-cards { grid-template-columns: repeat(3, 1fr); }
  .lp-features { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------- Ab 768 px (Desktop) ------------------------- */
@media (min-width: 768px) {
  .lp-hero {
    grid-template-columns: 1.05fr 1fr;
    gap: 30px;
    padding: 34px 32px;
  }

  .lp-hero-media { order: 0; }

  .lp-section { margin-bottom: 46px; }

  .lp-steps { gap: 20px; }

  .lp-video { margin-top: 22px; }
}

/* ------------------------ Ab 1024 px (breit) --------------------------- */
@media (min-width: 1024px) {
  .lp-hero { padding: 44px 40px; }
  .lp-hero-sub { font-size: 1.08rem; }
  .lp-feature { padding: 20px; }
  .lp-closing { padding: 34px 28px; }
}

/* --------------------------- Druck / Bewegung -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp * { animation: none !important; transition: none !important; }
}

@media print {
  .lp-video, .lp-hero-media { display: none; }
  .lp { max-width: none; }
}