/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-01f3xp7t49] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-01f3xp7t49] {
    flex: 1;
}

/* Verlauf in den ZSK-Farben statt des Blau-Lila der Blazor-Vorlage (siehe ZSK-Design-Guide.md,
   Abschnitt 1 und der Hero-Verlauf aus Abschnitt 5). */
.sidebar[b-01f3xp7t49] {
    background-image: linear-gradient(180deg, var(--zsk-blue) 0%, var(--zsk-blue-dark) 100%);
}

.top-row[b-01f3xp7t49] {
    background-color: #f7f7f7;
    border-bottom: 1px solid var(--line);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-01f3xp7t49]  a, .top-row[b-01f3xp7t49]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-01f3xp7t49]  a:hover, .top-row[b-01f3xp7t49]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-01f3xp7t49]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-01f3xp7t49] {
        justify-content: space-between;
    }

    .top-row[b-01f3xp7t49]  a, .top-row[b-01f3xp7t49]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-01f3xp7t49] {
        flex-direction: row;
    }

    .sidebar[b-01f3xp7t49] {
        /* In rem, damit das Menü mit der eingestellten Schriftgröße mitwächst – bei 250px würden die
           Einträge in der Stufe „Sehr groß" umbrechen. */
        width: 15.625rem;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-01f3xp7t49] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-01f3xp7t49]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-01f3xp7t49], article[b-01f3xp7t49] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-c0rdlc025z] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-c0rdlc025z] {
    min-height: 3.5rem;
    /* Dunkelblau der Marke statt einer schwarzen Deckschicht – zusammen mit dem Verlauf der
       Seitenleiste ergibt das den Kopf aus ZSK-Design-Guide.md. */
    background-color: var(--zsk-blue-dark);
}

.navbar-brand[b-c0rdlc025z] {
    font-size: 1.1rem;
}

/* Das Logo ist freigestellt – blaue Schrift auf transparentem Grund. Auf dem dunkelblauen Kopf
   wäre es damit unlesbar; der weiße Grund ist hier also Pflicht und nicht Zierde. Er entspricht
   zugleich der Vorlage des Guides, wo das Logo ebenfalls auf hellem Untergrund sitzt. */
.marke-logo[b-c0rdlc025z] {
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
    flex: none;
}

.bi[b-c0rdlc025z] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-c0rdlc025z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-c0rdlc025z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-c0rdlc025z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-c0rdlc025z] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-c0rdlc025z] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-c0rdlc025z] {
        padding-bottom: 1rem;
    }

    .nav-item[b-c0rdlc025z]  a {
        color: var(--zsk-blue-text);
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-c0rdlc025z]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-c0rdlc025z]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* Zwischenüberschrift im Menü. Nötig, weil „Maschinen" zweimal vorkommt – einmal die Planungsliste
   des Hauses, einmal die eigenen Aufträge des Lohnfertigers. Ohne Gruppentitel wäre nicht
   erkennbar, welcher Eintrag welche Liste öffnet. */
.nav-gruppe[b-c0rdlc025z] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

/* Fußbereich der Navigation: wer angemeldet ist und auf welchem Weg, plus Abmelden. Für einen
   Zugang von außen ist die Angabe wichtiger als im Haus – dort ist immer klar, wer man ist. */
.benutzer[b-c0rdlc025z] {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    color: var(--zsk-blue-text);
}

.benutzer-name[b-c0rdlc025z] {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benutzer-weg[b-c0rdlc025z] {
    font-size: 0.75rem;
    opacity: 0.75;
}

@media (min-width: 641px) {
    .navbar-toggler[b-c0rdlc025z] {
        display: none;
    }

    .collapse[b-c0rdlc025z] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-c0rdlc025z] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;

        /* Menü oben, Benutzerblock unten – auch wenn die Liste kurz ist. */
        display: flex;
        flex-direction: column;
    }

    .nav-scrollable[b-c0rdlc025z]  nav {
        flex: 1;
    }
}
/* /Pages/Anmeldung.razor.rz.scp.css */
/* Die Anmeldemaske wird ohne Layout gezeichnet (kein Seitenmenü) und braucht deshalb ihre eigene
   Breitenbegrenzung – über die volle Fensterbreite gezogene Eingabefelder liest niemand gern.

   Hintergrund im Verlauf der Marke (ZSK-Design-Guide.md, Abschnitt 5, .hero): Das ist die eine
   Stelle der Anwendung, an der ein großflächiger Markenauftritt hingehört – sie ist das Erste, was
   ein Lohnfertiger von außen sieht, und sie enthält keine Arbeitsliste, der er Platz wegnehmen
   würde. */
