/* ==========================================================================
   Propa — Report als Dokument
   Tinte auf Papier, Hairlines statt Kästen. Genau zwei Glasobjekte im ganzen
   Report: die Score-Karte in Kapitel 01 und das Finanzierungs-Instrument in
   Kapitel 08. Alles andere sind flache Absätze, Spalten und dünne Linien.

   Die Farb- und Schrifttokens kommen aus propa-brand.css. Die Namen aus der
   Gestaltungsvorgabe (--paper, --ink, --hair …) sind hier als Aliasse
   angelegt, damit es keine zweite Palette gibt.
   ========================================================================== */

:root {
  --paper: var(--propa-paper);
  --ink: var(--propa-ink);
  --ink2: var(--propa-ink-2);
  --ink3: var(--propa-ink-3);
  --ink4: var(--propa-ink-4);
  --red: var(--propa-red);
  --amber: var(--propa-amber);
  --amber-text: var(--propa-amber-text);
  --green: var(--propa-green);
  --forest: var(--propa-forest);
  --hair: rgba(44, 44, 42, 0.1);
  --hair-strong: rgba(44, 44, 42, 0.2);
  --font: var(--propa-font);
  --mono: var(--propa-mono);
  --rk-h: 60px;
}

* { box-sizing: border-box; }

body.report {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
body.report a { color: var(--forest); text-decoration: none; }
body.report a:hover { color: var(--ink); }
img, svg { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink4);
}

/* ---------- Kopfleiste ---------- */
.rk {
  position: sticky; top: 0; z-index: 40;
  height: var(--rk-h);
  background: rgba(239, 236, 228, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hair);
}
.rk__inner {
  max-width: 1200px; margin-inline: auto; padding-inline: 40px;
  height: var(--rk-h); display: flex; align-items: center; gap: 18px;
}
.rk__lockup { display: inline-flex; align-items: baseline; gap: 7px; flex: none; }
.rk__lockup .propa-logo { font-size: 20px; color: var(--ink); }
.rk__lockup span.rk__wort { font-size: 11px; font-weight: 500; color: var(--ink4); }
.rk__trenner { width: 1px; height: 20px; background: var(--hair); flex: none; }
.rk__meta { font-size: 13px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk__aktionen { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

.rbtn {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 99px;
  border: 1px solid rgba(44, 44, 42, 0.18); background: transparent; color: var(--ink);
}
.rbtn:hover { border-color: rgba(44, 44, 42, 0.32); }
.rbtn--primaer { background: var(--ink); color: var(--paper); border-color: transparent; }
.rbtn--primaer:hover { background: #3D3D3A; }
.rbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Seitengerüst ---------- */
.rl {
  max-width: 1200px; margin-inline: auto; padding: 0 40px 96px;
  display: grid; grid-template-columns: 224px 1fr; gap: 0 72px;
  align-items: start;
}
.rl__inhalt { max-width: 720px; min-width: 0; }

/* ---------- Kapitelleiste ---------- */
.rnav { position: sticky; top: 92px; padding-top: 64px; }
.rnav__titel { margin-bottom: 16px; }
.rnav__liste { display: flex; flex-direction: column; }
.rnav__liste a {
  display: grid; grid-template-columns: 5px 20px 1fr; gap: 9px;
  align-items: baseline; padding: 6px 0;
  font-size: 13px; font-weight: 400; color: var(--ink4); line-height: 1.35;
}
.rnav__liste a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); opacity: 0; transform: translateY(-2px);
  transition: opacity 0.2s ease;
}
.rnav__liste a.is-active { color: var(--ink); font-weight: 500; }
.rnav__liste a.is-active::before { opacity: 1; }
.rnav__liste a:hover { color: var(--ink2); }
.rnav__liste a span { font-size: 11px; color: var(--ink4); }
.rnav__liste a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

.rnav__anker {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair);
}
.rnav__anker .eyebrow { display: block; margin-bottom: 8px; }
.rnav__ankerwert { display: flex; align-items: baseline; gap: 8px; }
.rnav__zahl { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.rnav__wort { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- Kapitel ---------- */
.kap { padding: 64px 0 72px; border-top: 1px solid var(--hair); }
.kap:first-child { border-top: 0; }
.kap__nr { margin-bottom: 8px; }
/* Seitenkopf je Kapitel: Objekt · Stichtag · Modus · Szenario · Konfidenz
   (REPORT_SPEC §0). Bewusst leise — er ist Beleg, nicht Inhalt. */
.kap__seitenkopf {
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--ink4); line-height: 1.7;
}
.kap__seitenkopf b { font-weight: 400; color: var(--ink3); }
.kap h2 {
  margin: 0; font-size: 34px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.12; color: var(--ink);
}
.kap--auftakt h2 { font-size: 44px; }

/* Verdict: Punkt in Zonen-Flächenfarbe, Wort in Zonen-Textfarbe */
.kap__verdict { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; }
.kap__punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink); }
.kap__zone {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink3);
}
.zone--red .kap__punkt, .kap__punkt--red { background: var(--red); }
.zone--amber .kap__punkt, .kap__punkt--amber { background: var(--amber); }
.zone--green .kap__punkt, .kap__punkt--green { background: var(--green); }
.zone--forest .kap__punkt, .kap__punkt--forest { background: var(--forest); }
.kap__zone--red { color: #B03432; }
.kap__zone--amber { color: var(--amber-text); }
.kap__zone--green, .kap__zone--forest { color: var(--forest); }

.kap__lead {
  margin: 0 0 36px; font-size: 19px; font-weight: 500;
  line-height: 1.45; letter-spacing: -0.01em; color: var(--ink);
  text-wrap: pretty;
}
.kap--auftakt .kap__lead { font-size: 21px; }

.kap p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: var(--ink2); text-wrap: pretty; }
.kap p:last-child { margin-bottom: 0; }
.kap h3 {
  margin: 34px 0 14px; font-size: 15.5px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
}
.kap strong, .kap b { font-weight: 500; color: var(--ink); }

