/* Schrift und Farben folgen dem Heliokraft-Webauftritt.

   Die Palette ist **nicht hier entworfen**, sondern aus dem Markenwiki der
   Webseite übernommen (`heliokraft.de/Wiki/Marke/Farben.md`), und dort wurde
   sie aus der Logodatei gelesen: `logo_schrift_transparenz.svg` enthält genau
   zwei Farbwerte — Petrol #23414B (die Buchstaben) und Warmgelb #FED464 (der
   Sonnenring).

   **Die harte Regel zu Gelb:** es trägt nie Text auf hellem Grund — 1,36:1
   gegen Papier. Gelb ist Fläche, Kante, Balken, Ring und Aktivmarkierung; die
   Struktur trägt Petrol. Auf dunklem Grund ist Gelb dagegen ausgezeichnet
   (10,6:1) und trägt dort die Aktion.

   **Zu den Flächen, und warum hier einmal umgeschwenkt wurde:** ursprünglich
   standen an dieser Stelle kühle, petrolgetönte Neutraltöne, mit der Begründung,
   die Sandtöne des Webauftritts wirkten in einer Anwendung voller Zahlen erdig
   und schwer. Das hat sich in der Anwendung nicht bewährt — der Hintergrund war
   zu bunt und zu dunkel für flächiges Lesen. Jetzt gelten die warmen Neutralen
   der Webseite unverändert. Ihre Begründung dort trägt auch hier: Petrol ist
   ein kühler Ton, ein exakt neutrales Grau daneben wirkt schmutzig, ein leicht
   warmes lässt das Petrol gesättigter erscheinen. Aus demselben Grund ist die
   Schriftfarbe kein Schwarz, sondern das dunkelste Petrol.

   Die Seriefarben sind **nicht** die Markenfarben — Datenreihen brauchen
   Unterscheidbarkeit, nicht Wiedererkennung. Sie sind gerechnet: WCAG-Kontrast
   gegen die Fläche, OKLab-ΔE für benachbarte Paare, dazu simuliert für Prot-,
   Deuter- und Tritanopie nach Viénot 1999. Die Zahlen stehen in
   docs/entscheidungen.md. Wer hier etwas ändert, rechnet nach — Farben lassen
   sich nicht ansehen, der Bildschirm des Entwicklers lügt. */


:root {
  color-scheme: light dark;

  /* --- Marke, unverändert aus dem Markenwiki --- */
  --petrol:       #23414b;   /* hk-petrol-700, die Logofarbe */
  --petrol-900:   #16292f;
  --petrol-800:   #1c343c;
  --petrol-600:   #2f5663;
  --petrol-100:   #d7e3e7;
  --petrol-50:    #eef4f6;
  --sonne:        #fed464;   /* hk-sun-500, der Sonnenring */
  --sonne-600:    #e9b435;
  --sonne-100:    #fff6dd;

  /* --- Flächen: drei Ebenen, von unten nach oben --- */
  --ebene:        #f4f2ee;   /* hk-paper-alt — die Seite */
  --flaeche:      #fbfaf8;   /* hk-paper     — die Karten darüber */
  --erhoben:      #ffffff;   /* Protokolle, Codeblöcke, ganz oben */
  --tief:         #ebe7df;   /* tiefer gelegt: Tabellenköpfe */

  /* --- Schrift --- */
  --text:         #16292f;   /* hk-ink, dunkelstes Petrol — kein Schwarz. 14,5:1 */
  --text-zweit:   #5c6a70;   /* hk-muted,    5,4:1 auf der Karte */
  --gedaempft:    #6b757a;   /* abgeleitet,  4,5:1 — die untere Grenze */
  --linie:        #e2dfd8;   /* hk-line */
  --rand:         #cdc7bb;   /* kräftigere Kante, abgeleitet */

  /* --- Semantik --- */
  --gruen:        #158f6b;
  --rot:          #c0392b;
  --gelb:         #d17908;   /* NICHT --sonne: Gelb trägt auf hellem Grund
                                keinen Text (1,36:1). Siehe Farben.md. */

  /* --- Bedienfarbe, getrennt von den Datenreihen --- */
  /* Chrome darf nie eine Seriefarbe tragen, sonst liest man Navigation als
     Datum. Die Bedienfarbe ist deshalb das Marken-Petrol und kommt in der
     Reihenliste unten nicht vor. */
  --aktion:       #23414b;
  --aktion-text:  #ffffff;
  --aktion-still: #2f5663;

  /* --- Datenreihen, gerechnet gegen die Karte #fbfaf8 --- */
  /* Benachbarte Paare: ΔE ≥ 20 normalsichtig, ≥ 9,6 bei Farbfehlsichtigkeit,
     Kontrast ≥ 3,1:1. Alle sechs zugleich sind es nicht — Reihe 4 und 6 liegen
     bei Protanopie nur ΔE 2,7 auseinander. Bis vier Reihen unbedenklich;
     darüber trägt die Beschriftung, nicht die Farbe. */
  --serie-1: #0f7ba8;
  --serie-2: #d17908;
  --serie-3: #158f6b;
  --serie-4: #b5462a;
  --serie-5: #7857cf;
  --serie-6: #b52a63;

  /* Die Leiste der Herde: Petrol trägt, helles Papier steht darauf. */
  --leiste:       #23414b;
  --leiste-text:  #f4f7f6;

  --schatten: 0 1px 2px rgba(35, 65, 75, .05), 0 8px 24px rgba(35, 65, 75, .04);
  /* --- Schrift: die Familien der Herde, unverändert übernommen -----------
     Anzeigeschrift für alles, was **benennt** — Überschriften, Beschriftungen,
     Tabellenköpfe, Reiter, Marken, Zustände. Textschrift für alles, was man
     **liest**. Diese Trennung ist die eigentliche Layoutsprache der Herde;
     die Versalien und der weite Buchstabenabstand kommen daher, nicht aus
     einer Vorliebe.

     Bewusst kein Webfont: eine geometrische Groteske aus dem System lädt
     nicht, blitzt nicht unformatiert auf und ist auf jedem Gerät da, das sie
     hat. Wo Avenir und Futura fehlen, trägt system-ui — dieselbe Abwägung wie
     in der Herde. Das mitgelieferte Inter ist damit entfallen. */
  --schrift-anzeige: "Avenir Next", "Futura", "Century Gothic", system-ui, sans-serif;
  --schrift-text:    -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --schrift-fest:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Die Herde rundet mit 10 px. */
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Genau die Flächen von `.on-dark` der Webseite: Petrol-950 liegt unten,
       Petrol-900 trägt die Karten, Petrol-800 steht ganz oben. Kein Umkehren
       der hellen Werte — die Skala hat für beides eigene Stufen. */
    --ebene:      #0f1e23;   /* hk-petrol-950 */
    --flaeche:    #16292f;   /* hk-petrol-900 */
    --erhoben:    #1c343c;   /* hk-petrol-800 */
    --tief:       #0b171b;
    --text:       #eaf1f3;
    --text-zweit: #a4bcc4;
    --gedaempft:  #7a9199;
    --linie:      #2c4954;   /* wie `.on-dark` der Webseite */
    --rand:       #3a5b68;

    --petrol-100: #2c4954;
    --petrol-50:  #1a2e37;

    --gruen:      #3fc79a;
    --rot:        #ef7a6b;
    --gelb:       #ffc233;   /* im Dunkeln darf Gelb Text tragen (8,1:1) */

    /* Eigens für die dunkle Fläche gewählt und geprüft — kein Umkehren. */
    /* Im Dunkeln trägt Gelb die Aktion — auf dunklem Grund ist es dafür
       zugelassen (10,6:1) und die Marke tut es ebenso. */
    --aktion:       #fed464;
    --aktion-text:  #16292f;
    --aktion-still: #a7bcc3;

    --serie-1: #4fb3dd;
    --serie-2: #ffc233;
    --serie-3: #3fc79a;
    --serie-4: #f0925a;
    --serie-5: #a99af0;
    --serie-6: #ea6f9c;

    --leiste:      #0e1d24;
    --leiste-text: #eaf1f0;

    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ebene);
  color: var(--text);
  font: 15px/1.6 var(--schrift-text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Überschriften tragen die Anzeigeschrift und die Farbe der Marke. `h1` steht
   in Versalien mit weitem Abstand — das ist das auffälligste Merkmal der
   Herde-Oberfläche und trägt die Wiedererkennung. `text-wrap: balance` bricht
   mehrzeilige Überschriften auf gleich lange Zeilen statt auf eine lange und
   ein Wort. */
h1, h2, h3, h4 {
  font-family: var(--schrift-anzeige);
  color: var(--petrol);
  line-height: 1.15;
  text-wrap: balance;
}
h1 { text-transform: uppercase; letter-spacing: 0.02em; }

/* --------------------------------------------------------------- Verweise

   Bis hierher gab es **keine** Regel für `a`. Verweise trugen deshalb die
   Voreinstellung des Browsers: Blau, nach dem Besuch Lila, immer unterstrichen.
   In einer Anwendung, deren ganze Farbgebung aus zwei Markenfarben abgeleitet
   ist, sind das zwei Fremdfarben — und Lila liegt zufällig dicht an der
   Datenreihe 5.

   Verweise tragen deshalb die Bedienfarbe: im Hellen das Marken-Petrol
   (10,4:1 auf der Karte), im Dunkeln die Sonne (10,6:1). Besucht und unbesucht
   sehen gleich aus — der Unterschied ist in einem Werkzeug mit einer Handvoll
   Seiten ohne Wert und kostet die Einheitlichkeit.

   ⚠️ Dafür steht hier **keine** Regel `a:visited`, und das ist der Punkt.

   Sie stand einmal hier und hat zweimal Schaden angerichtet. `a:visited` hat
   die Spezifität (0,1,1) und schlägt damit **jede** Bauteilklasse: `.knopf`
   (0,1,0) verliert, obwohl sie später steht. Ein besuchter Knopf bekam so
   Petrol auf Petrol — ein gefülltes Rechteck ohne erkennbare Schrift. Getroffen
   hat es ausgerechnet den Anmeldeknopf, denn dessen Ziel hat man per
   Definition schon besucht, sobald man ihn zu Gesicht bekommt.

   Die Regel war auch überflüssig: eine Autorenregel schlägt die
   Browservoreinstellung schon deshalb, weil sie aus dem Autoren-Ursprung kommt
   — die Spezifität wird dafür gar nicht erst befragt. `a { color }` allein
   färbt besuchte Verweise mit. Lila kommt nicht zurück; ein Test hält das fest.

   Wer künftig einen Zustand von `a` sondern will: an der Farbe nicht, oder mit
   `:where(a:visited)`. Das nimmt der Regel die Spezifität und lässt
   Bauteilklassen gewinnen.

   Die Unterstreichung bleibt, aber gedämpft: Farbe allein darf einen Verweis
   nicht kenntlich machen (WCAG 1.4.1), und wer sie wegnimmt, macht Verweise im
   Fließtext unauffindbar. In Tabellen und Listen ist sie abgeschaltet — dort
   trägt die Position, und eine Spalte voller Unterstriche ist Lärm. */
a {
  color: var(--aktion);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  transition: text-decoration-color .12s;
}
a:hover,
a:focus-visible { text-decoration-color: currentColor; }

/* Verweise, die als Knopf, Karte oder Listeneintrag auftreten, sind schon
   durch ihre Form erkennbar und brauchen keine Unterstreichung. */
a.knopf,
a.knopf-still,
a.karte,
.kopf a,
.marke,
.szenarienliste .feld.name a,
.reiter a { text-decoration: none; }

.szenarienliste .feld.name a:hover,
.reiter a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ Kopf */

/* Die dunkle Petrol-Leiste ist das auffälligste Merkmal der Herde-Oberfläche
   und der Grund, warum beide Anwendungen als eine Familie zu erkennen sind.
   Sie klebt oben; darunter beginnt das helle Papier. */
.kopf {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.7rem 1.75rem;
  background: var(--leiste);
  color: var(--leiste-text);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--schatten);
}

