/* ==========================================================================
   subpages.css — Styles für die Unterseiten
   (finanzierung.html, impressum.html, datenschutz.html …)

   ZUSTÄNDIGKEIT: Diese Datei gehört dem Unterseiten-Chat.
   styles.css gehört dem Hauptseiten-Chat und wird hier NICHT verändert.

   Wird NACH styles.css eingebunden und überschreibt dort, wo nötig.
   Bewusst eigenständig: Falls styles.css zurückgesetzt wird, sehen die
   Unterseiten trotzdem korrekt aus.
   ========================================================================== */

/* ---------- Utility-Farben (Bonnfinanz CI 2.2) ----------
   Nur semantisch verwenden, nie dekorativ.
   Warning-Gelb ist bewusst durch das Marken-Gold ersetzt. */
:root{
  --success:      #83D774;
  --success-ink:  #3F8A33;   /* dunkler – für Text und Druck auf Weiß */
  --error:        #EB2747;
  --error-ink:    #B02237;
  --info:         #6DA9B5;
}

/* ---------- Breadcrumb (kompakt im Hero) ---------- */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.8rem; color:var(--muted); margin-bottom:18px;
}
.breadcrumb a{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--muted); text-decoration:none; transition:color .18s ease;
}
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb a svg{ width:14px; height:14px; flex:none; }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb .current{ color:var(--blue); font-weight:600; }

/* ---------- Hero der Unterseiten: volle Breite ---------- */
.page-hero{ padding: clamp(36px,5vw,60px) 0 clamp(20px,3vw,32px); }
.page-hero h1{ max-width:none; }
.page-hero .lead{ max-width:72ch; }

/* ---------- Dreier-Vergleich (Hausbank · Portal · ich) ---------- */
.compare--3{ grid-template-columns:1fr 1fr 1.12fr; gap:20px; }
@media (max-width:980px){ .compare--3{ grid-template-columns:1fr; } }
.compare--3 .compare-col{ padding:28px 24px; }
.compare--3 .compare-list li{ font-size:.93rem; }
.compare-col .sub{
  display:block; font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.compare-col.solution .sub{ color:var(--teal); }
.compare-col.solution{ border-top:4px solid var(--gold); }
.compare-col.solution .mk{ color:var(--gold-light); }

/* ---------- Gold-Akzente (auch unabhängig von styles.css) ---------- */
.trust-item svg{ color:var(--gold); }
.stars{ color:var(--gold); }
.service-card{ border-top-color:var(--gold); }
.service-card:hover{ border-top-color:var(--blue); }
.faq summary::after{ color:var(--gold); }
.principle:hover .ico{ background:var(--gold); }
.principle:hover .ico svg{ color:var(--blue-900); }
.step:hover .n{ background:var(--gold); color:var(--blue-900); }
.contact-tile:hover{ border-color:var(--gold); }
.contact-tile:hover .ico{ background:var(--gold); }
.contact-tile:hover .ico svg{ color:var(--blue-900); }
.btn--primary:hover{ border-color:var(--gold); }
.site-footer{ border-top:3px solid var(--gold); }
.site-footer a:hover{ color:var(--gold-light); }

/* ==========================================================================
   HERO DER UNTERSEITEN — zweispaltig (12.07.2026)
   Vorher stand der Text allein in einer Spalte, die rechte Bildschirmhälfte
   blieb leer. Rechts steht jetzt der Leitfaden als Karte: ein Bild, ein
   zweiter Handlungsaufruf — Substanz statt Dekoration.
   ========================================================================== */
.hero-split{
  display: grid; grid-template-columns: 1.5fr 0.85fr; gap: 48px; align-items: start;
}
@media (max-width: 980px){
  .hero-split{ grid-template-columns: 1fr; gap: 36px; }
}
.hero-main{ min-width: 0; }
.hero-aside{ min-width: 0; }

.guide-card{
  background: #fff; border: 1px solid var(--line-soft);
  border-top: 3px solid var(--gold); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.guide-card:hover{ transform: translateY(-3px); }
/* Das Cover ist hochkant (ca. 3:4). Vorher wurde es auf 16:10 beschnitten —
   sichtbar war nur der weiße Rand über dem Titel. Jetzt als Buchdeckel. */
.guide-cover{
  width: 132px; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
  display: block; margin-bottom: 18px; border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 28px -16px rgba(27,51,80,0.55);
}
.guide-body{ width: 100%; }
.guide-kicker{
  margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gold);
}
.guide-title{ font-size: 1.2rem; margin: 0 0 14px; }
.guide-list{ list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.guide-list li{
  display: flex; gap: 9px; align-items: flex-start; text-align: left;
  font-size: 0.9rem; line-height: 1.45; color: var(--text);
}
.guide-list svg{ width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--teal-mid); }
.guide-body .btn{ width: 100%; justify-content: center; }
.guide-note{ margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; }

@media (min-width: 981px){
  .hero-aside{ position: sticky; top: 100px; }
}
@media print{ .hero-aside{ display: none; } }

/* ---------- Kleingedrucktes: Pflichthinweis sichtbar, Details einen Klick tiefer ----------
   Regel (seit 17.07.2026, siehe DESIGN-UND-CI.md Abschnitt „Kleingedrucktes"):
   Rechtlich Notwendiges (keine Anlageberatung/Beitragszusage, Stand, „ohne Gewähr")
   bleibt IMMER sichtbar. Nur Annahmen, Rechenparameter und Quellenlisten wandern in
   <details class="src-more">. Niemals kleiner setzen als .73rem (WCAG AA).           */
.calc-disclaimer p, .facts-src p{ max-width:none; margin:0; }
.src-more{ margin-top:7px; }
.src-more summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px;
  color:var(--blue); font-weight:600; }
.src-more summary::-webkit-details-marker{ display:none; }
.src-more summary::after{ content:"+"; color:var(--gold); font-weight:700; font-size:1.05rem; line-height:1; }
.src-more[open] summary::after{ content:"–"; }
.src-more summary:hover{ color:var(--blue-900); }
.src-more p{ margin-top:9px; }

/* ---------- Abschnitts-Aufklapper: Teaser sichtbar, Vertiefung auf Klick ----------
   <details class="reveal"> mit <summary>: Eyebrow, H2 und Lead bleiben stehen, der Rest
   liegt hinter der Leiste <span class="reveal-more">.
   Dieser Block gehoert ZENTRAL hierher, nicht in die <style>-Bloecke der Seiten. Er stand
   bis 18.07.2026 nur inline in vermoegen.html, weshalb die Aufklapper auf absicherung.html
   und altersvorsorge.html ungestylt live waren (nackter Browser-Pfeil).
   Die Leiste ist WEISS mit Rahmen, nicht getoent: Die Abschnitte wechseln zwischen weiss,
   --surface und --teal-tint; eine getoente Leiste waere auf --teal-tint unsichtbar
   (vermoegen.html #gold liegt genau dort).
   Merke: Mini-CTAs stehen ausserhalb des <details>, sonst verschwinden Conversion-Punkte.
   Den Druck-Handler in main.js dabei nicht vergessen (details.src-more, details.reveal). */
.reveal > summary{ cursor:pointer; list-style:none; display:block; }
.reveal > summary::-webkit-details-marker{ display:none; }
.reveal > summary > .lead{ margin-bottom:0; }
.reveal-more{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; margin-top:28px; padding:16px 20px;
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  color:var(--blue); font-family:var(--display); font-weight:700;
  font-size:clamp(1.02rem,1.8vw,1.18rem);
  transition:border-color .2s ease, color .2s ease; }
/* sagt, WAS drinsteht: der eigentliche Grund zu klicken */
.reveal-sub{ display:block; margin-top:4px;
  font-family:var(--body); font-weight:400; font-size:.83rem; color:var(--muted); }
/* das „+" als gefuellter Kreis: signalisiert klickbar, nicht nur dekoratives Zeichen */
.reveal-more::after{ content:"+"; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--gold); border:1.5px solid var(--gold); color:#fff;
  font-family:var(--body); font-size:1.5rem; font-weight:700; line-height:1; padding-bottom:3px;
  transition:background .2s ease, color .2s ease; }
.reveal[open] > summary > .reveal-more::after{ content:"–"; }
.reveal[open] > summary{ margin-bottom:26px; }
.reveal > summary:hover .reveal-more,
.reveal > summary:focus-visible .reveal-more{ color:var(--blue-900); border-color:var(--gold); }
.reveal > summary:hover .reveal-more::after,
.reveal > summary:focus-visible .reveal-more::after{ background:var(--blue); border-color:var(--blue); }
.reveal > summary:focus-visible{ outline:none; }
@media (max-width: 560px){
  .reveal-more{ padding:14px 16px; }
  .reveal-more::after{ width:34px; height:34px; font-size:1.3rem; }
}

/* ==========================================================================
   RATGEBER „KAPITALANLAGE-IMMOBILIE" (21.07.2026) — alles unter .page-ki
   Die Muster stammen aus altersvorsorgedepot.html (dort inline). Hier stehen
   sie ZENTRAL und bewusst mit .page-ki gescopt, damit sie keine andere Seite
   anfassen: Die Vorlagen-Seite bringt weiterhin ihre eigene Inline-Kopie mit.
   ========================================================================== */

