/* ============================================================
   design-2026.css — Design v4 "Petrol, Eiche, Senf"
   ------------------------------------------------------------
   Loest Design v2 (Deep Navy + Gold) ab. Die Palette stammt aus
   Benjamins echtem Buero in der Weissenburger Str. 2: petrolgruene
   Wand, helle Eiche, Senfgold. Fotos tragen das Design.

   Additive Ebene wie ui-polish.css, aber NACH den seiteneigenen
   <style>-Bloecken eingebunden (dort, wo premium-site.css steht).
   Dadurch schlaegt sie Inline-Regeln gleicher Spezifitaet.
   Wo Inline-Regeln spezifischer sind, ist hier "body " vorangestellt.

   Aenderungen brauchen ein neues ?v=JJJJMMTT (Assets werden 24h gecacht).
   ============================================================ */

/* ---------- 1) Schriften, lokal gehostet ----------
   Vorher lage auf jeder Seite ein Request an fonts.googleapis.com,
   der die Besucher-IP an Google uebertraegt (LG Muenchen I,
   20.01.2022, Az. 3 O 17493/20). Lokal gehostet entfaellt das. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/schibsted-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/schibsted-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geistmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geistmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2) Design-Tokens ----------
   Ueberschreibt die v2-Tokens aus premium-site.css. Weil rund 1.700
   Stellen im Projekt ueber var(--...) arbeiten, faerbt das den
   groessten Teil der Website ohne einen einzigen Selektor um.
   Die Legacy-Aliasse (--green, --mint, ...) bleiben in
   premium-site.css bestehen und zeigen automatisch mit. */
:root {
  /* Marke: Petrol (die Wandfarbe im Buero) */
  --brand:       #0E3B34;
  --brand-dark:  #061B18;
  --brand-mid:   #175248;
  --brand-light: #E3EBE7;

  /* Akzent: Senf (Kicker, Fussball-Tisch, Fussmatte) */
  --gold:        #E9A81E;
  --gold-soft:   #F0C35E;
  --gold-deep:   #7A5A0E;   /* als TEXT auf hellem Grund, >= 4.5:1 */
  --star:        #E0991A;

  /* Flaechen: Sand statt Warmweiss */
  --white:   #FFFDF9;
  --paper:   #F2EEE6;
  --paper-2: #E6DFD1;
  --line:    #D6CEBD;

  /* Holz als dritte Flaeche */
  --oak:       #C08F5A;
  --oak-deep:  #6B4A22;

  /* Text */
  --ink:   #0A0F0E;
  --muted: #5D5850;

  /* Graustufen auf warm umgestellt — die kalten Tailwind-Reste
     passten nicht zum Sandton und liessen die Seite schmutzig wirken */
  --gray-50:  #F6F3EC;
  --gray-100: #EAE5DA;
  --gray-300: #C6BEAD;
  --gray-700: #3B3832;

  /* Schriften */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Kanten statt Pillen */
  --radius-sm: 2px;
  --radius:    2px;
  --radius-pill: 2px;

  /* Hero-Foto. Pfade sind relativ zu DIESER Datei (assets/).
     Einzelne Seiten setzen --hero-photo per <style> neu. */
  --hero-photo: url("office-main-hero-1600.webp");

  /* Schatten raus — flache Flaechen, Haarlinien statt Tiefe */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ---------- 3) Basis-Typografie ----------
   Lesbarkeit ist Vorgabe: Fliesstext nie unter 17px, Zeilenhoehe 1.7,
   duenne Schnitte ausschliesslich in grossen Ueberschriften. */
/* Flaeche und Textfarbe bewusst NICHT hier setzen: mehrere Funnel-Seiten
   bringen einen dunklen body mit weisser Schrift mit. Ein globales
   background/color haette sie hell gemacht und den weissen Text
   unsichtbar. Die Farbe kommt ueber die Tokens. */
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
html { background: var(--paper); }

body h1, body h2, body h3, body h4,
body .ed-display, body .ed-h2, body .section-title, body .hero h1,
body .field-title, body .case-quote, body .case-result-num,
body .proof-num, body .calc-result-num, body .stat-value, body .num,
body .zahl-karte .wert, body .finale h2, body .pullquote blockquote {
  font-family: var(--font-display);
  letter-spacing: -0.038em;
  font-weight: 600;
}

body h1, body .hero h1, body .ed-display {
  line-height: 0.98;
  letter-spacing: -0.045em;
}

body p, body li, body td, body dd {
  font-family: var(--font-body);
}

