/* =========================================================
   Wirtschaftlichkeitsrechner — funnel/report styles.

   The page now extends templates/verticals/v2/global/base.html and loads
   css/v2-site.css for its header, footer and design tokens (colors,
   spacing, .btn*, .eyebrow/.lede/.body-sm, :root vars) — this file only
   adds the calculator-specific funnel/dashboard styles on top. It used to
   duplicate that whole design system (own :root, topbar/nav, .btn, base
   resets) for a self-contained standalone page; that copy was deleted
   once the page started sharing the real header/footer, since a second
   copy of the same class names (.topbar, .nav, .wordmark, .btn, ...)
   would otherwise reskin the shared site chrome on this page only.
   --mono is still declared here because v2-site.css has no mono token.
   ========================================================= */

:root {
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

.calc-shell { min-height: 100vh; background: var(--paper); }
.calc-page { max-width: 1160px; margin: 0 auto; padding: 0 var(--s-6); }
.calc-page.has-mbar { padding-bottom: 24px; }

/* ---------- Kopf / Fortschritt ---------- */
.calc-head { padding: var(--s-7) 0 var(--s-5); }
.calc-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; margin: 10px 0 14px; max-width: 22ch; }
.calc-head h2 em { font-style: italic; color: var(--forest); font-weight: 400; }
.calc-head .lede { max-width: 58ch; font-size: 20px; }

.steps { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: var(--s-6) 0 var(--s-6); }
.step { flex: 1; padding: 13px 16px 13px 0; border-right: 1px solid var(--line-2); display: flex; gap: 11px; align-items: baseline; opacity: 0.4; transition: opacity .3s ease; }
.step:last-child { border-right: none; }
.step.on { opacity: 1; }
.step.done { opacity: 0.75; }
.step .sn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--amber); }
.step.done .sn { color: var(--forest); font-size: 12px; animation: tick .35s ease; }
@keyframes tick { from { transform: scale(0.4); opacity: 0 } to { transform: none; opacity: 1 } }
.step .st { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.step.on .st { color: var(--forest); }

/* ---------- Karten ---------- */
.calc-card { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: var(--s-5) var(--s-6) var(--s-6); }
.calc-card + .calc-card, .calc-card + .link-add { margin-top: var(--s-4); }
.calc-card.tint { background: var(--cream); margin-bottom: var(--s-4); }
.unit-card { animation: cardIn .35s ease; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.unit-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-2); margin-bottom: var(--s-5); flex-wrap: wrap; }
.unit-head h3 { font-family: var(--serif); font-size: 27px; font-weight: 500; margin: 0; }
.unit-head-right { display: flex; align-items: center; gap: var(--s-4); }
.pot-pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); background: rgba(44,58,47,0.07); border: 1px solid rgba(44,58,47,0.2); padding: 6px 11px; border-radius: var(--r-pill); animation: cardIn .3s ease; }
.unit-drop { background: none; border: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 0; min-height: 40px; }
.unit-drop:hover { color: var(--rust); }
.unit-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.addr-state { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.field-block { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px dashed var(--line-2); }
.field-block:last-of-type { border-bottom: none; padding-bottom: 0; }
.fl { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: var(--s-4); }
.fl-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-left: 8px; }

/* ---------- Objektart-Karten ---------- */
.typecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.typecard { position: relative; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-height: 84px; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.typecard:hover { border-color: var(--forest-2); transform: translateY(-1px); }
.typecard.on { border-color: var(--forest); background: rgba(44,58,47,0.05); box-shadow: inset 0 0 0 1px var(--forest); }
.tc-name { font-family: var(--serif); font-size: 21px; color: var(--ink); }
.tc-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.tc-tick { position: absolute; top: 12px; right: 14px; font-size: 13px; color: var(--forest); opacity: 0; transform: scale(0.5); transition: all .2s ease; }
.typecard.on .tc-tick { opacity: 1; transform: none; }

/* ---------- Felder ---------- */
.fgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4) var(--s-5); }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f.c2 { grid-column: span 2; } .f.c3 { grid-column: span 3; } .f.c4 { grid-column: span 4; }
.f.c5 { grid-column: span 5; } .f.c6 { grid-column: span 6; } .f.c7 { grid-column: span 7; } .f.c12 { grid-column: span 12; }
.f > label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.f .hint { font-size: 12.5px; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.f .hint.good { color: var(--forest); }
.f .hint.warn { color: var(--rust); }
.f input[type="text"], .f input[type="number"], .f input[type="email"], .f input[type="tel"], .f select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px; width: 100%; outline: none;
  min-height: 46px; transition: border-color .15s ease, box-shadow .15s ease;
}
.f input:focus, .f select:focus, .cost-row input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(44,58,47,0.09); }
.f input::placeholder { color: rgba(107,100,88,0.55); }
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.with-suffix { position: relative; display: flex; align-items: center; }
.with-suffix input { padding-right: 42px; }
.with-suffix > span { position: absolute; right: 13px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); pointer-events: none; }
.with-suffix.tight input { text-align: right; padding-right: 34px; }

