/* ── Farb- und Schrift-Tokens (Musterkatalog) ─────────────────────────────────
   Quelle: docs/design/katalog (_navcss.html, _seitencss.html), umgerechnet aus oklch()
   mit docs/design/katalog/oklch2hex.mjs. Die MudBlazor-Palette selbst steht in
   SwxTheme.cs -- hier stehen dieselben Werte zusaetzlich als CSS-Variablen.

   AUF :root, NICHT nur unter einem Klassenselektor: Die 30 Identity-Seiten unter
   /Account rendern ohne MudThemeProvider (AccountLayout.razor traegt bewusst kein
   @layout MainLayout, s. dort) und koennen --mud-palette-*-Variablen deshalb nie
   lesen. Nur :root erreicht auch sie -- die hartverdrahteten Fallbacks weiter unten
   in dieser Datei werden deshalb zu var(--mud-palette-x, var(--swx-y)) statt zu einem
   nackten Hex-Wert: auf Seiten mit ThemeProvider gewinnt --mud-palette-x, auf Seiten
   ohne greift --swx-y.

   Rail-Farben (rl/rl2/rlink/rink) sind in beiden Erscheinungsbildern gleich (dunkle
   Bereichsspalte) und stehen schon hier, auch wenn die Rail selbst erst im naechsten
   Slice gebaut wird. */
:root {
    --swx-acc: #386CD0;
    --swx-accbg: #E5F0FF;
    --swx-card: #FFFFFF;
    --swx-app: #F3F4F7;
    --swx-sb: #F8F9FB;
    --swx-hov: #EAEDF1;
    --swx-line: #DDE0E4;
    --swx-ink: #2D333C;
    --swx-ink2: #676C74;
    --swx-ink3: #868B92;
    --swx-warn: #FAB219;

    --swx-rl: #191E27;
    --swx-rl2: #282E39;
    --swx-rlink: #9EA5B0;
    --swx-rink: #F3F5F9;
}

/* Dunkles Erscheinungsbild -- zwei unabhaengige Wege, weil zwei Seitenarten nichts
   voneinander wissen:

   1) Seiten MIT WebThemeService (alles unter MainLayout): MainLayout.razor spiegelt
      Theme.IsDarkMode als Klasse "swx-dunkel" auf MudLayout, denselben Zustand, den
      MudThemeProvider zeitgleich in die --mud-palette-*-Variablen spiegelt (s.
      Services/WebThemeService.cs). Auf diesen Seiten greift der --swx-y-Fallback fast
      nie (--mud-palette-x ist praktisch immer gesetzt) -- die Klasse steht trotzdem
      bereit, fuer einen kuenftigen Verbraucher, der --swx-y direkt liest (z.B. die
      Rail), nicht nur als Fallback.
   2) Seiten OHNE WebThemeService (/Account/*): kein Circuit, keine Klasse -- einziges
      verfuegbares Signal ist die Betriebssystem-Praeferenz.

   BEKANNTE LUECKE: Waehlt jemand auf einer MainLayout-Seite ausdruecklich "Hell",
   waehrend das Betriebssystem dunkel bevorzugt, faellt ein kuenftiger direkter
   --swx-y-Verbraucher (ohne --mud-palette-x davor) auf die per Medienabfrage gesetzten
   dunklen Werte zurueck, weil weder .swx-dunkel noch ein Gegenstueck fuer "ausdruecklich
   hell" greift. Aktuell folgenlos, weil kein Aufrufer --swx-y direkt ohne
   --mud-palette-x-Fallback liest -- fuer den Rail-Slice zu klaeren. */
@media (prefers-color-scheme: dark) {
    :root {
        --swx-acc: #76A8FF;
        --swx-accbg: #1C2B47;
        --swx-card: #14171D;
        --swx-app: #0C0F13;
        --swx-sb: #161A20;
        --swx-hov: #21252B;
        --swx-line: #2A2F37;
        --swx-ink: #EAEDF1;
        --swx-ink2: #9EA3AB;
        --swx-ink3: #777C83;
    }
}

.swx-dunkel {
    --swx-acc: #76A8FF;
    --swx-accbg: #1C2B47;
    --swx-card: #14171D;
    --swx-app: #0C0F13;
    --swx-sb: #161A20;
    --swx-hov: #21252B;
    --swx-line: #2A2F37;
    --swx-ink: #EAEDF1;
    --swx-ink2: #9EA3AB;
    --swx-ink3: #777C83;
    --swx-warn: #FAB219;
}

/* Systemschrift-Stapel aus dem Musterkatalog.

   Die Zuweisung geht ueber die Variablen der beiden Fremdstile, NICHT nur ueber eine
   eigene body-Regel -- gemessen am 25.08.2026 auf /Account/Login: MudBlazor.min.css
   setzt selbst `body { font-family: var(--mud-typography-default-family) }` und wird
   NACH app.css geladen. Auf den Account-Seiten laeuft kein MudThemeProvider, die
   Variable ist dort also leer, und MudBlazors Regel gewinnt gegen unsere gleich
   spezifische. Ergebnis war eine leere Schriftfamilie und damit Times New Roman auf
   der Anmeldeseite -- der ersten Seite, die jeder sieht.

   Die Variable zu fuellen schlaegt jeden Spezifitaetskampf: MudBlazors eigene Regel
   liefert dann den richtigen Wert, mit ThemeProvider wie ohne. Bootstrap (fuer die
   Identity-Vorlage eingebunden) bekommt seine Variable aus demselben Grund. */
:root {
    --swx-schrift: system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
    --mud-typography-default-family: var(--swx-schrift);
    --bs-body-font-family: var(--swx-schrift);
}

html, body {
    font-family: var(--swx-schrift);
}

/* ── Seitennavigation: Abschnitte, Unterpunkte, aktiver Zustand (Bereichsspalte Slice 1,
   Spec 2026-08-25) ────────────────────────────────────────────────────────────────
   Uebersetzt aus docs/design/katalog/_navcss.html (.sec/.item/.kid/.lbl) in die
   tatsaechliche MudBlazor-Struktur: MudNavLink rendert <div class="mud-nav-item"> um
   <a class="mud-nav-link ...">; MudNavGroup rendert <div class="mud-nav-group"> mit
   einem Kopf-<a class="mud-nav-link ..."> und einer verschachtelten
   <nav class="mud-navmenu"> fuer die Kinder. Die swx-nav-*-Klassen unten landen ueber
   Class/HeaderClass aus NavMenu.razor auf diesen Elementen -- deshalb Nachfahren-
   Selektoren statt eigener Wrapper. "active" setzt Blazors eingebautes NavLink selbst
   (ActiveClass, Vorgabe "active"), keine eigene Zustandsklasse noetig.
   Farben/Abstaende ausschliesslich aus den --swx-*-Tokens oben -- keine neuen Werte. */
.swx-nav-menu { display: flex; flex-direction: column; gap: 1px; }

.swx-nav-sec {
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px; height: 26px; margin-top: 14px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}
.swx-nav-sec:first-child { margin-top: 4px; }
.swx-nav-sec-abschnitt { margin-top: 8px; }
.swx-nav-rule { flex: 1; height: 1px; background: var(--mud-palette-lines-default, var(--swx-line)); }

.swx-nav-item .mud-nav-link,
.swx-nav-group .mud-nav-link {
    border-radius: 7px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, var(--swx-ink2));
}
.swx-nav-item .mud-nav-link:hover,
.swx-nav-group .mud-nav-link:hover {
    background: var(--mud-palette-action-default-hover, var(--swx-hov));
    color: var(--mud-palette-text-primary, var(--swx-ink));
}
.swx-nav-item .mud-nav-link.active {
    position: relative;
    background: var(--mud-palette-primary-hover, var(--swx-accbg));
    color: var(--mud-palette-primary, var(--swx-acc));
    font-weight: 600;
}
.swx-nav-item .mud-nav-link.active::before {
    content: "";
    position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 17px; border-radius: 0 3px 3px 0;
    background: var(--mud-palette-primary, var(--swx-acc));
}

/* Die gewaehlte Karte im Eingangskorb (Ablage.dc.html): Akzentrand plus ein leiser
   Schein. Nur der Rand allein reicht nicht -- zwischen zwoelf gleich grossen Karten
   ist eine Randfarbe zu wenig Unterschied, um den Blick zu fuehren. */
.swx-karte-aktiv {
    border-color: var(--swx-acc);
    box-shadow: 0 0 0 3px var(--swx-accbg);
}

/* Die Ablegeflaeche unter der Liste. Gestrichelt, weil sie kein Knopf ist, sondern
   ein Bereich -- und weil eine durchgezogene Umrandung wie eine leere Karte aussaehe. */
