/* Eigene Ergänzungen zu MudBlazor. */

/* ---------- Marke und Schrift ---------- */

/*
    Feste Markenfarben (Branding/Schraubzeit-Markenpaket/README.md) – unabhängig von der Akzentfarbe des Benutzers.
    Für Akzentfarbe immer var(--mud-palette-primary) verwenden.
*/
:root {
    --brand-calypso: #2C6E91;
    --brand-calypso-light: #388CB8;
    --brand-calypso-dark: #255C7A;
    --brand-calypso-bright: #8CC3E0;
    --brand-ink: #0E1A2B;
}

/*
    Neutrale Töne des Hellmodus (passend zu PaletteLight in MainLayout.ThemeErstellen): Linien, Symbole, gedämpfte Flächen.
    Nur unter .schema-hell gesetzt – der Dunkelmodus nutzt weiter die MudBlazor-Werte.
*/
.schema-hell {
    --ui-linie: #E4E7EC;
    --ui-symbol: #475467;
    --ui-symbol-hover: var(--brand-ink);
    --ui-flaeche-gedaempft: #F2F4F7;
    --ui-tabellenkopf: #F9FAFB;
    /* Suchfeld bewusst zurückhaltend (Nutzer 14.10.2026): Fläche heller als gedämpft. */
    --ui-suchfeld: #F7F8FA;
}

/*
    Inter 4.1 (https://github.com/rsms/inter, SIL Open Font License, siehe fonts/inter/OFL.txt) – lokal statt
    Google Fonts (DSGVO). Fünf feste Schnitte; swap: bis die Schrift geladen ist, steht der Text in der Ersatzschrift.
*/
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/inter/Inter-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/inter/Inter-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/inter/Inter-ExtraBold.woff2") format("woff2");
}

h1:focus {
    outline: none;
}

/*
    Dichte (Benutzereinstellung). Das MainLayout setzt am äußersten Element „dichte-kompakt“ oder „dichte-luftig“.
    Luftig = MudBlazor mit Dense, so wie es ist. Kompakt = Ziel mind. 25 Tabellenzeilen auf 600 px (~24 px je Zeile).
*/
.dichte-kompakt .mud-table-dense .mud-table-cell {
    padding: 2px 8px;
    font-size: 0.8125rem;
    line-height: 19px; /* + 2 × 2 px Abstand + 1 px Linie = 24 px je Zeile */
    white-space: nowrap;
}