.stepper { display: grid; grid-template-columns: 44px 1fr 44px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.stepper button { border: none; background: var(--cream); color: var(--ink-2); font-size: 18px; min-height: 46px; }
.stepper button:active { background: var(--cream-2); }
.stepper input { border: none !important; text-align: center; box-shadow: none !important; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.seg { display: flex; gap: 7px; flex-wrap: wrap; }
.seg button { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 15px; min-height: 42px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: var(--r-pill); transition: all .16s ease; }
.seg button:hover { border-color: var(--ink-3); }
.seg button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); animation: pop .22s ease; }
.seg.amens button.on { background: var(--forest); border-color: var(--forest); color: var(--cream); }
@keyframes pop { 0% { transform: scale(0.94) } 60% { transform: scale(1.04) } 100% { transform: none } }

/* ---------- Quellen-Badge ---------- */
.src-flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-2); }
.src-flag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.src-flag.own { border-color: rgba(44,58,47,0.35); color: var(--forest); background: rgba(44,58,47,0.05); }
.src-flag.own .dot { background: var(--forest); }
.src-flag.ext { border-color: rgba(184,130,47,0.4); color: #8a5f1c; background: rgba(184,130,47,0.07); }
.src-flag.ext .dot { background: var(--amber); }
.src-note { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; max-width: 64ch; }

/* ---------- Aktionsleiste ---------- */
.calc-actions { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.calc-actions .spacer { flex: 1; }
.calc-actions.sticky { position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(250,247,241,0) 0%, var(--paper) 30%); padding-bottom: var(--s-5); z-index: 20; }
.calc-fine { font-size: 13px; color: var(--ink-3); }
.btn.lg { padding: 15px 26px; font-size: 15px; min-height: 50px; }
.btn[disabled] { opacity: 0.38; pointer-events: none; }
.link-add { background: none; border: 1px dashed var(--line); border-radius: 3px; padding: 16px 18px; font-size: 14.5px; color: var(--ink-2); width: 100%; text-align: left; min-height: 52px; }
.link-add:hover { border-color: var(--forest); color: var(--forest); background: rgba(44,58,47,0.03); }

/* ---------- Kosten ---------- */
.cost-rows { display: grid; border-top: 1px solid var(--line); }
.cost-row { display: grid; grid-template-columns: 1.6fr 150px 1fr; gap: var(--s-5); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.cost-row .cn { font-size: 15px; color: var(--ink); }
.cost-row .cd { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.cost-row input { font: inherit; font-size: 15px; text-align: right; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px; width: 100%; background: var(--paper); outline: none; min-height: 46px; }
.cost-row .cv { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.assume-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(184,130,47,0.4); background: rgba(184,130,47,0.07); padding: 2px 7px; border-radius: var(--r-pill); margin-left: 7px; vertical-align: middle; }
.cost-row.finance-row { flex-wrap: wrap; }
.finance-sub { grid-column: 1 / -1; display: flex; gap: var(--s-4); padding-top: 12px; }
.finance-sub .f { flex: 0 0 120px; }
.finance-sub .f label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 6px; }

/* ---------- Rechenlauf ---------- */
.calcrun { min-height: 58vh; display: grid; place-items: center; padding: var(--s-8) var(--s-6); }
.calcrun-inner { width: 100%; max-width: 640px; }
.calcrun h2 { font-family: var(--serif); font-size: clamp(28px, 4vw, 38px); font-weight: 500; margin: 0 0 var(--s-5); }
.runlog { display: grid; border-top: 1px solid var(--line); }
.runline { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); opacity: 0; transform: translateY(4px); animation: runIn .4s ease forwards; }
@keyframes runIn { to { opacity: 1; transform: none } }
.runline .tick { font-family: var(--mono); font-size: 13px; color: var(--forest); }
.runline .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.runbar { height: 3px; background: var(--cream-2); margin-top: var(--s-6); overflow: hidden; border-radius: 2px; }
.runbar i { display: block; height: 100%; background: var(--forest); transition: width .45s ease; }

/* ---------- Consent-Gate ---------- */
.gate { display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--s-7); align-items: start; padding: var(--s-6) var(--s-6) var(--s-9); }
.gate-teaser { background: var(--forest); color: var(--cream); padding: var(--s-6); border-radius: 3px; }
.gate-teaser .eyebrow { color: rgba(245,239,228,0.62); }
.gate-teaser h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.12; margin: 10px 0 var(--s-5); color: var(--cream); }
.gate-rows { display: grid; border-top: 1px solid rgba(245,239,228,0.18); }
.gate-rowi { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 14px 0; border-bottom: 1px solid rgba(245,239,228,0.12); }
.gate-rowi .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,239,228,0.66); flex: none; }
.gate-rowi .v { font-family: var(--serif); font-size: 25px; color: var(--cream); text-align: right; }
.gate-rowi .v.locked { filter: blur(7px); user-select: none; }
.gate-ready { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #cfe0c2; margin-top: var(--s-5); }
.gate-ready .pulse { width: 8px; height: 8px; border-radius: 50%; background: #8fbf6e; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

.consent { border: 1px solid var(--line); border-radius: 3px; padding: var(--s-6); background: var(--paper); }
.consent h3 { font-family: var(--serif); font-size: 29px; font-weight: 500; margin: 0 0 8px; }
.consent > p { font-size: 15px; color: var(--ink-2); margin: 0 0 var(--s-5); max-width: 46ch; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 18px 0 6px; margin-top: var(--s-4); border-top: 1px solid var(--line-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--forest); }
.check .ct { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.check .ct b { color: var(--ink); font-weight: 500; }
.check .req { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); margin-left: 7px; white-space: nowrap; }
.consent-fine { font-size: 12.5px; color: var(--ink-3); margin-top: var(--s-4); line-height: 1.6; }

/* Honeypot field — invisible to a human, present in the DOM for a bot. */
.wr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================
   Report
   ========================================================= */
.res-hero { padding: var(--s-7) 0 var(--s-6); }
.res-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; margin: 8px 0 var(--s-5); max-width: 30ch; }
.res-big { display: grid; grid-template-columns: 1.25fr 1fr 0.85fr 1.05fr; border-top: 1px solid var(--line); }
.res-big .v-unit { font-size: 15px; color: var(--ink-3); font-family: var(--sans); }
.res-big > div { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-right: 1px solid var(--line-2); }
.res-big > div:last-child { border-right: none; }
.res-big .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.res-big .v { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.res-big .v.net { color: var(--forest); }
.res-big .s { font-size: 13px; color: var(--ink-3); margin-top: 7px; max-width: 34ch; }

/* ---------- Chart-Rahmen ---------- */
.chart { margin: var(--s-7) 0 0; padding: var(--s-6); border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.chart figcaption { max-width: 72ch; margin-bottom: var(--s-6); }
.chart-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--amber); }
.chart figcaption h4 { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2.4vw, 29px); line-height: 1.2; margin: 8px 0 0; color: var(--ink); text-wrap: pretty; }
.chart figcaption p { font-size: 13.5px; color: var(--ink-3); margin: 9px 0 0; }
.chart-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px dashed var(--line-2); max-width: 82ch; }
.chart-pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-4); }
.chart-pair .chart { margin-top: var(--s-4); }