/* Befundzeile innerhalb eines Kapitels — gleiche Haltung wie der Lead,
   nur kleiner. Kein Randbalken, der Punkt trägt die Zone. */
.befund {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 17px; font-weight: 500; line-height: 1.45;
  letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 30px;
}
.befund::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); transform: translateY(-2px);
}

/* ---------- Score-Objekt (Glasobjekt 1 von 2) ----------
   Breite Anordnung: links Beschriftung und Zahl, rechts Skala und Meta.
   Die Skala selbst kommt aus derselben Komponente wie auf der Landingpage. */
.so { width: 100%; padding: 22px; margin-bottom: 36px; }
/* Die Farbfelder stammen aus der schmalen Karte und sitzen auf einer breiten
   Hülle sonst mittig statt in den Ecken. */
.so .propa-shell__wash--teal { width: 340px; height: 340px; top: -170px; right: -110px; }
.so .propa-shell__wash--amber { width: 280px; height: 280px; bottom: -150px; left: -90px; }
.so__glas { display: flex; align-items: center; gap: 32px; padding: 26px 30px; flex-wrap: wrap; }
.so__links { flex: none; display: flex; flex-direction: column; gap: 6px; }
.so__label { font-size: 13px; letter-spacing: 0.03em; color: var(--ink3); }
.so__zahl { font-size: 64px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.so__rechts { flex: 1 1 300px; min-width: 0; }
.so__meta {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(44, 44, 42, 0.1);
  font-size: 12px; color: var(--ink3);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.so__meta b { font-weight: 500; }
@media (max-width: 640px) { .so__glas { gap: 20px; padding: 22px; } .so__zahl { font-size: 52px; } }

/* ---------- Finanzierungs-Instrument (Glasobjekt 2 von 2) ---------- */
.fin { width: 100%; padding: 22px; margin-bottom: 26px; }
.fin__teal { width: 320px; height: 320px; top: -150px; left: -110px; right: auto; }
.fin__amber { width: 280px; height: 280px; bottom: -140px; right: -90px; left: auto; }
.fin__karten { position: relative; display: flex; gap: 14px; flex-wrap: wrap; }
.fin__param { flex: 1 1 320px; padding: 24px 26px 28px; }
.fin__ergebnis {
  flex: 1 1 260px; padding: 4px 26px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.fin__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.fin__kopftitel { font-size: 13px; color: var(--ink3); }
.fin__reset { padding: 5px 12px; font-size: 12px; }

.regler + .regler { margin-top: 22px; }
.regler__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.regler__label { font-size: 13.5px; color: var(--ink2); }
.regler__wert { font-size: 14px; font-weight: 500; }
.regler__skala { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink4); }

.fin__block { padding: 20px 0; }
.fin__block + .fin__block { border-top: 1px solid rgba(44, 44, 42, 0.1); }
.fin__k { font-size: 12px; color: var(--ink4); margin-bottom: 7px; }
.fin__v { font-size: 27px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.fin__n { font-size: 11.5px; color: var(--ink4); margin-top: 6px; }

/* ---------- Marktband unter dem Regler (REPORT_SPEC §4) ----------
   Das Band liegt hinter der Spur und ragt oben und unten hervor, damit es
   auch unter der gefüllten Tinte sichtbar bleibt. Grün ist hier eine
   Bewertung — deshalb die einzige Farbe im Element. */
.mb { position: relative; }
.mb__spur { position: absolute; left: 0; right: 0; top: 9px; height: 6px; pointer-events: none; }
.mb__band {
  position: absolute; top: -2px; height: 10px; border-radius: 5px;
  background: var(--green); opacity: 0.3;
}
.mb__komfort {
  position: absolute; top: -4px; width: 1px; height: 14px;
  background: var(--forest); opacity: 0.5;
}
/* Sitzt in der Lücke zwischen Regler-Beschriftung und Spur — sonst
   überlappt es den Labeltext. */
.mb__bandlabel {
  position: absolute; top: -16px; transform: translateX(-50%);
  font-size: 9.5px; color: var(--ink4); white-space: nowrap;
}
.regler { padding-top: 8px; }

.mb__hinweis {
  margin: 7px 0 0; font-size: 11.5px; line-height: 1.45;
  display: flex; gap: 7px; align-items: flex-start;
}
.mb__hinweis::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  margin-top: 5px; background: var(--forest);
}
.mb__hinweis { color: var(--forest); }
.mb__hinweis.ist-ausserhalb { color: var(--amber-text); }
.mb__hinweis.ist-ausserhalb::before { background: var(--amber); }

.beleihung { margin-top: 22px; }
.is-hidden { display: none !important; }

/* Nativer Regler. Der Knopf ist bewusst derselbe wie der Marker der Skala:
   weiß, Ink-Rand, Schatten. */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px;
  background: transparent; margin: 0; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px;
  background: linear-gradient(to right, var(--ink) var(--fill, 50%), rgba(44,44,42,0.12) var(--fill, 50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px;
  margin-top: -8px; border-radius: 50%; background: #FFF; border: 1.5px solid var(--ink);
  box-sizing: border-box; box-shadow: 0 2px 6px rgba(44,44,42,0.35); }
.range::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(44,44,42,0.12); }
.range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ink); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #FFF;
  border: 1.5px solid var(--ink); box-sizing: border-box; box-shadow: 0 2px 6px rgba(44,44,42,0.35); }
