/* SES Portal – Gestaltung
 *
 * Leitgedanke: Das hier ist ein Prüfwerkzeug. Jede Zahl im Workflow ist
 * auf eine Zelle einer Kundendatei zurückführbar, und genau das soll man
 * sehen. Deshalb stehen alle Zahlen, Rechenwege und Zellbezüge in einer
 * dicktengleichen Schrift - sie sind Daten, kein Fließtext. Beschriftung
 * und Erklärung bleiben in der Grotesk.
 *
 * color-scheme steht auf "light", solange keine dunkle Darstellung
 * aktiv ist. Vorher stand dort pauschal "light dark", ohne dass dunkle
 * Farben definiert waren: Auf Geraeten im Dunkelmodus faerbte der
 * Browser daraufhin Eingabefelder und Auswahllisten dunkel ein,
 * waehrend die Seite hell blieb - dunkler Text auf dunklem Grund in
 * genau den Feldern, in die man etwas eintippen soll. Seit es eine
 * echte dunkle Palette gibt (25.08.2026, siehe unten), wird
 * color-scheme dort MIT umgeschaltet, nicht mehr pauschal gesetzt.
 */

:root {
  color-scheme: light;

  /* Markenfarben aus dem SES-Ingenieure-Logo: das dunkle Blaugrau des
     aeusseren Schwungs als Grundfarbe, das Mintgruen des inneren
     Schwungs als Akzent. */
  --marke:        #2d3c4b;
  --akzent:       #83c3b3;
  --akzent-flaeche: #e6f2ee;
  /* Ruhige Flaeche in der Markenfarbe - fuer den Zustand "zu pruefen"
     und den Freigabeblock. */
  --marke-flaeche: #e9ebed;
  --marke-hell:   #ebedf0;
  --marke-tief:   #212a34;

  --tinte:        #171d26;
  --tinte-leise:  #5a6675;
  --tinte-still:  #8b96a4;

  --papier:       #f2f4f7;
  --flaeche:      #ffffff;
  --flaeche-tief: #f8fafb;
  --linie:        #dde3ea;
  --linie-stark:  #c3ccd8;

  --gut:          #17703c;
  --gut-flaeche:  #e8f4ec;
  --schlecht:     #b02418;
  --schlecht-fl:  #fbeceb;
  --achtung:      #91600f;
  --achtung-fl:   #fcf3e2;

  /* Eigene Farbtoken fuer die Kopfleiste. Bis zum 14.09.2026 waren sie
     UNVERAENDERLICH: die Kopfleiste blieb auch im Dunkelmodus weiss, weil
     logo-header.png ein schwarzer Schriftzug auf durchsichtigem Grund ist
     und auf dunklem Band verschwunden waere. Seit es eine dunkle Fassung
     des Logos gibt (logo-header-dunkel.png, erzeugt von
     logo-header-dunkel.gen.py) dunkelt die Kopfleiste mit - die Werte
     hier sind die HELLEN, die dunklen stehen weiter unten bei der
     dunklen Palette.
     Die Token bleiben trotzdem getrennt von --tinte/--flaeche/...: die
     Kopfleiste ist ein eigenes Band ueber dem Inhalt und soll sich
     abheben duerfen, ohne dass jede Aenderung am Inhalt sie mitzieht. */
  --kopf-flaeche:        #ffffff;
  --kopf-papier:         #f2f4f7;
  --kopf-tinte:          #171d26;
  --kopf-tinte-leise:    #5a6675;
  --kopf-tinte-still:    #8b96a4;
  --kopf-linie:          #dde3ea;
  --kopf-linie-stark:    #c3ccd8;
  --kopf-akzent:         #83c3b3;
  --kopf-akzent-flaeche: #e6f2ee;
  --kopf-marke:          #2d3c4b;
  --kopf-marke-flaeche:  #e9ebed;
  --kopf-gut:            #17703c;
  --kopf-schlecht:       #b02418;

  /* Volltonflaeche fuer Knopf-Text in festem #fff (.haupt-knopf,
     .neu-knopf, .neben-knopf.haupt) - eigene, unveraenderliche Werte
     wie bei --kopf-*: --marke wird im Dunkelmodus HELL (fuer Text auf
     dunklem Grund), und weisse Schrift auf einer hellen Flaeche waere
     kaum noch zu lesen. Dieselben Werte wie das bisherige (helle)
     --marke/--marke-tief, nur nicht vom Theme mitgezogen. */
  --marke-knopf:       #2d3c4b;
  --marke-knopf-hover: #212a34;
  /* Derselbe Grund, nur fuer den gruenen "erledigt"-Punkt (Schritt-
     Fortschritt): --gut wird im Dunkelmodus hell, weisses Haekchen
     darauf waere kaum noch zu lesen. */
  --gut-voll:          #17703c;

  --schrift: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ziffern: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --kopf-hoehe: 52px;
  --leiste-breite: 290px;

  /* Groesste Breite, die Kopfleiste und Raster einnehmen. Darueber
     hinaus waechst nur der Rand links und rechts, der Inhalt bleibt
     mittig.
     Die Grenze ist bewusst hoch: Die Werteansicht ist eine Tabelle mit
     sechs Spalten - Bezeichnung, Wert, Einheit, Zelle, Verwendung,
     Notiz. Bei 88rem wurde die Herkunftsspalte umgebrochen, waehrend
     rechts und links je 14rem leer blieben. Fuer FLIESSTEXT waere das
     zu breit, aber hier steht ueberall Tabelle. */
  --bau-breite: 118rem;
  /* Breite der Inhaltsspalte. Steht getrennt, weil ein paar Seiten
     (Anmeldung, neues Projekt) bewusst schmal bleiben. */
  --seite-breite: 96rem;
}

/* ---------------------------------------------------------------
   Dunkle Darstellung (25.08.2026)
   ---------------------------------------------------------------
   Zwei Wege dorthin, dieselben Werte:
   - "automatisch" setzt KEIN data-theme - dann entscheidet allein die
     Systemeinstellung (prefers-color-scheme). Der Ausschluss
     ":not([data-theme="hell"])" verhindert, dass ein ausdruecklich
     gewaehltes Hell die Systemeinstellung Dunkel doch noch verliert.
   - "dunkel" setzt data-theme="dunkel" von Hand (siehe app.js,
     initDarstellung) und gewinnt in beide Richtungen.
   Die beiden Bloecke sind Wort fuer Wort gleich. Wer einen Wert aendert,
   muss ihn in BEIDEN aendern - sonst sieht die Systemeinstellung anders
   aus als die von Hand gewaehlte Darstellung.
   Seit 14.09.2026 dunkelt die Kopfleiste mit: die --kopf-*-Token werden
   hier ueberschrieben, und das Logo wird auf die dunkle Fassung
   umgeschaltet (siehe .logo-hell/.logo-dunkel weiter unten). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;

    --marke:        #9db3c7;
    --akzent:       #7bd0ba;
    --akzent-flaeche: #14312a;
    --marke-flaeche: #1f2937;
    --marke-hell:   #242f3d;
    --marke-tief:   #dbe4ee;

    --tinte:        #e8ecf1;
    --tinte-leise:  #a7b2c0;
    --tinte-still:  #788493;

    --papier:       #11151b;
    --flaeche:      #1a212b;
    --flaeche-tief: #212a35;
    --linie:        #2b3542;
    --linie-stark:  #3a4553;

    --gut:          #4ade8a;
    --gut-flaeche:  #123321;
    --schlecht:     #f2837a;
    --schlecht-fl:  #3a1512;
    --achtung:      #e0b45c;
    --achtung-fl:   #3a2c10;

    /* Kopfleiste. --kopf-flaeche ist bewusst --flaeche und nicht
       --papier: das Band soll sich vom Seitengrund darunter abheben,
       so wie es im Hellen als Weiss auf Hellgrau tut. */
    --kopf-flaeche:        #1a212b;
    --kopf-papier:         #11151b;
    --kopf-tinte:          #e8ecf1;
    --kopf-tinte-leise:    #a7b2c0;
    --kopf-tinte-still:    #788493;
    --kopf-linie:          #2b3542;
    --kopf-linie-stark:    #3a4553;
    --kopf-akzent:         #7bd0ba;
    --kopf-akzent-flaeche: #14312a;
    --kopf-marke:          #9db3c7;
    --kopf-marke-flaeche:  #1f2937;
    --kopf-gut:            #4ade8a;
    --kopf-schlecht:       #f2837a;
  }
}
:root[data-theme="dunkel"] {
  color-scheme: dark;

  --marke:        #9db3c7;
  --akzent:       #7bd0ba;
  --akzent-flaeche: #14312a;
  --marke-flaeche: #1f2937;
  --marke-hell:   #242f3d;
  --marke-tief:   #dbe4ee;

  --tinte:        #e8ecf1;
  --tinte-leise:  #a7b2c0;
  --tinte-still:  #788493;

  --papier:       #11151b;
  --flaeche:      #1a212b;
  --flaeche-tief: #212a35;
  --linie:        #2b3542;
  --linie-stark:  #3a4553;

  --gut:          #4ade8a;
  --gut-flaeche:  #123321;
  --schlecht:     #f2837a;
  --schlecht-fl:  #3a1512;
  --achtung:      #e0b45c;
  --achtung-fl:   #3a2c10;

  /* Kopfleiste - siehe Begruendung im Block darueber. */
  --kopf-flaeche:        #1a212b;
  --kopf-papier:         #11151b;
  --kopf-tinte:          #e8ecf1;
  --kopf-tinte-leise:    #a7b2c0;
  --kopf-tinte-still:    #788493;
  --kopf-linie:          #2b3542;
  --kopf-linie-stark:    #3a4553;
  --kopf-akzent:         #7bd0ba;
  --kopf-akzent-flaeche: #14312a;
  --kopf-marke:          #9db3c7;
  --kopf-marke-flaeche:  #1f2937;
  --kopf-gut:            #4ade8a;
  --kopf-schlecht:       #f2837a;
}

* { box-sizing: border-box; }

/* NICHT height:100% - das gibt body/html eine FESTE (kurze) Boxhoehe.
   Ueberschreitet der Inhalt sie (jeder laengere Workflow), bleibt die
   sichtbare Seite zwar laenger, aber `position: sticky` auf .kopfleiste
   darf sich nur innerhalb der eigenen (kurzen) Box eines Vorfahren
   bewegen - jenseits davon wird sie aus dem Fluss der Box "entlassen"
   und scrollt mit. Rückmeldung 25.08.2026: "the header bar scrolls with
   the website instead of staying always on top", reproduziert erst beim
   Scrollen bis ganz ans Ende eines laengeren Workflows. min-height fuellt
   einen KURZEN Inhalt weiterhin bis zum unteren Rand, ohne einen
   laengeren zu deckeln. */
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
}

/* ---------------------------------------------------------------
   Kopfleiste
   --------------------------------------------------------------- */
.kopfleiste {
  height: var(--kopf-hoehe);
  /* Bewusst die --kopf-*-Token, nicht die theme-abhaengigen - sie folgen
     der Darstellung, bleiben aber getrennt regelbar. Begruendung siehe
     :root oben. */
  background: var(--kopf-flaeche);
  color: var(--kopf-tinte);
  border-bottom: 1px solid var(--kopf-linie);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Das Band laeuft ueber die ganze Breite, sein Inhalt aber steht
     mittig - genau ueber dem Raster darunter. Statt eines
     zusaetzlichen Huellelements erledigt das der Innenabstand: er ist
     mindestens 1.1rem und waechst darueber hinaus auf die Haelfte des
     Ueberschusses. */
  padding: 0 max(1.1rem, calc((100% - var(--bau-breite)) / 2));
  position: sticky;
  top: 0;
  z-index: 20;
}

.marke {
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.marke-logo {
  /* Fuellt die Kopfleiste bis auf einen schmalen Luftraum - keine
     eigene Flaeche mehr, das Logo traegt seine Farben selbst. */
  height: calc(var(--kopf-hoehe) - 14px);
  width: auto;
  display: block;
}

/* Welche der beiden Logofassungen zu sehen ist (index.html liefert beide).
   Die Bedingungen sind dieselben wie bei der Farbpalette ganz oben - nur
   so passt das Logo immer zum Grund, auf dem es steht, egal ob die
   Darstellung von der Systemeinstellung oder von Hand kommt.
   display:none statt visibility/opacity: das ausgeblendete Bild darf
   keinen Platz belegen (beide stuenden sonst nebeneinander) und wird so
   auch von Vorlesewerkzeugen nicht doppelt angesagt. */
.logo-dunkel { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .logo-hell   { display: none; }
  :root:not([data-theme="hell"]) .logo-dunkel { display: block; }
}
:root[data-theme="dunkel"] .logo-hell   { display: none; }
:root[data-theme="dunkel"] .logo-dunkel { display: block; }
/* Gegenstueck: helles System, aber von Hand auf dunkel gestellt, ist oben
   erledigt. Umgekehrt - dunkles System, von Hand auf hell - greift der
   :not([data-theme="hell"])-Ausschluss in der Abfrage darueber. */

/* Die Bereiche stehen MITTIG in der Kopfleiste (Rückmeldung 03.09.2026:
   "center the tabs like FNR/Bilanz/RSS-Feed"). Marke und Benutzer
   bekommen dafuer gleich grosse, dehnbare Anteile links und rechts -
   nur so liegt die Mitte der Bereiche auf der Mitte der Seite, auch
   wenn das Logo breiter ist als das Profilbild. Die Bereiche selbst
   nehmen nur ihren eigenen Platz. */
.kopfleiste > .marke { flex: 1 0 0; }
.kopfleiste > .benutzer { flex: 1 0 0; justify-content: flex-end; }
.bereiche { display: flex; gap: 0.2rem; flex: 0 0 auto; justify-content: center; }
.bereich {
  background: transparent;
  border: none;
  color: var(--kopf-tinte-leise);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}
.bereich:hover { background: var(--kopf-akzent-flaeche); color: var(--kopf-marke); }
.bereich.aktiv {
  background: var(--kopf-marke-flaeche);
  color: var(--kopf-marke);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--kopf-akzent);
}

.benutzer { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; }

/* Klapper am Benutzernamen - Darstellung, Verwaltung und Abmelden an
   einer Stelle statt als drei einzelne Kopfleisten-Elemente (Rückmeldung
   25.08.2026). Feste Kopfleisten-Token wie der Rest der Kopfleiste,
   damit die Klapper-Flaeche zur Kopfleiste passt, aus der sie
   aufklappt, unabhaengig von der gewaehlten Seiten-Darstellung. */
.benutzer-menue { position: relative; }

/* Der Ausloeser ist seit dem 02.09.2026 NUR das Profilbild.
   Kein Pfeil und kein Name daneben: Das Bild ist rund, sitzt an der
   Stelle, an der jede Anwendung das Konto fuehrt, und der Name steht
   im Klapper darunter. */
.benutzer-knopf {
  background: none;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}
.benutzer-knopf .wer-bild { width: 30px; height: 30px; }
.benutzer-knopf:hover { border-color: var(--kopf-linie-stark); }
.benutzer-knopf.ist-admin { border-color: var(--kopf-marke); }
.benutzer-klapper {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  background: var(--kopf-flaeche);
  border: 1px solid var(--kopf-linie);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(23, 29, 38, 0.18);
}
/* [hidden] muss hier ausdruecklich wiederholt werden: Die Regel oben
   setzt display:flex ueber eine Klasse (Spezifitaet 0,1,0) - genauso
   hoch wie die UA-Regel fuer [hidden], und Autorenregeln schlagen die
   UA-Regel bei Gleichstand immer. Ohne diese Zeile blieb der Klapper
   IMMER sichtbar, auch mit gesetztem hidden-Attribut (Rückmeldung
   25.08.2026). */
.benutzer-klapper[hidden] { display: none; }
.klapper-trenner { border: none; border-top: 1px solid var(--kopf-linie); margin: 0.2rem 0; }
.klapper-eintrag {
  display: block;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border-radius: 5px;
  font-size: 0.85rem;
  color: var(--kopf-tinte);
  text-decoration: none;
  cursor: pointer;
}
.klapper-eintrag:hover { background: var(--kopf-akzent-flaeche); }
.klapper-eintrag.aktiv { color: var(--kopf-marke); font-weight: 600; }
.klapper-eintrag.abmelden { color: var(--kopf-schlecht); }
/* .klapper-eintrag greift bei <a> von selbst - der Darstellung-
   Eintrag ist ein <button> (der ganze Eintrag soll klickbar sein, nicht
   nur der Wert-Teil, Rückmeldung 25.08.2026) und braucht deshalb die
   Rueckstellung des Standard-Knopfaussehens obendrauf. */
.darstellung-eintrag {
  background: none;
  border: none;
  font: inherit;
  text-align: left;
}
.darstellung-eintrag strong { color: var(--kopf-marke); }

/* ---------------------------------------------------------------
   Grundraster
   --------------------------------------------------------------- */
.rahmen {
  display: grid;
  /* EINE Spalte, und zwar von Anfang an. Vorher standen hier zwei, und
     die zweite wurde von jeder Ansicht per `ohne-leiste` wieder
     eingezogen - sichtbar blieb sie in dem Moment zwischen HTML und
     erstem Zeichnen. Beim Neuladen blitzte deshalb die alte
     Seitenleiste auf (Rueckmeldung 02.09.2026). */
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--kopf-hoehe));
  max-width: var(--bau-breite);
  margin: 0 auto;
  /* Damit die weisse Flaeche der Seitenleiste nicht frei im Grauen
     schwebt, bekommt der Rahmen auf beiden Seiten eine Linie. Keine
     eigene Hintergrundfarbe: die Inhaltsspalte soll das Grau des
     Papiers behalten. */
  border-inline: 1px solid var(--linie);
}

.anzahl { font-family: var(--ziffern); }

.offen-punkt { color: var(--achtung); font-weight: 600; }

/* Zustandsplaketten */
.zustand {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.08rem 0.35rem;
  border-radius: 3px;
  white-space: nowrap;
}
.zustand.gross { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
.z-done    { color: var(--gut);      background: var(--gut-flaeche); }
.z-error   { color: var(--schlecht); background: var(--schlecht-fl); }
.z-running,
.z-queued  { color: var(--achtung);  background: var(--achtung-fl); }
/* "Zu pruefen" ist kein Warten auf den Rechner, sondern eine Aufgabe fuer
   den Menschen - deshalb die Markenfarbe und nicht das Achtung-Gelb der
   laufenden Vorgaenge. */
.z-pruefen { color: var(--marke); background: var(--marke-flaeche); }

/* ---------------------------------------------------------------
   Inhalt
   --------------------------------------------------------------- */
.inhalt { padding: 1.6rem 2rem 5rem; min-width: 0; }
.seite { max-width: var(--seite-breite); margin-inline: auto; }

/* Seiten, die von Breite NICHTS haben: ein Anmeldeknopf, ein Formular
   mit sechs Feldern, eine Startseite mit drei Kacheln. Sie in die volle
   Breite zu ziehen macht sie nicht besser, nur leerer. */
.seite.schmal { max-width: 62rem; }
.hinweis-mitte { color: var(--tinte-still); padding: 2rem; }

.seiten-kopf { margin-bottom: 1.6rem; }
.kopf-zeile { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.01em; }
.unterzeile { color: var(--tinte-leise); font-size: 0.88rem; margin: 0.25rem 0 0; }
.sp-herkunft code {
  font-family: var(--ziffern);
  font-size: 0.92em;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 0.02rem 0.28rem;
}

/* ---------------------------------------------------------------
   Blöcke
   --------------------------------------------------------------- */
.block {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 7px;
  padding: 1.1rem 1.3rem 1.3rem;
  margin-bottom: 1.1rem;
}
.block-titel {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tinte-still);
  font-weight: 700;
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.zaehler {
  font-family: var(--ziffern);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 9px;
  padding: 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0;
}
.block-hinweis { font-size: 0.84rem; color: var(--tinte-leise); margin: 0 0 0.8rem; }
.unter-titel {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--tinte-still); margin: 1.6rem 0 0.6rem;
}

.block-fazit { font-size: 1.02rem; font-weight: 600; margin: 0 0 0.9rem; }
.block-fazit.gut { color: var(--gut); }
.block-fazit.schlecht { color: var(--schlecht); }
.block-fazit.achtung { color: var(--achtung); }

/* Prüfkriterien */
.kriterien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.kriterium { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.89rem; }
.kri-zeichen {
  width: 1.15rem; height: 1.15rem; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; margin-top: 0.12rem;
}
.kriterium.gut .kri-zeichen      { background: var(--gut-flaeche);      color: var(--gut); }
.kriterium.schlecht .kri-zeichen { background: var(--schlecht-fl); color: var(--schlecht); }
.kriterium.achtung .kri-zeichen  { background: var(--achtung-fl);  color: var(--achtung); }
.kri-text strong { display: block; font-weight: 600; }
.kri-text { color: var(--tinte-leise); }

/* Offene Punkte als Abhakliste */
.aufgabenliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.aufgabenliste li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; }

