/* Toto Consulting – v10
   Schriften lokal gehostet (Subset von Adobe Source Serif 4 / Source Sans 3, OFL – siehe assets/fonts/), keine Google-Server.
   Serif für Überschriften (passt zum Logo), Sans für Fließtext. */

@font-face { font-family: "Toto Serif"; src: url("assets/fonts/TotoSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Toto Serif"; src: url("assets/fonts/TotoSerif-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Toto Sans"; src: url("assets/fonts/TotoSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Toto Sans"; src: url("assets/fonts/TotoSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --navy: #12233b;
  --navy-deep: #0d1a2c;
  --navy-soft: #1b3150;
  --gold: #c39448;
  --gold-light: #e3c88a;
  --gold-text: #8a6421;      /* Gold für Text auf Hell, Kontrast AA */
  --paper: #ffffff;
  --mist: #f2f4f6;
  --ink: #12233b;
  --text: #46505d;
  --line: #dde2e8;
  --on-dark: #e8edf3;
  --on-dark-muted: #a9b6c5;
  --line-dark: rgba(255, 255, 255, .14);
  --line-dark-strong: rgba(255, 255, 255, .4);
  --white: #fff;
  --gold-hover: #f0d9a6;
  --header-bg: #1c2839;      /* entspricht dem bisherigen 94%-Navy über Weiß */
  --field-bg: #0a1524;
  --field-line: #5b7290;     /* 3,7:1 auf --field-bg */
  --field-raised: rgba(255, 255, 255, .04);
  --error-line: #f19a8f;
  --error-text: #ffb4aa;
  /* Diagramm- und Statusfarben (Rechner, Balken, Ampel) */
  --toggle-on-bg: var(--navy);
  --toggle-on-text: var(--white);
  --chart-2: #7b8797;
  --chart-3: #4fa892;
  --chart-4: #efe8dc;
  --chart-5: #7b8797;
  --status-ok: #e8d3a6; /* hellgold statt Grün (Markenfarben Navy + Gold) */
  --status-mid: #f2c94c;
  --status-high: #eb8a7b;
  --chart-6: #c9d3de;
  --chart-track-dark: rgba(255, 255, 255, .08);
  --dot-off: rgba(255, 255, 255, .12);

  --serif: "Toto Serif", ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Toto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --max: 1160px;
  --header-h: 72px;
  /* Radius-System: sm für Fokus/Kleinteile, md für alles Interaktive und Karten, full nur für Kreise */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-full: 999px;

  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word; /* lange Komposita brechen statt überzulaufen */
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; } /* sonst überschreiben z. B. .btn oder .seg das hidden-Attribut */
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--ink); letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; }
h3 { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.35; font-weight: 600; color: var(--ink); }
p { max-width: 64ch; }

.wrap { width: min(100% - 2 * max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--white); color: var(--navy); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
:focus-visible { outline: 2px solid var(--focus, var(--gold-text)); outline-offset: 3px; border-radius: var(--radius-sm); }
.site-header, .hero, .service-business, .contact, .mobile-bar, .section-navy, .calc-out, .page-hero, .cta-band { --focus: var(--gold-light); }

.kicker { font-size: .95rem; font-weight: 600; color: var(--gold-text); margin-bottom: 12px; }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink); }

/* Buttons & links – Gold als Fläche nur für die Hauptaktion „Erstgespräch“ (.btn-gold) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border-radius: var(--radius);
  border: 1px solid transparent; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn { max-width: 100%; text-align: center; } /* lange Beschriftungen umbrechen statt überzulaufen */
.btn-small { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.btn-gold { background: var(--gold-light); color: var(--navy); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--on-dark); }
.btn-outline-light { border-color: var(--line-dark-strong); color: var(--white); }
.btn-outline-light:hover { border-color: var(--gold-light); color: var(--gold-light); }
.btn-outline-dark { border-color: var(--navy); color: var(--navy); background: var(--white); }

.link {
  display: inline-block; max-width: 100%; margin-top: 14px; padding-block: 10px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.link:hover { color: var(--gold-text); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line-dark);
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; min-height: 44px; gap: 12px; text-decoration: none; color: var(--white); }

.brand-logo { display: block; height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; font-size: .97rem; }
.nav a:not(.btn) { color: var(--on-dark); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--gold-light); }
.nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 24px; height: 2px; background: var(--white); border-radius: var(--radius-full); position: relative; transition: transform .2s; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero { background: var(--navy-deep); color: var(--on-dark); padding: clamp(56px, 9vw, 112px) 0 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { color: var(--white); max-width: 13ch; }
.hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--on-dark); margin-top: 24px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { margin-top: 16px; font-size: .95rem; color: var(--on-dark-muted); }
.hero-portrait { justify-self: end; width: min(100%, 400px); }
.hero-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); }
.hero-portrait figcaption { margin-top: 16px; padding-left: 16px; border-left: 1px solid var(--gold); }
.hero-portrait strong { display: block; color: var(--white); font-weight: 600; }
.hero-portrait span { display: block; font-size: .875rem; color: var(--on-dark-muted); line-height: 1.45; }

/* Leistungen */
.service { padding: clamp(72px, 10vw, 120px) 0; }

.service-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.service-intro p:not(.kicker) { margin-top: 20px; }
.service-intro { position: sticky; top: calc(var(--header-h) + 40px); }

.icon { width: 36px; height: 36px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); }
.icon .accent { stroke: var(--gold); }

.topic-list li > div { min-width: 0; }
.topic-list li { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.topic-list li:last-child { border-bottom: 1px solid var(--line); }

.topic-list p { margin-top: 4px; font-size: 1rem; }

/* Ablauf */
.process { padding: clamp(72px, 10vw, 120px) 0; background: var(--mist); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 20px; border-top: 2px solid var(--gold); }
.steps li::before { content: counter(step); display: block; font-family: var(--serif); font-size: 2.4rem; font-weight: 600; color: var(--gold-text); line-height: 1; margin-bottom: 16px; }
.steps p { margin-top: 8px; font-size: 1rem; }
.steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 0; }

/* Über mich */
.about { padding: clamp(72px, 10vw, 120px) 0; background: var(--paper); }
.about-grid { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.about-text { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.about-text .lead { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.3; }
.about-side .facts { margin-top: 8px; }
.about-copy .lead { margin-top: 12px; }
.about-copy > p:not(.kicker):not(.lead) { margin-top: 20px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 32px; border-top: 1px solid var(--line); }
.facts div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; color: var(--ink); }
.facts dd { font-size: .95rem; }

/* FAQ */
.faq { padding: clamp(72px, 10vw, 120px) 0; background: var(--mist); }
.faq-list, .faq-wrap h2 { max-width: 820px; }
.faq-list { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 0 24px; }

/* Kontakt */
.contact { padding: clamp(72px, 10vw, 120px) 0; background: var(--navy-deep); color: var(--on-dark); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.contact h2 { color: var(--white); }
.contact-copy p { margin-top: 20px; color: var(--on-dark-muted); }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(22px, 3vw, 32px); background: var(--field-raised); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .95rem; color: var(--on-dark); }
.optional { color: var(--on-dark-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--radius); color: var(--white); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold-light); outline-offset: 0; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--error-line); }
.full { grid-column: 1 / -1; }
.hint { font-size: .88rem; color: var(--on-dark-muted); }

