/* ---------------------------------------------------------------------------
   HIER STANDEN VIER REGELN AUS DER BLAZOR-PROJEKTVORLAGE (Paket O13.24).

   Sie setzten die Schriftart der GANZEN Anwendung auf 'Helvetica Neue' und damit den
   Schriftstapel des Themes ausser Kraft, faerbten Links (#006bb7) und den Primaerknopf
   (#1b6ec2) im Vorlagenblau und legten einen weiss-blauen Fokusring an, den das
   Barrierefreiheitskonzept so nicht vorsieht.

   Sichtbar wurde das erst, als jemand auf die laufende Anwendung sah: Der Anmeldeknopf war
   Vorlagenblau, zwei Klicks weiter war der Arbeitsplatz tiefblau. Die Werte hier ueberschrieben
   sogar die `--bs-*`-Variablen weiter unten, weil sie die Eigenschaft direkt setzen.

   Ersetzt durch die Marke aus docs/ux/05 §2.1 und den Fokusring aus §2.5.
   --------------------------------------------------------------------------- */

/* Die Schriftart kommt aus dem Theme (MudTheme.Typography). Hier nur der Fallback fuer die
   Bootstrap-Seiten, die MudBlazor nicht anfasst. */
html, body {
    font-family: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Die Farben kommen aus der PALETTE, nicht aus einer festen Zahl (Spec S491).

   Hier stand die Marke als Hexwert. Seit R12.107 gibt es den Dunkelmodus, und die Anmelde- und
   Kontoseiten liegen im selben MainLayout wie der Arbeitsplatz — sie bekommen das Cookie also mit.
   Ein festes #1B5E82 auf der dunklen Flaeche #1B2127 ergibt 2,30:1; docs/ux/08 §5 verlangt 4,5:1
   fuer Text und 3:1 fuer den Fokusring, ausdruecklich "in Light UND Dark". Ueber die
   --mud-palette-*-Variablen folgt beides dem gewaehlten Erscheinungsbild, ohne zweiten Farbort. */
a, .btn-link {
    color: var(--mud-palette-primary);
}

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

/* Fokusring nach docs/ux/08: 2 px in der Primaerfarbe, 2 px Abstand — und NIE entfernt. */
.btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible,
.form-control:focus-visible, .form-check-input:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* Gueltig/ungueltig sind Statusaussagen — sie kommen aus dem Statusfarben-Kanon (docs/ux/05 §2.2)
   und nicht aus einem eigenen Gruen und Rot, das im Dunkelmodus stehen bliebe. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

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

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

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

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

/* Der Name sagt, worum es geht: ein DUNKLERER Rahmen als Bootstraps Vorgabe, damit das Kaestchen
   sichtbar bleibt. `lines-inputs` waere hier der falsche Griff — der Token ist heller als das feste
   #929292 und machte die Sache schlechter. `text-sekundaer` traegt die Absicht und folgt dem
   Erscheinungsbild (5,93:1 hell, 6,55:1 dunkel gegen die Flaeche). */
.darker-border-checkbox.form-check-input {
    border-color: var(--mud-palette-text-secondary);
}

/* HIER STANDEN ZWEI REGELN AUS DER BLAZOR-PROJEKTVORLAGE (Paket O13.24).
   
   Sie hoben Bootstraps `.form-floating > .form-control::placeholder { color: transparent }` auf und
   stellten den Platzhalter stattdessen RECHTSBÜNDIG ins Feld. Ergebnis auf jeder Identity-Seite:
   links das Label „E-Mail", rechts der Platzhalter „name@beispiel.de", beide gleichzeitig sichtbar,
   und das schwebende Label schwebte nie. Das ist das erste, was ein Nutzer von dieser Anwendung
   sieht.
   
   Sie stammen aus `dotnet new blazor` und hat nie jemand gelesen. Ohne sie tut `.form-floating`,
   was es soll: Der Platzhalter bleibt verborgen, das Label sitzt im Feld und wandert beim Tippen
   nach oben.

   Farben der Bootstrap-Seiten an das Theme aus docs/ux/05 §2 angeglichen — sonst steht neben dem
   tiefblauen Arbeitsplatz ein Bootstrap-blauer Anmeldeknopf. */
/* Die Bootstrap-Bruecke (Spec S491).

   Bootstrap liest seine Farben aus --bs-*. Standen dort Hexwerte, blieb der Kontobereich hell,
   waehrend der Arbeitsplatz daneben dunkel wurde — die Bruecke muss auf DIE Palette zeigen, nicht
   auf eine Kopie ihrer Werte. Ein zweiter Farbort waere genau die Doppelquelle, die docs/ux/05 §2
   untersagt ("Beide Quellen speisen sich aus EINER kanonischen Token-Tabelle").

   Bewusst nur ZWEI Abstufungen: Die Palette kennt den Grundton und seine Abdunklung. Eine dritte,
   noch dunklere Stufe fuer :active gaebe es nur als erfundenen Wert ohne Quelle — Bootstrap
   unterscheidet den gedrueckten Zustand ohnehin zusaetzlich ueber seinen inneren Schatten. */
:root {
    --bs-primary: var(--mud-palette-primary);
    --bs-primary-rgb: var(--mud-palette-primary-rgb);
    --bs-link-color: var(--mud-palette-primary);
    --bs-link-color-rgb: var(--mud-palette-primary-rgb);
    --bs-link-hover-color: var(--mud-palette-primary-darken);
    --bs-border-color: var(--mud-palette-lines-default);
    --bs-border-radius: 4px;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.btn-primary {
    --bs-btn-color: var(--mud-palette-primary-text);
    --bs-btn-bg: var(--mud-palette-primary);
    --bs-btn-border-color: var(--mud-palette-primary);
    --bs-btn-hover-color: var(--mud-palette-primary-text);
    --bs-btn-hover-bg: var(--mud-palette-primary-darken);
    --bs-btn-hover-border-color: var(--mud-palette-primary-darken);
    --bs-btn-active-bg: var(--mud-palette-primary-darken);
    --bs-btn-active-border-color: var(--mud-palette-primary-darken);
    --bs-btn-disabled-bg: var(--mud-palette-primary-lighten);
    --bs-btn-disabled-border-color: var(--mud-palette-primary-lighten);
}

/* Die Eingabefelder der Kontoseiten — punktgenau statt ueber --bs-body-bg.

   Bootstrap zieht den Feldhintergrund aus --bs-body-bg, und diese Variable faerbt zugleich den
   BODY. Sie global umzuhaengen haette das Erscheinungsbild der ganzen Seite an einer Stelle
   entschieden, die "Formularfeld" heisst — deshalb hier nur die Felder selbst. */
.form-control, .form-select {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-inputs);
}

.form-control::placeholder {
    color: var(--mud-palette-text-secondary);
}

.form-floating > label,
.form-label,
.form-text {
    color: var(--mud-palette-text-secondary);
}

.form-control:focus {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--mud-palette-primary-rgb), .25);
}

/* Sprung-zum-Inhalt (Spec S236, WCAG 2.4.1): unsichtbar, bis er den Tastaturfokus bekommt.
   Nicht display:none — dann wäre er auch für die Tastatur weg. */
.ms-sprunglink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    border: 2px solid currentColor;
    border-radius: 0 0 4px 0;
}

    .ms-sprunglink:focus,
    .ms-sprunglink:focus-visible {
        left: 0;
    }

/* Für Screenreader vorhanden, optisch nicht. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sortierbare Tabellenköpfe (Spec S267).
   Der Kopf ist ein echter Knopf, damit er per Tastatur erreichbar ist — er soll aber wie eine
   Kopfzeile aussehen, nicht wie eine Schaltfläche. */
.ms-sortierkopf {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}

.ms-sortierkopf:hover {
    text-decoration: underline;
}

.ms-sortierkopf:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ms-sortierpfeil {
    /* Der Pfeil ist reine Wiederholung des aria-sort am th — für Screenreader also Doppelung. */
    font-size: 1rem;
}

/* Kommando-Palette (Spec S269).
   Eigene Formatierung statt MudOverlay/MudDialog: Die Palette wird per Tastatur geöffnet, bevor
   irgendein MudBlazor-Dialogdienst im Spiel ist, und muss ohne dessen Zustand auskommen. */
.ms-palette-hintergrund {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1500;
    border: none;
    padding: 0;
    cursor: default;
}

.ms-palette {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(38rem, calc(100vw - 2rem));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    z-index: 1501;
    overflow: hidden;
}

.ms-palette-eingabe {
    font: inherit;
    font-size: 1.1rem;
    padding: 1rem;
    border: none;
    border-bottom: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    background: transparent;
    color: inherit;

    /* Der Vorgabe-Ring des Browsers laege quer ueber der Kante des Panels. Er wird deshalb nur
       ERSETZT, nicht entfernt — siehe die Regel darunter. docs/ux/08 §5: „nie via outline:none". */
    outline: none;
}

/* Der Fokusring des Suchfeldes (docs/ux/08 §5: 2 px in der Primaerfarbe, Kontrast >= 3:1).

   Hier stand nur `outline: none` und sonst nichts. Das Feld bekommt den Fokus, sobald die Palette
   aufgeht — es war also der EINE Ort der Anwendung, an dem der Fokus regelmaessig landet und
   trotzdem unsichtbar war. Der Versatz zeigt nach INNEN: Das Feld sitzt buendig im Panel, ein
   aeusserer Ring wuerde vom Rand beschnitten. */
.ms-palette-eingabe:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.ms-palette-liste {
    overflow-y: auto;
    padding: .25rem 0;
}

.ms-palette-gruppe {
    padding: .5rem 1rem .25rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
}

.ms-palette-zeile {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    /* 44 px (Paket O10.2/O10.3): Seit die Palette der Sucheinstieg auf dem Telefon ist, sind ihre
       Zeilen Bedienziele für den Daumen — vorher waren sie 40 px hoch. Sie sind seit O10.6 keine
       <button> mehr, sondern role="option"; die zentrale Knopfregel greift hier also nicht. */
    min-height: 44px;
    padding: .5rem 1rem;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ms-palette-zeile:hover,
.ms-palette-zeile-aktiv {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .06));
}

.ms-palette-bereich {
    margin-left: auto;
    font-size: .8rem;
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
}

.ms-palette-leer,
.ms-palette-fuss {
    padding: .75rem 1rem;
    font-size: .8rem;
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
}

.ms-palette-fuss {
    border-top: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
}

/* Diagramme (Spec S271). Die Datentabelle bleibt erreichbar, steht aber eingeklappt — sie ist die
   Textalternative, nicht die Hauptdarstellung. */
.ms-diagramm {
    width: 100%;
}

/* ============================================================================================
   Diagrammhöhe: die Legende gehört dazu (Befund S505, 05.09.2026)

   DER BEFUND: Auf `/auswertungen` lief die Legende der Bestandsverteilung in Firefox über die
   Tabelle darunter. In Chromium nicht.

   DIE URSACHE liegt in MudBlazors eigener Gestaltung: Der Rahmen bekommt vom Baustein die feste
   `height` der Zeichenfläche und dazu `min-height: fit-content`, damit die Legende darunter noch
   Platz findet. Chromium löst das nach Norm auf — `min-height` schlägt `height`, der Rahmen wächst
   von 360 px auf 489 px. Firefox setzt `fit-content` an dieser Stelle nicht um, behält die 360 px
   und lässt die Legende herausragen.

   DIE ANTWORT: Die feste Höhe gilt der ZEICHENFLÄCHE, nicht dem ganzen Baustein — sie steht ohnehin
   am SVG selbst. Der Rahmen darf sich nach seinem Inhalt richten. `!important`, weil die Höhe als
   Stilattribut am Element steht und sonst nicht zu erreichen ist.

   NUR FÜR DEN DONUT: Linien- und Balkendiagramme messen ihre Fläche selbst (`MatchBoundsToSize`);
   dort ist die Höhe des Rahmens ein Eingabewert der Rechnung und darf nicht angetastet werden.
   ============================================================================================ */

.ms-diagramm-flaeche[data-typ="Donut"] > .mud-chart {
    height: auto !important;
}

.ms-diagramm-daten > summary {
    cursor: pointer;
    font-size: .85rem;
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
    padding: .25rem 0;
}

.ms-diagramm-daten[open] > summary {
    margin-bottom: .5rem;
}

/* ============================================================================================
   Bedienzielgröße: mindestens 44 × 44 px (Paket O10.2, UI-GUIDELINES §5, WCAG 2.5.5)

   GEMESSEN, NICHT GESCHÄTZT (Playwright, 26.08.2026): Auf dem Cockpit waren 91 von 96 sichtbaren
   Bedienzielen kleiner als 44 px, in der Kundenliste 100 von 106. Die Vorgaben von MudBlazor liegen
   bei 36–38 px für Knöpfe, 38 × 38 für Icon-Knöpfe und 41 px für Navigationseinträge.

   WARUM DAS ZÄHLT: Die Anwendung ist eine PWA und wird im Außendienst auf dem Telefon bedient — mit
   dem Daumen, oft im Stehen. 38 px sind auf einem Touchscreen rund 6 mm; die Fingerkuppe eines
   Erwachsenen misst 8 bis 10. Jeder Fehlgriff auf einem Löschknopf ist einer zu viel.

   ZENTRAL UND NICHT JE KNOPF: 60 Icon-Knöpfe und 159 Textknöpfe einzeln zu ändern hieße, dass der
   nächste neue Knopf wieder zu klein ist. Hier steht die Regel einmal.

   MIN- STATT FESTER GRÖSSE: Ein breiter Knopf soll breit bleiben; nur die Untergrenze steigt. Und
   nur die Untergrenze — die Innenabstände bleiben unangetastet, sonst wüchse jede Tabelle mit. */
.mud-button-root,
.mud-icon-button,
.mud-nav-link,
.mud-tab {
    min-height: 44px;
    min-width: 44px;
}

/* Die Blätterleiste (Spec S515, Paket B17): MudBlazor setzt `.mud-pagination .mud-pagination-item>*` auf
   `min-width: 32px` — spezifischer als die Regel oben, also gewann sie. Gemessen am 13.09.2026 auf der
   Kundenliste: Seitenknöpfe 32 × 44 px, die Höhe hob die Regel oben, die Breite nicht. Dieselbe Spezifität
   wie bei MudBlazor, danach geladen — damit gilt die Untergrenze des Hauses auch hier. */
.mud-pagination .mud-pagination-item > * {
    min-width: 44px;
}

/* Die Brotkrumen sind Navigationsziele wie die Einträge der Seitenleiste (Spec S515, Paket B8). Mit
   21 px Höhe unterschritten ihre Verweise nicht nur die 44 px dieses Hauses, sondern auch die 24 px aus
   WCAG 2.2 (2.5.8) — gemessen auf jeder Seite mit Pfad. Nur die Höhe steigt; die Zeile bleibt eine Zeile. */
.mud-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Und die Breite (B17): „Start" war 33 px breit — die Untergrenze des Hauses gilt in beide Richtungen. */
    min-width: 44px;
}

/* Stufen ohne Verweis (der Bereich, der Titel der geöffneten Akte) zeigt MudBlazor als „deaktiviert" —
   in der Farbe für gesperrte Bedienelemente, #9AA3AC auf #F5F6F8, gemessen 2,36:1 (Spec S515, B6). Sie
   sind aber nicht gesperrt, sondern Text: ein Teil des Pfads, den man lesen können muss. Die
   Zweitschriftfarbe hält 5,5:1 und bleibt vom Verweis unterscheidbar. */
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled > a {
    color: var(--mud-palette-text-secondary);
}

/* Die Ziele im Admin-Cockpit (Spec S515, Paket B47): Verweise untereinander, je 21 px hoch und ohne Abstand —
   unter den 24 px aus WCAG 2.2 (2.5.8), und die Ausnahme „Spacing" greift nicht: Die Kreise um die Mitten liegen
   21 px auseinander und schneiden sich. Gemessen am 14.09.2026 von drei Rollen, 30 Verweise. Eine Zeile je
   Verweis wie bisher (`d-block`), nur mit Untergrenze. */
.ms-admin-ziel {
    display: flex;
    align-items: center;
    min-height: 24px;
}

/* Die Zahlknöpfe der dichten Zahlentabelle (Teamcockpit, Paket N15; Befunde 20261021-01/-02/-31). Die Fingerregel oben (44 × 44) würde jede Zeile der Verteilung auf 44 px
   aufblasen — auf einem Bildschirm mit Maus ist das Verschwendung, und die Zahlen stehen absichtlich dicht. Dort gilt WCAG 2.2, SC 2.5.8 (AA): mindestens 24 × 24 px; der Knopf hat
   24 px Breite auch bei der Ziffer „0“ (vorher 20 px: der Innenabstand stand inline am Knopf und schlug jede Regel hier). Auf dem schmalen Schirm — dort bedient der Daumen — gilt die
   Fingerregel wieder voll. `data-ms-dicht` sagt den Prüfagenten, dass die 44 px am Bildschirm mit Maus bewusst nicht verlangt werden (agenten/messrunde.mjs). */
.ms-zahlknopf.mud-button-root {
    min-width: 24px;
    min-height: 28px;
    padding: 0 6px;
}