/* Dokumente */
.dokumente { display: flex; flex-direction: column; }
.dokument {
  display: grid;
  grid-template-columns: 2.9rem 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linie);
}
.dokument:last-of-type { border-bottom: none; }
.dokument.offen { background: var(--flaeche-tief); }
.dok-art {
  font-family: var(--ziffern);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.15rem 0;
  border-radius: 3px;
  background: var(--marke-hell);
  color: var(--marke);
}
.dok-name { font-size: 0.89rem; font-weight: 600; overflow-wrap: anywhere; }
.dok-groesse { font-family: var(--ziffern); font-size: 0.78rem; color: var(--tinte-still); }
.dok-knoepfe { display: flex; gap: 0.4rem; }

.neben-knopf {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.32rem 0.7rem;
  border-radius: 5px;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--marke);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.neben-knopf:hover { border-color: var(--marke); }
.neben-knopf.haupt { background: var(--marke-knopf); color: #fff; border-color: var(--marke-knopf); }
.neben-knopf.haupt:hover { background: var(--marke-knopf-hover); }

.vorschau {
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 0.7rem;
  background: var(--papier);
}
.vorschau object,
.vorschau iframe { width: 100%; height: 68vh; display: block; border: none; }
/* Die HTML-Vorschau bringt eigenen Grund mit - hier keinen durchscheinen
   lassen, sonst mischen sich zwei Hintergruende. */
.vorschau iframe { background: #fff; }

/* Freigabe: der Schritt zwischen Auswerten und Erzeugen.
   Hervorgehoben, weil hier die Arbeit liegt, solange der Workflow in der
   Pruefung steht. */
.block.freigabe {
  border-left: 3px solid var(--marke);
  background: var(--marke-flaeche);
}
.freigabe-knoepfe {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-top: 0.6rem;
}

/* Erkannte Angebote und Genehmigungen */
.angebote { display: grid; gap: 0.55rem; }
.angebot-gruppe {
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  background: var(--flaeche);
}
.angebot-titel {
  margin: 0 0 0.3rem;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.angebot-titel code { font-size: 0.74rem; color: var(--tinte-still); }
.angebot-liste { margin: 0; padding-left: 1.1rem; font-size: 0.86rem; }
.angebot-liste li { margin: 0.15rem 0; }
.marke {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.08rem 0.35rem; border-radius: 3px;
  margin-right: 0.35rem; white-space: nowrap;
}
.marke.gut { color: var(--gut); background: var(--gut-flaeche); }
.marke.achtung { color: var(--achtung); background: var(--achtung-fl); }
.block-hinweis.warnung { color: var(--achtung); font-weight: 600; }

/* Werte und Rechenwege */
.klappbar { margin-bottom: 0; }
.klapp-inhalt { padding-top: 0.9rem; }

table.werte { width: 100%; border-collapse: collapse; margin-bottom: 1.1rem; font-size: 0.86rem; }
table.werte th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinte-still);
  font-weight: 700;
  padding: 0 0.5rem 0.35rem;
  border-bottom: 1.5px solid var(--linie-stark);
}
table.werte td { padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.werte tr:last-child td { border-bottom: none; }
.sp-wert { width: 11rem; }
.sp-einheit { width: 6rem; color: var(--tinte-still); font-size: 0.82rem; }
.sp-herkunft { width: 13rem; white-space: nowrap; }
.sp-schritt { width: 17rem; color: var(--tinte); }

/* Summenzeile einer Tabelle - abgesetzt, weil sie kein Messwert ist,
   sondern das Ergebnis der Zeilen darüber. */
table.werte tr.summe td {
  border-top: 1.5px solid var(--linie-stark);
  border-bottom: none;
  font-weight: 600;
  color: var(--tinte);
}

/* ------------------------------------------------------------------
 * Herleitung am Kriterium
 *
 * "Ich möchte nicht nur sehen '149 Tage - Anforderung erfüllt', sondern
 * nachvollziehen können, wie die 149 Tage ermittelt wurden." Der
 * Rechenweg gehört deshalb an das Kriterium, nicht in eine eigene
 * Tabelle am Seitenende. Zugeklappt, damit das Ergebnis die Übersicht
 * behält - einen Klick entfernt, damit es überprüfbar bleibt.
 * ------------------------------------------------------------------ */
.kri-text { flex: 1; min-width: 0; }

.kri-regel {
  margin: 0.35rem 0 0;
  font-size: 0.83rem;
  color: var(--tinte-leise);
}
.kri-regel strong.gut { color: var(--gut); }
.kri-regel strong.schlecht { color: var(--schlecht); }
.kri-regel strong.achtung { color: var(--achtung); }

.rechenweg-klapp { margin: 0.45rem 0 0; }
.rechenweg-klapp > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--marke);
  font-weight: 600;
  list-style: none;
}
.rechenweg-klapp > summary::-webkit-details-marker { display: none; }
.rechenweg-klapp > summary::marker { content: ""; }
.rechenweg-klapp > summary:hover { color: var(--marke-tief); }

table.rechenkette {
  margin: 0.5rem 0 0.3rem;
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-radius: 5px;
}
table.rechenkette td { border-bottom: 1px solid var(--linie); }
.ergebnis { font-family: var(--ziffern); font-weight: 600; }

.annahme {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--tinte-still);
  font-style: italic;
}

/* Fehlende Angaben - das sind Fragen an den Vertriebspartner, nicht
   Mängel der Anlage. Deshalb in der Achtungsfarbe, nicht in Rot. */
.kri-klaerung {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--achtung-fl);
  border-radius: 5px;
  font-size: 0.83rem;
}
.kri-klaerung-titel { margin: 0 0 0.3rem; font-weight: 600; color: var(--achtung); }
.kri-klaerung ul { margin: 0; padding-left: 1.1rem; color: var(--tinte-leise); }
.kri-klaerung li { margin-bottom: 0.2rem; }

/* Erkannter Anlagenfall */
.einstufung { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.einstufung li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.88rem;
}
.einstufung li:last-child { border-bottom: none; }
.ein-marke {
  width: 11rem; flex: none;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tinte-still); font-weight: 700;
}
.einstufung strong.gut { color: var(--gut); }
.einstufung strong.achtung { color: var(--achtung); }
.ein-grund { color: var(--tinte-leise); font-size: 0.83rem; }
/* In Tabellenzellen steht die Begründung als eigene Zeile unter der
   Bezeichnung, nicht daneben - sonst sprengt sie die Spaltenbreite. */
td .ein-grund { display: block; margin-top: 0.15rem; font-size: 0.78rem; }

/* ------------------------------------------------------------------
 * Unterlagen- und Anlagenliste
 * ------------------------------------------------------------------ */
.sp-pflicht { width: 9rem; font-size: 0.82rem; color: var(--tinte-leise); }
.sp-pruefung { width: 10rem; font-weight: 600; white-space: nowrap; }
.sp-anzahl { width: 6rem; }

.sp-pruefung.gut { color: var(--gut); }
.sp-pruefung.schlecht { color: var(--schlecht); }
.sp-pruefung.achtung { color: var(--achtung); }
.sp-pruefung.still { color: var(--tinte-still); font-weight: 400; }
.sp-anzahl.achtung { color: var(--achtung); }

table.werte td.gut { color: var(--gut); }
table.werte td.schlecht { color: var(--schlecht); }
table.werte tr.leer td { color: var(--tinte-still); }

/* ------------------------------------------------------------------
 * Entwurf, Freigabe, Verlauf, Regelstand
 * ------------------------------------------------------------------ */
.bearbeiter-feld {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.84rem; color: var(--tinte-leise);
}
.bearbeiter-feld .wertfeld { width: 17rem; font-family: var(--schrift); }

.block.freigegeben { border-left: 3px solid var(--gut); }

.verlauf-liste { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.verlauf-liste li {
  font-size: 0.83rem; color: var(--tinte-leise); margin-bottom: 0.15rem;
}
.verlauf-liste code.neu { color: var(--gut); font-weight: 600; }

.sp-pflicht.gut { color: var(--gut); }
.sp-pflicht.achtung { color: var(--achtung); }

/* ------------------------------------------------------------------
 * Verwaltung
 * ------------------------------------------------------------------ */
.benutzer {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.benutzer:empty { display: none; }

/* Das Gesicht einer Person - ueberall gleich (siehe `werBild`).
   Rund, mit fester Groesse und `object-fit: cover`, damit ein
   hochkantes Profilbild nicht verzerrt statt beschnitten wird. */
.wer-bild {
  border-radius: 999px;
  object-fit: cover;
  vertical-align: middle;
  background: var(--flaeche-tief);
  flex: 0 0 auto;
}
.wer-zeile {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.urheber .wer-bild { margin: 0 0.25rem -0.2rem 0; }
/* Kurzstatus der KI-Dokumentenauslese - nur fuer Verwalter, siehe
   ladeBereiche(). Derselbe Pillenstil wie .benutzer-name, der Punkt
   traegt die eigentliche Aussage (gut/schlecht), die Pille selbst
   bleibt in der Kopfleisten-Palette statt grell zu werden. */
.qwen-kurzstatus {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--kopf-tinte-leise);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--kopf-linie-stark);
  text-decoration: none;
}
.qwen-kurzstatus:hover { border-color: var(--kopf-marke); color: var(--kopf-marke); }
.qwen-punkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--kopf-tinte-still);
  flex: none;
}
.qwen-kurzstatus.gut .qwen-punkt { background: var(--kopf-gut); }
.qwen-kurzstatus.schlecht .qwen-punkt { background: var(--kopf-schlecht); }

/* Anmeldeseite - ersetzt den Inhalt, solange niemand angemeldet ist.
 *
 * Sie zeigt nur den Knopf. Karte, Ueberschrift und Erklaertext sind am
 * 20.08.2026 entfallen: Wer hier landet, kommt aus dem Lesezeichen oder
 * vom Link eines Kollegen und muss nicht erst gelesen werden, bevor er
 * klicken darf. Uebrig bleibt der Rahmen fuer die Fehlermeldungen. */
.anmeldeseite {
  display: grid;
  place-items: center;
  /* Kopfleiste und der Innenabstand der Inhaltsspalte abgezogen -
     dann steht der Knopf wirklich in der Mitte des Bildschirms. */
  min-height: calc(100vh - var(--kopf-hoehe) - 6.6rem);
}
.anmelde-karte {
  text-align: center;
  max-width: 30rem;
}
.anmelde-karte .block-fazit { margin-bottom: 1.2rem; text-align: left; }
.anmelde-knopf {
  display: inline-block;
  text-decoration: none;
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------
   Gesperrt
   Rueckmeldung 21.08.2026: "Finale Dokumente erst freigeben, wenn alle
   notwendigen Prüfungen abgeschlossen bzw. bewusst bestätigt wurden."
   --------------------------------------------------------------- */
.sperre {
  border: 1px solid var(--schlecht);
  background: var(--schlecht-fl);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
}
.sperre-titel { margin: 0 0 0.4rem; font-weight: 600; color: var(--schlecht); }
.sperre ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.sperre li { margin-bottom: 0.2rem; }
.sperre-trotzdem {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--tinte-leise);
  cursor: pointer;
}
.sperre-trotzdem input { margin-top: 0.25rem; flex: none; }

/* ---------------------------------------------------------------
   Blocktitel und Knopfzeile im Kapitel
   --------------------------------------------------------------- */
.block-titel { display: flex; align-items: center; gap: 0.6rem; }
.kapitel-knoepfe {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   Breite Tabellen
   Rueckmeldung: "Ich wuerde versuchen, mehr Informationen nebeneinander
   statt untereinander darzustellen. Gerade bei Tabellen ist das
   deutlich uebersichtlicher."
   --------------------------------------------------------------- */
.tabelle-breit { overflow-x: auto; margin-bottom: 0.8rem; }
.tabelle-breit table { min-width: 46rem; }
.technische-details { margin-top: 0.9rem; }
/* Ein Behaelter, der NICHT in die Verweilzeit eingeht, soll auch nicht
   so aussehen, als taete er es. */
tr.nicht-gezaehlt td { opacity: 0.62; }
tr.nicht-gezaehlt td:first-child { opacity: 1; }

/* Ein Hinweis, der oben steht und auffallen muss (heute: gestörte
   Quellen der Fördermeldungen) - eine Ruhe, die keine ist, ist die
   gefaehrlichere Sorte Fehler. */
.veraltet-hinweis { border-left: 4px solid var(--achtung); }
.veraltet-hinweis ul { margin: 0 0 .6rem; padding-left: 1.2rem;
  font-size: 0.88rem; color: var(--tinte-leise); }
.haupt-knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Wer war das?
   Rueckmeldung: „every vorgang and feld should have the person who
   made/edited it name attached to it." Bewusst leise gesetzt - der
   Name ist Beiwerk zur Zahl, nicht ihr Ersatz.
   --------------------------------------------------------------- */
.urheber {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--tinte-still);
  font-family: var(--schrift);
  white-space: nowrap;
}

/* Kennzahlen: die vier Zahlen, die man zuerst sehen will. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}
.kennzahl {
  border: 1px solid var(--linie);
  border-radius: 7px;
  padding: 0.7rem 0.9rem;
  background: var(--flaeche-tief);
}
.kz-wert {
  display: block;
  font-family: var(--ziffern);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tinte);
}
.kz-name {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--tinte-still);
}
.kennzahl.achtung { border-color: var(--achtung); background: var(--achtung-fl); }
.kennzahl.achtung .kz-wert { color: var(--achtung); }
.kennzahl.schlecht { border-color: var(--schlecht); background: var(--schlecht-fl); }
.kennzahl.schlecht .kz-wert { color: var(--schlecht); }

/* Speicherbalken - eine Zahl, die man als Länge schneller erfasst. */
.balken {
  height: 9px;
  border-radius: 999px;
  background: var(--papier);
  border: 1px solid var(--linie);
  overflow: hidden;
  margin: 0.2rem 0 0.4rem;
}
.balken-fuellung {
  height: 100%;
  background: var(--marke);
  transition: width .3s ease;
}
.balken-fuellung.achtung { background: var(--achtung); }
.balken-fuellung.schlecht { background: var(--schlecht); }

/* ------------------------------------------------------------------
 * Feinschliff am Gesamtbild
 * ------------------------------------------------------------------ */
/* Bloecke bekommen eine ruhige Kante statt harter Trennlinien - bei
   inzwischen zwoelf Abschnitten je Workflow war die Seite sonst eine
   ununterbrochene Textwand. */
.block {
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.1rem;
  background: var(--flaeche);
}
.block:hover { border-color: var(--linie-stark); }

/* Tabellenzeilen unterlegen sich beim Ueberfahren - bei breiten
   Tabellen verliert man sonst die Zeile. */
table.werte tbody tr:hover { background: var(--flaeche-tief); }

/* Knoepfe: gleiche Rundung wie die Bloecke, klarer Fokusrahmen. */
.haupt-knopf, .neben-knopf {
  border-radius: 6px;
}
.haupt-knopf:focus-visible,
.neben-knopf:focus-visible,
.bereich:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
}
.neben-knopf.loeschen { color: var(--schlecht); }
.neben-knopf.loeschen:hover { border-color: var(--schlecht); }

.regel-knoepfe { white-space: nowrap; }
.regel-knoepfe .neben-knopf { font-size: 0.76rem; }
/* Eine angepasste Regel hebt sich ab - sonst sieht man der Tabelle
   nicht an, welcher Wert vom Code abweicht. */
table.werte tr.korrigiert > td:first-child { border-left: 2px solid var(--marke); }

/* ------------------------------------------------------------------
 * Protokoll (Verwaltung)
 * ------------------------------------------------------------------ */
.ereignis-filter {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem;
}
.ereignis-filter .wertfeld { width: auto; min-width: 11rem; font-family: var(--schrift); }
.ereignisliste { display: flex; flex-direction: column; }
.ereignis {
  display: grid;
  grid-template-columns: 8rem 9rem 14rem 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.85rem;
}
.ereignis:last-child { border-bottom: none; }
.ereignis:hover { background: var(--flaeche-tief); }
.e-zeit { color: var(--tinte-still); font-family: var(--ziffern); font-size: 0.78rem; }
.e-art { font-weight: 600; font-size: 0.78rem; }
.e-art.gut { color: var(--gut); }
.e-art.schlecht { color: var(--schlecht); }
.e-art.achtung { color: var(--achtung); }
.e-art.still { color: var(--tinte-still); font-weight: 400; }
.e-wer { color: var(--tinte-leise); overflow: hidden; text-overflow: ellipsis; }
.e-was { color: var(--tinte); }
.e-workflow {
  font-family: var(--ziffern); font-size: 0.76rem;
  color: var(--marke); background: var(--marke-flaeche);
  padding: 0 0.3rem; border-radius: 3px; margin-left: 0.3rem;
}
.e-workflow.weg { color: var(--tinte-still); background: var(--papier); }

@media (max-width: 900px) {
  .ereignis { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Bewegung nur, wenn sie gewuenscht ist. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.wertfeld {
  width: 100%;
  font-family: var(--ziffern);
  font-size: 0.85rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--linie-stark);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--tinte);
}
.wertfeld:focus { outline: 2px solid var(--marke); outline-offset: 1px; border-color: var(--marke); }

/* Die Felder der Bausteine (bsFeld in bausteine.js).
   Erläuterungstexte der Formblätter sind lang - sie brauchen ein
   mehrzeiliges Feld, sonst ist der Inhalt nicht überprüfbar. */
.wertfeld-lang {
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
  min-height: 4.2rem;
}
select.wertfeld { font-family: inherit; }
.wertfeld-schalter {
  width: 1.1rem; height: 1.1rem; padding: 0;
  accent-color: var(--marke);
  cursor: pointer;
}
/* Auswahl- und ja/nein-Felder ohne Wert sichtbar als "noch offen" -
   damit man beim Durchsehen erkennt, wo noch etwas fehlt. */
select.wertfeld:invalid,
select.wertfeld option[value=""]:checked { color: var(--tinte-still); }
tr.korrigiert .wertfeld { border-color: var(--achtung); background: var(--achtung-fl); }
.wertfeld.fehlerhaft { border-color: var(--schlecht); background: var(--schlecht-fl); }

.rechenwege code {
  font-family: var(--ziffern);
  font-size: 0.82rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--tinte-leise);
}
.ergebnis { font-family: var(--ziffern); font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------
   Dateiauswahl (Unterlagen ergänzen, Bilanz-Upload, Stromsteuer-Belege)
   --------------------------------------------------------------- */
.ablage-input { font-size: 0.83rem; max-width: 100%; }
.ablage-input::file-selector-button {
  font: inherit; font-size: 0.83rem;
  background: var(--flaeche); color: var(--marke);
  border: 1px solid var(--linie-stark); border-radius: 5px;
  padding: 0.3rem 0.65rem; margin-right: 0.55rem; cursor: pointer;
}
.ablage-input::file-selector-button:hover { border-color: var(--marke); }

select {
  font: inherit; font-size: 0.88rem;
  padding: 0.42rem 1.7rem 0.42rem 0.6rem;
  border: 1px solid var(--linie-stark); border-radius: 5px;
  background: var(--flaeche); color: var(--tinte);
  /* Der Browserpfeil weicht dem Chevron des Portals (nach unten). */
  -webkit-appearance: none; appearance: none;
  background-image: var(--chevron-select);
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.85em;
}
select:hover { border-color: var(--marke); }
:root { --chevron-select: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 5.5 8 10l4.5-4.5' fill='none' stroke='%238b96a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.haupt-knopf {
  font: inherit; font-size: 0.88rem; font-weight: 600;
  background: var(--marke-knopf); color: #fff;
  border: none; border-radius: 5px;
  padding: 0.48rem 1rem; cursor: pointer;
}
.haupt-knopf:hover { background: var(--marke-knopf-hover); }
.haupt-knopf:disabled { opacity: 0.55; cursor: not-allowed; }
.startmeldung { font-size: 0.84rem; color: var(--tinte-leise); }
.startmeldung.fehlerhaft { color: var(--schlecht); font-weight: 600; }

/* Meldungen */
.meldung { border-radius: 6px; padding: 0.9rem 1.1rem; font-size: 0.9rem; }
.meldung.schlecht { background: var(--schlecht-fl); color: var(--schlecht); }
.meldung p { margin: 0.3rem 0 0; }

.spinner {
  width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.15rem;
  border: 2px solid var(--linie-stark);
  border-top-color: var(--marke);
  border-radius: 50%;
  animation: dreh 0.9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--linie-stark); }
}

/* ---------------------------------------------------------------
   Startseite
   --------------------------------------------------------------- */
/* Der Inhaltsspalte steht die ganze Breite zu - sonst klaffte dort, wo
   die alte Seitenleiste war, ein leerer Streifen. Die bewusst schmalen
   Seiten (Anmeldung, Startseite) bleiben schmal.
   `ohne-leiste` heisst seit dem Wegfall der Seitenleiste nur noch
   „diese Ansicht nimmt die volle Breite"; die Klasse bleibt, weil genau
   das ihre einzige verbliebene Wirkung ist. */
.rahmen.ohne-leiste .seite:not(.schmal) { max-width: none; }