/*
    Freitextspalte (z. B. Kundenwunsch): an der Spalte CellClass="spalte-kuerzen" setzen.
    Sie bekommt den Restplatz und kürzt mit „…“, statt die Tabelle zu verbreitern.
    max-width: 0 ist ein Kniff – max-width mit echtem Wert wirkt an Tabellenzellen nicht.
*/
.dichte-kompakt .mud-table-cell.spalte-kuerzen {
    width: 40%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    Listen (Liste.razor): feste Spaltenbreiten. Ohne table-layout: fixed misst der Browser die Breiten am Inhalt –
    bei der virtualisierten Tabelle also an den gerade sichtbaren Zeilen, und die Spalten springen beim Scrollen.
    Breiten: Standard am <th> (HeaderStyle), gezogene Breiten als <style> von listen.js. Zu langer Text endet mit „…“.
*/
.listenhuelle .mud-table-root {
    table-layout: fixed;
}

.listenhuelle .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In Listen hat jede Spalte eine feste Breite – die 40-%-Regel oben gilt nur für andere Tabellen. */
.listenhuelle .mud-table-cell.spalte-kuerzen {
    width: auto;
    max-width: none;
}

/*
    Spaltenkopf einer Listenspalte (Spaltenkopf.razor): Titel kürzt mit „…“, das Punkte-Menü erscheint beim Überfahren
    der Spalte oder mit Tastaturfokus – wie vorher MudBlazors eigenes Spaltenmenü.
*/
.spaltenkopf {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

/* Titel ist zugleich Auslöser des Rechtsklick-Menüs (MudMenu) – darf schrumpfen und wird dann abgeschnitten. */
.spaltenkopf-titel {
    min-width: 0;
    overflow: hidden;
}

.spaltenkopf-titel .mud-menu-activator {
    min-width: 0;
    max-width: 100%;
}

/* Zu langer Titel wird ohne „…“ abgeschnitten, und Titel lassen sich nicht markieren (Nutzer 13.10.2026). */
.spaltenkopf-titel-text {
    display: block;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.listenhuelle .mud-table-head .mud-table-cell {
    text-overflow: clip;
    user-select: none;
}

/*
    Abgeschnittener Titel reicht bis kurz vor die nächste Spalte: rechts nur 2 px Abstand statt 8 px
    (Nutzer 13.10.2026). th + Klassen, damit es auch gegen die Dichte-Regeln oben (padding: 2px 8px) gewinnt.
*/
.listenhuelle .mud-table-head th.mud-table-cell {
    padding-right: 2px;
}

/* Fenster „Spalteneinstellungen…“: lange Spaltenliste scrollt, Knöpfe bleiben sichtbar. */
.spalteneinstellungen {
    max-height: 60vh;
    overflow-y: auto;
}

.spalteneinstellung {
    display: flex;
    align-items: center;
    gap: 4px;
}

.spalteneinstellung:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/*
    Mehrfachsortierung (SortMode.Multiple): MudBlazor zeigt am Sortierpfeil die Stufe (1, 2, 3 …) und hält dafür auch
    ohne Sortierung Platz frei. Bei nur einer Stufe sagt die „1“ nichts – Ziffern erst ab zwei Stufen, sonst kein Platz.
*/
.listenhuelle:not(.mehrfach-sortiert) .mud-table-head .mud-sort-index {
    display: none;
}

.listenhuelle .mud-table-head .mud-sort-index {
    font-size: 0.7rem;
    margin-left: -2px;
}

/*
    Sortierpfeil (MudBlazor: .column-options mit .sort-direction-icon, Symbol per SortIcon in Liste.razor) steht
    direkt hinter dem Titel und nur an sortierten Spalten – immer sichtbar, ohne Hover-Pfeil an unsortierten Spalten
    (Nutzer 13.10.2026). Unsortierte Spalten belegen dafür keinen Platz. Ist der Titel zu lang, wird er abgeschnitten,
    der Pfeil bleibt sichtbar.
*/
.listenhuelle .mud-table-head .column-header {
    justify-content: flex-start;
}

.listenhuelle .mud-table-head .column-header .sortable-column-header {
    width: auto;
    min-width: 0;
}

/* Rechtsbündige Spalten (Listenspalte Rechts="true"): Titel rechts über den Zahlen, Sortierpfeil bleibt dahinter. */
.listenhuelle .mud-table-head th.rechts .column-header {
    justify-content: flex-end;
}

.listenhuelle .mud-table-head .column-options:not(:has(.mud-direction-asc, .mud-direction-desc)) {
    display: none;
}

.listenhuelle .mud-table-head .column-header .column-options {
    flex-shrink: 0;
}

.listenhuelle .mud-table-head .column-header .sort-direction-icon {
    margin: 0;
    padding: 0;
    color: var(--mud-palette-text-secondary);
}

/* Tastenkürzel rechts in einem Menüeintrag (z. B. „Umschalt+Klick“), wie in Desktop-Menüs. */
.menue-kuerzel {
    margin-left: 24px;
    float: right;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8em;
}

/*
    Am Spaltenrand im Kopf erscheint ↔. Keine eigene Trennlinie: Linien zwischen den Spalten gibt es nur mit der
    Benutzereinstellung „senkrechte Linien“ (.mit-senkrechten-linien unten), dann auch im Kopf.
*/
.listenhuelle.spaltenrand .mud-table-head .mud-table-cell,
.listenhuelle.spalte-wird-gezogen,
.listenhuelle.spalte-wird-gezogen * {
    cursor: col-resize !important;
    user-select: none;
}

/*
    Spalte verschieben (wwwroot/listen.js): Man hat einen Kasten mit dem Spaltentitel „in der Hand“ (Größe und Schrift
    der Kopfzelle setzt das Skript), ein senkrechter Strich in der Hauptfarbe zeigt, wo die Spalte beim Loslassen hinkommt.
    Die Kopfzelle am alten Platz bleibt sichtbar und deckend (sonst scheinen die Zeilen darunter durch), nur grau
    hinterlegt mit blasser Schrift. Tooltips sind während des Ziehens aus – sie würden mitten im Weg aufgehen.
*/
.listenhuelle.spalte-wird-verschoben,
.listenhuelle.spalte-wird-verschoben *,
body.spalte-wird-verschoben {
    cursor: grabbing !important;
    user-select: none;
}

body.spalte-wird-verschoben .mud-tooltip {
    display: none !important;
}

.listenhuelle .mud-table-head th.spalte-verschieben-quelle {
    /* Bild statt Hintergrundfarbe: legt sich über die deckende Kopffarbe, statt sie zu ersetzen. */
    background-image: linear-gradient(var(--mud-palette-action-default-hover), var(--mud-palette-action-default-hover));
    color: var(--mud-palette-text-disabled);
}

.spalte-verschieben-bild {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--mud-elevation-8);
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.92;
}

.spalte-verschieben-strich {
    position: fixed;
    z-index: 2000;
    width: 3px;
    pointer-events: none;
    background: var(--mud-palette-primary);
    display: none;
}

.dichte-kompakt .mud-table-dense .mud-table-head .mud-table-cell {
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: 600;
}

/*
    Zuletzt geöffnete Zeile einer Liste (Listenzustand.ZeilenKlasse): leicht in Akzentfarbe hinterlegt, mit Strich links,
    damit man beim Zurückkommen aus der Detailseite sofort sieht, wo man war.
    Farbe an den Zellen, nicht an der Zeile: Die Zellen liegen über Streifen- und Hover-Farbe der Zeile
    (deren MudBlazor-Selektoren wären sonst stärker).
*/
.mud-table-row.zuletzt-geoeffnet > .mud-table-cell {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.mud-table-row.zuletzt-geoeffnet > .mud-table-cell:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.dichte-kompakt .mud-table-pagination-toolbar {
    min-height: 36px;
    height: 36px;
}

/* ---------- Kopfleiste, Navigation, Flächen ---------- */

/*
    Kopfleiste in beiden Modi gleich aufgebaut: neutrale Fläche, die Akzentfarbe nur als Linie unten.
    Hell zusätzlich eine feine graue Linie darunter, die die weiße Leiste vom hellgrauen Seitenhintergrund trennt.
*/
.mud-appbar {
    border-bottom: 3px solid var(--mud-palette-primary);
}

.schema-hell .mud-appbar {
    box-shadow: 0 1px 0 var(--ui-linie);
}

    /* Symbole (Menü, Hilfe, Benutzer) erben AppbarText (#475467); beim Überfahren dunkler. */
    .schema-hell .mud-appbar .mud-icon-button:hover {
        color: var(--ui-symbol-hover);
    }

/* Logo mit Name (Logo.razor) in der Kopfleiste, nur unter 960 px (darüber oben in der Navigation, .navigation-kopf),
   28 px hoch; unter 600 px (MudBlazor-Breakpoint xs) nur die Bildmarke. */
.kopf-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .kopf-logo svg {
        display: block;
        height: 28px;
        width: auto;
    }

/*
    Logo-Farben (Logo.razor). Verlauf aus der Akzentfarbe: hell von aufgehellt nach abgedunkelt (Calypso: genau die
    Markenfarben #388CB8 → #255C7A), dunkel von der leuchtenden Akzentfarbe nach abgedunkelt (#8CC3E0 → #338DBD).
    Calypso und Petrol haben feste Töne, bei den übrigen Akzentfarben rechnet MudBlazor sie selbst aus.
    Schriftzug: „Schraub“ in Tinte bzw. Weiß, „zeit“ in der Akzentfarbe (wie in der Marke).
*/
.logo-verlauf-anfang {
    stop-color: var(--mud-palette-primary-lighten);
}

.logo-verlauf-ende {
    stop-color: var(--mud-palette-primary-darken);
}

.logo-schriftzug {
    fill: #0E1A2B;
}

.schema-dunkel .logo-verlauf-anfang {
    stop-color: var(--mud-palette-primary);
}

.schema-dunkel .logo-schriftzug {
    fill: #FFFFFF;
}

.logo-schriftzug .logo-schriftzug-zeit {
    fill: var(--mud-palette-primary);
}

/*
    Logo als Knopf (MainLayout): Klick klappt die Navigation. Ohne Knopf-Aussehen, nur ein Fokusrahmen per Tastatur.
*/
.logo-knopf {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    border-radius: 4px;
}

    .logo-knopf:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

/*
    Logo-Bewegung (Logo.razor, Hüllen um den Schlüssel in der Maske). Drehpunkt ist die Mitte des Mauls wie in den
    Animationsdateien (Branding/Schraubzeit-Animationen): 51.04 / 49.67 im Koordinatensystem der Bildmarke. Die
    Verschiebung um −6/−6 im Logo betrifft das umgebende <g>; die Maske liegt in dessen Koordinaten, also gilt der
    Drehpunkt unverändert.
    - Ein-/Ausklappen: Zugeklappt (Klasse navigation-zu am MainLayout) steht der Schlüssel auf 360° – optisch gleich,
      aber der Übergang dreht ihn dabei einmal im Uhrzeigersinn, beim Aufklappen zurück. Dauer wie die Navigation.
    - Überfahren des Schriftzugs (nicht der Bildmarke): einmal die Bewegung von „anziehen“; darstellung.js setzt die
      Klasse laeuft und nimmt sie am Ende wieder weg (reines :hover würde beim Verlassen mitten in der Bewegung
      zurückspringen). Ein Klick aufs Logo bricht sie ab, damit nur das Drehen beim Klappen zu sehen ist.
    Bei „Bewegung reduzieren“ bewegt sich nichts.
*/
.logo-klappen,
.logo-anziehen {
    transform-origin: 51.04px 49.67px;
}

@media (prefers-reduced-motion: no-preference) {
    .logo-klappen {
        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);   /* wie MudBlazors .mud-drawer (width) */
    }

    .navigation-zu .logo-klappen {
        transform: rotate(360deg);
    }

    .logo-anziehen.laeuft {
        animation: logo-anziehen 2.2s ease-in-out 1;
    }
}

/* Aus laden-anziehen_*.svg übernommen (dort mw-anziehen-w), nur ohne Schleife. */
@keyframes logo-anziehen {
    0% { transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.45,0,.3,1); }
    46% { transform: rotate(72deg) scale(1); animation-timing-function: cubic-bezier(.3,0,.3,1); }
    54% { transform: rotate(72deg) scale(1.08); animation-timing-function: cubic-bezier(.45,0,.25,1); }
    72% { transform: rotate(0deg) scale(1.08); animation-timing-function: cubic-bezier(.3,0,.2,1.5); }
    82%, 100% { transform: rotate(0deg) scale(1); }
}

    .kopf-logo .logo-bildmarke {
        display: none;
    }

@media (max-width: 599.98px) {
    .kopf-logo .logo-mit-name {
        display: none;
    }

    .kopf-logo .logo-bildmarke {
        display: block;
    }
}

/* Ab 960 px (Navigation sichtbar): Burger-Knopf und Logo in der Kopfleiste aus. */
@media (min-width: 960px) {
    .mud-appbar .nur-schmal {
        display: none;
    }
}

/*
    Kopfleiste in drei Bereichen: links und rechts wachsen gleich stark von Breite 0 aus (flex 1 1 0),
    darum sitzt die Mitte (Suche und „Anlegen“) genau in der Fenstermitte. Wird es eng, behalten Logo und
    Symbole ihre Breite (min-width auto) und das Suchfeld schrumpft (GlobaleSuche.razor.css).
*/
.kopf-links,
.kopf-rechts {
    flex: 1 1 0;
    display: flex;
    align-items: center;
}

.kopf-rechts {
    justify-content: flex-end;
}

.kopf-mitte {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px;
}

    /* Gleich hoch wie das Suchfeld (32 px, GlobaleSuche.razor.css); Text nicht umbrechen. */
    .kopf-mitte .anlegen-knopf {
        height: 32px;
        white-space: nowrap;
    }

    /* Hell: feiner grauer Rahmen, Ecken 8 px wie das Suchfeld; beim Überfahren dunkler wie die Symbole daneben. */
    .schema-hell .kopf-mitte .anlegen-knopf {
        border-color: var(--ui-linie);
        border-radius: 8px;
        background-color: var(--mud-palette-surface);
    }

        .schema-hell .kopf-mitte .anlegen-knopf:hover {
            color: var(--ui-symbol-hover);
            background-color: var(--ui-flaeche-gedaempft);
        }

/*
    Benutzerkürzel im Kreis rechts, Durchmesser wie „Anlegen“ (36 px). Grau gefüllt ohne Rahmen (Nutzer 14.10.2026):
    weiß mit Rahmen sah aus wie ein zweiter „Anlegen“-Knopf, grau liest sich als Kürzel.
*/
.mud-appbar .benutzer-kreis {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 8px;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    background-color: var(--mud-palette-action-default-hover);
}

.schema-hell .mud-appbar .benutzer-kreis {
    background-color: var(--ui-flaeche-gedaempft);
}

    .schema-hell .mud-appbar .benutzer-kreis:hover {
        color: var(--ui-symbol-hover);
        background-color: var(--ui-linie);
    }

/* Kopf des Benutzermenüs: voller Name (das Kürzel steht schon im Kreis). */
.benutzer-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    padding: 12px 16px;
    font-weight: 600;
}

    /* Kürzel im Kreis in der Akzentfarbe (Nutzer 14.10.2026) – im Menü darf es auffallen, in der Kopfleiste bleibt es grau. */
    .benutzer-kopf-kreis {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        font-size: 0.875rem;
    }

