/* landing.css – Marketing-Landing-Page für HolaRuta.
 *
 * Erbt das komplette Design-System aus styles.css (Tokens in :root /
 * [data-theme="dark"], @font-face für Bricolage Grotesque + Instrument Sans,
 * flache Sticker-Schatten, :focus-visible, reduced-motion). styles.css wird in
 * landing.html ZUERST eingebunden, diese Datei DANACH – Marketing-Layout gewinnt.
 *
 * Eigene Klassen sind mit `lp-` präfixiert, damit sie nie mit App-Klassen
 * kollidieren. Wiederverwendet werden bewusst nur stabile App-Komponenten
 * (.cta, .segmented/.seg). Alles ist token-basiert und funktioniert in Hell &
 * Dunkel ohne Sonderfälle.
 */

/* ─────────────────────────── Marketing-Tokens ───────────────────────────
 * Bauen auf den App-Tokens auf: nur was die breitere, luftigere Marketing-
 * Ästhetik zusätzlich braucht (Seitenbreite, Spacing-/Type-Skala, EIN reicherer
 * Hero-Schatten). Die App-Spalte bleibt 460px – hier darf es weiter atmen. */
:root {
  --maxw-page: 1080px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Spacing-Skala (~1.5-Ratio) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Type-Skala (fluid) – Bricolage display, Instrument body */
  --fs-display: clamp(2.3rem, 6vw, 4.5rem);
  --fs-h2: clamp(2rem, 4vw, 3rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-eyebrow: 0.72rem;

  /* Eine reichere Elevation – NUR für die Hero-Karte: weiche Tiefe UNTER dem
     kanonischen 2px-Sticker-Offset (Marken-Identität bleibt erhalten). */
  --shadow-hero: 0 30px 60px -24px rgba(45, 27, 18, 0.45), 0 2px 0 rgba(45, 27, 18, 0.10);
}
[data-theme="dark"] {
  --shadow-hero: 0 30px 60px -24px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* Der Rainbow-Stripe-Gradient der Marke (verbatim aus styles.css). Als Variable,
   damit Top-Band, Mini-Regeln & Phone-Bezel dieselbe Quelle teilen. */
:root {
  --rainbow: linear-gradient(90deg,
    #C2502E 0% 16%, #E9A23B 16% 33%, #3F7355 33% 50%,
    #2F6B70 50% 66%, #7D4A8E 66% 83%, #B5302A 83% 100%);
}

/* ─────────────────────────── Grundgerüst ─────────────────────────── */
html { background: var(--page); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Marken-Rahmen: 8px Rainbow-Band ganz oben, edge-to-edge. */
.lp-topstripe {
  height: 8px;
  background: var(--rainbow);
}

img { max-width: 100%; display: block; }
a { color: var(--brand-ink); }

.lp-wrap {
  width: 100%;
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Anker-Sprünge (#features/#how/#install) landen unter dem klebrigen Header,
   nicht dahinter. */
[id] { scroll-margin-top: 84px; }

/* Skip-Link (a11y) – aus dem Fluss, erst bei :focus sichtbar. */
.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.lp-skip:focus { left: 0; }

/* ─────────────────────────── Eyebrow / Section-Titel ─────────────────────────── */
.lp-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 var(--space-2);
}
.lp-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  max-width: 22ch;
}
.lp-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* Sektions-Rhythmus + dezent wechselnde Hintergrundtöne (editorial).
   Mobile etwas kompakter (56px), Desktop großzügig (bis 128px). */
.lp-section { padding-block: clamp(56px, 9vw, 128px); }
/* Sanfte vertikale Abstufung statt platt Off-White: startet hell (--card),
   wird nach unten eine Spur wärmer/cremiger und leitet so ruhig in das dunkle
   Band darunter über. Funktioniert in Hell & Dunkel (Karte -> Fläche + Hauch
   Marke). */
.lp-section--card {
  background: linear-gradient(180deg,
    var(--card) 0%,
    color-mix(in srgb, var(--brand) 4%, var(--surface)) 62%,
    color-mix(in srgb, var(--brand) 9%, var(--surface)) 100%);
}
.lp-section--wash {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--brand) 5%, var(--surface)));
}
/* Dunkles Akzent-Band: hebt EINE Sektion bewusst vom Creme-Rhythmus ab
   (hell → dunkel → hell). Karten darauf behalten ihre helle --card-Fläche;
   nur die Sektions-Kopfzeile dreht lokal auf helle Tinte. Bewusst KEINE
   Token-Überschreibung (--ink etc.), damit Karteninhalte unberührt bleiben.
   Im Dark Theme ist --page dunkler als --surface – das Band setzt sich in
   beiden Themes ab. */
.lp-section--band { background: var(--page); }
.lp-section--band .lp-h2 { color: var(--cream); }
.lp-section--band .lp-lead { color: color-mix(in srgb, var(--cream) 82%, transparent); }
.lp-section--band .lp-eyebrow { color: var(--brand-ink-on-dark); }
/* Zitate (Testimonials) liegen direkt auf dem Band – helle Tinte statt --ink,
   sonst wäre ein einkommentiertes Testimonial im Light Theme unsichtbar. */
.lp-section--band .lp-quote { color: var(--cream); }
.lp-section--band .lp-quote cite { color: color-mix(in srgb, var(--cream) 70%, transparent); }

/* ─────────────────────────── Icon-Kacheln (SVG-Set) ───────────────────────────
   Stroke-Icons (Sprite #lpi-*) in tiefer Akzentfarbe auf dem hellen Accent-
   Verlauf der Sticker-Kachel. Die Kachel-Hintergründe bleiben unverändert;
   currentColor folgt --accent je Karte (Muster wie .lp-trust__num).
   Größe: die SVGs tragen width/height="1em" im Markup – die font-size der
   Kachel ist der EINE Regler und das Markup bleibt auch ohne dieses CSS
   (z. B. HTML/CSS-Cache-Versatz nach einem Deploy) korrekt dimensioniert. */
.lp-trust__ico, .lp-feat__icon, .lp-hook__ico, .lp-morechip__ico, .lp-moredetail__ico {
  color: color-mix(in srgb, var(--accent, var(--brand)) 78%, var(--ink));
}
.lp-trust__ico svg, .lp-feat__icon svg, .lp-hook__ico svg,
.lp-morechip__ico svg, .lp-moredetail__ico svg { display: block; }

/* Mini-Rainbow-Regel als Trenner (statt Hairline) – sparsam eingesetzt. */
.lp-rule {
  width: 120px; height: 3px; border-radius: 999px;
  background: var(--rainbow);
  margin: 0 0 var(--space-4);
}
.lp-rule--center { margin-inline: auto; }

/* ─────────────────────────── Header ─────────────────────────── */
.lp-header {
  position: sticky; top: 0; z-index: 100;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.lp-header__inner {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding-block: 10px;
}
/* Sehr schmale Geräte: enger packen, damit Logo + DE|EN + Theme nie kollidieren. */
@media (max-width: 400px) {
  .lp-header__inner { gap: var(--space-2); }
  .lp-logo__name { font-size: 1.05rem; }
}
.lp-header.is-stuck {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  border-bottom: 1.5px solid var(--line);
}

.lp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lp-logo__mark {
  width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
  box-shadow: var(--shadow); flex: none;
}
.lp-logo__mark svg { display: block; width: 100%; height: 100%; }
.lp-logo__name {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 800;
  letter-spacing: -0.01em; color: var(--ink);
}
.lp-logo__name span { color: var(--brand); }

.lp-header__spacer { flex: 1 1 auto; }
.lp-header__tools { display: flex; align-items: center; gap: var(--space-2); }

/* Sprach-Umschalter (DE|EN) – kompakte Pille im App-Look (.segmented/.seg). */
.lp-langtoggle {
  display: inline-grid; grid-auto-flow: column; gap: 4px;
  background: rgba(45, 27, 18, 0.06); border: 1.5px solid var(--line);
  padding: 4px; border-radius: 999px;
}
[data-theme="dark"] .lp-langtoggle { background: rgba(251, 243, 228, 0.05); }
.lp-langbtn {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 12px; min-height: 36px; border-radius: 999px;
  font-family: inherit; font-size: 0.82rem; font-weight: 800;
  color: var(--ink-soft); transition: all 0.18s ease;
}
.lp-langbtn[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
[data-theme="dark"] .lp-langbtn[aria-pressed="true"] { background: #3C2C1E; }

/* Icon-Button (Theme-Toggle) */
.lp-iconbtn {
  width: 44px; height: 44px; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; font-size: 1.1rem; box-shadow: var(--shadow);
  transition: transform 0.12s ease;
}
.lp-iconbtn:active { transform: translateY(1px); }

/* Kompakter Header-CTA: auf Mobile ausgeblendet (Hero-CTA reicht), ab 560px sichtbar.
   Höhere Spezifität (.lp-header …) ist nötig, weil .lp-cta später in der Datei
   display:inline-flex setzt und sonst das display:none überschreiben würde. */
.lp-header .lp-header__cta { display: none; }
@media (min-width: 560px) { .lp-header .lp-header__cta { display: inline-flex; } }

/* CTA-Varianten (bauen auf der App-.cta auf, hier per lp-Klassen für Marketing). */
.lp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  border: 1.5px solid var(--brand); background: var(--brand); color: var(--on-accent);
  padding: 14px 22px; border-radius: var(--r-md); box-shadow: var(--shadow);
  font-family: inherit; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.lp-cta--sm { padding: 9px 16px; font-size: 0.9rem; }
.lp-cta--lg { padding: 17px 28px; font-size: 1.1rem; }
.lp-cta:hover { filter: brightness(1.04); }
.lp-cta:active { transform: translateY(1px); }
/* CTA-Shine: heller Streifen wischt bei Hover quer durch. */
.lp-cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(251, 243, 228, 0.35) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.6s ease;
}
.lp-cta:hover::after { transform: translateX(130%); }

.lp-cta--ghost {
  background: var(--card); color: var(--brand-ink); border-color: var(--line-strong);
}
.lp-cta--ghost::after { display: none; }

/* ─────────────────────────── Hero ─────────────────────────── */
/* overflow clip: das Mesh (inset -6% + Drift-scale) ragt sonst seitlich über den
   Viewport hinaus und macht die Seite auf Mobile breiter als den Bildschirm
   (Inhalt wirkt „seitlich abgeschnitten"). hidden = Fallback für alte Browser. */
.lp-hero {
  position: relative; padding-block: clamp(48px, 8vw, 104px) clamp(56px, 9vw, 120px);
  overflow: hidden; overflow: clip;
}

/* Earth-tone Gradient-Mesh als Hintergrund (rein dekorativ). Driftet sehr langsam
   -> der Hero „atmet" leicht, ohne abzulenken (reduced-motion schaltet es aus). */
.lp-hero__mesh {
  position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 82% 8%, color-mix(in srgb, var(--warn) 22%, transparent), transparent 70%),
    radial-gradient(52% 52% at 8% 92%, color-mix(in srgb, var(--easy) 18%, transparent), transparent 70%),
    radial-gradient(44% 40% at 50% 48%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
  animation: lp-hero-drift 22s ease-in-out infinite alternate;
}
@keyframes lp-hero-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.2%, 0) scale(1.06); }
}

