/*
  Die Landing-Fassung vom 28.09.2026 — gemeinsame Regeln fuer `/` (Eigner)
  und `/flotten` (Fleet), alle vier Sprachen.

  Eine Datei fuer beide Seiten und alle Sprachfassungen (Briefing Abschnitt
  1): Die Sprachordner laden sie mit, statt eine Kopie zu tragen. Die Farben
  stehen als Tokens in `tokens.css` (`--l-…`), `data-aud="b2b"` an der Wurzel
  haengt sie fuer Fleet um.

  Masse, Abstaende, Schriftgroessen, Zeilenhoehen, Radien, Verlaeufe,
  Schatten und Zeiten stammen aus `design/referenz/landing-28-09/`. 1440 ist
  die Referenzbreite; darunter abgeleitet nach Briefing Abschnitt 10.
  Feste Hoehen ab 1024 — nichts springt beim Umschalten.
*/

/* ── Grund ── */
.lg-body { margin: 0; background: var(--l-grund); color: var(--l-text-1); font-family: Archivo, 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; line-height: normal; overflow-x: hidden; }
.lg-body * { box-sizing: border-box; }
.lg-body a { color: var(--l-text-1); text-decoration: none; }
.lg-body a:hover { color: var(--l-akzent-hell); }
.lg-body h1, .lg-body h2, .lg-body p { margin: 0; font-family: inherit; }
.lg-body :focus-visible { outline: 2px solid var(--l-akzent); outline-offset: 4px; }
.lg-seite { --rand: 96px; --versatz: 340px; display: flex; flex-direction: column; min-width: 0; overflow-x: clip; }
.lg-innen { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); }
.lg-body section { position: relative; flex-shrink: 0; }