@media (max-width: 600px) {
    .ms-zahlknopf.mud-button-root {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Der Schalter ist ein Sonderfall: Angeklickt wird nicht die Beschriftung, sondern der Knopf darin.
   Ohne diese Zeile bliebe das eigentliche Ziel bei 38 px, obwohl die Zeile daneben hoch genug ist. */
.mud-switch .mud-button-root,
.mud-checkbox .mud-button-root,
.mud-radio .mud-button-root {
    min-height: 44px;
    min-width: 44px;
}

/* NACHTRAG (Paket S491): Die Regel oben fasst MudBlazor-Klassen. Der Umschalter für hell/dunkel
   (Paket R12.107) ist aber ein NACKTES <button> — wie der Sprachumschalter ein <summary> ist, und
   dessen Stilblock warnt seit O10.2 wörtlich davor: „Die zentrale Regel in app.css greift hier
   nicht." R12.107 ist in dieselbe Falle gelaufen: 8 px Innenabstand um ein 20-px-Icon ergeben
   36 × 36. Gefunden hat es der vorhandene Zielgrößen-Wächter — er war seit jenem Commit rot, auf
   sechs Seiten gleichzeitig.

   Nur die Untergrenze und die Zentrierung; Innenabstand und Farbe bleiben, wo sie sind. */
.ms-themawahl-knopf {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
}

/* AUSNAHME mit Grund: Der sortierbare Tabellenkopf ist ein Knopf, der wie eine Kopfzeile aussehen
   soll (Spec S267). Eine Mindestbreite von 44 px risse schmale Spalten wie „Nr." auseinander; die
   Höhe genügt, weil er die ganze Kopfzeile ausfüllt. */
.ms-sortierkopf {
    /* 24 px statt 0 (13.10.2026): „Ist" war 13 px breit, „Soll" 20 px (finanzen/courtage, buchungsjournal) — unter WCAG 2.5.8, und die Köpfe stehen dicht
       nebeneinander, die Ausnahme „Spacing" greift nicht. 24 px reißen auch schmale Spalten wie „Nr." nicht auseinander. */
    min-width: 24px;
    min-height: 44px;
    justify-content: center;
}

/* ============================================================================================
   Drei Hüllen-Modi statt zwei (Paket O10.4, docs/ux/09 §5)

   | Breite      | Modus       | Schublade                                   |
   |-------------|-------------|---------------------------------------------|
   | < 768 px    | Kompakt     | ausgeblendet, Menüknopf klappt sie auf      |
   | 768–1279 px | Mittel      | Icon-Rail, Gruppenklick öffnet ein Fly-out  |
   | ≥ 1280 px   | Weit        | volle Sidebar, per Schalter zur Rail        |

   GEMESSEN (Playwright, 26.08.2026, vorher): Bei 768 px war die Schublade 0 × 0 und die Anwendung
   im Telefon-Modus — auf dem iPad hochkant also, obwohl dort laut docs/ux/09 die Rail vorgesehen
   ist. Zugleich standen **180 Navigationsziele im DOM, 90 davon sichtbar**: NavMenu war zweimal
   eingebunden (Paket O10.10).

   ZWEI DINGE MACHEN DEN UNTERSCHIED ZUM GESCHEITERTEN ANLAUF VOM VORMITTAG:

   1. Die Schublade steht auf `Breakpoint.Xs` — MudBlazor blendet sie damit **nie** selbst aus.
      Vorher musste eine Regel gegen MudBlazors Ausblendung ankommen (`display: flex !important`
      setzte sich nicht durch). Etwas zu verbergen, das sichtbar ist, gelingt dagegen immer.

   2. Die Breite wird nicht überboten, sondern **an ihrer Quelle gesetzt**. Gemessen: MudBlazor führt
      `--mud-drawer-width-left` auf `.mud-layout` und leitet daraus *sowohl* die Breite der Schublade
      *als auch* den linken Rand des Inhalts ab. Wer stattdessen `width` und `margin-left` einzeln
      überschreibt, hat zwei Regeln, die auseinanderlaufen können — und genau das war beim ersten
      Versuch zu sehen: Schublade 240 px, Inhalt 240 px eingerückt, obwohl beides 72 sein sollte.
      `!important` ist nötig, weil MudBlazor die Angabe als Inline-Stil schreibt.

   ÜBER EIGENSCHAFTEN UND NICHT ÜBER DOPPELTE REGELN: Die Rail gilt in zwei Fällen — zwischen 768
   und 1279 px *und* ab 1280 px, wenn der Schalter gesetzt ist. Zweimal derselbe Regelblock liefe
   früher oder später auseinander. Beide Fälle setzen deshalb dieselben drei Eigenschaften. */
.mud-layout {
    --ms-navlabel: block;
    --ms-flyout: static;
    --ms-railbreite: 72px;
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    .mud-layout {
        --mud-drawer-width-left: var(--ms-railbreite) !important;
        --ms-navlabel: none;
        --ms-flyout: absolute;
    }
}

/* Zwei Selektoren, EIN Regelblock (Paket O13.6): Das Kästchen ist die Bedienung, die Kennzeichnung
   am <html> ist der Vorgriff aus dem lokalen Speicher — sie steht schon vor dem ersten Zeichnen, das
   Kästchen erst, wenn der Körper geparst ist. Zwei getrennte Blöcke liefen früher oder später
   auseinander; deshalb dieselbe Regel für beide Fälle. */
.mud-layout:has(.ms-schublade-schalter:checked),
.ms-schublade-zu .mud-layout {
    --mud-drawer-width-left: var(--ms-railbreite) !important;
    --ms-navlabel: none;
    --ms-flyout: absolute;
}

/* Die Beschriftungen und der Aufklapppfeil verschwinden in der Rail — die Icons bleiben.
   Der Gruppenknopf trägt sein `aria-label` ohnehin selbst („Toggle Bestand"): Für Hilfsmittel
   ändert sich also nichts, nur für das Auge. */
.mud-drawer .mud-nav-link-text,
.mud-drawer .mud-nav-link-expand-icon {
    display: var(--ms-navlabel);
}

/* Das Fly-out: In der Rail wird der aufgeklappte Bereich zur Überlagerung neben der Rail, statt sie
   in die Länge zu ziehen. Ausgelöst wird es vom gewöhnlichen Aufklappen — MudNavGroup ist eine
   interaktive Insel und tut das längst, es sieht nur anders aus. */
.mud-drawer .mud-nav-group {
    position: relative;
}

.mud-drawer .mud-nav-group > .mud-collapse-container {
    position: var(--ms-flyout);
    left: var(--ms-railbreite);
    top: 0;
    min-width: 240px;
    background: var(--mud-palette-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1250;
}

/* Ohne das schnitte die Rail ihr eigenes Fly-out ab. In der Rail wird nicht gescrollt: Acht
   Bereichsknöpfe zu je 44 px passen auf jeden Bildschirm, der breit genug für eine Rail ist. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .mud-drawer {
        overflow: visible;
    }
}

.mud-layout:has(.ms-schublade-schalter:checked) .mud-drawer,
.ms-schublade-zu .mud-drawer {
    overflow: visible;
}

/* Der Schalter: ein Kontrollkästchen, das man nicht sieht, aber mit der Tastatur erreicht.
   Sichtbar ist die Beschriftung daneben. Erst ab Lg — darunter ist die Schublade schon Rail oder
   ausgeklappt, ein Schalter hätte dort nichts zu schalten. */
.ms-schublade-schalter {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ms-schublade-knopf {
    display: none;
}

@media (min-width: 1280px) {
    .ms-schublade-knopf {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        cursor: pointer;
    }

    .ms-schublade-schalter:focus-visible + .ms-schublade-knopf {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* Kompakt (< 768): Die Schublade ist fort, der Menüknopf holt sie zurück. Sie ist **dieselbe**
   Schublade wie in den anderen Modi — genau das ist der Unterschied zu vorher, wo eine zweite
   Kopie der Navigation im Aufklapp-Panel lag und 90 Ziele doppelt im DOM standen. */
@media (max-width: 767.98px) {
    .mud-layout {
        --mud-drawer-width-left: 0px !important;
    }

    .mud-drawer {
        display: none;
    }

    .mud-appbar:has(.ms-mobilnav[open]) ~ .mud-drawer {
        display: block;
        position: fixed;
        top: var(--mud-appbar-height, 64px);
        bottom: 0;
        left: 0;
        width: min(300px, 85vw);
        overflow-y: auto;
        z-index: 1300;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
}

/* Ab Md braucht es den Menüknopf nicht — dort steht die Schublade. */
@media (min-width: 768px) {
    .ms-mobilnav {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Bestandssuche in der App-Leiste (Paket O13.22, docs/ux/11)

   VORHER: Ein MudTextField mit Label UND Hilfetext in einer 64 px hohen Leiste. Das schwebende
   Label wurde oben abgeschnitten, „Strg+K" hing unten in den Inhalt hinein, und der Platzhalter
   stand in dunklem Grau auf der Primärfläche. Kein Test konnte das sehen — bUnit rendert ohne CSS,
   die E2E-Prüfungen greifen über data-testid.

   Beides ist im Markup weg; hier bleibt die Lesbarkeit auf farbiger Fläche.
   --------------------------------------------------------------------------- */

.ms-topsuche {
  position: relative;
  min-width: 240px;
  max-width: 460px;
  width: 100%;
}

/* Das Feld sitzt in der Leiste, nicht in einem Formular: kein Außenabstand, volle Höhe nutzen. */
.ms-topsuche-feld.mud-input-control {
  margin: 0;
}

.ms-topsuche-feld .mud-input-outlined-border {
  border-color: color-mix(in srgb, var(--ms-leiste-text, #fff) 42%, transparent);
  transition: border-color var(--ms-motion-schnell, 120ms) cubic-bezier(.2, 0, .2, 1);
}

.ms-topsuche-feld:hover .mud-input-outlined-border {
  border-color: color-mix(in srgb, var(--ms-leiste-text, #fff) 70%, transparent);
}

/* DIE SCHRIFT DES SUCHFELDS FOLGT DER LEISTE, NICHT WEISS (S512, W1.2).
   Das Feld sitzt auf der App-Leiste, und die trägt die Markenfarbe des Hauses. Ein festes #fff
   stimmte genau so lange, wie die Marke dunkel war — bei einer hellen Hausfarbe wäre die Eingabe
   unsichtbar gewesen, und zwar erst beim Kunden. */
.ms-topsuche-feld .mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--ms-leiste-text, #fff);
  border-width: 2px;
}

.ms-topsuche-feld .mud-input-root,
.ms-topsuche-feld input {
  color: var(--ms-leiste-text, #fff);
}

/* `opacity: 1`, weil Browser Platzhalter sonst zusätzlich aufhellen — auf farbiger Fläche
   verschwindet er dann fast.
   90 % statt 72 % (Spec S515, Paket B6): Auf der Feldfläche über der Leiste ergaben 72 % rund 3,6:1 —
   ein Platzhalter ist Text und braucht 4,5:1. Mit 90 % sind es rund 4,7:1 in der Hausfarbe. */
.ms-topsuche-feld input::placeholder {
  color: color-mix(in srgb, var(--ms-leiste-text, #fff) 90%, transparent);
  opacity: 1;
}

.ms-topsuche-feld .mud-input-adornment .mud-icon-root,
.ms-topsuche-feld .mud-input-clear-button .mud-icon-root {
  color: color-mix(in srgb, var(--ms-leiste-text, #fff) 85%, transparent);
}

/* Das Tastenkürzel im Feld — nicht darunter.
   VOLLTON STATT DURCHSCHEINEND (Spec S515, Paket B6): 72 % Leistentext auf 14 % Leistentext über der
   Feldfläche ergaben rund 2,9:1 — axe meldete es auf jeder Seite, weil das Kürzel in der Leiste steht.
   Elf Pixel Schrift brauchen 4,5:1. Text und Grund der Leiste selbst tragen den Kontrast, den die Leiste
   ohnehin halten muss (Hausfarbe rund 7:1), und folgen damit jeder Hausfarbe mit. */
.ms-topsuche-kuerzel {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font: 600 0.6875rem/1 var(--ms-font-basis, inherit);
  letter-spacing: 0.02em;
  color: var(--ms-leiste-text, #fff);
  background: var(--ms-leiste-grund, #1B5E82);
  border: 1px solid color-mix(in srgb, var(--ms-leiste-text, #fff) 28%, transparent);
  border-radius: 3px;
  padding: 3px 6px;
}

/* Auf schmalen Fenstern zählt jeder Millimeter — das Kürzel gibt es dort ohnehin nicht. */
@media (max-width: 1279.98px) {
  .ms-topsuche-kuerzel { display: none; }
}

/* Prüfmarke: messbar für Playwright, unsichtbar für Menschen (Paket O13.25).

   NICHT `display:none` und NICHT `visibility:hidden` — beides gilt Playwright als unsichtbar, und
   die 46 Wartestellen der E2E-Suite liefen in die Zeitgrenze. Ein Pixel mit ausgeschnittenem Inhalt
   hat eine Fläche und zählt damit als sichtbar. */
.ms-pruefmarke {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Verweis auf ein Fachobjekt (Spec S419, G2) — Paket O13.26

   DIESE REGELN STANDEN IN `EntityLink.razor.css`, ALSO BEREICHSBEZOGEN. Dort haben sie nie
   gegriffen: `.ms-entitylink` steht auf einem `<MudLink>` — einer KOMPONENTE. Blazor hängt die
   Bereichskennung (`b-xxxxxxxxxx`) nur an HTML-Elemente, nie an Komponenten. Der Selektor
   `.ms-entitylink[b-xxxxxxxxxx]` fand also nichts.

   Sichtbar wurde das am Kundenverweis in der Vertragsakte: „Hanna UngerKD-001045", ohne Abstand,
   weil das `gap` des Flex-Behälters nie ankam. Die inneren `<span>` sind HTML und trugen ihre
   Kennung — deshalb wirkte nur die Hälfte der Datei, und das sieht aus wie ein Textfehler statt
   nach einem Stylesheet, das ins Leere zeigt.
   --------------------------------------------------------------------------- */

.ms-entitylink {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    max-width: 100%;
    vertical-align: baseline;
}

/* Klickziel mindestens 24 px hoch (Paket R13.4.13, WCAG 2.2 SC 2.5.8 AA). Zwanzig Agentenbefunde maßen die Verweise
   mit 21 px — die Zeilenhöhe der Schrift; im Browser nachgestellt, bevor hier etwas geändert wurde (KlickzielE2eTests).
   Nur der Verweis, nicht der Text eines gesperrten Ziels: Der ist kein Klickziel. Die Schrift bleibt mittig
   (`align-items: center` oben). */
a.ms-entitylink {
    min-height: 24px;
}

.ms-entitylink-icon {
    flex: 0 0 auto;
    opacity: 0.7;
}

.ms-entitylink-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Zusatz (Nummer, Ort) tritt über die Zweitschriftfarbe zurück, nicht über Durchsichtigkeit (Spec S515,
   Paket B27): `opacity: 0.7` auf Verweisfarbe unterschritt 4,5:1 — axe meldete es in jeder Akte mit
   Verweisen. Die Zweitschriftfarbe hält 5,5:1 und folgt dem Theme. */
.ms-entitylink-zusatz {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: var(--mud-palette-text-secondary);
}

/* Ein Objekt, das es nicht mehr gibt, darf nicht wie ein anklickbarer Name aussehen — aber es
   verschwindet auch nicht spurlos: In einer Historie ist „gelöscht" eine Auskunft. */
.ms-entitylink-leer {
    font-style: italic;
    opacity: 0.6;
}


/* ---------------------------------------------------------------------------
   Werkzeugleisten einer Liste (Paket R10.1)

   DER BEFUND: Der Auftraggeber sah die Knöpfe rechts oben „nicht aufgeräumt", und die Messung am
   laufenden Stand gab ihm dreifach recht:

   1. „ALS EXCEL EXPORTIEREN" war ABGESCHNITTEN. Die Beschriftung braucht 133 px, der Knopf bekam
      121 px. Grund: Er saß mit dem Filter-Rücksetzer zusammen in einer Rasterzelle von 2/12 (auf
      manchen Seiten sogar 1/12 = 97 px). Seit Paket R1.1 bricht eine Knopfbeschriftung nicht mehr um
      — sie wurde stattdessen still beschnitten. Der Umbruch war der sichtbare Teil des Fehlers, die
      zu enge Zelle der eigentliche.
   2. Drei verschiedene rechte Kanten: 1424, 1407, 1368 px. Nichts fluchtete.
   3. Zwei Höhen nebeneinander: Textknöpfe 44 px, Symbolknöpfe 48 px.

   DIE LÖSUNG: Handlungen gehören nicht zwischen die Filter, sondern in eine eigene Zeile am Ende —
   rechtsbündig, mit einer Kante und einer Höhe. Eine eigene Klasse statt vier Hilfsklassen, weil
   damit an einer Stelle steht, was eine Werkzeugleiste ist.
   --------------------------------------------------------------------------- */

.ms-werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Eine Kante und eine Höhe: Symbolknöpfe sind in MudBlazor 48 px hoch, Textknöpfe 44. Nebeneinander
   sieht das nach einem Versehen aus. 44 ist die Zielgröße aus docs/ux/08 — kleiner wird es nicht. */
.ms-werkzeugleiste .mud-icon-button,
.ms-knopfzeile .mud-icon-button {
    height: 44px;
    width: 44px;
}

/* Ein Knopf in einer Werkzeugleiste schrumpft nicht unter seine Beschriftung. Lieber bricht die
   Zeile um, als dass ein Wort abgeschnitten wird — ein halbes Wort liest sich wie ein Fehler, eine
   zweite Zeile wie eine enge Stelle. */
.ms-werkzeugleiste .mud-button-root {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Schalter (Paket O13.26)

   MudBlazors Vorgabe ist Material-1: Spur 34 x 14 px zu 50 % durchsichtig, Knopf 20 px — er ragt an
   beiden Enden über die Spur hinaus, und ausgeschaltet ist die Spur so blass, dass der Schalter kaum
   als Bedienelement zu erkennen ist.

   HIER WIRD NUR VERÄNDERT, WAS SICH VERÄNDERN LÄSST. Die Breite der Spur ist die Hauptachse eines
   Flex-Behälters: Ein `width: 40px` wird dort geschrumpft, auch mit `!important`. Die Höhe ist die
   Querachse und gehorcht. Also bleibt die Spur 34 px breit und wird 18 px hoch — dann liegt der
   16-px-Knopf darin statt darüber.

   Die beiden Verschiebewerte sind GEMESSEN, nicht geschätzt: An der laufenden Anwendung ergab
   `translateX(2px)` einen Rand von 4 px und `translateX(20px)` einen von 22 px. Der Rand ist also
   `translate + 2`; für die gewollten 3 px und 15 px folgen 1 px und 13 px.

   Die Trefferfläche (44 x 44 px) bleibt unangetastet — `docs/ux/08` verlangt sie, und
   `ZielgroesseE2eTests` misst sie nach.

   NACHTRAG 28.08.2026: DIE SENKRECHTE ACHSE FEHLTE.

   Der Auftraggeber sah den Knopf weiterhin verschoben, und er hatte recht — nur nicht dort, wo
   oben gemessen wurde. Am laufenden Stand: Rand oben 2 px, Rand unten 0 px. Der Knopf klebte am
   unteren Spurrand.

   Zwei Ursachen, die sich fast aufhoben und deshalb keiner Rechnung auffielen:

   1. Die 44-px-Trefferfläche hängt mit `position: absolute; top: 0` in einem 38 px hohen Behälter.
      Die zusätzlichen 6 px wachsen nach UNTEN — der Knopf, der in ihr zentriert ist, rutschte damit
      3 px unter die Mitte des Behälters.
   2. Die Spur ist ein statisches Flex-Kind mit fester Höhe. Ohne eigene Ausrichtung landet sie oben
      statt mittig — gemessen 12 px Abstand oben, 8 px unten.

   Beides wird jetzt an der Ursache gerichtet und nicht mit einem weiteren Verschiebewert
   überdeckt: Die Spur richtet sich selbst mittig aus, und die Trefferfläche wird um ihre halbe
   Höhe nach oben gezogen, statt am oberen Rand zu kleben. `margin-top: -22px` ist die halbe Höhe
   der Fläche und gilt damit unabhängig davon, wie hoch der Behälter gerade ist.

   Nachgemessen am laufenden Stand: Rand oben 1 px, unten 1 px, links/rechts 15/3 bzw. 3/15,
   Trefferfläche weiterhin 44 x 44.
   --------------------------------------------------------------------------- */

.mud-switch .mud-switch-track {
    height: 18px;
    border-radius: 9px;
    opacity: 1;
    background-color: var(--mud-palette-action-disabled, rgba(0, 0, 0, 0.3));
    transition: background-color 120ms cubic-bezier(.2, 0, .2, 1);

    /* Ohne diese Zeile liegt die Spur oben im Behälter statt in seiner Mitte. */
    align-self: center;
}

/* Eingeschaltet trägt die Spur bereits ihre Farbklasse — sie muss nur deckend sein, damit die
   Fläche die Auskunft trägt und nicht die Stellung eines blassen Punktes. */
.mud-switch .mud-switch-track.mud-primary,
.mud-switch .mud-switch-track.mud-secondary,
.mud-switch .mud-switch-track.mud-success,
.mud-switch .mud-switch-track.mud-info,
.mud-switch .mud-switch-track.mud-warning,
.mud-switch .mud-switch-track.mud-error {
    opacity: 1;
}

.mud-switch .mud-switch-button,
.mud-switch .mud-switch-thumb-medium {
    width: 16px;
    height: 16px;
}

/* Der Knopf bleibt in BEIDEN Erscheinungsbildern hell — das ist die Material-Konvention und der
   Grund, warum die Stellung ablesbar bleibt: Die Aussage traegt die FLAECHE der Spur, der Knopf ist
   nur die Marke darauf. `--mud-palette-white` ist derselbe Wert, kommt aber aus der Palette statt
   aus einer zweiten Quelle; seine Kante kommt vom Schatten, nicht vom Farbabstand. */
.mud-switch .mud-switch-thumb-medium {
    background-color: var(--mud-palette-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mud-switch .mud-switch-base {
    transform: translateX(1px);

    /* Die Trefferfläche um ihre halbe Höhe hochziehen, statt sie am oberen Rand kleben zu lassen —
       sonst wächst sie einseitig nach unten und nimmt den Knopf mit. */
    top: 50%;
    margin-top: -22px;
}

.mud-switch .mud-switch-base.mud-checked {
    transform: translateX(13px);
}

.mud-switch .mud-switch-base.mud-disabled ~ .mud-switch-track {
    opacity: 0.38;
}

/* ---------------------------------------------------------------------------
   Reiterleiste mit Blätterpfeilen (Paket O13.26)

   Die Pfeile liegen ÜBER der Leiste, nicht daneben. Gemessen an der Vertragsakte mit ihren
   fünfzehn Reitern: Der rechte Pfeil belegt 1376–1424, der letzte sichtbare Reiter endet bei 1433
   — „BERATUNG" wurde zu „BERAT". Ein halbes Wort sieht nicht nach einem knappen Platz aus, sondern
   nach einem Fehler.

   `:has()` sorgt dafür, dass der Platz nur entsteht, wo die Pfeile wirklich stehen: Eine Akte mit
   vier Reitern soll nicht zweimal 48 px verschenken.
   --------------------------------------------------------------------------- */

.mud-tabs-tabbar:has(.mud-tabs-scroll-button) .mud-tabs-tabbar-inner {
    padding-left: 48px;
    padding-right: 48px;
}

/* Die Auffüllung allein genügt nicht: Eine rollende Leiste hat IMMER einen angeschnittenen Reiter
   am Rand, und der lag weiterhin unter dem Pfeil. Ein deckender Grund macht daraus „hier geht es
   weiter" statt eines halben Wortes. */
.mud-tabs-scroll-button {
    background-color: var(--ms-flaeche, var(--mud-palette-surface));
    z-index: 2;
}

/* Weicher Übergang, damit die Kante nicht wie ein Schnitt wirkt. */
.mud-tabs-scroll-button:first-of-type {
    box-shadow: 6px 0 6px -4px var(--ms-flaeche, var(--mud-palette-surface));
}

.mud-tabs-scroll-button:last-of-type {
    box-shadow: -6px 0 6px -4px var(--ms-flaeche, var(--mud-palette-surface));
}

/* Knopfbeschriftungen brechen nicht um (Paket R1.1).

   Ein Knopf, dessen Text umbricht, ist in einer Werkzeugleiste immer ein Fehler — entweder ist die
   Beschriftung zu lang oder der Behälter zu schmal. Beides will man sehen und nicht kaschiert
   bekommen: Umgebrochen wurde bisher zusätzlich waagerecht abgeschnitten, aus „Als Excel
   exportieren" wurde „ALS EX / XPORTI".

   Mit `nowrap` wird der Knopf stattdessen breiter — und wenn der Platz wirklich fehlt, schiebt der
   Umbruch der Werkzeugleiste ihn in die nächste Zeile. Das ist die richtige Reaktion. */
.mud-button-root .mud-button-label {
  white-space: nowrap;
}

/* Datenblöcke in Akten (Paket R10.2).
   Ein Vertrag hat mehr Felder, als in eine Liste passen; ohne Gruppierung stehen sie als
   gleichwertige Reihe da und der Blick findet nichts wieder. Die Überschrift trägt die Gruppe,
   die feine Linie trennt sie — kein Rahmen, keine Karte, damit die Akte nicht in Kästen zerfällt.
   Spec S517: IM Datenblatt (und lose mit --karte) werden sie Karten; global bleibt die Linie,
   weil VertragDialog und Gewerbeprofilformular denselben Block in Dialogen nutzen. */
.ms-datenblock {
    margin-bottom: 20px;
}

.ms-datenblock + .ms-datenblock {
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Ein Eintrag der Zeitleiste (Kontakteintrag.razor, Messung N15). Bei 509 Einträgen sind es 23.000 Knoten; jedes „Weitere laden“ ließ den Browser Stile, Anordnung und Zeichnung für alle
   neu rechnen (Bildabstand P95 417 ms, letzter Klick 2,1 s). Was außerhalb des sichtbaren Bereichs liegt, wird mit `content-visibility: auto` nicht angeordnet und nicht gezeichnet; die Höhe
   merkt sich der Browser (`auto` vor der Schätzung), sobald ein Eintrag einmal zu sehen war. Die Einträge bleiben im Baum — Lesehilfen, Suche im Text und Tastatur sehen sie weiter. */
.ms-zeitleiste-eintrag {
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
}

.ms-datenblock-titel {
    margin-bottom: 10px;
    color: var(--mud-palette-text-secondary);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Spezifität 0,2,0 — gleich der Dialog-Trennlinie `.ms-datenblock + .ms-datenblock` (padding-top
   und border-top), und später im Blatt: Karten bekommen keinen zweiten oberen Rand und keinen
   zusätzlichen Innenabstand. `--karte` allein (0,1,0) würde gegen die Trennlinie verlieren;
   deshalb beide Klassen (S518 AP5, Fremdnummern neben Ansprechpartner). */
.ms-datenblatt .ms-datenblock,
.ms-datenblock.ms-datenblock--karte {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: var(--ms-raum-4, 16px);
    margin-bottom: var(--ms-raum-3, 12px);
    background: var(--mud-palette-surface);
}

.ms-datenblatt-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-raum-2, 8px) var(--ms-raum-4, 16px);
    margin-bottom: var(--ms-raum-3, 12px);
}

.ms-datenblatt-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-raum-2, 8px);
}

/* Kennfeld-Wertzeile (S518 AP3). Der Stift (MsAktionsSymbolknopf) hat 44 px Trefferfläche durch
   die zentrale Bedienzielregel — ohne Gegenmaßnahme zentriert der Wert sich in 44 px und steht
   ~11 px tiefer als ein nacktes body1 in derselben Zeile (gemessen im Objektkopf und in den Karten).
   Die Trefferfläche bleibt 44 px; negativer Außenabstand nimmt sie aus der Zeilenhöhe.
   Rechnung: (Trefferfläche 44 px − Zeilenhöhe 24 px) / 2 = 10 px. */
.ms-kennfeld-wert {
    display: flex;
    align-items: center;
    gap: var(--ms-raum-1, 4px);
    min-height: 24px;
}

.ms-kennfeld-wert .mud-icon-button {
    margin-block: -10px;
}

/* Ein Verweis als Wert (Kunde, Versicherer, Vertrag): die 24-px-Zielfläche kommt aus `a.mud-link { padding-block: 4px }`; der gleiche negative Außenabstand nimmt sie
   aus der Zeilenhöhe, sonst steht der Wert 2,5 px tiefer als ein Text daneben (Aktenausrichtung, Wertzeile Kopf). */
.ms-kennfeld-wert a.mud-link {
    margin-block: -4px;
}

/* Objektkopf auf einer Kante (S518 AP4). Titel, Untertitel, Zusatz und Kennfelder stehen in
   einer Inhaltsspalte — nicht die Kennfelder unter dem Symbol (gemessen: Titel x=321, Kennfeld
   x=273). Die Symbolspalte ist fest; unter 600 px fällt sie weg, dann sitzt alles auf der
   Kartenkante. Leerer Zusatz: :empty nimmt den Abstand. */
.ms-objektkopf-symbol {
    flex: 0 0 auto;
}

.ms-objektkopf-inhalt {
    flex: 1 1 auto;
    min-width: 0;
}

.ms-objektkopf-zusatz {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ms-raum-2, 8px);
    margin-top: var(--ms-raum-2, 8px);
}

.ms-objektkopf-zusatz:empty {
    display: none;
    margin-top: 0;
}

@media (max-width: 599.98px) {
    .ms-objektkopf-symbol {
        display: none;
    }
}

.mud-tabs-panels.ms-aktenreiter-flaeche {
    padding: var(--ms-raum-4, 16px) 20px;
}

@media (max-width: 599.98px) {
    .mud-tabs-panels.ms-aktenreiter-flaeche {
        padding: var(--ms-raum-3, 12px);
    }
}

/* Der Weg eines Schadens im Kopf der Schadenakte (Paket R13.4.12): vier Stufen in einer Zeile, die erreichte betont. Die
   Pfeile stehen im CSS, nicht im Text — ein Vorleseprogramm liest die Liste und `aria-current`, keine Zierzeichen.

   KONTRAST (R13.9.6, gemessen mit axe): Die offenen Stufen standen in `text-disabled` — blass gewollt, aber unter 4,5:1.
   Es sind Angaben, keine gesperrten Bedienelemente; WCAG 1.4.3 gilt. Jetzt: aktuell in der Hausfarbe und fett, erledigt in
   Textfarbe, offen in Sekundärfarbe — die Abstufung bleibt, alle drei lesbar. */
.ms-statusweg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
}

.ms-statusweg li + li::before {
    content: "›";
    margin-right: 4px;
    color: var(--mud-palette-text-disabled);
}

.ms-statusweg--erledigt {
    color: var(--mud-palette-text-primary);
}

.ms-statusweg--aktuell {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.ms-statusweg--offen {
    color: var(--mud-palette-text-secondary);
}

/* Eine Stufe, zu der ein erlaubter Wechsel führt, ist ein Knopf (R13.13.1): Schrift und Farbe der Stufe, gepunktet
   unterstrichen als Zeichen „hier lässt sich etwas tun". Der Fokusring bleibt der des Browsers (docs/ux/08 §6). */
.ms-statusweg-ziel {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.ms-statusweg-ziel:hover {
    text-decoration-style: solid;
}

/* Der Status-Chip, der ein Menü öffnet (MsStatusMenue; E2E-Zwischenlauf 29.09.2026, E1). Bedienbar ist der Auslöser von MudMenu
   (role="button", Tabstopp) — der Chip darin ist Anzeige. MudBlazor zeichnet diesen Auslöser mit display:contents, also ohne
   eigenen Kasten: Der Fokusring des Browsers hätte nichts, woran er steht. Hier bekommt er einen, so rund wie der Chip, und den
   Abstand, den sonst der Chip trägt — damit der Ring am Chip anliegt.
   DIE SPEZIFITÄT IST GEMESSEN, NICHT GESCHMACK: MudBlazor schreibt `.mud-menu>div.mud-menu-activator{display:contents}` (0,2,1). Die
   erste Fassung hier (`.ms-status-menue > .mud-menu-activator`, 0,2,0) verlor dagegen still — im Browser blieb display:contents,
   der Auslöser nahm keinen Fokus an, und die Eingabetaste ging an die Seite (E2E, 29.09.2026). */
.mud-menu.ms-status-menue > div.mud-menu-activator {
    display: inline-flex;
    margin: 4px;
    border-radius: 9999px;
    cursor: pointer;
}

.mud-menu.ms-status-menue > div.mud-menu-activator .mud-chip {
    margin: 0;
    cursor: inherit;
}

/* Nur ausgefüllte Felder (Paket R13.4.5, MsDatenblatt). Ein leeres Kennfeld nimmt seine Rasterzelle mit; eine Gruppe
   verschwindet nur, wenn sie aus Überschrift und Raster besteht und kein Kennfeld etwas zeigt — eine Gruppe mit Hinweisen
   oder einer Tabelle neben dem Raster bleibt stehen. Die Kennfelder melden „leer" selbst (MsKennfeld.IstLeerwert).

   KEIN :has() IN :has(). Die erste Fassung fragte je Rasterzelle „hat kein leeres Kennfeld" — das ist ein :has() im
   :has(), und das verwirft der Browser samt der ganzen Regel, ohne ein Wort. Deshalb fragt die Gruppe nach Kennfeldern
   statt nach Zellen; das ist dasselbe, solange jede Zelle eines Datenblatts genau ein Kennfeld trägt (Wächter
   DatenblattStilWaechterTests). */
.ms-nur-gefuellt .mud-grid-item:has(> .ms-kennfeld--leer) {
    display: none;
}

.ms-nur-gefuellt .ms-datenblock:has(.ms-kennfeld):not(:has(.ms-kennfeld:not(.ms-kennfeld--leer))):not(:has(> :not(.ms-datenblock-titel, .mud-grid))) {
    display: none;
}

/* ============================================================================================
   Sparten-Reiter im AMS.5-Muster (Paket R11.40)

   Links die Risikoliste, rechts die Maske. Feste Breite links, weil die Liste immer dieselben
   vier Kennzahlen zeigt — eine mitwachsende Spalte ließe die Maske je Vertrag anders breit
   erscheinen. Ab 1200 px nebeneinander; darunter untereinander, weil zwei Spalten auf einem
   Tablet zwei zu enge Spalten wären.
   ============================================================================================ */

.ms-spartenakte {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1200px) {
    .ms-spartenakte {
        grid-template-columns: minmax(380px, 40%) 1fr;
    }
}

.ms-spartenakte-werkzeuge {
    justify-content: flex-start;
    margin-bottom: 8px;
}

/* Die gewählte Zeile muss sich abheben — sonst weiß niemand, wessen Maske rechts steht. */
.ms-spartenakte-gewaehlt > td {
    background-color: var(--mud-palette-action-default-hover);
    font-weight: 500;
}

.ms-spartenakte-liste tbody tr {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Vollbild-Layout (Welle 2, R11.20 – R11.23)

   ANLASS: „Du musst wirklich dir nochmal alles genau anschauen jede seite und zwar im vollbild und
   nicht mobile oderso." Alles darunter ist auf einem 24- bis 34-Zoll-Schirm geprüft, nicht auf der
   Vorschaubreite eines Telefons.
   --------------------------------------------------------------------------- */

/* R11.20 · Der Inhalt hört irgendwo auf.

   2.200 px ist bewusst großzügig: Auf 1.920 px (Inhalt ≈ 1.680 px) und selbst auf 2.560 px ändert
   sich nichts. Erst auf einem Ultrabreitbild steht der Inhalt mittig statt als Streifen links. */
.ms-inhaltsbreite {
  max-width: 2200px;
  margin-inline: auto;
}

/* R11.20 · Formulare und Lesemasken bekommen eine engere Höchstbreite.

   Eine Eingabezeile über 1.700 px ist keine Zeile mehr, sondern ein Band: Das Auge verliert beim
   Rücksprung die Zeile. Tabellen und Diagramme sind ausgenommen — sie leben von der Breite. Ein
   Formular, das selbst eine Tabelle trägt (Filterkopf über Ergebnisliste), zählt als Tabelle. */
.ms-inhaltsbreite form,
.ms-inhaltsbreite .mud-form {
  max-width: 1700px;
}

.ms-inhaltsbreite form:has(.mud-table),
.ms-inhaltsbreite .mud-form:has(.mud-table),
.ms-inhaltsbreite form:has(.ms-diagramm-flaeche),
.ms-inhaltsbreite .mud-form:has(.ms-diagramm-flaeche) {
  max-width: none;
}

/* R11.21 · Die Aktionsspalte klebt am Inhalt, nicht am rechten Rand.

   Eine Zelle, die nur Knöpfe trägt, braucht die Breite ihrer Knöpfe. Ohne diese Regel verteilt der
   Browser die freie Breite gleichmäßig, und auf einem breiten Schirm liegen zwischen der letzten
   Angabe und ihrem Bearbeiten-Knopf 40 Zentimeter Leere — man muss mit den Augen wandern, um Zeile
   und Knopf noch zusammenzubringen.

   `:has()` statt einer Klasse in 30 Seiten: Eine Klasse, die 30-mal von Hand gesetzt wird, fehlt
   beim 31. Mal. */
.mud-table-cell:last-child:has(> .mud-button-root),
.mud-table-cell:last-child:has(> .mud-menu),
.mud-table-cell:last-child:has(> div > .mud-button-root),
.mud-table-cell:last-child:has(> div > .mud-menu) {
  width: 1%;
  white-space: nowrap;
}

/* R11.23 · Leerzustände stehen mittig.

   `align-center` zentriert innerhalb des Kastens. Steht der Kasten selbst als Flex-Kind in einer
   Spalte, schrumpft er auf seinen Inhalt — und der Leerzustand landet im linken Drittel. */
.ms-leerzustand {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Liegende Balken (Paket R11.13)

   MudChart kann sie nicht, und eine zweite Diagrammbibliothek wäre eine Lizenzfrage (ADR-010) für
   eine Darstellung aus einer Handvoll Rechtecken. Sie sind deshalb Kästen aus HTML: Die Schrift
   bleibt echte Schrift, statt mit einer Grafik mitskaliert zu werden — und genau darum geht es,
   denn ihr Zweck ist die Rangliste mit langen Namen.
   --------------------------------------------------------------------------- */

.ms-balkenliste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ms-balkenzeile {
  display: grid;
  /* Der Name bekommt bis zu 280 px und schrumpft davor mit — eine feste Spalte ließe auf einem
     schmalen Fenster keinen Platz mehr für den Balken selbst. */
  grid-template-columns: minmax(90px, 280px) 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 22px;
}

.ms-balken-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
}

/* Die Spur ist der Maßstab: Sie ist immer voll breit, der Balken darin anteilig. Ohne sichtbare
   Spur ließe sich ein kurzer Balken nicht von einem abgeschnittenen unterscheiden. */
.ms-balken-spur {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  background: rgba(127, 127, 127, 0.12);
  border-radius: 3px;
  padding: 2px;
}

.ms-balken {
  height: 10px;
  min-width: 2px;
  border-radius: 2px;
  background: var(--ms-marke, var(--mud-palette-primary));
}

/* Die zweite und dritte Reihe unterscheidbar — und zwar nicht nur über die Farbe: Die Reihenfolge
   in der Zeile ist dieselbe wie in der Legende. */
/* Gestapelte Balken (Spec S545): die Reihen hintereinander in einer Zeile; die Spur bleibt der Maßstab. */
.ms-balken-spur--gestapelt {
  flex-direction: row;
  gap: 0;
}

.ms-balken-spur--gestapelt > .ms-balken {
  border-radius: 0;
  min-width: 0;
}

.ms-balken-spur > .ms-balken:nth-child(2) { background: var(--ms-zweitfarbe, var(--mud-palette-secondary)); }
.ms-balken-spur > .ms-balken:nth-child(3) { background: var(--mud-palette-tertiary); }

.ms-balken-wert {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 5ch;
}

.ms-balken-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.8125rem;
}

.ms-balken-legendeneintrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ms-balken-farbe {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--ms-marke, var(--mud-palette-primary));
}

.ms-balken-legendeneintrag:nth-child(2) .ms-balken-farbe { background: var(--ms-zweitfarbe, var(--mud-palette-secondary)); }
.ms-balken-legendeneintrag:nth-child(3) .ms-balken-farbe { background: var(--mud-palette-tertiary); }

/* Auf schmalen Fenstern rückt der Name über den Balken: Bei 360 px blieben sonst 40 px für die
   Spur, und ein Balken von 40 px zeigt keinen Unterschied mehr an. */
@media (max-width: 599.98px) {
  .ms-balkenzeile {
    grid-template-columns: 1fr auto;
  }

  .ms-balken-name {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* Sticky-Objektkopf + Reiterleiste (Paket R12.88).
   In langen Detailmasken (die Vertragsakte hat einen 60-Felder-Reiter) verschwand die Identität des
   Fachobjekts beim Scrollen nach oben aus dem Bild — man bearbeitete Felder, ohne den Titel und Status
   der Akte noch zu sehen. Kopf und Reiterleiste kleben deshalb unter der AppBar. `--mud-appbar-height`
   ist die Höhe der App-Leiste (Fallback 64px); darunter beginnt der klebende Bereich.
   Die Reiterleiste liegt oben auf (höherer z-index), damit man in einem langen Reiter jederzeit
   wechseln kann; der Kopf bleibt bis dahin sichtbar. */
.ms-sticky-kopf {
  position: sticky;
  top: var(--mud-appbar-height, 64px);
  z-index: 2;
}

.ms-sticky-reiter > .mud-tabs-toolbar {
  position: sticky;
  top: var(--mud-appbar-height, 64px);
  z-index: 3;
  background: var(--ms-flaeche, var(--mud-palette-surface));
}

/* Auf sehr niedrigen Fenstern (Querformat am Telefon) frisst der klebende Kopf zu viel Höhe — dort
   scrollt lieber alles normal, sonst bleibt für den Reiterinhalt kein Platz. */
@media (max-height: 480px) {
  .ms-sticky-kopf,
  .ms-sticky-reiter > .mud-tabs-toolbar {
    position: static;
  }
}

/* Kartenansicht für schlichte Tabellen (R13.5.22). MudTable stapelt ihre Zeilen auf dem schmalen Schirm von selbst und
   beschriftet jede Zelle; MudSimpleTable nicht — das Antragsbuch lief auf 360 px seitlich aus dem Bild. Unter 600 px (der
   xs-Grenze von MudBlazor) wird jede Zeile ein Block und jede Zelle eine Zeile mit ihrer Beschriftung aus `data-label`.
   Die Zeile bleibt eine Zeile im DOM: Kennung, Hervorhebung und `aria-current` bleiben erhalten. */
@media (max-width: 599.98px) {
  .ms-kartentabelle thead {
    display: none;
  }

  .ms-kartentabelle tbody tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-table-lines);
  }

  .ms-kartentabelle tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 16px;
    border-bottom: 0;
  }

  .ms-kartentabelle tbody td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
  }
}

/* Zeile = Ziel (Paket R12.86): Die ganze Zeile führt in die Akte, nicht nur der schmale Nummern-Link.
   Ein ausgedehnter Anker (`ms-zeilen-ziel`) liegt über der Zeile — Klick navigiert, Strg-/Mittelklick
   öffnet einen neuen Tab, beides nativ über href und nicht über JS. Die Zeile ist der Bezugsrahmen
   (position:relative), der Anker füllt sie. Interaktive Zellinhalte — das Auswahlkästchen, andere
   Objektverweise (etwa auf den Kunden), die Aktionsknöpfe — liegen darüber und bleiben klickbar; damit
   ist die Auswahl-Checkbox-Spalte ausgenommen. Dazu gehört das Statusmenü der Zeile (MsStatusMenue): Sein Chip ist kein Knopf,
   und der Zeilenverweis fing jeden Klick darauf ab — gemessen am 29.09.2026 in der Schadenliste („ms-zeilen-ziel … intercepts
   pointer events"): Der Klick auf den Status führte in die Akte statt ins Menü (R13.14.SC15); im Arbeitsvorrat ebenso über Status
   und Priorität (VG4, VG5). */
.ms-zeilen-ziel-zeile {
  position: relative;
  cursor: pointer;
}

.ms-zeilen-ziel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Der gestreckte Knopf (R13.5.10): Wo die Zeile kein Ziel mit Adresse hat — ein Vorgang im Arbeitsvorrat klappt
   sein Detail auf —, ist das Ziel ein Knopf statt eines Ankers; derselbe Kasten, ohne Knopfoptik. */
button.ms-zeilen-ziel {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.ms-zeilen-ziel-zeile .mud-table-cell-checkbox,
.ms-zeilen-ziel-zeile .ms-entitylink,
.ms-zeilen-ziel-zeile a.mud-link,
.ms-zeilen-ziel-zeile .mud-button-root,
.ms-zeilen-ziel-zeile .ms-status-menue {
  position: relative;
  z-index: 2;
}

/* Die Hülle des Tippfelds (MsTippfeld) hört nur zu, ob jemand wieder ins Feld greift — sie darf keinen eigenen Kasten
   bilden, sonst wäre in einer Flexzeile sie das Glied statt des Feldes, und dessen Breite und Abstände griffen ins Leere. */
.ms-tippfeld {
    display: contents;
}

/* Zahlenspalten schlichter Tabellen (R13.8.1): rechtsbündig und in gleich breiten Ziffern, damit Stellen untereinander
   stehen. */
.ms-zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Meine nächsten Aufgaben im Cockpit (R13.8.1): Titel, Frist und Bezug je Zeile, ohne Aufzählungszeichen. */
.ms-cockpit-aufgaben {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-cockpit-aufgaben li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.375rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ms-cockpit-aufgabe-bezug {
    flex-basis: 100%;
    color: var(--mud-palette-text-secondary);
}

/* Die Schrittfolge einer geführten Maske (R13.7.2): eine Zeile, die sagt, was noch fehlt — keine Blätterleiste. */
.ms-schrittfolge {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.ms-schrittfolge__schritt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
}

.ms-schrittfolge__schritt--offen,
.ms-schrittfolge__schritt--optional {
  color: var(--mud-palette-text-secondary);
}

/* Die Zusammenfassung vor dem Melden eines Schadens (R13.7.2): Beschriftung links, Wert rechts. */
.ms-schadenpruefung {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 16px;
  font-size: 0.875rem;
}

.ms-schadenpruefung dt {
  color: var(--mud-palette-text-secondary);
}

.ms-schadenpruefung dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Die Aktionsleiste eines Formulars (R13.6.5): Abbrechen links, die Primäraktion rechts, beides rechtsbündig — so wie
   MudBlazor es in Dialogen reiht. Die Editoren auf den Seiten reihten es an 31 Stellen umgekehrt. Gehalten von
   AktionsleisteWaechterTests. */
.ms-aktionsleiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* In langen Formularen (Kunden-, Vertragsbearbeitung) bleibt die Leiste am unteren Rand sichtbar; wer zum Speichern
   sonst ans Ende von vierzig Feldern blättern musste, sah nicht, dass er noch nicht gespeichert hatte. */
.ms-aktionsleiste--fixiert {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--ms-flaeche, var(--mud-palette-surface));
  border-top: 1px solid var(--mud-palette-lines-default);
}

/* Tastaturauswahl der Tagesmappe (Paket R12.78): die mit j/k gewanderte Zeile bekommt einen
   Rahmen links und einen leichten Hintergrund, damit sichtbar ist, worauf e/v wirken. */
.ms-tagesmappe-markiert td {
  background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .06));
}

.ms-tagesmappe-markiert td:first-child {
  box-shadow: inset 3px 0 0 0 var(--ms-marke, var(--mud-palette-primary));
}

/* Kürzel-Overlay „?" (Paket R12.78): eigenes Overlay wie die Kommando-Palette, damit es überall
   greift und ohne echte JS-Laufzeit prüfbar bleibt. */
.ms-kuerzel-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.ms-kuerzel-hintergrund {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
}

.ms-kuerzel-panel {
  position: relative;
  z-index: 1;
  margin-top: 8vh;
  max-width: 540px;
  width: 92vw;
}

/* ============================================================================================
   DER ANWENDUNGSNAME SCHIEBT NICHTS AUS DER LEISTE (Spec S493)

   BEFUND. In der Linux-Prüfstrecke lag der Palettenknopf auf einem 390-px-Telefon AUSSERHALB des
   Fensters: Playwright meldete dreißig Sekunden lang „element is visible, enabled and stable" und
   dann „element is outside of the viewport". Auf Windows passte dieselbe Leiste — der Unterschied
   ist die Schriftbreite, und damit hängt die Bedienbarkeit am Betriebssystem des Servers.

   WARUM DAS SCHLIMMER IST, ALS ES AUSSIEHT. Der Palettenknopf ist auf dem Telefon der EINZIGE
   Sucheinstieg (Paket O10.3): Unterhalb von 960 px ist die Sofortsuche ausgeblendet, und Strg+K gibt
   es dort nicht. Ein Knopf jenseits des Randes heisst: kein Suchen am Telefon.

   URSACHE. Ein Flex-Element mit Text weigert sich ohne `min-width: 0`, unter seine Inhaltsbreite zu
   schrumpfen — es schiebt stattdessen seine Nachbarn hinaus. Der Name stand ohne diese Angabe in der
   Leiste und war damit unnachgiebiger als die Bedienelemente daneben.

   WARUM SCHRUMPFEN UND NICHT AUSBLENDEN. Der Name ist die einzige Auskunft darüber, worin man sich
   befindet; drei Punkte am Ende sagen „gekürzt", ein leerer Platz sagt gar nichts. Und die Kürzung
   greift nur dort, wo es sonst eng würde.

   Gemessen wird es von ResponsiveE2eTests.JedesBedienelementDerAppLeiste_LiegtImFenster — der
   vorhandene Überlaufwächter konnte es NICHT sehen: Er misst den Überlauf des Dokuments, und die
   Leiste läuft nicht über, sie beschneidet ihren Inhalt.
   ============================================================================================ */

.ms-appname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* R13.3.7: Der Name ist ein Verweis zur Startseite, sieht aber aus wie vorher — kein Unterstrich, keine
   Linkfarbe in der Leiste. */
.ms-appname-verweis {
    color: inherit;
    text-decoration: none;
}

/* Der Mandantenname ist der ZWEITE Textträger der Leiste — und der grössere.

   GEMESSEN auf 360 px (der Wächter gibt die ganze Leiste aus):

       menue-knopf 16…56 · Anwendungsname 64…64 · Mandant 64…299 · palette-knopf 299…347
       · benachrichtigungen 347…395 · thema-umschalter 395…439 · Sprache 439…499

   Der Anwendungsname war da bereits auf null geschrumpft — die Regel darüber wirkt. Die Überbreite
   von 139 px kommt allein vom Mandantenumschalter mit 235 px: Er trägt den Namen des Hauses als
   Text, und ein MudButton bringt zusätzlich `min-width` mit, weigert sich also zu schrumpfen.

   Dieselbe Behandlung wie beim Anwendungsnamen, und aus demselben Grund gekürzt statt ausgeblendet:
   In welchem Haus man arbeitet, ist die wichtigere der beiden Auskünfte. Das Symbol bleibt stehen,
   der volle Name steht im aufgeklappten Menü. */

.ms-mandantenwahl,
.ms-mandantenwahl .mud-button-root {
    min-width: 0;
    overflow: hidden;
}

.ms-mandantenwahl .mud-button-root {
    max-width: 40vw;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Betriebsart neben dem Haus (R13.11.5). In der Schriftfarbe der Leiste, mit Rahmen statt grauer Schrift: Die erste
   Fassung trug `mud-text-secondary` — Grau auf dem dunklen Blau der Leiste, kaum lesbar. Aufgefallen ist es erst im
   Handbuchbild; bUnit sieht keine Farbe. */
.ms-betriebsart {
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 1rem;
    padding: 0 0.5rem;
    white-space: nowrap;
}

/* ============================================================================================
   BEWEGUNGSREDUKTION (docs/ux/08 §11, Paket S491)

   docs/ux/08 fuehrt sie als Vorgabe: "@media (prefers-reduced-motion: reduce) respektieren —
   Ripple, Ein-/Ausklapp-Animationen, Skeleton-Shimmer, Toast-Slide auf ~0 reduzieren.
   MudBlazor-Transitions global drosseln, wenn gesetzt." Gebaut war davon nichts: Die Zeichenfolge
   `prefers-reduced-motion` kam im ganzen Quellbaum kein einziges Mal vor.

   WARUM GLOBAL UND MIT !important. Die Bewegung kommt zum groessten Teil aus MudBlazors eigener CSS
   — Ripple, Schublade, Dialog, Reiterwechsel, Snackbar. Eine Regel je Komponente waere eine Liste,
   die bei der naechsten MudBlazor-Fassung unvollstaendig ist, ohne dass es jemand merkt. Wer
   Bewegung abbestellt hat, will sie ueberall los, nicht an den Stellen, an die jemand gedacht hat.

   NICHT 0s, SONDERN 0.01ms. Eine Dauer von exakt null unterdrueckt in manchen Browsern das
   `transitionend`-Ereignis; Komponenten, die darauf warten, blieben dann in ihrem Uebergangszustand
   stehen. Ein Wimpernschlag ist unsichtbar und feuert trotzdem.

   WAS DAS FUER DEN WIEDERVERBINDUNGSDIALOG HEISST: Sein Ring hoert auf zu kreisen. Das ist
   vertretbar, weil die Auskunft im TEXT steht und nicht in der Bewegung — ein Ladezeichen, das sich
   nicht dreht, informiert weiterhin.
   ============================================================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* ————————————————————————————————————————————————————————————————
   DIE VORSCHAU DER EINSTELLSEITE (S512, W8.1)

   Sie liest AUSSCHLIESSLICH die eigenen Token — und zwar die des Vorschaubereichs, nicht die der
   Seite: `TokenCss.Erzeuge(..., selektor: ".ms-vorschau")` setzt sie hier hinein. Deshalb steht die
   gewählte Gestaltung NEBEN der geltenden, und der Bediener kann vergleichen.

   Warum sie nicht aus MudBlazor-Komponenten besteht: MudBlazor liest kein CSS, sondern seine eigenen
   Variablen. Eine MudCard in der Vorschau trüge weiter die geltenden Farben — die Vorschau zeigte
   dann alles ausser dem, was man gerade eingestellt hat.
   ———————————————————————————————————————————————————————————————— */

.ms-vorschau {
  border: 1px solid var(--ms-linie);
  border-radius: var(--ms-radius-gross);
  overflow: hidden;
  background: var(--ms-flaeche);
  color: var(--ms-text-stark);
  font-family: var(--ms-schrift-familie);
  font-size: var(--ms-grundgroesse);
}

.ms-vorschau-leiste {
  display: flex;
  align-items: center;
  gap: var(--ms-raum-3);
  padding: var(--ms-raum-3) var(--ms-raum-4);
  background: var(--ms-leiste-grund);
  color: var(--ms-leiste-text);
}

.ms-vorschau-logo { max-height: 22px; max-width: 90px; }
.ms-vorschau-haus { font-weight: 600; }

.ms-vorschau-suche {
  margin-left: auto;
  font-size: .78em;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ms-leiste-text) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ms-leiste-text) 28%, transparent);
}

.ms-vorschau-leib {
  padding: var(--ms-raum-4);
  background: var(--ms-grund);
  display: flex;
  flex-direction: column;
  gap: var(--ms-raum-4);
}

.ms-vorschau-kacheln { display: flex; gap: var(--ms-raum-3); }

.ms-vorschau-kachel {
  flex: 1;
  border: 1px solid var(--ms-linie);
  border-radius: var(--ms-radius);
  padding: var(--ms-raum-3);
  background: var(--ms-flaeche);
  display: flex;
  flex-direction: column;
  transition: transform var(--ms-zeit-finger) var(--ms-kurve),
              border-color var(--ms-zeit-finger) var(--ms-kurve);
}

.ms-vorschau-kachel:hover { transform: translateY(-2px); border-color: var(--ms-marke); }
.ms-vorschau-klein { font-size: .78em; color: var(--ms-text-leise); }
.ms-vorschau-wert { font-size: 1.6em; font-weight: 500; font-variant-numeric: tabular-nums; }
.ms-vorschau-hebt { color: var(--ms-marke); }

.ms-vorschau-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .86em;
  background: var(--ms-flaeche);
  border: 1px solid var(--ms-linie);
  border-radius: var(--ms-radius);
  overflow: hidden;
}

.ms-vorschau-tabelle th {
  text-align: left;
  font-weight: 500;
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ms-text-leise);
  background: var(--ms-grund-tief);
  padding: var(--ms-raum-2) var(--ms-raum-3);
  border-bottom: 1px solid var(--ms-tabellen-linie);
}

.ms-vorschau-tabelle td {
  padding: var(--ms-raum-2) var(--ms-raum-3);
  border-bottom: 1px solid var(--ms-tabellen-linie);
}

.ms-vorschau-tabelle tbody tr { transition: background var(--ms-zeit-finger) var(--ms-kurve); }
.ms-vorschau-tabelle tbody tr:hover { background: var(--ms-tabellen-hover); }
.ms-vorschau-tabelle tbody tr:last-child td { border-bottom: 0; }

.ms-vorschau-chip {
  display: inline-block;
  font-size: .8em;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.ms-vorschau-erfolg { color: var(--ms-erfolg); }
.ms-vorschau-warnung { color: var(--ms-warnung); }
.ms-vorschau-fehler { color: var(--ms-fehler); }

.ms-vorschau-knoepfe { display: flex; gap: var(--ms-raum-2); }

.ms-vorschau-knopf-voll,
.ms-vorschau-knopf-rahmen {
  font: inherit;
  font-size: .86em;
  font-weight: 600;
  border-radius: var(--ms-radius);
  padding: 6px 14px;
  cursor: default;
  border: 1px solid transparent;
  transition: transform var(--ms-zeit-finger) var(--ms-kurve);
}

.ms-vorschau-knopf-voll { background: var(--ms-marke); color: var(--ms-marke-text); }
.ms-vorschau-knopf-rahmen { background: transparent; color: var(--ms-marke); border-color: var(--ms-marke); }
.ms-vorschau-knopf-voll:hover, .ms-vorschau-knopf-rahmen:hover { transform: translateY(-1px); }

/* R13.1.2: Der Vorgang, auf den ein Verweis zeigt, steht hervorgehoben — Farbe aus dem Thema, nicht fest.
   R13.3.14: ebenso der Antrag im Antragsbuch. */
.vorgangsliste-hervorgehoben > td,
.ms-zeile-hervorgehoben > td {
    background-color: var(--mud-palette-primary-hover);
}

/* Die Konto- und Anmeldeseiten in der Gestalt der Anwendung (R13.11.8, WP 07-03).

   Sie bleiben Bootstrap-Formulare: Sie senden klassisch ab, und MudBlazors Eingabefelder tragen kein `name` — das
   Formular käme leer an. Die Farbbrücke oben gibt ihnen die Palette; hier folgt, was keine Farbe ist. Jede Angabe liest
   MudBlazors Token (`--mud-typography-*`, Palette), keine eigene Zahl — gemessen in `KontoseitenOptikE2eTests`.

   Getragen von `ms-konto` am Körper (App.razor, dieselbe Pfadregel wie das Bootstrap-Blatt). Die Überschriften-Regeln
   greifen nur ohne `.mud-typography`: Bliebe die Klasse nach einem Seitenwechsel stehen, fasste sie MudBlazors
   Überschriften nicht an. */
.ms-konto h1:not(.mud-typography) {
    font-family: var(--mud-typography-h4-family);
    font-size: var(--mud-typography-h4-size);
    font-weight: var(--mud-typography-h4-weight);
    line-height: var(--mud-typography-h4-lineheight);
    letter-spacing: var(--mud-typography-h4-letterspacing);
    margin-bottom: 1rem;
}

.ms-konto :is(h2, h3):not(.mud-typography) {
    font-family: var(--mud-typography-h6-family);
    font-size: var(--mud-typography-h6-size);
    font-weight: var(--mud-typography-h6-weight);
    line-height: var(--mud-typography-h6-lineheight);
    letter-spacing: var(--mud-typography-h6-letterspacing);
    margin: .5rem 0 .75rem;
}

.ms-konto :is(h4, h5):not(.mud-typography) {
    font-family: var(--mud-typography-subtitle1-family);
    font-size: var(--mud-typography-subtitle1-size);
    font-weight: var(--mud-typography-subtitle1-weight);
    line-height: var(--mud-typography-subtitle1-lineheight);
}

/* Der erklärende Satz unter der Überschrift — wie der Untertitel des Seitengerüsts. */
.ms-konto-untertitel {
    font-size: var(--mud-typography-body1-size);
    line-height: var(--mud-typography-body1-lineheight);
    color: var(--mud-palette-text-secondary);
    margin: -.75rem 0 1.5rem;
}

.ms-konto hr {
    border-color: var(--mud-palette-lines-default);
    opacity: 1;
}

/* Bootstraps Sekundärtext („oder" zwischen Anmeldung und Passkey) setzt sein eigenes Grau mit `!important` — auf der Fläche
   der Anwendung unter 4,5:1 (axe, R13.9.6). Die Sekundärfarbe der Palette hat 5,93:1 hell und 6,55:1 dunkel. */
.ms-konto :is(.text-secondary, .text-muted) {
    color: var(--mud-palette-text-secondary) !important;
}

/* Das Kontomenü wie das Hauptmenü (ms-thema.css): der aktive Punkt in der Hausfarbe auf leichtem Ton, nicht in Bootstraps
   einkompiliertem Blau — `.nav-pills` liest `--bs-primary` nicht, die Brücke oben erreichte es nie. */
.ms-konto .nav-pills {
    --bs-nav-pills-link-active-bg: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --bs-nav-pills-link-active-color: var(--mud-palette-primary);
    --bs-nav-pills-border-radius: var(--ms-radius-gross, 8px);
}

.ms-konto .nav-pills .nav-link.active {
    font-weight: 600;
}

.ms-konto .nav-pills .nav-link:not(.active):hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* Knöpfe in MudBlazors Größe: `btn-lg` stand auf jedem Formular und machte den Anmeldeknopf 48 px hoch. */
.ms-konto .btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--mud-default-borderradius);
}

.ms-konto .btn-lg {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: var(--mud-typography-button-size, .875rem);
}

/* Keine Fehlerleiste auf einer Seite, die gerade verlassen wird (js/seitenwechsel.js, Befund 25.09.2026): Firefox bricht beim
   Beginn einer Navigation die Downloads der WebAssembly-Laufzeit ab, und Blazor meldete das als Fehler — auf der alten Seite,
   bis die neue stand. `!important`, weil Blazor die Leiste über `style.display` einschaltet. */
.ms-seite-geht #blazor-error-ui {
    display: none !important;
}

/* Abschnitt eines Formulars als fieldset/legend (WA1.38): Raster 4 px, Farben nur aus den Tokens. */
.ms-abschnitt {
  margin: 0 0 16px;
  padding: 12px 16px 16px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius, 4px);
}

.ms-abschnitt__titel {
  padding: 0 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mud-palette-text-secondary);
}

/* Kartenwerk 3, Teil 3 (S532, GK3.12–GK3.14): Gebietsflächen des Choropleths, Kumulzonen, Druckansicht. Keine Transformation an vermessenen Elementen (S505). */
.ms-karte-gebiet {
    fill: var(--ms-karte-farbe, transparent);
    fill-opacity: 0.5;
    stroke: var(--ms-karte-farbe, var(--ms-text-leise, var(--mud-palette-text-secondary)));
    stroke-opacity: 0.9;
    stroke-width: 1.5px;
}
.ms-karte-gebiet--leer {
    fill: transparent;
    fill-opacity: 0;
    stroke: var(--ms-text-leise, var(--mud-palette-text-secondary));
    stroke-dasharray: 3 3;
    stroke-opacity: 0.6;
}
.ms-karte-gebiettipp { font-size: 0.8125rem; }

/* Die Kumulzone: der Kreis in echten Metern, dazu ein Knopf mit dem Rang in der Mitte (Klickziel ≥ 24 px). */
.ms-karte-kumul {
    fill: var(--ms-fehler, var(--mud-palette-error));
    fill-opacity: 0.12;
    stroke: var(--ms-fehler, var(--mud-palette-error));
    stroke-opacity: 0.9;
}
.ms-karte-markerhuelle--kumul:focus-visible { border-radius: 50%; }
.ms-karte-kumulrang {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--ms-fehler, var(--mud-palette-error));
    background: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.ms-karte-kumulrang--liste { width: 26px; height: 26px; cursor: default; flex: 0 0 auto; }
.ms-bk-gebietstabelle { margin-top: var(--ms-raum-1, 4px); }

/* Die Druckansicht (GK3.14): ein eigener Block, den nur der Druck zeigt. Am Bildschirm unsichtbar; im Druck verdeckt er alles andere. Systemfarben (Canvas, CanvasText, GrayText)
   statt fester Werte: Papier ist Papier, und der Druck folgt dem, was der Browser dafür vorsieht. */
.ms-karte-druck { display: none; }
@media print {
    body.ms-karte-druckt > *:not(.ms-karte-druck),
    body > *:not(.ms-karte-druck) { display: none !important; }
    .ms-karte-druck { display: block !important; padding: 12mm; color: CanvasText; background: Canvas; font-family: sans-serif; }
    .ms-karte-druck h1 { font-size: 16pt; margin: 0 0 6mm; }
    .ms-karte-druck img { display: block; width: 100%; height: auto; max-height: 150mm; object-fit: contain; border: 1px solid GrayText; }
    .ms-karte-druck ul { margin: 6mm 0 3mm; padding-left: 5mm; font-size: 10pt; }
    .ms-karte-druck-quelle, .ms-karte-druck-stand { font-size: 9pt; margin: 2mm 0 0; }
}

/* Karten in den Akten (Spec S533, GK4): der Kartenausschnitt mit Kopf, Fläche, Legende, Hinweisen, Kurzblick und Liste. Keine Transformation an der Fläche (S505). */
.ms-ka { margin-block: var(--ms-raum-3, 12px); }
.ms-ka-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-raum-2, 8px); margin-bottom: var(--ms-raum-1, 4px); }
.ms-ka-titel { margin: 0; font-size: 1rem; font-weight: 600; }
.ms-ka-knoepfe { display: inline-flex; align-items: center; gap: var(--ms-raum-1, 4px); }
.ms-ka-umschalter { display: none; }
.ms-ka-rumpf[hidden] { display: none; }
.ms-ka-platz { display: grid; align-content: center; justify-items: center; gap: var(--ms-raum-2, 8px); border: 1px dashed var(--ms-linie-leicht, var(--mud-palette-lines-default)); border-radius: var(--ms-radius-gross, 8px); }
.ms-ka-platz--text { padding: var(--ms-raum-4, 16px); text-align: center; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-ka-fuss { display: grid; gap: var(--ms-raum-2, 8px); margin-top: var(--ms-raum-2, 8px); }
.ms-ka-legende { display: flex; flex-wrap: wrap; gap: var(--ms-raum-1, 4px) var(--ms-raum-3, 12px); margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.ms-ka-legende li { display: inline-flex; align-items: center; gap: var(--ms-raum-1, 4px); min-height: 24px; }
.ms-ka-zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
.ms-ka-hinweis { display: flex; align-items: flex-start; gap: var(--ms-raum-2, 8px); font-size: 0.8125rem; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-ka-leise { color: var(--ms-text-leise, var(--mud-palette-text-secondary)); font-size: 0.8125rem; }
.ms-ka-ueberlagerungen { display: flex; flex-wrap: wrap; gap: var(--ms-raum-1, 4px) var(--ms-raum-3, 12px); }
.ms-ka-popup { padding: var(--ms-raum-3, 12px); border: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default)); border-radius: var(--ms-radius-gross, 8px); background: var(--ms-flaeche, var(--mud-palette-surface)); }
.ms-ka-popup-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ms-raum-2, 8px); }
.ms-ka-popup-verweise { display: flex; flex-wrap: wrap; gap: var(--ms-raum-1, 4px) var(--ms-raum-3, 12px); margin-top: var(--ms-raum-2, 8px); }
.ms-ka-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--ms-raum-3, 12px); margin: var(--ms-raum-2, 8px) 0 0; font-size: 0.875rem; }
.ms-ka-angaben dt { color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-ka-angaben dd { margin: 0; overflow-wrap: anywhere; }
.ms-ka-liste summary { cursor: pointer; min-height: 24px; font-size: 0.875rem; }
.ms-ka-liste ul { margin: var(--ms-raum-1, 4px) 0 0; padding-left: var(--ms-raum-4, 16px); }
.ms-ka-liste button { min-height: 24px; padding: 2px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; }
.ms-ka-liste button:focus-visible { outline: 3px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: 2px; }
.ms-ka-gross { min-height: 70vh; }
.ms-karte-linie { stroke: var(--ms-fehler, var(--mud-palette-error)); stroke-opacity: 0.9; fill: none; }
.ms-karte-linientext { font-weight: 600; }
/* Der Verträge- und Schäden-Reiter mit Umschalter Liste | Karte (GK4.5, GK4.7). */
.ms-ka-reiter-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-raum-2, 8px) var(--ms-raum-4, 16px); margin-bottom: var(--ms-raum-2, 8px); }
.ms-ka-reiter-karte { min-height: 420px; position: relative; }
.ms-ka-zeitregler { display: flex; align-items: center; gap: var(--ms-raum-3, 12px); min-width: 260px; flex: 1 1 260px; }
@media (max-width: 640px) {
    /* Mobil (390 × 844): die Karte klappt unter dem Kopf ein und aus; nichts läuft seitlich über. */
    .ms-ka-umschalter { display: inline-flex; }
    .ms-ka-legende { gap: 2px var(--ms-raum-2, 8px); }
    .ms-ka, .ms-ka-rumpf, .ms-ka-fuss, .ms-ka-reiter-karte { max-width: 100%; min-width: 0; }
    .ms-ka-angaben { grid-template-columns: 1fr; }
    .ms-ka-reiter-karte { min-height: 320px; }
}

/* ==========================================================================================================
   Workflow-Editor (WA3, UDR-021) — Stilgerüst aus Token (WA3.12). Nur --ms-Token, keine feste Farbe; Maße nach den
   abgenommenen Entwürfen (docs/ux/entwuerfe/workflow-editor). Typmarke und Wirkung tragen immer Symbol und Wort.
   ========================================================================================================== */
.ms-wf-arbeit { display: flex; flex-wrap: wrap; gap: var(--ms-raum-4); align-items: flex-start; min-width: 0; }
.ms-wf-palette { flex: 0 0 220px; min-width: 0; display: flex; flex-direction: column; gap: var(--ms-raum-3); }
.ms-wf-kette { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ms-wf-inspektor {
  flex: 0 0 360px; min-width: 0; position: sticky; top: var(--ms-raum-4);
  background: var(--ms-flaeche); border: 1px solid var(--ms-linie); border-radius: var(--ms-radius-gross); padding: var(--ms-raum-4);
}

/* Felder in Inspektor und Masken: eine Spalte, volle Breite, nie Viewport-Stufen (WA3.A2) */
.ms-wf-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ms-raum-3); }

.ms-wf-karte {
  --marke: var(--ms-marke);
  position: relative; background: var(--ms-flaeche); border: 1px solid var(--ms-linie); border-left: 4px solid var(--marke);
  border-radius: var(--ms-radius-gross); padding: var(--ms-raum-3) var(--ms-raum-4);
  display: flex; flex-direction: column; gap: var(--ms-raum-2);
  transition: border-color var(--ms-zeit-finger) var(--ms-kurve), box-shadow var(--ms-zeit-finger) var(--ms-kurve);
}
.ms-wf-karte[aria-current="true"] { border-color: var(--ms-marke); border-left-color: var(--marke); box-shadow: 0 0 0 2px var(--ms-marke); }
@supports (color: color-mix(in srgb, red, red)) {
  .ms-wf-karte { background: color-mix(in srgb, var(--marke) 5%, var(--ms-flaeche)); }
}
.ms-wf-karte--handlung { --marke: var(--ms-marke); }
.ms-wf-karte--laden { --marke: var(--ms-info); }
.ms-wf-karte--fuerjedes { --marke: var(--ms-zweitfarbe); }
.ms-wf-karte--bedingung { --marke: var(--ms-warnung); }
.ms-wf-karte--stopp { --marke: var(--ms-fehler); }
.ms-wf-karte--unbekannt { --marke: var(--ms-text-leise); }
.ms-wf-karte--start { --marke: var(--ms-erfolg); }
.ms-wf-karte--setzen { --marke: var(--ms-info); }
.ms-wf-karte--sammeln { --marke: var(--ms-info); }
.ms-wf-karte--warten { --marke: var(--ms-info); }
.ms-wf-karte--aufgabe { --marke: var(--ms-zweitfarbe); }
.ms-wf-karte--freigabe { --marke: var(--ms-warnung); }
.ms-wf-karte--aufrufen { --marke: var(--ms-marke); }
.ms-wf-karte--anstossen { --marke: var(--ms-erfolg); }
.ms-wf-karte--fuerjedes { border-left-width: 6px; }
.ms-wf-notizzeile { color: var(--ms-text-leise); font-size: 0.875rem; overflow-wrap: anywhere; }
/* Bedingungen als Satz (WA3.37): eine Zeile aus Feldern, die von selbst umbricht; Teile einer Gruppe eingerückt mit Einzugslinie, dazwischen das Wort */
.ms-wf-bedingungsknoten { display: flex; flex-direction: column; gap: var(--ms-raum-2); margin-bottom: var(--ms-raum-2); min-width: 0; }
.ms-wf-bedingungsknoten.ms-wf-einzug { margin-left: var(--ms-raum-4); }
.ms-wf-satzzeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ms-raum-2); min-width: 0; }
.ms-wf-satzfeld { flex: 1 1 11rem; min-width: 0; }
.ms-wf-satzfeld--ende { flex: 0 0 auto; align-self: center; }
.ms-wf-satzfeld--breit { flex: 2 1 16rem; }
.ms-wf-satzfeld--ende { display: flex; align-items: center; gap: var(--ms-raum-2); }
.ms-wf-verwendung { font-size: 0.8125rem; color: var(--ms-text-leise); white-space: nowrap; }
.ms-wf-verknuepfung { margin: 0 0 0 var(--ms-raum-4); font-size: 0.875rem; font-weight: 600; color: var(--ms-text-leise); }
.ms-wf-grenzgrund { margin: 0; font-size: 0.8125rem; color: var(--ms-text-leise); }
.ms-wf-aktionen { display: flex; flex-wrap: wrap; gap: var(--ms-raum-2); }
/* Liste (WA3.18): der Fehlgrund des letzten Laufs steht sichtbar, auf zwei Zeilen gekürzt; „mehr" zeigt den vollen Text */
.ms-wf-fehlgrund { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8125rem; color: var(--ms-text-leise); max-width: 28rem; }
.ms-wf-mehr { font-size: 0.8125rem; color: var(--ms-text-leise); max-width: 28rem; }
.ms-wf-mehr > summary { cursor: pointer; color: var(--ms-marke); }
/* Startkarte als Satz (WA3.39): der Satz oben, die Vorschau der nächsten Läufe als ruhige Liste */
.ms-wf-startsatz { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ms-text-stark); overflow-wrap: anywhere; }
.ms-wf-vorschau__titel { margin: 0 0 var(--ms-raum-1); font-size: 0.875rem; font-weight: 600; color: var(--ms-text-stark); }
.ms-wf-vorschau { margin: 0; padding-inline-start: var(--ms-raum-5, 1.25rem); color: var(--ms-text-leise); font-size: 0.875rem; }
.ms-wf-vorschau__fehler { margin: 0; color: var(--ms-fehler); font-size: 0.875rem; }
/* Bausteinpalette (WA3.29): Gruppen als Abschnitte, jeder Baustein ein echter Knopf mit Name, Wirkung und Kurzbeschreibung */
.ms-wf-palette { position: sticky; top: var(--ms-raum-4); max-height: calc(100vh - 2 * var(--ms-raum-4)); overflow-y: auto; }
.ms-wf-palette-inhalt { display: flex; flex-direction: column; gap: var(--ms-raum-2); }
.ms-wf-palette-leer { margin: 0; color: var(--ms-text-leise); font-size: 0.875rem; }
.ms-wf-palette-gruppe__titel { margin: 0; font-size: 0.875rem; font-weight: 600; }
.ms-wf-palette-gruppe__titel > button {
  display: flex; align-items: center; gap: var(--ms-raum-1); width: 100%; padding: var(--ms-raum-1) 0; background: none; border: 0; font: inherit;
  color: var(--ms-text-stark); text-align: start; cursor: pointer;
}
.ms-wf-palette-gruppe__titel > button:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
.ms-wf-palette-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ms-raum-1); }
.ms-wf-baustein {
  display: flex; flex-direction: column; gap: var(--ms-raum-1); width: 100%; text-align: start; font: inherit; cursor: pointer; color: var(--ms-text-stark);
  background: var(--ms-flaeche); border: 1px solid var(--ms-linie-feld); border-radius: var(--ms-radius); padding: var(--ms-raum-2) var(--ms-raum-3);
}
.ms-wf-baustein:hover { border-color: var(--ms-marke); }
.ms-wf-baustein:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
.ms-wf-baustein[aria-disabled="true"] { cursor: not-allowed; opacity: 0.85; border-style: dashed; }
.ms-wf-baustein__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-raum-1); font-weight: 600; }
.ms-wf-baustein__text { color: var(--ms-text-leise); font-size: 0.8125rem; }
.ms-wf-baustein__grund { font-size: 0.8125rem; color: var(--ms-text-stark); }
/* Auswahlkarten des Startdialogs (WA3.23): eine Radiogruppe, einspaltig; die Wahl trägt Rahmenstärke und Haken, nicht nur Farbe */
.ms-wf-wahlkarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ms-raum-2); }
.ms-wf-wahlkarte {
  display: flex; flex-direction: column; gap: var(--ms-raum-1); text-align: start; width: 100%; cursor: pointer; font: inherit; color: var(--ms-text-stark);
  background: var(--ms-flaeche); border: 1px solid var(--ms-linie-feld); border-radius: var(--ms-radius-gross); padding: var(--ms-raum-3) var(--ms-raum-4);
}
.ms-wf-wahlkarte:hover { border-color: var(--ms-marke); }
.ms-wf-wahlkarte:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
.ms-wf-wahlkarte--gewaehlt { border-color: var(--ms-marke); box-shadow: inset 0 0 0 1px var(--ms-marke); }
.ms-wf-wahlkarte__kopf { display: flex; align-items: center; gap: var(--ms-raum-2); font-weight: 600; }
.ms-wf-wahlkarte--gewaehlt .ms-wf-wahlkarte__kopf::after { content: "✓"; margin-inline-start: auto; color: var(--ms-marke); }
.ms-wf-wahlkarte__text { color: var(--ms-text-leise); font-size: 0.875rem; }
/* Befunde an der Karte (WA3.16): Symbol und Wort, nie allein Farbe; der Sprunglink der Sammlung ist ein Textknopf */
.ms-wf-kartenfehler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ms-raum-1); color: var(--ms-fehler); font-size: 0.875rem; }
.ms-wf-kartenfehler li { display: flex; gap: var(--ms-raum-1); align-items: flex-start; }
.ms-wf-karte--offen { border-color: var(--ms-fehler); }
.ms-wf-sprung { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ms-marke); text-decoration: underline; text-align: start; cursor: pointer; }
.ms-wf-sprung:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
/* Der Sprung aus der Prüfung ist ein Bedienziel: mindestens 24 px hoch (WCAG 2.5.8), Gestaltungsabnahme WA3.N2 */
.ms-wf-sprung { min-height: 24px; }
/* Das nur für Hilfen sichtbare Wort der Tabellenkopfzelle ist absolut gesetzt und ragte, weil kein Vorfahr positioniert war, über den Rand des Tabellenbehälters hinaus (360 px: Seitenüberlauf 703 px) */
.ms-wf-fassungen .mud-table-container { position: relative; }
/* Rohansicht einer unlesbaren Kette (WA3.63): nur lesbar, umbrechend, nie breiter als die Seite */
.ms-wf-roh { margin: 0 0 var(--ms-raum-2); padding: var(--ms-raum-3); max-height: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--ms-flaeche); border: 1px solid var(--ms-linie); border-radius: var(--ms-radius); color: var(--ms-text-stark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; }
.ms-wf-roh:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
/* Verlauf (WA12.28): Elemente und Schritte eines Laufs */
.ms-wf-lauf-elemente { list-style: none; padding: 0; margin: 0; }
.ms-wf-lauf-element-kopf { display: inline-flex; align-items: center; gap: var(--ms-raum-2); cursor: pointer; }
.ms-wf-lauf-element-kopf:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
.ms-wf-lauf-schritte { margin: var(--ms-raum-1) 0 var(--ms-raum-2); padding-inline-start: var(--ms-raum-5); }
.ms-wf-lauf-schritte > li { padding: var(--ms-raum-1) 0; }
/* Kontexthilfe im Inspektor (WA3.64) */
.ms-wf-hilfe > summary { cursor: pointer; font-size: 0.875rem; color: var(--ms-text-leise); }
.ms-wf-hilfe > summary:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
/* Gestaltungsabnahme WA3.N2: der Handbuchverweis ist ein Bedienziel und mindestens 24 px hoch (WCAG 2.5.8) */
.ms-wf-hilfe > summary, .ms-wf-hilfe a { display: inline-flex; align-items: center; min-height: 24px; }
.ms-wf-hilfe > summary { display: flex; }