.range:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 99px; }

/* ---------- Visualisierungen ----------
   Charts sind SVG in voller Spaltenbreite. Sie tragen keine eigene Fläche —
   die Linien stehen direkt auf dem Papier. */
.viz { margin: 0 0 30px; }
.viz .chart { width: 100%; height: auto; }
.viz + .viz { margin-top: -12px; }

/* ---------- Kennzahlen-Trio ---------- */
.trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(44, 44, 42, 0.14);
  border-bottom: 1px solid rgba(44, 44, 42, 0.14);
  margin: 0 0 30px;
}
.trio > div { padding: 18px 0 20px; }
.trio > div + div { border-left: 1px solid var(--hair); padding-left: 22px; }
.trio__k { font-size: 12px; color: var(--ink4); margin-bottom: 8px; }
.trio__v { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.trio__v small { font-size: 15px; font-weight: 400; color: var(--ink4); letter-spacing: 0; }
.trio__n { font-size: 12px; color: var(--ink4); margin-top: 6px; }
.trio__n--gut { color: var(--forest); font-weight: 500; }
.trio__n--schlecht { color: #B03432; font-weight: 500; }
.wert--rot { color: #B03432; }
.wert--amber { color: var(--amber-text); }
.wert--gruen { color: var(--forest); }

/* ---------- Key-Value-Steckbrief ---------- */
.kv { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; margin-bottom: 30px; }
.kv__z {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
}
.kv__k { font-size: 13px; color: var(--ink3); }
/* Quellen-Tag je Steckbriefzeile (REPORT_SPEC §5.02) */
.kv__tag {
  margin-left: 8px; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink4);
}
/* Lange Werte umbrechen lassen, statt sie gegen die Kante zu drängen. */
.kv__v { font-size: 13.5px; font-weight: 500; text-align: right; max-width: 64%; overflow-wrap: anywhere; }
.kv__z--stark { border-bottom-color: var(--hair-strong); }
.kv__z--stark .kv__k, .kv__z--stark .kv__v { color: var(--ink); font-weight: 500; }

/* ---------- Tabellen ---------- */
.tab { margin-bottom: 30px; }
.tab__kopf, .tab__z {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px; gap: 16px; align-items: baseline;
}
.tab__kopf {
  padding-bottom: 10px; border-bottom: 1px solid var(--hair-strong);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink4);
}
.tab__z { padding: 13px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--ink2); }
.tab__z > :not(:first-child) { text-align: right; }
.tab__kopf > :not(:first-child) { text-align: right; }
.tab__z--summe { font-weight: 500; color: var(--ink); border-bottom: 0; }
.tab--zwei .tab__kopf, .tab--zwei .tab__z { grid-template-columns: minmax(0, 1fr) 130px; }
.tab--drei-breit .tab__kopf, .tab--drei-breit .tab__z { grid-template-columns: minmax(0, 1fr) 150px 120px; }
.tab--fuenf .tab__kopf, .tab--fuenf .tab__z { grid-template-columns: minmax(0, 1fr) 62px 110px 110px 62px; gap: 10px; }
.tab__sub { display: block; font-size: 11.5px; color: var(--ink4); margin-top: 3px; }
/* Eigenkapital-Szenarien: vier Spalten, die eingestellte Variante hervorgehoben */
[data-ek-szenarien] .tab__kopf, [data-ek-szenarien] .tab__z {
  grid-template-columns: minmax(0, 1fr) 110px 90px 118px; gap: 10px;
}
.tab__z--aktiv { color: var(--ink); font-weight: 500; }
.tab__z--aktiv > :first-child::after {
  content: "aktuell"; margin-left: 8px; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink4); font-weight: 400;
}
.hinweis--rot::before { background: var(--red); }