/* Wasserfall */
.wf { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; }
.wf-col { display: flex; flex-direction: column; min-width: 0; }
.wf-val { font-family: var(--mono); font-size: 11px; color: var(--ink-2); text-align: center; margin-bottom: 7px; white-space: nowrap; }
.wf-track { position: relative; height: 230px; }
.wf-bar { position: absolute; left: 6%; right: 6%; border-radius: 1px; animation: grow .6s cubic-bezier(.2,.7,.3,1) both; transform-origin: bottom; }
@keyframes grow { from { transform: scaleY(0) } to { transform: none } }
.wf-bar.start { background: var(--ink-2); }
.wf-bar.down { background: var(--cream-2); border: 1px solid rgba(26,24,20,0.14); }
.wf-bar.end { background: var(--forest); }
.wf-link { position: absolute; left: 50%; right: -16%; border-top: 1px dashed rgba(26,24,20,0.2); }
.wf-lbl { font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 10px; line-height: 1.3; }
.wf-pct { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: center; margin-top: 3px; }

/* Monatssäulen */
.mc-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 240px; padding-right: 74px; }
.mc-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.mc-v { font-family: var(--mono); font-size: 10px; color: var(--forest); text-align: center; margin-bottom: 5px; min-height: 14px; white-space: nowrap; }
.mc-bar { background: var(--cream-2); border-radius: 1px 1px 0 0; animation: grow .6s cubic-bezier(.2,.7,.3,1) both; transform-origin: bottom; min-height: 2px; }
.mc-col.on .mc-bar { background: var(--forest); }
.mc-l { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); text-align: center; margin-top: 7px; }
.mc-col.on .mc-l { color: var(--ink); }
.mc-avg { position: absolute; left: 0; right: 74px; border-top: 1px dashed rgba(184,130,47,0.65); margin-bottom: 26px; }
.mc-avg span { position: absolute; left: 100%; bottom: -7px; font-family: var(--mono); font-size: 10.5px; line-height: 1; color: #8a5f1c; padding-left: 9px; white-space: nowrap; }

/* Rangbalken */
.br { display: grid; gap: 3px; }
.br-row { display: grid; grid-template-columns: minmax(120px, 0.9fr) 1fr auto; gap: var(--s-4); align-items: center; padding: 8px 0; }
.br-l { font-size: 14px; color: var(--ink-2); }
.br-row.on .br-l { color: var(--ink); }
.br-t { height: 16px; background: transparent; display: block; }
.br-t i { display: block; height: 100%; background: var(--cream-2); border-radius: 1px; animation: growx .55s cubic-bezier(.2,.7,.3,1) both; transform-origin: left; }
.br-row.on .br-t i { background: var(--forest); }
@keyframes growx { from { transform: scaleX(0) } to { transform: none } }
.br-v { font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }

/* Spannen-Plot */
.rp { display: grid; gap: 4px; }
.rp-row { display: grid; grid-template-columns: minmax(110px, 0.7fr) 1fr; gap: var(--s-5); align-items: center; padding: 16px 0 26px; }
.rp-l { font-size: 14.5px; color: var(--ink-2); }
.rp-t { position: relative; height: 10px; background: var(--cream); border-radius: 5px; }
.rp-span { position: absolute; top: 0; bottom: 0; background: rgba(44,58,47,0.22); border-radius: 5px; animation: growx .55s ease both; transform-origin: left; }
.rp-dot { position: absolute; top: -4px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--forest); border: 3px solid var(--paper); box-shadow: 0 1px 4px rgba(26,24,20,0.25); }
.rp-lo, .rp-hi { position: absolute; top: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-style: normal; white-space: nowrap; }
.rp-lo { transform: translateX(-50%); }
.rp-hi { transform: translateX(-50%); }
.rp-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--ink-3); border-top: 1px solid var(--line-2); padding-top: 8px; }

