/* ──────────────────────────────────────────────────────────────────────────
   KEVIAN Solutions · Landingpage
   Baut auf /assets/brand.css auf (Tokens, Primitives, Header, Footer).
   Seit Schritt 15 (19.09.2026) eigene Datei statt Inline-Stil in index.html.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Header: Menue-Button und Ausklappmenue (nur Landing) ── */
/* Menue-Button: erscheint erst, wenn die Nav-Links ausgeblendet werden (unter 880px) */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; }
.nav-toggle-bars span { display: block; width: 18px; height: 2px; background: var(--navy); transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.site-header.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-header .nav-cta-short { display: none; }
.site-header .nav-lang-mobile { display: none; }

@media (max-width: 1280px) {
  /* Zwischen 1201 und 1280px: engere Link-Leiste, damit Links, Sprachwahl und Button passen */
  .site-header .nav { gap: 12px; }
  .site-header .nav-links a { padding: 8px 8px; letter-spacing: 0.04em; white-space: nowrap; }
}
@media (max-width: 1200px) {
  /* Unter 1200px passen sechs Links, Sprachwahl und Button nicht mehr nebeneinander
     (Franzoesisch ist am laengsten, vorher ragte der Button bis 93px ueber den Rand).
     Ab hier: Menue-Icon, Links und CTA im Ausklappmenue. */
  .site-header .nav-right .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 32px rgba(10, 37, 64, 0.10);
  }
  .site-header.nav-open .nav-links { display: flex; }
  .site-header .nav-links a { font-size: 14px; padding: 12px 10px; border-radius: 6px; }
  .site-header .nav-links a::after { display: none; }
  /* Schritt 29 (Audit Storytelling): "Pilotpraxis werden" bleibt sichtbar, kompakt neben dem Menue-Button.
     Steht nach der Regel oben, die .btn in .nav-right ausblendet, und gewinnt darum. */
  .site-header .nav-right .nav-cta { display: inline-flex; padding: 10px 14px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 600px) {
  /* Handy: Sprachwahl wandert ins Menue, der Button zeigt die Kurzform ohne Pfeil */
  .site-header .nav-right .lang-switch { display: none; }
  .site-header.nav-open .nav-lang-mobile { display: inline-flex; align-self: flex-start; margin: 12px 10px 0; }
  .site-header .nav-lang-mobile button { padding: 10px 14px; font-size: 12px; }
  .site-header .nav-cta-long { display: none; }
  .site-header .nav-cta-short { display: inline; }
  .site-header .nav-right .nav-cta { padding: 10px 12px; }
  .site-header .nav-right .nav-cta.btn-arrow::after { display: none; }
}
@media (max-width: 480px) {
  .site-header .nav { gap: 10px; }
  .site-header .nav-right { gap: 8px; }
  .lang-switch button { padding: 7px 7px; font-size: 10px; }
}
@media (max-width: 400px) {
  /* Sehr schmale Handys: Wortmarke auf "KEVIAN" kuerzen, damit Logo, Sprachwahl und Menue nebeneinander passen */
  .site-header .logo-wordmark .accent { display: none; }
  .lang-switch button { padding: 6px 5px; }
}
@media (max-width: 360px) {
  /* iPhone SE und aehnliche: nur die Bildmarke, die Wortmarke steht im Titel und im Footer */
  .site-header .logo-wordmark { display: none; }
  .section-meta { min-width: 0; }
  .eyebrow { letter-spacing: 0.14em; }
  /* Lange Einzelwoerter in Titeln ("Ueberraschungen.") sprengen sonst die Spalte */
  .section-head h2 { hyphens: auto; overflow-wrap: anywhere; }
}

/* ──────────────────────────────────────────────────────────────────────────
   KEVIAN · Landing-specific styles
   ────────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════
   PRE-LAUNCH (locked) modes
   ════════════════════════════════════════════════════════ */

.prelaunch {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px var(--gutter);
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* faint background grid */
.prelaunch::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10, 37, 64, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 37, 64, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}

/* Top bar inside the prelaunch screen */
.pl-topbar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(40px, 8vw, 96px);
}

.pl-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  display: grid;
  gap: clamp(48px, 8vw, 80px);
}

/* ── Variant A: Editorial split ────────────────────────── */

.pl-edit-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.pl-edit-left { display: flex; flex-direction: column; gap: 32px; }
.pl-edit-left .pill { align-self: flex-start; }   /* sonst streckt die Spalte den Badge auf volle Breite */

.pl-edit-left h1 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--navy);
}
.pl-edit-left h1 em { font-style: normal; color: var(--teal); }

.pl-claim {
  font-family: var(--accent);
  font-style: italic;
  font-size: 16px;
  color: var(--mid);
  max-width: 38ch;
}

.pl-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.pl-meta > div { padding-right: 16px; border-right: 1px solid var(--rule); }
.pl-meta > div:last-child { border-right: none; }
.pl-meta-label {
  font-family: var(--accent);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.pl-meta-value {
  font-family: var(--head);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

/* card on the right (form) */
.pl-card {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 40px;
  position: relative;
}
.pl-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--teal);
}

.pl-card .pill { margin-bottom: 22px; }

.pl-card h2, .pl-card h3 {
  font-family: var(--head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 8px;
}
.pl-card .body-md { margin-bottom: 28px; }

.pl-form { display: flex; flex-direction: column; gap: 12px; }
.pl-form-row { display: flex; gap: 10px; }
/* Honeypot gegen Bots: fuer Menschen unsichtbar und nicht fokussierbar, bleibt leer. */
.pl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pl-form-row .input { flex: 1; }
.pl-form-hint { font-size: 12.5px; color: var(--mid); margin: -4px 0 0; }

.pl-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 28px;
  padding: 14px 16px;
  background: var(--blanc);
  border-left: 3px solid var(--teal);
}
.pl-counter-avatars { display: flex; }
.pl-counter-avatars span {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #fff;
  margin-left: -8px;
}
.pl-counter-avatars span:first-child { margin-left: 0; }
.pl-counter-avatars span:nth-child(even) { background: var(--teal); }
.pl-counter-text { font-size: 13px; color: var(--mid); line-height: 1.4; }
.pl-counter-text strong { color: var(--navy); font-weight: 700; }

.pl-trust {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pl-trust .pill { font-size: 11px; padding: 6px 12px; }

.pl-hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pl-hint svg { flex-shrink: 0; opacity: 0.55; }

.pl-unlock-toggle {
  margin-top: 18px;
  font-family: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  background: none; border: none;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule);
  cursor: pointer;
  transition: color 0.18s var(--ease);
}
.pl-unlock-toggle:hover { color: var(--navy); }

