/* ============================================================
   ROI-Rechner — Komponenten-Styles (Immomio Design System)
   Tokens stammen aus assets/colors_and_type.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root{
  /* Akzentfarbe für Ergebnis-Hervorhebung (per Tweak umschaltbar) */
  --accent:        var(--im-color-positive);
  --accent-dark:   var(--im-color-positive-dark);
  --accent-light:  var(--im-color-positive-light);
  --accent-lighter:var(--im-color-positive-lighter);
  /* Petrol für die Hervorhebung des gewählten Zeitraums in den Mini-Charts */
  --petrol:        oklch(0.55 0.085 205);
  --petrol-light:  oklch(0.86 0.05 205);
}

html,body{ margin:0; padding:0; }
body{
  background:var(--im-color-bg-primary);
  color:var(--im-color-text-primary);
  font-family:var(--im-font-sans);
}
button{ font-family:inherit; }
a.btn, .btn{ text-decoration:none; }

.roi-root{ min-height:100vh; display:flex; flex-direction:column; }

/* ---------- Layout container ---------- */
.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 32px; }
@media (max-width:768px){ .wrap{ padding:0 18px; } }

/* ════════════════════ HEADER ════════════════════ */
.site-head{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--im-color-border);
  backdrop-filter:saturate(1.1);
}
.site-head .bar{
  display:flex; align-items:center; gap:28px;
  height:68px;
}
.brand{ display:flex; align-items:center; gap:0; flex:none; }
.brand img{ height:30px; width:auto; display:block; }
.brand .ph{
  font:700 11px/1 var(--im-font-sans); letter-spacing:.04em;
  color:var(--im-color-text-secondary); text-transform:uppercase;
  border:1px dashed var(--im-color-border-dark); border-radius:6px;
  padding:3px 6px; margin-left:12px;
}
.head-nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.head-nav a{
  padding:8px 12px; border-radius:8px; text-decoration:none;
  color:var(--im-color-text-secondary);
  font:600 15px/1 var(--im-font-sans); letter-spacing:.01em;
  transition:background-color 120ms ease, color 120ms ease;
}
.head-nav a:hover{ background:var(--im-color-bg-tertiary); color:var(--im-color-text-primary); }
.head-nav a[aria-current="true"]{ color:var(--im-color-primary); }
.head-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
@media (max-width:1040px){
  .head-nav{ display:none; }
}
@media (max-width:560px){
  .brand .ph{ display:none; }
  .head-right .btn.login{ display:none; }
  .site-head .bar{ gap:14px; }
}

/* ════════════════════ HERO ════════════════════ */
.hero{
  background:var(--im-color-secondary);
  color:#fff;
  position:relative; overflow:hidden;
}
.hero .wrap{ padding-top:64px; padding-bottom:96px; }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:700 13px/1 var(--im-font-sans); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  padding:7px 12px; border-radius:9999px; margin:0 0 22px;
}
.hero h1{
  font-size:clamp(2.2rem, 4.2vw, 3.4rem); line-height:1.08;
  font-weight:700; color:#fff; margin:0 0 18px; max-width:18ch;
  letter-spacing:-.01em; text-wrap:balance;
}
.hero h1 .hl{ color:var(--im-color-good); }
.hero p.lede{
  font-size:1.18rem; line-height:1.55; color:rgba(255,255,255,.78);
  margin:0; max-width:54ch;
}
.hero .trust{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px;
}
.hero .trust span{
  display:inline-flex; align-items:center; gap:8px;
  font:600 14px/1 var(--im-font-sans); color:rgba(255,255,255,.8);
}
.hero .trust svg{ width:18px; height:18px; color:var(--im-color-good); stroke-width:2; }

/* decorative roof marks */
.hero .deco{
  position:absolute; right:-40px; top:-30px; bottom:-30px; width:46%;
  opacity:.06; pointer-events:none;
}
@media (max-width:768px){ .hero .deco{ display:none; } .hero .wrap{ padding-bottom:64px; } }

/* The calculator floats up over the hero's lower edge */
.calc-shell{ margin-top:-64px; position:relative; z-index:5; padding-bottom:80px; }
@media (max-width:768px){ .calc-shell{ margin-top:-40px; } }

