/*
    Die Oberflaeche. Alle Werte stammen aus dem Entwurf (Rechnungen.dc.html) und stehen hier als
    Marken (Custom Properties), nicht als Zahlen in den Masken: eine Farbe, die an dreissig Stellen
    steht, wird beim ersten Wunsch nach einer Aenderung an achtundzwanzig geaendert.

    Dunkel ist die Vorgabe und der einzige Zustand. Eine Umschaltung haette zwei Paletten zu pflegen
    bedeutet, und das PDF ist ohnehin hell — die Oberflaeche muss ihm nicht gleichen, sie muss aus
    demselben Haus kommen. Der Akzent #0078D4 und das dunkle #0A4D8C sind dieselben Werte wie in
    Farben.cs und im RechnungRenderer.
*/

:root {
    /* Flaechen, von hinten nach vorn */
    --grund: #16171A;   /* die Seite */
    --leiste: #101114;  /* die Seitenleiste */
    --kachel: #1D1F23;  /* Karten und Tabellen */
    --senke: #1A1C20;   /* Summenblock, Zwischenueberschriften, ruhige Kaesten */
    --feld: #141519;    /* Eingabefelder */
    --fuehrung: #23262B;/* Zeile unter dem Zeiger */

    /* Linien, von leise nach laut */
    --linie-zeile: #22252A;
    --linie-leise: #1E2024;
    --linie: #24262B;
    --linie-kachel: #2A2D32;
    --linie-feld: #2E3136;
    --linie-laut: #3A3E45;

    /* Schrift, von hell nach dunkel */
    --schrift: #E9EAEC;
    --schrift-ruhig: #C3C7CC;
    --schrift-leise: #9BA0A6;
    --schrift-zart: #8A9098;
    --schrift-fern: #7A8088;
    --schrift-marke: #6B7178;
    --schrift-platzhalter: #5C6169;

    /* Akzent */
    --akzent: #0078D4;
    --akzent-hell: #1B8AE4;
    --akzent-dunkel: #0A4D8C;
    --akzent-schrift: #EAF3FB;
    --akzent-licht: #6FB6EE;
    --verweis: #4BA3E3;
    --verweis-hell: #7CC0F0;
    --akzent-hauch: rgba(0, 120, 212, .08);
    --akzent-schleier: rgba(0, 120, 212, .13);
    --akzent-rand: rgba(0, 120, 212, .5);

    /* Zustaende */
    --gut: #6FCB6F;
    --gut-schrift: #8FD08F;
    --gut-flaeche: rgba(16, 124, 16, .09);
    --gut-rand: rgba(63, 162, 63, .45);

    --acht: #DFB760;
    --acht-flaeche: rgba(154, 103, 0, .12);
    --acht-rand: rgba(217, 166, 58, .35);

    --halt: #EF9C92;
    --halt-flaeche: rgba(196, 43, 28, .12);
    --halt-rand: rgba(232, 105, 91, .35);

    --rundung: 6px;
    --rundung-klein: 5px;
    --rundung-winzig: 4px;

    --schriftart: Roboto, Helvetica, Arial, sans-serif;
    --schriftart-zahl: "Roboto Mono", Consolas, "Courier New", monospace;

    color-scheme: dark;
}

/* ============================== Grundlagen ============================== */

html, body {
    margin: 0;
    padding: 0;
    background: var(--grund);
    color: var(--schrift);
    font: 400 14px/1.5 var(--schriftart);
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: var(--verweis); text-decoration: none; }
a:hover { color: var(--verweis-hell); text-decoration: underline; }

::selection { background: rgba(0, 120, 212, .35); }

h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: .01em; }