/* ---------- Hebel ---------- */
.levers { margin-top: var(--s-7); }
.chart.wide { background: var(--cream); }
.lv { display: grid; gap: 0; }
.lv-row { display: grid; grid-template-columns: 34px 1fr 220px; gap: var(--s-5); align-items: start; padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.lv-row:first-child { border-top: none; }
.lv-rank { font-family: var(--serif); font-size: 30px; color: var(--ink-3); line-height: 1; }
.lv-row.on .lv-rank { color: var(--forest); }
.lv-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lv-top b { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.lv-eff { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); padding: 3px 8px; border-radius: var(--r-pill); }
.lv-track { height: 10px; background: rgba(26,24,20,0.06); border-radius: 5px; margin: 12px 0 10px; overflow: hidden; }
.lv-track i { display: block; height: 100%; background: var(--forest-2); border-radius: 5px; animation: growx .6s cubic-bezier(.2,.7,.3,1) both; transform-origin: left; }
.lv-row.on .lv-track i { background: var(--forest); }
.lv-how { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; max-width: 64ch; }
.lv-num { text-align: right; }
.lv-delta { font-family: var(--serif); font-size: 30px; color: var(--forest); line-height: 1; font-variant-numeric: tabular-nums; }
.lv-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; }
.lv-split { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

.lever-after { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; border: 1px solid var(--line); border-top: none; background: var(--paper); padding: var(--s-5) var(--s-6); }
.lever-after .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.lever-after .v { font-family: var(--serif); font-size: 28px; color: var(--ink); }
.lever-after .v.net { color: var(--forest); }
.lever-after .arrow { font-family: var(--serif); font-size: 26px; color: var(--ink-3); }
.lever-after .btn { margin-left: auto; }

/* ---------- Objekt-Detail ---------- */
.unit-details { margin-top: var(--s-7); }
.unit-res { border: 1px solid var(--line); border-radius: 3px; margin-bottom: 10px; background: var(--paper); }
.unit-res summary { display: grid; grid-template-columns: 1fr auto 24px; gap: var(--s-5); align-items: center; padding: var(--s-5) var(--s-6); cursor: pointer; list-style: none; }
.unit-res summary::-webkit-details-marker { display: none; }
.unit-res summary h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0 0 4px; }
.unit-res summary .sub { font-size: 13px; color: var(--ink-3); }
.unit-res .net-big { font-family: var(--serif); font-size: 26px; color: var(--forest); text-align: right; white-space: nowrap; }
.unit-res .net-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: right; margin-top: 3px; }
.unit-res .chev { font-family: var(--serif); font-size: 0; color: var(--ink-3); text-align: right; line-height: 1; }
.unit-res .chev::before { content: "+"; font-size: 26px; }
.unit-res[open] .chev::before { content: "–"; }
.unit-res-body { display: grid; grid-template-columns: 1.15fr 1fr; border-top: 1px solid var(--line); }
.unit-res-body > section { padding: var(--s-5) var(--s-6) var(--s-6); border-right: 1px solid var(--line-2); min-width: 0; }
.unit-res-body > section:last-child { border-right: none; }
.subhead { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); }