/* Kursiv steht immer im Verlauf der Zielgruppe (Freigabe 28.09.2026, DESIGN.md §3.7). */
.lg-em { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; padding-right: 0.08em; background: var(--l-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* SVG-Verlaufsstopps aus den Tokens: Eigner Aurora → Tide → Violett, Fleet Gelb → Pink → Lila. */
.lg-stop-1 { stop-color: #2be5a8; }
.lg-stop-2 { stop-color: #3a9dff; }
.lg-stop-3 { stop-color: #8b6cff; }
[data-aud="b2b"] .lg-stop-1 { stop-color: #ffc24b; }
[data-aud="b2b"] .lg-stop-2 { stop-color: #e8459b; }
[data-aud="b2b"] .lg-stop-3 { stop-color: #a855f7; }
.lg-stop-blau { stop-color: var(--l-daten-blau); }
.lg-stop-blau-tief { stop-color: var(--l-daten-blau-tief); }
.lg-stop-flaeche-oben { stop-color: var(--l-daten-2); stop-opacity: 0.35; }
.lg-stop-flaeche-unten { stop-color: var(--l-daten-2); stop-opacity: 0; }

/* ── Bewegung (Briefing Abschnitt 11): nur transform, opacity, stroke-dashoffset ── */
@keyframes lgRoute { 0% { stroke-dashoffset: 247; } 85%, 100% { stroke-dashoffset: 0; } }
@keyframes lgMove { 0% { offset-distance: 0%; } 85%, 100% { offset-distance: 100%; } }
@keyframes lgGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lgGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }
@keyframes lgScan { 0% { transform: translateY(0); } 50% { transform: translateY(139px); } 100% { transform: translateY(0); } }
.lg-in { animation: lgIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lg-fade { animation: lgFade 0.6s both; }
.lg-wachsen { display: block; height: 100%; transform-origin: 0 50%; animation: lgGrowX 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lg-wachsen-rechts { transform-origin: 100% 50%; }
.lg-wachsen-y { transform-box: fill-box; transform-origin: 50% 100%; animation: lgGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lg-zeichnen { animation: lgDraw 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
/* Endlosschleifen nur im Geraet — ausserhalb des Bildschirms angehalten (IntersectionObserver in landing-28-09.js). */
.lg-pausiert .lg-route, .lg-pausiert .lg-boot, .lg-pausiert .lg-scan { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lg-body *, .lg-body *::before, .lg-body *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .lg-route { stroke-dashoffset: 0 !important; }
  .lg-boot { offset-distance: 100% !important; }
  .lg-zeichnen { stroke-dashoffset: 0 !important; }
}

/* ── Knoepfe ── */
.lg-knopf-verlauf { height: 44px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--l-verlauf); font-size: 14px; font-weight: 600; white-space: nowrap; }
.lg-body a.lg-knopf-verlauf, .lg-body a.lg-knopf-verlauf:hover { color: var(--l-auf-verlauf); }
.lg-knopf-hell { height: 58px; padding: 0 30px; display: inline-flex; align-items: center; background: var(--l-text-1); border-radius: 999px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.lg-body a.lg-knopf-hell, .lg-body a.lg-knopf-hell:hover { color: var(--l-grund); }
.lg-knopf-rand { height: 58px; padding: 0 30px; display: inline-flex; align-items: center; border: 1px solid rgba(var(--l-tinte-rgb), 0.28); border-radius: 999px; font-size: 16px; white-space: nowrap; }
.lg-knopf-akzent { height: 56px; flex-shrink: 0; padding: 0 28px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(var(--l-akzent-rgb), 0.55); font-size: 16px; white-space: nowrap; }
[data-aud="b2b"] .lg-knopf-akzent { border-color: rgba(var(--l-akzent-rgb), 0.6); }
.lg-rund { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 99px; border: 1px solid rgba(var(--l-tinte-rgb), 0.24); color: var(--l-text-1); }
.lg-rund:focus-visible { outline: 2px solid var(--l-akzent); outline-offset: 4px; }
.lg-rund-56 { width: 56px; height: 56px; }
.lg-rund-52 { width: 52px; height: 52px; }
.lg-rund-52 svg { width: 18px; height: 18px; }

/* ── Navigation (88) — Marke links (Freigabe 28.09.2026), Links und Knopf rechts ── */
.lg-nav { height: 88px; flex-shrink: 0; background: var(--l-grund); border-bottom: 1px solid rgba(var(--l-tinte-rgb), 0.08); }
.lg-nav-innen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.lg-marke { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lg-zeichen { display: block; flex-shrink: 0; }
.lg-zeichen-kreis { fill: var(--l-grund); }
.lg-wortmarke { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; }
.lg-marke-zusatz { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.24em; color: var(--l-akzent); white-space: nowrap; }
.lg-nav-rechts { display: flex; align-items: center; gap: 40px; min-width: 0; }
.lg-nav-links { display: flex; align-items: center; gap: 40px; font-size: 14px; }
.lg-body .lg-nav-links a { color: var(--l-text-2); white-space: nowrap; }
.lg-body .lg-nav-links a:hover { color: var(--l-text-1); }

/* ── Hero (820) ── */
.lg-hero { height: 820px; overflow: hidden; padding-top: 84px; background: radial-gradient(900px 620px at 82% 30%, rgba(var(--l-glanz-1-rgb), 0.20), transparent 62%), radial-gradient(760px 560px at 6% 96%, rgba(var(--l-glanz-2-rgb), 0.18), transparent 60%), radial-gradient(600px 420px at 55% 110%, rgba(var(--l-glanz-3-rgb), 0.16), transparent 60%), var(--l-grund); }
[data-aud="b2b"] .lg-hero { background: radial-gradient(900px 620px at 84% 6%, rgba(var(--l-glanz-2-rgb), 0.24), transparent 62%), radial-gradient(760px 540px at 4% 100%, rgba(var(--l-glanz-3-rgb), 0.22), transparent 60%), radial-gradient(620px 420px at 60% 112%, rgba(var(--l-glanz-1-rgb), 0.16), transparent 60%), var(--l-grund); }
.lg-hero-raster { display: grid; grid-template-columns: minmax(0, 1fr) 279px; gap: 96px; align-items: start; }
[data-aud="b2b"] .lg-hero-raster { grid-template-columns: 6fr 6fr; gap: 56px; margin-top: 36px; }
.lg-hero-spalte { display: flex; flex-direction: column; min-width: 0; }
[data-aud="b2b"] .lg-hero-spalte { gap: 32px; }
.lg-hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.24em; color: var(--l-text-2); }
.lg-body .lg-h1 { margin: 22px 0 0; font-size: var(--h1, 92px); line-height: 1.04; font-weight: 400; letter-spacing: -0.045em; white-space: nowrap; }
.lg-hero-block { display: flex; flex-direction: column; gap: 32px; margin-top: 36px; }
.lg-lead { max-width: 640px; font-size: 21px; line-height: 1.55; color: var(--l-text-hell); }
[data-aud="b2b"] .lg-lead { max-width: none; }
.lg-hero-knoepfe { display: flex; gap: 16px; }
.lg-hero-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lg-hero-kachel { height: 116px; padding: 20px 22px; border-radius: 18px; background: rgba(var(--l-karte-rgb), 0.72); border: 1px solid var(--l-linie); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.lg-hero-kachel-zahl { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.lg-hero-kachel-text { font-size: 13px; color: var(--l-text-2); }
.lg-hero-geraet { width: 279px; height: 576px; margin-top: 36px; }
.lg-hero-geraet-skala { transform: scale(0.9); transform-origin: 0 0; }

/* ── Das iPhone (310 × 640) ── */
.lg-telefon { position: relative; width: 310px; height: 640px; flex-shrink: 0; }
.lg-taste { position: absolute; width: 3px; background: var(--l-titan-taste); }
.lg-taste-1 { left: -3px; top: 118px; height: 30px; border-radius: 2px 0 0 2px; }
.lg-taste-2 { left: -3px; top: 170px; height: 56px; border-radius: 2px 0 0 2px; }
.lg-taste-3 { left: -3px; top: 236px; height: 56px; border-radius: 2px 0 0 2px; }
.lg-taste-r { right: -3px; top: 196px; height: 88px; border-radius: 0 2px 2px 0; }
.lg-telefon-rahmen { width: 310px; height: 640px; border-radius: 56px; padding: 3px; background: var(--l-titan); box-shadow: 0 50px 100px rgba(var(--l-schatten-rgb), 0.45), 0 0 110px -30px rgba(var(--l-glanz-1-rgb), 0.55); }
.lg-telefon-demo .lg-telefon-rahmen { box-shadow: 0 50px 100px rgba(var(--l-schatten-rgb), 0.45), 0 0 110px -30px rgba(var(--l-glanz-2-rgb), 0.6); }
.lg-telefon-einfassung { width: 100%; height: 100%; border-radius: 53px; padding: 8px; background: var(--l-einfassung); }
.lg-telefon-schirm { width: 288px; height: 618px; border-radius: 45px; overflow: hidden; position: relative; background: var(--l-geraet); display: flex; flex-direction: column; }
.lg-insel { position: absolute; left: 96px; top: 11px; width: 96px; height: 28px; border-radius: 20px; background: var(--l-insel); z-index: 3; }
.lg-statusleiste { height: 50px; flex-shrink: 0; padding: 6px 30px 0; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.lg-status { display: flex; gap: 6px; align-items: center; }
.lg-status rect { fill: var(--l-text-1); }
.lg-status .lg-batterie-rand { fill: none; stroke: var(--l-text-1); stroke-opacity: 0.5; }
.lg-status .lg-batterie-pol { fill-opacity: 0.5; }
.lg-schirm-inhalt { flex-grow: 1; padding: 8px 16px 30px; display: flex; flex-direction: column; gap: 12px; }
.lg-home { position: absolute; left: 89px; bottom: 8px; width: 110px; height: 4px; border-radius: 4px; background: rgba(var(--l-tinte-rgb), 0.55); }
.lg-phone-kopf { display: flex; justify-content: space-between; align-items: center; }
.lg-phone-titel { font-size: 20px; font-weight: 600; }
.lg-phone-etikett { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--l-text-3); }
.lg-aufzeichnung { height: 24px; padding: 0 10px; border-radius: 99px; background: rgba(var(--l-glanz-1-rgb), 0.16); display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--l-akzent-hell); }
.lg-aufzeichnung-punkt { width: 6px; height: 6px; border-radius: 9px; background: var(--l-daten-1); }
.lg-phone-karte { height: 240px; flex-shrink: 0; border-radius: 20px; position: relative; overflow: hidden; background: radial-gradient(220px 160px at 70% 30%, rgba(var(--l-glanz-2-rgb), 0.30), transparent 70%), #10263a; }
.lg-phone-karte svg { position: absolute; left: 0; top: 0; }
.lg-kueste { fill: none; stroke: var(--l-text-1); stroke-opacity: 0.08; }
.lg-route-spur { fill: none; stroke: var(--l-text-1); stroke-opacity: 0.14; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 6; }
.lg-route { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 247; stroke-dashoffset: 247; animation: lgRoute 9s linear infinite; }
.lg-route-start { fill: var(--l-daten-1); }
.lg-karte-ort { fill: var(--l-text-2); font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.lg-boot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 99px; background: var(--l-text-1); box-shadow: 0 0 0 5px rgba(var(--l-glanz-1-rgb), 0.28); offset-path: path('M30 220 L60 194 L86 184 L110 162 L128 136 L150 118 L176 108 L196 86 L212 62'); offset-rotate: 0deg; animation: lgMove 9s linear infinite; }
.lg-phone-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lg-phone-kachel { padding: 12px 14px; border-radius: 16px; background: var(--l-karte); }
.lg-phone-kachel-wert { font-size: 22px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-phone-kachel-wert.lg-kachel-21 { font-size: 21px; }
.lg-phone-kachel-text { font-size: 11px; color: var(--l-text-3); }
.lg-phone-knopf { margin-top: auto; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--l-verlauf); color: var(--l-auf-verlauf); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.lg-sucher { height: 210px; flex-shrink: 0; border-radius: 20px; position: relative; overflow: hidden; background: radial-gradient(200px 150px at 50% 50%, rgba(var(--l-glanz-1-rgb), 0.16), transparent 70%), #0a141d; display: flex; align-items: center; justify-content: center; }
.lg-ecke { position: absolute; width: 22px; height: 22px; border: 0 solid var(--l-text-1); }
.lg-ecke-lo { left: 18px; top: 18px; border-left-width: 2px; border-top-width: 2px; border-radius: 6px 0 0 0; }
.lg-ecke-ro { right: 18px; top: 18px; border-right-width: 2px; border-top-width: 2px; border-radius: 0 6px 0 0; }
.lg-ecke-lu { left: 18px; bottom: 18px; border-left-width: 2px; border-bottom-width: 2px; border-radius: 0 0 0 6px; }
.lg-ecke-ru { right: 18px; bottom: 18px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 6px 0; }
.lg-zaehlwerk { width: 164px; height: 70px; border-radius: 12px; border: 2px solid var(--l-akzent); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 32px; letter-spacing: 0.08em; background: rgba(var(--l-grund-rgb), 0.8); }
.lg-scan { position: absolute; left: 8%; right: 8%; top: 14%; height: 2px; background: linear-gradient(90deg, transparent, var(--l-akzent), transparent); animation: lgScan 2.6s ease-in-out infinite; }
.lg-erkannt { position: absolute; left: 50%; bottom: 44px; margin-left: -86px; width: 172px; height: 26px; border-radius: 99px; background: rgba(var(--l-glanz-1-rgb), 0.2); color: var(--l-akzent-hell); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.lg-phone-block { padding: 12px 14px; border-radius: 16px; background: var(--l-karte); display: flex; flex-direction: column; gap: 10px; }
.lg-frage { font-size: 13px; color: var(--l-text-hell); }
.lg-frage-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-frage-knoepfe span { height: 34px; border-radius: 10px; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.lg-frage-an { background: linear-gradient(120deg, var(--l-daten-1), var(--l-daten-2)); color: var(--l-auf-verlauf); font-weight: 600; }
.lg-frage-aus { border: 1px solid rgba(var(--l-tinte-rgb), 0.2); }
.lg-phone-zeile { flex-direction: row; justify-content: space-between; font-size: 14px; }
.lg-phone-zeile span { color: var(--l-text-2); }
.lg-phone-zeile b { font-weight: 600; }
.lg-eintrag { padding: 12px; border-radius: 16px; background: var(--l-karte); display: flex; gap: 12px; align-items: center; }
.lg-eintrag-bild { width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px; }
.lg-eintrag-bild-0 { background: linear-gradient(140deg, var(--l-daten-2), var(--l-daten-3)); }
.lg-eintrag-bild-1 { background: linear-gradient(140deg, var(--l-daten-1), var(--l-daten-2)); }
.lg-eintrag-bild-2 { background: linear-gradient(140deg, var(--l-daten-3), var(--l-daten-1)); }
.lg-eintrag-text { display: flex; flex-direction: column; gap: 4px; }
.lg-eintrag-titel { font-size: 14px; font-weight: 600; }
.lg-eintrag-zeile { font-size: 12px; color: var(--l-text-2); }
.lg-eintrag-marke { font-size: 11px; }
.lg-eintrag-akzent { color: var(--l-akzent); }
.lg-eintrag-hinweis { color: var(--l-hinweis); }
.lg-notiz { padding: 12px 14px; border-radius: 16px; background: rgba(var(--l-glanz-3-rgb), 0.16); font-family: Fraunces, Georgia, serif; font-style: italic; font-size: 15px; line-height: 1.45; }
.lg-rechnung { padding: 16px; border-radius: 18px; background: var(--l-karte); display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.lg-rechnung-zeile { display: flex; justify-content: space-between; }
.lg-rechnung-zeile > span:first-child { color: var(--l-text-2); }
.lg-rechnung-summe { align-items: baseline; }
.lg-rechnung-summe b { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.lg-rechnung-linie { height: 1px; background: rgba(var(--l-tinte-rgb), 0.12); }
.lg-anteil { height: 10px; flex-shrink: 0; border-radius: 9px; background: var(--l-grund); overflow: hidden; display: flex; }
.lg-anteil span { display: block; height: 100%; }
.lg-anteil-lg { background: var(--l-daten-2); }
.lg-anteil-d { background: var(--l-verlauf-kurz); }
.lg-anteil-text { display: flex; justify-content: space-between; font-size: 11px; color: var(--l-text-3); }

/* ── Abschnitte ── */
.lg-gehoben { background: var(--l-gehoben); }
.lg-strich::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--l-verlauf-90); }
.lg-strich-rueck::before { background: var(--l-verlauf-rueck); }
.lg-kopf { display: flex; flex-direction: column; gap: 14px; }
.lg-kopf-16 { gap: 16px; }
.lg-body .lg-h2 { font-size: 56px; line-height: 1.05; font-weight: 400; letter-spacing: -0.04em; }
.lg-body .lg-h2-52 { font-size: 52px; }
.lg-kopf-p { font-size: 19px; color: var(--l-text-2); }
.lg-markt .lg-kopf-p { line-height: 1.55; }
[data-aud="b2b"] .lg-markt .lg-kopf-p { line-height: normal; }
.lg-spalte-56 { display: flex; flex-direction: column; gap: 56px; }
.lg-spalte-48 { display: flex; flex-direction: column; gap: 48px; }
.lg-spalte-44 { display: flex; flex-direction: column; gap: 44px; }
.lg-spalte-28 { display: flex; flex-direction: column; gap: 28px; }

/* Markt in Zahlen (560) */
.lg-markt { height: 560px; padding: 104px 0; }
.lg-beleg-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lg-beleg { height: 196px; padding: 28px; border-radius: 22px; background: var(--l-karte); border: 1px solid var(--l-linie); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.lg-beleg-zahl { font-size: 50px; font-weight: 600; letter-spacing: -0.04em; white-space: nowrap; }
.lg-beleg-text { font-size: 15px; line-height: 1.5; color: var(--l-text-hell); }
.lg-beleg-quelle { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--l-text-3); }

/* ── Probleme, Koverflow (900) ── */
.lg-probleme { height: 900px; overflow: hidden; padding-top: 104px; display: flex; flex-direction: column; gap: 48px; background: radial-gradient(900px 500px at 50% 60%, rgba(var(--l-glanz-2-rgb), 0.14), transparent 65%), var(--l-grund); }
[data-aud="b2b"] .lg-probleme { background: radial-gradient(900px 500px at 50% 60%, rgba(var(--l-glanz-4-rgb), 0.14), transparent 65%), var(--l-grund); }
.lg-deck { position: relative; height: 560px; perspective: 1800px; outline: none; }
.lg-karte-halter { position: absolute; left: 50%; top: 0; width: 420px; height: 540px; margin-left: -210px; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s; transform: translateX(calc(var(--o) * var(--versatz))) translateZ(calc(var(--a) * -170px)) rotateY(calc(var(--o) * -12deg)); }
.lg-karte-halter[data-a="0"] { opacity: 1; }
.lg-karte-halter[data-a="1"] { opacity: 0.72; }
.lg-karte-halter[data-a="2"] { opacity: 0.32; }
.lg-karte-halter[data-a="3"] { opacity: 0; pointer-events: none; }
.lg-karte { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 420px; height: 540px; position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transform: rotateY(0deg); }
.lg-karte.lg-gedreht { transform: rotateY(180deg); }
.lg-karte:focus-visible { outline: 2px solid var(--l-akzent); outline-offset: 4px; border-radius: 24px; }
.lg-karte-vorn, .lg-karte-hinten { position: absolute; left: 0; top: 0; width: 420px; height: 540px; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(var(--l-schatten-rgb), 0.35); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; }
.lg-karte-vorn { background: var(--l-karte); border: 1px solid var(--l-linie); }
.lg-karte-halter[data-a="0"] .lg-karte-vorn { border-color: rgba(var(--l-akzent-rgb), 0.55); }
[data-aud="b2b"] .lg-karte-halter[data-a="0"] .lg-karte-vorn { border-color: rgba(var(--l-akzent-rgb), 0.6); }
.lg-karte-kopf { height: 200px; flex-shrink: 0; padding: 24px 28px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid var(--l-linie); background: radial-gradient(320px 180px at 22% 0%, rgba(var(--l-glanz-1-rgb), 0.34), transparent 70%), radial-gradient(300px 200px at 90% 110%, rgba(var(--l-glanz-3-rgb), 0.36), transparent 70%), radial-gradient(240px 160px at 60% 40%, rgba(var(--l-glanz-2-rgb), 0.22), transparent 70%), var(--l-kopf); }
[data-aud="b2b"] .lg-karte-kopf { background: radial-gradient(320px 180px at 18% 0%, rgba(var(--l-glanz-1-rgb), 0.34), transparent 70%), radial-gradient(300px 200px at 92% 110%, rgba(var(--l-glanz-3-rgb), 0.40), transparent 70%), radial-gradient(260px 170px at 58% 45%, rgba(var(--l-glanz-2-rgb), 0.30), transparent 70%), var(--l-kopf); }
.lg-karte-nr { position: absolute; right: 26px; top: 22px; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.2em; color: var(--l-text-hell); }
.lg-karte-fig { display: block; font-weight: 600; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.lg-karte-figtext { display: block; font-size: 13px; line-height: 1.45; color: var(--l-text-hell); margin-top: 10px; }
.lg-karte-koerper { flex-grow: 1; padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.lg-karte-eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--l-akzent); }
.lg-karte-titel { display: block; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.lg-karte-text { display: block; font-size: 15px; line-height: 1.55; color: var(--l-text-2); }
.lg-karte-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.lg-karte-pille { height: 44px; padding: 0 20px; display: flex; align-items: center; gap: 10px; border-radius: 999px; border: 1px solid rgba(var(--l-akzent-rgb), 0.5); font-size: 14px; font-weight: 500; white-space: nowrap; }
[data-aud="b2b"] .lg-karte-pille { border-color: rgba(var(--l-akzent-rgb), 0.55); }
.lg-karte-quelle { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--l-text-3); max-width: 150px; text-align: right; line-height: 1.4; }
.lg-karte-hinten { transform: rotateY(180deg); padding: 30px 28px 28px; gap: 18px; border: 1px solid rgba(var(--l-akzent-rgb), 0.45); background: radial-gradient(360px 240px at 100% 0%, rgba(var(--l-glanz-1-rgb), 0.20), transparent 70%), radial-gradient(360px 260px at 0% 100%, rgba(var(--l-glanz-3-rgb), 0.22), transparent 70%), var(--l-rueckseite); }
[data-aud="b2b"] .lg-karte-hinten { border-color: rgba(var(--l-akzent-rgb), 0.5); background: radial-gradient(360px 240px at 100% 0%, rgba(var(--l-glanz-1-rgb), 0.20), transparent 70%), radial-gradient(360px 260px at 0% 100%, rgba(var(--l-glanz-3-rgb), 0.24), transparent 70%), var(--l-rueckseite); }
.lg-karte-fn { display: block; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.lg-karte-schritte { display: flex; flex-direction: column; gap: 10px; }
.lg-karte-schritt { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(var(--l-grund-rgb), 0.55); font-size: 15px; line-height: 1.45; color: var(--l-text-zart); }
[data-aud="b2b"] .lg-karte-schritt { background: rgba(var(--l-grund-rgb), 0.6); }
.lg-karte-schritt-nr { width: 26px; height: 26px; flex-shrink: 0; border-radius: 99px; background: var(--l-verlauf-nummer); color: var(--l-auf-verlauf); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lg-karte-ergebnis { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid rgba(var(--l-tinte-rgb), 0.12); }
.lg-karte-rfig { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.lg-karte-rtext { font-size: 14px; color: var(--l-text-2); }
.lg-deck-steuerung { display: flex; justify-content: center; align-items: center; gap: 24px; }
.lg-punkte { display: flex; gap: 8px; align-items: center; }
.lg-punkt { height: 8px; width: 8px; border-radius: 9px; background: rgba(var(--l-tinte-rgb), 0.28); transition: width 0.3s; }
.lg-punkt.lg-an { width: 32px; background: var(--l-verlauf-punkt); }

/* ── Demo (Eigner 970, Fleet 900) ── */
.lg-demo { height: 970px; padding: 104px 0 40px; }
[data-aud="b2b"] .lg-demo { height: 900px; padding: 104px 0; }
.lg-demo-raster { display: grid; grid-template-columns: 6fr 6fr; gap: 72px; align-items: center; }
[data-aud="b2b"] .lg-demo-raster { grid-template-columns: 5fr 7fr; gap: 56px; }
.lg-schritte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg-schritt { all: unset; box-sizing: border-box; cursor: pointer; height: 124px; padding: 0 26px; border-radius: 22px; background: rgba(var(--l-karte-rgb), 0.4); border: 1px solid rgba(var(--l-tinte-rgb), 0.08); display: flex; gap: 22px; align-items: center; transition: background 0.3s; }
[data-aud="b2b"] .lg-schritt { background: rgba(var(--l-karte-rgb), 0.45); }
.lg-schritt.lg-an { background: var(--l-kopf); border-color: rgba(var(--l-akzent-rgb), 0.5); }
[data-aud="b2b"] .lg-schritt.lg-an { border-color: rgba(var(--l-akzent-rgb), 0.55); }
.lg-schritt:focus-visible { outline: 2px solid var(--l-akzent); outline-offset: 4px; }
.lg-schritt-nr { width: 44px; height: 44px; flex-shrink: 0; border-radius: 99px; background: rgba(var(--l-tinte-rgb), 0.08); color: var(--l-text-2); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; }
.lg-schritt.lg-an .lg-schritt-nr { background: var(--l-verlauf-nummer); color: var(--l-auf-verlauf); }
.lg-schritt-text { display: flex; flex-direction: column; gap: 6px; }
.lg-schritt-titel { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.lg-schritt-satz { font-size: 15px; line-height: 1.5; color: var(--l-text-2); }
.lg-demo-geraet { display: flex; justify-content: center; }

/* Fleet: App-Fenster (540, Kopfleiste 56) */
.lg-fenster { height: 540px; border-radius: 26px; background: var(--l-karte); border: 1px solid rgba(var(--l-tinte-rgb), 0.14); box-shadow: 0 40px 90px rgba(var(--l-schatten-rgb), 0.35), 0 0 100px -30px rgba(var(--l-glanz-4-rgb), 0.55); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.lg-fenster-leiste { height: 56px; flex-shrink: 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--l-linie); background: var(--l-fenster-kopf); }
.lg-fenster-punkte { display: flex; gap: 8px; }
.lg-fenster-punkte span { width: 10px; height: 10px; border-radius: 9px; background: rgba(var(--l-tinte-rgb), 0.18); }
.lg-fenster-titel { font-size: 14px; font-weight: 600; }
.lg-etikett { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--l-text-3); }
.lg-fenster-inhalt { flex-grow: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.lg-fz { display: flex; justify-content: space-between; }
.lg-fz-leise { font-size: 14px; color: var(--l-text-2); }
.lg-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-foto { height: 118px; border-radius: 16px; position: relative; }
.lg-foto span { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--l-auf-verlauf); font-weight: 600; }
.lg-foto-0 { background: linear-gradient(140deg, #ffc24b, #e8459b); }
.lg-foto-1 { background: linear-gradient(140deg, #ff8a3d, #a855f7); }
.lg-foto-2 { background: linear-gradient(140deg, #e8459b, #a855f7); }
.lg-fliste { display: flex; flex-direction: column; font-size: 15px; }
.lg-flinie { padding: 12px 0; border-top: 1px solid var(--l-linie); }
.lg-f-gut { color: var(--l-status-gut); }
.lg-f-leise { color: var(--l-text-2); }
.lg-f-neu { color: var(--l-status-neu); }
.lg-fenster-knopf { margin-top: auto; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--l-verlauf); color: var(--l-auf-verlauf); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.lg-erinnerung { padding: 16px 18px; border-radius: 16px; background: rgba(var(--l-glanz-4-rgb), 0.16); border: 1px solid rgba(var(--l-akzent-rgb), 0.4); display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.lg-erinnerung-zeit { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--l-akzent-hell); }
.lg-fkacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-fkachel { padding: 18px; border-radius: 16px; background: var(--l-kachel); }
.lg-fkachel-wert { font-size: 28px; font-weight: 600; white-space: nowrap; }
.lg-fkachel-30 { font-size: 30px; }
.lg-fkachel-text { font-size: 12px; color: var(--l-text-3); }
.lg-schadenmeldung { display: flex; gap: 16px; align-items: center; }
.lg-schaden-bild { width: 84px; height: 84px; flex-shrink: 0; border-radius: 14px; background: linear-gradient(140deg, #ff8a3d, #e8459b); }
.lg-schaden-text { display: flex; flex-direction: column; gap: 6px; }
.lg-schaden-titel { font-size: 16px; font-weight: 600; }
.lg-schaden-satz { font-size: 14px; color: var(--l-text-2); }
.lg-fenster-fuss { margin-top: auto; font-size: 13px; color: var(--l-text-3); }
.lg-vergleich { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; font-size: 15px; }
.lg-vergleich-kopf { padding: 12px 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--l-text-3); }
.lg-vergleich-zelle { padding: 14px 0; border-top: 1px solid var(--l-linie); }
.lg-kasten { padding: 18px 20px; border-radius: 16px; background: rgba(var(--l-hinweis-rgb), 0.12); border: 1px solid rgba(var(--l-hinweis-rgb), 0.35); display: flex; flex-direction: column; gap: 6px; }
.lg-kasten-titel { font-size: 17px; font-weight: 600; }
.lg-kasten-satz { font-size: 14px; color: var(--l-text-hell); }
.lg-service-block { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.lg-service-titel { font-size: 15px; font-weight: 600; }
.lg-service-raster { display: grid; grid-template-columns: 170px minmax(0, 1fr) 60px; gap: 14px; align-items: center; font-size: 14px; }
.lg-service-bahn { height: 10px; border-radius: 9px; background: var(--l-grund); overflow: hidden; }
.lg-rechts { text-align: right; }
.lg-verlauf-kurz { background: var(--l-verlauf-kurz); }

/* Fleet-Hero: das Flottenblatt „Samstag, 08:00" */
.lg-blatt { padding: 22px 26px; border-radius: 24px; background: rgba(var(--l-karte-rgb), 0.82); border: 1px solid rgba(var(--l-tinte-rgb), 0.12); box-shadow: 0 40px 90px rgba(var(--l-schatten-rgb), 0.35), 0 0 90px -24px rgba(var(--l-glanz-4-rgb), 0.5); display: flex; flex-direction: column; min-width: 0; align-self: start; }
.lg-blatt-kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; }
.lg-blatt-titel { font-size: 16px; font-weight: 600; }
.lg-blatt-raster { display: grid; grid-template-columns: 2fr 1.2fr 0.8fr 1.5fr; font-size: 14px; align-items: center; }
.lg-blatt-spalte { padding: 10px 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--l-text-3); }
.lg-blatt-zelle { padding: 13px 0; border-top: 1px solid var(--l-linie); }
.lg-leise { color: var(--l-text-2); }
.lg-blatt-status { display: flex; gap: 8px; align-items: center; }
.lg-punkt-status { width: 8px; height: 8px; border-radius: 9px; flex-shrink: 0; }
.lg-status-gut { background: var(--l-status-gut); }
.lg-status-achtung { background: var(--l-status-achtung); }
.lg-status-faellig { background: var(--l-status-faellig); }

/* ── Auswertung, Chart-Karussell (Eigner 1058, Fleet 1050) ── */
.lg-auswertung { height: 1058px; padding: 72px 0 104px; background: radial-gradient(800px 500px at 90% 20%, rgba(var(--l-glanz-3-rgb), 0.16), transparent 60%), var(--l-grund); }
[data-aud="b2b"] .lg-auswertung { height: 1050px; padding: 104px 0; background: radial-gradient(800px 500px at 90% 20%, rgba(var(--l-glanz-5-rgb), 0.14), transparent 60%), var(--l-grund); }
.lg-kopf-auswertung { margin-bottom: 12px; }
[data-aud="b2b"] .lg-kopf-auswertung { margin-bottom: 0; }
.lg-umschalter { display: flex; gap: 12px; align-items: center; }
.lg-pillen { flex-grow: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.lg-pille { all: unset; box-sizing: border-box; cursor: pointer; height: 52px; border-radius: 999px; background: rgba(var(--l-karte-rgb), 0.6); border: 1px solid rgba(var(--l-tinte-rgb), 0.12); color: var(--l-text-hell); font-size: 15px; font-weight: 600; text-align: center; line-height: 50px; transition: background 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.lg-pille.lg-an { background: var(--l-verlauf); border-color: transparent; color: var(--l-auf-verlauf); }
.lg-pille:focus-visible { outline: 2px solid var(--l-akzent); outline-offset: 4px; }
.lg-ansicht { display: flex; flex-direction: column; gap: 28px; }
.lg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lg-kpi { height: 136px; padding: 22px 24px; border-radius: 20px; background: var(--l-karte); border: 1px solid var(--l-linie); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.lg-kpi-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; }
.lg-tag-g { color: var(--l-tag-gemessen); }
.lg-tag-a { color: var(--l-tag-abgeleitet); }
.lg-tag-m { color: var(--l-tag-modelliert); }
.lg-tag-x { color: var(--l-tag-muster); }
.lg-tag-q { color: var(--l-tag-quelle); }
.lg-kpi-wert { font-size: 38px; font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; }
.lg-kpi-text { font-size: 14px; color: var(--l-text-2); }
.lg-chart { height: 470px; padding: 26px 32px 18px; border-radius: 24px; background: var(--l-karte); border: 1px solid var(--l-linie); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.lg-chart-paare { gap: 22px; }
.lg-chart-fleet { height: 440px; padding: 26px 32px 20px; gap: 10px; }
.lg-chart-hebel { gap: 22px; }
.lg-chart-service { gap: 16px; }
.lg-chart-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.lg-chart-kopf-stapel { flex-direction: column; align-items: flex-start; gap: 10px; }
.lg-chart-satz { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.lg-legende { display: flex; gap: 20px; font-size: 12px; color: var(--l-text-2); flex-wrap: wrap; }
.lg-legende > span { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.lg-legende-zeichen { display: inline-block; flex-shrink: 0; }
.lg-z-strich { width: 18px; height: 0; border-top: 2px dashed var(--l-text-1); }
.lg-z-marina { width: 10px; height: 10px; border-radius: 3px; background: var(--l-daten-1); }
.lg-z-kai { width: 10px; height: 10px; border-radius: 3px; background: var(--l-daten-blau); }
.lg-z-ring { width: 10px; height: 10px; border-radius: 9px; border: 2px solid var(--l-daten-3); }
.lg-z-voll { width: 10px; height: 10px; border-radius: 9px; background: var(--l-text-1); }
.lg-z-hohl { width: 10px; height: 10px; border-radius: 9px; border: 2px solid var(--l-daten-2); }
.lg-z-linie-verlauf { width: 18px; height: 3px; border-radius: 3px; background: var(--l-verlauf-kurz); }
.lg-z-linie-blau { width: 18px; height: 3px; border-radius: 3px; background: var(--l-daten-2); }
.lg-z-balken-verlauf { width: 18px; height: 8px; border-radius: 3px; background: var(--l-verlauf-kurz); }
.lg-z-balken-blau { width: 18px; height: 8px; border-radius: 3px; background: var(--l-daten-2); }
.lg-z-balken-kurz { width: 18px; height: 8px; border-radius: 3px; background: var(--l-verlauf-kurz); }
.lg-z-schwelle { width: 2px; height: 14px; background: var(--l-hinweis); }
.lg-z-violett { width: 12px; height: 12px; border-radius: 3px; background: var(--l-daten-3); }
.lg-z-uebergabe { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--l-daten-1), var(--l-daten-2)); }
.lg-chart-flaeche { flex-grow: 1; min-height: 0; display: flex; align-items: flex-start; }
.lg-svg { display: block; width: 100%; max-width: 1176px; height: auto; }
.lg-chart-fuss { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--l-text-3); }
.lg-gitter line { stroke: var(--l-text-1); stroke-opacity: 0.07; }
.lg-achse text { fill: var(--l-text-3); font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.lg-achse-y text { text-anchor: end; }
.lg-achse-x text { text-anchor: middle; }
.lg-achse-x-name text { fill: var(--l-text-2); font-size: 12px; font-family: Archivo, sans-serif; text-anchor: middle; }
.lg-achse-x text.lg-klein { font-size: 10px; }
.lg-chart-eigner .lg-achse-x text { font-size: 11px; }
.lg-chart-eigner .lg-svg[viewBox="0 20 1176 340"] .lg-achse-x text { font-size: 10px; }
.lg-wert { fill: var(--l-text-zart); font-size: 12px; font-family: Archivo, sans-serif; text-anchor: middle; }
.lg-wert-klein { fill: var(--l-text-3); font-size: 10px; font-family: 'JetBrains Mono', monospace; text-anchor: middle; }
.lg-balken { shape-rendering: geometricPrecision; }
.lg-balken-geschaetzt { fill-opacity: 0.55; }
.lg-ring { fill: none; stroke: var(--l-daten-3); stroke-width: 2; }
.lg-ring-text { fill: var(--l-daten-violett); font-size: 11px; font-family: 'JetBrains Mono', monospace; text-anchor: middle; }
.lg-schnittlinie { stroke: var(--l-text-1); stroke-width: 1.5; stroke-dasharray: 6 6; }
.lg-linie { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lg-linie-blau { stroke: var(--l-daten-2); stroke-linecap: butt; }
.lg-bezug-violett { stroke: var(--l-daten-3); stroke-width: 1.5; stroke-dasharray: 6 6; }
.lg-bezug-gruen { stroke: var(--l-daten-1); stroke-width: 1.5; stroke-dasharray: 6 6; }
.lg-bezug-text { font-size: 12px; font-family: Archivo, sans-serif; text-anchor: end; }
.lg-bezug-text-violett { fill: var(--l-daten-violett); }
.lg-bezug-text-gruen { fill: var(--l-akzent); }
.lg-punkt-voll { fill: var(--l-text-1); }
.lg-punkt-blau { fill: var(--l-daten-2); }
.lg-punkt-hohl { fill: var(--l-karte); stroke: var(--l-daten-2); stroke-width: 2; }
.lg-punkt-text, .lg-punkt-texte text { fill: var(--l-text-1); font-size: 12px; font-family: Archivo, sans-serif; }
.lg-fett { font-weight: 600; }
.lg-klammer line { stroke: var(--l-text-1); stroke-width: 1.5; }
.lg-klammer-kasten { fill: var(--l-grund); stroke: rgba(var(--l-tinte-rgb), 0.2); }
.lg-klammer-text { fill: var(--l-text-1); font-size: 16px; font-weight: 700; font-family: Archivo, sans-serif; text-anchor: middle; }
.lg-hinweis-linie { stroke: var(--l-hinweis); stroke-width: 1; stroke-dasharray: 4 5; }
.lg-hinweis-kasten { fill: var(--l-grund); stroke: rgba(var(--l-hinweis-rgb), 0.45); }
.lg-hinweis-titel { fill: var(--l-hinweis); font-size: 12px; font-weight: 600; font-family: Archivo, sans-serif; }
.lg-hinweis-satz { fill: var(--l-text-hell); font-size: 12px; font-family: Archivo, sans-serif; }
.lg-paare { display: flex; flex-direction: column; gap: 22px; flex-grow: 1; justify-content: center; }
.lg-paar { display: grid; grid-template-columns: 220px minmax(0, 1fr) 130px; gap: 10px 20px; align-items: center; }
.lg-paar-name { grid-row: span 2; font-size: 16px; font-weight: 600; }
.lg-paar-bahn { height: 18px; border-radius: 6px; background: var(--l-grund); overflow: hidden; }
.lg-paar-bahn .lg-wachsen { border-radius: 6px; }
.lg-paar-wert { font-size: 15px; font-weight: 600; }
.lg-paar-wert.lg-leise { font-weight: 400; }
.lg-verlauf-daten { background: var(--l-verlauf-kurz); }
.lg-blau { background: var(--l-daten-2); }
.lg-blau-hohl { background: rgba(var(--l-glanz-2-rgb), 0.35); }
.lg-violett { background: var(--l-daten-3); }
.lg-violett-matt { background: rgba(var(--l-glanz-3-rgb), 0.6); }
.lg-umsatz { display: flex; flex-direction: column; gap: 10px; }
.lg-umsatz-kopf { display: flex; justify-content: space-between; font-size: 14px; color: var(--l-text-2); }
.lg-umsatz-kopf b { font-weight: 600; color: var(--l-text-1); }
.lg-umsatz-bahn { height: 26px; border-radius: 8px; background: rgba(var(--l-glanz-3-rgb), 0.28); overflow: hidden; display: flex; justify-content: flex-end; }
.lg-umsatz-anteil { display: flex; justify-content: flex-end; font-size: 13px; color: var(--l-hinweis); }
.lg-hebel { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; justify-content: center; }
.lg-hebel-zeile { display: grid; grid-template-columns: 300px minmax(0, 1fr) 110px; gap: 20px; align-items: center; }
.lg-hebel-name { display: flex; flex-direction: column; gap: 2px; }
.lg-hebel-name b { font-size: 16px; font-weight: 600; }
.lg-hebel-name span { font-size: 12px; color: var(--l-text-3); }
.lg-hebel-bahn { height: 22px; border-radius: 6px; background: var(--l-grund); overflow: hidden; }
.lg-hebel-bahn .lg-wachsen { border-radius: 6px; }
.lg-hebel-1 { background: linear-gradient(90deg, var(--l-daten-1), var(--l-daten-orange), var(--l-daten-rot)); }
.lg-hebel-2 { background: linear-gradient(90deg, var(--l-daten-orange), var(--l-daten-2)); }
.lg-hebel-3 { background: linear-gradient(90deg, var(--l-daten-2), var(--l-daten-3)); }
.lg-hebel-wert { font-size: 18px; font-weight: 600; text-align: right; }
.lg-service-liste { display: flex; flex-direction: column; gap: 9px; }
.lg-service-zeile { display: grid; grid-template-columns: 120px minmax(0, 1fr) 70px; gap: 18px; align-items: center; font-size: 14px; }
.lg-service-spur { height: 16px; position: relative; border-radius: 6px; background: var(--l-grund); }
.lg-service-spur .lg-wachsen { position: absolute; left: 0; top: 0; bottom: 0; height: auto; border-radius: 6px; }
.lg-service-schwelle { position: absolute; left: var(--schwelle); top: -4px; bottom: -4px; width: 2px; background: var(--l-hinweis); opacity: 0.8; }
.lg-service-wert { text-align: right; font-weight: 600; }
.lg-fenster-flaeche { fill: rgba(var(--l-hinweis-rgb), 0.08); }
.lg-fenster-text { fill: var(--l-hinweis); font-size: 18px; font-weight: 600; font-family: Archivo, sans-serif; text-anchor: middle; }
.lg-fenster-satz { fill: var(--l-text-2); font-size: 12px; font-family: Archivo, sans-serif; text-anchor: middle; }
.lg-balken-violett { fill: var(--l-daten-3); }
.lg-balken-zahl text { fill: var(--l-text-1); font-size: 13px; font-weight: 600; font-family: Archivo, sans-serif; text-anchor: middle; }
/* Die senkrechte Balkenliste zeigt sich erst auf schmalen Fenstern. */
.lg-balkenliste { display: none; }

/* ── Zitat (360) ── */
.lg-zitat { height: 360px; display: flex; align-items: center; background: radial-gradient(700px 300px at 50% 50%, rgba(var(--l-glanz-2-rgb), 0.18), transparent 70%), var(--l-gehoben); }
.lg-zitat .lg-innen { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lg-zitat-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.3em; color: var(--l-text-2); }
.lg-zitat-satz { font-size: 76px; line-height: 1.05; letter-spacing: -0.03em; }

/* ── Einstieg (Eigner 440) und Kontakt (Fleet 380) ──
   Keine Preise auf der Landing (Q1, 28.09.2026). Die Karte hat die Masse der
   Referenz-Preiskarte (Radius 26, zwei Lichtflaechen, Zahl 56/48, Zeile 15,
   Knopf 56) — die Zahl ist die Trial-Dauer, kein Betrag. */
.lg-einstieg { height: 440px; padding: 96px 0; background: var(--l-grund); }
.lg-einstieg-innen { height: 100%; display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.lg-kontakt { height: 380px; padding: 0; background: radial-gradient(800px 360px at 20% 50%, rgba(var(--l-glanz-2-rgb), 0.20), transparent 70%), radial-gradient(700px 340px at 90% 60%, rgba(var(--l-glanz-3-rgb), 0.22), transparent 70%), var(--l-gehoben); }
.lg-kopf-einstieg { gap: 18px; }
.lg-kontakt .lg-kopf-einstieg { gap: 16px; }
.lg-einstieg-p { font-size: 18px; line-height: 1.55; color: var(--l-text-2); max-width: 560px; }
.lg-kontakt .lg-einstieg-p { max-width: none; line-height: normal; }
.lg-einstieg-karte { padding: 34px; border-radius: 26px; background: radial-gradient(300px 200px at 100% 0%, rgba(var(--l-glanz-1-rgb), 0.24), transparent 70%), radial-gradient(300px 200px at 0% 100%, rgba(var(--l-glanz-3-rgb), 0.24), transparent 70%), var(--l-karte); border: 1px solid rgba(var(--l-tinte-rgb), 0.14); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lg-kontakt .lg-einstieg-karte { padding: 32px; gap: 18px; background: var(--l-karte); }
.lg-einstieg-zahl { font-size: 56px; font-weight: 600; letter-spacing: -0.04em; white-space: nowrap; line-height: 1.1; }
.lg-kontakt .lg-einstieg-zahl { font-size: 48px; }
.lg-einstieg-zeile { font-size: 15px; color: var(--l-text-hell); }
.lg-einstieg-knopf { height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--l-text-1); border-radius: 999px; font-size: 16px; font-weight: 600; }
.lg-body a.lg-einstieg-knopf, .lg-body a.lg-einstieg-knopf:hover { color: var(--l-grund); }

/* ── Querverweis (240) ── */
.lg-quer { height: 240px; display: flex; align-items: center; background: radial-gradient(700px 300px at 85% 50%, rgba(var(--l-glanz-3-rgb), 0.20), transparent 70%), radial-gradient(500px 260px at 55% 100%, rgba(var(--l-glanz-1-rgb), 0.14), transparent 70%), var(--l-gehoben); }
[data-aud="b2b"] .lg-quer { background: radial-gradient(700px 300px at 85% 50%, rgba(var(--l-glanz-3-rgb), 0.22), transparent 70%), radial-gradient(500px 260px at 55% 100%, rgba(var(--l-glanz-1-rgb), 0.14), transparent 70%), var(--l-grund); }
.lg-quer-innen { display: flex; align-items: center; justify-content: space-between; }
.lg-quer-text { display: flex; flex-direction: column; gap: 10px; }
.lg-quer-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.24em; color: var(--l-akzent); }
.lg-quer-satz { font-size: 38px; font-weight: 400; letter-spacing: -0.03em; }

/* ── Meldepflichten (620) ── */
.lg-pflichten { height: 620px; padding: 104px 0; }
.lg-tabelle { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; border-radius: 22px; overflow: hidden; background: var(--l-karte); border: 1px solid var(--l-linie); }
.lg-tabelle-zeile { display: contents; }
.lg-tabelle-kopf { padding: 18px 26px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; background: var(--l-fenster-kopf); }
.lg-tabelle-kopf-0 { color: var(--l-text-3); }
.lg-tabelle-kopf-1 { color: var(--l-akzent); }
.lg-tabelle-kopf-2 { color: var(--l-hinweis); }
.lg-tabelle-zelle { padding: 22px 26px; border-top: 1px solid var(--l-linie); font-size: 15px; line-height: 1.5; color: var(--l-text-hell); }
.lg-tabelle-pflicht { font-size: 18px; font-weight: 600; line-height: normal; color: var(--l-text-1); }

/* ── Fuss (182) ── */
.lg-fuss { height: 182px; flex-shrink: 0; padding: 56px 0; background: var(--l-fuss); }
.lg-fuss-innen { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.lg-fuss-marke { display: flex; flex-direction: column; gap: 10px; }
.lg-fuss-wort { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }
.lg-fuss-wort .lg-marke-zusatz { color: var(--l-akzent); }
.lg-fuss-motto { font-size: 15px; }
.lg-fuss-links { display: grid; grid-template-columns: repeat(4, auto); column-gap: 40px; row-gap: 12px; font-size: 13px; }
.lg-body .lg-fuss-links a { color: var(--l-text-3); }
.lg-body .lg-fuss-links a:hover { color: var(--l-text-1); }


/* ══ Nachbesserung S1–S7 (Carolin, 28.09.2026 abends) ═══════════════════════
   Feste Hoehen aus der Referenz liessen den Inhalt ueber den Rand laufen:
   Pfeile und Punkte sassen auf dem Trennstrich des naechsten Abschnitts, und
   Demo/Auswertung waren hoeher als ein Bildschirm. Jetzt traegt jeder
   Abschnitt denselben Innenabstand und waechst mit seinem Inhalt; die
   Bedienelemente stehen immer im eigenen Abschnitt. Hero bleibt 820. */
.lg-markt, .lg-demo, [data-aud="b2b"] .lg-demo, .lg-auswertung, [data-aud="b2b"] .lg-auswertung,
.lg-zitat, .lg-einstieg, .lg-kontakt, .lg-pflichten, .lg-quer { height: auto; padding: 80px 0; }
.lg-probleme { height: auto; padding: 80px 0 72px; gap: 36px; }
.lg-zitat { padding: 72px 0; }
/* Probleme: Karten 480 statt 540 hoch, damit der Abschnitt auf einen Bildschirm passt. */
.lg-deck { height: 500px; }
.lg-karte-halter, .lg-karte, .lg-karte-vorn, .lg-karte-hinten { height: 480px; }
.lg-karte-kopf { height: 176px; }
.lg-karte-koerper { padding: 22px 28px 24px; gap: 12px; }
.lg-karte-titel { font-size: 21px; }
/* Demo: Geraet kleiner, Raster mittig. */
.lg-demo .lg-spalte-44, .lg-demo .lg-spalte-48, .lg-demo .lg-spalte-56 { gap: 32px; }
.lg-demo-geraet { transform: scale(0.86); transform-origin: 50% 0; margin-bottom: -84px; }
/* Auswertung: kompaktere Kennzahlen und Chart. */
.lg-auswertung .lg-spalte-28 { gap: 22px; }
.lg-kpi { height: 112px; padding: 18px 22px; }
.lg-kpi-wert { font-size: 32px; }
.lg-chart { height: 380px; }
.lg-chart-fleet { height: 380px; }
/* Hero-Kacheln: Zahl und Satz beieinander statt an die Enden gedrueckt (S7). */
.lg-hero-kachel { height: auto; justify-content: flex-start; gap: 6px; padding: 18px 22px; }
/* Einstieg Eigner und Kontakt Fleet: eine Karte, gleiche Hoehe (S3). */
.lg-einstieg-karte, .lg-kontakt .lg-einstieg-karte { padding: 32px; gap: 16px; }
.lg-einstieg-zahl, .lg-kontakt .lg-einstieg-zahl { font-size: 48px; }
.lg-einstieg-zahl.lg-paket-wort { font-size: 30px; line-height: 1.15; }
.lg-paket-buehne > .lg-paket { min-height: 268px; }
/* Querverweis als Karte: Satz links, Knopf rechts mittig, in der Farbe der Seite (S6). */
.lg-quer-innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 40px 48px; border-radius: 26px; background: radial-gradient(520px 260px at 100% 0%, rgba(var(--l-glanz-3-rgb), 0.22), transparent 70%), var(--l-karte); border: 1px solid var(--l-linie); }
.lg-quer-satz { font-size: 32px; line-height: 1.2; }
.lg-quer .lg-knopf-akzent { height: 56px; padding: 0 28px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; background: var(--l-verlauf); border: 0; color: var(--l-auf-verlauf); font-size: 16px; font-weight: 600; white-space: nowrap; }
.lg-body .lg-quer a.lg-knopf-akzent, .lg-body .lg-quer a.lg-knopf-akzent:hover { color: var(--l-auf-verlauf); }
/* Sprachwahl als dezentes Drop-down in der Leiste (S4). */
.lg-sprache { position: relative; }
.lg-sprache > summary { list-style: none; cursor: pointer; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid var(--l-linie); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; color: var(--l-text-2); }
.lg-sprache > summary::-webkit-details-marker { display: none; }
.lg-sprache[open] > summary, .lg-sprache > summary:hover { color: var(--l-text-1); }
.lg-sprache-liste { position: absolute; right: 0; top: 48px; min-width: 96px; padding: 6px; border-radius: 14px; background: var(--l-karte); border: 1px solid var(--l-linie); box-shadow: 0 18px 40px rgba(var(--l-schatten-rgb), 0.35); display: flex; flex-direction: column; z-index: 20; }
.lg-body .lg-sprache-liste a { padding: 8px 12px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; color: var(--l-text-2); }
.lg-body .lg-sprache-liste a:hover, .lg-body .lg-sprache-liste a[aria-current="true"] { color: var(--l-text-1); background: rgba(var(--l-tinte-rgb), 0.08); }

.lg-sprache:not([open]) .lg-sprache-liste { display: none; }
/* Feinschliff nach Messung (1440 x 900): jeder Abschnitt passt auf einen Bildschirm. */
.lg-probleme { padding: 64px 0 56px; gap: 28px; }
.lg-auswertung, [data-aud="b2b"] .lg-auswertung { padding: 64px 0; }
.lg-chart, .lg-chart-fleet { height: 340px; }
.lg-einstieg, .lg-kontakt { height: 460px; padding: 0; display: flex; align-items: center; }
.lg-einstieg > .lg-innen { width: 100%; }
.lg-quer { padding: 56px 0; }
/* Die Diagrammflaeche schrumpft mit dem Chart; das SVG skaliert gleichmaessig (viewBox), Balken und Beschriftung bleiben deckungsgleich (Regel 29). */
.lg-chart-flaeche > .lg-svg { height: 100%; width: 100%; }

/* ── Problem-Karten und Loesungs-Dialog (Carolin, 28.09.2026 abends) ──
   Seitliche Karten deutlich zurueckgenommen, damit die mittlere lesbar
   fuehrt. Vorne das Problem als Aufhaenger, der Fakt als kleine Belegzeile. */
.lg-karte-halter[data-a="1"] { opacity: 0.34; }
.lg-karte-halter[data-a="2"] { opacity: 0.1; }
.lg-karte-kopf-frage { justify-content: flex-end; gap: 12px; }
.lg-karte-frage { display: block; font-size: 26px; line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; color: var(--l-text-1); }
.lg-karte-fakt { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--l-grund-rgb), 0.5); border: 1px solid var(--l-linie); }
.lg-karte-fakt-zahl { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; color: var(--l-akzent); }
.lg-karte-fakt-text { font-size: 12.5px; line-height: 1.4; color: var(--l-text-2); }
.lg-karte-play { background: var(--l-verlauf); color: var(--l-auf-verlauf); border-color: transparent; font-weight: 600; }
.lg-karte-kopf { height: 200px; }

.lg-loesung { width: min(1100px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--l-linie); border-radius: 28px; background: radial-gradient(700px 420px at 100% 0%, rgba(var(--l-glanz-1-rgb), 0.18), transparent 70%), radial-gradient(600px 400px at 0% 100%, rgba(var(--l-glanz-3-rgb), 0.18), transparent 70%), var(--l-karte); color: var(--l-text-1); overflow: auto; }
.lg-loesung::backdrop { background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(6px); }
.lg-loesung-zu { all: unset; box-sizing: border-box; position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: rgba(var(--l-tinte-rgb), 0.08); border: 1px solid var(--l-linie); z-index: 2; }
.lg-loesung-zu:focus-visible { outline: 2px solid var(--l-akzent); outline-offset: 3px; }
.lg-loesung-panel { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; padding: 40px 48px; align-items: center; }
.lg-loesung-panel[hidden] { display: none; }
.lg-loesung-medium { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lg-loesung-telefon { width: 300px; aspect-ratio: 600 / 1302; border-radius: 40px; padding: 8px; background: #05070a; box-shadow: 0 30px 80px rgba(var(--l-schatten-rgb), 0.5), 0 0 0 1px rgba(var(--l-tinte-rgb), 0.14); overflow: hidden; }
.lg-loesung-video { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block; background: #05070a; }
.lg-loesung-bild { transform: scale(0.9); transform-origin: 50% 0; margin-bottom: -60px; }
.lg-loesung-herkunft { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; color: var(--l-text-3); text-align: center; }
.lg-loesung-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lg-loesung-text h3, .lg-loesung-text p, .lg-loesung-text ol { margin: 0; }
.lg-loesung-fn { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.lg-loesung-frage { font-size: 34px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.lg-loesung-schmerz { font-size: 16px; line-height: 1.55; color: var(--l-text-2); }
.lg-loesung-kopf { margin-top: 14px; }
.lg-loesung-etappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lg-loesung-etappe { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 12px 14px; border-radius: 14px; font-size: 16px; line-height: 1.45; color: var(--l-text-2); cursor: pointer; transition: background 0.3s, color 0.3s; }
.lg-loesung-etappe.lg-an { background: rgba(var(--l-tinte-rgb), 0.07); color: var(--l-text-1); }
.lg-loesung-etappe.lg-fertig { color: var(--l-text-hell); }
.lg-loesung-balken { width: 4px; border-radius: 4px; background: rgba(var(--l-tinte-rgb), 0.14); overflow: hidden; position: relative; }
.lg-loesung-balken > span { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fortschritt, 0) * 100%); background: var(--l-verlauf); transition: height 0.25s linear; }
.lg-loesung-ergebnis { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; margin-top: 4px; border-top: 1px solid rgba(var(--l-tinte-rgb), 0.12); }
.lg-loesung-rfig { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.lg-loesung-rtext { font-size: 14px; color: var(--l-text-2); }
.lg-loesung-knopf { align-self: flex-start; margin-top: 8px; height: 52px; padding: 0 26px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--l-verlauf); font-size: 15px; font-weight: 600; }
.lg-body a.lg-loesung-knopf, .lg-body a.lg-loesung-knopf:hover { color: var(--l-auf-verlauf); }
@media (max-width: 760px) {
  .lg-loesung { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .lg-loesung-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 64px 20px 28px; }
  .lg-loesung-telefon { width: min(240px, 62vw); }
  .lg-loesung-frage { font-size: 26px; }
}

/* ── Bald verfuegbar als Karussell (28.09.2026 abends) ── */
.lg-bald { padding: 80px 0; }
.lg-bald-karussell { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; column-gap: 16px; row-gap: 18px; }
.lg-bald-spur { grid-column: 2; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.lg-bald-spur::-webkit-scrollbar { display: none; }
.lg-bald-karte { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; min-height: 260px; padding: 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; background: radial-gradient(320px 200px at 0% 0%, rgba(var(--l-glanz-1-rgb), 0.26), transparent 70%), radial-gradient(300px 200px at 100% 100%, rgba(var(--l-glanz-3-rgb), 0.24), transparent 70%), var(--l-karte); border: 1px solid var(--l-linie); }
.lg-bald-kopf { display: flex; justify-content: space-between; align-items: center; }
.lg-bald-symbol { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--l-verlauf); color: var(--l-auf-verlauf); }
.lg-bald-etikett { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--l-akzent); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--l-akzent-rgb), 0.4); }
.lg-bald-titel { margin: 6px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.lg-bald-satz { margin: 0; font-size: 16px; line-height: 1.55; color: var(--l-text-2); }
.lg-bald-zurueck { grid-column: 1; grid-row: 1; width: 52px; height: 52px; }
.lg-bald-weiter { grid-column: 3; grid-row: 1; width: 52px; height: 52px; }
.lg-bald-punkte { grid-column: 2; }
@media (max-width: 1023px) { .lg-bald-karte { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) {
  .lg-bald { padding: 56px 0; }
  .lg-bald-karussell { grid-template-columns: 40px minmax(0, 1fr) 40px; column-gap: 8px; }
  .lg-bald-karte { flex-basis: 100%; padding: 22px; min-height: 240px; }
  .lg-bald-zurueck, .lg-bald-weiter { width: 40px; height: 40px; }
}

/* ══ Breiten ══════════════════════════════════════════════════════════════
   1440 ist die Referenz. Bis 1024 bleiben die festen Hoehen; darunter
   wachsen die Abschnitte mit dem Inhalt, die Umschalter behalten ihre Hoehe.
   Die Hook bleibt in jeder Sprache zweizeilig: Die Groesse sinkt, der
   Umbruch oeffnet sich nie (Briefing Abschnitt 10). */

@media (max-width: 1439px) {
  .lg-seite { --rand: clamp(48px, calc(48px + (100vw - 1024px) * 0.1157), 96px); --versatz: clamp(280px, calc(280px + (100vw - 1024px) * 0.1446), 340px); }
  .lg-body .lg-h1 { font-size: calc(var(--h1, 92px) * var(--h1-faktor, 1)); }
}
@media (max-width: 1279px) {
  .lg-seite { --h1-faktor: 0.82; }
  .lg-nav-links { gap: 28px; }
  .lg-nav-rechts { gap: 28px; }
  .lg-body .lg-h2 { font-size: 48px; }
  .lg-zitat-satz { font-size: 64px; }
  .lg-quer-satz { font-size: 32px; }
  .lg-quer-text { min-width: 0; }
  .lg-beleg-zahl { font-size: 42px; }
  .lg-kpi-wert { font-size: 32px; }
  .lg-einstieg-zahl { font-size: 44px; }
  .lg-hebel-zeile { grid-template-columns: 240px minmax(0, 1fr) 110px; }
}
@media (max-width: 1100px) {
  .lg-seite { --h1-faktor: 0.72; }
  .lg-nav-links { gap: 20px; font-size: 13px; }
  .lg-nav-rechts { gap: 20px; }
  .lg-hero-kachel-zahl { font-size: 26px; }
  .lg-karte-halter, .lg-karte, .lg-karte-vorn, .lg-karte-hinten { width: 400px; }
  .lg-karte-halter { margin-left: -200px; }
}

/* Unter 1024: Hoehen wachsen mit dem Inhalt, Umschalter behalten ihre Hoehe. */
@media (max-width: 1023px) {
  .lg-seite { --rand: 32px; --versatz: 240px; }
  .lg-hero, .lg-markt, .lg-probleme, .lg-demo, [data-aud="b2b"] .lg-demo, .lg-auswertung, [data-aud="b2b"] .lg-auswertung, .lg-zitat, .lg-einstieg, .lg-quer, .lg-pflichten, .lg-fuss { height: auto; }
  .lg-hero { padding: 64px 0 72px; }
  .lg-hero-raster, [data-aud="b2b"] .lg-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lg-hero-geraet { width: 248px; height: 512px; margin: 0 auto; }
  .lg-hero-geraet-skala { transform: scale(0.8); }
  .lg-lead { max-width: none; }
  .lg-nav-links { display: none; }
  .lg-markt, .lg-pflichten { padding: 80px 0; }
  .lg-beleg-raster { grid-template-columns: minmax(0, 1fr); }
  .lg-probleme { padding: 80px 0 64px; }
  .lg-demo, [data-aud="b2b"] .lg-demo { padding: 80px 0; }
  .lg-demo-raster, [data-aud="b2b"] .lg-demo-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lg-auswertung, [data-aud="b2b"] .lg-auswertung { padding: 80px 0; }
  .lg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-zitat { padding: 96px 0; }
  .lg-quer { padding: 64px 0; }
  .lg-quer-innen { flex-direction: column; align-items: flex-start; gap: 24px; }
  .lg-fuss { padding: 48px 0; }
  .lg-fuss-innen { flex-direction: column; }
  .lg-einstieg { padding: 72px 0; }
  .lg-kontakt { padding: 72px 0; }
  .lg-einstieg-innen { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lg-tabelle { grid-template-columns: minmax(0, 1fr); }
  .lg-tabelle-zeile:first-child { display: none; }
  .lg-tabelle-zelle { border-top: 0; padding: 10px 22px; }
  .lg-tabelle-pflicht { border-top: 1px solid var(--l-linie); padding-top: 22px; }
  .lg-tabelle-zeile:nth-child(2) .lg-tabelle-pflicht { border-top: 0; }
  .lg-tabelle-zelle:last-child { padding-bottom: 22px; }
}

/* Schmal (390): H1 44/1.08, H2 32/1.1, Rand 20 */
@media (max-width: 600px) {
  .lg-seite { --rand: 20px; }
  .lg-body .lg-h1 { font-size: calc(44px * var(--h1-schmal, 1)); line-height: 1.08; white-space: nowrap; }
  .lg-body .lg-h2, .lg-body .lg-h2-52 { font-size: 32px; line-height: 1.1; }
  .lg-nav { height: 72px; }
  .lg-marke-zusatz { display: none; }
  .lg-knopf-verlauf { height: 44px; padding: 0 16px; }
  .lg-hero { padding: 40px 0 56px; }
  .lg-hero-eyebrow { font-size: 11px; letter-spacing: 0.16em; line-height: 1.5; }
  .lg-lead { font-size: 18px; }
  .lg-hero-knoepfe { flex-wrap: wrap; gap: 12px; }
  .lg-knopf-hell, .lg-knopf-rand { height: 52px; padding: 0 22px; font-size: 15px; }
  .lg-hero-kacheln { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lg-hero-kachel { height: auto; min-height: 96px; gap: 8px; }
  .lg-kopf-p { font-size: 17px; line-height: 1.5; }
  .lg-beleg { height: auto; min-height: 176px; gap: 12px; }
  .lg-beleg-zahl { font-size: 38px; }
  /* Koverflow als Wisch-Karussell, Kartenbreite 86 vw; das Umdrehen bleibt. Abstand 14 vw: Die Nachbarkarte beginnt genau am Rand, nie halb im Bild (P15). */
  .lg-deck { height: auto; perspective: none; display: flex; gap: 14vw; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 7vw 8px; scrollbar-width: none; }
  .lg-deck::-webkit-scrollbar { display: none; }
  .lg-karte-halter { position: relative; left: auto; margin-left: 0; flex: 0 0 86vw; width: 86vw; height: 540px; transform: none; opacity: 1 !important; pointer-events: auto !important; scroll-snap-align: center; perspective: 1400px; }
  .lg-karte, .lg-karte-vorn, .lg-karte-hinten { width: 86vw; }
  .lg-karte-titel { font-size: 20px; }
  .lg-karte-koerper { padding: 22px 22px 24px; }
  .lg-karte-kopf { padding: 22px; }
  .lg-karte-hinten { padding: 26px 22px 24px; }
  /* Demo-Schritte als Pillen ueber dem Geraet */
  .lg-schritte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lg-schritt { height: 56px; padding: 0 12px; gap: 10px; border-radius: 999px; }
  .lg-schritt-nr { width: 32px; height: 32px; font-size: 12px; }
  .lg-schritt-titel { font-size: 13px; line-height: 1.2; }
  .lg-schritt-satz { display: none; }
  .lg-demo-geraet { transform: scale(0.94); transform-origin: 50% 0; height: 602px; }
  .lg-fenster { height: 600px; }
  .lg-fenster-inhalt { padding: 18px; }
  .lg-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lg-foto { height: 92px; }
  .lg-foto span { left: 8px; font-size: 11px; }
  .lg-fkacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lg-fkachel { padding: 12px; }
  .lg-fkachel-wert, .lg-fkachel-30 { font-size: 20px; }
  .lg-vergleich { font-size: 13px; }
  .lg-service-raster { grid-template-columns: 76px minmax(0, 1fr) 44px; gap: 8px; }
  .lg-blatt { padding: 18px; }
  .lg-blatt-raster { font-size: 12px; grid-template-columns: 1.7fr 1fr 0.8fr 1.5fr; }
  .lg-blatt-spalte { font-size: 9px; letter-spacing: 0.06em; }
  /* Chart-Karussell: KPI 2 × 2, Chart als senkrechte Balkenliste */
  .lg-umschalter { gap: 8px; }
  .lg-rund-52 { width: 44px; height: 44px; }
  .lg-pillen { display: flex; gap: 6px; overflow: hidden; }
  .lg-pille { flex: 1 1 0; min-width: 0; height: 44px; line-height: 42px; font-size: 12px; padding: 0 8px; }
  .lg-kpi { height: 120px; padding: 16px; }
  .lg-kpi-wert { font-size: 24px; }
  .lg-kpi-text { font-size: 12px; }
  .lg-chart, .lg-chart-fleet { height: 620px; padding: 20px 18px 16px; gap: 14px; }
  .lg-chart-satz { font-size: 17px; }
  .lg-chart-kopf { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lg-chart-flaeche { display: none; }
  .lg-balkenliste { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; min-height: 0; }
  .lg-bl-zeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
  .lg-bl-name { overflow-wrap: anywhere; color: var(--l-text-2); }
  .lg-bl-bahnen { display: flex; flex-direction: column; gap: 3px; }
  .lg-bl-bahn { height: 8px; border-radius: 4px; background: var(--l-grund); overflow: hidden; }
  .lg-bl-wert { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .lg-paare { justify-content: flex-start; }
  .lg-paar { grid-template-columns: 96px minmax(0, 1fr) 72px; gap: 6px 10px; }
  .lg-paar-name { font-size: 13px; }
  .lg-paar-wert { font-size: 12px; }
  .lg-hebel-zeile { grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; }
  .lg-hebel-bahn { grid-column: 1 / -1; order: 3; }
  .lg-hebel-wert { font-size: 15px; }
  .lg-service-zeile { grid-template-columns: 72px minmax(0, 1fr) 44px; gap: 8px; font-size: 12px; }
  .lg-umsatz-kopf { flex-direction: column; gap: 4px; }
  .lg-zitat-satz { font-size: 40px; }
  .lg-quer-satz { font-size: 26px; }
  .lg-einstieg-karte, .lg-kontakt .lg-einstieg-karte { padding: 26px; }
  .lg-einstieg-zahl, .lg-kontakt .lg-einstieg-zahl { font-size: 40px; }
  .lg-fuss { height: auto; }
  .lg-fuss-links { grid-template-columns: repeat(2, auto); column-gap: 24px; }
  .lg-fuss-links a { min-height: 24px; display: inline-flex; align-items: center; }
  .lg-nav-rechts .lg-knopf-verlauf { font-size: 13px; }
}

/* Die Auswertung baut sich auf, wenn sie ins Bild kommt — nicht unsichtbar beim
   Laden. Nur mit Skript (`lg-js`); ohne Skript steht sie gleich im Endzustand. */
.lg-js .lg-auswertung:not(.lg-sichtbar) .lg-ansicht *,
.lg-js .lg-demo:not(.lg-sichtbar) .lg-schirm-inhalt *,
.lg-js .lg-demo:not(.lg-sichtbar) .lg-fenster-inhalt * { animation-play-state: paused; }

/* Die Chartkarte behaelt ihre feste Hoehe (Eigner 470, Fleet 440) — wie in
   der Referenz, wo sie mit Inline-Hoehe steht und bis in den unteren Rand des
   Abschnitts reicht. Ein nachgebender Kasten (gemessen 28.09.: 422 statt 470)
   liess die Fusszeile ueber die Achse laufen. */
/* Meldepflichten: Die Tabelle hat drei Zeilen. In der Referenz verdeckt der
   naechste Abschnitt die dritte, weil 620 px nicht reichen; hier waechst der
   Abschnitt, damit keine Zeile verschwindet (Bericht, Abweichung). */
.lg-pflichten { height: auto; min-height: 620px; }

/* ── Preis-Karussell (Q1b, 28.09.2026 abends) ──
   Eine Karte je Paket im Aufbau der Referenz-Preiskarte, Pfeile mittig links
   und rechts an der Karte, Punkte darunter. Kein Autoplay. */
.lg-paket-karussell { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; column-gap: 12px; row-gap: 14px; min-width: 0; }
.lg-paket-buehne { grid-column: 2; min-width: 0; display: grid; }
/* Alle Karten liegen uebereinander: die Buehne ist so hoch wie die hoechste, beim Blaettern springt nichts. */
.lg-paket-buehne > .lg-paket { grid-area: 1 / 1; }
.lg-paket[hidden] { display: flex; visibility: hidden; }
.lg-paket-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--l-akzent); }
.lg-paket-preis { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lg-paket-einheit { font-size: 14px; color: var(--l-text-2); }
.lg-einstieg-zahl.lg-paket-wort { font-size: 34px; white-space: normal; }
.lg-paket-pfeil { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: rgba(var(--l-tinte-rgb), 0.08); border: 1px solid var(--l-linie); color: var(--l-text-1); cursor: pointer; }
.lg-paket-pfeil:hover { background: rgba(var(--l-tinte-rgb), 0.16); }
.lg-paket-zurueck { grid-column: 1; grid-row: 1; }
.lg-paket-weiter { grid-column: 3; grid-row: 1; }
.lg-paket-punkte { grid-column: 2; display: flex; justify-content: center; gap: 8px; }
.lg-paket-punkt { width: 8px; height: 8px; border-radius: 999px; background: rgba(var(--l-tinte-rgb), 0.25); border: 0; padding: 0; cursor: pointer; }
.lg-paket-punkt[aria-current="true"] { width: 22px; background: var(--l-akzent); }

/* ── Antwort-Bildschirme der Problem-Karten (landing-loesungen.js, 28.09.2026 abends) ── */
.lg-lz { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.lg-lz-teil { display: flex; flex-direction: column; gap: 8px; padding: 6px; margin: -6px; border-radius: 16px; transition: opacity 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease; }
.lg-loesung .lg-lz-teil:not(.lg-an):not(.lg-fertig) { opacity: 0.3; }
.lg-loesung .lg-lz-teil.lg-an { box-shadow: 0 0 0 1.5px rgba(var(--l-akzent-rgb), 0.55); background: rgba(var(--l-glanz-1-rgb), 0.06); }
@media (prefers-reduced-motion: reduce) { .lg-loesung .lg-lz-teil:not(.lg-an):not(.lg-fertig) { opacity: 1; } .lg-lz-teil { transition: none; } }
.lg-lz-zeile { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.lg-lz-zeile > span { color: var(--l-text-2); }
.lg-lz-zeile > b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-lz-leise > b { color: var(--l-text-3); font-weight: 500; text-decoration: line-through; }
.lg-lz-beleg { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--l-karte); font-size: 12.5px; color: var(--l-text-2); }
.lg-lz-beleg svg { color: var(--l-akzent); flex-shrink: 0; }
.lg-lz-beleg span { flex: 1; min-width: 0; }
.lg-lz-beleg b { color: var(--l-text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-lz-summe { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 16px; background: var(--l-karte); }
.lg-lz-summe span { font-size: 13px; color: var(--l-text-2); }
.lg-lz-summe b { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lg-lz-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-lz-foto { height: 64px; border-radius: 14px; display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--l-auf-verlauf); }
.lg-lz-foto-0 { background: linear-gradient(140deg, var(--l-daten-1), var(--l-daten-2)); }
.lg-lz-foto-1 { background: linear-gradient(140deg, var(--l-daten-2), var(--l-daten-3)); }
.lg-lz-foto-2 { background: linear-gradient(140deg, var(--l-daten-3), var(--l-daten-1)); }
.lg-lz-karte { padding: 12px 14px; border-radius: 16px; background: var(--l-karte); display: flex; flex-direction: column; gap: 6px; }
.lg-lz-karte-kopf { display: flex; flex-direction: column; gap: 2px; }
.lg-lz-karte-kopf b { font-size: 14px; font-weight: 600; }
.lg-lz-karte-kopf span { font-size: 11.5px; color: var(--l-text-3); font-variant-numeric: tabular-nums; }
.lg-lz-gross { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lg-lz-gross span { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--l-text-2); }
.lg-lz-abschnitt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l-text-3); }
.lg-lz-balken { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11.5px; }
.lg-lz-balken-name { color: var(--l-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-lz-balken-bahn { height: 8px; border-radius: 8px; background: var(--l-grund); overflow: hidden; }
.lg-lz-balken-fuellung { display: block; height: 100%; border-radius: 8px; background: var(--l-daten-2); }
.lg-lz-balken-fuellung.lg-lz-gut { background: var(--l-status-gut); }
.lg-lz-balken-fuellung.lg-lz-hoch { background: var(--l-status-achtung); }
.lg-lz-balken b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-lz-hinweis { padding: 10px 12px; border-radius: 14px; background: rgba(var(--l-glanz-1-rgb), 0.14); color: var(--l-akzent-hell); font-size: 12.5px; line-height: 1.4; }
.lg-lz-hinweis-warn { background: rgba(var(--l-hinweis-rgb), 0.14); color: var(--l-hinweis); }
.lg-lz-klein { font-size: 11.5px; color: var(--l-text-3); line-height: 1.4; font-variant-numeric: tabular-nums; }
.lg-lz-posten { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--l-karte); font-size: 13px; }
.lg-lz-posten .lg-lz-foto { width: 36px; height: 36px; padding: 0; justify-content: center; align-items: center; border-radius: 10px; flex-shrink: 0; }
.lg-lz-posten > b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-lz-posten-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lg-lz-posten-text b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-lz-posten-text span { font-size: 11px; color: var(--l-text-3); }
.lg-lz-linie { width: 100%; height: 70px; }
.lg-lz-linie polyline { fill: none; stroke: var(--l-daten-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lg-lz-linie circle { fill: var(--l-daten-1); }
.lg-lz-ring-zeile { display: flex; align-items: center; gap: 12px; }
.lg-lz-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.lg-lz-ring-grund { fill: none; stroke: var(--l-grund); stroke-width: 9; }
.lg-lz-ring-wert { fill: none; stroke: var(--l-status-gut); stroke-width: 9; stroke-linecap: round; }
.lg-lz-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lg-lz-ring-text b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-lz-ring-text span { font-size: 9px; line-height: 1.2; color: var(--l-text-3); max-width: 64px; }
.lg-lz-ring-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-lz-ring-rechts .lg-lz-zeile { font-size: 11.5px; flex-direction: column; gap: 0; }
.lg-lz-legende { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--l-text-2); }
.lg-lz-punkt-bb, .lg-lz-punkt-stb { width: 8px; height: 8px; border-radius: 8px; margin-left: 6px; }
.lg-lz-punkt-bb, .lg-lz-bb { background: var(--l-daten-2); }
.lg-lz-punkt-stb, .lg-lz-stb { background: var(--l-status-achtung); }
.lg-lz-vergleich { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; column-gap: 8px; row-gap: 4px; align-items: center; font-size: 11.5px; }
.lg-lz-vergleich-name { grid-row: span 2; color: var(--l-text-2); }
.lg-lz-vergleich-bahn { height: 7px; border-radius: 7px; background: var(--l-grund); overflow: hidden; }
.lg-lz-vergleich-bahn span { display: block; height: 100%; border-radius: 7px; }
.lg-lz-vergleich b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lg-lz-galerie { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 62px 62px; gap: 6px; }
.lg-lz-bild { border-radius: 14px; display: flex; align-items: flex-end; padding: 7px 8px; font-size: 10px; font-weight: 600; color: var(--l-auf-verlauf); line-height: 1.2; }
.lg-lz-bild-0 { grid-row: span 2; background: linear-gradient(160deg, #7bbeff, #1f7ad6 55%, #0f3d66); color: #eef4f2; }
.lg-lz-bild-1 { background: linear-gradient(160deg, #ffc24b, #ff8a3d 60%, #8b6cff); }
.lg-lz-bild-2 { background: linear-gradient(160deg, #8ff8d6, #2be5a8 55%, #1f7ad6); }
.lg-lz .lg-notiz { font-size: 13.5px; padding: 10px 12px; }
.lg-lz-route { width: 100%; height: 90px; border-radius: 16px; background: #10263a; }
.lg-lz-route .lg-lz-kueste { fill: none; stroke: var(--l-text-1); stroke-opacity: 0.1; stroke-width: 10; }
.lg-lz-route polyline { fill: none; stroke: var(--l-daten-1); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lg-lz-route circle { fill: var(--l-text-1); }
.lg-lz-teilen { height: 40px; border-radius: 12px; background: var(--l-verlauf); color: var(--l-auf-verlauf); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.lg-lz-tabelle-zeile { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--l-karte); font-size: 11.5px; }
.lg-lz-tabelle-zeile > span:nth-child(2) { color: var(--l-text-3); }
.lg-lz-tabelle-kopf { background: none; padding-top: 0; padding-bottom: 0; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--l-text-3); }
.lg-lz-status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.lg-lz-status::before { content: ''; width: 6px; height: 6px; border-radius: 6px; background: currentColor; }
.lg-lz-status-ok { background: rgba(var(--l-glanz-1-rgb), 0.14); color: var(--l-status-gut); }
.lg-lz-status-warn { background: rgba(var(--l-hinweis-rgb), 0.14); color: var(--l-status-faellig); }
.lg-lz-status-bad { background: rgba(255, 106, 61, 0.16); color: var(--l-status-achtung); }
.lg-lz-befund { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; border: 1px dashed rgba(255, 106, 61, 0.55); font-size: 12px; color: var(--l-text-hell); }
.lg-lz-befund svg { color: var(--l-status-achtung); flex-shrink: 0; }
.lg-lz-unterschriften { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-lz-unterschriften span { display: flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 12px; background: var(--l-karte); font-size: 11px; color: var(--l-text-2); }
.lg-lz-unterschriften svg { color: var(--l-status-gut); flex-shrink: 0; }
.lg-lz-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lg-lz-drei .lg-phone-kachel { padding: 10px; }
.lg-lz-boot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--l-karte); font-size: 13px; }
.lg-lz-boot > b { font-weight: 600; }

/* Schmale Telefone (360–430): lange Woerter in der Kursivzeile und der Nav-Knopf der Flottenseite liefen ueber den Rand (gemessen 28.09.2026). */
@media (max-width: 480px) {
  /* Die Hero-Zeile ist sonst nowrap; laengere Sprachen brechen hier um statt abgeschnitten zu werden. */
  .lg-body .lg-h1 { white-space: normal; overflow-wrap: break-word; }
  .lg-body .lg-h2 { overflow-wrap: break-word; }
  .lg-nav-rechts { gap: 12px; }
  .lg-nav-rechts .lg-knopf-verlauf { padding: 0 12px; font-size: 12px; }
}
@media (max-width: 380px) {
  .lg-nav-rechts { gap: 8px; }
  .lg-nav-rechts .lg-knopf-verlauf { padding: 0 10px; font-size: 11px; }
}

/* ── Befunde 28.09.2026 abends (Ordner „landing page befunde 28.09", gemessen bei 440 pt) ── */

/* Wortmarke wie festgelegt: „Log" im Markenverlauf, „una" weiss — in Nav und Fuss. */
.lg-wortmarke { font-weight: 700; letter-spacing: -0.03em; color: var(--l-text-1); }
.lg-wm-log { background: var(--l-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lg-fuss-wort { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }

/* Hero-Knoepfe: niedriger, gleich breit, der erste im Verlauf statt hartem Weiss. */
.lg-hero-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.lg-knopf-hell, .lg-knopf-rand { height: 48px; padding: 0 18px; justify-content: center; font-size: 15px; }
.lg-knopf-hell { background: var(--l-verlauf); font-weight: 600; }
.lg-body a.lg-knopf-hell, .lg-body a.lg-knopf-hell:hover { color: var(--l-auf-verlauf); }

/* Hero-Kennzahlen: eine Flaeche mit Trennlinien, Zahlen im Verlauf — keine drei Einzelkaesten. */
.lg-hero-kacheln { gap: 0; border-radius: 20px; background: rgba(var(--l-karte-rgb), 0.72); border: 1px solid var(--l-linie); overflow: hidden; }
.lg-hero-kachel { height: auto; min-height: 0; padding: 18px 20px; gap: 6px; justify-content: flex-start; background: none; border: 0; border-radius: 0; }
.lg-hero-kachel + .lg-hero-kachel { border-left: 1px solid var(--l-linie); }
.lg-zahl-verlauf { background: var(--l-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lg-hero-kachel-text { line-height: 1.4; }

/* Charterwoche: das Fenster waechst mit dem Inhalt; die Rueckgabe rechnet die Kaution ab. */
/* Desktop: feste 540 wie der Rest des Rasters — der Inhalt ist so gesetzt, dass jeder Tag hineinpasst (gemessen je Tag). */
.lg-fenster { height: 540px; }
.lg-fenster-inhalt { padding: 20px 28px; gap: 10px; }
.lg-foto { height: 96px; }
.lg-flinie { padding: 10px 0; }
.lg-vergleich-zelle { padding: 10px 0; }
.lg-abrechnung { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--l-grund-rgb), 0.6); border: 1px solid var(--l-linie); font-size: 13px; }
.lg-abrechnung-zeile { display: flex; justify-content: space-between; gap: 12px; }
.lg-abrechnung-zeile span { color: var(--l-text-2); }
.lg-abrechnung-zeile b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-abrechnung-summe { padding-top: 8px; border-top: 1px solid var(--l-linie); }
.lg-abrechnung-summe span { color: var(--l-text-1); font-weight: 600; }

.lg-pille-zahl { display: none; }

/* Tablet und Telefon: eine Pille in voller Breite, die Pfeile schalten zur naechsten. */
@media (max-width: 760px) {
  .lg-pillen { display: block; min-width: 0; }
  .lg-pille { display: none; width: 100%; flex: none; height: 44px; line-height: 42px; font-size: 14px; padding: 0 16px; }
  .lg-pille.lg-an { display: block; }
  .lg-pille-zahl { display: inline; margin-left: 8px; font-weight: 500; opacity: 0.65; }
  /* Querverweis: Text ueber die ganze Breite, Knopf darunter mittig. */
  .lg-quer-innen { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 24px; padding: 28px 24px; }
  .lg-quer .lg-knopf-akzent { justify-self: center; }
  .lg-quer-satz { font-size: 26px; line-height: 1.2; }
}

@media (max-width: 600px) {
  .lg-hero-knoepfe { max-width: none; gap: 10px; }
  .lg-knopf-hell, .lg-knopf-rand { height: 44px; padding: 0 12px; font-size: 14px; }
  .lg-hero-kacheln { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-hero-kachel { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px; min-height: 0; }
  .lg-hero-kachel + .lg-hero-kachel { border-left: 0; border-top: 1px solid var(--l-linie); }
  .lg-hero-kachel-zahl { font-size: 24px; }
  .lg-hero-kachel-text { font-size: 13px; }
  /* Das Telefon im Hero als Anschnitt mit Auslauf statt allein auf 700 pt Dunkel. */
  .lg-hero-geraet { width: 100%; height: 420px; margin: 32px 0 0; overflow: hidden; display: flex; justify-content: center; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .lg-hero-geraet-skala { flex-shrink: 0; transform: scale(0.82); transform-origin: 50% 0; }
  /* Charts: so hoch wie ihr Inhalt, kein Leerraum unter der Balkenliste. */
  .lg-chart, .lg-chart-fleet { height: auto; }
  .lg-balkenliste { flex-grow: 0; }
  /* Telefon: so hoch wie der Tag, kein Leerraum darunter (Carolin, 28.09.2026). */
  .lg-fenster { height: auto; min-height: 0; }
  .lg-fenster-inhalt { gap: 12px; }
}
/* Auch der Knopf im Paket-Karussell im Verlauf, nicht in hartem Weiss; niedriger wie die Hero-Knoepfe. */
.lg-einstieg-knopf { height: 48px; background: var(--l-verlauf); font-size: 15px; }
.lg-body a.lg-einstieg-knopf, .lg-body a.lg-einstieg-knopf:hover { color: var(--l-auf-verlauf); }
/* Balkenliste: feste Wertspalte, damit alle Balken an derselben Stelle beginnen. */
@media (max-width: 600px) { .lg-bl-zeile { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 56px; } .lg-bl-wert { text-align: right; } }

/* ── Skipper (#skipper) ── */
.lg-skipper { padding: 80px 0; }
.lg-skipper-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lg-skipper-karte { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: rgba(var(--l-karte-rgb), 0.72); border: 1px solid var(--l-linie); }
.lg-skipper-nr { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; background: var(--l-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lg-skipper-titel { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.lg-skipper-text { font-size: 14px; line-height: 1.5; color: var(--l-text-2); }
.lg-skipper-frei { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 28px 32px; border-radius: 24px; background: radial-gradient(520px 240px at 100% 0%, rgba(var(--l-glanz-3-rgb), 0.22), transparent 70%), var(--l-karte); border: 1px solid var(--l-linie); }
.lg-skipper-frei-text { display: flex; flex-direction: column; gap: 8px; }
.lg-skipper-frei-titel { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.lg-skipper-preis { font-size: 14px; color: var(--l-text-1); font-weight: 500; }
.lg-skipper-knopf { min-width: 200px; }
@media (max-width: 1023px) { .lg-skipper-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .lg-skipper { padding: 56px 0; }
  .lg-skipper-frei { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
  .lg-skipper-knopf { justify-self: center; }
}
@media (max-width: 600px) {
  .lg-skipper-raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lg-skipper-karte { padding: 18px; gap: 6px; }
  .lg-skipper-frei-titel { font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Landing 30.09.2026 — Eigner, Skipper, Fleet nach Figma
   „Loguna – Marketing" › Landingpages (Freigabe Carolin 30.09.2026).

   Alles hier haengt an `.lg-v` (die Wurzel, die `landing-bau.js` schreibt)
   und liest die Foundations-Variablen aus `tokens.css`. Drei Fassungen wie
   in Figma: ab 1200 px die 1440er-Frames, 600 bis 1199 px die 768er,
   darunter die 390er. Die Regeln oberhalb dieses Abschnitts gehoeren zur
   Fassung vom 28.09.; sie greifen hier nicht, weil keine ihrer Klassen mehr
   gezeichnet wird (siehe Bericht zum Auftrag).
   ════════════════════════════════════════════════════════════════════════ */
.lg-v {
  --lg-v-inhalt: var(--size-inhalt-desktop);
  background: var(--semantic-bg-base);
  color: var(--semantic-text-primary);
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "lnum" 1;
  /* Figma setzt Inter ohne optische Groesse (Inter Light/Semi Bold, statisch).
     Mit `auto` zieht der Browser bei 96–144 px den Display-Schnitt heran, der
     schmaler laeuft — die Zeilen braechen anders als im Frame. */
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  min-width: 0;
  overflow-x: clip;
}
.lg-v *, .lg-v *::before, .lg-v *::after { box-sizing: border-box; }
.lg-v h1, .lg-v h2, .lg-v h3, .lg-v p, .lg-v ul { margin: 0; padding: 0; }
.lg-v ul { list-style: none; }
.lg-v a { color: inherit; text-decoration: none; }
.lg-v a:hover { color: inherit; }
.lg-v :focus-visible { outline: var(--size-border-fokus) solid var(--role-accent); outline-offset: var(--size-border-fokus-abstand); }
.lg-v strong { font-weight: 600; }
/* `.lg-body p { font-family: inherit }` aus der Fassung vom 28.09. wiegt schwerer als eine einzelne Klasse. */
.lg-v p.lg-v-ort, .lg-v p.lg-v-herkunft, .lg-v p.lg-v-umfang, .lg-v p.lg-v-plattformen { font-family: "JetBrains Mono", ui-monospace, monospace; }
.lg-v-seite { display: flex; flex-direction: column; gap: var(--size-space-8); }

/* ── Fotos: Ausschnitt wie in Figma — volle Breite, senkrecht um --y verschoben ── */
.lg-v-foto { position: absolute; inset: 0; display: block; overflow: hidden; }
.lg-v-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--y, 50%); }

/* ── Leiste ── */
.lg-v-nav { display: flex; align-items: center; gap: var(--size-space-5); width: min(var(--lg-v-inhalt), calc(100% - 80px)); margin: 0 auto; position: relative; }
.lg-v-marke { flex: 1 0 0; display: inline-flex; align-items: center; gap: var(--size-space-2); min-width: 0; }
/* Bildmarke und Wortmarke, wie sie sind: „Log" im Markenverlauf, „una" in ruhiger Tinte. */
.lg-v-zeichen { display: block; flex: none; }
.lg-v-zeichen-kreis { fill: var(--semantic-bg-base); }
.lg-v-stop-1 { stop-color: var(--marke-spur-1); }
.lg-v-stop-2 { stop-color: var(--marke-spur-2); }
.lg-v-stop-3 { stop-color: var(--marke-spur-3); }
.lg-v-wortmarke { font-weight: 600; font-size: var(--size-type-h3-groesse); line-height: var(--size-type-h3-zeile); color: var(--semantic-text-primary); }
/* Umschalter Eigner · Skipper · Charter/Flotte — dezent, die aktuelle Seite markiert. */
.lg-v-seiten { display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--size-space-1); padding: 2px; border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: var(--size-radius-pill); background: color-mix(in srgb, var(--semantic-bg-base) 70%, transparent); }
.lg-v-seiten a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 var(--size-space-3); border-radius: var(--size-radius-pill); font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); white-space: nowrap; }
.lg-v .lg-v-seiten a:hover { color: var(--semantic-text-primary); }
.lg-v .lg-v-seiten a[aria-current="page"] { background: var(--semantic-bg-raised); color: var(--role-accent); font-weight: 600; }
/* Die Pille der Zielgruppe gibt es nur am Telefon (unter 600 px). */
.lg-v-rolle { display: none; }
/* Die Ortszeile in zwei Teilen gibt es nur am Telefon; darueber steht sie als ein Textlauf. */
.lg-v-ort-wo, .lg-v-ort-wann { display: none; }
.lg-v a.lg-v-preise-link { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); white-space: nowrap; }
.lg-v a.lg-v-preise-link:hover { color: var(--semantic-text-primary); }
/* „Anmelden" und die Crew-Handlung — Textknoepfe in der Rollenfarbe, kein Verlauf (Figma-Komponente Button). */
.lg-v a.lg-v-anmelden, .lg-v .lg-v-crew {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--size-space-2);
  height: var(--size-button-secondary); max-width: var(--size-button-max-breite);
  padding: var(--size-space-1) var(--size-space-3); border-radius: var(--size-radius-pill);
  background: none; border: 0; box-shadow: none;
  color: var(--role-accent); font-weight: 600; font-size: var(--size-type-knopf-groesse); line-height: var(--size-type-knopf-zeile);
  white-space: nowrap; text-decoration: none; font-family: inherit; min-width: 0; width: auto; position: static;
}
.lg-v-crew { cursor: pointer; }
/* Die Crew-Einladung steht auf dem Foto (Hero, Schluss): dieselbe ruhige Flaeche wie die Callouts, damit sie AA erreicht (gemessen). */
.lg-v .lg-v-crew { background: color-mix(in srgb, var(--semantic-bg-base) 90%, transparent); padding: var(--size-space-1) var(--size-space-4); }
.lg-v a.lg-v-anmelden:hover, .lg-v .lg-v-crew:hover {
  color: var(--role-accent); background: color-mix(in srgb, var(--role-accent) var(--size-zustand-hover), transparent);
}
.lg-v .lg-v-crew:hover { background: color-mix(in srgb, var(--role-accent) var(--size-zustand-hover), var(--semantic-bg-base)); }

/* ── Hero ── */
.lg-v-hero {
  /* Eine Spalte, nie breiter als die Seite: Sonst weitet eine lange Headline die Spalte, und Leiste samt „Anmelden" ragen ueber den Rand (gemessen 30.09.2026: en 401 px, hr 426 px bei 390). */
  position: relative; display: grid; justify-items: center; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto 1fr auto;
  grid-template-areas: "nav" "." "mitte" "store" "." "ort";
  height: var(--size-breakpoint-desktop-hoehe);
  padding: var(--size-space-5) 0 var(--size-space-6);
}
.lg-v-hero-bild { position: absolute; inset: 0; }
/*
  Flotten- und Skipper-Hero: Ueber der Marina liegt heller Nebel, ueber der
  Yacht Mondlicht in den Wolken, genau dort, wo die Textgruppe steht — gemessen am 30.09.2026 erreichte die Unterzeile dort nur
  2,0 bis 3,3:1. Eine ruhige Abdunklung von oben, die vor den Ruempfen endet;
  kein Leuchten, keine Farbe.
*/
.lg-v[data-rolle="fleet"] .lg-v-hero-bild::after,
.lg-v[data-rolle="skipper"] .lg-v-hero-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--semantic-bg-base) 72%, transparent) 0%,
    color-mix(in srgb, var(--semantic-bg-base) 62%, transparent) 50%,
    transparent 64%);
}
.lg-v-hero > .lg-v-nav { grid-area: nav; }
.lg-v-mitte { grid-area: mitte; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--size-space-5); text-align: center; }
.lg-v-h1 { display: flex; flex-direction: column; font-weight: 300; font-size: var(--size-type-display-l-groesse); line-height: var(--size-type-display-l-zeile); letter-spacing: -0.02em; white-space: nowrap; color: var(--semantic-text-primary); font-family: inherit; }
.lg-v-lead { font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: var(--semantic-text-primary); }
.lg-v-hero > .lg-v-store { grid-area: store; margin-top: var(--size-space-5); }
.lg-v-ort { grid-area: ort; position: relative; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--size-type-meta-groesse); line-height: var(--size-type-meta-zeile); letter-spacing: 0.02em; color: var(--semantic-text-secondary); text-align: center; }

/*
  Hero ab 1200 px, alle drei Seiten (Carolin, 30.09.2026: „das boot sollte
  mehr zu sehen sein … ohne das schrift im boot hängt"; Skipper: „Segler etwas
  weiter nach unten"; Flotte: Ruempfe am Steg sichtbar). Die Textgruppe steht
  oben unter der Leiste statt in der Mitte, die Orts- und Zeitzeile beginnt
  links an der Leistenkante, das Boot steht darunter. Eigner: --y = 655/1152
  haelt die Reling breitenunabhaengig bei ~512 px; Skipper und Flotte haben
  einen Anker (landing-bau.js).
*/
@media (min-width: 1200px) {
  .lg-v-hero { grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "nav" "mitte" "store" "." "ort"; container-type: inline-size; }
  .lg-v-hero .lg-v-mitte { margin-top: var(--size-space-8); }
  .lg-v-hero .lg-v-ort { justify-self: start; margin-left: calc((100% - min(var(--lg-v-inhalt), calc(100% - 80px))) / 2); text-align: left; }
  /* Flotte: links stehen die Boote bis an den unteren Rand, rechts liegt Wasser — dort die Ortszeile. */
  .lg-v-hero .lg-v-ort[data-rechts] { justify-self: end; margin-left: 0; margin-right: calc((100% - min(var(--lg-v-inhalt), calc(100% - 80px))) / 2); }
  /* Skipper und Flotte: das Boot ueber einen Anker auf fester Hoehe (landing-bau.js, anker()). */
  .lg-v-hero .lg-v-foto img { object-position: var(--x, 50%) var(--anker, var(--y, 50%)); }
  /* Der Schluss der Flotte (Katamaran von oben) haengt ebenfalls an einem Anker. */
  .lg-v-schluss { container-type: inline-size; }
  .lg-v-schluss .lg-v-foto img { object-position: var(--x, 50%) var(--anker, var(--y, 50%)); }
}

/*
  Die Orts- und Zeitzeile steht auf dem Foto, oft auf hellem Nebel oder
  Wasser; gemessen am 30.09.2026 erreichte sie dort 1:1 bis 2,9:1. Dieselbe
  ruhige Flaeche wie unter den Callouts, nur so breit wie der Text.
*/
.lg-v-hero .lg-v-ort {
  width: fit-content; max-width: 100%; padding: 0 var(--size-space-2); border-radius: var(--size-radius-card);
  background: color-mix(in srgb, var(--semantic-bg-base) 90%, transparent);
}

/* ── Store-Bereich (Figma „Landing/Store-Bereich") ── */
.lg-v-store { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--size-space-3); }
/*
  „Bald verfügbar für iOS Android" (Carolin, 30.09.2026): zart, unter der
  Haupthandlung. iOS und Android sind dieselbe Regel — gleiche Groesse, gleiche
  Gestaltung, Wortmarken in Text. Auf dem Foto dieselbe ruhige Flaeche wie die
  Ortszeile, damit auch die zarte Zeile 4,5:1 erreicht.
*/
.lg-v p.lg-v-bald-fuer {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--size-space-2);
  padding: 0 var(--size-space-2); border-radius: var(--size-radius-card);
  background: color-mix(in srgb, var(--semantic-bg-base) 90%, transparent);
  font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary);
}
.lg-v-plattform { font-weight: 600; letter-spacing: 0.01em; color: var(--semantic-text-secondary); }

/* ── Abschnitte: Kopf mit Stichwort, Zahl, Aussage, Herkunft ── */
.lg-v-abschnitt { display: flex; flex-direction: column; align-items: center; gap: var(--size-space-6); padding-top: var(--size-space-8); }
.lg-v-kopf { display: flex; flex-direction: column; align-items: center; gap: var(--size-space-2); text-align: center; white-space: nowrap; }
.lg-v-stichwort { font-weight: 500; font-size: var(--size-type-label-groesse); line-height: var(--size-type-label-zeile); letter-spacing: 0.01em; color: var(--role-accent); }
.lg-v-h2 { display: flex; flex-direction: column; align-items: center; gap: var(--size-space-2); font-family: inherit; }
.lg-v-zahl { font-weight: 300; font-size: var(--size-type-display-xl-groesse); line-height: var(--size-type-display-xl-zeile); letter-spacing: -0.02em; color: var(--semantic-text-primary); }
.lg-v-aussage { font-weight: 600; font-size: var(--size-type-h2-groesse); line-height: var(--size-type-h2-zeile); letter-spacing: -0.005em; color: var(--semantic-text-primary); }
.lg-v-herkunft { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--size-type-meta-groesse); line-height: var(--size-type-meta-zeile); letter-spacing: 0.02em; color: var(--semantic-text-secondary); }

/* ── Preise ── */
/* Karten einer Reihe sind gleich hoch, ihr Inhalt steht oben (Carolin, 30.09.2026). */
.lg-v-tarife { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; gap: var(--size-space-5); width: min(var(--lg-v-inhalt), calc(100% - 80px)); }
/*
  Zwei Seiten je Karte (Carolin, 01.10.2026): vorn Preis, hinten was drin ist.
  Beide liegen im selben Rasterfeld — die Karte ist so hoch wie die hoehere
  Seite, beim Drehen springt nichts. Die verdeckte Seite traegt `inert`
  (landing-28-09.js). Ohne Bewegung (reduced motion) wird nur umgeschaltet.
*/
.lg-v-tarif { min-width: 0; display: grid; perspective: 1600px; cursor: pointer; }
.lg-v-tarif-seite {
  grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--size-space-2);
  padding: var(--size-card-padding); background: var(--semantic-bg-raised);
  border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: var(--size-radius-card);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s;
}
.lg-v-tarif-hinten { transform: rotateY(180deg); }
.lg-v-tarif[data-gedreht] .lg-v-tarif-vorn { transform: rotateY(-180deg); }
.lg-v-tarif[data-gedreht] .lg-v-tarif-hinten { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .lg-v-tarif:hover .lg-v-tarif-seite { border-color: var(--semantic-border-strong, var(--semantic-text-secondary)); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-v-tarif-seite, .lg-v-tarif[data-gedreht] .lg-v-tarif-seite { transition: none; transform: none; }
  .lg-v-tarif-hinten, .lg-v-tarif[data-gedreht] .lg-v-tarif-vorn { visibility: hidden; }
  .lg-v-tarif[data-gedreht] .lg-v-tarif-hinten { visibility: visible; }
}
/* Der Knopf vorn steht am Fuss der Karte, in jeder Karte einer Reihe auf derselben Hoehe; 48 px Tippflaeche. */
.lg-v-tarif-dreh {
  display: inline-flex; align-items: center; gap: var(--size-space-2); min-height: 48px; margin-top: auto; padding: 0 var(--size-space-4) 0 var(--size-space-3);
  border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: var(--size-radius-pill);
  background: none; font: inherit; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); font-weight: 600; color: var(--semantic-text-primary); cursor: pointer;
}
.lg-v-tarif-vorn .lg-v-tarif-dreh { margin-top: auto; }
.lg-v-tarif-vorn .lg-v-umfang { margin-bottom: var(--size-space-3); }
.lg-v-tarif-dreh:focus-visible, .lg-v-tarif-funktionen:focus-visible, .lg-v-tarif-hinten:focus-visible { outline: 2px solid var(--role-accent); outline-offset: 2px; }
.lg-v-tarif-titel { font-weight: 600; font-size: var(--size-type-h3-groesse); line-height: var(--size-type-h3-zeile); color: var(--semantic-text-primary); }
.lg-v-tarif-basis { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.lg-v-leistungen { display: flex; flex-direction: column; gap: var(--size-space-2); margin: 0; padding: 0; list-style: none; }
.lg-v-leistungen li { display: flex; align-items: flex-start; gap: var(--size-space-2); font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-primary); }
.lg-v-leistungen li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--role-accent); }
.lg-v-leistungen li[data-immer-frei] span { color: var(--role-accent); font-weight: 600; }
.lg-v-tarif-funktionen { display: inline-flex; align-items: center; gap: var(--size-space-2); min-height: 48px; margin-top: auto; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); font-weight: 600; color: var(--role-accent); }
.lg-v-tarif-funktionen svg, .lg-v-tarif-dreh svg { flex: none; width: 18px; height: 18px; }
.lg-v-tarif-hinten .lg-v-tarif-dreh { margin-top: 0; }
.lg-v .lg-paket-name { font-family: inherit; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: var(--size-type-h3-groesse); line-height: var(--size-type-h3-zeile); color: var(--semantic-text-primary); white-space: nowrap; background: none; -webkit-text-fill-color: currentColor; }
.lg-v-bald { font-weight: 500; font-size: var(--size-type-label-groesse); line-height: var(--size-type-label-zeile); letter-spacing: 0.01em; color: var(--role-accent); }
.lg-v-preis { font-weight: 600; font-size: var(--size-type-kennzahl-groesse); line-height: var(--size-type-kennzahl-zeile); letter-spacing: -0.01em; color: var(--semantic-text-primary); font-feature-settings: "lnum" 1, "pnum" 1; }
.lg-v-zeitraum { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.lg-v-umfang { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--size-type-meta-groesse); line-height: var(--size-type-meta-zeile); letter-spacing: 0.02em; color: var(--semantic-text-secondary); }
/* Jaehrlich / monatlich — dezent, ueber den Karten; jaehrlich ist voreingestellt, monatlich voll waehlbar (Regel 25). */
/* Zwei exakt gleich breite Segmente (Carolin, 30.09.2026) — Raster, nicht Inhaltsbreite. */
.lg-v-zahlweise { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-space-1); padding: 2px; border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: var(--size-radius-pill); }
.lg-v-zahlweise button { min-height: 32px; padding: 0 var(--size-space-4); border: 0; border-radius: var(--size-radius-pill); background: none; font: inherit; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); cursor: pointer; }
.lg-v-zahlweise button[aria-pressed="true"] { background: var(--semantic-bg-raised); color: var(--semantic-text-primary); font-weight: 600; }
.lg-v-ersparnis { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--role-accent); }
.lg-v-tarif[data-zahlweise="monat"] .lg-v-ersparnis { visibility: hidden; }
/* Der Satz fuer Besucher, die chartern statt besitzen (Toern-Pass, 30.09.2026): ruhig, unter den Karten, keine Karte. */
.lg-v p.lg-v-charter-satz { width: min(var(--lg-v-inhalt), calc(100% - 80px)); max-width: 720px; text-align: center; font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: var(--semantic-text-secondary); }
/* Nach oben: dezent, 48 px Tippflaeche, Lucide-Pfeil, kein Glow. Erscheint nach dem ersten Bildschirm und weicht dem Fuss (landing-28-09.js). */
.lg-v-nach-oben { position: fixed; right: var(--size-space-5); bottom: var(--size-space-5); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--size-radius-pill); background: var(--semantic-bg-raised); border: var(--size-border-breite) solid var(--semantic-border-strong); color: var(--semantic-text-primary); }
.lg-v a.lg-v-nach-oben:hover { color: var(--role-accent); }
.lg-v-nach-oben[hidden] { display: none; }
.lg-v-dialog-text, .lg-v-dialog-hinweis { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.lg-v-dialog-hinweis a { color: var(--role-accent); text-decoration: underline; }

/* ── Fragen ── */
.lg-v-fragen { display: flex; flex-direction: column; gap: var(--size-space-2); width: min(var(--lg-v-inhalt), calc(100% - 80px)); margin: 0 auto; padding-top: var(--size-space-8); }
.lg-v-fragen-h { font-family: inherit; font-weight: 600; font-size: var(--size-type-h1-groesse); line-height: var(--size-type-h1-zeile); letter-spacing: -0.01em; color: var(--semantic-text-primary); }
.lg-v-frage { border-bottom: var(--size-border-breite) solid var(--semantic-border-subtle); }
.lg-v-frage summary { display: flex; align-items: center; gap: var(--size-space-3); padding: var(--size-space-4) 0; cursor: pointer; list-style: none; font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: var(--semantic-text-primary); }
.lg-v-frage summary::-webkit-details-marker { display: none; }
.lg-v-frage summary > span { flex: 1 0 0; min-width: 0; }
.lg-v-chevron { flex: none; color: var(--semantic-text-secondary); transition: transform 0.2s ease; }
.lg-v-frage[open] .lg-v-chevron { transform: rotate(180deg); }
.lg-v-frage > p { padding: 0 var(--size-space-7) var(--size-space-4) 0; font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: var(--semantic-text-secondary); }

/* ── Schluss ── */
.lg-v-schluss { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--size-space-5); height: var(--size-breakpoint-desktop-hoehe); padding-top: var(--size-space-8); }
.lg-v-schluss-bild { position: absolute; inset: 0; }
.lg-v-schluss-h { position: relative; display: flex; flex-direction: column; align-items: center; font-family: inherit; font-weight: 300; font-size: var(--size-type-display-l-groesse); line-height: var(--size-type-display-l-zeile); letter-spacing: -0.02em; white-space: nowrap; text-align: center; color: var(--semantic-text-primary); }

/*
  Schluss mit ganzem Motiv (Carolin, 01.10.2026, Flotte): ab 600 px steht das
  4:5-Bild in voller Hoehe statt auf die Breite gezogen — nichts verzerrt,
  nichts gestaucht, unten bleibt das Kielwasser im Bild. Die Seiten laufen
  ueber eine Maske in den Grund aus; ihre Lage folgt aus der Abschnittshoehe
  (4:5, also Bildbreite = 0,8 × Hoehe). Wo das Bild breiter als der Abschnitt
  waere (768 px), liegt die Maske ausserhalb und wirkt nicht.
*/
@media (min-width: 600px) {
  .lg-v-schluss[data-ganz] { --schluss-h: var(--size-breakpoint-tablet-hoehe); }
  .lg-v-schluss[data-ganz] .lg-v-foto img { object-fit: contain; object-position: 50% 100%; }
  .lg-v-schluss[data-ganz] .lg-v-foto {
    -webkit-mask-image: linear-gradient(to right, transparent calc(50% - 0.4 * var(--schluss-h)), #000 calc(50% - 0.4 * var(--schluss-h) + 160px), #000 calc(50% + 0.4 * var(--schluss-h) - 160px), transparent calc(50% + 0.4 * var(--schluss-h)));
    mask-image: linear-gradient(to right, transparent calc(50% - 0.4 * var(--schluss-h)), #000 calc(50% - 0.4 * var(--schluss-h) + 160px), #000 calc(50% + 0.4 * var(--schluss-h) - 160px), transparent calc(50% + 0.4 * var(--schluss-h)));
  }
}
@media (min-width: 1200px) {
  .lg-v-schluss[data-ganz] { --schluss-h: var(--size-breakpoint-desktop-hoehe); }
}
/*
  Der weiche Grund (Skipper, Carolin 01.10.2026): Wo der Rand des Motivs nicht
  dunkel ist, laeuft die Maske in dasselbe Foto aus, weichgezeichnet und
  abgedunkelt — keine Saeule, keine harte Kante. Er liegt unter dem Foto
  (eigene Stapelebene) und nur dort, wo das ganze Motiv steht.
*/
.lg-v-schluss-grund { display: none; }
@media (min-width: 600px) {
  .lg-v-schluss[data-ganz] .lg-v-schluss-bild { z-index: 0; overflow: hidden; }
  .lg-v-schluss[data-ganz] .lg-v-schluss-grund { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  .lg-v-schluss-grund img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: blur(48px) brightness(0.35) saturate(0.85); transform: scale(1.15); }
}

/* ── Fuss ── */
.lg-v-fuss { display: flex; flex-direction: column; gap: var(--size-space-5); width: min(var(--lg-v-inhalt), calc(100% - 80px)); margin: var(--size-space-8) auto 0; padding-bottom: var(--size-space-8); }
.lg-v-fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--size-space-5); }
.lg-v-fuss-links { display: flex; flex-wrap: wrap; gap: 0 var(--size-space-4); }
.lg-v-fuss-links a, .lg-v-sprachen a { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); white-space: nowrap; }
.lg-v-fuss-links a:hover, .lg-v-sprachen a:hover { color: var(--semantic-text-primary); }
.lg-v-plattformen { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--size-type-meta-groesse); line-height: var(--size-type-meta-zeile); letter-spacing: 0.02em; color: var(--semantic-text-secondary); }
.lg-v-sprachen { display: flex; gap: var(--size-space-4); }
.lg-v-sprachen a[aria-current="true"] { color: var(--role-accent); }

/* ── Android-Dialog: E-Mail-Feld mit Einwilligung ── */
.lg-v-dialog { width: min(var(--size-dialog-breite), calc(100% - 2 * var(--size-space-4))); padding: var(--size-space-5); background: var(--semantic-bg-overlay); color: var(--semantic-text-primary); border: var(--size-border-breite) solid var(--semantic-border-strong); border-radius: var(--size-radius-card); }
.lg-v-dialog::backdrop { background: rgb(7 11 20 / 0.72); }
.lg-v-dialog-form { display: flex; flex-direction: column; gap: var(--size-space-4); }
.lg-v-dialog-h { font-family: inherit; font-weight: 600; font-size: var(--size-type-h3-groesse); line-height: var(--size-type-h3-zeile); }
.lg-v-feld { display: flex; flex-direction: column; gap: var(--size-space-2); font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.lg-v-feld input { height: var(--size-input); padding: 0 var(--size-space-3); font: inherit; font-size: var(--size-type-body-groesse); color: var(--semantic-text-primary); background: var(--semantic-bg-base); border: var(--size-border-breite) solid var(--semantic-border-strong); border-radius: var(--size-radius-card); }
.lg-v-feld input:focus-visible { border-color: var(--role-accent); }
.lg-v-falle { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.lg-v-einwilligung { display: flex; align-items: flex-start; gap: var(--size-space-3); font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.lg-v-einwilligung input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--role-accent); }
.lg-v-einwilligung a { color: var(--role-accent); text-decoration: underline; }
.lg-v-meldung { min-height: var(--size-type-small-zeile); font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.lg-v-meldung[data-art="fehler"] { color: var(--semantic-status-alarm); }
.lg-v-meldung[data-art="ok"] { color: var(--semantic-status-ok); }
.lg-v-dialog-knoepfe { display: flex; flex-wrap: wrap; gap: var(--size-space-3); }
.lg-v-senden, .lg-v-schliessen { height: var(--size-button-primary); padding: 0 var(--size-space-5); border-radius: var(--size-radius-pill); font: inherit; font-weight: 600; font-size: var(--size-type-knopf-groesse); cursor: pointer; }
.lg-v-senden { background: var(--role-accent); color: var(--role-on-accent); border: 0; }
.lg-v-senden:disabled { opacity: calc(var(--size-zustand-deaktiviert) / 100%); cursor: default; }
.lg-v-schliessen { background: none; color: var(--semantic-text-primary); border: var(--size-border-breite) solid var(--semantic-border-strong); }

@media (prefers-reduced-motion: reduce) {
  .lg-v-chevron, .lg-v-rolle-pfeil { transition: none; }
}

/* ── 768er-Frames: 600 bis 1199 px ── */
@media (max-width: 1199px) {
  /* Drei gleich breite Segmente brauchen mehr Platz, als die Leiste neben Marke, Preise und Anmelden hat: eigene Zeile wie am Telefon. */
  .lg-v-nav { flex-wrap: wrap; row-gap: var(--size-space-3); }
  .lg-v-seiten { order: 3; flex: 1 0 100%; }
  .lg-v-nav, .lg-v-tarife, .lg-v-fragen, .lg-v-fuss { width: min(var(--size-inhalt-tablet), calc(100% - 80px)); }
  .lg-v-hero {
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "nav" "mitte" "store" "." "ort";
    height: var(--size-breakpoint-tablet-hoehe);
    padding: var(--size-space-5) var(--size-space-5) var(--size-space-6);
  }
  .lg-v-mitte { margin-top: var(--size-space-8); padding: 0 var(--size-space-7); }
  .lg-v-h1, .lg-v-schluss-h { font-size: var(--size-type-display-m-groesse); line-height: var(--size-type-display-m-zeile); letter-spacing: -0.015em; }
  .lg-v-kopf { white-space: normal; padding: 0 var(--size-space-7); max-width: 100%; }
  .lg-v-zahl { font-size: var(--size-type-display-l-groesse); line-height: var(--size-type-display-l-zeile); white-space: nowrap; }
  .lg-v-umbruch { display: none; }
  .lg-v-schluss { height: var(--size-breakpoint-tablet-hoehe); }
}

/* ── 390er-Frames: unter 600 px ── */
@media (max-width: 599px) {
  .lg-v-nav, .lg-v-tarife, .lg-v-fragen, .lg-v-fuss { width: calc(100% - 2 * var(--size-space-4)); }
  /* Am Telefon (wie am Tablet): Marke, Preise und Anmelden oben, darunter der Umschalter ueber die volle Breite. */
  .lg-v-seiten a { min-height: 44px; padding: 0 var(--size-space-1); }
  /*
    EINE Zeile (SPEC LANDING-HERO-MOBIL (2), Carolin 01.10.2026): Bildmarke 32
    und Wortmarke 20 links, dann Luft, dann Abschnitt, Preise, Anmelden. Der
    Umschalter der drei Seiten bleibt als eigene Zeile darunter. Die Tippflaeche
    der drei Links waechst ueber ein unsichtbares Feld auf 48 pt, nicht ueber
    die sichtbare Hoehe; Anmelden ohne seitlichen Innenabstand, damit alles in
    358 px passt.
  */
  .lg-v-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; column-gap: 12px; row-gap: var(--size-space-2); }
  .lg-v-marke { grid-column: 1; grid-row: 1; flex: none; }
  .lg-v-wortmarke { font-size: 20px; line-height: 24px; }
  .lg-v-nav > a.lg-v-preise-link { grid-row: 1; grid-column: 3; }
  .lg-v-nav > a.lg-v-preise-link[href="#preise"] { grid-column: 4; }
  .lg-v-nav > a.lg-v-anmelden { grid-column: 5; grid-row: 1; }
  /*
    Die Zielgruppe als EINE ruhige Pille (Carolin, 01.10.2026): Glasflaeche
    aus dem Grund, eine leise Kante, Text in text-primary. Das Menue liegt
    direkt darunter. Tippflaeche 48 pt ueber ein unsichtbares Feld.
  */
  .lg-v-nav .lg-v-seiten { display: none; }
  .lg-v-rolle { display: block; position: relative; grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .lg-v-rolle-knopf {
    position: relative; display: inline-flex; align-items: center; gap: var(--size-space-2); height: 36px; padding: 0 var(--size-space-3) 0 var(--size-space-4);
    border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: var(--size-radius-pill);
    background: color-mix(in srgb, var(--semantic-bg-base) 60%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font: inherit; font-weight: 500; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-primary); cursor: pointer;
  }
  .lg-v-rolle-knopf::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
  .lg-v-rolle-vor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lg-v-rolle-pfeil { color: var(--semantic-text-secondary); transition: transform 0.2s; }
  .lg-v-rolle-knopf[aria-expanded="true"] .lg-v-rolle-pfeil { transform: rotate(180deg); }
  .lg-v-rolle-knopf:focus-visible { outline: var(--size-border-fokus) solid var(--role-accent); outline-offset: var(--size-border-fokus-abstand); }
  .lg-v-rolle-menue {
    position: absolute; left: 0; top: calc(100% + var(--size-space-2)); z-index: 4; min-width: 100%; display: flex; flex-direction: column; padding: var(--size-space-1);
    border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: 16px;
    background: color-mix(in srgb, var(--semantic-bg-base) 60%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .lg-v-rolle-menue[hidden] { display: none; }
  .lg-v .lg-v-rolle-menue a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--size-space-4); border-radius: 12px; white-space: nowrap; font-size: var(--size-type-small-groesse); color: var(--semantic-text-primary); }
  .lg-v .lg-v-rolle-menue a:hover, .lg-v .lg-v-rolle-menue a:focus-visible { background: color-mix(in srgb, var(--semantic-text-primary) 8%, transparent); outline: none; }
  .lg-v-nav > a.lg-v-preise-link, .lg-v-nav > a.lg-v-anmelden { position: relative; display: inline-flex; align-items: center; min-height: 32px; }
  .lg-v-nav > a.lg-v-preise-link::after, .lg-v-nav > a.lg-v-anmelden::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 48px; transform: translateY(-50%); }
  /* Ruhiger Abstand zwischen Leiste und Aufhaenger; die Textgruppe steht mittig zwischen Leiste und Ortszeile (Carolin, 01.10.2026). */
  .lg-v-hero .lg-v-mitte { margin-top: var(--size-space-7); }
  /* Figma 390: der Leistenknopf bleibt in der Desktop-Hoehe (36), die Store-Knoepfe gehen auf Touch (44). */
  .lg-v-nav a.lg-v-anmelden { height: 32px; padding: 0; font-size: 15px; line-height: 20px; }
  /*
    Hero am Telefon (SPEC LANDING-HERO-MOBIL, Carolin 30.09.2026): genau ein
    Bildschirm (100svh, Rueckfall 100vh), das Foto randlos ab y 0, die Leiste
    liegt darauf mit einer ruhigen Abdunklung von oben. Headline, Unterzeile,
    Crew-Einladung und Ortszeile stehen im ersten Bildschirm, auch mit
    Safari-Leiste (390 × 664); die Ortszeile unten mit dem sicheren Rand.
  */
  .lg-v-hero {
    grid-template-rows: auto 1fr auto auto 1.6fr auto;
    grid-template-areas: "nav" "." "mitte" "store" "." "ort";
    height: 100vh;
    height: 100svh;
    padding: var(--size-space-5) var(--size-space-4) calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  .lg-v-hero-bild { top: 0; bottom: 0; height: auto; }
  .lg-v-hero-bild::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--semantic-bg-base) 70%, transparent), transparent);
  }
  /*
    Die Crew-Einladung direkt unter der Unterzeile (24 px), darunter „Bald
    verfuegbar" als reiner Text (12 px Abstand): 14 px, ohne Flaeche, ohne
    Pille. Die Ortszeile steht allein am unteren Rand, mindestens 64 px frei
    darueber (SPEC LANDING-HERO-MOBIL (2)).
  */
  .lg-v-hero > .lg-v-store { margin-top: 24px; margin-bottom: 64px; gap: 12px; }
  /* Ortszeile in zwei zentrierten Zeilen: Position und Ort, darunter Tag und Uhrzeit. Getrennt am Trenner, nicht nach Breite. */
  .lg-v-hero p.lg-v-ort { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .lg-v-hero .lg-v-ort-eins { display: none; }
  /*
    Die Ortszeile steht nie direkt auf dem Foto (Briefing §0.2, Carolin
    01.10.2026): eine ruhige Abdunklung unten im Hero, 140 px, aus dem Grund
    (92 % unter der Zeile, gemessen: 70 % ergab auf hellem Wasser 1,3:1). Die Ruempfe stehen darueber (Ausschnitt unten), die
    Zeile selbst braucht keine eigene Flaeche mehr.
  */
  .lg-v-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--semantic-bg-base) 92%, transparent) 0, color-mix(in srgb, var(--semantic-bg-base) 92%, transparent) 64px, transparent 140px); }
  .lg-v-hero p.lg-v-ort { z-index: 1; padding: 0; border-radius: 0; background: none; }
  .lg-v-hero .lg-v-ort-wo, .lg-v-hero .lg-v-ort-wann { display: block; white-space: nowrap; }
  .lg-v-hero .lg-v-store p.lg-v-bald-fuer { padding: 0; border-radius: 0; background: none; font-size: 14px; color: var(--semantic-text-secondary); }
  /* Die Abdunklung liegt unter der Leiste, nicht darueber. */
  /* Der Hero hat schon 16 px Rand; die Leiste nimmt die ganzen 358 px, sonst stuende sie bei 326. */
  .lg-v-hero > .lg-v-nav { z-index: 2; width: 100%; }
  .lg-v[data-rolle="eigner"] .lg-v-hero .lg-v-foto img { object-position: 50% 100%; }
  /*
    Die Textgruppe steht mittig (HERO-MOBIL (2), Carolin 01.10.2026); das
    Boot gehoert darunter, nicht daneben in ein leeres Feld. Das Foto rueckt
    deshalb nach unten, der Rand oben laeuft weich in den Grund aus. Gemessen
    ueber vier Sprachen bei 390 x 844, 430 x 932 und 390 x 664: Eigner 166
    (kurz 114), Skipper 180, Flotte 160 px.
  */
  .lg-v[data-rolle="eigner"] .lg-v-hero .lg-v-hero-bild .lg-v-foto img { position: relative; top: 166px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72px); mask-image: linear-gradient(to bottom, transparent, #000 72px); }
  /* Die Textgruppe steht am Telefon mittig, vor Nebellicht und Masten (gemessen bis 2,9:1); die ruhige Abdunklung von oben reicht deshalb auf allen drei Seiten bis unter „Bald verfuegbar". */
  .lg-v[data-rolle] .lg-v-hero-bild::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--semantic-bg-base) 72%, transparent) 0%,
      color-mix(in srgb, var(--semantic-bg-base) 72%, transparent) 68%,
      transparent 82%);
  }
  /* Flotte: die kroatische Headline braucht drei Zeilen, „Bald verfuegbar" steht dort bei 70 % der Hoehe. */
  .lg-v[data-rolle="fleet"] .lg-v-hero-bild::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--semantic-bg-base) 72%, transparent) 0%,
      color-mix(in srgb, var(--semantic-bg-base) 72%, transparent) 73%,
      transparent 86%);
  }
  /*
    Flotte: Die Boote der Marina reichen bis an den unteren Bildrand. Das Foto
    endet deshalb ueber der Ortszeile und laeuft weich in den Grund aus — die
    Zeile steht auf dem Grund, nie auf den Ruempfen.
  */
  .lg-v[data-rolle="fleet"] .lg-v-hero .lg-v-hero-bild .lg-v-foto { bottom: 96px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
  .lg-v[data-rolle="fleet"] .lg-v-hero .lg-v-hero-bild .lg-v-foto img { position: relative; top: 192px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72px); mask-image: linear-gradient(to bottom, transparent, #000 72px); }
  .lg-v[data-rolle="skipper"] .lg-v-hero .lg-v-hero-bild .lg-v-foto img { position: relative; top: 180px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72px); mask-image: linear-gradient(to bottom, transparent, #000 72px); }
  /* Der Katamaran im Schluss der Flotte steht mittig unter der Einladung: das Bild beginnt 40 px tiefer, damit die zarte Zeile nicht auf dem Bug liegt. */
  .lg-v[data-rolle="fleet"] .lg-v-schluss { overflow: hidden; }
  .lg-v[data-rolle="fleet"] .lg-v-schluss-bild { top: 40px; bottom: -40px; }
  .lg-v-mitte { padding: 0 var(--size-space-5); }
  .lg-v-h1, .lg-v-schluss-h { font-size: var(--size-type-h1-groesse); line-height: var(--size-type-h1-zeile); letter-spacing: -0.01em; white-space: normal; }
  .lg-v-store { width: 100%; max-width: var(--size-inhalt-mobil); }
  .lg-v .lg-v-crew { height: var(--size-button-secondary); }
  .lg-v-kopf { padding: 0 var(--size-space-5); }
  .lg-v-zahl { font-size: var(--size-type-display-m-groesse); line-height: var(--size-type-display-m-zeile); letter-spacing: -0.015em; }
  .lg-v-schluss { height: var(--size-breakpoint-mobil-hoehe); }
  .lg-v-tarife { grid-auto-flow: row; }
  /*
    Am Telefon stehen die Karten untereinander und muessen nicht gleich hoch
    sein: Die Karte klappt um statt zu drehen — vorn ODER hinten, jede Seite
    so hoch wie ihr Inhalt. Sonst truege jede Vorderseite die Hoehe ihrer
    Rueckseite als leere Flaeche.
  */
  .lg-v-tarif-hinten, .lg-v-tarif[data-gedreht] .lg-v-tarif-vorn { display: none; }
  .lg-v-tarif[data-gedreht] .lg-v-tarif-hinten { display: flex; transform: none; }
  .lg-v-frage > p { padding-right: 0; }
}

/*
  ── Seitenrhythmus (SPEC LANDING-RHYTHMUS v3, Carolin 30.09.2026) ──
  Fuenf Abschnittstypen statt einer Form, nach der Vorlage „Loguna
  Seitenrhythmus" Version 9 (specs/proposals/LANDING-RHYTHMUS-v3). Drei
  Ebenen: Farbwelt hinten (Foto, Globus), ruhige Flaeche in der Mitte,
  Produkt vorn. Text steht nie direkt auf einem Foto. Eine Buehne ist
  hoechstens einen Bildschirm hoch; das Telefon ist Buehne minus 150 px.
*/
.lg-v { --r-h: min(880px, calc(100svh - 72px)); }
.lg-v-abschnitt.r-abschnitt { align-self: stretch; width: auto; margin: 0 var(--size-space-5); }
.r-h2 { display: flex; flex-direction: column; gap: var(--size-space-2); margin: 0; font: inherit; }
/* Die Ueberschriften des Rhythmus in Inter wie der Rest der Landing — tokens.css setzt h1–h3 sonst auf die Display-Schrift Archivo (185 kB, eine zweite Familie). */
.lg-v .r-schritt h3, .lg-v .r-kachel h2, .lg-v .r-kachel h3 { font-family: inherit; letter-spacing: normal; }

/* Typ 1 und 5: Buehne mit Schritten — das Telefon steht, drei Schritte scrollen vorbei. */
/* Ohne Innenabstand oben: Die Buehne klebt ab dem ersten Schritt, sonst rueckte der Kopf im ersten Drittel noch 26 px. */
.lg-v-abschnitt.r-story { position: relative; display: block; height: calc(var(--r-h) + 3 * 72vh); padding-top: 0; }
/* Drei unsichtbare Marken teilen den Scrollweg der Buehne in drei gleiche Teile (landing-rhythmus.js). */
.r-marken { position: absolute; top: 0; left: 0; width: 1px; height: calc(100% - 100vh); display: grid; grid-template-rows: repeat(3, 1fr); pointer-events: none; visibility: hidden; }
.r-kleber { position: sticky; top: 36px; height: var(--r-h); }
.r-buehne { position: relative; height: 100%; border-radius: var(--size-radius-buehne); overflow: hidden; background: var(--semantic-bg-raised); isolation: isolate; }
.r-buehne > .lg-v-foto { z-index: 0; }
.r-flaeche { position: relative; z-index: 1; box-sizing: border-box; height: 100%; width: min(1120px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 440px) auto; justify-content: center; align-items: center; column-gap: 96px; padding: var(--size-space-6) var(--size-space-8); }
.r-glas .r-flaeche {
  width: min(1040px, calc(100% - 96px)); height: calc(100% - 64px); margin: var(--size-space-6) auto; border-radius: 20px;
  background: color-mix(in srgb, var(--semantic-bg-base) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border: var(--size-border-breite) solid color-mix(in srgb, var(--semantic-text-primary) 8%, transparent);
}
.r-links .r-flaeche { grid-template-columns: auto minmax(0, 440px); }
.r-links .r-geraet { order: -1; justify-self: start; }
.r-text { display: flex; flex-direction: column; gap: var(--size-space-3); min-width: 0; max-width: 36ch; }
.r-text .lg-v-zahl { font-size: var(--size-type-display-m-groesse); line-height: var(--size-type-display-m-zeile); white-space: nowrap; }
.r-text .lg-v-zahl strong, .r-bild .lg-v-zahl strong, .r-gross strong, .r-w-gross strong { font-weight: 600; }
.r-text .lg-v-aussage, .r-bild .lg-v-aussage { font-size: var(--size-type-h3-groesse); line-height: var(--size-type-h3-zeile); }
.lg-v ol.r-schritte { list-style: none; margin: var(--size-space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.r-schritt { position: relative; padding: 10px 0 10px 28px; color: var(--semantic-text-muted); cursor: pointer; transition: color 0.45s; }
.r-schritt::before { content: ""; position: absolute; left: 6px; top: 17px; width: 10px; height: 10px; border-radius: var(--size-radius-pill); background: currentColor; transition: background 0.35s, box-shadow 0.35s; }
.lg-v .r-schritt h3 { margin: 0; font-weight: 600; font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: inherit; }
/* Die Erklaerung steht am Desktop im festen Feld darunter; in der Liste bleibt sie fuer Screenreader lesbar. */
.lg-v .r-schritt p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.r-schritt.ist { color: var(--semantic-text-primary); }
.r-schritt.ist::before { background: var(--role-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--role-accent) 25%, transparent); }
.r-erkl { position: relative; min-height: calc(3 * var(--size-type-small-zeile)); margin-top: var(--size-space-2); }
.lg-v .r-erkl p { position: absolute; inset: 0; margin: 0; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); opacity: 0; transition: opacity 0.45s; }
.lg-v .r-erkl p.ist { opacity: 1; }
.r-geraet { --gh: calc(var(--r-h) - 150px); position: relative; justify-self: end; }
.r-geraet .lg-v-geraet { position: relative; padding: calc(var(--gh) * 0.012); background: var(--semantic-bg-raised); border: var(--size-border-breite) solid var(--semantic-border-strong); border-radius: calc(var(--gh) * 0.06); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); overflow: hidden; }
.r-geraet .lg-v-schirm { position: relative; overflow: hidden; border-radius: calc(var(--gh) * 0.048); background: var(--semantic-bg-base); }
.r-geraet .lg-v-schirm img { display: block; height: var(--gh); width: auto; aspect-ratio: 390 / 844; transition: filter 0.6s; }
.r-story-aktiv .r-geraet .lg-v-schirm img { filter: brightness(0.42) saturate(0.7); }
/* Die Karte, von der der Schritt spricht, hebt sich aus dem Screen — derselbe Screen als Hintergrund, kein Rahmen, keine Linie. */
.r-lift {
  position: absolute; z-index: 5; border-radius: 14px; background-repeat: no-repeat; opacity: 0; pointer-events: none;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px color-mix(in srgb, var(--semantic-text-primary) 10%, transparent);
  transform: translate(0, 0) scale(1);
  transition: left 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.4s;
}
.r-lift.ist { opacity: 1; transform: translate(var(--lx, -10%), 0) scale(1.12); }

/* Typ 2: Bild-Statement — Foto oder lebender Globus, der Satz unten links auf einem Scrim, nur unten. */
.r-bild { position: relative; width: 100%; height: var(--r-h); border-radius: var(--size-radius-buehne); overflow: hidden; background: var(--semantic-bg-raised); }
.r-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--semantic-bg-base) 88%, transparent) 100%); }
.r-mit-globus { background: var(--semantic-bg-base); }
.r-globus-flaeche { position: absolute; inset: 0; }
.r-globus { display: block; width: 100%; height: 100%; }
.r-satz { position: absolute; left: var(--size-space-8); right: var(--size-space-8); bottom: 56px; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.r-satz .lg-v-aussage { max-width: 44ch; }
/* Die Zahl bricht um und waechst mit der Breite (64 bis 96 px), statt ueber den Rand der Kachel zu laufen (Carolin, 01.10.2026: „0 Diskussionen" abgeschnitten). */
.r-bild .lg-v-zahl { white-space: normal; font-size: clamp(var(--size-type-display-m-groesse), 6.5vw, var(--size-type-display-l-groesse)); line-height: 1; letter-spacing: -0.025em; }
.lg-v p.r-bald { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--size-type-meta-groesse); line-height: var(--size-type-meta-zeile); letter-spacing: 0.04em; color: var(--semantic-text-secondary); }

/* Typ 3: Bento — gleichartige Kacheln exakt gleich gross, je Kachel ein Datenbaustein. */
.lg-v-abschnitt.r-abschnitt > .r-bento { align-self: stretch; }
.r-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-space-4); width: 100%; }
.r-kachel { position: relative; box-sizing: border-box; min-width: 0; border-radius: var(--size-radius-buehne); overflow: hidden; background: var(--semantic-bg-raised); display: flex; flex-direction: column; gap: 28px; padding: var(--size-space-6); }
.r-kachel > div:first-child { flex: 1; }
.r-kachel.gross { grid-column: span 2; }
.r-kachel.foto { padding: 0; }
.r-kachel.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-kachel .lg-v-stichwort { margin-bottom: var(--size-space-2); }
.lg-v .r-kachel h2, .lg-v .r-kachel h3 { margin: 0; max-width: 26ch; font-weight: 600; font-size: var(--size-type-h2-groesse); line-height: var(--size-type-h2-zeile); color: var(--semantic-text-primary); }
.lg-v .r-kachel h3 { font-size: var(--size-type-h3-groesse); line-height: var(--size-type-h3-zeile); }
.r-kachel small { display: block; margin-top: 6px; font-weight: 400; font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: var(--semantic-text-secondary); }
.r-w { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; padding: 20px 22px; background: var(--semantic-bg-base); border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: 16px; }
.r-w-zeile { display: grid; grid-template-columns: 1fr auto; gap: var(--size-space-3); padding: 11px 0; border-top: var(--size-border-breite) solid var(--semantic-border-subtle); font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.r-w-zeile > span:not(:first-child) { font-family: "JetBrains Mono", ui-monospace, monospace; text-align: right; color: var(--semantic-text-primary); font-variant-numeric: tabular-nums; }
.r-w-liste .r-w-zeile > span:first-child { color: var(--semantic-text-primary); }
.r-w-sp2 .r-w-zeile { grid-template-columns: 1.6fr 1fr; }
.r-w-sp3 .r-w-zeile { grid-template-columns: 1fr 1.2fr 1.2fr; }
.r-w-sp4 .r-w-zeile { grid-template-columns: 1.6fr 0.7fr 0.7fr 0.8fr; }
.r-w-liste .r-w-kopf { border-top: 0; padding-top: 0; }
.r-w-liste .r-w-kopf > span, .r-w-liste .r-w-kopf > span:first-child { font-family: inherit; color: var(--semantic-text-muted); }
.lg-v p.r-w-gross { padding: 0 0 var(--size-space-3); font-weight: 300; font-size: var(--size-type-kennzahl-groesse); line-height: 1.1; letter-spacing: -0.02em; color: var(--semantic-text-primary); }

/* Typ 4: Zahl auf Schwarz — kein Foto, kein Telefon. */
.lg-v-abschnitt.r-zahl { align-items: center; text-align: center; gap: var(--size-space-4); padding: 120px var(--size-space-5); }
.r-zahl .r-h2 { align-items: center; gap: var(--size-space-4); }
/* Nach der Zahl kein zweiter Innenabstand: Ihre 120 px unten und der Abstand der Seite reichen (Weissraum unter 200 px). */
.lg-v-abschnitt.r-zahl + .lg-v-abschnitt { padding-top: 0; }
.r-gross { font-weight: 300; font-size: clamp(96px, 14vw, 200px); line-height: 0.95; letter-spacing: -0.03em; color: var(--semantic-text-primary); }
.r-zahl .lg-v-aussage { max-width: 30ch; }
.lg-v ul.r-drei { display: flex; gap: var(--size-space-7); margin: var(--size-space-5) 0 0; padding: 0; list-style: none; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.r-drei b { display: block; font-family: inherit; font-weight: 500; font-size: var(--size-type-h2-groesse); line-height: var(--size-type-h2-zeile); color: var(--semantic-text-primary); }

/* Mobil (< 900 px): Buehne nicht sticky, erst Text, dann Telefon; Schritte alle offen und gleich hoch; kein Heben, kein Dimmen. */
@media (max-width: 899px) {
  .lg-v { --r-h: auto; }
  .lg-v-abschnitt.r-abschnitt { margin: 0 var(--size-space-4); }
  .lg-v-abschnitt.r-story { height: auto; }
  .r-kleber { position: static; height: auto; }
  .r-buehne { height: auto; }
  .r-flaeche, .r-links .r-flaeche { grid-template-columns: minmax(0, 1fr); row-gap: var(--size-space-5); padding: 28px 20px; }
  .r-glas .r-flaeche { width: calc(100% - 32px); height: auto; margin: var(--size-space-4) auto; }
  /* Das Foto hinter der Glasflaeche steht am Telefon als Band oben (hoechstens 60svh), darunter der ruhige Grund. */
  .r-buehne > .lg-v-foto { bottom: auto; height: 60svh; }
  .r-geraet { --gh: min(600px, 70svh); justify-self: center; }
  .r-links .r-geraet { order: 0; justify-self: center; }
  .r-text { max-width: 100%; }
  .lg-v ol.r-schritte { display: grid; grid-auto-rows: 1fr; gap: 0; }
  .r-schritt, .r-schritt.ist { color: var(--semantic-text-primary); border-top: var(--size-border-breite) solid var(--semantic-border-subtle); padding: 14px 0 14px 28px; cursor: default; }
  .r-schritt:first-child { border-top: 0; }
  .r-schritt::before { background: var(--role-accent); }
  .lg-v .r-schritt p { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 6px 0 0; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
  .r-erkl, .r-lift, .r-marken { display: none; }
  .r-story-aktiv .r-geraet .lg-v-schirm img { filter: none; }
  /* Kein Abschnitt ist am Telefon nur ein bildschirmhohes Foto (Carolin, 01.10.2026): hoechstens 60svh, beschnitten, nie gestaucht. */
  .r-bild { height: auto; display: flex; flex-direction: column; }
  .r-bild > .lg-v-foto, .r-bild > .r-globus-flaeche { position: relative; inset: auto; flex: none; width: 100%; height: min(60svh, 125vw); }
  .r-bild::after { display: none; }
  /* Am Telefon steht der Satz unter dem Bild, nicht darauf: jeder Bildschirm zeigt Bild UND Aussage. */
  .r-satz { position: static; max-width: none; padding: var(--size-space-5) 20px var(--size-space-6); }
  /* Ein langes Wort („Diskussionen.") bricht nicht um: auf schmalen Telefonen (375, 320) waechst die Zahl mit der Breite statt ueber den Rand zu laufen. */
  .r-bild .lg-v-zahl { font-size: min(var(--size-type-h1-groesse), 10vw); line-height: 1.2; white-space: normal; }
  .r-bento { grid-template-columns: minmax(0, 1fr); }
  .r-kachel.gross { grid-column: auto; }
  .r-kachel.foto { aspect-ratio: 4 / 5; max-height: 60svh; }
  .lg-v-abschnitt.r-zahl { padding: 72px var(--size-space-4); }
  .r-gross { font-size: var(--size-type-display-m-groesse); line-height: var(--size-type-display-m-zeile); }
  .lg-v ul.r-drei { gap: var(--size-space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .r-schritt, .r-schritt::before, .lg-v .r-erkl p, .r-geraet .lg-v-schirm img, .r-lift { transition: none; }
}

/*
  ── Wechseltag / Saison / Passage (SPEC LANDING-WECHSELTAG, 30.09.2026) ──
  Nach dem Handover, auf die Tokens der Landing gestellt, keine neue Farbe;
  der Akzent ist die Rollenfarbe der Seite. Die acht Tafeln liegen in EINER
  Rasterzelle uebereinander, sichtbar ist die aktive: Der Abschnitt ist so
  hoch wie die hoechste Tafel, und beim Umschalten springt nichts.
*/
.lp-tag { width: min(var(--lg-v-inhalt), calc(100% - 80px)); margin: 0 auto; display: flex; flex-direction: column; gap: var(--size-space-6); }
.lp-rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: 8px; }
.lp-stop { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: var(--size-space-2); min-height: 48px; padding: 0; border: 0; background: none; font: inherit; color: var(--semantic-text-secondary); cursor: pointer; }
.lp-stop i { position: relative; display: block; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--role-accent); border-radius: var(--size-radius-pill); background: var(--semantic-bg-base); }
.lp-stop b { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: var(--size-type-meta-groesse); line-height: var(--size-type-meta-zeile); letter-spacing: 0.02em; color: var(--semantic-text-secondary); }
.lp-stop span { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); }
.lp-stop[aria-selected="true"] { color: var(--semantic-text-primary); }
/* Die gewaehlte Station waechst ueber ihre Masse, nicht ueber transform: Ein skalierter Punkt skalierte seine Linie mit, und die Strecke zur naechsten Station fehlte. */
.lp-stop[aria-selected="true"] i { width: 16px; height: 16px; margin: -2px 0; background: var(--role-accent); box-shadow: 0 0 14px var(--role-accent); }
.lp-stop:hover i { background: color-mix(in srgb, var(--role-accent) 40%, var(--semantic-bg-base)); }
.lp-stop[aria-selected="true"]:hover i { background: var(--role-accent); }
.lp-stop:focus-visible { outline: 2px solid var(--role-accent); outline-offset: 4px; border-radius: var(--size-radius-card); }
.lp-stop:not(:last-child) i::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -1px; width: calc(100cqw - 12px); height: 2px; background: var(--role-accent); box-shadow: 0 0 14px var(--role-accent); opacity: 0.85; }
.lp-stop[aria-selected="true"] i::after { width: calc(100cqw - 14px); }
.lp-tafeln { display: grid; border-top: var(--size-border-breite) solid var(--semantic-border-subtle); }
.lp-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--size-space-7); box-sizing: border-box; height: 440px; padding-top: var(--size-space-4); visibility: hidden; }
.lp-panel[data-aktiv] { visibility: visible; }
.lp-steg, .lp-app { display: flex; flex-direction: column; gap: var(--size-space-3); min-width: 0; }
.lg-v p.lp-zahl { font-weight: 300; font-size: var(--size-type-display-m-groesse); line-height: var(--size-type-display-m-zeile); letter-spacing: -0.02em; color: var(--semantic-text-primary); }
.lp-zahl strong { font-weight: 600; }
.lp-zahl span { font-size: var(--size-type-h2-groesse); color: var(--semantic-text-secondary); }
.lg-v p.lp-satz { max-width: 40ch; min-height: calc(5 * var(--size-type-body-zeile)); font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: var(--semantic-text-primary); }
.lg-v ul.lp-liste { display: grid; grid-template-rows: repeat(3, 132px); margin: 0; padding: 0; list-style: none; }
.lp-liste li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--size-space-5); align-items: start; height: 132px; box-sizing: border-box; padding: var(--size-space-4) 0; border-bottom: var(--size-border-breite) solid var(--semantic-border-subtle); }
.lp-liste li:last-child { border-bottom: 0; }
.lg-v h3.lp-feature { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--size-space-3); margin: 0; font-family: inherit; font-weight: 600; font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); color: var(--semantic-text-primary); }
.lg-v p.lp-mehrwert { max-width: 36ch; margin: 2px 0 0; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
.lp-kz { min-width: 0; text-align: right; }
.lg-v p.lp-k { margin: 0; font-weight: 300; font-size: var(--size-type-h2-groesse); line-height: 1.05; letter-spacing: -0.02em; color: var(--semantic-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-k strong { font-weight: 600; }
.lg-v p.lp-q { max-width: 30ch; margin: 4px 0 0 auto; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-muted); }
.lp-st { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400; font-size: var(--size-type-meta-groesse); line-height: var(--size-type-meta-zeile); letter-spacing: 0.02em; white-space: nowrap; color: var(--semantic-text-muted); }
.lp-st-beta { color: var(--role-accent); }
.lg-v p.lp-immer { text-align: center; }
/* Storyline statisch (Carolin, 30.09.2026): Hinweis unter der Rail, Kopfzeile bricht ausgewogen um. */
.lg-v p.lp-hinweis { text-align: center; margin-top: calc(-1 * var(--size-space-3)); }
.lg-v-kopf.lp-kopf { white-space: normal; max-width: 960px; }
.lg-v-kopf.lp-kopf .lg-v-aussage { white-space: normal; text-wrap: balance; }
/*
  Unter 900 px (Carolin, 01.10.2026: „eine ewig lange Liste, kaum zu lesen,
  Problem und Loesung nicht auseinander zu halten"): Die Stationen stehen als
  Chipleiste, die oben im Abschnitt klebt und waagrecht wischt; darunter je
  Station EINE Karte, waagrecht gewischt mit Einrasten. In der Karte zwei
  getrennte Flaechen: „Das Problem" auf einem Hauch der Rollenfarbe, „Mit
  Loguna" mit einer feinen Linie links und drei kompakten Zeilen.
*/
@media (max-width: 899px) {
  .lp-tag { width: calc(100% - 2 * var(--size-space-4)); gap: var(--size-space-3); }
  .lp-rail {
    position: sticky; top: 0; z-index: 2; display: flex; gap: var(--size-space-2); overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--size-space-4)); padding: var(--size-space-2) var(--size-space-4); scrollbar-width: none;
    background: color-mix(in srgb, var(--semantic-bg-base) 92%, transparent);
  }
  .lp-rail::-webkit-scrollbar { display: none; }
  .lp-stop {
    container-type: normal; flex: none; flex-direction: row; align-items: center; gap: 6px; scroll-snap-align: center; min-height: 40px; padding: 0 var(--size-space-4);
    border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: var(--size-radius-pill); white-space: nowrap; position: relative;
  }
  .lp-stop::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
  .lp-stop i { display: none; }
  .lp-stop b, .lp-stop span { font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); }
  .lp-stop span::before { content: "· "; }
  .lp-stop[aria-selected="true"] { background: var(--role-accent); border-color: var(--role-accent); color: var(--role-on-accent); }
  .lp-stop[aria-selected="true"] b { color: var(--role-on-accent); }
  .lp-stop:hover i, .lp-stop[aria-selected="true"]:hover i { background: none; }
  .lg-v p.lp-hinweis { margin-top: 0; }
  /* Die Karten nebeneinander, gewischt mit Einrasten; jede hoechstens einen Bildschirm hoch. */
  .lp-tafeln { display: flex; gap: var(--size-space-4); overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
  .lp-tafeln::-webkit-scrollbar { display: none; }
  .lp-panel {
    flex: 0 0 100%; grid-area: auto; visibility: visible; scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; flex-direction: column; gap: var(--size-space-4); height: auto; max-height: calc(100svh - 72px - 56px); box-sizing: border-box;
    padding: var(--size-space-4); border: var(--size-border-breite) solid var(--semantic-border-subtle); border-radius: var(--size-radius-buehne); background: var(--semantic-bg-raised);
  }
  .lp-steg { gap: var(--size-space-2); padding: var(--size-space-4); border-radius: var(--size-radius-card); background: color-mix(in srgb, var(--role-accent) 7%, var(--semantic-bg-base)); }
  .lg-v p.lp-zahl { font-size: var(--size-type-h1-groesse); line-height: var(--size-type-h1-zeile); }
  .lp-zahl span { font-size: var(--size-type-h3-groesse); }
  .lg-v p.lp-satz { min-height: 0; max-width: none; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); }
  .lp-app { gap: var(--size-space-2); padding-left: var(--size-space-3); border-left: 2px solid var(--role-accent); }
  .lg-v ul.lp-liste { display: flex; flex-direction: column; grid-template-rows: none; }
  .lp-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--size-space-3); row-gap: 2px; height: auto; padding: var(--size-space-2) 0; }
  .lp-liste li > div { display: contents; }
  .lg-v h3.lp-feature { grid-column: 1; grid-row: 1; flex-wrap: wrap; gap: 0 var(--size-space-2); }
  .lp-kz { text-align: right; }
  .lg-v p.lp-k { grid-column: 2; grid-row: 1; align-self: baseline; font-size: var(--size-type-body-groesse); line-height: var(--size-type-body-zeile); white-space: nowrap; }
  .lg-v p.lp-mehrwert { grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 0; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); }
  .lg-v p.lp-q { grid-column: 1 / -1; grid-row: 3; max-width: none; margin: 0; text-align: left; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); }
  .lg-v p.lp-zaehler { text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--size-type-small-groesse); line-height: var(--size-type-small-zeile); color: var(--semantic-text-secondary); }
}
/* Der Seitenzaehler der Karten gibt es nur am Telefon. */
@media (min-width: 900px) { .lg-v p.lp-zaehler { display: none; } }
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .lp-rail, .lp-tafeln { scroll-behavior: auto; } }