/* Navigation links: hell weiß mit feiner Linie rechts statt Schatten. */
.schema-hell .mud-drawer {
    border-right: 1px solid var(--ui-linie);
}

/*
    Logo oben in der Navigation (ab 960 px; die Navigation geht bis ganz nach oben, ClipMode.Never), so hoch wie die
    Kopfleiste. Bildmarke 28 px, ihre Mitte bei 28 px wie die Mitte der Navigationssymbole (Rand 6 + Innenabstand 10 +
    halbes Symbol 12) – zugeklappt (56 px breit) steht sie damit genau mittig über der Symbolspalte.
    Zugeklappt blendet der Schriftzug aus (Nutzer 14.10.2026); er würde sonst angeschnitten am Rand stehen.
*/
.navigation-kopf {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* Kopfleiste (Dense) 48 px + 3 px Akzentlinie; das Logo steht mittig auf Höhe der Suche, nicht der Linie. */
    height: 51px;
    padding: 0 0 3px 14px;
    box-sizing: border-box;
    overflow: hidden;
}

    .navigation-kopf svg {
        display: block;
        flex-shrink: 0;
        height: 28px;
        width: auto;
    }

    .navigation-kopf .logo-schriftzug {
        transition: opacity 150ms;
    }

/* Normaler Mauszeiger auf dem Schriftzug, die Hand nur auf der Bildmarke (Nutzer 15.10.2026). Ein Klick auf den
   Schriftzug klappt nicht (darstellung.js). */
.logo-knopf .logo-schriftzug {
    cursor: default;
}

.mud-drawer--closed .navigation-kopf .logo-schriftzug {
    opacity: 0;
    pointer-events: none;   /* unsichtbarer Schriftzug löst kein „anziehen“ aus */
}

/*
    Navigation als Spalte über die restliche Höhe: oben etwas Luft zum Logo, der Pfeilknopf zum Ein-/Ausklappen
    (.navigation-umschalter) sitzt ganz unten.
*/
.mud-drawer .mud-navmenu.navigation {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Mehr Luft unter dem Logo, erster Eintrag wie vorher unter der Kopfleiste (Nutzer 14.10.2026). */
    padding-top: 18px;
    padding-bottom: 8px;
}

    /* MudDivider hat flex-grow: 1 – würde sonst den ganzen freien Platz füllen. */
    .mud-drawer .mud-navmenu.navigation > .mud-divider {
        flex: 0 0 auto;
    }

/*
    Pfeilknopf ganz unten, immer links unter der Symbolspalte (Nutzer 14.10.2026) – springt beim Umschalten nicht.
    Symbolmitte: Rand 6 px + Innenabstand 10 px + halbes Symbol 12 px = 28 px; kleiner Knopf 26 px breit → 15 px Einzug.
    Ohne Beschriftung und Linie.
*/
.navigation-umschalter {
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
    padding-left: 15px;
}

    .navigation-umschalter .mud-icon-button {
        color: var(--mud-palette-text-secondary);
    }

/*
    Einträge der Navigation in beiden Modi: abgerundet mit etwas Abstand zum Rand. Aktiver Eintrag: Akzentfarbe zu 12 %
    als Hintergrund, Symbol in Akzentfarbe, Text in normaler Schriftfarbe (die Akzentfarbe als Text erreicht auf der
    Tönung nicht bei jeder Farbe 4,5:1, z. B. Grün 4,36:1). color-mix statt fester Werte – passt so zu jeder der acht Akzentfarben.
*/
/* Beschriftung nie umbrechen: Beim Ein-/Ausklappen wird die Breite animiert (225 ms), dazwischen stand sonst
   „Offene“ über „Aufträge“ und die Einträge darunter hüpften. So wird der Text nur abgeschnitten – am Eintrag,
   nicht am Text: MudBlazor setzt dort line-height: 1, sonst fehlt die Unterlänge (das „g“ in „Einstellungen“). */
.mud-drawer .mud-nav-link-text {
    white-space: nowrap;
}

.mud-drawer .mud-nav-link {
    overflow: hidden;
    margin: 2px 6px;
    width: calc(100% - 12px);
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 8px;
}

    /* .mud-navmenu davor: MudBlazors eigene Regel (.mud-navmenu.mud-navmenu-default …) ist sonst spezifischer. */
    .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
    .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover,
    .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
        color: var(--mud-palette-text-primary);
    }

        .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
            color: var(--mud-palette-primary);
        }

.schema-hell .mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled):not(.active) {
    background-color: var(--ui-flaeche-gedaempft);
}