.kv { display: grid; }
.kv-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .kk { color: var(--ink-2); }
.kv-row .kk small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kv-row .vv { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv-row.total { border-top: 1px solid var(--line); border-bottom: none; margin-top: 6px; padding-top: 13px; }
.kv-row.total .kk { color: var(--ink); }
.kv-row.total .vv { font-size: 16px; }
.kv-row.net .vv { color: var(--forest); }

/* ---------- Abschluss ---------- */
.res-cta { background: var(--forest); color: var(--cream); padding: var(--s-7); border-radius: 3px; margin: var(--s-7) 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); align-items: center; }
.res-cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; margin: 0 0 var(--s-3); color: var(--cream); }
.res-cta p { font-family: var(--serif); font-size: 18px; color: rgba(245,239,228,0.86); margin: 0; max-width: 48ch; }
.res-cta .acts { display: flex; flex-direction: column; gap: 10px; }
.res-cta .btn.ghost { color: var(--cream); border-color: rgba(245,239,228,0.34); }

.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); padding: var(--s-6) 0 var(--s-7); border-top: 1px solid var(--line); }
.method h4 { font-family: var(--serif); font-size: 21px; font-weight: 500; margin: 10px 0 8px; }
.method p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; max-width: 44ch; }
.disclaim { font-size: 12.5px; color: var(--ink-3); line-height: 1.65; max-width: 88ch; padding-bottom: var(--s-8); }

/* =========================================================
   Responsiv — Tablet
   ========================================================= */
@media (max-width: 1040px) {
  .chart-pair, .unit-res-body, .res-cta, .method, .gate { grid-template-columns: 1fr; }
  .unit-res-body > section { border-right: none; border-bottom: 1px solid var(--line-2); }
  .res-big { grid-template-columns: 1fr 1fr; }
  .res-big > div:nth-child(2n) { border-right: none; }
  .res-big > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .lv-row { grid-template-columns: 30px 1fr; }
  .lv-num { text-align: left; grid-column: 2; margin-top: 4px; }
  .typecards { grid-template-columns: 1fr; }
  .gate { padding-top: var(--s-5); }
}

/* =========================================================
   Responsiv — Mobil
   ========================================================= */