/*
  Kurze Telefone (Safari mit Leiste, 390 × 664): Die Textgruppe rueckt naeher
  an die Leiste, in den dunklen Himmel, und das Foto haengt oben an — so steht
  das Boot unter der Unterzeile. Schriftgroessen bleiben. Skipper: das Bild
  8 % hoeher, damit die Mastspitze unter der Unterzeile bleibt.
*/
@media (max-width: 599px) and (max-height: 720px) {
  .lg-v-hero { padding-top: 12px; }
  .lg-v-hero .lg-v-nav { row-gap: 2px; }
  .lg-v-hero { grid-template-rows: auto 0 auto auto 1fr auto; }
  .lg-v[data-rolle="eigner"] .lg-v-hero .lg-v-hero-bild .lg-v-foto img { top: 94px; }
  .lg-v[data-rolle="fleet"] .lg-v-hero .lg-v-hero-bild .lg-v-foto img { top: 96px; }
  /* Kurz: die Headline eine Stufe kleiner, sonst passt das Boot nicht zwischen „Bald verfuegbar" und die Ortszeile (gemessen en/hr/it, 11 px). */
  .lg-v-hero .lg-v-h1 { font-size: 34px; line-height: 40px; }
  .lg-v-hero .lg-v-mitte { gap: 6px; }
  .lg-v[data-rolle] .lg-v-hero .lg-v-hero-bild .lg-v-foto img { object-position: 50% 0%; }
  .lg-v[data-rolle="skipper"] .lg-v-hero .lg-v-hero-bild .lg-v-foto { bottom: auto; height: 108%; }
  /* Flotte, kurz: die Textgruppe reicht bis 67 % der Hoehe (hr), die Abdunklung mit ihr. */
  .lg-v[data-rolle] .lg-v-hero-bild::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--semantic-bg-base) 72%, transparent) 0%,
      color-mix(in srgb, var(--semantic-bg-base) 72%, transparent) 70%,
      transparent 86%);
  }
}

