/* Sebastian Cario — Unternehmenswert-Rechner
   Ergänzung zu style.css. Nur Klassen, die es dort nicht gibt.
   Muss extern liegen: der CSP des Hostings blockiert Inline-CSS. */

:root{
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --good: #33705c;   /* leicht angehobene Variante des Markengrüns, damit sie als Statusfarbe trägt */
  --warn: #a07208;
  --bad:  #a8332b;
  /* Kapitalstapel: eine Farbfamilie, dunkel = nachrangig, hell = vorrangig */
  --s-ek:   #24483e;
  --s-mezz: #2f5d4f;
  --s-vd:   #9db8ad;
  --s-bank: #d9e2dd;
}

/* ---------- Kleinteile, die sonst inline stünden ---------- */
.wordmark-link{text-decoration:none;color:var(--ink)}
.mb0{margin-bottom:0}
.mt0{margin-top:0}
.btn-sm{font-size:.85rem;padding:.4rem .8rem}
.reset-wrap{padding:0 1.05rem 1.05rem}
.sw-good{background:var(--good)}
.sw-warn{background:var(--warn)}
.sw-bad{background:var(--bad)}

/* ---------- Text ---------- */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.crumbs{font-size:0.88rem;color:var(--ink-soft);padding:1rem 0 0}
.crumbs a{color:var(--ink-soft)}
.crumbs span{padding:0 .4rem}
.tight{padding-top:1.25rem}
.src{font-size:0.9rem;color:var(--ink-soft);max-width:var(--measure)}
section > p,section > ul,section > ol,.faq p{max-width:var(--measure)}
ul.bullets{padding-left:1.25rem}
ul.bullets li{margin-bottom:.5em;max-width:var(--measure)}

.disclaim{font-size:.85rem;color:var(--ink-soft);padding-bottom:2.5rem}
.disclaim p{max-width:var(--measure);margin:0}
[hidden]{display:none !important}

/* ---------- Perspektiven-Umschalter ---------- */
.switch{display:inline-flex;border:1px solid var(--line);border-radius:3px;padding:3px;gap:3px;
  background:var(--paper-alt);margin:.35rem 0 1.5rem}
.switch button{font-family:var(--sans);font-size:.95rem;border:0;background:transparent;color:var(--ink-soft);
  padding:.5rem 1.1rem;border-radius:2px;cursor:pointer}
.switch button[aria-selected="true"]{background:var(--paper);color:var(--ink);font-weight:700;
  box-shadow:0 1px 2px rgba(28,31,29,.12)}

/* ---------- Rechner: Aufbau ---------- */
.calc{display:grid;grid-template-columns:20rem minmax(0,1fr);gap:1.35rem;align-items:start;margin-top:1.5rem}
@media (max-width:62rem){.calc{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.stack{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.box{border:1px solid var(--line);border-radius:4px;background:var(--paper);padding:1.1rem 1.2rem}
.box > h3{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .35em}
.box > .note{margin:0 0 1rem;font-size:.9rem;color:var(--ink-soft);max-width:60ch}

/* ---------- Rechner: Formular ---------- */
.calc fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:.85rem 1.05rem 1rem}
.calc fieldset:first-of-type{border-top:0}
.calc legend{padding:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft);font-weight:700}
.row{display:grid;grid-template-columns:1fr 5.6rem;gap:.5rem;align-items:center;margin-top:.6rem}
.row.wide{grid-template-columns:1fr}
.row label{font-size:.9rem;color:var(--ink-soft);line-height:1.35}
.row .hint{display:block;font-size:.76rem;opacity:.85}
.calc input[type=number],.calc select{width:100%;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:.9rem;text-align:right;padding:.3rem .45rem;border:1px solid var(--line);border-radius:3px;
  background:#fff;color:var(--ink)}
.calc select{text-align:left;font-family:var(--sans)}
.calc details.adv{border:0;border-top:1px solid var(--line);padding:0}
.calc details.adv:last-of-type{border-bottom:0}
.calc details.adv > summary{padding:.75rem 1.05rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-soft);font-weight:700;list-style:none}
.calc details.adv > summary::-webkit-details-marker{display:none}
.calc details.adv > summary::before{content:"\25B8 ";color:var(--accent)}
.calc details.adv[open] > summary::before{content:"\25BE "}
.calc details.adv fieldset:first-of-type{border-top:1px solid var(--line)}
.calc details p{margin:0;color:inherit}

/* ---------- Kennzahlen ---------- */
/* Feste Spaltenzahlen statt auto-fit: 4 Kacheln gehen glatt durch 1, 2 und 4 auf,
   sonst bleibt bei drei Spalten eine leere Zelle als grauer Block stehen. */
.hero-nums{display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media (min-width:26rem){.hero-nums{grid-template-columns:repeat(2,1fr)}}
@media (min-width:75rem){.hero-nums{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--paper);padding:.9rem 1.05rem}
.tile.lead-tile{background:var(--paper-alt)}
.tile .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft);font-weight:700}
.tile .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.6rem;letter-spacing:-.02em;
  margin-top:.25rem;line-height:1.15}
.tile .v small{font-size:.85rem;color:var(--ink-soft)}
.tile .n{font-size:.78rem;color:var(--ink-soft);margin-top:.3rem;line-height:1.4}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;border-radius:999px;
  padding:.1rem .6rem;border:1px solid}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.p-good{color:var(--good);border-color:color-mix(in oklab,var(--good) 40%,transparent);background:color-mix(in oklab,var(--good) 9%,var(--paper))}