.lp-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .lp-hero__grid { grid-template-columns: 7fr 5fr; }
}

/* Hero-Eyebrow als kleine „Live"-Pille statt nackter Versalzeile – holt die
   Wertigkeit der Sektionen nach oben: Marken-getönte Pille mit feinem Ring und
   einem sanft pulsierenden Punkt (signalisiert „echt & unterwegs"). */
.lp-hero .lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 var(--space-4); padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 11%, var(--card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 30%, transparent), var(--shadow);
}
.lp-hero .lp-eyebrow::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px;
  background: var(--brand);
  animation: lp-pulse 2.4s ease-out infinite;
}
@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.lp-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink); margin: var(--space-3) 0 var(--space-4); max-width: 16ch;
}
/* Schlüssel-Phrase farbig unterlegt – derselbe Highlight-Duktus wie die
   Schlüsselwörter in den Schritten (.lp-step__hl), nur kräftiger fürs Hero. */
.lp-hl {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 56%,
    color-mix(in srgb, var(--brand) 34%, transparent) 0);
}
.lp-hero__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--space-5); max-width: 52ch; }

.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
/* Mobile: CTAs gestapelt & full-width -> große, saubere Tap-Ziele. */
@media (max-width: 520px) {
  .lp-hero__cta { flex-direction: column; align-items: stretch; }
  .lp-hero__cta .lp-cta { width: 100%; }
}

/* Trust-Bar mit den Kennzahlen. */
/* Bewusst 2×2 statt 4-in-Reihe: in der 7fr-Hero-Spalte blieben pro Kachel nur
   ~119px – „2293" wurde von overflow:hidden abgeschnitten und lange Labels
   brachen dreizeilig um. 2×2 gibt Zahl + Label verlässlich Platz. */
.lp-trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  max-width: 460px;
}
/* Stat-Karten in voller Wertigkeit der Feature-Kacheln: farbige Gradient-Icon-
   Kachel (--accent inline), Akzent-Faden an der Kante, Hub bei Hover. So liest
   sich der Hero-Beleg genauso hochwertig wie die Sektionen darunter. */