.pl-unlock-form { display: none; margin-top: 16px; gap: 10px; }
.pl-unlock-form.visible { display: flex; }

.pl-success { display: none; text-align: center; padding: 20px 0; }
.pl-success.visible { display: block; animation: fadeUp 0.5s var(--ease-out) both; }
.pl-success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.pl-success-icon svg { width: 24px; height: 24px; }
.pl-success h2, .pl-success h3 { margin-bottom: 8px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.form-feedback { font-size: 12px; color: var(--danger); min-height: 1.2em; }
.form-feedback.ok { color: var(--teal); }

/* Lock auf schmalen Bildschirmen: eine Spalte, Karte unter dem Text. Diese Regel stand frueher
   zusammen mit der Manga-Variante in einer Zeile und ging in Schritt 18 mit ihr verloren,
   danach hing die Wartelisten-Karte auf dem Handy rechts aus dem Bild (20.09.2026). */
@media (max-width: 920px) {
  .pl-edit-grid { grid-template-columns: 1fr; gap: 40px; }
  .pl-edit-left { gap: 24px; }
  .pl-edit-left h1 { font-size: clamp(38px, 9vw, 64px); }
  .pl-card { padding: 28px 24px; }
}
@media (max-width: 560px) {
  .prelaunch { padding: 32px var(--gutter) 48px; }
  .pl-topbar { margin-bottom: 36px; }
  .pl-edit-left h1 { font-size: clamp(34px, 10.5vw, 44px); }
  .pl-claim { font-size: 15px; }
  .pl-card { padding: 24px 20px; }
  /* E-Mail und Button untereinander, sonst bleibt fuer die Adresse zu wenig Platz */
  .pl-form-row, .pl-unlock-form.visible { flex-direction: column; }
  .pl-form-row .btn, .pl-unlock-form .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════
   FULL LANDING (live mode)
   ════════════════════════════════════════════════════════ */

/* hide / show modes */
body[data-mode="locked"] .live-only { display: none !important; }
body[data-mode="live"]   .locked-only { display: none !important; }

/* ── Header auf Navy (Schritt 16): Landing-Header liegt auf dem Hero, Legal-Seiten bleiben weiss ── */
.site-header { background: rgba(10, 37, 64, 0.86); border-bottom-color: var(--rule-w); }
.site-header .logo-wordmark { color: #fff; }
.site-header .logo-wordmark .accent { color: var(--teal-2); }   /* Teal auf Navy liegt bei 3.3:1, Teal-2 bei 8:1 */
.site-header .logo-mark { background: #fff; }
.site-header .logo-mark svg path { stroke: var(--navy); }
.site-header .nav-links a { color: rgba(255, 255, 255, 0.72); }
.site-header .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.site-header .lang-switch { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); }
.site-header .lang-switch button { color: rgba(255, 255, 255, 0.82); }   /* 0.6 lag bei 3.7:1 auf Navy */
.site-header .lang-switch button + button { border-left-color: rgba(255, 255, 255, 0.14); }
.site-header .lang-switch button:hover { color: #fff; }
.site-header .lang-switch button.active { background: #fff; color: var(--navy); }
.site-header .nav-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.site-header .nav-toggle-bars span { background: #fff; }
.site-header .btn-primary { color: var(--navy); box-shadow: 0 8px 24px rgba(0, 191, 166, 0.25); }
@media (max-width: 1200px) {
  .site-header .nav-links { background: var(--navy); border-bottom-color: var(--rule-w); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); }
  .site-header .nav-links a { color: rgba(255, 255, 255, 0.85); }
}

/* ── Hero (Schritt 16, Mockup E): Navy mit Raster und Glow, Buehne ragt in die naechste Sektion ── */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 78%, #0E2D4E 100%);
  color: #fff;
  border-top: none;
  padding: clamp(48px, 6vw, 72px) 0 0;
  z-index: 2;
  overflow: visible;   /* die Buehne darf unten herausragen; Raster und Glow liegen in .hero-bg und werden dort beschnitten */
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--rule-w) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-w) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero-bg::after {
  content: "";
  position: absolute; width: 1100px; height: 820px; right: -260px; top: -40px;
  background: radial-gradient(closest-side, rgba(0, 191, 166, 0.34), rgba(0, 191, 166, 0.08) 55%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: end;
  padding-bottom: 110px;
}
.hero-grid > * { min-width: 0; }
.hero-copy { padding-bottom: 8px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: 13px; font-weight: 600;
  padding: 7px 14px 7px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.hero-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 0 4px rgba(0, 217, 188, 0.18); animation: pulseDot 2s ease infinite; }
.hero h1 {
  font-family: var(--head);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 22px 0 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.72) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero h1 em { font-style: normal; color: var(--teal-2); -webkit-text-fill-color: var(--teal-2); }
.hero .lead { color: rgba(255, 255, 255, 0.72); max-width: 48ch; font-size: 19px; margin-top: 22px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-actions .btn-primary { color: var(--navy); box-shadow: 0 8px 24px rgba(0, 191, 166, 0.25); }
.hero-vera-intro {
  margin-top: 22px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; gap: 8px;
}
.hero-vera-intro::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }

/* Buehne: weisse Karte mit Lichtrand, gestaffeltem Schatten und Glow, ragt 120px in die naechste Sektion */
.hero-stage-wrap { position: relative; }
.hero-stage {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  color: var(--navy);
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 22px 22px 88px;   /* unten Platz, damit das schwebende Mini-Cockpit keine Transkript-Zeile verdeckt */
  margin-bottom: -120px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, var(--shadow-3), var(--shadow-glow);
}
.hero-stage::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(0, 217, 188, 0.6), rgba(255, 255, 255, 0.15) 40%, rgba(0, 191, 166, 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.hs-player {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 18px 20px; background: var(--bg-2);
}
/* Border Beam: ein Lichtpunkt laeuft um den Rand, solange das Beispiel spielt */
.hs-player::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam, 0deg), transparent 0 70%, var(--teal) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}
.hero-stage.playing .hs-player::before { opacity: 1; animation: beam 3s linear infinite; }
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --beam: 360deg; } }
.hs-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--accent); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--mid);
}
.hs-live { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-text); }
.hs-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulseDot 2s ease infinite; }
.hs-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.hs-play {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hs-play:hover { transform: scale(1.06); background: var(--teal-2); }
.hs-play svg { margin-left: 2px; }
.hero-stage.playing .hs-play svg { margin-left: 0; }
/* Echte Aufnahme (27.09.2026): waehrend der Wiedergabe zeigt der Knopf Pause statt Play */
.hs-play .ico-pause { display: none; }
.hero-stage.playing .hs-play .ico-play { display: none; }
.hero-stage.playing .hs-play .ico-pause { display: block; }
.hs-wave { position: relative; display: flex; align-items: center; gap: 3px; height: 44px; flex: 1; min-width: 0; }
.hs-wave i {
  flex: 1; max-width: 4px; height: 30%; border-radius: 2px;
  background: var(--rule);
  transform-origin: center;
  transition: background var(--dur-fast) var(--ease);
}
.hs-wave i.done { background: linear-gradient(180deg, var(--teal-2), var(--teal)); }
.hero-stage.playing .hs-wave i.done { animation: wavebar 1.1s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes wavebar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
.hs-time { font-family: var(--accent); font-size: 13px; color: var(--mid); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.hs-hint { margin-top: 10px; font-size: 12.5px; color: var(--mid); }
.hs-hint b { color: var(--navy); }

.hs-trans { margin-top: 12px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; min-height: 236px; }
.hs-msg {
  padding: 9px 13px; border-radius: 10px; max-width: 86%;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hs-msg.in { opacity: 1; transform: none; }
.hs-msg.v { background: rgba(0, 191, 166, 0.12); justify-self: start; }
.hs-msg.c { background: rgba(10, 37, 64, 0.06); justify-self: end; }

/* Schwebendes Mini-Cockpit: eigene Ebene, haengt links unten aus der Buehne */
.hs-float {
  position: absolute; left: -88px; bottom: -104px; width: 430px; z-index: 3;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hs-float.in { opacity: 1; transform: none; }
.hs-float-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  font-family: var(--accent); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--mid);
}
.hs-float-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 13.5px; border-bottom: 1px solid var(--rule);
}
.hs-float-row:last-child { border-bottom: none; }
.hs-float-row .t { color: var(--mid); font-size: 12.5px; width: 42px; flex-shrink: 0; }
.hs-float-row b { color: var(--navy); white-space: nowrap; }
.hs-float-row .chip { margin-left: auto; }
/* Der neue Eintrag (18:42) rutscht am Ende des Beispiels von oben herein (Animated List) */
.hs-float-row.hs-new { display: none; }
.hs-float-row.hs-new.in { display: flex; animation: rowIn var(--dur) var(--ease-out) both; background: rgba(0, 191, 166, 0.06); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  .hs-float { left: -24px; width: 400px; }
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 80px; }
  .hero h1 { font-size: clamp(40px, 10vw, 56px); }
  .hero .lead { font-size: 17px; }
  .hero-stage { margin-bottom: -60px; padding: 16px; }
  .hs-float { position: static; }
  .hs-msg { max-width: 100%; }
  .hs-float { position: static; width: auto; margin-top: 12px; box-shadow: var(--shadow-1); }
  .hs-float-row { flex-wrap: wrap; row-gap: 4px; }   /* Chip rutscht auf dem Handy in die naechste Zeile statt abgeschnitten zu werden */
}

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-q {
  width: 100%;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  background: none;
  font-family: var(--head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  transition: color 0.18s var(--ease);
}
.faq-q:hover { color: var(--teal-ink); }
.faq-q-icon {
  width: 28px; height: 28px;
  border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
  color: var(--mid);
}
.faq-item.open .faq-q-icon {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), opacity 0.3s ease;
  opacity: 0;
}
.faq-item.open .faq-a {
  max-height: 600px;
  opacity: 1;
}
.faq-a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mid);
  padding: 0 0 24px;
  max-width: 70ch;
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════════════════
   REDESIGNED SECTIONS (added after rebuild)
   ════════════════════════════════════════════════════════ */