.field-error { color: var(--error-text); font-size: .9rem; }

.check a, .form-fallback a { color: var(--gold-light); }
.form-error { color: var(--error-text); font-size: .95rem; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-submit .hint { flex: 1 1 220px; }
.form-fallback { font-size: .95rem; color: var(--on-dark); }
.form-fallback button { background: none; border: 0; padding: 0; color: var(--gold-light); text-decoration: underline; cursor: pointer; }

/* Footer */
.site-footer { background: var(--paper); padding: 56px 0 calc(32px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 48px; align-items: center; }
.footer-brand img { width: 104px; background: var(--white); border-radius: var(--radius); padding: 6px; }
.site-footer address { font-style: normal; font-size: .97rem; }
.site-footer strong { color: var(--ink); }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--gold-text); }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .875rem; }
.footer-legal nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a { text-decoration: underline; text-underline-offset: 4px; }

.mobile-bar { display: none; }

.legal { padding: clamp(48px, 8vw, 88px) 0 96px; }
.legal-wrap { max-width: 780px; }
.legal h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: 12px; }
.legal .subtitle { margin-bottom: 32px; }
.legal section { padding: 28px 0; border-top: 1px solid var(--line); }
.legal h2 { font-size: 1.4rem; margin-bottom: 12px; }
.legal p + p { margin-top: 12px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .btn { text-decoration: none; }
.legal strong { color: var(--ink); }
.legal ul.list { list-style: disc; padding-left: 1.2em; margin-top: 8px; }
.legal ul.list li + li { margin-top: 4px; }

/* Responsive */
@media (max-width: 1020px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}

@media (max-width: 900px) {
  .js .nav-toggle { display: grid; place-items: center; }
  html:not(.js) .header-inner { height: auto; min-height: var(--header-h); flex-wrap: wrap; gap: 4px 24px; padding-block: 12px; }
  html:not(.js) .nav { flex-wrap: wrap; gap: 4px 20px; }
  html:not(.js) .site-header { position: static; } /* umbrochenes Menü soll beim Scrollen nicht den Bildschirm belegen */
  .js .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; background: var(--navy-deep); border-bottom: 1px solid var(--line-dark);
    /* Querformat-Handys: Menü höchstens bis zum Bildschirmrand, sonst innen scrollen (100vh als Fallback ohne dvh) */
    max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain; }
  .js .nav.open { display: flex; }
  .js .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .js .nav .btn { margin-top: 20px; }
  .hero-grid, .service-grid, .about-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .service-intro { position: static; }
  .about-grid { gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom: 32px; } /* Safe-Area steckt schon im body-Padding */
  .wrap { width: min(100% - 36px, var(--max)); }
  .hero h1 { font-size: clamp(2.1rem, 10.5vw, 2.6rem); }
  .hero-actions .btn { flex: 1 1 100%; }
  .form-submit .btn { width: 100%; }
  .finance-cases, .steps, .facts, .contact-form, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .legal p { -webkit-hyphens: auto; hyphens: auto; }
  .mobile-bar {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--navy-deep); border-top: 1px solid var(--line-dark);
  }
  .mobile-bar .btn { min-height: 48px; }
  .mobile-bar .btn-outline-dark { background: transparent; color: var(--white); border-color: var(--line-dark-strong); }
}