.swx-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    border: 1.5px dashed var(--mud-palette-lines-default, var(--swx-line));
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

.swx-dropzone:hover {
    border-color: var(--swx-acc);
    color: var(--swx-acc);
}

/* Das Feldraster "Erkannt — bitte bestaetigen": zwei Spalten, damit vier Felder in
   zwei Zeilen stehen statt in einer Kolonne. */
.swx-erkanntraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.swx-feldname {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

.swx-feldwert {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-top: 3px;
    padding: 0 9px;
    border: 1px solid var(--mud-palette-lines-default, var(--swx-line));
    border-radius: 8px;
    background: var(--mud-palette-background-grey, var(--swx-feld));
    font-size: 13px;
}

/* Ein leeres Feld traegt gedaempfte Schrift -- der Gedankenstrich soll nicht
   aussehen wie ein Wert. */
.swx-feldwert.leer { color: var(--mud-palette-text-disabled, var(--swx-ink3)); }

/* Die Zahl am Eingangskorb (Ablage.dc.html: .cnt). Rechtsbuendig ans Ende des
   Eintrags -- sie ist eine Randnotiz zum Titel, keine zweite Beschriftung.
   Tabellenziffern, damit zwei- und dreistellige Werte untereinander nicht
   springen. */
.swx-nav-zahl {
    margin-left: auto;
    padding-left: 8px;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

/* Im aktiven Eintrag traegt sie dessen Farbe -- eine graue Zahl in einer farbigen
   Zeile liest sich wie ausgegraut, also wie "nicht zustaendig". */
.swx-nav-kid .mud-nav-link.active .swx-nav-zahl {
    color: var(--mud-palette-primary, var(--swx-acc));
}

/* Unterpunkte (Kinder einer MudNavGroup): eingerueckt, mit senkrechter Fuehrungslinie.
   Die verschachtelte <nav class="mud-navmenu"> traegt die Linie einmal fuer die ganze
   Gruppe -- kein Fragment je Zeile. */
.swx-nav-group .mud-navgroup-collapse .mud-navmenu {
    position: relative;
    margin: 1px 0 3px;
    padding-left: 20px;
}
.swx-nav-group .mud-navgroup-collapse .mud-navmenu::before {
    content: "";
    position: absolute; left: 20px; top: 2px; bottom: 2px;
    width: 1.5px; border-radius: 2px;
    background: var(--mud-palette-lines-default, var(--swx-line));
}
.swx-nav-kid .mud-nav-link {
    border-radius: 7px;
    font-size: 13px; font-weight: 450;
    color: var(--mud-palette-text-secondary, var(--swx-ink2));
}
.swx-nav-kid .mud-nav-link:hover {
    background: var(--mud-palette-action-default-hover, var(--swx-hov));
    color: var(--mud-palette-text-primary, var(--swx-ink));
}
.swx-nav-kid .mud-nav-link.active {
    position: relative;
    background: var(--mud-palette-primary-hover, var(--swx-accbg));
    color: var(--mud-palette-primary, var(--swx-acc));
    font-weight: 600;
}
.swx-nav-kid .mud-nav-link.active::before {
    content: "";
    position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
    width: 3.5px; height: 3.5px; border-radius: 50%;
    background: var(--mud-palette-primary, var(--swx-acc));
    box-shadow: 0 0 0 2.5px var(--mud-palette-primary-hover, var(--swx-accbg));
}

/* ── Bereichsleiste (Rail) + Bereichsspalte, Slice 2 (Spec 2026-08-25) ────────────
   EIN MudDrawer traegt beide Ebenen nebeneinander (s. MainLayout.razor, Begruendung
   dort): ".swx-nav" ist die Flex-Reihe, ".swx-rail" (72px, IMMER dunkel -- bewusst
   die --swx-rl*-Tokens direkt, nicht --mud-palette-*, s. app.css-Kopf) und
   ".swx-spalte" (226px, NavMenu.razor darin) ihre beiden Kinder. Eingeklappt
   (MiniWidth 72px) clipt der Drawer die Spalte weg, ohne dass eigener Code das DOM
   aendern muesste -- Geometrie/Farben aus docs/design/katalog/Rail.dc.html
   (.rail/.rbtn) und _railzucss.html. */
.swx-nav {
    display: flex;
    height: 100%;
    min-height: 100%;
}

.swx-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 72px;
    flex: 0 0 72px;
    padding: 10px 0;
    background: var(--swx-rl);
    overflow: hidden;
}

/* Die Hauptbereiche nehmen den freien Platz der Rail und scrollen allein, wenn er nicht
   reicht (niedriges Fenster, Browser-Zoom). Verwaltung, Hilfe, Melden und Konto darunter
   sind keine Kinder dieser Spalte und bleiben immer sichtbar. min-height:0, damit die
   Spalte im Flex-Container ueberhaupt schrumpfen darf. */
.swx-rail-oben {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}
.swx-rail-oben::-webkit-scrollbar { display: none; }

.swx-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 52px;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--swx-rlink);
    cursor: pointer;
    font: inherit;
    padding: 0;
    flex: 0 0 auto;
}
.swx-rail-btn span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.swx-rail-btn:hover {
    background: var(--swx-rl2);
    color: var(--swx-rink);
}
.swx-rail-btn.on {
    background: var(--mud-palette-primary, var(--swx-acc));
    color: #fff;
}
.swx-rail-btn:focus-visible {
    outline: 2px solid var(--swx-rink);
    outline-offset: -2px;
}

/* Kompakte Fussknoepfe (Hilfe, Problem melden): nur Symbol, ohne Beschriftung.
   Gleiche Farben/Hover/Fokus wie .swx-rail-btn; <a> und <button> sehen gleich aus. */
.swx-rail-mini {
    height: 36px;
    flex: 0 0 auto;
    text-decoration: none;
}

.swx-rail-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--swx-rl2);
    color: var(--swx-rink);
    font-size: 11px;
    font-weight: 700;
    margin-top: 8px;
    flex: 0 0 auto;
    text-decoration: none;
}
/* Das Kuerzel ist zugleich der Link auf "Mein Konto". */
a.swx-rail-avatar:hover {
    /* Die Farbe muss hier stehen: Bootstrap setzt a:hover { color } (0,1,1) und schluege die
       Farbe aus .swx-rail-avatar (0,1,0) -- die Initialen wurden dunkelblau auf Dunkelgrau. */
    color: var(--swx-rink);
    box-shadow: 0 0 0 2px var(--swx-rlink);
}
a.swx-rail-avatar:focus-visible {
    outline: 2px solid var(--swx-rink);
    outline-offset: 2px;
}

.swx-spalte {
    display: flex;
    flex-direction: column;
    width: 226px;
    flex: 0 0 226px;
    padding: 12px 12px 8px;
    overflow-y: auto;
}

a, .btn-link {
    color: var(--mud-palette-primary, var(--swx-acc));
}

.btn-primary {
    color: var(--mud-palette-primary-text, #fff);
    background-color: var(--mud-palette-primary, var(--swx-acc));
    border-color: var(--mud-palette-primary, var(--swx-acc));
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--mud-palette-primary, var(--swx-acc));
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success, #4caf50);
}

.invalid {
    outline: 1px solid var(--mud-palette-error, #f44336);
}

.validation-message {
    color: var(--mud-palette-error, #f44336);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--mud-palette-error, #f44336);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--mud-palette-lines-inputs, var(--swx-line));
}

/* Belegfluss-Kacheln im Dashboard: die ganze Kachel ist ein Link auf die gefilterte
   Belegliste (Desktop-Pendant: GoToBelegArtCommand). Neutrales Grau im Hover, damit
   es in hellem und dunklem Theme gleichermassen funktioniert. */
.funnel-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
    /* padding + gleich grosser negativer margin: die Hover-Flaeche reicht ueber den Text
       hinaus, das Layout bleibt aber exakt so wie ohne den Link -- sonst saesse die
       verlinkte KPI-Kachel sichtbar versetzt neben ihren unverlinkten Nachbarn. */
    padding: 4px;
    margin: -4px;
    transition: background-color .15s ease-in-out;
}

.funnel-link:hover,
.funnel-link:focus-visible {
    background-color: rgba(128, 128, 128, .16);
}

/* ── Startseite: Karten, Kennzahlen, Diagramm ────────────────────────────────
   Werte 1:1 aus docs/design/katalog/Dashboard.dc.html (Block ".karte" bis
   ".kwert"); die Farben dort stehen bereits als Hex und wurden nicht umgerechnet.

   Alles mit swx- praefigiert: ".karte", ".zeile" oder ".stufe" waeren im globalen
   Stylesheet einer MudBlazor-App zu allgemein -- app.css laedt auf JEDER Seite,
   auch auf den Account-Seiten ohne ThemeProvider.

   Die Diagrammfarben sind eigene Token statt fester Werte im Markup: Ein Balken,
   dessen Farbe im style-Attribut steht, kennt den Dunkelmodus nicht. */
:root {
    --swx-s1: #86B6EF;
    --swx-s2: #5598E7;
    --swx-s3: #386CD0;
    --swx-s4: #1C5CAB;
    --swx-serie: #386CD0;
    --swx-vorjahr: #898781;
    --swx-gut: #0CA30C;
    --swx-warn: #FAB219;
    --swx-krit: #D03B3B;
    --swx-gitter: #E6E8EC;
    --swx-achse: #CCD0D6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --swx-s1: #9EC5F4;
        --swx-s2: #6DA7EC;
        --swx-s3: #3987E5;
        --swx-s4: #1C5CAB;
        --swx-serie: #76A8FF;
        --swx-gitter: #262A31;
        --swx-achse: #333944;
    }
}