/* ── Section heading helper ── */
.h-section {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0;
  text-wrap: pretty;
}
.h-section em { font-style: normal; color: var(--teal); }
.h-section br { display: block; }

/* narrow wrap for FAQ etc. */
.wrap-narrow {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

/* ════════════════════════════════════════════════════════
   INTERACTION LAYER (v2)
   ════════════════════════════════════════════════════════ */

/* scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--teal-2));
  z-index: 200;
  pointer-events: none;
}

body[data-mode="locked"] .scroll-progress { display: none; }

/* header condenses on scroll */
.site-header { transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease); }
.site-header.scrolled {
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.25);
  background: rgba(10, 37, 64, 0.92);   /* bleibt Navy, auch ueber weissen Sektionen (Schritt 16) */
  backdrop-filter: blur(14px) saturate(160%);
}

/* scrollspy active nav link */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 0; height: 2px;
  background: var(--teal);
  transform: translateX(-50%);
  transition: width 0.25s var(--ease);
}
.nav-links a.active::after, .nav-links a:hover::after { width: 60%; }
.nav-links a.active { color: #fff; }

/* hero entrance */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1 { animation: heroIn 0.7s var(--ease) both 0.15s; }
.hero .lead { animation: heroIn 0.7s var(--ease) both 0.28s; }
.hero .hero-actions { animation: heroIn 0.7s var(--ease) both 0.4s; }
.hero .hero-stage { animation: heroIn 0.8s var(--ease) both 0.3s; }

/* spotlight hover on cards */
.spot { position: relative; overflow: hidden; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 191, 166, 0.12), transparent 45%);
  pointer-events: none;
}
.spot:hover::after { opacity: 1; }

/* reveal stagger for grids */

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .lead, .hero .hero-actions, .hero .hero-stage { animation: none; }
}


/* Vera hero intro */
.hero-vera-intro {
  margin-top: 14px;
  font-family: var(--accent);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--mid);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero-vera-intro::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  animation: ucPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-vera-intro::before { animation: none; } }

/* ════════════════════════════════════════════════════════
   POLISH PASS (CSS only) — hover, pressed states, micro-details.
   All transitions inherit the global prefers-reduced-motion guard.
   ════════════════════════════════════════════════════════ */

/* Buttons: pressed feedback + tinted shadow on the primary CTA */
.btn {
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              border-color 0.18s var(--ease), color 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.btn:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(10, 37, 64, 0.18); }
.btn-link { transition: color 0.18s var(--ease); }
.btn-link:hover { color: var(--teal-ink); }