/* ---------- 4) Mikrolabels in Monospace ----------
   127 All-Caps-Label in gesperrtem Sans waren das lauteste
   Vorlagen-Signal der Seite. Monospace liest praezise statt marktschreierisch. */
body .section-label,
body .ed-kicker,
body .hero-kicker,
body .region-label,
body .ag-header .label,
body .proof-label,
body .cta-note,
body .ed-btn-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--oak-deep);
}

body .fields .section-label,
body .hero .section-label,
body .hero-kicker {
  color: var(--gold);
}

/* ---------- 5) Buttons: Kante statt Pille ---------- */
body .btn-primary, body .btn-secondary, body .btn-hero, body .btn-cta,
body .btn-cta-white, body .btn-download, body .ed-btn, body .calc-cta-btn,
body .cro-float-btn, body .cro-sticky-btn, body .cro-exit-submit,
body #site-nav .nav-cta, body #site-nav .nav-cta-dropdown {
  border-radius: 2px !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}

body .btn-primary, body .ed-btn, body .btn-cta, body .btn-hero,
body .calc-cta-btn, body .btn-download {
  background: var(--gold);
  color: #241701;
  border: 0;
  transition: transform .18s ease, background .18s ease;
}
body .btn-primary:hover, body .ed-btn:hover, body .btn-cta:hover,
body .btn-hero:hover, body .calc-cta-btn:hover, body .btn-download:hover {
  background: #F5B72E;
  color: #241701;
  transform: translateY(-2px);
}

/* Rahmenknopf: heller Rahmen nur auf dunklem Grund. Global gesetzt
   war er auf den Danke-Seiten weiss auf Weiss und damit unsichtbar. */
body .btn-secondary {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
body .btn-secondary:hover { background: var(--brand); color: #fff; }

body .hero .btn-secondary,
body .cta-section .btn-secondary,
body .finale .btn-secondary,
body .calc-box .btn-secondary {
  border-color: rgba(255,255,255,.34);
  color: #fff;
}
body .hero .btn-secondary:hover,
body .cta-section .btn-secondary:hover,
body .finale .btn-secondary:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ---------- 6) Hero der Unterseiten ----------
   Vorher: Navy-Flaeche + Sterne-Pille + zwei Pillen-Buttons auf
   28 Seiten identisch. Jetzt: Foto traegt, Text steht links,
   der Verlauf sichert den Kontrast. */
body .hero {
  position: relative;
  background: var(--brand-dark);
  overflow: hidden;
  isolation: isolate;
}

body .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-photo, none);
  background-size: cover;
  background-position: 50% 40%;
}

body .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Deckung gemessen, nicht geschaetzt: bei nur 60 % Deckung kam der
     Senf-Akzent auf der hellen Bueroswand rechnerisch auf 2,7:1 und lag
     damit unter dem Mindestwert. 74 % traegt auch das hellste Foto. */
  background: linear-gradient(180deg,
    rgba(6,27,24,.90) 0%,
    rgba(6,27,24,.74) 45%,
    rgba(6,27,24,.96) 100%);
}

body .hero .hero-inner { position: relative; }

body .hero h1 {
  color: #fff;
  font-size: clamp(38px, 6.4vw, 86px);
  font-weight: 500;
}
body .hero h1 span { color: var(--gold); }

body .hero .hero-sub {
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.65;
  max-width: 52ch;
}

/* Sterne-Pille aufloesen: aus dem Badge wird eine schlichte Zeile */
body .hero .hero-badge {
  display: block;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 4px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
}
body .hero .hero-badge svg { display: none; }

body .hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}

/* ---------- 7) Karten flach, Haarlinien statt Schatten ---------- */
/* .calc-box gehoert NICHT dazu: sie ist eine dunkle Rechenflaeche mit
   weisser Schrift. Als "Karte" behandelt wurde sie weiss — und der Text
   darin unsichtbar. */
body .service-card, body .benefit-card, body .review-card, body .zahl-karte,
body .fakt-box, body .leistung-karte, body .info-card,
body .vergleich-karte, body .ag-card {
  box-shadow: none !important;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--white);
}

body .section-gray, body .ed-section.alt {
  background: var(--paper-2);
}

/* ---------- 8) Icon-Kreise raus ----------
   44 bunte Icon-Kreise waren reine Vorlagen-Dekoration ohne Aussage. */
body .service-icon, body .benefit-icon {
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--oak);
  display: block;
  margin-bottom: 10px;
}

/* ---------- 9) FAQ: Linien statt Kaesten ---------- */
body .faq-item {
  background: none !important;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none !important;
}
body .faq-item:last-of-type { border-bottom: 1px solid var(--line); }
body .faq-q {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.025em;
  font-size: clamp(18px, 2vw, 22px);
}
body .faq-icon { color: var(--oak); }
body .faq-a { color: var(--muted); font-size: 17px; line-height: 1.7; }