/* ---------- Hinweis „Was fehlt" ---------- */
.hinweis {
  display: flex; gap: 14px; align-items: flex-start;
  border-top: 1px solid var(--hair); padding-top: 18px; margin-bottom: 30px;
}
.hinweis::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); margin-top: 6px;
}
.hinweis p { font-size: 13.5px; line-height: 1.6; color: var(--ink3); margin: 0; }
.hinweis b { font-weight: 500; color: var(--ink); }

/* ---------- Fragenliste ---------- */
.fragen { list-style: none; margin: 0 0 30px; padding: 0; }
.fragen li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
  font-size: 14.5px; line-height: 1.55; color: var(--ink2);
}
.fragen li::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 3px;
  border-radius: 4px; border: 1.5px solid rgba(44, 44, 42, 0.25);
}

/* ---------- Fußnote ---------- */
.fussnote { font-size: 12px; line-height: 1.55; color: var(--ink4); margin-top: 30px; }

/* ---------- Responsiv ---------- */
@media (max-width: 980px) {
  .rl { grid-template-columns: 1fr; gap: 0; padding-inline: 24px; }
  .rnav { position: static; padding-top: 40px; }
  .rnav__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .rk__inner { padding-inline: 24px; }
  .rk__meta { display: none; }
}
@media (max-width: 640px) {
  .trio { grid-template-columns: 1fr; }
  .trio > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .kv { grid-template-columns: 1fr; }
  .tab__kopf, .tab__z { grid-template-columns: minmax(0, 1fr) 88px; }
  .tab__kopf > :nth-child(3), .tab__z > :nth-child(3) { display: none; }
  .rnav__liste { grid-template-columns: 1fr; }
  .kap h2 { font-size: 28px; }
  .kap--auftakt h2 { font-size: 34px; }
}

/* ---------- Dokumentabschluss ----------
   Kein Website-Footer: unter einem Kundenreport haben Marketinglinks nichts
   verloren. Auf die Textspalte ausgerichtet, damit die Fluchtlinie stimmt. */