/* Löschen - bewusst zurückhaltend gestaltet */
.neben-knopf.loeschen { color: var(--schlecht); }
.neben-knopf.loeschen:hover { border-color: var(--schlecht); background: var(--schlecht-fl); }
.kopf-rechts { margin-left: auto; }

/* ---------------------------------------------------------------
   Bereich „Fördermeldungen"

   Bewusst mit den vorhandenen Bausteinen gebaut (.block, .wertfeld,
   .neben-knopf, .zustand, .tabelle-breit, .klappbar) - ein eigenes
   Aussehen für einen Bereich hätte nur die Frage aufgeworfen, ob man
   noch im selben Portal ist. Neu ist hier nur, was es vorher nicht gab:
   die Eintragsliste, die Zuordnungsmarken und der Mailschalter.
   --------------------------------------------------------------- */

/* Weder gut noch dringend, nur „nicht mehr im Fluss": abgeschaltete
   Quelle, inaktives Stichwort, unveränderter Abruf. Deshalb neutral und
   nicht in einer Signalfarbe. */
.z-entwurf { color: var(--tinte-leise); background: var(--flaeche-tief); }

/* Die Zahl am Reiter „RSS-Feed" (.bereich-zaehler) ist am 07.10.2026
   entfallen - Rückmeldung: „I dont need the counter next to the tab". */

.f-filter {
  display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center;
}
.f-filter .wertfeld { width: auto; min-width: 11rem; font-family: var(--schrift); }
.f-filter input[type="search"] { min-width: 13rem; }

.f-eintraege { display: flex; flex-direction: column; }
.f-eintrag {
  padding: 0.8rem 0 0.8rem 0.75rem;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid transparent;
}
.f-eintrag:last-child { border-bottom: none; }
/* Zugeordnete Meldungen tragen eine Kante in der Markenfarbe. Das ist
   die einzige Stelle, an der dieser Bereich etwas hervorhebt - und sie
   hebt genau das hervor, worum es geht: Betrifft das einen Kunden? */
.f-eintrag.betont { border-left-color: var(--marke); }

.f-kopf { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.f-titel {
  font-weight: 600; font-size: 0.98rem; overflow-wrap: anywhere;
  color: var(--marke);
}
a.f-titel:hover { text-decoration: underline; }
span.f-titel { color: var(--tinte); }

.f-zeile {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; margin-top: 0.3rem; font-size: 0.8rem;
}
.f-datum { font-family: var(--ziffern); color: var(--tinte-still); }
.f-quelle { color: var(--tinte-leise); }

.f-marke {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 10px;
  background: var(--flaeche-tief); color: var(--tinte-leise);
  font-size: 0.75rem; white-space: nowrap;
}
/* Mit Kunden dahinter wiegt die Marke schwerer - das ist der Treffer,
   der jemanden zum Telefon greifen lässt. */
.f-marke.kunde {
  background: var(--marke-flaeche); color: var(--marke); font-weight: 600;
}

.f-text {
  margin: 0.4rem 0 0; font-size: 0.86rem; line-height: 1.5;
  color: var(--tinte-leise);
}

.f-url { font-size: 0.72rem; color: var(--tinte-still); overflow-wrap: anywhere; }
.f-zahl { font-family: var(--ziffern); white-space: nowrap; }
.fehlertext { font-size: 0.78rem; color: var(--schlecht); }

/* „E-Mail an mich" ist seit dem 07.10.2026 EIN Schalter je Person - als
   bsFeldzeile, ohne eigene Regeln hier. */
.f-abonnentenliste { margin-top: 0.4rem; }
.f-abonnentenliste li { gap: 0.6rem; font-size: 0.82rem; }

.f-neu-quelle {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
}
.f-neu-quelle .wertfeld { font-family: var(--schrift); }

/* ---------------------------------------------------------------
   Schmale Fenster
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Am Telefon sind die Filterfelder untereinander besser als
     nebeneinander gequetscht. */
  .f-filter { flex-direction: column; align-items: stretch; }
  .f-filter .wertfeld,
  .f-filter input[type="search"] { min-width: 0; width: 100%; }
  .f-neu-quelle { flex-direction: column; align-items: stretch; }
  .inhalt { padding: 1.2rem 1rem 4rem; }
  .dokument { grid-template-columns: 2.9rem 1fr; row-gap: 0.4rem; }
  .dok-knoepfe { grid-column: 1 / -1; }
  .sp-herkunft { width: auto; }
  .marke-logo { height: 24px; }
}

/* ==================================================================
   Kapitelansicht der FNR-Pruefung (fnr-kapitel.js)
   ==================================================================
   Desktop zuerst: links eine feste Navigation, rechts genau ein
   Kapitel. Sachlich, weiss/grau/blau, keine Kachelflaechen - die
   Rueckmeldung nennt ausdruecklich "keine unnoetige
   Dashboard-Kacheloptik".

   Die Navigation ist zugleich Fortschrittsanzeige und Checkliste und
   bleibt deshalb beim Scrollen stehen (position: sticky): Sie ist der
   Ort, an dem man sieht, was noch zu tun ist - wer dafuer erst
   hochscrollen muss, sieht es nicht. */

/* EINE Bildlaufleiste, nicht zwei.
   Der erste Entwurf gab dem Rahmen `height: calc(100vh - kopf)` und
   liess Navigation und Kapitel je fuer sich scrollen. Im Browser
   standen dann zwei Leisten uebereinander, und bei niedrigem Fenster
   (Laptop, 565 px) blieb fuer das Kapitel ein Streifen uebrig.
   Jetzt scrollt die SEITE, und die Navigation bleibt per `sticky`
   stehen - das ist, was die Rueckmeldung verlangt ("Navigation bleibt
   beim Scrollen sichtbar"), ohne den Inhalt einzuklemmen. */
/* Der Rahmen ist MINDESTENS so hoch wie das Fenster unter der
   Kopfleiste. Ohne das ist die Flexzeile `.pruef-koerper` nur so hoch
   wie ihr laengstes Kind - und auf einer Unterseite mit einer einzigen
   kleinen Karte (Verwaltung > E-Mail-Versand) endete die
   Navigationsspalte samt Trennlinie nach 200 px mitten im Nichts.
   Rueckmeldung 02.09.2026: „some settings pages dont have the full
   left sidebar length still its still short."

   `100vh - --kopf-hoehe` und NICHT zusaetzlich minus `--pruefkopf-hoehe`:
   Die Hoehe des Workflow-Kopfs steckt schon im Fluss (er ist das erste
   Kind), und `--pruefkopf-hoehe` wird nur in der FNR-Ansicht gemessen -
   in der Verwaltung stuende dort der Rueckfallwert 140px und die Spalte
   waere um dessen Differenz zu kurz. So rechnet der Browser. */
.pruef-rahmen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--kopf-hoehe));
}
/* Nimmt den ganzen Rest unter dem Kopf ein; `align-items: stretch`
   gibt ihn dann an die Navigationsspalte weiter. */
.pruef-koerper { flex: 1 1 auto; }

/* Die Prüfansicht läuft über die VOLLE Breite - kein grauer Rand.
 *
 * Rückmeldung 29.08.2026: „die FNR-Seite ist von allen Seiten mit
 * grauen Lücken eingerückt". Die Lücken sind der Seitenhintergrund,
 * der durch das Innenmaß von `main` (25,6 px oben, 32 px seitlich,
 * 80 px unten) durchscheint.
 *
 * Für die Listenseiten ist dieses Innenmaß richtig: Dort schwebt eine
 * Karte auf der Fläche. Die Prüfansicht ist keine Karte, sondern die
 * Arbeitsfläche selbst - sie bringt Kopfzeile, Navigation und
 * Inhaltsspalte samt eigener Innenabstände mit, und ihre beiden
 * klebenden Ebenen sollen bis an den Fensterrand reichen. Ein Rahmen
 * darum kostet auf einem 1210 px breiten Fenster 64 px Arbeitsbreite
 * und lässt die Navigation in der Luft hängen.
 *
 * `:has()` statt einer Klasse, die beim Seitenwechsel gesetzt und
 * wieder entfernt werden müsste: Die Regel gilt genau dann, wenn die
 * Prüfansicht wirklich im Dokument steht, und kann nicht mit dem
 * Zustand auseinanderlaufen. Unterstützt von allen Browsern seit 2023;
 * fehlt `:has()`, bleibt es beim bisherigen Rand - unschön, nicht
 * kaputt. */
main:has(> .pruef-rahmen) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  /* Und UNTEN ebenfalls 0 - das war der Grund, warum die
     Kapitelnavigation beim Scrollen ganz nach unten wieder hochfuhr.
     Rueckmeldung 01.09.2026: „the left sidebar goes up when I scroll
     all the way down".
     `.kapitel-nav` klebt innerhalb ihres Elternblocks `.pruef-koerper`.
     `main` behielt hier seine 80 px Innenabstand unten; die liegen
     AUSSERHALB dieses Blocks. Wer bis in sie hineinscrollt, verlaesst
     den Klebebereich - und die Leiste wandert genau um diese 80 px
     nach oben. Der Atemraum unten steckt ohnehin schon in
     `.kapitel-inhalt` (40 px). */
  padding-bottom: 0;
}

/* DREI Ebenen kleben uebereinander, jede unter der vorigen:
     1. .kopfleiste            top: 0                  (52 px, global)
     2. .pruef-kopf            top: --kopf-hoehe
     3. .kapitel-nav           top: --kopf-hoehe + --pruefkopf-hoehe
   Alle drei standen bis zum 29.08.2026 auf `top: 0`. Folge: Der
   Workflow-Kopf verschwand hinter der Kopfleiste, und weil er eine
   weisse Flaeche hat, verdeckte er zusaetzlich die obersten drei
   Eintraege der Kapitelnavigation.
   `--pruefkopf-hoehe` setzt `fnr-kapitel.js` aus der gemessenen Hoehe -
   sie haengt vom Kundennamen und vom Umbruch der Bilanzzeile ab und
   laesst sich nicht festschreiben. */
.pruef-kopf {
  padding: 8px 22px 8px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  flex: 0 0 auto;
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 3;
}
.pruef-kopf h1 { margin: 0; font-size: 1.32rem; }
/* Eine Zeile fuer alles (28.09.2026): Verweis, Name, Zustand, Statuszeile,
   Loeschknopf. Umbruch statt Abschneiden. */
.pruef-kopf-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 4px; }
.pruef-kopf-zeile .statuszeile { margin: 0; flex: 1 1 auto; }
.pruef-kopf .unterzeile { margin: 3px 0 8px; }

.pruef-koerper {
  display: flex;
  /* `stretch` statt `flex-start`: Die Navigationsspalte soll ueber die
     GANZE Seitenlaenge laufen (Rueckmeldung 02.09.2026), nicht nur so
     weit, wie ihre Eintraege reichen. Vorher endete die Trennlinie
     mitten auf der Seite und darunter lief der Inhalt gegen den blanken
     Hintergrund - es sah aus, als hoere die Seite dort auf. */
  align-items: stretch;
}

/* ---- Navigation ------------------------------------------------- */
/* ZWEI Ebenen, und beide sind noetig:
     `.kapitel-nav`        die SPALTE - Hintergrund und Trennlinie,
                           laeuft ueber die volle Hoehe des Koerpers.
     `.kapitel-nav-innen`  der INHALT - klebt beim Scrollen und scrollt
                           in sich, wenn er laenger ist als das Fenster.
   Beides an EINEM Element ginge nicht: Ein `sticky`-Element ist so
   hoch wie sein Inhalt, und genau daran endete die Leiste vorher auf
   halber Seite. */
.kapitel-nav {
  flex: 0 0 272px;
  border-right: 1px solid var(--linie);
  background: var(--flaeche-tief);
}
.kapitel-nav-innen {
  position: sticky;
  /* Unter Kopfleiste UND Workflow-Kopf - siehe Erklaerung bei
     `.pruef-kopf`. Der Rueckfall 140px gilt nur, solange das Skript
     die Hoehe noch nicht gemessen hat. */
  top: calc(var(--kopf-hoehe) + var(--pruefkopf-hoehe, 140px));
  max-height: calc(100vh - var(--kopf-hoehe) - var(--pruefkopf-hoehe, 140px));
  overflow-y: auto;
  padding-bottom: 20px;
}
/* Einklappbar (28.09.2026, „make the left sidebar collapsable" - ueberall):
   Der Schalter steht oben in der Spalte; zugeklappt bleibt ein schmaler
   Streifen mit dem Chevron, der Inhalt bekommt die Breite. Der Zustand
   lebt im Browser (bsSeitenleiste, bausteine.js) und gilt portalweit. */
.kapitel-nav-schalter { display: flex; align-items: center; justify-content: flex-end; width: 100%;
  border: 0; background: none; cursor: pointer; padding: 8px 12px 0; color: var(--tinte-leise); }
.kapitel-nav-schalter:hover { color: var(--marke); }
.kapitel-nav-schalter .chevron { transform: rotate(180deg); }
.kapitel-nav.zu { flex: 0 0 34px; }
.kapitel-nav.zu .kapitel-nav-innen > :not(.kapitel-nav-schalter) { display: none; }
.kapitel-nav.zu .kapitel-nav-schalter { justify-content: center; padding: 8px 0 0; }
.kapitel-nav.zu .kapitel-nav-schalter .chevron { transform: none; }
.kapitel-nav-kopf {
  padding: 12px 16px 8px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-still);
  background: var(--flaeche-tief);
}
.kapitel-liste { list-style: none; margin: 0; padding: 0; counter-reset: kap; }
.kapitel-punkt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--tinte);
}
.kapitel-punkt:hover { background: var(--marke-hell); }
.kapitel-punkt.aktiv {
  background: var(--flaeche);
  border-left-color: var(--marke);
  font-weight: 600;
}
/* `min-width: 0` ist notwendig, nicht kosmetisch: Ohne das behaelt ein
   langer Kapiteltitel ("Unternehmens-/Anlagendaten") seine ganze
   Breite und schiebt den Zaehler rechts aus der Leiste heraus - im
   Browser war die "1" halb abgeschnitten. */
.kapitel-titel {
  flex: 1 1 auto;
  min-width: 0;
  /* Umbrechen statt abschneiden.
     `overflow-wrap: normal` allein genuegte nicht: Die Navigation hat
     `overflow-y: auto`, und damit behandelt der Browser AUCH die
     Waagerechte als `auto` - der Titel wurde beschnitten
     ("Unternehmens-/Anlagendat"). `white-space: normal` erlaubt den
     Umbruch, gebrochen wird am Bindestrich, den der Titel ohnehin
     hat. `anywhere` waere falsch: es bricht mitten im Wort. */
  white-space: normal;
  /* Notnagel fuer kuenftige lange Titel: lieber mitten im Wort
     umbrechen als abschneiden. Die Kapiteltitel selbst sind kurz
     gehalten (siehe `kapitel.py`) - ein Umbruch soll die Ausnahme
     bleiben, nicht der Normalfall. */
  overflow-wrap: break-word;
}
.kapitel-punkt { align-items: flex-start; }
.kapitel-zeichen, .kapitel-merker { flex: 0 0 auto; margin-top: 1px; }
.kapitel-zeichen {
  width: 17px; text-align: center; font-weight: 700; font-size: 0.92rem;
}
.kapitel-punkt.z-gruen .kapitel-zeichen { color: var(--gut); }
.kapitel-punkt.z-gelb .kapitel-zeichen { color: var(--achtung); }
.kapitel-punkt.z-rot .kapitel-zeichen { color: var(--schlecht); }
.kapitel-punkt.z-grau .kapitel-zeichen { color: var(--tinte-still); }
.kapitel-punkt.z-blau .kapitel-zeichen { color: var(--marke); }
.kapitel-punkt.z-entfaellt { color: var(--tinte-still); }
.kapitel-punkt.z-entfaellt .kapitel-zeichen { color: var(--tinte-still); }
.kapitel-merker {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--marke-flaeche);
  color: var(--tinte-leise);
  font-size: 0.74rem;
  text-align: center;
}
.kapitel-punkt.z-rot .kapitel-merker {
  background: var(--schlecht-fl); color: var(--schlecht);
}
.kapitel-punkt.z-gelb .kapitel-merker {
  background: var(--achtung-fl); color: var(--achtung);
}

/* ---- Kapitelflaeche --------------------------------------------- */
.kapitel-inhalt {
  flex: 1 1 auto;
  /* Unten Platz fuer die schwebende Rechenleiste (unten links) - mit
     eingeklappter Seitenleiste laege sie sonst auf dem letzten Absatz. */
  padding: 18px 26px 72px;
  min-width: 0;
}
.kapitel-kopf { margin-bottom: 14px; }
.kapitel-kopf h2 { margin: 0 0 2px; font-size: 1.16rem; display: inline; }
/* `.kapitel-lage`, `.kapitel-erlaeuterung` und `.kapitel-protokoll`
   sind am 02.09.2026 entfallen - die Kapitelkopfzeile traegt nur noch
   die Ueberschrift (siehe `kapitelKopf` bzw. `zeichneKapitel`). */
.kap-block { margin-bottom: 16px; }

/* ------------------------------------------------------------------
 * Energiebilanz (bilanz-kapitel.js, 03.09.2026)
 * ------------------------------------------------------------------ */
/* Statuszeile im Workflow-Kopf: „Projekt X | 87 % vollständig | 6 offene Punkte" */
.statuszeile {
  margin: 4px 0 0; font-size: 0.84rem; color: var(--tinte-still);
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: baseline;
}
.statuszeile .sz-trenner { opacity: 0.5; }
.statuszeile .sz-gut { color: var(--gut); font-weight: 600; }
.statuszeile .sz-warn { color: var(--achtung); font-weight: 600; }
.statuszeile .sz-fehl { color: var(--schlecht); font-weight: 600; }
/* ==================================================================
 * BAUSTEINE (bausteine.js, 09.09.2026) - die gemeinsame Gestaltungs-
 * schicht aller Bereiche. Klassen mit Praefix bs-. Ein Bereich bringt
 * hoechstens noch Eigenheiten mit (z. B. .bilanz-tab, .b-ordner-chip),
 * nie eine zweite Statusmarke oder eine zweite Detailzeile.
 * ================================================================== */