.swx-dunkel {
    --swx-s1: #9EC5F4;
    --swx-s2: #6DA7EC;
    --swx-s3: #3987E5;
    --swx-s4: #1C5CAB;
    --swx-serie: #76A8FF;
    --swx-gitter: #262A31;
    --swx-achse: #333944;
}

.swx-karte {
    border: 1px solid var(--mud-palette-lines-default, var(--swx-line));
    border-radius: 13px;
    background: var(--mud-palette-surface, var(--swx-card));
}

/* Die Karte der ueberfaelligen Betraege traegt einen roten Rand statt roter Schrift
   allein -- der Entwurf setzt dort border-color auf die Warnfarbe. */
.swx-karte-krit {
    border-color: var(--swx-krit);
}

/* Dasselbe eine Stufe leiser: die Kachel "Laeuft aus" der Schliessfach-Liste
   (Objekte.dc.html). Sie meldet eine Frist, keinen Fehlstand -- rot waere zu laut
   fuer etwas, das in sechzig Tagen faellig wird. */
.swx-karte-warn {
    border-color: var(--swx-warn);
}

/* Auslastungsbalken der KPI-Kachel (Objekte.dc.html: .balkenspur). Die Spur traegt
   die Fuellung als <span> -- ohne zweites Element liesse sich der Anteil nur ueber
   einen Verlauf andeuten, und der ist an der Kante nicht ablesbar. */
.swx-balkenspur {
    height: 6px;
    border-radius: 3px;
    margin-top: 9px;
    background: var(--mud-palette-action-default-hover, var(--swx-hov));
    overflow: hidden;
}

.swx-balkenspur > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--swx-acc);
}

.swx-kkopf {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 15px 18px 0;
}

.swx-ktitel {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--mud-palette-text-primary, var(--swx-ink));
}

.swx-knebentitel {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

.swx-kpi {
    padding: 15px 17px 16px;
}

.swx-kpilabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

.swx-kpizahl {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.032em;
    line-height: 1.15;
    margin-top: 7px;
    color: var(--mud-palette-text-primary, var(--swx-ink));
    font-variant-numeric: tabular-nums;
}

/* "34 Tage": die Einheit steht kleiner neben der Zahl, nicht darunter. */
.swx-kpieinheit {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

.swx-kpifuss {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11.5px;
    margin-top: 6px;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

.swx-gut  { color: var(--swx-gut);  font-weight: 600; }
.swx-warn { color: var(--swx-warn); font-weight: 600; }
.swx-krit { color: var(--swx-krit); font-weight: 600; }

/* Der ruhige Gegenpol zu den dreien darueber: kein Zustand, sondern die Abwesenheit
   eines Zustands (offene Posten, die schlicht noch laufen). Ohne Fettung -- eine
   gedaempfte Farbe UND fetter Text waeren gegenlaeufige Signale. */
.swx-still { color: var(--mud-palette-text-disabled, var(--swx-ink3)); }

/* Belegfluss-Stufen */
.swx-stufen {
    display: flex;
    align-items: flex-start;
    padding: 0 18px 18px;
}

.swx-stufe {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.swx-stufebalken {
    height: 7px;
    border-radius: 4px;
}

.swx-stufezahl {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--mud-palette-text-primary, var(--swx-ink));
    font-variant-numeric: tabular-nums;
}

.swx-stufelabel {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, var(--swx-ink2));
}

.swx-stufesumme {
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
    font-variant-numeric: tabular-nums;
}

.swx-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    flex: 0 0 auto;
    align-self: center;
    margin-top: 12px;
}

.swx-quotezahl {
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary, var(--swx-ink2));
    font-variant-numeric: tabular-nums;
}

/* Zeilenliste ("Was ansteht") */
.swx-zeile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 18px;
    color: inherit;
    text-decoration: none;
}

.swx-zeile + .swx-zeile {
    border-top: 1px solid var(--mud-palette-lines-default, var(--swx-line));
}

a.swx-zeile:hover,
a.swx-zeile:focus-visible {
    background-color: rgba(128, 128, 128, .16);
}

.swx-zeilentitel {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary, var(--swx-ink));
}

.swx-zeilendetail {
    font-size: 11.5px;
    line-height: 1.35;
    margin-top: 1px;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

/* Groesste Kunden */
.swx-kbalken {
    height: 6px;
    border-radius: 3px;
    background: var(--swx-serie);
}

.swx-kname {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mud-palette-text-primary, var(--swx-ink));
}

.swx-kwert {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, var(--swx-ink));
    font-variant-numeric: tabular-nums;
}

/* Umsatzdiagramm. Das Achsenband liegt links neben der Zeichenflaeche und traegt
   dieselbe Hoehe -- deshalb feste Breite statt flex. */
.swx-diagramm {
    display: flex;
    align-items: flex-end;
    padding: 22px 18px 0;
}

.swx-achsenband {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 240px;
    width: 44px;
    flex: 0 0 44px;
    text-align: right;
    padding-right: 9px;
    box-sizing: border-box;
}

.swx-achsenwert {
    font-size: 10.5px;
    line-height: 1;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
    font-variant-numeric: tabular-nums;
}

.swx-monatsband {
    display: flex;
    padding: 7px 18px 14px 62px;
}

.swx-monat {
    flex: 1;
    text-align: center;
    font-size: 10.5px;
    color: var(--mud-palette-text-disabled, var(--swx-ink3));
}

.swx-monat-jetzt {
    font-weight: 700;
    color: var(--mud-palette-text-secondary, var(--swx-ink2));
}

/* Legendenmarker: Flaeche fuer das laufende Jahr, Strich fuer das Vorjahr --
   dieselbe Unterscheidung wie im Diagramm selbst. */
.swx-legendenflaeche {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--swx-serie);
    display: inline-block;
}

.swx-legendenstrich {
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--swx-vorjahr);
    display: inline-block;
}

.swx-legendentext {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, var(--swx-ink2));
}

/* Display-Zelle einer Positionszeile (PositionRow.razor). Nur die aktive Zeile rendert
   Eingabefelder; alle uebrigen Zellen sind dieser statische Text. Er muss trotzdem die
   Hoehe und die Trefferflaeche eines Eingabefelds haben, sonst springt das Layout beim
   Aktivieren und leere Zellen (Bezeichnung, Einheit) waeren nicht anklickbar. */