.lp-trust__item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lp-trust__item::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent, var(--brand)); opacity: .55;
  transition: opacity .16s ease, width .16s ease;
}
.lp-trust__item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 48%, var(--line));
  box-shadow:
    0 10px 24px -14px color-mix(in srgb, var(--accent, var(--brand)) 55%, transparent),
    var(--shadow);
}
.lp-trust__item:hover::before { opacity: 1; width: 4px; }
@media (hover: none) { .lp-trust__item:hover { transform: none; } }
.lp-trust__ico {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  /* font-size = Icon-Größe (SVGs sind 1em): 1.2rem hält die Icon/Kachel-
     Proportion (~0.5) im Gleichschritt mit feat/hook/morechip. */
  font-size: 1.2rem; line-height: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, var(--brand)) 26%, var(--card)),
    color-mix(in srgb, var(--accent, var(--brand)) 9%, var(--card)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent, var(--brand)) 30%, transparent);
  transform: rotate(-4deg);
  transition: transform .16s ease;
}
.lp-trust__item:hover .lp-trust__ico { transform: scale(1.07) rotate(-6deg); }
.lp-trust__data { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lp-trust__num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: color-mix(in srgb, var(--accent, var(--brand)) 76%, var(--ink));
  font-variant-numeric: tabular-nums; line-height: 1;
}
.lp-trust__label { font-size: 0.74rem; font-weight: 700; color: var(--muted); letter-spacing: 0.01em; }

/* ── Beispielkarten-Karussell. Die Karten nutzen die ECHTEN App-Klassen
 *    (.flip/.face/.face__cat/.lvl-badge/.cardbtn/.face__tip aus styles.css), damit
 *    sie 1:1 wie der Lern-Screen aussehen. Slides werden per Crossfade gewechselt
 *    (kein Track-translateX -> kein Clipping der 3D-Flip-/Schatten). ── */
.lp-cardcol { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.lp-carousel {
  position: relative; perspective: 1200px;
  width: min(360px, 92vw); margin-inline: auto;
  touch-action: pan-y; /* vertikales Scrollen bleibt, horizontale Wische gehen ans JS */
}
.lp-carousel__viewport { position: relative; min-height: 300px; }
.lp-slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.lp-slide.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.lp-carousel .flip__inner { min-height: 290px; }
/* Lange B2B-Sätze (z. B. „Bringen Sie mir bitte die Rechnung?" + Aussprache-
   Tipp) dürfen auf schmalen Handys nicht in die Eck-Buttons (🧭/🔊) laufen:
   unten Platz für die Button-Zeile reservieren und die Wortgrößen auf sehr
   schmalen Viewports leicht reduzieren. */
.lp-carousel .face { padding-bottom: 72px; }
@media (max-width: 400px) {
  .lp-carousel .face__word { font-size: 1.55rem; }
  .lp-carousel .face--back .face__word { font-size: 1.7rem; }
  .lp-carousel .face__tip { font-size: 0.95rem; }
}

/* Nur für Screenreader (Live-Region des Karussells: kündigt Kartenwechsel an). */
.lp-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Ohne JS ist die Karten-Rückseite (Spanisch + Aussprache) unerreichbar:
   das Kontext-Panel der sichtbaren Karte statisch einblenden (es trägt den
   spanischen Satz, die Übersetzung, Situation & Reisetipp) und den dann toten
   „Zum Umdrehen tippen"-Hinweis ausblenden. */
html:not(.js) .lp-slide.is-active .lp-ctxpanel[hidden] { display: block; }
html:not(.js) .lp-carousel .face__hint { display: none; }

/* Reise-Kontext wie in der App: NICHT auf der Karte, sondern hinter dem
   🧭-Button (unten links, Pendant zum 🔊). Klick blendet das App-Panel
   (.context-panel aus styles.css) unter der Karte ein – mit echtem Reisesatz,
   Situation und Reisetipp. Hier nur die Einbettung ins Karussell; nur die
   aktive Slide ist position:relative, daher wächst beim Aufklappen genau ihre
   Höhe und schiebt die Punkt-Navigation sauber nach unten. */
.lp-ctxpanel { margin-top: 14px; text-align: left; }
.lp-slide:not(.is-active) .lp-ctxpanel { display: none; }

/* Tilt-Wrapper: getrennt vom .flip (das seine eigene Perspektive fürs Umdrehen
   mitbringt), damit Kippen und Umdrehen sich nicht in die Quere kommen. */
.lp-cardtilt {
  transition: transform 0.2s ease;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, -4deg));
  filter: drop-shadow(0 28px 44px rgba(45, 27, 18, 0.30));
}
[data-theme="dark"] .lp-cardtilt { filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.55)); }

/* Punkt-Navigation */
.lp-dots { display: flex; gap: 4px; justify-content: center; }
.lp-dot {
  width: 28px; height: 28px; padding: 0; border: none; background: transparent;
  cursor: pointer; display: grid; place-items: center;
}
.lp-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 24%, transparent); transition: all 0.25s ease;
}
.lp-dot.is-active::before { width: 22px; background: var(--brand); }

/* Vor/Zurück-Pfeile (nur Desktop). Per JS ins Karussell injiziert; auf Touch-
   Geräten bleibt der Wisch, deshalb erscheinen sie NUR auf Zeiger-Geräten
   (Maus/Trackpad). Sie sitzen mittig an den Kartenkanten. */
.lp-carousel__arrow {
  display: none; position: absolute; top: 148px; z-index: 3;
  width: 40px; height: 40px; transform: translateY(-50%);
  align-items: center; justify-content: center; padding: 0;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.lp-carousel__arrow--prev { left: -18px; }
.lp-carousel__arrow--next { right: -18px; }
/* Chevron aus zwei Kanten – wie der Chevron der Modul-Chips. */
.lp-carousel__arrow > span {
  display: block; width: 9px; height: 9px;
  border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
}
.lp-carousel__arrow--prev > span { transform: rotate(-135deg); margin-left: 3px; }
.lp-carousel__arrow--next > span { transform: rotate(45deg); margin-right: 3px; }
.lp-carousel__arrow:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
  transform: translateY(-50%) scale(1.08);
}
.lp-carousel__arrow:active { transform: translateY(-50%) scale(0.96); }
.lp-carousel__arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .lp-carousel__arrow { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-carousel__arrow { transition: none; }
  .lp-carousel__arrow:hover, .lp-carousel__arrow:active { transform: translateY(-50%); }
}

/* Vor/Zurück-Pfeile für die horizontalen Wisch-Leisten (Modul-Chips + Beispiel-
   satz-Streifen). Gleiche Optik wie die Karussell-Pfeile, nur an den Kanten der
   scrollbaren Leiste (nicht einer Einzelkarte). Per JS wird die Leiste in
   .lp-strip-nav gehüllt; .is-scrollable setzt das JS nur, wenn sie überläuft. */