/* Reiter der Editorseite: der gewählte Reiter ist kein Hauptknopf (UDR-021: ein gefüllter Knopf je Bereich), sondern getönt und unterstrichen */
.ms-wf-reiter--aktiv.mud-button-root {
  font-weight: 600;
  background: color-mix(in srgb, var(--ms-marke) 12%, transparent);
  box-shadow: inset 0 -2px 0 var(--ms-marke);
}

/* Dialogknöpfe brechen um, statt am Rand abgeschnitten zu werden (Gestaltungsabnahme WA3.N2, 360 px) */
.mud-dialog .mud-dialog-actions { flex-wrap: wrap; gap: var(--ms-raum-2); }
/* Einfügepunkt „+“ zwischen zwei Karten (WA3.26): eine ruhige Linie mit dem Knopf in der Mitte */
.ms-wf-einfuegepunkt { display: flex; justify-content: center; align-items: center; min-height: 2rem; position: relative; }
.ms-wf-einfuegepunkt::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px dashed var(--ms-linie); z-index: 0; }
.ms-wf-einfuegepunkt > * { position: relative; z-index: 1; background: var(--ms-flaeche); border-radius: 999px; }
.ms-wf-inspektor { display: flex; flex-direction: column; gap: var(--ms-raum-3); border-top: 1px solid var(--ms-linie-leicht); padding-top: var(--ms-raum-3); }
.ms-wf-inspektor:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: 2px; }
.ms-wf-feldgruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.ms-wf-feldgruppe > legend { padding: 0; margin-bottom: var(--ms-raum-2); font-size: 0.875rem; font-weight: 600; color: var(--ms-text-stark); }
.ms-wf-nummer {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--ms-raum-1);
  border: 1px solid var(--ms-linie-feld); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--ms-text-stark);
  background: var(--ms-flaeche);
}
.ms-wf-satztext { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; color: var(--ms-text-stark); }
.ms-wf-gruppenkopf { font-weight: 600; color: var(--ms-text-leise); opacity: 1; }