.pos-display {
    min-height: 28px;
    line-height: 28px;
    padding: 0 4px;
    border-radius: 4px;
    cursor: text;
    /* ellipsis statt Umbruch: eine lange Bezeichnung darf die Zeilenhoehe der ganzen
       Tabelle nicht veraendern. Der vollstaendige Text steht im aktiven Eingabefeld. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-display:hover {
    background-color: rgba(128, 128, 128, .12);
}

/* Der Fokus kommt per Tab und aktiviert die Zeile sofort — der Ring ist nur fuer den
   Bruchteil einer Sekunde sichtbar, muss dort aber erkennbar sein. */
.pos-display:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ── Anmeldung ────────────────────────────────────────────────────────────────
   Die Identity-Seiten laufen serverseitig gerendert (sie muessen Cookies setzen)
   und koennen deshalb keine MudBlazor-Komponenten verwenden. Aus der
   Projektvorlage kamen sie in nacktem Bootstrap: riesige Ueberschriften,
   "Use a local account to log in.", "Remember me". Es ist die erste Seite, die
   jeder Anwender sieht.

   FRUEHER kamen die Farben aus den --mud-palette-*-Variablen, jede mit
   Ersatzwert -- denn die setzt der MudThemeProvider zur Laufzeit, und den gibt es
   auf den Account-Seiten nicht (sie laufen ohne MainLayout). Ohne Ersatzwert blieb
   der Anmeldeknopf unsichtbar: weisse Schrift auf durchsichtigem Grund. Im Browser
   aufgefallen, im Komponententest nicht sichtbar.

   SEIT 08/2026 liegen eigene Variablen auf .anmelde-seite / .konto-seite. Damit
   kann derselbe Fehler nicht wiederkehren: Es gibt hier keine Variable mehr, die
   von einem Anbieter abhaengt, den diese Seiten gar nicht haben. Die Werte sind
   dieselben Toene wie in der Anwendung, nur als feste Zahl statt als Verweis.

   KEINE Webschrift von fremden Servern: Google Fonts uebertraegt die IP-Adresse
   des Anwenders an Google (LG Muenchen I, 20.01.2022 - 3 O 17493/20). Fuer eine
   Anmeldeseite, die jeder Kunde sieht, ist das nicht vertretbar. Wird eine eigene
   Schrift gewuenscht, gehoert sie unter wwwroot und wird per @font-face lokal
   ausgeliefert.

   KEIN Dunkelmodus ueber prefers-color-scheme: Diese Seiten kennen die
   Theme-Wahl des Anwenders nicht (die haelt WebThemeService hinter der
   Anmeldung). Wer hell eingestellt hat, aber ein dunkles Betriebssystem nutzt,
   saehe sonst eine dunkle Anmeldung und danach eine helle Anwendung. */

.anmelde-seite {
    --a-grund: #f3f4f7;
    --a-karte: #ffffff;
    --a-linie: #dde0e4;
    --a-feldrand: #bfc4cc;
    --a-feld: #fdfdfe;
    --a-text: #2d333c;
    --a-text2: #676c74;
    --a-text3: #868b92;
    --a-akzent: #386cd0;
    --a-akzent-tief: #1d52bb;
    --a-akzent-flaeche: #e5f0ff;
    --a-fehler: #d03b3b;
    --a-warnung: #fab219;

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--a-grund);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--a-text);
}

/* Der Schatten steht direkt hier, MIT eigenen Werten (Pruefungsfund F2, Aufgabe 9):
   die Klasse mud-elevation-8 ist auf diesen Seiten wirkungslos -- sie setzt nur
   box-shadow: var(--mud-elevation-8), und die Variable erzeugt ausschliesslich der
   MudThemeProvider. Schlimmer: MudBlazor.min.css laedt in App.razor NACH app.css,
   ein verbliebenes mud-elevation-8 wuerde einen hier gesetzten Schatten wieder mit
   box-shadow:none ueberschreiben. */
.anmelde-karte {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 34px 36px 30px;
    border: 1px solid var(--a-linie);
    border-radius: 15px;
    background: var(--a-karte);
    box-shadow: 0 18px 40px rgba(45, 51, 60, .09), 0 2px 6px rgba(45, 51, 60, .05);
}

/* Marke links statt zentriert: Die Karte liest sich von oben links nach unten
   rechts wie ein Formular, nicht wie ein Plakat. */
.anmelde-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.anmelde-marke {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.016em;
    color: var(--a-text);
}

/* Das Markenzeichen wird per ::before gezeichnet, damit die Razor-Seiten kein
   zusaetzliches Element brauchen -- sie tragen nur den Namen im Text. */
.anmelde-marke::before {
    content: "SW";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--a-akzent);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.anmelde-unterzeile {
    margin-top: 6px;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--a-text2);
}

/* Ueberschrift der Karte. Frueher trug die Marke diese Rolle mit; getrennt ist
   klarer -- die Marke sagt WO man ist, die Ueberschrift WAS zu tun ist. */
.anmelde-titel {
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -.026em;
    line-height: 1.25;
    color: var(--a-text);
}

.anmelde-beschriftung {
    display: block;
    margin-bottom: 5px;
    font-size: .78125rem;
    font-weight: 500;
    color: var(--a-text2);
}

.anmelde-feld {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    margin-bottom: 16px;
    padding: 0 12px;
    font: inherit;
    font-size: .84375rem;
    color: var(--a-text);
    background: var(--a-feld);
    border: 1px solid var(--a-feldrand);
    border-radius: 9px;
}

.anmelde-feld::placeholder { color: var(--a-text3); }

.anmelde-feld:focus {
    outline: none;
    border-color: var(--a-akzent);
    box-shadow: 0 0 0 3px rgba(56, 108, 208, .15);
}

/* Blazor markiert ungueltige Felder mit .invalid (siehe oben im Stylesheet). Hier
   gewinnt der rote Rahmen ueber den Fokusring, damit ein falsches Feld auch
   waehrend der Eingabe rot bleibt. */
.anmelde-feld.invalid,
.anmelde-feld[aria-invalid="true"] {
    border-color: var(--a-fehler);
    box-shadow: 0 0 0 3px rgba(208, 59, 59, .13);
    outline: none;
}

.anmelde-merken {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 20px;
    font-size: .78125rem;
    color: var(--a-text2);
    cursor: pointer;
}

.anmelde-knopf {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: #fff;
    background: var(--a-akzent);
    border: none;
    border-radius: 9px;
    cursor: pointer;
}

.anmelde-knopf:hover { background: var(--a-akzent-tief); }

.anmelde-knopf:focus-visible {
    outline: 2px solid var(--a-akzent);
    outline-offset: 2px;
}

/* Als Verweis statt Schaltflaeche (ZweiFaktorErforderlich): Ein <a> ist von Haus aus
   inline und unterstrichen -- ohne diese Eigenschaften saehe derselbe Knopf je nach
   Element unterschiedlich aus. box-sizing, weil die Breitenangabe sonst mit dem
   Innenabstand zusammen ueber die Karte hinauslaeuft. */
a.anmelde-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

/* Trennt Passwort- und Passkey-Weg auf der Anmeldeseite. Eine Linie mit dem Wort
   in der Mitte -- ohne sie stuenden zwei Knoepfe untereinander und es saehe aus, als
   gehoerte der zweite zum ersten Formular. */
.anmelde-trenner-oder {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 4px;
    color: var(--a-text2);
    font-size: 0.85rem;
}

.anmelde-trenner-oder::before,
.anmelde-trenner-oder::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--a-feldrand);
}

.anmelde-knopf-zweitrangig {
    margin-top: 9px;
    color: var(--a-text2);
    background: transparent;
    border: 1px solid var(--a-feldrand);
}

.anmelde-knopf-zweitrangig:hover {
    background: var(--a-grund);
    color: var(--a-text);
}

/* Fliesstext in der Anmeldekarte. Die Karte selbst setzt nur Farbe und Rahmen; ohne
   eigene Regel erben Absaetze die Browser-Vorgaben und stehen zu eng am Knopf. */
.anmelde-hinweis {
    margin: 0 0 16px;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--a-text2);
}

.anmelde-hinweis:last-of-type { margin-bottom: 24px; }

.anmelde-links {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--a-linie);
    font-size: .78125rem;
}

.anmelde-links a {
    color: var(--a-akzent);
    font-weight: 500;
    text-decoration: none;
}

.anmelde-links a:hover { text-decoration: underline; }

.anmelde-fehler {
    display: block;
    margin: -10px 0 14px;
    font-size: .75rem;
    color: var(--a-fehler);
}

/* Meldungsband ueber dem Formular (StatusMessage). Frueher eine nackte Zeile Text;
   als Band ist auf einen Blick zu sehen, ob es eine Absage oder ein Hinweis ist.
   Die Faerbung steuert StatusMessage.razor ueber das "Error: "-Praefix -- ohne das
   Praefix waere eine Absage gruen (Pruefungsfund F1). */
.anmelde-band {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: .8125rem;
    line-height: 1.5;
    background: var(--a-akzent-flaeche);
    color: var(--a-text);
}

.anmelde-band-fehler { background: rgba(208, 59, 59, .10); }
.anmelde-band-warnung { background: rgba(250, 178, 25, .18); }

/* Zeile ueber einem Feld, die Beschriftung und einen Verweis nebeneinander traegt
   ("Passwort  ·  Vergessen?"). Ohne sie stuende der Verweis unter dem Feld und der
   Anwender fande ihn erst nach dem Fehlversuch. */
.anmelde-feldkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.anmelde-feldkopf .anmelde-beschriftung { margin-bottom: 0; }

.anmelde-feldkopf a {
    font-size: .78125rem;
    font-weight: 500;
    color: var(--a-akzent);
    text-decoration: none;
}