/* ════════════════════ CARD ════════════════════ */
.card{
  background:var(--im-color-container);
  border-radius:var(--im-radius-lg);
  box-shadow:var(--im-shadow-hover);
  border:1px solid var(--im-color-border-light);
}
.card.flat{ box-shadow:var(--im-shadow-card); }
.card-pad{ padding:26px 28px; }
@media (max-width:768px){ .card-pad{ padding:20px 18px; } }

.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.card-head .ico-badge{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:grid; place-content:center;
  background:var(--im-color-primary-lighter); color:var(--im-color-primary-dark);
}
.card-head .ico-badge svg{ width:22px; height:22px; stroke-width:1.6; }
.sec-title{ font:600 1.18rem/1.3 var(--im-font-sans); margin:0; color:var(--im-color-text-primary); }
.sec-sub{ font:400 .9rem/1.35 var(--im-font-sans); color:var(--im-color-text-secondary); margin:2px 0 0; }

.overline{
  font:700 .8125rem/1 var(--im-font-sans); letter-spacing:.04em;
  text-transform:uppercase; color:var(--im-color-text-secondary);
}

/* ════════════════════ FIELD / SLIDER ════════════════════ */
.field{ display:flex; flex-direction:column; gap:10px; }
.field-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.field-label{
  display:flex; align-items:center; gap:8px;
  font:600 .95rem/1.2 var(--im-font-sans); color:var(--im-color-text-primary);
}
.field-label .lh{ width:17px; height:17px; color:var(--im-color-text-secondary); flex:none; }
.field-val{
  font:700 1.05rem/1 var(--im-font-sans); color:var(--im-color-primary-dark);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.field-val .u{ font-weight:600; font-size:.82rem; color:var(--im-color-text-secondary); margin-left:3px; }

input[type=range].im-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:9999px; background:var(--im-color-grey); outline:none; margin:6px 0;
  cursor:pointer;
}
input[type=range].im-range:focus-visible{ outline:1px solid var(--im-color-primary); outline-offset:4px; }
input[type=range].im-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.22), 0 0 0 2px var(--im-color-primary) inset;
  transition:box-shadow 120ms ease;
}
input[type=range].im-range::-webkit-slider-thumb:hover{ box-shadow:0 1px 4px rgba(0,0,0,.28), 0 0 0 3px var(--im-color-primary) inset; }
input[type=range].im-range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#fff;
  border:2px solid var(--im-color-primary); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
}
.field-foot{ display:flex; justify-content:space-between; }
.field-foot span{ font:400 .78rem/1 var(--im-font-sans); color:var(--im-color-text-secondary); font-variant-numeric:tabular-nums; }

/* number stepper field (Eckdaten) */
.numfield{
  display:flex; align-items:center; gap:0;
  border:1px solid var(--im-color-border); border-radius:12px;
  background:#fff; box-shadow:var(--im-shadow-card); overflow:hidden;
  height:48px; width:100%;
}
.numfield button{
  width:42px; height:100%; border:0; background:transparent; cursor:pointer;
  color:var(--im-color-text-secondary); display:grid; place-content:center;
  transition:background-color 100ms ease, color 100ms ease;
}
.numfield button:hover{ background:var(--im-color-bg-tertiary); color:var(--im-color-primary); }
.numfield button svg{ width:18px; height:18px; stroke-width:2; }
.numfield input{
  flex:1; min-width:0; border:0; outline:0; text-align:center;
  font:700 1.15rem/1 var(--im-font-sans); color:var(--im-color-text-primary);
  font-variant-numeric:tabular-nums; background:transparent;
}

/* select field (Zeitraum dropdown) — matches numfield height */
.selectfield{ position:relative; height:48px; width:100%; }
.selectfield select{
  width:100%; height:100%; appearance:none; -webkit-appearance:none;
  border:1px solid var(--im-color-border); border-radius:12px; background:#fff;
  box-shadow:var(--im-shadow-card); padding:0 42px 0 16px;
  font:700 1.05rem/1 var(--im-font-sans); color:var(--im-color-text-primary);
  cursor:pointer; transition:border-color 100ms ease, background-color 100ms ease;
}
.selectfield select:hover{ border-color:var(--im-color-border-dark); background:var(--im-color-grey-lighter); }
.selectfield select:focus-visible{ outline:1px solid var(--im-color-primary); outline-offset:0; }
.selectfield svg{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke-width:2; color:var(--im-color-text-secondary);
  pointer-events:none;
}