/* Statusmarke - ein Wort, eine Farbe (Vokabular in BS_STATUS_KLASSE). */
.bs-status {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.08rem 0.4rem; border-radius: 3px; white-space: nowrap;
  vertical-align: middle;
}
.bs-status-gut { color: var(--gut); background: var(--gut-flaeche); }
.bs-status-warn { color: var(--achtung); background: var(--achtung-fl); }
.bs-status-fehl { color: var(--schlecht); background: var(--schlecht-fl); }
.bs-status-neutral { color: var(--tinte-still); background: var(--flaeche-tief); }
.bs-zeichen { font-weight: 700; }
.bs-zeichen-gut { color: var(--gut); }
.bs-zeichen-warn { color: var(--achtung); }
.bs-zeichen-fehl { color: var(--schlecht); }
.bs-zeichen-neutral { color: var(--tinte-still); }
table.werte tr.bs-fehlt td:first-child { border-left: 2px solid var(--schlecht); }
.bs-pflicht { color: var(--schlecht); font-weight: 700; }
.bs-still { color: var(--tinte-still); font-size: 0.82rem; }
/* Quelle: Dateiname sichtbar, Fundstelle nur im Tooltip. */
.bs-quelle {
  display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; font-size: 0.78rem; color: var(--tinte-still);
}
.bs-quelle-leer { color: var(--tinte-still); }
.bs-herkunft-text { color: var(--tinte-leise); font-size: 0.82rem; }
/* Reiter: Titel, Zahl, „offen"-Marke */
.bs-reiter { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.2rem 0 0.8rem; border-bottom: 1px solid var(--linie); }
.bs-reiter-knopf {
  background: none; border: 0; border-bottom: 2px solid transparent; font: inherit;
  font-size: 0.9rem; padding: 0.45rem 0.8rem; cursor: pointer; color: var(--tinte-still);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.bs-reiter-knopf:hover { color: var(--tinte); }
.bs-reiter-knopf.aktiv { color: var(--tinte); border-bottom-color: var(--marke); font-weight: 600; }
.bs-reiter-zahl { font-size: 0.74rem; color: var(--tinte-still); }
.bs-reiter-offen {
  font-size: 0.7rem; font-weight: 700; color: var(--achtung); background: var(--achtung-fl);
  border-radius: 999px; padding: 0 0.4rem;
}
/* Tabelle: Kopfzeilen duerfen umbrechen, Zahlen nicht. Die KOMPAKTE
   Form hat feste Spalten und scrollt nie quer. Die Selektoren tragen
   „table.werte", weil bsTabelle beide Klassen setzt und die aelteren
   Regeln (table.werte td, .tabellenrahmen thead th) sonst gewinnen. */
table.werte.bs-tab thead th { white-space: normal; line-height: 1.2; }
table.werte.bs-tab th, table.werte.bs-tab td { padding: 5px 6px; }
table.werte.bs-tab td.r, table.werte.bs-tab th.r { white-space: nowrap; }
table.werte.bs-tab tr.bs-leer td { color: var(--tinte-still); }
/* KOMPAKT (16.09.2026): jede Spalte so breit wie ihr breitester
   Eintrag, nichts bricht um, alle Spalten immer da. Ist der Rahmen
   schmaler als die Tabelle, rollt er waagerecht (.tabellenrahmen hat
   overflow-x: auto). Vorher `table-layout: fixed` mit festen Breiten:
   die einzige freie Spalte („Anlage") bekam in einem halb breiten
   Fenster null Pixel, ihr Text lief in „Typ" hinein; der Zwischenstand
   mit ausgeblendeten Nebenspalten war nicht gewuenscht („make it
   scrollable instead of omitting columns"). */
table.werte.bs-kompakt { table-layout: auto; width: max-content; min-width: 100%; }
table.werte.bs-kompakt th, table.werte.bs-kompakt td { white-space: nowrap; overflow-wrap: normal; }
table.werte.bs-kompakt thead th { white-space: nowrap; }
/* Aufklappmenues nehmen ihre natuerliche Breite, aber nicht mehr als
   16rem - sonst bestimmt die laengste Option („A – Strom- und
   Wärmeerzeugung") die Spalte. */
table.werte.bs-kompakt td select.b-wahl { width: auto; max-width: 16rem; }
/* Die Detailzeile (▸) spannt alle Spalten und darf umbrechen. */
table.werte.bs-kompakt tr.bs-detail > td { white-space: normal; overflow-wrap: anywhere; }
table.werte.bs-kompakt .zellen-editor .zellenfeld { min-width: 4rem; }
.tabellenrahmen + .weitere-felder { margin-top: 0.5rem; }
/* Detailzeile: aufgeklappt per ▸ in der ersten Zelle. */
/* EIN Pfeil fuer das ganze Portal (15.09.2026: „i dont like the drop
   down arrows site-wide"). Ein Chevron aus einer Maske in der aktuellen
   Textfarbe - Aufklappknopf der Tabellenzeilen, Aufklapper (summary)
   und Auswahlmenues (select) zeigen dasselbe Zeichen; geoeffnet dreht
   es sich nach unten. Keine Textzeichen (▸/▾) mehr. */
:root {
  --chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5.5 3.5 10 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.chevron, .bs-auf::before {
  content: ""; display: inline-block; width: 0.9em; height: 0.9em;
  background-color: currentColor;
  -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat;
  transition: transform 0.15s ease; vertical-align: -0.1em;
}
.bs-auf { border: 0; background: none; cursor: pointer; padding: 0 0.35rem 0 0;
  font-size: 0.9rem; line-height: 1; color: var(--tinte-leise); vertical-align: middle;
  border-radius: 4px; }
.bs-auf:hover { color: var(--marke); }
.bs-auf.offen { color: var(--marke); }
.bs-auf.offen::before { transform: rotate(90deg); }
/* NUR die Zelle der Detailzeile selbst (Kind-Kombinator): Als Nachfahren-
   Regel traf sie auch jede Zelle der Tabellen IN der Detailzeile und
   erzwang dort „anywhere" - die Herkunftsspalte brach je Buchstabe um
   (28.09.2026). */
.bs-tab tr.bs-detail > td { background: var(--flaeche-tief);
  padding: 0.6rem 0.8rem 0.9rem 1.6rem; white-space: normal; overflow-wrap: anywhere; }
.bs-detail-raster { display: grid; grid-template-columns: minmax(16rem, 1.2fr) minmax(14rem, 1fr);
  gap: 0.6rem 1.5rem; align-items: start; }
/* KEIN Ueberlappen (28.09.2026, „i dont wanna see any overlaps"): Ein
   Rasterkind darf nie breiter sein als seine Spalte. Ohne min-width: 0
   gilt fuer 1fr-Spalten die Mindestbreite des Inhalts - eine Tabelle mit
   nowrap-Zellen ragte dann in die Nachbarspalte. Langer Text bricht um,
   breite Tabellen rollen in ihrem Rahmen. */
.bs-detail-raster > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.bs-detail-spalte > .tabellenrahmen { max-width: 100%; }
.bs-detail-voll, .bs-detail-bilder { grid-column: 1 / -1; }
.bs-detail-spalte h4 { margin: 0.2rem 0 0.3rem; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--tinte-leise); font-weight: 600; }
.bs-detail-spalte h4 + h4, .bs-detail-spalte table + h4, .bs-detail-spalte p + h4,
.bs-detail-spalte ul + h4 { margin-top: 0.7rem; }
.bs-detail-tab { border-collapse: collapse; width: 100%; max-width: 100%; font-size: 0.88rem; }
.bs-detail-tab th { text-align: left; font-weight: 500; padding: 2px 0.7rem 2px 0;
  color: var(--tinte-leise); white-space: normal; vertical-align: top; }
/* break-word statt anywhere: Woerter brechen nur, wenn eines allein nicht
   in die Zelle passt - mit anywhere schrumpfte die Herkunftsspalte auf
   ein Wort je Zeile („leer = / Wert / des / Projekt / s"). */
.bs-detail-tab td { padding: 2px 0.7rem 2px 0; vertical-align: top; overflow-wrap: break-word; }
.bs-detail-tab td:last-child { padding-right: 0; }
.bs-detail-tab td.r { text-align: right; white-space: normal; font-variant-numeric: tabular-nums; }
.bs-probleme { color: var(--achtung); margin: 0.2rem 0 0; font-size: 0.88rem; }
.bs-quellen { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }
.bs-quelle-art { display: inline-block; font-size: 0.72rem; padding: 0 0.35rem; border-radius: 3px;
  background: var(--flaeche); border: 1px solid var(--linie); margin-right: 0.3rem; }
.bs-detail-bilder { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bs-detail-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  margin-top: 0.2rem; padding-top: 0.5rem; border-top: 1px solid var(--linie); }
/* Ein Hinweis zwischen den Knoepfen (Vorschlaege der Massnahmen) nimmt
 * die ganze Zeile, die Knoepfe folgen darunter. */
.bs-detail-aktionen > .block-hinweis { flex-basis: 100%; margin: 0 0 0.2rem; }
/* Ein Vorschlag steht in der Massnahmenliste kursiv - er ist noch keine
 * Maßnahme des Workflows, bis jemand ihn uebernimmt. */
tr.mn-vorschlag > td { font-style: italic; }
tr.mn-vorschlag > td .bs-status { font-style: normal; }
.bs-vorschau { height: 96px; width: auto; max-width: 170px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--linie); background: var(--flaeche); display: block; }
.bs-bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.8rem; }
.bs-bildkarte { margin: 0; font-size: 0.84rem; }
.bs-bildkarte figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 0.3rem;
  overflow-wrap: anywhere; }
/* Knoepfe mit Aktion: ✕ entfernt Handangelegtes, ↺ setzt zurueck. Beide
   zurueckhaltend, bis man darauf zeigt - sie sind Werkzeug, kein Inhalt. */
/* Die kleinen Handlungsknoepfe zeigen SYMBOLE (Papierkorb, Zurueck,
   Haken) aus einer Maske in der Textfarbe - keine Textzeichen (✕ ⊘ ↺
   ✓). Rueckmeldung 15.09.2026: „the ⊘ icon looks off, use a trash icon
   instead". Der Text im Knopf bleibt fuer Vorleser (aria-label kommt
   aus dem Tooltip), ist aber unsichtbar. */
:root {
  --sym-papierkorb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 4h11M6.5 4V2.5h3V4M4 4l.7 9.5h6.6L12 4M6.5 6.5v5M9.5 6.5v5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --sym-zurueck: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3.5 3 6.5l3 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M3.5 6.5h5.5a3.5 3.5 0 0 1 0 7H6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");
  --sym-haken: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.bs-weg, .bs-zurueck, .bs-haken {
  font: inherit; font-size: 0; line-height: 1; background: none;
  border: 1px solid transparent; border-radius: 4px; color: var(--tinte-still);
  cursor: pointer; padding: 0.2rem 0.3rem; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
}
.bs-weg::before, .bs-zurueck::before, .bs-haken::before {
  content: ""; display: inline-block; width: 0.95rem; height: 0.95rem;
  background-color: currentColor;
  -webkit-mask: var(--sym-papierkorb) center / contain no-repeat; mask: var(--sym-papierkorb) center / contain no-repeat;
}
.bs-zurueck::before { -webkit-mask-image: var(--sym-zurueck); mask-image: var(--sym-zurueck); }
.bs-haken::before { -webkit-mask-image: var(--sym-haken); mask-image: var(--sym-haken); }
.bs-weg:hover { color: var(--schlecht); border-color: var(--schlecht); background: var(--schlecht-fl); }
.bs-zurueck:hover { color: var(--marke); border-color: var(--marke); background: var(--marke-hell); }
.bs-haken:hover { color: var(--gut, #2e8b57); border-color: currentColor; }
.bs-gefahr:hover { color: var(--schlecht); border-color: var(--schlecht); background: var(--schlecht-fl); }
td.bs-aktion { text-align: right; white-space: nowrap; }
.bs-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.45rem 1.4rem;
}
.bs-kennzahlen div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem; border-bottom: 1px solid var(--linie); padding: 0.25rem 0;
}
.bs-kennzahlen dt { flex: 1 1 auto; }
.bs-kennzahlen dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-hinweis .o-zeichen { color: var(--tinte-still); }
/* Eine Zeile aus Bedienelementen (Ablagefeld + Knopf + Meldung, „+ anlegen").
   Die Energiebilanz hatte dafuer ihr eigenes .b-neu - seit dem dritten
   Bereich (Stromsteuer, 14.09.2026) steht die Regel hier, wo sie
   hingehoert. .b-neu bleibt vorerst, damit dieser Umbau die geprueften
   Bilanz-Abschnitte nicht anfasst. */
.bs-leiste {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.6rem 0 0.2rem;
}
.bs-leiste .ablage-input { font-size: 0.84rem; }
.bs-leiste .neben-knopf { font-size: 0.82rem; }
@media (max-width: 820px) { .bs-detail-raster { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
 * Eigenheiten der Energiebilanz
 * ------------------------------------------------------------------ */
.b-dateiname { overflow-wrap: anywhere; font-size: 0.86rem; }
.b-erkannt { color: var(--tinte-still); font-size: 0.82rem; }
.b-technik { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; }
.b-betriebszeiten { margin-top: 0.6rem; }
/* Projektordner-Uebersicht und Dateiliste (Phase 2) */
.b-ordner-leiste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.7rem; }
.b-ordner-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem;
  padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--flaeche-tief);
  color: var(--tinte);
}
.b-ordner-chip strong { color: var(--marke); }
.b-ordner-zahl { font-weight: 700; }
.b-ordner-offen { color: var(--achtung); background: var(--achtung-fl); }
.b-pfad { display: block; font-size: 0.72rem; color: var(--tinte-still); }
.b-upload .ablage-input { font-size: 0.84rem; }
/* Sichtbare Auswahl (15.09.2026): Kategorie, Unterkategorie, Träger,
   Leuchtmittel, Bildzuordnung als Aufklappmenü - immer da, speichert
   beim Wählen. Der Doppelklick der Zellen bleibt fuer Zahlen und Text. */
select.b-wahl { font: inherit; font-size: 0.84rem; padding: 0.15rem 1.4rem 0.15rem 0.3rem; max-width: 100%;
  border: 1px solid var(--linie); border-radius: 3px; background-color: var(--flaeche); color: inherit;
  background-position: right 0.35rem center; }
select.b-wahl.geaendert { font-weight: 600; box-shadow: inset 2px 0 0 var(--marke); }
select.b-wahl:disabled { opacity: 0.6; }
select.b-bild-ziel { display: block; margin-top: 0.3rem; font-size: 0.78rem; max-width: 14rem; }
.bs-bild { display: inline-flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; }
.bs-detail-tab td.l { text-align: left; white-space: normal; }
.o-aktionen { margin-left: auto; flex: 0 0 auto; }
/* Die Statusmarke als Knopf: „Prüfen" bestaetigen, „Geprüft" zuruecknehmen. */
button.bs-pruefen { cursor: pointer; font: inherit; border: 1px dashed transparent; }
button.bs-pruefen:hover { border-color: currentColor; filter: brightness(1.15); }
button.bs-pruefen:disabled { opacity: 0.6; cursor: default; }
.b-erledigt .p-text { color: var(--tinte-still); }
.b-weg-text { text-decoration: line-through; color: var(--tinte-still); }
.bs-detail-tab td.b-bemerkung { max-width: 28rem; overflow-wrap: anywhere; }
.bilanz-tab td select.b-wahl { width: 100%; }
/* Eine Zahlenzelle, die links stehen soll (Angabe/Wert-Listen). */
table.werte td.zahl-feld.l, table.werte th.l { text-align: left; }
/* „+ anlegen" - Zeile oder Energietraeger von Hand */
.b-neu { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.b-neu select { font: inherit; font-size: 0.86rem; padding: 0.3rem 1.6rem 0.3rem 0.5rem; }
.b-neu .neben-knopf { font-size: 0.82rem; }
/* Alle Bilanz-Tabellen: Kopfzeilen duerfen umbrechen, Zellen sind
   schmaler gepolstert - bei 125 % Browser-Zoom bleiben sonst nur ~850 px
   fuer sieben Spalten, und die Uebersicht scrollte quer. */
.bilanz-tab thead th { white-space: normal; line-height: 1.2; }
.bilanz-tab th, .bilanz-tab td { padding: 5px 6px; }
.bilanz-tab td.r, .bilanz-tab th.r { white-space: nowrap; }
/* Slot-Tabellen der Berichte (bericht-kapitel.js): Angabe | Wert |
   Herkunft | Status. Der Wert darf umbrechen (E-Mail-Adressen, Texte),
   Herkunft und Status nicht - sonst schob der Wert die Statusmarke aus
   dem Block (23.09.2026 im Browser gesehen). */
/* Feste Spaltenaufteilung: Mit automatischer Aufteilung wuchs die
   Tabelle ueber den Block hinaus, obwohl keine Zelle es verlangte (im
   Browser gemessen: 922 px in 851 px). Die Breiten stehen am Kopf -
   bei table-layout: fixed zaehlt nur die erste Zeile. */
.bericht-tab { table-layout: fixed; width: 100%; }
.bericht-tab th:first-child { width: 30%; }
.bericht-tab th:nth-child(3) { width: 6rem; }
.bericht-tab th:last-child { width: 7.5rem; }
.bericht-tab td { white-space: normal; overflow-wrap: anywhere; }
.bericht-tab td:nth-child(3), .bericht-tab td:last-child { white-space: nowrap; }
.bericht-tab th, .bericht-tab td { padding: 5px 6px; }
/* Verwaltung > Berichtsvorlagen: Hochladeformular */
.vl-hochladen { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center;
  margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--linie); font-size: 0.86rem; }
.vl-hochladen label { display: inline-flex; align-items: center; gap: 0.4rem; }
.vl-hochladen input[type=text] { width: 16rem; }
.vl-tab td { vertical-align: top; }
/* Bildauswahl und Fotoliste des Berichts */
.bericht-tab td.br-bildwahl { display: flex; flex-direction: column; gap: 4px; }
.bericht-tab img.br-bild { height: 64px; max-width: 110px; }
.br-fotos td.br-dateiname { font-size: 0.78rem; color: var(--tinte-still); overflow-wrap: anywhere; }
.br-fotos tr.b-weg td { color: var(--tinte-still); }
.bericht-vorschau object { width: 100%; height: 72vh; display: block; }
/* Bericht: Zeilen, die nicht im Dokument stehen (enthaltene Vorschlaege,
   Handmaßnahmen ohne Einsparung und Investition) - grau, aber NICHT
   durchgestrichen wie b-weg: sie sind nicht weg, sie zaehlen woanders
   oder warten auf Zahlen. Gilt in Bericht (br-ohne) und Bilanz (mn-ohne). */
table.werte tr.br-ohne > td, table.werte tr.mn-ohne > td { color: var(--tinte-still); }
/* Vorschau je Standort (EDL-G): die Auswahl ueber der PDF-Anzeige. */
.br-vorschau-wahl { margin: 0 0 0.5rem; }
.br-vorschau-wahl .bs-feldzeile { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; }
.br-vorschau-wahl select { font: inherit; font-size: 0.86rem; padding: 0.3rem 1.6rem 0.3rem 0.5rem; }
/* Entwurfs- und Freigabedateien im Erzeugnis-Kapitel. */
.br-dateien { margin: 0.4rem 0; padding-left: 1.2rem; font-size: 0.88rem; }
.br-dateien li { margin: 0.15rem 0; }
.block.freigabe .bs-status-gross { display: inline-block; margin-bottom: 0.3rem; }
table.werte tr.b-kat td { font-weight: 600; background: var(--flaeche-tief); }
table.werte td.b-unter { padding-left: 1.6rem; }
table.werte tr.b-weg td { color: var(--tinte-still); }
table.werte tr.b-weg td:not(.zahl-feld) { text-decoration: line-through; }
.b-unbekannt { color: var(--achtung); }
.b-vorgabe { color: var(--tinte-still); font-style: italic; }
.b-grad { font-size: 1.4rem; font-weight: 700; }
.meldung.warn, .meldung.warnung { background: var(--achtung-fl); color: var(--achtung); }
.meldung.gut { background: var(--gut-flaeche); color: var(--gut); }
/* Das Flussbild skaliert mit der Spalte - bis zu einer Breite, ab der
   die Schrift zu gross wird (bei 1.200 px Spaltenbreite war sie 19 px). */
.bilanz-figur { margin: 0.4rem 0 0.2rem; }
.bilanz-figur svg { width: 100%; max-width: 820px; height: auto; display: block; }
.bilanz-figur svg text { font-family: var(--schrift); fill: var(--tinte); font-size: 11.5px; }
.bilanz-figur svg text.klein { fill: var(--tinte-still); font-size: 10.5px; }
.bilanz-figur figcaption { font-size: 0.8rem; color: var(--tinte-still); margin-top: 0.3rem; }
.block-zahl {
  margin-left: 8px; font-weight: 400; font-size: 0.8rem;
  color: var(--tinte-still);
}

/* ---- Zu erledigen / offene Punkte -------------------------------- */
.offene-liste { list-style: none; margin: 0; padding: 0; }
.offene-liste li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--linie);
  font-size: 0.9rem;
}
.offene-liste li:last-child { border-bottom: 0; }
.o-zeichen { font-weight: 700; width: 14px; }
.o-fehler .o-zeichen { color: var(--schlecht); }
.o-warnung .o-zeichen { color: var(--achtung); }
.kap-offen { border-left: 3px solid var(--achtung); padding-left: 12px; }

/* ---- Werte ------------------------------------------------------- */
/* Karte statt Tabellenzeile: Der Wert steht gross, Herkunft und
   Bestaetigung klein darunter. Ein leeres Eingabefeld gibt es nicht -
   erst "Bearbeiten" oeffnet eines. */
.wertkarten { display: grid; gap: 8px; }
.wertkarte {
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 8px 11px;
  background: var(--flaeche);
}
.wertkarte.leer { border-left: 3px solid var(--achtung); }
.wertkarte-kopf {
  display: flex; justify-content: space-between; gap: 14px;
  align-items: baseline;
}
.w-bezeichnung { font-size: 0.92rem; }
.w-wert {
  font-family: var(--ziffern); font-size: 1.02rem; font-weight: 600;
  white-space: nowrap;
}
.wertkarte-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; font-size: 0.78rem; color: var(--tinte-leise);
}
.w-auto { color: var(--gut); }
.w-hand { color: var(--marke); }
.w-fehlt { color: var(--achtung); }
.wertkarte-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.mini-knopf {
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  border-radius: 4px; padding: 2px 8px; cursor: pointer;
  font: inherit; font-size: 0.76rem; color: var(--tinte);
}
.mini-knopf:hover { background: var(--marke-hell); }
.mini-knopf.haupt {
  background: var(--marke-knopf); color: #fff; border-color: var(--marke-knopf);
}
.w-hinweis, .w-notiz {
  margin: 4px 0 0; font-size: 0.78rem; color: var(--tinte-leise);
}
/* Der Wert der Karte ist die bearbeitbare Zelle (16.09.2026, Gleichstand
   mit der Bilanz): dieselbe Hervorhebung wie td.zahl-feld, derselbe
   Editor mit Haken und Kreuz. Das fruehere Formular (.w-form) ist weg. */