.ms-wf-einzug { margin-left: var(--ms-raum-6); padding-left: var(--ms-raum-4); border-left: 2px solid var(--ms-linie-leicht); display: flex; flex-direction: column; }
.ms-wf-satz { display: flex; gap: var(--ms-raum-2); flex-wrap: wrap; align-items: center; }
.ms-wf-verbinder { align-self: stretch; display: flex; align-items: center; padding-left: var(--ms-raum-6); min-height: 28px; position: relative; }
.ms-wf-verbinder::before { content: ""; width: 2px; background: var(--ms-linie-feld); position: absolute; left: 22px; top: 0; bottom: 0; }

/* Typmarke und Wirkungsplakette: Symbol + Wort, Farbe bedeutet allein nichts */
.ms-wf-plakette {
  display: inline-flex; align-items: center; gap: var(--ms-raum-1); font-size: 0.8125rem; font-weight: 500; line-height: 1;
  border: 1px solid var(--marke, var(--ms-linie-feld)); border-radius: 999px; padding: var(--ms-raum-1) var(--ms-raum-2);
  color: var(--ms-text-stark); background: var(--ms-flaeche); white-space: nowrap;
}
@supports (color: color-mix(in srgb, red, red)) {
  .ms-wf-plakette { background: color-mix(in srgb, var(--marke, var(--ms-linie-feld)) 6%, var(--ms-flaeche)); }
}
.ms-wf-typ--handlung { --marke: var(--ms-marke); }
.ms-wf-typ--laden { --marke: var(--ms-info); }
.ms-wf-typ--fuerjedes { --marke: var(--ms-zweitfarbe); }
.ms-wf-typ--bedingung { --marke: var(--ms-warnung); }
.ms-wf-typ--stopp { --marke: var(--ms-fehler); }
.ms-wf-typ--unbekannt { --marke: var(--ms-text-leise); }
.ms-wf-typ--start { --marke: var(--ms-erfolg); }
.ms-wf-typ--setzen { --marke: var(--ms-info); }
.ms-wf-typ--sammeln { --marke: var(--ms-info); }
.ms-wf-typ--warten { --marke: var(--ms-info); }
.ms-wf-typ--aufgabe { --marke: var(--ms-zweitfarbe); }
.ms-wf-typ--freigabe { --marke: var(--ms-warnung); }
.ms-wf-typ--aufrufen { --marke: var(--ms-marke); }
.ms-wf-typ--anstossen { --marke: var(--ms-erfolg); }
.ms-wf-wirkung--lesend { --marke: var(--ms-text-leise); }
.ms-wf-wirkung--intern { --marke: var(--ms-info); }
.ms-wf-wirkung--bestand { --marke: var(--ms-marke); }
.ms-wf-wirkung--aussen { --marke: var(--ms-warnung); }
.ms-wf-wirkung--geld { --marke: var(--ms-geld); }