.anmelde-feldkopf a:hover { text-decoration: underline; }

/* Feldsymbole als Hintergrundbild statt als eigenes Element: <InputText> rendert ein
   nacktes <input>, ein Symbol davor braeuchte sonst einen Wrapper in jeder Seite.
   Die Farbe steckt im SVG (#868b92 = --a-text3) und wechselt daher nicht mit dem
   Zustand -- das ist gewollt, ein Symbol soll nicht um Aufmerksamkeit werben. */
.anmelde-feld-mail,
.anmelde-feld-schloss {
    padding-left: 39px;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 17px 17px;
}

.anmelde-feld-mail { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23868b92'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2.5'%20y%3D'5'%20width%3D'19'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'm3%206.5%209%206.5%209-6.5'%2F%3E%3C%2Fsvg%3E"); }
.anmelde-feld-schloss { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23868b92'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'4.5'%20y%3D'10'%20width%3D'15'%20height%3D'10.5'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2010V7.2a4%204%200%200%201%208%200V10'%2F%3E%3C%2Fsvg%3E"); }

/* Schlusszeile der Karte: kein Verweis, sondern ein Hinweis. Erbt den Trennstrich
   von .anmelde-links, aber nicht dessen Verweisfarbe. */
.anmelde-fussnote {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--a-linie);
    font-size: .71875rem;
    line-height: 1.45;
    color: var(--a-text3);
}

/* Die Vorgangskennung auf der Fehlerseite (Error.razor). Sie ist der einzige Faden
   zwischen dem, was der Anwender sieht, und dem Eintrag im Server-Protokoll --
   deshalb steht sie sichtbar da und nicht nur im Quelltext. */
.anmelde-kennung {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--a-grund);
    overflow: hidden;
}

.anmelde-kennung-marke {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text3);
    flex: 0 0 auto;
}

.anmelde-kennung code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .71875rem;
    color: var(--a-text2);
    /* Die Kennung ist laenger als die Karte breit -- umbrechen statt ueberlaufen,
       sonst schiebt sie die Karte auf. */
    overflow-wrap: anywhere;
    min-width: 0;
}


/* Absaetze ohne eigene Klasse. Zehn Account-Seiten tragen blankes <p> aus der
   ASP.NET-Vorlage; eine Regel hier ist billiger und haltbarer als zehn Edits --
   auch die naechste neue Seite erbt sie. */
.anmelde-karte p,
.konto-hauptbereich p {
    margin: 0 0 14px;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--a-text2, #676c74);
}

.konto-hauptbereich p { color: var(--k-text2, #676c74); }

.anmelde-karte p:last-child,
.konto-hauptbereich p:last-child { margin-bottom: 0; }

.anmelde-karte p a,
.konto-hauptbereich p a { color: var(--a-akzent, #386cd0); font-weight: 500; text-decoration: none; }
.anmelde-karte p a:hover,
.konto-hauptbereich p a:hover { text-decoration: underline; }

/* Einmalcodes: gross, mittig, gleiche Zeichenbreite. Ein sechsstelliger Code in
   Fliesstextgroesse laesst sich beim Abtippen aus der App leicht verlesen -- und man
   tippt ihn unter Zeitdruck, er gilt nur 30 Sekunden. */
.anmelde-feld-code,
.konto-feld-code {
    height: 52px;
    text-align: center;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: .3em;
    /* Der Buchstabenabstand haengt rechts am letzten Zeichen und schoebe den Text
       aus der Mitte -- der Innenabstand gleicht das aus. */
    padding-left: calc(12px + .3em);
}

.konto-feld-code { max-width: 320px; }



/* ── Konto ────────────────────────────────────────────────────────────────────
   Aufgabe 9: der Kontobereich (/Account/Manage/*) kam aus der ASP.NET-Vorlage als
   nacktes Bootstrap -- englisch und ohne jeden Bezug zur Gestaltung der restlichen
   Anwendung. Gleiches Problem wie bei "Anmeldung" oben (SSR ohne MudThemeProvider),
   gleiche Loesung: eigene konto-*-Klassen statt MudBlazor-Komponenten (die kaemen
   ueber [SupplyParameterFromForm] nie an) und statt der Bootstrap-Vorlagenklassen.

   SEIT 08/2026 eigene Variablen statt --mud-palette-* mit Ersatzwert -- Begruendung
   ausfuehrlich bei .anmelde-seite. Hier stehen sie erneut, weil .konto-seite und
   .anmelde-seite nie gemeinsam auf einer Seite vorkommen und ein gemeinsamer
   Vorfahre fehlt (beide sind das aeusserste Element ihrer Seite).

   UMBAU 08/2026: Frueher lag EINE grosse Karte (.konto-rahmen) um Kopf, Menue und
   Inhalt. Jetzt traegt nur noch der Inhalt die Karte; Kopfzeile und Seitenmenue
   stehen auf dem Grund. Das folgt der Anwendung dahinter -- dort steht das Menue
   auch neben dem Inhalt und nicht mit ihm im selben Kasten. Das Markup in
   ManageLayout.razor blieb dafuer unveraendert. */

.konto-seite {
    --k-grund: #f3f4f7;
    --k-karte: #ffffff;
    --k-linie: #dde0e4;
    --k-feldrand: #bfc4cc;
    --k-feld: #fdfdfe;
    --k-text: #2d333c;
    --k-text2: #676c74;
    --k-text3: #868b92;
    --k-akzent: #386cd0;
    --k-akzent-tief: #1d52bb;
    --k-akzent-flaeche: #e5f0ff;
    --k-fehler: #d03b3b;
    --k-gefahr-flaeche: rgba(208, 59, 59, .10);
    --k-warnung-flaeche: rgba(250, 178, 25, .18);
    --k-flaeche: #eaedf1;

    min-height: 100vh;
    display: flex;
    justify-content: center;
    /* Oben statt mittig: Die Zwei-Faktor-Einrichtung ist laenger als der Bildschirm.
       Mittig zentriert sprang die Seite beim Wechsel zwischen kurzen und langen
       Unterseiten. */
    align-items: flex-start;
    padding: 40px 24px;
    background: var(--k-grund);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--k-text);
}

/* Traegt keine Karte mehr (s. Kopfkommentar) -- nur noch die Breitenbegrenzung. */
.konto-rahmen {
    width: 100%;
    max-width: 1000px;
    height: fit-content;
}

/* Der Ausgang aus "Konto verwalten". Steht ueber dem Titel, weil er dort auch bei
   schmalen Fenstern ohne Scrollen sichtbar ist -- unten haette ihn niemand gefunden,
   der auf der Zwei-Faktor-Seite mit ihrem langen Text landet. */
.konto-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--k-text2);
}

.konto-zurueck:hover,
.konto-zurueck:focus-visible {
    color: var(--k-akzent);
}

.konto-titel {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.024em;
    color: var(--k-text);
}

.konto-unterzeile {
    margin: 5px 0 24px;
    font-size: .8125rem;
    color: var(--k-text2);
}

.konto-inhalt {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
}

.konto-nav { flex: 0 0 226px; }

/* Der Inhalt traegt jetzt die Karte. Rahmen statt schwerem Schatten -- dieselbe
   Sprache wie die Karten in der Anwendung. */
.konto-hauptbereich {
    flex: 1 1 340px;
    min-width: 0;
    box-sizing: border-box;
    padding: 26px 28px;
    border: 1px solid var(--k-linie);
    border-radius: 13px;
    background: var(--k-karte);
}

.konto-nav-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.konto-nav-link {
    display: block;
    padding: 0 11px;
    line-height: 34px;
    border-radius: 7px;
    color: var(--k-text2);
    text-decoration: none;
    font-size: .84375rem;
    font-weight: 500;
    letter-spacing: -.005em;
}

.konto-nav-link:hover {
    background: var(--k-flaeche);
    color: var(--k-text);
}

/* Weiche Flaeche statt Volltonfarbe: Ein blau ausgefuelltes Menueelement zog mehr
   Aufmerksamkeit auf sich als der Inhalt daneben, den es erklaert. */
.konto-nav-link.active {
    background: var(--k-akzent-flaeche);
    color: var(--k-akzent);
    font-weight: 600;
}

.konto-abschnitt-titel {
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.016em;
    color: var(--k-text);
}

.konto-beschriftung {
    display: block;
    margin: 16px 0 5px;
    font-size: .78125rem;
    font-weight: 500;
    color: var(--k-text2);
}

.konto-feld {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    height: 42px;
    margin-bottom: 4px;
    padding: 0 12px;
    font: inherit;
    font-size: .84375rem;
    color: var(--k-text);
    background: var(--k-feld);
    border: 1px solid var(--k-feldrand);
    border-radius: 9px;
}

.konto-feld:focus {
    outline: none;
    border-color: var(--k-akzent);
    box-shadow: 0 0 0 3px rgba(56, 108, 208, .15);
}

.konto-feld:disabled {
    color: var(--k-text3);
    background: var(--k-flaeche);
    border-color: var(--k-linie);
}

/* Blazor markiert ungueltige Felder mit .invalid -- der rote Rahmen gewinnt ueber
   den Fokusring, damit ein falsches Feld auch waehrend der Eingabe rot bleibt. */
.konto-feld.invalid,
.konto-feld[aria-invalid="true"] {
    border-color: var(--k-fehler);
    box-shadow: 0 0 0 3px rgba(208, 59, 59, .13);
    outline: none;
}

.konto-fehler {
    display: block;
    margin: 4px 0 12px;
    font-size: .75rem;
    color: var(--k-fehler);
}

.konto-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0;
    font-size: .84375rem;
    color: var(--k-text2);
    cursor: pointer;
}