.marke { color: var(--leiste-text); text-decoration: none; }

/* Ein Schriftstil für die ganze Leiste. Vorher trugen Wortmarke, Navigation,
   Benutzername und Abmeldeknopf vier verschiedene — verschiedene Familien,
   Größen, Stärken und Schreibweisen auf zwölf Zentimetern. Unterschieden wird
   jetzt allein über die Deckkraft: die Marke steht voll, die Navigation etwas
   zurück. Der Schriftzug im Logo ist eine Grafik und bleibt davon unberührt. */
.marke .wortmarke,
.kopfnavi > a,
.benutzer,
.kopf .knopf-still {
  font-family: var(--schrift-anzeige);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Die alten Regeln `.kopf nav a` stammen aus der oberen Navigationsleiste, die
   am 2026-07-28 entfernt wurde. Sie standen noch hier und färbten die neue
   Kopfnavigation mit `--text-zweit` — Grau auf Petrol, kaum lesbar. Bemerkt
   wurde das erst beim Ausmessen des Bildschirmfotos: sie sind mit (0,1,2)
   spezifischer als `.kopfnavi > a` (0,1,1) und gewannen still.

   Toter Stil ist nicht harmlos. Er wird nicht ignoriert, er wirkt weiter. */

.abmelden { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
.benutzer { color: var(--leiste-text); opacity: 0.82; }
/* Knöpfe in der dunklen Leiste tragen deren Farben, nicht die der Seite. */
.kopf .knopf-still {
  color: var(--leiste-text);
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}
.kopf .knopf-still:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

main { max-width: 1120px; margin: 0 auto; padding: 2rem 1.75rem 4rem; }

footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.75rem 3rem;
  color: var(--gedaempft);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- Blöcke */

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  font-weight: 660;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.05rem;
  margin: 2.4rem 0 0.5rem;
  font-weight: 640;
  letter-spacing: -0.005em;
}

.unter { color: var(--text-zweit); margin: 0 0 1.5rem; max-width: 68ch; }
h2 + .unter { margin-bottom: 0.9rem; font-size: 0.92rem; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--schatten);
}

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; }

/* Etwas, das im Raster ueber die ganze Zeile geht — eine Tabelle etwa. */
.raster > .ganze-breite { grid-column: 1 / -1; }

/* Eine Reiterleiste INNERHALB eines Abschnitts: leiser als die grosse oben,
   damit klar bleibt, welche die Seite gliedert und welche nur einen Kasten. */
.reiterleiste-innen { margin: 0 0 1rem; gap: 0.2rem; font-size: 0.86rem; }
.reiterleiste-innen button { padding: 0.35rem 0.7rem; }
.reitertitel { margin: 0 0 0.2rem; font-size: 1rem; }

/* Der Jahresregler ueber der Kennzahlentafel: eine Zeile, die die dritte
   Achse bedienbar macht, ohne die Tabelle zu verbreitern. */
.jahresregler {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 0.9rem; font-size: 0.9rem;
}
.jahresregler input[type="range"] { flex: 1 1 auto; max-width: 26rem; }
.jahresregler output { font-weight: 600; min-width: 2.2rem; }

/* Die Sparkline steht VOR der Zahl und drueckt sie nicht weg: eine feste,
   schmale Spalte, die leer bleibt, wo eine Zeile sich nicht aendert. */
.kennzahlentabelle td.verlauf {
  width: 68px; padding: 0 0.4rem; text-align: right; line-height: 0;
}
.sparkline { vertical-align: middle; }

/* Der Rueckblick ist eine Referenz zum Danebenlegen, kein Bericht: enger
   gesetzt, damit acht Spalten nebeneinander passen. Die Einheit steht im
   Kopf und nicht in jeder Zelle — sechzehnmal „ct/kWh" ist Rauschen. */
.rueckblick { font-size: 0.82rem; }
.rueckblick td, .rueckblick th { padding: 0.3rem 0.5rem; white-space: nowrap; }
.rueckblick thead th { font-weight: 600; }
.rueckblick .einheit { font-weight: 400; color: var(--gedimmt, #5c6a70); }

/* Die Projektkarte ist als Ganzes ein Verweis, aber ihr Inhalt ist kein
   Verweistext: Titel, Standort und Zustand behalten ihre eigenen Farben.
   Ohne `inherit` färbte die Verweisfarbe die ganze Karte ein. */
a.karte { display: block; color: inherit; transition: border-color .15s, transform .15s; }
a.karte:hover { border-color: var(--aktion); transform: translateY(-1px); }

/* ------------------------------------------------------------ Kennzahlen */

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-bottom: 1.4rem; }

.kennzahl {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  box-shadow: var(--schatten);
}
.kennzahl .name { color: var(--text-zweit); font-size: 0.83rem; margin: 0 0 0.35rem; }
.kennzahl .wert { font-size: 1.55rem; font-weight: 650; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.kennzahl .zusatz { color: var(--gedaempft); font-size: 0.8rem; margin: 0.25rem 0 0; }
.wert.gut { color: var(--gruen); }
.wert.schlecht { color: var(--rot); }
.wert.mittel { color: var(--gelb); }

/* Im Cashflow ist das Vorzeichen die Aussage: In welchem Jahr fließt Geld
   zu, in welchem ab, und wann schneidet die kumulierte Linie die Null. Nur
   die beiden Cashflow-Spalten werden gefärbt — färbte man jede Zahl, wäre die
   Investitionsspalte durchgehend rot und der Überschuss durchgehend grün, und
   die Farbe sagte nichts mehr. */
td.zufluss { color: var(--gruen); }
td.abfluss { color: var(--rot); }

/* --------------------------------------------------------------- Formular */

label {
  font-family: var(--schrift-anzeige);
  text-transform: uppercase;
  letter-spacing: 0.05em; display: block; font-size: 0.84rem; color: var(--text-zweit); margin-bottom: 0.3rem; }

input[type="text"], input[type="number"], input[type="password"], select {
  width: 100%;
  padding: 0.52rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--erhoben);
  border: 1px solid var(--rand);
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}

input:hover, select:hover { border-color: var(--gedaempft); }
input:focus, select:focus {
  outline: none;
  border-color: var(--aktion);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sonne) 55%, transparent);
}

.knopf {
  padding: 0.65rem 1.6rem;
  font: inherit;
  font-weight: 620;
  color: var(--aktion-text);
  background: var(--aktion);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .12s;
}
/* Als <a> auf der Ergebnisseite: ein Verweis ist von Haus aus inline und
   unterstrichen — beides muss weg, sonst sieht er nicht aus wie ein Knopf. */
a.knopf { display: inline-block; text-decoration: none; }
.knopf:hover { filter: brightness(1.08); }
.knopf:active { filter: brightness(0.95); }

.knopf-still {
  padding: 0.32rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-zweit);
  background: transparent;
  border: 1px solid var(--rand);
  border-radius: 7px;
  cursor: pointer;
}
.knopf-still:hover { color: var(--text); border-color: var(--gedaempft); }

fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
[hidden] { display: none !important; }
legend { font-weight: 640; padding: 0; margin-bottom: 0.9rem; font-size: 0.98rem; }

