/* Nur was MudBlazor nicht abdeckt: Ladeanzeige, Fehlerleiste und ein paar dezente
   Feinheiten (Scrollbars). Alles Weitere gehört in das Theme (PlanBoardTheme.cs). */

/* =============================================================================
   Welchen Stand hat dieser Browser gerade wirklich?
   =============================================================================
   Am 29.07. lag ein halber Tag Verbesserungen auf dem Server und kam im Betrieb
   trotzdem nie an — und niemand konnte es sehen, weil die Anwendung nirgends
   verrät, welchen Stand sie benutzt. Diese Marke schließt die Lücke.

   Sie steht bewusst in der app.css und nicht im Programm: Damit belegt sie
   genau das, was am 29.07. gefehlt hat — dass die geladene Seite die NEUEN
   Dateien benutzt und nicht die aus dem Zwischenspeicher.

   Ablesen in der Browserkonsole (F12):
     getComputedStyle(document.documentElement).getPropertyValue('--fassung')

   **Datum UND laufende Nummer.** Hier wird oft mehrmals am selben Tag
   veröffentlicht. Ein reines Datum könnte diese Veröffentlichungen nicht
   unterscheiden — die Prüfung im Update-Skript wäre dann stillschweigend blind,
   und blinde Prüfungen sind schlimmer als keine. Die Nummer beginnt bei jedem
   neuen Datum wieder bei 1.

   Bei jeder Veröffentlichung hochsetzen. Der Test
   Die_app_css_traegt_eine_Fassungsmarke hält die Form fest.
   ============================================================================= */
:root {
    --fassung: "2026-07-31.4";
}

/* Dezente Scrollbars, damit breite Tabellen und die Plantafel nicht mit einem groben
   Standard-Balken abschließen. */
* {
    scrollbar-width: thin;
    /* Über die Themefarbe statt fest verdrahtet — sonst bleibt der Balken im dunklen
       Erscheinungsbild hellgrau und leuchtet aus der Fläche heraus. */
    scrollbar-color: var(--mud-palette-lines-inputs) transparent;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-lines-inputs);
    border-radius: 2px;
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--mud-palette-action-default);
}

/* =====================================================================================
   Gestaltungssprache „Baustelle" (2026-07-28) — die Größen.
   =====================================================================================

   PlanBoard wird mit Handschuhen bedient, im Keller eines Altbaus und auf einem Dach in der
   Sonne. Für Außendienst-Software gilt deshalb: Tastflächen ab 44 Pixel, Schrift ab 16
   Pixel, satter Kontrast. Farben und Schriftgrößen stehen im Theme (PlanBoardTheme.cs) —
   was MudBlazor daraus nicht ableitet, sind die Flächen. Das steht hier.

   **Am großen Bildschirm wird es wieder enger.** Wer im Büro zwanzig Baustellen durchgeht,
   verliert mit Baustellen-Größen die Hälfte der Liste vom Schirm. Ab 75 rem (etwa 1200 px)
   gelten deshalb kleinere Werte — dieselbe Sprache, nur dichter. Das ist die eine Stelle,
   an der beide Welten auseinandergehen; alles andere bleibt gleich.
   ===================================================================================== */

.mud-button-root {
    min-height: 44px;
}

.mud-icon-button {
    min-width: 44px;
    min-height: 44px;
}

.mud-nav-link {
    min-height: 48px;
}

.mud-list-item {
    min-height: 48px;
}

/* Das Kästchen zum Abhaken ist der meistgedrückte Punkt im ganzen Programm — und in der
   Standardgröße für einen behandschuhten Daumen zu klein. */
.mud-checkbox .mud-icon-root {
    font-size: 1.5rem;
}

.mud-input-control .mud-input {
    min-height: 44px;
}

/* Tabellenzeilen: dieselbe Überlegung. Eine Zeile, die man antippen soll, muss eine
   Tastfläche sein und keine Textzeile. */