.konto-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 6px 8px 6px 0;
    padding: 0 18px;
    font: inherit;
    font-size: .84375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: #fff;
    background: var(--k-akzent);
    border: none;
    border-radius: 9px;
    text-decoration: none;
    cursor: pointer;
}

.konto-knopf:hover { background: var(--k-akzent-tief); }

.konto-knopf:focus-visible {
    outline: 2px solid var(--k-akzent);
    outline-offset: 2px;
}

/* EIN GESPERRTER KNOPF MUSS GESPERRT AUSSEHEN.
   Die Voreinstellung des Browsers blasst einen disabled-Knopf ab -- aber nur, solange
   niemand Hintergrund und Schriftfarbe selbst setzt. Genau das tut .konto-knopf, und
   die eigene Regel gewinnt. Am 12.09.2026 auf der Passkey-Seite gemessen:
   disabled === true bei opacity 1, cursor: pointer und unveraendertem rgb(56,108,208),
   dazu der Farbwechsel beim Zeigen, weil :hover ungefiltert griff. Der Knopf sah aus
   wie jeder andere, reagierte auf den Mauszeiger und tat nichts. */
.konto-knopf:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Ohne diese Zeile wechselt auch der gesperrte Knopf beim Zeigen die Farbe und wirkt
   dadurch erst recht bedienbar. */
.konto-knopf:disabled:hover { background: var(--k-akzent); }

/* Loeschen und Abschalten: rot als UMRISS, nicht als Flaeche. Eine vollrote
   Schaltflaeche zieht das Auge zuerst an -- ausgerechnet die Aktion, die man am
   seltensten will. Rot wird sie erst beim Zeigen. */
.konto-knopf-gefahr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 6px 8px 6px 0;
    padding: 0 18px;
    font: inherit;
    font-size: .84375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--k-fehler);
    background: transparent;
    border: 1px solid var(--k-fehler);
    border-radius: 9px;
    text-decoration: none;
    cursor: pointer;
}

.konto-knopf-gefahr:hover {
    background: var(--k-fehler);
    color: #fff;
}

.konto-knopf-gefahr:focus-visible {
    outline: 2px solid var(--k-fehler);
    outline-offset: 2px;
}

/* ShowRecoveryCodes.razor: "Weiter" bis zur Bestaetigung der Checkbox gesperrt. */
.konto-knopf-deaktiviert {
    opacity: .45;
    pointer-events: none;
    cursor: not-allowed;
}

/* Pruefungsfund F3 (Aufgabe 9): ersetzt style="display: inline-block" in
   TwoFactorAuthentication.razor -- das "Diesen Browser vergessen"-Formular muss neben
   den konto-knopf-Links in derselben Zeile bleiben, statt als Block darunter zu
   rutschen. */
.konto-inline-form { display: inline-block; }

/* Hinweisbaender: Flaeche statt Rahmen. Ein umrandeter Kasten im umrandeten Kasten
   (die Inhaltskarte) erzeugte zwei Linien dicht nebeneinander. */
.konto-hinweis {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-radius: 10px;
    background: var(--k-warnung-flaeche);
    color: var(--k-text);
    font-size: .8125rem;
    line-height: 1.55;
}

.konto-hinweis-gefahr {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-radius: 10px;
    background: var(--k-gefahr-flaeche);
    color: var(--k-text);
    font-size: .8125rem;
    line-height: 1.55;
}

.konto-liste {
    margin: 16px 0;
    padding-left: 20px;
    font-size: .84375rem;
    line-height: 1.6;
    color: var(--k-text2);
}

.konto-liste li { margin-bottom: 14px; }

/* Schritt 1 (Aufgabe 9): loest die Inline-style="max-width: 220px" aus Aufgabe 8 ab,
   damit die QR-Code-Groesse demselben konto-*-Klassenmuster folgt wie alles andere
   hier. Der weisse Rahmen darum ist nicht Zierrat: Scanner brauchen die Ruhezone um
   den Code, und auf getoenten Flaechen fehlt sie sonst. */
.konto-qr-code {
    max-width: 192px;
    margin: 14px 0;
    padding: 12px;
    box-sizing: content-box;
    border: 1px solid var(--k-linie);
    border-radius: 11px;
    background: #fff;
}

.konto-qr-code svg { width: 100%; height: auto; display: block; }

.konto-wiederherstellungscodes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 8px;
    margin: 16px 0;
}

/* Jeder Code eine eigene Kachel statt Text in einem gemeinsamen Kasten: Wer sie
   abschreibt oder abfotografiert, verliert sonst leicht die Zeile. */
.konto-wiederherstellungscode {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid var(--k-linie);
    border-radius: 8px;
    background: var(--k-feld);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .8125rem;
    letter-spacing: .06em;
    color: var(--k-text);
    text-align: center;
}

.konto-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: .84375rem;
}

.konto-tabelle td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--k-linie);
    color: var(--k-text2);
}

/* AccountLayout.razor: kurzer Zwischenzustand beim Wechsel von interaktiv zurueck
   zu statisch (s. Kommentar dort), erscheint kurz auf JEDER /Account/*-Seite. */
.konto-lade-hinweis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: #f3f4f7;
    color: #868b92;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .875rem;
}

/* ---------------------------------------------------------------- Berichtsdesigner
   Das Blatt wird in Millimetern ausgelegt -- CSS beherrscht die Einheit selbst, die
   Szene fuehrt ohnehin nur Millimeter. Der Zoom sitzt als transform am Blatt; damit er
   den Platzbedarf im Fluss nicht veraendert, gibt der Rahmen die skalierte Groesse vor. */

.designer-buehne {
    overflow: auto;
    padding: 16px;
    background: var(--mud-palette-background-grey, var(--swx-app));
    border-radius: 4px;
}

.designer-zoomrahmen {
    /* Groesse wird je Zoomstufe gesetzt; hier nur der Ursprung fuer das Skalieren. */
    position: relative;
}

.designer-papier {
    position: relative;
    background: #fff;
    border: 1px solid #b0b0b0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transform-origin: top left;
    /* Immer helles Papier, auch im dunklen Erscheinungsbild: das Blatt zeigt, wie der
       Beleg gedruckt aussieht, und der wird nicht dunkel. */
    color: #000;
    overflow: hidden;
}

.designer-band {
    position: relative;
    border-bottom: 1px dashed rgba(0, 0, 0, .18);
    box-sizing: border-box;
}

.designer-band-marke {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 7px;
    line-height: 1;
    color: rgba(0, 0, 0, .35);
    pointer-events: none;
    user-select: none;
}

.designer-element {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
}

.designer-text {
    display: block;
    width: 100%;
    line-height: 1.15;
    white-space: pre-line;   /* die Vorlagen enthalten mehrzeilige Texte (Anschrift, Bank) */
}

.designer-linie {
    width: 100%;
}

.designer-bild {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #4a90d9;
    border: 1px dashed #4a90d9;
    background: rgba(74, 144, 217, .06);
}

/* Bearbeiten (Slice 4b): Auswahlrahmen und Anfasser. Die Anfasser sitzen mittig auf der
   Kante (transform: translate(-50%,-50%)) und bleiben in Bildpunkten -- ein in
   Millimetern bemessener Anfasser waere bei 50 % Zoom nicht mehr treffbar. */

.designer-buehne:focus-visible {
    outline: 2px solid var(--mud-palette-primary, var(--swx-acc));
    outline-offset: -2px;
}

.designer-element.ist-gewaehlt {
    outline: 1px solid var(--mud-palette-primary, var(--swx-acc));
    /* overflow:hidden am Element wuerde die ueberstehenden Anfasser abschneiden. */
    overflow: visible;
}