/* ---------- Abstände: dichter als global (styles.css bleibt unangetastet) ---------- */
.page-ki .section{ padding: clamp(40px, 5vw, 72px) 0; }
.page-ki .page-hero{ padding: clamp(30px, 4vw, 48px) 0 clamp(16px, 2vw, 24px); }
.page-ki .section h2{ margin-bottom: .35em; }
.page-ki .section .lead{ margin-bottom: 0; }
.page-ki .section .lead + .lead{ margin-top: .8em; }
.page-ki .grid{ margin-top: 32px !important; }

/* Sicherheitsnetz: kein Inline-SVG ohne Größe */
.page-ki .calc svg, .page-ki .gap-panel svg, .page-ki .mini-cta svg{ max-width:100%; height:auto; }
.page-ki .svc-item svg{ width:20px !important; height:20px !important; color:var(--blue); flex:none; margin-top:2px; }
.page-ki .mini-cta .btn svg{ width:18px !important; height:18px !important; }

/* ---------- Sprungleiste ---------- */
.page-ki .jump{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 0; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--line-soft); font-size:.88rem; }
.page-ki .jump-label{ font-weight:600; color:var(--ink); margin-right:14px; }
.page-ki .jump a{ color:var(--blue); font-weight:500; text-decoration:none; white-space:nowrap;
  padding:6px 0; border-bottom:1.5px solid transparent; transition:border-color .18s ease; }
.page-ki .jump a:hover{ border-bottom-color:var(--gold); }
.page-ki .jump a::after{ content:"·"; color:var(--line); margin:0 11px; font-weight:400; }
.page-ki .jump a:last-child::after{ content:none; }
@media(max-width:760px){
  .page-ki .jump{ font-size:.85rem; }
  .page-ki .jump-label{ width:100%; margin:0 0 4px; }
  .page-ki .jump a{ padding:8px 0; }
  .page-ki .jump a::after{ margin:0 8px; }
}

/* ---------- Fakten-Karte im Hero ---------- */
.page-ki .fact-card{
  background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
}
.page-ki .fact-card .guide-kicker{ margin:0 0 4px; }
.page-ki .fact-card h2{ font-size:1.2rem; margin:0 0 16px; }
.page-ki .fact-list{ list-style:none; margin:0; padding:0; }
.page-ki .fact-list li{ padding:13px 0; border-top:1px solid var(--line-soft); }
.page-ki .fact-list li:first-child{ border-top:0; padding-top:0; }
.page-ki .fact-list .fl-num{ display:block; font-family:var(--display); font-weight:700;
  font-size:1.55rem; line-height:1.1; color:var(--blue); font-variant-numeric:tabular-nums; }
.page-ki .fact-list .fl-lab{ display:block; font-size:.85rem; line-height:1.5; color:var(--muted); margin-top:3px; }
.page-ki .fact-src{ font-size:.72rem; line-height:1.5; color:var(--muted); margin:16px 0 0;
  padding-top:12px; border-top:1px solid var(--line-soft); }
.page-ki .fact-src a{ color:var(--muted); }
.page-ki .fact-src a:hover{ color:var(--blue); }

/* ---------- Mietrendite-Rechner ---------- */
.page-ki .calc{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; margin-top:28px;
  display:grid; grid-template-columns:1.15fr .85fr; }
@media(max-width:900px){ .page-ki .calc{ grid-template-columns:1fr; } }

.page-ki .calc-inputs{ padding:clamp(24px,3vw,36px); }
.page-ki .calc-inputs > .eyebrow{ margin-bottom:0; }
.page-ki .in-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-top:18px; }
@media(max-width:560px){ .page-ki .in-grid{ grid-template-columns:1fr; } }

.page-ki .calc-field{ margin-bottom:0; }
.page-ki .calc-field > label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:0.88rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.page-ki .calc-field .val{ color:var(--blue); font-variant-numeric:tabular-nums; }
.page-ki .calc-input{ position:relative; }
.page-ki .calc-input .suffix{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:0.95rem; pointer-events:none; }
.page-ki .calc-field input[type=number]{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 90px 12px 14px;
  font-family:var(--body); font-size:1rem; color:var(--ink); background:#fff; -moz-appearance:textfield;
}
.page-ki .calc-field input[type=number]:focus{ outline:2px solid var(--teal-mid); outline-offset:1px; border-color:var(--teal-mid); }
.page-ki .calc-field input[type=range]{ width:100%; accent-color:var(--blue); margin-top:4px; cursor:pointer; }
.page-ki .calc-hint{ font-size:0.8rem; line-height:1.45; color:var(--muted); margin:8px 0 0; }

/* Bundesland-Auswahl und Makler-Haken */
.page-ki .calc-select{ width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  font-family:var(--body); font-size:1rem; color:var(--ink); background:#fff; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C517F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px; }
.page-ki .calc-select:focus{ outline:2px solid var(--teal-mid); outline-offset:1px; border-color:var(--teal-mid); }
.page-ki .check{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; cursor:pointer;
  font-size:.85rem; font-weight:500; color:var(--text); }
.page-ki .check input{ accent-color:var(--blue); width:17px; height:17px; flex:none; margin-top:1px; cursor:pointer; }

/* Finanzierungsteil: zweite Ebene, erst auf Wunsch (Muster: Steuerteil altersvorsorgedepot) */
.page-ki .fin{ margin-top:22px; border-top:1px solid var(--line-soft); }
.page-ki .fin > summary{ cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:16px 0 4px;
  font-size:.92rem; font-weight:600; color:var(--blue); }
.page-ki .fin > summary::-webkit-details-marker{ display:none; }
.page-ki .fin > summary::after{ content:"+"; color:var(--gold); font-weight:700; font-size:1.15rem; }
.page-ki .fin[open] > summary::after{ content:"–"; }
.page-ki .fin-tag{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 9px;
  margin-left:8px; white-space:nowrap; }
.page-ki .fin-body{ padding-top:14px; }

/* Monats-Block im blauen Panel: erscheint mit dem Finanzierungsteil */
.page-ki .panel-extra{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.18); }
.page-ki .panel-extra[hidden]{ display:none; }
.page-ki .pe-head{ font-size:.8rem; font-weight:600; color:#fff; margin:0 0 4px; }
.page-ki .pe-note{ font-size:.78rem; line-height:1.55; color:rgba(255,255,255,0.6); margin:12px 0 0; }
.page-ki .fin-big{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3.5vw,2.2rem);
  line-height:1.1; margin:14px 0 0; font-variant-numeric:tabular-nums; color:#B6E8AC; }
.page-ki .fin-big--minus{ color:#F58C9C; }
/* Doppelte Klasse für die Spezifität: die Grundregel .page-ki .gap-big steht weiter unten */
.page-ki .gap-big.gap-big--minus{ color:#F58C9C; }
/* Die Monatszahl ist länger als eine Prozentzahl, deshalb eine Stufe kleiner */
.page-ki .gap-panel .gap-big{ font-size:clamp(2.2rem,4.5vw,3rem); }

/* Ergebnis-Panel: eine Zahl im Fokus */
.page-ki .gap-panel{ background:var(--blue); color:#fff; padding:clamp(24px,3vw,36px);
  display:flex; flex-direction:column; }
.page-ki .gap-panel .eyebrow{ color:var(--gold-light); margin-bottom:16px; }
.page-ki .gap-panel .eyebrow::before{ background:var(--gold-light); }
.page-ki .gap-sub{ font-size:.8rem; color:rgba(255,255,255,0.6); margin:0 0 8px; }
.page-ki .gap-big{ font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,5.5vw,3.6rem); line-height:1;
  margin:0; font-variant-numeric:tabular-nums; color:#B6E8AC; }
.page-ki .gap-label{ font-size:.85rem; color:rgba(255,255,255,0.66); margin:8px 0 0; }

.page-ki .gap-rows{ list-style:none; margin:20px 0 0; padding:0; }
.page-ki .gap-rows li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-top:1px solid rgba(255,255,255,0.12); font-size:.86rem; color:rgba(255,255,255,0.72); }
.page-ki .gap-rows strong{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }

.page-ki .gap-note{ display:flex; gap:9px; align-items:flex-start; margin:16px 0 0; padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.18); font-size:.85rem; line-height:1.5;
  color:rgba(255,255,255,0.85); }
.page-ki .gap-note svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--gold-light); }
.page-ki .gap-note b{ color:#fff; font-weight:600; }

.page-ki .gap-cta{ margin-top:auto; padding-top:22px; }
.page-ki .gap-cta-note{ font-size:.82rem; line-height:1.55; color:rgba(255,255,255,0.72); margin:0 0 14px; }
.page-ki .gap-cta .btn{ width:100%; justify-content:center; }
.page-ki .gap-cta-sub{ font-size:.76rem; color:rgba(255,255,255,0.5); margin:10px 0 0; text-align:center; }

/* Der einzige Handlungsaufruf in dieser Zone — Gold als Information: „hier entlang". */
.page-ki .btn--gold{
  background:var(--gold); border:1.5px solid var(--gold); color:var(--blue-900);
  font-weight:700; box-shadow:0 10px 26px -12px rgba(0,0,0,.55);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.page-ki .btn--gold:hover{
  background:var(--gold-light); border-color:var(--gold-light); color:var(--blue-900);
  transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
}
.page-ki .btn--gold svg{ width:18px !important; height:18px !important; color:var(--blue-900); }

.page-ki .calc-disclaimer{ max-width:none; font-size:0.73rem; line-height:1.55; color:var(--muted); margin:14px 0 0; }
.page-ki .calc-disclaimer a{ color:var(--muted); }
.page-ki .calc-disclaimer a:hover{ color:var(--blue); }

/* ---------- Kennzahlen-Kacheln ---------- */
.page-ki .svc-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
@media(max-width:860px){ .page-ki .svc-band{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .page-ki .svc-band{ grid-template-columns:1fr; } }
.page-ki .svc-item{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line-soft);
  border-radius:10px; padding:16px 18px; transition:border-color .2s ease, transform .2s ease; }
.page-ki .svc-item:hover{ border-color:var(--teal); transform:translateY(-2px); }
.page-ki .svc-item b{ display:block; font-family:var(--display); font-size:1.02rem; color:var(--blue);
  font-weight:700; line-height:1.25; margin-bottom:5px; }
.page-ki .svc-item span{ display:block; font-size:.85rem; line-height:1.55; color:var(--muted); }

/* ---------- Hinweiskasten im Fließtext ---------- */
.page-ki .ki-note{ max-width:none; font-size:.95rem; line-height:1.7; color:var(--text);
  background:var(--teal-tint); border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0; padding:clamp(16px,2.5vw,22px); margin:26px 0 0; }

/* ---------- Berater-Zitat mit Porträt ---------- */
.page-ki .advisor{ display:flex; gap:20px; align-items:flex-start; margin:30px 0 0;
  background:#fff; border:1px solid var(--line-soft); border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0; box-shadow:var(--shadow-sm);
  padding:22px 24px; }
@media(max-width:520px){ .page-ki .advisor{ flex-direction:column; gap:16px; } }
.page-ki .advisor picture{ flex:none; width:82px; height:82px; display:block; border-radius:50%; overflow:hidden; border:2px solid #fff; box-shadow:0 6px 18px -8px rgba(27,51,80,.5); }
.page-ki .advisor img{ width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:50%; display:block; }
.page-ki .advisor blockquote{ margin:0; font-family:var(--display); font-size:1.04rem; line-height:1.55;
  color:var(--ink); font-weight:600; }
.page-ki .advisor figcaption{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft);
  font-size:.82rem; }
.page-ki .advisor figcaption b{ color:var(--blue); font-weight:600; }
.page-ki .advisor figcaption span{ display:block; color:var(--muted); margin-top:1px; }

/* ---------- Wer passt / wer nicht: zwei Listen ---------- */
.page-ki .who{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,28px); margin-top:30px; }
@media(max-width:820px){ .page-ki .who{ grid-template-columns:1fr; } }
.page-ki .who-col{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:clamp(22px,3vw,30px); }
.page-ki .who-col--yes{ border-top:3px solid var(--gold); }
.page-ki .who-col--no{ border-top:3px solid var(--line); }
.page-ki .who-col h3{ font-size:1.2rem; margin:0 0 4px; }
.page-ki .who-col > p{ font-size:.9rem; color:var(--muted); margin:0 0 16px; }
.page-ki .who-col ul{ list-style:none; margin:0; padding:0; }
.page-ki .who-col li{ display:flex; gap:11px; align-items:flex-start; padding:11px 0;
  border-top:1px solid var(--line-soft); font-size:.93rem; line-height:1.6; color:var(--text); }
.page-ki .who-col li b{ color:var(--ink); font-weight:600; }
.page-ki .who-col li svg{ width:17px; height:17px; flex:none; margin-top:4px; }
.page-ki .who-col--yes li svg{ color:var(--success-ink); }
.page-ki .who-col--no li svg{ color:var(--muted); }

/* ---------- Kleiner Handlungsaufruf mitten im Text ---------- */
.page-ki .mini-cta{ display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,36px);
  background:#fff; border:1px solid var(--line-soft); border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0; box-shadow:var(--shadow-sm);
  padding:clamp(20px,2.5vw,26px) clamp(22px,3vw,30px); margin-top:26px; }