/* ════════════════════ TOGGLE SWITCH ════════════════════ */
.tgl{ position:relative; width:46px; height:26px; flex:none; cursor:pointer; }
.tgl input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.tgl .track{
  position:absolute; inset:0; border-radius:9999px;
  background:var(--im-color-grey-dark);
  transition:background-color 140ms ease;
}
.tgl .knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform 140ms ease;
}
.tgl input:checked + .track{ background:var(--im-color-primary); }
.tgl input:checked ~ .knob{ transform:translateX(20px); }
.tgl input:focus-visible + .track{ outline:2px solid var(--im-color-primary); outline-offset:2px; }

/* ════════════════════ PRODUCT CARD ════════════════════ */
.prod{
  border:1px solid var(--im-color-border);
  border-radius:var(--im-radius-md);
  background:#fff; box-shadow:var(--im-shadow-card);
  transition:border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  overflow:hidden;
}
.prod.on{ border-color:var(--im-color-primary-light); }
.prod.off{ opacity:.62; }
.prod-head{
  display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer;
  user-select:none;
}
.prod-ico{
  width:44px; height:44px; border-radius:11px; flex:none; display:grid; place-content:center;
  background:var(--im-color-primary-lighter); color:var(--im-color-primary-dark);
  transition:background-color 140ms ease, color 140ms ease;
}
.prod.off .prod-ico{ background:var(--im-color-grey); color:var(--im-color-text-secondary); }
.prod-ico svg{ width:25px; height:25px; stroke-width:1.5; }
.prod-titles{ flex:1; min-width:0; }
.prod-name{ font:600 1.06rem/1.25 var(--im-font-sans); color:var(--im-color-text-primary); margin:0; }
.prod-desc{ font:400 .85rem/1.3 var(--im-font-sans); color:var(--im-color-text-secondary); margin:2px 0 0; }
.prod-headright{ display:flex; align-items:center; gap:14px; flex:none; }
.prod-mini{ text-align:right; }
.prod-mini .m-eur{ font:700 1.05rem/1 var(--im-font-sans); color:var(--accent-dark); font-variant-numeric:tabular-nums; }
.prod-mini .m-h{ font:600 .76rem/1 var(--im-font-sans); color:var(--im-color-text-secondary); margin-top:3px; }
.prod.off .prod-mini{ visibility:hidden; }

.prod-body{
  border-top:1px solid var(--im-color-border-light);
  padding:18px; display:grid; gap:20px;
  grid-template-columns:1fr 1fr;
}
@media (max-width:560px){ .prod-body{ grid-template-columns:1fr; } }
.prod-body .full{ grid-column:1 / -1; }
.driver{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:10px; background:var(--im-color-bg-tertiary);
}
.driver .dl{ font:400 .85rem/1.3 var(--im-font-sans); color:var(--im-color-text-secondary); display:flex; align-items:center; gap:7px; }
.driver .dl svg{ width:16px; height:16px; color:var(--im-color-text-secondary); }
.driver .dv{ font:700 1.05rem/1 var(--im-font-sans); color:var(--im-color-text-primary); font-variant-numeric:tabular-nums; }

/* eco / sustainability strip (digitale Signatur) */
.eco{
  border-top:1px solid var(--im-color-border-light);
  margin-top:2px; padding-top:16px;
  display:flex; flex-direction:column; gap:12px;
}
.eco-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.eco-title{
  display:flex; align-items:center; gap:8px;
  font:700 .82rem/1 var(--im-font-sans); letter-spacing:.03em; text-transform:uppercase;
  color:var(--im-color-good-dark);
}
.eco-title svg{ width:17px; height:17px; color:var(--im-color-good); }
.eco-note{
  display:flex; align-items:center; gap:7px;
  font:600 .82rem/1.3 var(--im-font-sans); color:var(--im-color-text-secondary);
}
.eco-note svg{ width:16px; height:16px; color:var(--im-color-text-secondary); flex:none; }
.eco-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:480px){ .eco-stats{ grid-template-columns:1fr; } }
.eco-pill{
  display:flex; align-items:center; gap:11px;
  background:var(--im-color-good-lighter); border-radius:10px; padding:11px 13px;
}
.eco-pill svg{ width:22px; height:22px; color:var(--im-color-good-dark); flex:none; }
.eco-pill > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.eco-pill .ep-v{ font:700 1.05rem/1 var(--im-font-sans); color:var(--im-color-good-dark); font-variant-numeric:tabular-nums; }
.eco-pill .ep-l{ font:600 .74rem/1.2 var(--im-font-sans); color:var(--im-color-text-secondary); }
.eco-foot{ margin-top:2px; }