@media (max-width: 720px) {
  .calc-page { padding: 0 18px; }
  .calc-head { padding-top: var(--s-6); }
  .calc-head .lede { font-size: 17px; }
  .calc-card { padding: 18px 18px 22px; }
  .fgrid { gap: 14px; }
  .f.c2, .f.c3, .f.c4, .f.c5, .f.c6, .f.c7 { grid-column: span 12; }
  .f.c2.half, .stepper-col { grid-column: span 6; }
  .steps { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line-2); }
  .step { border-bottom: 1px solid var(--line-2); padding: 11px 12px; }
  .unit-head h3 { font-size: 23px; }
  .unit-head-right { width: 100%; justify-content: space-between; }

  .calc-actions.sticky { margin-left: -18px; margin-right: -18px; padding: 14px 18px 16px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -14px rgba(26,24,20,0.4); }
  .calc-actions.sticky .calc-fine { flex-basis: 100%; order: 3; margin-top: 4px; }
  .calc-actions.sticky .btn { flex: 1; justify-content: center; }
  .calc-actions.sticky .spacer { display: none; }

  .cost-row { grid-template-columns: 1fr 118px; gap: 12px; }
  .cost-row .cv { grid-column: 1 / -1; padding-top: 2px; }

  .res-big { grid-template-columns: 1fr; }
  .res-big > div { border-right: none; border-bottom: 1px solid var(--line-2); padding-right: 0; }
  .chart { padding: 20px 18px 22px; }
  .chart figcaption { margin-bottom: 22px; }

  /* Wasserfall wird auf Mobil zur Rangliste — lesbarer als 7 Mini-Säulen */
  .wf { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .wf-col { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
  .wf-track { display: none; }
  .wf-lbl { text-align: left; margin: 0; font-size: 14.5px; color: var(--ink); }
  .wf-val { margin: 0; text-align: right; font-size: 13px; order: 3; }
  .wf-pct { grid-column: 1; text-align: left; margin: 2px 0 0; }

  .mc-grid { height: 190px; gap: 3px; padding-right: 0; }
  .mc-avg { right: 0; }
  .mc-avg span { left: auto; right: 0; top: -15px; transform: none; background: var(--paper); padding: 0 3px; }
  .mc-v { display: none; }
  .mc-l { font-size: 8.5px; }
  .br-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .br-t { grid-column: 1 / -1; }
  .rp-row { grid-template-columns: 1fr; gap: 10px; padding-bottom: 30px; }

  .lv-row { grid-template-columns: 26px 1fr; gap: 14px; }
  .lv-top b { font-size: 19px; }
  .lv-delta { font-size: 25px; }
  .lever-after { padding: 18px; gap: 18px; }
  .lever-after .btn { margin-left: 0; width: 100%; justify-content: center; }

  .unit-res summary { grid-template-columns: 1fr auto; padding: 16px 18px; row-gap: 8px; }
  .unit-res .chev { display: none; }
  .unit-res-body > section { padding: 18px; }
  .res-cta { padding: 24px 20px; gap: 22px; }
  .gate { padding: 18px 18px var(--s-8); gap: 18px; }
  .gate-teaser, .consent { padding: 20px 18px 24px; }
  .gate-rowi { flex-direction: column; gap: 4px; align-items: flex-start; }
  .gate-rowi .v { text-align: left; font-size: 22px; }
  .method { gap: 26px; }
}

/* =========================================================
   SEO/AEO shell — server-rendered intro + FAQ around the client-side
   calculator (routes/tools.py). Not part of the original build spec's
   funnel; added so a non-JS-executing crawler sees more than an empty
   #calc-root, and so an FAQPage answer has real, human-readable text
   behind it.
   ========================================================= */
.calc-intro { padding-top: 56px; }
.calc-intro h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 50px); line-height: 1.08; margin: 10px 0 18px; max-width: 22ch; }
.calc-intro .lede { max-width: 58ch; }
.calc-intro-links { margin-top: 18px; }
.calc-intro-links a { color: var(--forest); }
.calc-faq-section { padding-bottom: 96px; }
.calc-faq-section h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.8vw, 34px); margin: 0 0 24px; }

.calc-faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.calc-faq details { border-bottom: 1px solid var(--line-2); padding: var(--s-4) 0; }
.calc-faq summary { font-family: var(--serif); font-size: 19px; color: var(--ink); cursor: pointer; list-style: none; padding-right: 28px; position: relative; }
.calc-faq summary::-webkit-details-marker { display: none; }
.calc-faq summary::after { content: "+"; position: absolute; right: 4px; top: 0; font-family: var(--serif); font-size: 20px; color: var(--ink-3); }
.calc-faq details[open] summary::after { content: "–"; }
.calc-faq p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: var(--s-3) 0 0; max-width: 72ch; }
.calc-faq p a { color: var(--forest); text-decoration: underline; }