/* ===================== v11: Mehrseitiger Ausbau ===================== */
.nav a[aria-current="page"] { color: var(--gold-light); }
.section { padding: clamp(72px, 10vw, 120px) 0; }
.section-mist { background: var(--mist); }
.section-navy { background: var(--navy); color: var(--on-dark); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy p { color: var(--on-dark-muted); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head p:not(.kicker) { margin-top: 16px; }
.section-navy .kicker { color: var(--gold-light); }

/* Persona im Hero */

/* Unterseiten-Kopf */
.page-hero { background: var(--navy-deep); color: var(--on-dark); padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 80px); }
.page-hero h1 { color: var(--white); max-width: 18ch; font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.page-hero .hero-lead { max-width: 58ch; }
.breadcrumb { font-size: .9rem; color: var(--on-dark-muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--on-dark-muted); }
.breadcrumb a:hover { color: var(--gold-light); }

/* Fallbeispiele */
.case { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.case + .case { margin-top: clamp(56px, 8vw, 88px); padding-top: clamp(56px, 8vw, 88px); border-top: 1px solid var(--line); }
.case-claim { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.18; color: var(--ink); font-weight: 600; text-wrap: balance; }
.case-claim em { font-style: normal; color: var(--gold-text); }
.case-sub { margin-top: 14px; }
.bars { display: grid; gap: 22px; }
.bar-row { display: grid; gap: 8px; }
.bar-label { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.bar-label strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-track { height: 18px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.bar-fill { height: 100%; width: var(--w); background: var(--ink); border-radius: var(--radius-sm); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.bar-fill.after { background: var(--gold); }
.js .reveal-bars:not(.in) .bar-fill { width: 0; }
.saving { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.saving strong { font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--gold-text); font-variant-numeric: tabular-nums; line-height: 1; }
.case details { margin-top: 8px; }
.case summary { cursor: pointer; padding-block: 10px; font-weight: 600; color: var(--ink); }
.case table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .95rem; }
.case th, .case td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.case td:not(:first-child), .case th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.case .note { margin-top: 12px; font-size: .88rem; }
.table-scroll { overflow-x: auto; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line-dark); border-radius: var(--radius); margin-top: 28px; }
.seg button { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--on-dark); font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--navy); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-soft); }
.fineprint { margin-top: 16px; font-size: .88rem; }

/* Rechner */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.calc-in { padding: clamp(22px, 3vw, 36px); display: grid; gap: 22px; align-content: start; }
.calc-out { padding: clamp(22px, 3vw, 36px); background: var(--navy); color: var(--on-dark); display: grid; gap: 18px; align-content: start; }
.calc-out h3 { color: var(--white); font-family: var(--sans); font-size: 1rem; }
.range { display: grid; gap: 8px; }
.range-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.range-top label { font-weight: 600; color: var(--ink); }
.range-top output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.num { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; font-weight: 600; color: var(--ink); }
.calc-in > * { min-width: 0; }
.num input { width: 11ch; max-width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.num input::-webkit-inner-spin-button, .num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num input:focus { outline: 2px solid var(--gold-text); outline-offset: 0; border-color: transparent; }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; color: var(--ink); cursor: pointer; }
.check-row input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }
.range input[type=range] { width: 100%; accent-color: var(--navy); height: 44px; margin-block: -6px; }
.calc select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.big-result { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.result-label { color: var(--on-dark-muted); font-size: .95rem; }
.result-list { display: grid; gap: 10px; border-top: 1px solid var(--line-dark); padding-top: 16px; }
.result-list div { display: flex; justify-content: space-between; gap: 12px; font-size: .97rem; }
.result-list dt { color: var(--on-dark-muted); }
.result-list dd { color: var(--white); font-variant-numeric: tabular-nums; font-weight: 600; }
.stack { display: flex; gap: 2px; height: 22px; border-radius: var(--radius-sm); overflow: hidden; }
.stack span { display: block; height: 100%; transition: width .5s ease; }
.legend { display: grid; gap: 6px; font-size: .9rem; }
.legend span { display: flex; align-items: center; gap: 8px; color: var(--on-dark-muted); }
.legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.c1 { background: var(--gold-light); } .c2 { background: var(--chart-2); } .c3 { background: var(--chart-3); } .c4 { background: var(--chart-4); }
.calc-note { font-size: .86rem; color: var(--on-dark-muted); }
.calc-fallback { color: var(--on-dark); }
.calc.ready .calc-fallback,
.calc:not(.ready) :is(output, .num, .light-note, .big-result, .result-label, .result-list, .ampel, .stack, .legend) { display: none; }
.light-note { margin-top: 14px; font-size: .88rem; }
.ampel { display: grid; gap: 14px; justify-items: start; color: var(--on-dark); font-size: .97rem; }
.ampel p { display: flex; gap: 10px; align-items: baseline; }
.ampel i { width: 14px; height: 14px; flex: none; border-radius: var(--radius-full); transform: translateY(2px); background: var(--status-ok); }
.ampel.mid i { background: var(--status-mid); } .ampel.high i { background: var(--status-high); }
.ampel.ok span { font-weight: 600; color: var(--white); }

/* Erklär-Bausteine (Unternehmen) */
.explainer { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.explainer + .explainer { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.explainer h2 { margin-bottom: 14px; }

.seg-light { border-color: var(--line); }
.seg-light button { color: var(--ink); }
.seg-light button[aria-pressed="true"] { background: var(--toggle-on-bg); color: var(--toggle-on-text); }
.benefit-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.benefit-list li::before { content: ""; width: 8px; height: 8px; margin-top: 10px; border-radius: var(--radius-full); background: var(--gold); flex: none; }
.js [data-panel][hidden] { display: none; }

.js .nojs-title, html:not(.js) [data-toggle] { display: none; }

/* Checkliste */

/* Zeitleiste */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line-dark); }
.timeline li { position: relative; padding-top: 36px; }
.timeline li::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--navy); border: 3px solid var(--gold-light); }
.timeline strong { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--gold-light); }
.timeline p { margin-top: 6px; font-size: .97rem; }

.footer-brand .footer-logo { width: 150px; height: auto; background: none; padding: 0; }