/* ---------- 10) Abschluss-Sektion ---------- */
body .cta-section, body .finale {
  background: var(--brand);
  color: #fff;
  border-radius: 0;
}
body .cta-section h2, body .finale h2 { color: #fff; }
body .cta-section .cta-note, body .finale .finale-note {
  font-family: var(--font-mono);
  color: rgba(255,255,255,.62);
}

/* ---------- 11) Navigation ---------- */
body #site-nav {
  background: rgba(242,238,230,.94);
  border-bottom: 1px solid var(--line);
}
body #site-nav .nav-logo { font-family: var(--font-display); font-weight: 700; }
body #site-nav .nav-link { border-radius: 2px; color: var(--muted); }
body #site-nav .nav-link:hover, body #site-nav .nav-link.active {
  background: rgba(14,59,52,.07);
  color: var(--brand);
}
body #site-nav .nav-cta { background: var(--brand); color: #fff; }
body #site-nav .nav-cta:hover { background: var(--ink); }

/* ---------- 12) Footer ---------- */
body footer { background: var(--brand-dark); }

/* ---------- 13) Laufband ----------
   Ersetzt die Sterne-Pille als Beleg-Element. */
.ticker { background: var(--gold); overflow: hidden; padding: 13px 0; }
.ticker-row {
  display: flex; gap: 56px; white-space: nowrap; width: max-content;
  animation: ticker-slide 34s linear infinite;
}
.ticker-row span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: #241701; font-weight: 500;
}
@keyframes ticker-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 14) Kennzahlenband ---------- */
.statband { display: grid; grid-template-columns: repeat(4,1fr); background: var(--ink); }
.statband > div { padding: 32px clamp(18px,4vw,44px) 28px; border-right: 1px solid rgba(255,255,255,.16); }
.statband > div:last-child { border-right: 0; }
.statband .n {
  font-family: var(--font-display); font-size: clamp(28px,3.4vw,46px);
  font-weight: 500; color: #fff; letter-spacing: -.045em; line-height: 1; display: block;
}
.statband .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 11px; display: block;
}
@media (max-width: 760px) {
  .statband { grid-template-columns: repeat(2,1fr); }
  .statband > div { border-bottom: 1px solid rgba(255,255,255,.16); }
}

/* ---------- 15) Bewegung ----------
   Scroll-Reveal kommt aus ui-polish.js. Wer Bewegung reduziert
   haben will, bekommt sie nicht — inklusive Laufband. */
@media (prefers-reduced-motion: reduce) {
  .ticker-row { animation: none; }
  body .btn-primary:hover, body .ed-btn:hover { transform: none; }
}

/* ---------- 16) Hero-Foto in kleiner Fassung auf schmalen Schirmen ----------
   1600px-Datei waere auf dem Handy Verschwendung: 40 kB statt 20 kB,
   bei halber Anzeigebreite. */
@media (max-width: 900px) {
  :root { --hero-photo: url("office-main-hero-900.webp"); }
}

/* ---------- 17) Startseite ----------
   Die Startseite laeuft auf dem Editorial-Layout (ed-*) und hatte einen
   hellen Hero mit freigestelltem Portrait. Jetzt traegt das Raumfoto den
   Hero, wie im freigegebenen Entwurf — das Portrait steht weiter unten
   in "Ueber mich" und wuerde sich hier mit dem Raum ueberlagern. */
body .hero {
  background: transparent;
  border-bottom: 0;
  padding-top: clamp(120px, 15vh, 170px);
}
body .hero-grid { grid-template-columns: 1fr; }
body .hero-photo { display: none; }
body .hero-mobile-avatar { display: none !important; }

body .hero-kicker { color: var(--gold); }
body .hero-kicker::before { background: var(--gold); }
body .hero h1 em { color: var(--gold); }
body .hero-sub { color: rgba(255,255,255,.80); }
body .hero-soft {
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,0.62);
}
body .hero-soft:hover { color: var(--gold); border-color: var(--gold); }
body .hero-proofline { color: rgba(255,255,255,.78); }
body .hero-proofline .dot { color: rgba(255,255,255,0.62); }
body .hero-actions .ed-btn-note { color: rgba(255,255,255,0.62); }