.lp-strip-nav { position: relative; }
.lp-strip-nav__arrow {
  display: none; position: absolute; top: 50%; z-index: 4;
  width: 38px; height: 38px; transform: translateY(-50%);
  align-items: center; justify-content: center; padding: 0;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow);
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
}
.lp-strip-nav__arrow--prev { left: 4px; }
.lp-strip-nav__arrow--next { right: 4px; }
.lp-strip-nav__arrow > span {
  display: block; width: 8px; height: 8px;
  border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
}
.lp-strip-nav__arrow--prev > span { transform: rotate(-135deg); margin-left: 3px; }
.lp-strip-nav__arrow--next > span { transform: rotate(45deg); margin-right: 3px; }
.lp-strip-nav__arrow:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
}
.lp-strip-nav__arrow:active { transform: translateY(-50%) scale(0.96); }
.lp-strip-nav__arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Am Anfang/Ende der Leiste den überflüssigen Pfeil ausblenden (bleibt im Layout). */
.lp-strip-nav__arrow:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .lp-strip-nav.is-scrollable .lp-strip-nav__arrow { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-strip-nav__arrow { transition: opacity .16s ease; }
  .lp-strip-nav__arrow:active { transform: translateY(-50%); }
}

/* ─────────────────────────── Features ─────────────────────────── */
.lp-features__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 520px) { .lp-features__grid { grid-template-columns: repeat(2, 1fr); } }
/* Nur im 2-Spalten-Bereich: bleibt eine Karte allein in der letzten Reihe
   (7 Karten = 2+2+2+1), zentriert sie sich auf Einzelspaltenbreite. Obergrenze
   759.98px, damit die max-width-Regel NICHT in die 3-Spalten-Ansicht durchschlägt
   und dort die Waisen-Karte auf eine halbe Spalte verengt. */
@media (min-width: 520px) and (max-width: 759.98px) {
  .lp-features__grid > .lp-feat:last-child:nth-child(2n - 1) {
    grid-column: 1 / -1; justify-self: center;
    width: 100%; max-width: calc((100% - var(--space-3)) / 2);
  }
}
@media (min-width: 760px) {
  .lp-features__grid { grid-template-columns: repeat(3, 1fr); }
  /* 7 Karten = 3+3+1: die einzelne letzte Karte in die Mittelspalte rücken –
     in voller Spaltenbreite (kein max-width), damit sie wie eine normale Karte
     aussieht statt als schmale „Waise" links unten zu hängen. */
  .lp-features__grid > .lp-feat:last-child:nth-child(3n - 2) { grid-column: 2 / 3; }
}
/* ── Feature-Karten als umdrehbare Memory-Karten ───────────────────────────
   Jede .lp-feat ist jetzt eine .flip-Karte (3D-Dreh-Mechanik + Klick/Tastatur
   aus styles.css, per JS in landing.html verdrahtet). Ruheseite (Teaser,
   farbig) = Icon + Titel + „umdrehen"-Hinweis; Rückseite (Detail, weiß) =
   Icon + Titel + Fließtext. Ausgangslage ist ein Mix – einige Karten starten
   via .is-flipped aufgedeckt -> Memory-Charakter, weniger Text auf einen Blick.
   Die Karte selbst trägt keine Fläche mehr; das übernehmen die beiden Faces.
   perspective/cursor/user-select kommen von der geerbten .flip-Regel. */
.lp-feat { transition: transform 0.16s ease; }
.lp-feat:hover { transform: translateY(-3px); }
@media (hover: none) { .lp-feat:hover { transform: none; } }
/* Einheitliche Kachelhöhe je Breakpoint – die absolut gestapelten Faces
   brauchen eine feste Höhe; hoch genug für den längsten Detailtext je Spalte. */
.lp-feat .flip__inner { min-height: 180px; }
@media (min-width: 520px) { .lp-feat .flip__inner { min-height: 240px; } }
@media (min-width: 760px) { .lp-feat .flip__inner { min-height: 258px; } }

/* Beide Faces: Feature-Layout (zentriert, kompaktes Padding) mit dem flachen
   Marken-Sticker-Schatten statt des großen Flashcard-Schattens. */
.lp-feat .face { gap: var(--space-2); padding: 22px 20px; box-shadow: var(--shadow); }
.lp-feat:hover .face { box-shadow: var(--shadow-lg); }

/* Ruheseite (farbig, im Modul-Akzentton --from) – überschreibt das helle
   .face--front-Standardbild. */
.lp-feat__teaser {
  background: linear-gradient(150deg,
    var(--from, var(--brand)),
    color-mix(in srgb, var(--from, var(--brand)) 80%, #000));
  color: var(--cream); border: none;
}
.lp-feat__teaser .lp-feat__title { color: var(--cream); }
.lp-feat__teaser .lp-feat__icon {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.30);
}
.lp-feat__flip {
  margin-top: 2px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.03em; opacity: 0.82;
}

/* Rückseite (weiße Detail-Karte) – überschreibt das farbige .face--back-Standardbild. */
.lp-feat__detail { background: var(--card); border: 1.5px solid var(--line); color: var(--muted); }

/* Farbige Icon-Kachel je Feature (Basis = Detail-Seite; der Teaser überschreibt
   Farbe & Fläche oben). Weicher Verlauf + feiner Innenring, leicht schräg. */
.lp-feat__icon {
  width: 52px; height: 52px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.55rem; line-height: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, var(--brand)) 28%, var(--card)),
    color-mix(in srgb, var(--accent, var(--brand)) 10%, var(--card)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent, var(--brand)) 32%, transparent);
  transform: rotate(-5deg);
  transition: transform 0.16s ease;
}
.lp-feat:hover .lp-feat__icon { transform: scale(1.06) rotate(-7deg); }
.lp-feat__title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; line-height: 1.16; color: var(--ink); margin: 0; }
.lp-feat__body { font-size: 0.9rem; line-height: 1.45; color: var(--muted); margin: 0; }

/* ── „Mehr als Sprache": emotionale Hooks. Editorialer als die Feature-Kacheln –
 *    kleiner spanischer Kicker in Modulfarbe, große Display-Headline (der Hook),
 *    erzählender Body. Macht greifbar, dass die App auch Geschichte, Kultur,
 *    Knigge, Gesundheit & Anschluss vermittelt – nicht nur Vokabeln. ── */
.lp-hooks { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 760px) {
  .lp-hooks { grid-template-columns: repeat(2, 1fr); }
}
.lp-hook {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lp-hook:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 45%, var(--line));
}
.lp-hook__ico {
  width: 52px; height: 52px; flex: none; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, var(--brand)) 28%, var(--card)),
    color-mix(in srgb, var(--accent, var(--brand)) 10%, var(--card)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent, var(--brand)) 32%, transparent);
  transform: rotate(-5deg);
  transition: transform 0.16s ease;
}
.lp-hook:hover .lp-hook__ico { transform: scale(1.06) rotate(-7deg); }
.lp-hook__body { min-width: 0; }
.lp-hook__kicker {
  display: inline-block; margin: 0 0 6px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--brand)) 72%, var(--ink));
}
.lp-hook__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.16; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 8px; text-wrap: balance;
}
.lp-hook__text { font-size: 1rem; line-height: 1.55; color: var(--muted); margin: 0; }