@media (max-width: 900px) {
  .case, .indep, .check-grid, .calc, .explainer, .app-grid { grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .timeline::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline li { padding: 0 0 28px 40px; }
}
@media (max-width: 640px) {
  .brand-logo { height: 36px; }
}
@media print {
  .site-header, .site-footer, .mobile-bar, .page-hero, .cta-band, .no-print, .skip-link { display: none !important; }
  body { padding: 0; color: #000; background: #fff; }
  .section { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar-fill, .dots i, .stack span { transition: none; }
}
.text-link { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hero h1 { max-width: none; font-size: clamp(2.6rem, 4.6vw, 4rem); overflow-wrap: normal; }
@media (max-width: 640px) { .hero h1 { font-size: clamp(2.1rem, 10.5vw, 2.6rem); } }
/* v11 Feinschliff */
.explainer-wide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.explainer-wide > div:first-child { max-width: 680px; }

.page-hero h1 { max-width: 22ch; }
.explainer h2 { -webkit-hyphens: auto; hyphens: auto; }
.case > * { min-width: 0; }
.table-scroll { max-width: 100%; }
@media (max-width: 640px) {
  .case table { font-size: .88rem; }
  .case td:not(:first-child), .case th:not(:first-child) { white-space: normal; }
}
@media (max-width: 640px) {
  .case table { table-layout: fixed; }
  .case th, .case td { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .case th:first-child, .case td:first-child { width: 38%; }
}
.range-top output { white-space: nowrap; }
.faq summary { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }

@media (max-width: 640px) {
  .seg { display: flex; }
  .seg button { flex: 1 1 0; padding: 0 8px; }
}
.range input[type=range] { accent-color: var(--ink); }
.btn-navy { border-color: var(--line); }

/* v12: Sprungnavigation, Formular, Gewerbe, Beispielrechnung */
.jump { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: .95rem; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--line-dark-strong); text-underline-offset: 5px; }
.jump a:hover { color: var(--gold-light); text-decoration-color: var(--gold-light); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.link-btn { display: inline; min-height: 0; padding: 0; background: none; border: 0; color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cover-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 64px); border-top: 1px solid var(--line); }
.cover-list div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.cover-list dt { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.cover-list dd { margin-top: 6px; font-size: 1rem; }
.case-business { margin-top: clamp(56px, 8vw, 88px); padding: clamp(24px, 4vw, 48px); background: var(--paper); border-radius: var(--radius); }
.bar-fill.mid { background: var(--chart-5); }
@media (max-width: 900px) {
  .hero-portrait { justify-self: start; width: min(100%, 360px); }
  .about-text, .cover-list { grid-template-columns: minmax(0, 1fr); }
  .steps-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero-portrait { width: min(72%, 280px); }
  .steps-6 { grid-template-columns: minmax(0, 1fr); }
  .num input { width: 10ch; }
}

/* v13: bKV-Erklärbereich */
.bkv-block { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--line); }
.block-title { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.2; }
.block-lead, .block-title + p { margin-top: 12px; }
.bkv-block .note { margin-top: 12px; }
.bkv-why h3 { font-family: var(--serif); font-size: 1.3rem; }
.bkv-why > p:not(.source) { margin-top: 10px; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.stat-pair strong { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: lining-nums; }
.stat-pair span { display: block; margin-top: 6px; font-size: .95rem; }
.source { margin-top: 12px; font-size: .85rem; }

.panel-lead { margin-bottom: 18px; }
.modules { width: 100%; border-collapse: collapse; font-size: .97rem; background: var(--paper); border-radius: var(--radius); }
.modules th, .modules td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.modules td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.modules .group th { padding-top: 18px; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.modules small { color: var(--text); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); margin-top: 28px; }
.compare-col { display: grid; gap: 18px; align-content: start; padding: clamp(20px, 3vw, 32px); background: var(--paper); border-radius: var(--radius); }
.compare-col h4 { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.compare-note { margin-top: 20px; max-width: 90ch; font-size: .9rem; }

.seg-calc { margin-top: 0; justify-self: start; }
.module-picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.module-picker legend { padding: 0; font-weight: 600; color: var(--ink); }
.module-group-title { margin-top: 16px; font-size: .9rem; font-weight: 600; color: var(--gold-text); }
.module { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .97rem; }
.module input { width: 20px; height: 20px; accent-color: var(--ink); }
.module small { color: var(--text); }
.module-price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; font-size: .875rem; }

@media (max-width: 900px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .stat-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .modules td { white-space: normal; }
  .module { grid-template-columns: 22px minmax(0, 1fr); }
  .module-price { grid-column: 2; }
}
.module-picker .note { margin-top: 12px; font-size: .88rem; }

/* v14: Vertrauensleiste, Kernaussage, CTA-Zeilen, Hausgrafik, Bankvergleich */
.trust { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px 24px; margin-top: clamp(48px, 7vw, 80px); padding: 24px 0 32px; border-top: 1px solid var(--line-dark); color: var(--on-dark); }
.trust li { display: flex; align-items: center; gap: 10px; }
.tick { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold-light); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cta-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: clamp(40px, 6vw, 64px); padding: 24px 0 0; border-top: 1px solid var(--line); }
.cta-row p { max-width: 60ch; }
.cta-row strong { color: var(--ink); }
.cta-row .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: center; }
.house svg { display: block; width: 100%; max-width: 360px; margin-left: auto; overflow: visible; }
.house :is(path, rect) { fill: none; stroke: var(--on-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.house .h-roof, .house .h-chimney { stroke: var(--gold-light); }
.house .h-door circle { fill: var(--gold-light); opacity: 0; animation: appear .3s ease-out 3.2s forwards; }
.house .h-found { animation-delay: .3s; } .house .h-walls { animation-delay: .9s; } .house .h-roof { animation-delay: 1.6s; }
.house .h-chimney { animation-delay: 2.1s; } .house .h-windows :is(path, rect) { animation-delay: 2.4s; } .house .h-door rect { animation-delay: 2.8s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }

.bank-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.bank-facts dt { color: var(--on-dark-muted); } .bank-facts dd { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.section-navy .bar-label strong, .section-navy .saving strong { color: var(--gold-light); }
.section-navy .bar-track { background: rgba(255, 255, 255, .12); }
.section-navy .bar-fill { background: var(--chart-5); } .section-navy .bar-fill.after { background: var(--gold-light); }
.section-navy .saving { border-color: var(--line-dark); }
@media (max-width: 900px) { .page-hero-grid, .bank-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .house { display: none; } }
@media (prefers-reduced-motion: reduce) { .house :is(path, rect), .house .h-door circle { animation: none; stroke-dashoffset: 0; opacity: 1; } }
.trust li { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } }
@media (max-width: 640px) { .trust { gap: 14px 16px; font-size: .875rem; line-height: 1.4; } .trust li { align-items: flex-start; } .trust .tick { margin-top: 2px; } }
.result-list div { flex-wrap: wrap; }
.result-list dt { min-width: 0; overflow-wrap: anywhere; }

.app-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.phone { position: relative; justify-self: center; width: min(100%, 290px); padding: 7px; background: #0b0d12; border-radius: 48px; box-shadow: 0 0 0 1.5px #3a3f4a, inset 0 0 0 1px rgba(255, 255, 255, .06), 0 32px 64px -32px rgba(13, 26, 44, .6); }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; z-index: 1; width: 30%; height: 24px; border-radius: var(--radius-full); background: #000; transform: translateX(-50%); }
.phone::after { content: ""; position: absolute; top: 120px; right: -3px; width: 3px; height: 64px; border-radius: 0 2px 2px 0; background: #3a3f4a; }
.phone img { width: 100%; height: auto; border-radius: 41px; }
.app-lead { margin-top: 16px; font-size: 1.1rem; }
.app-steps { counter-reset: as; display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.app-steps li { counter-increment: as; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.app-steps li::before { content: counter(as); grid-row: span 2; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--gold-light); color: var(--navy); display: grid; place-items: center; font-weight: 600; font-size: .95rem; }
.app-steps h3 { font-size: 1rem; }
.app-steps p { font-size: .97rem; }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.mandate { margin-top: 20px; padding: 14px 18px; background: var(--mist); border-radius: var(--radius); font-size: .95rem; color: var(--ink); }
@media (max-width: 640px) {

  .phone { width: min(100%, 250px); border-radius: 42px; padding: 6px; }
  .phone::before { top: 15px; height: 20px; }
  .phone img { border-radius: 36px; }
}
@media (max-width: 900px) {
  .app-grid { grid-template-columns: minmax(0, 1fr); }
  .phone { justify-self: start; }
}
.app-actions > * { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .phone { order: 2; width: min(100%, 230px); } }

/* v16: Kernaussage als Zitat, Siegel in der Fußzeile, Checklisten-Hinweis */
.footer-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; min-width: 0; }
.footer-seal { display: block; flex: none; border-radius: var(--radius-sm); }
.footer-seal img { width: 120px; height: auto; }
@media (max-width: 640px) { .footer-side { flex-direction: column; align-items: flex-start; } }
.checklist-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 48px; padding: clamp(24px, 4vw, 40px); background: var(--mist); border-radius: var(--radius); }
.checklist-note p { margin-top: 10px; max-width: 62ch; }
.checklist-note h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* v19: Einordnung der Ampel, bKV-Auswahl im Kontaktformular */
.ampel-note { font-size: .875rem; color: var(--on-dark-muted); }
.bkv-selection { padding: 14px 16px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field-raised); }
.bkv-selection-title { font-weight: 600; color: var(--white); }
.bkv-selection [data-bkv-summary] { color: var(--on-dark); }

/* bKV: Bausteintabelle aufklappbar unter dem Rechner */
.modules-details { margin-top: 32px; border-top: 1px solid var(--line); }
.modules-details summary { cursor: pointer; padding-block: 18px; font-weight: 600; color: var(--ink); }
.modules-details .table-scroll { margin-top: 12px; }
.bkv-principle > p { margin-top: 10px; max-width: 70ch; }

.compare-col, .bar-label span { min-width: 0; }
.bar-label span, .modules th { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bar-label strong { white-space: nowrap; }
.bkv-principle + .explainer { margin-top: clamp(40px, 6vw, 64px); }

/* v20: Startseite neu geordnet, Kfz-Laufband, schlankeres Formular, Firmen-Einstiege, Kfz-Selbstvergleich */
.hero-kicker { margin-bottom: 16px; font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 600; color: var(--gold-light); }
@media (max-width: 640px) {
  .mobile-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .mobile-bar .btn { padding-inline: 14px; }
}
@media (max-width: 380px) { .mobile-bar .btn { padding-inline: 10px; font-size: .88rem; } }

@media (max-width: 640px) {

  .cta-row .actions, .cta-row .actions .btn { width: 100%; }
}

/* Unternehmen: drei Einstiege nach Anliegen */
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(20px, 3vw, 40px); margin-top: clamp(36px, 5vw, 56px); }
.entry { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 2px solid var(--gold-light); color: var(--on-dark-muted); text-decoration: none; }
.entry strong { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.25; color: var(--white); }
.entry span { font-size: .95rem; }
.entry:hover strong { color: var(--gold-light); }
.entry strong::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em; border-right: 2px solid var(--gold-light); border-bottom: 2px solid var(--gold-light); transform: translateY(-.2em) rotate(45deg); }
@media (max-width: 900px) { .entries { grid-template-columns: minmax(0, 1fr); } }

/* v21: Finanzierungsbeispiel mit Pflichtangaben (§ 17 PAngV) */
.bank-facts-title, .bank-card h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.bank-facts dd { text-align: right; }
.bank-facts dd small { font-weight: 400; color: var(--on-dark-muted); white-space: nowrap; }
.bank-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; }
.bank-card { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.bank-card-b { border-color: rgba(230, 201, 140, .55); }
/* Sollzins und effektiver Jahreszins: bewusst identisch groß und auffällig */
.bank-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-dark); }
.bank-rates dt { font-size: .9rem; line-height: 1.35; color: var(--on-dark); }
.bank-rates dd { margin-top: 4px; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 600; line-height: 1.1; color: var(--gold-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-star { grid-column: 1 / -1; font-size: .9rem; }
.bank-outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(32px, 5vw, 48px); padding-top: 24px; border-top: 1px solid var(--line-dark); }
.bank-outcome .saving { padding-top: 0; border: 0; }
.section-navy .bank-outcome > p:not(.saving) { color: var(--on-dark); }
.section-navy .bank-note { margin-top: 28px; padding: 16px 20px; max-width: none; border: 1px solid var(--line-dark); border-radius: var(--radius); font-size: 1rem; color: var(--on-dark); }
.calc-disclaimer { margin-top: -8px; font-size: .95rem; color: var(--on-dark); }
@media (max-width: 1020px) { .bank-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .bank-outcome { grid-template-columns: minmax(0, 1fr); } .bank-facts div { flex-wrap: wrap; } }

/* v21: Wahl für die Erstinformation (§ 16 VersVermV), Anschrift nur bei Post */
.choice { display: flex; flex-flow: row wrap; align-items: center; gap: 8px 24px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choice legend { float: left; margin-right: 4px; padding: 0; font-size: .95rem; color: var(--on-dark); }
.choice label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--on-dark); cursor: pointer; }
.choice input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--gold-light); }
.choice .field-error { flex-basis: 100%; }
.address { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em minmax(0, 1fr); gap: 18px; }