code {
    font-family: var(--schriftart-zahl);
    font-size: .85em;
    background: var(--feld);
    border: 1px solid var(--linie);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Zahlen laufen in einer Spalte nur untereinander, wenn jede Ziffer gleich breit ist. */
.zahl { font-family: var(--schriftart-zahl); }
.rechts { text-align: right; }

/* ============================== Die Schale ============================== */

.schale {
    display: flex;
    min-height: 100vh;
    background: var(--grund);
}

.seitenleiste {
    width: 252px;
    flex: 0 0 252px;
    background: var(--leiste);
    border-right: 1px solid var(--linie);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.inhalt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.marke {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--linie-leise);
}

.marke__zeile { display: flex; align-items: center; gap: 10px; }

.marke__zeichen {
    width: 26px;
    height: 26px;
    border-radius: var(--rundung-klein);
    background: var(--akzent-dunkel);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 12px var(--schriftart);
    color: var(--akzent-schrift);
    letter-spacing: .02em;
    flex: 0 0 26px;
}

.marke__name { font: 500 15px var(--schriftart); letter-spacing: .01em; }
.marke__zweck { font-size: 11.5px; color: var(--schrift-fern); padding-left: 36px; }

/* ------------------------------ Navigation ------------------------------ */

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    flex: 1;
    overflow: auto;
}

.nav__abschnitt {
    font: 500 10.5px var(--schriftart);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--schrift-marke);
    padding: 18px 10px 6px;
}

.nav__abschnitt:first-child { padding-top: 8px; }

.nav__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--rundung-klein);
    padding: 9px 10px;
    color: #A8AEB6;
    font: 400 13.5px var(--schriftart);
    cursor: pointer;
}

.nav__eintrag:hover { background: #1C1E22; color: var(--schrift); }

.nav__eintrag--aktiv {
    background: var(--akzent-schleier);
    border-left-color: var(--akzent);
    color: var(--akzent-schrift);
}

.nav__zaehler {
    font: 500 11px var(--schriftart);
    background: rgba(0, 120, 212, .16);
    color: var(--akzent-licht);
    border-radius: 20px;
    padding: 2px 8px;
}

/* ------------------------------ Benutzerfuss ------------------------------ */

.fuss {
    border-top: 1px solid var(--linie-leise);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fuss__zeichen {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--linie);
    border: 1px solid var(--linie-feld);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 12px var(--schriftart);
    color: var(--schrift-leise);
}

.fuss__wer { flex: 1; min-width: 0; }
.fuss__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fuss__rolle { font-size: 11px; color: var(--schrift-fern); }

/* ============================== Maskenkopf und -koerper ============================== */

.kopf {
    padding: 26px 30px 14px;
    border-bottom: 1px solid var(--linie);
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.kopf__text { flex: 1; min-width: 280px; }
.kopf__text h1 { font-size: 24px; }
.kopf__unterzeile { font-size: 13px; color: var(--schrift-zart); text-wrap: pretty; margin-top: 5px; }
.kopf__werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kopf__ueber { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }

.koerper {
    padding: 22px 30px 44px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.koerper--schmal { max-width: 900px; }
.koerper--mittel { max-width: 1020px; }

/* Zwei bis drei gleichrangige Karten nebeneinander, untereinander sobald es eng wird. */
.paare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: start;
}

/* ============================== Karten ============================== */

.kachel {
    background: var(--kachel);
    border: 1px solid var(--linie-kachel);
    border-radius: var(--rundung);
}

.kachel--gepolstert {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kachel--ruhig { background: var(--senke); border-color: var(--linie); padding: 16px 18px; }
.kachel--schlicht { overflow: hidden; }

.kachel__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--linie-kachel);
}

.kachel__titel { font: 500 14px var(--schriftart); }

/* Die kleine Grossbuchstabenzeile ueber einem Feld oder einer Karte. */
.aufschrift {
    font: 500 10.5px var(--schriftart);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--schrift-zart);
}

.beschriftung { font-size: 12px; color: var(--schrift-zart); }

.nebentext { font-size: 12px; color: var(--schrift-fern); text-wrap: pretty; }

.abschluss { border-top: 1px solid var(--linie); padding-top: 12px; }

/* ============================== Felder ============================== */

.feldsatz { display: flex; flex-direction: column; gap: 5px; }
.feldsatz--weit { grid-column: 1 / -1; }

.felderraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input.eingabe, select.eingabe, textarea.eingabe {
    background: var(--feld);
    border: 1px solid var(--linie-feld);
    border-radius: var(--rundung);
    padding: 9px 11px;
    color: var(--schrift);
    font: 400 13.5px var(--schriftart);
    outline: none;
    width: 100%;
    min-width: 0;
}

textarea.eingabe { line-height: 1.6; resize: vertical; color: var(--schrift-ruhig); font-size: 13px; }