.rfuss { border-top: 1px solid var(--hair); }
.rfuss__inner {
  max-width: 1200px; margin-inline: auto; padding: 30px 40px 64px;
  display: grid; grid-template-columns: 224px 1fr; gap: 0 72px;
}
.rfuss__block { grid-column: 2; max-width: 720px; }
.rfuss__marke { display: inline-flex; align-items: baseline; gap: 7px; }
.rfuss__marke .propa-logo { font-size: 18px; color: var(--ink); }
.rfuss__wort { font-size: 10px; font-weight: 500; color: var(--ink4); }
.rfuss__text {
  margin: 14px 0 0; font-size: 12px; line-height: 1.6;
  color: var(--ink4); max-width: 68ch;
}
.rfuss__meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 11.5px; color: var(--ink4);
}
.rfuss__link { color: var(--forest); }
@media (max-width: 980px) {
  .rfuss__inner { grid-template-columns: 1fr; padding-inline: 24px; }
  .rfuss__block { grid-column: 1; }
}

/* Nur im Druck sichtbar */
.nur-druck { display: none; }
.druckfuss { display: none; }

/* ---------- Druck ----------
   Glas druckt nicht: backdrop-filter wird von Druckertreibern unzuverlässig
   umgesetzt. Beide Glasobjekte werden zu Weiß mit feiner Linie, die Farbfelder
   verschwinden. Zonenfarben bleiben — sie tragen Bedeutung, und daneben steht
   ohnehin immer das Zonenwort. */
@media print {
  .rk, .rnav, .rbtn, .rfuss__link { display: none !important; }
  .rfuss__inner { display: block; padding: 20px 0 0; }
  .rl { display: block; max-width: none; padding: 0; }
  .rl__inhalt { max-width: none; }
  .kap { padding: 26px 0 30px; break-inside: auto; }
  .kap h2 { font-size: 22pt; }
  .kap--auftakt h2 { font-size: 28pt; }
  .kap__lead { font-size: 12pt; }
  .kap p { font-size: 10.5pt; line-height: 1.5; }
  body.report { background: #fff; font-size: 10.5pt; }

  .propa-glass, .propa-glass--secondary {
    background: #fff !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--hair) !important; box-shadow: none !important;
  }
  .propa-shell { box-shadow: none; border: 1px solid var(--hair); }
  .propa-shell__wash { display: none !important; }

  /* Regler haben im PDF keine Funktion — stattdessen die Wertetabelle. */
  .fin__param { display: none !important; }
  .fin__karten { display: block; }
  .nur-druck { display: block !important; }

  .druckfuss {
    display: block; position: fixed; bottom: 0; left: 0; right: 0;
    font-size: 9pt; color: var(--ink4); padding-bottom: 6mm;
  }

  .trio, .so, .fin, .hinweis, .befund { break-inside: avoid; }
  .tab__z, .fragen li { break-inside: avoid; }
  .kap h2, .kap h3 { break-after: avoid; }
}

/* ---------- Weiterverweis am Kapitelende (REPORT_SPEC §3 Regel 5) ---------- */
.kap__weiter {
  margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 13px; color: var(--ink4); letter-spacing: -0.005em;
}

/* ---------- Gates vor dem Score (REPORT_SPEC §5.01) ---------- */
.gates {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--hair);
}
.gate { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; color: var(--ink2); }
.gate::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); transform: translateY(-1px);
}
.gate--offen::before { background: var(--amber); }
.gate--zu::before { background: var(--red); }
.gate b { font-weight: 500; color: var(--ink); }
.gate span { color: var(--ink4); font-size: 12.5px; }