@media (max-width: 640px) {
  .address { grid-template-columns: 7.5em minmax(0, 1fr); }

}
.bank-stack { display: grid; gap: clamp(28px, 4vw, 40px); }
.bank-assume .bank-facts { columns: 2; column-gap: clamp(32px, 5vw, 64px); }
.bank-assume .bank-facts div { break-inside: avoid; }
.bank-card .bank-facts div { flex-wrap: nowrap; }
@media (max-width: 1020px) { .bank-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bank-cards { grid-template-columns: minmax(0, 1fr); } .bank-assume .bank-facts { columns: 1; } }
@media (max-width: 400px) { .bank-card { padding: 18px 16px; } .bank-card .bank-facts dt { font-size: .875rem; } }
@media (max-width: 640px) {
  .choice { column-gap: 18px; }
  .choice legend { float: none; width: 100%; margin-bottom: 2px; }
  .choice label { font-size: .95rem; gap: 8px; }
}

/* v22: Warum ich so arbeite, vier Schwerpunkte, Ablauf als Weg */
:root { --gold-num: #b3843a; }

.focus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); }
.focus-item { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.focus-item .icon { width: 40px; height: 40px; margin-bottom: 6px; }
.focus-item h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.focus-item p { font-size: 1rem; }
.focus-item .go { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.focus-item:hover h3, .focus-item:hover .go { color: var(--gold-text); }
@media (max-width: 1020px) { .focus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .focus { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf: goldener Weg mit vier Stationen */
.journey { --dot: 15px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 6vw, 64px); counter-reset: station; }
.journey::before { content: ""; position: absolute; left: calc(var(--dot) / 2); right: 0; top: calc(var(--dot) / 2 - .75px); height: 1.5px; background: linear-gradient(90deg, var(--gold) 82%, transparent); transform-origin: left center; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.js .journey:not(.in)::before { transform: scaleX(0); }
.journey li { position: relative; z-index: 1; padding-top: calc(var(--dot) + 32px); counter-increment: station; }
.journey li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--dot); height: var(--dot); box-sizing: border-box; border: 1.5px solid var(--gold); border-radius: var(--radius-full); background: radial-gradient(circle, var(--ink) 0 2.5px, var(--mist) 3px); }
.journey h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.55rem); font-weight: 600; line-height: 1.2; color: var(--ink); }
.journey h3::before { content: counter(station, decimal-leading-zero); display: block; margin-bottom: 18px; font-size: clamp(3rem, 5vw, 4.4rem); font-weight: 400; line-height: .9; color: var(--gold-num); font-variant-numeric: lining-nums; }
.journey p { margin-top: 10px; font-size: 1rem; }
.pill { display: inline-block; margin-top: 14px; padding: 3px 12px; border: 1px solid var(--gold); border-radius: var(--radius-full); font-size: .82rem; font-weight: 600; color: var(--gold-text); }
.cta-row-plain { justify-content: flex-start; }
@media (max-width: 760px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-left: 40px; }
  .journey::before { left: calc(var(--dot) / 2); right: auto; top: calc(var(--dot) / 2); bottom: 0; width: 1.5px; height: auto; background: linear-gradient(180deg, var(--gold) 85%, transparent); transform-origin: center top; }
  .js .journey:not(.in)::before { transform: scaleY(0); }
  .journey li { padding-top: 0; }
  .journey li::before { left: -40px; top: 0; }
  .journey h3::before { margin-bottom: 10px; font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) { .journey::before { transition: none; transform: none !important; } }