@media(max-width:760px){ .page-ki .mini-cta{ flex-direction:column; align-items:flex-start; } }
.page-ki .mini-cta b{ display:block; font-family:var(--display); font-size:1.1rem; color:var(--blue);
  font-weight:700; margin-bottom:5px; }
.page-ki .mini-cta p{ font-size:.92rem; line-height:1.6; color:var(--text); margin:0; max-width:62ch; }
.page-ki .mini-cta .btn{ flex:none; }

/* ---------- Offene Punkte / Fragenkasten ---------- */
.page-ki .open-box{ background:var(--teal-tint); border-left:3px solid var(--gold); border-radius:0 8px 8px 0;
  padding:clamp(18px,2.5vw,24px); margin-top:28px; }
.page-ki .open-box b{ display:block; font-family:var(--display); font-size:1.05rem; color:var(--blue);
  font-weight:700; margin-bottom:8px; }
.page-ki .open-box ul{ margin:0; padding-left:20px; }
.page-ki .open-box li{ font-size:.92rem; line-height:1.65; color:var(--text); margin-bottom:6px; }
.page-ki .open-box li:last-child{ margin-bottom:0; }

/* ---------- Quellenangaben ---------- */
.page-ki .facts-src{ max-width:none; font-size:.73rem; line-height:1.55; color:var(--muted);
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.page-ki .facts-src a{ color:var(--muted); }
.page-ki .facts-src a:hover{ color:var(--blue); }

/* Lange Komposita („Instandhaltungsrücklage") sprengen sonst schmale Kästen */
@media(max-width:640px){
  .page-ki p, .page-ki .gap-label, .page-ki .calc-field > label, .page-ki .svc-item b,
  .page-ki .svc-item span, .page-ki .who-col li, .page-ki .who-col h3, .page-ki .open-box li,
  .page-ki .fl-lab, .page-ki .faq summary{
    overflow-wrap:break-word; hyphens:auto;
  }
  .page-ki h1, .page-ki h2, .page-ki h3{ hyphens:manual; overflow-wrap:break-word; }
  .page-ki .calc-field input[type=range]{ height:28px; }
}
@media(max-width:480px){
  .page-ki h1{ font-size:1.72rem; line-height:1.24; }
  .page-ki .section h2{ font-size:1.5rem; }
}

/* ---------- Skizze „Drei Kräfte": Haus oben, drei Beteiligte darunter ----------
   Bewusst HTML/CSS statt Bilddatei: bleibt auf jedem Display scharf, erbt die
   Schriften und braucht keine Fotolizenz. Ein Akzent in Gold, nicht drei Farben
   (DESIGN-UND-CI: Farbe muss informieren, nicht schmücken). */
.page-ki .lever-fig{ margin:38px 0 0; }
.page-ki .lf-haus{ text-align:center; }
.page-ki .lf-haus svg{ width:58px; height:58px; color:var(--gold); display:block; margin:0 auto 6px; }
.page-ki .lf-haus b{ display:block; font-family:var(--display); font-size:1.08rem; font-weight:700; color:var(--blue); }
.page-ki .lf-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
@media(max-width:760px){ .page-ki .lf-row{ grid-template-columns:1fr; gap:24px; } }
.page-ki .lf-box{ position:relative; display:block; background:#fff; border:1px solid var(--line-soft); border-radius:10px;
  padding:18px 18px 16px; text-align:center; box-shadow:var(--shadow-sm);
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.page-ki .lf-box > b{ display:block; font-family:var(--display); font-size:1rem; font-weight:700;
  color:var(--blue); margin-bottom:4px; transition:color .2s ease; }
.page-ki .lf-box > span:last-child{ display:block; font-size:.86rem; line-height:1.55; color:var(--muted); }
/* Der Pfeil zeigt vom Beteiligten hinauf zum Haus */
.page-ki .lf-pfeil{ position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent;
  border-bottom:12px solid var(--gold); transition:transform .2s ease; }
/* Hover sagt: hier geht es weiter. Die Karte hebt sich zum Haus, der Pfeil geht mit. */
.page-ki .lf-box:hover, .page-ki .lf-box:focus-visible{
  border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow); }
.page-ki .lf-box:hover > b, .page-ki .lf-box:focus-visible > b{ color:var(--blue-900); }
.page-ki .lf-box:hover .lf-pfeil, .page-ki .lf-box:focus-visible .lf-pfeil{ transform:translateX(-50%) translateY(-3px); }
.page-ki .lf-box:focus-visible{ outline:2px solid var(--teal-mid); outline-offset:2px; }
.page-ki .lever-fig figcaption{ margin-top:16px; font-size:.8rem; line-height:1.55;
  color:var(--muted); text-align:center; }

/* ---------- Balken im Ergebnis-Panel: wohin der Mietmonat geht ---------- */
.page-ki .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.page-ki .mr-bar-wrap{ margin-top:16px; }
.page-ki .mr-bar-wrap[hidden]{ display:none; }
.page-ki .pe-bar{ display:flex; height:12px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.10); }
.page-ki .pe-seg{ display:block; height:100%; transition:width .25s ease; }
.page-ki .pe-seg--kosten{ background:#B4D6D4; }
.page-ki .pe-seg--rate{ background:rgba(255,255,255,.45); }
.page-ki .pe-seg--rest{ background:#B6E8AC; }
.page-ki .pe-seg--minus{ background:#F58C9C; }
.page-ki .pe-legend{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px; }
.page-ki .pe-legend li{ display:flex; align-items:center; gap:7px; font-size:.78rem; color:rgba(255,255,255,0.7); }
.page-ki .pe-i{ display:inline-block; width:11px; height:11px; border-radius:3px; flex:none; }
.page-ki .pe-i--kosten{ background:#B4D6D4; }
.page-ki .pe-i--rate{ background:rgba(255,255,255,.45); }
.page-ki .pe-i--rest{ background:#B6E8AC; }
.page-ki .pe-i--minus{ background:#F58C9C; }

/* Kurzes Aufblitzen der Ergebniszahlen, wenn eine Eingabe sie verändert */
@keyframes ki-blitz{
  0%{ text-shadow:0 0 0 rgba(217,189,134,0); }
  30%{ text-shadow:0 0 20px rgba(217,189,134,.85); }
  100%{ text-shadow:0 0 0 rgba(217,189,134,0); }
}
.page-ki .ki-blitz{ animation:ki-blitz .5s ease; }
@media (prefers-reduced-motion: reduce){ .page-ki .ki-blitz{ animation:none; } }

/* ---------- Zeitleiste „So läuft der Kauf ab" (Muster: altersvorsorgedepot) ---------- */
.page-ki .tl{ list-style:none; margin:30px 0 0; padding:0; position:relative; }
.page-ki .tl::before{ content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px;
  background:rgba(255,255,255,0.18); }
.page-ki .tl li{ position:relative; padding:0 0 26px 40px; }
.page-ki .tl li:last-child{ padding-bottom:0; }
.page-ki .tl-dot{ position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%;
  background:var(--blue-900); border:2px solid rgba(255,255,255,0.35); }
.page-ki .tl-date{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-light); margin-bottom:4px; }
.page-ki .tl-head{ display:block; font-family:var(--display); font-size:1.08rem; font-weight:700;
  color:#fff; margin-bottom:4px; }
.page-ki .tl-text{ display:block; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,0.76); max-width:70ch; }
@media(max-width:640px){
  .page-ki .tl-text, .page-ki .tl-head{ overflow-wrap:break-word; hyphens:auto; }
}

/* ---------- Lese-Guide: füllt die linke Spalte unter den Annahmen ---------- */
.page-ki .calc-read{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft); }
.page-ki .calc-read .cr-head{ font-size:.92rem; font-weight:600; color:var(--blue); margin:0 0 8px; }
.page-ki .calc-read ul{ list-style:none; margin:0; padding:0; }
.page-ki .calc-read li{ font-size:.85rem; line-height:1.6; color:var(--muted); padding:5px 0 5px 18px; position:relative; }
.page-ki .calc-read li::before{ content:""; position:absolute; left:0; top:.95em; width:8px; height:3px; border-radius:2px; background:var(--gold); }
.page-ki .calc-read b{ color:var(--ink); font-weight:600; }

/* ---------- Mitnehmen-Knopf und Nur-Druck-Blöcke (am Bildschirm unsichtbar) ---------- */
.page-ki .res-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.page-ki .res-head .eyebrow{ margin-bottom:0; }
.page-ki .print-chip{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.45); color:#fff;
  border-radius:999px; padding:10px 16px; min-height:44px; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.88rem; transition:all .18s ease;
}
.page-ki .print-chip svg{ width:17px !important; height:17px !important; flex:none; }
.page-ki .print-chip:hover{ background:var(--gold); border-color:var(--gold); color:var(--blue-900); transform:translateY(-1px); }
.page-ki .print-head{ display:none; }
.page-ki .print-foot{ display:none; }
.page-ki .print-vals{ display:none; }

/* ============================================================
   AUSDRUCK „Mitnehmen" — ein Blatt für das Gespräch, im
   Bonnfinanz-CI (Muster: altersvorsorgedepot.html). Gedruckt
   wird nur der Wohnungs-Check, nicht die ganze Seite.
   ============================================================ */
@media print{
  body.page-ki{ background:#fff !important; font-size:10pt;
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  body.page-ki .site-header, body.page-ki .site-footer, body.page-ki .floating-cta,
  body.page-ki .breadcrumb, body.page-ki .jump, body.page-ki .btn-row,
  body.page-ki .calc-hint, body.page-ki .print-chip, body.page-ki .check,
  body.page-ki .calc-input, body.page-ki .calc-select,
  body.page-ki input[type=range], body.page-ki .fin, body.page-ki .gap-cta{ display:none !important; }
  /* Eigene Regel: In der Sammelliste oben ignorierte Chrome ausgerechnet diesen Selektor */
  body.page-ki label.check{ display:none !important; }
  /* Der Lese-Guide gehört nicht aufs Blatt: Dort steht das Ergebnis mit Einordnung */
  body.page-ki .calc-read{ display:none !important; }

  body.page-ki main > section{ display:none !important; }
  body.page-ki main > section#rechner{ display:block !important; padding:0 !important; background:#fff !important; }
  body.page-ki #rechner > .wrap{ padding:0 !important; max-width:none !important; }
  body.page-ki #rechner > .wrap > .eyebrow, body.page-ki #rechner > .wrap > h2,
  body.page-ki #rechner > .wrap > .lead{ display:none !important; }

  /* ---------- Briefkopf: CI-Verlauf True Blue → Jade Sky ---------- */
  .page-ki .print-head{ display:block !important; margin-bottom:14px; }
  .page-ki .print-head .ph-bar{ height:6px; margin-bottom:16px;
    background:linear-gradient(100deg,#2C517F 0%,#55759A 55%,#B4D6D4 100%) !important; }
  .page-ki .print-head .ph-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
  .page-ki .print-head .ph-brand{ font-family:var(--display); font-weight:700; font-size:15pt; color:#2C517F; line-height:1.1; }
  .page-ki .print-head .ph-brand span{ display:block; font-family:var(--body); font-size:6.5pt; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:#C2A15B; margin-top:3px; }
  .page-ki .print-head .ph-contact{ font-size:7.5pt; color:#4C5866; text-align:right; line-height:1.65; }
  .page-ki .print-head .ph-title{ font-family:var(--display); font-weight:700; font-size:13pt; color:#2C517F;
    margin-top:16px; padding-top:10px; border-top:1px solid #D8E1EA; }
  .page-ki .print-head .ph-meta{ font-size:7.5pt; color:#6E7A86; margin-top:2px; }

  /* ---------- Ihre Angaben: als Zeilen, nicht als Formular ---------- */
  .page-ki .calc{ display:block !important; box-shadow:none !important; border:0 !important; margin:0 !important;
    border-radius:0 !important; overflow:visible !important; }
  .page-ki .calc-inputs{ padding:0 !important; margin-bottom:14px !important; }
  .page-ki .calc-inputs > .eyebrow{ display:none !important; }
  .page-ki .calc-inputs::before{ content:"Ihre Angaben"; display:block; font-size:7pt; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:#C2A15B; margin-bottom:7px; }
  .page-ki .print-vals{ display:block !important; font-size:8.5pt !important; font-weight:600 !important;
    color:#2C517F !important; margin:0 0 7px !important; }
  .page-ki .in-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important;
    gap:6px 14px !important; margin:0 !important; background:#F5F8FA !important;
    border-left:2px solid #B4D6D4 !important; padding:10px 12px !important; }
  .page-ki .calc-field{ display:flex !important; justify-content:space-between !important; align-items:baseline !important;
    gap:8px; margin:0 !important; border-bottom:1px dotted #D8E1EA; padding-bottom:3px; }
  .page-ki .calc-field > label{ display:flex !important; font-size:7.5pt !important; font-weight:400 !important;
    color:#6E7A86 !important; margin:0 !important; }
  .page-ki .calc-field .val{ display:inline !important; color:#2C517F !important; font-weight:600 !important;
    font-size:8.5pt !important; }

  /* ---------- Das Ergebnis: als Kasten, die Monatszahl groß.
       Stresstest und Vergleichsblock stehen im Druck nebeneinander,
       damit das Blatt einseitig bleibt. ---------- */
  .page-ki .res-head{ margin:0 0 6px !important; }
  .page-ki .gap-panel{ display:grid !important; grid-template-columns:1fr 1fr; column-gap:20px;
    background:#fff !important; color:#1E2A38 !important;
    border:1px solid #D8E1EA !important; border-left:4px solid #C2A15B !important;
    padding:10px 14px !important; page-break-inside:avoid; }
  .page-ki .gap-panel > .res-head, .page-ki .gap-panel > .gap-sub,
  .page-ki .gap-panel > .gap-big, .page-ki .gap-panel > .gap-label,
  .page-ki .gap-panel > .gap-rows, .page-ki .gap-panel > .gap-note{ grid-column:1 / -1; }
  .page-ki .gap-panel .eyebrow{ color:#C2A15B !important; font-size:7pt !important; margin:0 0 6px !important; }
  .page-ki .gap-panel .eyebrow::before{ background:#C2A15B !important; }
  .page-ki .gap-sub{ font-size:7.5pt !important; color:#6E7A86 !important; margin:0 0 4px !important; }
  .page-ki .gap-panel .gap-big{ font-size:20pt !important; color:#3F8A33 !important; margin-top:2px !important; }
  .page-ki .gap-big.gap-big--minus{ color:#B02237 !important; }
  .page-ki .gap-label{ font-size:8pt !important; color:#4C5866 !important; margin:3px 0 0 !important; }
  .page-ki .gap-rows{ margin:10px 0 0 !important; padding-top:4px !important; border-top:1px solid #D8E1EA !important; }
  .page-ki .gap-rows li{ border-top:1px solid #EDF1F5 !important; font-size:8pt !important; color:#4C5866 !important;
    padding:2.5px 0 !important; break-inside:avoid; }
  .page-ki .gap-rows li:first-child{ border-top:0 !important; }
  .page-ki .gap-rows strong{ color:#1E2A38 !important; }

  /* Balken auf Weiß: gleiche Aussage, druckfeste Farben */
  .page-ki .pe-bar{ background:#EDF1F5 !important; height:9px !important; }
  .page-ki .pe-seg--kosten{ background:#B4D6D4 !important; }
  .page-ki .pe-seg--rate{ background:#2C517F !important; }
  .page-ki .pe-seg--rest{ background:#3F8A33 !important; }
  .page-ki .pe-seg--minus{ background:#B02237 !important; }
  .page-ki .pe-legend li{ color:#4C5866 !important; font-size:7.5pt !important; }
  .page-ki .pe-i--kosten{ background:#B4D6D4 !important; }
  .page-ki .pe-i--rate{ background:#2C517F !important; }
  .page-ki .pe-i--rest{ background:#3F8A33 !important; }
  .page-ki .pe-i--minus{ background:#B02237 !important; }
  .page-ki .mr-bar-wrap{ margin-top:8px !important; }

  /* Stresstest und Vergleichsblock auf Weiß */
  .page-ki .panel-extra{ margin-top:7px !important; padding-top:7px !important;
    border-top:1px solid #D8E1EA !important; page-break-inside:avoid; }
  .page-ki .pe-head{ color:#2C517F !important; font-size:8.5pt !important; margin-bottom:4px !important; }
  .page-ki .fin-big{ font-size:13pt !important; color:#3F8A33 !important; margin-top:4px !important; }
  .page-ki .fin-big.fin-big--minus{ color:#B02237 !important; }
  .page-ki .pe-note{ color:#6E7A86 !important; font-size:6.5pt !important; margin-top:4px !important; }

  .page-ki .gap-note{ display:none !important; }

  /* ---------- Rechtlicher Hinweis ---------- */
  .page-ki .calc-disclaimer{ color:#8A949E !important; font-size:6.5pt !important; line-height:1.45 !important;
    margin-top:10px !important; padding-top:8px !important; border-top:1px solid #E7EDF3 !important; }

  /* ---------- Fußzeile mit QR-Code ---------- */
  .page-ki .print-foot{ display:block !important; margin-top:10px; page-break-inside:avoid; }
  .page-ki .print-foot .pf-cta{ background:#ECF5F4 !important; border-left:3px solid #C2A15B !important;
    padding:9px 12px; font-size:8pt; color:#1E2A38; line-height:1.55;
    display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .page-ki .print-foot .pf-text{ flex:1; }
  .page-ki .print-foot .pf-cta b{ color:#2C517F; }
  .page-ki .print-foot .pf-text b:first-child{ display:block; font-family:var(--display); font-size:11pt; margin-bottom:3px; }
  .page-ki .print-foot .pf-qr{ flex:none; text-align:center; }
  /* 24 mm: Der Buchungslink ergibt einen dichten Code (Version 7, 53 Module),
     kleiner gedruckt wird er fürs Handy schwer lesbar */
  .page-ki .print-foot .pf-qr img{ width:24mm; height:24mm; display:block; background:#fff !important; }
  .page-ki .print-foot .pf-qr span{ display:block; font-size:6pt; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:#2C517F; margin-top:3px; }
  .page-ki .print-foot .pf-legal{ font-size:6.5pt; color:#8A949E; line-height:1.5; margin-top:8px;
    border-top:1px solid #E7EDF3; padding-top:6px; }

  body.page-ki a[href]::after{ content:none !important; }
}

/* ==========================================================================
   FUNNEL „EINKOMMENSABSICHERUNG" (04.08.2026) — alles unter .page-ea
   Drei versteckte Seiten: einkommensabsicherung.html, -danke.html,
   -bestaetigt.html. Du-Form per CI-Freigabe vom 03.08.2026 (Briefing
   Abschnitt 13). Zentral hier, nicht inline (Briefing Abschnitt 7).
   ========================================================================== */

/* Engere Abschnittsabstände als das globale Raster (Entscheidung Lukas
   05.08.2026): Fast der ganze Traffic ist mobil, jeder gesparte Zentimeter
   bringt das Formular näher. Muster: .page-ki auf der Kapitalanlage-Seite. */
.page-ea .section{ padding: clamp(40px, 5vw, 72px) 0; }

/* ---------- Kopfzeile: nur Marke + ein Knopf zum Formular ----------
   Muster willkommen.html. Auf schmalen Handys nur das Icon, sonst läuft der
   Knopf neben dem Logo über den Rand (Projektregel: kein Überlauf bei 320 px). */
.page-ea .header-cta{ padding:11px 22px; }
@media (max-width:480px){
  .page-ea .header-cta{ padding:11px; }
  .page-ea .header-cta__txt{ display:none; }
}
/* Die Marke ist hier bewusst kein Link: Auf eine bezahlte Seite gehört kein
   Ausgang zur Hauptseite, jeder Klick dorthin ist ein verlorener Werbe-Euro. */
.page-ea span.brand{ cursor:default; }

.page-ea .hero-kurz{ margin-top:14px; font-size:.85rem; color:var(--muted); }
.page-ea .ea-trust{ margin-top:22px; font-size:.85rem; color:var(--muted); }
.page-ea .ea-trust .stars{ color:var(--gold); margin-right:6px; }

/* ---------- Arbeitskraft-Rechner ---------- */
.page-ea .ea-calc{
  background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(24px,4vw,40px); margin-top:28px; max-width:680px;
}
.page-ea .ea-fields{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:620px){ .page-ea .ea-fields{ grid-template-columns:1fr; } }
.page-ea .ea-hint{ display:block; margin-top:6px; font-size:.78rem; color:var(--muted); min-height:1em; }
.page-ea .ea-result{ margin-top:10px; padding-top:20px; border-top:1px solid var(--line-soft); }
.page-ea .ea-empty{ margin:0; color:var(--muted); font-size:.95rem; }
.page-ea .ea-num{
  font-family:var(--display); font-weight:700; color:var(--blue);
  font-size:clamp(2.1rem,5vw,3rem); line-height:1.1; margin:0;
  font-variant-numeric:tabular-nums;
}
.page-ea .ea-satz{ margin:10px 0 0; max-width:none; color:var(--text); }

/* Hero mit Medienplatz: heute das E-Book-Cover, spaeter das Video
   (Konzept, Abschnitt 5, Punkte 3 und 4). */
.page-ea .ea-hero{ display:grid; grid-template-columns:minmax(0,1fr) 230px;
  gap:clamp(28px,5vw,64px); align-items:center; }
.page-ea .ea-hero-text{ min-width:0; }
.page-ea .ea-hero-media img{ display:block; width:100%; height:auto;
  border-radius:10px; box-shadow:var(--shadow); }
@media (max-width:760px){
  .page-ea .ea-hero{ grid-template-columns:1fr; }
  .page-ea .ea-hero-media{ margin-top:26px; }
  .page-ea .ea-hero-media img{ max-width:150px; }
}

/* Aufklapper „Annahmen anpassen": Rentenalter, Netto-Naeherung und
   Erwerbsminderungsrente, Muster Wohnungs-Check (kapitalanlage-immobilie.html). */
.page-ea .ea-annahmen{ margin:4px 0 20px; border:1px solid var(--line-soft);
  border-radius:10px; background:var(--surface); }
.page-ea .ea-annahmen summary{ cursor:pointer; list-style:none; display:flex;
  align-items:center; padding:12px 16px; font-size:.88rem; color:var(--text); }
.page-ea .ea-annahmen summary::-webkit-details-marker{ display:none; }
.page-ea .ea-annahmen summary::after{ content:"+"; margin-left:auto; color:var(--gold);
  font-weight:700; font-size:1.05rem; line-height:1; }
.page-ea .ea-annahmen[open] summary::after{ content:"–"; }
.page-ea .ea-tag{ display:inline-block; margin-left:8px; padding:2px 8px; flex:none;
  border-radius:999px; background:var(--teal-tint); color:var(--blue);
  font-size:.7rem; font-weight:600; }
.page-ea .ea-annahmen-body{ padding:2px 16px 14px; }
.page-ea .ea-fields--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .page-ea .ea-fields--3{ grid-template-columns:1fr; } }

/* Die vier Stufen des Ergebnisses: Lebenseinkommen, Ausfallkette, Luecke,
   Berufsschutz-Satz (Konzept, Abschnitt 1). */
.page-ea .ea-stufe-titel{ margin:26px 0 8px; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.page-ea .ea-stufe-titel::before{ content:""; display:inline-block; width:18px;
  height:2px; background:var(--gold); margin-right:8px; vertical-align:middle; }
.page-ea #ea-ausgabe .ea-stufe-titel:first-child{ margin-top:0; }
.page-ea .ea-stufen{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.page-ea .ea-stufen li{ display:grid; gap:2px; padding:10px 14px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px; }
.page-ea .ea-stufen li span{ font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.page-ea .ea-stufen li b{ font-size:.95rem; font-weight:600; color:var(--text); }
.page-ea .ea-stufen li small{ font-size:.75rem; color:var(--muted); }
/* Absturz-Balken: jede Stufe relativ zum heutigen Brutto (100 Prozent).
   Der letzte traegt die Warnfarbe der Luecke. */
.page-ea .ea-balken{ display:block; height:6px; margin-top:8px;
  border-radius:999px; background:var(--line-soft); overflow:hidden; }
/* Die Balken wachsen beim ersten Reinscrollen von null auf ihre Breite
   (Skript am Seitenende, 05.08.2026 abends). Der leichte Versatz laesst sie
   nacheinander fallen, statt gleichzeitig: Das ist die Aussage des
   Abschnitts. Bei spaeteren Eingaben laeuft dieselbe Ueberblendung, dort
   faellt der Versatz nicht auf. */
.page-ea .ea-balken i{ display:block; height:100%; border-radius:999px;
  background:var(--blue); transition:width .6s cubic-bezier(.22,.61,.36,1); }
.page-ea .ea-stufen li:nth-child(2) .ea-balken i{ transition-delay:.10s; }
.page-ea .ea-stufen li:nth-child(3) .ea-balken i{ transition-delay:.20s; }
.page-ea .ea-balken--warn i{ background:var(--error-ink); }
/* Wer Bewegung reduziert hat, bekommt die Balken sofort und ohne Versatz.
   Das Skript setzt die Breiten dann ebenfalls direkt. */
@media (prefers-reduced-motion: reduce){
  .page-ea .ea-balken i{ transition:none; }
  .page-ea .ea-stufen li .ea-balken i{ transition-delay:0s; }
}
/* Szenario-Wahl an der Luecke (Entscheidung Lukas 05.08.2026, abends):
   drei Chips fuer volle, halbe und keine Erwerbsminderungsrente, nach den
   Stunden-Baendern des § 43 SGB VI. Echte Radios fuer die Tastatur, die
   Kaestchen selbst sind unsichtbar. */
.page-ea .ea-szenario-frage{ margin:0 0 10px; font-size:.9rem; color:var(--text); max-width:none; }
.page-ea .ea-szenarien{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.page-ea .ea-chip{ position:relative; flex:1 1 150px; min-width:0; cursor:pointer; }
.page-ea .ea-chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.page-ea .ea-chip span{
  display:grid; gap:2px; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--line); background:#fff;
  font-size:.88rem; font-weight:600; color:var(--text); text-align:left;
}
.page-ea .ea-chip small{ font-size:.75rem; font-weight:400; color:var(--muted); }
.page-ea .ea-chip input:checked + span{ border-color:var(--blue); background:var(--teal-tint); }
.page-ea .ea-chip input:checked + span small{ color:var(--text); }
.page-ea .ea-chip input:focus-visible + span{ outline:2px solid var(--teal-mid); outline-offset:1px; }
@media (max-width:620px){ .page-ea .ea-chip{ flex:1 1 100%; } }

/* Die Luecke in CI-Rot (Entscheidung Lukas 05.08.2026): Sie ist die eine
   Warnzahl der Seite. Das Lebenseinkommen bleibt True Blue, es ist eine gute
   Zahl; der Kontrast Blau gegen Rot erzaehlt die Geschichte. */
.page-ea .ea-num--luecke{ font-size:clamp(1.7rem,4vw,2.3rem); color:var(--error-ink); }
.page-ea .ea-luecke-satz{ font-size:.88rem; color:var(--muted); }
/* Hinweis bei ueberdurchschnittlichem Einkommen: Die vorbelegte
   Durchschnittsrente unterschaetzt dann die echte Rente, die Luecke waere zu
   gross. Ehrlichkeit schlaegt Dramatik (§ 5 UWG). */
.page-ea .ea-em-hinweis{ margin:12px 0 0; padding:9px 12px; max-width:none;
  border-left:2px solid var(--gold); border-radius:0 8px 8px 0;
  background:var(--surface); font-size:.8rem; color:var(--muted); }
.page-ea .ea-berufsschutz{ margin:22px 0 0; padding:13px 16px; max-width:none;
  border-left:3px solid var(--gold); border-radius:0 8px 8px 0;
  background:var(--surface); font-size:.92rem; color:var(--text); }
/* Ein Ziel nach der Luecke: das Formular selbst. Ersetzt am 05.08.2026 abends
   die zwei gestapelten Knoepfe (PRUEFUNG-LANDINGPAGE.md, B2 und B3). Der Kasten
   hebt sich vom Rechner ab, ohne ihn zu ueberstrahlen: weisser Grund und
   Goldkante oben, wie bei allen Karten der Seite. Der Terminweg steht als
   ruhige Zeile darunter, nicht als Knopf daneben.
   .ea-cta-klein bleibt stehen, es wird noch an anderen Stellen benutzt. */
.page-ea .ea-cta-klein{ margin:8px 0 18px; font-size:.8rem; color:var(--muted); }
.page-ea .ea-calc-cta .ea-cta-klein:last-child{ margin-bottom:0; }
.page-ea .ea-minform{
  margin:26px 0 0; padding:clamp(20px,3.4vw,30px);
  background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.page-ea .ea-minform-titel{
  font-family:var(--display); font-weight:700; color:var(--blue);
  font-size:clamp(1.15rem,2.6vw,1.4rem); line-height:1.25; margin:0 0 8px; max-width:none;
}
.page-ea .ea-minform-satz{ margin:0; font-size:.92rem; color:var(--text); max-width:none; }
.page-ea .ea-minform .field{ margin-top:18px; }
/* Kuerzere Abstaende als im grossen Formular: Hier steht die Zahl direkt
   darueber, der Weg soll kurz wirken. */
.page-ea .ea-minform .consent{ margin:16px 0 8px; }
.page-ea .ea-minform .form-actions{ margin-top:18px; }
.page-ea .ea-minform .form-note{ margin-top:12px; }
.page-ea .ea-minform-termin{
  margin:16px 0 0; font-size:.82rem; line-height:1.55; color:var(--muted); max-width:none;
}
.page-ea .ea-minform-termin a{ color:var(--blue); }

/* Postfach-Wege auf der Danke-Seite (Pruefung, Punkt C1). Gewoehnliche Links,
   kein Dienst und kein Skript, deshalb ohne Einwilligungsfrage. */
.page-ea .ea-postfach-frage{ margin:16px 0 10px; font-size:.92rem; max-width:none; }
.page-ea .ea-postfach{ display:flex; flex-wrap:wrap; gap:8px; margin:0; max-width:none; }
.page-ea .ea-postfach a{
  display:inline-block; padding:7px 14px; border:1px solid var(--line);
  border-radius:999px; font-size:.85rem; color:var(--blue); text-decoration:none;
  background:var(--surface);
}
.page-ea .ea-postfach a:hover{ border-color:var(--blue); background:#fff; }
.page-ea .ea-postfach-hinweis{ margin:16px 0 0; font-size:.82rem; color:var(--muted); max-width:none; }
.page-ea .ea-postfach-hinweis a{ color:var(--blue); }
/* Pflichthinweis sichtbar, nie kleiner als .73rem (Hausregel Kleingedrucktes) */
.page-ea .ea-disclaimer{ max-width:none; font-size:.73rem; line-height:1.55; color:var(--muted); margin:18px 0 0; }
.page-ea .ea-quellen p{ font-size:.8rem; color:var(--muted); max-width:none; }
.page-ea .ea-quellen a{ color:var(--muted); }
.page-ea .ea-quellen a:hover{ color:var(--blue); }
.page-ea .ea-calc-cta{ margin-top:20px; }
.page-ea .ea-datenhinweis{ font-size:.85rem; color:var(--muted); }

/* ---------- Drei Dinge, die kaum jemand weiß ---------- */
.page-ea .ea-fakt{
  background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:clamp(20px,3vw,28px);
}
.page-ea .ea-fakt h3{ font-size:1.08rem; margin-bottom:10px; }
.page-ea .ea-fakt p{ font-size:.93rem; margin:0; max-width:none; }

/* ---------- E-Book-Karte ---------- */
.page-ea .ea-cover{
  width:min(210px,60vw); aspect-ratio:910/1287; object-fit:cover; display:block;
  margin:0 auto; border-radius:6px; border:1px solid var(--line);
  box-shadow:0 14px 28px -16px rgba(27,51,80,0.55);
}
.page-ea .ea-list{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px; }
.page-ea .ea-list li{ display:flex; gap:10px; align-items:flex-start;
  font-size:.95rem; line-height:1.55; color:var(--text); }
.page-ea .ea-list svg{ width:16px; height:16px; flex:none; margin-top:4px; color:var(--teal-mid); }

/* ---------- Autor ---------- */
.page-ea .ea-autor{
  width:min(240px,60vw); aspect-ratio:1/1; object-fit:cover; border-radius:50%;
  display:block; margin:0 auto; border:4px solid #fff;
  box-shadow:0 14px 30px -14px rgba(27,51,80,0.55);
}
.page-ea .ea-schluss{ font-family:var(--display); font-weight:600; color:var(--blue); }

/* ---------- Stimmen ---------- */
.page-ea .ea-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
@media (max-width:820px){ .page-ea .ea-quotes{ grid-template-columns:1fr; gap:16px; } }
.page-ea .ea-quotes blockquote{
  margin:0; background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px 22px;
  font-size:.93rem; line-height:1.6; color:var(--ink);
}
/* Namenszuordnung als eigene Zeile, ohne Gedankenstrich (Hinweis in der Copy) */
.page-ea .ea-quotes cite{ display:block; font-style:normal; font-size:.8rem;
  color:var(--muted); margin-top:10px; }
.page-ea .ea-quellenzeile{ margin-top:24px; font-size:.85rem; color:var(--muted); }

/* ---------- Formular (Muster willkommen.html, zentral statt inline) ---------- */
.page-ea .form-card{
  background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(24px,4vw,40px);
  max-width:680px; margin:40px auto 0;
}
.page-ea .consent{ display:flex; gap:12px; align-items:flex-start; margin:22px 0 8px; }
.page-ea .consent input{ width:19px; height:19px; flex:none; margin-top:2px; accent-color:var(--blue); }
.page-ea .consent label{
  font-size:.88rem; line-height:1.55; color:var(--text);
  text-transform:none; letter-spacing:0; font-weight:400; margin:0;
}
.page-ea .consent-hint{ font-size:.8rem; color:var(--muted); margin:0 0 0 31px; max-width:none; }
.page-ea .consent-hint a{ color:var(--blue); }
.page-ea .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.page-ea .form-actions{ margin-top:22px; }
.page-ea .form-actions .btn{ width:100%; justify-content:center; }
.page-ea .form-note{ margin:14px auto 0; font-size:.8rem; color:var(--muted); text-align:center; max-width:none; }
.page-ea .form-msg{
  display:none; margin-top:20px; padding:16px 18px; border-radius:10px;
  font-size:.92rem; line-height:1.55;
}
.page-ea .form-msg.is-on{ display:block; }
.page-ea .form-msg--err{ background:#FDF0F2; border:1px solid var(--error); color:var(--error-ink); }

/* Fehler direkt am Feld, statt auf einer eigenen Seite (05.08.2026, abends).
   Der Rahmen um den Einwilligungskasten liegt bewusst als `outline` aussen an
   und nicht als `border`: Ein Rahmen mit Innenabstand wuerde beim Einblenden
   die Schaltflaeche nach unten schieben, und ein springendes Formular ist
   genau das Gegenteil von dem, was der Umbau erreichen soll. */
.page-ea .field.is-fehler input{ border-color:var(--error); background:#FDF0F2; }
.page-ea .consent.is-fehler{ outline:2px solid var(--error); outline-offset:6px; border-radius:4px; }
.page-ea .consent.is-fehler input{ accent-color:var(--error); }
.page-ea .feld-fehler{
  display:none; margin:8px 0 0 31px; max-width:none;
  font-size:.85rem; line-height:1.5; font-weight:600; color:var(--error-ink);
}
.page-ea .field .feld-fehler{ margin-left:0; }
/* Abstand haelt die Meldung ausserhalb der `outline` des Kastens darueber. */
.page-ea .feld-fehler--consent{ margin-top:16px; }
.page-ea .feld-fehler.is-on{ display:block; }
.page-ea .ea-datenschutz{ max-width:680px; margin:18px auto 0; }
.page-ea .ea-datenschutz p{ font-size:.8rem; color:var(--muted); max-width:none; }

/* ---------- Danke- und Bestätigungsseite ---------- */
.page-ea .ea-card{
  background:#fff; border:1px solid var(--line-soft); border-top:3px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(26px,4vw,44px);
  max-width:640px; margin:0 auto;
}
.page-ea .ea-card .btn{ justify-content:center; }
/* Die Gesprächs-Box steht UNTER der Hauptsache und ist optisch leichter:
   getönt statt weiß, kein Goldrand, kleinere Schrift. Sie darf den
   Bestätigungsklick nicht überstrahlen (UEBERGABE-CODE-SITZUNG.md, Punkt 2). */
.page-ea .ea-chatbox{
  background:var(--teal-tint); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:clamp(20px,3vw,28px); max-width:640px; margin:22px auto 0;
}
.page-ea .ea-chatbox h2{ font-size:1.15rem; margin-bottom:8px; }
.page-ea .ea-chatbox p{ font-size:.92rem; margin:0 0 14px; max-width:none; }
.page-ea .ea-chatbox .btn svg{ width:18px; height:18px; }
/* WhatsApp und Bookings nebeneinander (Danke-Seite, bewusste Ausnahme von
   „ein Gespraechsweg je Oberflaeche", Konzept Abschnitt 4). */
.page-ea .ea-chat-knoepfe{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }

/* ---------- Fußzeile nach dem Muster der Hauptseite, ohne „Themen" ----------
   Nur auf der Landingpage; Danke- und Bestaetigungsseite behalten die schlanke
   ea-footer-Fassung darunter. */
.page-ea .ea-sitefooter{ margin-top:clamp(40px,6vw,72px); }
.page-ea .ea-sitefooter .footer-grid{ grid-template-columns:1.5fr 1.1fr; }
@media (max-width:600px){ .page-ea .ea-sitefooter .footer-grid{ grid-template-columns:1fr; } }
/* Die Wortmarke ist hier kein Link: kein Ausgang zur Hauptseite. */
.page-ea .ea-sitefooter .f-logo{ cursor:default; }
.page-ea .ea-sitefooter .ea-status{ color:rgba(255,255,255,0.62); font-size:.8rem; margin:0 0 10px; }
.page-ea .ea-sitefooter .ea-pflicht{ margin:0 0 20px; }
.page-ea .ea-sitefooter .ea-pflicht summary{ color:rgba(255,255,255,0.62); font-size:.8rem; }
.page-ea .ea-sitefooter .ea-pflicht p{ color:rgba(255,255,255,0.55); }

/* ---------- Sticky-CTA auf dem Handy ----------
   Erscheint per Skript erst nach beantworteter Einwilligungsfrage, damit die
   Leiste nie auf dem Consent-Banner liegt, der mobil ebenfalls unten sitzt. */
.page-ea .ea-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(16,42,67,.12);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
.page-ea .ea-sticky-inner{ display:flex; align-items:center;
  justify-content:space-between; gap:14px; max-width:520px; margin:0 auto; }
.page-ea .ea-sticky-txt{ font-size:.85rem; color:var(--muted); }
.page-ea .ea-sticky .btn{ padding:10px 20px; flex:none; }
@media (min-width:821px){ .page-ea .ea-sticky{ display:none !important; } }

/* ---------- Fußzeile: schlank, mit Pflichtangaben ---------- */
.page-ea .ea-footer{
  border-top:3px solid var(--gold); background:var(--surface);
  padding:clamp(28px,4vw,44px) 0; margin-top:clamp(40px,6vw,72px);
}
.page-ea .ea-footer p{ max-width:none; }
.page-ea .ea-status{ font-size:.85rem; color:var(--text); margin:0 0 8px; }
.page-ea .ea-foot-links{ font-size:.85rem; margin:0 0 8px; }
.page-ea .ea-foot-links a{ color:var(--blue); }
.page-ea .ea-foot-rating{ font-size:.8rem; color:var(--muted); margin:0 0 14px; }
.page-ea .ea-pflicht p{ font-size:.73rem; line-height:1.55; color:var(--muted); }

/* ---------- Klaro: an das CI angleichen ----------
   Umgebaut am 05.08.2026 nachts. Vorher stand der Dialog neben der Seite wie
   ein fremdes Fenster: eckige Karte ohne Schatten, zwei Trennlinien quer durch
   von Rand zu Rand, Klaros gruener Schalter, und aus den Einstellungen fuehrte
   kein Weg zur Datenschutzerklaerung.

   Unveraendert bleibt die Entscheidung aus consent-klaro-einbau.md: Ablehnen
   ist genauso gross, genauso sichtbar und genauso leicht erreichbar wie
   Zustimmen. Geaendert ist nur, wie der Dialog aussieht, nicht, wie schwer die
   Ablehnung faellt. Wer hier einen Knopf kleiner oder grauer macht, hebt die
   Einwilligung als solche auf (Art. 4 Nr. 11 DSGVO, „freiwillig").

   Alles mit !important, weil Klaro seine eigenen Regeln als <style> in den
   Kopf schreibt und damit gleich spezifisch ist. */
.klaro{
  font-family:var(--body);
  /* Klaro faerbt seine Schalter ueber eigene Variablen mit Ruecksprungwert
     (`var(--green1, #1a936f)`). Sie hier zu setzen ist sauberer, als jede
     einzelne Regel zu ueberschreiben, und wirkt auch auf das Banner. */
  --green1: var(--blue);
  --green2: var(--blue);
  --green3: var(--teal-mid);
  --white2: #D8DDE4;
  --white3: #ffffff;
}

/* ----- Banner unten (cookie-notice) ----- */
.klaro .cookie-notice{
  background:#fff !important; color:var(--text) !important;
  border:1px solid var(--line) !important; box-shadow:var(--shadow) !important;
  border-radius:var(--radius) !important;
}
.klaro .cookie-notice .cn-body p{ color:var(--text) !important; }
/* Klaro setzt den Fokus beim Einblenden selbst auf den Kasten. Chrome malt
   dafuer seinen schwarzen Standardring, und der sieht auf der Seite aus wie
   ein Darstellungsfehler (nachgemessen: 2 px rgb(16,16,16) rundum). Der Ring
   verschwindet nur dort, wo er niemandem hilft: Bei Bedienung ueber die
   Tastatur (`:focus-visible`) bleibt er stehen, in CI-Farbe. */
.klaro .cookie-notice:focus:not(:focus-visible),
.klaro .cookie-modal .cm-modal:focus:not(:focus-visible){ outline:none !important; }
.klaro .cookie-notice:focus-visible,
.klaro .cookie-modal .cm-modal:focus-visible{
  outline:2px solid var(--teal-mid) !important; outline-offset:3px !important;
}

/* ----- Dialog (cookie-modal) ----- */
.klaro .cookie-modal .cm-bg{ background:rgba(16,32,60,.55) !important; }
.klaro .cookie-modal .cm-modal.cm-klaro{
  background:#fff !important; color:var(--text) !important;
  max-width:620px !important;
  border-radius:var(--radius) !important;
  border-top:3px solid var(--gold) !important;
  box-shadow:0 30px 70px -20px rgba(16,32,60,.55) !important;
  overflow:hidden !important;
}
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal label,
.klaro .cookie-modal .cm-modal span{ color:var(--text) !important; }
.klaro a{ color:var(--blue) !important; }

/* Kopf */
.klaro .cookie-modal .cm-header{
  padding:30px 30px 22px !important;
  border-bottom:1px solid var(--line-soft) !important;
}
.klaro .cookie-modal .cm-header h1.title{
  font-family:var(--display) !important; color:var(--blue) !important;
  font-size:1.5rem !important; line-height:1.25 !important;
  margin:0 0 12px !important; padding-right:32px !important;
}
.klaro .cookie-modal .cm-header p{
  font-size:.9rem !important; line-height:1.6 !important;
  color:var(--muted) !important; margin:0 !important;
}
.klaro .cookie-modal .cm-header .hide{
  top:22px !important; right:22px !important; opacity:.55 !important;
}
.klaro .cookie-modal .cm-header .hide:hover{ opacity:1 !important; }
.klaro .cookie-modal .cm-header .hide svg line{ stroke:var(--blue) !important; }

/* Koerper: der Zweck als eigener Kasten statt als Streifen von Rand zu Rand */
.klaro .cookie-modal .cm-body{ padding:22px 30px 4px !important; }
.klaro .cookie-modal .cm-body ul{ padding:0 !important; margin:0 !important; }
.klaro .cookie-modal .cm-body ul.cm-purposes > li.cm-purpose{
  border:1px solid var(--line-soft) !important; border-radius:10px !important;
  /* Links bleiben Klaros 60 px stehen: Der Schalter liegt absolut auf dieser
     Flaeche. Wer den Innenabstand kuerzt, schiebt ihn ueber die Ueberschrift. */
  padding:16px 18px 16px 78px !important; margin:0 !important; list-style:none !important;
}
.klaro .cookie-modal .cm-body ul.cm-purposes > li.cm-purpose > .cm-list-label .cm-switch{
  left:18px !important; top:17px !important;
}
.klaro .cookie-modal .cm-body ul.cm-purposes li.cm-service{
  padding-left:60px !important; margin-top:12px !important;
}
.klaro .cookie-modal .cm-body ul.cm-purposes > li.cm-purpose + li.cm-purpose{
  margin-top:10px !important;
}
.klaro .cookie-modal .cm-list-label .cm-list-title{
  font-weight:600 !important; font-size:.95rem !important; color:var(--text) !important;
}
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-list-description span,
.klaro .cookie-modal p.purposes{
  font-size:.85rem !important; line-height:1.55 !important; color:var(--muted) !important;
}

/* Schalter: Klaros Gruen raus, True Blue rein. Aus ist ein ruhiges Grau, damit
   der Zustand auf einen Blick lesbar bleibt. */
.klaro .cookie-modal .cm-list-label .slider{
  background-color:#D8DDE4 !important; box-shadow:none !important;
}
.klaro .cookie-modal .cm-list-label .slider:before{ background-color:#fff !important; }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider{
  background-color:var(--blue) !important;
}
/* „half-checked" heisst bei Klaro: teils an, teils aus. Mit nur einem Dienst
   tritt der Fall nicht ein, die Regel steht trotzdem hier, damit ein zweiter
   Dienst spaeter nicht stillschweigend wie „an" aussieht. */
.klaro .cookie-modal .cm-list-input.half-checked:not(:checked) + .cm-list-label .slider{
  background-color:#D8DDE4 !important;
}
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider{
  outline:2px solid var(--teal-mid) !important; outline-offset:2px !important;
}

/* „1 Dienst" aufklappen: klein und ruhig, kein zweiter Handlungsaufruf */
.klaro .cookie-modal .cm-caret{ margin-top:6px !important; }
.klaro .cookie-modal .cm-caret a{
  font-size:.82rem !important; color:var(--muted) !important; text-decoration:none !important;
}
.klaro .cookie-modal .cm-caret a:hover{ color:var(--blue) !important; text-decoration:underline !important; }

/* Fuss */
.klaro .cookie-modal .cm-footer{
  padding:22px 30px 26px !important; border-top:1px solid var(--line-soft) !important;
  margin-top:22px !important;
}
.klaro .cookie-modal .cm-footer-buttons{
  display:flex !important; flex-wrap:wrap !important; gap:10px !important;
  justify-content:flex-end !important;
}
.klaro .cm-btn{
  border-radius:8px !important; padding:11px 16px !important; margin:0 !important;
  font-family:var(--body) !important; font-weight:600 !important; font-size:.9rem !important;
  background:#fff !important; color:var(--blue) !important;
  border:1.5px solid var(--blue) !important;
  transition:background-color .15s ease, color .15s ease !important;
}
.klaro .cm-btn:hover{ background:var(--blue) !important; color:#fff !important; }
.klaro .cm-btn.cm-btn-success, .klaro .cm-btn.cm-btn-accept-all{
  background:var(--blue) !important; color:#fff !important; border-color:var(--blue) !important;
}
/* „Auswahl speichern" steht zwischen Ablehnen und Zustimmen und ist die
   leisere Wahl: gleiche Groesse, aber nur Rahmen, damit nicht zwei gefuellte
   blaue Flaechen nebeneinander stehen. Steht der Knopf allein da (Aufruf ueber
   die Fusszeile, wenn schon entschieden wurde), ist er die einzige Handlung
   und deshalb wieder gefuellt. */
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):not(:only-child){
  background:#fff !important; color:var(--blue) !important;
}
.klaro .cookie-modal .cm-footer-buttons .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):not(:only-child):hover{
  background:var(--blue) !important; color:#fff !important;
}
.klaro .cookie-modal .cm-footer-buttons .cm-btn:only-child{
  background:var(--blue) !important; color:#fff !important;
}

/* Mobil: volle Leiste am unteren Rand statt kleiner Box links.
   Die Zielgruppe kommt vom Handy aus dem Instagram-Browser; unten ist dort der
   vertraute Ort und deutlich sichtbarer als die Klaro-Vorgabe. Die Seite wird
   NICHT blockiert, sie ist bezahlter Traffic. Beide Knoepfe bekommen dieselbe
   Breite, damit Ablehnen genauso leicht bleibt wie Zustimmen
   (consent-klaro-einbau.md). */
@media (max-width: 640px){
  .klaro .cookie-notice:not(.cookie-modal-notice){
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:100% !important;
    border-radius:0 !important; border-left:0 !important; border-right:0 !important;
    border-bottom:0 !important;
  }
  /* „Einzelheiten" auf eine eigene Zeile ueber die Knoepfe, sonst teilen sich
     drei Dinge eine Zeile und „Nicht einverstanden" bricht um, waehrend
     „Einverstanden" einzeilig bleibt. Ungleich lange Knoepfe sind genau das,
     was die Einwilligung angreifbar macht. */
  .klaro .cookie-notice .cn-ok{
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; gap:12px !important;
  }
  .klaro .cookie-notice .cn-learn-more{ text-align:left !important; }
  .klaro .cookie-notice .cn-buttons{ display:flex !important; gap:8px !important; }
  .klaro .cookie-notice .cn-buttons .cm-btn{
    flex:1 1 0 !important; margin:0 !important;
    padding:12px 6px !important; font-size:.85rem !important;
  }

  /* Im Dialog stehen bis zu drei Knoepfe. Nebeneinander werden sie auf dem
     Handy zu schmalen Streifen mit umgebrochener Schrift, deshalb
     untereinander und jeder ueber die volle Breite. Reihenfolge unveraendert:
     Ablehnen zuerst. */
  .klaro .cookie-modal .cm-modal.cm-klaro{
    width:calc(100% - 24px) !important; max-width:none !important;
    left:12px !important; right:12px !important;
  }
  .klaro .cookie-modal .cm-header{ padding:24px 22px 18px !important; }
  .klaro .cookie-modal .cm-body{ padding:18px 22px 4px !important; }
  .klaro .cookie-modal .cm-footer{ padding:18px 22px 22px !important; }
  .klaro .cookie-modal .cm-footer-buttons{ flex-direction:column !important; }
  .klaro .cookie-modal .cm-footer-buttons .cm-btn{ width:100% !important; }
}

/* poweredBy ist in der Konfiguration leer — Klaro zeigt dann „missing
   translation". Der Werbe-Link des Herstellers bleibt komplett aus. */
.klaro .cm-powered-by{ display:none !important; }