.w-wert.zahl-feld { cursor: text; padding: 0 4px; border-radius: 3px; }
.w-wert.wahl-feld { cursor: pointer; }
.w-wert.zahl-feld:hover, .w-wert.zahl-feld:focus-visible {
  background: var(--marke-hell); box-shadow: inset 0 0 0 1px var(--linie-stark); outline: none;
}
.w-wert.wird-bearbeitet { white-space: normal; flex: 1 1 14rem; min-width: 0; background: var(--marke-hell); }
.w-wert .zellen-editor { width: 100%; min-width: 12rem; }
.w-wert .zellen-editor .zellenfeld { min-width: 7rem; font-family: var(--ziffern); }
.w-wert .zellen-editor .zellenfeld.text { font-family: var(--schrift); text-align: left; }
.zellen-editor.lang { flex-wrap: wrap; align-items: flex-start; }
.zellen-editor.lang textarea.zellenfeld {
  flex: 1 1 100%; min-height: 5.5rem; resize: vertical; text-align: left;
  font-family: var(--schrift); font-size: 0.9rem; line-height: 1.35;
}
.w-fundstelle {
  margin-top: 7px; padding: 7px 10px;
  background: var(--flaeche-tief); border: 1px solid var(--linie);
  border-radius: 4px; font-size: 0.82rem;
}
.w-fundstelle p { margin: 0 0 3px; }
.w-fundstelle p:last-child { margin-bottom: 0; }

/* ---- Widerspruch ------------------------------------------------- */
/* Deutlich abgesetzt: Das ist die eine Stelle, an der das System
   ausdruecklich NICHT selbst entscheidet. */
.widerspruch {
  border: 1px solid var(--achtung);
  border-left-width: 3px;
  background: var(--achtung-fl);
  border-radius: 5px;
  padding: 10px 13px;
  margin-bottom: 14px;
}
.widerspruch.entschieden {
  border-color: var(--gut); background: var(--gut-flaeche);
}
.wid-kopf { margin: 0 0 3px; font-weight: 600; font-size: 0.92rem; }
.wid-text { margin: 0 0 8px; font-size: 0.86rem; }
.wid-auswahl { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.wid-knopf {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  border-radius: 5px; padding: 7px 11px; cursor: pointer; font: inherit;
}
.wid-knopf:hover { border-color: var(--marke); background: var(--marke-hell); }
.wid-zahl { font-family: var(--ziffern); font-weight: 600; }
.wid-quelle { font-size: 0.78rem; color: var(--tinte-leise); }
.wid-fund { font-size: 0.72rem; color: var(--tinte-still); }
.wid-eigen { display: flex; gap: 5px; align-items: center; }
.wid-feld {
  padding: 5px 8px; border: 1px solid var(--linie-stark);
  border-radius: 4px; font: inherit; font-size: 0.84rem; width: 170px;
}
.wid-hinweis {
  margin: 8px 0 0; font-size: 0.78rem; color: var(--tinte-leise);
}

/* ---- Unterlagen und Erzeugnisse ---------------------------------- */
.unterlagen-liste { list-style: none; margin: 0; padding: 0; }
.unterlagen-liste li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 0.9rem;
}
.unterlagen-liste li:last-child { border-bottom: 0; }
.u-zeichen { width: 14px; font-weight: 700; text-align: center; }
.u-gut .u-zeichen { color: var(--gut); }
.u-neutral .u-zeichen { color: var(--tinte-still); }
.u-name { font-weight: 500; }
.u-lage, .u-dateien {
  font-size: 0.79rem; color: var(--tinte-leise);
}
.u-dateien { font-family: var(--ziffern); }
.unterlagen-liste .mini-knopf { margin-left: auto; }

/* ---- Rechenwege und Kriterien ------------------------------------ */
.rechnung { margin-bottom: 12px; }
.r-kopf { margin: 0 0 5px; font-weight: 600; font-size: 0.9rem; }
.r-kette { margin: 0; padding-left: 18px; font-size: 0.85rem; }
.r-kette li { padding: 3px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.r-was { min-width: 190px; }
.r-weg { color: var(--tinte-leise); font-family: var(--ziffern); }
.r-erg { font-family: var(--ziffern); font-weight: 600; }
.r-quelle { flex: 1 0 100%; font-size: 0.76rem; color: var(--tinte-still); }

.kriterien { list-style: none; margin: 0; padding: 0; }
.kriterien li {
  display: flex; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--linie);
}
.kriterien li:last-child { border-bottom: 0; }
.k-name { margin: 0; font-weight: 600; font-size: 0.9rem; }
.k-aussage { margin: 1px 0 0; font-size: 0.86rem; }
.k-regel, .k-klaerung {
  margin: 2px 0 0; font-size: 0.78rem; color: var(--tinte-leise);
}
.k-klaerung { color: var(--achtung); }

/* ---- Blaettern --------------------------------------------------- */
/* ZWEI einzelne, schwebende Knoepfe - links neben der Bedienhilfe.
   Rueckmeldung 02.09.2026: „make them real floating buttons and
   seperate buttons please with no text and place them left to the AI
   chat button".

   Die Geschichte dieser Ecke, damit sie nicht ein drittes Mal
   geschrieben wird:

     1. Leiste am Ende des Kapitels. Wer in „Substrateinsatz"
        weiterblaettern wollte, musste an allen Tabellen vorbeiscrollen.
     2. `fixed` unten rechts - genau unter der Sprechblase der
        Bedienhilfe (`#assistent`, z-index 900), die sie zudeckte.
     3. `sticky` im Textfluss der Kapitelspalte, also unten LINKS. Dort
        steht aber die Rechenleiste (`#neu-rechnen-leiste`, z-index 940,
        unten links), solange eine Neuberechnung aussteht - und die
        verdeckte das Blaettern.

   Beide festen Ecken sind also belegt. Deshalb jetzt `fixed`, aber
   NEBEN der Sprechblase statt darunter: `--hilfe-breite` misst
   `fnr-kapitel.js` am tatsaechlichen Element, sodass der Abstand auch
   bei anderer Beschriftung stimmt. Der Rueckfallwert gilt nur, solange
   noch nichts gemessen wurde. */
.kapitel-blaettern {
  position: fixed;
  bottom: 18px;
  right: calc(18px + var(--hilfe-breite, 108px) + 12px);
  z-index: 905;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.blaetter-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}
.blaetter-knopf:hover:not(:disabled) {
  border-color: var(--marke); color: var(--marke);
}
.blaetter-knopf:disabled { opacity: 0.35; cursor: default; }

/* Schmale Fenster: Die Sprechblase steht dort ebenfalls unten rechts,
   aber der Platz daneben reicht nicht mehr fuer zwei Knoepfe. Sie
   ruecken deshalb eine Zeile hoeher statt daneben. */
@media (max-width: 560px) {
  .kapitel-blaettern {
    right: 18px;
    bottom: calc(18px + 40px + 10px);
  }
}

/* Etwas Luft am Fuss des Kapitels - die Knoepfe schweben zwar, aber der
   letzte Absatz soll nicht am Fensterrand kleben. */
.kapitel-inhalt { padding-bottom: 72px; }

.meldung.neutral {
  background: var(--marke-flaeche); border-color: var(--linie-stark);
}

/* Schmale Fenster: Die Navigation legt sich ueber die Breite statt
   daneben. Desktop bleibt der Entwurfsfall - das hier ist nur die
   Notloesung, damit die Ansicht auf einem Laptop im Aussentermin
   nicht bricht.

   820 statt 1000 px (30.08.2026). Die Schwelle war zu frueh: Am
   Arbeitsplatz stehen bei 150 % Browserzoom 981 CSS-Pixel zur
   Verfuegung, und damit klappte die Navigation ueber den Inhalt,
   obwohl 272 px Spalte plus 700 px Inhalt bequem nebeneinander
   passen. Die linke Navigation soll ausdruecklich erhalten bleiben -
   sie faellt jetzt erst weg, wenn es wirklich eng wird.

   Der schmalere Nebeneinander-Fall wird ueber die Spaltenbreite
   aufgefangen (siehe darunter). */
@media (min-width: 821px) and (max-width: 1100px) {
  .kapitel-nav { flex: 0 0 224px; }
  /* Unten weiterhin Platz fuer die schwebende Blaetterleiste. */
  .kapitel-inhalt { padding: 14px 16px 34px; }
}

@media (max-width: 820px) {
  /* `align-items: stretch` ausdruecklich, weil `.pruef-koerper`
     daneben `flex-start` setzt.
     In der Zeilenrichtung heisst das „oben ausrichten" und ist
     richtig. Sobald die Richtung auf `column` kippt, meint dieselbe
     Angabe aber die WAAGERECHTE: Die Kinder werden dann so breit wie
     ihr Inhalt statt so breit wie der Container - und eine breite
     Tabelle zieht die ganze Seite auseinander, statt in ihrem eigenen
     `.tabellenrahmen` zu rollen. Bei 970 px Fensterbreite stand die
     Seite dadurch 12 px zu weit rechts, samt waagerechter
     Bildlaufleiste. */
  .pruef-koerper { flex-direction: column; align-items: stretch; }
  .kapitel-nav {
    flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--linie);
  }
  /* Quer ueber die Breite gibt es nichts zu kleben - die Leiste steht
     hier ohnehin oben. Seit dem 02.09.2026 sitzt das `sticky` am
     INNEREN Element, deshalb wird es dort aufgehoben und nicht mehr
     an `.kapitel-nav`. */
  .kapitel-nav-innen {
    position: static; max-height: 220px; padding-bottom: 0;
  }
  .kapitel-inhalt { padding: 14px 16px 34px; }
}

/* ---- Liste als eigene Seite ------------------------------------- */
/* Ersetzt die frühere dauerhafte Seitenleiste. Rückmeldung: „wie eine
   Webseite in einer Webseite … nach dem Klick erscheint eine neue
   Seite mit einer Liste von Vorgängen". */
.anzahl-gross {
  font-size: 0.86rem; color: var(--tinte-leise); white-space: nowrap;
}
.v-zeile { cursor: pointer; }
.v-zeile:hover td { background: var(--marke-hell); }
.v-zeile:focus-visible {
  outline: 2px solid var(--marke); outline-offset: -2px;
}
.v-zeit { color: var(--tinte-leise); font-size: 0.86rem; }

/* ---- Projekte (29.09.2026): Übersicht, Projektseite ---------------- */
.projekt-suche { width: 100%; max-width: 24rem; margin: 0 0 6px; }
.p-zeile { cursor: pointer; }
.p-zeile:hover td { background: var(--marke-hell); }
.p-zeile:focus-visible { outline: 2px solid var(--marke); outline-offset: -2px; }
.p-workflows .zustand { display: inline-block; margin: 0 4px 4px 0; }
.workflow-arten { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }

/* Lange Werte (vorbelegte Freitextfelder) umbrechen statt die Karte
   ueber die Seitenbreite zu schieben. Die Wertspalte ist fuer Zahlen
   gebaut - rechtsbuendig, Ziffernschrift, nowrap. */
.wertkarte-kopf.lang { display: block; }
.wertkarte-kopf.lang .w-wert {
  display: block;
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-weight: 500;
  font-size: 0.9rem;
  text-align: left;
}

/* ===================================================================
   TEIL-1-UMBAU (29.08.2026)

   Rueckmeldung der Fachbearbeitung, 44 Punkte. Was hier dazukommt,
   traegt die neuen Bausteine: Gruppenueberschriften in der Navigation,
   die Gegenueberstellung Referenz/Nachweis, die Substrattabelle 1:1
   aus dem Konzept, den Tierbestand als Aufklappliste und die
   Zusammenfassung von Teil 1.
   =================================================================== */

/* --- Navigation: Gruppenueberschriften (Punkt 42) ----------------- */
.kapitel-gruppe {
  padding: 0.85rem 0.9rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-still);
}
.kapitel-gruppe:first-child { padding-top: 0.4rem; }

/* --- Kopfzeile: welche Protokollpunkte dieses Kapitel traegt ------ */
/* --- Tabellen: waagerecht rollen statt die Seite zu sprengen ------ */
.tabellenrahmen { overflow-x: auto; margin: 0.4rem 0 0.2rem; }
.tabellenrahmen table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.tabellenrahmen th,
.tabellenrahmen td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
.tabellenrahmen thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinte-still);
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}
.tabellenrahmen td.r, .tabellenrahmen th.r {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Vergleich Referenz / Nachweis (Punkte 35 und 36) ------------- */
.v-quellen { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 0.5rem; }
.v-seite { font-size: 0.78rem; color: var(--tinte-still); }
.vergleich .v-zeichen { width: 20px; text-align: center; font-weight: 700; }
.vergleich tr.v-gut .v-zeichen { color: var(--gut); }
.vergleich tr.v-warn .v-zeichen { color: var(--achtung); }
.vergleich tr.v-fehl .v-zeichen { color: var(--schlecht); }
.vergleich tr.v-warn { background: var(--achtung-fl); }
.v-hinweis {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--tinte-still);
}
.block-zahl.v-gruen { color: var(--gut); }
.block-zahl.v-gelb { color: var(--achtung); }
.block-zahl.v-rot { color: var(--schlecht); }
.v-unter { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--tinte-still); }
.v-posten { display: inline-block; margin-right: 0.9rem; }

/* --- Berechnete Groessen (Punkte 28 und 29) ----------------------- */
.rechengroessen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem 1.2rem;
  margin: 0.3rem 0 0.6rem;
}
.rechengroessen div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--linie);
}
.rechengroessen dt { font-size: 0.84rem; color: var(--tinte-still); }
.rechengroessen dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Substrattabelle 1:1 (Punkte 7 bis 9) ------------------------- */
/* Nullwerte bleiben sichtbar - sie werden nur zurueckhaltend gesetzt,
   damit die gefuellten Zeilen trotzdem hervortreten. Ausblenden waere
   der ausdrueckliche Gegensatz zur Vorgabe. */
.substrat-roh tbody td:not(:first-child) { color: var(--tinte); }
.substrat-roh tr.s-andere td:first-child { font-style: italic; }
.substrat-roh tr.s-summe {
  font-weight: 700;
  background: var(--flaeche-tief);
}
.substrat-roh tr.s-summe td { border-bottom: 1px solid var(--linie-stark); }
.s-einheit { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--tinte-still); }

/* --- Tierbestand als Aufklappliste (Punkte 18 bis 20) ------------- */
.tiergruppe {
  border: 1px solid var(--linie);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: var(--flaeche);
}
.tiergruppe > summary {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 8px 11px;
  cursor: pointer;
  font-size: 0.9rem;
}
.tiergruppe > summary::-webkit-details-marker { display: none; }
.tiergruppe[open] > summary { border-bottom: 1px solid var(--linie); }
.tg-name { font-weight: 600; }
.tg-zahlen { color: var(--tinte-still); font-size: 0.82rem; }
.tg-leer { color: var(--tinte-still); font-size: 0.82rem; font-style: italic; }
.tiergruppe .tabellenrahmen { margin: 0; padding: 0 11px 6px; }
.tg-alle { margin: 0 11px 10px; }
.vieh-null td { color: var(--tinte-still); }

/* --- Investitionssumme (Punkt 3) --------------------------------- */
.kosten .k-frl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kosten .k-quelle { font-size: 0.74rem; color: var(--tinte-still); }
.kosten tr.s-summe { font-weight: 700; background: var(--flaeche-tief); }

/* --- Ergebnis Teil 1 (Punkte 33 und 34) -------------------------- */
.block-untertitel {
  margin: 1.1rem 0 0.2rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tinte-still);
}
.pruefliste { list-style: none; margin: 0; padding: 0; }
.pruefliste li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--linie);
}
.p-zeichen { width: 17px; text-align: center; font-weight: 700; }
.p-gruen .p-zeichen { color: var(--gut); }
.p-gelb .p-zeichen { color: var(--achtung); }
.p-rot .p-zeichen { color: var(--schlecht); }
.p-grau .p-zeichen, .p-entfaellt .p-zeichen { color: var(--tinte-still); }
.p-text {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--tinte);
  text-align: left;
  cursor: pointer;
}
.p-text:hover { text-decoration: underline; color: var(--marke); }

/* --- Korrigierter Wert: das Original bleibt sichtbar (Punkt 37) --- */
.w-vorher {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--tinte-still);
}
.w-alt { text-decoration: line-through; }

/* --- Quelle anzeigen: Dokumentliste (Punkt 38) -------------------- */
.q-dateien { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; }
.q-dateien a { color: var(--marke); }

/* --- Angebote, Anlagenaufbau (Punkte 3 und 6) --------------------- */
.angebote-tab .k-quelle,
.anlagen .k-quelle { font-size: 0.74rem; color: var(--tinte-still); }
.angebote-tab tr.s-summe { font-weight: 700; background: var(--flaeche-tief); }
.anlagen .v-hinweis { display: block; }

/* Dateinamen in der Unterlagenliste fuehren jetzt zum Dokument
   (Punkte 32 und 38). */
.u-dateien a { color: var(--marke); }
.u-dateien a:hover { text-decoration: underline; }

/* --- Zahlen in Tabellen anklicken und aendern --------------------- */
/* Rueckmeldung 29.08.2026: "lass mich die Tabellen/Zahlen direkt durch
   Anklicken bearbeiten".

   SEIT 31.08.2026 ist praktisch JEDE Zelle aenderbar - auch die
   gerechneten (Eigensubstrat, GVE, Verweilzeit, Summen). Vorher waren
   sie mit Punkt 29 gesperrt; ausdrueckliche Ansage: "make every value
   editable". Stumm bleiben nur noch Differenz und Abweichung eines
   Vergleichs, weil sie die AUSSAGE des Vergleichs sind und nicht eine
   seiner beiden Seiten.

   Der Unterschied muss trotzdem sichtbar sein - deshalb die
   Hover-Marke unten, und `.geaendert` fuer alles von Hand Gesetzte. */
td.zahl-feld,
.stammdaten dd.zahl-feld,
.rechengroessen dd.zahl-feld,
span.zahl-feld {
  cursor: text;
  border-radius: 3px;
  outline-offset: -2px;
}
td.zahl-feld:hover {
  background: var(--marke-hell);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}
td.zahl-feld:focus-visible {
  background: var(--marke-hell);
  outline: 2px solid var(--marke);
}
td.zahl-feld.wird-bearbeitet { background: var(--marke-hell); padding: 2px 4px; }
/* Feld + gruener Haken + Kreuz in einer Zeile (15.09.2026). */
.zellen-editor { display: inline-flex; align-items: center; gap: 3px; width: 100%; }
.zellen-editor .zellenfeld { flex: 1 1 auto; min-width: 50px; }
.ze-ok, .ze-abbruch {
  flex: 0 0 auto; font: inherit; font-size: 0.85rem; line-height: 1; cursor: pointer;
  border: 1px solid var(--linie-stark); border-radius: 4px; padding: 3px 6px;
  background: var(--flaeche); color: var(--tinte-still);
}
.ze-ok { color: var(--gut); border-color: var(--gut); font-weight: 700; }
.ze-ok:hover { background: var(--gut); color: var(--flaeche); }
.ze-abbruch:hover { color: var(--schlecht); border-color: var(--schlecht); }
.zellenfeld {
  width: 100%;
  min-width: 70px;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid var(--marke);
  border-radius: 3px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--flaeche);
  color: var(--tinte);
}
td.zahl-feld.unlesbar .zellenfeld {
  border-color: var(--schlecht);
  background: var(--schlecht-fl);
}
/* Von Hand geaenderte Zelle - der urspruengliche Wert steht im
   Tooltip (Punkt 37). */
td.zahl-feld.geaendert,
span.zahl-feld.geaendert,
.rechengroessen dd.zahl-feld.geaendert {
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--marke);
}

/* ===================================================================
   AUSWAHLZELLE (31.08.2026)

   Rueckmeldung: "wenn es wie eine Option ist, z. B. die Auswahl
   zwischen 2.1/2.2, muss sie jederzeit aenderbar sein."

   Ein freies Textfeld waere hier falsch - "Ja"/"ja"/"j" sind dieselbe
   Antwort und wuerden drei Schreibweisen fuer einen Zustand erzeugen.
   Die Zelle oeffnet deshalb eine Liste. Der Zeiger ist ein Pfeil und
   kein Textcursor: Man tippt hier nicht, man waehlt. */
.wahl-feld { cursor: pointer; }
.zellenfeld.wahl {
  text-align: left;
  min-width: 6em;
  padding: 2px 4px;
}
/* Die Auswahlzelle einer Liste (Voraussetzungen) - dort ist sie ein
   `span` in einer `li` und braucht ihre eigene Flaeche, sonst ist der
   Klickbereich nur so gross wie das Wort. */
span.zahl-feld.wahl-feld {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  outline-offset: -2px;
}
span.zahl-feld.wahl-feld:hover {
  background: var(--marke-hell);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}
span.zahl-feld.wahl-feld:focus-visible {
  background: var(--marke-hell);
  outline: 2px solid var(--marke);
}
/* Eine LEERE, aber eintragbare Stammdatenzeile. Sie steht seit dem
   31.08.2026 auch dann da, wenn der Leser nichts gefunden hat - eine
   fehlende Zeile waere eine Sackgasse, eine leere ist eine Aufgabe. */
.stammdaten dd.zahl-feld.nicht-erkannt {
  font-weight: 400;
  color: var(--tinte-still);
}

/* ===================================================================
   KOMPAKTERE PRUEFANSICHT (30.08.2026)

   Rueckmeldung: "Die UI soll aber deutlich kompakter werden." Die
   Bausteine bleiben, sie werden nur enger gesetzt - und die
   Stammdaten stehen jetzt als Liste statt als vier Wertkarten.
   =================================================================== */