/* Aufklappbare Details ("Mehr erfahren") */
.more { margin-top: 12px; }
.more > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.more > :not(summary) { margin-top: 8px; }
.section-navy .more > summary { color: var(--white); }

.more-note { margin-top: 4px; }
.more-note > summary { font-size: .875rem; }

/* v23: roter Faden der Startseite: Überleitungen und Hintergrund-Rhythmus */
.bridge { margin-bottom: 10px; font-size: 1.05rem; color: var(--text); }
.bridge-sub { margin-top: 10px; font-size: 1.1rem; color: var(--text); }
.process-light { background: var(--paper); }
.process-light .journey li::before { background: radial-gradient(circle, var(--ink) 0 2.5px, var(--paper) 3px); }

/* AfW-Mitgliedschaft als Textsiegel im eigenen Design (Verbandslogo bewusst nicht verändert) */
.footer-afw { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 132px; aspect-ratio: 1; border: 1px solid var(--gold); border-radius: 50%; outline: 1px solid var(--gold); outline-offset: 4px; text-align: center; text-decoration: none; color: var(--navy); margin: 5px; }
.footer-afw .afw-top { font: 600 .62rem/1 "Toto Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.footer-afw .afw-name { font: 600 2rem/1.05 "Toto Serif", serif; letter-spacing: .04em; margin: 4px 0 6px; padding-top: 4px; border-top: 1px solid var(--gold); }
.footer-afw .afw-sub { font: 400 .58rem/1.3 "Toto Sans", sans-serif; letter-spacing: .03em; color: var(--text); }
.footer-afw:hover .afw-name { color: var(--gold-text); }
.footer-social { display: flex; gap: 14px; margin-top: 12px; }
.footer-social a { display: inline-flex; color: var(--navy); }
.footer-social a:hover { color: var(--gold-text); }
.footer-social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Landingpages (vorlagen/landingpages.py): Foto im Seitenkopf, Vergleichstabelle, Ja/Nein-Listen, Hinweisbox */
.page-hero .hero-portrait { width: min(100%, 320px); }
@media (max-width: 900px) { .page-hero .hero-portrait { justify-self: start; width: min(100%, 220px); } }
.page-hero .trust { margin-top: 40px; }
.lp-table table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.lp-table th, .lp-table td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lp-table thead th { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); border-bottom: 2px solid var(--gold); }
.lp-table tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.lp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
@media (max-width: 760px) { .lp-two { grid-template-columns: minmax(0, 1fr); } }
.lp-two h3 { padding-bottom: 12px; border-bottom: 2px solid var(--gold); }
.lp-checks li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lp-checks svg { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--gold-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-note { margin-top: 40px; padding: 20px 24px; border-left: 3px solid var(--gold); background: var(--mist); color: var(--ink); max-width: 760px; }
.lp-note p + p { margin-top: 8px; }
.section-navy .lp-note { background: var(--navy-soft); color: var(--on-dark); }

/* Website-Test 21.10.2026: Ort klein im H1, Ersparnis-Beschriftung ohne Minuszeichen */
.hero h1 .hero-kicker { display: block; font-family: var(--sans); letter-spacing: 0; line-height: 1.3; }

.trust a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

.nowrap { white-space: nowrap; }

.focus-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1020px) { .focus-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .focus-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .focus-5 { grid-template-columns: minmax(0, 1fr); } }
/* Handy-Leiste blendet sich über dem Kopfbereich und dem Formular aus (script.js) */
.mobile-bar { transition: transform .25s ease; }
.mobile-bar.is-away { transform: translateY(120%); }
@media (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }
.note + .lp-two { margin-top: 32px; }
details.calc-note > summary { cursor: pointer; font-weight: 600; color: var(--on-dark); }

