/* rahmen.css — die Oberfläche von Kontor.

   Die Idee: eine REGISTERMAPPE. Ein Kontor führt Mappen, und eine Mappe hat
   Register am Rand — Akte, Aufträge, Leistungen, Rechnungen, Unterlagen,
   Module. Der aufgeschlagene Reiter liegt am linken Rand an, wie bei einer
   Papiermappe. Zahlen stehen in Tabellenziffern auf Linien, wie in einem
   Kontobuch. Sonst ist alles ruhig: eine Tinte (Marine), eine Fläche (Weiss),
   drei Zustandsfarben, die nie allein tragen.

   Dieselben Rollennamen wie in der Werkstatt und auf den Papieren.
   Keine externe Quelle, keine Schrift aus dem Netz — systemeigen ist hier
   eine Entscheidung, keine Notlösung: das Ding läuft auf jedem Gerät ohne
   Nachladen. */

:root {
    color-scheme: light dark;
    --akzent: #1F4E79; --akzent-tief: #143A5C; --akzent-weich: #E8EFF6;
    --gut: #3E8E41; --gut-tief: #2C6A2F; --gut-weich: #E8F3E8;
    --warn: #E08A00; --warn-tief: #8A5A00; --warn-weich: #FDF3E0;
    --schlecht: #C0392B; --schlecht-tief: #8E2B20; --schlecht-weich: #FAE9E7;
    --grund: #E9EBE8; --flaeche: #FFFFFF; --flaeche-alt: #F5F6F4;
    --kontur: #D9DCD7; --kontur-stark: #B9BEB6;
    --ink: #24272A; --ink-leise: #626864; --ink-still: #8C9290;
    --linie: #E3E6E1;              /* Kontobuchlinie */
    --radius: 8px; --radius-klein: 5px;
    --schrift-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-daten: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
    --register-breite: 220px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --grund: #191B19; --flaeche: #232624; --flaeche-alt: #1E211F;
        --kontur: #343835; --kontur-stark: #4A4F4B; --linie: #2C302D;
        --ink: #E6E8E4; --ink-leise: #A5ABA6; --ink-still: #7A807C;
        --akzent-weich: #1A2C3C; --gut-weich: #16281A; --warn-weich: #2E2413; --schlecht-weich: #301A17;
    }
}
:root[data-theme="dark"] {
    --grund: #191B19; --flaeche: #232624; --flaeche-alt: #1E211F;
    --kontur: #343835; --kontur-stark: #4A4F4B; --linie: #2C302D;
    --ink: #E6E8E4; --ink-leise: #A5ABA6; --ink-still: #7A807C;
    --akzent-weich: #1A2C3C; --gut-weich: #16281A; --warn-weich: #2E2413; --schlecht-weich: #301A17;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund, #E9EBE8); color: var(--ink, #24272A);
       font-family: var(--schrift-ui); font-size: 15px; line-height: 1.5; }