/* ════════════════════ ANNAHMEN & KENNZAHLEN (KPIs) ════════════════════ */
.kpi-block{ border-top:1px solid var(--im-color-border-light); padding-top:16px; }
.kpi-toggle{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--im-color-bg-tertiary); border:1px solid var(--im-color-border-light);
  border-radius:10px; padding:11px 14px; cursor:pointer;
  transition:background-color 120ms ease, border-color 120ms ease;
}
.kpi-toggle:hover{ background:var(--im-color-grey-lighter); border-color:var(--im-color-border); }
.kpi-toggle.open{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent; }
.kpi-toggle > svg:first-child{ width:18px; height:18px; color:var(--im-color-primary); flex:none; }
.kt-label{ font:600 .92rem/1.2 var(--im-font-sans); color:var(--im-color-text-primary); }
.kt-spacer{ flex:1; min-width:8px; }
.kt-hint{ font:400 .8rem/1.2 var(--im-font-sans); color:var(--im-color-text-secondary); }
.kt-chev{ width:18px; height:18px; color:var(--im-color-text-secondary); flex:none; transition:transform 260ms ease; }
.kpi-badge{
  font:700 .66rem/1 var(--im-font-sans); letter-spacing:.03em; text-transform:uppercase;
  color:var(--im-color-primary-dark); background:var(--im-color-primary-lighter);
  border-radius:9999px; padding:4px 9px; flex:none;
}
@media (max-width:560px){ .kt-hint{ display:none; } }

.kpi-inner{
  border:1px solid var(--im-color-border-light); border-top:none;
  border-radius:0 0 10px 10px; padding:16px; background:var(--im-color-bg-primary);
  display:flex; flex-direction:column; gap:14px;
}
.kpi-intro{ font:400 .85rem/1.55 var(--im-font-sans); color:var(--im-color-text-secondary); margin:0; }
.kpi-list{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--im-color-border-light); border-radius:10px;
}
.kpi-row{
  display:flex; align-items:center; gap:18px;
  padding:13px 15px; border-bottom:1px solid var(--im-color-border-light);
}
.kpi-row:last-child{ border-bottom:none; }
.kpi-row.chg{ background:var(--im-color-primary-lighter); }
.kpi-row.chg:first-child{ border-radius:10px 10px 0 0; }
.kpi-row.chg:last-child{ border-radius:0 0 10px 10px; }
.kpi-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.kpi-label{
  display:flex; align-items:center; gap:7px;
  font:600 .92rem/1.3 var(--im-font-sans); color:var(--im-color-text-primary);
}
.kpi-dot{ width:7px; height:7px; border-radius:50%; background:var(--im-color-primary); flex:none; }
.kpi-hint{ font:400 .8rem/1.4 var(--im-font-sans); color:var(--im-color-text-secondary); }
.kpi-std{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px;
  font:400 .76rem/1.3 var(--im-font-sans); color:var(--im-color-text-secondary);
  font-variant-numeric:tabular-nums;
}
.kpi-reset{
  display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:0;
  cursor:pointer; color:var(--im-color-primary); font:600 .76rem/1 var(--im-font-sans);
}
.kpi-reset svg{ width:13px; height:13px; }
.kpi-reset:hover{ color:var(--im-color-primary-dark); text-decoration:underline; }

/* compact number editor — eigenständig, erbt NICHT vom großen .numfield */
.mininum{
  display:flex; align-items:stretch; flex:none;
  height:42px; min-width:134px; max-width:210px;
  border:1px solid var(--im-color-border); border-radius:10px;
  background:#fff; box-shadow:var(--im-shadow-card); overflow:hidden;
}
.mininum .mn-btn{
  width:36px; flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--im-color-text-secondary); display:grid; place-content:center;
  transition:background-color 100ms ease, color 100ms ease;
}
.mininum .mn-btn:hover:not(:disabled){ background:var(--im-color-bg-tertiary); color:var(--im-color-primary); }
.mininum .mn-btn:disabled{ opacity:.35; cursor:not-allowed; }
.mininum .mn-btn svg{ width:16px; height:16px; stroke-width:2; }
.mininum .mn-val{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:3px;
  padding:0 4px;
  border-left:1px solid var(--im-color-border-light);
  border-right:1px solid var(--im-color-border-light);
}
.mininum .mn-val input{
  border:0; outline:0; background:transparent; text-align:right; padding:0; min-width:0;
  font:700 1rem/1 var(--im-font-sans); color:var(--im-color-text-primary);
  font-variant-numeric:tabular-nums;
}
.mininum .mn-u{ font:600 .76rem/1 var(--im-font-sans); color:var(--im-color-text-secondary); flex:none; }