.kap-block { padding: 0.8rem 1rem 0.9rem; margin-bottom: 0.7rem; }
.kapitel-inhalt { padding-top: 12px; }
.kapitel-kopf { margin-bottom: 0.6rem; }
.wertkarten { gap: 0.4rem; }
.tabellenrahmen table { font-size: 0.84rem; }
.tabellenrahmen th, .tabellenrahmen td { padding: 4px 8px; }

/* --- Kundeninformationen ------------------------------------------ */
.stammdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.25rem 1.4rem;
  margin: 0;
}
.stammdaten div {
  display: flex; gap: 0.6rem; padding: 3px 0;
  border-bottom: 1px solid var(--linie);
}
.stammdaten dt { color: var(--tinte-still); font-size: 0.82rem; min-width: 8em; }
.stammdaten dd { margin: 0; font-weight: 600; }

/* --- Anlagenaufbau, Kapazitaet ------------------------------------ */
.anlagen.fest tr.leerzeile td { color: var(--tinte-still); }
.kapazitaet td:first-child { width: 46%; }

/* --- Nicht erkannt: eine LUECKE, keine Null ----------------------- */
.nicht-erkannt {
  color: var(--schlecht);
  font-size: 0.8rem;
  font-style: italic;
  white-space: nowrap;
}

/* --- Kostenliste: Begleitposten und Fremdes ----------------------- */
.kosten tr.k-begleitung td { color: var(--tinte-still); }
.kosten tr.k-fremd td { color: var(--achtung); }

/* --- Substrattabelle: Anteilszeile -------------------------------- */
.substrat-roh tr.s-anteil td { font-weight: 600; background: none; }

/* --- Ergebnis Teil I: erledigte Schritte eingeklappt --------------- */
.alle-schritte { margin-top: 0.6rem; }
.alle-schritte > summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--tinte-still);
  padding: 4px 0;
}
.alle-schritte[open] > summary { margin-bottom: 0.2rem; }
.offene-liste .p-text { flex: 1; }

/* ===================================================================
   AUFKLAPPER EINHEITLICH (30.08.2026)

   Rueckmeldung: "there are some expandables that use the wrong
   formatting."

   Es gab drei Sorten nebeneinander: die Tierartgruppe mit eigenem
   Dreieck und Rahmen, "Alle Pruefschritte anzeigen" und "Angaben, die
   dieser Fall nicht braucht" dagegen mit dem Standarddreieck des
   Browsers und kleiner grauer Schrift. Dieselbe Geste, drei
   Erscheinungen.

   Hier steht das gemeinsame Aussehen; die Tierartgruppe behaelt nur
   ihren Rahmen, weil sie eine Tabelle umschliesst.
   =================================================================== */
.tiergruppe > summary,
.alle-schritte > summary,
.weitere-felder > summary {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--tinte-still);
  padding: 6px 0;
  list-style: none;
}
.tiergruppe > summary::-webkit-details-marker,
.alle-schritte > summary::-webkit-details-marker,
.weitere-felder > summary::-webkit-details-marker { display: none; }
.tiergruppe > summary::marker,
.alle-schritte > summary::marker,
.weitere-felder > summary::marker { content: ""; }
.tiergruppe > summary::before,
.alle-schritte > summary::before,
.weitere-felder > summary::before,
.rechenweg-klapp > summary::before {
  content: ""; flex: 0 0 auto; display: inline-block; width: 0.85em; height: 0.85em;
  background-color: currentColor; align-self: center;
  -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat;
  transition: transform 0.15s ease;
}
.rechenweg-klapp > summary { display: inline-flex; align-items: center; gap: 0.4rem; }
.tiergruppe[open] > summary::before,
.alle-schritte[open] > summary::before,
.weitere-felder[open] > summary::before,
.rechenweg-klapp[open] > summary::before { transform: rotate(90deg); }
.tiergruppe > summary:hover,
.alle-schritte > summary:hover,
.weitere-felder > summary:hover { color: var(--marke); }

/* Nur die Tierartgruppe umschliesst eine Tabelle - daher Rahmen und
   etwas mehr Luft. */
.tiergruppe > summary { padding: 8px 11px; font-size: 0.9rem; }
.tiergruppe > summary .tg-name { color: var(--tinte); }

/* Kundeninformationen: auch hier per Doppelklick aenderbar. */
.stammdaten dd.zahl-feld { cursor: text; border-radius: 3px; padding: 0 4px; }
.stammdaten dd.zahl-feld:hover {
  background: var(--marke-hell);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}
.zellenfeld.text { text-align: left; }

/* ===================================================================
   RUECKMELDUNG 31.08.2026
   =================================================================== */

/* --- Textzellen sind links buendig -------------------------------- */
/* `zelleZahl` setzt die Klasse `r` (rechtsbuendig, Ziffernschrift) -
   richtig fuer Betraege, falsch fuer den Anbieternamen eines Angebots.
   `l` dreht das fuer diese Zellen zurueck. */
td.zahl-feld.l { text-align: left; font-variant-numeric: normal; }

/* --- Der Verweisknopf im Fliesstext ------------------------------- */
/* Steht unter der Kapazitaetstabelle: Ihre Zeilen sind gerechnet und
   deshalb nicht anklickbar (Punkt 29), und dieser Knopf sagt, WO die
   Eingangswerte stehen - statt die Zellen stumm bleiben zu lassen. */
.verweis-knopf {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--marke); text-decoration: underline;
}

/* --- TA-Luft-Fall der Verweilzeit --------------------------------- */
/* Aufgebaut wie „Zugeordnete Maßnahme" (Rueckmeldung 02.09.2026:
   „remove the expanditure and make it look like the zugeordnete
   massnahme pane"). Also KEIN eigener farbiger Kasten mehr: Die Zeile
   mit dem geltenden Fall ist eine `.meldung`, darunter steht die
   Tabelle offen. Der Kasten davor war ein zweiter Rahmen im Rahmen und
   klappte die Tabelle zusaetzlich weg - ausgerechnet die, ueber die
   umgeschaltet wird. */
.taluft { margin: 0.4rem 0 0.7rem; }
.taluft-grund { margin: 0.35rem 0 0; font-size: 0.85rem; }
.taluft-weg { margin: 0.25rem 0 0.5rem; font-size: 0.8rem; }
.taluft-weg code { word-break: break-word; }
/* Der geltende Fall in der Uebersicht der vier - sonst muesste man ihn
   aus dem Text darueber zurueckrechnen. */
.vergleich tr.taluft-aktiv td {
  background: var(--marke-hell);
  font-weight: 600;
}

/* --- Offene Punkte nach Kapitel gebuendelt ------------------------ */
/* Rueckmeldung: "offene Punkte sollte Hauptkategorie sein bzw.
   genauere Aufteilung in der Hauptkategorie selbst." */
.offen-gruppe { margin-bottom: 0.6rem; }
.offen-gruppe:last-child { margin-bottom: 0; }
.og-kopf {
  display: flex; gap: 8px; align-items: baseline;
  margin: 0 0 0.15rem; font-size: 0.9rem; font-weight: 600;
  padding-bottom: 3px; border-bottom: 1px solid var(--linie-stark);
}
.og-kopf .p-text { font-weight: 600; }
.og-zahl {
  margin-left: auto; font-weight: 400; font-size: 0.8rem;
  color: var(--tinte-still);
}
.offen-gruppe .offene-liste { padding-left: 1.1rem; }
/* Der Bereich INNERHALB des Kapitels - "Tierbestand", "Unterlagen",
   "Verweilzeit im gasdichten System". */
.p-bereich { color: var(--tinte-still); font-weight: 600; }
.p-bereich::after { content: " –"; }

/* ===================================================================
   BEDIENHILFE (Sprechblase) — 31.08.2026

   Klebt unten rechts auf JEDER Seite. Sie liegt ueber allem, muss
   aber die feststehende Kopfzeile und die Kapitelnavigation
   unberuehrt lassen - deshalb `position: fixed` und ein z-index
   oberhalb der uebrigen Ebenen, aber KEIN Vollbild-Ueberzug: Man soll
   weiterlesen koennen, waehrend das Fenster offen ist.
   =================================================================== */
#assistent {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* Der Rahmen selbst faengt keine Klicks - nur seine Kinder. Sonst
     lieferte die rechte untere Ecke der Seite ins Leere. */
  pointer-events: none;
}
#assistent > * { pointer-events: auto; }

.assistent-blase {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--marke);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.assistent-blase:hover { filter: brightness(1.08); }
.assistent-blase.aktiv { background: var(--tinte-still); }
.assistent-zeichen { font-size: 1.1rem; line-height: 1; }

/* ZUERST das Zu-Sein.
   `[hidden]` ist eine Regel des BROWSERS; jede eigene `display`-Angabe
   schlaegt sie, ganz gleich wie spezifisch. Ohne diese Zeile stand das
   Fenster dauerhaft offen, obwohl das Attribut gesetzt war - im
   Browser sofort zu sehen, im Code nicht. */
.assistent-fenster[hidden] { display: none; }

.assistent-fenster {
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 36px));
  /* Hoechstens zwei Drittel der Fensterhoehe: Die Bedienhilfe soll
     die Seite dahinter nicht ersetzen. */
  height: min(520px, 66vh);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.assistent-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche-still, var(--flaeche));
}
.assistent-titel { font-weight: 600; font-size: 0.9rem; }
.assistent-workflow {
  font-size: 0.76rem;
  color: var(--tinte-still);
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assistent-klein {
  border: 0; background: none; padding: 2px 6px; cursor: pointer;
  font: inherit; font-size: 0.78rem; color: var(--tinte-still);
  border-radius: 4px;
}
.assistent-klein:hover { background: var(--marke-hell); color: var(--marke); }

.assistent-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.87rem;
}

.assistent-satz {
  max-width: 88%;
  padding: 7px 11px;
  border-radius: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* `pre-wrap` NUR am Text, nicht an der Blase.
   Die Auskuenfte kommen mit echten Zeilenumbruechen (siehe
   assistent._offene_punkte_satz) und sollen sie behalten. Steht die
   Regel aber an der ganzen Blase, wird auch die EINRUECKUNG des
   Template-Strings in assistent.js sichtbar - die Blase war dadurch
   randvoll mit Leerzeilen und der Text eingerueckt. Im Browser sofort
   zu sehen, im Code nicht. */
.assistent-satz.ich,
.assistent-text { white-space: pre-wrap; }
.assistent-satz.ich {
  align-self: flex-end;
  background: var(--marke);
  color: #fff;
}
.assistent-satz.hilfe {
  align-self: flex-start;
  background: var(--marke-hell);
  border: 1px solid var(--linie);
}
.assistent-satz.hilfe.nachfrage { border-left: 3px solid var(--achtung); }
.assistent-satz.wartet { color: var(--tinte-still); letter-spacing: 2px; }

.assistent-knoepfe {
  display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap;
}
.assistent-vermerk {
  margin-top: 5px; font-size: 0.78rem; color: var(--tinte-still);
}

.assistent-leer { color: var(--tinte-still); font-size: 0.85rem; }
.assistent-leer p { margin: 0 0 0.5rem; }
.assistent-hinweis { font-size: 0.8rem; }
.assistent-vorschlaege {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  margin-top: 5px;
}
.assistent-beispiel {
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--tinte);
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
}
.assistent-beispiel:hover { border-color: var(--marke); color: var(--marke); }

.assistent-eingabe {
  display: flex;
  gap: 6px;
  padding: 9px;
  border-top: 1px solid var(--linie);
}
.assistent-eingabe input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  font: inherit;
  background: var(--flaeche);
  color: var(--tinte);
}
.assistent-eingabe input:focus-visible { outline: 2px solid var(--marke); }
.assistent-eingabe .haupt-knopf { padding: 7px 13px; font-size: 0.85rem; }

/* Ein Wert, auf den der Assistent zeigt, den es aber nur als
   Tabellenzelle gibt (keine Wertkarte mit „Quelle anzeigen"). */
.zahl-feld.hervorgehoben,
td.zahl-feld.hervorgehoben {
  background: var(--achtung-fl);
  box-shadow: inset 0 0 0 2px var(--achtung);
}

/* Auf dem Telefon nimmt das Fenster die Breite, die es gibt - und die
   Blase rueckt hoch, damit sie nicht auf der Systemleiste sitzt. */
@media (max-width: 560px) {
  #assistent { right: 10px; bottom: 10px; }
  .assistent-fenster { height: min(70vh, 560px); }
  .assistent-beschriftung { display: none; }
  .assistent-blase { padding: 12px; }
}

/* ------------------------------------------------------------------ */
/* Teil II - Fallunterscheidung nach der Foerdermassnahme (31.08.2026)  */
/*
   Rueckmeldung: "Teil II soll kein zweites Word-Dokument im Browser
   sein." Ein Pruefpunkt ist deshalb eine KARTE mit vier Zeilen, keine
   Tabellenzeile mit einer Textwand: Zeichen und Kennung links, die
   Aussage gross, die erkannten Daten klein darunter, alles Lange im
   <details>. Die Farbe steht am linken Rand, damit man die offenen
   Punkte beim Ueberfliegen findet.
*/
.t2-abschnitt { margin: 0 0 1.4rem; }
.t2-liste { list-style: none; margin: 0.4rem 0 0; padding: 0; }

.t2-punkt {
  border: 1px solid var(--linie);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--flaeche);
}
.t2-gruen { border-left-color: var(--gut); }
.t2-gelb  { border-left-color: var(--achtung); }
.t2-rot   { border-left-color: var(--schlecht); }
.t2-grau  { border-left-color: var(--linie); opacity: 0.75; }

.t2-kopf { display: flex; align-items: baseline; gap: 0.5rem; }
.t2-zeichen { font-weight: 700; }
.t2-gruen .t2-zeichen { color: var(--gut); }
.t2-gelb  .t2-zeichen { color: var(--achtung); }
.t2-rot   .t2-zeichen { color: var(--schlecht); }
.t2-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--tinte-still);
}
.t2-titel { font-weight: 600; }

/* Die Frage steht klein UEBER der Antwort - sie ist der Vordruck, nicht
   das Ergebnis. */
.t2-frage {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--tinte-still);
}
.t2-aussage { margin: 0.25rem 0 0; }

.t2-daten { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.t2-daten li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  padding: 2px 0;
  border-top: 1px dotted var(--linie);
}
.t2-d-name { flex: 1 1 12rem; }
.t2-d-wert { font-variant-numeric: tabular-nums; font-weight: 600; }
.t2-d-quelle { flex: 1 1 100%; font-size: 0.74rem; color: var(--tinte-still); }

.t2-hinweise { margin: 0.3rem 0 0.5rem; padding-left: 1.1rem; font-size: 0.82rem; }
.t2-quelle { margin: 0.45rem 0 0; font-size: 0.74rem; color: var(--tinte-still); }

/* ===================================================================
   „ZU TUN" — alles Offene als EINE Liste (01.09.2026)

   Ein Muster fuer jede Art von Aufgabe: Marke, Titel, wohin der Wert
   geht, die Folge, und die Eingabe. Der farbige Streifen links zeigt
   die Art, nicht die Dringlichkeit - die steckt in der Reihenfolge.
   =================================================================== */
.a-liste { display: grid; gap: 10px; margin-top: 0.6rem; }

.a-karte {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-stark);
  border-radius: 8px;
  background: var(--flaeche);
  padding: 11px 14px;
}
.a-karte.a-datei { border-left-color: var(--schlecht); }
.a-karte.a-frage,
.a-karte.a-wert,
.a-karte.a-abweichung { border-left-color: var(--achtung); }
.a-karte.a-bestaetigen { border-left-color: var(--linie-stark); }

.a-kopf {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.a-kopf h3 { margin: 0; font-size: 0.94rem; font-weight: 600; }

.a-wohin {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--tinte-still);
  white-space: nowrap;
}

.a-wirkung {
  margin: 0 0 9px;
  font-size: 0.85rem;
  color: var(--tinte-leise);
  max-width: 76ch;
}

.a-steuer { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.a-still { font-size: 0.78rem; color: var(--tinte-still); }

.a-feld {
  font: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  padding: 5px 9px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche-tief);
  color: var(--tinte);
  max-width: 150px;
}
.a-feldpaar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--tinte-still);
}

/* Sammelbestaetigung: 17 Meldungen werden EINE Karte mit Zeilen. */
.a-punkte { display: grid; gap: 3px; width: 100%; }
.a-punkt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 0.85rem;
}
.a-punkt:hover { background: var(--flaeche-tief); }
.a-nr {
  flex: 0 0 auto;
  min-width: 2.4rem;
  font-size: 0.72rem;
  color: var(--tinte-still);
}
.a-ptext { flex: 1 1 auto; }

/* ===================================================================
   SAMMELN, DANN RECHNEN — 01.09.2026

   Zwei Teile: eine kurze Rueckmeldung nach jeder Aenderung (Toast) und
   eine bleibende Leiste, solange eine Neuberechnung aussteht.

   Beide stehen LINKS unten. Rechts klebt die Bedienhilfe
   (`#assistent`, z-index 900); zwei schwebende Elemente in derselben
   Ecke verdecken einander.
   =================================================================== */

#meldung-toast {
  position: fixed;
  left: 18px;
  bottom: 84px;              /* ueber der Rechenleiste, nicht auf ihr */
  z-index: 950;
  max-width: min(28rem, calc(100vw - 36px));
  padding: 10px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  /* Flaeche und Tinte statt fester Farben: Beide werden in der dunklen
     Darstellung neu gesetzt (siehe :root-Bloecke oben). Ein fester
     heller Grund mit `var(--tinte)` darauf waere dort hell auf hell. */
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  /* Unsichtbar UND nicht anklickbar, solange nichts zu melden ist -
     `opacity: 0` allein liesse eine unsichtbare Klickflaeche stehen. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
#meldung-toast.sichtbar {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#neu-rechnen-leiste {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 940;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(34rem, calc(100vw - 36px));
  padding: 10px 14px;
  /* `--achtung`/`--achtung-fl` sind die vorhandenen Aufmerksamkeitsfarben
     des Hauses (gelbe Ampel) und werden in der dunklen Darstellung
     mitgesetzt - deshalb keine eigenen Farbwerte hier. */
  border: 1px solid var(--achtung);
  border-radius: 10px;
  background: var(--achtung-fl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.nrl-text {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--tinte);
}

/* Der Knopf selbst traegt zusaetzlich `haupt-knopf` - Aussehen und
   Verhalten kommen von dort, damit er wie jeder andere Hauptknopf des
   Portals aussieht. Hier nur, was die Leiste braucht. */
/* Der angesprungene offene Punkt wird kurz hervorgehoben - ohne das
   landet man zwar an der richtigen Stelle, sieht aber nicht, WELCHE
   Zeile gemeint war. */
.punkt-hervor {
  animation: punkt-blinken 2.4s ease-out 1;
  border-radius: 6px;
}
@keyframes punkt-blinken {
  0%, 55% { background: var(--achtung-fl); box-shadow: 0 0 0 4px var(--achtung-fl); }
  100%    { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .punkt-hervor { animation: none; background: var(--achtung-fl); }
}

/* PFLICHT / optional in der Prüfliste. Ohne diese Marke sah jede
   offene Zeile gleich dringend aus (Rückmeldung 01.09.2026). */
.p-pflicht, .p-kuer {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.p-pflicht { background: var(--schlecht-fl); color: var(--schlecht); }
.p-kuer    { background: var(--marke-flaeche); color: var(--tinte-still); }
.pruefliste li { display: flex; align-items: center; gap: 8px; }

.nrl-abbrechen { flex: 0 0 auto; }
.nrl-zurueck, .nrl-wieder { flex: 0 0 auto; font-size: 0.84rem; }
/* Nur „Rückgängig", nichts zu rechnen: ruhige Flaeche statt Ampelgelb -
   die Leiste ist dann keine Aufforderung, sondern ein Angebot. */
#neu-rechnen-leiste.nur-zurueck {
  border-color: var(--linie-stark);
  background: var(--flaeche);
}

/* Waehrend gerechnet wird ist die Leiste kein Handlungsaufruf mehr,
   sondern eine Statusanzeige - deshalb ruhige Flaeche statt der
   gelben Aufmerksamkeitsfarbe. */
#neu-rechnen-leiste.laeuft {
  border-color: var(--linie-stark);
  background: var(--flaeche);
}

/* Die Auslese eines Workflows ist gescheitert (M4, app.js
   rechenLeisteSetzen): rot wie jede Fehlermeldung des Hauses, mit dem
   Knopf „Neu auslesen" daneben. */
#neu-rechnen-leiste.fehler {
  border-color: var(--schlecht);
  background: var(--schlecht-fl);
}
.nrl-auslesen { flex: 0 0 auto; }

/* Auf schmalen Fenstern untereinander - nebeneinander bliebe fuer den
   Text kaum Platz, und die Leiste liefe unter die Bedienhilfe. */
@media (max-width: 560px) {
  #neu-rechnen-leiste {
    right: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #meldung-toast { right: 18px; bottom: 128px; }
}