/* Beleg-Leiste unter dem Hero */
body .proofbar { background: var(--ink); border-bottom: 0; }
body .proofbar .proof-num { color: #fff; }
body .proofbar .proof-label { color: rgba(255,255,255,0.62); }

/* ---------- 18) Zweitrangige Schaltflaechen ----------
   Auf dunklem Grund ein Rahmen statt einer zweiten Vollflaeche —
   damit bleibt pro Ansicht genau ein Senf-Knopf der Hauptweg. */
/* .btn-cta-secondary steht auf hellem Grund und bleibt gefuellt —
   als Rahmenknopf war er weiss auf Weiss. */
body .btn-cta-white {
  background: transparent;
  border: 1px solid rgba(255,255,255,.36);
  color: #fff;
}
body .btn-cta-white:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}

/* Runde Formen, die rund bleiben sollen: Avatare, Aufzaehlungspunkte */
body .hero-mobile-avatar img,
body .about-cred-icon,
body .dot-ag, body .dot-ggf, body .dot-ma {
  border-radius: 50%;
}

/* ---------- 19) Handy ----------
   Der Kicker war auf schmalen Schirmen ausgeblendet, weil dort der
   freigestellte Avatar stand. Der ist weg, also traegt der Kicker
   wieder die Einordnung. */
@media (max-width: 760px) {
  body .hero-kicker { display: inline-flex !important; }
  body .hero h1 { font-size: clamp(34px, 9.5vw, 46px); }
  body .hero-sub { font-size: 17px; }
  /* Auf hohen, schmalen Heroes rutscht der interessante Bildteil sonst
     aus dem Sichtfeld. */
  body .hero::before { background-position: 62% 38%; }
}

/* ---------- 20) Akzente in Ueberschriften ----------
   Auf hellem Grund war der Akzent ein Ocker (gemessen 5,5:1 auf Sand)
   und wirkte schlammig. Petrol kommt auf 10,7:1 und traegt die Aussage
   deutlich klarer. Senf bleibt dem dunklen Grund vorbehalten — auf Sand
   erreicht er nur 1,8:1 und ist als Text unbrauchbar. */
body .ed-h2 em,
body h2 em,
body .section-title em,
body .section-title span:not([style]),
body .ed-display em {
  font-style: normal;
  color: var(--brand);
}

/* Auf dunklen Flaechen bleibt der Akzent Senf.
   .fields gehoert NICHT dazu: die Leistungssektion der Startseite steht
   auf Sand, dort kam Senf auf 1,8:1 und war praktisch unlesbar. */
body .hero h1 em, body .hero h1 span,
body .finale h2 em, body .cta-section h2 em,
body .finale .ed-h2 em, body .cta-section .ed-h2 em {
  color: var(--gold);
}

/* ---------- 21) Kontraste nachgezogen ----------
   Gemessen auf der fertigen Seite, nicht geschaetzt. */

/* Bewertungssterne standen in Senf auf Sand bei 2,1:1 und verschwanden
   fast. Auf hellem Grund ein dunkleres Gold (4,6:1), auf dunklem Grund
   bleibt der helle Ton. */
body .stars,
body .quote-by .stars,
body .review-card .stars,
body .proof-item .stars,
body .voices .stars { color: var(--gold-deep) !important; }
body .hero .stars,
body .hero-proofline .stars,
body .finale .stars,
body .cta-section .stars,
body .fields .stars,
body footer .stars,
body .ticker .stars { color: var(--star) !important; }

/* Die Geisterziffern der Leistungsliste lagen bei 1,6:1 und waren
   praktisch unsichtbar. 3,3:1 haelt sie zurueckhaltend, aber lesbar. */