.designer-griff {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: #fff;
    border: 1px solid var(--mud-palette-primary, var(--swx-acc));
    border-radius: 1px;
    z-index: 2;
}

/* ── Fehlerbereich ────────────────────────────────────────────────────────────
   Der ErrorBoundary in MainLayout.razor ersetzt NUR den Seiteninhalt -- Rail,
   Reiter und Kopfleiste bleiben stehen. Damit das nicht wie ein zerbrochenes
   Layout aussieht, steht der Hinweis mittig in seiner eigenen Flaeche statt als
   Meldungsbalken oben links.

   Nutzt MudBlazor-Variablen MIT Ersatzwert: Hier gibt es den MudThemeProvider zwar
   (anders als auf den Account-Seiten), aber ein Fehler beim Hochfahren koennte ihn
   verfehlen -- und ausgerechnet die Fehleranzeige darf nicht mitfallen. */

.fehlerbereich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 460px;
    margin: 48px auto;
    padding: 32px 28px;
    border: 1px solid var(--mud-palette-lines-default, #dde0e4);
    border-radius: 13px;
    background: var(--mud-palette-surface, #fff);
    text-align: center;
}

.fehlerbereich-titel {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--mud-palette-text-primary, #2d333c);
}

.fehlerbereich-text {
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary, #676c74);
}

.fehlerbereich-knoepfe {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Der betroffene Gegenstand im Bestaetigungsdialog. Sichtbar machen, WAS getroffen
   wird -- nicht nur, DASS etwas getroffen wird. */
.bestaetigung-detail {
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray, #eaedf1);
}

.bestaetigung-gegenstand {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary, #2d333c);
    overflow-wrap: anywhere;
}

.bestaetigung-gegenstand-zusatz {
    margin-top: 2px;
    font-size: .71875rem;
    color: var(--mud-palette-text-secondary, #676c74);
}

/* ── Anwenderhilfe ────────────────────────────────────────────────────────────
   Typografie fuer das aus Markdown erzeugte HTML. Noetig, weil MudBlazor nur
   eigene Komponenten gestaltet: Ueberschriften, Listen und Tabellen aus Markdig
   treffen sonst auf gar nichts und sehen aus wie ein Rohentwurf -- derselbe
   Fehler, der am 04.08.2026 die beiden Zwangsseiten hat auffallen lassen.

   Absichtlich eng an MudBlazors Variablen: Die Hilfe ist Teil der Anwendung und
   soll nicht wie ein Fremdkoerper wirken. Faellt eine Variable aus (auf
   /Account/* gibt es keinen MudThemeProvider), greifen die Ersatzwerte. */
.hilfe-artikel {
    max-width: 68ch;                 /* Lesbarkeit: laengere Zeilen ermueden */
    color: var(--mud-palette-text-primary, var(--swx-ink));
    line-height: 1.7;
}

.hilfe-artikel h1 { font-size: 1.75rem; font-weight: 500; margin: 0 0 16px; }
.hilfe-artikel h2 { font-size: 1.35rem; font-weight: 500; margin: 32px 0 12px; }
.hilfe-artikel h3 { font-size: 1.1rem;  font-weight: 600; margin: 24px 0 8px; }

.hilfe-artikel p  { margin: 0 0 16px; }
.hilfe-artikel ul,
.hilfe-artikel ol { margin: 0 0 16px; padding-left: 24px; }
.hilfe-artikel li { margin-bottom: 6px; }

.hilfe-artikel a { color: var(--mud-palette-primary, var(--swx-acc)); }

.hilfe-artikel code {
    padding: 2px 6px;
    font-size: .875em;
    background: var(--mud-palette-background-gray, var(--swx-app));
    border-radius: 4px;
}

.hilfe-artikel pre {
    padding: 12px 16px;
    overflow-x: auto;                /* lange Zeilen scrollen, statt die Seite zu sprengen */
    background: var(--mud-palette-background-gray, var(--swx-app));
    border-radius: var(--mud-default-borderradius, 4px);
}

.hilfe-artikel pre code { padding: 0; background: none; }

.hilfe-artikel blockquote {
    margin: 0 0 16px;
    padding: 8px 16px;
    border-left: 3px solid var(--mud-palette-primary, var(--swx-acc));
    background: var(--mud-palette-background-gray, var(--swx-app));
}

.hilfe-artikel blockquote p:last-child { margin-bottom: 0; }

.hilfe-artikel table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: .9375rem;
}

.hilfe-artikel th,
.hilfe-artikel td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mud-palette-lines-default, var(--swx-line));
}

.hilfe-artikel th { font-weight: 600; }

/* Bilder (wwwroot/hilfe-bilder, Spec 2026-10-08-hilfe-bilder).
   Die Aufnahmen sind bis 1000 px breit und damit breiter als die Lesespalte:
   Text und Tabellen bleiben bei 68ch, ein Absatz, der nur ein Bild enthaelt,
   darf bis 1000 px. Schmaler als der Platz? max-width:100% + height:auto
   verkleinert -- kein Ueberlauf. Rahmen, damit helle Aufnahmen im dunklen
   Thema nicht ins Leere laufen. */
.hilfe-artikel { max-width: none; }
.hilfe-artikel > * { max-width: 68ch; }
.hilfe-artikel > p:has(> img) { max-width: 1000px; }

.hilfe-artikel img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 16px;
    border: 1px solid var(--mud-palette-lines-default, var(--swx-line));
    border-radius: 6px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hilfe-artikel img { filter: brightness(.92); }
}
:root[data-theme="dark"] .hilfe-artikel img,
.swx-dunkel .hilfe-artikel img { filter: brightness(.92); }

/* Reiterleiste vor den Panelinhalt legen.

   MudGrid zieht sein Spacing ueber negative Margins auf (Vorgabe Spacing=6:
   margin-top:-24px, s. MudBlazor.min.css). Ein Raster, das oben in einem Reiter-Panel
   sitzt, ragt damit 24px in die Reiterleiste hinein und nimmt dort die Klicks an,
   obwohl es unsichtbar ist. Gemessen am Kundendialog (Reiter 856,104 162x48): die
   Messpunkte ab y=129 trafen das Raster statt den Reiter -- die untere Haelfte jedes
   Reiters war tot, und weil der Reitertext senkrecht mittig steht, ging rund jeder
   zweite Klick auf die Beschriftung ins Leere.

   z-index statt Ausgleich des Ueberstands: beides beseitigt die Ueberlappung
   (gemessen, beide 24 von 24 Messpunkten frei), aber der Ausgleich haette den
   Panelinhalt ueberall um 24px nach unten geschoben. MudBlazors eigene Overlays
   liegen bei 1200+, die 1 hier kommt ihnen nicht in die Quere. */
.mud-tabs .mud-tabs-tabbar { z-index: 1; }

/* Hilfe und Melden aus einem offenen Formular heraus.

   Gemeldet aus dem Betrieb (11.08.2026, Route /artikel): "Wenn ich zb. das
   Artikelformular oeffne, kann ich nicht ein Rueckmeldung direkt ausfuehren und muss
   zurueck in die liste." Genau die Lage, in der man melden will -- man steht im
   Formular, und etwas geht nicht.

   URSACHE: nicht das Abdunkeln, sondern der Behaelter. .mud-dialog-container ist
   position:fixed ueber das ganze Fenster (er zentriert den Dialog) und liegt auf
   --mud-zindex-dialog. Playwright nennt ihn beim Namen: "subtree intercepts pointer
   events". Alles darunter -- die gesamte Kopfleiste -- nimmt keine Klicks mehr an.

   WARUM DER GANZE DRAWER GEHOBEN WIRD UND NICHT NUR DIE ZWEI KNOEPFE: .mud-drawer
   (wie zuvor .mud-appbar) traegt selbst z-index bei position:fixed und ist damit ein
   eigener Stapelkontext. Ein Kind darin laesst sich NICHT ueber den Dialog heben -- es
   bleibt am Wert seines Elternteils gedeckelt. Ein erster Anlauf setzte schwebende
   Zweitknoepfe daneben; deren Lage laesst sich aber nicht treffen.

   Gehoben wird der Drawer deshalb als Ganzes -- und sofort stillgelegt. Bedienbar
   bleiben genau zwei Elemente. Alles andere ist waehrend eines Dialogs mit Absicht
   gesperrt: Bereiche, Menue und Konto fuehren weg von der Seite. Die Kopfleiste
   (Mandantenwechsel, Abmelden) wird NICHT gehoben und bleibt unter dem Dialog gesperrt --
   der Mandantenwechsel zoege dem offenen Formular den Mandanten unter den Fuessen weg.
   (Bis 05.10.2026 war es umgekehrt: Hilfe und Melden standen in der Kopfleiste, und die
   wurde gehoben; seit sie am Fuss der Rail stehen, ist es der Drawer.)

   DIE ZWEI FILTER GEHOEREN ZUSAMMEN: Ueber der abdunkelnden Flaeche waere der Drawer
   sonst hell und saehe bedienbar aus, obwohl er es nicht ist. Der aeussere Filter
   dunkelt ihn ab, der innere nimmt es fuer die beiden Elemente zurueck
   (0,6 x 1,7 ~ 1). Wer einen davon aendert, muss den anderen ansehen.

   :has() statt Zustandsverfolgung in C#: kein Zaehler, der bei gestapelten Dialogen aus
   dem Tritt geraet, und kein Ereignis, das beim Abriss des Circuits haengen bleibt.
   Wessen Browser :has() nicht kann, kommt ueber Strg+Alt+M weiter (rueckmeldung.js). */
