/* Feinschliff für alle Seiten. Wird als letztes Stylesheet geladen.
   Ziel: ruhige, gut lesbare Typografie, gleichmäßiger Rhythmus und
   Bewegung, die führt statt ablenkt (angelehnt an Apple-Produktseiten). */

/* ---------- Grundlage: scharfe, ruhige Schrift ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  line-height: 1.6;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
}
::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }

/* Überschriften: enge Laufweite, ausgewogene Zeilen, nie über den Rand */
/* :where() hält die Grundwerte schwach, damit seitenspezifische Regeln
   (z. B. Versal-Überschriften im Impressum) Vorrang behalten. */
:where(h1, h2, h3, h4) { text-wrap: balance; overflow-wrap: break-word; }
:where(h1) { line-height: 1.08; letter-spacing: -0.025em; }
:where(h2) { line-height: 1.12; letter-spacing: -0.02em; }
:where(h3, h4) { line-height: 1.3; letter-spacing: -0.01em; }
:where(p, li) { text-wrap: pretty; }

/* Lange deutsche Wörter (z. B. Berufsunfähigkeitsversicherung) auf
   schmalen Bildschirmen sauber trennen statt aus dem Bild laufen */
@media (max-width: 600px) {
  h1, h2, h3, h4, .thema-titel {
    -webkit-hyphens: auto; hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}

/* Zahlen in Kennzahlen gleich breit, damit nichts springt */
.stat-num, .stat-big, .cylinder-status, [class*="calc"] output,
.calc-result, .big-number { font-variant-numeric: tabular-nums; }

/* ---------- Lesbarkeit: Fließtext nicht zu klein, Zeilen nicht zu lang ---------- */
.section-head p { max-width: 640px; line-height: 1.6; }
.lede { max-width: 680px; line-height: 1.6; }
.cta-core p { max-width: 580px; line-height: 1.6; }
.section-head p { font-size: clamp(17px, 1.35vw, 19px); }
.lede { font-size: clamp(17px, 1.5vw, 20px); }

/* Einheitliche Größen für die wiederkehrenden Bausteine */
.section-head h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; }
.cta-core h2 { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -0.02em; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head { margin-bottom: clamp(44px, 5.5vw, 72px); }

/* ---------- Rhythmus: gleichmäßige Abstände zwischen Abschnitten ---------- */
.grid-3, .content-grid, .limit-list, .audience-grid { row-gap: clamp(18px, 2vw, 24px); }
.limit-list { gap: clamp(22px, 2.4vw, 30px) clamp(24px, 3vw, 40px); }

/* Einstieg der Themenseiten (BU, KV): gleicher Abstand unter der
   Navigation und gleiche Überschriftengröße wie auf den übrigen Seiten */
.page-intro { padding-top: clamp(150px, 15vw, 190px) !important; }
.page-intro h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 800;
  margin: 22px auto 18px;
  max-width: 900px;
}
.page-intro .section-head p { font-size: clamp(17px, 1.5vw, 20px); }

/* ---------- Bewegung: ruhig, flüssig, ohne teure Effekte ---------- */
:root { --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal {
  transform: translate3d(0, 28px, 0);
  filter: none !important;
  transition:
    opacity 0.85s var(--ease-calm),
    transform 0.85s var(--ease-calm);
}
.reveal.in { transform: none; }
.stagger .reveal:nth-child(1) { transition-delay: 0s; }
.stagger .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger .reveal:nth-child(6) { transition-delay: 0.4s; }

a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mint, #5FE3C0);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Vergleichstabellen auf dem Handy als Karten ---------- */
@media (max-width: 700px) {
  .compare-scroll { overflow: visible; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: 100% !important; min-width: 0 !important; }
  .compare-table tr:first-child { display: none; }
  .compare-table tr {
    padding: 18px 20px;
    margin-bottom: 14px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 20px;
    background: rgba(18, 18, 18, 0.92);
  }
  .compare-table td { border: 0 !important; padding: 0 !important; font-size: 15.5px; }
  .compare-table td:first-child { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
  .compare-table td + td { margin-top: 10px; }
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 3px;
  }
  .compare-table td:first-child::before { display: none; }
}


/* Klarere Leseführung; die Partikelanimation und Leistungspräsentation
   behalten ihre bisherigen Einstellungen. */
:root { --text-muted: #C6C6CE; --text-dim: #B0B0BA; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.nav-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.form-note, .form-privacy, .field-hint, .hero-actions .hint,
.calc-disclaimer, .calc-legend, .calc-result .sub, .avd-source { font-size: 14px; line-height: 1.65; }
.hero-home { padding-top: 150px; padding-bottom: 64px; }
.hero-home .hero-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,.85fr); gap: 52px; align-items: center; text-align: left; }
.hero-home .hero-layout h1 { font-size: clamp(38px,4.6vw,62px); max-width: 680px; margin-left: 0; }
.hero-home .hero-layout p { max-width: 590px; margin-left: 0; margin-bottom: 28px; }
.hero-home .hero-actions { justify-content: flex-start; }
.hero-home .hero-person { width: 100%; max-width: 340px; margin: 0; }
.hero-home .hero-person img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.hero-home .trust-bar { margin-top: 42px; font-size: 14px; }
#zielgruppen { padding-top: 76px; padding-bottom: 60px; }
#unabhaengig { padding-top: 30px; padding-bottom: 76px; }
#kontaktForm { scroll-margin-top: 110px; }