body .field-num { color: #8A8170; }

/* Alter kalter Grauton, der bei der Umstellung uebersehen wurde:
   2,5:1 auf Weiss. */
body [style*="9CA3AF"], body [style*="9ca3af"] { color: var(--muted) !important; }

/* .region-label steht auf hellem Grund — hier gilt der dunkle Ocker.
   (Erster Versuch mit Weiss lag bei 1,0:1: die Sektion ist hell, nicht dunkel.) */
body .region-label { color: var(--oak-deep); }

/* Aufklapper im Fussbereich lag mit 45 % Deckkraft bei 4,46:1. */
body .footer-more summary { color: rgba(255,255,255,.72); }

/* Die dunkle Rechenflaeche bleibt dunkel, nur die Rundung faellt weg. */
body .calc-box { border-radius: 2px; box-shadow: none; }

/* ---------- 22) Fussbereich ----------
   Der Fussbereich steht auf Petrol-Dunkel. Mehrere Stellen erbten
   dort die dunkle Fliesstextfarbe und kamen auf 2,5:1. */
body footer, body footer p, body footer span, body footer li,
body footer address, body footer time { color: rgba(255,255,255,.74); }
body footer a { color: rgba(255,255,255,.9); }
body footer a:hover { color: var(--gold); }
body footer strong, body footer b { color: #fff; }

/* ---------- 23) Bewertungssterne mit fester Farbe im style-Attribut ----------
   Die Sterne sind an vielen Stellen direkt im Markup eingefaerbt, wo
   keine Klasse greift. Auf hellem Grund kamen sie auf 2,4:1.
   Grundregel: dunkles Gold. Ausgenommen sind die dunklen Flaechen.
   Der Selektor prueft "color:" mit — sonst wuerde er auch Elemente
   treffen, die denselben Ton als Flaeche verwenden. */
body [style*="color:#E0991A"], body [style*="color: #E0991A"],
body [style*="color:#e0991a"], body [style*="color: #e0991a"] {
  color: var(--gold-deep) !important;
}
body .hero [style*="color:#E0991A"], body .hero [style*="color: #E0991A"],
body .cta-section [style*="color:#E0991A"], body .cta-section [style*="color: #E0991A"],
body .finale [style*="color:#E0991A"], body .finale [style*="color: #E0991A"],
body footer [style*="color:#E0991A"], body footer [style*="color: #E0991A"],
body .ticker [style*="color:#E0991A"],
body .calc-box [style*="color:#E0991A"],
body .hero [style*="color:#e0991a"], body footer [style*="color:#e0991a"],
/* Ratgeber-Teaser der Startseite: dunkler Petrol-Verlauf ohne eigene Klasse */
body [style*="linear-gradient(135deg,#12463E"] [style*="color:#E0991A"] {
  color: var(--star) !important;
}

/* Gefuellter Zweitknopf auf hellem Grund */
body .btn-cta-secondary {
  background: var(--brand);
  color: #fff;
  border: 0;
  box-shadow: none;
}
body .btn-cta-secondary:hover { background: var(--ink); color: #fff; }

/* Kennzahlen standen teils in Senf auf hellem Grund (2,2:1). */
body .stat-value, body .calc-value, body .kc-num {
  color: var(--brand);
}
body .hero .stat-value, body .calc-box .calc-value,
body .cta-section .stat-value, body .finale .stat-value { color: #fff; }

/* ---------- 24) Einzelfaelle aus der Messung ueber alle 41 Seiten ---------- */

/* --mint zeigt auf den hellen Goldton fuer dunkle Flaechen. Dort, wo das
   Label auf Sand steht, kam es auf 1,25:1. */
body .section-label-mint { color: var(--oak-deep); }
body .hero .section-label-mint,
body .cta-section .section-label-mint,
body .about-strip .section-label-mint { color: var(--gold); }

/* Kennzahl mit --yellow inline auf hellem Grund: 2,2:1 */
body .stat-value[style*="--yellow"],
body .stat-value[style*="--mint"] { color: var(--brand) !important; }

/* Trenner "oder" auf den Danke-Seiten lief in der Linienfarbe (1,9:1) */
body .divider { color: var(--muted); }

/* Ergebnis-Label: steht ueberwiegend auf hellen Feldern und erbt dort
   die Textfarbe. Ein pauschales Weiss brachte 1,04:1 — nur das eine
   dunkle Feld bekommt helle Schrift. */
body .calc-result[style*="7A5A0E"] .calc-result-label,
body .calc-result-gold .calc-result-label { color: rgba(255,255,255,.92); }

/* ============================================================
   25) Bedienbarkeit — gemessen auf allen 31 Seiten
   ============================================================ */

/* ---------- Eingabefelder ----------
   Unter 16px zoomt iOS beim Antippen automatisch hinein und wirft den
   Nutzer aus dem Layout. 61 Felder lagen bei 14px. Das hier ist das
   Sicherheitsnetz fuer alles, was spaeter dazukommt. */
body input:not([type="checkbox"]):not([type="radio"]),
body select,
body textarea {
  font-size: 16px;
  font-family: var(--font-body);
  min-height: 48px;
  border-radius: 2px;
}
body textarea { min-height: 96px; }

/* Fokus sichtbar und ruhig — nicht nur die Tastatur, auch der Blick
   braucht eine Antwort darauf, wo man gerade ist. */
body input:focus, body select:focus, body textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14,59,52,.14);
  outline: none;
}

/* ---------- Trefferflaechen ----------
   Die Einwilligung ist Pflichtfeld: eine 13px-Checkbox ist auf dem
   Handy schwer zu treffen und blockiert dann das Absenden. */
body input[type="checkbox"], body input[type="radio"] {
  width: 20px; height: 20px;
  min-height: 20px;
  accent-color: var(--brand);
  flex-shrink: 0;
  cursor: pointer;
}
body label:has(> input[type="checkbox"]),
body label[for] { cursor: pointer; }

/* Schliessen-Knoepfe waren teils unter 40px */
body .cro-float-close, body .cro-exit-close, body .nav-hamburger {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Schaltflaechen ---------- */
body .btn-primary, body .btn-secondary, body .btn-hero, body .btn-cta,
body .btn-cta-white, body .btn-cta-secondary, body .btn-download,
body .ed-btn, body .calc-cta-btn, body .cro-float-btn, body .cro-sticky-btn,
body .cro-exit-submit, body button[type="submit"], body .submit-btn {
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(14,59,52,.12);
}

/* ---------- Lesbarkeit ----------
   Fliesstext lief auf breiten Schirmen ueber 95 Zeichen pro Zeile.
   Ab etwa 75 Zeichen verliert das Auge beim Ruecksprung die Zeile. */
body .ed-section p:not([class]), body .about p, body .exp,
body .faq-a, body .field p, body .lede, body .hero-sub,
body .section-sub, body .about-text p {
  max-width: 72ch;
}

/* Die Regel oben traf nur Klassen der Startseite. Auf den Unterseiten
   liefen FAQ-Antworten (15 px in 860 px Breite) gemessen auf bis zu
   118 Zeichen pro Zeile, auf 20 Seiten mit 110 Antworten. Zentrierte
   Absaetze bleiben aussen vor: ihre eigene Breite (CTA 520-640 px) wuerde
   sonst ueberschrieben oder der Block aus der Mitte geschoben.
   60ch, nicht 72ch: In Schibsted Grotesk ist 1ch (die Ziffer 0) 0,61 em
   breit, ein deutsches Durchschnittszeichen nur 0,45 em. 72ch ergaben
   gemessen ~95 Zeichen pro Zeile, 60ch ergeben ~80.
   Karten (.fakt-box, .strategy-item, #ai-summary-Kurzantworten) bewusst
   nicht: dort blieb rechts ein leeres Drittel in der Box stehen. */
body .faq-list details > p { font-size: 16px; max-width: 60ch; }
/* /altersvorsorgedepot/: FAQ ohne .faq-list. Die Ortsseiten-FAQ sind
   weisse Kaesten (background im style) und bleiben deshalb aussen vor. */
body .section .container > div > details:not([style*="background"]) > p { max-width: 60ch; }
body .section .container > ul > li,
body .section .container > p:not([class]):not([style*="text-align"]) {
  max-width: 60ch;
}

/* Ueberschriften brechen gleichmaessiger um */
body h1, body h2, body h3, body .ed-display, body .ed-h2 {
  text-wrap: balance;
}
body p, body li { text-wrap: pretty; }

/* Zahlenkolonnen in Tabellen laufen sonst optisch auseinander */
body table td, body table th,
body .calc-result-value, body .case-result-num, body .proof-num {
  font-variant-numeric: tabular-nums;
}

/* ---------- 26) Ankunft am Formular ----------
   Nach dem Sprung ueber einen mitscrollenden Knopf soll ohne Nachdenken
   klar sein, wo man gelandet ist. */
body form.cro-ziel {
  animation: cro-ziel-puls 1.6s ease-out 1;
}
@keyframes cro-ziel-puls {
  0%   { box-shadow: 0 0 0 0 rgba(233,168,30,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(233,168,30,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,168,30,0); }
}
@media (prefers-reduced-motion: reduce) {
  body form.cro-ziel { animation: none; outline: 2px solid var(--gold); outline-offset: 4px; }
}

/* Sprungziele landen sonst unter der festen Leiste. ui-polish.css setzt
   84px; Formularsektionen brauchen etwas mehr Luft, damit die
   Ueberschrift darueber mitkommt. */
body section[id] > form, body form[id] { scroll-margin-top: 96px; }

/* ---------- 27) Fehlerhinweise am Feld ----------
   Vorher wurde ein unvollstaendiges Formular einfach abgeschickt und
   landete in einer Fehlerantwort — der Nutzer erfuhr nie, was fehlte. */
body .cro-feldfehler {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #B91C1C;
  font-family: var(--font-body);
}
body .cro-ungueltig {
  border-color: #B91C1C !important;
}
body .cro-ungueltig:focus {
  box-shadow: 0 0 0 3px rgba(185,28,28,.16) !important;
}

/* Meldung, wenn das Absenden scheitert */
body .cro-sendefehler {
  margin-top: 16px;
  padding: 14px 16px;
  background: #FCEFEF;
  border-left: 3px solid #B91C1C;
  font-size: 15px;
  line-height: 1.55;
  color: #6B1414;
}
body .cro-sendefehler a { color: #B91C1C; text-decoration: underline; }

/* ---------- 28) Inhaltsverzeichnis auf langen Seiten ----------
   Die Ratgeberseiten laufen ueber 10 bis 20 Bildschirmhoehen. Wer oben
   ankommt, sieht nicht, was noch kommt — und scrollt im Zweifel weg.
   Sechs Zeilen Orientierung, direkt unter der Autorenleiste. */
.seiten-toc {
  /* Mehrere Seiten setzen nav { position: fixed } fuer die Hauptleiste.
     Das traf dieses Verzeichnis mit und legte es ueber den Hero. */
  position: static;
  z-index: auto;
  height: auto;
  display: block;
  border-top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(24px, 3.5vw, 36px) clamp(20px, 5vw, 72px);
}
.seiten-toc-inner { max-width: 1100px; margin: 0 auto; }
.seiten-toc-titel {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--oak-deep); margin: 0 0 14px;
}
.seiten-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 28px;
}
.seiten-toc li { margin: 0; }
.seiten-toc a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--ink); font-size: 16px; line-height: 1.4;
  text-decoration: none;
  transition: color .18s ease, padding-left .25s cubic-bezier(.2,.8,.2,1);
}
.seiten-toc li:first-child a,
.seiten-toc li:nth-child(2) a { border-top: 0; }
.seiten-toc a:hover { color: var(--brand); padding-left: 6px; }
.seiten-toc .toc-nr {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--oak-deep); flex-shrink: 0;   /* --oak auf Papier: 2,48:1 */
}
@media (max-width: 700px) {
  .seiten-toc ul { grid-template-columns: 1fr; gap: 0; }
  .seiten-toc li:nth-child(2) a { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .seiten-toc a:hover { padding-left: 0; }
}

/* ---------- 29) Nachgemessen, 23.09.2026 ---------- */

/* Rechner-Felder: .calc-select hat hoehere Spezifitaet als "body select"
   (Klasse schlaegt zwei Elementnamen) und stand auf 14px. Unter 16px
   zoomt iOS beim Antippen hinein. */
body .calc-select, body .calc-input, body .bav-select,
body select.calc-select, body select.bav-select {
  font-size: 16px;
}

/* Die Navigationsleiste lief zwischen 1100 und 1300 px 13 px ueber den
   Rand: der Termin-Knopf passte nicht mehr neben die Links. */
body #site-nav { gap: 8px; }
body #site-nav .nav-links { flex-shrink: 1; min-width: 0; }
body #site-nav .nav-cta { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1320px) {
  body #site-nav .nav-link { padding: 8px 8px; font-size: 14px; }
}