.anmeldung-seite[b-54umukjjqg] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--zsk-blue) 0%, var(--zsk-blue-dark) 100%);
}

.anmeldung-karte[b-54umukjjqg] {
    max-width: 30rem;
}

.anmeldung-kopf[b-54umukjjqg] {
    color: #fff;
}

    .anmeldung-kopf .lead-hell[b-54umukjjqg] {
        color: #dce9f8;
    }

/* Weißer Grund wie im Seitenkopf: Das Logo ist freigestellt und stünde sonst blau auf dem blauen
   Verlauf der Anmeldeseite. */
.anmeldung-logo[b-54umukjjqg] {
    height: 3rem;
    width: 3rem;
    border-radius: 6px;
    background: #fff;
    padding: 3px;
    flex: none;
}
/* /Pages/Fremdfertigung/FremdEingelagert.razor.rz.scp.css */
/* Gruppenkopf je Maschinentyp – im Excel steht der Typ in Spalte A und gilt für die Zeilen darunter.
   Hier eine eigene Zeile, weil eine über mehrere Zeilen verbundene Zelle beim Filtern
   auseinanderfiele. */
.typ-gruppe th[b-0nwmwljila] {
    background-color: var(--zsk-blue-light);
    color: var(--zsk-blue-dark);
    border-bottom: 2px solid var(--zsk-blue);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.anzahl[b-0nwmwljila] {
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.5rem;
}

/* Nummern rechtsbündig ausgerichtete Ziffern: So stehen Maschinen- und Bestellnummern untereinander
   und Abweichungen fallen beim Überfliegen auf. */
.nummer[b-0nwmwljila] {
    font-variant-numeric: tabular-nums;
}

/* Wie die Maschine an diesen Lagerort kam. Der Unterschied ist keine Spitzfindigkeit: Bei einer
   Istmeldung ist „Lagerung" der Tag der Fertigstellung, bei einer Umlagerung der Tag der Einbuchung
   hier – die Liegetage zählen also ab einem anderen Ereignis. Deshalb dezent, aber sichtbar. */
.zugang[b-0nwmwljila] {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}


    .zugang.umlagerung[b-0nwmwljila] {
        background: #fdf0d5;
        color: #8a5a00;
    }
/* /Pages/Fremdfertigung/FremdPlanung.razor.rz.scp.css */
/* Das KW-Raster ist eine breite Tabelle mit vielen kleinen Zellen. Die Maße stehen in rem, damit sie
   der eingestellten Schriftgröße folgen (siehe Einstellungen → Schriftgröße). */

.raster[b-346i88za1u] {
    font-size: 0.8rem;
}

    /* Die Typspalte bleibt beim seitlichen Blättern stehen – ohne sie weiß man nach der dritten Woche
       nicht mehr, in welcher Zeile man ist. Dasselbe leistet im WPF-Client die Spaltenfixierung. */
    .raster .typ-spalte[b-346i88za1u] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--bs-body-bg, #fff);
        min-width: 11rem;
        text-align: left;
        vertical-align: middle;
    }

.typ-name[b-346i88za1u] {
    font-weight: 600;
    white-space: nowrap;
}

.typ-artikel[b-346i88za1u] {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 400;
}

/* Geplant und Geliefert unterscheiden sich durch die Fläche, nicht nur durch die Kopfzeile: Bei acht
   gleich aussehenden Spalten verzählt man sich sonst. Hellblau ist die Markenfläche des Guides. */
.raster .block-geplant[b-346i88za1u] {
    background-color: #fff;
}

.raster .block-geliefert[b-346i88za1u] {
    background-color: var(--zsk-blue-light);
}

.raster thead th[b-346i88za1u] {
    white-space: nowrap;
}

/* Ein Eintrag ist ein Knopf, weil er auswählbar ist – aber ohne Knopf-Optik, sonst sähe ein Raster
   mit 30 Bestellungen aus wie eine Werkzeugleiste. Die Auswahl zeigt sich durch die Fläche. */