/* „Kostprobe": jeder Hook lässt sich aufklappen und zeigt einen echten Reise-
   Satz auf Spanisch + Mini-Kontext. Macht die Behauptung der Kachel greifbar –
   du liest sofort, was das Modul kann, statt es nur versprochen zu bekommen.
   Der Satz erbt die Akzentfarbe der Kachel (--accent inline). */
.lp-hook__peek {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
  background: transparent; border: 0; padding: 4px 2px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--brand)) 74%, var(--ink));
  transition: color 0.16s ease, gap 0.16s ease;
}
.lp-hook__peek:hover { gap: 10px; color: color-mix(in srgb, var(--accent, var(--brand)) 92%, var(--ink)); }
.lp-hook__peek-chev {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.22s ease;
}
.lp-hook__peek[aria-expanded="true"] .lp-hook__peek-chev { transform: translateY(1px) rotate(-135deg); }
.lp-hook__sample {
  margin-top: 10px; padding: 13px 15px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent, var(--brand)) 9%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent, var(--brand)) 26%, var(--line));
  border-left: 3px solid var(--accent, var(--brand));
  animation: lp-more-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-hook__es {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 5px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.08rem; line-height: 1.3; color: var(--ink);
}
.lp-hook__es-txt { min-width: 0; }
.lp-hook__say {
  flex: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 9px; font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, var(--brand)) 16%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent, var(--brand)) 34%, transparent);
  align-self: center; transition: transform 0.14s ease, background 0.14s ease;
}
.lp-hook__say:hover { transform: scale(1.08); background: color-mix(in srgb, var(--accent, var(--brand)) 26%, var(--card)); }
.lp-hook__say:active { transform: scale(0.94); }
.lp-hook__say.is-speaking { animation: lp-pulse 1.1s ease-out infinite; }
.lp-hook__gloss { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .lp-hook, .lp-hook__ico, .lp-hook__peek, .lp-hook__peek-chev, .lp-hook__say { transition: none; }
  .lp-hook__sample { animation: none; }
  .lp-hook__say.is-speaking { animation: none; }
}
@media (hover: none) { .lp-hook:hover { transform: none; } }

/* Modul-Breiten-Strip („und vieles mehr") – macht die Tiefe der App greifbar,
   ohne Marketing-Floskeln. Statt nackter Namens-Pills jetzt kleine Karten mit
   Mikro-Beschreibung. Die Namen sind durchgängig spanisch wie in der App
   (Supervivencia, Modo hostal, Regatear …), das Deutsche steht – wie bei den
   App-Kacheln – im Untertitel. So erklärt sich jedes Modul selbst und die Breite
   der App wird auf einen Blick lesbar. Karten auf --surface, damit sie sich vom
   --card-Grund der Features-Section abheben. */
.lp-more { margin-top: var(--space-6); }
.lp-more__intro {
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-ink); margin: 0 0 var(--space-4);
  text-align: center;
}
/* Horizontale Wisch-Leiste statt vollem 12er-Raster: die Kacheln liegen in
   einer scrollbaren Reihe (Scroll-Snap), es sind immer nur wenige gleichzeitig
   sichtbar; seitlich wischt man durch den Rest. Das nimmt der Sektion die
   „Kachel-Wand" und den vielen Weißraum, ohne die Interaktivität zu verstecken
   – jeder Chip bleibt direkt antippbar. Die zwölf Kacheln passen nie in eine
   Reihe, es wird also auf jeder Breite gescrollt. Die weiche Maske am rechten
   Rand deutet an, dass es seitlich weitergeht. */
.lp-more__chips {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* Rand-Luft oben/unten für Hover-Lift + Sticker-Schatten (sonst clippt
     overflow); rechts genug Trailing-Raum (> Maskenbreite), damit die letzte
     Kachel am Scroll-Ende NICHT unter der Fade-Maske verblasst. */
  padding: 6px 48px 8px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
}
.lp-more__chips::-webkit-scrollbar { display: none; }
/* Feste, kompakte Kachelbreite; überschreibt das width:100% der Basisregel.
   Bewusst auf allen Breiten eine einzelne Wisch-Reihe – nie wieder eine Wand
   aus 12 Kacheln auf einen Blick. */
.lp-more__chips .lp-morechip {
  flex: 0 0 auto; width: min(80vw, 258px);
  scroll-snap-align: start;
}
.lp-morechip {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px; text-align: left;
  width: 100%; appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--ink);
  border-radius: var(--r-md); padding: 13px 15px;
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
/* Feiner Akzent-Faden an der linken Kante – greift die Modul-Farbe (--accent
   inline) auf, gibt der Liste Rhythmus, ohne laut zu werden. */
.lp-morechip::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent, var(--brand)); opacity: .5;
  transition: opacity .16s ease, width .16s ease;
}
.lp-morechip:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 50%, var(--line));
  box-shadow:
    0 10px 24px -14px color-mix(in srgb, var(--accent, var(--brand)) 55%, transparent),
    var(--shadow);
}
.lp-morechip:hover::before { opacity: 1; width: 4px; }
/* Farbige Icon-Kachel je Modul (Marken-Palette via --accent inline) – holt die
   Wertigkeit der großen Feature-Kacheln in die Modul-Liste: weicher Verlauf,
   feiner Innenring, leichte Schräglage. Kleiner als die Feature-Icons (42px). */
.lp-morechip__ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, var(--brand)) 26%, var(--card)),
    color-mix(in srgb, var(--accent, var(--brand)) 9%, var(--card)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent, var(--brand)) 30%, transparent);
  transform: rotate(-4deg);
  transition: transform .16s ease;
}
.lp-morechip:hover .lp-morechip__ico { transform: scale(1.07) rotate(-6deg); }
.lp-morechip__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-morechip__name { font-weight: 800; font-size: 0.95rem; line-height: 1.2; }
.lp-morechip__desc { font-weight: 500; font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
/* Chevron rechts signalisiert „antippbar" und dreht beim Aufklappen nach unten. */
.lp-morechip__chev {
  margin-left: auto; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); opacity: .6;
  transition: transform .2s ease, border-color .2s ease, opacity .2s ease;
}
.lp-morechip[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 55%, var(--line));
  background: color-mix(in srgb, var(--accent, var(--brand)) 8%, var(--surface));
}
.lp-morechip[aria-expanded="true"]::before { opacity: 1; width: 4px; }
.lp-morechip[aria-expanded="true"] .lp-morechip__chev {
  transform: rotate(45deg); border-color: var(--accent, var(--brand)); opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lp-morechip, .lp-morechip__ico, .lp-morechip__chev { transition: none; }
}
@media (hover: none) { .lp-morechip:hover { transform: none; } }
/* Nicht-interaktive Info-Variante (B2B-Themengebiete): reine Übersicht ohne
   Link/Klick – neutralisiert Pointer-Cursor und Hover-„antippbar"-Look. */
.lp-morechip--static { cursor: default; }
.lp-morechip--static:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow); }
.lp-morechip--static:hover::before { opacity: .5; width: 3px; }
.lp-morechip--static:hover .lp-morechip__ico { transform: rotate(-4deg); }