/* FAQ: question hover also warms the icon (closed items only —
   the .open state keeps its navy fill untouched) */
.faq-item:not(.open) .faq-q:hover .faq-q-icon {
  border-color: var(--teal);
  color: var(--teal-ink);
}

/* Sprachwahl: leichter Hover auf inaktiven Segmenten */
.lang-switch button:not(.active):hover { background: var(--blanc); }
.lang-switch button:focus-visible { outline-offset: -2px; } /* parent clips overflow */

/* Typographic detail: keep the hero headline from ragging badly */
.hero h1 { text-wrap: balance; }

/* ── Faktenleiste (Schritt 18): ersetzt die Trust-Bar. Fuenf ehrliche Aussagen, Hairlines statt Icons.
   Oben Platz fuer die Hero-Buehne, die 120px hereinragt (Schritt 16). ── */
section.facts {
  padding: 170px 0 0;
  border-top: none;
  background: linear-gradient(180deg, #F3F5F8 0%, var(--blanc) 60%);
  border-bottom: 1px solid var(--rule);
}
.facts-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* sechs Aussagen seit 01.10.2026 (Hoshii-Idee "Nummer bleibt") */
  border-top: 1px solid var(--rule);
}
.facts-grid li {
  padding: 22px 24px 22px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mid);
  border-right: 1px solid var(--rule);
}
.facts-grid li + li { padding-left: 24px; }
.facts-grid li:last-child { border-right: none; }
.facts-grid b { display: block; color: var(--navy); font-size: 16px; font-weight: 700; margin-bottom: 2px; letter-spacing: -0.01em; }
.reveal-stagger.facts-grid li { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.reveal-stagger.facts-grid.in li { opacity: 1; transform: none; }
@media (max-width: 1080px) {
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .facts-grid li { border-right: none; border-bottom: 1px solid var(--rule); padding: 16px 0; }
  .facts-grid li + li { padding-left: 0; }
  .facts-grid li:last-child { border-bottom: none; }
}
@media (max-width: 920px) { section.facts { padding-top: 96px; } }

/* ── Kennzahlenband (Schritt 30, Audit Storytelling): drei Angebotszahlen ueber der Faktenleiste ── */
.numbers { padding-bottom: 44px; }
.numbers-eyebrow { margin-bottom: 22px; }
.numbers-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.numbers-grid li { padding: 4px 32px 0 0; }
.numbers-grid li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
.num-n {
  display: block;
  font-family: var(--head);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numbers-grid p { margin: 14px 0 10px; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--mid); }
.numbers-grid a {
  font-size: var(--fs-small); font-weight: 700; color: var(--teal-ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--teal-line);
}
.numbers-grid a::after { content: "→"; display: inline-block; margin-left: 6px; text-decoration: none; }
.numbers-grid a:hover { text-decoration-color: var(--teal); }
@media (max-width: 1000px) {
  .num-n { font-size: 36px; }
  .numbers-grid li { padding-right: 20px; }
  .numbers-grid li + li { padding-left: 20px; }
  .numbers-grid p { font-size: 14px; }
}
@media (max-width: 720px) {
  .num-n { font-size: 44px; }
  .numbers-grid { grid-template-columns: 1fr; }
  .numbers-grid li, .numbers-grid li + li { padding: 20px 0; border-left: none; border-top: 1px solid var(--rule); }
  .numbers-grid li:first-child { border-top: none; padding-top: 0; }
  .numbers { padding-bottom: 28px; }
}
@media (max-width: 480px) { .facts-grid { grid-template-columns: 1fr; } }

/* ── Ein Tag mit Vera (Schritt 18): Zeitleiste mit drei Karten statt vier Tabs.
   Die Linie fuellt sich von 07:30 bis 18:42, jede Karte tickt ihre Zeilen ein (landing.js, dayTimeline). ── */
#day .section-head, #pricing .section-head { max-width: 880px; }
#day .h-section, #pricing .h-section { font-size: clamp(34px, 3.9vw, 52px); }   /* zwei Zeilen bei 1440px, wie im Mockup E */
.day-track { position: relative; height: 2px; background: var(--rule); margin: 56px 0 46px; }
.day-track-fill {
  position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--teal-2));
  transition: width 0.9s var(--ease);
}
.day-mark {
  position: absolute; top: -6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--rule);
  transform: translateX(-50%);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.day-mark b {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mid); white-space: nowrap;
}
.day-mark.on { border-color: var(--teal); box-shadow: 0 0 0 5px rgba(0, 191, 166, 0.14); }
.day-mark.now { background: var(--teal); box-shadow: 0 0 0 6px rgba(0, 191, 166, 0.22), 0 0 24px rgba(0, 191, 166, 0.5); }
.day-mark.on b { color: var(--navy); }
.day-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.day-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.day-time { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.day-time time { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.day-time small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-text); }
.day-card h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; margin: 20px 24px 8px; color: var(--navy); }
.day-card p { font-size: 15px; line-height: 1.55; color: var(--mid); margin: 0 24px 24px; }
.day-rows {
  margin-top: auto; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg-2);
  font-size: 13px; display: grid; gap: 8px;
}
.day-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.day-row.in { opacity: 1; transform: none; }
.day-row b { font-weight: 700; color: var(--teal-text); white-space: nowrap; text-align: right; }
.day-row b.red { color: var(--red-text); }

/* Schritt 27 (Audit Storytelling), Muster von Hoshii: oben eine Bildflaeche mit Uhrzeit und Symbol,
   die Oberflaeche (.day-ui) gleitet beim Ueberfahren oder per Tastatur darueber. Auf Touch zeigt die
   Zeitleiste die Oberflaechen nacheinander (.show) und laesst sie stehen (landing.js, dayTimeline).
   Seit Schritt 31 zeigt die Bildflaeche eine kleine gezeichnete Szene (assets/img/day-1..3.svg, gleiche
   Bildsprache wie die Ohne/Mit-Szene, erzeugt mit tools/draw-story-scene.mjs) statt eines Symbols. */
