:root {
  --blau: #00397D; --primaer: #00397D; --auf-primaer: #FFFFFF; --akzent: #66BC29; --warn: #FFD500;
  --rot: #C0392B; --text: #373F47; --text2: #5C5C5C; --bg: #F7F7F7; --flaeche: #FFFFFF;
  --linie: #D9E1EC; --hover: #265791; --feld: #FFFFFF; --unter: #FFF6CC; --minusbg: #FBE3E0;
}
@media (prefers-color-scheme: dark) {
  :root { --primaer: #00B3DC; --auf-primaer: #14181B; --text: #E8EAED; --text2: #9AA4AB; --bg: #14181B;
    --flaeche: #2B3338; --linie: #3D474E; --hover: #33C3E4; --feld: #1C2226; --unter: #4A4320;
    --minusbg: #4A2622; --rot: #FF8A7A; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5;
  font: 15px/1.5 "Acumin Pro", Roboto, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.kopf { background: var(--blau); color: #fff; display: flex; align-items: center; gap: 24px; padding: 10px 16px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; }
.kopf nav { display: flex; gap: 4px; flex: 1; }
.kopf nav a { color: #fff; text-decoration: none; padding: 6px 12px; border-bottom: 3px solid transparent; }
.kopf nav a[aria-current], .kopf nav a:hover { border-bottom-color: var(--warn); }
.abmelden { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.abmelden .schlicht { color: #fff; border-color: rgba(255,255,255,.5); }
main { max-width: 1500px; margin: 0 auto; padding: 16px; }
footer { color: var(--text2); font-size: 13px; padding: 8px 16px 24px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 8px; color: var(--primaer); }
h2 { font-size: 17px; margin: 0 0 8px; color: var(--primaer); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); padding: 16px; margin-bottom: 16px; }
.schmal { max-width: 380px; margin: 48px auto; }
.zweispaltig { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; } }
fieldset { border: 0; border-top: 1px solid var(--linie); margin: 14px 0 0; padding: 10px 0 0; }
legend { font-weight: 700; padding: 0 8px 0 0; color: var(--primaer); }
label { display: block; margin: 8px 0; font-size: 14px; }
small { display: block; color: var(--text2); font-size: 12.5px; font-weight: 400; }
input, select { font: inherit; color: var(--text); background: var(--feld); border: 1px solid var(--linie);
  border-radius: 0; padding: 6px 8px; width: 100%; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--primaer); outline-offset: 1px; }
.feld { display: flex; align-items: stretch; margin-top: 2px; }
.feld input { text-align: right; flex: 1; min-width: 0; }
.feld i { font-style: normal; background: var(--bg); border: 1px solid var(--linie); border-left: 0; padding: 6px 8px;
  color: var(--text2); white-space: nowrap; font-size: 13px; }
.kanaltabelle { width: 100%; margin: 6px 0; }
.kanaltabelle th { text-align: left; font-weight: 400; padding: 2px 6px 2px 0; }
.kanaltabelle thead th { font-size: 12.5px; color: var(--text2); text-align: right; }
.kanaltabelle td { padding: 2px 0 2px 6px; width: 32%; }
.kanaltabelle input { text-align: right; }
button, .knopf { font: inherit; border-radius: 0; cursor: pointer; padding: 8px 16px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text); text-decoration: none; display: inline-block; }
.aktion { background: var(--akzent); border-color: var(--akzent); color: #14181B; font-weight: 700; }
.schlicht { background: transparent; padding: 3px 10px; font-size: 13px; }
.knopfreihe { display: flex; gap: 8px; margin-top: 10px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--primaer); padding: 12px 14px; }
.kachel span { font-size: 13px; color: var(--text2); }
.kachel strong { display: block; font-size: 26px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kachel.minus { border-top-color: var(--rot); }
.kachel.minus strong { color: var(--rot); }
.rollen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 5px 10px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
tbody th, thead th:first-child { text-align: left; font-weight: 400; }
thead th { font-size: 13px; color: var(--text2); font-weight: 600; }
td.links { text-align: left; white-space: normal; }
tr.summe th, tr.summe td { font-weight: 700; }
td.minus { color: var(--rot); }
.matrix td { min-width: 84px; }
.matrix td.unter { background: var(--unter); }
.matrix td.minus { background: var(--minusbg); }
.matrix td.aktuell { outline: 2px solid var(--primaer); outline-offset: -2px; font-weight: 700; }
.hinweis { color: var(--text2); font-size: 13.5px; margin: 4px 0 10px; max-width: 80ch; }
.legende { font-size: 13px; color: var(--text2); margin: 8px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.probe { width: 14px; height: 14px; display: inline-block; border: 1px solid var(--linie); margin-left: 10px; }
.probe.unter { background: var(--unter); margin-left: 0; } .probe.minus { background: var(--minusbg); }
.strich { width: 22px; height: 0; border-top: 3px solid var(--primaer); display: inline-block; }
.strich.plan { border-top: 2px dashed var(--text2); margin-left: 10px; }
.meldung { padding: 10px 12px; border-left: 4px solid var(--primaer); background: var(--bg); margin: 0 0 12px; }
.meldung.fehler { border-color: var(--rot); } .meldung.warnung { border-color: var(--warn); } .meldung.ok { border-color: var(--akzent); }
svg { width: 100%; height: auto; display: block; }
.gitter { stroke: var(--linie); } .grenze { stroke: var(--rot); stroke-dasharray: 4 4; }
.achse { fill: var(--text2); font-size: 11px; }
.reihe { fill: none; stroke-linejoin: round; } .reihe.szenario { stroke: var(--primaer); stroke-width: 2.5; }
.reihe.plan { stroke: var(--text2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tief { fill: var(--rot); }
.liste { margin: 0; padding-left: 18px; } .liste li { margin: 4px 0; } .liste form { display: inline; margin-left: 8px; }
th small { margin-top: 2px; }
#ergebnis.laedt { opacity: .55; transition: opacity .15s; }
.knopf.gewaehlt { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
a.knopf.aktion { color: #14181B; }
/* Mappen: Blattansicht im Stil der Excel */
.blattliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.blattliste a { border: 1px solid var(--linie); border-left: 5px solid var(--linie); padding: 6px 10px; text-decoration: none; color: var(--text); }
.blattliste a:hover { background: var(--bg); }
.blattkopf { font-size: 14px; margin: 0 0 8px; }
.gitter-rahmen { overflow: auto; max-height: calc(100vh - 190px); border: 1px solid #B4BABE; background: #FFFFFF; }
table.excel { border-collapse: collapse; table-layout: fixed; color: #373F47; font-size: 13px; font-variant-numeric: tabular-nums; }
table.excel td, table.excel th { border: 1px solid #E3E6E8; padding: 2px 5px; height: 21px; white-space: nowrap; overflow: hidden; text-align: left; text-overflow: clip; }
table.excel thead th, table.excel tbody th { background: #EDEDED; color: #5C5C5C; font-weight: 400; text-align: center; position: sticky; z-index: 1; font-size: 12px; }
table.excel thead th { top: 0; z-index: 2; } table.excel tbody th { left: 0; }
table.excel td:target { outline: 3px solid #66BC29; outline-offset: -3px; }
.blattreiter { display: flex; gap: 2px; overflow-x: auto; padding: 6px 0 2px; }
.blattreiter a { flex: none; padding: 5px 12px; border: 1px solid var(--linie); border-top: 4px solid var(--linie); background: var(--flaeche); color: var(--text); text-decoration: none; font-size: 13px; }
.blattreiter a[aria-current] { font-weight: 700; background: var(--bg); }
main:has(.gitter-rahmen) { max-width: none; }
.blattkopf a, .karte a:not(.knopf) { color: var(--primaer); }
/* Diagramme */
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.diagramm { margin: 0; }
.nulllinie { stroke: var(--text2); stroke-width: 1; }
.reihe.r1 { stroke: var(--primaer); stroke-width: 2.5; } .reihe.r2 { stroke: #00B3DC; stroke-width: 2; } .reihe.r3 { stroke: #8A9298; stroke-width: 2; }
.punkt.r1 { fill: var(--primaer); } .punkt.r2 { fill: #00B3DC; } .punkt.r3 { fill: #8A9298; }
.saeule.r1 { fill: var(--primaer); } .saeule.r2 { fill: #B4BABE; } .saeule.r3 { fill: #00B3DC; }
.saeule.minus.r1 { fill: var(--rot); }
.marke { width: 12px; height: 12px; display: inline-block; margin-left: 12px; }
.marke:first-child { margin-left: 0; }
.marke.r1 { background: var(--primaer); } .marke.r2 { background: #B4BABE; } .marke.r3 { background: #00B3DC; }
@media (prefers-color-scheme: dark) { .reihe.r2 { stroke: #7FD9EE; } .punkt.r2 { fill: #7FD9EE; } }
table.excel td.frei { overflow: visible; }
.diagramm .legende { font-size: 14px; margin-top: 6px; }
.diagramm .achse { font-size: 12px; }
.diagramm svg { max-height: 340px; }