/* ------------------------------------------------------- Abschnitte, Steuerung */

section { margin-bottom: 3rem; }
section > h2:first-child { margin-top: 0; }

h3 { font-size: 0.95rem; margin: 1.6rem 0 0.5rem; font-weight: 640; color: var(--text); }
.karte > h3:first-child { margin-top: 0; }

.gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; }
.gruppen .karte { margin-bottom: 0; }

.kennzahlentabelle td { border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.kennzahlentabelle tr:last-child td { border-bottom: 0; }
.kennzahlentabelle .bezeichnung { text-align: left; color: var(--text); }
/* width:1% + nowrap = die Spalte wird genau so breit wie ihr längster Wert.
   Eine feste Breite ließ daneben jede Bezeichnung umbrechen. */
.kennzahlentabelle .zahl {
  text-align: right;
  font-weight: 620;
  white-space: nowrap;
  width: 1%;
  vertical-align: baseline;
}
/* Ein langer Wert — eine Aufzählung wie die Stufenleiter — bricht um, statt
   die Tafel über den Kartenrand zu schieben (M. Zapf, 2026-09-23). Höchstens
   die halbe Breite, damit die Bezeichnung daneben lesbar bleibt. */
.kennzahlentabelle .zahl.lang {
  white-space: normal;
  width: 50%;
  line-height: 1.5;
}
/* Die Erläuterung stand als dritte Spalte neben der Zahl — in einer 330-px-Karte
   wurde sie an der Kartenkante abgeschnitten. Sie gehört unter die Bezeichnung. */
.kennzahlentabelle .erklaerung {
  display: block;
  margin-top: 0.15rem;
  color: var(--gedaempft);
  font-size: 0.78rem;
  line-height: 1.35;
}
/* Eine Reihe von Optionsfeldern oder Kästchen, die umbrechen darf — für die
   Wahl „pauschal oder am Markt" und die fünf Regelprodukte. */
.auswahlreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.3rem 0 0.8rem;
}
.auswahlreihe label { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Der Verweis auf die ausführliche Erklärung: klein, gedämpft, erst beim
   Darüberfahren in der Petrolfarbe — er soll auffindbar sein, nicht mit der
   Zahl daneben konkurrieren. */
.kennzahlentabelle a.mehr {
  margin-left: 0.25rem;
  color: var(--gedaempft);
  font-size: 0.8rem;
  text-decoration: none;
}
.kennzahlentabelle a.mehr:hover,
.kennzahlentabelle a.mehr:focus-visible {
  color: var(--petrol);
}

.steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--linie);
}
.steuerung.sprung { border-bottom: 0; padding-bottom: 0.2rem; }
.knopfgruppe { display: flex; align-items: center; gap: 0.4rem; }

/* Der Rückweg steht ueber der Ueberschrift, nicht bei den Aktionen:
   Er fuehrt aus der Seite heraus, waehrend die Knoepfe rechts etwas
   mit ihr tun. Beides nebeneinander laedt zum Fehlgriff ein. */
.zurueckweg { margin: 0 0 0.9rem; }
.sprungtext { color: var(--gedaempft); font-size: 0.83rem; }

.knopf-wahl {
  padding: 0.35rem 0.95rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text-zweit);
  background: var(--ebene);
  border: 1px solid var(--rand);
  border-radius: 7px;
  cursor: pointer;
}
.knopf-wahl.aktiv {
  background: var(--aktion);
  border-color: var(--aktion);
  color: #fff;
  font-weight: 620;
}

.datumsfeld {
  width: auto;
  padding: 0.32rem 0.55rem;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Tabellen */

.tabellenrahmen { overflow-x: auto; }

/* Die eine Zeile, um die es gerade geht — die aktuelle Fassung eines Szenarios,
   das gewaehlte Preisjahr im Rueckblick. Die Klasse stand seit dem 2026-08-28
   in `szenario_fassungen.html` und war nie definiert: Dort hat die
   Hervorhebung nie gewirkt. */
.tabelle tr.hervorgehoben > * {
  background: color-mix(in srgb, var(--sonne) 22%, transparent);
  font-weight: 600;
}

/* Die Hülle legt `tabellen.js` zur Laufzeit um jeden Rahmen. Sie scrollt
   nicht — nur deshalb können die Dreiecke am Rand stehen bleiben. Ohne
   Skript fehlt sie, und alles darunter greift schlicht nicht: die Tabelle
   scrollt wie bisher, nur ohne Hinweis. */
.tabellenhuelle { position: relative; }

/* Zwei Dreiecke aus Rahmenlinien — kein Zeichen und keine Grafik. Das trifft
   jede Schriftart gleich und skaliert mit der Wurzelgröße. */
.tabellenhuelle::before,
.tabellenhuelle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -0.42rem;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  z-index: 2;
}

.tabellenhuelle::before {
  left: 0.3rem;
  border-right: 0.42rem solid var(--text-zweit);
}

.tabellenhuelle::after {
  right: 0.3rem;
  border-left: 0.42rem solid var(--text-zweit);
}

.tabellenhuelle.mehr-links::before,
.tabellenhuelle.mehr-rechts::after { opacity: 1; }

/* Ein Verlauf hinter dem Dreieck: Er zeigt, dass die Spalte darunter
   abgeschnitten ist und nicht dort endet. Das Dreieck allein sagt „weiter",
   der Verlauf sagt „hier ist die Kante". */
.tabellenhuelle.mehr-links .tabellenrahmen,
.tabellenhuelle.mehr-rechts .tabellenrahmen { background-repeat: no-repeat; }

.tabellenhuelle.mehr-links .tabellenrahmen {
  background-image: linear-gradient(
    to right, color-mix(in srgb, var(--text) 10%, transparent), transparent
  );
  background-size: 1.8rem 100%;
  background-position: left center;
}

.tabellenhuelle.mehr-rechts .tabellenrahmen {
  background-image: linear-gradient(
    to left, color-mix(in srgb, var(--text) 10%, transparent), transparent
  );
  background-size: 1.8rem 100%;
  background-position: right center;
}

.tabellenhuelle.mehr-links.mehr-rechts .tabellenrahmen {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 10%, transparent), transparent),
    linear-gradient(to left, color-mix(in srgb, var(--text) 10%, transparent), transparent);
  background-size: 1.8rem 100%, 1.8rem 100%;
  background-position: left center, right center;
}

@media (prefers-reduced-motion: reduce) {
  .tabellenhuelle::before,
  .tabellenhuelle::after { transition: none; }
}

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { text-align: right; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--linie); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-zweit); font-weight: 620; white-space: nowrap; font-size: 0.82rem; }
td { font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--petrol) 4%, transparent); }

/* --------------------------------------------------------------- Diagramme */

.diagramm { position: relative; height: 260px; margin-bottom: 0.5rem; }
.diagramm:last-child { margin-bottom: 0; }
.diagramm.hoch { height: 330px; }
.diagramm.flach { height: 165px; }

#diagramme.laedt .karte, #diagramme.laedt h2, #diagramme.laedt .unter { display: none; }
.ladehinweis { display: none; color: var(--gedaempft); font-size: 0.9rem; padding: 2rem 0; }
#diagramme.laedt .ladehinweis { display: block; }
#diagramme.fehlgeschlagen .ladehinweis {
  display: block;
  color: var(--rot);
}
#diagramme.fehlgeschlagen .ladehinweis::after {
  content: " — die Zahlen stehen weiterhin in den Tabellen oben.";
}

/* ---------------------------------------------------------------- Hinweise */

.hinweis, .warnung, .fehler, .gut {
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border-left: 3px solid;
  margin-bottom: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.hinweis { border-color: var(--aktion); background: var(--petrol-50); }
.warnung { border-color: var(--gelb);    background: color-mix(in srgb, var(--gelb) 11%, transparent); }
.fehler  { border-color: var(--rot);     background: color-mix(in srgb, var(--rot) 9%, transparent); }
/* Grün heisst hier nicht „gut gemacht“, sondern „nichts zu tun“ — der
   Lesebericht eines Erhebungsbogens braucht beides nebeneinander. */
.gut     { border-color: var(--gruen);   background: color-mix(in srgb, var(--gruen) 8%, transparent); }

/* Zustände als Pille, wie in der Herde: Anzeigeschrift, Versalien, rund.
   Die Farbe bleibt die semantische — grün fertig, rot Fehler —, denn sie
   trägt hier eine Aussage und nicht nur die Marke. */
.marke-zustand {
  display: inline-block;
  font-family: var(--schrift-anzeige);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.18em 0.7em;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1.5;
  text-align: center;
}
.zustand-fertig { color: var(--gruen); }
.zustand-fehler { color: var(--rot); }
.zustand-laeuft, .zustand-wartet { color: var(--aktion-still); }
.zustand-abgebrochen { color: var(--gedaempft); }

pre.bericht {
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text);
}

img.bild { max-width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 10px; }

.anmeldeseite { max-width: 370px; margin: 12vh auto; }
.anmeldeseite .karte > * + * { margin-top: 1rem; }

ul.knapp { margin: 0.6rem 0 0; padding-left: 1.15rem; color: var(--text-zweit); font-size: 0.88rem; line-height: 1.6; }
ul.knapp li + li { margin-top: 0.35rem; }

@media (max-width: 640px) {
  main { padding: 1.25rem 1rem 3rem; }
  .kopf { padding: 0.75rem 1rem; gap: 1rem; }
  .diagramm { height: 220px; }
  .diagramm.hoch { height: 280px; }
}