/* Geteiltes Beispiel-Panel: klappt unter dem Raster auf, zeigt echte Reise-Sätze
   des gewählten Moduls. Die Sätze liegen in einem Scroll-Snap-Streifen -> nativ
   wischbar (Touch) plus Punkt-Navigation. Akzent erbt vom aktiven Chip (--accent
   wird per JS gesetzt). */
.lp-moredetail {
  margin-top: 14px; border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  overflow: hidden;
  animation: lp-more-in .28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lp-more-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lp-moredetail__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 11px 14px; border-bottom: 1.5px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, var(--brand)) 12%, var(--card)), var(--card));
}
.lp-moredetail__ico {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, var(--brand)) 28%, var(--card)),
    color-mix(in srgb, var(--accent, var(--brand)) 10%, var(--card)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent, var(--brand)) 32%, transparent);
  transform: rotate(-4deg);
}
.lp-moredetail__name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.lp-moredetail__hint { font-size: .78rem; color: var(--muted); margin-left: 2px; }
.lp-moredetail__close {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--muted);
  cursor: pointer; font-size: .85rem; line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
.lp-moredetail__close:hover { border-color: var(--brand); color: var(--ink); }
/* Wisch-Streifen: nativer Scroll-Snap (Touch + Trackpad), Scrollbar versteckt. */
.lp-moredetail__strip {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.lp-moredetail__strip::-webkit-scrollbar { display: none; }
.lp-moredetail__strip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.lp-mdslide {
  flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box;
  padding: 14px 18px 24px; min-width: 0; perspective: 1200px;
  /* Nur die aufgeklappte Karte wächst – die Nachbarn bleiben auf ihrer Höhe,
     statt sich (Flex-Default stretch) mit hochzuziehen. */
  align-self: flex-start;
}
/* Reise-Kontext hinter dem 🧭 – wie im Hero, nur kompakter. Akzentlinie oben
   in der Modulfarbe verankert das Panel sichtbar an seiner Karte. */
.lp-mdslide .lp-ctxpanel {
  margin-top: 14px;
  border-top: 3px solid color-mix(in srgb, var(--accent, var(--brand)) 70%, transparent);
}
.lp-mdslide .context-panel__title { color: color-mix(in srgb, var(--accent, var(--brand)) 60%, var(--ink)); }
/* Echte App-Karteikarten (.flip/.face/.cardbtn aus styles.css) – 1:1 wie der
   Lern-Screen, nur etwas kompakter als im Hero-Karussell. Antippen dreht um:
   deutsche Frage -> spanische Antwort + Aussprache + 🔊. */
.lp-moredetail .flip { width: 100%; }
.lp-moredetail .flip__inner { min-height: 222px; }
.lp-moredetail .face { padding: 42px 22px 24px; }
.lp-moredetail .face__word { font-size: 1.5rem; }
.lp-moredetail .face--back .face__word { font-size: 1.65rem; }
.lp-moredetail .face__tip { margin-top: 10px; font-size: 0.96rem; }
.lp-moredetail .cardbtn { width: 38px; height: 38px; font-size: 1rem; }
.lp-moredetail__dots { display: flex; gap: 4px; justify-content: center; padding: 0 0 13px; }
.lp-moredetail .lp-dot.is-active::before { background: var(--accent, var(--brand)); }
@media (prefers-reduced-motion: reduce) {
  .lp-moredetail { animation: none; }
  .lp-moredetail__strip { scroll-behavior: auto; }
  .lp-moredetail .flip__inner { transition: none; }
}

/* ─────────────────────────── So funktioniert's ─────────────────────────── */
.lp-how__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px);
  align-items: center; margin-top: var(--space-5);
}
@media (min-width: 880px) { .lp-how__grid { grid-template-columns: 5fr 6fr; align-items: start; } }

/* Drei Schritte als Mini-Timeline: durchgehende Linie hinter den Nummern (nur in
   den Lücken sichtbar, da die Karten deckend davor liegen) – verbindet die
   Schritte zu einem Weg statt drei losen Kacheln. Linie in den drei Schrittfarben. */
.lp-steps { display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.lp-steps::before {
  content: ""; position: absolute; z-index: 0;
  left: 48px; /* = padding-left (24px) + halbe Nummern-Kachel (24px) */
  top: 48px; bottom: 48px; width: 2px; transform: translateX(-50%);
  background: linear-gradient(#C2502E, #3F7355, #E9A23B);
  opacity: 0.4; border-radius: 2px;
}
@media (min-width: 880px) { .lp-steps::before { bottom: 64px; } }
.lp-step {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding: var(--space-4); border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.25s ease;
}
/* Hover (Desktop) und der im Blick liegende Schritt (is-active, per Scroll) heben
   sich in ihrer Farbe hervor -> die Liste „lebt" beim Durchscrollen. */
.lp-step:hover, .lp-step.is-active {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 48%, var(--line));
  background: color-mix(in srgb, var(--accent, var(--brand)) 6%, var(--card));
}
/* Nummer als farbige, leicht gekippte Kachel (wie die Feature-Icons) mit Ring +
   farbigem Schlagschatten. Sitzt deckend auf der Timeline-Linie = „Knoten". */
.lp-step__num {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--cream);
  /* Bewusst zum Dunklen gemischt (auch der helle Amber-Schritt), damit die creme-
     farbene Ziffer auf allen drei Schrittfarben sicher lesbar bleibt (WCAG). */
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent, var(--brand)) 84%, #241510),
    color-mix(in srgb, var(--accent, var(--brand)) 58%, #241510));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent, var(--brand)) 38%, transparent),
              inset 0 0 0 1.5px rgba(251, 243, 228, 0.28);
  transform: rotate(-5deg);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-step:hover .lp-step__num,
.lp-step.is-active .lp-step__num { transform: rotate(0deg) scale(1.08); }
/* Kleiner spanischer-Eyebrow-Stil-Kicker je Schritt in Schrittfarbe. */
.lp-step__kicker {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--brand)) 72%, var(--ink));
  margin-bottom: 2px;
}
.lp-step__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--ink); margin: 0 0 4px; }
.lp-step__body { font-size: 0.96rem; line-height: 1.5; color: var(--muted); margin: 0; }
/* Schlüsselwörter im Fließtext farbig hervorgehoben – führt das Auge auf das
   Wesentliche (72 Bereiche, die Modi, die Bewertung). */
.lp-step__hl { font-weight: 800; color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent, var(--brand)) 30%, transparent) 0); }
/* Mobiler Inline-Screenshot je Schritt (Baseline, ohne JS sichtbar).
   Der KOMPLETTE App-Screen in korrekter Proportion (kein Crop) – als sauberer
   „Handy-Screen" zentriert und in der Breite begrenzt, damit er nicht riesig wird. */
