/* ==========================================================================
   Kundenportal im Werkbank-Stil — Kalkulation (#results)
   Nach Flavios Vorlage docs/kundenportal-vorlage/kalk-werkbank-theme.css, aufs Portal
   zugeschnitten: jede Regel beginnt mit :is(html.kpw,html.wb) #results (die Vorlage war eine eigene
   Seite im iframe), und alle festen DSJ-Farben sind durch die Tokens der Instanz ersetzt
   (--accent, --ink, --line, --gold …; Zwischentöne per color-mix daraus).
   Die Datei wird nur in kunde.php geladen — PDF, s.php und Partner-Bereich bleiben, wie sie sind.

   Außerhalb von #results stehen nur der Knopf „Annahmen anpassen“ (.kpk-fab) und seine
   Karten (.kpk-ann); beide baut kp-kalk.js und hängt sie an <body>.
   ========================================================================== */

/* ---------- Töne: alles aus dem Theme der Instanz abgeleitet ---------- */
:is(html.kpw,html.wb) #results,html.kpw .kpk-fab,html.kpw .kpk-ann{
  --wb-b:var(--accent);
  --wb-b-txt:var(--accent-dark,var(--accent));          /* Akzent als Schrift auf Weiß: der dunklere Ton trägt AA sicher */
  --wb-bs:var(--accent-soft);
  --wb-ink:var(--ink);
  --wb-on-ink:var(--surface,#fff);
  --kpk-card:var(--surface,#fff);
  --wb-ink2:color-mix(in srgb,var(--ink) 84%,var(--surface,#fff));
  --wb-mut:var(--ink-soft);
  --wb-faint:color-mix(in srgb,var(--ink-soft) 88%,var(--surface,#fff));   /* Vorlage #9AA0B8 — zu hell für AA */
  --wb-axis:color-mix(in srgb,var(--ink-soft) 80%,var(--ink));
  --wb-line:var(--line);
  --wb-grid:color-mix(in srgb,var(--line) 70%,var(--surface,#fff));
  --wb-track:color-mix(in srgb,var(--line) 88%,var(--ink-soft));
  --wb-edge:color-mix(in srgb,var(--line) 76%,var(--ink-soft));
  --wb-wash:color-mix(in srgb,var(--line) 38%,var(--surface,#fff));
  --wb-seg:color-mix(in srgb,var(--line) 75%,var(--surface,#fff));
  --wb-seg-2:color-mix(in srgb,var(--line) 92%,var(--ink-soft));
  --wb-side:color-mix(in srgb,var(--line) 80%,var(--bg));
  --wb-hatch:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--line) 16%,var(--surface,#fff)) 0 8px,color-mix(in srgb,var(--line) 32%,var(--surface,#fff)) 8px 16px);   /* 21.10.2026 zurückgenommen (Flavio: „etwas zu stark“), vorher 30 / 55 % */
  --wb-bronze:var(--gold,var(--accent-dark));
  --wb-bronze-txt:color-mix(in srgb,var(--wb-bronze) 52%,var(--ink));
  --wb-bronze-soft:color-mix(in srgb,var(--wb-bronze) 20%,var(--surface,#fff));
  --kpk-haken:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22%2F%3E%3C%2Fsvg%3E");
  --shadow-sm:none;--shadow-raised:none;
}

/* ---------- Typo-Skala ---------- */
:is(html.kpw,html.wb) #results{color:var(--wb-ink);-webkit-font-smoothing:antialiased;font-feature-settings:'tnum' 1;font-size:14.5px;font-family:var(--font-body)}
:is(html.kpw,html.wb) #results *,:is(html.kpw,html.wb) #results *::before,:is(html.kpw,html.wb) #results *::after{border-radius:0!important}
:is(html.kpw,html.wb) #results .wrap{max-width:none!important;padding-left:0!important;padding-right:0!important}
:is(html.kpw,html.wb) #results h2{font-family:var(--font-head)!important;font-size:22px!important;font-weight:700!important;letter-spacing:-.015em!important;color:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results h3,:is(html.kpw,html.wb) #results .rc-head strong,:is(html.kpw,html.wb) #results .details-card summary,:is(html.kpw,html.wb) #results .etf-head h3,:is(html.kpw,html.wb) #results .cf-head h3,:is(html.kpw,html.wb) #results .ms-head-title{font-family:var(--font-head)!important;font-size:17px!important;font-weight:700!important;letter-spacing:-.01em!important;color:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results .rc-head span,:is(html.kpw,html.wb) #results .cf-intro,:is(html.kpw,html.wb) #results .etf-desc,:is(html.kpw,html.wb) #results .ms-head-sub,:is(html.kpw,html.wb) #results .chart-card p,:is(html.kpw,html.wb) #results .table-card p{font-size:13.5px!important;color:var(--wb-mut)!important;line-height:1.5!important}
:is(html.kpw,html.wb) #results .rc-field-lbl,:is(html.kpw,html.wb) #results .kpi-row-label,:is(html.kpw,html.wb) #results .verdict-head-lbl,:is(html.kpw,html.wb) #results .vn-lbl,:is(html.kpw,html.wb) #results .wg-lbl,:is(html.kpw,html.wb) #results .cf-rowlabel,:is(html.kpw,html.wb) #results .ms-colhead span{font-size:13px!important;font-weight:600!important;color:var(--wb-mut)!important;text-transform:none!important;letter-spacing:0!important}
:is(html.kpw,html.wb) #results .rm-stufe{background:var(--wb-ink)!important;color:var(--wb-on-ink)!important;font-size:12px!important;padding:5px 10px!important}
:is(html.kpw,html.wb) #results .rm-facts{color:var(--wb-mut)!important;font-size:13.5px!important}

/* ---------- Karte ---------- */
:is(html.kpw,html.wb) #results :is(div,section):has(> #scenarioControls),:is(html.kpw,html.wb) #results :is(div,section):has(> .rent-controls),:is(html.kpw,html.wb) #results .kpi-group,:is(html.kpw,html.wb) #results .chart-card,:is(html.kpw,html.wb) #results .table-card,:is(html.kpw,html.wb) #results .cashflow-card,:is(html.kpw,html.wb) #results .details-card,:is(html.kpw,html.wb) #results .etf-card,:is(html.kpw,html.wb) #results .feature-card,:is(html.kpw,html.wb) #results .plan,:is(html.kpw,html.wb) #results .bp-table-card{background:var(--kpk-card)!important;background-image:none!important;border:none!important;box-shadow:none!important;padding:24px 26px!important}
:is(html.kpw,html.wb) #results :is(div,section):has(> #scenarioControls),:is(html.kpw,html.wb) #results :is(div,section):has(> .rent-controls){margin-bottom:16px!important}
:is(html.kpw,html.wb) #results .rent-controls,:is(html.kpw,html.wb) #results .wg-wrap{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important}

/* ---------- Wert-Chip: ein Muster für alle Reglerwerte ---------- */
:is(html.kpw,html.wb) #results #wgVal,:is(html.kpw,html.wb) #results .wg-val,:is(html.kpw,html.wb) #results .rc-field-lbl b{display:inline-flex!important;align-items:baseline;gap:4px;font-size:15px!important;font-weight:800!important;color:var(--wb-b-txt)!important;background:var(--wb-bs)!important;padding:4px 10px!important;letter-spacing:0!important;line-height:1.2!important;white-space:nowrap}
:is(html.kpw,html.wb) #results #wgVal span,:is(html.kpw,html.wb) #results .wg-val span{font-size:12px!important;font-weight:600!important;color:var(--wb-b-txt)!important}
:is(html.kpw,html.wb) #results .wg-val b{font-size:15px!important;font-weight:800!important;color:var(--wb-b-txt)!important;background:none!important;padding:0!important}

/* ---------- Regler ---------- */
:is(html.kpw,html.wb) #results input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:linear-gradient(90deg,var(--wb-b) 0 var(--kpk-pct,0%),var(--wb-track) var(--kpk-pct,0%) 100%);border-radius:99px!important;outline:none;cursor:pointer;accent-color:var(--wb-b)}
:is(html.kpw,html.wb) #results input[type=range].wg-range{background:linear-gradient(90deg,var(--wb-b) 0 var(--wg-pct,40%),var(--wb-track) var(--wg-pct,40%) 100%)!important}
:is(html.kpw,html.wb) #results input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--kpk-card);border:5px solid var(--wb-b);border-radius:50%!important;box-shadow:0 2px 8px color-mix(in srgb,var(--ink) 25%,transparent)}
:is(html.kpw,html.wb) #results input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--kpk-card);border:5px solid var(--wb-b);border-radius:50%!important}
:is(html.kpw,html.wb) #results input[type=range]::-moz-range-progress{background:var(--wb-b);height:6px}
:is(html.kpw,html.wb) #results input[type=range]:focus-visible{outline:2px solid var(--wb-b);outline-offset:6px}
:is(html.kpw,html.wb) #results .wg-tick,:is(html.kpw,html.wb) #results .rc-scale,:is(html.kpw,html.wb) #results .rc-scale span{font-size:11px!important;font-weight:500!important;color:var(--wb-faint)!important}
:is(html.kpw,html.wb) #results .wg-tick i{background:var(--wb-edge)!important}

/* ---------- Eingabe ---------- */
:is(html.kpw,html.wb) #results .rc-inwrap,:is(html.kpw,html.wb) #results .input-suffix,:is(html.kpw,html.wb) #results .etf-rate .input-suffix{display:flex!important;align-items:center;gap:6px;height:42px;min-width:130px!important;padding:0 12px!important;background:var(--kpk-card)!important;border:1px solid var(--wb-edge)!important;box-shadow:none!important;position:relative}
:is(html.kpw,html.wb) #results .rc-inwrap:focus-within,:is(html.kpw,html.wb) #results .input-suffix:focus-within{border-color:var(--wb-b)!important}
:is(html.kpw,html.wb) #results .rc-inwrap input,:is(html.kpw,html.wb) #results .input-suffix input{width:64px!important;min-width:0!important;border:none!important;background:transparent!important;box-shadow:none!important;padding:0!important;height:auto!important;font-size:15px!important;font-weight:800!important;color:var(--wb-ink)!important;text-align:right}
:is(html.kpw,html.wb) #results .rc-inwrap .rc-unit{position:static!important;transform:none!important;flex:none;font-size:13px!important;color:var(--wb-faint)!important}
:is(html.kpw,html.wb) #results .rc-derived{font-size:13px!important;color:var(--wb-mut)!important;white-space:nowrap}
:is(html.kpw,html.wb) #results .rc-derived b{color:var(--wb-ink)!important;font-weight:800!important}
:is(html.kpw,html.wb) #results select{height:36px;border:1px solid var(--wb-edge)!important;background-color:var(--kpk-card)!important;font-weight:700!important;padding:0 10px!important}

/* ---------- Umschalter: überall gleich ---------- */
:is(html.kpw,html.wb) #results .segmented{display:inline-flex!important;background:var(--wb-seg)!important;border:none!important;padding:3px!important;gap:2px!important;box-shadow:none!important}
:is(html.kpw,html.wb) #results .segmented .seg{background:transparent!important;border:none!important;color:var(--wb-mut)!important;font-size:13.5px!important;font-weight:700!important;padding:7px 14px!important;white-space:nowrap;box-shadow:none!important}
:is(html.kpw,html.wb) #results .segmented .seg small{color:inherit!important;opacity:.85}
:is(html.kpw,html.wb) #results .segmented .seg.active{background:var(--kpk-card)!important;color:var(--wb-ink)!important;box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 14%,transparent)!important}

/* ---------- Datenblatt ---------- */
:is(html.kpw,html.wb) #results .kpi-row{display:flex!important;align-items:baseline!important;gap:16px!important;background:transparent!important;border:none!important;border-bottom:1px solid var(--wb-line)!important;padding:9px 0!important;flex-wrap:wrap}
:is(html.kpw,html.wb) #results .kpi-row-label{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
:is(html.kpw,html.wb) #results .kpi-row-val{white-space:nowrap;font-size:15px!important;font-weight:700!important;color:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results .kpi-row.pos .kpi-row-val{color:var(--wb-b-txt)!important}
:is(html.kpw,html.wb) #results .kpi-badge{font-size:10.5px!important;font-weight:800!important;letter-spacing:.05em!important;background:none!important;padding:0!important;color:var(--wb-mut)!important}
:is(html.kpw,html.wb) #results .kpi-badge.pos{background:none!important;color:var(--wb-b-txt)!important}

/* ---------- Kennzahlen-Kacheln: Spalten mit Haarlinien ---------- */
:is(html.kpw,html.wb) #results .investor-grid{background:transparent!important;border:none!important;gap:0!important;row-gap:28px!important;margin:24px -24px 0!important;overflow:hidden}
:is(html.kpw,html.wb) #results .investor-card{padding:0 24px!important;border:none!important;border-left:1px solid var(--wb-line)!important;margin-left:-1px!important;background:transparent!important;box-shadow:none!important}
:is(html.kpw,html.wb) #results .investor-card .ic-val{font-size:28px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results .investor-card .ic-rate{font-size:11.5px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.06em!important;color:var(--wb-bronze-txt)!important}
:is(html.kpw,html.wb) #results .investor-card.r-pos .ic-val,:is(html.kpw,html.wb) #results .investor-card.r-pos .ic-rate{color:var(--wb-b-txt)!important}
:is(html.kpw,html.wb) #results .investor-card .ic-fill{background:repeating-linear-gradient(-45deg,var(--wb-bronze) 0 4px,color-mix(in srgb,var(--wb-bronze) 84%,var(--kpk-card)) 4px 8px)!important}
:is(html.kpw,html.wb) #results .investor-card.r-pos .ic-fill{background:repeating-linear-gradient(-45deg,var(--wb-b) 0 4px,color-mix(in srgb,var(--wb-b) 84%,var(--kpk-card)) 4px 8px)!important}

/* ---------- Hinweise ---------- */
:is(html.kpw,html.wb) #results .hint-card{background:var(--wb-hatch)!important;border:none!important;padding:20px 26px!important}
:is(html.kpw,html.wb) #results .hint-card .hint-icon{background:var(--wb-ink)!important;color:var(--wb-on-ink)!important}
:is(html.kpw,html.wb) #results .hint-card.pos .hint-icon{background:var(--wb-b)!important;color:var(--accent-ink,#fff)!important}

/* ---------- Cashflow Jahr für Jahr ---------- */
:is(html.kpw,html.wb) #results .cf-bar{height:30px!important;background:var(--wb-wash)!important;gap:2px!important;border:none!important}
:is(html.kpw,html.wb) #results .cf-seg{border:none!important}
:is(html.kpw,html.wb) #results .cf-net{border:none!important;padding:14px 16px!important;font-weight:700}
:is(html.kpw,html.wb) #results .cf-net.pos{background:var(--wb-bs)!important;color:var(--wb-b-txt)!important}
:is(html.kpw,html.wb) #results .cf-net.neg{background:var(--wb-bronze-soft)!important;color:var(--wb-bronze-txt)!important}
:is(html.kpw,html.wb) #results .cf-legend .dot,:is(html.kpw,html.wb) #results .cf-buffer-legend .dot,:is(html.kpw,html.wb) #results .chart-legend .dot{width:10px!important;height:10px!important;border-radius:0!important}

/* ---------- Diagramme ---------- */
:is(html.kpw,html.wb) #results .chart-legend{gap:8px!important}
:is(html.kpw,html.wb) #results .chart-legend .cl-item{display:inline-flex!important;align-items:center;gap:8px;padding:6px 12px!important;border:1px solid var(--wb-line)!important;background:var(--kpk-card)!important;font-size:13px!important;font-weight:600!important;color:var(--wb-ink2)!important;white-space:nowrap}
:is(html.kpw,html.wb) #results .chart-legend .cl-item.off{opacity:.45}
:is(html.kpw,html.wb) #results .chart-legend .cl-item:focus-visible{outline:2px solid var(--wb-b);outline-offset:2px}
:is(html.kpw,html.wb) #results #chart svg line[stroke]:not([stroke-dasharray]):not(.chart-cross),:is(html.kpw,html.wb) #results .chart-card svg line[stroke]:not([stroke-dasharray]):not(.chart-cross):not([stroke-width]){stroke:var(--wb-grid)!important}
:is(html.kpw,html.wb) #results #chart path[stroke="#3E8E5A"]{stroke:var(--wb-b)!important;stroke-width:2.5!important}
:is(html.kpw,html.wb) #results #chart path[stroke="#C5821C"]{stroke:var(--wb-bronze)!important;stroke-width:2.5!important}
:is(html.kpw,html.wb) #results #chart path[stroke-dasharray]{stroke:color-mix(in srgb,var(--wb-mut) 60%,var(--wb-bs))!important}
:is(html.kpw,html.wb) #results #chart path.kpk-flaeche{stroke:none!important;pointer-events:none}
:is(html.kpw,html.wb) #results .chart-cross{stroke:var(--wb-ink)!important;stroke-dasharray:3 4!important;opacity:.5}
:is(html.kpw,html.wb) #results .chart-dot{stroke:var(--kpk-card)!important;stroke-width:2.5!important}
:is(html.kpw,html.wb) #results .chart-tip{background:var(--wb-ink)!important;color:var(--wb-on-ink)!important;border:none!important;box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 28%,transparent)!important;padding:12px 14px!important}
:is(html.kpw,html.wb) #results .chart-tip .ct-year{color:var(--wb-on-ink)!important;font-weight:700!important}
:is(html.kpw,html.wb) #results .chart-tip .ct-row{color:color-mix(in srgb,var(--wb-on-ink) 74%,var(--wb-ink))!important}
:is(html.kpw,html.wb) #results .chart-tip .ct-row b{color:var(--wb-on-ink)!important}

/* Reihenfarben des Rechners (fest im Markup) auf die Töne der Instanz legen */
:is(html.kpw,html.wb) #results .dot[style*="#3E8E5A"],:is(html.kpw,html.wb) #results .ct-dot[style*="#3E8E5A"]{background:var(--wb-b)!important}
:is(html.kpw,html.wb) #results .dot[style*="#C5821C"],:is(html.kpw,html.wb) #results .ct-dot[style*="#C5821C"],:is(html.kpw,html.wb) #results .dot[style*="#C96A4A"],:is(html.kpw,html.wb) #results .ct-dot[style*="#C96A4A"]{background:var(--wb-bronze)!important}
/* auch die Balken (rect) der Eigennutzer-Ansicht, sonst weicht die Legende vom Balken ab (D-0010) */
:is(html.kpw,html.wb) #results .cf-buffer-chart :is(path,rect)[fill="#3E8E5A"]{fill:var(--wb-b)!important}
:is(html.kpw,html.wb) #results .cf-buffer-chart path[stroke="#3E8E5A"]{stroke:var(--wb-b)!important}
:is(html.kpw,html.wb) #results .cf-buffer-chart path[fill="#C96A4A"]{fill:var(--wb-bronze)!important}
:is(html.kpw,html.wb) #results .cf-buffer-chart path[stroke="#121733"]{stroke-width:2!important}
:is(html.kpw,html.wb) #results svg text{fill:var(--wb-axis)!important}
:is(html.kpw,html.wb) #results #chart svg text,:is(html.kpw,html.wb) #results .cf-buffer-chart svg text,:is(html.kpw,html.wb) #results .chart-card svg text,:is(html.kpw,html.wb) #results #bauphaseSim svg text{fill:var(--wb-axis)!important;font-family:var(--font-num)!important;font-size:11.5px!important;font-weight:500}

/* ---------- ETF, Tabellen, Knöpfe ---------- */
:is(html.kpw,html.wb) #results .etf-compare{gap:2px!important;background:var(--wb-line)!important}
:is(html.kpw,html.wb) #results .etf-compare .etf-card,:is(html.kpw,html.wb) #results .etf-card .etf-card{background:var(--kpk-card)!important;padding:18px 20px!important}
:is(html.kpw,html.wb) #results .etf-diff{padding:8px 12px!important}
:is(html.kpw,html.wb) #results .etf-diff.pos{background:var(--wb-bs)!important;color:var(--wb-b-txt)!important}
:is(html.kpw,html.wb) #results .etf-diff.neg{background:var(--wb-bronze-soft)!important;color:var(--wb-bronze-txt)!important}
:is(html.kpw,html.wb) #results .table-scroll th{background:transparent!important;color:var(--wb-mut)!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;border-bottom:1px solid var(--wb-line)!important}
:is(html.kpw,html.wb) #results .table-scroll td{border-bottom:1px solid color-mix(in srgb,var(--wb-line) 60%,var(--kpk-card))!important}
:is(html.kpw,html.wb) #results .btn{font-weight:700!important;box-shadow:none!important}
:is(html.kpw,html.wb) #results .tip{background:transparent!important;color:var(--wb-faint)!important;font-size:11px!important}
:is(html.kpw,html.wb) #results .tip:hover,:is(html.kpw,html.wb) #results .tip:focus-visible{color:var(--wb-b-txt)!important}

/* ---------- Fazit: zweigeteilte Karte (angehobene Hauptfläche + Kennzahlen-Spalte) ---------- */
:is(html.kpw,html.wb) #results .res-sec[data-sec="verdict"]{margin-bottom:22px!important;background:transparent!important}
:is(html.kpw,html.wb) #results #verdict{margin-bottom:0!important;background:transparent!important}
:is(html.kpw,html.wb) #results #verdict b,:is(html.kpw,html.wb) #results #verdict strong{color:var(--wb-ink)!important}
/* Annahme zum Anschlusszins rechts in der Kopfzeile: trug die gedämpfte Schrift des dunklen Fazits und stand hier hell auf Weiß. */
:is(html.kpw,html.wb) #results #verdict .verdict-assumption{color:var(--wb-mut)!important}
:is(html.kpw,html.wb) #results #verdict .verdict-assumption strong{white-space:nowrap}
:is(html.kpw,html.wb) #results #verdict .verdict-lead{font-size:15px!important;line-height:1.65!important;color:var(--wb-mut)!important}
:is(html.kpw,html.wb) #results #verdict .verdict-cashflow,:is(html.kpw,html.wb) #results #verdict .verdict-note{font-size:14px!important;line-height:1.6!important;color:var(--wb-mut)!important;background:var(--wb-hatch)!important;border:none!important;padding:14px 16px!important}
:is(html.kpw,html.wb) #results #verdict .verdict-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
:is(html.kpw,html.wb) #results #verdict .verdict-card{display:grid!important;grid-template-columns:minmax(0,1fr) 270px;grid-auto-flow:row dense;column-gap:0;background:linear-gradient(90deg,transparent 0 calc(100% - 310px),var(--wb-side) calc(100% - 310px))!important;color:var(--wb-ink)!important;border:none!important;box-shadow:none!important;padding:0!important;position:relative;overflow:hidden!important;border-radius:16px!important}
:is(html.kpw,html.wb) #results #verdict .verdict-card::before{content:"";position:absolute;top:0;bottom:0;left:0;right:270px;background:var(--kpk-card)!important;border-radius:16px 24px 24px 16px!important;box-shadow:14px 0 36px -6px color-mix(in srgb,var(--ink) 12%,transparent),2px 0 6px color-mix(in srgb,var(--ink) 5%,transparent)!important;z-index:0}
:is(html.kpw,html.wb) #results #verdict .verdict-card>*{grid-column:1;position:relative;z-index:1;margin-left:30px!important;margin-right:30px!important;color:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results #verdict .verdict-card>:first-child{margin-top:28px!important}
:is(html.kpw,html.wb) #results #verdict .verdict-card>:last-child:not(.verdict-nums){margin-bottom:28px!important}
:is(html.kpw,html.wb) #results #verdict .verdict-banner{background:none!important;border:none!important;padding:0!important}
:is(html.kpw,html.wb) #results #verdict .verdict-banner .vb-icon{width:40px!important;height:40px!important;flex:none;background:var(--wb-b)!important;color:var(--accent-ink,#fff)!important;position:relative}
:is(html.kpw,html.wb) #results #verdict .verdict-banner .vb-icon svg{stroke:currentColor!important;color:inherit!important}

/* Haken wie in der Vorlage — nur bei den zustimmenden Urteilen; Warnung und „schwach“ behalten ihr Zeichen */
:is(html.kpw,html.wb) #results #verdict .verdict-banner:is(.v-pos,.v-ok,.v-low) .vb-icon{font-size:0!important;line-height:0!important}
:is(html.kpw,html.wb) #results #verdict .verdict-banner:is(.v-pos,.v-ok,.v-low) .vb-icon > *{display:none!important}
:is(html.kpw,html.wb) #results #verdict .verdict-banner:is(.v-pos,.v-ok,.v-low) .vb-icon::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--kpk-haken) center/22px 22px no-repeat;mask:var(--kpk-haken) center/22px 22px no-repeat}
:is(html.kpw,html.wb) #results #verdict .verdict-banner.v-warn .vb-icon{background:var(--wb-ink)!important;color:var(--wb-on-ink)!important}
:is(html.kpw,html.wb) #results #verdict .verdict-banner .vb-title{color:var(--wb-ink)!important;font-size:22px!important;font-weight:700!important}
:is(html.kpw,html.wb) #results #verdict .verdict-banner .vb-sub,:is(html.kpw,html.wb) #results #verdict .verdict-head-lbl{color:var(--wb-mut)!important}
:is(html.kpw,html.wb) #results #verdict .verdict-lead strong,:is(html.kpw,html.wb) #results #verdict .verdict-note strong,:is(html.kpw,html.wb) #results #verdict .verdict-cashflow strong{color:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results #verdict .verdict-head .segmented{background:var(--wb-seg-2)!important;border:none!important;padding:3px!important}
:is(html.kpw,html.wb) #results #verdict .verdict-head .segmented .seg{background:transparent!important;color:var(--wb-mut)!important;border:none!important}
:is(html.kpw,html.wb) #results #verdict .verdict-head .segmented .seg.active{background:var(--kpk-card)!important;color:var(--wb-ink)!important;box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 16%,transparent)!important}
:is(html.kpw,html.wb) #results #verdict .verdict-nums{grid-column:2!important;grid-row:1 / span 20;display:flex!important;flex-direction:column!important;justify-content:flex-start;align-self:stretch;gap:22px!important;margin:0!important;padding:30px 28px 26px 36px!important;background:transparent!important;border:none!important;z-index:0}
:is(html.kpw,html.wb) #results #verdict .verdict-nums .vn{display:flex!important;flex-direction:column-reverse!important;gap:4px!important;background:transparent!important;border:none!important;padding:0!important}
:is(html.kpw,html.wb) #results #verdict .verdict-nums .vn-lbl,:is(html.kpw,html.wb) #results #verdict .verdict-nums .vn-lbl *{font-size:13.5px!important;color:var(--wb-mut)!important;text-transform:none!important;letter-spacing:0!important}
:is(html.kpw,html.wb) #results #verdict .verdict-nums .vn-val{font-size:26px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--wb-ink)!important;white-space:nowrap}
:is(html.kpw,html.wb) #results #verdict .verdict-nums .vn:last-child .vn-val{color:var(--wb-b-txt)!important}
@media(max-width:760px){
  :is(html.kpw,html.wb) #results #verdict .verdict-card{grid-template-columns:1fr;background:transparent!important}
  :is(html.kpw,html.wb) #results #verdict .verdict-nums{grid-column:1!important;grid-row:auto;background:var(--wb-side)!important;padding:22px 20px!important}
  :is(html.kpw,html.wb) #results #verdict .verdict-card::before{right:0;border-radius:16px!important;box-shadow:none!important}
  :is(html.kpw,html.wb) #results #verdict .verdict-card>*{margin-left:20px!important;margin-right:20px!important}
  :is(html.kpw,html.wb) #results #verdict .verdict-card>.verdict-nums{margin:20px 0 0!important}
  :is(html.kpw,html.wb) #results #verdict .verdict-card>:first-child{margin-top:22px!important}
  :is(html.kpw,html.wb) #results #verdict .verdict-nums .vn-val{white-space:normal}
}

/* ---------- Annahmen im Seitenfluss: Wertsteigerung + Miete als ein Streifen mit Fuge.
   Greift nur, solange die schwebende Leiste (kp-kalk.js) nicht läuft — sonst sind beide ausgeblendet. ---------- */
:is(html.kpw,html.wb) #results .wrap:has(> .res-sec[data-sec="wertsteigerung"]):has(> .res-sec[data-sec="rentControls"]){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:2px;row-gap:0}
:is(html.kpw,html.wb) #results .wrap:has(> .res-sec[data-sec="wertsteigerung"]):has(> .res-sec[data-sec="rentControls"]) > *{grid-column:1 / -1;min-width:0}
:is(html.kpw,html.wb) #results .res-sec[data-sec="wertsteigerung"]{grid-column:1!important;background:var(--kpk-card);margin-bottom:22px!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="rentControls"]{grid-column:2!important;background:var(--kpk-card);margin-bottom:22px!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="rentControls"]:has(#rentControls:empty){display:none}
:is(html.kpw,html.wb) #results .res-sec[data-sec="wertsteigerung"]:has(~ .res-sec[data-sec="rentControls"] #rentControls:empty),:is(html.kpw,html.wb) #results .res-sec[data-sec="wertsteigerung"]:has(~ .res-sec[data-sec="rentControls"][hidden]){grid-column:1 / -1!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="rentControls"]:is([hidden] ~ *){grid-column:1 / -1!important}
:is(html.kpw,html.wb) #results .scenario-banner,:is(html.kpw,html.wb) #results #rentControls{background:transparent!important;margin:0!important;height:100%;padding:22px 24px!important}
:is(html.kpw,html.wb) #results .scenario-banner{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl lbl" "val val" "ctl ctl";row-gap:4px!important;align-content:start}
:is(html.kpw,html.wb) #results .scenario-banner-label{grid-area:lbl;display:flex;flex-direction:column;gap:2px}
:is(html.kpw,html.wb) #results .scenario-banner-label strong{font-size:13px!important;font-weight:600!important;color:var(--wb-mut)!important}
:is(html.kpw,html.wb) #results .scenario-banner-label span{font-size:12px!important;color:var(--wb-faint)!important}
:is(html.kpw,html.wb) #results #wgVal,:is(html.kpw,html.wb) #results .scenario-banner .wg-val{grid-area:val;justify-self:start;background:none!important;padding:0!important;font-size:30px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--wb-ink)!important;margin:6px 0 4px}
:is(html.kpw,html.wb) #results #wgVal span,:is(html.kpw,html.wb) #results .scenario-banner .wg-val span{font-size:13px!important;font-weight:600!important;color:var(--wb-mut)!important;margin-left:4px}
:is(html.kpw,html.wb) #results #wgVal b,:is(html.kpw,html.wb) #results .scenario-banner .wg-val b{font-size:30px!important;font-weight:800!important;color:var(--wb-ink)!important;background:none!important;padding:0!important}
:is(html.kpw,html.wb) #results #scenarioControls{grid-area:ctl;margin-top:6px}
:is(html.kpw,html.wb) #results .rent-controls{height:100%;display:flex;flex-direction:column;gap:12px}
:is(html.kpw,html.wb) #results .rc-head{display:flex;flex-direction:column;gap:2px}
:is(html.kpw,html.wb) #results .rc-head strong{font-size:13px!important;font-weight:600!important;color:var(--wb-mut)!important;letter-spacing:0!important}
:is(html.kpw,html.wb) #results .rc-head span{font-size:12px!important;color:var(--wb-faint)!important}
:is(html.kpw,html.wb) #results .rc-fields{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0!important;flex:1}
:is(html.kpw,html.wb) #results .rc-field{display:flex!important;flex-direction:column;gap:8px;min-width:0}
:is(html.kpw,html.wb) #results .rc-field + .rc-field{border-left:1px solid var(--wb-line);padding-left:24px;margin-left:0}
:is(html.kpw,html.wb) #results .rc-field:first-child{padding-right:24px}
:is(html.kpw,html.wb) #results .rc-field-lbl{display:flex!important;flex-direction:column;align-items:flex-start;gap:6px}
:is(html.kpw,html.wb) #results .rc-field-lbl b{background:none!important;padding:0!important;font-size:30px!important;font-weight:800!important;letter-spacing:-.02em!important;color:var(--wb-ink)!important;margin-top:4px}
:is(html.kpw,html.wb) #results .rc-inrow{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
:is(html.kpw,html.wb) #results .rc-inwrap{height:48px!important;margin-top:4px}
:is(html.kpw,html.wb) #results .rc-inwrap input{font-size:22px!important;width:84px!important}
:is(html.kpw,html.wb) #results .rc-range{margin-top:auto}
@media(max-width:760px){
  :is(html.kpw,html.wb) #results .wrap:has(> .res-sec[data-sec="wertsteigerung"]):has(> .res-sec[data-sec="rentControls"]){grid-template-columns:minmax(0,1fr)}
  :is(html.kpw,html.wb) #results .res-sec[data-sec="rentControls"],:is(html.kpw,html.wb) #results .res-sec[data-sec="wertsteigerung"]{grid-column:1!important}
  :is(html.kpw,html.wb) #results .rc-fields{grid-template-columns:1fr}
  :is(html.kpw,html.wb) #results .rc-field + .rc-field{border-left:none;padding-left:0;border-top:1px solid var(--wb-line);padding-top:14px;margin-top:14px}
  :is(html.kpw,html.wb) #results .rc-field:first-child{padding-right:0}
}

/* ---------- Überschriften innerhalb der Karten ---------- */
:is(html.kpw,html.wb) #results .res-sec:has(> h2.section-title),:is(html.kpw,html.wb) #results .res-sec[data-sec="objektdaten"],:is(html.kpw,html.wb) #results .res-sec[data-sec="bauphase"],:is(html.kpw,html.wb) #results .res-sec[data-sec="mieteKauf"],:is(html.kpw,html.wb) #results .res-sec[data-sec="etf"]{background:var(--kpk-card)!important;padding:24px 26px!important;margin-bottom:22px!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="bauphase"]:has(#bauphaseSim:empty),:is(html.kpw,html.wb) #results .res-sec[data-sec="mieteKauf"]:has(#mieteKauf:empty),:is(html.kpw,html.wb) #results .res-sec[data-sec="objektdaten"]:has(#objektOverview:empty),:is(html.kpw,html.wb) #results .res-sec[data-sec="hinweise"]:has(#resultHints:empty){display:none!important}
:is(html.kpw,html.wb) #results .res-sec h2,:is(html.kpw,html.wb) #results .res-sec h2.section-title{margin:0 0 6px!important;font-size:19px!important;font-weight:700!important}
:is(html.kpw,html.wb) #results .res-sec .section-intro{margin:0 0 18px!important;font-size:13.5px!important;color:var(--wb-mut)!important}
:is(html.kpw,html.wb) #results .res-sec:has(> h2.section-title) > :is(.chart-card,.cashflow-card),:is(html.kpw,html.wb) #results .res-sec[data-sec="bauphase"] :is(.chart-card,.bp-table-card,.cashflow-card),:is(html.kpw,html.wb) #results .res-sec[data-sec="mieteKauf"] :is(.chart-card,.bp-table-card,.cashflow-card),:is(html.kpw,html.wb) #results .res-sec[data-sec="etf"] > .etf-card,:is(html.kpw,html.wb) #results .res-sec[data-sec="etf"] :is(.etf-card):not(.etf-compare .etf-card){background:transparent!important;padding:0!important;box-shadow:none!important;border:none!important;margin-top:12px!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="objektdaten"] h2{margin-bottom:18px!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="objektdaten"] .section-intro{margin-bottom:0!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="etf"] .etf-compare{background:transparent!important;gap:12px!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="etf"] .etf-compare .etf-card{background:var(--wb-wash)!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="cashflow"] > .cashflow-card,:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] > .table-card{margin-bottom:22px!important}

/* ---------- Kennzahlen im Detail / Überblick: Spalten mit Haarlinien statt Boxen ---------- */
:is(html.kpw,html.wb) #results #kpiSections{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;gap:0!important;row-gap:28px!important;align-items:stretch!important;margin:28px -24px 0!important;overflow:hidden}
:is(html.kpw,html.wb) #results #kpiSections .kpi-group,:is(html.kpw,html.wb) #results #kpiSections .kpi-group:first-child,:is(html.kpw,html.wb) #results #kpiSections .kpi-group:last-child{background:transparent!important;border:none!important;border-left:1px solid var(--wb-line)!important;box-shadow:none!important;padding:0 24px!important;margin:0 0 0 -1px!important}
:is(html.kpw,html.wb) #results .kpi-group-title,:is(html.kpw,html.wb) #results .ovw-card-head{display:flex!important;align-items:center;gap:10px;margin:0!important;min-height:34px;padding:0 0 14px!important;background:transparent!important;border-bottom:none!important;font-size:15px!important;font-weight:700!important}
:is(html.kpw,html.wb) #results .ovw-card-title{font-size:15px!important;font-weight:700!important;margin:0!important}
:is(html.kpw,html.wb) #results .kpi-group-ic,:is(html.kpw,html.wb) #results .ovw-card-ic{width:24px!important;height:24px!important;flex:none;background:var(--wb-ink)!important;color:var(--wb-on-ink)!important;display:flex!important;align-items:center;justify-content:center;margin:0!important}
:is(html.kpw,html.wb) #results .kpi-group-ic svg,:is(html.kpw,html.wb) #results .ovw-card-ic svg{stroke:currentColor!important;color:inherit!important;width:13px!important;height:13px!important}
:is(html.kpw,html.wb) #results .kpi-rows{padding:0!important;margin:0!important}
:is(html.kpw,html.wb) #results .kpi-rows .kpi-row:last-child{border-bottom:none!important}
:is(html.kpw,html.wb) #results #kpiSections .kpi-rows,:is(html.kpw,html.wb) #results #kpiSections .kpi-row{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
:is(html.kpw,html.wb) #results .ovw-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0!important;align-items:stretch!important;margin:28px -24px 0!important;overflow:hidden}
:is(html.kpw,html.wb) #results .ovw-card,:is(html.kpw,html.wb) #results .ovw-card:first-child,:is(html.kpw,html.wb) #results .ovw-card:last-child{background:transparent!important;border:none!important;border-left:1px solid var(--wb-line)!important;box-shadow:none!important;padding:0 24px!important;margin:0 0 0 -1px!important}
:is(html.kpw,html.wb) #results .ovw-card > :not(.ovw-card-head){margin-left:0!important;margin-right:0!important}
:is(html.kpw,html.wb) #results .ovw-rows{margin-top:6px!important}
:is(html.kpw,html.wb) #results .ovw-row{padding:9px 0!important;border-bottom:1px solid var(--wb-line)!important}
:is(html.kpw,html.wb) #results .ovw-row dt{color:var(--wb-mut)!important;font-size:13.5px!important}
:is(html.kpw,html.wb) #results .ovw-row dd{font-weight:700!important;color:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results .ovw-row-plain:first-of-type{margin-top:6px!important}
:is(html.kpw,html.wb) #results .ovw-band,:is(html.kpw,html.wb) #results .ovw-loan,:is(html.kpw,html.wb) #results .ovw-rate,:is(html.kpw,html.wb) #results .ovw-area{border:none!important;background:var(--wb-wash)!important;box-shadow:none!important}
:is(html.kpw,html.wb) #results .ovw-band{margin-top:14px!important}
:is(html.kpw,html.wb) #results .ovw-band-accent,:is(html.kpw,html.wb) #results .ovw-rate{background:var(--wb-bs)!important}
:is(html.kpw,html.wb) #results .ovw-subhead{font-size:11.5px!important;font-weight:800!important;letter-spacing:.06em!important;color:var(--wb-mut)!important;margin-top:18px!important}
:is(html.kpw,html.wb) #results .ovw-bar{gap:2px}

/* Konditionen als zwei Bausteine */
:is(html.kpw,html.wb) #results .ovw-cond{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin-top:10px!important}
:is(html.kpw,html.wb) #results .ovw-cond-col{background:var(--wb-wash)!important;border:none!important;border-top:3px solid color-mix(in srgb,var(--wb-mut) 45%,var(--kpk-card))!important;padding:16px 18px!important;margin:0!important}
:is(html.kpw,html.wb) #results .ovw-cond-col:first-child{border-top-color:var(--wb-b)!important}
:is(html.kpw,html.wb) #results .ovw-cond-col > :first-child{font-size:12px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase;margin-bottom:8px!important}
@media(max-width:620px){
  :is(html.kpw,html.wb) #results .ovw-grid{row-gap:28px!important}
  :is(html.kpw,html.wb) #results .ovw-cond{grid-template-columns:1fr}
  :is(html.kpw,html.wb) #results #kpiSections,:is(html.kpw,html.wb) #results .ovw-grid{grid-template-columns:minmax(0,1fr)!important}
}
:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] .table-scroll,:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] table{margin-left:0!important;margin-right:0!important;padding-left:0!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] .table-card{padding:24px 26px!important}
:is(html.kpw,html.wb) #results .jr-ctl{padding:0 0 10px}
/* Kopfzelle der feststehenden Spalte deckend: die allgemeine Regel macht Tabellenköpfe durchsichtig, dann laufen die Jahreszahlen beim Querscrollen in die Beschriftung. */
:is(html.kpw,html.wb) #results #yearTable.jr thead th:first-child{background:var(--kpk-card)!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] table th:first-child,:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] table td:first-child{padding-left:0!important}
:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] .details-card summary{padding-left:0!important;padding-right:0!important}
:is(html.kpw,html.wb) #results .obj-hero{border:none!important;box-shadow:none!important}
:is(html.kpw,html.wb) #results .bp-cost-final-note{margin-left:0!important;padding-left:0!important}

/* ---------- Cashflow im Jahr: Töne der Instanz + klarere Hierarchie ---------- */
:is(html.kpw,html.wb) #results #cfBars .cf-seg[style*="#3E8E5A"],:is(html.kpw,html.wb) #results #cfBars .dot[style*="#3E8E5A"]{background:var(--wb-b)!important}
:is(html.kpw,html.wb) #results #cfBars .cf-seg[style*="#E9A23B"]{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--wb-b) 62%,var(--kpk-card)) 0 5px,color-mix(in srgb,var(--wb-b) 52%,var(--kpk-card)) 5px 10px)!important}
:is(html.kpw,html.wb) #results #cfBars .dot[style*="#E9A23B"]{background:color-mix(in srgb,var(--wb-b) 57%,var(--kpk-card))!important}
:is(html.kpw,html.wb) #results #cfBars .cf-seg[style*="#C96A4A"],:is(html.kpw,html.wb) #results #cfBars .dot[style*="#C96A4A"]{background:var(--wb-ink)!important}
:is(html.kpw,html.wb) #results #cfBars .cf-seg[style*="#4E86B8"]{background:repeating-linear-gradient(-45deg,var(--wb-bronze) 0 5px,color-mix(in srgb,var(--wb-bronze) 84%,var(--kpk-card)) 5px 10px)!important}
:is(html.kpw,html.wb) #results #cfBars .dot[style*="#4E86B8"]{background:var(--wb-bronze)!important}
:is(html.kpw,html.wb) #results #cfBars .cf-seg[style*="#A99C86"],:is(html.kpw,html.wb) #results #cfBars .dot[style*="#A99C86"]{background:color-mix(in srgb,var(--wb-mut) 45%,var(--kpk-card))!important}
:is(html.kpw,html.wb) #results #cfBars .cf-seg[style*="#8E3B28"],:is(html.kpw,html.wb) #results #cfBars .dot[style*="#8E3B28"]{background:var(--wb-bronze-txt)!important}
:is(html.kpw,html.wb) #results #cfBars .cf-bar{height:22px!important;gap:3px!important;background:var(--wb-wash)!important}
:is(html.kpw,html.wb) #results #cfBars .cf-row{margin-bottom:0!important;align-items:flex-start}
:is(html.kpw,html.wb) #results #cfBars .cf-rowlabel{font-size:13px!important}
:is(html.kpw,html.wb) #results #cfBars .cf-rowlabel b{display:block;font-size:22px!important;font-weight:800!important;color:var(--wb-ink)!important;margin-top:2px}
:is(html.kpw,html.wb) #results #cfBars .cf-legend{gap:8px!important;margin-top:-30px!important;margin-bottom:26px!important;position:relative;flex-wrap:wrap}
:is(html.kpw,html.wb) #results #cfBars .cf-legend > span{display:inline-flex;align-items:center;gap:7px;padding:3px 8px!important;background:var(--wb-wash);font-size:12px!important;color:var(--wb-ink2)!important;white-space:nowrap}
:is(html.kpw,html.wb) #results #cfBars .cf-net{display:flex!important;align-items:center;justify-content:space-between;padding:10px 16px!important;font-size:14px!important}
:is(html.kpw,html.wb) #results #cfBars .cf-net b,:is(html.kpw,html.wb) #results #cfBars .cf-net strong{font-size:17px!important;font-weight:800!important}
:is(html.kpw,html.wb) #results #cfBars .cf-net-monthly{font-size:13px!important;font-weight:700!important;opacity:.9}
:is(html.kpw,html.wb) #results .cf-head{align-items:center!important}
:is(html.kpw,html.wb) #results .cf-year{display:flex!important;align-items:center;gap:10px;font-size:13px!important;font-weight:600;color:var(--wb-mut)}
:is(html.kpw,html.wb) #results .cf-year select{height:38px!important;padding:0 32px 0 12px!important;font-size:14px!important}
:is(html.kpw,html.wb) #results .cf-note{font-size:13px!important;color:var(--wb-mut)!important}

/* ---------- Karten: dezenter Schatten ---------- */
:is(html.kpw,html.wb) #results .res-sec:has(> h2.section-title),:is(html.kpw,html.wb) #results .res-sec[data-sec="objektdaten"],:is(html.kpw,html.wb) #results .res-sec[data-sec="bauphase"],:is(html.kpw,html.wb) #results .res-sec[data-sec="mieteKauf"],:is(html.kpw,html.wb) #results .res-sec[data-sec="etf"],:is(html.kpw,html.wb) #results .res-sec[data-sec="cashflow"] > .cashflow-card,:is(html.kpw,html.wb) #results .res-sec[data-sec="yearTable"] > .table-card,:is(html.kpw,html.wb) #results .hint-card{box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 8px 24px -12px color-mix(in srgb,var(--ink) 12%,transparent)!important}

/* ---------- Keine Animationen ---------- */
:is(html.kpw,html.wb) #results *,:is(html.kpw,html.wb) #results *::before,:is(html.kpw,html.wb) #results *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:is(html.kpw,html.wb) #results .reveal,:is(html.kpw,html.wb) #results .reveal:not(.in){opacity:1!important;transform:none!important;visibility:visible!important}

/* ---------- Verläufe in Cashflow-Polster und Bauphase (die Verläufe legt kp-kalk.js an;
   ohne Skript bleiben die flächigen Töne von oben) ---------- */
html.kpw.kpk-grad #results .cf-buffer-chart path[fill="#3E8E5A"]{fill:url(#kpkPos)!important;opacity:1!important}
html.kpw.kpk-grad #results .cf-buffer-chart path[fill="#C96A4A"]{fill:url(#kpkNeg)!important;opacity:1!important}
html.kpw.kpk-grad #results #bauphaseSim svg path:not([fill="none"]):not([fill="transparent"]){fill:url(#kpkArea)!important;opacity:1!important}

/* ---------- Ausgeblendetes bleibt ausgeblendet (Abschnitte schaltet der Rechner über [hidden]/.hidden;
   die display-Regeln oben dürfen das nicht aufheben) ---------- */
:is(html.kpw,html.wb) #results#results#results [hidden],:is(html.kpw,html.wb) #results#results#results .hidden{display:none!important}

/* ---------- Läuft die schwebende Leiste, stehen die Regler dort — im Seitenfluss entfallen sie
   (die Eingaben bleiben im DOM, die Leiste steuert sie) ---------- */
html.kpw.kpk-an #results .res-sec[data-sec="wertsteigerung"],
html.kpw.kpk-an #results .res-sec[data-sec="rentControls"]{display:none!important}

/* ==========================================================================
   „Annahmen anpassen“ — schwebender Knopf + Karten (außerhalb von #results)
   ========================================================================== */
html.kpw .kpk-fab{position:fixed;right:28px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;height:52px;margin:0;padding:0 18px 0 14px;border:none;border-radius:0;background:var(--ink);color:var(--wb-on-ink);font-family:var(--font-body);font-size:14px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 30%,transparent);-webkit-font-smoothing:antialiased}
html.kpw .kpk-fab:hover{background:color-mix(in srgb,var(--ink) 88%,var(--surface,#fff))}
html.kpw .kpk-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.kpw .kpk-fab-ic{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink,#fff)}
html.kpw .kpk-fab-ic circle{fill:var(--accent)}
html.kpw .kpk-fab[hidden],html.kpw .kpk-ann[hidden],html.kpw .kpk-karte[hidden]{display:none!important}

html.kpw .kpk-ann{position:fixed;right:28px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:39;width:min(360px,calc(100vw - 56px));display:flex;flex-direction:column;gap:12px;font-family:var(--font-body);font-feature-settings:'tnum' 1;color:var(--ink);-webkit-font-smoothing:antialiased}
html.kpw .kpk-karte{background:var(--kpk-card);padding:18px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px -12px color-mix(in srgb,var(--ink) 28%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 4%,transparent)}
html.kpw .kpk-karte.ist-zeile{flex-direction:row;align-items:center}
html.kpw .kpk-kopf{display:flex;align-items:center;gap:10px}
html.kpw .kpk-titel{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink)}
html.kpw .kpk-chip{font-size:15px;font-weight:800;color:var(--wb-b-txt);background:var(--wb-bs);padding:5px 10px;white-space:nowrap}
html.kpw .kpk-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
html.kpw .kpk-zahl{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--wb-edge);background:var(--kpk-card)}
html.kpw .kpk-zahl:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
html.kpw .kpk-zahl input{width:64px;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;box-shadow:none;text-align:right;font-family:var(--font-num);font-size:16px;font-weight:800;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
html.kpw .kpk-zahl input::-webkit-outer-spin-button,html.kpw .kpk-zahl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html.kpw .kpk-zahl span{font-size:12.5px;color:var(--wb-faint);white-space:nowrap}
html.kpw .kpk-ann input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;margin:8px 0;padding:0;border:none;border-radius:99px;outline:none;cursor:pointer;accent-color:var(--accent);background:linear-gradient(90deg,var(--accent) 0 var(--kpk-pct,0%),var(--wb-track) var(--kpk-pct,0%) 100%)}
html.kpw .kpk-ann input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:var(--kpk-card);border:5px solid var(--accent);border-radius:50%;box-shadow:0 2px 8px color-mix(in srgb,var(--ink) 25%,transparent)}
html.kpw .kpk-ann input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--kpk-card);border:5px solid var(--accent);border-radius:50%}
html.kpw .kpk-ann input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
html.kpw .kpk-skala{display:flex;justify-content:space-between;font-size:11px;color:var(--wb-faint);white-space:nowrap}
html.kpw .kpk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Karten steigen beim Öffnen nacheinander auf */
@media (prefers-reduced-motion:no-preference){
  html.kpw .kpk-ann .kpk-karte{animation:kpk-auf .3s cubic-bezier(.22,1,.36,1) both}
  html.kpw .kpk-ann .kpk-karte:nth-child(2){animation-delay:.05s}
  html.kpw .kpk-ann .kpk-karte:nth-child(3){animation-delay:.1s}
  @keyframes kpk-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
/* niedrige Fenster (Handy quer): Karten rollen statt oben herauszuragen */
@media (max-height:520px){
  html.kpw .kpk-ann{max-height:calc(100vh - 108px);overflow-y:auto;padding:2px}
}
@media (max-width:620px){
  html.kpw .kpk-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));height:48px}
  html.kpw .kpk-ann{right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 32px))}
  /* Platz unter der Auswertung, damit der Knopf die letzte Zeile nicht verdeckt */
  html.kpw.kpk-an #results{padding-bottom:84px}
}
@media print{html.kpw .kpk-fab,html.kpw .kpk-ann{display:none!important}}

/* Im Reiter „Kalkulation“ beginnt die Auswertung wie in der Vorlage direkt mit der Eckdaten-Zeile:
   Galerie und Beschreibung stehen schon im Reiter „Überblick“. */
html.kpw .kb-tabbody #results [data-sec="objektHero"]{display:none!important}

/* ---------- „Annahmen anpassen“ (Formular): Felder über die volle Breite, als Felder erkennbar ---------- */
:is(html.kpw,html.wb) #results #annahmenForm{--kpk-feld:color-mix(in srgb,var(--line) 45%,var(--surface,#fff))}
:is(html.kpw,html.wb) #results #annahmenForm .input-suffix{display:flex!important;width:100%;min-width:0!important;height:44px;background:var(--kpk-feld)!important;border:1px solid var(--wb-edge)!important}
:is(html.kpw,html.wb) #results #annahmenForm .input-suffix input{flex:1 1 0;width:auto!important;min-width:0!important;text-align:left;font-size:15px!important;font-weight:600!important;color:var(--ink)}
:is(html.kpw,html.wb) #results #annahmenForm .input-suffix input::placeholder{font-weight:400;color:var(--wb-faint)}
:is(html.kpw,html.wb) #results #annahmenForm .input-suffix .suffix{position:static;transform:none;flex:none;white-space:nowrap}
:is(html.kpw,html.wb) #results #annahmenForm .input-suffix:focus-within{border-color:var(--accent)!important;background:var(--surface,#fff)!important;box-shadow:0 0 0 1px var(--accent)}
:is(html.kpw,html.wb) #results #annahmenForm .input-suffix input:focus{outline:none!important;box-shadow:none!important}
:is(html.kpw,html.wb) #results #annahmenForm select,
:is(html.kpw,html.wb) #results #annahmenForm .afield>input:not([type=checkbox]):not([type=radio]){width:100%;height:44px;background-color:var(--kpk-feld)!important;border:1px solid var(--wb-edge)!important;font-size:15px!important;font-weight:600!important;padding:0 12px!important;color:var(--ink)}
:is(html.kpw,html.wb) #results #annahmenForm select{padding-right:32px!important}
:is(html.kpw,html.wb) #results #annahmenForm .ufl .input-suffix{flex:1 1 auto}

/* ---------- Konfigurations-Vorschau im Partner-Bereich: dieselbe Breite wie im Kundenportal ---------- */
html.wb #results>.wrap{max-width:1124px!important;margin-left:auto!important;margin-right:auto!important}

/* ---------- Gesamtkalkulation (24.10.2026) ----------
   Dieselbe Auswertung wie eine Einzelkalkulation; eigene Bausteine nur für den Kopf mit den Objekten,
   Eigenkapital je Objekt und die Beiträge. Farbpunkte ordnen jedes Objekt in Liste, Tabelle und Chart zu. */
:is(html.kpw,html.wb) #results .gk-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:var(--kpk-card);margin-bottom:18px}
:is(html.kpw,html.wb) #results .gk-hero-info{padding:26px 28px;display:flex;flex-direction:column;gap:10px}
:is(html.kpw,html.wb) #results .gk-hero-info .obj-hero-badge{align-self:flex-start}
:is(html.kpw,html.wb) #results .gk-hero-info .obj-hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--wb-line);border:1px solid var(--wb-line);margin-top:6px}
:is(html.kpw,html.wb) #results .gk-hero-info .obj-hero-fact{background:var(--kpk-card);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
:is(html.kpw,html.wb) #results .gk-hero-info .obj-hero-fact span{font-size:12px;color:var(--wb-mut)}
:is(html.kpw,html.wb) #results .gk-hero-info .obj-hero-fact b{font-size:17px;font-weight:700;color:var(--wb-ink)}
:is(html.kpw,html.wb) #results .gk-hero-objekte{background:var(--wb-wash);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
:is(html.kpw,html.wb) #results .gk-hero-ot{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wb-mut);margin-bottom:2px}
:is(html.kpw,html.wb) #results .gk-okarte{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--wb-ink);background:var(--kpk-card);border:1px solid var(--wb-line);padding:8px 12px 8px 8px;cursor:pointer}
:is(html.kpw,html.wb) #results .gk-okarte:hover{border-color:var(--wb-b)}
:is(html.kpw,html.wb) #results .gk-okarte.is-still{cursor:default}
:is(html.kpw,html.wb) #results .gk-okarte.is-still:hover{border-color:var(--wb-line)}
:is(html.kpw,html.wb) #results .gk-ofarbe{width:10px;height:10px;flex:none}
:is(html.kpw,html.wb) #results .gk-obild{width:52px;height:40px;flex:none;background:var(--wb-seg);overflow:hidden}
:is(html.kpw,html.wb) #results .gk-obild img{width:100%;height:100%;object-fit:cover;display:block}
:is(html.kpw,html.wb) #results .gk-otext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
:is(html.kpw,html.wb) #results .gk-otext b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(html.kpw,html.wb) #results .gk-otext small{font-size:12.5px;color:var(--wb-mut)}
:is(html.kpw,html.wb) #results .gk-opfeil{font-size:20px;color:var(--wb-b-txt);flex:none}
:is(html.kpw,html.wb) #results .gk-okarte.is-still .gk-opfeil{display:none}
:is(html.kpw,html.wb) #results .ovw-card.gk-ekkarte{border-left:none!important;border-top:1px solid var(--wb-line)!important;padding:26px 0 0!important;margin:28px 0 0!important}
:is(html.kpw,html.wb) #results .gk-text{margin:0 0 14px;font-size:13.5px;color:var(--wb-mut);line-height:1.5}
:is(html.kpw,html.wb) #results .gk-klein{margin:12px 0 0;font-size:12.5px;color:var(--wb-mut)}
:is(html.kpw,html.wb) #results .gk-klein.gk-warn{color:var(--wb-warn,#A4461A);font-weight:600}
:is(html.kpw,html.wb) #results .gk-tabwrap{overflow-x:auto}
:is(html.kpw,html.wb) #results .gk-tab{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
:is(html.kpw,html.wb) #results .gk-tab th{font-size:12px;font-weight:600;color:var(--wb-mut);text-align:left;padding:9px 10px;background:var(--wb-wash);white-space:nowrap}
:is(html.kpw,html.wb) #results .gk-tab td{padding:10px 10px;border-bottom:1px solid var(--wb-line);vertical-align:middle;color:var(--wb-ink)}
:is(html.kpw,html.wb) #results .gk-tab .n{text-align:right;white-space:nowrap}
:is(html.kpw,html.wb) #results .gk-tab tfoot td{font-weight:700;background:var(--wb-bs);border-bottom:0}
:is(html.kpw,html.wb) #results .gk-tab .pos{color:var(--wb-b-txt)}
:is(html.kpw,html.wb) #results .gk-tab .neg{color:#B5501C}
:is(html.kpw,html.wb) #results .gk-tab td:first-child{min-width:150px;line-height:1.35}
:is(html.kpw,html.wb) #results .gk-punkt{display:inline-block;width:9px;height:9px;margin-right:9px;vertical-align:1px}
:is(html.kpw,html.wb) #results .gk-ek{display:inline-flex;align-items:center;gap:6px}
:is(html.kpw,html.wb) #results .gk-nk{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--wb-mut)}
:is(html.kpw,html.wb) #results .gk-ek input{width:96px;height:34px;padding:0 10px;text-align:right;font:inherit;font-size:13.5px;font-weight:600;border:1px solid var(--wb-edge);background:var(--wb-wash);color:var(--wb-ink)}
:is(html.kpw,html.wb) #results .gk-ek input:hover{border-color:var(--wb-b)}
:is(html.kpw,html.wb) #results .gk-ek input:focus{outline:none;border-color:var(--wb-b);background:var(--kpk-card)}
:is(html.kpw,html.wb) #results .gk-ek i{font-style:normal;color:var(--wb-mut)}
:is(html.kpw,html.wb) #results .gk-beitrag .gk-chart{position:relative;margin:6px 0 4px}
:is(html.kpw,html.wb) #results .gk-beitrag .gk-chart svg{width:100%;height:auto;display:block}
:is(html.kpw,html.wb) #results .gk-beitrag .chart-legend{margin-bottom:16px}
:is(html.kpw,html.wb) #results .gk-beitrag .cl-item{cursor:default}
@media (max-width:820px){:is(html.kpw,html.wb) #results .gk-hero{grid-template-columns:1fr}}
[data-theme="dark"] :is(html.kpw,html.wb) #results .gk-tab .neg,html.wb[data-theme="dark"] #results .gk-tab .neg{color:#F3A27F}
:is(html.kpw,html.wb) #results .gk-dot-linie{height:3px!important;border-radius:0!important;width:14px!important}
:is(html.kpw,html.wb) #results .chart-card.gk-beitrag{padding:0!important;background:transparent!important}
html.kpw .kb-tabbody #results.is-gesamt [data-sec="objektHero"]{display:block!important}