.zelle-eintrag[b-346i88za1u] {
    display: flex;
    align-items: baseline;
    line-height: 1.5;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

    .zelle-eintrag + .zelle-eintrag[b-346i88za1u] {
        border-top: 1px dotted var(--line);
    }

    /* div-Einträge (gelieferte Zeilen) sind nicht auswählbar. */
    div.zelle-eintrag[b-346i88za1u] {
        cursor: default;
    }

    button.zelle-eintrag:hover[b-346i88za1u] {
        background: rgba(0, 108, 185, 0.08);
    }

    .zelle-eintrag.gewaehlt[b-346i88za1u] {
        background: var(--zsk-blue);
        color: #fff;
    }

        .zelle-eintrag.gewaehlt .bem-nr[b-346i88za1u],
        .zelle-eintrag.gewaehlt .msch-nr[b-346i88za1u] {
            color: #fff;
            border-color: rgba(255,255,255,0.45);
        }

/* Seriennummer und Bestellnummer sind im Excel zwei Spalten. Deshalb hier auch zwei durch eine Linie
   getrennte Felder statt zweier Textstücke nebeneinander: „29728" und „BEM59816" sind beide
   Ziffernfolgen, und ohne Trennung liest man sie als eine. Feste Breite für die Seriennummer, damit
   die Trennlinien innerhalb einer Zelle untereinander stehen. */
/* Bestellnummer vorn und hervorgehoben: Für den Fremdfertiger ist sie die Leitgröße. Feste Breite,
   damit die Trennlinien innerhalb einer Zelle untereinander stehen. */
.bem-nr[b-346i88za1u] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 5.4rem;
    padding-right: 0.4rem;
}

.msch-nr[b-346i88za1u] {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--line);
    padding-left: 0.4rem;
}

    /* Von ZSK vorgegebene Nummern kursiv – der Lohnfertiger erkennt so ohne Klick, welche er selbst
       eintragen muss. */
    .msch-nr.vorgegeben[b-346i88za1u] {
        font-style: italic;
    }

/* Fertigungsauftrag: die dritte Angabe der Zelle, in Grau – gebraucht wird sie zum Nachschlagen,
   nicht zum Überfliegen. */
.fa-nr[b-346i88za1u] {
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--line);
    padding-left: 0.4rem;
    margin-left: 0.4rem;
}

/* Lagerort der fertigen Maschine (RS = Krefeld, CZ = beim Lohnfertiger geblieben). Als Marke und nicht
   als weiteres Grau-Textstück: Sie steht nur an fertigen Maschinen, ist dort aber die Auskunft, die man
   sucht – „geliefert" allein sagt nicht, wo die Maschine gelandet ist. */
.lagerort[b-346i88za1u] {
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-left: 0.4rem;
}

/* Vier Farbstufen, die den Stufen des Kunden entsprechen – die Farbe bedeutet damit dasselbe wie die
   Zahl und nicht etwas Eigenes:
     1–49  mechanische Konstruktion            ZSK-Blau
     50–69 Warten auf T8 / Freilauf            Petrol
     70–89 Einstellungen und Schnittmuster     Hellgrün
     90–100 Checkliste / fertig                Grün

   Gefüllte Flächen mit weißer Schrift statt blasser Tönungen: Die vorherigen Pastelltöne waren in
   einer so kleinen Marke nicht zu unterscheiden. Die Zahl steht immer daneben – die Farbe ist die
   schnelle Auskunft, nicht die einzige. */