/* ═══════════════════════════════════════════════════════════ Reiter (Tabs)

   Beide Seiten waren lange Bahnen: auf der Parameterseite scrollte man an
   dreißig Feldern vorbei, um eins zu ändern, auf der Auswertung an acht
   Abschnitten, um eine Zahl zu suchen. Die Reiter teilen beides in Themen.

   Gestaltung bewusst zurückhaltend: eine Linie als Grundlinie, der aktive
   Reiter durch eine kräftigere Linie und dunklere Schrift markiert. Keine
   Kästen, keine Farbflächen — die Farbe gehört den Daten, nicht der Navigation.
*/

.reiterleiste {
  display: flex;
  gap: 0.25rem;
  margin: 1.75rem 0 1.5rem;
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
  scrollbar-width: none;
}
.reiterleiste::-webkit-scrollbar { display: none; }

.reiterleiste button {
  font-family: var(--schrift-anzeige);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  padding: 0.6rem 0.95rem;
  font: inherit;
  font-weight: 560;
  color: var(--gedaempft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.reiterleiste button:hover { color: var(--text-zweit); }
.reiterleiste button.aktiv {
  color: var(--text);
  border-bottom-color: var(--sonne);
}
.reiterleiste button:focus-visible {
  outline: 2px solid var(--aktion);
  outline-offset: -2px;
  border-radius: 4px;
}

/* `hidden` muss gegen jede display-Regel gewinnen. */
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────────── Kopfzeile mit Aktion */

.kopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.kopfzeile h1 { margin-bottom: 0.35rem; }
.kopfzeile .unter { margin: 0; }

/* ───────────────────────────────────────────────────────── Erläuterungen

   Fließtext, der eine Eingabe erklärt, stand bisher als `<p class="unter">`
   mit Inline-Stil in der Vorlage. Er gehört in eine eigene, ruhige Karte:
   sichtbar für den, der sie sucht, und still für den, der sie kennt. */

.hinweiskarte {
  background: var(--ebene);
  border-style: dashed;
}
.hinweiskarte p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-zweit);
}
.hinweiskarte p:last-child { margin-bottom: 0; }

/* Die Einordnung der Rendite — ein Satz, der die Kennzahlen liest. */
.einordnung {
  margin: 0.2rem 0 1.5rem;
  font-size: 0.95rem;
  color: var(--text-zweit);
}

/* ─────────────────────────────────────────────────────────── Absendezeile */

.absenden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-top: 1.75rem;
}
.absenden .unter { margin: 0; font-size: 0.85rem; }

.zurueck { margin-top: 2.5rem; }

/* Innerhalb eines Reiters übernimmt h2 die Rolle der Abschnittsüberschrift,
   h3 die der Untergruppe. Ohne <section> drumherum braucht der erste Titel
   keinen Abstand nach oben. */
[data-reitergruppe] > h2:first-child,
[data-reitergruppe] > h3:first-child,
[data-reitergruppe] > p:first-child { margin-top: 0; }
[data-reitergruppe] > h2 { margin-top: 2.25rem; }
[data-reitergruppe] > h3 { margin-top: 1.9rem; }

/* ──────────────────────────────────────── Vom Optimierer bestimmte Felder

   Ausgegraut und deaktiviert, aber nicht ausgeblendet: man soll sehen, dass es
   die Größe gibt und dass die Rechnung sie liefert, statt sie zu fordern. */

.gesperrt label { color: var(--gedaempft); }
.gesperrt input,
.gesperrt select {
  color: var(--gedaempft);
  background: var(--ebene);
  border-style: dashed;
  cursor: not-allowed;
}
/* Der Grund steht am Feld, nicht nur im Hinweis darüber. */
.gesperrt label::after {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--gedaempft);
}
.wird-berechnet label::after { content: " — wird berechnet"; }
.entfaellt label::after { content: " — entfällt"; }

/* ───────────────────────────────────────────────────────── Schiebeschalter */

/* Ein Schalter ist ein `<label>` und erbt damit die Versalien der
   Feldbeschriftungen — aber er trägt Fließtext, keine Benennung. Ohne diese
   Rücknahme steht die ganze Erläuterung in Großbuchstaben. Aufgefallen beim
   Fotografieren des Eigenverbrauchsreiters; betraf auch den schon vorhandenen
   Optimierungsschalter. */
.schalter,
.schalter * {
  text-transform: none;
  letter-spacing: normal;
}
.schalter .beschriftung {
  font-family: var(--schrift-anzeige);
  letter-spacing: 0.01em;
}
.schalter .erlaeuterung { font-family: var(--schrift-text); }

.schalter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--petrol-50);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter .bahn {
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--rand);
  position: relative;
  transition: background .14s;
}
.schalter .bahn::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .14s;
}
.schalter input:checked + .bahn { background: var(--aktion); }
.schalter input:checked + .bahn::after { transform: translateX(18px); }
.schalter input:focus-visible + .bahn {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sonne) 55%, transparent);
}
.schalter .beschriftung { font-weight: 560; cursor: pointer; }
.schalter .erlaeuterung {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-zweit);
}

/* ─────────────────────────────────────────────────────────────── Projekte */

.projektliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
}
.projektkarte { display: block; text-decoration: none; color: inherit; }
.projektkarte h3 { margin: 0 0 0.15rem; }
.projektkarte .unter { margin: 0; }

.projektkopf {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.projektfuss {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--text-zweit);
}

/* Der Zustand als ruhige Marke — Farbe trägt nie allein, der Text steht dabei. */
.zustand-leer { color: var(--gedaempft); }

.loeschzeile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.loeschzeile .unter { margin: 0; font-size: 0.85rem; }

.knopf-gefahr {
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 560;
  color: var(--rot);
  background: none;
  border: 1px solid var(--rot);
  border-radius: var(--radius);
  cursor: pointer;
}
.knopf-gefahr:hover { color: #fff; background: var(--rot); }

textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--text);
  background: var(--erhoben);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  resize: vertical;
}
textarea:focus-visible {
  outline: none;
  border-color: var(--aktion);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sonne) 55%, transparent);
}

/* ───────────────────────────────────────────────────────────── Ladebalken

   Unbestimmt, nicht prozentual: die Zahl der Rechenschritte schwankt mit der
   Konfiguration (vier bis sieben), eine Restzeit waere geraten. Der Balken
   sagt „es geschieht etwas"; wie lange es dauert, sagt die Zeile darunter mit
   dem Median vergleichbarer Laeufe — eine Angabe, die man belegen kann. */

.ladebalken {
  height: 4px;
  margin: 0.9rem 0 0.6rem;
  overflow: hidden;
  background: var(--linie);
  border-radius: 999px;
}
.ladebalken .streifen {
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--sonne) 40%, transparent),
    var(--sonne),
    color-mix(in srgb, var(--sonne) 40%, transparent));
  animation: wandern 1.5s ease-in-out infinite;
}