/* ---------- 30) Zweiter Messlauf, 23.09.2026 ---------- */

/* Fliesstext in Karten stand bei 14px (Messung: ueber 150 Zeichen je
   Absatz auf 16 Seiten). Untergrenze fuer Fliesstext ist 15px. */
body :is(.benefit-card, .weg-card, .k-card, .problem-card, .process-card,
         .target-card, .vorteil-card, .checklist-card, .service-card,
         .klasse-card, .problem-content, .step-content, .placeholder-box,
         .bav-result-summary) p {
  font-size: 15px;
}

/* Rechner-Hinweise: 11px bei bis zu 300 Zeichen Modellannahmen. Rechtlich
   noetiger Text muss lesbar sein, nicht nur vorhanden. */
body .calc-note { font-size: 13px; }

/* ---------- 31) Dritter Messlauf, 23.09.2026 ---------- */

/* Tippziele: einzeilige FAQ-Fragen waren am Handy 34-37px hoch, die
   Rechner-Tabs auf /gold-silber/ 30px. Untergrenze ist 44px. Die FAQ-
   summaries sind Flex mit align-items:center, der Text bleibt mittig. */
body details:not(.footer-more) > summary { min-height: 44px; }
body .footer-more > summary { padding-block: 11px; }
body .calc-tab { min-height: 44px; }