/* Rückfrage als Dialog (bausteine.js: bsFrage) - statt confirm(). */
dialog.bs-frage {
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  padding: 1.1rem 1.25rem 1rem;
  max-width: min(34rem, calc(100vw - 2rem));
  background: var(--papier);
  color: var(--tinte);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  font: inherit;
}
dialog.bs-frage::backdrop { background: rgba(0, 0, 0, 0.38); }
.bs-frage-text { line-height: 1.5; }
.bs-frage-text p { margin: 0 0 0.6rem; }
.bs-frage-liste { margin: 0 0 0.7rem; padding-left: 1.1rem; }
.bs-frage-liste li { margin: 0.15rem 0; }
.bs-frage-knoepfe {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

/* Verwaltung > Rechenwerte: Eingabefelder in der Bausteine-Tabelle. */
.rw-tabelle .rw-feld { width: 8rem; }
.rw-tabelle .rw-feld.rw-breit { width: min(26rem, 60vw); }
.rw-tabelle .ein-grund { display: block; }

/* ---- Bausteine, die seit dem 23.09.2026 das ganze Portal tragen ---- */
/* Klappbarer Block: Blocktitel als summary, Chevron statt Textpfeil. */
details.block.klappbar > summary.block-titel {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
details.block.klappbar > summary.block-titel::-webkit-details-marker { display: none; }
details.block.klappbar > summary.block-titel::before {
  content: ""; width: 0.55em; height: 0.55em; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s; opacity: 0.7;
}
details.block.klappbar[open] > summary.block-titel::before { transform: rotate(45deg); }
details.block.klappbar > .klapp-inhalt { padding-top: 0.9rem; }
/* Still-Knopf: nur Text, wie ein Verweis. */
.still-knopf {
  background: none; border: none; padding: 0.1rem 0.2rem; color: var(--akzent);
  cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.still-knopf:hover { color: var(--tinte); }
/* Beschriftung + Feld. */
.bs-feldzeile { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0.9rem 0.25rem 0; }
.bs-feldzeile > span { color: var(--tinte-leise); font-size: 0.86rem; }
/* Ladezeichen mit Text. */
.bs-laedt { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--tinte-leise); }
/* Toast-Arten. */
#meldung-toast.toast-fehl { background: var(--schlecht); color: #fff; }
#meldung-toast.toast-gut { background: var(--gut-voll, var(--gut)); color: #fff; }
/* Generische Liste. */
.bs-liste { margin: 0.4rem 0; padding-left: 1.2rem; }
.bs-liste li { margin: 0.2rem 0; }
/* Bedienhilfe: Vorschlaege sind eine bsListe - ohne Aufzaehlungspunkte. */
.assistent-vorschlaege { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.assistent-vorschlaege li { margin: 0.2rem 0; }
.assistent-vermerk { margin-bottom: 0; }
/* Felder in Leisten und Karten nehmen nur ihren Platz, nicht die Zeile. */
.b-neu .wertfeld, .b-upload .wertfeld, .bs-leiste .wertfeld, .a-feldpaar .wertfeld,
.bs-bildkarte .wertfeld, .wid-feld { width: auto; }
/* Zaehler an Kapitel-/Gruppentiteln bleiben so still wie zuvor. */
.kapitel-merker.zaehler, .og-zahl.zaehler, .block-zahl.zaehler { border: 0; background: none; padding: 0; }
/* Zaehler an Stellen, die vorher keinen Rahmen hatten. */
.zaehler.offen-punkt { border: 0; background: none; }
/* Balken als Block, mit Warnstufen fuer die Fuellung. */
.balken { display: block; }
/* Statusmarke: Markenfarbe (blau) und die grosse Fassung am Seitenkopf. */
.bs-status-marke { background: var(--marke-flaeche); color: var(--marke); }
.bs-status-gross { font-size: 0.95rem; padding: 0.25rem 0.7rem; }
/* Massnahmen: berechnete Werte grau kursiv, positive Jahre der Zahlungsreihe gruen. */
.b-gerechnet { color: var(--tinte-leise); font-style: italic; }
.mn-positiv td { color: var(--gut); }
/* Massnahmen-Details: die Detailzeile macht die Tabelle nicht breiter als ihre
   Spalten - was nicht passt, rollt innerhalb der Zeile (max-width: 0 nimmt der
   Zelle ihren Anspruch auf Mindestbreite, colspan gibt ihr die Tabellenbreite). */
.mn-tab .bs-detail > td { max-width: 0; overflow-x: auto; }
.mn-tab .bs-detail-raster { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
/* Traegerwechsel (29.09.2026): unter der Endenergie klein der Split
   „Erdgas −107.800 · Strom +30.000" - eigene Zeile, nicht kursiv, damit die
   Zahl darueber die Zahl bleibt. Gilt in Bilanz und Bericht. */
.mn-split { display: block; font-size: 0.74rem; color: var(--tinte-still); font-style: normal;
  white-space: nowrap; line-height: 1.2; }
/* Spalte „Sz. 3": der Haken mittig; das Szenario „Freie Auswahl" hebt sich
   in der Szenarientabelle ab. */
.mn-sz3-zelle { text-align: center; }
.mn-sz3-zelle .wertfeld-schalter { vertical-align: middle; }
tr.mn-szenario-frei > td { font-weight: 600; }

/* KEIN UEBERLAPPEN, portalweit (28.09.2026, „fix overlapping text!
   everywhere in portal"): Jedes Kind eines Rasters bleibt in seiner
   Spalte - ohne min-width: 0 haelt eine 1fr-Spalte die Mindestbreite ihres
   Inhalts und schiebt sich unter die Nachbarin. Langer Text bricht um. */
.kennzahlen > *, .bs-kennzahlen > *, .bs-bildraster > *,
.rechengroessen > *, .stammdaten > *, .dokument > *, .ereignis > * {
  min-width: 0; overflow-wrap: break-word; }

/* ==== Kundenanfrage (anfrage.html) ====================================
   Die Seite fuer KUNDEN, seit 12.10.2026 im Aussehen von Chengs Vorlage
   „EDL-G-Angebotsanfrage": helles Gruen-Grau, weisse Karten je Abschnitt,
   zweispaltiges Raster, grosse Felder (44 px), gruene Knoepfe. Eigene
   Klassen mit an-Praefix und eigene Farben (--an-*), damit nichts aus dem
   Portal hineinwirkt; dunkel ueber dieselben Schalter wie das Portal. */
.anfrage-seite {
  --an-grund: #f2f6f5; --an-karte: #ffffff; --an-rand: #d8e5e1; --an-tinte: #183c43; --an-leise: #50676b;
  --an-akzent: #176f59; --an-akzent-text: #ffffff; --an-zart: #e4efeb; --an-zart-text: #214d43;
  --an-feldrand: #a7bab5; --an-zeile: #f5f8f7; --an-zeilenrand: #dce7e3; --an-box: #e6efea; --an-boxrand: #558673;
  --an-fehler: #8b3026; --an-fehlergrund: #fff1ef; --an-erfolg: #15543b; --an-erfolggrund: #e5f3ea;
  --an-weg: #f2e9e6; --an-wegtext: #7e3926; --an-fokus: #d8a738; --an-tag: #397365; --an-link: #356f60;
  background: var(--an-grund); color: var(--an-tinte);
  font-family: system-ui, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .anfrage-seite {
    --an-grund: #0f1a1c; --an-karte: #16242a; --an-rand: #2a3d40; --an-tinte: #e3eeec; --an-leise: #a4b8b6;
    --an-akzent: #2f9a7c; --an-zart: #1d3a33; --an-zart-text: #cfe7df; --an-feldrand: #3d5558;
    --an-zeile: #1a2b30; --an-zeilenrand: #2a3d40; --an-box: #183029; --an-fehler: #ffb4a8;
    --an-fehlergrund: #3a1d19; --an-erfolg: #a6e0bf; --an-erfolggrund: #163525; --an-weg: #3a2420;
    --an-wegtext: #f0b7a6; --an-tag: #7bd0ba; --an-link: #7bd0ba;
  }
}
:root[data-theme="dunkel"] .anfrage-seite {
  --an-grund: #0f1a1c; --an-karte: #16242a; --an-rand: #2a3d40; --an-tinte: #e3eeec; --an-leise: #a4b8b6;
  --an-akzent: #2f9a7c; --an-zart: #1d3a33; --an-zart-text: #cfe7df; --an-feldrand: #3d5558;
  --an-zeile: #1a2b30; --an-zeilenrand: #2a3d40; --an-box: #183029; --an-fehler: #ffb4a8;
  --an-fehlergrund: #3a1d19; --an-erfolg: #a6e0bf; --an-erfolggrund: #163525; --an-weg: #3a2420;
  --an-wegtext: #f0b7a6; --an-tag: #7bd0ba; --an-link: #7bd0ba;
}
.anfrage-kopf { justify-content: center; }
.anfrage-inhalt { max-width: 1120px; margin: 0 auto; padding: 40px 24px 80px; box-sizing: border-box; }
.anfrage-inhalt *, .anfrage-inhalt *::before, .anfrage-inhalt *::after { box-sizing: border-box; }
.an-kopf { margin-bottom: 26px; }
.an-kopf h1, .an-rahmen h1 { font-size: 36px; margin: 8px 0; color: var(--an-tinte); }
.an-kopf p, .an-rahmen p { line-height: 1.6; }
.an-tag { color: var(--an-tag); letter-spacing: 0.12em; font-size: 12px; font-weight: 700; }
.an-hilfe { display: block; color: var(--an-leise); line-height: 1.5; font-size: 0.86rem; margin: 0; }
p.an-hilfe { margin: 0 0 14px; }
.an-hinweisbox { padding: 16px 20px; background: var(--an-box); border-left: 4px solid var(--an-boxrand); border-radius: 6px; }
.an-nav { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.an-sprung { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--an-link);
  text-decoration: underline; cursor: pointer; }
.an-abschnitt { background: var(--an-karte); border: 1px solid var(--an-rand); border-radius: 14px; margin: 20px 0;
  padding: 28px; scroll-margin-top: calc(var(--kopf-hoehe) + 4.5rem); }
.an-abschnitt h2 { font-size: 23px; margin: 0 0 20px; }
.an-abschnitt h3 { margin: 0 0 18px; font-size: 18px; min-width: 0; overflow-wrap: break-word; }
.an-gruppe { margin-top: 24px !important; }
.an-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.an-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; border: 0; padding: 0; margin: 0;
  scroll-margin-top: calc(var(--kopf-hoehe) + 4.5rem); }
.an-feld.breit { grid-column: 1 / -1; }
.an-label, .an-feld legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.an-feld label.an-label { margin-bottom: 0; }
.an-feld input:not([type="checkbox"]), .an-feld select, .an-feld textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--an-feldrand); border-radius: 7px; font: inherit;
  background: var(--an-karte); color: var(--an-tinte); min-height: 44px; }
.an-feld textarea { min-height: 90px; resize: vertical; }
.an-feld input[type="file"] { padding: 9px 10px; }
.an-checks { display: flex; flex-wrap: wrap; gap: 9px; }
.an-check { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--an-zeilenrand);
  border-radius: 8px; font-weight: 400; font-size: 0.95rem; cursor: pointer; }
.an-check input { width: 18px; height: 18px; min-height: 18px; margin: 0; flex: none; accent-color: var(--an-akzent); }
.an-einwilligung { align-items: flex-start; }
.an-einwilligung input { margin-top: 3px; }
.an-zeile { margin: 18px 0; padding: 20px; background: var(--an-zeile); border: 1px solid var(--an-zeilenrand);
  border-radius: 9px; scroll-margin-top: calc(var(--kopf-hoehe) + 4.5rem); }
.an-zeilenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.an-zeilenkopf button { margin-bottom: 18px; }
.an-knopf { border: 0; border-radius: 7px; background: var(--an-akzent); color: var(--an-akzent-text);
  padding: 12px 17px; font: inherit; font-weight: 600; cursor: pointer; }
.an-knopf.neben { background: var(--an-zart); color: var(--an-zart-text); }
.an-knopf.weg { background: var(--an-weg); color: var(--an-wegtext); padding: 7px 12px; font-size: 13px; flex: none; }
.an-knopf:disabled { opacity: 0.45; cursor: default; }
.an-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.an-meldung { padding: 16px; border-radius: 7px; margin: 0 0 20px; }
.an-meldung.fehler { color: var(--an-fehler); background: var(--an-fehlergrund); }
.an-meldung.erfolg { color: var(--an-erfolg); background: var(--an-erfolggrund); }
.an-meldung ul { margin: 8px 0 0; padding-left: 1.2rem; }
.an-fehler { font-size: 0.84rem; color: var(--an-fehler); font-weight: 600; margin: 0; }
.an-fehler:empty { display: none; }
.an-feld.mit-fehler input:not([type="checkbox"]), .an-feld.mit-fehler select, .an-feld.mit-fehler textarea {
  border-color: var(--an-fehler); background: var(--an-fehlergrund); }
.an-zeile.mit-fehler { border-color: var(--an-fehler); }
.anfrage-seite .pflicht { color: var(--an-fehler); }
.an-fuss { margin-top: 18px; font-size: 13px; color: var(--an-leise); }
.anfrage-seite a:focus-visible, .anfrage-seite button:focus-visible, .anfrage-seite input:focus-visible,
.anfrage-seite select:focus-visible, .anfrage-seite textarea:focus-visible {
  outline: 3px solid var(--an-fokus); outline-offset: 2px; }
.anfrage-leiste {
  position: sticky; top: var(--kopf-hoehe); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem;
  background: var(--an-grund); padding: 0.55rem 0; margin-bottom: 0.6rem; border-bottom: 1px solid var(--an-rand);
}
.anfrage-fortschritt { display: flex; align-items: center; gap: 0.6rem; min-width: 14rem; flex: 1 1 14rem;
  font-size: 0.85rem; color: var(--an-leise); }
.anfrage-fortschritt .balken { flex: 1 1 auto; margin: 0; }
.anfrage-zustand { font-size: 0.8rem; color: var(--an-leise); }
.anfrage-zustand.gut { color: var(--an-erfolg); }
.anfrage-zustand.fehl { color: var(--an-fehler); font-weight: 600; }
@media (max-width: 650px) {
  .anfrage-inhalt { padding: 24px 16px 50px; }
  .an-raster { grid-template-columns: 1fr; }
  .an-abschnitt { padding: 20px; }
  .an-zeile { padding: 16px; }
  .an-kopf h1, .an-rahmen h1 { font-size: 28px; }
  .an-zeilenkopf { flex-wrap: wrap; }
}
@media print {
  .anfrage-seite { background: #fff; }
  .anfrage-seite button, .an-aktionen, .an-nav, .anfrage-leiste { display: none; }
  .an-abschnitt { break-inside: avoid; }
  .anfrage-inhalt { padding: 0; }
}

/* Kundenanfragen auf der Projektseite (app.js, zeichneListe). */
.anfrage-link { display: flex; gap: 0.5rem; margin: 0.6rem 0; }
.anfrage-link input { flex: 1 1 auto; min-width: 0; font-family: var(--ziffern); font-size: 0.8rem; }
.anfrage-antworten table { width: 100%; border-collapse: collapse; margin-bottom: 0.6rem; }
.anfrage-antworten td { padding: 0.2rem 0.6rem 0.2rem 0; vertical-align: top; font-size: 0.88rem; }
.anfrage-antworten td:first-child { color: var(--tinte-leise); width: 45%; }
.anfrage-antworten h4 { margin: 0.8rem 0 0.3rem; font-size: 0.92rem; }
.anfrage-antworten h5 { margin: 0.5rem 0 0.2rem; font-size: 0.86rem; color: var(--tinte-leise); }
/* Verbrauchstabelle einer Anfrage (Abschnitt E): Kopfzeile, Zahlen rechts, KEINE Summe. */
.anfrage-antworten table.anfrage-verbraeuche th { text-align: left; font-size: 0.78rem; color: var(--tinte-leise);
  font-weight: 600; padding: 0.25rem 0.6rem 0.25rem 0; border-bottom: 1px solid var(--linie); }
.anfrage-antworten table.anfrage-verbraeuche td { width: auto; color: var(--tinte); border-bottom: 1px solid var(--linie); }
.anfrage-antworten table.anfrage-verbraeuche td.zahl { text-align: right; font-family: var(--ziffern); white-space: nowrap; }
.anfrage-antworten .anfrage-tabelle-rahmen { overflow-x: auto; }
/* ==== Fehlersuche 29.09.2026: Ueberlappungen und schwebende Elemente ====
   Gesammelt am Ende, weil mehrere Regeln hier ALTE Regeln gleicher
   Spezifitaet schlagen muessen (spaeter gewinnt). */

/* Tabellen IN einer aufgeklappten Detailzeile erbten `nowrap` der aeusseren
   Tabelle (td.r, bs-kompakt td) - lange Bemerkungen/Herkunftstexte liefen
   ueber die Nachbarspalte. (0,3,2) + spaeter schlaegt table.werte.bs-tab td.r. */
table.werte.bs-tab .bs-detail-tab th,
table.werte.bs-tab .bs-detail-tab td { white-space: normal; overflow-wrap: break-word; }

/* Bericht: Statusspalte breit genug fuer „VORGABE (OFFEN)", die
   Bildunterschrift der Fotos bricht um. */
.bericht-tab th:last-child { width: 9.5rem; }
.bericht-tab.br-fotos th:last-child { width: 40%; }
.bericht-tab.br-fotos td:last-child { white-space: normal; }
/* Auf dem Telefon keine festen Spalten - dort bekam „Wert" null Pixel. */
@media (max-width: 600px) {
  .bericht-tab { table-layout: auto; }
  .bericht-tab th:first-child, .bericht-tab th:nth-child(3), .bericht-tab th:last-child { width: auto; }
}

/* Kennzahlen: Platzhaltertexte („– keine (rechnet sich nicht)") duerfen
   umbrechen, statt in die Nachbarzelle zu laufen. */
.bs-kennzahlen dt, .bs-kennzahlen dd { min-width: 0; }
.bs-kennzahlen dd { white-space: normal; text-align: right; overflow-wrap: break-word; }

/* Rueckfrage-Dialog: lange Dateinamen brechen um. */
.bs-frage-text, .bs-frage-liste { overflow-wrap: anywhere; }

/* Die Bedienhilfe liegt UEBER den Blaetterknoepfen (905) und der
   Rechenleiste (940) - offen verdeckten sie sonst ihr Eingabefeld. */
#assistent { z-index: 950; }

/* Rechenleiste neben den Blaetterknoepfen: nicht breiter, als links von
   Knoepfen und Hilfe Platz ist. */
#neu-rechnen-leiste {
  max-width: min(34rem, calc(100vw - 36px - var(--hilfe-breite, 108px) - 12px - 100px));
}

/* Unten Platz fuer die schwebenden Knoepfe - auch in den mittleren und
   schmalen Fenstern, wo die Medienabfragen ihn auf 34px gesenkt hatten. */
@media (max-width: 1100px) {
  .kapitel-inhalt { padding-bottom: 72px; }
}

@media (max-width: 820px) {
  /* Der mehrzeilige Kopf klebt auf dem Telefon nicht - er nahm sonst ein
     Drittel des Bildschirms. */
  .pruef-kopf { position: static; }
}

@media (max-width: 560px) {
  /* Stapel von unten rechts: Hilfe (unten), Blaetterknoepfe darueber,
     Rechenleiste darueber - nichts liegt mehr aufeinander. */
  #neu-rechnen-leiste { max-width: none; bottom: calc(68px + 40px + 10px); }
  #meldung-toast { top: calc(var(--kopf-hoehe) + 10px); bottom: auto; }
  .kapitel-inhalt { padding-bottom: 150px; }
}

/* Spaltenkoepfe aus EINEM langen Wort („VOLLSTÄNDIG") liefen in einer
   Tabelle mit festen Spalten in den Nachbarkopf („VOLLSTÄNDIGOFFEN").
   Silbentrennung (lang="de") und notfalls Umbruch im Wort. */
table.werte.bs-tab thead th { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }table.werte.bs-tab thead th.r { white-space: normal; }
/* Bericht-Tabellen: `anywhere` brach auf dem Telefon mitten im Wort
   („Unterne|hmen") - break-word bricht nur, wenn ein Wort allein nicht
   passt. Der Rueckweg mit langem Projektnamen wird gekuerzt statt
   aus dem Bild zu laufen. */
.bericht-tab td { overflow-wrap: break-word; }
/* „– aus dem Katalog –" nahm die Breite des LAENGSTEN Katalogtitels an
   und lief ueber den Seitenrand hinaus (Rueckmeldung 29.09.2026). Jetzt
   hoechstens 32rem und nie breiter als der Platz; lange Eintraege werden
   im geschlossenen Feld abgeschnitten, in der offenen Liste stehen sie ganz. */