@keyframes wandern {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.dauerzeile { margin: 0; font-size: 0.82rem; }

/* Wer Bewegung abgestellt hat, bekommt einen ruhigen, gefuellten Balken —
   die Information bleibt, die Animation entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .ladebalken .streifen {
    width: 100%;
    animation: none;
    background: color-mix(in srgb, var(--sonne) 60%, transparent);
  }
}

/* ────────────────────────────────────────────────────── Wortmarke im Kopf */

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.marke .logo {
  height: 34px;
  width: auto;
  display: block;
}
/* Der Name trägt, die Tätigkeit erklärt ihn — also unterschiedliches Gewicht
   und unterschiedliche Farbe. Gleichrangig gesetzt würden beide um dieselbe
   Aufmerksamkeit streiten und keiner gewänne. */
.marke .wortmarke { color: var(--leiste-text); }
/* Auf schmalen Schirmen fällt der Zusatz weg, bevor der Kopf umbricht. */
@media (max-width: 640px) {
  }
/* Das Logo steht seit der Umstellung auf die dunkle Leiste **immer** auf
   Petrol, nicht mehr nur im Dunkelmodus. Kein Einfärben: die Form bleibt, nur
   die Helligkeit ändert sich. */
.marke .logo { filter: brightness(0) invert(1) opacity(0.94); }

/* ───────────────────────────────────────────── Kennzahlentafel, entlastet

   Voreinstellung: nur Bezeichnung und Wert. Die Erläuterungen brauchen
   eingeblendet mehr Platz als die Zahlen selbst — auf der Markt-Karte das
   Dreifache — und machen die Tafel unlesbar. Sie stehen weiterhin an jeder
   Zeile als `title` und lassen sich über den Schalter dauerhaft einblenden. */

.kennzahlkopf {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.kennzahlkopf .unter { margin: 0; max-width: 46rem; }

.schalter.schmal {
  padding: 0.5rem 0.85rem;
  gap: 0.6rem;
  background: none;
}
.schalter.schmal .beschriftung { font-size: 0.9rem; font-weight: 520; }

/* Karten wachsen nicht auf gleiche Höhe — sonst klaffen Lücken, weil eine
   Gruppe vier und die nächste sieben Zeilen hat. */
.gruppen { align-items: start; }

.kennzahlentabelle .erklaerung { display: none; }
.mit-erlaeuterungen .kennzahlentabelle .erklaerung {
  display: block;
  margin-top: 0.15rem;
}
/* Ohne Erläuterung stehen die Zeilen enger — die Tafel wird zur Übersicht. */
.kennzahlentabelle td { padding-block: 0.5rem; }
.mit-erlaeuterungen .kennzahlentabelle td { padding-block: 0.7rem; }

/* ─────────────────────────────────────────────── Themen der Kennzahlentafel

   Sieben Themen, sieben Farben. Die Töne sind dieselben wie die der
   Datenreihen — geprüft auf Helligkeitsband, Buntheit, Kontrast gegen die
   Fläche und den OKLab-Abstand benachbarter Paare unter Prot-, Deuter- und
   Tritanopie. In der Reihenfolge, in der die Reiter stehen: benachbarte
   Themen müssen unterscheidbar sein, entfernte nicht.

   Die Farbe trägt nie allein: der Themenname steht daneben, und die
   Aktivmarkierung ist zusätzlich eine Kante. */

:root {
  /* Sieben Themen färben die Reiter der Kennzahlentafel — nie alle zugleich
     in einem Diagramm. Trotzdem gegen die Karte gerechnet: alle ≥ 3,1:1,
     benachbarte Paare ΔE ≥ 20 (≥ 9,6 bei Farbfehlsichtigkeit). */
  --thema-energie:        #0f7ba8;
  --thema-abregelung:     #d17908;
  --thema-markt:          #158f6b;
  --thema-speicher:       #b5462a;
  --thema-wirtschaft:     #7857cf;
  --thema-kalkulatorisch: #b52a63;
  --thema-finanzierung:   #3a6ea5;
  /* Zwei weitere Themen für den Eigenverbrauch. Gegen die Karte gerechnet wie
     die übrigen; benachbarte Paare bleiben über der Grenze. */
  --thema-eigenverbrauch: #7a6a12;
  --thema-leistungspreis: #2f7d8c;
  /* Steuern steht zwischen „Wirtschaftlichkeit" (violett) und „Kalkulation"
     (magenta) — ein gedecktes Ocker hält zu beiden Abstand. */
  --thema-steuern:        #8a5a1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --thema-energie:        #4fb3dd;
    --thema-abregelung:     #ffc233;
    --thema-markt:          #3fc79a;
    --thema-speicher:       #f0925a;
    --thema-wirtschaft:     #a99af0;
    --thema-kalkulatorisch: #ea6f9c;
    --thema-finanzierung:   #8fb6dd;
    --thema-steuern:        #d8a05a;
  }
}

[data-thema="energie"]        { --thema: var(--thema-energie); }
[data-thema="abregelung"]     { --thema: var(--thema-abregelung); }
[data-thema="markt"]          { --thema: var(--thema-markt); }
[data-thema="speicher"]       { --thema: var(--thema-speicher); }
[data-thema="wirtschaft"]     { --thema: var(--thema-wirtschaft); }
[data-thema="kalkulatorisch"] { --thema: var(--thema-kalkulatorisch); }
[data-thema="finanzierung"]   { --thema: var(--thema-finanzierung); }
[data-thema="eigenverbrauch"] { --thema: var(--thema-eigenverbrauch); }
[data-thema="leistungspreis"] { --thema: var(--thema-leistungspreis); }
[data-thema="steuern"]        { --thema: var(--thema-steuern); }

/* Themenreiter und Tafel stehen mittig, nicht linksbündig. Die Tafel ist auf
   46 rem begrenzt — auf einem breiten Schirm klebte sie damit am linken Rand,
   und rechts daneben stand nichts. Zentriert liegen Reiter und Tafel auf
   derselben Achse und lesen sich als eine Einheit.

   `safe center` statt `center`: die Leiste ist waagerecht scrollbar, und ein
   hartes `center` schneidet bei Überlauf den **Anfang** ab — man scrollt dann
   nach links und findet den ersten Reiter nicht mehr. `safe` fällt in diesem
   Fall auf linksbündig zurück. */
.themenleiste { margin-top: 0; justify-content: safe center; }
.themenleiste button { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Der Punkt trägt die Themenfarbe, auch wenn der Reiter nicht aktiv ist —
   so ist die Zuordnung schon vor dem Anklicken erkennbar. */
.themenleiste button { font-family: var(--schrift-anzeige); }
.themenleiste .punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--thema, var(--gedaempft));
  flex: 0 0 auto;
  opacity: 0.55;
  transition: opacity .12s;
}
.themenleiste button.aktiv .punkt { opacity: 1; }
.themenleiste button.aktiv { border-bottom-color: var(--thema, var(--sonne)); }

/* Die Tafel selbst trägt das Thema als schmale Kante links. */
.themenkarte {
  border-left: 3px solid var(--thema, var(--linie));
  max-width: 46rem;
  margin-inline: auto;
}
.themenkarte .kennzahlentabelle { width: 100%; }

.themenzusatz {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--gedaempft);
}

/* ────────────────────────────────────────────────────────── Szenarienliste */

.kleingedruckt { display: block; font-size: 0.82rem; }
.feldwert {
  margin: 0;
  padding: 0.55rem 0;
  color: var(--text-zweit);
}

td.aktionen {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  white-space: nowrap;
}
td.aktionen form { display: inline; }
.knopf-loeschen {
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--gedaempft);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.knopf-loeschen:hover { color: var(--rot); }

/* ─────────────────────────────────────────────────────────── Vergleichstafel

   Szenarien nebeneinander: Merkmale in Zeilen, Szenarien in Spalten. So liest
   man einen Vergleich — nicht als mehrere Tabellen untereinander. Gezeigt
   werden nur die Eingaben, in denen sich die Szenarien unterscheiden; alle 37
   Felder waeren eine Tapete, in der man das eine geaenderte Feld sucht. */

.vergleichstafel table { table-layout: auto; }
.vergleichstafel th,
.vergleichstafel td { text-align: right; white-space: nowrap; }
.vergleichstafel th.merkmal,
.vergleichstafel td.merkmal {
  text-align: left;
  color: var(--text-zweit);
  font-weight: 400;
  white-space: normal;
}
.vergleichstafel thead th { font-weight: 620; }

.vergleichstafel tr.abschnitt td {
  padding-top: 1.1rem;
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gedaempft);
  background: none;
}
.vergleichstafel tr.abschnitt:first-child td { padding-top: 0; }

/* Der beste Wert je Zeile — Farbe traegt nicht allein, das Gewicht auch. */
.vergleichstafel td.spitze {
  font-weight: 640;
  color: var(--gruen);
}

/* ────────────────────────────────────────────────────────── Szenarienliste

   Eine Zeile je Szenario, vier Groessen nebeneinander: PV, Speicher,
   anzulegender Wert, Rendite. Das sind die drei Stellschrauben, die man beim
   Vergleichen aendert, und das Ergebnis, das dabei herauskommt.

   Kein <table>, sondern ein Raster: die Zeilen sollen auf schmalen Schirmen
   umbrechen koennen, ohne dass eine Tabelle waagerecht scrollt. */

.szenarienliste {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--erhoben);
  /* **Nicht `overflow: hidden`.** Das war es bis zum 2026-08-10, und es schnitt
     ab, was nicht passte — bei acht Spalten waren das die beiden Knöpfe rechts,
     und sie liessen sich mit keiner Geste mehr erreichen (gemeldet von
     M. Zapf mit Bildschirmfoto). Waagerecht scrollen statt abschneiden; das
     Dreieck aus `tabellen.js` sagt, dass da noch etwas ist.

     Senkrecht bleibt `hidden`, damit die abgerundeten Ecken die Zeilen weiter
     beschneiden — sonst stünde die erste Zeile eckig in einem runden Rahmen. */
  overflow-x: auto;
  overflow-y: hidden;
}

/* **Kein Ausbruch mehr.** Bis zum 2026-08-10 sprengte die Liste auf breiten
   Fenstern den Inhaltsbereich: `width: min(100vw - 3.5rem, 1200px)` und ein
   negativer Rand zogen sie über beide Seitenränder hinaus. Im Bild von M. Zapf
   stand sie dadurch links vor der Überschrift „Bretzenheim" und rechts hinter
   „Projekt bearbeiten" — als gehörte sie nicht zur Seite.

   Nötig war das nur, solange die Zeile 1220 px brauchte. Der Grund dafür waren
   die Überschriften in Versalien mit Sperrung: „ANZULEGENDER WERT" misst 140 px,
   in gemischter Schrift misst dieselbe Überschrift 126 px, und „GESAMTRENDITE"
   fällt von 106 auf 97. Zusammen mit den nachgemessenen Spuren unten braucht
   die Zeile jetzt 961 px — der Inhaltsbereich bietet 1064.

   Sie passt also in die Textspalte und richtet sich an ihr aus. Das ist der
   eigentliche Gewinn: Kopfzeile, Fließtext und Liste stehen auf derselben
   Kante. `test_die_liste_bleibt_in_der_textspalte` hält beides fest. */

/* Jede Zeile ist ein eigenes Raster — das ist Absicht, denn nur so behält sie
   ihren eigenen Rahmen und ihre Überfahrfarbe. Der Preis: die Spaltenbreiten
   müssen in jeder Zeile **gleich** ausfallen, sonst stehen die Überschriften
   nicht über ihren Werten.

   Genau das ging schief, solange die letzte Spalte `auto` war: in der Datenzeile
   liegen dort zwei Knöpfe, in der Kopfzeile nichts. Die Kopfzeile verteilte den
   frei gewordenen Platz auf ihre `fr`-Spalten und schob die Überschriften um
   genau die Knopfbreite nach rechts. Eine feste Breite behebt das — sie gilt in
   beiden Zeilen, ob dort Knöpfe stehen oder nicht. */