.day-visual { position: relative; height: 216px; padding: 22px 24px; overflow: hidden; }
.day-visual .day-time { position: relative; z-index: 1; padding-right: 28px; row-gap: 6px; }   /* Platz fuer den roten Punkt der Notfall-Karte */
.day-visual--1 { background: linear-gradient(160deg, #fff 10%, rgba(0, 191, 166, 0.16)); border-bottom: 1px solid var(--rule); }
.day-visual--2 { background: radial-gradient(circle at 82% 22%, rgba(220, 50, 50, 0.30), transparent 55%), var(--navy); }
.day-visual--3 { background: linear-gradient(160deg, var(--navy-3), var(--navy)); }
.day-visual--2 .day-time time, .day-visual--3 .day-time time { color: #fff; }
.day-visual--2 .day-time small, .day-visual--3 .day-time small { color: var(--teal-2); }
.day-scene {
  position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.day-alert {
  position: absolute; top: 18px; right: 18px; width: 12px; height: 12px; border-radius: 50%;
  background: #DC3232; animation: day-alert 1.4s var(--ease) infinite;
}
@keyframes day-alert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 50, 50, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(220, 50, 50, 0); }
}
.day-ui {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  opacity: 0; transform: translateY(calc(100% + 24px));
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.day-ui .day-rows { margin: 0; background: #fff; border-color: var(--rule); box-shadow: var(--shadow-2); }
.day-card.show .day-ui { opacity: 1; transform: none; }
.day-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.day-card:focus-within .day-ui { opacity: 1; transform: none; }
@media (hover: none) {
  /* Touch: kein Ueberfahren, die Oberflaeche steht unter Uhrzeit und Symbol statt darueber */
  .day-visual { height: auto; min-height: 216px; }
  .day-visual { padding-bottom: 18px; }
  .day-scene { position: relative; width: calc(100% + 48px); max-width: none; margin: 4px -24px 0; }
  .day-ui { position: relative; left: auto; right: auto; bottom: auto; margin-top: 4px; }
}
@media (hover: hover) and (pointer: fine) {
  .day-card:hover .day-ui { opacity: 1; transform: none; }
  .day-card:hover .day-scene { transform: translateY(-10px); opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .day-ui, .day-scene { transition: none; }
  .day-alert { animation: none; }
}
@media (max-width: 980px) {
  .day-grid { grid-template-columns: 1fr; }
  .day-track { display: none; }
}

/* ── Ohne Vera / Mit Vera (Schritt 26, Audit Storytelling): Schalter wie bei Hoshii, zwei Zustaende
   derselben Szene. Ohne JS bleibt "ohne" sichtbar, die Spalten darunter tragen den Inhalt.
   Rot und Bernstein nur als Statusfarben der Chips (Tokens aus brand.css), Teal bleibt der Akzent. ── */
#story .section-head { max-width: 880px; }
.story { margin-top: 48px; }
.story-switch { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; }
.story-switch-label { font-size: 14px; font-weight: 700; color: var(--mid); cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.story[data-state="ohne"] .story-switch-label[data-side="ohne"],
.story[data-state="mit"] .story-switch-label[data-side="mit"] { color: var(--navy); }
.story-toggle {
  position: relative; width: 56px; height: 32px; padding: 0; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--bg-2); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.story-knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.story[data-state="mit"] .story-toggle { background: var(--teal); border-color: var(--teal); }
.story[data-state="mit"] .story-knob { transform: translateX(24px); background: #fff; }
.story-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.story-scene { display: grid; max-width: 640px; margin: 0 auto; }
/* Schritt 31: Illustration links, Panel rechts; unter 960 px Bild oben, Panel darunter */
.story-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: 1140px; margin: 0 auto; }
.story-stage .story-scene { max-width: none; margin: 0; }
.story-illu { position: relative; display: grid; margin: 0; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--rule); background: #F1F5F8; box-shadow: var(--shadow-1); }
.story-img { grid-area: 1 / 1; display: block; width: 100%; height: auto; transition: opacity var(--dur) var(--ease); }
.story-img-mit { opacity: 0; }
.story[data-state="mit"] .story-img-ohne { opacity: 0; }
.story[data-state="mit"] .story-img-mit { opacity: 1; }
.story-illu-tag {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--rule);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid);
}
@media (max-width: 960px) {
  .story-stage { grid-template-columns: 1fr; max-width: 640px; gap: 20px; }
}
@media (max-width: 480px) {
  .story-illu-tag { left: 8px; bottom: 6px; padding: 2px 7px; font-size: 9px; }
}
.story-panel {
  grid-area: 1 / 1; padding: 22px 24px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--shadow-2);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.story-panel-mit { opacity: 0; transform: translateY(10px) scale(0.98); }
.story[data-state="mit"] .story-panel-ohne { opacity: 0; transform: translateY(-10px) scale(0.98); }
.story[data-state="mit"] .story-panel-mit { opacity: 1; transform: none; }
.story-panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid);
}
.story-rows { display: grid; gap: 8px; }
.story-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline;
  padding: 10px 12px; border-radius: var(--radius); background: var(--bg-2);
  font-size: 14px; color: var(--navy);
}
.story-row time { font-weight: 700; color: var(--mid); font-variant-numeric: tabular-nums; }
.story-row.miss span { color: var(--red-text); font-weight: 600; }
.story-row b { font-weight: 700; }
.story-row.done span::before { content: "✓ "; color: var(--teal-text); font-weight: 700; }
.story-row em {
  font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; background: var(--navy); color: #fff;
}
.story-note {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px dashed rgba(138, 85, 16, 0.35); background: rgba(138, 85, 16, 0.07);
  font-size: 13.5px; color: var(--amber-text);
}
.story-note b { font-weight: 700; }
.story-foot { margin: 14px 2px 0; font-size: 13.5px; font-weight: 600; color: var(--teal-text); }
.story-ring { animation: story-ring 1.2s var(--ease) infinite; }
@keyframes story-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 50, 50, 0.28); }
  50% { box-shadow: 0 0 0 6px rgba(220, 50, 50, 0); }
}

.story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 40px auto 0; }
.story-col {
  padding: 20px 22px; border-radius: var(--radius-l); border: 1px solid var(--rule);
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.story-col h3 { font-size: 18px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--navy); }
.story-col ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--mid); }
.story-col li + li { margin-top: 6px; }
.story[data-state="ohne"] .story-col[data-side="mit"],
.story[data-state="mit"] .story-col[data-side="ohne"] { opacity: 0.55; }
.story[data-state="mit"] .story-col[data-side="mit"] { border-color: var(--teal); background: var(--teal-soft); }
.story-hint { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--mid); }
@media (max-width: 720px) {
  .story-cols { grid-template-columns: 1fr; }
  .story-row { grid-template-columns: auto 1fr; }
  .story-row em { grid-column: 2; justify-self: start; }
  .story-panel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-panel, .story-knob, .story-toggle, .story-col, .story-switch-label, .story-img { transition: none; }
  .story-ring { animation: none; }
}