.p-warn{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 40%,transparent);background:color-mix(in oklab,var(--warn) 11%,var(--paper))}
.p-bad{color:var(--bad);border-color:color-mix(in oklab,var(--bad) 40%,transparent);background:color-mix(in oklab,var(--bad) 9%,var(--paper))}

/* ---------- Kapitalstapel ---------- */
.cap{display:flex;height:2.4rem;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.cap span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;
  font-weight:700;color:#fff;min-width:0;overflow:hidden;white-space:nowrap;flex-basis:0}
.cap .z-ek{background:var(--s-ek)}
.cap .z-mezz{background:var(--s-mezz)}
.cap .z-vd{background:var(--s-vd);color:var(--ink)}
.cap .z-bank{background:var(--s-bank);color:var(--ink)}
.caplegend{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.7rem;margin-top:.8rem;font-size:.82rem}
.caplegend div{border-top:3px solid var(--line);padding-top:.4rem;color:var(--ink-soft)}
.caplegend b{display:block;font-family:var(--mono);font-size:.85rem;color:var(--ink);font-weight:700}
.caplegend .l-ek{border-color:var(--s-ek)}
.caplegend .l-mezz{border-color:var(--s-mezz)}
.caplegend .l-vd{border-color:var(--s-vd)}
.caplegend .l-bank{border-color:var(--s-bank)}
.derived{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);margin:.6rem 0 0;line-height:1.45}
.derived b{color:var(--ink);font-weight:700}
.box .after{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-soft);max-width:70ch}
.box .after b{color:var(--ink)}

/* ---------- Grenzen-Balken ---------- */
.limits{display:flex;flex-direction:column;gap:.8rem}
.lim{display:grid;grid-template-columns:11.5rem minmax(0,1fr) 5.5rem;gap:.9rem;align-items:center}
@media (max-width:44rem){.lim{grid-template-columns:1fr;gap:.2rem}}
.lim .name{font-size:.9rem;line-height:1.3}
.lim .name span{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);margin-top:.15rem}
.track{height:1rem;background:var(--paper-alt);border:1px solid var(--line);border-radius:2px;position:relative;overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);opacity:.32;border-radius:1px 3px 3px 1px}
.lim.bind .fill{opacity:1}
.lim .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.9rem;text-align:right;color:var(--ink-soft)}
.lim.bind .val{color:var(--ink);font-weight:700}
.lim .tag{font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-weight:700}
.need{position:absolute;top:-3px;bottom:-3px;left:0;width:2px;background:var(--bad)}

/* ---------- Tabellen ---------- */
.scroll{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data th{text-align:right;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);
  font-weight:700;padding:0 0 .45rem;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:bottom}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data td{padding:.4rem 0;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.data td:first-child{font-family:var(--sans);white-space:normal}
table.data th+th,table.data td+td{padding-left:1.1rem}
table.data tr:last-child td{border-bottom:0}
table.data tr.tot td{font-weight:700;border-top:1px solid var(--ink-soft);border-bottom:0}
table.data td.spacer-row{border:0;height:.7rem;padding:0}
table.data td.kpi-note{font-family:var(--sans);text-align:left;color:var(--ink-soft);font-size:.85rem;
  padding-top:.6rem;border:0;white-space:normal}

table.prose-tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.25rem 0}
table.prose-tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-soft);font-weight:700;padding:0 0 .5rem;border-bottom:1px solid var(--line)}
table.prose-tbl td{padding:.6rem 0;border-bottom:1px solid var(--line);vertical-align:top}
table.prose-tbl th+th,table.prose-tbl td+td{padding-left:1.5rem}
table.prose-tbl td:last-child,table.prose-tbl th:last-child{text-align:right;white-space:nowrap}
table.prose-tbl tr:last-child td{border-bottom:0}

.chip{display:inline-block;padding:.05rem .45rem;border-radius:2px;font-family:var(--mono);font-size:.82rem;font-weight:700}
.c-good{color:var(--good);background:color-mix(in oklab,var(--good) 12%,var(--paper))}
.c-warn{color:var(--warn);background:color-mix(in oklab,var(--warn) 14%,var(--paper))}
.c-bad{color:var(--bad);background:color-mix(in oklab,var(--bad) 12%,var(--paper))}

/* ---------- Sensitivitätsraster ---------- */
table.grid{border-collapse:separate;border-spacing:2px;width:auto;font-size:.85rem}
table.grid th{border:0;padding:0 .4rem .4rem;text-align:center;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-soft);font-weight:700}
table.grid th.rh{text-align:right;padding:0 .5rem 0 0;font-family:var(--mono);font-size:.8rem;
  text-transform:none;letter-spacing:0;color:var(--ink-soft);font-weight:400;vertical-align:middle}
table.grid td{border:0;text-align:center;padding:.45rem .4rem;border-radius:2px;min-width:3.5rem;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.g-good{color:var(--good);background:color-mix(in oklab,var(--good) 14%,var(--paper))}
.g-warn{color:var(--warn);background:color-mix(in oklab,var(--warn) 16%,var(--paper))}
.g-bad{color:var(--bad);background:color-mix(in oklab,var(--bad) 13%,var(--paper))}
.legend{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.8rem;font-size:.85rem;color:var(--ink-soft)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.4rem;vertical-align:-1px}