.szenarienliste .zeile {
  display: grid;
  /* **Nur der Name wächst.** Bis zum 2026-08-10 trug jede Spalte einen
     `fr`-Anteil und bekam vom freien Platz etwas ab — „Zustand" und
     „anzulegender Wert" wurden dadurch doppelt so breit wie ihr Inhalt
     (gemeldet von M. Zapf). Eine Spalte, deren Inhalt „9,1 ct" lautet, braucht
     keinen Zuwachs; der Szenarioname dagegen bricht sonst dreizeilig um.

     **Und jede Spur muss wirklich reichen.** Ein Rasterfeld beschneidet seinen
     Inhalt nicht: Ist die Überschrift breiter als ihre Spur, läuft sie hinaus
     und in die Nachbarspalte hinein — oder sie bricht um, und die Kopfzeile
     steht schief. Beides war am 2026-08-10 im Bild zu sehen.

     Die Breiten sind deshalb keine Schätzung. Sie sind mit CoreText in der
     Schrift gemessen, die der Browser wirklich setzt, und jede Spur trägt das
     Längere von beidem — Überschrift oder größter zu erwartender Wert:

         Spur       Überschrift   größter Wert      gewählt
         Zustand         3,4      6,4 „Schritt 12 von 12"   6,5
         PV              1,1      5,0 „12.345 kWp"          5,25
         Speicher        3,6      5,0 „12.345 kWh"          5,25
         Anzul. Wert     7,9      2,9 „12,3 ct"             8
         Gesamtrendite   6,1      3,3 „-12,3 %"             6,25
         Gerechnet       4,3      4,9 „10.08.2026"          5
         Knöpfe            —      7,3 (3 × 2,1 + 2 × 0,5)   7,3

     Der Name bekommt, was übrig bleibt: 11,5 rem Minimum plus 6,45 rem Rest =
     287 px. „Test PV + Speicher ohne Marktprämie" misst als Knopf 278 px und
     bleibt damit einzeilig. `test_die_zeile_passt_in_den_inhaltsbereich` und
     `test_die_zahlenspalten_sind_breit_genug_fuer_ihre_ueberschriften` halten
     Summe und Einzelbreiten fest. */
  /* Seit dem 2026-08-28 sind es DREI Knöpfe: Ändern, Duplizieren, Löschen.
     Die Versionshistorie hängt als Marke am Namen und nicht als vierter Knopf
     — vier bräuchten 9,9 rem, und die fehlten dem Namen. */
  grid-template-columns: minmax(11.5rem, 1fr) 6.5rem 5.25rem 5.25rem 8rem 6.25rem 5rem 7.3rem;
  gap: 0.8rem;
  align-items: center;
  /* Senkrecht 0,85 rem wie seit dem 2026-08-10 gewünscht („zurück auf die alte
     Größe"); waagerecht 1 rem statt 1,15, weil die 2,4 rem in die Namensspalte
     wandern und dort lange Namen einzeilig halten. */
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--linie);
}
.szenarienliste .zeile:first-child { border-top: 0; }
.szenarienliste .zeile:hover:not(.kopfzeile-liste) {
  background: color-mix(in srgb, var(--petrol) 3%, transparent);
}

/* ---------------------------------------------- Schriftbild der Liste

   Drei Grade, jeder mit einer Aufgabe — und alle drei aus dem Vorrat, den die
   Tabellen der App ohnehin benutzen. Vorher standen in einer einzigen Zeile
   fünf: 0,74 rem Überschrift, 0,78 Fortschritt, 0,82 Uhrzeit, 0,92 Name und
   15 px Zahlen, dazu zwei Schriftfamilien. „Schriftbild vereinheitlichen"
   (M. Zapf, 2026-08-10) heißt: Ein Grad je Aufgabe, nicht je Element.

       0,82 rem / 620   Überschrift   — wie `th`
       0,88 rem         Werte         — wie `table`
       0,78 rem         Zweitzeile    — Uhrzeit, Fortschritt

   Die Zustandspille bleibt, wie sie ist: Sie ist eine gemeinsame Komponente
   und trägt dasselbe Bild wie in der Projektübersicht. */
.szenarienliste .zeile { font-size: 0.88rem; }

/* Die Kopfzeile ist ein Tabellenkopf und sieht jetzt auch so aus wie einer —
   dieselben Werte wie in der `th`-Regel weiter oben, Zeichen für Zeichen.
   Versalien mit Sperrung und Anzeigeschrift waren hier ein Sonderweg: Sie
   sahen nirgends sonst in der App so aus und machten die Überschriften rund
   ein Drittel breiter, was den ganzen Breitenkampf erst ausgelöst hat. */
.szenarienliste .kopfzeile-liste {
  font-size: 0.82rem;
  font-weight: 620;
  color: var(--text-zweit);
  background: var(--ebene);
}

.szenarienliste .feld.zahl {
  text-align: right;
  white-space: nowrap;
  /* 1,4 statt der geerbten 1,6: „Gerechnet" trägt Datum und Uhrzeit
     untereinander und war damit die höchste Zelle der Zeile — die Zeilenhöhe
     hing an einer Nebensache. Jetzt liegt die Zelle mit 37 px dicht bei den
     34 px der Knöpfe, und die Zeile steht ruhig. */
  line-height: 1.4;
}
/* Die Überschriften brechen nicht mehr um. Sie müssen es auch nicht: Jede Spur
   ist an ihrer Überschrift gemessen (siehe Tabelle oben). Ein Umbruch wäre
   hier kein Schutz, sondern eine Verkleidung — im Bild vom 2026-08-10 stand
   „ANZULEGENDER / WERT" zweizeilig zwischen sechs einzeiligen Überschriften,
   und die Kopfzeile wirkte dadurch schief.

   `hyphens: none` bleibt als Gurt: Sollte eine Überschrift doch einmal
   umbrechen müssen, dann zwischen Wörtern und nicht als „GESAMTREN-DITE"
   (gemeldet 2026-08-06). */
.szenarienliste .kopfzeile-liste .feld.zahl {
  white-space: nowrap;
  hyphens: none;
}
/* Immer untereinander: Knopf, Zustand, Fortschritt. Vorher brach die Zelle
   je nach Namenslänge mal nebeneinander und mal untereinander um — dieses
   Wechselspiel ist der eigentliche Grund, warum die Zeile schief wirkte. Eine
   feste Anordnung sieht auch dann geordnet aus, wenn sie zwei Zeilen braucht. */
.szenarienliste .feld.name { min-width: 0; }

/* Zustand und Fortschritt untereinander, linksbündig — eine eigene Spalte,
   damit die Namenszelle nicht höher wird als die Zahlen daneben. */
.szenarienliste .feld.zustand {
  display: flex;
  flex-direction: column;
  /* Ohne diese Zeile wird die Pille als Flexkind auf die ganze Spaltenbreite
     gedehnt, und ihre Schrift steht links statt in der Mitte. Sie soll ihren
     Inhalt umschließen, nicht die Spalte. */
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}
/* Der Fortschritt ist eine Zweitzeile wie die Uhrzeit — derselbe Grad, dieselbe
   gedämpfte Farbe, damit die Spalte nicht lauter ist als die Zahlen daneben. */
.szenarienliste .feld.zustand .unter {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Der Szenarioname als Knopf. Er steht neben „Duplizieren" und „Löschen" und
   führt wie diese irgendwohin — als bloßer Verweis sah er aus wie
   Beschriftung, nicht wie ein Ziel.

   Gleiche Form wie die stillen Knöpfe, aber mit Gewicht: Rahmen und Schrift in
   der Bedienfarbe, beim Überfahren gefüllt. Nicht von vornherein gefüllt —
   drei satte Flächen in einer Zeile nehmen den Zahlen die Aufmerksamkeit, und
   die sind der Grund, warum man diese Liste ansieht. */
.szenarienliste .feld.name a.knopf-name {
  display: inline-block;
  max-width: 100%;
  padding: 0.34rem 0.8rem;
  /* Kein eigener Grad mehr: Der Name ist ein Wert wie die Zahlen daneben und
     steht deshalb in deren Grad. Das Gewicht trägt die Betonung, nicht die
     Größe — 0,92 rem neben 0,88 rem war ein Unterschied, den man nicht als
     Absicht liest, sondern als Versehen. */
  font-weight: 560;
  line-height: 1.35;
  color: var(--aktion);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--aktion) 45%, transparent);
  border-radius: 7px;
  text-decoration: none;
  /* Lange Namen brechen um, statt die Spalte zu sprengen. Ein Abschneiden mit
     Auslassungspunkten wäre kürzer, verstecken aber ausgerechnet die Endung —
     und die trägt hier die Jahreszahl. */
  overflow-wrap: anywhere;
  transition: background .12s, border-color .12s, color .12s;
}
.szenarienliste .feld.name a.knopf-name:hover,
.szenarienliste .feld.name a.knopf-name:focus-visible {
  background: var(--aktion);
  border-color: var(--aktion);
  color: var(--aktion-text);
  text-decoration: none;
}
/* Die Uhrzeit unter dem Datum: dieselbe Zweitzeile wie der Fortschritt. Vorher
   erbte sie die 0,82 rem der globalen `.kleingedruckt` — ein vierter Grad in
   derselben Zeile, für den es keinen Grund gab. Gedämpft, weil das Datum die
   Auskunft trägt und die Minute nur die Feinheit.

   (Die frühere Regel `.szenarienliste .feld.name .unter` steht nicht mehr hier:
   Seit der Zustand eine eigene Spalte hat, enthält die Namenszelle nur noch den
   Knopf. Sie war toter Code mit einem fünften Schriftgrad darin.) */
.szenarienliste .kleingedruckt {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--gedaempft);
}