.b-neu select.mn-katalog-wahl {
  flex: 0 1 32rem; width: 32rem; min-width: 12rem; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---------------------------------------------------------------
   Stammdaten, Kunden, Projektablage (30.09.2026, stammdaten.js /
   dokumente.js) - das Portal ersetzt die SharePoint-Ablage.
   --------------------------------------------------------------- */
.z-archiv { color: var(--tinte-leise); background: var(--flaeche-tief); border: 1px solid var(--linie); }

.stamm-beschreibung { margin: 0.7rem 0 0; white-space: pre-line; color: var(--tinte-leise); overflow-wrap: anywhere; }
.schlagwort {
  display: inline-block; margin: 0 0.2rem 0.2rem 0; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--akzent-flaeche); color: var(--tinte); font-size: 0.8rem; text-decoration: none;
}
a.schlagwort:hover { text-decoration: underline; }
.stamm-felder {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.5rem 1.2rem;
}
.stamm-form .bs-feldzeile { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.stamm-form .bs-feldzeile .wertfeld { width: 100%; min-width: 0; box-sizing: border-box; }
.stamm-form .stamm-lang { margin-top: 0.6rem; align-items: start; }

/* Die Ablage */
.abl-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-width: 0; overflow-wrap: anywhere; }
.abl-pfad a { color: var(--tinte-leise); }
.abl-ziel { border: 2px dashed transparent; border-radius: 6px; transition: border-color 0.15s, background 0.15s; }
.abl-ziel.zieht { border-color: var(--akzent); background: var(--akzent-flaeche); }
.abl-leer { padding: 1.4rem 0.5rem; text-align: center; }
.abl-fuss { color: var(--tinte-still); font-size: 0.82rem; margin: 0.5rem 0 0; }
.abl-tab { width: 100%; }
.abl-tab td { vertical-align: middle; }
.abl-name-zelle { min-width: 14rem; }
.abl-name { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinte); text-decoration: none; min-width: 0; }
a.abl-name:hover .abl-text { text-decoration: underline; }
/* pre-wrap: SharePoint-Namen sortieren mit mehrfachen Leerzeichen („0   Gebäude"). */
.abl-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.abl-marke {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.3rem; height: 1.35rem; padding: 0 0.2rem; box-sizing: border-box; border-radius: 3px;
  background: var(--marke-flaeche); color: var(--tinte-leise); font: 700 0.6rem/1 var(--schrift-daten, monospace);
  letter-spacing: 0.02em;
}
.abl-marke.ordner { background: var(--akzent); position: relative; border-radius: 1px 3px 3px 3px; min-width: 1.6rem; width: 1.6rem; height: 1.15rem; margin: 0.1rem 0.35rem 0 0.35rem; }
.abl-marke.ordner::before {
  content: ""; position: absolute; left: 0; top: -0.22rem; width: 0.7rem; height: 0.3rem;
  background: var(--akzent); border-radius: 2px 2px 0 0;
}
.abl-ordner .abl-text { font-weight: 600; }
a.mini-knopf { text-decoration: none; display: inline-block; }
.abl-version { margin-left: 0.5rem; }
.abl-version.offen { background: var(--akzent-flaeche); }
.abl-versionen td { background: var(--flaeche-tief); }
.abl-versionsliste { margin: 0.2rem 0; padding-left: 1.2rem; }
.abl-hoch { margin: 0.5rem 0 0.8rem; display: grid; gap: 0.35rem; }
.abl-hoch .balken { width: 100%; }
.abl-hoch-text { font-size: 0.88rem; color: var(--tinte-leise); }
.abl-korb { margin-top: 1.2rem; }

.eingabe-dialog { min-width: min(30rem, 92vw); }
.eingabe-form h3 { margin: 0 0 0.8rem; }
.eingabe-form .bs-feldzeile { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.eingabe-form .wertfeld { width: 100%; box-sizing: border-box; min-width: 0; }

@media (max-width: 640px) {
  .stamm-form .bs-feldzeile, .eingabe-form .bs-feldzeile { grid-template-columns: 1fr; gap: 0.2rem; }
  .abl-name-zelle { min-width: 10rem; }
}
/* Kopfleiste am Telefon: Seit „Kunden" dazukam (30.09.2026) passen Logo,
   drei Bereiche und Profilbild nicht mehr in 375 px - die Seite liess
   sich um 60 px quer schieben. Logo und Abstände schrumpfen, die Mitte
   gibt ihren Anspruch auf gleich breite Seiten auf. */
@media (max-width: 520px) {
  .kopfleiste { gap: 0.4rem; padding: 0 0.6rem; }
  .kopfleiste > .marke, .kopfleiste > .benutzer { flex: 0 1 auto; min-width: 0; }
  .kopfleiste > .bereiche { flex: 1 1 auto; min-width: 0; }
  .marke-logo { height: 20px; max-width: 26vw; object-fit: contain; object-position: left; }
  .bereich { padding: 0.3rem 0.4rem; font-size: 0.8rem; }
}
/* ===================================================================
   UMBAU DER OBERFLÄCHE (30.09.2026)
   „the UI sucks … make it make sense … I want clean look."
   Ein Muster für alle Seiten: Pfad → Titel mit Status und ⋯ →
   Werkzeugleiste (Suche, Chips, EINE Haupthandlung) → schlichte Liste.
   Datensätze (Projekt, Kunde): Reiter links, Angaben rechts.
   =================================================================== */

/* --- Kopfleiste: Suche --------------------------------------------- */
/* Logo links und Suche rechts gleich breit - die Bereiche bleiben MITTIG (Rueckmeldung 03.09.2026). */
.kopf-suche { position: relative; flex: 1 0 0; min-width: 0; display: flex; justify-content: flex-end; }
.kopf-suche-rahmen { position: relative; display: block; width: 100%; max-width: 17rem; }
.kopf-suche input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.86rem;
  padding: 0.38rem 3.6rem 0.38rem 2rem; border-radius: 7px;
  border: 1px solid var(--kopf-linie); background: var(--kopf-papier); color: var(--kopf-tinte);
}
.kopf-suche input:focus { outline: 2px solid var(--kopf-akzent); outline-offset: 0; background: var(--kopf-flaeche); }
.kopf-suche-rahmen::before {
  content: ""; position: absolute; left: 0.7rem; top: 50%; width: 0.62rem; height: 0.62rem;
  border: 1.6px solid var(--kopf-tinte-still); border-radius: 50%; transform: translateY(-62%);
  pointer-events: none;
}
.kopf-suche-rahmen::after {
  content: ""; position: absolute; left: 1.28rem; top: 58%; width: 0.36rem; height: 1.6px;
  background: var(--kopf-tinte-still); transform: rotate(45deg); pointer-events: none;
}
.kopf-suche-taste {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font: 600 0.68rem var(--schrift); color: var(--kopf-tinte-still);
  border: 1px solid var(--kopf-linie); border-radius: 4px; padding: 0 0.3rem; pointer-events: none;
}
.kopf-suche input:focus + .kopf-suche-taste { display: none; }
.kopfleiste > .benutzer { flex: 0 0 auto; }
.kopfleiste > .marke { flex: 1 0 0; }

/* --- Pfad ---------------------------------------------------------- */
.bs-pfad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  font-size: 0.84rem; color: var(--tinte-still); margin: 0 0 0.35rem; min-width: 0;
}
.bs-pfad a { color: var(--tinte-leise); text-decoration: none; }
.bs-pfad a:hover { color: var(--tinte); text-decoration: underline; }
.bs-pfad [aria-current] { color: var(--tinte); font-weight: 600; }
.bs-pfad-trenner { color: var(--linie-stark); }

/* --- Seitenkopf / Datensatzkopf ------------------------------------ */
.seiten-kopf .kopf-zeile { justify-content: space-between; }
.datensatz-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1.3rem;
}
.datensatz-titel { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; min-width: 0; }
.datensatz-titel h1 { overflow-wrap: anywhere; }
.datensatz-aktionen { display: flex; align-items: center; gap: 0.4rem; }
.h1-nr { font-weight: 400; color: var(--tinte-still); font-size: 0.7em; }
.kopf-zusatz { color: var(--tinte-leise); font-size: 0.86rem; }
.pruef-kopf > .bs-pfad { margin-bottom: 0.2rem; }

/* --- Menü (⋯ und „Hochladen ▾") ------------------------------------ */
.bs-menue { position: relative; display: inline-block; }
.bs-menue > summary { list-style: none; cursor: pointer; user-select: none; }
.bs-menue > summary::-webkit-details-marker { display: none; }
.bs-menue > summary::marker { content: ""; }
.bs-menue-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 6px; color: var(--tinte-leise);
  font-size: 1.15rem; line-height: 1; border: 1px solid transparent;
}
.bs-menue-knopf:hover, .bs-menue[open] > .bs-menue-knopf { background: var(--flaeche-tief); border-color: var(--linie); color: var(--tinte); }
.datensatz-aktionen .bs-menue-knopf { border-color: var(--linie-stark); background: var(--flaeche); height: 1.95rem; }
.bs-menue-auf { display: inline-flex; align-items: center; gap: 0.45rem; }
.bs-menue-pfeil {
  width: 0.4rem; height: 0.4rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.bs-menue-liste {
  /* Die endgueltige Lage setzt bsMenuePlatzieren (position: fixed) - so
     schneidet keine Tabelle sie ab. absolute ist nur der Anfang. */
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 13rem;
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); padding: 0.3rem; text-align: left;
}
.bs-menue.rechts .bs-menue-liste { left: auto; right: 0; }
.bs-menue-eintrag {
  display: block; width: 100%; box-sizing: border-box; text-align: left; font: inherit; font-size: 0.87rem;
  padding: 0.42rem 0.7rem; border: 0; border-radius: 5px; background: none; color: var(--tinte);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bs-menue-eintrag:hover, .bs-menue-eintrag:focus-visible { background: var(--flaeche-tief); outline: none; }
.bs-menue-eintrag.gefahr { color: var(--schlecht); }
.bs-menue-eintrag.gefahr:hover { background: var(--schlecht-fl); }
.bs-menue-trenner { border: 0; border-top: 1px solid var(--linie); margin: 0.3rem 0.2rem; }

/* --- Werkzeugleiste, Suchfeld, Chips -------------------------------- */
.bs-werkzeugleiste {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.9rem; min-height: 2.1rem;
}
.bs-werkzeugleiste > .abl-pfad, .bs-werkzeugleiste > .werkzeug-text { flex: 1 1 auto; min-width: 0; }
.werkzeug-text { color: var(--tinte-still); font-size: 0.85rem; }
.such-feld {
  flex: 0 1 19rem; min-width: 10rem; box-sizing: border-box; font: inherit; font-size: 0.88rem;
  padding: 0.42rem 0.7rem; border: 1px solid var(--linie-stark); border-radius: 7px;
  background: var(--flaeche); color: var(--tinte);
}
.such-feld:focus { outline: 2px solid var(--marke); outline-offset: 0; }
.bs-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.bs-chip {
  font: inherit; font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-leise);
}
.bs-chip:hover { border-color: var(--linie-stark); color: var(--tinte); }
.bs-chip.aktiv { background: var(--marke); border-color: var(--marke); color: var(--flaeche); }
.bs-chip-zahl { opacity: 0.7; margin-left: 0.15rem; font-variant-numeric: tabular-nums; }

/* --- Die schlichte Liste -------------------------------------------- */
table.liste {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
}
table.liste th {
  text-align: left; font-size: 0.74rem; font-weight: 600; color: var(--tinte-still);
  padding: 0.55rem 0.9rem; background: var(--flaeche-tief); border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.liste td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.liste tbody:last-child tr:last-child td, table.liste > tbody > tr:last-child td { border-bottom: 0; }
table.liste tr[tabindex] { cursor: pointer; }
table.liste tbody tr:hover td { background: var(--flaeche-tief); }
table.liste .r { text-align: right; }
.p-name a { color: var(--tinte); font-weight: 600; text-decoration: none; }
.p-name a:hover { text-decoration: underline; }
.p-unter { display: block; color: var(--tinte-still); font-size: 0.78rem; margin-top: 0.1rem; }
.p-zeit { color: var(--tinte-leise); font-size: 0.83rem; white-space: nowrap; }
.p-zahl { font-variant-numeric: tabular-nums; color: var(--tinte-leise); white-space: nowrap; }
.p-workflows { white-space: normal; }
.wf-marke {
  display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.08rem 0.45rem; border-radius: 4px;
  margin: 0.1rem 0.25rem 0.1rem 0;
}
tr.p-gruppe-kopf th {
  background: var(--flaeche); font-size: 0.8rem; color: var(--tinte); padding: 0.8rem 0.9rem 0.35rem;
  border-bottom: 1px solid var(--linie); text-transform: none; letter-spacing: 0;
}
tr.p-gruppe-kopf a { color: var(--tinte); text-decoration: none; font-weight: 700; }
tr.p-gruppe-kopf a:hover { text-decoration: underline; }
.p-gruppe-zahl { color: var(--tinte-still); font-weight: 400; margin-left: 0.35rem; }
tbody.p-gruppe + tbody.p-gruppe tr.p-gruppe-kopf th { border-top: 1px solid var(--linie); }
tbody.p-gruppe tr.p-gruppe-kopf:hover th { background: var(--flaeche); }

/* --- Leerzustand ----------------------------------------------------- */
.leerzustand {
  text-align: center; padding: 2.2rem 1rem; color: var(--tinte-leise);
  border: 1px dashed var(--linie-stark); border-radius: 10px; background: var(--flaeche);
}
.leerzustand p { margin: 0.2rem 0; }
.leerzustand .p-unter { display: block; max-width: 34rem; margin: 0.3rem auto 0; }
.leerzustand.gross { padding: 3.5rem 1rem; }
.leerzustand h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--tinte); }
.leerzustand .haupt-knopf, .leerzustand .neben-knopf { margin-top: 0.9rem; }

/* --- Datensatz: Reiter links, Angaben rechts ------------------------ */
.bs-datensatz { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.6rem; align-items: start; }
.bs-datensatz-seite { position: sticky; top: calc(var(--kopf-hoehe) + 1rem); }
@media (max-width: 1000px) {
  .bs-datensatz { grid-template-columns: minmax(0, 1fr); }
  .bs-datensatz-seite { position: static; }
}
/* Die Unterstreichung liegt INNEN (box-shadow), nicht 1 px darunter - mit
   overflow-x: auto machte der Browser aus dem ueberstehenden Pixel eine
   senkrechte Laufleiste (Rueckmeldung 30.09.2026: "unneeded scrollbar"). */
.bs-reiterleiste {
  display: flex; gap: 0.2rem; box-shadow: inset 0 -1px 0 var(--linie); margin: 0 0 1rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.bs-reiterleiste::-webkit-scrollbar { display: none; }
.bs-reiterleiste a {
  padding: 0.5rem 0.85rem; color: var(--tinte-leise); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  white-space: nowrap;
}
.bs-reiterleiste a:hover { color: var(--tinte); }
.bs-reiterleiste a.aktiv { color: var(--tinte); box-shadow: inset 0 -2px 0 var(--marke); }
.bs-reiterleiste .bs-reiter-zahl, .such-abschnitt .bs-reiter-zahl {
  font-weight: 500; font-size: 0.76rem; color: var(--tinte-still); background: var(--flaeche-tief);
  border-radius: 999px; padding: 0 0.45rem; margin-left: 0.2rem;
}
.seitenkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 1rem 1.1rem;
}
.seitenkarte-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.seitenkarte-kopf h2 { font-size: 0.8rem; font-weight: 700; color: var(--tinte-still); margin: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.seitenkarte .still-knopf { font-size: 0.82rem; }
.bs-angaben { margin: 0; display: grid; gap: 0.55rem; }
.bs-angaben > div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.87rem; }
.bs-angaben dt { color: var(--tinte-still); }
.bs-angaben dd { margin: 0; overflow-wrap: anywhere; color: var(--tinte); }
.bs-angaben dd a { color: var(--tinte); }
.bs-leer { color: var(--linie-stark); }
.seitenkarte-fuss { margin: 0.9rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--linie);
  font-size: 0.78rem; color: var(--tinte-still); }
.seitenkarte .stamm-beschreibung { font-size: 0.86rem; }

/* --- Suche ----------------------------------------------------------- */
.such-abschnitt { margin-bottom: 1.6rem; }
.such-abschnitt h2 { font-size: 0.95rem; margin: 0 0 0.6rem; }

/* --- Ablage im neuen Muster ----------------------------------------- */
.abl-pfad .bs-pfad { margin: 0; font-size: 0.92rem; }
.abl-menue-zelle { width: 1%; white-space: nowrap; }
.abl-menue-zelle .neben-knopf { margin-right: 0.3rem; }
table.liste .abl-name { font-weight: 500; }
table.liste .abl-ordner .abl-text { font-weight: 600; }
.abl-fuss { margin-top: 0.6rem; }
.abl-ziel.zieht table.liste, .abl-ziel.zieht .leerzustand { border-color: var(--akzent); }

/* --- Dialoge: Formularfelder in der Grundschrift --------------------- */
.eingabe-form .wertfeld, .stamm-form .wertfeld {
  font-family: var(--schrift); font-size: 0.9rem; padding: 0.42rem 0.6rem; border-radius: 6px;
}
.formular-dialog { width: min(46rem, 94vw); }
.formular-dialog h3, .eingabe-dialog h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.formular-dialog .stamm-felder { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.formular-dialog .bs-frage-knoepfe, .eingabe-dialog .bs-frage-knoepfe { margin-top: 1.1rem; }

@media (max-width: 640px) {
  /* Am Telefon passt die Suche nicht neben Logo, Bereiche und Profilbild. */
  .kopf-suche { display: none; }
  .kopfleiste > .marke { flex: 0 1 auto; }
  .datensatz-aktionen { width: 100%; }
  .such-feld { flex: 1 1 100%; }
  table.liste th, table.liste td { padding: 0.5rem 0.6rem; }
}
/* ------------------------------------------------------------------
   M7 Q6: Dialoge der Kapitel-Hülle (bsDialog), Verlauf, Dateiwahl,
   Verknüpfung, Notizen, Freigabe von Bilanz/Stromsteuer, Verwaltung
   (Frühere Fassungen), Ablage (in n Workflows).
   ------------------------------------------------------------------ */
.bs-dialog { width: min(44rem, 94vw); max-height: 86vh; overflow: auto; }
.bs-dialog-titel { margin: 0 0 0.8rem; font-size: 1.1rem; }
.bs-dialog-inhalt { display: flex; flex-direction: column; gap: 0.6rem; }
.verlauf-dialog { width: min(56rem, 96vw); }
.verlauf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.vl-eintrag { border-left: 3px solid var(--linie-stark); padding: 0.3rem 0 0.3rem 0.7rem; }
.vl-freigabe { border-left-color: var(--gut); }
.vl-entwurf { border-left-color: var(--akzent); }
.vl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.88rem; }
.vl-zeit { color: var(--tinte-still); font-family: var(--ziffern); font-size: 0.8rem; }
.vl-anlass { font-weight: 600; }
.vl-bemerkung { color: var(--tinte-still); }
.vl-aenderungen { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; }
.vl-ziel { text-align: left; }
.vl-auslese { margin: 0.25rem 0 0; font-size: 0.86rem; }
.vl-aelter { align-self: flex-start; }
.dateiwahl-dialog { width: min(48rem, 96vw); }
.dw-pfadleiste { margin: 0; font-size: 0.88rem; }
.dw-liste { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto;
  border: 1px solid var(--linie); border-radius: 6px; }
.dw-liste li { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--linie); }
.dw-liste li:last-child { border-bottom: 0; }
.dw-datei label { display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; }
.verknuepfung-dialog .vk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.verknuepfung-dialog .vk-liste li { display: flex; align-items: center; gap: 0.4rem; }
.br-bilanzen-waehlen { margin: 0.6rem 0; }
.h1-titel { font-weight: 400; color: var(--tinte-still); font-size: 0.8em; }
/* Notizen und „geändert von" an den Zellen (§4.7): die Randmarke. */
[data-ziel].hat-notiz { box-shadow: inset 3px 0 0 var(--achtung, #d9a400); }
.ze-notiz { margin-left: 0.2rem; }
.freigabe-knoepfe { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0; }
.sperre-gruende { margin: 0.3rem 0 0.6rem; padding-left: 1.1rem; }
.sperre-trotzdem { display: flex; gap: 0.5rem; align-items: center; }
.u-wahl { margin-top: 0.5rem; }
.v-fassungen-rahmen { display: block; margin-top: 0.3rem; }
.v-fassungen-liste { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; }
.abl-workflows { margin-left: 0.5rem; font-size: 0.76rem; color: var(--tinte-still);
  border: 1px solid var(--linie); border-radius: 999px; padding: 0 0.45rem; white-space: nowrap; }
/* Kundenportal - die SES-Seite (stammdaten.js, docs/kundenportal.md §5.2):
   der Hinweis auf der Anmeldeseite, Haken in den Dialogen, zurueckgenommene
   Dokumente im Reiter. Die Kundenseite selbst hat kunde.css. */
.anmelde-kunde { margin-top: 16px; font-size: 14px; color: var(--tinte-leise); text-align: center; }
.kp-wahl { display: flex; align-items: center; gap: 8px; }
.kp-wahl input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.kp-ses h3 { font-size: 15px; margin: 18px 0 8px; }
.kp-zurueck-zeile td { color: var(--tinte-still); }