.eingabe--zahl { font-family: var(--schriftart-zahl); }

.eingabe::placeholder, textarea.eingabe::placeholder { color: var(--schrift-platzhalter); }
.eingabe:focus { border-color: var(--akzent); }
.eingabe:disabled, .eingabe[readonly] { color: var(--schrift-leise); background: #121316; }

input[type="date"].eingabe { color-scheme: dark; }

/* Der Anschriften-Schnappschuss und andere feste Mehrzeiler: sieht wie ein Feld aus, ist keines. */
.ablesung {
    background: var(--feld);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    padding: 14px 15px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--schrift-ruhig);
    white-space: pre-line;
}

/* ------------------------------ Schalter ------------------------------ */

.schalterzeile {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--feld);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    padding: 13px 15px;
}

.schalter {
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    border-radius: 20px;
    border: 1px solid var(--linie-laut);
    background: var(--kachel);
    position: relative;
    cursor: pointer;
    padding: 0;
    margin-top: 1px;
}

.schalter--an { background: var(--akzent); border-color: var(--akzent); }

.schalter span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--schrift);
    transition: left .15s ease;
}

.schalter--an span { left: 18px; }

.schalter__text { flex: 1; }
.schalter__text > div:first-child { font-size: 13.5px; }

/* ------------------------------ Haken ------------------------------ */

.haken {
    display: flex;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--linie-laut);
    background: transparent;
    align-items: center;
    justify-content: center;
    font: 500 11px var(--schriftart);
    color: #FFFFFF;
}

.haken--an { background: var(--akzent); border-color: var(--akzent); }

/* ============================== Knoepfe ============================== */

.knopf {
    background: none;
    border: 1px solid var(--linie-feld);
    border-radius: var(--rundung);
    padding: 9px 14px;
    color: var(--schrift-ruhig);
    font: 400 13.5px var(--schriftart);
    cursor: pointer;
    white-space: nowrap;
}

.knopf:hover { border-color: var(--linie-laut); color: var(--schrift); }

.knopf:disabled { color: var(--schrift-marke); border-color: var(--linie); cursor: not-allowed; }

.knopf--haupt {
    background: var(--akzent);
    border-color: var(--akzent);
    padding: 9px 16px;
    color: #FFFFFF;
    font-weight: 500;
}

.knopf--haupt:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); color: #FFFFFF; }

.knopf--haupt:disabled { background: var(--linie-kachel); border-color: var(--linie-kachel); color: var(--schrift-marke); }

.knopf--still { border-color: var(--linie-feld); color: var(--schrift-leise); }
.knopf--still:hover { color: var(--schrift); border-color: var(--linie-laut); }

.knopf--gefahr:hover { color: var(--halt); border-color: rgba(232, 105, 91, .45); }

.knopf--klein { padding: 6px 11px; font-size: 12.5px; border-radius: var(--rundung-klein); color: var(--schrift-leise); }

.knopf--nackt {
    border: none;
    background: none;
    color: var(--verweis);
    font-size: 12.5px;
    padding: 0;
    cursor: pointer;
}

.knopf--nackt:hover { color: var(--verweis-hell); border: none; text-decoration: underline; }