.reviews { padding-block: clamp(48px, 7vw, 72px); }
.reviews-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.reviews-card p:not(.kicker) { margin-top: 10px; }
/* Rechenbeispiel Finanzierung: Bank A und B als Angebotsblätter (immer weißes Papier, auch im dunklen Abschnitt) */
.bank-card {
  position: relative; padding-top: 52px; background: #ffffff; color: #3b4350; border: 0; border-top: 5px solid #12233b; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(18, 35, 59, .1), 0 22px 40px -22px rgba(18, 35, 59, .5);
  --on-dark: #12233b; --on-dark-muted: #5a6472; --line-dark: #e3dccf; --white: #12233b; --gold-light: #7a5a1c;
  transform: rotate(-.6deg);
}
.bank-card-b { border-color: #c39448; transform: rotate(.6deg); }
.bank-card::before { content: "Rechenbeispiel"; position: absolute; top: 18px; left: clamp(20px, 3vw, 28px); font: 600 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #7a5a1c; }
.bank-card h3 { color: #12233b; }
@media (max-width: 760px) { .bank-card, .bank-card-b { transform: none; } }
/* Seitenstopper mit Zitat */
.stopper { text-align: center; padding-block: clamp(72px, 11vw, 128px); }
.stopper-quote { margin: 0 auto; max-width: 940px; }
.stopper-quote blockquote { margin: 0; }
.stopper-quote p { max-width: none; font-family: var(--serif); font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.18; color: var(--white); text-wrap: balance; }
.stopper-quote figcaption { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--gold-light); }
.stopper-quote figcaption::before, .stopper-quote figcaption::after { content: ""; width: 28px; height: 1px; background: currentColor; }
/* Zahlen-Streifen */
.counts { text-align: center; padding-block: clamp(48px, 7vw, 80px); }
.count-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px clamp(48px, 10vw, 140px); }
.count-list li { display: grid; gap: 6px; }
.count-list strong { font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; color: var(--gold-num, var(--gold-text)); font-variant-numeric: lining-nums tabular-nums; min-width: 4ch; }
.count-list span { font-weight: 600; color: var(--ink); }

/* Kontakt: nur WhatsApp, Erstinformation klein */
.contact-wa { margin-top: 28px; font-weight: 600; }
.contact-wa a { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--serif); font-size: 1.3rem; color: var(--white); text-decoration: none; }
.contact-wa a:hover { color: var(--gold-light); }
.contact-wa svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Haus-Zeichnung: vor dem Start keinen runden Strich-Anfang als Punkt zeigen */
.house :is(path, rect) { stroke-dasharray: 1 2; stroke-dashoffset: 1.06; }
@media (prefers-reduced-motion: reduce) { .house :is(path, rect) { stroke-dashoffset: 0; } }
/* Fußbereich: Beratungszeiten als kleine Karte */
.footer-hours { display: block; width: fit-content; min-width: 210px; margin-top: 18px; padding: 16px 20px 14px; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 2px; box-shadow: 0 12px 28px -22px rgba(18, 35, 59, .45); font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--ink); }
.footer-hours strong { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.choice-small legend, .choice-small label { font-size: .9rem; min-height: 36px; }

/* ==== Dienstunfähigkeit: Schaubild (dienstunfaehigkeit-beamte.html) ==== */
.du-tool { margin: 40px 0 0; display: grid; gap: 24px 40px; align-items: start; }
@media (min-width: 960px) { .du-tool { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.du-card { padding: clamp(12px, 2.4vw, 24px); background: #f8f5ef; border-radius: var(--radius); color: #12233b; }
.du-chart { display: block; width: 100%; height: auto; }
.du-chart .du-p1 { fill: #c39448; }
.du-chart .du-p2 { fill: #e3c88a; }
.du-chart .du-vers { fill: #7b8797; }
.du-chart .du-bes { fill: none; stroke: #12233b; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.du-chart .du-axis { stroke: #12233b; stroke-width: 1.5; }
.du-chart .du-wz { stroke: #12233b; stroke-width: 1.5; stroke-dasharray: 6 5; }
.du-chart .du-lab { fill: #12233b; font: 600 14px var(--sans); }
.du-m circle { fill: #12233b; stroke: #fff; stroke-width: 2.5; }
.du-m text { fill: #fff; font: 700 18px var(--sans); text-anchor: middle; }
/* Leiste unter der x-Achse: Ränder = Achse im viewBox (44 und 12 von 480), Spalten = Wartezeit 38 / 62 */
.du-bar { display: grid; max-width: none; grid-template-columns: 38fr 62fr; margin: 8px 2.5% 0 9.17%; font-size: clamp(.72rem, 1.6vw, .85rem); font-weight: 600; line-height: 1.3; }
.section-navy .du-bar { color: #12233b; }
.du-bar span { padding: 8px 10px; background: #c39448; }
.du-bar span + span { background: #5c6675; color: #ffffff; }
.du-steps { display: grid; gap: 18px; counter-reset: du; }
.du-steps li { position: relative; padding-left: 50px; counter-increment: du; }
.du-steps li::before { content: counter(du); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-full); background: #12233b; border: 2.5px solid #fff; color: #fff; font-weight: 700; }
.du-steps strong { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--gold-light); }
.du-steps p { margin-top: 4px; font-size: .97rem; }
.du-tool .note { grid-column: 1 / -1; font-size: .86rem; }

/* ==== Beihilfe: Auswahl „Ihr Dienstherr“ (pkv-beamte.html) ==== */
.bh-pick { display: grid; gap: 14px; max-width: 760px; }
.bh-pick label { font-weight: 600; color: var(--ink); }
.bh-pick select { width: 100%; max-width: 360px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.bh-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.bh-card div { padding: 14px 16px; outline: 1px solid var(--line); }
.bh-card div:last-child { grid-column: 1 / -1; }
.bh-card dt { font-size: .86rem; color: var(--text); }
.bh-card dd { margin: 4px 0 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bh-card div:last-child dd { font-weight: 400; }
.bh-pick ~ .note { margin-top: 12px; font-size: .9rem; }
/* Bewertungen als Zitate */
.review-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
@media (max-width: 1020px) { .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .review-list { grid-template-columns: minmax(0, 1fr); } }
.review-list li { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); }
.review-list blockquote { margin: 0; }
.review-list blockquote p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.stars { color: var(--gold); letter-spacing: .12em; font-size: 1rem; }
.review-topic { margin-top: auto; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.review-note { margin-top: 16px; font-size: .85rem; }
/* Fußbereich: Beratungszeiten unter „Beratung per Video …“, genau so breit wie die Adressspalte, Zeilen mittig */
.site-footer address { display: block; justify-self: start; width: max-content; max-width: 100%; }
.site-footer address .footer-hours { display: grid; justify-items: center; width: 100%; min-width: 0; margin-top: 14px; padding: 14px 16px 12px; text-align: center; }
.site-footer address .footer-hours strong { margin-bottom: 4px; }

/* v22: Barrierefreiheit (Ist-Analyse 22.10.): Fokus an Knöpfen, Tippflächen mind. 24 px, Kleinschrift nicht unter 0,92 rem */
.btn:focus-visible { outline-width: 3px; outline-offset: 3px; }
.footer-social a { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin: -11px; }
.footer-social { gap: 22px; margin-left: 11px; margin-right: 11px; } /* 22 px Abstand = Trefferflächen berühren sich, überlappen nicht */
.footer-legal nav a, .footer-contact a { display: inline-block; min-height: 24px; padding-block: 2px; }
.hint, .calc-note, .case .note, .fineprint, .light-note, .source, .module-picker .note, .seal figcaption, .dots-note, .compare-note, .legend { font-size: .875rem; }

/* v23: Hauptmenü mit aufklappenden Themen (Desktop: Hover/Fokus, mobil: immer offen, eingerückt) */
.nav-item { position: relative; }
.mega { display: none; }
.mega-title { margin: 0 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7a5a1c; }
.mega a { display: block; padding: 5px 0; color: #12233b; text-decoration: none; white-space: nowrap; }
.mega a:hover { color: #7a5a1c; }
@media (min-width: 901px) {
  .mega { position: absolute; top: 100%; left: -34px; z-index: 50; gap: 34px; padding: 34px; margin-top: 21px; background: #fff; border: 1px solid #e3dccf; border-top: 2px solid #c39448; border-radius: 4px; box-shadow: 0 21px 55px -21px rgba(18, 35, 59, .35); }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 23px; } /* Brücke, damit das Menü beim Hinfahren offen bleibt */
  .nav-item:hover .mega, .nav-item:focus-within .mega { display: grid; grid-auto-flow: column; }
  .nav-item:last-of-type .mega { left: auto; right: -34px; }
}
@media (max-width: 900px) {
  .mega { display: grid; gap: 13px; padding: 8px 0 13px 13px; border-bottom: 1px solid var(--line-dark); }
  .js .nav .mega a { padding: 6px 0; border: 0; font-size: .95rem; }
}
@media (max-width: 900px) {
  /* iOS 26: Safari-Leiste schwebt über dem Seitenende, letzte Menüpunkte brauchen Platz darüber */
  .js .nav.open { max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; padding-bottom: calc(89px + env(safe-area-inset-bottom, 0px)); }
  html.menue-offen { overflow: hidden; } /* Seite steht still, Wischen scrollt das Menü */
}
@media (max-width: 900px) { .js .nav .nav-item > a { display: block; border-bottom: 0; padding-bottom: 5px; font-weight: 600; } }

/* v24: Helle Optik fest übernommen (vorher nur Vorschau, optik.css) */

/* Optik 2026 (Website-Test, Abschnitt 11): heller Grund, Navy als Schrift, eine Navy-Fläche pro Seite (.band, .cta-band) + Fußbereich.
   Nur im hellen Modus; im dunklen Modus bleibt die bisherige Darstellung.
   Prinzip: die dunklen Bereiche nutzen Tokens (--on-dark, --line-dark, --field-*, --white). Hell gewordene Bereiche bekommen
   diese Tokens neu gesetzt, statt jede Regel einzeln zu überschreiben. */
@media all {
  :root {
    --paper: #f8f5ef;
    --mist: #efe8dc;
    --line: #e3dccf;
    --text: #3b4350;
    --gold-text: #7a5a1c;
    --gold-num: #9c7030;
    --on-dark-muted: #b8c4d2;
    --chart-3: #9c7030; /* kein Grün mehr im Rechner */
  }

  /* Bereiche, die hell werden */
  .site-header, .hero, .page-hero, .contact, .section-navy:not(.band), .calc-out, .mobile-bar, .service-business {
    --on-dark: var(--ink);
    --on-dark-muted: #5a6472;
    --line-dark: var(--line);
    --line-dark-strong: var(--navy);
    --white: var(--navy);
    --gold-light: var(--gold-text);
    --gold-hover: var(--navy-soft);
    --field-bg: #ffffff;
    --field-line: #7d8896;
    --field-raised: #ffffff;
    --error-text: #a33a2b;
    --error-line: #a33a2b;
    --focus: var(--gold-text);
  }
  .site-header { --header-bg: #ffffff; }
  .hero, .page-hero { background: var(--paper); }
  .section-navy:not(.band), .service-business { background: var(--mist); }
  .calc-out { background: #ffffff; border: 1px solid var(--line); }
  .contact { background: var(--mist); }
  .contact-form { background: #ffffff; border-color: var(--line); box-shadow: 0 18px 40px -28px rgba(18, 35, 59, .35); }
  .field input, .field select, .field textarea { min-height: 52px; font-size: 1rem; }
  .mobile-bar { background: #ffffff !important; border-top-color: var(--line) !important; }
  .hero-portrait img { box-shadow: 0 24px 48px -28px rgba(18, 35, 59, .45); }
  .section-navy:not(.band) .lp-note { background: #ffffff; color: var(--ink); }

  /* Logo im weißen Kopf: Original in Navy/Gold, größer, damit „CONSULTING“ lesbar ist */
  .brand-logo { height: 50px; }
  @media (max-width: 640px) { .brand-logo { height: 42px; } }

  /* Knöpfe: Hauptknopf Navy auf Hell, Gold nur auf der Navy-Fläche */
  .btn-gold, .btn-light { background: var(--navy); color: #ffffff; }
  .btn-gold:hover, .btn-light:hover { background: var(--navy-soft); color: #ffffff; }
  .band .btn-gold, .cta-band .btn-gold { background: var(--gold); color: var(--navy); }
  .band .btn-gold:hover, .cta-band .btn-gold:hover { background: var(--gold-light); }

  /* Dachzeilen als Echo von „CONSULTING“ im Logo */
  .hero-kicker, .kicker { font-family: var(--sans); font-size: .875rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); }
  .band .kicker { color: var(--gold-light); }

  .faq summary::after, .more > summary::after { border-color: var(--navy); }
  .benefit-list li::before { background: var(--navy); }
  .lp-checks svg { stroke: var(--navy); }
}

/* Fokus: auf hellem Grund Navy-Ring (14:1), in dunklen Bändern hellgold */
.btn { --focus: var(--navy); }
.band .btn, .cta-band .btn { --focus: #e3c88a; }

/* Handy-Menü hell wie der Kopf */
@media (max-width: 900px) { .js .nav { background: #ffffff; box-shadow: 0 21px 34px -21px rgba(18, 35, 59, .35); } }
.nav-item.is-closed .mega { display: none !important; }
/* Fuß: Siegel und AfW nebeneinander, die rechte Spalte nimmt sich ihren Platz */
@media (min-width: 901px) { .footer-grid { grid-template-columns: auto minmax(0, 1fr) auto; } .footer-side { flex-wrap: nowrap; } }
/* Fußzeile: Links oben, Registerzeile darunter in voller Breite (globale 64ch-Grenze brach „© 2026“ um) */
.footer-legal p { max-width: none; }
.glanz .site-footer .footer-legal nav a { min-width: 0; } /* Text ist breiter als 24 px, Höhe bleibt 44 px */
.footer-legal .nw { white-space: nowrap; }

/* Renten-Band mit drei Grafiken (altersvorsorge.html, 26.10.2026) */
.rbilder{display:grid;grid-template-columns:1fr;gap:var(--f4);margin-top:var(--f5);text-align:center}
@media (min-width:900px){.rbilder{grid-template-columns:repeat(3,1fr)}}
.rb{--d:0s;margin:0;padding:var(--f4) var(--f3);border:1px solid rgba(227,200,138,.25);border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:var(--f2)}
.rb:nth-child(2){--d:.4s}.rb:nth-child(3){--d:.8s}
.glanz .rb h3,.rb h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--g-ivory)}
.rb-bild{height:calc(var(--f7) + var(--f4));width:100%;display:flex;align-items:flex-end;justify-content:center}
.rb-pikto{max-width:100%;max-height:100%;width:auto;height:auto;transition:opacity .8s calc(var(--d) + .2s),transform .8s calc(var(--d) + .2s)}
.js .rb.reveal-bars:not(.in) .rb-pikto{opacity:0;transform:translateY(var(--f1))}
.rb strong{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--g-gold)}
.rb p{margin:auto 0 0;color:var(--g-ivory);font-size:1rem;max-width:28ch}
.rb-saeulen{gap:var(--f3)}
.rb-saeulen div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:56px}
.rb-saeulen i{flex:none;display:block;width:100%;height:var(--h);background:var(--g-ivory-muted);border-radius:4px 4px 0 0;transform-origin:bottom;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d)}
.rb-saeulen .gold i{background:var(--g-gold)}
.rb-saeulen b{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--g-ivory);margin-bottom:var(--f1);transition:opacity .4s calc(var(--d) + 1s)}
.rb-saeulen .gold b{color:var(--g-gold)}
.rb-saeulen span{margin-top:var(--f1);font-size:.85rem;color:var(--g-ivory-muted)}
.rb-saeulen div:nth-child(2) i{transition-delay:calc(var(--d) + .25s)}.rb-saeulen div:nth-child(3) i{transition-delay:calc(var(--d) + .5s)}
.js .rb.reveal-bars:not(.in) .rb-saeulen i{transform:scaleY(0)}
.js .rb.reveal-bars:not(.in) .rb-saeulen b{opacity:0}
@media (prefers-reduced-motion:reduce){.rb-saeulen i,.rb-saeulen b,.rb-pikto{transition:none}}