/* ── Vor, im und nach dem Termin (Schritt 34, Audit Storytelling): der Faden vom Anruf bis zum Bericht ──
   Drei Karten wie die Tageskarten, aber mit stehender Oberflaeche: Szene oben (faden-1..3.svg),
   darunter die Zeilen, die die Szene halb ueberlappen. Keine Bewegung ausser dem Einblenden. */
.thread-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.thread-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.thread-visual { position: relative; padding: 22px 24px 0; background: linear-gradient(170deg, #fff 20%, rgba(0, 191, 166, 0.12)); border-bottom: 1px solid var(--rule); }
.thread-visual .day-time { row-gap: 6px; }
.thread-scene { display: block; width: calc(100% + 48px); max-width: none; height: auto; margin: 6px -24px 0; }
.thread-rows {
  position: relative; margin: -34px -10px 16px; padding: 12px 14px; display: grid; gap: 8px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-2);
  font-size: 13px; color: var(--navy);
}
.thread-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.thread-row b { font-weight: 700; color: var(--teal-text); white-space: nowrap; text-align: right; }
.thread-row b.rec { color: var(--red-text); }
.thread-row b.rec::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red-text); vertical-align: 1px; }
.thread-row b.muted { color: var(--mid); }
.thread-row b.pill { padding: 2px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; }
.thread-card h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; margin: 20px 24px 8px; color: var(--navy); }
.thread-card p { font-size: 15px; line-height: 1.55; color: var(--mid); margin: 0 24px 24px; }
.thread-note { margin: 22px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mid); max-width: 80ch; }
.thread-note a { font-weight: 700; color: var(--teal-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--teal-line); white-space: nowrap; }
.thread-note a::after { content: "→"; display: inline-block; margin-left: 6px; text-decoration: none; }
.reveal-stagger.thread-grid > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal-stagger.thread-grid > :nth-child(2) { transition-delay: var(--stagger); }
.reveal-stagger.thread-grid > :nth-child(3) { transition-delay: calc(2 * var(--stagger)); }
.reveal-stagger.thread-grid.in > * { opacity: 1; transform: none; }
@media (max-width: 980px) { .thread-grid { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 480px) { .thread-row { flex-wrap: wrap; } .thread-row b { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .reveal-stagger.thread-grid > * { transition: none; opacity: 1; transform: none; } }

/* ── Wie Vera entscheidet (Schritt 19): helles Bento, zwei breite und zwei schmale Karten.
   Jede Karte zeigt oben ein Stueck Produkt (Verlauf, Ansage, Schalter, Log) und unten die Regel. ── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, auto); gap: 20px; }
.bento-card { padding: 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.bento-card.wide { grid-column: span 2; }
.bento-card:first-child { background: linear-gradient(160deg, #fff, #F3F7F9); }
.bento-card::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 191, 166, 0.10), transparent); pointer-events: none; z-index: 0;
}
.bento-card > * { position: relative; z-index: 1; }
.bento-card h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; margin: auto 0 0; color: var(--navy); }
.bento-card p { font-size: 14.5px; line-height: 1.55; color: var(--mid); margin: 6px 0 0; max-width: 46ch; }
.bento-ill { flex: 1; display: flex; align-items: flex-start; overflow: hidden; max-height: 150px; margin-bottom: 16px; }
.b-list { width: 100%; max-width: 380px; display: grid; gap: 6px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.b-list div {
  border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 9px 12px; font-size: 13px; color: var(--navy);
  display: flex; gap: 10px; align-items: center; background: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bento-card.in .b-list div { opacity: 1; transform: none; }
.bento-card.in .b-list div:nth-child(2) { transition-delay: 0.15s; }
.bento-card.in .b-list div:nth-child(3) { transition-delay: 0.30s; }
.bento-card.in .b-list div:nth-child(4) { transition-delay: 0.45s; }
.b-list .tm { color: var(--mid); font-size: 12px; flex-shrink: 0; }
.b-consent {
  border: 1px dashed rgba(0, 191, 166, 0.5); background: var(--teal-soft); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: var(--navy); max-width: 360px;
}
.b-consent b { color: var(--teal-text); display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.b-switch { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--navy); }
.b-switch small { color: var(--mid); display: block; font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.sw { width: 56px; height: 30px; border-radius: 999px; background: var(--teal); position: relative; flex-shrink: 0; }
.sw i { position: absolute; top: 4px; left: 30px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 37, 64, 0.25); transition: left var(--dur) var(--ease); }
.bento-card:hover .sw { background: var(--teal-2); }
.b-log {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; color: var(--mid);
  display: grid; gap: 6px; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.b-log b { color: var(--navy); font-weight: 600; }
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .bento-card.wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card.wide { grid-column: span 1; padding: 22px; }
}

/* ── Wo Ihre Daten sind (Schritt 19): vier Schritte in einer Reihe, darueber die Leitung mit laufendem Impuls (SVG). ── */
.flow-pipe { position: relative; height: 24px; margin: 0 12.5% 14px; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-base { stroke: var(--rule); stroke-width: 2; }
.flow-pulse { stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 90 910; stroke-dashoffset: 90; animation: flowPulse 5s linear infinite; }
@keyframes flowPulse { to { stroke-dashoffset: -1000; } }
.flow-pipe .flow-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--teal);
  transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(0, 191, 166, 0.12);
}
/* Die Punkte sitzen ueber den Spaltenmitten: die Leitung ist um 12.5% eingerueckt, die Punkte liegen bei 0/33/66/100% davon */
.flow-pipe .flow-dot:nth-child(2) { left: 0 !important; }
.flow-pipe .flow-dot:nth-child(3) { left: 33.333% !important; }
.flow-pipe .flow-dot:nth-child(4) { left: 66.667% !important; }
.flow-pipe .flow-dot:nth-child(5) { left: 100% !important; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: var(--radius-l); background: #fff; overflow: hidden; box-shadow: var(--shadow-1); }
.flow li { padding: 26px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.flow li:last-child { border-right: none; }
.flow-n { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.flow h3 { font-size: 17px; letter-spacing: -0.01em; margin: 16px 0 6px; color: var(--navy); }
.flow p { font-size: 14px; line-height: 1.55; color: var(--mid); margin: 0; }
.flow-loc { margin-top: auto; padding-top: 14px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--teal-text); display: flex; align-items: flex-start; gap: 7px; }
.flow-loc i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; margin-top: 5px; }
.flow-loc.open { color: var(--mid); }
.flow-loc.open i { background: transparent; border: 1.5px dashed currentColor; }
/* Schritt 35: der Weg der Aufnahme im Sprechzimmer, als eigener Kasten unter den vier Schritten */
.flow-extra {
  display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 24px; align-items: start;
  margin-top: 16px; padding: 22px 26px; border: 1px solid var(--rule); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1);
}
.flow-extra .flow-n { background: var(--teal); }
.flow-extra h3 { font-size: 17px; letter-spacing: -0.01em; margin: 4px 0 6px; color: var(--navy); }
.flow-extra p { font-size: 14px; line-height: 1.55; color: var(--mid); margin: 0; }
.flow-extra-locs .flow-loc { margin-top: 0; padding-top: 4px; }
.flow-extra-locs .flow-loc + .flow-loc { padding-top: 10px; }
@media (max-width: 720px) {
  .flow-extra { grid-template-columns: auto 1fr; }
  .flow-extra-locs { grid-column: 2; }
}
.flow-note { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mid); max-width: 72ch; }
@media (max-width: 980px) {
  .flow-pipe { display: none; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:nth-child(2n) { border-right: none; }
  .flow li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .flow li { border-right: none; border-bottom: 1px solid var(--rule); padding: 22px; }
  .flow li:last-child { border-bottom: none; }
}

/* ── Das Praxis-Cockpit: seit Schritt 33 (Audit Storytelling) fuenf Karten wie bei Hoshii statt drei Reiter
   im Browserrahmen. Jede Karte: Titel, ein Satz, unten ein echter Ausschnitt der Demo, vom Kartenrand
   angeschnitten. Reihe mit scroll-snap, auf dem Handy wischbar, Pfeile in landing.js (cockpitCards). ── */
section.cock { background: var(--bg-2); }
.cards { margin-top: 8px; }
.cards-row {
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 8px 2px 24px; margin: 0 -2px;
}
.cards-row::-webkit-scrollbar { display: none; }
.cards-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: var(--radius-l); }
.cards-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.ccard {
  position: relative; flex: 0 0 clamp(290px, 30vw, 400px); height: 480px;
  display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start;
  padding: 28px 28px 0; border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ccard--navy { background: var(--navy); }
.ccard--tint { background: linear-gradient(var(--teal-soft), var(--teal-soft)), #fff; border: 1px solid var(--teal-line); }
.ccard--light { background: #fff; border: 1px solid var(--rule); }
.ccard-k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-text); }
.ccard--navy .ccard-k { color: var(--teal-2); }   /* Teal-2 auf Navy liegt bei 8:1 */
.ccard h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; margin: 10px 0 8px; color: var(--navy); }
.ccard p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--mid); }
.ccard--navy h3 { color: #fff; }
.ccard--navy p { color: rgba(255, 255, 255, 0.78); }
.ccard-shot { margin: auto -140px -18px 0; padding-top: 24px; transition: transform var(--dur) var(--ease); }
.ccard-shot img {
  display: block; width: 560px; max-width: none; height: auto;
  border-radius: 10px 0 0 0; background: #fff; box-shadow: var(--shadow-2);
}
.ccard-shot--wide img { width: 760px; }   /* Freigaben: flacher Ausschnitt, darum groesser */
/* Anrufe und Termine: ganzer Ausschnitt sichtbar, weil rechts die Ergebnis-Chips und die von Vera
   gebuchten Termine stehen. Gerendert in einem schmaleren Cockpit-Fenster (vw 1000 im Render-Skript). */
.ccard-shot--fit { margin-right: 0; }
.ccard-shot--fit img { width: 100%; border-radius: 10px 10px 0 0; }
.cards-nav { display: flex; justify-content: flex-end; gap: 10px; }
.cards-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rule); background: #fff; color: var(--navy); font-size: 18px; line-height: 1;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.cards-btn:hover:not([disabled]) { background: var(--bg-2); }
.cards-btn[disabled] { opacity: 0.4; cursor: default; }
.cards-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .ccard:hover .ccard-shot { transform: translateY(-10px); }
}
.cock-foot { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cock-foot-note { font-size: var(--fs-small); color: var(--mid); max-width: 420px; line-height: 1.5; }

/* ── Klick-Tour (Schritt 28, Audit Storytelling): <dialog> mit Schranke und sechs Schritten ──
   Bild 16:10 aus tools/render-cockpit-cards.mjs, Hotspot und Zoom-Ursprung ueber --x/--y je Schritt.
   Zoom per Klasse .zoom (automatisch nach dem Wechsel, Klick aufs Bild schaltet um). */
body.tour-lock { overflow: hidden; }
.tour {
  /* Breite folgt auch der Hoehe: Bild 16:10 plus Kopf, Rolle, Text und Knoepfe (~336 px) passen ohne Scrollen */
  width: min(1080px, calc(100vw - 32px), calc((100dvh - 336px) * 1.6 + 46px));
  min-width: min(640px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--bg);
  color: var(--navy);
  box-shadow: var(--shadow-3);
  overflow: auto;
  overscroll-behavior: contain;
}
.tour[open] { display: flex; flex-direction: column; }
.tour::backdrop { background: rgba(10, 37, 64, 0.62); backdrop-filter: blur(4px); }
.tour [hidden] { display: none !important; }
.tour-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 24px; border-bottom: 1px solid var(--rule-2); }
.tour-title { font-family: var(--head); font-weight: 700; font-size: 15px; }
.tour-count { margin-left: auto; font-size: var(--fs-small); color: var(--mid); white-space: nowrap; }
.tour-close {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--rule); background: #fff; color: var(--navy);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.tour-close:hover { background: var(--bg-2); }
.tour-gate { position: relative; display: grid; place-items: center; padding: 48px 20px; min-height: 540px; overflow: hidden; background: var(--bg-2); }
.tour-gate-bg { position: absolute; inset: 0; }
.tour-gate-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: blur(14px) saturate(0.9); transform: scale(1.08); opacity: 0.8; }
.tour-gate-card { position: relative; width: min(420px, 100%); background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-2); padding: 28px 26px 22px; }
.tour-gate-card h2 { font-family: var(--head); font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.tour-gate-card > p { color: var(--mid); font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.tour-gate-card .field { margin-bottom: 12px; }
.tour-gate-card .field label { font-size: 12.5px; }
.tour-gate-card .btn { width: 100%; margin-top: 6px; }
.tour-gate-card .form-feedback { margin-top: 8px; }
.tour-privacy { font-size: 12px; color: var(--mid); line-height: 1.5; margin: 4px 0 0; }
.tour-privacy a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.tour-steps { padding: 18px 22px 20px; }
.tour-list { list-style: none; margin: 0; padding: 0; }
.tour-shot { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-2); cursor: zoom-in; }
.tour-zoom { --z: 1; position: absolute; inset: 0; transform-origin: var(--x) var(--y); transform: scale(var(--z)); transition: transform 0.9s var(--ease); }
.tour-step.zoom .tour-zoom { --z: 1.3; }
.tour-step.zoom .tour-shot { cursor: zoom-out; }
.tour-zoom img { display: block; width: 100%; height: 100%; }
.tour-hot {
  position: absolute; left: var(--x); top: var(--y);
  /* sitzt links vor dem Punkt (--x, --y) und skaliert um ihn herum, damit Text und Abstand beim Zoom gleich bleiben */
  width: 26px; height: 26px; margin: -13px 0 0 -32px; border-radius: 50%;
  background: rgba(0, 191, 166, 0.25); border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7);
  transform-origin: calc(100% + 6px) 50%;
  transform: scale(calc(1 / var(--z))); transition: transform 0.9s var(--ease);
  pointer-events: none;
}
.tour-hot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--teal); animation: tourPulse 1.6s var(--ease-out) infinite; }
@keyframes tourPulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
.tour-text { padding: 14px 2px 0; min-height: 120px; }
/* Schritt 38: Sicht MPA oder Sicht Aerztin ueber dem Titel */
.tour-role {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--bg-2); color: var(--mid);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.tour-role--arzt { border-color: var(--teal-line); background: var(--teal-soft); color: var(--teal-text); }
.tour-text h3 { font-family: var(--head); font-size: 20px; line-height: 1.3; margin: 0 0 6px; }
.tour-text p { margin: 0; max-width: 720px; color: var(--mid); font-size: 16px; line-height: 1.55; }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.tour-nav .btn[disabled] { opacity: 0.4; cursor: default; transform: none; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--rule); transition: width var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.tour-dots i.on { width: 22px; background: var(--teal); }
@media (max-width: 720px) {
  .tour { width: 100vw; min-width: 0; height: 100dvh; max-height: none; margin: 0; inset: 0; border-radius: 0; }
  .tour-head { padding: 10px 10px 10px 16px; gap: 10px; }
  .tour-title { font-size: 14px; }
  .tour-gate { flex: 1; min-height: 0; padding: 24px 16px; }
  .tour-steps { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 18px; }
  .tour-nav { margin-top: auto; padding-top: 14px; }
  .tour-step.zoom .tour-zoom { --z: 2.1; }
  .tour-text h3 { font-size: 18px; }
  .tour-text p { font-size: 15px; }
  .tour-nav .btn { padding: 0 16px; }
  .tour-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-zoom, .tour-hot { transition: none; }
  .tour-hot::after { animation: none; }
}
@media (max-width: 720px) {
  .ccard { flex-basis: 82vw; height: 440px; padding: 24px 22px 0; }
  .ccard h3 { font-size: 20px; }
  .ccard-shot img { width: 480px; }
  .ccard-shot--wide img { width: 640px; }
  .ccard-shot--fit img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ccard, .ccard-shot { transition: none; }
  .ccard:hover, .ccard:hover .ccard-shot { transform: none; }
}