/* ---------- 32) Vierter Messlauf, 23.09.2026 ---------- */

/* Kinder-Stepper in den Rechnern. Auf /ruerup-vs-altersvorsorgedepot/
   fehlte jede Regel: Browser-Standardknoepfe mit 12x19px und 13px
   Schrift — im Rechner der meistbesuchten Seite. Die vier anderen
   Rechnerseiten hatten 34px. Jetzt einheitlich 44px. */
body .calc-stepper { display: flex; align-items: center; gap: 12px; }
body .calc-stepper button {
  width: 44px; height: 44px;
  border-radius: var(--radius, 2px);
  border: 1.5px solid #EAE5DA;
  background: #fff;
  font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--brand);
  cursor: pointer;
  touch-action: manipulation;
}
body .calc-stepper button:hover { background: var(--brand-light); }
body .calc-stepper span {
  font-size: 18px; font-weight: 800; color: var(--brand);
  min-width: 24px; text-align: center;
}

/* Segment-Auswahl im Rechner (Angestellt / Selbststaendig): 36px hoch */
body .rvad-seg-btn { min-height: 44px; }

/* ---------- 33) Autorzeile im Hero, 24.09.2026 ----------
   Vorher ein eigenes helles Band zwischen Hero und Inhalt, auf 24
   Seiten — es brach den Uebergang vom Foto zum Text. Autor und Datum
   muessen sichtbar bleiben (E-E-A-T, Schema muss sichtbaren Inhalt
   abbilden), stehen jetzt aber als ruhige Zeile unten im Hero.
   Der Verlauf ist unten am dunkelsten (96 %), dort sitzt die Zeile. */
