/* ============================================================
   kundensicht.css — Relaunch "Von Beratersicht zu Kundensicht"
   (Oktober 2026, Plan in docs/website-plan.md)
   ------------------------------------------------------------
   Bausteine, die auf allen Seiten gleich sind: Navigation mit
   "Deine Situation", Leiste unten auf dem Handy, Echtheitshinweis
   zu Bewertungen, Kasten "Für wen ist das?", die Vorlage der
   Lebenslagen-Seiten und die Rechner.

   Geladen NACH design-2026.css. Wo Inline-Styles der Altseiten
   spezifischer sind, steht "body " davor.
   Aenderungen brauchen ein neues ?v=JJJJMMTT.
   ============================================================ */

/* ---------- 1) Navigation ----------
   Fragt "Was ist deine Situation?" statt "Welches Produkt willst du?".
   Die Altseiten bringen eigene Inline-Regeln mit zwei verschiedenen
   Umbruchpunkten (1100 und 1150 px) mit. Hier sind beide Zustaende
   vollstaendig definiert, damit alle Seiten bei 1080 px umschalten. */
body #site-nav { gap: 16px; }
body #site-nav .nav-links { gap: 4px; }
body #site-nav .nav-link,
body #site-nav .nav-gruppe-knopf {
  font-size: 15px; font-weight: 600; color: var(--gray-700);
  padding: 10px 12px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--font-body); text-decoration: none; white-space: nowrap;
}
body #site-nav .nav-gruppe-knopf:hover,
body #site-nav .nav-gruppe.offen .nav-gruppe-knopf {
  background: rgba(14,59,52,.07); color: var(--brand);
}
.nav-gruppe { position: relative; }
.nav-gruppe-knopf .pfeil { font-size: 11px; transition: transform .2s; }
.nav-gruppe.offen .nav-gruppe-knopf .pfeil { transform: rotate(180deg); }
.nav-gruppe-titel { display: none; }
.nav-gruppe-liste {
  display: none; position: absolute; top: calc(100% + 10px); left: -12px;
  width: 560px; padding: 14px; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(10,15,14,.14);
  grid-template-columns: 1fr 1fr; gap: 2px 10px; z-index: 1001;
}
.nav-gruppe.offen .nav-gruppe-liste { display: grid; }
.nav-gruppe-liste a {
  display: block; padding: 10px 12px; text-decoration: none; border-radius: 2px;
  color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.3;
}
.nav-gruppe-liste a small {
  display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 3px;
}
.nav-gruppe-liste a:hover { background: var(--gray-50); }
.nav-gruppe-liste a:hover small { color: var(--gray-700); }
.nav-gruppe-liste a.nav-unternehmer { grid-column: 1 / -1; border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; padding-top: 14px; }
body #site-nav .nav-cta { padding: 12px 20px; min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 1081px) {
  body #site-nav .nav-links {
    display: flex; position: static; flex-direction: row; align-items: center;
    background: none; border: 0; box-shadow: none; padding: 0; margin: 0 auto 0 24px;
  }
  body #site-nav .nav-hamburger { display: none !important; }
  body #site-nav .nav-cta { display: inline-flex !important; }
  body #site-nav .nav-cta-dropdown { display: none !important; }
}

@media (max-width: 1080px) {
  body #site-nav { gap: 0; }
  body #site-nav .nav-links {
    display: none; position: fixed; top: 64px; left: 0; right: 0;
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(10,15,14,.12); padding: 10px 16px 18px; z-index: 999;
  }
  body #site-nav .nav-links.nav-open { display: flex; }
  body #site-nav .nav-link { display: flex; font-size: 16px; padding: 12px 8px; border-bottom: 1px solid var(--gray-50); white-space: normal; }
  /* Plan: Kopfzeile mit kleinem Knopf "Kurzcheck" auch auf dem Handy */
  body #site-nav .nav-cta { display: inline-flex !important; margin-left: auto; margin-right: 8px; padding: 8px 14px; min-height: 44px; font-size: 15px; }
  body #site-nav .nav-cta .nav-cta-lang { display: none; }
  body #site-nav .nav-hamburger { display: flex !important; align-items: center; justify-content: center; }
  body #site-nav .nav-cta-dropdown {
    display: flex !important; align-items: center; justify-content: center;
    background: var(--gold); color: #241701 !important; min-height: 48px;
    margin-top: 14px; font-size: 16px; font-weight: 700; text-decoration: none; border-radius: 2px;
  }
  /* Auf dem Handy liegt die Gruppe offen: ein Tipp weniger bis zur Lebenslage */
  .nav-gruppe-knopf { display: none !important; }
  .nav-gruppe-titel {
    display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--oak-deep); padding: 8px 8px 4px;
  }
  .nav-gruppe-liste {
    display: grid; position: static; width: auto; padding: 0 0 8px; margin-bottom: 6px;
    border: 0; border-bottom: 1px solid var(--line); box-shadow: none; grid-template-columns: 1fr 1fr; gap: 0 6px;
  }
  .nav-gruppe-liste a { padding: 11px 8px; min-height: 44px; font-size: 15px; }
  .nav-gruppe-liste a small { display: none; }
  .nav-gruppe-liste a.nav-unternehmer { margin-top: 0; padding-top: 11px; border-top: 0; }
}

/* ---------- 2) Leiste unten auf dem Handy ----------
   Links gross "Kurzcheck buchen", rechts Anrufen und WhatsApp als
   Symbole. Der Ratgeber gehoert nicht in die Leiste (Plan). */