/*
    Inhaltsflächen im Hellmodus: weiß mit 1 px Rahmen, ohne Schatten (nicht beides). Nur im Seiteninhalt –
    Menüs, Auswahllisten und Dialoge schweben und behalten ihren Schatten.
*/
.schema-hell .mud-main-content .mud-paper,
.schema-hell .mud-main-content .mud-table {
    box-shadow: none;
}

.schema-hell .mud-main-content .mud-table:not(.positionen),
.schema-hell .mud-main-content .mud-paper-outlined {
    border: 1px solid var(--ui-linie);
}

/*
    Tabellenkopf ruhig: grau, halbfett, ganz leicht hinterlegt. Zeilen-Hover kommt aus TableHover (Akzentfarbe transparent, MainLayout.ThemeErstellen).
    Selektor bewusst lang: Beim feststehenden Kopf (Listen) setzt MudBlazor die Flächenfarbe mit
    „.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell“.
*/
.schema-hell .mud-table .mud-table-root .mud-table-head .mud-table-cell,
.schema-hell .mud-simple-table table thead th {
    background-color: var(--ui-tabellenkopf);
    color: var(--ui-symbol);
    font-weight: 600;
}

/* Gefüllte Knöpfe flach (Elevation 0) – auf der hellen Seite sind sie die einzige kräftige Farbfläche. */
.schema-hell .mud-button-filled,
.schema-hell .mud-button-filled:hover,
.schema-hell .mud-button-filled:active,
.schema-hell .mud-button-filled:focus-visible {
    box-shadow: none;
}