.knopf--weg {
    background: none;
    border: none;
    color: var(--schrift-platzhalter);
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.knopf--weg:hover { color: var(--halt); border: none; }

.knopf--voll { width: 100%; justify-content: center; }

/* ============================== Plaketten ============================== */

.plakette {
    font: 500 11px var(--schriftart);
    letter-spacing: .03em;
    border: 1px solid var(--linie-laut);
    color: var(--schrift-leise);
    border-radius: var(--rundung-winzig);
    padding: 2px 8px;
    white-space: nowrap;
}

.plakette--akzent { border-color: var(--akzent-rand); color: var(--akzent-licht); }
.plakette--gut { border-color: var(--gut-rand); color: var(--gut); }
.plakette--entwurf { border-color: var(--acht-rand); color: var(--acht); }
.plakette--gross { letter-spacing: .06em; text-transform: uppercase; }

/* ============================== Hinweise ============================== */

.hinweis {
    border-radius: var(--rundung);
    padding: 11px 14px;
    font-size: 13px;
    text-wrap: pretty;
    border: 1px solid var(--linie-kachel);
    background: var(--senke);
    color: var(--schrift-ruhig);
}

.hinweis--acht { background: var(--acht-flaeche); border-color: var(--acht-rand); color: var(--acht); }
.hinweis--halt { background: var(--halt-flaeche); border-color: var(--halt-rand); color: var(--halt); }
.hinweis--gut { background: var(--gut-flaeche); border-color: var(--gut-rand); color: var(--gut-schrift); }

.hinweis b { color: inherit; font-weight: 500; }

/* Der leere Zustand: gestrichelt, damit er nicht wie eine kaputte Karte aussieht. */
.leerlauf {
    background: var(--kachel);
    border: 1px dashed #33373D;
    border-radius: var(--rundung);
    padding: 34px;
    text-align: center;
    color: var(--schrift-zart);
    font-size: 13.5px;
    text-wrap: pretty;
}

.leerlauf b { color: var(--schrift-ruhig); font-weight: 500; }

/* Die Ladeanzeige — ein Strich, kein Kreisel: sie steht dort, wo sonst der Inhalt beginnt. */
.laedt {
    height: 2px;
    background: var(--linie);
    overflow: hidden;
    position: relative;
}

.laedt::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 30%;
    background: var(--akzent);
    animation: laden 1.1s ease-in-out infinite;
}

@keyframes laden {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ============================== Tabellen ============================== */
/*
    Eine Tabelle ist hier ein Raster aus <div>, nicht ein <table>: die Spaltenbreiten stehen je
    Liste in --spalten, und eine Zeile darf mehr als eine Textzeile tragen, ohne dass die
    Zellenhoehen auseinanderlaufen.
*/

.liste { overflow: hidden; }

.liste__kopf,
.liste__zeile {
    display: grid;
    grid-template-columns: var(--spalten);
    padding: 0 16px;
    align-items: center;
}

.liste__kopf {
    font: 500 10.5px var(--schriftart);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--schrift-marke);
    border-bottom: 1px solid var(--linie);
}

.liste__kopf > div { padding: 10px 0; }

.liste__zeile {
    border-bottom: 1px solid var(--linie-zeile);
    background: transparent;
}

.liste__zeile > div { padding: 11px 0; }

.liste__zeile--waehlbar { cursor: pointer; }
.liste__zeile--waehlbar:hover { background: var(--fuehrung); }
.liste__zeile--gewaehlt { background: var(--akzent-hauch); }
.liste__zeile--aktiv { background: rgba(0, 120, 212, .1); }
.liste__zeile:last-child { border-bottom: none; }

.liste__gruppe {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(32, 35, 39, .6);
    border-bottom: 1px solid var(--linie-kachel);
    flex-wrap: wrap;
}

.liste__gruppe .haken { align-self: center; }

/* Eine Zelle, in der zwei Zeilen stehen: Sache oben, Beiwerk klein darunter. */
.zelle { min-width: 0; }
.zelle__haupt { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zelle__bei { font-size: 11.5px; color: var(--schrift-fern); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------ Positionstabelle ------------------------------ */
/*
    Die Eingabefelder der Positionstabelle sollen nicht wie Formularfelder wirken, sondern wie
    beschreibbare Tabellenzellen — sonst ist die Maske ein Formularwald. Der Rahmen erscheint unter
    dem Zeiger und bleibt beim Schreiben.
*/

.zellfeld {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rundung-winzig);
    padding: 4px 6px;
    color: var(--schrift);
    font: 400 13.5px var(--schriftart);
    outline: none;
    width: 100%;
    min-width: 0;
}

.zellfeld:hover { border-color: var(--linie-feld); }
.zellfeld:focus { background: var(--feld); border-color: var(--akzent); }

.zellfeld--titel { font-weight: 500; }
.zellfeld--zahl { font-family: var(--schriftart-zahl); text-align: right; }
.zellfeld--klein { color: var(--schrift-leise); font-size: 13px; }
.zellfeld--fehlt { border-color: rgba(232, 105, 91, .5); }
.zellfeld--fussnote {
    color: var(--schrift-zart);
    font: 400 12px/1.5 var(--schriftart);
    resize: vertical;
    padding: 3px 6px;
}

.zellfeld[readonly] { color: var(--schrift-ruhig); }
.zellfeld[readonly]:hover { border-color: transparent; }

.posten {
    display: grid;
    grid-template-columns: var(--spalten);
    padding: 0 16px;
    border-bottom: 1px solid var(--linie-zeile);
    align-items: start;
}

.posten--ueberschrift { background: var(--senke); }

.posten__nr { padding: 12px 0; font: 400 12.5px var(--schriftart-zahl); color: var(--schrift-marke); }

.posten__bezeichnung {
    padding: 8px 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.posten__zahl { padding: 8px 0; }
.posten__summe { padding: 13px 6px 8px 0; text-align: right; font: 500 13.5px var(--schriftart-zahl); }
.posten__werkzeug { padding: 10px 0; text-align: right; white-space: nowrap; }

.posten__ohnebetrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-size: 11.5px;
    color: var(--schrift-marke);
}

/* ------------------------------ Summenblock ------------------------------ */

.summen {
    display: flex;
    justify-content: flex-end;
    padding: 18px 16px 20px;
    background: var(--senke);
}

.summen__spalte {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summen__zeile { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--schrift-ruhig); }
.summen__steuer { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--schrift-zart); }