/* Das Menü klappt bereits auf kleinen Tablets um, bevor die Navigation
   zu breit wird. Die Leistungsübersicht bleibt davon unberührt. */
@media (min-width:761px) and (max-width:980px) {
 .nav-wrap { top:12px; padding:0 12px; }
 .nav { position:relative; width:100%; max-width:700px; gap:12px; padding:8px 12px; border-radius:25px; justify-content:space-between; }
 .nav-logo { min-width:0; flex:1; gap:8px; font-size:14px; }
 .nav-logo img { width:46px; height:auto; }
 .mobile-menu-toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border:1px solid #665521; border-radius:14px; color:#f8fafc; background:#171717; font-size:22px; cursor:pointer; }
 .nav .nav-links { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:calc(100dvh - 100px); overflow-y:auto; padding:12px; background:#101010; border:1px solid #665521; border-radius:20px; box-shadow:0 20px 45px #0009; }
 .nav.menu-open .nav-links { display:flex; flex-direction:column; gap:0; }
 .nav .nav-links a { padding:14px 16px; font-size:16px; }
}
@media (max-width:980px) {
 .hero-home .hero-layout { grid-template-columns: minmax(0,1fr); gap:24px; }
 .hero-home .hero-person { order:-1; display:flex; align-items:center; gap:18px; max-width:100%; }
 .hero-home .hero-person img { width:100px; flex:0 0 100px; border-radius:18px; }
 .hero-home .hero-person figcaption { padding:0; max-width:260px; line-height:1.6; }
 .hero-home .hero-layout h1 { font-size:clamp(32px,5.5vw,48px); }
}
@media (max-width:760px) {
 .hero-home { padding-top:120px; padding-bottom:44px; }
 .hero-home .eyebrow { font-size:10px; letter-spacing:.08em; padding:8px 11px; margin-bottom:20px; }
 .hero-home .hero-layout h1 { margin-bottom:20px; }
 .hero-home .hero-layout p { font-size:17px; line-height:1.65; }
 .hero-home .hero-person img { width:82px; flex-basis:82px; }
 .hero-home .hero-person figcaption { font-size:13px; }
 .hero-home .hero-actions { gap:12px; }
 .hero-home .hero-actions a { width:100%; min-height:48px; justify-content:center; }
 .hero-home .trust-bar { gap:18px 24px; margin-top:30px; }
 .hero-home .trust-bar > div { line-height:1.6; }
 .calc-result .big { font-size:clamp(34px,10vw,54px); overflow-wrap:anywhere; }
 .calc-legend { flex-wrap:wrap; gap:10px 18px; }
 .contact-item a { display:inline-block; min-height:44px; padding:8px 0; }
 .thema { min-height:80px; }
 #kontaktForm { scroll-margin-top:100px; }
}
@media (max-width:360px) {
 .hero-home .hero-person { gap:12px; }
 .hero-home .hero-person figcaption { font-size:12px; }
 .hero-home .hero-person figcaption strong { font-size:16px; }
 .thema-grid { grid-template-columns:minmax(0,1fr); }
}