/*
   Fehlerleiste der Blazor-Vorlage (unten eingeblendet bei unbehandeltem Fehler).
   Sie liegt außerhalb der Wurzel mit .schema-dunkel, nutzt deshalb die Theme-Variablen von MudBlazor
   (stehen auf :root und wechseln mit Hell/Dunkel). Vorher erbte sie im Dunkelmodus weiße Schrift auf Hellgelb.
*/
#blazor-error-ui {
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #212121);
    border-top: 3px solid var(--mud-palette-error, #d32f2f);
    bottom: 0;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .reload {
        color: var(--mud-palette-primary, #1976d2);
        font-weight: 600;
        margin-left: 0.5rem;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Es ist ein Fehler aufgetreten.";
    }

/* Native Auswahllisten (z. B. Tastenbelegung) im Dunkelmodus mit dunkler Aufklappliste. */
.schema-dunkel select {
    color-scheme: dark;
}

/* ---------- Stammdatenformulare (Schritt 4) ---------- */

/* Feldnummer aus dem Fahrzeugschein klein und blass rechts im Feld. */
.feldnr .mud-input-adornment-text {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Kennzeichen, FIN usw. schon beim Tippen groß zeigen (gespeichert wird groß im Service). */
.gross input {
    text-transform: uppercase;
}

/* Lesemodus: Feld ohne Rahmen; Beschriftung bleibt oben, damit leere Felder nicht springen. */
.nur-lesen .mud-input-slot,
.nur-lesen input,
.nur-lesen textarea {
    cursor: default;
}

/* Titel einer Liste: feste Mindestbreite, damit das Filterfeld daneben auf ganzen Pixeln beginnt
   (sonst steht es z. B. bei x = 361,36 und die Symbole darin werden unscharf) und in allen Listen an derselben Stelle. */
.listentitel {
    min-width: 180px;
    flex-shrink: 0;
}

/* Filterfeld neben der Überschrift einer Liste. */
.listenfilter {
    position: relative;
    width: 360px;
    /* Nicht schrumpfen (sonst Breite mit Nachkommastellen → ×-Knopf rechts unscharf) und oben statt mittig ausrichten:
       Mittig in einer Zeile ungerader Höhe ergäbe y = …,5. 8 px = (48 px Knopfhöhe − 32 px Feld) / 2. */
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 8px;
}

    .listenfilter .mud-input-control {
        margin: 0;
    }

    /* Unauffälliger als ein Formularfeld: 32 px hoch (gerade Zahl, damit das 24-px-Symbol auf ganzen Pixeln mittig sitzt),
       heller Rahmen, blasse Symbole. */
    .listenfilter .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense {
        padding-top: 6px;
        padding-bottom: 6px;
        height: 20px;
        line-height: 20px;
        font-size: 0.875rem;
        /* Platz für den Suchbereich-Knopf links: 12 px Rand + 24 px Symbol + 8 px Abstand. */
        padding-left: 44px;
    }

    /* Suchbereich-Knopf (Menü) über dem linken Rand des Felds: ganze Pixel, (32 − 24) / 2 = 4 px von oben. */
    .listenfilter .listenfilter-menue {
        position: absolute;
        left: 12px;
        top: 4px;
    }

    .listenfilter .listenfilter-bereich {
        display: block;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: none;
        cursor: pointer;
    }

        .listenfilter .listenfilter-bereich:hover .mud-icon-root,
        .listenfilter .listenfilter-bereich:focus-visible .mud-icon-root {
            color: var(--mud-palette-text-secondary);
        }

        .listenfilter .listenfilter-bereich:focus-visible {
            outline: 1px solid var(--mud-palette-primary);
        }

    .listenfilter .mud-input-outlined:not(:hover):not(:focus-within) .mud-input-outlined-border {
        border-color: color-mix(in srgb, var(--mud-palette-lines-inputs) 40%, transparent);
    }

    /* Im Fokus nur die Farbe ändern, nicht die Breite (MudBlazor: 2 px). */
    .listenfilter .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
    .listenfilter .mud-input-outlined:focus-within .mud-input-outlined-border {
        border-width: 1px;
    }

    /* Symbole in Originalgröße 24 px: Material-Icons sind auf dieses Raster gezeichnet, verkleinert werden sie unscharf. */
    .listenfilter .listenfilter-bereich .mud-icon-root,
    .listenfilter .mud-input-clear-button .mud-icon-root {
        color: var(--mud-palette-text-disabled);
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

/* Menü des Suchbereichs: nach dem Häkchen dasselbe Symbol wie im Feld (Wiedererkennung), blass wie dort. */
.listenfilter-menueeintrag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .listenfilter-menueeintrag .mud-icon-root {
        color: var(--mud-palette-text-secondary);
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

/* Beträge und Zahlen rechtsbündig. */
.rechts {
    text-align: right !important;
}

/* Tabellenzeilen, die per Klick öffnen. */
.klickbar tbody tr {
    cursor: pointer;
}

/* Aufgeklappte Positionen in der Fahrzeughistorie etwas eingerückt. */
.positionen {
    margin: 4px 0 8px 48px;
    background: transparent !important;
}

.loeschen-liste {
    margin: 4px 0 0 20px;
}

/* Lesemodus: kein Auswahlpfeil an Auswahllisten (Feldnummern als Text bleiben). */
.nur-lesen .mud-input-adornment-end .mud-icon-root {
    display: none;
}

/* Einfache Tabellen (Fahrzeuge/Aufträge am Kunden, Positionen) in der Einstellung „kompakt“ so dicht wie die großen. */
.dichte-kompakt .mud-simple-table.mud-table-dense table td,
.dichte-kompakt .mud-simple-table.mud-table-dense table th {
    padding: 2px 8px;
    font-size: 0.8125rem;
    line-height: 19px;
}

/* Dialogüberschrift deutlicher: fett, mit dezenter Trennlinie zum Inhalt. */
.mud-dialog .mud-dialog-title {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 50%, transparent);
    margin-bottom: 12px;
}

    .mud-dialog .mud-dialog-title .mud-typography {
        font-weight: 600;
    }

/* Beschriftung über dem Feld (Komponente Feld). */
.feld-beschriftung {
    display: block;
    /* Abstand zum Feld als padding statt margin: overflow: hidden schneidet am Rand des Innenabstands ab –
       so bleibt Platz für Unterlängen (g, p, y), die bei 125 %/150 % Zoom sonst abgeschnitten werden. */
    padding-bottom: 2px;
    font-size: 0.8125rem;
    line-height: 15px; /* knapp: Text sitzt dicht über dem Rahmen */
    white-space: nowrap; /* immer einzeilig, damit die Felder nebeneinander auf einer Höhe bleiben */
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

    /* Pflichtstern: gedämpftes Rot (Fehlerfarbe mit Grau gemischt). */
    .feld-beschriftung .pflicht {
        margin-left: 2px;
        color: color-mix(in srgb, var(--mud-palette-error) 60%, var(--mud-palette-text-secondary));
    }

/* Kopfzeile des Feldes: Beschriftung links, bei Fehlern das Fehlersymbol rechts daneben. */
.feld-kopf {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

    .feld-kopf .feld-beschriftung {
        min-width: 0;
    }

    /* Tooltip-Hülle (MudTooltip) und Symbol nicht höher als die Beschriftung – sonst rutscht das Feld nach unten. */
    .feld-kopf .mud-tooltip-root {
        flex: none;
        display: flex;
        margin-bottom: 2px;
    }

.feld-fehlersymbol.mud-icon-root {
    font-size: 15px;
    width: 15px;
    height: 15px;
    cursor: help;
}

/* Feld mit Fehler (Komponente Feld, siehe Eingabefehler): roter Rahmen, auch bei Hover und Fokus. */
.feld-fehler .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}

/* Feld mit Hinweis (verhindert das Speichern nicht): gelber Rahmen, Fokus behält die Akzentfarbe. */
.feld-hinweis .mud-input-outlined:not(:focus-within) .mud-input-outlined-border {
    border-color: var(--mud-palette-warning) !important;
}

/* Lesemodus: Beschriftung blasser, der Wert soll ins Auge fallen. */
.feld-nur-lesen .feld-beschriftung {
    color: var(--mud-palette-text-secondary);
}

/* Ohne Label braucht das Feld keinen Platz oben für die schwebende Beschriftung. */
.feld .mud-input-control {
    margin-top: 0 !important;
}

/* Drei Formularspalten (Kundenformular); unter 960 px untereinander. */
.formularspalten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 72px;
}

@media (max-width: 959.98px) {
    .formularspalten {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
    }
}

/* Formularspalte: Felder untereinander mit gleichem Abstand. */
.feldspalte {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dichte-kompakt .feldspalte {
    gap: 8px;
}

/* Mehrere Felder nebeneinander in einer Spalte (Anrede/Titel, PLZ/Ort); Aufteilung per style="grid-template-columns: …". */
.feldzeile {
    display: grid;
    gap: 12px;
}

/* Einzeilige Felder 3 px niedriger als MudBlazor-Standard (dicht 40 → 37 px, normal 56 → 53 px). */
.feld .mud-input-root-outlined.mud-input-root-margin-dense:not(textarea) {
    padding-top: 9px;
    padding-bottom: 9px;
}

.feld .mud-input-root-outlined:not(.mud-input-root-margin-dense):not(textarea) {
    padding-top: 17px;
    padding-bottom: 17px;
}

/* Feldrahmen heller als MudBlazor-Standard; color-mix passt sich hell/dunkel an. Hover und Fokus bleiben wie gehabt. */
.feld .mud-input-outlined:not(:hover):not(:focus-within):not(.mud-input-error) .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-lines-inputs) 55%, transparent);
}

/* Symbol links im Feld (Telefon usw.): 5 px näher an den Rand und blasser – soll nicht ins Auge fallen. */
.feld .mud-input-adornment-start {
    margin-left: -5px;
}

    .feld .mud-input-adornment-start .mud-icon-root {
        color: var(--mud-palette-text-disabled);
    }

/* ---------- Menüs ---------- */

/* Unsichtbares Overlay eines offenen Menüs (MudBlazor: z-index 5) auf die Popup-Ebene heben – über Kopfleiste und
   Navigation, damit jeder Klick außerhalb das Menü schließt. Das Popup selbst liegt eine Ebene höher (+1).
   Ebene im Theme (MainLayout, ZIndex.Popover). Bei Popups in Dialogen setzt MudBlazor den Wert per style höher.
   Menüs bleiben nicht modal (MudBlazor-Standard): Das Overlay lässt den Klick durch – ein Klick auf ein anderes
   Menü schließt das offene und öffnet das neue in einem Schritt (Nutzer 12.10.2026). Kein Modal="true" setzen.
   Der Klick wirkt dabei auch auf das, was darunter liegt (z. B. Tabellenzeile öffnet sich) – gewollt. */
.mud-popover-provider > .mud-overlay {
    z-index: var(--mud-zindex-popover);
}

/* ---------- Globale Suche: Klappliste ---------- */

/* Hängt mit etwas Abstand unter dem Suchfeld, gleich breit (RelativeWidth, Standard), runde Ecken, weicher Schatten.
   Das Popup liegt außerhalb der Komponente (MudPopoverProvider) – deshalb hier statt in GlobaleSuche.razor.css.
   Theme-Variablen von MudBlazor, weil .schema-dunkel das Popup nicht erreicht. */
.mud-popover.suche-popover {
    margin-top: 4px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
}

/* ---------- Formulardialog (Komponente Formulardialog) ---------- */

/* Hintergrund hinter Dialogen weniger abgedunkelt (MudBlazor: 50 %). */
.mud-overlay-dialog .mud-overlay-scrim {
    background-color: rgba(33, 33, 33, 0.3) !important;
}

/* Titel mit Symbol links und X rechts. */
.formulardialog-ueberschrift {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .formulardialog-ueberschrift .mud-icon-root {
        color: var(--mud-palette-text-secondary);
    }

.formulardialog-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.formulardialog-schliessen {
    margin-right: -6px;
}

/* Hinweis in der Titelzeile (z. B. ähnliche Kunden): rechts, direkt vor dem X. */
.formulardialog-hinweis {
    margin-left: auto;
}

/* Kunde wechseln: bisheriger und neuer Kunde je als Karte, dazwischen ein Pfeil. Alt grau, neu in der Akzentfarbe. */
.kundenkarte {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--mud-palette-background-gray);
}

.kundenkarte-neu {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

    /* Suchfeld und Knöpfe auf der getönten Karte weiß wie sonst im Formular. */
    .kundenkarte-neu .mud-input-outlined,
    .kundenkarte-neu .mud-button-outlined {
        background: var(--mud-palette-surface);
    }

.kundenkarte-beschriftung {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.kundenkarte-neu .kundenkarte-beschriftung {
    color: var(--mud-palette-primary);
}

.kundenkarte-name {
    font-weight: 500;
    font-size: 1rem;
}

.kundenkarte-details {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.kundenkarte-auswahl {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .kundenkarte-auswahl .kundenkarte-kunde {
        flex: 1;
        min-width: 0;
    }

.kundenwechsel-oder {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: var(--mud-palette-text-secondary);
}

.kundenwechsel-pfeil {
    display: flex;
    justify-content: center;
    margin: 4px 0;
    color: var(--mud-palette-text-disabled);
}

.kundenwechsel-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Fußleiste: Knöpfe rechtsbündig mit den Feldern (24 px wie der Inhalt), unten derselbe Abstand. */
.mud-dialog .formulardialog-aktionen {
    padding: 16px 24px 24px 24px;
    gap: 8px;
}

    .mud-dialog .formulardialog-aktionen > :not(:first-child) {
        margin-left: 0;
    }

/* Fehlermeldung links neben den Knöpfen: eine Zeile, Rest per Tooltip – der Dialog ändert seine Größe nicht. */
.formulardialog-fehler {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-error);
    font-size: 0.875rem;
}

    .formulardialog-fehler span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Aufklappliste der Auswahlfelder (PopoverClass="auswahlliste"): Einträge 27 statt 48 px hoch. */
.auswahlliste .mud-list-item {
    min-height: 27px;
    padding: 4px 12px;
}

    .auswahlliste .mud-list-item .mud-list-item-text,
    .auswahlliste .mud-list-item .mud-typography {
        margin: 0;
        font-size: 0.875rem;
        line-height: 19px;
    }

/*
    Fehlermeldung kurz wackeln lassen, wenn sie erneut kommt (Formulardialog wechselt zwischen
    wackeln-a und wackeln-b – der Klassenwechsel startet die Animation neu).
*/
.formulardialog-fehler.wackeln-a > * {
    animation: wackeln-a 0.4s ease-in-out;
}

.formulardialog-fehler.wackeln-b > * {
    animation: wackeln-b 0.4s ease-in-out;
}

@keyframes wackeln-a {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@keyframes wackeln-b {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Wer im System „Bewegung reduzieren“ eingestellt hat, sieht statt Wackeln ein kurzes Aufblinken. */
@media (prefers-reduced-motion: reduce) {
    .formulardialog-fehler.wackeln-a > * {
        animation-name: blinken-a;
    }

    .formulardialog-fehler.wackeln-b > * {
        animation-name: blinken-b;
    }

    @keyframes blinken-a {
        50% { opacity: 0.3; }
    }

    @keyframes blinken-b {
        50% { opacity: 0.3; }
    }
}

/* Trennlinie in der Aufklappliste (z. B. unter den häufigen Ländern). */
.auswahlliste .mud-list-item.trenner-unten {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Im aktiven Feld nur die Farbe des Rahmens ändern, nicht die Breite (MudBlazor: 2 px). */
.feld .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.feld .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 1px;
}

/*
    Feldbreite nach Inhalt (Erwartungskonformität): Ein Feld ist so breit wie das, was hineingehört – ein Datum
    nicht so breit wie ein Name. Zahlen rechtsbündig (Einer unter Einern, wie in Tabellen und auf Papier),
    Ziffern gleich breit. Breite der Zahlenfelder: Feld.Breite (Parameter Zeichen).
*/
.zahlenfeld input,
.dezimalfeld input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

    /* Der Platzhalter („z. B. 30“) bleibt links – er ist Text, keine Zahl. */
    .zahlenfeld input:placeholder-shown,
    .dezimalfeld input:placeholder-shown {
        text-align: left;
    }

/* Datum TT.MM.JJJJ: Kalenderknopf + 10 Zeichen; mit Feldnummer rechts etwas breiter. */
:root {
    --datumbreite: 150px;
}

/* Datumsfeld: Kalenderknopf links im Feld, an derselben Stelle wie die Symbole bei Telefon usw. */
.datumfeld {
    position: relative;
    max-width: var(--datumbreite);
}

    .datumfeld:has(.feldnr) {
        max-width: calc(var(--datumbreite) + 24px);
    }

/* Termin: Datum und Uhrzeit dicht nebeneinander (Terminfeld, Auftragsdatum auf der Auftragsseite). */
.terminzeile {
    grid-template-columns: var(--datumbreite) 84px;
}

    /* Text beginnt wie bei Feldern mit Symbol (Telefon usw.). So spezifisch, weil MudBlazor bei Feldern mit
       Feldnummer rechts (adorned-end) den linken Abstand mit einer eigenen Regel auf 14 px setzt –
       dann lag der Kalenderknopf über „TT.“. */
    .datumfeld.mit-kalender .mud-input > input.mud-input-root.mud-input-root-outlined {
        padding-left: 41px;
    }

/* Der Knopf steckt im Tooltip-Wrapper (Tipp → .mud-tooltip-root) – daher den Wrapper positionieren, nicht den Knopf. */
.datumfeld > .mud-tooltip-root {
    position: absolute;
    left: 6px;
    top: 17px; /* Höhe der Beschriftung über dem Feld */
    bottom: 4px; /* Außenabstand unter dem Eingabefeld (mud-input-control-margin-dense) – sonst sitzt das Symbol 2 px zu tief */
    display: flex;
}

.kalender-knopf {
    display: flex;
    align-items: center;
    padding: 0 3px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--mud-palette-text-disabled);
}

    .kalender-knopf:hover {
        color: var(--mud-palette-primary);
    }

/* Kalender-Popover: Jahre in vier Spalten statt einer langen Liste (MudBlazor: 1 Jahr je Zeile, 40 px hoch).
   Global, weil das Popover außerhalb der Komponente gerendert wird (MudPopoverProvider). */
.kalender .mud-picker-year-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: start;
    gap: 2px;
    padding: 4px 8px;
    height: 264px;
}

    .kalender .mud-picker-year-container .mud-picker-year {
        height: 36px;
        border-radius: var(--mud-default-borderradius);
        font-size: 0.9375rem;
    }

        .kalender .mud-picker-year-container .mud-picker-year .mud-picker-year-selected {
            margin: 0;
            font-size: 0.9375rem;
            font-weight: 600;
        }

    .kalender .mud-picker-year-container .mud-picker-year:has(.mud-picker-year-selected) {
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
    }

        .kalender .mud-picker-year-container .mud-picker-year:has(.mud-picker-year-selected) .mud-typography {
            color: inherit !important; /* MudBlazor setzt mud-primary-text mit !important */
        }

/* Gestern/Morgen nur in der Tagesansicht; unsichtbar statt entfernt, damit „Heute“ in der Mitte bleibt. */
.kalender:not(:has(.mud-picker-calendar-day)) .nur-tagesansicht {
    visibility: hidden;
}

.kalender-fuss {
    display: flex;
    justify-content: space-between; /* Gestern links, Heute Mitte, Morgen rechts */
    padding: 0 8px 6px;
}

/* Schrift in den Feldern eine Stufe kleiner (MudBlazor: 16 px); Zeilenhöhe bleibt, damit die Feldhöhe gleich bleibt. */
.feld .mud-input {
    font-size: 0.9375rem;
}

    .feld .mud-input .mud-input-slot:not(textarea) {
        line-height: 19px;
    }

/* Dublettenprüfung: Liste der ähnlichen Kunden (Dialog) */
.dubletten-eintrag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .dubletten-eintrag:last-child {
        border-bottom: none;
    }

.dubletten-angaben {
    flex: 1;
    min-width: 0;
}

.dubletten-gruende {
    color: var(--mud-palette-warning-darken);
    font-size: 0.875rem;
}

.schema-dunkel .dubletten-gruende {
    color: var(--mud-palette-warning-lighten);
}

/* „Ansehen“ klein direkt hinter Name und Kundennummer */
.mud-button-root.dubletten-ansehen {
    font-size: 0.75rem;
    padding: 0 6px;
    min-width: 0;
    line-height: 1.6;
}

    .mud-button-root.dubletten-ansehen .mud-button-icon-start {
        margin-right: 4px;
    }

        .mud-button-root.dubletten-ansehen .mud-button-icon-start .mud-icon-root {
            font-size: 0.95rem;
        }

/* Erklärung der Dublettenprüfung */
.dubletten-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 14px 0 4px 0;
}

.dubletten-info ul {
    margin: 0;
    padding-left: 20px;
}

.dubletten-info p {
    margin: 0 0 6px 0;
}

/*
    Tooltips (MudTooltip) überall: höchstens ca. 50 Zeichen pro Zeile, längere Texte brechen automatisch um.
    Richtwerte: Fließtext 45–75 Zeichen (Baymard, Bringhurst), WCAG 1.4.8 höchstens 80; Material 3 begrenzt
    ausführliche Tooltips auf 320 dp – 50ch bei 12 px Schrift sind etwa 320 px. Kurze Tooltips bleiben so schmal wie ihr Text.
    Linksbündig, weil mehrzeiliger zentrierter Text schwer zu lesen ist (MudBlazor zentriert von Haus aus).
    Für Erklärungen MudTooltip statt title="…" verwenden: Die Browser-Tooltips lassen sich nicht gestalten.
    !important: MudBlazor setzt am Tooltip inline „max-width: none“ (Popover), das schlägt sonst jede CSS-Regel.
    width: max-content: Breite nur aus dem Inhalt (bis max-width), nicht aus dem Platz bis zum Fensterrand. Sonst
    wird ein Tooltip an einem Knopf weit rechts schmaler und bricht um, MudBlazor misst neu und verschiebt ihn –
    man sieht ihn nach dem Einblenden schrumpfen und wandern (Nutzer 13.10.2026).
*/
.mud-tooltip {
    width: max-content;
    max-width: min(50ch, calc(100vw - 32px)) !important;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Aussehen wie in Word (Nutzer 13.10.2026): heller Kasten mit grauem Rand und leichtem Schatten statt
   MudBlazors dunkelgrauer Pille; fetter Titel, darunter Absätze, ggf. „Weitere Infos“ unter einer Trennlinie.
   Über die Palette, damit es im dunklen Farbschema mitgeht. Doppelte Klasse: schlägt .mud-tooltip.mud-tooltip-default.
   Mit Titel schmaler (ca. 36 Zeichen) als einzeilige – so umbrechen auch die Erklärungen in Word. */
.mud-tooltip.tipp {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-text-disabled);
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.mud-tooltip.tipp:has(.tipp-titel) {
    max-width: min(36ch, calc(100vw - 32px)) !important;
}

/* Innenabstand am Inhalt statt am Tooltip: Der Inhalt fängt die Mausereignisse, die den Tooltip offen halten –
   so auch am Rand. */
.tipp-inhalt {
    flex: 1;
    padding: 6px 10px;
    /* Wie in Word: normaler Mauszeiger, Text nicht markierbar (ein Klick schließt den Tooltip ohnehin). */
    cursor: default;
    user-select: none;
}

.tipp-inhalt:has(.tipp-titel) {
    padding: 8px 10px;
}

.tipp-titel {
    font-weight: 700;
    margin-bottom: 4px;
}

.tipp-absatz {
    margin: 0;
}

.tipp-absatz + .tipp-absatz {
    margin-top: 0.8em;
}

.tipp-weitere-infos {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px -10px -2px;
    padding: 6px 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-weight: 700;
    text-decoration: none;
}

.tipp-weitere-infos:hover {
    text-decoration: underline;
}

/* Tooltip auch an deaktivierten Knöpfen (wie in Word): MudBlazor nimmt ihnen mit pointer-events: none alle
   Mausereignisse; dann käme bei Tipp nichts an. Klicken bleibt trotzdem wirkungslos – der Knopf ist disabled. */
.tipp-huelle {
    display: contents;
}

.tipp-huelle .mud-button-root:disabled,
.tipp-huelle .mud-fab:disabled {
    pointer-events: auto;
}

/* Einstellungsseite: Bereiche (Kunden, später Aufträge, Belege …) untereinander, nicht über die volle Breite. */
.einstellungsbereiche {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
}

.einstellungsbereich-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* Erklärung unter einem Schalter, bündig mit dessen Beschriftung. */
.einstellung-hinweis {
    margin-left: 58px;
}

/*
    Tabellenlinien (Benutzereinstellung, gilt für alle Tabellen). Das MainLayout setzt am äußersten Element
    „ohne-waagerechte-linien“ und/oder „mit-senkrechten-linien“. Ohne Klassen gilt MudBlazor: Linien zwischen den Zeilen.
    Waagerecht aus: Linie nur durchsichtig statt entfernt – so bleibt die Zeilenhöhe gleich (siehe Dichte oben).
    Die Linie unter der Kopfzeile bleibt immer, sie trennt Überschriften von Daten.
*/
.ohne-waagerechte-linien .mud-table-body .mud-table-cell,
.ohne-waagerechte-linien .mud-simple-table table tbody td {
    border-bottom-color: transparent;
}

.mit-senkrechten-linien .mud-table-cell:not(:last-child),
.mit-senkrechten-linien .mud-simple-table table td:not(:last-child),
.mit-senkrechten-linien .mud-simple-table table th:not(:last-child) {
    border-right: 1px solid var(--mud-palette-table-lines);
}

/* Einstellungen → Benutzer: Tabelle nur so breit wie nötig, Bearbeiten-Knopf rechts. */
.benutzertabelle td.rechts {
    text-align: right;
    width: 1%;
}

/* „Angelegt … von EH · Geändert …“ unten auf Detailseiten; das Kürzel zeigt per Tooltip den Namen. */
.vermerkzeile {
    display: block;
    margin-top: 16px;
}

.vermerk-kuerzel {
    text-decoration: underline dotted;
    cursor: default;
}

/* ---------- Filterbaukasten (Listen/FilterDialog.razor, Filtergruppenansicht, Filterzeile) ---------- */

/* Aktiver erweiterter Filter unter der Titelzeile einer Liste – eine Zeile, 32 px. */
.aktiver-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-top: -8px;
    margin-bottom: 8px;
    min-width: 0;
}

.aktiver-filter-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100vw - 420px);
}

.filterdialog-kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.filterdialog-gespeichert {
    max-width: 320px;
}

.filterdialog-inhalt {
    max-height: 60vh;
    overflow-y: auto;
}

.filterdialog-speichern {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.filterdialog-speichern .feld {
    width: 280px;
}

.filtergruppe-innen {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 4px;
    padding: 4px 8px 4px 12px;
    margin: 6px 0;
}

.filtergruppe-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.filtergruppe-knoepfe {
    display: flex;
    gap: 4px;
}

.filterzeile {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 6px;
}

.filterzeile-spalte {
    width: 210px;
    flex: none;
}

.filterzeile-operator {
    width: 170px;
    flex: none;
}

.filterzeile-wert {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.filterzeile-wert > .feld,
.filterzeile-wert > .datumfeld {
    flex: 1;
    max-width: 320px;
}

.filterzeile-wert > .filterzeile-anzahl {
    max-width: 90px;
}

.filterzeile-wert > .filterzeile-einheit {
    max-width: 140px;
}

.filterzeile-entfernen {
    margin-bottom: 4px;
}

/* ---------- Statistik je Spalte (Listen/StatistikDialog.razor) ---------- */

.statistik-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.statistik-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.statistik-kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-bottom: 12px;
}

.statistik-kennzahlen > div {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
}

.statistik-balkenliste {
    max-height: 55vh;
    overflow-y: auto;
    margin-top: 4px;
}

/* Tipp legt eine Inline-Hülle (MudTooltip) um jede Zeile – ohne volle Breite bekäme der Balken 0 px. */
.statistik-balkenliste .mud-tooltip-root {
    display: block;
}

/* Eine Zeile: Beschriftung | Balken | Anzahl | Anteil. Als Knopf – per Tab und Enter erreichbar. */
.statistik-zeile {
    display: grid;
    grid-template-columns: minmax(0, 180px) 1fr 70px 60px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 2px 4px;
    border: none;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.statistik-zeile:hover:not(:disabled),
.statistik-zeile:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.statistik-zeile:disabled {
    cursor: default;
    color: var(--mud-palette-text-secondary);
}

.statistik-beschriftung {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.statistik-balken {
    height: 14px;
    background: var(--mud-palette-background-gray);
    border-radius: 2px;
    overflow: hidden;
}

.statistik-balken > span {
    display: block;
    height: 100%;
    background: var(--mud-palette-primary);
}

.statistik-zeile:disabled .statistik-balken > span {
    background: var(--mud-palette-text-disabled);
}

.statistik-anzahl,
.statistik-prozent {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Symbol vor dem Text einer Listenzelle (Listenspalte Symbol="…"), z. B. Teil/Arbeit in der Artikelliste. */
.zellensymbol {
    vertical-align: -4px;
    margin-right: 6px;
    color: var(--mud-palette-text-secondary);
}

/*
    Listenseite (Liste.razor): genau so hoch wie das Fenster unter der Kopfleiste (48 px) und dem Abstand oben (pt-4, 16 px).
    Kopfzeile, Reiter und Filterzeile nehmen sich ihre Höhe, die Tabelle bekommt als Flex-Kind den Rest – egal, ob die
    Kopfzeile umbricht oder Reiter/Filterzeile da sind. Nur die Tabelle scrollt; ihr Spaltenkopf bleibt stehen (FixedHeader).
    min-height: 0, damit die Flex-Kinder kleiner als ihr Inhalt werden dürfen (sonst wächst die Seite mit den Zeilen).
*/
.listenseite {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
}

.listenseite > .listenhuelle,
.listenhuelle > .schluessel-bereich,
.listenhuelle .mud-data-grid {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.listenhuelle .mud-data-grid > .mud-table-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* Kopfzeile einer Liste (Titel, Filterfeld, Knöpfe): Reicht die Breite nicht, bricht sie um, statt über den Rand zu laufen. */
.listenkopf {
    flex-wrap: wrap;
    row-gap: 8px;
}

/*
    Vorfilter als Schaltergruppe über der Tabelle (Liste Vorfilter="…" ohne EigeneAnsichten, z. B. Aufträge
    „Offen | Erledigt | Alle“; Nutzer 16.10.2026): links, unter dem Titel. Reiter gibt es nur für eigene Ansichten.
*/
.vorfilter-schalter {
    display: flex;
    margin-bottom: 8px;
}

fieldset.auswahl.vorfilter {
    margin: 0;
}

fieldset.vorfilter .auswahl-optionen {
    flex-wrap: nowrap;
}

fieldset.vorfilter .auswahl-option {
    white-space: nowrap;
    padding-top: 4px;
    padding-bottom: 4px;
}

/*
    Vorfilter als Reiter über der Tabelle (Liste Vorfilter="…", Nutzer 16.10.2026). Nur der Kopf von MudTabs wird gebraucht;
    der Standard-Reiter („Alle“) ist der letzte. Den aktiven Reiter zeigt eine Linie unten statt des gleitenden Schiebers
    von MudTabs.
    Keine eigene Linie unter der Reiterleiste: Sie ragte über die runden Ecken der Tabelle hinaus (Nutzer 16.10.2026).
    Die Linie des aktiven Reiters sitzt direkt auf dem oberen Rand der Tabelle.
*/
/* Um den Eckradius der Tabelle (8 px) eingerückt: Sonst läge die Linie des ersten Reiters über der runden Ecke. */
.vorfilter-reiter .mud-tabs-tabbar {
    background: transparent;
    margin-left: 8px;
}

/* MudTabs ist mindestens 48 px hoch, die Reiter nur 40 px – sonst bliebe eine Lücke zwischen Reiterlinie und Tabelle. */
.vorfilter-reiter .mud-tabs-tabbar,
.vorfilter-reiter .mud-tabs-tabbar-inner {
    min-height: 0;
}

.vorfilter-reiter .mud-tab {
    min-height: 40px;
    padding: 6px 16px;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
    border-bottom: 2px solid transparent;
}

.vorfilter-reiter .mud-tab.aktiv {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    /* Keine fettere Schrift: Der Reiter würde breiter, und die Reiter rechts davon rückten beim Wechsel (gemessen ~1 px). */
}

.vorfilter-reiter .mud-tabs-panels {
    display: none;
}

/* Nur für Screenreader sichtbar (z. B. Beschriftung eines Mengenfelds in einer Tabellenzeile). */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Bestandteile eines Pakets (PaketBestandteile.razor): kompakte Tabelle unter den Feldern. */
.paket-bestandteile {
    margin-top: 12px;
}

    .paket-bestandteile .paket-suche {
        max-width: 520px;
    }

    .paket-bestandteile table {
        width: 100%;
    }

    .paket-bestandteile th.zahl,
    .paket-bestandteile td.zahl {
        text-align: right;
        white-space: nowrap;
    }

    .paket-bestandteile td.menge {
        width: 110px;
    }

    .paket-bestandteile td.knoepfe {
        width: 1%;
        white-space: nowrap;
    }

    .paket-bestandteile tr.summe td {
        font-weight: 600;
    }

    .paket-bestandteile .inaktiv {
        color: var(--mud-palette-text-secondary);
    }

/* Hält Platz frei, ohne etwas zu zeigen (z. B. leerer Feldplatz im Artikelformular bei „Sonstiges“). */
.unsichtbar {
    visibility: hidden;
}

/*
    Warten (SchluesselLader, SpeichernKnopf). Der Lader liegt über seinem Bereich: Ist der Bereich noch leer (erstes
    Laden), hält er Platz frei und zeigt den Schlüssel darin mittig; steht schon Inhalt darunter, deckt er ihn
    halbtransparent ab. Leichtes Einblenden, damit der Schlüssel nicht hart aufspringt.
*/
.schluessel-bereich {
    position: relative;
}

    .schluessel-bereich.wartet {
        min-height: 160px;
    }

.schluessel-lader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
    animation: schluessel-einblenden 150ms ease-out;
}

    .schluessel-lader img {
        display: block;
    }

.schluessel-lader-text {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

@keyframes schluessel-einblenden {
    from { opacity: 0; }
}

/*
    Speichern-Knopf während des Speicherns (SpeichernKnopf): Farbe bleibt, kein Hover-Abdunkeln. Klicks ignoriert der
    Knopf selbst; Mausereignisse bleiben an, damit der Tooltip auch jetzt erscheint.
*/
.mud-button-filled.speichern-gesperrt,
.mud-button-filled.speichern-gesperrt:hover {
    background-color: var(--mud-palette-primary);
    cursor: progress;
}

/* Inline-Schlüssel im Knopf (SchluesselIcon): wie ein Symbol auf die Textzeile setzen. */
.schluessel-icon {
    display: block;
    flex-shrink: 0;
}