/* ── Preis (Schritt 21): Anker Teilzeitstelle links, Pilotangebot rechts. Keine Preisspanne (Entscheid F9). ── */
.price { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden; background: #fff; box-shadow: var(--shadow-1); }
.price > div { padding: 36px; display: flex; flex-direction: column; }
.price > div:first-child { border-right: 1px solid var(--rule); background: var(--bg-2); }
.price-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 12px; }
.price-big { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--navy); text-wrap: balance; }
.price-big em { font-style: normal; color: var(--teal-text); }
.price p { font-size: 15px; line-height: 1.55; color: var(--mid); margin: 12px 0 0; max-width: 46ch; }
.price .price-note { font-size: 12.5px; margin-top: auto; padding-top: 18px; }
.price ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; font-size: 15px; line-height: 1.5; color: var(--navy); }
.price li { display: flex; gap: 10px; }
.price li::before { content: "✓"; color: var(--teal-text); font-weight: 700; flex-shrink: 0; }
.price .btn { margin-top: 24px; align-self: flex-start; }
@media (max-width: 880px) {
  .price { grid-template-columns: 1fr; }
  .price > div { padding: 26px; }
  .price > div:first-child { border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ── Pilotpraxis werden (Schritt 21): Navy wie im Mockup E, weisses Formular links, drei Schritte rechts.
   Das Formular sendet an /api/contact (landing.js, pilotForm). ── */
section.pilot { background: var(--navy); color: rgba(255, 255, 255, 0.78); border-top: none; padding: clamp(80px, 9vw, 110px) 0; }
.pilot-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-w); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-3); }
.pilot-form { background: #fff; color: var(--ink); padding: 40px; }
.pilot-form h2 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; color: var(--navy); margin: 0; }
.pilot-form > div > p, .pilot-success p { font-size: 15px; line-height: 1.55; color: var(--mid); margin: 8px 0 0; }
.pilot-form form { margin-top: 22px; }
.pilot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pilot-form .field { margin-bottom: 14px; }
.pilot-form .field label { font-size: 12.5px; }
.pilot-form textarea.input { resize: vertical; min-height: 76px; line-height: 1.45; }
.pilot-form .btn { margin-top: 8px; }
.pilot-form .form-feedback { margin-top: 10px; }
.pilot-privacy { font-size: 12.5px; color: var(--mid); margin: 12px 0 0; line-height: 1.5; }
.pilot-success h2 { font-size: 30px; letter-spacing: -0.03em; color: var(--navy); margin: 0; }
.pilot-side { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.pilot-side .eyebrow { color: var(--teal); }
.pilot-side h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; color: #fff; margin: 0; }
.pilot-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pilot-side li { display: flex; gap: 14px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.pilot-side li b { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; color: #fff; flex-shrink: 0; }
.pilot-side li strong { color: #fff; font-weight: 700; }
.pilot-side small { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 880px) {
  .pilot-grid { grid-template-columns: 1fr; }
  .pilot-form, .pilot-side { padding: 26px; }
  .pilot-row { grid-template-columns: 1fr; gap: 0; }
}