a { color: var(--akzent, #1F4E79); text-underline-offset: 2px; }
h1 { font-size: 24px; letter-spacing: -.015em; margin: 0; }
h2 { font-size: 15px; letter-spacing: -.005em; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 6px; }
code { font-family: var(--schrift-daten); font-size: 12.5px; }
.leise { color: var(--ink-leise, #626864); }
.eyebrow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
           color: var(--ink-still, #8C9290); font-weight: 600; }

/* --- Bedienelemente: Knöpfe TUN, Verweise FÜHREN ----------------------
   Alles Klickbare ist nicht markierbar und reagiert nicht auf langes
   Drücken: sonst klappt auf dem Tablet beim Antippen die Wörterbuch- oder
   Nachschlage-Blase des Systems auf, statt dass der Knopf wirkt. */
.knopf, .knopf--klein, .wege a, .reiter a, summary, .aktion-auf {
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    touch-action: manipulation;
}
.knopf { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
         border: 1px solid var(--kontur-stark, #B9BEB6); background: var(--flaeche, #fff);
         color: var(--ink, #24272A); font: inherit; font-size: 14px; font-weight: 500;
         min-height: 38px; padding: 0 14px; border-radius: var(--radius-klein, 5px);
         cursor: pointer; text-decoration: none; white-space: nowrap; }
.knopf:hover { background: var(--flaeche-alt, #F5F6F4); }
.knopf--haupt { background: var(--akzent, #1F4E79); border-color: var(--akzent, #1F4E79); color: #fff; font-weight: 600; }
.knopf--haupt:hover { background: var(--akzent-tief, #143A5C); }
.knopf--symbol { min-width: 38px; padding: 0 10px; }
.knopf--klein { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px;
                font-size: 13px; font-weight: 500; border: 1px solid var(--kontur-stark, #B9BEB6);
                border-radius: var(--radius-klein, 5px); background: var(--flaeche, #fff);
                color: var(--ink, #24272A); cursor: pointer; text-decoration: none; white-space: nowrap; }
.knopf--klein:hover { background: var(--flaeche-alt, #F5F6F4); }
/* Was ein Verweis tut, steht dran: ↗ neues Fenster, ↓ herunterladen. */
.neues-fenster::after { content: "\2197"; font-size: .85em; opacity: .7; }
.laden::after { content: "\2193"; font-size: .9em; opacity: .7; }
@media (pointer: coarse) { .knopf { min-height: 44px; } .knopf--symbol { min-width: 44px; } .knopf--klein { min-height: 38px; } }

:focus-visible { outline: 2px solid var(--akzent, #1F4E79); outline-offset: 2px; border-radius: 3px; }
.eingabe:focus-visible { outline-offset: 0; }

.eingabe { width: 100%; font: inherit; font-size: 16px; min-height: 40px; padding: 8px 10px;
           border: 1px solid var(--kontur-stark, #B9BEB6); border-radius: var(--radius-klein, 5px);
           background: var(--flaeche, #fff); color: var(--ink, #24272A); }
.feld { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.feld > label { font-size: 12.5px; color: var(--ink-leise, #626864); }
.feld--schalter { justify-content: flex-end; }
.feld--schalter label { display: flex; align-items: center; gap: 7px; font-size: 14px; min-height: 40px; }
.feld--schalter input { width: 18px; height: 18px; }

/* --- Kopfleiste --------------------------------------------------------- */
.kopf { display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 56px;
        background: var(--flaeche, #fff); border-bottom: 1px solid var(--kontur, #D9DCD7);
        position: sticky; top: 0; z-index: 5; }
.kopf .marke { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px;
               letter-spacing: -.01em; text-decoration: none; color: var(--ink, #24272A); }
.marke-zeichen { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
                 background: var(--akzent, #1F4E79); color: #fff; font-family: var(--schrift-daten);
                 font-weight: 700; font-size: 15px; }
.kopf .fueller { flex: 1 1 auto; }
.kopf form { margin: 0; }
.wege { display: flex; gap: 2px; height: 100%; }
.wege a { display: inline-flex; align-items: center; padding: 0 11px; height: 56px; text-decoration: none;
          color: var(--ink-leise, #626864); font-size: 14.5px; border-bottom: 2px solid transparent; }
.wege a:hover { color: var(--ink, #24272A); }
.wege a[aria-current="page"] { color: var(--akzent-tief, #143A5C); font-weight: 600;
                               border-bottom-color: var(--akzent, #1F4E79); }

/* --- Die Registermappe --------------------------------------------------- */
.mappe { max-width: 1180px; margin: 0 auto; display: grid;
         grid-template-columns: var(--register-breite, 220px) minmax(0, 1fr); gap: 0 24px; padding: 0 16px; }
/* Die Reiterleiste scrollt fuer sich. overscroll-behavior haelt das Scrollen
   in ihr fest: wer ueber der Leiste am Ende ankommt, schiebt nicht den
   Haupttext weiter. Vom Nutzer am 20.09.2026 am langen Leitfaden gemeldet. */
.register { position: sticky; top: 56px; align-self: start; padding: 20px 0 20px;
            max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; }
.register-kopf { padding: 0 0 14px 14px; border-bottom: 1px solid var(--kontur, #D9DCD7); margin-bottom: 8px; }
.register-kopf strong { display: block; font-size: 15px; line-height: 1.3; margin: 2px 0 6px; }
.reiter { display: flex; flex-direction: column; gap: 2px; }
/* Eine Gruppenueberschrift in der Reiterleiste. Kein Link, kein Ziel -
   sie ordnet nur. Mit fuenfzehn Reitern untereinander sucht man sonst. */
.reitergruppe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
                color: var(--ink-leise, #666B65); padding: 12px 14px 3px; }
.reiter > .reitergruppe:first-child, .panelwege > .reitergruppe:first-child { padding-top: 2px; }
.reiter a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; text-decoration: none;
            color: var(--ink-leise, #626864); font-size: 14.5px; border-left: 3px solid transparent;
            border-radius: 0 var(--radius-klein, 5px) var(--radius-klein, 5px) 0; }
.reiter a:hover { background: var(--flaeche, #fff); color: var(--ink, #24272A); }
/* Der aufgeschlagene Reiter liegt am Rand an. */
.reiter a[aria-current="page"] { background: var(--flaeche, #fff); color: var(--akzent-tief, #143A5C);
                                 font-weight: 600; border-left-color: var(--akzent, #1F4E79);
                                 box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.inhalt { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.inhalt--mappe { max-width: none; margin: 0; padding-left: 0; }
.mitte { display: flex; align-items: center; justify-content: center; padding: 60px 16px; }
.fuss { max-width: 1100px; margin: 0 auto; padding: 0 16px 30px; font-size: 12px; color: var(--ink-still, #8C9290); }

/* --- Karten und Kopfzeilen --------------------------------------------- */
.karte { background: var(--flaeche, #fff); border: 1px solid var(--kontur, #D9DCD7);
         border-radius: var(--radius, 8px); padding: 16px 18px; margin: 0 0 14px; overflow-x: auto; }
.kartenkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kartenkopf h2 { margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kartenkopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
/* Die Akte: links die Stammdaten (kurze Paare), rechts die Ansprechpartner
   (eine Tabelle mit Kontaktdaten). Halbe-halbe liess rechts die Spalten
   brechen und links Luft stehen. */
.spalten--drittel { grid-template-columns: minmax(280px, 1fr) minmax(320px, 2fr); }
@media (max-width: 860px) { .spalten--drittel { grid-template-columns: 1fr; } }
.spalten > .karte { margin: 0 0 14px; }
.leer { color: var(--ink-leise, #626864); text-align: center; padding: 22px; }
.gross { font-size: 26px; font-weight: 700; font-family: var(--schrift-daten); margin: 4px 0; font-variant-numeric: tabular-nums; }
.satz { display: inline-block; background: var(--flaeche-alt, #F5F6F4); border: 1px solid var(--kontur, #D9DCD7);
        border-radius: 999px; padding: 2px 10px; font-size: 13.5px; }

.kopfzeile > p { flex-basis: 100%; margin: 2px 0 0; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
             margin: 6px 0 16px; min-height: 40px; }
.kopfzeile h1 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.kopfzeile > span:empty { display: none; }
.kopfaktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.nummer { font-family: var(--schrift-daten); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.datentabelle td.schmal > span.leise { display: block; white-space: nowrap; }

.kennzahlen { display: flex; gap: 12px; flex-wrap: wrap; }
.kennzahl { background: var(--flaeche, #fff); border: 1px solid var(--kontur, #D9DCD7);
            border-radius: var(--radius, 8px); padding: 8px 14px; min-width: 130px; }
.kennzahl .wert { display: block; font-size: 20px; font-weight: 700; font-family: var(--schrift-daten); font-variant-numeric: tabular-nums; }
.kennzahl .bez { display: block; font-size: 12px; color: var(--ink-leise, #626864); }
.kennzahl--warn { border-color: var(--warn, #E08A00); background: var(--warn-weich, #FDF3E0); }

/* --- Tabellen: das Kontobuch ------------------------------------------- */
.datentabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.datentabelle th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
                   color: var(--ink-still, #8C9290); border-bottom: 1px solid var(--kontur-stark, #B9BEB6);
                   padding: 6px 8px; font-weight: 600; white-space: nowrap; }
.datentabelle td { padding: 8px; border-bottom: 1px solid var(--linie, #E3E6E1); vertical-align: top; }
/* Feste Breiten fuer die Spalten, die immer dasselbe tragen. Ohne sie
   verhandelt jede Tabelle ihre Spalten neu, und untereinander stehende
   Tabellen haben verschiedene Raster - auch wenn sie dasselbe zeigen. */
.datentabelle .sp-stufe  { width: 58px; }
.datentabelle .sp-datum  { width: 104px; }
.datentabelle .sp-wer    { width: 132px; }
.datentabelle .sp-art    { width: 120px; }
.datentabelle .sp-stand  { width: 116px; }
.datentabelle .sp-knopf  { width: 340px; white-space: nowrap; text-align: right; }
.datentabelle .sp-nr      { width: 92px; }
.datentabelle .sp-kuerzel { width: 68px; }
.datentabelle .sp-einheit { width: 104px; }
.datentabelle .sp-satz    { width: 112px; }
/* Die beiden Textspalten teilen sich, was uebrig bleibt - sie tragen das,
   was auf der Rechnung steht, und brauchen den Platz am dringendsten. */
.datentabelle .sp-text    { width: 32%; }
/* "2 Leistungen 1 Rechnungen" stand als eine nowrap-Zeile da und nahm den
   Textspalten 150 Pixel weg. Frei umbrechen lassen war schlimmer: dann stand
   dort dreizeilig "2 / Leistungen / 1 / Rechnungen" und die ganze Zeile wuchs
   mit. Jetzt zwei Zeilen, jede fuer sich unzerbrechlich. */
.datentabelle .sp-belegt  { width: 112px; white-space: normal; }
.datentabelle .sp-belegt span { display: block; white-space: nowrap; }

/* Die Mindestbreite haengt am FELD, nicht an der Spalte: bei table-layout
   auto ist min-width auf einer Zelle nur ein Vorschlag, und die Prozentbreite
   der Textspalten quetschte Einheit und Satz auf "Stunc" und "1!" zusammen.
   Ein Eingabefeld mit min-width zwingt die Spalte dagegen auseinander. */
.datentabelle .sp-nr .eingabe      { min-width: 72px; }
.datentabelle .sp-einheit .eingabe { min-width: 84px; }
.datentabelle .sp-satz .eingabe    { min-width: 92px; }

/* Eine Zeile aus Eingabefeldern: die Felder sitzen auf einer Linie, auch
   wenn eines kompakter ist als das andere. Bei vertical-align:top haengt
   ein 32 Pixel hohes Feld sonst ueber einem 40 Pixel hohen. */
.datentabelle--felder td { vertical-align: middle; }
@media (max-width: 900px) { .datentabelle .sp-knopf { width: auto; } }
.datentabelle tbody tr:last-child td { border-bottom: 0; }
.datentabelle .zahl, .datentabelle th.zahl { text-align: right; font-family: var(--schrift-daten);
                                            font-variant-numeric: tabular-nums; white-space: nowrap; }
.datentabelle .schmal { width: 1%; white-space: nowrap; }
.datentabelle td > strong { display: block; }

/* WARUM DAS HIER SO UMSTAENDLICH AUSSIEHT.
   Vorher stand da .datentabelle td.leise { display: inline }. Das war als
   Typografie gemeint, wirkte aber auf die ZELLE: ein <td> mit display:inline
   ist keine Tabellenzelle mehr. 27 Zellen fielen damit aus dem Zeilenraster -
   Funktion beim Ansprechpartner, Uhrzeit beim Termin, Wer und Faellig bei den
   Aufgaben - und ihre Trennlinien sassen auf eigener Hoehe. Genau das hat der
   Nutzer am 20.09.2026 quer durch die Oberflaeche gemeldet.
   Jetzt: .leise faerbt und verkleinert NUR. Ein span im td wird zur zweiten
   Zeile, die Zelle selbst bleibt Zelle. */
.datentabelle .leise { color: var(--ink-leise, #626864); font-size: 12.5px; }
.datentabelle td > span.leise, .datentabelle td > div.leise { display: block; }
.datentabelle td.leise { display: table-cell; }
.unterzeile td { background: var(--flaeche-alt, #F5F6F4); }
.toepfe td { font-size: 15px; }
.toepfe .zwischen td { border-top: 1px solid var(--kontur-stark, #B9BEB6); }
.toepfe .endsumme td { border-top: 2px solid var(--kontur-stark, #B9BEB6); font-size: 17px; }
.datentabelle .endsumme td { border-top: 2px solid var(--kontur-stark, #B9BEB6); }
.punkte { margin: 6px 0; padding-left: 20px; font-size: 13.5px; }
.punkte li { margin: 3px 0; }
.paare { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.paare dt { color: var(--ink-leise, #626864); }
.paare dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
/* In einer schmalen Karte hat ein Wert neben seiner Beschriftung keinen
   Platz mehr - eine E-Mail brach dann mitten im Wort um. Dort stehen
   Beschriftung und Wert untereinander, und der Wert hat die ganze Breite.
   Container-Abfrage, nicht Bildschirmbreite: massgeblich ist die Karte. */
@container (max-width: 360px) {
    .paare { grid-template-columns: 1fr; gap: 0; }
    .paare dt { margin-top: 8px; font-size: 12.5px; }
    .paare dt:first-child { margin-top: 0; }
}
.betrag { font-family: var(--schrift-daten); font-weight: 700; font-variant-numeric: tabular-nums; }
.betrag--warn { color: var(--schlecht-tief, #8E2B20); }

/* --- Aktionsfeld einer Zeile ------------------------------------------- */
.handeln { text-align: right; }
.aktionszeile td { background: var(--flaeche-alt, #F5F6F4); border-bottom: 1px solid var(--kontur, #D9DCD7) !important;
                   padding: 12px 8px 14px; }
/* Das Aktionsfeld ist so breit wie die sichtbare Karte, nicht wie die
   Tabelle: scrollt das Rechnungsbuch seitlich, bleibt es links kleben. */
.karte { container-type: inline-size; }
.aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
            position: sticky; left: 0; width: calc(100cqw - 52px); }
.handlung { display: flex; flex-direction: column; gap: 7px; padding: 12px; margin: 0;
            border: 1px solid var(--kontur, #D9DCD7); border-radius: var(--radius-klein, 5px);
            background: var(--flaeche, #fff); }
.handlung h3 { margin: 0 0 2px; font-size: 14px; }
.handlung label { font-size: 12.5px; color: var(--ink-leise, #626864); display: flex; flex-direction: column; gap: 3px; }
.handlung .leise { font-size: 12.5px; margin: 0; }
.handlung--vorsicht { border-color: var(--schlecht, #C0392B); }
.handlung--vorsicht h3 { color: var(--schlecht-tief, #8E2B20); }

/* --- Plaketten, Ampel, Befunde ----------------------------------------- */
.plakette { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
            letter-spacing: .03em; border: 1px solid var(--kontur-stark, #B9BEB6);
            background: var(--flaeche-alt, #F5F6F4); color: var(--ink-leise, #626864); white-space: nowrap; }
.plakette--gut { background: var(--gut-weich); border-color: var(--gut); color: var(--gut-tief); }
.plakette--warn { background: var(--warn-weich); border-color: var(--warn); color: var(--warn-tief); }
.plakette--fehler { background: var(--schlecht-weich); border-color: var(--schlecht); color: var(--schlecht-tief); }
.ampel::before { margin-right: 4px; }
.ampel--rot::before { content: "\25CF"; } .ampel--gelb::before { content: "\25D0"; } .ampel--gruen::before { content: "\25CB"; }
.befund { margin: 10px 0; padding: 9px 12px; border-radius: var(--radius-klein, 5px); font-size: 13.5px;
          border-left: 3px solid var(--kontur-stark, #B9BEB6); background: var(--flaeche-alt, #F5F6F4); }
.befund--gut { background: var(--gut-weich); border-left-color: var(--gut); }
.befund--hinweis { background: var(--warn-weich); border-left-color: var(--warn); }
.befund--fehler { background: var(--schlecht-weich); border-left-color: var(--schlecht); }

/* --- Balken ------------------------------------------------------------- */
.kontingent { margin: 12px 0; }
.kontingentkopf { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; }
.balken { display: block; width: 100%; height: 9px; border-radius: 5px; background: var(--flaeche-alt, #F5F6F4);
          border: 1px solid var(--kontur, #D9DCD7); overflow: hidden; }
.balken-fuellung { fill: var(--akzent, #1F4E79); }
.balken--warn .balken-fuellung { fill: var(--warn, #E08A00); }
.balken--voll .balken-fuellung { fill: var(--schlecht, #C0392B); }
.abstand-oben { margin-top: 18px; }
.summentabelle { max-width: 420px; margin-left: auto; }

/* --- Filter und Erfassung --------------------------------------------- */
.filter { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filter .knopf { min-height: 40px; }
.erfassung { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; margin: 12px 0; }
.erfassung .feld--breit { grid-column: 1 / -1; }
.erfassung button { grid-column: 1 / -1; justify-self: start; }

/* --- Anmeldung --------------------------------------------------------- */
.anmeldung { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 6px; }
.anmeldung h1 { margin-bottom: 0; }
.anmeldung .leise { font-size: 13.5px; margin: 0 0 10px; }
.anmeldung label { font-size: 12.5px; color: var(--ink-leise, #626864); margin-top: 6px; }
.anmeldung .knopf { margin-top: 14px; }

/* --- Aufklappbares und Rohtext ----------------------------------------- */
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "\25BE"; color: var(--ink-still, #8C9290); margin-left: auto; }
details[open] > summary::after { content: "\25B4"; }
details > summary .leise { font-size: 12.5px; }
.mdtext { white-space: pre-wrap; font-family: var(--schrift-daten); font-size: 12.5px; line-height: 1.55;
          margin: 12px 0 0; color: var(--ink-leise, #626864); }

/* --- Gesetztes Markdown -------------------------------------------------
   Kundenwiki, Chronik, Werkstattverweis und jede .md-Datei in den
   Unterlagen. Bis 19.09.2026 stand das alles als Rohtext in einem <pre>;
   Tabellen waren Pfeifenzeichen, Überschriften Rauten.

   Die Maße sind auf LESEN gestellt, nicht auf Dichte: 15,5 px auf 1,65
   Zeilenhöhe, Zeilenlänge auf 72 Zeichen begrenzt. Eine Akte wird am Stück
   gelesen, eine Tabelle überflogen — das sind zwei verschiedene Raster, und
   deshalb ist dies nicht die Datentabelle. */
.md { font-size: 15.5px; line-height: 1.65; color: var(--ink, #24272A); margin-top: 14px; }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md .md-p, .md .md-liste, .md .md-zitat { max-width: 72ch; }

.md .md-h { letter-spacing: -.01em; line-height: 1.3; scroll-margin-top: 70px;
            margin: 1.6em 0 .5em; font-weight: 650; }
.md h1.md-h { font-size: 21px; padding-bottom: 7px; border-bottom: 1px solid var(--kontur, #D9DCD7); }
.md h2.md-h { font-size: 17.5px; padding-bottom: 5px; border-bottom: 1px solid var(--linie, #E3E6E1); }
.md h3.md-h { font-size: 15.5px; }
.md h4.md-h, .md h5.md-h, .md h6.md-h { font-size: 14.5px; color: var(--ink-leise, #626864); }

.md .md-p { margin: 0 0 .85em; }
.md .md-liste { margin: 0 0 .85em; padding-left: 1.4em; }
.md .md-liste .md-liste { margin: .3em 0 .2em; }
.md .md-liste li { margin: .25em 0; }
.md .md-liste li::marker { color: var(--ink-still, #8C9290); }

/* Die Haken aus der Roadmap: erledigt, in Arbeit, offen. */
.md .md-haken { display: inline-block; width: 1.25em; margin-left: -.15em;
                font-family: var(--schrift-daten); font-weight: 700; }
.md .md-haken--fertig { color: var(--gut, #3E8E41); }
.md .md-haken--arbeit { color: var(--warn, #E08A00); }
.md .md-haken--offen  { color: var(--ink-still, #8C9290); }
.md .md-punkt--haken { list-style: none; margin-left: -1.35em; }

/* --- Themenplakette -----------------------------------------------------
   Worum ein Vorgang ging. Die Farbe traegt NIE allein: daneben steht immer
   der Name oder das Kuerzel — dieselbe Regel wie bei den Ampeln. */
.thema { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .01em;
         padding: 2px 8px; border-radius: 999px; border: 1px solid var(--kontur-stark, #B9BEB6);
         background: var(--flaeche-alt, #F5F6F4); color: var(--ink-leise, #626864);
         white-space: nowrap; }
.thema--akzent   { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent-tief); }
.thema--gut      { background: var(--gut-weich); border-color: var(--gut); color: var(--gut-tief); }
.thema--warn     { background: var(--warn-weich); border-color: var(--warn); color: var(--warn-tief); }
.thema--schlecht { background: var(--schlecht-weich); border-color: var(--schlecht); color: var(--schlecht-tief); }
.thema--neutral  { background: var(--flaeche-alt); border-color: var(--kontur-stark); color: var(--ink-leise); }

/* Ein Formular, das nur einen Knopf traegt, soll in der Zeile stehen wie ein
   Verweis — sonst bricht es die Knopfreihe in den Unterlagen um. */
.mitlaufend { display: inline; margin: 0; }

/* Die Terminnotiz in der Uebersicht: eine Zeile, die sagt, wann es mit
   diesem Kunden weitergeht. Sie steht bewusst UNTER dem Kartenkopf und
   nicht daneben - daneben haette sie mit den offenen Posten um den Platz
   gerungen, und auf dem Telefon waere eines von beidem umgebrochen. */
.terminnotiz { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
               margin: 10px 0 0; padding: 8px 11px; font-size: 13.5px;
               background: var(--flaeche-alt, #F5F6F4);
               border-radius: var(--radius-klein, 5px); }
.terminnotiz .leise { font-size: 13px; }

/* Ein Zitat ist im Bürogebrauch fast immer ein Vermerk ("Testdaten — frei
   erfunden") oder ein wörtlicher Satz des Kunden. Beides soll auffallen. */
.md .md-zitat { margin: 0 0 .9em; padding: .55em 0 .55em 1em; color: var(--ink-leise, #626864);
                border-left: 3px solid var(--kontur-stark, #B9BEB6); }
.md .md-zitat > *:last-child { margin-bottom: 0; }

.md .md-codewort { background: var(--flaeche-alt, #F5F6F4); border: 1px solid var(--linie, #E3E6E1);
                   border-radius: 4px; padding: .1em .35em; font-size: .87em;
                   overflow-wrap: anywhere; }
.md .md-code { background: var(--flaeche-alt, #F5F6F4); border: 1px solid var(--kontur, #D9DCD7);
               border-radius: var(--radius-klein, 5px); padding: 11px 13px; margin: 0 0 .9em;
               overflow-x: auto; font-family: var(--schrift-daten); font-size: 12.5px; line-height: 1.5; }
.md .md-code code { background: none; border: 0; padding: 0; font-size: inherit; }

.md .md-trenner { border: 0; border-top: 1px solid var(--kontur, #D9DCD7); margin: 1.8em 0; }
.md .md-bild { max-width: 100%; height: auto; border-radius: var(--radius-klein, 5px); }
.md a { overflow-wrap: anywhere; }

/* --- Inhaltsverzeichnis, Brotkrumen, Blaettern -------------------------
   Wiki und Chronik werden nicht mehr am Stueck gezeigt, sondern Abschnitt
   fuer Abschnitt. Das Verzeichnis ist die Eingangstuer; ohne sichtbare
   Zeilenzahl waere nicht zu ahnen, was hinter einem Eintrag steckt. */

.verzeichnis { list-style: none; margin: 4px 0 0; padding: 0; }
.verzeichnis--nummeriert { list-style: decimal; padding-left: 26px; }
.verzeichnis li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
                  padding: 6px 0; border-bottom: 1px solid var(--linie, #EDEFEB); }
.verzeichnis li:last-child { border-bottom: 0; }
.verzeichnis--nummeriert li { display: list-item; }
.verzeichnis--nummeriert li a { margin-right: 10px; }
.verzeichnis a { text-decoration: none; font-weight: 600; }
.verzeichnis a:hover { text-decoration: underline; }
.verzeichnis .leise { font-size: 12.5px; white-space: nowrap; }

.brotkrumen { margin: 0 0 12px; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }

.blaettern { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; flex-wrap: wrap; }
.blaettern .knopf { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
    /* Zwei Knoepfe nebeneinander mit langen Ueberschriften ergeben am Handy
       zwei Wortfetzen. Untereinander passt der ganze Titel hin. */
    .blaettern { flex-direction: column; }
    .blaettern .knopf { max-width: none; }
}

/* Eine Tabelle darf breiter sein als der Lesetext und scrollt notfalls
   für sich — die Seite selbst scrollt nie waagrecht. */
.md .md-tabellenrahmen { overflow-x: auto; margin: 0 0 1em; -webkit-overflow-scrolling: touch; }
.md .md-tabelle { border-collapse: collapse; width: 100%; font-size: 14px; }
.md .md-tabelle th, .md .md-tabelle td { text-align: left; vertical-align: top;
                                         padding: 7px 12px 7px 0; border-bottom: 1px solid var(--linie, #E3E6E1); }
.md .md-tabelle th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
                     color: var(--ink-still, #8C9290); font-weight: 600; white-space: nowrap;
                     border-bottom-color: var(--kontur-stark, #B9BEB6); }
.md .md-tabelle tr:last-child td { border-bottom: 0; }

@media (max-width: 700px) { .md { font-size: 15px; } .md h1.md-h { font-size: 19px; } }

/* --- Tablet quer und schmaler: das Register wird zur Leiste ------------
   Unter 1040 px reicht der Platz neben der Registerspalte nicht mehr fuer
   die sieben Spalten des Rechnungsbuchs; die Reiter wandern nach oben. */
@media (max-width: 1040px) {
    .mappe { display: block; padding: 0 12px; }
    .register { position: static; padding: 12px 0 0; max-height: none; overflow: visible; }
    .register-kopf { padding-left: 0; }
    .reiter { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
    /* Quer gescrollt nimmt eine Ueberschrift nur Platz weg; die Ordnung
       bleibt trotzdem, weil die Reihenfolge dieselbe ist. */
    .reiter .reitergruppe { display: none; }
    .reiter a { border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--radius-klein, 5px) var(--radius-klein, 5px) 0 0; padding: 0 12px; }
    .reiter a[aria-current="page"] { border-bottom-color: var(--akzent, #1F4E79); box-shadow: none; }
    .inhalt--mappe { padding: 12px 0 60px; }
}
@media (max-width: 860px) {
    .kopf { padding: 0 12px; gap: 10px; }
    .wege a { padding: 0 8px; font-size: 14px; }
}

.befehlssatz { display: block; font-family: var(--schrift-daten); font-size: 14px;
               line-height: 1.4; }
/* Wo ein Satz hingehoert: gesprochen, geklickt oder getippt. Dieselben
   Farbrollen wie ueberall - keine neuen Farben fuer eine neue Seite. */
.plakette--chat { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent-tief); }
.plakette--kontor, .plakette--beides { background: var(--gut-weich); border-color: var(--gut); color: var(--gut-tief); }
.plakette--terminal { background: var(--flaeche-alt); border-color: var(--kontur-stark); color: var(--ink-leise); }

/* Auf dem Telefon sind drei Spalten nebeneinander unlesbar. Die Zeile wird
   dort zum Block: Satz, Wirkung, Ort - untereinander statt gequetscht. Eine
   Nachschlageliste, die man seitwaerts schieben muss, schlaegt niemand nach. */
@media (max-width: 700px) {
    .befehlstabelle, .befehlstabelle tbody, .befehlstabelle tr, .befehlstabelle td {
        display: block; width: auto; }
    .befehlstabelle tr { padding: 10px 0; border-bottom: 1px solid var(--linie, #E6E8E4); }
    .befehlstabelle tr:last-child { border-bottom: 0; }
    .befehlstabelle td { padding: 2px 0; border: 0; }
    .befehlstabelle td.schmal { padding-top: 6px; }
}

/* --- Das Seitenpanel -----------------------------------------------------
   Auf dem Handy passen sechs Wege plus sechs Kundenreiter nicht in eine
   Leiste. Beides wandert hinter einen Griff, der nur dort steht.

   Der Griff erscheint NUR mit Skript (die Klasse "js" setzt rahmen.js).
   Ohne Skript liesse sich das Panel nicht oeffnen - dann bleibt die Leiste
   stehen, wie sie vorher war, und alles ist erreichbar. */
.griff { display: none; }
.panel, .panelgrund { display: none; }
.panelwege { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.panelwege a { display: flex; align-items: center; min-height: 46px; padding: 0 14px;
               text-decoration: none; color: var(--ink-leise, #626864); font-size: 15px;
               border-radius: var(--radius-klein, 5px); border-left: 3px solid transparent; }
.panelwege a[aria-current="page"] { background: var(--grund, #F4F6F3); color: var(--akzent-tief, #143A5C);
                                    font-weight: 600; border-left-color: var(--akzent, #1F4E79); }
.panelkunde { padding: 14px 24px 2px; margin-top: 8px; border-top: 1px solid var(--kontur, #D9DCD7); }
.panelkunde strong { display: block; font-size: 15px; line-height: 1.3; margin-top: 2px; }

@media (max-width: 860px) {
    .js .griff { display: inline-grid; }
    .js .kopf .wege { display: none; }
    .js .panel { display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
                 width: min(320px, 84vw); padding: 12px 0 28px; overflow-y: auto;
                 overscroll-behavior: contain;
                 background: var(--flaeche, #fff); border-right: 1px solid var(--kontur, #D9DCD7);
                 box-shadow: 2px 0 14px rgba(0,0,0,.18);
                 transform: translateX(-100%); transition: transform .18s ease; }
    .js .panelgrund { display: block; position: fixed; inset: 0; z-index: 25;
                      background: rgba(0,0,0,.38); opacity: 0; pointer-events: none;
                      transition: opacity .18s ease; }
    body.panel-auf { overflow: hidden; }
    body.panel-auf .panel { transform: none; }
    body.panel-auf .panelgrund { opacity: 1; pointer-events: auto; }
    /* Die Reiter des Kunden stehen jetzt im Panel. Der Name bleibt oben
       stehen - er sagt, wessen Mappe offen ist. */
    .js .register .reiter { display: none; }
    .js .register { padding-bottom: 0; }
}
@media (max-width: 560px) {
    .wege { overflow-x: auto; }
    .marke-wort { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Leitfaden: Fragen, Mitschrift, Sicherungsstand ------------------- */
.frage { margin: 0 0 14px; }
.frage > label, .frage > .frage-text { display: block; font-size: 14px; font-weight: 600;
    margin-bottom: 2px; }
.frage .pflicht { color: var(--schlecht, #C0392B); }
.frage .hilfe { font-size: 12.5px; font-style: italic; color: var(--ink-leise, #626864);
    margin: 0 0 4px; }
.wahl { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wahl label { display: flex; align-items: center; gap: 6px; font-size: 14px;
    font-weight: 400; min-height: 34px; }
.wahl input { width: 17px; height: 17px; }
.sicherungsstand { font-size: 13px; color: var(--ink-leise, #626864); }
.sicherungsstand--gut { color: var(--gut, #2E7D32); }
.sicherungsstand--offen { color: var(--ink-leise, #626864); }
.sicherungsstand--schlecht { color: var(--schlecht, #C0392B); font-weight: 600; }
.notiz-abschnitt { margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--kontur, #D9DCD7); }

/* --------------------------------------------------------------------------
   Das Monatsblatt.

   WARUM EINE TABELLE. Ein Monat IST ein Raster aus Wochen und Wochentagen;
   eine Tabelle sagt das auch dem Vorleseprogramm. Als div-Gitter waere es
   dasselbe Bild ohne diese Auskunft.

   AM HANDY WIRD DARAUS EINE LISTE. Sieben Spalten auf 400 Pixel ergeben
   Spalten von 50 Pixel — darin steht kein Termin. Unter 760 Pixel klappt das
   Raster deshalb auf: jeder Tag eine Zeile, und Tage ohne Inhalt fallen ganz
   weg. Wer am Handy schaut, will wissen, wann etwas ist, nicht wie der Monat
   aussieht.
   -------------------------------------------------------------------------- */

.monat-huelle { overflow-x: auto; }

.monat {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    font-size: 13px; min-width: 640px;
}
.monat th {
    text-align: left; font-weight: 600; color: var(--ink-leise);
    padding: 4px 6px; border-bottom: 1px solid var(--kontur-stark);
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.monat-kw {
    width: 34px; color: var(--ink-still); font-size: 11px;
    text-align: right; padding: 6px 6px 0 0; vertical-align: top;
    font-family: var(--schrift-daten);
}
.monat-tag {
    border: 1px solid var(--kontur); vertical-align: top;
    padding: 4px; height: 92px; background: var(--flaeche);
}
.monat-tag--we    { background: var(--flaeche-alt); }
.monat-tag--frei  { background: var(--gut-weich); }
.monat-tag--fremd { background: var(--grund); }
.monat-tag--fremd .monat-nummer { color: var(--ink-still); }
.monat-tag--gewesen .monat-nummer { color: var(--ink-still); }
.monat-tag--heute { outline: 2px solid var(--akzent); outline-offset: -2px; }
.monat-tag--heute .monat-nummer { color: var(--akzent); font-weight: 700; }

.monat-kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 4px; margin-bottom: 3px;
}
.monat-nummer { font-weight: 600; font-variant-numeric: tabular-nums; }
.monat-datum  { display: none; }
.monat-frei {
    font-size: 11px; color: var(--gut-tief); font-family: var(--schrift-daten);
    white-space: nowrap;
}
.monat-feiertag {
    font-size: 11px; color: var(--gut-tief); margin-bottom: 2px;
    overflow-wrap: anywhere;
}

.monat-termin {
    display: block; border-radius: var(--radius-klein);
    padding: 2px 4px; margin-bottom: 2px; font-size: 12px;
    overflow-wrap: anywhere; text-decoration: none;
    border-left: 3px solid transparent;
}
.monat-termin--kunde {
    background: var(--akzent-weich); color: var(--ink);
    border-left-color: var(--akzent);
}
.monat-termin--kunde:hover { text-decoration: underline; }
.monat-termin--privat {
    background: var(--flaeche-alt); color: var(--ink-leise);
    border-left-color: var(--kontur-stark);
}
.monat-uhr { font-family: var(--schrift-daten); font-size: 11px; color: var(--ink-leise); }

.monat-blaettern { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 760px) {
    .monat, .monat tbody, .monat tr, .monat td { display: block; width: auto; }
    .monat { min-width: 0; }
    /* td.monat-kw, nicht nur .monat-kw: die Blockregel eine Zeile darueber
       ist spezifischer und liesse die Kalenderwoche sonst als leere Zeile
       stehen. */
    .monat thead, .monat td.monat-kw { display: none; }
    .monat-tag {
        height: auto; border: 0; border-bottom: 1px solid var(--linie);
        padding: 8px 2px;
    }
    /* Ein leerer Tag ist am Handy nur Weg zum Scrollen. Tage aus dem
       Nachbarmonat gehoeren hier gar nicht hin — die Woche muss nicht
       vollstaendig sein, wenn es kein Raster mehr gibt. */
    .monat-tag:not(:has(.monat-termin)):not(:has(.monat-feiertag)) { display: none; }
    .monat-tag--fremd { display: none; }
    .monat-tag--we, .monat-tag--frei { background: none; }
    .monat-tag--heute { outline: 0; border-left: 3px solid var(--akzent); padding-left: 8px; }
    /* Die Nummer allein sagt am Handy nichts — ohne Spaltenkopf fehlt der
       Wochentag, und genau der entscheidet, ob ein Abend infrage kommt. */
    .monat-nummer { display: none; }
    .monat-datum { display: inline; font-weight: 600; }
    .monat-kopf { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
}

/* --- Checkliste: Filterleiste, Stufen, aufklappbare Aufgaben ------------
   Ergaenzt 20.09.2026. Die Aufgabenliste stand vorher als breite Tabelle da:
   jede Zeile trug Beschreibung, Notiz, Herkunft und drei Knoepfe, und schon
   bei sieben Befunden aus einem Vertrag war der Schirm voll. Jetzt ist eine
   Aufgabe EINE Zeile, die sich aufklappen laesst; die Farbe sagt, wie
   dringend sie ist. */
.filterleiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px;
        border-radius: 999px; border: 1px solid var(--kontur-stark, #B9BEB6);
        background: var(--flaeche, #fff); color: var(--ink-leise, #626864);
        font-size: 13px; font-weight: 500; text-decoration: none; }
.chip:hover { background: var(--flaeche-alt, #F5F6F4); color: var(--ink, #24272A); }
.chipzahl { font-variant-numeric: tabular-nums; font-size: 12px; padding: 0 6px; border-radius: 999px;
            background: var(--flaeche-alt, #F5F6F4); border: 1px solid var(--kontur, #D9DCD7); }
.chip--an { background: var(--akzent, #1F4E79); border-color: var(--akzent, #1F4E79); color: #fff; }
.chip--an .chipzahl { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.chip--rot { border-color: var(--schlecht, #C0392B); color: var(--schlecht-tief, #8E2B20); }
.chip--rot.chip--an { background: var(--schlecht, #C0392B); border-color: var(--schlecht, #C0392B); color: #fff; }
.chip--gelb { border-color: var(--warn, #E08A00); color: var(--warn-tief, #8A5A00); }
.chip--gelb.chip--an { background: var(--warn, #E08A00); border-color: var(--warn, #E08A00); color: #fff; }
.chip--gruen { border-color: var(--gut, #3E8E41); color: var(--gut-tief, #2C6A2F); }
.chip--gruen.chip--an { background: var(--gut, #3E8E41); border-color: var(--gut, #3E8E41); color: #fff; }
.chipwahl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.chipwahl label { font-size: 12.5px; }
.eingabe--schmal { min-height: 32px; padding: 2px 8px; font-size: 13px; width: auto; }
/* In einer Tabelle fuellt es die Spalte. Draussen (der Filter ueber der
   Checkliste) behaelt es seine Inhaltsbreite. */
.datentabelle .eingabe--schmal { width: 100%; }
/* Laeuft ein Skript, setzt es die Auswahl selbst ab - der Knopf daneben
   waere dann nur noch im Weg. Ohne Skript bleibt er stehen. */
.js .nurohnejs { display: none; }
.nurvorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Eine Aufgabe: zugeklappt eine Zeile, aufgeklappt das ganze Formular. */
.aufgabe { border: 1px solid var(--kontur, #D9DCD7); border-left: 4px solid var(--kontur-stark, #B9BEB6);
           border-radius: var(--radius-klein, 5px); background: var(--flaeche, #fff);
           margin: 6px 0; padding: 7px 12px; }
.aufgabe > summary { gap: 10px; flex-wrap: wrap; }
.aufgabe-titel { font-weight: 600; flex: 1 1 240px; }
.aufgabe-marken { display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.aufgabe-inhalt { border-top: 1px solid var(--kontur, #D9DCD7); margin-top: 8px; padding-top: 4px; }
.aufgabe-inhalt p { font-size: 13.5px; margin: 8px 0 0; }
.aufgabe:target { outline: 2px solid var(--akzent, #1F4E79); outline-offset: 2px; }

/* Die drei Stufen. Rot ist rot, gelb ist gelb, gruen ist gruen - an der
   Kante der Zeile, am Punkt davor und an der Stufenwahl im Formular. */
.punkt { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto;
         background: var(--gut, #3E8E41); border: 1px solid var(--gut-tief, #2C6A2F); }
.punkt--rot, .stufe--rot > summary .punkt { background: var(--schlecht, #C0392B); border-color: var(--schlecht-tief, #8E2B20); }
.punkt--gelb, .stufe--gelb > summary .punkt { background: var(--warn, #E08A00); border-color: var(--warn-tief, #8A5A00); }
.punkt--gruen, .stufe--gruen > summary .punkt { background: var(--gut, #3E8E41); border-color: var(--gut-tief, #2C6A2F); }
.stufe--rot { border-left-color: var(--schlecht, #C0392B); }
.stufe--gelb { border-left-color: var(--warn, #E08A00); }
.stufe--gruen { border-left-color: var(--gut, #3E8E41); }
.stufenwahl[data-wert="rot"] { border-color: var(--schlecht, #C0392B); color: var(--schlecht-tief, #8E2B20); }
.stufenwahl[data-wert="gelb"] { border-color: var(--warn, #E08A00); color: var(--warn-tief, #8A5A00); }
.stufenwahl[data-wert="normal"] { border-color: var(--gut, #3E8E41); color: var(--gut-tief, #2C6A2F); }