.mud-table-row .mud-table-cell {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* Der gefüllte Hauptknopf trägt in **beiden** Erscheinungsbildern das volle Bernstein mit
   dunkler Schrift — die Farbe der Warnweste.

   Warum das hier steht und nicht im Theme: MudBlazor benutzt „Primary" gleichzeitig als
   Flächenfarbe (Knopf) und als Textfarbe (aktiver Menüpunkt, Verweise). Volles Bernstein als
   Text auf Weiß ist unlesbar, deshalb ist Primary im hellen Erscheinungsbild abgedunkelt —
   was den Knopf schlammig-braun machte statt nach Signalfarbe aussehen zu lassen (im Bild
   vom 28.07. gesehen). Diese eine Regel trennt beide Fälle wieder.

   **Zwei Klassen, nicht eine.** MudBlazor schreibt `.mud-button-filled.mud-button-filled-primary`
   — mit nur einer Klasse verliert die Regel hier, obwohl app.css später geladen wird. Genau
   das ist beim ersten Versuch passiert (Knopf blieb braun, im Bild nachgeprüft). */
.mud-button-filled.mud-button-filled-primary {
    background-color: #FFB703;
    color: #17140A;
}

.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary:focus-visible,
.mud-button-filled.mud-button-filled-primary:active {
    background-color: #E6A403;
}

@media (min-width: 75rem) {
    .mud-button-root {
        min-height: 38px;
    }

    .mud-icon-button {
        min-width: 38px;
        min-height: 38px;
    }

    .mud-nav-link {
        min-height: 40px;
    }

    .mud-list-item {
        min-height: 40px;
    }

    .mud-checkbox .mud-icon-root {
        font-size: 1.25rem;
    }

    .mud-table-row .mud-table-cell {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }
}

/* Helle, dünne Kopfleiste (Variante „Klar", 2026-07-26): Die Leiste trägt keine Farbe und
   keinen Schatten mehr, sondern trennt sich über eine feine Linie von der Fläche. Das wirkt
   leichter und gibt dem Inhalt den Vordergrund. Die Trennlinie sitzt hier, nicht als
   MudBlazor-Elevation. */
.kopf-leiste {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Das Seitenmenü grenzt sich über dieselbe feine Linie ab (statt über einen Schatten). */
.mud-drawer {
    box-shadow: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Flache Inhalts-Karten (Variante „Klar"): Die großen Karten (Elevation 1) tragen statt des
   weichen Standardschattens eine feine Linie — ruhiger und einheitlich mit den Kacheln oben.
   Zwei Klassen (0,2,0) schlagen MudBlazors .mud-elevation-1 (0,1,0), und app.css lädt danach.
   Eine inline gesetzte farbige border-left (Akzent an „Stand der Dinge") bleibt erhalten, weil
   Inline-Stile diese Regel überstimmen — so entsteht Akzentkante links plus feiner Rahmen. */
.mud-paper.mud-elevation-1 {
    box-shadow: none;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Marke im Kopf des Menüs (seit Variante „Klar" nicht mehr in der Kopfleiste): Logo + Name
   in Stahlblau als Akzent, mit etwas Luft nach unten zum ersten Menüpunkt. */
.marke {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem 0.6rem 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    color: var(--mud-palette-primary);
}

.marke .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* Die Schnellsuche sitzt jetzt auf der hellen Leiste: dezenter grauer Grund mit feinem
   Rahmen statt weiß-auf-blau. Die Breite sitzt am umschließenden div im MainLayout — nie am
   Mud-Feld selbst (Suchfeld-352px-Lehre, 2026-07-23). */
.kopf-suche .mud-input-control {
    background: var(--mud-palette-gray-lighter);
    border-radius: 4px;
}

.kopf-suche .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
}

/* Kennzahl-Kacheln des Leitstands (Variante „Klar"): flach mit feinem Rahmen statt Schatten,
   große Zahl vorn, das Symbol dezent oben rechts. */
.kpi-kachel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.kpi-kachel:hover {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-gray-lighter);
}

.kpi-icon {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    font-size: 1.15rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
}

.kpi-zahl {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kpi-titel {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    margin-top: 0.4rem;
}

.kpi-sub {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.15rem;
}

/* Gruppenüberschriften im Menü: klein, versal, zurückhaltend — sie gliedern, ohne wie
   Menüpunkte auszusehen. */
.menu-gruppe {
    display: block;
    padding: 1rem 1rem 0.25rem 1rem;
    /* Über die Themefarbe: Ein fest verdrahtetes Schiefergrau verschwindet im dunklen
       Erscheinungsbild fast vollständig. */
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

    #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."
    }

/* Ladeanzeige, während die Anwendung im Browser startet. */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            /* Bernstein — die Akzentfarbe der Gestaltungssprache „Baustelle". Fest verdrahtet,
               weil die Ladeanzeige läuft, bevor das Theme überhaupt geladen ist. */
            stroke: #FFB703;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "PlanBoard wird geladen");
    }

/* Projekt-Board (Board.razor): Ziehen mit der Maus. Nur die drei Zieh-Zustände — alles
   Weitere am Board kommt von MudBlazor bzw. den Inline-Stilen der Seite. */
.board-karte-ziehbar {
    cursor: grab;
}

/* Die gezogene Karte bleibt an ihrem Platz sichtbar, tritt aber erkennbar zurück. */
.board-karte-gezogen {
    opacity: 0.4;
}

/* Die überfahrene Ziel-Spalte: eine Tönung in der Akzentfarbe Bernstein (#FFB703). Kräftiger
   als vorher, weil sie im dunklen Erscheinungsbild sonst untergeht. */
.board-spalte-ablageziel {
    background-color: rgba(255, 183, 3, 0.10);
    box-shadow: inset 0 0 0 2px rgba(255, 183, 3, 0.45);
}

/* Erinnerungs-Leiste (Erinnerungen.razor).

   Bis zum 2026-07-29 lag die Erinnerung als abgedunkeltes Fenster über der ganzen Seite. Auf
   „Meine Baustelle heute" wurde sichtbar, was das kostet: Der Monteur öffnet morgens um sieben
   die Anwendung, und ein Fenster verdeckt genau die Baustelle, wegen der er hinsieht. Wer das
   dreimal erlebt, klickt es künftig weg, ohne zu lesen.

   Jetzt sitzt sie unten am Rand: genauso deutlich, aber die Seite bleibt lesbar und bedienbar.
   Am Bildschirm rechts unten, am Handy über die volle Breite — dort ist unten die einzige
   Stelle, die der Daumen ohne Umgreifen erreicht. */
.erinnerungs-leiste {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: auto;
    /* Eingeklappt so schmal wie nötig, ausgeklappt so breit wie sinnvoll. */
    width: auto;
    min-width: 14rem;
    max-width: min(30rem, calc(100vw - 2rem));
    /* Über dem Seiteninhalt, aber unter den Dialogen von MudBlazor (1400): Ein Dialog, den
       die Erinnerung überdeckt, wäre ein Bedienfehler, den niemand lösen kann. */
    z-index: 1200;
}

/* Aufgeklappt: die Liste bekommt Breite und eine Höhengrenze mit eigenem Rollbalken. */
.erinnerungs-leiste--offen {
    width: min(30rem, calc(100vw - 2rem));
    max-height: min(60vh, 32rem);
    overflow-y: auto;
}

/* Der Kopf ist der Schalter — er muss also auch so aussehen. */
.erinnerungs-kopf {
    cursor: pointer;
    user-select: none;
}

/* Am Handy über die volle Breite: Ein zentriertes Kästchen mit Rand verschenkt genau die
   Zeilen, auf die es ankommt. Eingeklappt bleibt es trotzdem eine Zeile hoch. */
@media (max-width: 37.5rem) {
    .erinnerungs-leiste {
        right: 0.5rem;
        left: 0.5rem;
        bottom: 0.5rem;
        width: auto;
        max-width: none;
    }

    .erinnerungs-leiste--offen {
        width: auto;
        max-height: 55vh;
    }
}

.mud-main-content:has(~ .erinnerungs-leiste) {
    /* Eingeklappt ist die Meldung eine Zeile hoch — mehr Platz braucht es nicht. */
    padding-bottom: 6rem;
}

.mud-main-content:has(~ .erinnerungs-leiste--offen) {
    /* Aufgeklappt so viel, wie die Liste hoch werden kann. */
    padding-bottom: min(60vh, 34rem);
}

@media (max-width: 37.5rem) {
    .mud-main-content:has(~ .erinnerungs-leiste--offen) {
        padding-bottom: 58vh;
    }
}

/* Der Streifen „Eine neue Fassung ist bereit" (js/pwa-registrieren.js, 2026-07-29).

   **Wogegen er gebaut ist.** Der Service Worker liefert die Dateien aus seinem
   Zwischenspeicher — das ist der Sinn der Sache, ohne ihn gäbe es keinen Betrieb bei
   schwachem Empfang. Die Kehrseite: Eine neue Fassung ist auf dem Server, und der Browser
   zeigt weiter die alte. Genau das ist am 29.07. passiert und hat einen halben Tag
   Verbesserungen unsichtbar gemacht.

   Unten LINKS, weil unten rechts die Erinnerung sitzt. Und er verschwindet nicht von
   selbst: Ein Hinweis, den man übersieht, hätte den Fehler nur leiser gemacht. */
.neue-fassung {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1300;

    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 0.75rem 1rem;
    border-radius: 4px;

    /* Bernstein wie die übrigen Handlungsflächen — es ist eine Einladung, keine Warnung. */
    background-color: #FFB703;
    color: #17140A;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

    font-family: inherit;
    font-size: 0.95rem;
    max-width: calc(100vw - 2rem);
}

.neue-fassung-knopf {
    /* 44 px Mindesthöhe wie überall — auch dieser Knopf wird mit Handschuhen getroffen. */
    min-height: 44px;
    padding: 0 1rem;
    border: 2px solid #17140A;
    border-radius: 4px;
    background: transparent;
    color: #17140A;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.neue-fassung-knopf:hover,
.neue-fassung-knopf:focus-visible {
    background-color: #17140A;
    color: #FFB703;
}

.neue-fassung-spaeter {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: #17140A;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 37.5rem) {
    .neue-fassung {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        max-width: none;
    }
}

/* =============================================================================
   Der Laufzettel: der Weg im laufenden Abschnitt (Entwurf „G", 2026-07-30)
   =============================================================================
   Nur die Linie mit den Punkten. Alles andere — Karten, Ringe, Knöpfe, Farben —
   macht MudBlazor und das Theme; was hier steht, kann es nicht: eine senkrechte
   Linie mit einem Punkt je Zeile.

   Die Farben kommen aus den Theme-Variablen und nicht fest verdrahtet, sonst
   leuchtet die Linie im dunklen Erscheinungsbild hellgrau aus der Fläche
   heraus — derselbe Fehler wie einmal bei den Scrollbars.
   ============================================================================= */
.lz-kopf {
    cursor: pointer;
    /* Auf dem Handy mit Handschuhen: Der ganze Kopf ist die Fläche zum Auf- und
       Zuklappen, nicht nur das kleine Zeichen rechts. */
    min-height: 2.75rem;
}

/* Der Zähler bleibt auf einer Zeile. Bei 390 Pixel Breite brach „0 von 3" sonst in
   „0 von" und „3" um — im Bild vom 30.07. gesehen. Umbrechen darf die Überschrift,
   nicht die Zahl. */
.lz-kopf .mud-typography-caption {
    white-space: nowrap;
}

.lz-weg {
    position: relative;
    padding-left: 1.75rem;
}

.lz-weg::before {
    content: "";
    position: absolute;
    left: 0.375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
}

.lz-punkt {
    position: relative;
    padding: 0.35rem 0;
}

/* Der Punkt auf der Linie. Die Hintergrundfarbe der Fläche liegt darunter,
   damit die Linie nicht durch den Kreis hindurchscheint. */
.lz-punkt::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 0.85rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
}

.lz-punkt-fertig::before {
    background-color: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

.lz-punkt-entfaellt::before {
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-text-disabled);
}

.lz-punkt-ueberfaellig::before {
    background-color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
}

.lz-punkt-jetzt::before {
    background-color: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
    /* Der Ring drumherum ist der einzige Zierrat hier — er zieht den Blick auf
       die eine Zeile, die zählt, ohne dass etwas blinkt oder sich bewegt. */
    box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.25);
}

/* Die große Karte des nächsten Punkts. Der bernsteinfarbene Rahmen ist die
   Akzentfarbe des Erscheinungsbilds — dieselbe wie am Anmelden-Knopf. */
.lz-jetzt {
    border: 2px solid var(--mud-palette-warning);
    border-radius: var(--mud-default-borderradius);
    padding: 0.75rem 1rem;
    margin: 0.25rem 0 0.5rem;
}

/* Der laufende Abschnitt bekommt einen kräftigeren Rahmen als die übrigen
   Karten — sonst sähen fünf gleich aussehende Karten alle gleich wichtig aus. */
.lz-laufend {
    border-width: 2px !important;
    border-color: var(--mud-palette-text-primary) !important;
}

/* =============================================================================
   Wareneingang am Regal (2026-07-30)
   =============================================================================
   Dieser Bildschirm wird im Stehen bedient, mit Arbeitshandschuhen, in einem
   Lagerraum. Deshalb hier größere Werte als überall sonst — er ist die einzige
   Seite, die ausschließlich für ein festmontiertes Tablett gebaut ist.
   ============================================================================= */

/* Die Tasten sind größer als die 44 Pixel der übrigen Baustellen-Ansichten:
   Wer eine Kiste unterm Arm hat, trifft mit einer Hand und ohne hinzusehen. */
.wa-zeile .mud-button-root {
    min-height: 56px;
    font-size: 1.05rem;
}

/* Die Auftragsnummer ist die meistbenutzte Eingabe des Bildschirms — sie darf
   nicht aussehen wie ein Suchfeld unter vielen. */
.wa-nummer input {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Ausgewählt heißt: Der Posten geht beim nächsten Tipp mit. Das muss über den
   ganzen Bildschirm hinweg erkennbar sein, nicht nur am Knopf. */
.wa-gewaehlt {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
    background-color: rgba(255, 183, 3, 0.08);
}

/* Überfälliges trägt eine Kante, keine Fläche: Eine rote Fläche neben einer
   bernsteinfarbenen Auswahl macht den Bildschirm unruhig, und unruhig heißt
   hier: Man übersieht, was man angetippt hat. */
.wa-spaet {
    border-left: 4px solid var(--mud-palette-error) !important;
}

/* Der Block für Menge, Zustand und Notiz. Er erscheint nur bei einer Abweichung und
   soll sich sichtbar vom Rest der Zeile abheben — sonst tippt jemand daneben. */
.wa-abweichung {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 1rem;
}

/* Die Menge ist die wichtigste Zahl des Bildschirms: Sie wird im Stehen abgelesen,
   oft aus einem Meter Entfernung. */
.wa-menge {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Projekt anlegen (ProjektAnlegen.razor)
   ============================================================================ */

/* Eine Spalte, begrenzte Breite. Die Bearbeiten-Maske nutzt zwei Spalten über die
   ganze Fensterbreite — richtig, wenn fünfundzwanzig Felder unterzubringen sind.
   Hier sind es fünf, und über 1600 Pixel gezogen sähen sie verloren aus. Der Blick
   soll geradeaus nach unten laufen, ohne zu springen. */
.anlegen-spalte {
    max-width: 44rem;
}

/* Erklärender Satz unter einem Feld, in der Größe der MudBlazor-Hilfetexte.
   Als eigenständige Regel und nicht als Nachkomme eines Elternteils: Ein früher
   so gebauter Hinweis erschien in Textgröße statt als Hilfe, weil der erwartete
   Elternteil nicht da war. */
.anlegen-hinweis {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* Die Vorschau der ersten Schritte des gewählten Laufzettels. Kein Zierrat:
   Sie beantwortet die Frage „was bekomme ich da eigentlich?", bevor man anlegt. */
.anlegen-lz {
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    padding: .75rem 1rem;
}

/* Der Umfang in einer Zeile über den Schritten: „25 Schritte in 6 Abschnitten". */
.anlegen-lz .umfang {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: .35rem;
}

.anlegen-lz ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anlegen-lz li {
    position: relative;
    padding: .15rem 0 .15rem 1.6rem;
    font-size: .875rem;
}

/* Ein leeres Kästchen — dieselbe Sprache wie auf dem Laufzettel selbst (.lz-punkt),
   damit die Vorschau erkennbar dasselbe zeigt, was gleich in der Akte steht. */
.anlegen-lz li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .42rem;
    width: .8rem;
    height: .8rem;
    border: 1.5px solid var(--mud-palette-text-secondary);
    border-radius: 2px;
}

.anlegen-lz .mehr {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    padding-left: 1.6rem;
    margin-top: .25rem;
}

/* Das Tor am Laufzettel-Punkt: Diese Marke sagt VOR dem Abhaken, wohin die Baustelle
   rückt. Bewusst zurückhaltend — sie erklärt, sie ruft nicht. */
.lz-tor {
    background: var(--mud-palette-info-lighten) !important;
    color: var(--mud-palette-info-darken) !important;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .02em;
}

/* ============================================================================
   Bereich „Lager" (Lager.razor)
   ============================================================================
   Dieselbe Sprache wie der Regal-Bildschirm: große Zeilen, kein Tabellengitter,
   die Farbe trägt die Bedeutung. Wer hier steht, liest im Vorbeigehen. */
.lg-zeile {
    border-left: 4px solid transparent;
}

.lg-spaet {
    border-left-color: var(--mud-palette-error) !important;
}

.lg-fertig {
    border-left-color: var(--mud-palette-success) !important;
}

/* Der Ablageort als Zwischenüberschrift: „Im Regal", „Vor dem Regal · 3".
   Er ist die Sortierung dieser Liste und muss deshalb lauter sein als die Posten. */
.lg-ort {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 1rem 0 .5rem;
}

.lg-ort:first-of-type {
    margin-top: 0;
}

/* Gebucht, aber ohne Ablageort. Diese Zeile ist keine Ordnung, sondern eine Lücke —
   sie steht oben und sieht auch so aus. */
.lg-ort-fehlt {
    color: var(--mud-palette-warning-darken) !important;
}