/* Mobil: der Per-Step-Screenshot steckt in einem echten Smartphone-Rahmen
   (abgerundeter Bezel + Kamera-Pille im oberen Rand), damit die Landing-Pages
   auch auf dem Handy ein Gerät zeigen – nicht nur einen nackten Screenshot.
   Ab 880px übernimmt das sticky .lp-phone rechts, deshalb hier ausgeblendet. */
.lp-step__shot {
  grid-column: 1 / -1; margin: var(--space-3) auto 0;
  width: max-content; max-width: 100%; position: relative;
  background: var(--page); border-radius: 34px;
  padding: 22px 12px 14px; box-shadow: var(--shadow-hero);
}
.lp-step__shot::before { /* Kamera-Pille im oberen Rahmen */
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 8px; border-radius: 999px; background: var(--line);
}
.lp-step__shot img {
  display: block; width: 210px; max-width: 62vw; height: auto;
  border-radius: 22px; border: 0; box-shadow: none;
}
@media (min-width: 880px) { .lp-step__shot { display: none; } }

/* Hero-Phone: echter App-Screenshot im Phone-Rahmen, leicht gedreht HINTER der
   Beispielkarte (Collage-Tiefe). Erst ab breiten Viewports – auf Mobil bliebe
   sonst kein Platz und die Karte ist der Star. */
.lp-herophone { display: none; }
@media (min-width: 1040px) {
  .lp-cardcol { position: relative; }
  .lp-herophone {
    display: block; position: absolute; top: 50%; right: -30px; z-index: 0;
    width: 224px; transform: translateY(-60%) rotate(5deg);
    background: var(--page); border-radius: 34px; padding: 10px;
    box-shadow: var(--shadow-hero);
  }
  /* Karussell (B2C: + Punkte) und die Szenario-Pills der Partner-Seiten müssen
     über dem Phone-Mockup (position:absolute, z-index:0) liegen – sonst verdeckt
     das Mockup rechts die Karte bzw. die Pills (Paint + Klick). */
  .lp-carousel, .lp-dots, .lp-herocard__row { position: relative; z-index: 1; }
  .lp-carousel { margin-inline: 0 auto; }
}

/* CSS-Phone-Frame mit echtem Screenshot (Desktop). */
.lp-phone { display: none; }
@media (min-width: 880px) {
  .lp-phone {
    display: block; position: sticky; top: 96px;
    width: 300px; margin-inline: auto;
    background: var(--page); border-radius: 40px; padding: 12px;
    box-shadow: var(--shadow-hero);
  }
}
.lp-phone__screen {
  position: relative; border-radius: 28px; overflow: hidden;
  background: var(--surface); aspect-ratio: 390 / 844; /* exakt wie die Screenshots -> kein Crop */
}
.lp-phone__stripe { height: 6px; background: var(--rainbow); }
.lp-phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 92px; height: 18px; border-radius: 999px; background: var(--page);
}
.lp-phone__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity 0.3s ease; }

/* ─────────────────────────── Install + FAQ ─────────────────────────── */
.lp-install__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 720px) { .lp-install__grid { grid-template-columns: 1fr 1fr; } }
.lp-installcard {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
  border: 1.5px dashed color-mix(in srgb, var(--brand) 38%, var(--line));
}
.lp-installcard__plat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.lp-installcard ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.lp-installcard__note { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.lp-install__cta { margin-top: var(--space-4); display: flex; justify-content: center; }

.lp-faq { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); max-width: 760px; margin-inline: auto; }
.lp-faq details {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow);
}
.lp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 16px 18px; cursor: pointer;
  font-weight: 800; font-size: 1.02rem; color: var(--ink); list-style: none;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "›"; font-size: 1.5rem; font-weight: 700; color: var(--brand);
  transition: transform 0.2s ease; transform: rotate(90deg);
}
.lp-faq details[open] summary::after { transform: rotate(-90deg); }
.lp-faq__body { padding: 0 18px 16px; color: var(--muted); font-size: 0.97rem; line-height: 1.55; }

/* ─────────────────────────── Abschluss-CTA-Band ───────────────────────────
 * Warmer Terrakotta-Abschluss zwischen der hellen Install/FAQ-Section und dem
 * dunklen Footer: hell → warm → dunkel ergibt einen ruhigen Rhythmus und einen
 * letzten klaren Conversion-Push. */
.lp-final {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--warn));
  color: var(--cream); text-align: center;
}
.lp-final .lp-wrap { position: relative; z-index: 1; }
/* Weiche, langsam driftende Lichter über dem Terrakotta-Grund – der Abschluss
   „lebt" leicht, ohne vom CTA abzulenken (reduced-motion friert das ein). */
.lp-final__aura {
  position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 45% at 18% 20%, rgba(255, 240, 214, 0.28), transparent 70%),
    radial-gradient(34% 40% at 84% 30%, rgba(255, 214, 170, 0.22), transparent 70%),
    radial-gradient(46% 50% at 65% 92%, rgba(180, 60, 40, 0.30), transparent 72%);
  animation: lp-final-drift 26s ease-in-out infinite alternate;
}
@keyframes lp-final-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2.5%, 0) scale(1.12); }
}
.lp-final__eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(251, 243, 228, 0.82);
  margin: 0 0 var(--space-2);
}
.lp-final .lp-h2 { color: var(--cream); margin-inline: auto; max-width: 24ch; }
/* Rotierender „Bereit für …" – wechselt echte Reise-Momente durch. */
.lp-final__ticker {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem); line-height: 1.25;
  color: var(--cream); margin: 0 auto var(--space-3);
  display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4em;
}
.lp-final__ticker-lead { color: rgba(251, 243, 228, 0.72); }
.lp-final__ticker-rot {
  display: inline-block; min-height: 1.3em;
  padding: 0 0 3px; border-bottom: 2px solid rgba(251, 243, 228, 0.45);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.lp-final__ticker-rot.is-swapping { opacity: 0; transform: translateY(6px); }
.lp-final__sub { font-size: var(--fs-lead); color: rgba(251, 243, 228, 0.92); margin: 0 auto var(--space-4); max-width: 46ch; }
/* Zahlen-Cluster: zählt beim Einscrollen hoch (data-count). Vier ruhige Belege
   direkt über dem CTA statt einer nackten Fläche. */
.lp-final__stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 5vw, 44px); margin: 0 auto var(--space-5); max-width: 40rem;
}
.lp-final__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lp-final__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1; color: var(--cream);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.lp-final__lbl {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(251, 243, 228, 0.78);
}
.lp-cta--onbrand {
  /* Weiße Fläche bleibt in beiden Themes -> feste dunkle Tinte (#A23E20 = 6.47:1
     auf Weiß, wie das App-Update-Banner). */
  background: #fff; color: #A23E20; border-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .lp-final__aura { animation: none; }
  .lp-final__ticker-rot { transition: none; }
}