/* Bearbeitet wird am Schreibtisch; unter 768 px bleibt die Leseansicht */
.ms-wf-nur-schreibtisch { display: block; }
.ms-wf-nur-kompakt { display: none; }

/* 1024: die drei Spalten brechen um — der Inspektor wandert unter die Kette, die Palette wird eine Knopfzeile */
@media (max-width: 1100px) {
  .ms-wf-palette { flex: 1 1 100%; }
  .ms-wf-inspektor { flex: 1 1 100%; position: static; }
}
@media (max-width: 767.98px) {
  .ms-wf-nur-schreibtisch { display: none; }
  .ms-wf-nur-kompakt { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-wf-karte { transition: none; }
}

/* Segmentwahl (MsSegmentwahl, WA3.A1): abgehobener Umschalter für zwei bis vier Optionen. Die Wahl trägt Häkchen und Fettdruck,
   nicht nur Farbe; der Fokusring bleibt der des Browsers (kein outline: none). */
.ms-segment {
  display: inline-flex; flex-wrap: wrap; max-width: 100%;
  border: 1px solid var(--ms-linie-feld); border-radius: var(--ms-radius); overflow: hidden; background: var(--ms-flaeche);
}
.ms-segment__option {
  font: inherit; border: 0; background: transparent; color: var(--ms-text-stark);
  padding: 0 var(--ms-raum-3); min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ms-raum-1);
}
.ms-segment__option + .ms-segment__option { border-left: 1px solid var(--ms-linie-feld); }
.ms-segment__option[aria-checked="true"] { background: var(--ms-marke); color: var(--ms-marke-text); font-weight: 600; }
.ms-segment__option[aria-disabled="true"] { color: var(--ms-text-aus); cursor: not-allowed; }
.ms-segment__option:focus-visible { outline: 2px solid var(--ms-marke); outline-offset: -4px; }
.ms-segment__option[aria-checked="true"]:focus-visible { outline-color: var(--ms-marke-text); }
.ms-segment__grund { display: block; font-size: 0.75rem; color: var(--ms-text-leise); margin-top: var(--ms-raum-1); }