body:has(.mud-dialog-container) .mud-drawer {
    /* Zwei ueber dem Dialog: der Behaelter liegt auf --mud-zindex-dialog,
       die abdunkelnde Flaeche eins darueber. */
    z-index: calc(var(--mud-zindex-dialog, 1400) + 2);
    pointer-events: none;
    filter: brightness(.6);
}

body:has(.mud-dialog-container) .mud-drawer [data-test='hilfe-link'],
body:has(.mud-dialog-container) .mud-drawer [data-test='rueckmeldung-knopf'] {
    pointer-events: auto;
    filter: brightness(1.7);
}

/* Hohe Dialoge liegen nicht mehr unter der Kopfleiste (SB-29.0-05, 02.10.2026).

   URSACHE: .mud-dialog-container ist ueber das ganze Fenster gelegt und zentriert den
   Dialog darin. MudBlazor begrenzt die Dialoghoehe zwar auf Fenster minus Kopfleiste,
   zentriert sie aber im GANZEN Fenster -- ein hoher Dialog beginnt dadurch bei
   (Fenster - Dialog) / 2, also oberhalb der Kopfleistenkante. Bis 05.10.2026 war die
   Kopfleiste oben zudem ueber den Dialog gehoben (Regel darueber) und verdeckte dann den Titel;
   seitdem wird der Drawer gehoben und die Kopfleiste liegt unter dem Dialog -- der Abstand
   haelt den Dialog trotzdem unterhalb der Leiste.
   Gemessen bei 1920 x 855 am Dialog "Ereignis erfassen" (Anordnung des AG).

   EINE REGEL FUER ALLE DIALOGE: Der Behaelter nimmt oben die Hoehe der Kopfleiste als
   Innenabstand (zentriert wird damit im freien Bereich darunter), der Dialog bleibt
   um diesen Abstand plus einen Rand unten kuerzer, und nicht der ganze Dialog scrollt
   (MudBlazor: overflow-y:auto am Dialog), sondern sein Inhalt -- Titel und Knoepfe
   bleiben stehen. min-height:0 braucht der Inhalt, damit er im Flex-Container
   ueberhaupt schrumpfen darf.

   "body" davor: app.css wird VOR MudBlazor.min.css geladen (App.razor); bei gleicher
   Spezifitaet gewaenne MudBlazor. Die Kopfleistenhoehe kommt aus SwxTheme
   (AppbarHeight) ueber --mud-appbar-height. */
body .mud-dialog-container {
    box-sizing: border-box;
    padding-top: var(--mud-appbar-height, 56px);
    padding-bottom: 16px;
}

/* Dialoge liegen im freien Bereich RECHTS vom Drawer (Kopfleiste dunkel, 08.10.2026).

   URSACHE: Bei offenem Dialog wird der ganze Drawer ueber den Dialog gehoben (Regel weiter
   oben), damit Hilfe und Melden bedienbar bleiben. Ein breiter Dialog (MaxWidth.Medium =
   960 px) reicht auf einem Laptop mit seinem linken Rand unter den Drawer und wird dort
   abgedunkelt ueberdeckt. Gemessen (E2E DialogUnterDerRailTests, Dialog "Aus Excel-Mappe"):
   bei 1366 px Breite liegen 95 px des Dialogs unter dem Drawer, bei 1440 px 58 px.

   LOESUNG: Der Behaelter nimmt links die Breite des Drawers als Innenabstand, der Dialog wird
   damit im Bereich rechts davon zentriert -- dort, wo auch die Seite steht. Die Bereichsspalte
   bleibt sichtbar, es wird nichts beschnitten.

   DIE ZAHLEN stehen in MainLayout.razor am MudDrawer (Width="298px", MiniWidth="72px");
   der Dialog-Provider steht ausserhalb des Layouts, die Drawer-Variablen
   (--mud-drawer-width-left) sind dort nicht sichtbar. Wer eine Breite aendert, muss beide
   Stellen aendern. Ab dem Md-Breakpoint (960 px): darunter ist der Drawer temporaer und
   liegt nicht neben der Seite. Spezifitaet: :has() zaehlt wie eine Klasse, die Regel schlaegt
   damit "body .mud-dialog-container" oben und setzt nur padding-left. */
@media (min-width: 960px) {
    body:has(.mud-drawer--open) .mud-dialog-container {
        padding-left: 298px;
    }
    body:has(.mud-drawer--closed.mud-drawer-mini) .mud-dialog-container {
        padding-left: 72px;
    }
}

body .mud-dialog {
    max-height: calc(100vh - var(--mud-appbar-height, 56px) - 16px);
    max-height: calc(100dvh - var(--mud-appbar-height, 56px) - 16px);
    overflow-y: hidden;
}

body .mud-dialog > .mud-dialog-content {
    min-height: 0;
}

/* Belegliste + Beleg-Editor (Runde 2) -- Werte aus docs/design/katalog/Beleg2.dc.html
   und Belegliste.dc.html, auf die vorhandenen --swx-*-Tokens gemappt. */
.swx-karte { border: 1px solid var(--swx-line); border-radius: 13px; background: var(--swx-card); }
.swx-chip  { display: inline-flex; align-items: center; gap: 5px; height: 21px;
             padding: 0 8px; border-radius: 20px; font-size: 11px; font-weight: 700;
             letter-spacing: 0.01em; }
.swx-filter { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
              border-radius: 8px; border: 1px solid var(--swx-line);
              background: var(--swx-card); font-size: 12.5px; font-weight: 600;
              color: var(--swx-ink2); cursor: pointer; }
.swx-filter.on { background: var(--swx-accbg); color: var(--swx-acc);
                 border-color: transparent; }
.swx-fname { font-size: 10px; font-weight: 700; letter-spacing: 0.055em;
             text-transform: uppercase; color: var(--swx-ink3); }

/* Positionskarte (Runde 2, Slice 4) -- Werte aus Beleg2.dc.html. Der Wrapper
   (.swx-pzwrap) traegt data-pos-zeile/-id und umschliesst Kartenzeile + Detail. */
.swx-pzwrap + .swx-pzwrap { border-top: 1px solid var(--swx-line); }
.swx-pz:hover { background: var(--swx-hov); }
.swx-pz.aktiv { background: var(--swx-accbg); }
/* Zeilenarten (PositionsTypRules): Optional/Alternative mit Warnkante,
   Zwischensummen mit gedaempftem Hintergrund. */
.swx-pz.hinweis { border-left: 3px dashed var(--swx-warn); }
.swx-pz.berechnet { background: var(--swx-hov); }
.swx-nr { width: 30px; flex: 0 0 30px; font-size: 12px; color: var(--swx-ink3);
          font-variant-numeric: tabular-nums; }
/* Zeile aus einem LV (GAEB Paket 4): die OZ ist breiter als die laufende Nummer. */
.swx-nr.swx-nr-oz { width: auto; flex: 0 0 auto; min-width: 110px; white-space: nowrap; }  /* 110px: Typ-Sinnbild (20px + 4px Abstand) plus eine OZ wie 01.02.03.0010 in 12px tabellarischen Ziffern -- so fluchten die Spalten; laengere OZ verbreitern nur ihre Zeile */
.swx-griff { width: 20px; flex: 0 0 20px; color: var(--swx-ink3); opacity: .5;
             display: flex; align-items: center; }
.feldzelle { min-width: 0; }
.swx-taste { display: inline-flex; align-items: center; padding: 1px 6px;
             border-radius: 5px; border: 1px solid var(--swx-line); font-size: 10.5px;
             font-weight: 700; color: var(--swx-ink2); font-family: ui-monospace, monospace; }