/* ---------- Kapitel-Untertitel (Kap. 05) ---------- */
.kap__unter {
  margin: 8px 0 0 !important; font-size: 15px !important; color: var(--ink4) !important;
}
/* ---------- Quellenzeile unter einem Visual ---------- */
.quelle {
  margin: -12px 0 30px !important; font-family: var(--mono);
  font-size: 9.5px !important; letter-spacing: 0.05em; color: var(--ink4) !important;
  line-height: 1.7 !important;
}
/* ---------- Aufklappbare Modell-Erklärung (REPORT_SPEC §3.2) ---------- */
.modell { margin: 0 0 30px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.modell > summary {
  cursor: pointer; list-style: none; padding: 15px 0;
  font-size: 13.5px; color: var(--ink3); display: flex; align-items: baseline; gap: 9px;
}
.modell > summary::-webkit-details-marker { display: none; }
.modell > summary::before { content: "+"; font-family: var(--mono); font-size: 13px; color: var(--ink4); }
.modell[open] > summary::before { content: "−"; }
.modell > summary:hover { color: var(--ink); }
.modell > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.modell[open] > summary { border-bottom: 1px solid var(--hair); }
.modell > :not(summary) { margin-top: 22px; }
/* Im Druck ist nichts aufklappbar — die Erklärung steht dann vollständig da. */
@media print { .modell > :not(summary) { display: block !important; } }

/* ---------- Fragen nach Empfänger gruppiert (REPORT_SPEC §5.12) ---------- */
.kap h4 {
  margin: 26px 0 10px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink4); font-weight: 400;
}
/* Grüne Variante der Befundzeile — für Vermögensaufbau, nicht für Warnungen. */
.befund--gruen::before { background: var(--forest); }

/* Beim Export sind die Regler eingefroren: Das PDF zeigt einen festen Stand,
   also darf die Bildschirmfassung in diesem Moment nicht bedienbar wirken. */
.ist-eingefroren .range input { pointer-events: none; }

/* ==========================================================================
   Bezahlschranke — gesperrter Report
   Das Gerüst bleibt sichtbar (Kapitelleiste, Nummern, Überschriften), damit
   der Leser sieht, was er bekommt. Die Zahlen liegen im gesperrten Zustand
   nicht im DOM, sondern werden erst nach Freischaltung nachgeladen.
   ========================================================================== */

/* Dritte Spalte für die Kaufleiste, nur im gesperrten Zustand. */
body.ist-gesperrt .rl {
  max-width: 1380px;
  grid-template-columns: 208px minmax(0, 1fr) 260px;
  gap: 0 56px;
}
@media (max-width: 1280px) {
  body.ist-gesperrt .rl { max-width: 1200px; grid-template-columns: 208px minmax(0, 1fr); }
  .kaufleiste { grid-column: 2; position: static !important; margin-top: 40px; }
}
@media (max-width: 900px) {
  body.ist-gesperrt .rl { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Skelett hinter dem Glas ---------- */
.zu { position: relative; padding: 4px 0 8px; }
.zu__skelett { display: flex; flex-direction: column; gap: 11px; }
.zu__zeile { height: 11px; border-radius: 3px; background: rgba(44, 44, 42, 0.09); }
.zu__block { height: 132px; border-radius: 6px; background: rgba(44, 44, 42, 0.07); margin-top: 8px; }
.zu__gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.zu__gitter div { height: 62px; border-radius: 6px; background: rgba(44, 44, 42, 0.07); }

/* Die Glasscheibe darüber. Dieselbe Optik wie die beiden Glasobjekte des
   Reports, nur ohne Farbfelder — sie verdeckt, sie präsentiert nicht. */
.zu__glas {
  position: absolute; inset: -6px -10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 12px;
  background: rgba(239, 236, 228, 0.55);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  font-size: 13px; color: var(--ink3);
}
.zu__glas svg { flex: none; opacity: 0.55; }
.zu__glas button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--forest); text-decoration: underline; text-underline-offset: 3px;
}
.zu__glas button:hover { color: var(--ink); }

/* ---------- Freischalt-Block in Kapitel 01 ---------- */
.frei {
  position: relative; margin: 34px 0 0; padding: 30px 32px;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42));
  border: 1px solid rgba(44, 44, 42, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.frei__wash {
  position: absolute; border-radius: 50%; filter: blur(46px); opacity: 0.5; pointer-events: none;
  width: 300px; height: 300px; top: -180px; right: -90px; background: var(--propa-teal-wash, #cfe6dd);
}
.frei__inhalt { position: relative; }
.frei__t { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); }
.frei__s { font-size: 14.5px; line-height: 1.6; color: var(--ink2); margin: 0 0 18px; max-width: 46ch; }
.frei__liste { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 22px; padding: 0; list-style: none; }
.frei__liste li { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--ink3); }
.frei__liste li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--forest); flex: none; }
.frei__reihe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.frei__preis { font-size: 13px; color: var(--ink4); }