/* Die Fassungsmarke neben dem Namen: klein, gedämpft, aber anklickbar. Sie
   sagt zweierlei in einem Zeichen — dass es mehrere Fassungen gibt, und
   welche man gerade sieht. */
.fassungsmarke {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.36rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gedaempft);
  background: var(--tief);
  border-radius: 5px;
  text-decoration: none;
  vertical-align: 0.08rem;
}
.fassungsmarke:hover,
.fassungsmarke:focus-visible {
  color: var(--aktion-text);
  background: var(--aktion);
}

.szenarienliste .rendite { font-weight: 560; }
.szenarienliste .rendite.spitze { color: var(--gruen); font-weight: 700; }

.szenarienliste .feld.tun {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Ein quadratischer Knopf, der nur ein Zeichen trägt. Die Fläche bleibt so
   groß wie bei einem beschrifteten — 2,1 rem sind rund 34 px und damit über
   der Grenze, ab der ein Ziel mit dem Finger sicher zu treffen ist. Nur die
   Schrift daneben fällt weg. */
.knopf-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  color: var(--text-zweit);
  background: transparent;
  border: 1px solid var(--rand);
  border-radius: 7px;
  cursor: pointer;
}
.knopf-symbol svg {
  width: 1.05rem;
  height: 1.05rem;
  /* Strichzeichnung statt Fläche: Sie trägt die Farbe des Knopfes und wechselt
     beim Überfahren mit, ohne zweite Regel. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.knopf-symbol:hover { color: var(--text); border-color: var(--gedaempft); }
.knopf-symbol.gefahr:hover {
  color: #fff;
  background: var(--rot);
  border-color: var(--rot);
}
/* Sichtbar auch für die Tastatur — ein Symbolknopf ohne Beschriftung ist sonst
   im Fokus kaum zu erkennen. */
.knopf-symbol:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
}
.szenarienliste .feld.tun form { display: contents; }
.knopf-still.gefahr { color: var(--text-zweit); }
.knopf-still.gefahr:hover { color: #fff; background: var(--rot); border-color: var(--rot); }

/* Schmale Schirme: die Zeile wird zum Block, jede Zahl bekommt ihre
   Beschriftung aus `data-titel` — sonst weiss niemand, was „800 kWh" ist. */
@media (max-width: 900px) {
  /* **Mit `.szenarienliste` davor, sonst wirkt es nicht.** Bloss
     `.kopfzeile-liste` zählt 0-1-0 und verliert gegen `.szenarienliste .zeile`
     mit 0-2-0, das weiter oben `display: grid` setzt — die Kopfzeile blieb
     also stehen und stand als „SZENARIO ZUSTAND : PV : SPEICHER …" über den
     Karten, mitsamt der Doppelpunkte, die `::before` aus dem fehlenden
     `data-titel` baut. Ein stiller Fehler: Auf schmalen Schirmen sieht kaum
     jemand nach, und im Bild vom 2026-08-10 war nur die breite Ansicht zu
     sehen. Gefunden beim Nachstellen der Seite in allen Breiten. */
  .szenarienliste .kopfzeile-liste { display: none; }
  .szenarienliste .zeile { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
  .szenarienliste .feld.name { grid-column: 1 / -1; }
  /* Auf schmalen Schirmen steht der Zustand wieder direkt beim Namen — dort
     gibt es keine Spalten mehr, an denen er ausrichten müsste. */
  .szenarienliste .feld.zustand { grid-column: 1 / -1; flex-direction: row; gap: 0.6rem; }
  .szenarienliste .feld.zahl { text-align: left; }
  .szenarienliste .feld.zahl::before {
    content: attr(data-titel) ": ";
    color: var(--gedaempft);
  }
  .szenarienliste .feld.tun { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Als <a> ausgefuehrte Knoepfe duerfen nicht wie ein Verweis aussehen —
   Funktionen sind Knoepfe, nicht Links. */
a.knopf-still { display: inline-block; text-decoration: none; }

/* ══════════════════════════════════════════════════ Erklärungen (Wiki) ══ */

/* Die Kopfnavigation trägt „Erklärungen" und die Abmeldung. Sie sitzt rechts,
   weil links die Marke steht und dazwischen der Leerraum die beiden trennt. */
/* In der dunklen Leiste gilt ihre eigene Schriftfarbe. „Erklärungen" war hier
   schon einmal unsichtbar — Petrol auf Petrol —, weil ein besuchter Verweis die
   Bedienfarbe bekam. Damals wurde das mit `.kopf a:visited` überstimmt: das
   Symptom behandelt, die Ursache stehengelassen. Die stand oben bei den
   Verweisen und hat als Nächstes den Anmeldeknopf erwischt. Jetzt ist sie weg,
   und hier genügt die schlichte Regel. */
.kopf a,
.kopf a:hover { color: var(--leiste-text); }

.kopfnavi {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.kopfnavi > a {
  color: var(--leiste-text);
  opacity: 0.82;
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.kopfnavi > a:hover { opacity: 1; border-bottom-color: var(--sonne); }
/* Die aktive Seite wird durch die Sonne markiert — als reines Zeichen ohne
   Textfunktion ist Gelb dafür zugelassen (Farben.md, Regel 4). */
.kopfnavi > a.aktiv { opacity: 1; border-bottom-color: var(--sonne); }

.wiki-kopf { max-width: 46rem; }
.wiki-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}
.wiki-eintrag h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.wiki-eintrag p { margin: 0; color: var(--text-zweit); font-size: 0.9rem; }

/* Text links, Verzeichnis rechts. Ab 62rem Textbreite wird eine Zeile länger,
   als das Auge sie zurückverfolgen kann — deshalb die Begrenzung, nicht aus
   Geschmack. */
.wiki {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 2.5rem;
  align-items: start;
}
/* Die Spalten sind ausdrücklich zugewiesen, nicht der Reihenfolge im HTML
   überlassen. Genau daran ist die erste Fassung gescheitert: das Verzeichnis
   stand im HTML vor dem Text, bekam damit die breite Spalte, und der Text
   quetschte sich in 15 rem. Mit `grid-column` hält das Bild auch dann, wenn
   jemand die Reihenfolge im HTML ändert. */
.wiki-inhalt { grid-column: 1; max-width: 46rem; }

.wiki-verzeichnis {
  grid-column: 2;
  position: sticky;
  top: 1.5rem;
  font-size: 0.86rem;
  border-left: 1px solid var(--linie);
  padding-left: 1rem;
}
.wiki-verzeichnis-titel {
  font-family: var(--schrift-anzeige);
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.wiki-verzeichnis-titel.weitere { margin-top: 1.6rem; }
.wiki-verzeichnis nav { display: flex; flex-direction: column; gap: 0.15rem; }
.wiki-verzeichnis nav a {
  color: var(--text-zweit);
  text-decoration: none;
  padding: 0.16rem 0;
  line-height: 1.35;
}
.wiki-verzeichnis nav a:hover { color: var(--aktion); }
.wiki-verzeichnis nav a.ebene-3 { padding-left: 0.85rem; font-size: 0.82rem; }

/* --- Der gerenderte Text selbst ---------------------------------------- */

.wiki-inhalt h1 { font-size: 1.65rem; margin: 0 0 1rem; letter-spacing: -0.02em; }
.wiki-inhalt h2 {
  font-size: 1.2rem;
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  letter-spacing: -0.01em;
}
.wiki-inhalt h3 { font-size: 1rem; margin: 1.8rem 0 0.5rem; }
.wiki-inhalt h4 { font-size: 0.92rem; margin: 1.4rem 0 0.4rem; color: var(--text-zweit); }
.wiki-inhalt p { margin: 0 0 0.9rem; }
.wiki-inhalt ul, .wiki-inhalt ol { margin: 0 0 0.9rem; padding-left: 1.35rem; }
.wiki-inhalt li { margin-bottom: 0.35rem; }
.wiki-inhalt li > ul, .wiki-inhalt li > ol { margin-top: 0.35rem; }

.wiki-inhalt blockquote {
  margin: 1.2rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 3px solid var(--sonne);
  color: var(--text-zweit);
}

.wiki-inhalt code {
  font: 0.87em/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--tief);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
/* Die Skizzen sind ASCII in einem Codeblock — sie müssen waagerecht scrollen
   dürfen, statt die Seite zu sprengen. */
.wiki-inhalt pre {
  background: var(--tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  margin: 0 0 1.1rem;
}
.wiki-inhalt pre code {
  background: none;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre;
}

.wiki-inhalt table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-size: 0.9rem;
}
.wiki-inhalt th {
  text-align: left;
  font-family: var(--schrift-anzeige);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gedaempft);
  border-bottom: 1px solid var(--rand);
  padding: 0.4rem 0.7rem 0.4rem 0;
}
.wiki-inhalt td {
  border-bottom: 1px solid var(--linie);
  padding: 0.45rem 0.7rem 0.45rem 0;
  vertical-align: top;
}
.wiki-inhalt tr:last-child td { border-bottom: 0; }
/* Breite Tabellen scrollen in sich, statt die Seite waagerecht zu schieben. */
.wiki-inhalt .tabellenrahmen { overflow-x: auto; }

.wiki-inhalt hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }
/* Die Texte setzen vor jeden Abschnitt ein `---`, und die Überschrift bringt
   ihre eigene Oberlinie mit — zusammen ergab das zwei Striche übereinander.
   Steht der Strich schon da, verzichtet die Überschrift auf ihren. */
.wiki-inhalt hr + h2 { border-top: 0; padding-top: 0; margin-top: 0; }

/* Verweise auf Dokumente, die hier nicht veröffentlicht sind: als Begriff
   lesbar, aber ohne Klickversprechen. */
.wiki-inhalt a.verweis-nicht-hier {
  color: var(--text-zweit);
  text-decoration: none;
  border-bottom: 1px dotted var(--rand);
  cursor: default;
}

@media (max-width: 1000px) {
  .wiki { grid-template-columns: 1fr; }
  /* Auf schmalen Schirmen steht das Verzeichnis oben und scrollt mit — als
     klebender Kasten würde es den halben Schirm belegen. */
  .wiki-verzeichnis {
    grid-column: 1;
    position: static;
    order: -1;
    border-left: 0;
    border-bottom: 1px solid var(--linie);
    padding: 0 0 1rem;
    margin-bottom: 1.4rem;
  }
}


/* Der Liquiditätsplan steht quer: dreissig Jahresspalten, und die
   Positionsbezeichnung muss beim Scrollen stehen bleiben — sonst weiss man
   nach fünf Spalten nicht mehr, welche Zeile man liest. */
/* **Die Positionsspalte darf umbrechen** (Auftrag M. Zapf, 2026-08-28: „bei
   den großen tabellen schauen, dass die spaltenbreite sinnvoller gesetzt wird,
   oft wird dieser bestimmt durch einen langen spalten namen. das führ zu
   unnötigen scrollaufwand").

   Vorher stand hier `nowrap`. Eine einzige Zeile — „(−) Zuführung Rücklage
   Ersatzinvestition Batterie" — bestimmte damit die Breite der ganzen Spalte,
   und weil sie festklebt, fraß sie den sichtbaren Platz weg, den die
   Jahresspalten gebraucht hätten. Bei dreissig Jahren waren so nur eine
   Handvoll zu sehen.

   Jetzt bricht sie um und ist gedeckelt. Der Deckel steht in `ch` und nicht in
   Pixeln: Er meint Zeichen, und darum geht es hier. */
.tabelle.liquiditaet th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--flaeche, #fff);
  text-align: left;
  white-space: normal;
  max-width: 26ch;
  min-width: 14ch;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.25;
  z-index: 1;
}
.tabelle.liquiditaet td { text-align: right; white-space: nowrap; }
.tabelle.liquiditaet tr.art-summe,
.tabelle.liquiditaet tr.art-zwischensumme,
.tabelle.liquiditaet tr.art-bestand { font-weight: 600; }
.tabelle.liquiditaet tr.art-kennzahl { color: var(--gedaempft); }

/* **Der Wasserfall braucht seine Stufen sichtbar.**

   Ohne Abstufung liest sich die Tabelle wie eine Liste von dreissig Zeilen,
   und der Leser muss sich selbst zusammenreimen, was worin enthalten ist.
   Genau das ist bei einer Projektfinanzierung die Aussage: wer wovor bedient
   wird. */
.tabelle.liquiditaet tr.stufe-1 th[scope="row"] { padding-left: 1.6rem; }
.tabelle.liquiditaet tr.art-abschnitt th {
  padding-top: 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petrol, #0b6b74);
  border-bottom: 2px solid var(--petrol, #0b6b74);
}
/* Die drei Ergebnisstufen — EBITDA, CFADS, Cashflow nach Kapitaldienst —
   sind die Zeilen, auf die ein Kreditgeber zeigt. Sie tragen eine Linie
   darüber, weil sie eine Summe der Zeilen darüber sind. */
.tabelle.liquiditaet tr.art-ergebnis { font-weight: 700; }
.tabelle.liquiditaet tr.art-ergebnis th[scope="row"],
.tabelle.liquiditaet tr.art-ergebnis td {
  border-top: 1px solid var(--linie, #d8dee2);
  background: var(--flaeche-2, #f4f7f8);
}
.tabelle.liquiditaet tr.art-ergebnis th[scope="row"] {
  background: var(--flaeche-2, #f4f7f8);
}

/* Zwei Listen im selben Abschnitt: „Zugriff haben" und „Zugriff geben". Sie
   müssen auf einen Blick auseinanderzuhalten sein — die eine ist eine Aussage
   über Rechte, die andere ein Angebot. */
.freigabe-titel { margin: 1.2rem 0 0.4rem; font-size: 1rem; }
.ankreuzliste { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.ankreuzliste li { margin: 0.25rem 0; }
.ankreuzliste label { display: flex; align-items: center; gap: 0.5rem; }
.ankreuzliste input { width: auto; margin: 0; }


/* --------------------------------------------------------------------------
   Standortkarte in den Projektdaten

   **Warum das hier steht und nicht als `style`-Attribut an der Auszeichnung.**
   Die Inhaltsrichtlinie erlaubt Stil ausschliesslich aus eigenen Dateien
   (`style-src 'self'`, ohne `'unsafe-inline'`). Ein `style="height:340px"` am
   Kartenkasten wird vom Browser deshalb **verworfen** — der Kasten ist dann
   null Pixel hoch, und die Karte ist unsichtbar. Genau das ist am 2026-08-28
   passiert: „ich kann im projekt bearbeiten kein kartenfenster sehen."

   Die Fehlersuche daran war teuer, weil nichts fehlschlaegt: Die Dateien
   werden ausgeliefert, das HTML enthaelt alles, die Konsole zeigt hoechstens
   eine Verletzungsmeldung. Nur zu sehen ist nichts.
   -------------------------------------------------------------------------- */

#standortkarte {
  height: 340px;
  margin-top: 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  /* Leaflet legt seine Kacheln absolut; ohne eigenen Kontext wandern sie
     ueber die Nachbarfelder, sobald jemand die Karte verschiebt. */
  position: relative;
  overflow: hidden;
  /* Bis die Kacheln da sind, steht hier eine ruhige Flaeche statt Weiss —
     so sieht man sofort, DASS eine Karte da ist. */
  background: var(--tief);
}

/* Adressfeld und Knopf nebeneinander. */
.suchzeile {
  display: flex;
  gap: 0.5rem;
}

.suchzeile input {
  flex: 1;
}

/* Die Trefferliste: volle Breite, linksbuendig, untereinander. */
.adresstreffer button {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 0.3rem;
}

/* Der Knopf zum Entfernen sitzt unter der Koordinatenanzeige. */
.standortzeile {
  margin-top: 0.3rem;
}

/* Wenn die Karte nicht kommt, steht im Kasten der Grund — nicht nichts. */
.kartenfehler {
  display: flex;
  align-items: center;
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--gedimmt, #5c6a70);
  background: var(--tief);
}

/* Die Karte, die erklärt, warum hier nichts zu bedienen ist.
 *
 * Freigeben und Zuweisen sind Eigentümerhandlungen; einem Mitarbeiter fehlen
 * beide Abschnitte. Bis zum 2026-08-28 fehlten sie STILL, und das sah aus wie
 * ein Fehler (gemeldet M. Zapf für Seehausen). Der Abstand steht hier und
 * nicht als `style`-Attribut: Die Inhaltssicherheitsrichtlinie erlaubt nur
 * `style-src 'self'` und verwirft Attribute — dieselbe Falle, die am
 * 2026-08-28 schon das Kartenfenster unsichtbar gemacht hat. */
.hinweiskarte {
  margin-top: 1.4rem;
  border-style: dashed;
  box-shadow: none;
}
.hinweiskarte > h2 { margin-top: 0; }

/* Der Absatz, der eine teure Eingabe erklärt, bevor sie gemacht wird.
 *
 * Der Stufenhub der Preiskurve erzwingt den jahrweisen Rechenweg und macht den
 * Lauf um ein Vielfaches länger. Das gehört ÜBER die Rechnung und nicht in eine
 * Meldung danach. Der Abstand steht hier und nicht als `style`-Attribut — die
 * Inhaltssicherheitsrichtlinie erlaubt nur `style-src 'self'` und verwirft
 * Attribute. */
.erlaeuterung-oben { margin-top: 1rem; }

/* Die Felder für das Preisniveau je Zeitraum.
 *
 * Schmaler als das übrige Raster: Es sind Zahlen mit zwei Stellen, und bei
 * dreissig Jahren stehen sechs davon nebeneinander. Der Abstand hier und nicht
 * als `style`-Attribut — die Inhaltssicherheitsrichtlinie verwirft die. */
.blockliste { margin-top: 1rem; }
.blockraster { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }

/* **Die Preiswelt je Zeitraum als Tabelle.** Zeiträume als Spalten, Parameter
   als Zeilen — dieselbe Form, in der der Bericht daneben seine Tabellen setzt.
   Die Eingabefelder sitzen in den Zellen und tragen deren Ausrichtung. */
.blocktabelle { table-layout: fixed; }
.blocktabelle th:first-child { width: 12rem; }
.blocktabelle td { padding: 0.3rem 0.35rem; }
.blocktabelle input { width: 100%; min-width: 4.5rem; text-align: right;
  font-variant-numeric: tabular-nums; }
/* Der Zeilenkopf trägt die Erklärung als Titel — der Zeiger sagt, dass dort
   etwas steht. */
.blocktabelle tbody th[title] { cursor: help; text-decoration: underline dotted;
  text-underline-offset: 0.2rem; }
/* Schmale Fenster: die Tabelle darf scrollen statt die Seite zu sprengen. */
.blockliste { overflow-x: auto; }

/* Die zweite Kopfzeile mit dem Betriebsjahr.
 *
 * Leiser als die Jahreszahl darüber: Sie ist die Zählhilfe, nicht die
 * Beschriftung. Auftrag M. Zapf, 2026-08-28. */
.betriebsjahrzeile th {
  font-weight: 400;
  color: var(--text-zweit);
  font-size: 0.85em;
  padding-top: 0;
}