/* ============================================================================================
   Zugänglichkeit nach dem Prüfagenten-Durchgang vom 13.10.2026 — jeder Block mit seiner Messung
   ============================================================================================ */

/* Eine Handlung als Verweis gezeichnet (MsLinkKnopf): echter Knopf, Gestalt eines Verweises. Ohne Rahmen, ohne Innenabstand, die Schrift des Textes; Unterstreichung wie ein
   Verweis im Fließtext, nicht erst beim Überfahren — ein Knopf, der nur durch Farbe als bedienbar auffiele, wäre für Menschen mit Farbsehschwäche keiner. */
.ms-linkknopf {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    text-decoration: underline;
    min-height: 24px;
    /* Auch ein Verweis aus einer einzigen Ziffer („7“ Deckungslücken im Kopf der Kundenakte, gemessen 8×24 px am 21.10.2026) erreicht die 24 px, die WCAG 2.5.8 verlangt. */
    min-width: 24px;
}
.ms-linkknopf:hover { text-decoration-thickness: 2px; }

/* Verweise im Fließtext sind unterstrichen (WCAG 1.4.1; axe `link-in-text-block`). MudBlazor unterstreicht `mud-link-underline-hover` erst beim Überfahren; der Verweis
   (Markenblau) hat gegen den Text daneben (Grau bis Fast-Schwarz) nur 1,19:1 bis 2,34:1 Kontrast, verlangt sind 3:1 — Farbe allein trägt ihn nicht. Gemessen auf sechs Seiten
   (datenaustausch/gdv, verwaltung/email, -erscheinungsbild, -vorlagen, auswertungen/schadenkarte, Beteiligungen der Vertragsakte), 17 Rollen. Gilt für Verweise, die in
   einem Absatz oder einer Meldung stehen; Verweise in Tabellenzellen, Menüs und Kopfzeilen bleiben, wie sie sind. */
p a.mud-link,
.mud-typography-body1 a.mud-link,
.mud-typography-body2 a.mud-link,
.mud-typography-caption a.mud-link,
.mud-alert a.mud-link,
.mud-alert-message a.mud-link {
    text-decoration: underline;
}

/* Ein gesperrter Status-Chip bleibt LESBAR (axe `color-contrast`, 1,47:1 — Weiß auf Grün mit der halben Deckkraft, die MudBlazor einem gesperrten Chip gibt). Er trägt den
   Status, also eine Information; sperren darf man das Bedienen, nicht das Lesen. Das Sperren zeigt der Zeiger und der Tooltip mit dem Grund; der Pfeil bleibt gedämpft. */
.mud-chip.ms-status-chip-bedienbar.mud-disabled {
    opacity: 1;
    cursor: not-allowed;
}
.mud-chip.ms-status-chip-bedienbar.mud-disabled .mud-icon-root { opacity: .55; }

/* Kleine Verweise nach WCAG 2.5.8 (Zielgröße ≥ 24 px): Ein Verweis in einem Absatz, Listenpunkt, einer Flex-Zeile oder einem Gitterfeld ist 17–21 px hoch
   (cockpit-aufgabe-link, cockpit-aufgaben-alle, cockpit-team-mappe, gesellschaftakte-produkt-link, ap-mailto …; nachgemessen: ein Selektor „nur Kind" traf sie nicht,
   weil Text oder ein Zusatz daneben steht). Vertikaler Innenabstand vergrößert die Fläche, ohne die Zeile höher zu machen
   (bei einem Inline-Element zählt er nicht zur Zeilenhöhe). */
a.mud-link {
    padding-block: 4px;
}
/* Eine einzelne Ziffer als Verweis („1" offener Schaden) ist 9 px breit. */
.ms-zaehlverweis {
    display: inline-block;
    min-width: 24px;
    text-align: center;
}
/* Die Zielfläche wächst durch Innenabstand; der gleich große negative Außenabstand nimmt sie aus der Zeilenhöhe zurück. Ohne ihn stand der Wert „Offene Schäden“
   im Kennfeld 2,5 px tiefer als die Werte daneben (Aktenausrichtung, gemessen). `a.` hebt die Regel über `a.mud-link { padding-block: 4px }` (gleiche Zahl, eine Quelle). */
a.ms-zaehlverweis {
    padding-block: 4px;
    margin-block: -4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHADENKARTE 2 (Spec S528) — Vollfläche, Karte, Vorschauleiste, Zeitraffer

   DIE VOLLFLÄCHE. Bis S528 stand die Karte fest auf 480 px, und auf einem großen Schirm blieb darunter eine halbe Seite
   leer. Das Layout reicht keine Resthöhe weiter (`.ms-inhaltsbreite` ist ein Block ohne Höhe) — deshalb nimmt sich die
   Seite ihre Höhe selbst: Fensterhöhe minus App-Leiste minus Fußabstand des Inhalts. `dvh` statt `vh`, damit die
   Adressleiste eines Telefons die Karte nicht unter den Rand schiebt. Unter 960 px gibt es keine feste Höhe mehr: Dort
   steht die Leiste unter der Karte, und die Seite scrollt.

   KEINE EIGENE FARBE (S512): Jede Farbe hier ist ein Token oder eine Mischung aus Token. Die fünf Stufen laufen von
   Info über Warnung zu Fehler — dieselbe Bedeutung wie überall in der Anwendung, in der Farbe des Hauses.
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-vollflaeche {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--mud-appbar-height, 64px) - var(--ms-raum-4, 16px));
    min-height: 560px;
}

.ms-vollflaeche > * { flex: 0 0 auto; }

.ms-sk-filter {
    padding: var(--ms-raum-3, 12px) var(--ms-raum-4, 16px);
    margin-bottom: var(--ms-raum-3, 12px);
}

.ms-sk-filterzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
}

.ms-sk-filterzeile--weitere {
    margin-top: var(--ms-raum-3, 12px);
    padding-top: var(--ms-raum-3, 12px);
    border-top: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default));
}

.ms-sk-filtergruppe { display: flex; align-items: center; gap: var(--ms-raum-2, 8px); }
.ms-sk-betragsfilter { flex: 0 1 220px; min-width: 180px; }
.ms-sk-filterbeschriftung { font-size: 0.8125rem; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }

.ms-sk-zaehler {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: var(--ms-raum-2, 8px);
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    background: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-marke, var(--mud-palette-primary));
}

.ms-sk-arbeit {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--ms-raum-3, 12px);
}

/* Vollbild ohne Fullscreen-API: Die Arbeitsfläche legt sich über die ganze Anwendung. Kein Berechtigungsdialog, kein
   anderes Verhalten je Browser, und Escape führt zurück (SchadenkarteSeite). */
.ms-sk-arbeit--vollbild {
    position: fixed;
    inset: 0;
    z-index: 1400;
    padding: var(--ms-raum-3, 12px);
    background: var(--ms-grund, var(--mud-palette-background));
}

.ms-sk-kartenspalte { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ms-sk-kartenspalte > * { min-height: 0; }
.ms-sk-kartenspalte > .ms-karte--fuellen,
.ms-sk-kartenspalte > [data-testid="schadenkarte"] { flex: 1 1 auto; }

.ms-karte--fuellen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ms-karte-buehne { position: relative; min-height: 0; }
.ms-karte--fuellen .ms-karte-buehne { flex: 1 1 auto; display: flex; }
.ms-karte--fuellen .ms-karte-flaeche { flex: 1 1 auto; min-height: 320px; }

.ms-karte-flaeche {
    width: 100%;
    border-radius: var(--ms-radius-gross, 8px);
    border: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    overflow: hidden;
    z-index: 0;
}

/* Die Kacheln treten zurück, damit die Daten hervortreten: entsättigt im hellen, umgekehrt im dunklen Erscheinungsbild
   (ein greller Stadtplan in einer dunklen Oberfläche blendet). Dunkel erkennt das Kartenmodul an der Fläche des Hauses. */
/* S532: Der Stil gehört der Schicht, nicht allen Kacheln. Gedämpft ist nur „OSM gedämpft“; umgekehrt werden im Dunkelmodus nur Stadtpläne
   (`--invertierbar`) — Luftbilder bleiben Fotos, die Dunkelkarte (basemap.de) kommt serverseitig invertiert und braucht keinen Filter, und Überlagerungen
   behalten ihre Farben. Ein `filter` verschiebt nichts und wird von Leaflet nicht vermessen (S505). */
.ms-karte-kacheln--gedaempft { filter: saturate(0.35) contrast(1.02); }
.ms-karte--dunkel .ms-karte-kacheln--invertierbar { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88); }
.ms-karte--dunkel .ms-karte-kacheln--invertierbar.ms-karte-kacheln--gedaempft { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.35); }
.ms-karte--zeichnen, .ms-karte--zeichnen .leaflet-interactive { cursor: crosshair !important; }

.ms-karte-ladebalken { position: absolute; top: 0; left: 0; right: 0; z-index: 650; }

.ms-karte-glas {
    background: color-mix(in srgb, var(--ms-flaeche, var(--mud-palette-surface)) 88%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius-gross, 8px);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ms-text-stark, var(--mud-palette-text-primary)) 14%, transparent);
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
}

.ms-karte-kopfleiste {
    position: absolute;
    top: var(--ms-raum-3, 12px);
    left: var(--ms-raum-3, 12px);
    right: var(--ms-raum-3, 12px);
    z-index: 640;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ms-raum-2, 8px);
    pointer-events: none;
}

.ms-karte-kopfleiste > * { pointer-events: auto; }

.ms-karte-kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-raum-1, 4px) var(--ms-raum-3, 12px);
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    font-size: 0.875rem;
}

.ms-karte-kennzahl-warnung { color: var(--ms-warnung-text, var(--ms-text-stark, var(--mud-palette-text-primary))); font-weight: 600; }

.ms-karte-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-raum-1, 4px);
    padding: var(--ms-raum-1, 4px) var(--ms-raum-2, 8px);
}

/* Die Ebenenwahl (S532): ein Knopf in der Werkzeugleiste, darunter ein Feld. Absolut positioniert, ohne Transformation (S505). */
.ms-karte-ebenen { display: inline-flex; }
.ms-karte-ebenenfeld {
    position: absolute;
    top: calc(100% + var(--ms-raum-1, 4px));
    right: 0;
    z-index: 645;
    width: min(320px, calc(100vw - 2 * var(--ms-raum-3, 12px)));
    max-height: min(70dvh, 560px);
    overflow-y: auto;
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    font-size: 0.875rem;
}
.ms-karte-ebenengruppe { border: 0; margin: 0 0 var(--ms-raum-2, 8px); padding: 0; min-width: 0; }
.ms-karte-ebenengruppe > legend { font-weight: 600; padding: 0; margin-bottom: var(--ms-raum-1, 4px); }
/* Klickziel mindestens 24 px hoch (WCAG 2.5.8): Option und Schalter belegen die ganze Zeile. */
.ms-karte-ebenenoption { display: flex; min-height: 28px; width: 100%; margin: 0; }
.ms-karte-ebenenoption .mud-radio, .ms-karte-ebenenoption .mud-switch { min-height: 28px; }
.ms-karte-ebenenhinweis {
    margin-top: var(--ms-raum-2, 8px);
    padding: var(--ms-raum-1, 4px) var(--ms-raum-2, 8px);
    border-left: 3px solid var(--ms-warnung, var(--mud-palette-warning));
}
.ms-karte-ebenenquellen { margin: var(--ms-raum-2, 8px) 0 0; font-size: 0.75rem; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }

/* Abdeckungshinweise über der Karte (GK3.5): Auch bei geschlossener Ebenenwahl steht da, dass an diesem Ort kein Luftbild zu haben ist. */
.ms-karte-abdeckung {
    position: absolute;
    left: var(--ms-raum-3, 12px);
    right: var(--ms-raum-3, 12px);
    top: 64px;
    z-index: 636;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ms-raum-1, 4px);
    pointer-events: none;
}
.ms-karte-abdeckung > * { pointer-events: auto; padding: var(--ms-raum-1, 4px) var(--ms-raum-3, 12px); font-size: 0.875rem; max-width: 100%; }

.ms-karte-werkzeughinweis {
    position: absolute;
    left: 50%;
    top: 72px;
    transform: translateX(-50%);
    z-index: 640;
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    font-size: 0.875rem;
}

.ms-karte-legende {
    position: absolute;
    left: var(--ms-raum-3, 12px);
    /* Unten links steht der Maßstab (S532): Die Legende sitzt darüber. */
    bottom: 44px;
    z-index: 630;
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    font-size: 0.75rem;
}

/* Steht der Zeitraffer unten, rückt die Legende über ihn, statt von ihm verdeckt zu werden. */
.ms-karte-buehne:has(.ms-sk-zeitraffer) .ms-karte-legenden { bottom: 150px; }

.ms-karte-legende-titel { display: block; font-weight: 600; margin-bottom: var(--ms-raum-1, 4px); }
.ms-karte-legende ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ms-karte-legende li { display: flex; align-items: center; gap: var(--ms-raum-2, 8px); }
.ms-karte-legende-feld { width: 14px; height: 14px; border-radius: 50%; background: var(--ms-karte-farbe); }

/* Die fünf Stufen — Quantile der gewählten Gewichtung (Schadenkartenregeln.Stufen). */
.ms-karte-stufe-0 { --ms-karte-farbe: color-mix(in srgb, var(--ms-info, var(--mud-palette-info)) 55%, var(--ms-flaeche, var(--mud-palette-surface))); }
.ms-karte-stufe-1 { --ms-karte-farbe: var(--ms-info, var(--mud-palette-info)); }
.ms-karte-stufe-2 { --ms-karte-farbe: var(--ms-warnung, var(--mud-palette-warning)); }
.ms-karte-stufe-3 { --ms-karte-farbe: color-mix(in srgb, var(--ms-warnung, var(--mud-palette-warning)) 45%, var(--ms-fehler, var(--mud-palette-error))); }
.ms-karte-stufe-4 { --ms-karte-farbe: var(--ms-fehler, var(--mud-palette-error)); }

/* Ein Marker: ein Ring in der Farbe der Stufe — voll, soweit die Fälle noch offen sind —, innen die Zahl der Schäden auf
   der Fläche. So steht die Zahl in jeder Stufe gleich lesbar (Text auf Fläche, nicht auf Gelb). */
.ms-karte-markerhuelle { background: none; border: 0; }
.ms-karte-markerhuelle:focus-visible { outline: 3px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: 2px; border-radius: 50%; }