/* ---------- Kaufleiste rechts ----------
   Schlank und sticky. Eine dauerhaft sichtbare Preistafel neben einem
   Dokument wird zum Banner, das der Leser ausblendet — deshalb steht hier
   nur ein Preis, alles Weitere klappt auf. */
.kaufleiste { position: sticky; top: 92px; padding-top: 64px; }
.kauf {
  border: 1px solid var(--hair-strong); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.5);
}
.kauf__kopf { padding: 16px 18px 14px; border-bottom: 1px solid var(--hair); }
.kauf__eyebrow { display: block; margin-bottom: 8px; }
.kauf__preis { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.kauf__note { display: block; margin-top: 7px; font-size: 12px; color: var(--ink4); line-height: 1.5; }
.kauf__optionen { display: flex; flex-direction: column; }
.opt {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline;
  width: 100%; text-align: left; padding: 13px 18px; cursor: pointer;
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--hair);
  font: inherit; color: var(--ink2);
  transition: background-color 0.14s ease, color 0.14s ease;
}
.opt:last-of-type { border-bottom: 0; }
.opt__name { font-size: 14px; font-weight: 500; color: var(--ink); }
.opt__preis { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.opt__note { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink4); }
.opt__flag {
  margin-left: 8px; padding: 1px 7px; border-radius: 99px; background: var(--forest); color: #fff;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
}
/* Beim Überfahren wird die Option zur Tinte — das ist der Klickhinweis. */
.opt:hover, .opt:focus-visible { background: var(--ink); color: rgba(255,255,255,0.72); outline: none; }
.opt:hover .opt__name, .opt:hover .opt__preis,
.opt:focus-visible .opt__name, .opt:focus-visible .opt__preis { color: #fff; }
.opt:hover .opt__note, .opt:focus-visible .opt__note { color: rgba(255,255,255,0.6); }
.opt:hover .opt__flag, .opt:focus-visible .opt__flag { background: #fff; color: var(--ink); }
.kauf__fuss { padding: 13px 18px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--ink4); line-height: 1.55; }

.kaufleiste__guthaben {
  margin-top: 14px; padding: 13px 16px; border-radius: 12px;
  background: rgba(58, 106, 74, 0.09); font-size: 12.5px; color: var(--forest); line-height: 1.55;
}
.kaufleiste__guthaben button {
  appearance: none; border: 0; background: none; padding: 0; margin-top: 6px; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--forest); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Bestätigung nach dem Kauf ---------- */
.freigeschaltet {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 30px; padding: 13px 18px; border-radius: 10px;
  background: rgba(58, 106, 74, 0.1); color: var(--forest); font-size: 13.5px;
}
.freigeschaltet b { font-weight: 500; }

@media print { .kaufleiste, .frei, .zu, .freigeschaltet { display: none !important; } }

/* Teilbewertungen im Report: flach, mit Haarlinien — kein drittes Glasobjekt. */
.propa-subs-flach { margin: 0 0 34px; padding-top: 22px; border-top: 1px solid var(--hair); }
.propa-subs-flach .propa-subs__title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink4); margin-bottom: 14px;
}

/* Kartenausschnitt — das einzige Bildelement des Reports (REPORT_SPEC §3.2). */
.viz--karte img {
  width: 100%; height: auto; display: block;
  border-radius: 8px; border: 1px solid var(--hair);
}
.viz--karte figcaption {
  margin-top: 10px; font-size: 11.5px; color: var(--ink4); line-height: 1.55;
}
@media print { .viz--karte img { border-radius: 0; } }

/* ---------- Kartenausschnitt aus Rasterkacheln ---------- */
.karte {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--hair); background: #EFECE4;
  max-width: 100%; margin-inline: auto;
}
.karte__flaeche { position: absolute; inset: 0; filter: saturate(0.28) contrast(0.94) brightness(1.03); }
.karte__flaeche img { position: absolute; display: block; }
/* Derselbe Marker wie in der Wortmarke: Ring mit Punkt. */
.karte__pin {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #fff; border: 4px solid var(--ink);
  box-shadow: 0 0 0 12px rgba(44, 44, 42, 0.1);
}
.karte__pin::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink);
}
@media print { .karte { break-inside: avoid; } }