.ks-leiste { display: flex; gap: 8px; align-items: stretch; width: 100%; }
body .cro-sticky .ks-leiste .cro-sticky-btn { flex: 1 1 auto; width: auto; font-size: 16px; }
body .cro-sticky .ks-leiste .ks-symbol {
  flex: 0 0 52px; display: flex; align-items: center; justify-content: center;
  min-height: 48px !important; padding: 0 !important; border-radius: 2px;
  background: var(--brand); color: #fff; text-decoration: none;
}
body .cro-sticky .ks-leiste .ks-symbol:hover { background: var(--brand-mid); color: #fff; }
body .cro-sticky .ks-leiste .ks-symbol svg { width: 22px; height: 22px; }
body .cro-sticky .ks-leiste .ks-symbol.ks-wa { background: #0B5E3A; }

/* ---------- 3) Echtheitshinweis zu Bewertungen ----------
   Pflicht nach § 5b Abs. 3 UWG, direkt unter der Bewertungsueberschrift
   (OLG Frankfurt, 19.05.2026: hinter einem unklaren Link reicht nicht). */
.reviews-note {
  font-size: 14px; line-height: 1.55; color: var(--muted);
  border-left: 2px solid var(--oak); padding: 4px 0 4px 12px; margin: 12px 0 24px; max-width: 64ch;
}
.reviews-note a { color: var(--brand); font-weight: 600; }
.reviews-note.auf-dunkel { color: rgba(255,255,255,.78); border-color: var(--gold); }
.reviews-note.auf-dunkel a { color: #fff; }
.reviews-note.mitte { margin-left: auto; margin-right: auto; text-align: left; }

/* ---------- 4) Kasten "Für wen ist das?" auf Produktseiten ---------- */
.ks-fuerwen {
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: 18px clamp(16px, 4vw, 24px);
}
.ks-fuerwen-inner { max-width: 1060px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.ks-fuerwen strong { font-family: var(--font-mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--oak-deep); font-weight: 500; }
.ks-fuerwen p { font-size: 16px; color: var(--gray-700); margin: 0; flex: 1 1 380px; max-width: 60ch; line-height: 1.55; }
.ks-fuerwen a { color: var(--brand); font-weight: 700; }

/* ---------- 5) Vorlage Lebenslagen-Seite ---------- */
.ks-seite { background: var(--paper); }
.ks-wrap { max-width: 1060px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }
.ks-schmal { max-width: 760px; }

/* Hero: Frage in Kundenworten + "Kurz gesagt" im ersten Bildschirm */
body .hero.ks-hero { padding: 112px 0 48px; }
body .hero.ks-hero .ks-wrap { position: relative; }
body .hero.ks-hero h1 { font-size: clamp(34px, 5.2vw, 64px); max-width: 20ch; margin-bottom: 22px; line-height: 1.02; }
.ks-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 16px;
}
.ks-kurz {
  background: rgba(255,253,249,.97); color: var(--ink); border-left: 4px solid var(--gold);
  padding: 18px 22px; max-width: 640px; margin: 0 0 24px;
}
.ks-kurz-titel { font-family: var(--font-mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--oak-deep); margin: 0 0 6px; }
.ks-kurz p { font-size: 17px; line-height: 1.6; margin: 0; color: var(--ink); }
.ks-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ks-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  background: var(--gold); color: #241701; padding: 14px 26px; border-radius: 2px;
  font-weight: 700; font-size: 17px; text-decoration: none; border: 0; cursor: pointer;
  font-family: var(--font-body); transition: background .18s, transform .18s; text-align: center;
}
.ks-knopf:hover { background: #F5B72E; color: #241701; transform: translateY(-1px); }
.ks-knopf.dunkel { background: var(--brand); color: #fff; }
.ks-knopf.dunkel:hover { background: var(--brand-mid); color: #fff; }
.ks-zweit { color: #fff; font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.ks-zweit:hover { color: var(--gold-soft); }
.ks-hinweis { font-size: 14px; color: rgba(255,255,255,.75); margin: 12px 0 0; width: 100%; }
.ks-hell .ks-zweit { color: var(--brand); }
.ks-hell .ks-hinweis { color: var(--muted); }

/* Abschnitte */
.ks-abschnitt { padding: clamp(48px, 7vw, 88px) 0; border-bottom: 1px solid var(--line); }
.ks-abschnitt.weiss { background: var(--white); }
.ks-abschnitt.sand2 { background: var(--paper-2); }
.ks-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--oak-deep); margin: 0 0 12px; }
.ks-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; font-size: clamp(28px, 3.6vw, 44px); color: var(--ink); margin: 0 0 18px; max-width: 24ch; }
/* nur Absaetze ohne eigene Klasse: sonst ueberschreibt die Regel (0,1,1)
   Rubrikzeile, Gedanken-Karten und Kaesten (gemessen: .ks-label 12 -> 17 px) */
.ks-abschnitt p:not([class]) { font-size: 17px; line-height: 1.7; color: var(--gray-700); max-width: 60ch; margin: 0 0 14px; }
.ks-abschnitt ul { max-width: 60ch; }

/* "Kennst du das?" — drei Gedanken */
.ks-gedanken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.ks-gedanke {
  background: var(--white); border: 1px solid var(--line); padding: 22px 22px 20px;
  font-family: var(--font-display); font-size: 20px; line-height: 1.35; letter-spacing: -.02em; color: var(--ink);
}
.ks-gedanke::before { content: "„"; color: var(--gold-deep); font-size: 1.3em; margin-right: 1px; }

/* Fragen mit Antwort */
.ks-frage { padding: 30px 0; border-top: 1px solid var(--line); }
.ks-frage:first-of-type { border-top: 0; padding-top: 6px; }
.ks-frage h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--ink); margin: 0 0 12px; max-width: 30ch; }
.ks-fuerdich {
  background: var(--brand-light); border-left: 3px solid var(--brand); padding: 12px 16px; margin: 14px 0 0; max-width: 60ch;
  font-size: 16px; line-height: 1.6; color: var(--ink);
}
.ks-fuerdich strong { color: var(--brand); }
.ks-frage .ks-mehr { display: inline-block; margin-top: 12px; color: var(--brand); font-weight: 700; text-decoration: none; }
.ks-frage .ks-mehr:hover { text-decoration: underline; }
.ks-details { margin: 14px 0 0; max-width: 60ch; }
.ks-details summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.ks-details summary:hover { color: var(--brand); }
.ks-details p, .ks-details li { font-size: 15px !important; color: var(--muted) !important; }
.ks-status {
  display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid currentColor; border-radius: 2px; vertical-align: 2px; margin-left: 6px;
}
.ks-status.gilt { color: #166534; }
.ks-status.beschlossen { color: var(--brand); }
.ks-status.geplant { color: #8A4B08; }

/* "Was du dir sparen kannst" */
.ks-sparen { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ks-sparen li { background: var(--white); border: 1px solid var(--line); padding: 16px 18px 16px 50px; position: relative; font-size: 16px; line-height: 1.55; color: var(--gray-700); max-width: 64ch; }
.ks-sparen li::before { content: "–"; position: absolute; left: 18px; top: 12px; font-size: 22px; color: var(--oak); font-weight: 600; }
.ks-sparen li strong { color: var(--ink); }

/* Fallbeispiel */
.ks-fall { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px 48px; background: var(--white); border: 1px solid var(--line); padding: clamp(22px, 4vw, 40px); }
.ks-fall-zitat { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.ks-fall-wer { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--oak-deep); }
.ks-fall-zahl { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.04em; line-height: 1; color: var(--brand); }
.ks-fall-zahl span { display: block; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 8px; }
.ks-fall p { font-size: 16px !important; }

/* Eine Bewertung mit Echtheitshinweis */
.ks-bewertung { background: var(--white); border: 1px solid var(--line); padding: clamp(22px, 4vw, 36px); max-width: 760px; }
.ks-bewertung blockquote { font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); line-height: 1.45; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.ks-bewertung .wer { margin-top: 14px; font-size: 15px; color: var(--muted); }
.ks-bewertung .wer strong { color: var(--ink); }
.ks-sterne { color: var(--gold-deep); letter-spacing: 2px; }   /* --star kommt auf Weiss nur auf 2,36:1 */
.st-vertrauen .ks-sterne, .ks-klaeren .ks-sterne { color: var(--gold); }

/* Markierte Werte aus site.json/fakten.json uebernehmen Farbe und Schrift ihrer
   Umgebung. Sonst faerbt z. B. die Akzentregel fuer h2 span die Zahl senfgelb
   (gemessen 1,56:1 auf /privatkunden/). */
body [data-site], body [data-fakt] { color: inherit !important; font: inherit; letter-spacing: inherit; }

/* "Das klären wir im Kurzcheck" */
.ks-klaeren { background: var(--brand); color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.ks-klaeren .ks-h2 { color: #fff; }
.ks-klaeren .ks-label { color: var(--gold); }
.ks-punkte { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 14px; max-width: 640px; }
.ks-punkte li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.9); }
.ks-punkte li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.ks-klaeren .ks-hinweis { color: rgba(255,255,255,.72); }

/* Ansprechpartner-Kasten */
.ks-person { display: flex; gap: 18px; align-items: center; background: var(--white); border: 1px solid var(--line); padding: 18px; max-width: 560px; margin-top: 24px; }
.ks-person img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; border: 2px solid var(--gold); }
.ks-person p { margin: 0 !important; font-size: 15px !important; line-height: 1.5 !important; }
.ks-person strong { color: var(--ink); }
.ks-klaeren .ks-person { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.ks-klaeren .ks-person p { color: rgba(255,255,255,.85) !important; }
.ks-klaeren .ks-person strong { color: #fff; }

/* Haeufige Fragen */
.ks-faq { max-width: 820px; margin-top: 18px; }
.ks-faq details { border-top: 1px solid var(--line); }
.ks-faq details:last-child { border-bottom: 1px solid var(--line); }
.ks-faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; min-height: 44px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(18px, 2vw, 21px); color: var(--ink);
}
.ks-faq summary::-webkit-details-marker { display: none; }
.ks-faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 26px; font-weight: 400; color: var(--oak); }
.ks-faq details[open] summary::after { content: "–"; }
.ks-faq details p { font-size: 16px; line-height: 1.7; color: var(--gray-700); margin: 0 0 20px; max-width: 60ch; }

/* Weiterlesen: hoechstens drei */
.ks-weiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.ks-weiter a { display: block; background: var(--white); border: 1px solid var(--line); padding: 20px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.ks-weiter a:hover { border-color: var(--brand); }
.ks-weiter strong { display: block; font-size: 17px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; }
.ks-weiter span { display: block; font-size: 15px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* Autor und Stand */
.ks-autor { font-size: 14px; color: var(--muted); padding: 22px 0; }
.ks-autor strong { color: var(--ink); }
.ks-klaeren .ks-autor { color: rgba(255,255,255,.75); }
.ks-klaeren .ks-autor strong { color: #fff; }

/* Video (Plan: 60 Sekunden, Untertitel, kein Autoplay mit Ton, eigener Server).
   Bis zum Klick nur das Vorschaubild - erst dann laedt das Video. */
.ks-video { position: relative; display: block; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; background: var(--brand-dark) center / cover no-repeat; border: 0; padding: 0; cursor: pointer; }
.ks-video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(233,168,30,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23241701'/%3E%3C/svg%3E") 55% 50% / 34px no-repeat; }
.ks-video span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(6,27,24,.85)); color: #fff; font-size: 15px; text-align: left; }
.ks-video video { display: block; width: 100%; height: 100%; }

/* Tabellen (z. B. Zulagen auf /familie/): seitlich wischbar statt abgeschnitten */
.ks-tabelle-wrap { overflow-x: auto; margin: 18px 0 0; max-width: 100%; }
.ks-tabelle { border-collapse: collapse; min-width: 560px; width: 100%; background: var(--white); font-size: 16px; }
.ks-tabelle caption { text-align: left; font-size: 14px; color: var(--muted); padding-bottom: 8px; }
.ks-tabelle th, .ks-tabelle td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: right; white-space: nowrap; }
.ks-tabelle th:first-child, .ks-tabelle td:first-child { text-align: left; }
.ks-tabelle thead th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--oak-deep); font-weight: 500; }
.ks-tabelle tbody td:nth-child(n+2) { color: var(--brand); font-weight: 600; }

/* Platzhalter fuer Inhalte, die nur Benni liefern kann.
   Absichtlich auffaellig: darf so nie live gehen (Phase 7). */
.benni-platzhalter {
  background: repeating-linear-gradient(135deg, #FFF6D6 0 12px, #FFEFC0 12px 24px);
  border: 2px dashed #8A4B08; color: #4A2A04; padding: 14px 16px; font-size: 15px; line-height: 1.5; margin: 14px 0;
}
.benni-platzhalter strong { color: #4A2A04; }
.benni-platzhalter::before { content: "Platzhalter · "; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 860px) {
  body .hero.ks-hero { padding: 92px 0 36px; }
  .ks-gedanken, .ks-weiter { grid-template-columns: minmax(0, 1fr); }
  .ks-fall { grid-template-columns: minmax(0, 1fr); }
  .ks-aktionen { flex-direction: column; align-items: stretch; }
  .ks-knopf { width: 100%; }
  .ks-zweit { text-align: center; }
  .ks-kurz { padding: 16px 18px; }
  .ks-kurz p { font-size: 16px; }
}

/* ---------- 6) Wegweiser (Startseite) ---------- */
.ww-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.ww-kachel {
  display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 22px 20px;
  background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.ww-kachel:hover { border-color: var(--brand); transform: translateY(-2px); }
.ww-kachel strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2vw, 23px); letter-spacing: -.025em; line-height: 1.15; }
.ww-kachel span { font-size: 15px; color: var(--muted); line-height: 1.5; }
.ww-kachel .ww-pfeil { margin-top: auto; color: var(--brand); font-weight: 700; font-size: 15px; }
.ww-unternehmer { margin-top: 20px; font-size: 16px; color: var(--gray-700); }
.ww-unternehmer a { color: var(--brand); font-weight: 700; }
@media (max-width: 860px) {
  .ww-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ww-kachel { min-height: 0; padding: 16px 14px; gap: 6px; }
  .ww-kachel strong { font-size: 17px; }
  .ww-kachel span { font-size: 14px; }
  .ww-kachel .ww-pfeil { display: none; }
}

/* ---------- 7) Rechner ---------- */
.rk-box { background: var(--white); border: 1px solid var(--line); padding: clamp(20px, 4vw, 36px); }
.rk-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.rk-feld label { display: block; font-size: 15px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.rk-feld .rk-hilfe { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.rk-eingabe { position: relative; }
.rk-eingabe input, .rk-feld select {
  width: 100%; font-size: 17px; padding: 13px 44px 13px 14px; border: 1.5px solid var(--line); border-radius: 2px;
  background: var(--white); color: var(--ink); font-family: var(--font-body); min-height: 50px;
}
.rk-eingabe input:focus, .rk-feld select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.rk-einheit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; pointer-events: none; }
.rk-annahmen { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; }
.rk-annahmen summary { cursor: pointer; font-weight: 600; color: var(--brand); min-height: 44px; display: flex; align-items: center; font-size: 16px; }
.rk-annahmen .rk-raster { margin-top: 12px; }
.rk-ergebnis { margin-top: 26px; background: var(--brand); color: #fff; padding: clamp(20px, 4vw, 32px); }
.rk-ergebnis[hidden] { display: none; }
.rk-ergebnis .rk-gross { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; line-height: 1.2; margin: 0 0 12px; color: #fff; }
.rk-ergebnis .rk-gross em { font-style: normal; color: var(--gold); }
.rk-ergebnis p { color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.6; margin: 0 0 10px; max-width: 60ch; }
.rk-ergebnis .ks-knopf { margin-top: 12px; }
.rk-hinweis-klein { font-size: 14px !important; color: rgba(255,255,255,.72) !important; margin-top: 14px !important; }
.rk-meldung { margin-top: 18px; padding: 14px 16px; background: var(--paper-2); border-left: 3px solid var(--oak); font-size: 16px; color: var(--ink); }
.rk-meldung[hidden] { display: none; }
@media (max-width: 640px) { .rk-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 8) Termin ---------- */
.tm-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tm-option { position: relative; display: block; background: var(--white); border: 1.5px solid var(--line); padding: 20px 20px 18px 54px; cursor: pointer; }
.tm-option input { position: absolute; left: 20px; top: 24px; width: 20px; height: 20px; accent-color: var(--brand); }
.tm-option strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.tm-option span { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.tm-option:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tm-fragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-top: 22px; }
.tm-fragen label { display: block; font-size: 15px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.tm-fragen select, .tm-fragen input, .tm-fragen textarea, .tm-form input, .tm-form textarea, .tm-form select {
  width: 100%; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 2px; background: var(--white);
  color: var(--ink); font-family: var(--font-body); min-height: 50px;
}
.tm-kalender { margin-top: 26px; background: var(--white); border: 1px solid var(--line); }
.tm-kalender-start { padding: clamp(22px, 4vw, 36px); text-align: center; }
.tm-kalender-start p { font-size: 15px; color: var(--muted); max-width: 56ch; margin: 12px auto 0; line-height: 1.55; }
.tm-kalender iframe { display: block; width: 100%; height: 1100px; border: 0; }
.tm-form { display: grid; gap: 14px; margin-top: 18px; }
.tm-form .tm-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tm-form label { display: block; font-size: 15px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.tm-form .tm-einw { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.5; }
.tm-form .tm-einw input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand); }
.tm-form .tm-einw label { font-size: 14px; font-weight: 400; color: var(--muted); margin: 0; }
@media (max-width: 700px) {
  .tm-optionen, .tm-fragen, .tm-form .tm-zwei { grid-template-columns: minmax(0, 1fr); }
  .tm-kalender iframe { height: 1300px; }
}

/* ---------- 9) Startseite neu ---------- */
.st-hero { background: var(--paper); padding: 118px 0 40px; border-bottom: 1px solid var(--line); }
.st-hero-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.st-zeile { font-size: 15px; color: var(--muted); margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.st-zeile .ks-sterne { font-size: 14px; }
body .st-hero h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; color: var(--ink); max-width: 22ch; margin: 0 0 20px; }
body .st-hero h1 em { font-style: normal; color: var(--brand); }
.st-unter { font-size: clamp(17px, 1.6vw, 19px); color: var(--gray-700); line-height: 1.6; max-width: 54ch; margin: 0 0 26px; }
.st-hinweis { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.st-zweit { display: inline-block; margin-top: 18px; color: var(--brand); font-weight: 700; font-size: 16px; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.st-foto { position: relative; }
.st-foto img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top; border-bottom: 3px solid var(--gold); }
.st-foto figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.st-vertrauen { background: var(--brand-dark); color: #fff; }
.st-vertrauen ul { list-style: none; margin: 0 auto; padding: 18px clamp(16px, 4vw, 24px); max-width: 1060px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.st-vertrauen li { font-size: 15px; color: rgba(255,255,255,.88); }
.st-vertrauen li strong { color: #fff; }
.st-vertrauen .ks-sterne { color: var(--gold); }
.st-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; counter-reset: schritt; }
.st-schritt { border-top: 2px solid var(--gold); padding-top: 18px; }
.st-schritt::before { counter-increment: schritt; content: counter(schritt); display: block; font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--oak-deep); margin-bottom: 8px; }
.st-schritt p { font-size: 17px !important; color: var(--gray-700); margin: 0; }
.st-faelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.st-fall { background: var(--white); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.st-fall q { font-family: var(--font-display); font-size: 20px; line-height: 1.35; letter-spacing: -.02em; color: var(--ink); quotes: "„" "“"; }
.st-fall .wer { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--oak-deep); }
.st-fall .zahl { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: -.035em; color: var(--brand); line-height: 1.05; }
.st-fall .zahl small { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 6px; }
.st-fall p:not(.zahl) { font-size: 15px !important; color: var(--gray-700); margin: 0; line-height: 1.6; }
.st-fall p.zahl { margin: 0; }
.st-fall a { margin-top: auto; color: var(--brand); font-weight: 700; text-decoration: none; font-size: 15px; }
.st-rechner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.st-rechner a { display: block; background: var(--white); border: 1px solid var(--line); padding: 18px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.35; min-height: 96px; }
.st-rechner a:hover { border-color: var(--brand); }
.st-rechner a span { display: block; color: var(--brand); margin-top: 10px; font-size: 14px; }
.st-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.st-person { background: var(--white); border: 1px solid var(--line); }
.st-person img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.st-person div { padding: 16px 18px 18px; }
.st-person strong { display: block; font-size: 18px; color: var(--ink); }
.st-person div > span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.st-person p { font-size: 15px !important; margin: 10px 0 0 !important; color: var(--gray-700); }
.st-bewertungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.st-bewertung { background: var(--white); border: 1px solid var(--line); padding: 22px; }
.st-bewertung blockquote { font-size: 16px; line-height: 1.65; color: var(--gray-700); margin: 0; }
.st-bewertung .wer { margin-top: 12px; font-size: 14px; color: var(--muted); }
.st-bewertung .wer strong { color: var(--ink); }
.st-schluss { background: var(--brand); color: #fff; text-align: center; padding: clamp(64px, 9vw, 112px) 0; }
body .st-schluss h2 { color: #fff; font-size: clamp(32px, 4.4vw, 54px); max-width: 18ch; margin: 0 auto 16px; line-height: 1.05; }
.st-schluss p { color: rgba(255,255,255,.8); font-size: 17px; margin: 0 auto 26px; max-width: 52ch; }
.st-schluss .ks-aktionen { justify-content: center; }
.st-schluss .st-kontakt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; border: 1.5px solid rgba(255,255,255,.4); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; border-radius: 2px; }
.st-autor .ks-autor { color: rgba(255,255,255,.7); padding-bottom: 0; }
.st-autor .ks-autor strong { color: #fff; }
.st-schluss .st-kontakt:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
@media (max-width: 960px) {
  .st-hero { padding: 92px 0 32px; }
  .st-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .st-foto { display: none; }
  .st-schritte, .st-faelle, .st-team, .st-bewertungen { grid-template-columns: minmax(0, 1fr); }
  .st-rechner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-vertrauen ul { justify-content: flex-start; }
}
/* Gesicht statt Symbolbild auch auf dem Handy: klein neben dem Namen */
.st-avatar { display: none; }
@media (max-width: 960px) {
  .st-avatar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
  .st-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--gold); }
  .st-avatar span { font-size: 14px; color: var(--muted); line-height: 1.35; }
  .st-avatar strong { display: block; color: var(--ink); font-size: 15px; }
}

/* ---------- 10) Footer-Ergaenzungen ---------- */
body footer .footer-regionen { font-size: 13px; color: rgba(255,255,255,.66); margin: 10px auto 0; max-width: 80ch; line-height: 1.8; }
body footer .footer-regionen a { color: rgba(255,255,255,.8); }
body footer .footer-ks-links a { display: inline-block; padding: 4px 0; }

/* ---------- 11) Feinschliff Lesbarkeit (24.10.2026) ----------
   Gemessen an den neuen Seiten bei 390 und 1280 px:
   - cro.css setzt auf dem Handy JEDE h1 auf clamp(22px, 7vw, 34px) !important
     -> Seitenfrage nur 27 px, kleiner als manche h2. Hier fuer die neuen Heros zurueck.
   - cro.css gibt .hero 16 px Innenabstand !important, .ks-wrap noch einmal 16 px
     -> Hero-Inhalt 32 px vom Rand, der Rest der Seite 16 px.
   - Am Desktop stand der Fragenteil in einer 60ch-Spalte links, rechts 40 % leer. */
@media (max-width: 600px) {
  body .hero.ks-hero { padding-left: 0 !important; padding-right: 0 !important; }
  body .hero.ks-hero h1 { font-size: clamp(30px, 8.6vw, 38px) !important; line-height: 1.06 !important; margin-bottom: 18px; }
  body .st-hero h1 { font-size: clamp(30px, 8.4vw, 36px) !important; line-height: 1.06 !important; }
}
/* Knopftext passt auf dem Handy in eine Zeile; "kostenlos" steht direkt darunter */
@media (max-width: 480px) { .ks-lang { display: none; } }
/* Ort steht schon in H1 und Unterzeile - auf dem Handy nur die Sterne */
.st-zeile > span + span::before { content: "·"; margin-right: 10px; color: var(--muted); }
@media (max-width: 960px) {
  .st-zeile-ort { display: none; }
  .st-zeile > span + span::before { content: none; }
}

/* Rubrikzeile: klein, ruhig, ueberall gleich */
.ks-label { font-size: 12px; letter-spacing: .14em; line-height: 1.4; color: var(--oak-deep); margin: 0 0 12px; max-width: none; }
.ks-label + .ks-h2 { margin-top: 0; }
.ks-h2 + p:not([class]) { font-size: 18px; color: var(--gray-700); }

/* Karten "Kennst du das?" */
.ks-gedanke { margin: 0; }
@media (max-width: 860px) {
  .ks-gedanken { gap: 10px; margin-top: 20px; }
  .ks-gedanke { font-size: 18px; padding: 18px 18px 16px; }
}

/* Fragen: klarere Trennung, Frage groesser als Antwort */
.ks-frage { padding: 34px 0; }
.ks-frage h3 { margin-bottom: 14px; }
.ks-frage p:not([class]) { margin-bottom: 12px; }
.ks-fuerdich { padding: 14px 18px; font-size: 16px; }
.ks-details summary { list-style: none; gap: 8px; color: var(--brand); }
.ks-details summary::-webkit-details-marker { display: none; }
.ks-details summary::before { content: "+"; font-size: 20px; font-weight: 400; width: 14px; color: var(--oak); }
.ks-details[open] summary::before { content: "–"; }
@media (max-width: 600px) {
  .ks-frage { padding: 28px 0; }
  .ks-frage h3 { font-size: 22px; }
}

/* Fragen-Uebersicht (erzeugt von seiten_bauen.py ab vier Fragen) */
.ks-fragen-raster { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
.ks-inhalt { background: var(--white); border: 1px solid var(--line); padding: 16px 18px 6px; margin-bottom: 8px; }
.ks-abschnitt.weiss .ks-inhalt { background: var(--paper); }
.ks-inhalt-titel { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oak-deep); margin: 0 0 6px; }
.ks-inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: frage; }
.ks-inhalt li { counter-increment: frage; border-top: 1px solid var(--line); }
.ks-inhalt li:first-child { border-top: 0; }
.ks-inhalt a {
  display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 11px 0;
  color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none;
}
.ks-inhalt a::before { content: counter(frage, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--oak-deep); flex-shrink: 0; }
.ks-inhalt a:hover, .ks-inhalt a.aktiv { color: var(--brand); }
.ks-inhalt a.aktiv::before { color: var(--brand); }
.ks-fragen .ks-frage { scroll-margin-top: 84px; }
@media (min-width: 1000px) {
  .ks-fragen-raster { grid-template-columns: 270px minmax(0, 1fr); gap: 56px; margin-top: 30px; }
  .ks-inhalt { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
  .ks-inhalt a { min-height: 0; padding: 9px 0; font-size: 14.5px; }
}

/* Zulagen-Tabelle: auf dem Handy ohne seitliches Wischen */
.ks-tabelle td small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }
@media (max-width: 600px) {
  .ks-tabelle { min-width: 0; font-size: 15px; }
  .ks-tabelle th, .ks-tabelle td { padding: 10px 6px; }
  .ks-tabelle th { white-space: normal; }
  .ks-tabelle thead th { font-size: 12px; letter-spacing: .04em; }
}

/* Startseite */
.ww-unternehmer { margin: 22px 0 0; }
.st-person div > span { margin-top: 4px; }
@media (max-width: 960px) {
  .st-hero { padding-top: 88px; }
  .st-unter { margin-bottom: 22px; }
}

/* "Kurz gesagt": die Kastenregel .ks-kurz p (17 px) traf auch die Rubrikzeile */
.ks-kurz .ks-kurz-titel { font-size: 12px; line-height: 1.4; letter-spacing: .14em; margin: 0 0 8px; }
/* Gekuerzter Knopftext: Lueckenabstand des Flex-Knopfs ersetzt das Leerzeichen */
.ks-knopf:has(.ks-lang) { gap: .3em; }
/* Ratgeber-Formular auf der Startseite: buendig mit den anderen Abschnitten */
#ratgeber form, #ratgeberErfolg { max-width: 720px; }
/* Fallbeispiel: ".ks-fall p { 16px !important }" traf auch Zitat und grosse Zahl
   (gemessen auf /unternehmer/: "8.112 €" in 16 px statt 34 px) */
.ks-fall p.ks-fall-zitat { font-size: clamp(22px, 2.4vw, 28px) !important; line-height: 1.3; margin: 0; }
.ks-fall p.ks-fall-zahl { font-size: clamp(34px, 4vw, 52px) !important; line-height: 1; margin: 0 0 14px; }
/* Zahlen in Tabellen: Fliesstextschrift mit gleich breiten Ziffern */
.ks-tabelle td { font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; }
@media (max-width: 860px) {
  /* drei Kacheln: lieber untereinander als eine verwaiste Kachel */
  .ww-raster:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
  /* Schritte: Ziffer links neben dem Text statt darueber */
  .st-schritte { gap: 0; margin-top: 20px; }
  .st-schritt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; padding: 16px 0; border-top: 1px solid var(--gold); }
  .st-schritt::before { margin: 0; font-size: 24px; line-height: 1.2; }
  .st-schritt p { font-size: 16px !important; }
}
.ks-tabelle-hinweis { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 10px 0 0; max-width: 60ch; }

/* Bewertungs-Bilder (Startseite): Desktop drei nebeneinander, Handy zum Wischen */
.st-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.st-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--white); }
.st-shots-hinweis { font-size: 15px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 700px) {
  .st-shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; }
  .st-shots img { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---------- 12) Kopfbereiche der Altseiten auf dem Handy (24.10.2026) ----------
   Gemessen bei 390 x 844: Hauptknopf auf /bav/ bei ~1.100 px, auf /gold-silber/
   bei ~900 px, Absendeknopf auf /altersvorsorgedepot/ bei ~1.280 px.
   Nur die Reihenfolge aendert sich, kein Inhalt faellt weg. */
@media (max-width: 700px) {
  /* /bav/: Knopf vor die drei Sprungkarten */
  body #hero .hero-inner:has(> .hero-targets) { display: flex; flex-direction: column; }
  body #hero .hero-inner:has(> .hero-targets) > .hero-cta-row { order: 1; margin-top: 4px; margin-bottom: 26px; }
  body #hero .hero-inner:has(> .hero-targets) > .hero-targets { order: 2; }
  body #hero .hero-inner:has(> .hero-targets) > .hero-byline { order: 3; }
  /* /gold-silber/: Knoepfe vor den Inflationszaehler */
  body .hero .hero-inner:has(> #drain-widget) { display: flex; flex-direction: column; }
  body .hero .hero-inner:has(> #drain-widget) > .hero-ctas { order: 1; margin-bottom: 22px; }
  body .hero .hero-inner:has(> #drain-widget) > #drain-widget { order: 2; }
  body .hero .hero-inner:has(> #drain-widget) > .hero-trust { order: 3; }
  body .hero .hero-inner:has(> #drain-widget) > .hero-byline { order: 4; }
  /* /altersvorsorgedepot/: Formular direkt nach dem Einleitungstext */
  body #ratgeber-jetzt-herunterladen .hero-inner { display: flex; flex-direction: column; gap: 0; }
  body #ratgeber-jetzt-herunterladen .hero-badge { margin-bottom: 16px; }
  body #ratgeber-jetzt-herunterladen .hero-sub { margin-bottom: 22px; }
  body #ratgeber-jetzt-herunterladen .hero-inner > div:first-child { display: contents; }
  body #ratgeber-jetzt-herunterladen .hero-inner > .form-card { order: 1; margin-top: 4px; }
  body #ratgeber-jetzt-herunterladen .hero-inner .hero-checks { order: 2; margin-top: 26px; }
  body #ratgeber-jetzt-herunterladen .hero-inner .hero-byline { order: 3; }
  body #ratgeber-jetzt-herunterladen .form-card-sub { display: none; }
}

/* ---------- 13) Zeilenlaenge Altseiten ----------
   Gemessen bei 1280 px: Tabellenhinweis /bav-hoechstbetrag/ 120 Zeichen je Zeile,
   Footer-Kleingedrucktes bis 170. Kaesten und Karten (fakt-box, Kurzantwort, Rechner)
   bleiben bewusst breit - siehe CLAUDE.md, sonst bleibt im Kasten ein leeres Drittel. */
body .tbl-hint { max-width: 60ch; }
body footer > p { max-width: 92ch; margin-left: auto; margin-right: auto; }

/* ---------- 14) Startseite: Kopfbereich mit Buerofoto (24.10.2026) ----------
   Bennis Wunsch: wie die bisherige Live-Startseite - grosses Buerofoto im
   Hintergrund (Foto und Verlauf aus design-2026.css, Kontrast dort gemessen),
   weisse Frage, senffarbene Antwort, Senf-Knopf. */
body .hero.st-start { padding: 132px 0 72px; }
body .hero.st-start h1 { font-size: clamp(34px, 4.6vw, 60px); max-width: 21ch; line-height: 1.03; margin-bottom: 22px; }
body .hero.st-start h1 em { font-style: normal; color: var(--gold); }
body .hero.st-start .st-unter { color: rgba(255,255,255,.86); max-width: 52ch; margin-bottom: 30px; }
body .hero.st-start .st-avatar span { color: rgba(255,255,255,.78); }
body .hero.st-start .st-avatar strong { color: #fff; }
@media (min-width: 1100px) { body .hero.st-start { min-height: min(78vh, 720px); display: flex; align-items: center; } body .hero.st-start .ks-wrap { width: 100%; } }
@media (max-width: 960px) {
  body .hero.st-start { padding: 96px 0 44px; }
  body .hero.st-start .ks-kicker { display: none; }   /* Avatar traegt dieselbe Information */
}
@media (max-width: 600px) {
  body .hero.st-start h1 { font-size: clamp(30px, 8.4vw, 36px) !important; line-height: 1.06 !important; }
}

/* ---------- 15) Kfz-Seite: Blickfang statt Textwand (24.10.2026) ----------
   Stichtag-Kachel im Hero, Fristen als Karten, Rechenbeispiel als Zahlen,
   Kuendigen in drei Schritten. Inhalte stehen unveraendert auch im Text. */
.ks-hero-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
body .hero.ks-hero-blick { padding-bottom: 104px; }
.ks-blick {
  background: rgba(255,253,249,.97); color: var(--ink); padding: 26px 26px 22px; text-align: center;
  border-top: 6px solid var(--gold); box-shadow: 0 24px 60px rgba(0,0,0,.35); position: relative;
}
.ks-blick::before, .ks-blick::after { content: ""; position: absolute; top: -14px; width: 10px; height: 22px; border-radius: 5px; background: var(--brand-dark); border: 2px solid var(--gold); }
.ks-blick::before { left: 32%; } .ks-blick::after { right: 32%; }
.ks-blick p { margin: 0; }
.ks-blick-titel { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oak-deep); }
.ks-blick-zahl { display: flex; flex-direction: column; align-items: center; margin: 8px 0 6px !important; line-height: .9; }
.ks-blick-zahl .tag { font-family: var(--font-display); font-weight: 600; font-size: 104px; letter-spacing: -.05em; color: var(--brand); }
.ks-blick-zahl .monat { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-top: 4px; }
.ks-blick-unter { font-size: 15px; font-weight: 600; color: var(--gray-700); }
.ks-blick-marke { display: inline-block; margin-top: 12px !important; padding: 6px 14px; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; border-radius: 2px; }
.ks-blick-marke[hidden] { display: none; }
.ks-blick-klein { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 14px !important; }

/* Fristen-Band: ragt am Desktop in den Hero hinein */
.ks-karten { position: relative; z-index: 2; margin-top: -64px; padding-bottom: 8px; }
.ks-karten-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ks-karten-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ks-karte {
  display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); padding: 20px 20px 18px; text-decoration: none; color: var(--ink);
  box-shadow: 0 14px 34px rgba(10,15,14,.10); transition: transform .15s, border-color .15s;
}
.ks-karte:hover { transform: translateY(-2px); border-color: var(--brand); border-top-color: var(--gold); }
.ks-karte svg { width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.ks-karte strong { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -.03em; line-height: 1.05; color: var(--brand); }
.ks-karte span { font-size: 15px; line-height: 1.45; color: var(--gray-700); }

/* Rechenbeispiel als Zahlen */
.kfz-gleich { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.kfz-gleich li { font-size: 14px; font-weight: 600; color: var(--brand); background: var(--brand-light); padding: 6px 12px 6px 30px; border-radius: 2px; position: relative; }
.kfz-gleich li::before { content: "✓"; position: absolute; left: 11px; top: 5px; color: var(--brand); }

/* Kuendigen in drei Schritten */

@media (max-width: 1000px) {
  .ks-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ks-blick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; text-align: left; align-items: center; padding: 20px 18px 16px; }
  .ks-blick::before, .ks-blick::after { display: none; }
  .ks-blick-titel { grid-column: 2; grid-row: 1; }
  .ks-blick-zahl { grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; }
  .ks-blick-zahl .tag { font-size: 64px; }
  .ks-blick-zahl .monat { font-size: 20px; }
  .ks-blick-unter { grid-column: 2; }
  .ks-blick-marke { grid-column: 2; justify-self: start; margin-top: 4px !important; }
  .ks-blick-klein { grid-column: 1 / -1; }
  body .hero.ks-hero-blick { padding-bottom: 44px; }
  .ks-karten { margin-top: 0; padding: 28px 0 0; background: var(--paper); }
  .ks-karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ks-karte { padding: 16px 14px 14px; box-shadow: none; }
  .ks-karte strong { font-size: 24px; }
  .ks-karte span { font-size: 14px; }
}
@media (max-width: 1000px) {
  /* Handy/Tablet: Datum direkt unter die Frage - es ist der Blickfang */
  .ks-hero-raster { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .ks-hero-raster > div:first-child { display: contents; }
  .ks-hero-raster .ks-kicker { order: 1; }
  body .hero.ks-hero-blick h1 { order: 2; }
  .ks-blick { order: 3; margin: 0 0 20px; }
  .ks-hero-raster .ks-kurz { order: 4; }
  .ks-hero-raster .ks-aktionen { order: 5; }
}

/* ---------- 16) Kfz-Seite, Runde 2: Erlebnis statt Liste (24.10.2026) ---------- */

/* Fristenrechner */
.ks-werkzeug { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 26px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(10,15,14,.10); }
.ks-werkzeug-eingabe { background: var(--paper); padding: clamp(22px, 3.5vw, 36px); }
.ks-werkzeug-eingabe fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.ks-werkzeug-eingabe legend { font-size: 15px; font-weight: 600; color: var(--gray-700); margin-bottom: 10px; padding: 0; }
.ks-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ks-wahl label { position: relative; cursor: pointer; }
.ks-wahl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ks-wahl span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 12px; text-align: center;
  background: var(--white); border: 1.5px solid var(--line); font-weight: 600; font-size: 16px; color: var(--ink); border-radius: 2px; transition: border-color .15s, background .15s;
}
.ks-wahl input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.ks-wahl input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ks-wahl label:hover span { border-color: var(--brand); }
.kfz-datum-label { display: block; font-size: 15px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px; }
.ks-werkzeug-eingabe input[type=date] {
  width: 100%; min-height: 52px; font-size: 18px; font-family: var(--font-body); padding: 10px 14px; border: 1.5px solid var(--line);
  border-radius: 2px; background: var(--white); color: var(--ink);
}
.ks-werkzeug-eingabe input[type=date]:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.kfz-datum-hilfe { font-size: 14px !important; line-height: 1.5; color: var(--muted) !important; margin: 10px 0 0 !important; }
.ks-werkzeug-ergebnis { background: var(--brand); color: #fff; padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.ks-werkzeug-ergebnis p { margin: 0; color: inherit; max-width: none; }
.ks-erg-titel { font-family: var(--font-mono); font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--gold) !important; }
.ks-erg-wert { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 46px) !important; letter-spacing: -.035em; line-height: 1.05 !important; margin: 12px 0 14px !important; color: #fff !important; }
.ks-erg-marke { align-self: flex-start; padding: 6px 14px; background: var(--gold); color: #241701 !important; font-weight: 700; font-size: 16px !important; border-radius: 2px; }
.ks-erg-marke:empty { display: none; }
.ks-erg-marke.knapp { background: #F5B72E; }
.ks-erg-marke.vorbei { background: rgba(255,255,255,.14); color: #fff !important; }
.ks-erg-tipp { font-size: 15px !important; line-height: 1.55 !important; color: rgba(255,255,255,.82) !important; margin: 18px 0 22px !important; }
.ks-werkzeug-ergebnis .ks-knopf { align-self: flex-start; }
.ks-werkzeug-hinweis { font-size: 14px !important; color: var(--muted) !important; margin-top: 12px !important; }

/* Kurzcheck mit Foto */
.ks-klaeren-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.ks-klaeren-foto { margin: 0; }
.ks-klaeren-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-bottom: 4px solid var(--gold); }
.ks-klaeren-foto figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.78); }
.ks-klaeren-foto figcaption strong { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .ks-blick { animation: kfzEin .6s cubic-bezier(.2,.7,.2,1) both .15s; }
  @keyframes kfzEin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1000px) {
  .ks-werkzeug { grid-template-columns: minmax(0, 1fr); }
  .ks-klaeren-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ks-klaeren-foto { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
  .ks-klaeren-foto img { aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--gold); }
  .ks-klaeren-foto figcaption { margin: 0; }
}

/* Zweispaltiger Abschnitt: Ueberschrift links, Inhalt rechts (Desktop) */
.ks-zweispaltig { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.ks-zweispaltig .ks-sparen { margin-top: 6px; }
@media (max-width: 860px) { .ks-zweispaltig { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
/* Bewertung mit grossem Zitatzeichen */
.ks-bewertung { position: relative; padding-top: clamp(40px, 5vw, 52px); }
.ks-bewertung::before { content: "„"; position: absolute; left: clamp(18px, 3.6vw, 32px); top: -18px; font-family: var(--font-display); font-size: 110px; line-height: 1; color: var(--gold); }

/* ---------- 17) Kfz-Seite, Runde 3: Auto, Ersparnis, Kuendigungsschreiben (24.10.2026) ---------- */
/* Kuendigungsschreiben */
.kfz-vorlage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); margin-top: 24px; align-items: start; }
.kfz-vorlage-eingabe { display: grid; gap: 6px; }
.kfz-vorlage-eingabe label { font-size: 15px; font-weight: 600; color: var(--gray-700); margin-top: 8px; display: block; }
.kfz-vorlage-eingabe input, .kfz-vorlage-eingabe select { width: 100%; font-size: 16px; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 2px; background: var(--white); color: var(--ink); font-family: var(--font-body); }
.kfz-vorlage-eingabe input:focus, .kfz-vorlage-eingabe select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.kfz-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kfz-vorlage-info { font-size: 14px !important; color: var(--muted) !important; margin: 12px 0 0 !important; }
.kfz-vorlage-brief {
  background: #FFFEFB; border: 1px solid var(--line); padding: clamp(24px, 4vw, 44px); box-shadow: 0 2px 0 var(--line), 0 30px 60px rgba(10,15,14,.12);
  font-family: Georgia, "Times New Roman", serif; color: #1E2422; font-size: 15px; line-height: 1.6; position: sticky; top: 92px;
}
.kfz-vorlage-brief p { margin: 0 0 14px; font-size: 15px !important; color: #1E2422 !important; max-width: none !important; font-family: inherit !important; }
.kfz-vorlage-brief .abs { font-size: 13px !important; color: #4A524F !important; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 18px; }
.kfz-vorlage-brief .datum { text-align: right; }
.kfz-vorlage-brief .unterschrift { margin-top: 26px; font-style: italic; }
.kfz-vorlage-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.kfz-knopf-rand { min-height: 52px; padding: 12px 20px; background: none; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: 16px; font-family: var(--font-body); border-radius: 2px; cursor: pointer; }
.kfz-knopf-rand:hover { background: var(--brand-light); color: var(--brand); }
.kfz-kopiert { font-weight: 700; color: var(--brand); font-size: 15px; }
@media print {
  body.drucke-brief * { visibility: hidden !important; }
  body.drucke-brief #kfzBrief, body.drucke-brief #kfzBrief * { visibility: visible !important; }
  body.drucke-brief #kfzBrief { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; padding: 0; font-size: 12pt; }
}

@media (max-width: 1000px) {
  .kfz-vorlage { grid-template-columns: minmax(0, 1fr); }
  .kfz-vorlage-brief { position: static; }
}
@media (max-width: 600px) {
  .kfz-zwei { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.ks-wahl input { font-size: 16px; }

/* ---------- 18) Kfz-Seite gekuerzt, Anzeigefehler (24.10.2026) ---------- */
/* Handy: Frage, Antwort und Knopf zuerst (5-Sekunden-Test), das Datum danach als schmale Kachel */
@media (max-width: 1000px) {
  .ks-blick { order: 6; margin: 22px 0 0; }
  .ks-blick-klein { display: none; }
  .ks-hero-raster .ks-kurz { margin-top: 0; }
}
/* Beispielrechnung: Markierung hinter der ganzen Zeile statt versetzt darunter */
/* Zitatzeichen ueber dem Text, nicht darauf */
.ks-bewertung::before { font-size: 88px; top: -50px; }
/* Auto parkt vor dem Punkt des heutigen Schritts, nicht darauf */
/* Kuendigungsschreiben eingeklappt in der Frage "Wie kuendige ich richtig?" */
.kfz-vorlage-auf { margin: 16px 0 4px; border: 1.5px solid var(--brand); background: var(--white); }
.kfz-vorlage-auf > summary { cursor: pointer; list-style: none; padding: 14px 48px 14px 18px; position: relative; font-weight: 700; font-size: 17px; color: var(--brand); min-height: 48px; }
.kfz-vorlage-auf > summary::-webkit-details-marker { display: none; }
.kfz-vorlage-auf > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; }
.kfz-vorlage-auf[open] > summary::after { content: "–"; }
.kfz-vorlage-auf > summary span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.kfz-vorlage-auf .kfz-vorlage { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0 18px 20px; }
.kfz-vorlage-auf .kfz-vorlage-brief { position: static; }
.ks-fuerdich a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 19) Bausteine nach Kfz-Muster fuer alle Seiten (24.10.2026) ----------
   ks-hero-blick + ks-hero-raster + ks-blick: Kopfbereich mit der einen Zahl
   ks-karten / ks-karte: Antwort auf einen Blick · ks-werkzeug: genau ein Werkzeug · ks-mit-foto: Kurzcheck mit Foto */
.ks-wahl.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-wahl.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-werkzeug-eingabe fieldset + fieldset { margin-top: -4px; }
.ks-blick-zahl .tag { white-space: nowrap; }
.ks-blick-zahl .tag:has(> [data-fakt]) { font-size: 92px; }
.ks-erg-liste { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; }
.ks-erg-liste li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.88); }
.ks-erg-liste li::before { content: "+"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--gold); color: #241701; font-weight: 700; font-size: 13px; line-height: 18px; text-align: center; }
.ks-erg-liste li.ok { color: rgba(255,255,255,.7); }
.ks-erg-liste li.ok::before { content: "✓"; background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 1000px) { .ks-blick-zahl .tag:has(> [data-fakt]) { font-size: 56px; } }
/* Zahl aus fakten.json in der Karte: das innere span erbt die Groesse der Zahl, nicht die der Beschreibung */
.ks-karte strong [data-fakt] { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; display: inline; }
.ks-werkzeug-hinweis { max-width: 68ch !important; }
.ks-wahl.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ks-werkzeug-eingabe .ks-feld-label { display: block; font-size: 15px; font-weight: 600; color: var(--gray-700); margin: 0 0 8px; }
.ks-werkzeug-eingabe .ks-feld-label small { font-weight: 400; color: var(--muted); font-size: 14px; }
.ks-werkzeug-eingabe .rk-eingabe { margin-bottom: 22px; }
.ks-werkzeug-eingabe .rk-eingabe input { width: 100%; font-size: 20px; font-weight: 600; min-height: 52px; padding: 10px 44px 10px 14px; }
.ks-blick-zahl .tag.lang, .ks-blick-zahl .tag.lang:has(> [data-fakt]) { font-size: 54px; letter-spacing: -.04em; }
@media (max-width: 1000px) { .ks-blick-zahl .tag.lang, .ks-blick-zahl .tag.lang:has(> [data-fakt]) { font-size: 34px; } }
.ks-werkzeug-eingabe .kfz-datum-hilfe, .ks-werkzeug-eingabe fieldset > p { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 480px) { .ks-wahl.fuenf span { padding: 10px 2px; font-size: 15px; white-space: nowrap; } }
/* Auswahlknoepfe einer Zeile gleich hoch */
.ks-wahl label { display: flex; } .ks-wahl label > span { flex: 1; }
/* Ergebnisliste: + Geld/Chance, ✓ erledigt, • Hinweis, − Abzug, ! Achtung */
.ks-erg-liste li.info::before { content: "•"; background: rgba(255,255,255,.18); color: #fff; }
.ks-erg-liste li.minus::before { content: "−"; background: rgba(255,255,255,.18); color: #fff; }
.ks-erg-liste li.warn::before { content: "!"; background: #F5B72E; color: #241701; }
/* Mehrfachauswahl erkennbar machen */
.ks-wahl input[type=checkbox] + span::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 1.5px solid currentColor; border-radius: 2px; flex-shrink: 0; }
.ks-wahl input[type=checkbox]:checked + span::before { content: "✓"; border: 0; width: auto; height: auto; font-weight: 700; }
.ks-wahl label > span { min-width: 0; }
@media (max-width: 480px) {
  .ks-wahl.drei span, .ks-wahl input[type=checkbox] + span { padding: 10px 4px; font-size: 14px; }
  .ks-wahl input[type=checkbox] + span::before { margin-right: 5px; width: 12px; height: 12px; }
}
/* Startseite: Wegweiser als Karten (3 × 2), Kopf mit Blickfang */
.ks-karten-raster.sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-karten-raster.sechs .ks-karte strong { font-size: 22px; line-height: 1.2; }
.st-wegweiser .ww-unternehmer { margin: 22px 0 0; }
@media (max-width: 1000px) {
  .ks-hero-raster .st-avatar { order: 1; }
  .ks-hero-raster .st-unter { order: 3; }
  .ks-karten-raster.sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-karten-raster.sechs .ks-karte strong { font-size: 18px; }
}

/* ---------- 20) Alte Produktseiten nach Kfz-Muster: Tiefe eingeklappt (24.10.2026) ---------- */
.ks-ausfuehrlich { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ks-ausfuehrlich > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; }
.ks-ausfuehrlich > summary::-webkit-details-marker { display: none; }
.ks-ausfuehrlich > summary h2 { margin: 0 !important; font-size: clamp(22px, 2.4vw, 30px) !important; }
.ks-ausfuehrlich > summary span { flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.ks-ausfuehrlich > summary span::after { content: " +"; }
.ks-ausfuehrlich[open] > summary span::after { content: " –"; }
.ks-ausfuehrlich[open] > summary span { color: var(--muted); }
.ks-ausfuehrlich > summary:hover h2 { color: var(--brand); }
.ks-ausfuehrlich[open] { padding-bottom: 26px; }
body .hero.ks-hero .ks-byline { margin-top: 22px; }
@media (max-width: 600px) { .ks-ausfuehrlich > summary { flex-direction: column; align-items: flex-start; gap: 6px; } }
.ks-kurz #ai-summary { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.ks-kurz #ai-summary p { margin: 0; font-size: inherit; color: inherit; }
.ks-ausfuehrlich-kurz { margin-top: 12px !important; }
/* Lange Kurzantwort (Suchmaschinen-Text): auf dem Handy steht der Knopf davor, damit er im ersten Bildschirm bleibt */
@media (max-width: 1000px) { .ks-knopf-zuerst .ks-hero-raster .ks-aktionen { order: 3; margin-bottom: 22px; } }
/* Karten nach einem alten Kopfbereich (ohne Platz fuer die Ueberlappung): normal darunter */
.hero:not(.ks-hero-blick) + .ks-karten { margin-top: 0; padding-top: 32px; }
/* /altersvorsorgedepot/: auf dem Handy rueckt das Ratgeber-Formular samt Absendeknopf in den ersten Bildschirm; die Einleitung steht unten als Kurzantwort */
@media (max-width: 600px) { #ratgeber-jetzt-herunterladen .hero-sub { display: none; } }
/* Nur der Rest eines Abschnitts ist eingeklappt (Kopf mit Ueberschrift bleibt sichtbar) */
.ks-ausfuehrlich-rest { margin-top: 18px; border-bottom: 0; }
.ks-ausfuehrlich-rest > summary { justify-content: flex-start; padding: 14px 0; }
.ks-ausfuehrlich-rest > summary span { white-space: normal; }
/* Auf dunklen Abschnitten (z. B. /bav/ Gesellschafter) */
.ggf-section .ks-ausfuehrlich { border-color: rgba(255,255,255,.22); }
.ggf-section .ks-ausfuehrlich > summary span, .ggf-section .ks-ausfuehrlich[open] > summary span { color: var(--gold); }
/* Autorzeile im Kopf: auf dem Handy ans Ende, nicht vor die Ueberschrift */
@media (max-width: 1000px) { .ks-hero-raster .hero-byline { order: 7; margin-top: 18px; } }
/* Aufklapp-Knopf in der Textfarbe des Abschnitts: lesbar auf hellen wie dunklen Flaechen */
.ks-ausfuehrlich > summary span, .ks-ausfuehrlich[open] > summary span { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.ks-ausfuehrlich { border-color: color-mix(in srgb, currentColor 18%, transparent); }
/* Gekuerzte Kurzantwort (nur Handy, per cro.js) */
.ks-kurz .ks-gekuerzt { max-height: 200px; overflow: hidden; position: relative; }
.ks-kurz .ks-gekuerzt { -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.ks-kurz-mehr { margin-top: 10px; background: none; border: 0; padding: 6px 0; min-height: 44px; font: inherit; font-size: 15px; font-weight: 700; color: var(--brand); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* /privatkunden/: Kurzcheck-Knopf vor die drei Einstiegskacheln, damit er im ersten Bildschirm steht (auch Desktop) */
.hero:has(a[href*="von=privatkunden"]) .hero-inner { display: flex; flex-direction: column; }
.hero:has(a[href*="von=privatkunden"]) .hero-targets { order: 2; margin-top: 28px; }
.hero:has(a[href*="von=privatkunden"]) .hero-byline { order: 3; }
/* Zwei gleichfarbige Abschnitte hintereinander (z. B. wenn ein Abschnitt wegfaellt): feine Trennlinie statt Farbwechsel */
.ks-abschnitt.weiss + .ks-abschnitt.weiss, .ks-abschnitt:not(.weiss) + .ks-abschnitt:not(.weiss) { border-top: 1px solid var(--line); }