.fortschritt[b-346i88za1u] {
    margin-left: auto;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

    .fortschritt.stufe-1[b-346i88za1u] {
        background: var(--zsk-blue);
    }

    /* Die beiden Zwischenstufen sind die Überblendung von --zsk-blue nach --ok. Bewusst als fester
       Wert und nicht per color-mix(): Kennt der Browser die Funktion nicht, fällt die ganze
       Deklaration weg – die Marke wäre dann ein Chip ohne Hintergrund mit weißer Schrift. */
    .fortschritt.stufe-2[b-346i88za1u] {
        background: #00838F;
    }

    .fortschritt.stufe-3[b-346i88za1u] {
        background: #7CB342;
    }

    .fortschritt.stufe-4[b-346i88za1u] {
        background: var(--ok);
    }

/* Gelieferte Zeilen: Der Plantermin bleibt nach der Lieferung stehen. Ohne Kennzeichnung sieht eine
   längst gelieferte Maschine im Block „Geplant" aus wie offene Arbeit – und dieselbe Bestellung in
   zwei Monaten wie ein Duplikat. */
.zelle-eintrag.erledigt .bem-nr[b-346i88za1u],
.zelle-eintrag.erledigt .msch-nr[b-346i88za1u] {
    color: var(--ok);
}

.marke-geliefert[b-346i88za1u] {
    color: var(--ok);
    font-weight: 700;
    margin-left: 0.4rem;
}

.zelle-eintrag.gewaehlt .marke-geliefert[b-346i88za1u],
.zelle-eintrag.gewaehlt .fa-nr[b-346i88za1u] {
    color: #fff;
}

.kapa-kopf[b-346i88za1u] {
    background-color: var(--zsk-blue-light);
    color: var(--zsk-blue-dark);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

.kapa-feld[b-346i88za1u] {
    width: 4.5rem;
    margin: 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Suche über alle Monate ------------------------------------------------------------------ */

.suche-feld[b-346i88za1u] {
    position: relative;
    min-width: 18rem;
}

.treffer-liste[b-346i88za1u] {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 22rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-top: 0.25rem;
}

.treffer-leer[b-346i88za1u] {
    padding: 0.5rem 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.treffer[b-346i88za1u] {
    display: grid;
    grid-template-columns: 6rem 5rem 1fr;
    grid-template-areas: "bem msch ort" "typ typ typ";
    gap: 0 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

    .treffer:last-child[b-346i88za1u] {
        border-bottom: 0;
    }

    .treffer:hover[b-346i88za1u] {
        background: var(--zsk-blue-light);
    }

.treffer-bem[b-346i88za1u] {
    grid-area: bem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.treffer-msch[b-346i88za1u] {
    grid-area: msch;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Der Ort des Treffers ist der eigentliche Zweck der Suche – deshalb in der Markenfarbe. */
.treffer-ort[b-346i88za1u] {
    grid-area: ort;
    color: var(--zsk-blue-dark);
    font-weight: 600;
    text-align: right;
}

    .treffer-ort.ist-geliefert[b-346i88za1u] {
        color: var(--ok);
    }

.treffer-typ[b-346i88za1u] {
    grid-area: typ;
    color: var(--muted);
    font-size: 0.75rem;
}

/* --- Aus der Planung nehmen ------------------------------------------------------------------ */

/* Eintrag und Entfernen-Knopf nebeneinander. Der Knopf steht NEBEN dem Eintrag und nicht darin:
   Ein Knopf im Knopf ist ungültiges HTML, und ein Klick löste beide aus. */
.eintrag-zeile[b-346i88za1u] {
    display: flex;
    align-items: stretch;
}

    .eintrag-zeile + .eintrag-zeile[b-346i88za1u] {
        border-top: 1px dotted var(--line);
    }

    /* Innerhalb der Zeile trägt der Eintrag die Trennlinie nicht mehr selbst. */
    .eintrag-zeile .zelle-eintrag + .zelle-eintrag[b-346i88za1u],
    .eintrag-zeile > .zelle-eintrag[b-346i88za1u] {
        border-top: 0;
    }

/* Zurückhaltend, aber auffindbar: Erst beim Überfahren der Zeile deutlich sichtbar und rot – das
   ist die eine Stelle, an der der Design-Guide Rot vorsieht (Warnung). */
.entfernen[b-346i88za1u] {
    flex: none;
    width: 1.25rem;
    border: 0;
    background: none;
    color: var(--line);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

    .eintrag-zeile:hover .entfernen[b-346i88za1u] {
        color: var(--muted);
    }

    .entfernen:hover[b-346i88za1u] {
        color: var(--warn) !important;
    }

/* --- Pool „noch nicht verplante Bestellungen" ----------------------------------------------- */

.pool[b-346i88za1u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 60rem;
}

.pool-eintrag[b-346i88za1u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pool-knopf[b-346i88za1u] {
    display: flex;
    align-items: baseline;
    gap: 0;
    flex: 1;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

    .pool-knopf:hover[b-346i88za1u] {
        background: var(--zsk-blue-light);
    }

    .pool-knopf.gewaehlt[b-346i88za1u] {
        background: var(--zsk-blue);
        border-color: var(--zsk-blue);
        color: #fff;
    }

        .pool-knopf.gewaehlt .bem-nr[b-346i88za1u],
        .pool-knopf.gewaehlt .msch-nr[b-346i88za1u],
        .pool-knopf.gewaehlt .fa-nr[b-346i88za1u],
        .pool-knopf.gewaehlt .pool-typ[b-346i88za1u],
        .pool-knopf.gewaehlt .pool-grund[b-346i88za1u] {
            color: #fff;
            border-color: rgba(255,255,255,0.45);
        }

.pool-typ[b-346i88za1u] {
    color: var(--ink);
    padding-left: 0.6rem;
    margin-left: 0.6rem;
    border-left: 1px solid var(--line);
}

/* Der Grund rechts: „aus der Planung genommen" und „ohne Termin" sehen gleich aus, verlangen aber
   Verschiedenes. */
.pool-grund[b-346i88za1u] {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* --- Dialog --------------------------------------------------------------------------------- */

.stufen[b-346i88za1u] {
    color: var(--muted);
    font-size: 0.75rem;
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
}

    /* In der Legende steht die Marke am Anfang der Zeile, nicht rechts wie in der Zelle. */
    .stufen .fortschritt[b-346i88za1u] {
        margin-left: 0;
    }