.ms-karte-marker {
    display: grid;
    place-items: center;
    width: var(--ms-karte-groesse, 32px);
    height: var(--ms-karte-groesse, 32px);
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, var(--ms-flaeche, var(--mud-palette-surface)) 0 64%, transparent 66%),
        conic-gradient(var(--ms-karte-farbe) var(--ms-karte-offen, 0deg),
            color-mix(in srgb, var(--ms-karte-farbe) 60%, var(--ms-flaeche, var(--mud-palette-surface))) 0);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--ms-text-stark, var(--mud-palette-text-primary)) 35%, transparent);
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--ms-zeit-finger, .15s) var(--ms-kurve, ease);
}

.ms-karte-markerhuelle:hover .ms-karte-marker { transform: scale(1.12); }

/* Die Auswahl: ein Rahmen um den Bereich, ein Ring um den Punkt; der Puls zeigt, worauf die Leiste gerade zeigt. */
.ms-karte-auswahl, .ms-karte-zeichnung {
    stroke: var(--ms-marke, var(--mud-palette-primary));
    fill: var(--ms-marke, var(--mud-palette-primary));
    fill-opacity: 0.08;
    stroke-dasharray: 6 4;
}

.ms-karte-auswahlring {
    border: 3px solid var(--ms-marke, var(--mud-palette-primary));
    border-radius: 50%;
    background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 12%, transparent);
}

.ms-karte-puls {
    border-radius: 50%;
    border: 3px solid var(--ms-marke, var(--mud-palette-primary));
    animation: ms-karte-puls 1.2s var(--ms-kurve, ease) infinite;
}

@keyframes ms-karte-puls {
    from { transform: scale(0.6); opacity: 1; }
    to { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ms-karte-puls { animation: none; }
    .ms-karte-marker { transition: none; }
}

/* ============================================================================================
   KARTENWERK 3 (Spec S532, GK3.8–GK3.16): Werkzeuge, Punktschichten, Kontextmenü, Suche, Anzeigen, Punktliste.

   S505: NICHTS von dem, was Leaflet, Geoman oder MudBlazor vermessen, wird per CSS transformiert oder in der Größe verändert. Alles hier ist absolut
   positioniert, gefärbt oder gerahmt. Die Klickziele sind mindestens 24 px hoch und breit (WCAG 2.5.8).
   ============================================================================================ */

/* Zeichnen: Fadenkreuz, kein Wischen der Seite unter dem Finger, und Marker nehmen dem Klick nichts weg — eine Ecke darf auf einem Marker liegen. */
.ms-karte--zeichnen { touch-action: none; }
.ms-karte--zeichnen .leaflet-marker-icon { pointer-events: none !important; }
.ms-karte-zeichnung--linie { fill: none; fill-opacity: 0; }

/* Eine stehende Messung: kräftige Linie, bei Flächen ein leichtes Raster. */
.ms-karte-messung { stroke: var(--ms-marke, var(--mud-palette-primary)); stroke-width: 3; fill: var(--ms-marke, var(--mud-palette-primary)); fill-opacity: 0.12; }
.ms-karte-messung--linie { fill: none; fill-opacity: 0; }
.ms-karte-messtext.leaflet-tooltip {
    background: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    border: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius, 4px);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 2px 8px;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ms-text-stark, var(--mud-palette-text-primary)) 25%, transparent);
}
.ms-karte-messtext.leaflet-tooltip::before { display: none; }

/* Die Felder unter den Leisten: Suche und Werkzeugfeld stehen im Fluss der Kopfleiste auf einer eigenen Zeile (flex-basis 100 %), nicht absolut darüber. */
.ms-karte-kopffelder {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ms-raum-2, 8px);
    pointer-events: none;
}
.ms-karte-kopffelder > * { pointer-events: auto; }

/* Das Werkzeugfeld: Hinweis zum Werkzeug, Radius des Umkreises, stehende Messung. Ersetzt den einfachen Hinweis (.ms-karte-werkzeughinweis). */
.ms-karte-werkzeugfeld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    margin-left: auto;
    max-width: 100%;
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    font-size: 0.875rem;
}
.ms-karte-radiusfeld { width: 140px; }
.ms-karte-werkzeugleiste { margin-left: auto; }
.ms-karte-werkzeuggruppe { display: inline-flex; align-items: center; gap: var(--ms-raum-1, 4px); }
.ms-karte-werkzeuggruppe + .ms-karte-werkzeuggruppe { margin-left: var(--ms-raum-2, 8px); padding-left: var(--ms-raum-2, 8px); border-left: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default)); }

/* Symbole der Punktschichten (GK3.15): Ring in der Farbe des Status, Fläche in der Farbe des Hauses, Zeichen der Art darin. Der Status steht außerdem im Namen
   des Markers und in der Legende — die Farbe allein trägt nichts. */
.ms-karte-symbol {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--ms-karte-groesse, 30px);
    height: var(--ms-karte-groesse, 30px);
    border-radius: 50%;
    border: 4px solid var(--ms-karte-farbe, var(--ms-text-leise, var(--mud-palette-text-secondary)));
    background: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    box-shadow: 0 1px 5px color-mix(in srgb, var(--ms-text-stark, var(--mud-palette-text-primary)) 35%, transparent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.ms-karte-glyphe { width: 58%; height: 58%; fill: currentColor; }
.ms-karte-symbol--gruppe { font-size: 0.75rem; }
.ms-karte-markerhuelle--symbol:focus-visible,
.ms-karte-markerhuelle--gruppe:focus-visible { border-radius: 50%; }
.ms-karte-markerhuelle--symbol:hover .ms-karte-symbol { box-shadow: 0 2px 8px color-mix(in srgb, var(--ms-text-stark, var(--mud-palette-text-primary)) 50%, transparent); }

.ms-karte-status-neutral { --ms-karte-farbe: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-karte-status-gut { --ms-karte-farbe: var(--ms-erfolg, var(--mud-palette-success)); }
.ms-karte-status-warnung { --ms-karte-farbe: var(--ms-warnung, var(--mud-palette-warning)); }
.ms-karte-status-kritisch { --ms-karte-farbe: var(--ms-fehler, var(--mud-palette-error)); }
.ms-karte-status-inaktiv { --ms-karte-farbe: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
/* Zweites Merkmal neben der Farbe: kritisch ist dicker, inaktiv gepunktet und blasser. */
.ms-karte-symbol.ms-karte-status-kritisch { border-width: 5px; }
.ms-karte-symbol.ms-karte-status-inaktiv { border-style: dotted; opacity: 0.75; }

/* Legende der Schichten. */
.ms-karte-legende-schichten { margin-top: var(--ms-raum-2, 8px); }
.ms-karte-legende-schicht { display: flex; align-items: center; gap: var(--ms-raum-2, 8px); min-height: 24px; }
.ms-karte-legende-schicht label { display: inline-flex; align-items: center; gap: var(--ms-raum-2, 8px); min-height: 24px; cursor: pointer; }
.ms-karte-legende-schicht input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ms-marke, var(--mud-palette-primary)); }
.ms-karte-legende-symbol { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ms-text-leise, var(--mud-palette-text-secondary)); background: var(--ms-flaeche, var(--mud-palette-surface)); }
.ms-karte-legende-symbol .ms-karte-glyphe { width: 70%; height: 70%; }
.ms-karte-legende-stati { display: inline-flex; flex-wrap: wrap; gap: 2px var(--ms-raum-2, 8px); margin: 0 0 0 28px; padding: 0; list-style: none; font-size: 0.75rem; }
.ms-karte-legende-stati li { display: inline-flex; align-items: center; gap: 4px; }
.ms-karte-legende-statusfeld { width: 12px; height: 12px; border-radius: 50%; background: var(--ms-karte-farbe); }

/* Kontextmenü: ein Menü an der Stelle des Klicks, absolut in der Bühne. Die Stelle selbst markiert ein Ring (kontextmarke) in der Karte. */
.ms-karte-kontext {
    position: absolute;
    z-index: 660;
    width: 264px;
    max-width: calc(100% - 2 * var(--ms-raum-2, 8px));
    padding: var(--ms-raum-1, 4px);
    font-size: 0.875rem;
}
.ms-karte-kontext-kopf { padding: var(--ms-raum-1, 4px) var(--ms-raum-3, 12px); font-size: 0.75rem; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); font-variant-numeric: tabular-nums; }
.ms-karte-kontext-eintrag {
    display: flex;
    align-items: center;
    gap: var(--ms-raum-2, 8px);
    width: 100%;
    min-height: 32px;
    padding: 4px var(--ms-raum-3, 12px);
    border: 0;
    border-radius: var(--ms-radius, 4px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.ms-karte-kontext-eintrag:hover { background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 12%, transparent); }
.ms-karte-kontext-eintrag:focus-visible { outline: 3px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: -3px; }
.ms-karte-kontext-eintrag[disabled] { opacity: 0.55; cursor: default; }
.ms-karte-kontext-trenner { height: 1px; margin: var(--ms-raum-1, 4px) 0; background: var(--ms-linie-leicht, var(--mud-palette-lines-default)); border: 0; }
.ms-karte-kontext-adresse { padding: var(--ms-raum-1, 4px) var(--ms-raum-3, 12px); font-size: 0.8125rem; }
.ms-karte-kontextmarke { border: 3px solid var(--ms-marke, var(--mud-palette-primary)); border-radius: 50%; background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 18%, transparent); }

/* Kartensuche: ein Feld mit Trefferliste unter den Leisten, links (im Fluss der Kopfleiste). */
.ms-karte-suche {
    width: min(380px, 100%);
    padding: var(--ms-raum-2, 8px);
}
.ms-karte-treffer { list-style: none; margin: var(--ms-raum-1, 4px) 0 0; padding: 0; max-height: 40dvh; overflow-y: auto; }
.ms-karte-treffer-gruppe { margin: var(--ms-raum-2, 8px) 0 2px; padding: 0 var(--ms-raum-2, 8px); font-size: 0.75rem; font-weight: 600; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-karte-treffer button {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 4px var(--ms-raum-2, 8px);
    border: 0;
    border-radius: var(--ms-radius, 4px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ms-karte-treffer button:hover:not([disabled]) { background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 12%, transparent); }
.ms-karte-treffer button:focus-visible { outline: 3px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: -3px; }
.ms-karte-treffer button[disabled] { opacity: 0.6; cursor: default; }
.ms-karte-treffer-zusatz { display: block; font-size: 0.75rem; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-karte-suchtreffer { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ms-fehler, var(--mud-palette-error)); filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ms-text-stark, var(--mud-palette-text-primary)) 45%, transparent)); }
.ms-karte-suchtreffer .ms-karte-glyphe { width: 100%; height: 100%; }

/* Anzeigen: Maßstab und Koordinaten unten links, die Minikarte unten rechts über dem Zoom. */
.ms-karte-koordinaten.leaflet-control {
    margin: 0 0 4px 10px;
    padding: 1px 8px;
    border: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius, 4px);
    background: color-mix(in srgb, var(--ms-flaeche, var(--mud-palette-surface)) 88%, transparent);
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.ms-karte-buehne:has(.ms-karte-koordinaten) .ms-karte-legenden { bottom: 76px; }

/* Die Stilkachel (S550 Regel 4): unten links über dem Maßstab, wie bei Google Maps. Die Legende rückt darüber. Absolut positioniert, ohne Transformation (S505). */
.ms-karte-stilwahl {
    position: absolute;
    left: var(--ms-raum-3, 12px);
    bottom: 34px;
    z-index: 632;
    display: flex;
    align-items: flex-end;
    gap: var(--ms-raum-1, 4px);
}
.ms-karte-stilkachel {
    position: relative;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 2px solid var(--ms-flaeche, var(--mud-palette-surface));
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--ms-flaeche, var(--mud-palette-surface));
    box-shadow: var(--mud-elevation-2);
}
.ms-karte-stilkachel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-karte-stilkachel-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 4px 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    /* Schrift auf dem Bild, nicht auf der Fläche: in beiden Erscheinungsbildern hell auf dunklem Verlauf. */
    color: var(--mud-palette-white);
    text-align: center;
    background: linear-gradient(to top, color-mix(in srgb, var(--mud-palette-black) 72%, transparent), transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-karte-stilkachel:hover { border-color: var(--ms-marke, var(--mud-palette-primary)); }
.ms-karte-stilkachel:focus-visible, .ms-karte-stilmehr:focus-visible {
    outline: 3px solid var(--ms-fokus, var(--mud-palette-primary));
    outline-offset: 2px;
}
.ms-karte-stilmehr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ms-text, var(--mud-palette-text-primary));
    background: var(--ms-flaeche, var(--mud-palette-surface));
    box-shadow: var(--mud-elevation-2);
}
.ms-karte-stilreihe {
    display: flex;
    gap: var(--ms-raum-2, 8px);
    max-width: min(560px, calc(100vw - 140px));
    overflow-x: auto;
    padding: var(--ms-raum-2, 8px);
}
.ms-karte-stiloption {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 72px;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
/* Das Optionsfeld bleibt im Dokument (Tastatur, Vorlesen), sichtbar ist das Bild mit dem Rahmen der Wahl. */
.ms-karte-stiloption input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ms-karte-stiloption img { width: 56px; height: 56px; border-radius: 8px; border: 2px solid transparent; object-fit: cover; }
.ms-karte-stiloption--gewaehlt img { border-color: var(--ms-marke, var(--mud-palette-primary)); }
.ms-karte-stiloption--gewaehlt span { font-weight: 600; color: var(--ms-marke, var(--mud-palette-primary)); }
.ms-karte-stiloption:has(input:focus-visible) img { outline: 3px solid var(--ms-fokus, var(--mud-palette-primary)); outline-offset: 1px; }
.ms-karte-buehne:has(.ms-karte-stilwahl) .ms-karte-legenden { bottom: 116px; }
.ms-karte-buehne:has(.ms-karte-stilwahl):has(.ms-karte-koordinaten) .ms-karte-legenden { bottom: 148px; }
.ms-karte-buehne:has(.ms-karte-stilwahl):has(.ms-sk-zeitraffer) .ms-karte-legenden { bottom: 226px; }
/* Die Leinwand eines Vektorstils fängt keine Zeiger: Klicks gehören der Karte darunter (Leaflet), nicht MapLibre. */
.leaflet-gl-layer { pointer-events: none; }
.leaflet-control-minimap { margin-bottom: 8px !important; }
@media (prefers-reduced-motion: reduce) {
    .leaflet-control-minimap, .leaflet-control-minimap a { transition: none; }
}

/* Liste der sichtbaren Punkte: die Alternative zur Karte, unter ihr (GK3.16). */
.ms-karte-punktliste {
    flex: 0 0 auto;
    max-height: 36dvh;
    overflow-y: auto;
    margin-top: var(--ms-raum-2, 8px);
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    border: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius-gross, 8px);
    background: var(--ms-flaeche, var(--mud-palette-surface));
}
.ms-karte-punktliste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ms-karte-punktliste button {
    display: flex;
    align-items: center;
    gap: var(--ms-raum-2, 8px);
    width: 100%;
    min-height: 32px;
    padding: 4px var(--ms-raum-2, 8px);
    border: 0;
    border-radius: var(--ms-radius, 4px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ms-karte-punktliste button:hover { background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 12%, transparent); }
.ms-karte-punktliste button:focus-visible { outline: 3px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: -3px; }
.ms-karte-punktliste-weitere { margin: var(--ms-raum-2, 8px) 0 0; font-size: 0.8125rem; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }

/* Die Karte selbst ist ein Tabstopp (Pfeiltasten schieben, Plus und Minus zoomen): Sie bekommt einen sichtbaren Fokusrahmen. */
.ms-karte-flaeche:focus-visible { outline: 3px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: -3px; }

/* Vorlieben des Betrachters: Bewegung reduzieren heißt auch, dass Marker nicht wachsen. */
@media (prefers-reduced-motion: reduce) {
    .ms-karte-markerhuelle:hover .ms-karte-marker { transform: none; }
}

.ms-sk-keine-treffer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 620;
    display: flex;
    align-items: center;
    gap: var(--ms-raum-2, 8px);
    padding: var(--ms-raum-3, 12px) var(--ms-raum-4, 16px);
}

/* ---- Vorschauleiste ---- */
.ms-sk-leiste {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ms-flaeche, var(--mud-palette-surface));
    border: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius-gross, 8px);
    overflow: hidden;
}

.ms-sk-leiste-kopf {
    flex: 0 0 auto;
    padding: var(--ms-raum-3, 12px) var(--ms-raum-4, 16px);
    border-bottom: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default));
}

.ms-sk-kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ms-raum-2, 8px); }
.ms-sk-kopftitel { min-width: 0; }
.ms-sk-titel { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ms-sk-titel:focus-visible { outline: 2px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: 2px; }

.ms-sk-leiste-rumpf { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--ms-raum-3, 12px) var(--ms-raum-4, 16px); }

.ms-sk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ms-raum-2, 8px); margin-bottom: var(--ms-raum-3, 12px); }

.ms-sk-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    border-radius: var(--ms-radius, 4px);
    background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 6%, var(--ms-flaeche, var(--mud-palette-surface)));
}

.ms-sk-kpi-titel { font-size: 0.75rem; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-sk-kpi-wert { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ms-sk-hinweis { display: flex; align-items: flex-start; gap: var(--ms-raum-2, 8px); margin: var(--ms-raum-2, 8px) 0; color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-sk-leise { color: var(--ms-text-leise, var(--mud-palette-text-secondary)); }
.ms-sk-klein { font-size: 0.8125rem; }
.ms-sk-abschneiden { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sk-betrag { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }

.ms-sk-rangliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ms-raum-2, 8px); }
.ms-sk-rang { padding: var(--ms-raum-2, 8px); border-radius: var(--ms-radius, 4px); border: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default)); }
.ms-sk-rang-zeile { display: flex; align-items: center; gap: var(--ms-raum-2, 8px); min-width: 0; }

.ms-sk-sortierung { margin-bottom: var(--ms-raum-3, 12px); }

.ms-sk-ort { padding: var(--ms-raum-3, 12px) 0; border-top: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default)); }
.ms-sk-ort:first-of-type { border-top: 0; padding-top: 0; }
.ms-sk-ort-kopf { display: flex; align-items: flex-start; gap: var(--ms-raum-2, 8px); margin-bottom: var(--ms-raum-2, 8px); }
.ms-sk-ort-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-weight: 600; }

.ms-sk-vertrag { margin-left: var(--ms-raum-4, 16px); padding-left: var(--ms-raum-3, 12px); border-left: 2px solid var(--ms-linie-leicht, var(--mud-palette-lines-default)); margin-bottom: var(--ms-raum-3, 12px); }
.ms-sk-verweise { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--ms-raum-2, 8px); min-width: 0; }

/* In der 420 px schmalen Leiste bricht der Zusatz eines Verweises (Gesellschaft · Sparte) in die nächste Zeile, statt die
   Vertragsnummer wegzudrücken — die Nummer ist das, wonach man sucht (gemessen 16.10.2026: Nummer auf 0 px gekürzt). */
.ms-sk-leiste .ms-entitylink { flex-wrap: wrap; row-gap: 0; }
.ms-sk-leiste .ms-entitylink-zusatz { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }

.ms-sk-fall {
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
    margin-bottom: var(--ms-raum-2, 8px);
    border-radius: var(--ms-radius, 4px);
    border: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default));
    transition: border-color var(--ms-zeit-finger, .15s) var(--ms-kurve, ease), box-shadow var(--ms-zeit-finger, .15s) var(--ms-kurve, ease);
}

.ms-sk-fall:hover { border-color: var(--ms-marke, var(--mud-palette-primary)); box-shadow: 0 2px 8px color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 18%, transparent); }
.ms-sk-fall--offen { border-left: 3px solid var(--ms-warnung, var(--mud-palette-warning)); }
.ms-sk-fall-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ms-raum-2, 8px); }
.ms-sk-fall-fuss { margin-top: var(--ms-raum-2, 8px); justify-content: space-between; }
.ms-sk-betraege { display: flex; flex-direction: column; }
.ms-sk-betraege .ms-sk-betrag { margin-left: 0; }
.ms-sk-ursache { margin-top: var(--ms-raum-1, 4px); font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Zeitraffer ---- */
.ms-sk-zeitraffer {
    position: absolute;
    left: 50%;
    bottom: var(--ms-raum-4, 16px);
    transform: translateX(-50%);
    z-index: 640;
    width: min(720px, calc(100% - 2 * var(--ms-raum-4, 16px)));
    padding: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px);
}