body .hero .hero-byline {
  margin: 28px 0 0;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}
body .hero .hero-byline strong { color: #fff; font-weight: 600; }
body .hero .hero-byline .sep { margin: 0 .45em; color: rgba(255,255,255,.62); }

/* ---------- 34) iPhone-Lesbarkeit, 27.09.2026 ----------
   Safari vergroessert im Querformat einzelne Textbloecke unterschiedlich
   stark ("Font Boosting"), die Proportionen kippen beim Drehen. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Satz-Text nicht unter 13 px — auf allen Breiten (Desktop-Lauf 27.09.2026:
   Einwilligungstexte 11 px auf 32 Seiten auch bei 1280 px). */
@media all {
  /* Satz-Text nicht unter 13 px. Gemessen bei 390 px: Einwilligungstexte
     11 px auf 23 Seiten, Footer 12 px auf 23 Seiten, Fussnoten 11-12 px.
     Nur Klassen, die dort tatsaechlich kleiner waren - eine Mindestgroesse
     kennt CSS nicht, eine Sammelregel wuerde groessere Texte verkleinern.
     Nachgemessen: .cta-note (16 px auf Unterseiten), .stat-label (15 px auf
     /privatkunden/), .form-note und Footer-Hinweise mit Inline-Groesse 15 px
     wurden zuerst VERKLEINERT - deshalb eingegrenzt bzw. entfernt. */
  body footer p:not([style*="font-size"]), body footer a:not([style*="font-size"]),
  body footer summary, body .footer-links a,
  body form label[style*="font-size:11px"], body form label[style*="font-size: 11px"],
  body form label[style*="font-size:11.5px"], body form label[style*="font-size:12px"],
  body form label[style*="font-size: 12px"], body form label[style*="font-size:12.5px"],
  body .overview-desc, body .bav-disclaimer, body .tbl-hint,
  body .story-disclaimer, body .calc-footnote, body .rechner-disclaimer,
  body .svsi-disclaimer, body .band-desc,
  body .voices-shots-note, body .blog-card-meta, body .review-date,
  body .drain-arrow, body .chart-subtitle, body .result-bar-label,
  body .tax-compare-label, body .story-stat-label, body .drain-main-label,
  body .rvad-tl-step-text {
    font-size: 13px !important;
  }
  body form label a, body .svsi-disclaimer a { font-size: inherit !important; }
}

@media (max-width: 700px) {
  /* Labels, Badges und Kicker in Grossbuchstaben nicht unter 12 px. */
  body .section-label, body .hero .hero-badge, body .seiten-toc-titel,
  body .mono-label, body .cta-page .cta-note, body div.cta-note,
  body .cta-box p.cta-note,
  body .target-card .tag, body .hero-kicker, body .ed-btn-note,
  body .proof-label, body .ed-kicker, body .region-label,
  body .badge-gut, body .badge-mittel, body .badge-schlecht, body .badge-plan,
  body .badge-stop, body .badge-neu, body .blog-card-badge, body .bu-badge,
  body .weg-badge, body .product-badge, body .k-tag, body .klasse-tag,
  body .rvsi-tag, body .rvad-tl-badge, body .highlight-box-label,
  body .fact-label, body .cta-contact-label, body .bav-rechner-label,
  body .para, body .drain-sub-label,
  body .result-item-label, body .svsi-top-label, body .slider-range span,
  body [style*="font-size:10.5px"], body [style*="font-size:11px"],
  body [style*="font-size: 11px"], body [style*="font-size:11.5px"] {
    font-size: 12px !important;
  }
}