.summen__gesamt {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--linie-feld);
    padding-top: 9px;
    font: 500 16px var(--schriftart);
}

/* Beschreibungen der Belegpositionen behalten ihre Zeilenumbrueche. */
.mehrzeilig { white-space: pre-line; line-height: 1.55; }

/* ============================== Dialog ============================== */

.ueberlagerung {
    position: fixed;
    inset: 0;
    background: rgba(9, 10, 12, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    z-index: 1400;
}

.dialog {
    width: 100%;
    max-width: 520px;
    background: var(--kachel);
    border: 1px solid #33373D;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    overflow: hidden;
}

.dialog__kopf { padding: 20px 22px 16px; border-bottom: 1px solid var(--linie-kachel); }
.dialog__titel { font: 500 17px var(--schriftart); margin-bottom: 4px; }
.dialog__koerper { padding: 18px 22px; display: flex; flex-direction: column; gap: 11px; }

.dialog__fuss {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--linie-kachel);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.pruefzeile { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--schrift-ruhig); }
.pruefzeile--fehlt { color: var(--halt); }
.pruefzeile__zeichen { flex: 0 0 16px; font: 500 13px var(--schriftart); color: var(--gut); margin-top: 1px; }
.pruefzeile--fehlt .pruefzeile__zeichen { color: var(--halt); }
.pruefzeile span:last-child { text-wrap: pretty; }

/* ============================== Anmeldung ============================== */

.anmeldung {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.anmeldung__spalte {
    width: 100%;
    max-width: 404px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.anmeldung__marke { display: flex; align-items: center; gap: 11px; }

.anmeldung__zeichen {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--rundung);
    background: var(--akzent-dunkel);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 14px var(--schriftart);
    color: var(--akzent-schrift);
}

.anmeldung__name { font: 300 26px var(--schriftart); letter-spacing: .01em; }
.anmeldung__zweck { font-size: 13px; color: var(--schrift-zart); padding-left: 45px; margin-top: 8px; }

.anmeldung__kasten {
    background: var(--kachel);
    border: 1px solid var(--linie-kachel);
    border-radius: var(--rundung);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.anmeldung__fussnote {
    font-size: 12px;
    color: var(--schrift-fern);
    border-top: 1px solid var(--linie);
    padding-top: 14px;
    text-wrap: pretty;
}

/* ============================== Kleines Fenster ============================== */

@media (max-width: 860px) {
    .schale { flex-direction: column; }

    .seitenleiste {
        width: auto;
        flex: none;
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--linie);
    }

    .nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
    .nav__abschnitt { width: 100%; padding: 10px 10px 4px; }

    .kopf, .koerper { padding-left: 16px; padding-right: 16px; }
}

/* ============================== MudBlazor ============================== */
/*
    Geblieben sind Dialog und Meldungsstreifen (EmpfaengerDialog, Snackbar). Sie holen ihre Farben
    aus Farben.cs; hier steht nur, was das Thema nicht abdeckt.
*/

.mud-input-control { margin-top: 0; margin-bottom: 0; }
.mud-dialog { border-radius: var(--rundung) !important; }