.ms-sk-zeitraffer-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-raum-2, 8px) var(--ms-raum-3, 12px); }
.ms-sk-zeitraffer-stand { display: flex; flex-direction: column; min-width: 110px; line-height: 1.2; }
.ms-sk-zeitraffer-steuerung > :last-child { margin-left: auto; }

.ms-sk-zeitraffer-balken { display: flex; align-items: flex-end; gap: 2px; height: 48px; margin-top: var(--ms-raum-2, 8px); }

.ms-sk-zeitraffer-saeule {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ms-sk-zeitraffer-fuellung {
    display: block;
    width: 100%;
    height: var(--ms-sk-hoehe, 4%);
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 30%, var(--ms-flaeche, var(--mud-palette-surface)));
}

.ms-sk-zeitraffer-saeule--gewesen .ms-sk-zeitraffer-fuellung { background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 60%, var(--ms-flaeche, var(--mud-palette-surface))); }
.ms-sk-zeitraffer-saeule--jetzt .ms-sk-zeitraffer-fuellung { background: var(--ms-marke, var(--mud-palette-primary)); }
.ms-sk-zeitraffer-saeule:focus-visible { outline: 2px solid var(--ms-marke, var(--mud-palette-primary)); outline-offset: 1px; }
.ms-sk-zeitraffer-regler { width: 100%; margin: var(--ms-raum-1, 4px) 0 0; accent-color: var(--ms-marke, var(--mud-palette-primary)); }

/* Unter 960 px: keine feste Höhe, die Leiste steht unter der Karte. Die Karte behält 60 % der sichtbaren Höhe —
   auf dem Telefon im Außendienst (Q3, 390 × 844) ist das die Hälfte des Schirms für die Karte und darunter die Fälle. */
@media (max-width: 959.98px) {
    .ms-vollflaeche { height: auto; min-height: 0; }
    .ms-sk-arbeit { grid-template-columns: minmax(0, 1fr); }
    .ms-karte--fuellen .ms-karte-flaeche { min-height: 60dvh; }
    .ms-sk-leiste { max-height: none; }
    .ms-karte-legende { display: none; }

    /* N15, gemessen 22.10.2026 (Q3, 390 × 844): Die Werkzeugleiste bricht auf dem Telefon in fünf Zeilen (309 px), der Zeitraffer ist 252 px hoch — zusammen mehr als
       die 506 px der Karte. Der absolut unten liegende Zeitraffer deckte Suche, Liste, Minikarte, Koordinaten, Export und Druck, und Playwright meldete „fängt den Klick ab“.
       Hier ist kein Platz für eine Überlagerung: Der Zeitraffer steht unter der Karte, im Fluss, und nimmt sich seine Höhe selbst. */
    .ms-karte--fuellen .ms-karte-buehne:has(.ms-sk-zeitraffer) { flex-direction: column; }
    .ms-karte--fuellen .ms-karte-buehne:has(.ms-sk-zeitraffer) .ms-karte-flaeche { flex: 1 0 auto; }
    .ms-sk-zeitraffer {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: auto;
        margin: var(--ms-raum-2, 8px) 0 0;
    }
}

/* ============================================================================================
   BENACHRICHTIGUNGEN 2: POPUP-STAPEL UND ZENTRALE (Spec S544, BN1.5/BN1.6)

   NUR TOKEN, KEINE FARBEN. Fläche, Schrift, Linie und die Statusfarbe am linken Rand kommen aus dem
   Erscheinungsbild des Hauses (S512) — ein Popup in Hausblau wäre beim Haus mit grüner Marke ein Fremdkörper.

   KLICKZIELE ≥ 24 PX (WCAG 2.5.8). Jede Aktion im Popup ist ein echter Knopf mit mindestens 28 px Höhe; das „ד
   ist ein Quadrat von 28 px, nicht die 12 px seines Zeichens.

   DER STAPEL FÄNGT KEINE KLICKS, die nicht ihm gelten (`pointer-events`): Die leere Fläche zwischen den Popups
   liegt über der Seite, und ein Klick dorthin soll die Seite treffen.

   DIE ZENTRALE IST EINE MUDDRAWER-LEISTE in der App-Leiste (die Glocke ist dort eine Insel). Zwei Regeln von oben
   träfen sie mit: `.mud-drawer { display: none }` unter 768 px (die Navigationsschublade) und `overflow: visible`
   für die Rail. Die eigenen Regeln sind deshalb spezifischer — die Zentrale ist auf dem Telefon genauso da.
   ============================================================================================ */

.ms-hinweisstapel {
    position: fixed;
    top: calc(var(--mud-appbar-height, 64px) + var(--ms-raum-2, 8px));
    right: var(--ms-raum-3, 12px);
    width: min(380px, calc(100vw - 2 * var(--ms-raum-3, 12px)));
    display: flex;
    flex-direction: column;
    gap: var(--ms-raum-2, 8px);
    z-index: calc(var(--mud-zindex-appbar, 1300) + 1);
    pointer-events: none;
}

.ms-hinweisstapel-region {
    display: flex;
    flex-direction: column;
    gap: var(--ms-raum-2, 8px);
}

.ms-hinweis,
.ms-hinweis-weitere {
    pointer-events: auto;
}

.ms-hinweis {
    background-color: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
    border: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    border-left: 4px solid var(--ms-info, var(--mud-palette-info));
    border-radius: var(--ms-radius-gross, 8px);
    box-shadow: var(--mud-elevation-8);
    padding: var(--ms-raum-3, 12px) var(--ms-raum-3, 12px) var(--ms-raum-2, 8px);
    animation: ms-hinweis-ein var(--ms-zeit-blende, 250ms) var(--ms-kurve, ease);
}

.ms-hinweis--kritisch {
    border-left-color: var(--ms-fehler, var(--mud-palette-error));
}

.ms-hinweis-kopf {
    display: flex;
    align-items: center;
    gap: var(--ms-raum-1, 4px);
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
    font-size: 0.8125rem;
}

.ms-hinweis-kategorie {
    flex: 1 1 auto;
    min-width: 0;
}

.ms-hinweis-dringend {
    color: var(--ms-fehler, var(--mud-palette-error));
    font-weight: 600;
}

.ms-hinweis-titel {
    margin: var(--ms-raum-1, 4px) 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ms-hinweis-text {
    margin: var(--ms-raum-1, 4px) 0 0;
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
    overflow-wrap: anywhere;
}

.ms-hinweis-buendel {
    display: inline-block;
    margin-top: var(--ms-raum-1, 4px);
    padding: 0 var(--ms-raum-2, 8px);
    border: 1px solid var(--ms-linie, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius-gross, 8px);
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
    font-size: 0.75rem;
}

.ms-hinweis-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-raum-1, 4px);
    margin-top: var(--ms-raum-2, 8px);
}

.ms-hinweis-aktion,
.ms-hinweis-weitere {
    min-height: 28px;
    min-width: 28px;
    padding: var(--ms-raum-1, 4px) var(--ms-raum-2, 8px);
    border: 1px solid var(--ms-linie-feld, var(--mud-palette-lines-default));
    border-radius: var(--ms-radius, 4px);
    background: none;
    color: var(--ms-marke, var(--mud-palette-primary));
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.ms-hinweis-schliessen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--ms-radius, 4px);
    background: none;
    color: inherit;
    cursor: pointer;
}

.ms-hinweis-weitere {
    align-self: flex-end;
    background-color: var(--ms-flaeche, var(--mud-palette-surface));
    box-shadow: var(--mud-elevation-4);
}

.ms-hinweis-aktion:hover,
.ms-hinweis-schliessen:hover,
.ms-hinweis-weitere:hover {
    background-color: var(--ms-tabellen-hover, var(--mud-palette-action-default-hover));
}

.ms-hinweis-aktion:focus-visible,
.ms-hinweis-schliessen:focus-visible,
.ms-hinweis-weitere:focus-visible {
    outline: 2px solid var(--ms-marke, var(--mud-palette-primary));
    outline-offset: 2px;
}

@keyframes ms-hinweis-ein {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.ms-hinweisstapel--ruhig .ms-hinweis {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .ms-hinweis {
        animation: none;
    }
}

/* Die Zentrale (BN1.6). */
.mud-layout .mud-appbar .mud-drawer.ms-zentrale {
    display: flex;
    overflow-y: auto;
    background-color: var(--ms-flaeche, var(--mud-palette-surface));
    color: var(--ms-text-stark, var(--mud-palette-text-primary));
}

.ms-zentrale-schleier {
    position: fixed;
    inset: 0;
    z-index: calc(var(--mud-zindex-appbar, 1300) + 1);
    padding: 0;
    border: none;
    background: none;
    cursor: default;
}

.ms-zentrale-fenster {
    min-height: 100%;
}

.ms-zentrale-inhalt {
    display: flex;
    flex-direction: column;
    gap: var(--ms-raum-2, 8px);
    padding: var(--ms-raum-3, 12px);
}

.ms-zentrale-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-raum-2, 8px);
}

.ms-zentrale-knoepfe {
    display: flex;
    gap: var(--ms-raum-1, 4px);
}

.ms-zentrale-fokus {
    margin: 0;
    padding: var(--ms-raum-2, 8px);
    border: 1px solid var(--ms-warnung, var(--mud-palette-warning));
    border-radius: var(--ms-radius, 4px);
}

.ms-zentrale-liste {
    display: flex;
    flex-direction: column;
}

.ms-zentrale-eintrag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: var(--ms-raum-2, 8px);
    border: none;
    border-bottom: 1px solid var(--ms-linie-leicht, var(--mud-palette-lines-default));
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ms-zentrale-eintrag:hover {
    background-color: var(--ms-tabellen-hover, var(--mud-palette-action-default-hover));
}

.ms-zentrale-eintrag:focus-visible {
    outline: 2px solid var(--ms-marke, var(--mud-palette-primary));
    outline-offset: -2px;
}

.ms-zentrale-titel {
    font-size: 0.875rem;
}

.ms-zentrale-titel--ungelesen {
    font-weight: 600;
}

.ms-zentrale-zeile {
    color: var(--ms-text-leise, var(--mud-palette-text-secondary));
    font-size: 0.75rem;
}

.ms-zentrale-verweis {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 24px;
}

/* Das Überfälligkeits-Raster Person × Woche (Spec S545): eine Tabelle, deren Zellen sich nach Zahl einfärben — die Zahl steht immer in der Zelle,
   die Farbe ist nur die Zugabe. Keine Transformation. */
.ms-raster-zelle { font-variant-numeric: tabular-nums; }
.ms-raster-zelle--keine { color: var(--mud-palette-text-secondary); }
.ms-raster-zelle--wenige { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); }
.ms-raster-zelle--einige { background: color-mix(in srgb, var(--mud-palette-warning) 38%, transparent); }
.ms-raster-zelle--viele { background: color-mix(in srgb, var(--mud-palette-error) 38%, transparent); font-weight: 600; }

/* Das Raster „beste Veröffentlichungszeit“ der sozialen Medien (S543, SM3.2): eine Tabelle, vier Stufen der Primärfarbe — nie mehr als 45 Prozent, damit die Zahl in der Zelle
   in beiden Themen lesbar bleibt (Kontrast). Keine Transformation, kein Diagramm. */
.ms-umbruch { white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-antwort { border-left: 3px solid var(--mud-palette-lines-default); }
/* Der scrollende Behälter ist POSITIONIERT (Paket N15, Befunde 20261021-03/-38). Die unsichtbare Beschriftung jeder Zelle (`.visually-hidden`) ist `position: absolute`; ihr Bezugsrahmen
   war der nächste positionierte Vorfahr — und der lag AUSSERHALB des scrollenden Behälters. Ein solches Element wird vom Behälter nicht abgeschnitten, sondern verlängert den Überlauf des
   Vorfahren: 24 Spalten × 7 Zeilen unsichtbarer Beschriftung zogen die Seite auf 390 px um 770 px in die Breite, obwohl die Tabelle selbst im Behälter scrollte (gemessen: Ausblenden der
   Zeilen senkte die Scrollbreite des Dokuments von 1.160 auf 390 px). Mit `position: relative` ist der Behälter der Bezugsrahmen, und `overflow` schneidet die Beschriftung ab. */
.ms-zeitraster-flaeche { position: relative; overflow-x: auto; max-width: 100%; }
/* Dasselbe für jeden Tabellenbehälter: Wer `.visually-hidden` (absolut) in einer Zelle trägt, soll den Überlauf nicht über den Behälter hinaus verlängern. Nur der Bezugsrahmen ändert sich;
   Fluss, Größe und das Kleben der Kopfzeile (`sticky`) bleiben. */
.mud-table-container,
.ms-tabellenrahmen { position: relative; }
.ms-zeitraster-tabelle th, .ms-zeitraster-tabelle td { padding: 2px 4px; }
.ms-zeitraster-kopf { text-align: center; min-width: 28px; font-variant-numeric: tabular-nums; }
.ms-zeitraster-zelle { text-align: center; min-width: 28px; font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.ms-zeitraster-zelle--leer { color: var(--mud-palette-text-secondary); }
.ms-zeitraster-zelle--ohnerate { border: 1px dashed var(--mud-palette-lines-inputs); }
.ms-zeitraster-zelle--s1 { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.ms-zeitraster-zelle--s2 { background: color-mix(in srgb, var(--mud-palette-primary) 24%, transparent); }
.ms-zeitraster-zelle--s3 { background: color-mix(in srgb, var(--mud-palette-primary) 36%, transparent); font-weight: 600; }
.ms-zeitraster-zelle--s4 { background: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); font-weight: 700; }

/* Der Mini-Verlauf in einer Tabellenzeile (Spec S545): eine Schriftzeile aus Balkenzeichen — gleich breit, damit die Monate untereinander stehen. */
.ms-miniverlauf { font-family: var(--mud-typography-default-family, inherit); letter-spacing: 0.05em; white-space: nowrap; }

/* Der Redaktionskalender der sozialen Medien (S543, Stufe 2): ein Monatsraster oder eine Woche. Der Eintrag trägt Symbol und Zustandstext; die Farbe (Primär-, Warn-, Fehlerton) ist nur
   die Zugabe, nie mehr als 18 Prozent Hintergrund — der Text bleibt in beiden Themen lesbar. Das Raster scrollt auf einem schmalen Schirm in seinem Kasten, nicht die Seite. Keine Transformation. */
.ms-redkal-flaeche { overflow-x: auto; max-width: 100%; }
.ms-redkal-tabelle { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 46rem; }
.ms-redkal-tabelle th { text-align: left; padding: 4px 6px; font-weight: 600; font-size: 0.8125rem; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ms-redkal-zelle { vertical-align: top; padding: 4px; height: 6.5rem; border: 1px solid var(--mud-palette-lines-default); }
.ms-redkal-zelle--ausserhalb { background: color-mix(in srgb, var(--mud-palette-text-secondary) 6%, transparent); color: var(--mud-palette-text-secondary); }
.ms-redkal-zelle--heute { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.ms-redkal-tagnummer { font-size: 0.75rem; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.ms-redkal-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-redkal-eintrag { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 0.75rem; color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); border: 0; border-left: 3px solid var(--mud-palette-primary); border-radius: 2px; padding: 2px 4px; }
.ms-redkal-eintrag:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.ms-redkal-eintrag--veroeffentlicht { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); border-left-color: var(--mud-palette-success); }
.ms-redkal-eintrag--geplant, .ms-redkal-eintrag--freigegeben { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-left-color: var(--mud-palette-primary); }
.ms-redkal-eintrag--zurfreigabe { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); border-left-color: var(--mud-palette-warning); }
.ms-redkal-eintrag--fehlgeschlagen, .ms-redkal-eintrag--abgelehnt { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); border-left-color: var(--mud-palette-error); }
.ms-redkal-zeit { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.ms-redkal-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ms-redkal-karte--markiert { outline: 2px solid var(--mud-palette-primary); }

/* ----- S551: Kartenleiste als Symbole mit Untermenüs, Legende zuklappbar -------------------------------------------------------------------------------------
   Eine Leiste statt zwei; jedes Menü ist ein Symbolknopf mit einem Glasfeld darunter — absolut positioniert, ohne Transformation (S505), wie die Ebenenwahl. */
.ms-karte-werkzeuge { position: relative; flex-wrap: nowrap; }
.ms-karte-werkzeugleiste { margin-left: 0; }
.ms-karte-werkzeuggruppe { display: inline-flex; align-items: center; gap: var(--ms-raum-1, 4px); }
.ms-karte-werkzeuggruppe + .ms-karte-werkzeuggruppe { margin-left: 0; padding-left: 0; border-left: 0; }
/* Das Feld hängt an der Leiste (rechtsbündig unter ihr), nicht am Knopf: Das erste Menü läge sonst auf schmalem Schirm links außerhalb der Karte — wie die Ebenenwahl. */
.ms-karte-menue { position: static; display: inline-flex; }
.ms-karte-menuefeld {
    position: absolute;
    top: calc(100% + var(--ms-raum-1, 4px));
    right: 0;
    z-index: 646;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 2 * var(--ms-raum-3, 12px)));
    padding: var(--ms-raum-1, 4px);
}
.ms-karte-menuefeld > [role=group] { display: flex; flex-direction: column; }
/* Klickziel mindestens 24 px hoch (WCAG 2.5.8) — hier 36 px, eine Zeile je Eintrag mit Symbol, Name und Haken. */
.ms-karte-menuepunkt {
    display: flex;
    align-items: center;
    gap: var(--ms-raum-2, 8px);
    min-height: 36px;
    width: 100%;
    padding: var(--ms-raum-1, 4px) var(--ms-raum-2, 8px);
    border: 0;
    border-radius: var(--ms-radius, 4px);
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}
.ms-karte-menuepunkt:hover:not(:disabled) { background: color-mix(in srgb, var(--ms-marke, var(--mud-palette-primary)) 10%, transparent); }
.ms-karte-menuepunkt:focus-visible { outline: 2px solid var(--ms-fokus, var(--mud-palette-primary)); outline-offset: -2px; }
.ms-karte-menuepunkt:disabled { cursor: default; color: var(--ms-text-leise, var(--mud-palette-text-disabled)); }
.ms-karte-menuepunkt--an { color: var(--ms-marke, var(--mud-palette-primary)); font-weight: 600; }
.ms-karte-menuepunkt-text { flex: 1 1 auto; }
.ms-karte-menuepunkt-haken { margin-left: auto; }
/* Die Hinterlage eines offenen Menüs: fängt den Klick daneben, damit er das Menü schließt und keinen Marker wählt. Unter der Leiste, über der Karte. */
.ms-karte-menue-hinterlage { position: absolute; inset: 0; z-index: 639; margin: 0; padding: 0; border: 0; background: transparent; cursor: default; }

/* Die Legenden: ein Behälter unten links (über Stilkachel und Maßstab), darin der Knopf und — aufgeklappt — die Legenden übereinander. */
.ms-karte-legenden {
    position: absolute;
    left: var(--ms-raum-3, 12px);
    bottom: 44px;
    z-index: 630;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--ms-raum-1, 4px);
    max-height: calc(100% - 140px);
    max-width: min(360px, calc(100% - 2 * var(--ms-raum-3, 12px)));
}
.ms-karte-legendenfeld { display: flex; flex-direction: column; gap: var(--ms-raum-1, 4px); overflow-y: auto; min-height: 0; }
.ms-karte-legenden .ms-karte-legende { position: static; display: block; }
.ms-karte-legendenknopf {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-raum-1, 4px);
    min-height: 32px;
    padding: var(--ms-raum-1, 4px) var(--ms-raum-2, 8px);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}
.ms-karte-legendenknopf:focus-visible { outline: 2px solid var(--ms-fokus, var(--mud-palette-primary)); outline-offset: 2px; }
.ms-karte-legendenknopf--offen { color: var(--ms-marke, var(--mud-palette-primary)); }

/* Gesperrte Stile (S551): Satellit und Hybrid in einer Zoomstufe ohne scharfes Satellitenbild. */
.ms-karte-stiloption--gesperrt { opacity: 0.45; cursor: not-allowed; }
.ms-karte-stilkachel:disabled { opacity: 0.45; cursor: not-allowed; }