.kpi-formula{
  display:flex; flex-direction:column; gap:6px;
  padding:12px 14px; background:var(--im-color-primary-lighter); border-radius:10px;
}
.kf-lab{
  display:flex; align-items:center; gap:7px;
  font:700 .72rem/1 var(--im-font-sans); letter-spacing:.04em; text-transform:uppercase;
  color:var(--im-color-primary-dark);
}
.kf-lab svg{ width:14px; height:14px; }
.kf-body{ font:600 .88rem/1.55 var(--im-font-sans); color:var(--im-color-text-primary); font-variant-numeric:tabular-nums; text-wrap:pretty; }
.kpi-resetall{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--im-color-border); background:#fff; border-radius:10px;
  padding:9px 13px; cursor:pointer;
  font:600 .82rem/1 var(--im-font-sans); color:var(--im-color-text-secondary);
  transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.kpi-resetall:hover{ background:var(--im-color-bg-tertiary); border-color:var(--im-color-border-dark); color:var(--im-color-text-primary); }
.kpi-resetall svg{ width:15px; height:15px; }

/* "angepasst"-Markierung am Karten-Titel */
.prod-tag{
  display:inline-flex; align-items:center; margin-left:9px; vertical-align:1px;
  font:700 .62rem/1 var(--im-font-sans); letter-spacing:.04em; text-transform:uppercase;
  color:var(--im-color-primary-dark); background:var(--im-color-primary-lighter);
  border-radius:9999px; padding:3px 8px;
}

/* collapse animation */
.collapse{ display:grid; grid-template-rows:1fr; grid-template-columns:minmax(0,1fr); transition:grid-template-rows 260ms ease; }
.collapse.closed{ grid-template-rows:0fr; }
.collapse > .cinner{ overflow:hidden; min-height:0; min-width:0; }

/* ════════════════════ STAT TILE ════════════════════ */
.stat{
  border-radius:var(--im-radius-md); padding:18px 20px;
  background:#fff; border:1px solid var(--im-color-border-light);
}
.stat.accent{ background:var(--accent-lighter); border-color:transparent; }
.stat .s-lab{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.stat .s-lab svg{ width:18px; height:18px; }
.stat.accent .s-lab svg{ color:var(--accent-dark); }
.stat:not(.accent) .s-lab svg{ color:var(--im-color-primary); }
.stat .s-lab .ol{
  font:700 .75rem/1 var(--im-font-sans); letter-spacing:.04em; text-transform:uppercase;
  color:var(--im-color-text-secondary);
}
.stat .s-num{
  font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--im-color-text-primary); line-height:1;
}
.stat.accent .s-num{ color:var(--accent-dark); }
.stat .s-num .cur{ font-size:.56em; font-weight:600; margin-right:2px; vertical-align:.06em; }
.stat .s-sub{ font:400 .82rem/1.3 var(--im-font-sans); color:var(--im-color-text-secondary); margin-top:7px; }