/*
  Storyline am Desktop in EINEM Bildschirm (Carolin, 01.10.2026): von
  „Saison" bis „Dazu jederzeit" passt der Abschnitt in 1470 x 830 und
  1280 x 720, an der laengsten Station gemessen. Verkleinert ueber Tokens:
  Zahl in display-m, Aussage in h3, Abstaende um die Rail, Herkunft naeher an
  der Ueberschrift, Zeilen der Tafel 108 statt 132 px. Inhalt vollstaendig,
  keine Schrift unter 14 px.
*/
@media (min-width: 900px) {
  .lg-v-abschnitt[data-tag] { padding-top: 0; gap: var(--size-space-5); }
  .lg-v-kopf.lp-kopf, .lp-kopf .lg-v-h2 { gap: var(--size-space-1); }
  .lp-kopf .lg-v-zahl { font-size: var(--size-type-display-m-groesse); line-height: var(--size-type-display-m-zeile); }
  .lp-kopf .lg-v-aussage { font-size: var(--size-type-h3-groesse); line-height: var(--size-type-h3-zeile); }
  .lp-tag { gap: var(--size-space-4); }
  .lp-rail { padding-top: 0; }
  .lp-stop { gap: var(--size-space-1); }
  .lg-v p.lp-hinweis { margin-top: calc(-1 * var(--size-space-2)); }
}
/* Die engeren Zeilen ab 1200 px; darunter ist die rechte Spalte zu schmal fuer zwei Zeilen Einordnung. */
@media (min-width: 1200px) {
  .lp-panel { height: 368px; padding-top: var(--size-space-3); }
  .lg-v ul.lp-liste { grid-template-rows: repeat(3, 108px); }
  .lp-liste li { height: 108px; padding: var(--size-space-3) 0; }
  .lg-v p.lp-satz { min-height: calc(4 * var(--size-type-body-zeile)); }
  .lg-v p.lp-q { max-width: 36ch; }
}