/* ─────────────────────────── Footer ─────────────────────────── */
.lp-footer {
  background: var(--page); color: var(--cream);
  padding-block: var(--space-6) var(--space-5);
}
.lp-footer__top { height: 3px; width: 100%; background: var(--rainbow); opacity: 0.55; margin-bottom: var(--space-6); }
.lp-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 720px) { .lp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .lp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.lp-footer__blurb { font-size: 0.95rem; line-height: 1.55; color: rgba(251, 243, 228, 0.75); max-width: 40ch; margin: var(--space-2) 0 0; }
.lp-footer h4 { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; margin: 0 0 var(--space-2); color: var(--cream); }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-footer a { color: rgba(251, 243, 228, 0.78); text-decoration: none; font-size: 0.92rem; }
.lp-footer a:hover { color: var(--cream); }
.lp-footer__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.lp-footer__chip { font-size: 0.74rem; font-weight: 700; color: rgba(251, 243, 228, 0.7); background: rgba(251, 243, 228, 0.08); border-radius: 999px; padding: 4px 10px; }
.lp-footer__credit {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid rgba(251, 243, 228, 0.12);
  font-size: 0.85rem; font-style: italic; color: rgba(251, 243, 228, 0.65);
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between;
}
.lp-footer__credit span { font-style: normal; }
.lp-footer__heart { color: var(--brand); font-style: normal; }

/* ─────────────────────────── Scroll-Reveal (progressive enhancement) ───────────────────────────
 * Nur wenn JS läuft (html.js) wird der Start-Zustand versteckt; ohne JS ist alles
 * sofort sichtbar. .is-in deckt auf. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ═══════════════════════════ B2B-Landing-Pages ═══════════════════════════
 * Zusätzliche Komponenten NUR für die zielgruppenspezifischen Seiten
 * (landing-schule / landing-hostel / landing-reiseanbieter). Token-basiert,
 * Hell/Dunkel ohne Sonderfälle. Pro Seite setzt der Header --accent (Edition-
 * Akzentfarbe), worauf Hero-Akzente, Preis-Highlight & Demo-CTA reagieren. */

/* Zielgruppen-Umschalter: Chip-Reihe direkt unter dem Header. Verlinkt die je
   anderen Seiten + die B2C-Landing. Die aktive Seite trägt aria-current="page". */
.lp-audnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.lp-audnav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-2); }
.lp-audnav__label { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: var(--space-1); }
.lp-audchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 700;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.lp-audchip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent, var(--brand)) 45%, var(--line)); }
.lp-audchip[aria-current="page"] {
  background: color-mix(in srgb, var(--accent, var(--brand)) 14%, var(--card));
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 55%, var(--line));
  color: var(--brand-ink);
}

/* Demo-CTA in Akzentfarbe der Edition (statt Marken-Terrakotta). */
.lp-cta--accent { background: var(--accent, var(--brand)); }

/* Preis-/Modell-Block: 1–3 Karten nebeneinander, eine als Highlight markierbar. */
.lp-pricing { display: grid; gap: var(--space-3); margin-top: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-pricecard {
  padding: var(--space-4); border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.lp-pricecard--feat { border-color: color-mix(in srgb, var(--accent, var(--brand)) 55%, var(--line)); box-shadow: var(--shadow-lg); }
.lp-pricecard__tag { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); }
.lp-pricecard__price { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--ink); line-height: 1.05; }
.lp-pricecard__price small { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.lp-pricecard__desc { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.lp-pricecard ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-pricecard li { font-size: 0.95rem; color: var(--ink-soft); padding-left: 1.5rem; position: relative; }
.lp-pricecard li::before { content: "✓"; position: absolute; left: 0; color: var(--accent, var(--brand)); font-weight: 800; }

/* Zweistufiger Kontakt-/CTA-Block: Live-Demo (primär) + E-Mail (sekundär). */
.lp-contact { text-align: center; }
.lp-contact .lp-h2 { margin-inline: auto; max-width: 22ch; }
.lp-contact__sub { font-size: var(--fs-lead); color: var(--muted); margin: var(--space-2) auto var(--space-5); max-width: 48ch; }
.lp-contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.lp-contact__note { margin: var(--space-4) auto 0; font-size: 0.85rem; color: var(--muted); max-width: 44ch; }

/* Risikofrei-/Trust-Streifen: faktische Zusicherungen (kein erfundenes Testimonial). */
.lp-trustbar { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lp-trustbar li { flex: 1 1 220px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-3); font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }
.lp-quote { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent, var(--brand)); color: var(--ink); font-style: italic; }
.lp-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 0.85rem; color: var(--muted); }

/* Hero-Visitenkarte: Marke + Akzent, Pills als klickbare Szenario-Tabs (JS optional). */
.lp-herocard {
  padding: var(--space-4); border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow-hero);
  border-top: 6px solid var(--accent, var(--brand));
  display: flex; flex-direction: column; gap: var(--space-3);
}
.lp-herocard__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.lp-herocard__phrase { font-size: 1.1rem; color: var(--ink); }
.lp-herocard__phrase b { color: var(--brand-ink); }
.lp-herocard__phrase span { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.lp-herocard__row { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-herocard__pill { font-family: inherit; font-size: 0.78rem; font-weight: 700; line-height: 1.2; color: var(--brand-ink); background: color-mix(in srgb, var(--accent, var(--brand)) 12%, var(--card)); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.lp-herocard__pill:hover { border-color: color-mix(in srgb, var(--accent, var(--brand)) 50%, var(--line)); }
.lp-herocard__pill[aria-pressed="true"] { background: var(--accent, var(--brand)); border-color: var(--accent, var(--brand)); color: #fff; }

/* ─────────────────────────── Reduced Motion ───────────────────────────
 * Harte Garantie: keine Bewegung. Flip & Tilt instant, Chips/Shine/Reveal aus. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Karussell-Karten: Tilt aus, Umdrehen & Crossfade ohne Animation (instant). */
  .lp-cardtilt { transform: none !important; transition: none !important; }
  .lp-carousel .flip__inner { transition: none !important; }
  .lp-slide { transition: none !important; }
  .lp-cta::after { display: none !important; }
  /* Hero: Mesh-Drift, Eyebrow-Puls & Stat-Karten-Hub ohne Bewegung. */
  .lp-hero__mesh { animation: none !important; }
  .lp-hero .lp-eyebrow::before { animation: none !important; }
  .lp-trust__item { transition: none !important; }
  .lp-trust__item:hover { transform: none !important; }
  .lp-trust__item:hover .lp-trust__ico { transform: rotate(-4deg) !important; }
  /* Schritte: Hover-/Aktiv-Hub & Nummern-Drehung ohne Bewegung. */
  .lp-step, .lp-step__num { transition: none !important; }
  .lp-step:hover, .lp-step.is-active { transform: none !important; }
  .lp-step:hover .lp-step__num, .lp-step.is-active .lp-step__num { transform: rotate(-5deg) !important; }
  .lp-audchip { transition: none !important; }
  .lp-herocard__pill { transition: none !important; }
}