.stat-hero{ background:var(--accent); border:none; padding:24px 24px 22px; border-radius:var(--im-radius-md); color:#fff; }
.stat-hero .s-lab .ol{ color:rgba(255,255,255,.82); }
.stat-hero .s-lab svg{ color:#fff; }
.stat-hero .s-num{ color:#fff; }
.stat-hero .s-sub{ color:rgba(255,255,255,.85); }

/* ════════════════════ BREAKDOWN BARS ════════════════════ */
.bd{ display:flex; flex-direction:column; gap:14px; }
.bd-row{ display:grid; grid-template-columns:1fr; gap:7px; }
.bd-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bd-name{ display:flex; align-items:center; gap:9px; font:600 .9rem/1.2 var(--im-font-sans); color:var(--im-color-text-primary); }
.bd-name .dot{ width:10px; height:10px; border-radius:3px; flex:none; }
.bd-val{ font:700 .92rem/1 var(--im-font-sans); color:var(--im-color-text-primary); font-variant-numeric:tabular-nums; }
.bd-val .h{ font-weight:600; font-size:.78rem; color:var(--im-color-text-secondary); margin-left:7px; }
.bd-track{ height:10px; border-radius:9999px; background:var(--im-color-grey); overflow:hidden; }
.bd-fill{ height:100%; border-radius:9999px; transition:width 420ms cubic-bezier(.4,0,.2,1); }
.bd-row.muted{ opacity:.4; }

/* segmented period control reuse */
.seg.period{ width:100%; }
.seg.period button{ flex:1; }

/* CTA band */
.cta-band{
  background:var(--im-color-secondary); border-radius:var(--im-radius-lg);
  padding:38px 40px; color:#fff; display:flex; align-items:center; gap:28px;
  flex-wrap:wrap;
}
.cta-band h3{ font:700 1.6rem/1.2 var(--im-font-sans); color:#fff; margin:0 0 8px; }
.cta-band p{ font:400 1rem/1.5 var(--im-font-sans); color:rgba(255,255,255,.8); margin:0; max-width:46ch; }
.cta-band .grow{ flex:1; min-width:240px; }

/* ════════════════════ FOOTER ════════════════════ */
.site-foot{ background:var(--im-color-secondary-dark); color:rgba(255,255,255,.7); margin-top:auto; }
.site-foot .wrap{ padding-top:46px; padding-bottom:40px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:768px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; } }
.foot-brand img{ height:26px; margin-bottom:14px; }
.foot-brand p{ font:400 .9rem/1.5 var(--im-font-sans); color:rgba(255,255,255,.55); margin:0; max-width:34ch; }
.foot-col h5{ font:700 .78rem/1 var(--im-font-sans); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 14px; }
.foot-col a{ display:block; color:rgba(255,255,255,.72); text-decoration:none; font:400 .92rem/1 var(--im-font-sans); padding:6px 0; }
.foot-col a:hover{ color:#fff; }
.foot-bar{ border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font:400 .82rem/1.4 var(--im-font-sans); color:rgba(255,255,255,.45); }

/* ════════════════════ LAYOUT: SPLIT-VIEW ════════════════════ */
.split{ display:grid; grid-template-columns:1fr 400px; gap:24px; align-items:start; }
.split > *{ min-width:0; }
@media (max-width:992px){ .split{ grid-template-columns:1fr; } }
.split-aside{ position:sticky; top:88px; }
@media (max-width:992px){ .split-aside{ position:static; } }
.stack{ display:flex; flex-direction:column; gap:20px; }

/* eckdaten grid */
.eck-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; }
@media (max-width:560px){ .eck-grid{ grid-template-columns:1fr; } }

/* ════════════════════ LAYOUT: DASHBOARD ════════════════════ */
.dash-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stat-hero{ padding:20px 22px 18px; }
@media (max-width:860px){ .dash-metrics{ grid-template-columns:1fr; } }

/* tile with embedded mini chart */
.tile-chart{ display:flex; flex-direction:column; }
.tile-chart .s-num{ margin-bottom:14px; }
.tile-chart-lab{
  font:700 .72rem/1 var(--im-font-sans); letter-spacing:.03em; text-transform:uppercase;
  color:var(--im-color-text-secondary); margin-top:6px; margin-bottom:8px;
}
/* Aufteilung box sitting in the metric row */
.tile-aufteilung{ display:flex; flex-direction:column; gap:14px; justify-content:flex-start; }
.tile-aufteilung .bd{ margin-top:0; }
.bd-total{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--im-color-border);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.bd-total .bt-lab{
  font:700 .8rem/1.2 var(--im-font-sans); letter-spacing:.03em; text-transform:uppercase;
  color:var(--im-color-text-secondary);
}
.bd-total .bt-val{
  font:700 1.6rem/1 var(--im-font-sans); color:var(--accent-dark);
  font-variant-numeric:tabular-nums; text-align:right;
}
.bd-total .bt-val .cur{ font-size:.56em; font-weight:600; }
.bd-total .bt-h{ display:block; font:600 .8rem/1 var(--im-font-sans); color:var(--im-color-text-secondary); margin-top:6px; }

/* plain result total (Split-View Ergebnis-Panel) */
.result-total{ display:flex; flex-direction:column; gap:6px; }
.result-total .rt-lab{ color:var(--im-color-text-secondary); }
.result-total .rt-num{
  font:700 3rem/1 var(--im-font-sans); color:var(--accent-dark);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.result-total .rt-num .cur{ font-size:.5em; font-weight:600; margin-right:2px; vertical-align:.08em; }
.result-total .rt-sub{ font:400 .88rem/1.4 var(--im-font-sans); color:var(--im-color-text-secondary); }
.stat-hero .tile-chart-lab{ color:rgba(255,255,255,.7); }
.stat.accent .tile-chart-lab{ color:var(--accent-dark); opacity:.8; }

/* mini cumulative bar chart inside a tile */
.mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:end; flex:1; min-height:110px; margin-top:2px; }
.mini-col{ display:flex; flex-direction:column; align-items:center; height:100%; }
.mini-val{
  font:700 .7rem/1 var(--im-font-sans); font-variant-numeric:tabular-nums;
  margin-bottom:6px; white-space:nowrap; color:var(--im-color-primary-dark);
}
.mini-unit{ font-weight:600; font-size:.84em; color:var(--im-color-text-secondary); }
.mini-col.hl .mini-unit{ color:var(--petrol); }
.mini-track{ flex:1; width:100%; max-width:38px; display:flex; align-items:flex-end; min-height:0; }
.mini-fill{
  width:100%; border-radius:5px 5px 0 0; background:var(--im-color-primary);
  transition:height 460ms cubic-bezier(.4,0,.2,1); min-height:0;
}
.mini-col.is-std .mini-track{ border-bottom:2px dashed var(--im-color-border-dark); }
.mini-col.is-std .mini-fill{ background:var(--im-color-grey-dark); }
.mini-col.is-std .mini-val{ color:var(--im-color-text-secondary); }
.mini-col.hl .mini-fill{ background:var(--petrol); box-shadow:0 0 0 3px var(--petrol-light); }
.mini-col.hl .mini-val{ color:var(--petrol); }
.mini-col.hl .mini-cap{ color:var(--petrol); font-weight:700; }
.mini-cap{ font:600 .66rem/1.1 var(--im-font-sans); margin-top:7px; color:var(--im-color-text-secondary); text-align:center; }

/* tone: bars on the green hero tile → white */
.mini.on-accent .mini-val{ color:#fff; }
.mini.on-accent .mini-fill{ background:rgba(255,255,255,.92); }
.mini.on-accent .mini-col.is-std .mini-track{ border-bottom-color:rgba(255,255,255,.35); }
.mini.on-accent .mini-col.is-std .mini-fill{ background:rgba(255,255,255,.4); }
.mini.on-accent .mini-col.is-std .mini-val{ color:rgba(255,255,255,.7); }
.mini.on-accent .mini-cap{ color:rgba(255,255,255,.72); }
.mini.on-accent .mini-col.hl .mini-fill{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4); }
.mini.on-accent .mini-col.hl .mini-val{ color:#fff; }
.mini.on-accent .mini-col.hl .mini-cap{ color:#fff; font-weight:700; }
/* tone: accent tile (lighter bg) → keep accent bars, dark caps already fine */
.stat.accent .mini-cap{ color:var(--accent-dark); opacity:.75; }
@media (max-width:860px){ .dash-metrics{ grid-template-columns:1fr; } }
.dash-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:860px){ .dash-cols{ grid-template-columns:1fr; } }
.eck-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:start; }
@media (max-width:860px){ .eck-bar{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .eck-bar{ grid-template-columns:1fr; } }

/* sub-header / variant switcher */
.subhead{
  position:sticky; top:68px; z-index:20;
  background:var(--im-color-bg-primary);
  border-bottom:1px solid var(--im-color-border-light);
}
.subhead .bar{ display:flex; align-items:center; gap:16px; height:60px; }
.subhead .vlabel{ font:600 .9rem/1 var(--im-font-sans); color:var(--im-color-text-secondary); }
.subhead .reset{ margin-left:auto; }

.divider{ height:1px; background:var(--im-color-border-light); margin:4px 0; }
.help-row{ display:flex; align-items:flex-start; gap:9px; color:var(--im-color-text-secondary); font:400 .82rem/1.4 var(--im-font-sans); }
.help-row svg{ width:15px; height:15px; flex:none; margin-top:2px; }