/* /Backstube/Pages/Backplan.razor.rz.scp.css */
/* Backplan aus den Produktions-Drucklisten. Diese Datei stylt die Seite und ihr erstes Blatt,
   die Teigliste (.bp2-tl-*). Die Listenblätter darunter sind eine eigene Komponente und
   bringen ihre Stile selbst mit — die CSS-Isolation reicht nicht in fremdes Markup.

   Was am Schirm steht, kommt auch aus dem Drucker: es gibt EINE Markup-Fassung und keine
   Blatt-Umschaltung. Der @media-print-Block stylt dieselben Elemente zum A4-Blatt um.
   Farbregeln wie auf den TK-Seiten: Amber fuer Warnungen, Rot bleibt echten Fehlern. */

/* Ab 960px steht der Rahmen und gescrollt wird nur INNERHALB des offenen Reiters; darunter
   (Telefon) fliesst die Seite wie gewohnt — verschachtelte Scroll-Bereiche sind mit dem
   Daumen fummelig. 960px ist dieselbe Kante, an der die Shell ihre Seitenleiste einklappt,
   und dieselbe Wahl wie in KonditorView. */
.bp2[b-nujfg39idj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 14px;
    padding: 4px 16px 28px;
    font-family: var(--font-ui);
    color: var(--text-body);
}

@media (min-width: 960px) {
    .bp2[b-nujfg39idj] { padding: 10px 24px 18px; }
}

/* Alles ausser dem offenen Reiter behaelt seine natuerliche Hoehe. */
.bp2 > *:not(.bp2-panel)[b-nujfg39idj] { flex: none; }

/* Die Ausnahme, und sie ist keine Feinheit: ein Zeitraum darf sieben Tage umfassen, und
   jeder Tag ohne geltende Druckliste bringt einen Hinweiskasten mit (~80px). Sieben davon
   plus Schnellwahl plus Leiste sind mehr als die 702px, die unter dem Kopf bleiben — mit
   flex:none und overflow:hidden bekaeme der offene Reiter null Hoehe, und sein Inhalt waere
   nicht bloss abgeschnitten, sondern gar nicht mehr erreichbar (die Seite selbst scrollt ja
   nicht). Genau dann gibt es auch keine Blatt-Reiter, es traefe also die Teigliste.
   Deshalb: die Hinweise schrumpfen zuerst und scrollen in sich, der Reiter behaelt seinen
   Boden. Die Selektor-Form `.bp2 > …` ist noetig, um die flex:none-Regel darueber zu
   schlagen — eine blosse Klasse waere weniger spezifisch. */
.bp2 > .bp2-tageshinweise[b-nujfg39idj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ── Schnellwahl: der feste Wochenrhythmus als ein Klick ─────────────────── */

.bp2-schnellwahl[b-nujfg39idj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.bp2-sw-titel[b-nujfg39idj] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 2px;
}
/* Nacktes <button> aus demselben Grund wie .bp2-erneut: die CSS-Isolation erreicht nur
   eigenes Markup, und ein MudButton braechte MudBlazors Themefarben in eine Leiste, die
   aus unseren Tokens gebaut ist. */
.bp2-sw-knopf[b-nujfg39idj] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font: inherit;
    text-align: left;
    padding: 9px 16px;
    min-width: 132px;
    background: var(--surface-card);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.bp2-sw-knopf:hover:not(:disabled)[b-nujfg39idj] { border-color: var(--brand); background: var(--brand-wash); }
.bp2-sw-knopf:disabled[b-nujfg39idj]             { opacity: .55; cursor: default; }

.bp2-sw-tage[b-nujfg39idj]  { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.bp2-sw-datum[b-nujfg39idj] { font-size: 13px; color: var(--text-muted); }

/* „heute" markiert den Satz, fuer den HEUTE produziert wird — eine Orientierungshilfe,
   kein Zustand: der Knopf kostet denselben einen Klick wie die anderen. */
.bp2-sw-heute[b-nujfg39idj] {
    position: absolute;
    top: -8px;
    right: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--text-on-brand);
}

/* aria-pressed traegt die Auswahl auch fachlich, nicht nur optisch: nach dem Laden bleibt
   damit ablesbar, welcher Satz die Blaetter darunter erzeugt hat. */
.bp2-sw-knopf[aria-pressed="true"][b-nujfg39idj] {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.bp2-sw-knopf[aria-pressed="true"] .bp2-sw-tage[b-nujfg39idj] { color: var(--brand); }

/* ── Reiter: ein Blatt je Reiter ─────────────────────────────────────────────
   Form aus der Design-System-Komponente `navigation/Tabs`, Variante `pill` — dieselbe wie in
   KonditorView, damit die Backstube auf beiden Seiten dasselbe Bedienelement sieht. Einzige
   Abweichung von der DS-Komponente: 44 px statt 34 px Hoehe, weil das Terminal mit dem Finger
   bedient wird. */

/* Reiterleiste und Ansichtswahl in einer Zeile; passt beides nicht, bricht die Wahl darunter um. */
.bp2-reiterzeile[b-nujfg39idj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.bp2-reiter[b-nujfg39idj] {
    display: inline-flex;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

/* Dieselbe Pillenform wie die Reiter, eine Stufe kleiner: die Wahl ordnet die Reiter, sie
   ist keiner. 44px Hoehe, weil sie am Terminal mit dem Finger getroffen wird. */
.bp2-ansicht[b-nujfg39idj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

.bp2-ansicht-knopf[b-nujfg39idj] {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    min-height: 36px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
}

.bp2-ansicht-knopf:hover[b-nujfg39idj] { color: var(--text-strong); }
.bp2-ansicht-knopf.aktiv[b-nujfg39idj] { background: var(--surface-card); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
.bp2-ansicht-knopf:focus-visible[b-nujfg39idj] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

@media (pointer: coarse) {
    .bp2-ansicht-knopf[b-nujfg39idj] { min-height: 44px; }
}

.bp2-reiter-knopf[b-nujfg39idj] {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .2s var(--ease-out), color .2s var(--ease-out);
}

.bp2-reiter-knopf:hover[b-nujfg39idj]  { color: var(--text-strong); }
.bp2-reiter-knopf.aktiv[b-nujfg39idj]  { background: var(--surface-card); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
.bp2-reiter-knopf:focus-visible[b-nujfg39idj] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Der Wochentag steht nur an Reitern eines mehrtaegigen Zeitraums (s. BackplanReiterBuilder)
   und ist dort die Unterscheidung — deshalb leiser als der Listenname, aber nicht gedaempft. */
.bp2-reiter-tag[b-nujfg39idj] {
    font-weight: 500;
    color: var(--text-body);
}

.bp2-reiter-zahl[b-nujfg39idj] {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.bp2-reiter-knopf.aktiv .bp2-reiter-zahl[b-nujfg39idj] { background: var(--brand-soft); color: var(--brand-strong); }

/* Nur der offene Reiter scrollt — die Leiste darueber bleibt stehen. Der Boden von 220px ist
   der Gegenpart zu .bp2-tageshinweise: er ist das, was beim Schrumpfen NICHT nachgibt, damit
   ein Stapel Tageshinweise den Reiter nicht auf null druecken kann. */
.bp2-panel[b-nujfg39idj] {
    flex: 1;
    min-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Der geschlossene Reiter bleibt im DOM (s. Markup: der Druck braucht ihn), nimmt aber
   keinen Platz. */
.bp2-aus[b-nujfg39idj] { display: none; }

/* ── Hinweise der Seite (Konfiguration, Fehler, kein Wochentagstreffer) ──── */

.bp2-hinweis[b-nujfg39idj] {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: var(--warning-100);
    border: 1px solid var(--sand-300);
    color: var(--warning-600);
    font-size: 15px;
    line-height: 1.5;
}
.bp2-hinweis strong[b-nujfg39idj] { display: block; font-size: 16px; font-weight: 600; }
.bp2-hinweis p[b-nujfg39idj] { margin: 4px 0 0; }
.bp2-hinweis p:first-child[b-nujfg39idj] { margin: 0; }
/* Bewusst ein nacktes <button> statt MudButton: die CSS-Isolation erreicht nur eigenes
   Markup, ein MudButton braeuchte eine Huelle drumherum und braechte ausserdem MudBlazors
   Themefarben in einen Kasten, der aus unseren Tokens gebaut ist. */
.bp2-erneut[b-nujfg39idj] {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    color: var(--warning-600);
    background: var(--surface-card);
    border: 1.5px solid var(--warning-600);
    border-radius: var(--radius-sm);
    padding: 7px 16px;
    cursor: pointer;
}
.bp2-erneut:hover[b-nujfg39idj]  { background: var(--warning-100); }
.bp2-erneut:active[b-nujfg39idj] { background: var(--sand-300); }

/* Der Knopf steht in den PageHeader-Actions, ausserhalb von .bp2 — die CSS-Isolation
   traegt ihn trotzdem, weil das Markup dieser Seite gehoert (SectionContent). */
.bp2-zusatz-knopf[b-nujfg39idj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    color: var(--text-on-brand);
    background: var(--brand);
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 16px;
    cursor: pointer;
}
.bp2-zusatz-knopf:hover[b-nujfg39idj] { background: var(--brand-strong); }

/* Die Einladung ist KEIN Hinweis: sie stellt nichts fest, sondern fordert auf. Deshalb
   ruhig und gestrichelt statt amber gefuellt — sonst liest sich „noch nichts gewaehlt"
   wie „an diesem Tag faellt nichts an". */
.bp2-einladung[b-nujfg39idj] {
    padding: 40px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-muted);
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
}
.bp2-einladung strong[b-nujfg39idj] { display: block; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.bp2-einladung p[b-nujfg39idj] { margin: 6px 0 0; }

/* ── Teigliste: das erste Blatt, ueber den ganzen Liefertag ──────────────── */

.bp2-blatt[b-nujfg39idj] { display: block; }

.bp2-tl-kopf[b-nujfg39idj] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--text-strong);
}

.bp2-tl-titel[b-nujfg39idj] { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--text-strong); }
.bp2-tl-liste[b-nujfg39idj] { font-size: 13px; color: var(--text-body); margin-top: 2px; }
.bp2-tl-wann[b-nujfg39idj]  { margin-left: auto; text-align: right; }
.bp2-tl-tag[b-nujfg39idj]   { font-size: 15px; font-weight: 600; line-height: 1.1; color: var(--text-strong); }
.bp2-tl-summe[b-nujfg39idj] { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.bp2-tl-leer[b-nujfg39idj] { padding: 32px 16px; text-align: center; color: var(--text-muted); }

.bp2-tl-spalten[b-nujfg39idj], .bp2-tl-zeile[b-nujfg39idj] {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid var(--border-soft);
}

.bp2-tl-zeile[b-nujfg39idj] { align-items: center; }

.bp2-tl-spalten[b-nujfg39idj] { margin-top: 8px; border-bottom: 1px solid var(--border-default); }
.bp2-tl-spalten .bp2-tl-name[b-nujfg39idj],
.bp2-tl-spalten .bp2-tl-kg[b-nujfg39idj],
.bp2-tl-spalten .bp2-tl-vorlauf-spalte[b-nujfg39idj],
.bp2-tl-spalten .bp2-tl-chargen[b-nujfg39idj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Das Abhakkaestchen gehoert aufs Papier, nicht auf den Schirm. */
.bp2-tl-haken[b-nujfg39idj] { display: none; }

/* Feste Breite wie zuvor — nur weiter: bei 180px brach „Laugenteig | Brezel & Bagel"
   zweizeilig um und zog die ganze Zeile mit hoch. Mitwachsen darf sie nicht, sonst stuenden
   die Chargen je Zeile woanders und die Liste waere keine Tabelle mehr. */
.bp2-tl-name[b-nujfg39idj] {
    flex: none;
    width: 240px;
    padding: 7px 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
}

/* Huelle statt Textknoten: der Zusatz-Hinweis ist ein eigenes Kind DIESER Zelle, nicht ein
   Flex-Geschwister in .bp2-tl-zeile — sonst stuende er NEBEN der kg-Zahl und naehme der
   Chargen-Spalte Breite weg (die das eigentliche Gewicht der Zeile traegt).

   Der Zusatz-Hinweis bricht per flex-wrap unter die Zahl um — er steht nur an wenigen
   Zeilen, und nur die werden dadurch hoeher. */
.bp2-tl-kg[b-nujfg39idj] {
    flex: none;
    width: 128px;
    padding: 5px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.bp2-tl-kg-zahl[b-nujfg39idj] {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

/* Leiser als die Hauptzahl darueber, damit die verbindliche Gesamtmenge die Zeile traegt
   und der Zusatz-Anteil nur ergaenzt. */
/* Eigene Zeile unter der Zahl (flex-basis 100%), rechtsbuendig darunter. */
.bp2-tl-zusatz[b-nujfg39idj] {
    flex: 0 0 100%;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
}

/* Eigene Spalte statt Pille je Zeile (#2312): „inkl. 6 kg Vorlauf" steht einmal im
   Spaltenkopf, die Zeile traegt nur noch den Haken. Ohne eigenes Padding oben und unten,
   damit das Label die Zeilenhoehe ausfuellt und der Finger nicht das Kaestchen treffen muss. */
.bp2-tl-vorlauf-spalte[b-nujfg39idj] {
    flex: none;
    width: 150px;
    padding: 0 8px 0 20px;
}

.bp2-tl-spalten .bp2-tl-vorlauf-spalte[b-nujfg39idj] { padding-top: 5px; padding-bottom: 5px; }

.bp2-tl-vorlauf[b-nujfg39idj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 38px;
    cursor: pointer;
}

.bp2-tl-vorlauf input[b-nujfg39idj] {
    margin: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--brand);
    cursor: pointer;
}

/* Unsichtbar, aber vorlesbar: display:none naehme dem Haken seinen Namen. */
.bp2-tl-vorlauf-text[b-nujfg39idj] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (pointer: coarse) {
    .bp2-tl-vorlauf[b-nujfg39idj] { min-height: 44px; }
}

.bp2-tl-chargen[b-nujfg39idj] {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    font-size: 14px;
    color: var(--text-strong);
}

.bp2-tl-charge[b-nujfg39idj] {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

/* Ein Teig ohne gepflegte Teigteilung steht mit seiner Gesamtmenge da und sagt das auch —
   eine erfundene Aufteilung waere schlimmer als eine fehlende. */
.bp2-tl-notiz[b-nujfg39idj] {
    padding: 2px 7px;
    border: 1.5px solid var(--text-body);
    font-size: 14px;
    color: var(--text-strong);
}

.bp2-tl-fuss[b-nujfg39idj] {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--border-default);
    font-size: 12px;
    color: var(--text-muted);
}
.bp2-tl-fuss span:last-child[b-nujfg39idj] { margin-left: auto; }

/* ── Telefon ────────────────────────────────────────────────────────────────
   Bis Story #1600 hatte diese Datei genau EINEN Breakpoint (min-width:960px, und der
   nur fuers Padding) — die Teigliste stand auf dem Telefon in ihrem Desktop-Raster.
   Die 640px-Grenze ist dieselbe wie in BackplanListenblatt.razor.css: darunter Karte,
   darueber Zeile mit ausgerichteten Spalten.

   Bewusst ein max-width-Override und KEIN Umbau auf mobile-first: der Druckblock unten
   setzt an .bp2-tl-spalten/.bp2-tl-zeile kein display und lebt vom flex der Grundregeln.
   Laege die Tabellenform in einer min-width-Query, haenge der Druck daran, dass A4
   (794px bei 96 dpi) sie zufaellig trifft. max-width:639.98px trifft er nie. */

/* ── Telefon und schmales Tablet: die Seite fliesst, statt in sich zu scrollen ──
   Verschachtelte Scroll-Bereiche sind mit dem Daumen fummelig. 960px ist dieselbe Kante,
   an der die Shell ihre Seitenleiste einklappt; die Reiter bleiben, nur der Rahmen faellt. */
@media (max-width: 959.98px) {
    .bp2[b-nujfg39idj] {
        height: auto;
        overflow: visible;
    }
    .bp2-panel[b-nujfg39idj] {
        flex: none;
        min-height: auto;
        overflow: visible;
        padding-right: 0;
    }
    /* Ohne festen Rahmen gibt es auch nichts, was die Hinweise auffressen koennten. */
    .bp2 > .bp2-tageshinweise[b-nujfg39idj] {
        flex: none;
        overflow: visible;
    }
}

@media (max-width: 639.98px) {
    /* Drei gleichrangige Saetze gehoeren in EINE Zeile. Mit flex-wrap und
       min-width:132px passten nur zwei hinein; der dritte stand allein darunter und
       las sich wie eine zweite Kategorie statt wie die dritte Wahl.
       Die Spaltenzahl haengt an BackplanRhythmen.Alle — kommt ein vierter Satz dazu,
       ist diese Zeile mitzuziehen. */
    .bp2-schnellwahl[b-nujfg39idj] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        /* Die „heute"-Pille ragt mit top:-8px aus dem Knopf; ohne diesen Vorlauf
           schnitte sie an der Oberkante der ersten Rasterzeile ab. */
        padding-top: 8px;
    }
    .bp2-sw-titel[b-nujfg39idj] { grid-column: 1 / -1; margin-right: 0; }
    .bp2-sw-knopf[b-nujfg39idj] { min-width: 0; padding: 8px; }
    .bp2-sw-datum[b-nujfg39idj] { font-size: 12px; }
    .bp2-sw-heute[b-nujfg39idj] { right: 6px; }

    /* Die Reiter bleiben in EINER Zeile (#2330). Umbrechend stand der dritte allein in einer
       zweiten Zeile und die runde Spur wurde zum verbeulten Kasten. Was nicht passt, wischt
       man seitlich — dieselbe Loesung wie in KonditorView. Tragend sind flex-shrink:0 und
       nowrap am Knopf: ohne sie schrumpfen die Knoepfe und die Beschriftung zerreisst. */
    .bp2-reiterzeile[b-nujfg39idj] { flex-direction: column; align-items: stretch; }
    .bp2-reiter[b-nujfg39idj] {
        display: flex;
        align-self: stretch;
        /* Ohne die Obergrenze behaelt die Leiste die Breite ihres Inhalts und schiebt die
           ganze Seite in die Breite, statt in sich zu scrollen (gemessen bei 390px). */
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .bp2-reiter-knopf[b-nujfg39idj] {
        flex: 1 0 auto;
        justify-content: center;
        white-space: nowrap;
        padding: 11px 12px;
    }
    /* Die Zahl steht auf dem Blatt selbst noch einmal (Teige bzw. Bleche im Kopf). Ohne sie
       passen die drei Reiter eines Zwei-Tage-Satzes ab 360px in die Zeile. */
    .bp2-reiter-zahl[b-nujfg39idj] { display: none; }
    /* Die Ansichtswahl nimmt die ganze Zeile statt rechts zu haengen. */
    .bp2-ansicht[b-nujfg39idj] { margin-left: 0; }
    .bp2-ansicht-knopf[b-nujfg39idj] { flex: 1; }

    /* Der Kopf stapelt. Als Flex-Zeile stiessen die umbrechende linke Haelfte und der
       rechtsbuendige Datumsblock in der Mitte aneinander — beide Haelften brauchen auf
       358px Innenbreite je zwei Zeilen. */
    .bp2-tl-kopf[b-nujfg39idj]  { display: block; }
    .bp2-tl-titel[b-nujfg39idj] { font-size: 22px; line-height: 1.1; }
    .bp2-tl-liste[b-nujfg39idj] { font-size: 13px; color: var(--text-muted); }
    .bp2-tl-wann[b-nujfg39idj]  { margin-left: 0; text-align: left; }
    .bp2-tl-tag[b-nujfg39idj]   { font-size: 15px; margin-top: 3px; }

    /* Die Zeile wird zur Karte — dieselbe Bauform wie .bp2-zeile im Listenblatt.
       Grund: .bp2-tl-name (180px) und .bp2-tl-kg (88px) sind FESTE Breiten; von 358px
       Innenbreite blieben der Chargen-Spalte 74px, in denen sich jeder Chip einzeln
       untereinander stapelte und die Zeile dreifach hoch wurde. */
    /* Der Spaltenkopf BLEIBT — zweispaltig wie die Karte darunter. Er ist die einzige
       Stelle, an der „kg gesamt" die grosse Zahl als Kilogramm ausweist; die Einheit an
       die Zahl selbst zu haengen waere der naheliegende Weg, bricht aber die Zusage von
       BackplanSeiteTeiglisteTests, dass in .bp2-tl-kg der blanke Wert steht. „Chargen"
       faellt weg: die Aufteilung steht jetzt unter der Karte und erklaert sich selbst
       („2 × 23 kg"). */
    .bp2-tl-spalten[b-nujfg39idj] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        padding-bottom: 6px;
    }
    .bp2-tl-spalten .bp2-tl-name[b-nujfg39idj],
    .bp2-tl-spalten .bp2-tl-kg[b-nujfg39idj]      { width: auto; padding: 0; }
    .bp2-tl-spalten .bp2-tl-chargen[b-nujfg39idj],
    .bp2-tl-spalten .bp2-tl-vorlauf-spalte[b-nujfg39idj] { display: none; }

    .bp2-tl-zeile[b-nujfg39idj] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "name kg vorlauf" "chargen chargen chargen";
        column-gap: 10px;
        padding: 11px 0 12px;
    }
    /* width MUSS zurueck: eine Breite am Grid-Element wirkt weiter, anders als flex:none. */
    .bp2-tl-zeile .bp2-tl-name[b-nujfg39idj]            { grid-area: name;    width: auto; padding: 0; }
    .bp2-tl-zeile .bp2-tl-kg[b-nujfg39idj]              { grid-area: kg;      width: auto; padding: 0; }
    .bp2-tl-zeile .bp2-tl-vorlauf-spalte[b-nujfg39idj]  { grid-area: vorlauf; width: auto; padding: 0; }
    .bp2-tl-zeile .bp2-tl-chargen[b-nujfg39idj]         { grid-area: chargen; padding: 7px 0 0; }

    /* Die Karte hat keinen Spaltenkopf fuer den Vorlauf — hier traegt der Schalter seine
       Beschriftung selbst, als Pille neben der Zahl. */
    .bp2-tl-zeile .bp2-tl-vorlauf[b-nujfg39idj] {
        gap: 5px;
        min-width: 0;
        min-height: 0;
        padding: 5px 9px;
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-pill);
        background: var(--surface-card);
        font-size: 12px;
        line-height: 1.1;
        white-space: nowrap;
        color: var(--text-muted);
    }
    .bp2-tl-zeile .bp2-tl-vorlauf input[b-nujfg39idj] { width: 15px; height: 15px; }
    .bp2-tl-zeile .bp2-tl-vorlauf-text[b-nujfg39idj] {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    /* Zwei Angaben, die sich mit margin-left:auto auf 358px nur noch quetschen. */
    .bp2-tl-fuss[b-nujfg39idj] { flex-direction: column; gap: 2px; }
    .bp2-tl-fuss span:last-child[b-nujfg39idj] { margin-left: 0; }

    /* Liefertage, Zusatzproduktion und Drucken passen beschriftet erst ab etwa 600px
       nebeneinander (#1628). Darunter nur das Symbol; der Name bleibt im aria-label. */
    .bp2-knopf-text[b-nujfg39idj] { display: none; }
    .bp2-zusatz-knopf[b-nujfg39idj] { justify-content: center; min-width: 44px; padding: 0 12px; }
    .bp2-druck[b-nujfg39idj]  .mud-button-root { min-width: 44px; padding: 0 12px; }
    .bp2-druck[b-nujfg39idj]  .mud-button-icon-start { margin: 0; }
}

/* ── A4-Blatt ───────────────────────────────────────────────────────────────
   Die App-Shell blendet sich selbst aus und setzt ihre drei Ebenen auf natuerliche Hoehe
   zurueck (MainLayout.razor.css) — hier steht deshalb NUR, was diese Seite betrifft.
   Die Blink-Falle eine Ebene tiefer: .bp2 ist am Schirm ein Flex-Container, und ein
   Flex-Vorfahre im Druckpfad laesst Chrome/Edge nach Seite 1 abbrechen.
   Groessen in pt wie in PacklistSheet.razor.css (px x 0.75 bei 96 dpi). */

@media print {
    .bp2[b-nujfg39idj] {
        display: block;
        height: auto;
        overflow: visible;
        padding: 0;
        color: var(--text-strong);
    }

    /* Die Schnellwahl und die Reiterleiste sind BEDIENELEMENTE, kein Inhalt — sie fallen
       weg wie der PageHeader, den die Shell ausblendet. Die Zusage „was am Schirm steht,
       kommt aus dem Drucker" gilt den Blaettern; ein Knopf auf Papier ist nur Toner. */
    .bp2-schnellwahl[b-nujfg39idj],
    .bp2-reiterzeile[b-nujfg39idj] { display: none; }

    /* Der Kern der Zusage: gedruckt werden ALLE Blaetter, egal welcher Reiter offen ist.
       Ohne diese beiden Regeln kaeme aus dem Teigliste-Reiter heraus genau eine Seite. */
    .bp2-panel[b-nujfg39idj],
    .bp2-panel.bp2-aus[b-nujfg39idj] {
        display: block;
        min-height: 0;
        overflow: visible;
    }

    /* Eine neue Seite je TAG, nicht je Blatt: mittwochs gelten zwei Drucklisten, und beide
       sollen auf dieselbe Seite, wenn sie passen. Ein weiteres Blatt desselben Tages reisst
       nicht mitten durch — passt es nicht mehr, beginnt es als Ganzes auf der naechsten. */
    .bp2-panel.bp2-tagbeginn[b-nujfg39idj] { break-before: page; }
    .bp2-tagbeginn ~ .bp2-panel:not(.bp2-tagbeginn)[b-nujfg39idj] { margin-top: 13.5pt; break-inside: avoid; }

    /* Die Selektor-Form `.bp2 > …` ist hier PFLICHT, nicht Geschmack: die Schirmregel steht
       als `.bp2 > .bp2-tageshinweise` da, und ein @media-print-Block erhoeht die Spezifitaet
       nicht. Eine blosse Klasse verlöre gegen sie — nachgemessen: die Huelle blieb im Druck
       ein display:flex mit overflow, also genau die Blink-Falle (Abbruch nach Seite 1).

       break-after ist kein Schoenheitsfehler-Fix: die Hinweise stehen seit den Reitern VOR
       der Teigliste (vorher standen sie je Tag dahinter). Ohne den Umbruch beginnt die
       Teigliste auf Papier in dem Rest, den sie uebrig lassen, und reisst bei mehreren Tagen
       ohne Liste mitten durch — waehrend jedes Listenblatt danach seine eigene Seite
       erzwingt. Sie bekommen deshalb ihr eigenes Blatt. Eine Leerseite entsteht dadurch
       nicht: die Huelle steht nur im Markup, wenn es ueberhaupt einen Hinweis gibt. */
    .bp2 > .bp2-tageshinweise[b-nujfg39idj] {
        display: block;
        overflow: visible;
        break-after: page;
    }

    .bp2-tl-kopf[b-nujfg39idj] { gap: 15pt; padding-bottom: 9pt; }
    .bp2-tl-titel[b-nujfg39idj] { font-size: 25.5pt; }
    .bp2-tl-liste[b-nujfg39idj] { font-size: 12.75pt; margin-top: 4pt; }
    .bp2-tl-tag[b-nujfg39idj] { font-size: 18pt; }
    .bp2-tl-summe[b-nujfg39idj] { font-size: 11.25pt; margin-top: 3pt; }

    /* Ein Hinweis, der nur am Schirm steht, endet am Drucker — also aufs Blatt,
       dort aber schwarz-weiss statt Amber (Tonersparmodus schluckt Flaechen). */
    .bp2-hinweis[b-nujfg39idj] {
        padding: 9pt 10.5pt;
        border: 1.5px solid var(--text-body);
        border-radius: 0;
        background: none;
        color: var(--text-strong);
        font-size: 12pt;
        break-inside: avoid;
    }
    .bp2-hinweis strong[b-nujfg39idj] { font-size: 12.75pt; font-weight: 700; }
    /* Ein Knopf auf Papier ist kein Knopf. */
    .bp2-erneut[b-nujfg39idj] { display: none; }

    /* Auf Papier hat eine Aufforderung nichts verloren — der Druckknopf sperrt in diesem
       Zustand ohnehin, ein Ctrl+P soll kein leeres Blatt mit ihr fuellen. */
    .bp2-einladung[b-nujfg39idj] { display: none; }

    .bp2-tl-spalten[b-nujfg39idj], .bp2-tl-zeile[b-nujfg39idj] {
        border-bottom: 1px solid var(--border-default);
    }

    .bp2-tl-spalten[b-nujfg39idj] {
        margin-top: 16.5pt;
        border-bottom: 1px solid var(--ink-300);
        break-after: avoid;
    }
    /* Das Kaestchen bleibt im Spaltenkopf stehen und wird nur unsichtbar — nur so
       decken sich Kopf- und Zeilenspalten auf den Punkt. */
    .bp2-tl-spalten .bp2-tl-haken[b-nujfg39idj] { visibility: hidden; }
    .bp2-tl-spalten .bp2-tl-name[b-nujfg39idj],
    .bp2-tl-spalten .bp2-tl-kg[b-nujfg39idj],
    .bp2-tl-spalten .bp2-tl-vorlauf-spalte[b-nujfg39idj],
    .bp2-tl-spalten .bp2-tl-chargen[b-nujfg39idj] {
        font-size: 9.75pt;
        padding: 4.5pt 6pt;
    }

    /* baseline statt zentriert: mit Zusatz-Hinweis ist die kg-Zelle zwei Zeilen hoch,
       zentriert saesse der Teigname daneben in der Luft. */
    .bp2-tl-zeile[b-nujfg39idj] { break-inside: avoid; align-items: baseline; }

    .bp2-tl-haken[b-nujfg39idj] {
        display: block;
        flex: none;
        box-sizing: content-box;
        width: 12.75pt;
        height: 12.75pt;
        margin: 7.5pt 6pt;
        border: 1.5px solid var(--text-body);
    }

    .bp2-tl-name[b-nujfg39idj] { width: 150pt; padding: 7.5pt 6pt; font-size: 13.5pt; }

    /* Auf Papier stapelt die Zelle: die Spalte ist hier 66pt schmal, der Zusatz-Hinweis
       steht unter der Zahl. */
    .bp2-tl-kg[b-nujfg39idj] {
        width: 66pt;
        padding: 7.5pt 6pt;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    }
    .bp2-tl-kg-zahl[b-nujfg39idj] { font-size: 16.5pt; }
    /* Ohne eigene Groesse blieb der Hinweis auf Papier bei 12px im gedaempften Grau stehen —
       genau dort, wo sich der Teigmacher gegen das gedruckte Blatt abgleicht. */
    .bp2-tl-zusatz[b-nujfg39idj] { flex: 0 1 auto; font-size: 9.75pt; color: var(--text-strong); }
    /* Der Haken ist Bedienung, auf Papier steht sein ZUSTAND — und zwar als Zeichen statt
       als Kaestchen: ein zweites Kaestchen neben dem Abhakkaestchen der Zeile laese sich
       als etwas, das noch anzukreuzen ist. Die Angabe muss bleiben, sonst laese man die
       Zahl daneben als Bestellmenge. */
    .bp2-tl-vorlauf-spalte[b-nujfg39idj] { width: 66pt; padding: 7.5pt 6pt; font-size: 12.75pt; }
    .bp2-tl-vorlauf[b-nujfg39idj] { display: block; min-width: 0; min-height: 0; color: var(--text-strong); }
    .bp2-tl-vorlauf input[b-nujfg39idj],
    .bp2-tl-vorlauf-text[b-nujfg39idj] { display: none; }
    .bp2-tl-vorlauf[b-nujfg39idj]::after     { content: "\2713"; }
    .bp2-tl-vorlauf-aus[b-nujfg39idj]::after { content: "ohne"; }

    .bp2-tl-chargen[b-nujfg39idj] { padding: 7.5pt 6pt; font-size: 12.75pt; }

    .bp2-tl-charge[b-nujfg39idj] {
        padding: 1.5pt 5.25pt;
        border-radius: 0;
    }

    .bp2-tl-notiz[b-nujfg39idj]  { padding: 1.5pt 5.25pt; font-size: 11.25pt; }

    .bp2-tl-fuss[b-nujfg39idj] {
        gap: 12pt;
        margin-top: 16.5pt;
        padding-top: 6.75pt;
        font-size: 9.75pt;
    }
}
/* /Backstube/Pages/Components/BackplanListenblatt.razor.rz.scp.css */
/* Ein Listenblatt des Backplans. Die CSS-Isolation reicht nicht ins Markup eines Kindes —
   diese Datei traegt deshalb ALLE Stile dieses Blatts, auch die Blattchrome (Kopf/Fuss).
   Das Gegenstueck der Seite (Teigliste) fuehrt seine eigene unter .bp2-tl-*.

   EINE Fassung fuer Schirm und Papier: der @media-print-Block stylt dieselben Elemente zum
   A4-Blatt um. Was der Baecker anfasst, traegt das Gewicht — Bleche gross, Stueckzahl lesbar
   daneben, die Aufteilung ("8 x 60") klein darunter. Teigmengen stehen NICHT hier: Teig wird
   fuer den ganzen Liefertag angesetzt und deshalb nur auf der Teigliste beziffert. */

.bp2-blatt[b-4xxw1q4xjp] {
    display: block;
    font-family: var(--font-ui);
    color: var(--text-body);
}

/* ── Blattkopf / Blattfuss ──────────────────────────────────────────────── */

.bp2-blatt-kopf[b-4xxw1q4xjp] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 7px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--text-strong);
}

.bp2-blatt-titel[b-4xxw1q4xjp] { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--text-strong); }
.bp2-blatt-liste[b-4xxw1q4xjp] { font-size: 13px; color: var(--text-body); margin-top: 2px; }
.bp2-blatt-wann[b-4xxw1q4xjp]  { margin-left: auto; text-align: right; }
.bp2-blatt-tag[b-4xxw1q4xjp]   { font-size: 15px; font-weight: 600; line-height: 1.1; color: var(--text-strong); }
.bp2-blatt-summe[b-4xxw1q4xjp] { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.bp2-blatt-fuss[b-4xxw1q4xjp] {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--border-default);
    font-size: 12px;
    color: var(--text-muted);
}
.bp2-blatt-fuss span:last-child[b-4xxw1q4xjp] { margin-left: auto; }

.bp2-anmerkungen[b-4xxw1q4xjp] {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.bp2-anmerkungen li[b-4xxw1q4xjp] { padding: 2px 0; }

/* ── Teigfeld: die Bloecke nebeneinander ────────────────────────────────────
   Ein Teigblock traegt zwei bis drei Artikel, die Flaeche darunter ist auf dem
   Backstuben-Terminal aber ueber 1000 px breit. Zwei Spalten halbieren die Bauhoehe des
   Blatts, ohne dass eine Zeile schmaler wird — das groesste Blatt braucht damit 863 statt
   1360 px und passt fast ohne Scrollen in den Reiter. Erst ab 960 px, weil eine Spalte
   darunter zu schmal fuer Name + Menge + Bleche waere. Papier setzt seine zwei Spalten im
   Druckblock selbst. */
@media (min-width: 960px) {
    .bp2-teigfeld[b-4xxw1q4xjp] {
        column-count: 2;
        column-gap: 24px;
    }
    /* Ein Block darf nicht ueber die Spaltengrenze reissen: seine Kopfzeile nennt den Teig,
       und eine Produktzeile ohne sichtbaren Teignamen ist im Ofen wertlos. */
    .bp2-teigfeld > .bp2-teig[b-4xxw1q4xjp] { break-inside: avoid; }
}

/* ── Teigblock (Gruppierung, keine Teigmenge) ───────────────────────────── */

.bp2-teig[b-4xxw1q4xjp] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-card);
    margin-bottom: 12px;
}

.bp2-teig-kopf[b-4xxw1q4xjp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 14px;
    background: var(--brand-wash);
    border-bottom: 1px solid var(--brand-soft);
}

.bp2-teig-kopf h2[b-4xxw1q4xjp] {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -.01em;
}

@media (min-width: 640px) {
    .bp2-teig-kopf[b-4xxw1q4xjp] { padding: 10px 18px; }
    .bp2-teig-kopf h2[b-4xxw1q4xjp] { font-size: 18px; }
}

/* Das Abhakkaestchen gehoert aufs Papier, nicht auf den Schirm. */
.bp2-haken[b-4xxw1q4xjp] { display: none; }

/* Die Huelle je Mengenspalte hat keine eigene Box: ihr Inhalt bleibt Kind der Zeile.
   Nur das gemeinsame Blatt gibt ihr am Telefon ein eigenes Layout (s. u.). */
.bp2-zelle[b-4xxw1q4xjp] { display: contents; }

/* Der Spaltenkopf des gemeinsamen Blatts — sichtbar erst, wo es Spalten gibt: ab 640px
   je Teigblock, im Druck einmal im Blattkopf. */
.bp2-spalten[b-4xxw1q4xjp] { display: none; }
.bp2-ohne[b-4xxw1q4xjp] { color: var(--text-subtle); }

/* Produktzeile: unter 640 px eine Karte (Menge als Unterzeile, Aufteilung entfaellt),
   darueber eine Zeile mit ausgerichteten Zahlenspalten. */
.bp2-zeile[b-4xxw1q4xjp] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name blech" "menge blech";
    align-items: center;
    column-gap: 12px;
    min-height: 52px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-soft);
}

.bp2-zeile:last-child[b-4xxw1q4xjp] { border-bottom: none; }

.bp2-name[b-4xxw1q4xjp] {
    grid-area: name;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-strong);
}

.bp2-menge[b-4xxw1q4xjp] {
    grid-area: menge;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bp2-blech[b-4xxw1q4xjp] { grid-area: blech; text-align: right; }

.bp2-blech-zahl[b-4xxw1q4xjp] { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }
.bp2-blech-zahl b[b-4xxw1q4xjp] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.bp2-blech-wort[b-4xxw1q4xjp] { font-size: 12px; color: var(--text-muted); }

.bp2-teil[b-4xxw1q4xjp] {
    display: none;
    font-size: 13px;
    color: var(--text-subtle);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
    .bp2-zeile[b-4xxw1q4xjp] {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 0;
        padding: 7px 18px;
    }
    .bp2-name[b-4xxw1q4xjp] { flex: 1; font-size: 16px; }
    .bp2-menge[b-4xxw1q4xjp] { width: 92px; text-align: right; font-size: 16px; color: var(--text-body); }
    .bp2-blech[b-4xxw1q4xjp] { width: 116px; flex: none; }
    .bp2-blech-zahl b[b-4xxw1q4xjp] { font-size: 22px; }
    .bp2-blech-wort[b-4xxw1q4xjp] { font-size: 13px; }
    .bp2-teil[b-4xxw1q4xjp] { display: block; font-size: 12px; margin-top: 0; }

    /* Gemeinsames Blatt: je Liste nur die Stueckzahl. Der Kopf ist so breit wie die
       Mengenzelle, sonst steht die Ueberschrift neben ihrer Spalte. */
    .bp2-mehrspaltig .bp2-menge[b-4xxw1q4xjp] { width: 110px; }
    .bp2-mehrspaltig .bp2-teig .bp2-spalten[b-4xxw1q4xjp] {
        display: flex;
        gap: 12px;
        padding: 6px 18px 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .bp2-mehrspaltig .bp2-spalten .bp2-name[b-4xxw1q4xjp] { flex: 1; }
    .bp2-mehrspaltig .bp2-spalte[b-4xxw1q4xjp] { flex: none; width: 110px; text-align: right; }
}

/* ── Hinweise ───────────────────────────────────────────────────────────── */

.bp2-hinweis[b-4xxw1q4xjp] {
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: var(--warning-100);
    border: 1px solid var(--sand-300);
    color: var(--warning-600);
    font-size: 15px;
    line-height: 1.5;
}
.bp2-hinweis strong[b-4xxw1q4xjp] { font-size: 16px; font-weight: 600; }
.bp2-hinweis ul[b-4xxw1q4xjp] { margin: 3px 0 0; padding-left: 20px; }

.bp2-leer[b-4xxw1q4xjp] { padding: 32px 16px; text-align: center; color: var(--text-muted); }

.bp2-ruhig[b-4xxw1q4xjp] { color: var(--text-subtle); font-size: 14px; padding: 2px 6px; }
.bp2-ruhig summary[b-4xxw1q4xjp] { cursor: pointer; padding: 8px 0; }
.bp2-ruhig ul[b-4xxw1q4xjp] { margin: 0 0 8px; padding-left: 20px; }

/* ── Telefon ────────────────────────────────────────────────────────────────
   Die Produktzeilen sind unter 640px laengst Karten — Blattkopf und Blattfuss waren es
   nie und trugen dieselbe Falle wie die Teigliste der Seite: eine Flex-Zeile mit
   rechtsbuendigem zweiten Block, deren Haelften auf 358px Innenbreite aneinanderstossen.

   max-width statt mobile-first aus demselben Grund wie in Backplan.razor.css: der
   Druckblock unten setzt an .bp2-blatt-kopf kein display und lebt vom flex der
   Grundregel. A4 (794px bei 96 dpi) trifft diese Query nie. */

@media (max-width: 639.98px) {
    .bp2-blatt-kopf[b-4xxw1q4xjp]  { display: block; }
    .bp2-blatt-titel[b-4xxw1q4xjp] { font-size: 22px; line-height: 1.1; }
    .bp2-blatt-liste[b-4xxw1q4xjp] { font-size: 13px; color: var(--text-muted); }
    .bp2-blatt-wann[b-4xxw1q4xjp]  { margin-left: 0; text-align: left; }
    .bp2-blatt-tag[b-4xxw1q4xjp]   { font-size: 15px; margin-top: 3px; }

    .bp2-blatt-fuss[b-4xxw1q4xjp] { flex-direction: column; gap: 2px; }
    .bp2-blatt-fuss span:last-child[b-4xxw1q4xjp] { margin-left: 0; }

    /* Gemeinsames Blatt am Telefon: unter dem Namen je Liste eine Zeile, die ihren
       Listennamen selbst traegt — fuer zwei Mengenspalten nebeneinander fehlt die Breite. */
    .bp2-mehrspaltig .bp2-zeile[b-4xxw1q4xjp] { display: block; }
    .bp2-mehrspaltig .bp2-zelle[b-4xxw1q4xjp] {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-top: 4px;
    }
    .bp2-mehrspaltig .bp2-zelle[b-4xxw1q4xjp]::before {
        content: attr(data-liste);
        flex: 1;
        font-size: 13px;
        color: var(--text-muted);
    }
    .bp2-mehrspaltig .bp2-menge[b-4xxw1q4xjp] { font-size: 15px; color: var(--text-body); }
}

/* ── A4-Blatt ───────────────────────────────────────────────────────────────
   Ein Blatt soll auf EINE Seite passen — einspaltig, weil man am Ofen von oben nach unten
   abhakt. Bemessen an echten Mittwochen (30.09., 07.10., 14.10.2026): je Blatt 27 bis 29
   Produkte in 5 bis 7 Teigen. Nichts steht doppelt da: kein Spaltenkopf je Teigblock (jede
   Zahl traegt ihre Einheit selbst), kein „Backplan" ueber dem Listennamen, kein zweiter
   Fuss mit Liste und Tag, kein Begruendungssatz je Hinweiszeile.
   Der Seitenumbruch sitzt je TAG an der Seite (Backplan.razor.css), nicht je Blatt hier.

   Die App-Shell blendet sich selbst aus und setzt ihre Ebenen auf natuerliche Hoehe
   zurueck (MainLayout.razor.css). Die Blink-Falle: ein Flex-Vorfahre oder ein
   overflow:hidden im Druckpfad laesst Chrome/Edge nach Seite 1 abbrechen, deshalb hier
   ueberall block/visible. Groessen in pt (px x 0.75 bei 96 dpi). */

@media print {
    .bp2-blatt[b-4xxw1q4xjp] { display: block; color: var(--text-strong); }

    /* Eine Zeile: Listenname links, Tag und Blechzahl rechts. */
    .bp2-blatt-kopf[b-4xxw1q4xjp] {
        align-items: baseline;
        gap: 9pt;
        padding-bottom: 2.25pt;
        margin-bottom: 0;
        border-bottom-width: 1.5px;
    }
    .bp2-blatt-titel[b-4xxw1q4xjp] { display: none; }
    .bp2-blatt-liste[b-4xxw1q4xjp] { margin-top: 0; font-size: 15pt; font-weight: 700; color: var(--text-strong); }
    .bp2-blatt-wann[b-4xxw1q4xjp]  { display: flex; align-items: baseline; gap: 7.5pt; }
    .bp2-blatt-tag[b-4xxw1q4xjp]   { font-size: 13.5pt; }
    .bp2-blatt-summe[b-4xxw1q4xjp] { margin-top: 0; font-size: 10.5pt; color: var(--text-body); }

    .bp2-anmerkungen[b-4xxw1q4xjp] { margin: 3pt 0 0; font-size: 9.75pt; color: inherit; }
    .bp2-anmerkungen li[b-4xxw1q4xjp] { padding: 0; }

    /* Einspaltig, und zwar ausgeschrieben: A4 quer misst 1123px und traefe die 960px-Kante
       der Schirmregel sonst zufaellig. Ein Block reisst nicht ueber die Seite — eine
       Produktzeile ohne ihren Teignamen ist am Ofen wertlos. */
    .bp2-teigfeld[b-4xxw1q4xjp] { column-count: 1; margin-top: 6pt; }
    .bp2-teigfeld > .bp2-teig[b-4xxw1q4xjp] { break-inside: avoid; }

    .bp2-teig[b-4xxw1q4xjp] {
        border: none;
        border-radius: 0;
        overflow: visible;
        background: none;
        margin: 0 0 7.5pt;
    }

    /* Strich statt Flaeche: Hintergruende druckt der Browser in der Voreinstellung nicht. */
    .bp2-teig-kopf[b-4xxw1q4xjp] {
        padding: 0 0 1.5pt;
        background: none;
        border: none;
        border-bottom: 1.5px solid var(--text-body);
        break-after: avoid;
    }
    .bp2-teig-kopf h2[b-4xxw1q4xjp] { font-size: 12pt; font-weight: 700; line-height: 1.15; letter-spacing: 0; }

    .bp2-zeile[b-4xxw1q4xjp] {
        display: flex;
        align-items: baseline;
        gap: 0;
        min-height: 0;
        padding: 1.875pt 0;
        /* Schriftgroesse und Zeilenhoehe an der ZEILE: eine Zelle ohne eigene Angabe erbt
           sonst die 16px der Seite, und ihre Zeilenbox macht jede Zeile unnoetig hoch. */
        font-size: 10.5pt;
        line-height: 1.2;
        border-bottom: 1px solid var(--border-default);
        break-inside: avoid;
    }
    .bp2-zeile:last-child[b-4xxw1q4xjp] { border-bottom: none; }

    .bp2-haken[b-4xxw1q4xjp] {
        display: block;
        flex: none;
        align-self: center;
        box-sizing: content-box;
        width: 8.25pt;
        height: 8.25pt;
        margin: 0 6pt 0 0.75pt;
        border: 1px solid var(--text-body);
    }

    .bp2-name[b-4xxw1q4xjp] {
        flex: 1;
        min-width: 0;
        padding-right: 6pt;
        font-size: 10.5pt;
        font-weight: 500;
        line-height: 1.2;
        color: var(--text-strong);
    }

    .bp2-menge[b-4xxw1q4xjp] {
        flex: none;
        width: 66pt;
        text-align: right;
        font-size: 10.5pt;
        color: var(--text-strong);
    }
    .bp2-stk[b-4xxw1q4xjp] { font-size: 8.25pt; color: var(--text-body); }

    /* Die zwei Blech-Zellen werden zu eigenen Spalten der Zeile — deshalb hier flex
       statt des gestapelten Blocks vom Schirm. */
    .bp2-blech[b-4xxw1q4xjp] { display: flex; flex: none; width: auto; align-items: baseline; text-align: right; }
    .bp2-blech-zahl[b-4xxw1q4xjp] { display: block; width: 66pt; text-align: right; }
    .bp2-blech-zahl b[b-4xxw1q4xjp] { font-size: 12pt; letter-spacing: 0; }
    .bp2-blech-wort[b-4xxw1q4xjp] { margin-left: 1.5pt; font-size: 8.25pt; color: var(--text-body); }
    .bp2-teil[b-4xxw1q4xjp] {
        display: block;
        width: 84pt;
        margin-top: 0;
        text-align: right;
        font-size: 9.75pt;
        color: var(--text-body);
    }

    /* Gemeinsames Blatt: je Spalte die Stueckzahl, die Spaltentitel EINMAL im Blattkopf,
       rechts ueber ihren Spalten; die Liefertage stehen links im Namen. Die Koepfe je
       Block gehoeren dem Schirm; ihre Regel dort greift auch auf A4 (794px), deshalb hier
       mit derselben Selektorform zurueckgesetzt. */
    .bp2-mehrspaltig .bp2-menge[b-4xxw1q4xjp] { width: 84pt; }
    .bp2-mehrspaltig .bp2-teig .bp2-spalten[b-4xxw1q4xjp] { display: none; }
    .bp2-blatt-fuer[b-4xxw1q4xjp] { font-weight: 500; }
    .bp2-mehrspaltig .bp2-blatt-kopf .bp2-spalten[b-4xxw1q4xjp] {
        display: flex;
        flex: none;
        /* An den rechten Rand: nur dort stehen die Titel ueber ihren Spalten. */
        margin-left: auto;
        align-items: baseline;
        font-size: 8.25pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-body);
    }
    .bp2-mehrspaltig .bp2-spalte[b-4xxw1q4xjp] { flex: none; width: 84pt; text-align: right; }
    .bp2-ohne[b-4xxw1q4xjp] { color: var(--text-body); }

    /* Die Warnung „nicht berechenbar": schwarz-weiss statt Amber (Tonersparmodus schluckt
       Flaechen) und als Fliesszeile ohne Grund je Eintrag — der steht am Schirm, am Ofen
       zaehlen Produkt und Menge. */
    .bp2-hinweis[b-4xxw1q4xjp] {
        margin: 4.5pt 0 0;
        padding: 3pt 6pt;
        border: 1px solid var(--text-body);
        border-radius: 0;
        background: none;
        color: var(--text-strong);
        font-size: 9.75pt;
        line-height: 1.35;
        break-inside: avoid;
    }
    .bp2-hinweis strong[b-4xxw1q4xjp] { font-size: 9.75pt; font-weight: 700; }
    .bp2-hinweis strong[b-4xxw1q4xjp]::after { content: ": "; }
    .bp2-hinweis ul[b-4xxw1q4xjp] { display: inline; margin: 0; padding: 0; list-style: none; }
    /* inline-block + nowrap: ein Eintrag bricht als Ganzes um, nicht zwischen Name und Menge. */
    .bp2-hinweis li[b-4xxw1q4xjp] { display: inline-block; white-space: nowrap; margin-right: 10.5pt; }
    .bp2-hinweis-grund[b-4xxw1q4xjp] { display: none; }

    .bp2-leer[b-4xxw1q4xjp] { padding: 9pt 0; text-align: left; }

    /* Nicht aufs Papier: Produkte ohne Teiggewicht (Backmischungen, Muffins, Nussecke …) und
       was bewusst nicht gebacken wird. Beides ist am Ofen keine Arbeit und steht am Schirm.
       Die Warnung „nicht berechenbar" darueber BLEIBT — dort koennte echte Backarbeit fehlen. */
    .bp2-nur-schirm[b-4xxw1q4xjp],
    .bp2-ruhig[b-4xxw1q4xjp] { display: none; }

    /* Liste und Tag stehen schon im Kopf; im Fuss bleibt nur der Stand. */
    .bp2-blatt-fuss[b-4xxw1q4xjp] {
        margin-top: 3pt;
        padding-top: 1.5pt;
        font-size: 7.5pt;
        color: var(--text-body);
    }
    .bp2-blatt-fuss span:last-child[b-4xxw1q4xjp] { display: none; }
}
/* /Backstube/Pages/Components/BackplanZusatzPanel.razor.rz.scp.css */
/* Eingabe-Panel fuer die Zusatzproduktion. Reines HTML statt MudBlazor-Dialog (s. Markup) —
   deshalb eigene Feld- und Knopf-Stile statt MudBlazor-Theme, aus denselben DS-Tokens wie
   der Rest der Seite. Im Druck ausgeblendet: eine Zusatzmenge wird ueber das Zusatzblatt
   selbst gedruckt, nicht ueber dieses Panel. */

.bp2-zusatz[b-1kjt6m9f43] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    padding: 16px;
}

.bp2-zusatz-titel[b-1kjt6m9f43] {
    margin: 0 0 12px;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-strong);
}

.bp2-zusatz-vergangen[b-1kjt6m9f43] {
    margin: 0 0 12px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Eine Warnung, kein Fehler: Amber statt Rot. Eigene Zeile in der umbrechenden Eingabezeile. */
.bp2-zusatz-hinweis[b-1kjt6m9f43] {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--warning-600);
}

.bp2-zusatz-eingabe[b-1kjt6m9f43] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.bp2-zusatz-tag[b-1kjt6m9f43],
.bp2-zusatz-suche[b-1kjt6m9f43],
.bp2-zusatz-artikel[b-1kjt6m9f43],
.bp2-zusatz-menge[b-1kjt6m9f43],
.bp2-zusatz-grund[b-1kjt6m9f43] {
    flex: 1 1 160px;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    font: inherit;
    font-size: var(--text-base);
    color: var(--text-strong);
    background: var(--surface-sunken);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}

.bp2-zusatz-menge[b-1kjt6m9f43] { flex: 0 1 100px; }
.bp2-zusatz-tag[b-1kjt6m9f43] { flex: 0 1 210px; }

.bp2-zusatz-tag:focus-visible[b-1kjt6m9f43],
.bp2-zusatz-suche:focus-visible[b-1kjt6m9f43],
.bp2-zusatz-artikel:focus-visible[b-1kjt6m9f43],
.bp2-zusatz-menge:focus-visible[b-1kjt6m9f43],
.bp2-zusatz-grund:focus-visible[b-1kjt6m9f43] {
    outline: none;
    background: var(--surface-card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.bp2-zusatz-speichern[b-1kjt6m9f43] {
    flex: none;
    height: 40px;
    padding: 0 18px;
    font: inherit;
    font-weight: 600;
    color: var(--text-on-brand);
    background: var(--brand);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.bp2-zusatz-speichern:hover[b-1kjt6m9f43] { background: var(--brand-strong); }

.bp2-zusatz-fehler[b-1kjt6m9f43] {
    margin: 10px 0 0;
    font-size: var(--text-sm);
    color: var(--danger-600);
}

.bp2-zusatz-leer[b-1kjt6m9f43] {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.bp2-zusatz-liste[b-1kjt6m9f43] {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.bp2-zusatz-liste li[b-1kjt6m9f43] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}
.bp2-zusatz-liste li:last-child[b-1kjt6m9f43] { border-bottom: none; }

.bp2-zusatz-name[b-1kjt6m9f43] { font-weight: 600; color: var(--text-strong); }
.bp2-zusatz-zahl[b-1kjt6m9f43] { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bp2-zusatz-warum[b-1kjt6m9f43] { color: var(--text-muted); font-size: var(--text-sm); }
.bp2-zusatz-wer[b-1kjt6m9f43] { margin-left: auto; color: var(--text-subtle); font-size: var(--text-sm); }

.bp2-zusatz-entfernen[b-1kjt6m9f43] {
    flex: none;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--danger-600);
    background: none;
    border: 1px solid var(--danger-600);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
}
.bp2-zusatz-entfernen:hover[b-1kjt6m9f43] { background: var(--danger-100); }

@media print {
    .bp2-zusatz[b-1kjt6m9f43] { display: none; }
}
/* /Backstube/Pages/Components/TkBuchungsDialog.razor.rz.scp.css */
/* Bestaetigungs-Dialog der TK-Bestandsseite — dieselben DS-Tokens wie TkBestand.razor.css.
   Offen und "begrenzt" sind AMBER (Warnung), nicht Rot: Rot bleibt fehlgeschlagenen Buchungen
   auf den Karten der Seite. */

/* ── Bestaetigung: Bottom-Sheet mobil, zentriert ab Tablet ──────────────── */
.tkb-modal[b-fk91hoyqos] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(77, 77, 77, .42);
    animation: tkb-fade-b-fk91hoyqos .15s var(--lh-ease);
}

@keyframes tkb-fade-b-fk91hoyqos { from { opacity: 0; } }

.tkb-sheet[b-fk91hoyqos] {
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -14px 40px rgba(77, 77, 77, .18);
    animation: tkb-rise-b-fk91hoyqos .22s cubic-bezier(.2, .7, .3, 1);
}

@keyframes tkb-rise-b-fk91hoyqos { from { transform: translateY(18px); opacity: .4; } }

@media (min-width: 640px) {
    .tkb-modal[b-fk91hoyqos] { align-items: center; }
    .tkb-sheet[b-fk91hoyqos] { border-radius: 26px; }
}

.tkb-sheet__grip[b-fk91hoyqos] {
    flex: none;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--sand-200);
    margin: 14px auto 10px;
}

.tkb-sheet__head[b-fk91hoyqos] { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 18px 6px; }

.tkb-sheet__head h2[b-fk91hoyqos] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--text-strong);
    letter-spacing: -.01em;
}

.tkb-sheet__sub[b-fk91hoyqos] { font-size: var(--text-sm); color: var(--text-muted); }

.tkb-sheet__x[b-fk91hoyqos] {
    flex: none;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 999px;
    color: var(--text-subtle);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
}

.tkb-sheet__x:hover[b-fk91hoyqos] { background: var(--sand-100); color: var(--text-body); }

.tkb-sheet__list[b-fk91hoyqos] { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 18px; }

.tkb-sum[b-fk91hoyqos] { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.tkb-sum:last-child[b-fk91hoyqos] { border-bottom: none; }

.tkb-sum__nm[b-fk91hoyqos] { flex: 1 1 auto; min-width: 0; }
.tkb-sum__nm b[b-fk91hoyqos] { display: block; font-weight: 600; font-size: var(--text-base); color: var(--text-strong); overflow-wrap: anywhere; }
.tkb-sum__nm span[b-fk91hoyqos] { display: block; font-size: var(--text-sm); color: var(--text-subtle); margin-top: 3px; font-variant-numeric: tabular-nums; }

.tkb-sum__to[b-fk91hoyqos] {
    flex: none;
    text-align: right;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--brand-strong);
    font-variant-numeric: tabular-nums;
}

.tkb-sum__to span[b-fk91hoyqos] { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--text-subtle); margin-top: 2px; }

.tkb-sheet__foot[b-fk91hoyqos] {
    flex: none;
    display: flex;
    gap: 11px;
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-soft);
}

.tkb-sheet__cancel[b-fk91hoyqos],
.tkb-sheet__ok[b-fk91hoyqos] {
    height: 48px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.tkb-sheet__cancel[b-fk91hoyqos] { flex: 1 1 auto; border: 1.5px solid var(--border-default); background: var(--white); color: var(--text-body); }
.tkb-sheet__cancel:hover:not(:disabled)[b-fk91hoyqos] { background: var(--sand-100); }

.tkb-sheet__ok[b-fk91hoyqos] {
    flex: 1 1 auto;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    box-shadow: 0 5px 14px rgba(58, 125, 140, .26);
}

.tkb-sheet__ok:hover:not(:disabled)[b-fk91hoyqos] { background: var(--brand-strong); }
.tkb-sheet__ok:disabled[b-fk91hoyqos], .tkb-sheet__cancel:disabled[b-fk91hoyqos] { opacity: .55; cursor: default; }

/* ── Umbuchungen ────────────────────────────────────────────────────────── */
.tkb-sum__umb[b-fk91hoyqos] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--text-sm);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

/* Steht in .tkb-sum__nm — dessen "span, b { display: block }" hier zuruecknehmen. */
.tkb-sum__nm .tkb-sum__umb b[b-fk91hoyqos] { display: inline; font-size: var(--text-sm); color: var(--text-body); }

.tkb-sum__hint[b-fk91hoyqos] {
    background: var(--warning-100);
    color: var(--warning-600);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.tkb-sum--offen .tkb-sum__nm b[b-fk91hoyqos] { color: var(--warning-600); }

.tkb-sum__verwerfen[b-fk91hoyqos] {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
}

.tkb-sum__verwerfen:hover:not(:disabled)[b-fk91hoyqos] { background: var(--sand-100); }
.tkb-sum__verwerfen:disabled[b-fk91hoyqos] { opacity: .55; cursor: default; }

.tkb-sum__verwerfen-hinweis[b-fk91hoyqos] {
    margin: 8px 0 0;
    color: var(--warning-600);
    font-size: var(--text-sm);
    line-height: 1.4;
}
/* /Backstube/Pages/Components/TkUnverpacktBereich.razor.rz.scp.css */
/* Bereich "Unverpackt" auf der TK-Bestandsseite (#2067) — dieselben DS-Tokens wie
   TkBestand.razor.css. Eigene Karten statt Wiederverwendung: die Pack-Karte traegt
   Karton-Chip und Stueck/Karton-Umschaltung, die hier bedeutungslos waeren (Einzelartikel
   sind immer in Stueck). */

.tkub-leer[b-dk64kc1h02] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 26px 22px;
    border: 1.5px dashed var(--border-default);
    border-radius: 18px;
    text-align: center;
    font-family: var(--font-ui);
    color: var(--text-subtle);
}

.tkub-leer b[b-dk64kc1h02] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--text-strong);
}

.tkub-leer span[b-dk64kc1h02] {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

.tkub-leer a[b-dk64kc1h02] {
    color: var(--brand-strong);
    font-weight: 600;
}

.tkub-grid[b-dk64kc1h02] { display: grid; grid-template-columns: 1fr; gap: 10px; }

@media (min-width: 640px) {
    .tkub-grid[b-dk64kc1h02] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
}

.tkub-card[b-dk64kc1h02] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 13px 14px 14px;
    box-shadow: var(--shadow-sm);
}

.tkub-card.act[b-dk64kc1h02] {
    border-color: var(--brand-soft);
    background: var(--brand-wash);
    box-shadow: 0 4px 14px rgba(58, 125, 140, .13);
}

.tkub-card.err[b-dk64kc1h02] {
    border-color: var(--danger-600);
    background: var(--danger-100);
}

.tkub-card__top[b-dk64kc1h02] { display: flex; align-items: center; gap: 9px; }

.tkub-dot[b-dk64kc1h02] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--warning-600);
}

.tkub-nm[b-dk64kc1h02] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tkub-card__bot[b-dk64kc1h02] { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

.tkub-qty[b-dk64kc1h02] { flex: 1 1 auto; min-width: 0; }

.tkub-qty__big[b-dk64kc1h02] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.tkub-qty__big.low[b-dk64kc1h02] { color: var(--warning-600); }
.tkub-qty__u[b-dk64kc1h02] { font-size: var(--text-sm); font-weight: 600; color: var(--text-subtle); }

/* Touch-freundlicher Stepper: 48 px Trefferflaeche, wie auf den Pack-Karten. */
.tkub-step[b-dk64kc1h02] { flex: none; display: flex; align-items: center; gap: 6px; }

.tkub-step__btn[b-dk64kc1h02] {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 15px;
    border: 1.5px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    font-size: var(--text-xl);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tkub-step__btn--plus[b-dk64kc1h02] {
    background: var(--brand);
    border-color: transparent;
    color: var(--text-on-brand);
    box-shadow: 0 4px 12px rgba(58, 125, 140, .24);
}

.tkub-step__btn:disabled[b-dk64kc1h02] { opacity: .45; cursor: default; }

.tkub-step__num[b-dk64kc1h02] {
    width: 56px;
    height: 48px;
    flex: none;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    color: var(--ink-300);
    border: 1.5px solid var(--border-default);
    border-radius: 14px;
    background: var(--white);
    -moz-appearance: textfield;
}

.tkub-step__num[b-dk64kc1h02]::-webkit-outer-spin-button,
.tkub-step__num[b-dk64kc1h02]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tkub-step__num:focus[b-dk64kc1h02] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
    color: var(--brand-strong);
}

.tkub-card.act .tkub-step__num[b-dk64kc1h02] { border-color: var(--brand); color: var(--brand-strong); }

.tkub-arrow[b-dk64kc1h02] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--brand-soft);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-strong);
    font-variant-numeric: tabular-nums;
}

.tkub-arrow__d[b-dk64kc1h02] {
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--text-sm);
}

.tkub-arrow__hint[b-dk64kc1h02] {
    background: var(--warning-100);
    color: var(--warning-600);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.tkub-arrow.low[b-dk64kc1h02] { color: var(--warning-600); border-top-color: var(--warning-100); }
.tkub-arrow.low .tkub-arrow__d[b-dk64kc1h02] { background: var(--warning-100); color: var(--warning-600); }
/* /Backstube/Pages/Kalkulation.razor.rz.scp.css */
/* Reserviert für seitenspezifische Anpassungen. MudBlazor-Kinder via ::deep stylen. */
.kalkulation-toolbar[b-lvudx94pdl]  .mud-table-row td {
    padding: 8px 14px;
}
/* /Backstube/Pages/KonditorView.razor.rz.scp.css */
/* Die Seite ist ein Arbeitsblatt für die Backstube (Terminal 1366×768, Touch) und zugleich
   ein Analyse-Werkzeug am Schreibtisch. Ab 960 px steht der Rahmen und gescrollt wird nur
   INNERHALB der Listen; darunter (Telefon) fließt die Seite wie gewohnt. */
.dash[b-nrjruhq6kn] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 12px 20px 16px;
    gap: 10px;
}

.dash-select[b-nrjruhq6kn] {
    width: 190px;
}

.dash-progress[b-nrjruhq6kn] {
    flex: none;
}

/* ── Reiter ──
   Form aus der Design-System-Komponente `navigation/Tabs`, Variante `pill`: Pillen auf einer
   weichen Spur. Sie ist ein Bedienelement und klebt deshalb bewusst NICHT an der Karte darunter —
   der frühere Karteireiter-Look hing an nichts dran und sah kaputt aus (#1839).
   Einzige Abweichung von der DS-Komponente: 44 px statt 34 px Höhe, weil das Backstuben-Terminal
   mit dem Finger bedient wird. */
.kv-reiter[b-nrjruhq6kn] {
    flex: none;
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 4px;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

.kv-reiter-knopf[b-nrjruhq6kn] {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .2s var(--ease-out), color .2s var(--ease-out);
}

.kv-reiter-knopf:hover[b-nrjruhq6kn] {
    color: var(--text-strong);
}

.kv-reiter-knopf.aktiv[b-nrjruhq6kn] {
    background: var(--surface-card);
    color: var(--brand-strong);
    box-shadow: var(--shadow-xs);
}

.kv-reiter-knopf:focus-visible[b-nrjruhq6kn] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Die Anzahl am Lücken-Reiter ersetzt die frühere Überschrift „— 10 Artikel“: sie sagt am
   geschlossenen Reiter, dass dort etwas liegt. */
.kv-reiter-zahl[b-nrjruhq6kn] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--warning-600);
    background: var(--warning-100);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
}

.kv-panel[b-nrjruhq6kn] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Der inaktive Reiter bleibt im DOM (s. Markup: der Druck braucht ihn), nimmt aber keinen Platz. */
.kv-aus[b-nrjruhq6kn] {
    display: none;
}

/* ── Reiter 1: Wochenbedarf ──
   Je Produktionsgruppe eine Karte. Die Karten stehen nebeneinander, sobald jede Platz für
   ihre Namen hat — das entscheidet die Breite des Reiters (Container Query), nicht die des
   Bildschirms: an der 960er-Kante der Shell blieben dem Namen sonst 22–55 px („W…", #775). */
.kv-bedarf[b-nrjruhq6kn] {
    container: konditor-blatt / inline-size;
}

.kv-gruppen[b-nrjruhq6kn] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    /* Unter der Schwelle stehen die Karten untereinander und passen nicht mehr in den Rahmen —
       dann scrollt die Fläche als Ganzes (schmales Fenster am Schreibtisch, kein Hauptfall). */
    overflow-y: auto;
}

/* 1000 px Reiterbreite = zwei Karten mit je ~200 px für den Namen. Am Terminal (1366 px) misst
   der Reiter 1062 px. Eine einzelne Karte nimmt die ganze Breite. */
@container konditor-blatt (min-width: 1000px) {
    .kv-gruppen[b-nrjruhq6kn] {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        overflow: visible;
    }

    /* Mehr als zwei Karten passen nicht nebeneinander: zweispaltig, die Fläche scrollt als
       Ganzes. Dieselbe Spezifität wie die Regel darüber, damit der Druckblock beide schlägt.
       `max-content` ist tragend: die Karten haben `min-height: 0`, eine `auto`-Zeile würde sie
       deshalb in den Rahmen quetschen, statt die Fläche scrollen zu lassen. */
    .kv-gruppen--viele[b-nrjruhq6kn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: max-content;
        overflow-y: auto;
    }
}

/* Farbe ist nur Zusatz — der Name der Gruppe trägt die Unterscheidung. Vergeben nach Position,
   nicht nach Gruppenname, damit eine umbenannte Gruppe nicht farblos wird. Nur „Ohne Gruppe"
   hat einen festen, neutralen Ton: sie ist keine Gruppe wie die anderen. */
.kv-ton-0[b-nrjruhq6kn] { --kv-ton: var(--rose-100); --kv-akzent: var(--rose-500); }
.kv-ton-1[b-nrjruhq6kn] { --kv-ton: var(--sand-200); --kv-akzent: var(--sand-400); }
.kv-ton-2[b-nrjruhq6kn] { --kv-ton: var(--blue-050); --kv-akzent: var(--blue-500); }
.kv-ton-ohne[b-nrjruhq6kn] { --kv-ton: var(--surface-sunken); --kv-akzent: var(--border-strong); }

.kv-gruppe[b-nrjruhq6kn] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.kv-gruppe-kopf[b-nrjruhq6kn] {
    flex: none;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--kv-ton);
}

.kv-gruppe-titel[b-nrjruhq6kn] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--text-strong);
}

.kv-gruppe-punkt[b-nrjruhq6kn] {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kv-akzent);
}

/* Zählt die Sorten ohne Backmenge. Steht nur da, solange es welche gibt. */
.kv-gruppe-warn[b-nrjruhq6kn] {
    flex: none;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--warning-600);
    background: var(--surface-card);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    white-space: nowrap;
}

.kv-gruppe-summe[b-nrjruhq6kn] {
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-body);
    white-space: nowrap;
}

.kv-bedarf-titel[b-nrjruhq6kn] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
}

.kv-bedarf-basis[b-nrjruhq6kn] {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.kv-bedarf-fehler[b-nrjruhq6kn] {
    flex: none;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--warning-600);
    background: var(--warning-100);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.kv-bedarf-fehler-grund[b-nrjruhq6kn] {
    color: var(--text-muted);
}

.kv-bedarf-tabelle[b-nrjruhq6kn] {
    flex: none;
}

/* Die Zeilen der anderen Seiten bleiben im DOM (s. Markup) — der Druck holt sie zurück. */
.kv-andere-seite[b-nrjruhq6kn] {
    display: none !important;
}

/* Die Backmengen-Spalte ist in JEDER Karte gleich breit, auch wo nur „81 Stück" drinsteht:
   sonst stünde „davon Sa+So" in zwei Karten nebeneinander an zwei verschiedenen Stellen.
   176 px trägt die breiteste Zeilenart („1.234 Stk" + Marke „Stückelung fehlt"). */
.kv-bedarf-kopf[b-nrjruhq6kn],
.kv-bedarf-zeile[b-nrjruhq6kn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px 176px;
    gap: 10px;
    align-items: center;
    padding: 0 16px;
}

.kv-bedarf-kopf[b-nrjruhq6kn] {
    flex: none;
    height: 28px;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
}

.kv-bedarf-kopf > span:not(:first-child)[b-nrjruhq6kn] {
    text-align: right;
}

/* Eigene Spalte nur auf Papier (s. @media print). */
.kv-kopf-stueckelung[b-nrjruhq6kn] {
    display: none;
}

/* 36 px: zwölf Zeilen (ZeilenJeSeite) passen am Terminal zwischen Kartenkopf und Blätterleiste
   (gemessen im Entwurf). Wer Kopf, Leiste oder Fußzeile höher macht, nimmt es den Zeilen weg.
   Angetippt werden Zeilen nicht, nur gelesen — die 44 px gelten den Pfeilen und Reitern. */
.kv-bedarf-zeile[b-nrjruhq6kn] {
    height: 36px;
    border-bottom: 1px solid var(--border-soft);
}

.kv-bedarf-zeile:nth-child(even)[b-nrjruhq6kn] {
    background: var(--surface-page);
}

.kv-bedarf-name[b-nrjruhq6kn] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.kv-bedarf-name-text[b-nrjruhq6kn] {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--text-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* „ohne Rezept" steht UNTER dem Namen, nicht daneben: daneben nahm es langen Namen die Breite
   („Mandelhörnchen - Pu…"). Zwei Zeilen passen in die 36 px, wie rechts Einheit und Stückelung. */
.kv-bedarf-name--rezept[b-nrjruhq6kn] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.kv-bedarf-name--rezept .kv-bedarf-name-text[b-nrjruhq6kn] {
    max-width: 100%;
    line-height: 1.15;
}

.kv-bedarf-rezept[b-nrjruhq6kn] {
    flex: none;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.1;
    color: var(--warning-600);
    white-space: nowrap;
}

.kv-bedarf-we[b-nrjruhq6kn] {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    text-align: right;
    color: var(--text-muted);
}

/* Die Backmenge: Zahl, Einheit, Stückelung und Fehlermarke schließen an DERSELBEN rechten Kante
   ab wie der Spaltenkopf. */
.kv-bedarf-menge[b-nrjruhq6kn] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--font-ui);
}

/* Die Zahl, nach der gebacken wird — sie trägt das Gewicht auf dem Blatt. */
.kv-bedarf-zahl[b-nrjruhq6kn] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1;
    color: var(--text-strong);
}

.kv-bedarf-einheit[b-nrjruhq6kn] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.kv-bedarf-einheit-name[b-nrjruhq6kn] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-body);
}

/* Kontrollwert: ein Blech mit 16 fällt neben lauter Zwölfern sofort auf. */
.kv-bedarf-stueckelung[b-nrjruhq6kn] {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.kv-bedarf-verkauf[b-nrjruhq6kn] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Steht AN STELLE der Backmenge, nicht daneben. Erklärt wird sie in der Legende darunter — ein
   title-Tooltip wäre auf dem Touch-Terminal unerreichbar (dieselbe Regel wie auf den TK-Seiten). */
.kv-bedarf-fehlt[b-nrjruhq6kn] {
    flex: none;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--warning-600);
    background: var(--warning-100);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    white-space: nowrap;
}

/* Die Leiste klebt am Kartenboden, auch wenn die letzte Seite nur wenige Zeilen hat. */
.kv-gruppe-blaettern[b-nrjruhq6kn] {
    flex: none;
    margin-top: auto;
}

.kv-fuss[b-nrjruhq6kn] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 0 4px;
}

.kv-legende[b-nrjruhq6kn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Reiter 3: Nicht auf dem Blatt ──
   Eigener Reiter statt Anhaengsel unter dem Blatt: die Liste geht die WaWi-Pflege an, nicht
   die Konditorei, und nahm unten ein Viertel der Hoehe weg. Beim Druck steht sie weiterhin
   unter dem Blatt (s. @media print) — die Zusage „es verschwindet nichts still" bleibt. */
.kv-luecken[b-nrjruhq6kn] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    padding: 0;
    gap: 0;
}

.kv-luecken-kopfzeile[b-nrjruhq6kn] {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--border-soft);
}

.kv-luecken-zahl[b-nrjruhq6kn] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--warning-600);
    white-space: nowrap;
}

.kv-luecken-liste[b-nrjruhq6kn] {
    flex: none;
    padding: 0 18px;
}

/* Die Leiste klebt am Kartenboden, auch wenn die letzte Seite nur wenige Zeilen hat. */
.kv-liste-blaettern[b-nrjruhq6kn] {
    flex: none;
    margin-top: auto;
}

.kv-luecke-zeile[b-nrjruhq6kn] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 1.6fr);
    gap: 12px;
    padding: 10px 0;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-soft);
}

.kv-luecke-name[b-nrjruhq6kn] {
    color: var(--text-body);
}

.kv-luecke-stueck[b-nrjruhq6kn] {
    text-align: right;
}

/* ── Reiter 2: Profil & Verlauf ── */
.dash-kpis[b-nrjruhq6kn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex: none;
}

.dash-kpi[b-nrjruhq6kn] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.dash-kpi:hover[b-nrjruhq6kn] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 6px 16px rgba(77, 77, 77, .12));
}

.dash-kpi-text[b-nrjruhq6kn] {
    min-width: 0;
}

.dash-kpi-eyebrow[b-nrjruhq6kn] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.dash-kpi-value[b-nrjruhq6kn] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    color: var(--text-strong);
}

.dash-kpi-icon[b-nrjruhq6kn] {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-wash);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dash-grid[b-nrjruhq6kn] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
}

.dash-grid--konditor[b-nrjruhq6kn] {
    grid-template-columns: minmax(300px, 0.62fr) 1.9fr;
}

.dash-card[b-nrjruhq6kn] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 18px;
}

.dash-card-title[b-nrjruhq6kn] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-strong);
    flex: none;
    margin-bottom: 12px;
}

.dash-card-body[b-nrjruhq6kn] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.dash-table[b-nrjruhq6kn] {
    padding: 0;
}

.dash-empty[b-nrjruhq6kn] {
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text-muted);
    padding: 8px 18px;
}

/* ── Telefon: die Seite fliesst, statt in sich zu scrollen ──
   Verschachtelte Scroll-Bereiche sind mit dem Daumen fummelig; 960 px ist dieselbe Kante,
   an der die Shell ihre Seitenleiste einklappt.
   `screen` ist tragend: A4 misst 794 px und träfe die Kante sonst mit — das Blatt verlöre
   „davon Sa+So" und bekäme das Telefon-Raster untergeschoben, ohne dass etwas rot wird. */
@media screen and (max-width: 959.98px) {
    .dash[b-nrjruhq6kn] {
        height: auto;
        overflow: visible;
    }

    /* Die Reiter bleiben in EINER Zeile und teilen sich die Breite; passen sie nicht (unter
       ~360 px), wischt man die Leiste seitlich. Umbrechen ließ die runde Spur verbeult aussehen
       (#2236). Tragend ist `flex-shrink: 0` + `nowrap` am Knopf: ohne das quetschen sich die
       Beschriftungen mitten im Wort auf drei Zeilen, statt dass die Leiste überläuft. */
    .kv-reiter[b-nrjruhq6kn] {
        display: flex;
        flex-wrap: nowrap;
        align-self: stretch;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .kv-reiter-knopf[b-nrjruhq6kn] {
        flex: 1 0 auto;
        justify-content: center;
        white-space: nowrap;
        padding: 12px 8px;
        font-size: 13px;
    }

    .kv-panel[b-nrjruhq6kn],
    .dash-grid[b-nrjruhq6kn] {
        min-height: auto;
    }

    .kv-gruppen[b-nrjruhq6kn],
    .kv-luecken[b-nrjruhq6kn],
    .kv-luecken-liste[b-nrjruhq6kn] {
        max-height: none;
        overflow: visible;
    }

    /* Die Summe rutscht unter den Titel, statt rechts aus der Karte zu laufen (gemessen bei
       390 px: von „21 Sorten · Σ 1.994 Stück" blieb die „2"). */
    .kv-gruppe-kopf[b-nrjruhq6kn] {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        row-gap: 2px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .kv-gruppe-summe[b-nrjruhq6kn] {
        margin-left: 0;
    }

    .kv-luecken-kopfzeile[b-nrjruhq6kn] {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Einspaltig sind die Karten schon über die Container Query — hier geht es nur noch darum,
       dass der Name ganz dasteht: er bricht um (und trennt lange Wörter), die Zeile wächst mit.
       Abgeschnitten waren vorher 17 von 21 Namen. */
    .kv-bedarf-zeile[b-nrjruhq6kn] {
        height: auto;
        min-height: 44px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* `overflow-wrap` statt `hyphens: auto`: die App ist als `lang="en"` ausgezeichnet, die
       Silbentrennung liefe also nach englischen Regeln über deutsche Wörter. Nur ein Wort, das
       allein breiter ist als die Spalte, wird so hart umbrochen. */
    .kv-bedarf-name-text[b-nrjruhq6kn] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    /* `auto` statt der festen Breite: die Karten stehen hier untereinander und „davon Sa+So"
       ist weg — es gibt nichts mehr, was über die Karten hinweg fluchten müsste, und der Name
       bekommt jeden Pixel, den die Backmenge nicht braucht. */
    .kv-bedarf-kopf[b-nrjruhq6kn],
    .kv-bedarf-zeile[b-nrjruhq6kn] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* Der Wochenend-Anteil ist die erste Spalte, die auf dem Telefon geht: er hilft beim
       Verteilen, und verteilt wird nicht am Telefon. */
    .kv-kopf-we[b-nrjruhq6kn],
    .kv-bedarf-we[b-nrjruhq6kn] {
        display: none;
    }
}

/* ── Aktionsleiste ──
   Die Hülle nimmt am Layout nicht teil (am Rechner steht der Knopf wie ohne sie da); sie ist nur
   der Anker, über den ::deep den MudButton erreicht. */
.kv-aktion[b-nrjruhq6kn] {
    display: contents;
}

.kv-knopf-kurz[b-nrjruhq6kn] {
    display: none;
}

/* Unter 640 px passen drei beschriftete Bedienelemente nicht nebeneinander: „Aktualisieren"
   wurde abgeschnitten, „Wochenbedarf drucken" brach um (#2236). Dieselbe Kante wie am Backplan. */
@media (max-width: 639.98px) {
    .kv-reiter-zusatz[b-nrjruhq6kn],
    .kv-knopf-lang[b-nrjruhq6kn] {
        display: none;
    }

    .kv-aktion:not(.kv-aktion--symbol) .kv-knopf-kurz[b-nrjruhq6kn] {
        display: inline;
    }

    .kv-aktion[b-nrjruhq6kn]  .mud-button-root {
        flex: none;
    }

    .kv-aktion--symbol[b-nrjruhq6kn]  .mud-button-root {
        min-width: 44px;
        padding: 0 12px;
    }

    .kv-aktion--symbol[b-nrjruhq6kn]  .mud-button-icon-start {
        margin: 0;
    }
}

/* ── Druck: das Blatt fuer die Konditorei ──
   Gedruckt wird das Ergebnis, nicht die Herleitung — und zwar UNABHAENGIG davon, welcher Reiter
   gerade offen ist. Das Shell-Drumherum blendet MainLayout selbst aus; hier faellt die
   Flex-Falle an: ein Flex-Vorfahre mit fixer Hoehe laesst Chrome nach Seite 1 abbrechen. */
@media print {
    .dash[b-nrjruhq6kn] {
        display: block;
        height: auto;
        overflow: visible;
        padding: 0;
    }

    .kv-reiter[b-nrjruhq6kn],
    .kv-profil[b-nrjruhq6kn],
    .dash-progress[b-nrjruhq6kn],
    .dash-select[b-nrjruhq6kn] {
        display: none;
    }

    /* Auch wenn ein anderer Reiter offen ist: Blatt UND Lücken werden gedruckt. Die Lücken
       stehen im Markup direkt hinter dem Blatt und landen deshalb auf Papier darunter — genau
       da, wo sie vor dem eigenen Reiter am Bildschirm standen. */
    .kv-bedarf.kv-aus[b-nrjruhq6kn],
    .kv-luecken.kv-aus[b-nrjruhq6kn] {
        display: block;
    }

    .kv-luecken[b-nrjruhq6kn] {
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* Beide Selektoren ausgeschrieben: A4 quer (1123 px) trifft die Container-Schwelle, und
       ein scrollendes Raster bräche den Druck nach Seite 1 ab. */
    .kv-gruppen[b-nrjruhq6kn],
    .kv-gruppen--viele[b-nrjruhq6kn] {
        display: block;
        overflow: visible;
    }

    /* Ein Blatt je Gruppe: eins geht an wen Kuchen macht, eins an wen Gebäck macht. */
    .kv-gruppe[b-nrjruhq6kn] {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .kv-gruppe + .kv-gruppe[b-nrjruhq6kn] {
        break-before: page;
    }

    .kv-gruppe-kopf[b-nrjruhq6kn] {
        background: none;
        border-bottom: 2px solid var(--ink-900);
    }

    /* Auf Papier zählt die ganze Gruppe, nicht die Seite, auf der die Karte gerade stand. */
    .kv-andere-seite[b-nrjruhq6kn] {
        display: grid !important;
    }

    .kv-gruppe-blaettern[b-nrjruhq6kn],
    .kv-liste-blaettern[b-nrjruhq6kn] {
        display: none;
    }

    .kv-luecken-liste[b-nrjruhq6kn] {
        max-height: none;
        overflow: visible;
    }

    /* Auf Papier wird kein Name abgeschnitten: die Zeile wächst mit. */
    .kv-bedarf-zeile[b-nrjruhq6kn] {
        break-inside: avoid;
        height: auto;
        min-height: 30px;
    }

    .kv-bedarf-name-text[b-nrjruhq6kn] {
        white-space: normal;
        overflow: visible;
    }

    /* Auf Papier ist Platz für eine eigene Spalte „Stückelung", die Backmenge steht einzeilig
       mit Einheit. Es bleibt bei EINER Markup-Fassung: die Mengen-Zelle überspannt beide Spalten
       und teilt sich selbst auf — Stückelung · Zahl · Einheit. Die erste Unterspalte misst genau
       die Kopfspalte (70 px), damit „Stückelung" über seinen Werten steht. */
    .kv-bedarf-kopf[b-nrjruhq6kn],
    .kv-bedarf-zeile[b-nrjruhq6kn] {
        grid-template-columns: minmax(0, 1fr) 62px 110px;
    }

    .kv-mit-stueckelung .kv-bedarf-kopf[b-nrjruhq6kn] {
        grid-template-columns: minmax(0, 1fr) 62px 70px 110px;
    }

    .kv-mit-stueckelung .kv-bedarf-zeile[b-nrjruhq6kn] {
        grid-template-columns: minmax(0, 1fr) 62px 190px;
    }

    .kv-mit-stueckelung .kv-kopf-stueckelung[b-nrjruhq6kn] {
        display: block;
    }

    .kv-bedarf-menge[b-nrjruhq6kn] {
        align-items: baseline;
        gap: 4px;
    }

    .kv-mit-stueckelung .kv-bedarf-menge:not(.kv-bedarf-menge--fehlt)[b-nrjruhq6kn] {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr) auto;
        column-gap: 4px;
    }

    .kv-mit-stueckelung .kv-bedarf-einheit[b-nrjruhq6kn] {
        display: contents;
    }

    .kv-mit-stueckelung .kv-bedarf-stueckelung[b-nrjruhq6kn] {
        grid-column: 1;
        grid-row: 1;
        text-align: right;
    }

    .kv-mit-stueckelung .kv-bedarf-zahl[b-nrjruhq6kn] {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .kv-mit-stueckelung .kv-bedarf-einheit-name[b-nrjruhq6kn] {
        grid-column: 3;
        grid-row: 1;
    }

    .kv-bedarf-zahl[b-nrjruhq6kn] {
        font-size: 20px;
    }

    /* Auf Papier schwarz-weiss: Tonersparmodi schlucken Farbflaechen, und die Luecken-Liste
       ist genau die Stelle, an der etwas fehlen koennte. */
    .kv-luecken-zahl[b-nrjruhq6kn],
    .kv-bedarf-fehler[b-nrjruhq6kn],
    .kv-bedarf-fehlt[b-nrjruhq6kn],
    .kv-gruppe-warn[b-nrjruhq6kn],
    .kv-legende[b-nrjruhq6kn] {
        color: inherit;
        background: none;
    }

    /* Umrandet statt gefärbt, damit die Marke auch in Schwarzweiß trägt. */
    .kv-bedarf-fehlt[b-nrjruhq6kn],
    .kv-gruppe-warn[b-nrjruhq6kn] {
        border: 1px solid var(--ink-700);
    }

    /* „ohne Rezept" ist ein Pflegehinweis für die WaWi, keiner fürs Backen. */
    .kv-bedarf-rezept[b-nrjruhq6kn],
    .kv-gruppe-rezept[b-nrjruhq6kn] {
        display: none;
    }
}
/* /Backstube/Pages/TkBestand.razor.rz.scp.css */
/* TK-Bestand auf dem Design-System (#1177). Farben, Schrift und Radien kommen
   ausschliesslich aus den Tokens in wwwroot/css/design-tokens.css — die frueher hier
   gemischte Palette (eigenes Orange, eigenes Rot, 'Inter') ist ersatzlos weg.

   Zwei Farbregeln, die dabei bewusst gesetzt wurden:
   - Eingabe/aktiv ist TEAL (--brand), nicht Orange: Orange gehoert zu keiner CI-Familie.
   - Unterschreitung ist AMBER (--warning-600), nicht Rot: unter Mindestbestand ist eine
     Warnung, kein Fehler. Rot (--danger-600) bleibt fehlgeschlagenen Buchungen. */

.tkb[b-yfy5kkdfbp] {
    padding: 4px 16px 28px;
    font-family: var(--font-ui);
    color: var(--text-body);
}

@media (min-width: 960px) {
    .tkb[b-yfy5kkdfbp] { padding: 16px 24px 28px; }
}

/* ── Aktionen in der Topbar (mobil: unten am Daumen) ────────────────────────
   Steht ausserhalb von .tkb: die Actions rendern per SectionContent in die Leiste
   des PageHeader. Die CSS-Isolation traegt sie trotzdem, weil das Markup dieser
   Seite gehoert. */
.tkb-act[b-yfy5kkdfbp] {
    flex: none;
    height: 46px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1.5px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
}

.tkb-act:hover:not(:disabled)[b-yfy5kkdfbp] { background: var(--sand-100); }
.tkb-act__i[b-yfy5kkdfbp] { display: inline-flex; }
.tkb-act__i.spin[b-yfy5kkdfbp] { animation: tkb-spin-b-yfy5kkdfbp .9s linear infinite; }
@keyframes tkb-spin-b-yfy5kkdfbp { to { transform: rotate(360deg); } }

.tkb-act--book[b-yfy5kkdfbp] {
    background: var(--brand);
    border-color: transparent;
    color: var(--text-on-brand);
    box-shadow: 0 5px 14px rgba(58, 125, 140, .26);
}

.tkb-act--book:hover:not(:disabled)[b-yfy5kkdfbp] { background: var(--brand-strong); }

.tkb-act:disabled[b-yfy5kkdfbp] {
    background: var(--sand-200);
    border-color: transparent;
    color: var(--text-subtle);
    box-shadow: none;
    cursor: default;
}

/* ── Suche ──────────────────────────────────────────────────────────────────
   Kein Kopf-Block mehr drumherum: der Warenwert ist auf die Prognose-Seite gezogen
   (#1180), und die Lupe sitzt jetzt neben dem Titel im PageHeader. Uebrig bleibt das
   Feld selbst — mobil eingeklappt, auf dem Rechner offen. */
.tkb-such[b-yfy5kkdfbp] {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-subtle);
}

.tkb-such:focus-within[b-yfy5kkdfbp] {
    background: var(--white);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
    color: var(--text-strong);
}

.tkb-such input[b-yfy5kkdfbp] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font: inherit;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.tkb-such__x[b-yfy5kkdfbp] {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: 999px;
    color: var(--text-subtle);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
}

.tkb-such__x:hover[b-yfy5kkdfbp] { background: var(--sand-200); color: var(--text-body); }

.tkb-lupe[b-yfy5kkdfbp] {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tkb-lupe.on[b-yfy5kkdfbp] {
    background: var(--brand-wash);
    border-color: var(--brand-soft);
    color: var(--brand-strong);
}

/* Telefon: die Suche kostet nur Platz, wenn sie gebraucht wird. Eingeklappt hat sie
   keine Hoehe (display:none, nicht bloss unsichtbar) — bei einem guten Dutzend Artikeln
   sucht man selten, und der Kopfbereich war der Grund fuer #1180. */
@media (max-width: 959.98px) {
    .tkb-such[b-yfy5kkdfbp] { display: none; }
    .tkb-such.is-open[b-yfy5kkdfbp] { display: flex; }
    /* Das Feld fuellt die ganze Pille, nicht nur die 26 px Texthoehe; das Kreuz wird
       daumengross und ragt dafuer in den Innenabstand (#1955). */
    .tkb-such input[b-yfy5kkdfbp] { align-self: stretch; }
    .tkb-such__x[b-yfy5kkdfbp] { width: 44px; height: 44px; margin-right: -10px; }

    /* Seit die Datumswahl entfaellt (#1179) teilen sich nur noch zwei Knoepfe die Leiste.
       Der Buchen-Knopf nimmt den frei gewordenen Platz — groessere Trefferflaeche fuer die
       Aktion, um derentwillen die Seite ueberhaupt offen ist. */
    .tkb-act--book[b-yfy5kkdfbp] { flex: 1 1 auto; justify-content: center; }
}

/* Warenwert neben dem Titel (nur Admins). Grundzustand ist AUS: die Zeile steht in
   .ph-title-actions, das nicht schrumpft — sichtbar verdraengt sie auf dem Telefon den
   Seitentitel (#2189). Erst ab der Shell-Kante von 960 px ist Platz dafuer. */
.tkb-wert[b-yfy5kkdfbp] { display: none; }

/* Rechner: das Feld steht immer offen, der Platz ist da. Dann braucht es die Lupe nicht. */
@media (min-width: 960px) {
    .tkb-lupe[b-yfy5kkdfbp] { display: none; }
    .tkb-such[b-yfy5kkdfbp] { max-width: 320px; }

    .tkb-wert[b-yfy5kkdfbp] {
        display: flex;
        align-items: baseline;
        gap: 4px 7px;
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        color: var(--text-subtle);
        white-space: nowrap;
    }

    .tkb-wert b[b-yfy5kkdfbp] {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: var(--text-base);
        color: var(--text-body);
        font-variant-numeric: tabular-nums;
    }

    .tkb-wert__sep[b-yfy5kkdfbp] { color: var(--border-strong); }
    .tkb-wert em[b-yfy5kkdfbp] { font-style: normal; color: var(--warning-600); }
}

/* ── Reiter Kartons | Unverpackt ─────────────────────────────────────────────
   Form der DS-Komponente navigation/Tabs, Variante pill (wie KonditorView), 44 px hoch,
   weil mit dem Finger bedient. Mobil ueber die volle Breite, am Rechner so breit wie noetig. */
.tkb-reiter[b-yfy5kkdfbp] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

.tkb-reiter__knopf[b-yfy5kkdfbp] {
    flex: 1 1 0;
    min-height: 44px;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-muted);
    white-space: nowrap;
}

.tkb-reiter__knopf:hover[b-yfy5kkdfbp] { color: var(--text-strong); }

.tkb-reiter__knopf.aktiv[b-yfy5kkdfbp] {
    background: var(--surface-card);
    color: var(--brand-strong);
    box-shadow: var(--shadow-xs);
}

.tkb-reiter__knopf:focus-visible[b-yfy5kkdfbp] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.tkb-reiter__zahl[b-yfy5kkdfbp] {
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-subtle);
    background: var(--surface-card);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
}

.tkb-reiter__knopf.aktiv .tkb-reiter__zahl[b-yfy5kkdfbp] {
    background: var(--brand-wash);
    color: var(--brand-strong);
}

.tkb-reiter__punkt[b-yfy5kkdfbp] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--brand);
}

@media (min-width: 960px) {
    .tkb-reiter[b-yfy5kkdfbp] { display: inline-flex; }
    .tkb-reiter__knopf[b-yfy5kkdfbp] { flex: none; }
}

/* ── Artikel-Karten ─────────────────────────────────────────────────────── */
.tkb-grid[b-yfy5kkdfbp] { display: grid; grid-template-columns: 1fr; gap: 10px; }

@media (min-width: 640px) {
    .tkb-grid[b-yfy5kkdfbp] { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
}

.tkb-card[b-yfy5kkdfbp] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 13px 14px 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s var(--lh-ease), box-shadow .15s var(--lh-ease), background .15s var(--lh-ease);
}

.tkb-card.act[b-yfy5kkdfbp] {
    border-color: var(--brand-soft);
    background: var(--brand-wash);
    box-shadow: 0 4px 14px rgba(58, 125, 140, .13);
}

.tkb-card.err[b-yfy5kkdfbp] {
    border-color: var(--danger-600);
    background: var(--danger-100);
}

.tkb-card.muted[b-yfy5kkdfbp] {
    background: var(--sand-100);
    box-shadow: none;
}

.tkb-card__top[b-yfy5kkdfbp] { display: flex; align-items: center; gap: 9px; }

.tkb-dot[b-yfy5kkdfbp] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--warning-600);
}

.tkb-nm[b-yfy5kkdfbp] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tkb-lot[b-yfy5kkdfbp] {
    flex: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-subtle);
    background: var(--sand-100);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.tkb-card.muted .tkb-lot[b-yfy5kkdfbp] { background: var(--white); }

.tkb-card__bot[b-yfy5kkdfbp] { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

.tkb-qty[b-yfy5kkdfbp] { flex: 1 1 auto; min-width: 0; }

.tkb-qty__big[b-yfy5kkdfbp] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.tkb-qty__big.low[b-yfy5kkdfbp] { color: var(--warning-600); }
.tkb-qty__u[b-yfy5kkdfbp] { font-size: var(--text-sm); font-weight: 600; color: var(--text-subtle); }

.tkb-qty__mm[b-yfy5kkdfbp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 5px;
    font-size: var(--text-xs);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.tkb-warn[b-yfy5kkdfbp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--warning-100);
    color: var(--warning-600);
    font-weight: 600;
}

/* Touch-freundlicher Stepper: 48 px Trefferflaeche. */
.tkb-step[b-yfy5kkdfbp] { flex: none; display: flex; align-items: center; gap: 6px; }

.tkb-step__btn[b-yfy5kkdfbp] {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 15px;
    border: 1.5px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    font-size: var(--text-xl);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s var(--lh-ease), transform .06s var(--lh-ease);
}

.tkb-step__btn:active[b-yfy5kkdfbp] { transform: scale(.92); background: var(--sand-100); }

.tkb-step__btn--plus[b-yfy5kkdfbp] {
    background: var(--brand);
    border-color: transparent;
    color: var(--text-on-brand);
    box-shadow: 0 4px 12px rgba(58, 125, 140, .24);
}

.tkb-step__btn--plus:active[b-yfy5kkdfbp] { background: var(--brand-strong); }
.tkb-step__btn:disabled[b-yfy5kkdfbp] { opacity: .45; cursor: default; }

.tkb-step__num[b-yfy5kkdfbp] {
    width: 56px;
    height: 48px;
    flex: none;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    color: var(--ink-300);
    border: 1.5px solid var(--border-default);
    border-radius: 14px;
    background: var(--white);
    -moz-appearance: textfield;
}

.tkb-step__num[b-yfy5kkdfbp]::-webkit-outer-spin-button,
.tkb-step__num[b-yfy5kkdfbp]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tkb-step__num:focus[b-yfy5kkdfbp] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
    color: var(--brand-strong);
}

.tkb-card.act .tkb-step__num[b-yfy5kkdfbp] { border-color: var(--brand); color: var(--brand-strong); }

.tkb-arrow[b-yfy5kkdfbp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--brand-soft);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-strong);
    font-variant-numeric: tabular-nums;
}

.tkb-arrow__d[b-yfy5kkdfbp] {
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--text-sm);
}

/* Faellt der Bestand DURCH die Buchung unter Min, ist das dieselbe Warnung wie oben. */
.tkb-arrow__hint[b-yfy5kkdfbp] {
    background: var(--warning-100);
    color: var(--warning-600);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.tkb-arrow.low[b-yfy5kkdfbp] { color: var(--warning-600); border-top-color: var(--warning-100); }
.tkb-arrow.low .tkb-arrow__d[b-yfy5kkdfbp] { background: var(--warning-100); color: var(--warning-600); }

.tkb-note[b-yfy5kkdfbp] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 11px;
    font-size: var(--text-sm);
    color: var(--text-subtle);
    line-height: 1.45;
}

.tkb-msg[b-yfy5kkdfbp] { padding: 48px 16px; text-align: center; color: var(--text-muted); }
.tkb-msg code[b-yfy5kkdfbp] { background: var(--sand-100); padding: 1px 5px; border-radius: 6px; }
/* /Backstube/Pages/TkEinrichtungSeite.razor.rz.scp.css */
/* TK-Einrichtung auf dem Design-System (#2067) — Tokens aus wwwroot/css/design-tokens.css.
   Amber ist Warnung/Pflegehinweis. Rot markiert Status, die eine Prüfung von Hand in der WaWi
   brauchen (StueckJePackUngueltig, EinzelartikelKeinLagerartikel), und fehlgeschlagene
   Schreibvorgänge (.tke-fehler). */

.tke[b-rwex8qa9yh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px 28px;
    font-family: var(--font-ui);
    color: var(--text-body);
}

.tke-act[b-rwex8qa9yh] {
    flex: none;
    height: 46px;
    padding: 0 15px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
}

.tke-act:hover:not(:disabled)[b-rwex8qa9yh] { background: var(--sand-100); }
.tke-act:disabled[b-rwex8qa9yh] { color: var(--text-subtle); cursor: default; }

.tke-zeile[b-rwex8qa9yh] {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 13px 14px 14px;
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.tke-kopf[b-rwex8qa9yh] { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }

.tke-name[b-rwex8qa9yh] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.tke-nr[b-rwex8qa9yh] { font-size: var(--text-sm); color: var(--text-subtle); }
.tke-status[b-rwex8qa9yh] { margin-left: auto; font-weight: 600; font-size: var(--text-sm); }

.tke-status-Eingerichtet[b-rwex8qa9yh] { color: var(--success-600); }
.tke-status-EinzelartikelFehlt[b-rwex8qa9yh] { color: var(--warning-600); }
.tke-status-StueckJePackUngueltig[b-rwex8qa9yh],
.tke-status-EinzelartikelKeinLagerartikel[b-rwex8qa9yh] { color: var(--danger-600); }

.tke-eingabe[b-rwex8qa9yh] {
    display: grid;
    grid-template-columns: 10rem 1fr 8rem;
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 640px) {
    .tke-eingabe[b-rwex8qa9yh] { grid-template-columns: 1fr; }
}

.tke-uebernahme[b-rwex8qa9yh] {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}

.tke-kandidaten-hinweis[b-rwex8qa9yh] {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-subtle);
    font-size: var(--text-sm);
}

.tke-anlegen[b-rwex8qa9yh],
.tke-jetzt-anlegen[b-rwex8qa9yh],
.tke-abbrechen[b-rwex8qa9yh],
.tke-verknuepfen[b-rwex8qa9yh] {
    height: 44px;
    padding: 0 16px;
    margin-top: 10px;
    margin-right: 8px;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
}

.tke-anlegen:hover:not(:disabled)[b-rwex8qa9yh],
.tke-jetzt-anlegen:hover:not(:disabled)[b-rwex8qa9yh],
.tke-verknuepfen:hover:not(:disabled)[b-rwex8qa9yh] { background: var(--brand-strong); }

.tke-abbrechen[b-rwex8qa9yh] {
    background: var(--white);
    color: var(--text-body);
    border: 1.5px solid var(--border-default);
}

.tke-abbrechen:hover:not(:disabled)[b-rwex8qa9yh] { background: var(--sand-100); }

.tke-anlegen:disabled[b-rwex8qa9yh],
.tke-jetzt-anlegen:disabled[b-rwex8qa9yh],
.tke-abbrechen:disabled[b-rwex8qa9yh],
.tke-verknuepfen:disabled[b-rwex8qa9yh] {
    background: var(--sand-200);
    color: var(--text-subtle);
    border-color: transparent;
    cursor: default;
}

.tke-bestaetigen[b-rwex8qa9yh],
.tke-fehler[b-rwex8qa9yh],
.tke-hinweis[b-rwex8qa9yh] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: var(--text-sm);
}

.tke-bestaetigen ul[b-rwex8qa9yh] { margin: 6px 0; padding-left: 18px; }

.tke-fehler[b-rwex8qa9yh] { background: var(--danger-100); color: var(--danger-600); }

.tke-hinweis-zeile[b-rwex8qa9yh] {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--warning-100);
    color: var(--warning-600);
    font-size: var(--text-sm);
}
/* /Backstube/Pages/TkPrognose.razor.rz.scp.css */
/* TK-Prognose auf dem Design-System (#1177) — dieselben Tokens und dieselben Farbregeln
   wie TkBestand.razor.css: Teal fuer Aktives/Empfehlungen, Amber fuer Warnungen, Rot
   bleibt echten Fehlern. Die frueher hier UND dort wortgleich stehende Palette
   (--ink/--soft/--line/--bg/--teal/--rec/--low, 'Inter') ist ersatzlos weg.

   Aufbau: eine Zeilen-Struktur fuer beide Groessen. Auf dem Telefon fallen die
   Zahlenspalten weg (.tkp-wide) und jede Zeile wird zur Karte; ab 640 px stehen sie
   wieder als Tabelle mit Kopfzeile — der Zeilenvergleich ist dort der Zweck. */

.tkp[b-n5semi6wg6] {
    padding: 4px 16px 28px;
    font-family: var(--font-ui);
    color: var(--text-body);
}

@media (min-width: 960px) {
    .tkp[b-n5semi6wg6] { padding: 16px 24px 28px; }
}

.tkp b[b-n5semi6wg6] { font-variant-numeric: tabular-nums; }

/* ── Aktion in der Topbar (mobil: unten am Daumen) ──────────────────────── */
.tkp-act[b-n5semi6wg6] {
    flex: none;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border-default);
    background: var(--white);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
}

.tkp-act:hover:not(:disabled)[b-n5semi6wg6] { background: var(--sand-100); }
.tkp-act:disabled[b-n5semi6wg6] { opacity: .55; cursor: default; }
.tkp-act__i[b-n5semi6wg6] { display: inline-flex; }
.tkp-act__i.spin[b-n5semi6wg6] { animation: tkp-spin-b-n5semi6wg6 .9s linear infinite; }
@keyframes tkp-spin-b-n5semi6wg6 { to { transform: rotate(360deg); } }

/* Verweis und Warenwert teilen sich eine Zeile — auf breiten Schirmen nebeneinander,
   auf dem Telefon untereinander, ohne dass eine davon eine eigene Zeile beansprucht. */
.tkp-kopf[b-n5semi6wg6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 12px;
}

.tkp-xlink[b-n5semi6wg6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--brand-strong);
    text-decoration: none;
}

.tkp-xlink:hover[b-n5semi6wg6] { color: var(--brand); text-decoration: underline; }

/* Trefferflaeche am Telefon (#1955): 22 px Texthoehe ist mit dem Daumen kaum zu treffen. */
@media (max-width: 959.98px) {
    .tkp-xlink[b-n5semi6wg6] { min-height: 44px; }
}

/* ── Zeilen ─────────────────────────────────────────────────────────────── */
.tkp-list[b-n5semi6wg6] { display: flex; flex-direction: column; gap: 8px; }

.tkp-rowgrid[b-n5semi6wg6] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 11px 14px;
}

.tkp-c-name[b-n5semi6wg6] { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; }
.tkp-c[b-n5semi6wg6] { flex: none; width: 46px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkp-c-rec[b-n5semi6wg6] { width: auto; min-width: 92px; text-align: right; }
.tkp-c-chev[b-n5semi6wg6] { flex: none; width: 14px; text-align: center; color: var(--text-subtle); font-size: var(--text-2xs); transition: transform .15s var(--lh-ease); }

.tkp-head[b-n5semi6wg6] {
    display: none;
    padding: 4px 14px 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.tkp-item[b-n5semi6wg6] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
}

.tkp-item.is-open[b-n5semi6wg6] { border-color: var(--brand-soft); box-shadow: var(--shadow-md); }

.tkp-row[b-n5semi6wg6] { background: none; border: none; cursor: pointer; font: inherit; color: inherit; min-height: 52px; }
.tkp-row:hover[b-n5semi6wg6] { background: var(--brand-wash); }
.tkp-item.is-open .tkp-c-chev[b-n5semi6wg6] { transform: rotate(180deg); }

.tkp-dot[b-n5semi6wg6] { flex: none; width: 9px; height: 9px; border-radius: 999px; background: transparent; }

/* Ampel: amber = es fehlt etwas bis Ende naechster Woche, rot = der Bestand deckt die
   eingetragenen Bestellungen dieser Woche nicht. Rot ist hier die DRINGLICHKEIT, nicht ein Fehlschlag — die Regel aus
   #1177 ("Rot bleibt fehlgeschlagenen Buchungen vorbehalten") gilt der BUCHUNG auf der
   Bestandsseite; diese Seite bucht nicht. Zwei Stufen brauchen zwei Farben, sonst
   verschmilzt "muss heute in den Ofen" mit "diese Woche einplanen". */
.tkp-item.is-amber .tkp-dot[b-n5semi6wg6] { background: var(--warning-600); }
.tkp-item.is-rot .tkp-dot[b-n5semi6wg6] { background: var(--danger-600); }

.tkp-nm[b-n5semi6wg6] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tkp-unit[b-n5semi6wg6] {
    flex: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-subtle);
    background: var(--sand-100);
    border-radius: 999px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Packbar aus unverpackter Ware: Deckung, also Teal (keine Warnung). Steht neben dem
   Namen und nicht im Ist — das Ist bleibt die zaehlbare Zahl. */
.tkp-packbar[b-n5semi6wg6] {
    flex: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-strong);
    background: var(--brand-wash);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.tkp-ist[b-n5semi6wg6] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.tkp-item.is-amber .tkp-ist[b-n5semi6wg6] { color: var(--warning-600); }
.tkp-item.is-rot .tkp-ist[b-n5semi6wg6] { color: var(--danger-600); }


.tkp-rec[b-n5semi6wg6] {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 11px;
    background: var(--brand-wash);
    color: var(--brand-strong);
    white-space: nowrap;
}

.tkp-rec.none[b-n5semi6wg6] { background: var(--sand-100); color: var(--text-subtle); }


/* ── Aufgeklapptes Detail ───────────────────────────────────────────────── */
.tkp-detail[b-n5semi6wg6] { padding: 0 14px 14px; }

/* Drei Spalten schon auf dem Telefon: die Werte sind Zahlen, die Kacheln waeren
   sonst breit und der Block sieben Zeilen hoch. */
.tkp-mini[b-n5semi6wg6] {
    display: grid;
    /* Zwei Spalten am Telefon: in dreien bricht "1,25 geschätzt" mitten in der Angabe um. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

@media (min-width: 560px) { .tkp-mini[b-n5semi6wg6] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tkp-mini span[b-n5semi6wg6] { background: var(--sand-100); border-radius: 11px; padding: 7px 9px; min-width: 0; }

.tkp-mini i[b-n5semi6wg6] {
    display: block;
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.tkp-mini b[b-n5semi6wg6] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* Die Zahl, die nicht in die Empfehlung geht. */
.tkp-mini b.tkp-neben[b-n5semi6wg6] { font-weight: 400; color: var(--text-subtle); }

.tkp-mini-rec[b-n5semi6wg6] { grid-column: 1 / -1; background: var(--brand-wash); }
.tkp-mini-rec b[b-n5semi6wg6] { color: var(--brand-strong); }

/* Hinweise sind sichtbarer Text, kein title-Attribut: auf dem Telefon gibt es
   kein Hover, ein nacktes Warndreieck waere dort ohne jede Erklaerung. */
.tkp-note[b-n5semi6wg6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 11px;
    padding: 9px 11px;
    border-radius: 12px;
    background: var(--sand-100);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.45;
}

.tkp-note.warn[b-n5semi6wg6] { background: var(--warning-100); color: var(--warning-600); }

.tkp-msg[b-n5semi6wg6] { padding: 48px 16px; text-align: center; color: var(--text-muted); }
.tkp-msg code[b-n5semi6wg6] { background: var(--sand-100); padding: 1px 5px; border-radius: 6px; }

/* Telefon: die Zahlenspalten fallen weg. Ab 640 px wieder Tabelle samt Kopfzeile.

   Die REICHWEITE traegt dieses .tkp-wide bewusst NICHT: sie ist die Hauptaussage
   der Seite und der Sortierschluessel. Verschwindet sie mobil, bleibt eine nach
   einer unsichtbaren Groesse sortierte Liste stehen — man sieht die Reihenfolge
   und nicht ihren Grund. */
.tkp-wide[b-n5semi6wg6] { display: none; }

/* Der Artikelname darf umbrechen, statt hinter der Ampel zu Ellipsen zu werden:
   auf 390 px blieben ihm neben Ampel, Ist und Empfehlungs-Pille rund 50 px
   ("Saa…"). Zeilen werden dadurch nur dann zweizeilig, wenn es eng wird. */
@media (max-width: 639.98px) {
    .tkp-c-name[b-n5semi6wg6] { flex-wrap: wrap; row-gap: 4px; }
    .tkp-nm[b-n5semi6wg6] { white-space: normal; overflow: visible; }
}

/* Die einzige Aktion der Seite fuellt mobil die Leiste — sonst klebte ein halb so
   breiter Knopf am linken Rand und der Rest der Leiste waere leer (#1179). */
@media (max-width: 959.98px) {
    .tkp-act[b-n5semi6wg6] { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 640px) {
    .tkp-wide[b-n5semi6wg6] { display: block; }
    .tkp-head[b-n5semi6wg6] { display: flex; }
    .tkp-list[b-n5semi6wg6] { gap: 8px; }
}
/* /Backstube/Pages/TkPrognose2.razor.rz.scp.css */
/* Reiter in der Form des TK-Bestands (DS-Komponente navigation/Tabs, Variante pill). */
.tkp2-reiter[b-3lnlytbjpv] {
    display: flex;
    gap: 4px;
    margin: 12px 16px 0;
    padding: 4px;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

.tkp2-reiter__knopf[b-3lnlytbjpv] {
    flex: 1 1 0;
    min-height: 44px;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-body);
}

.tkp2-reiter__knopf:hover[b-3lnlytbjpv] { color: var(--text-strong); }

.tkp2-reiter__knopf.aktiv[b-3lnlytbjpv] {
    background: var(--surface-card);
    color: var(--brand-strong);
    box-shadow: var(--shadow-xs);
}

.tkp2-reiter__knopf:focus-visible[b-3lnlytbjpv] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.tkp2-reiter__zahl[b-3lnlytbjpv] {
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-subtle);
    background: var(--surface-card);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
}

.tkp2-reiter__knopf.aktiv .tkp2-reiter__zahl[b-3lnlytbjpv] {
    background: var(--brand-wash);
    color: var(--brand-strong);
}

.tkp2-inhalt[b-3lnlytbjpv] {
    padding: 12px 16px 28px;
    font-family: var(--font-ui);
    color: var(--text-body);
}

.tkp2-msg[b-3lnlytbjpv] { padding: 24px 4px; color: var(--text-subtle); }

/* Eigene <table> statt MudTable: dichte Zahlen in der UI-Schrift, CSS-Isolation greift direkt. */
.tkp2-tab[b-3lnlytbjpv] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    font-size: var(--text-base);
}

.tkp2-tab th[b-3lnlytbjpv],
.tkp2-tab td[b-3lnlytbjpv] { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }

.tkp2-tab th:first-child[b-3lnlytbjpv],
.tkp2-tab td:first-child[b-3lnlytbjpv] { padding-left: 14px; }

.tkp2-tab th:last-child[b-3lnlytbjpv],
.tkp2-tab td:last-child[b-3lnlytbjpv] { padding-right: 14px; }

.tkp2-tab tbody tr:last-child td[b-3lnlytbjpv] { border-bottom: none; }

.tkp2-tab th[b-3lnlytbjpv] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
}

.tkp2-tab td[b-3lnlytbjpv] { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }

.tkp2-tab .tkp2-zahl[b-3lnlytbjpv] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tkp2-best tfoot td[b-3lnlytbjpv] { border-top: 1px solid var(--border-soft); border-bottom: none; background: var(--brand-wash); color: var(--brand-strong); }

/* ── Bestellt nach Liefertag ────────────────────────────────────────────── */
.tkp2-kopfz[b-3lnlytbjpv] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 10px; }
.tkp2-leg[b-3lnlytbjpv] { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-xs); color: var(--text-muted); }

/* Umschalter Kartons | Stueck: kleiner als die Reiter, er aendert nur die Einheit der Zahlen. */
.tkp2-um[b-3lnlytbjpv] { flex: none; display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-sunken); border-radius: var(--radius-pill); }

.tkp2-um__knopf[b-3lnlytbjpv] {
    appearance: none;
    border: none;
    background: none;
    min-height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
}

.tkp2-um__knopf.aktiv[b-3lnlytbjpv] { background: var(--surface-card); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
.tkp2-um__knopf:focus-visible[b-3lnlytbjpv] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

@media (pointer: coarse) {
    .tkp2-um__knopf[b-3lnlytbjpv] { min-height: 44px; }
}
.tkp2-leg span[b-3lnlytbjpv] { display: inline-flex; align-items: center; gap: 6px; }
.tkp2-leg i[b-3lnlytbjpv] { width: 9px; height: 9px; border-radius: 999px; }
.tkp2-leg i.ok[b-3lnlytbjpv] { background: var(--success-600); }
.tkp2-leg i.fehlt[b-3lnlytbjpv] { background: var(--danger-600); }

/* Tageszahl bzw. Marke: die Farbe traegt den Zustand, der Text sagt ihn zusaetzlich. */
.tkp2-tg[b-3lnlytbjpv] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tkp2-tg small[b-3lnlytbjpv] { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; opacity: .8; }
.tkp2-tg.ok[b-3lnlytbjpv] { background: var(--success-100); color: var(--success-600); }
.tkp2-tg.fehlt[b-3lnlytbjpv] { background: var(--danger-100); color: var(--danger-600); }
.tkp2-tg.aus[b-3lnlytbjpv] { background: var(--surface-sunken); color: var(--text-subtle); }

.tkp2-tab .tkp2-tagk[b-3lnlytbjpv],
.tkp2-tab .tkp2-tagz[b-3lnlytbjpv] { text-align: center; }

.tkp2-tab td.tkp2-leise[b-3lnlytbjpv] { font-weight: 400; color: var(--text-muted); }

.tkp2-summe[b-3lnlytbjpv] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.tkp2-tage[b-3lnlytbjpv] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tkp2-detail .tkp2-fehlt[b-3lnlytbjpv] { color: var(--danger-600); }

/* Am Telefon stehen Bestand, Tage und Menge nur in der aufgeklappten Zeile. */
.tkp2-tab .tkp2-breit[b-3lnlytbjpv] { display: none; }

/* ── Prognose-Tabelle ───────────────────────────────────────────────────── */
.tkp2-zeile[b-3lnlytbjpv] { cursor: pointer; }
.tkp2-zeile:hover td[b-3lnlytbjpv] { background: var(--brand-wash); }

.tkp2-name[b-3lnlytbjpv] {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 24px;
}

.tkp2-name:focus-visible[b-3lnlytbjpv] { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

.tkp2-dot[b-3lnlytbjpv] { flex: none; width: 9px; height: 9px; border-radius: 999px; background: transparent; transform: translateY(-1px); }
.ist-amber .tkp2-dot[b-3lnlytbjpv] { background: var(--warning-600); }
.ist-rot .tkp2-dot[b-3lnlytbjpv] { background: var(--danger-600); }

.tkp2-rec[b-3lnlytbjpv] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-size: var(--text-sm);
}

.tkp2-kein[b-3lnlytbjpv] { color: var(--text-subtle); font-weight: 400; }

.tkp2-warn[b-3lnlytbjpv] { display: inline-flex; align-self: center; color: var(--warning-600); }

.tkp2-detail td[b-3lnlytbjpv] { background: var(--sand-100); font-family: var(--font-ui); font-weight: 400; color: var(--text-body); padding: 10px 14px 12px; }

.tkp2-detail dl[b-3lnlytbjpv] { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.tkp2-detail dt[b-3lnlytbjpv] { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); align-self: center; }
.tkp2-detail dd[b-3lnlytbjpv] { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tkp2-detail .tkp2-neben[b-3lnlytbjpv] { font-weight: 400; color: var(--text-subtle); }
.tkp2-detail .tkp2-empf[b-3lnlytbjpv] { color: var(--brand-strong); }

.tkp2-hinweis[b-3lnlytbjpv] { margin: 8px 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.tkp2-hinweis.warn[b-3lnlytbjpv] { color: var(--warning-600); font-weight: 600; }

@media (min-width: 960px) {
    .tkp2-reiter[b-3lnlytbjpv] { display: inline-flex; margin: 16px 28px 0; }
    .tkp2-reiter__knopf[b-3lnlytbjpv] { flex: none; }
    .tkp2-inhalt[b-3lnlytbjpv] { padding: 16px 28px 18px; max-width: 980px; }
    .tkp2-tab th[b-3lnlytbjpv],
    .tkp2-tab td[b-3lnlytbjpv] { padding: 10px 14px; }
    .tkp2-tab .tkp2-breit[b-3lnlytbjpv] { display: table-cell; }
    /* Am Rechner steht alles in der Zeile; nur die Aufteilung der Fehlmenge kommt dazu. */
    .tkp2-bdetail .tkp2-tage[b-3lnlytbjpv] { display: none; }
}
/* /Backstube/Pages/TkPrognose3.razor.rz.scp.css */
.tkp3[b-2ak7uguks1] {
    padding: 8px 16px 28px;
    font-family: var(--font-ui);
    color: var(--text-body);
}

.tkp3-intro[b-2ak7uguks1] { margin: 4px 4px 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }

.tkp3-msg[b-2ak7uguks1] { padding: 14px 4px; color: var(--text-subtle); font-size: var(--text-sm); }

.tkp3-kopf[b-2ak7uguks1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 18px 4px 8px;
}

.tkp3-titel[b-2ak7uguks1] { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 600; color: var(--text-strong); }

.tkp3-nr[b-2ak7uguks1] {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    background: var(--text-strong);
    color: var(--surface-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
}

.tkp3-summe[b-2ak7uguks1] { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Eigene <table> statt MudTable: dichte Zeilen in der UI-Schrift, CSS-Isolation greift direkt. */
.tkp3-tab[b-2ak7uguks1] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
}

.tkp3-tab td[b-2ak7uguks1] { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.tkp3-tab tr:last-child td[b-2ak7uguks1] { border-bottom: none; }

.tkp3-tab td b[b-2ak7uguks1] { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); overflow-wrap: break-word; }
.tkp3-tab td span[b-2ak7uguks1] { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.tkp3-tab .tkp3-zahl[b-2ak7uguks1] { text-align: right; white-space: nowrap; width: 1%; }

.tkp3-tab .tkp3-menge[b-2ak7uguks1] {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--brand-wash);
    color: var(--brand-strong);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
}

/* Abschnitt 1 ist Dringlichkeit, kein Fehlschlag — dieselbe Lesart wie die rote Ampel der Prognose. */
.tkp3-muss .tkp3-menge[b-2ak7uguks1] { background: var(--danger-100); color: var(--danger-600); }

/* Die Rangliste ist Auskunft, keine Aufgabe: Menge ohne Farbe. */
.tkp3-rang .tkp3-menge[b-2ak7uguks1] { background: var(--surface-sunken); color: var(--text-strong); }
.tkp3-tab .tkp3-platz[b-2ak7uguks1] { width: 1%; padding-right: 0; text-align: right; color: var(--text-subtle); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.tkp3-gedeckt[b-2ak7uguks1], .tkp3-quelle[b-2ak7uguks1] { margin: 14px 4px 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }

@media (min-width: 960px) {
    .tkp3[b-2ak7uguks1] { padding: 12px 28px 18px; max-width: 760px; }
}
/* /Buchhaltung/Pages/BelegUmbuchen.razor.rz.scp.css */
/* Vorschau einer Umbuchung unter der Belegzeile. Banner und Knöpfe kommen aus finanz-components.css. */

.bu[b-bpehefgl3f] { display: grid; gap: 10px; padding: 10px 0 4px; max-width: 720px; white-space: normal; }

.bu-titel[b-bpehefgl3f] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }

.bu-plan[b-bpehefgl3f] {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    row-gap: 4px;
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}

.bu-plan dt[b-bpehefgl3f] { color: var(--text-subtle); }
.bu-plan dd[b-bpehefgl3f] { margin: 0; font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums; }

.bu-text[b-bpehefgl3f] { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); overflow-wrap: anywhere; }

.bu-hinweis[b-bpehefgl3f] { margin: 0; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }

.bu-aktionen[b-bpehefgl3f] { display: flex; flex-wrap: wrap; gap: 10px; }
/* /Buchhaltung/Pages/Index.razor.rz.scp.css */
.pw[b-q91706w3mo] { --ink:#23201d; --soft:#7b7066; --line:#e7e2d8; --bg:#faf8f3; --teal:#3f7d79; --teal-d:#2f6460;
    --warn:#b85c1a; --err:#a8351f; --ok:#2f7a4a; --info:#3f6d8f; --up:#b85c1a; --down:#2f7a4a;
    font-family:'Inter',system-ui,sans-serif; color:var(--ink); font-size:14px; }

.pw-top[b-q91706w3mo] { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 2px 16px; }

.pw-msg[b-q91706w3mo] { padding:40px 16px; text-align:center; color:var(--soft); }

.pw-table[b-q91706w3mo] { width:100%; border-collapse:collapse; font-size:.9rem; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.pw-table th[b-q91706w3mo] { text-align:left; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em;
    color:var(--soft); padding:9px 14px; border-bottom:1px solid var(--line); background:var(--bg); }
.pw-table td[b-q91706w3mo] { padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.pw-table tbody tr:last-child td[b-q91706w3mo] { border-bottom:none; }

.pw-row--clickable[b-q91706w3mo] { cursor:pointer; }
.pw-row--clickable:hover[b-q91706w3mo] { background:var(--bg); }

.pw-actions[b-q91706w3mo] { white-space:nowrap; text-align:right; }
.pw-toggle[b-q91706w3mo] { display:inline-block; width:24px; text-align:center; color:var(--soft); }

.pw-badge[b-q91706w3mo] { display:inline-block; font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px;
    white-space:nowrap; background:#eef4f3; color:var(--teal-d); border:1px solid #dcebe9; margin-right:6px; }
.pw-badge--warn[b-q91706w3mo] { background:#f6e6d6; color:var(--warn); border-color:#eed3b3; }
.pw-badge--fehlgeschlagen[b-q91706w3mo] { background:#fbe3e0; color:var(--err); border-color:#f3c3bd; }
.pw-badge--nichtgeschrieben[b-q91706w3mo] { background:#f1efe9; color:var(--soft); border-color:var(--line); }
.pw-badge--success[b-q91706w3mo], .pw-badge--geschrieben[b-q91706w3mo] { background:#e2f0e6; color:var(--ok); border-color:#c9e3d0; }
.pw-badge--info[b-q91706w3mo] { background:#e5eef5; color:var(--info); border-color:#cddfec; }

.pw-delta-up[b-q91706w3mo] { color:var(--up); font-weight:600; }
.pw-delta-down[b-q91706w3mo] { color:var(--down); font-weight:600; }

.pw-mini[b-q91706w3mo] { padding:4px 10px; border:1px solid var(--line); background:#fff; color:var(--soft); font:inherit;
    font-size:.75rem; font-weight:600; border-radius:7px; cursor:pointer; margin-right:4px; }
.pw-mini--ok[b-q91706w3mo] { border-color:var(--teal); color:var(--teal-d); }
.pw-class[b-q91706w3mo] { font-size:.8rem; color:var(--soft); margin-right:8px; }
.pw-detail-head[b-q91706w3mo] { margin-bottom:8px; }
.pw-pdf[b-q91706w3mo] { font-size:.85rem; color:var(--teal-d); text-decoration:none; border:1px solid #dcebe9; background:#eef4f3;
    padding:4px 10px; border-radius:4px; }
.pw-pdf:hover[b-q91706w3mo] { text-decoration:underline; }
.pw-top-actions[b-q91706w3mo] { display:flex; align-items:center; gap:16px; }
.pw-filters[b-q91706w3mo] { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.pw-filter[b-q91706w3mo] { padding:5px 12px; border:1px solid var(--line); background:#fff; color:var(--soft); font:inherit;
    font-size:.8rem; border-radius:14px; cursor:pointer; }
.pw-filter--active[b-q91706w3mo] { background:var(--teal-d); color:#fff; border-color:var(--teal-d); }
.pw-mini:active[b-q91706w3mo] { background:var(--bg); }

.pw-detail-row td[b-q91706w3mo] { background:var(--bg); padding:12px 14px 16px; }

.pw-obs-table[b-q91706w3mo] { width:100%; border-collapse:collapse; font-size:.85rem; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pw-obs-table th[b-q91706w3mo] { text-align:left; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;
    color:var(--soft); padding:8px 12px; border-bottom:1px solid var(--line); }
.pw-obs-table th.num[b-q91706w3mo], .pw-obs-table td.num[b-q91706w3mo] { text-align:right; }
.pw-obs-table td[b-q91706w3mo] { padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; font-variant-numeric:tabular-nums; }
.pw-obs-table tbody tr:last-child td[b-q91706w3mo] { border-bottom:none; }

.pw-select[b-q91706w3mo] { width:100%; max-width:240px; padding:6px 8px; font:inherit; font-size:.85rem; color:var(--ink);
    border:1px solid var(--line); border-radius:8px; background:#fff; }
.pw-select:disabled[b-q91706w3mo] { opacity:.55; }

.pw-apply[b-q91706w3mo] { padding:6px 12px; border:none; background:var(--teal-d); color:#fff; font:inherit; font-size:.8rem;
    font-weight:600; border-radius:8px; cursor:pointer; white-space:nowrap; }
.pw-apply:disabled[b-q91706w3mo] { background:#cdbfaf; opacity:.6; cursor:default; }
/* /Buchhaltung/Pages/InkassoDialog.razor.rz.scp.css */
.text[b-5vbu1s570v] { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--text-body); }
.notiz[b-5vbu1s570v] { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.notiz textarea[b-5vbu1s570v] { resize: vertical; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--text-body); background: var(--surface-card); }
/* /Buchhaltung/Pages/KreditorAnlegen.razor.rz.scp.css */
/* Vorschau in der aufgeklappten Tabellenzeile. Banner und Knöpfe kommen aus finanz-components.css. */

.ka[b-o6ngp67eb8] { display: grid; gap: 12px; padding: 14px 4px 6px; max-width: 720px; white-space: normal; }

.ka-titel[b-o6ngp67eb8] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }

.ka-felder[b-o6ngp67eb8] { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: end; }

.ka-feld[b-o6ngp67eb8] { display: grid; gap: 4px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

.ka-eingabe[b-o6ngp67eb8] {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-strong);
    width: min(420px, 78vw);
    padding: 7px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.ka-eingabe:focus-visible[b-o6ngp67eb8] { outline: 2px solid var(--brand); outline-offset: 2px; }

.ka-nr[b-o6ngp67eb8] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--brand-strong); padding: 6px 0; }

.ka-hinweis[b-o6ngp67eb8] { margin: 0; font-family: var(--font-body); font-size: var(--text-2xs); color: var(--text-subtle); line-height: 1.4; }

.ka-aktionen[b-o6ngp67eb8] { display: flex; flex-wrap: wrap; gap: 10px; }

@media (pointer: coarse) {
    .ka-eingabe[b-o6ngp67eb8] { min-height: 44px; }
}
/* /Buchhaltung/Pages/OffeneUmbuchungen.razor.rz.scp.css */
/* Offene Umbuchungen über der Händlertabelle. Banner und Knöpfe kommen aus finanz-components.css. */

/* flex: none, weil die Karte eine Flex-Spalte ist und am Rechner nur die Tabelle darunter scrollen soll. */
.ou[b-6fah0vzfri] { flex: none; display: grid; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }

.ou-titel[b-6fah0vzfri] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--warning-600); }

.ou-eintrag[b-6fah0vzfri] { display: grid; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--border-soft); max-width: 980px; }

/* Die Knöpfe stehen in einer eigenen Hülle, damit ein langer Name umbricht statt sie hinauszuschieben. */
.ou-kopf[b-6fah0vzfri] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 96px 132px auto;
    gap: 12px;
    align-items: center;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.ou-nr[b-6fah0vzfri] { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.ou-name[b-6fah0vzfri] { overflow-wrap: anywhere; }
.ou-betrag[b-6fah0vzfri] { text-align: right; }
.ou-weg[b-6fah0vzfri] { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.ou-knoepfe[b-6fah0vzfri] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.ou-stand[b-6fah0vzfri] { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); line-height: 1.4; }
.ou-stand strong[b-6fah0vzfri] { font-weight: 600; color: var(--danger-600); }

.ou-leise[b-6fah0vzfri] { margin: 0; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }

.ou-gefunden[b-6fah0vzfri] {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.ou-gefunden li[b-6fah0vzfri] { display: grid; grid-template-columns: 84px 92px 110px 110px 96px; gap: 12px; }

@media (max-width: 720px) {
    .ou-kopf[b-6fah0vzfri] { grid-template-columns: minmax(0, 1fr) 96px; }
    .ou-weg[b-6fah0vzfri], .ou-knoepfe[b-6fah0vzfri] { grid-column: 1 / -1; justify-content: flex-start; }
    .ou-gefunden li[b-6fah0vzfri] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Buchhaltung/Pages/PaketKennzeichen.razor.rz.scp.css */
.paket[b-sxq9am2vao] { white-space: nowrap; }
/* /Buchhaltung/Pages/SammelkreditorAbschnitt.razor.rz.scp.css */
/* Nur was diesem Abschnitt eigen ist. Karte, Tabelle, Banner und Mini-Knopf stehen
   geteilt in wwwroot/css/finanz-components.css.
   Der frühere eigene Farbsatz (--ink/--soft/--line/--teal …) ist ersatzlos gelöscht. */

.sk-name[b-m44lc63ndg] { white-space: normal; line-height: 1.35; }

/* Die Hinweiszeile „vermutlich schon angelegt“ ist ein Hinweis, kein Urteil: der
   Namensabgleich ignoriert die Rechtsform, „Müller GmbH“ und „Müller AG“ sind dort
   gleich. Deshalb bleibt die Zeile vollständig bedienbar. */
.sk-name .unter[b-m44lc63ndg] {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    color: var(--text-subtle);
    white-space: normal;
}

.sk-vorhanden td[b-m44lc63ndg] { background: var(--surface-page); }

.sk-kz[b-m44lc63ndg] {
    margin-left: 8px;
    border-radius: 999px;
    padding: 1px 8px;
    background: var(--surface-sunken);
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
}

.sk-select[b-m44lc63ndg] {
    font: inherit;
    font-weight: 600;
    color: var(--text-strong);
    padding: 3px 6px;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background: var(--surface-card);
    cursor: pointer;
}

.sk-select:focus-visible[b-m44lc63ndg] { outline: 2px solid var(--brand); outline-offset: 2px; }

.sk-nr[b-m44lc63ndg] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--brand-strong); }
.sk .leise[b-m44lc63ndg] { color: var(--text-subtle); font-size: var(--text-xs); white-space: normal; line-height: 1.35; }

/* Die Zeilen sind nicht auswählbar — kein Zeiger, der eine Detailkarte verspricht. */
.fz-tabelle td[b-m44lc63ndg] { cursor: default; }

.sk-nr-zelle[b-m44lc63ndg] { display: flex; align-items: center; gap: 10px; }

/* Vorschau und Belegliste gehören zur Zeile darüber: gleiche Fläche, keine eigene Trennlinie nach oben. */
.sk-anlegen td[b-m44lc63ndg], .sk-belege td[b-m44lc63ndg] { background: var(--surface-page); border-top: 0; }

/* Der Name ist der Knopf zum Aufklappen, soll aber wie der Name aussehen. */
.sk-auf[b-m44lc63ndg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}

.sk-auf[b-m44lc63ndg]  svg { flex: none; color: var(--text-subtle); }
.sk-auf:disabled[b-m44lc63ndg] { cursor: default; opacity: .6; }
.sk-auf:focus-visible[b-m44lc63ndg] { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

@media (pointer: coarse) {
    .sk-auf[b-m44lc63ndg] { min-height: 44px; }
}
/* /Buchhaltung/Pages/SammelkreditorBelege.razor.rz.scp.css */
/* Belege eines Händlers in der aufgeklappten Tabellenzeile. Banner und Knöpfe kommen aus finanz-components.css. */

.skb[b-vkm5z1yhb3] { display: grid; gap: 10px; padding: 12px 4px 8px; max-width: 980px; white-space: normal; cursor: default; }

.skb-ziel[b-vkm5z1yhb3] { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }

.skb-feld[b-vkm5z1yhb3] { display: grid; gap: 4px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

.skb-eingabe[b-vkm5z1yhb3] {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    width: 110px;
    padding: 7px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.skb-eingabe:focus-visible[b-vkm5z1yhb3] { outline: 2px solid var(--brand); outline-offset: 2px; }

.skb-zielname[b-vkm5z1yhb3] { padding: 8px 0; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.skb-zielname.fehlt[b-vkm5z1yhb3] { font-weight: 400; color: var(--warning-600); }

.skb-leise[b-vkm5z1yhb3] { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.skb-beleg[b-vkm5z1yhb3] { display: grid; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-soft); }

/* Die Knöpfe stehen in einer eigenen Hülle, damit ein langer Meldungstext umbricht statt sie hinauszuschieben. */
.skb-zeile[b-vkm5z1yhb3] {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 96px minmax(0, 2.2fr);
    gap: 12px;
    align-items: center;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.skb-nr[b-vkm5z1yhb3] { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.skb-betrag[b-vkm5z1yhb3] { text-align: right; }
.skb-stand[b-vkm5z1yhb3] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.skb-fertig[b-vkm5z1yhb3] { color: var(--brand-strong); font-weight: 600; }
.skb-offen[b-vkm5z1yhb3] { flex: 1 1 220px; min-width: 0; color: var(--warning-600); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }

@media (max-width: 720px) {
    .skb-zeile[b-vkm5z1yhb3] { grid-template-columns: 92px minmax(0, 1fr) 96px; }
    .skb-stand[b-vkm5z1yhb3] { grid-column: 1 / -1; }
}

@media (pointer: coarse) {
    .skb-eingabe[b-vkm5z1yhb3] { min-height: 44px; }
}
/* /Buchhaltung/Pages/StapelErinnernDialog.razor.rz.scp.css */
.text[b-4t967qy2j3] { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--text-body); }

.liste[b-4t967qy2j3] { display: flex; flex-direction: column; font-family: var(--font-ui); font-size: var(--text-sm); }
.kopf[b-4t967qy2j3], .zeile[b-4t967qy2j3] { display: grid; grid-template-columns: 24px 110px minmax(0, 1fr) 118px 150px 76px; gap: 8px; align-items: center; }
.kopf[b-4t967qy2j3] { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.zeile[b-4t967qy2j3] { padding: 8px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; color: var(--text-body); }
.zeile:last-child[b-4t967qy2j3] { border-bottom: 0; }
.zeile.aus[b-4t967qy2j3] { color: var(--text-subtle); }
.zeile input[b-4t967qy2j3] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.wer[b-4t967qy2j3] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nr[b-4t967qy2j3] { font-variant-numeric: tabular-nums; }
.num[b-4t967qy2j3] { text-align: right; font-variant-numeric: tabular-nums; }

@media (pointer: coarse) {
    .zeile[b-4t967qy2j3] { min-height: 44px; }
}
/* /Buchhaltung/Pages/StufenKennzeichen.razor.rz.scp.css */
.stufe[b-b9rdmfulsq] { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.stufe.s1[b-b9rdmfulsq] { background: var(--brand-wash); color: var(--brand-strong); }
.stufe.s2[b-b9rdmfulsq] { background: var(--warning-100); color: var(--warning-600); }
.stufe.s3[b-b9rdmfulsq] { background: var(--danger-100); color: var(--danger-600); }
/* /Buchhaltung/Pages/VermerkDialog.razor.rz.scp.css */
.text[b-dc7jjnvdk9] { margin: 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--text-body); }
.notiz[b-dc7jjnvdk9] { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-muted); }
.notiz textarea[b-dc7jjnvdk9] { resize: vertical; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-body); background: var(--surface-card); }
/* /Buchhaltung/Pages/WawiSync.razor.rz.scp.css */
/* Nur was dem Rechnungs-Sync eigen ist. Fläche, Banner, Pillen, Tabelle, Detailkarte
   und Zustands-Pille stehen geteilt in wwwroot/css/finanz-components.css. */

/* Die Pillen tragen hier Symbole — in Zahlungen stehen sie ohne. Deshalb die Flex-Form
   und der eigene Abstand statt des margin-left am Zähler. */
.fz-pillen button[b-1v1i109gnj] { display: inline-flex; align-items: center; gap: 7px; }
.fz-pillen .zahl[b-1v1i109gnj] { margin-left: 0; }

.fz-banner.zeile b[b-1v1i109gnj] { font-weight: 600; }

.rs-sortierung[b-1v1i109gnj] {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* Platzhalter-Zeilen statt Fortschrittsbalken: die Hülle steht schon da, es füllt sich nur.
   Ein Balken über der Liste ließe das Layout beim Eintreffen der Daten springen. */
.rs-laedt[b-1v1i109gnj] { padding: 10px; gap: 10px; }

.rs-platzhalter[b-1v1i109gnj] {
    height: 12px;
    border-radius: 999px;
    background: var(--sand-200);
    animation: rs-pulsieren-b-1v1i109gnj 1.6s ease-in-out infinite;
}

.rs-platzhalter:nth-child(2n)[b-1v1i109gnj] { width: 82%; }
.rs-platzhalter:nth-child(3n)[b-1v1i109gnj] { width: 60%; }

@keyframes rs-pulsieren-b-1v1i109gnj {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-platzhalter[b-1v1i109gnj] { animation: none; }
}

/* ── Detailkarte ────────────────────────────────────────────────────────── */
.rs-kunde[b-1v1i109gnj] { margin-top: 9px; color: var(--text-body); }

.rs-warum[b-1v1i109gnj] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: var(--text-sm);
    line-height: 1.45;
    background: var(--warning-100);
    color: var(--warning-600);
}

.rs-warum.rot[b-1v1i109gnj] { background: var(--danger-100); color: var(--danger-600); }
.rs-warum.teal[b-1v1i109gnj] { background: var(--brand-wash); color: var(--brand-strong); }
.rs-warum svg[b-1v1i109gnj] { flex: none; margin-top: 1px; }
.rs-warum b[b-1v1i109gnj] { font-weight: 600; }

.rs-eyebrow[b-1v1i109gnj] {
    margin-top: 12px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Das dl der Detailkarte folgt direkt auf die Eyebrow und braucht deren Abstand nicht doppelt. */
.rs-detail dl[b-1v1i109gnj] { margin-top: 8px; }
.rs-detail dd.fehlt[b-1v1i109gnj] { color: var(--danger-600); }

.rs-schritte[b-1v1i109gnj] {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: 1.6;
}

.rs-klein[b-1v1i109gnj] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-subtle);
}

.rs-klein svg[b-1v1i109gnj] { flex: none; margin-top: 2px; }
/* /Buchhaltung/Pages/Zahlungen.razor.rz.scp.css */
/* Nur was dieser Seite eigen ist (die Detailkarte hat ihre eigene Datei). Fläche, Tabelle, Banner, Laufstreifen,
   Pillen, Knöpfe und der No-scroll-Umbruch stehen seit #1881 geteilt in
   wwwroot/css/finanz-components.css — Rechnungs-Sync und Lieferanten nutzen
   dieselben Klassen. */

/* Ans Ende der Kopfzeile, direkt vor die Suche — er gehört zur Liste darunter, nicht zu den Reitern. */
.zl-stapel[b-ggunksm0tg] { margin-left: auto; height: 34px; padding: 0 13px; border-radius: var(--radius-pill); border: 0; background: var(--brand); color: var(--text-on-brand); box-shadow: var(--shadow-brand); display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.zl-stapel:disabled[b-ggunksm0tg] { opacity: .45; box-shadow: none; cursor: default; }
/* Steht der Stapel-Knopf schon rechts, schiebt die Suche nicht noch einmal. */
.zl-stapel + .fz-suche[b-ggunksm0tg] { margin-left: 0; }
.zl-stapelliste[b-ggunksm0tg] { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

.fz-tabelle td.tage.amb[b-ggunksm0tg] { color: var(--warning-600); font-weight: 600; }

.lief[b-ggunksm0tg] { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.lief.ab[b-ggunksm0tg] { color: var(--warning-600); background: var(--warning-100); border-radius: 999px; padding: 3px 9px; }
/* /Buchhaltung/Pages/ZahlungsDetailkarte.razor.rz.scp.css */
/* Das Gerüst der Karte (.fz-detail, dl, .aktionen, Knöpfe) steht geteilt in wwwroot/css/finanz-components.css. */
.fz-detail .kunde[b-x6jl3689kh] { margin-top: 9px; color: var(--text-body); }
.fz-detail .notiz[b-x6jl3689kh] { margin-top: 12px; color: var(--text-muted); font-style: italic; overflow-wrap: anywhere; }

.verlauf-titel[b-x6jl3689kh] { margin-top: 14px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.verlauf[b-x6jl3689kh] { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-ui); font-size: var(--text-sm); }
.verlauf .v[b-x6jl3689kh] { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
.verlauf .v span[b-x6jl3689kh] { color: var(--text-subtle); }
.verlauf .v b[b-x6jl3689kh] { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.verlauf .v.naechste b[b-x6jl3689kh] { color: var(--brand-strong); }
/* /Buchhaltung/Pages/ZahlungserinnerungDialog.razor.rz.scp.css */
.neu[b-6rnluh4l4a] { flex: none; background: var(--warning-100); color: var(--warning-600); border-radius: 12px; padding: 8px 12px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pruef[b-6rnluh4l4a] { flex: none; background: var(--success-100); border-radius: 12px; padding: 10px 12px; }
.pruef .eyebrow[b-6rnluh4l4a] { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--success-600); }
.pruef.nein[b-6rnluh4l4a] { background: var(--danger-100); }
.pruef.nein .eyebrow[b-6rnluh4l4a], .pruef.nein .pz[b-6rnluh4l4a] { color: var(--danger-600); }
.pruef.laedt[b-6rnluh4l4a] { background: var(--surface-sunken); }
.pruef.laedt .eyebrow[b-6rnluh4l4a] { color: var(--text-subtle); }
.pz[b-6rnluh4l4a] { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-body); }
.pz[b-6rnluh4l4a]  svg { flex: none; color: var(--success-600); }
.pz em[b-6rnluh4l4a] { font-style: normal; color: var(--text-subtle); margin-left: auto; font-size: 11.5px; }
.mail[b-6rnluh4l4a] { border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.mail-k[b-6rnluh4l4a] { flex: none; display: grid; grid-template-columns: 60px minmax(0, 1fr); row-gap: 5px; padding: 10px 14px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: 12.5px; }
.mail-k span[b-6rnluh4l4a] { color: var(--text-subtle); }
.mail-k b[b-6rnluh4l4a] { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.mail-t[b-6rnluh4l4a] { padding: 10px 14px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--text-body); }
.mail-t[b-6rnluh4l4a]  p { margin: 0 0 6px; }
.anhang[b-6rnluh4l4a] { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-body); }
.anhang[b-6rnluh4l4a]  svg { flex: none; color: var(--danger-600); }
.anhang em[b-6rnluh4l4a] { font-style: normal; font-weight: 500; color: var(--text-subtle); }
.ck[b-6rnluh4l4a] { flex: 1; display: flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--warning-600); background: var(--warning-100); border-radius: 12px; padding: 8px 11px; line-height: 1.35; cursor: pointer; }
.ck input[b-6rnluh4l4a] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--warning-600); }
/* /Buchhaltung/Pages/ZahlungsModal.razor.rz.scp.css */
.zm-scrim[b-c1c9amzlnr] { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink-700) 42%, transparent); z-index: 1400; }
.zm-modal[b-c1c9amzlnr] { position: fixed; left: 50%; top: 34px; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 68px); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; z-index: 1401; }
.zm-kopf[b-c1c9amzlnr] { flex: none; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: flex-start; gap: 10px; }
.zm-kopf .t[b-c1c9amzlnr] { flex: 1; min-width: 0; }
.zm-kopf b[b-c1c9amzlnr] { display: block; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text-strong); }
.zm-kopf span[b-c1c9amzlnr] { display: block; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.zm-kopf .x[b-c1c9amzlnr] { border: 0; background: none; padding: 2px; color: var(--text-subtle); cursor: pointer; }
.zm-rumpf[b-c1c9amzlnr] { flex: 1; min-height: 0; padding: 14px 20px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.zm-fuss[b-c1c9amzlnr] { flex: none; padding: 12px 20px 14px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; }
.zm-fuss[b-c1c9amzlnr]  .chip { flex: none; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--text-body); white-space: nowrap; cursor: pointer; }
.zm-fuss[b-c1c9amzlnr]  .chip.pri { background: var(--brand); border-color: transparent; color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.zm-fuss[b-c1c9amzlnr]  .chip:disabled { opacity: .45; box-shadow: none; cursor: default; }
.zm-fuss[b-c1c9amzlnr]  .klein { flex: 1; font-family: var(--font-ui); font-size: 12px; color: var(--text-muted); }
/* /Einkauf/Pages/AbgleichSeite.razor.rz.scp.css */
/* Nur was der Seite eigen ist; Fläche, Banner, Pillen, Tabelle und Zustands-Pille stehen in wwwroot/css/finanz-components.css. */

.ag-tabelle td[b-uzn0qfrhy2] { cursor: default; vertical-align: top; }
.ag-name b[b-uzn0qfrhy2] { font-weight: 600; color: var(--text-strong); }
.ag-faktor[b-uzn0qfrhy2] { display: flex; align-items: center; gap: 10px; }

.ag-balken[b-uzn0qfrhy2] { position: relative; flex: none; width: 140px; height: 8px; border-radius: 4px; background: var(--surface-sunken); }
.ag-balken .band[b-uzn0qfrhy2] { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--success-100); }
.ag-balken .punkt[b-uzn0qfrhy2] { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--success-600); }
.ag-balken .punkt.aus[b-uzn0qfrhy2] { background: var(--warning-600); }

.ag-ursache[b-uzn0qfrhy2] { display: block; max-width: 360px; margin-top: 6px; white-space: normal; font-size: var(--text-xs); line-height: 1.45; color: var(--text-subtle); }

.ag-zustand[b-uzn0qfrhy2] { padding: 36px 24px; }

/* Schmal wird jede Zeile eine Karte: Name und Faktor oben, die beiden Mengen darunter, dann Stand und Ursache. */
@media (max-width: 959.98px) {
    .ag-tabelle thead[b-uzn0qfrhy2] { display: none; }
    .ag-tabelle table[b-uzn0qfrhy2], .ag-tabelle tbody[b-uzn0qfrhy2] { display: block; }
    .ag-tabelle tr[b-uzn0qfrhy2] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
    .ag-tabelle td[b-uzn0qfrhy2] { display: block; padding: 0; border: 0; white-space: normal; }
    .ag-name[b-uzn0qfrhy2] { grid-area: 1 / 1; }
    .ag-wert[b-uzn0qfrhy2] { grid-area: 1 / 2; }
    .ag-tabelle td.ag-verbrauch[b-uzn0qfrhy2] { grid-area: 2 / 1; text-align: left; }
    .ag-einkauf[b-uzn0qfrhy2] { grid-area: 2 / 2; }
    .ag-stand[b-uzn0qfrhy2] { grid-area: 3 / 1 / 4 / 3; }
    .ag-verbrauch[b-uzn0qfrhy2]::before, .ag-einkauf[b-uzn0qfrhy2]::before { content: attr(data-titel) " "; color: var(--text-subtle); }
    .ag-balken[b-uzn0qfrhy2] { width: 72px; }
}
/* /Einkauf/Pages/ArtikelDetail.razor.rz.scp.css */
/* Tabellen und Chips stehen in Kind-Komponenten (ArtikelBezugsquellen, ArtikelVerlaufTabelle): ihr Markup trägt keinen
   Isolations-Bereich dieser Datei, daher ::deep unter dem eigenen .ad. */
.ad[b-06k5di4z84] { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.ad-banner[b-06k5di4z84] { border-radius: 14px; padding: 10px 13px; background: var(--warning-100); color: var(--warning-600); font-family: var(--font-ui); font-size: var(--text-sm); }
.ad-leer[b-06k5di4z84] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.ad-nicht-gefunden[b-06k5di4z84] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 16px; font-family: var(--font-ui); }
.ad-nicht-gefunden b[b-06k5di4z84] { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); }
.ad-nicht-gefunden p[b-06k5di4z84] { margin: 8px 0 12px; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); }
.ad-nicht-gefunden a[b-06k5di4z84] { color: var(--text-link); }
.ad-kacheln[b-06k5di4z84] { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; }
.ad-kachel[b-06k5di4z84] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; font-family: var(--font-ui); }
.ad-kachel .eyebrow[b-06k5di4z84] { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.ad-kachel .v[b-06k5di4z84] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ad-kachel .v small[b-06k5di4z84] { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.ad-kachel .v.txt[b-06k5di4z84] { font-size: var(--text-base); }
.ad-kachel .v.leer[b-06k5di4z84] { color: var(--text-subtle); font-weight: 500; }
.ad-kachel .m[b-06k5di4z84] { font-size: var(--text-xs); color: var(--text-muted); }
.ad-kachel .m b[b-06k5di4z84] { font-weight: 600; color: var(--text-body); }
.ad-kachel .alt[b-06k5di4z84] { color: var(--warning-600); font-weight: 600; }

.ad[b-06k5di4z84]  .ad-abschnitt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad[b-06k5di4z84]  .ad-abschnitt b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); }
.ad[b-06k5di4z84]  .ad-abschnitt > span { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }
.ad[b-06k5di4z84]  .ad-filter { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ad[b-06k5di4z84]  .ad-filter button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; }
.ad[b-06k5di4z84]  .ad-filter button.an { background: var(--brand-wash); border-color: transparent; color: var(--brand-strong); }
.ad[b-06k5di4z84]  .ad-filter .zahl { margin-left: 4px; border-radius: 999px; padding: 1px 6px; background: var(--surface-sunken); }
.ad[b-06k5di4z84]  .ad-tabelle { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; overflow: clip; }
.ad[b-06k5di4z84]  .ad-kopf, .ad[b-06k5di4z84]  .ad-zeile { display: grid; gap: 10px; align-items: center; padding: 7px 12px; font-family: var(--font-ui); font-size: var(--text-sm); }
.ad[b-06k5di4z84]  .ad-q { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 70px 90px 70px minmax(110px, 1.2fr) 90px; }
.ad[b-06k5di4z84]  .ad-v { grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1.2fr) 70px 86px 86px 70px minmax(0, 1.4fr); }
.ad[b-06k5di4z84]  .ad-kopf { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border-soft); background: var(--surface-page); }
.ad[b-06k5di4z84]  .ad-zeile { border-bottom: 1px solid var(--border-soft); color: var(--text-body); font-variant-numeric: tabular-nums; }
.ad[b-06k5di4z84]  .ad-zeile:last-child { border-bottom: none; }
.ad[b-06k5di4z84]  .ad-zeile.auff { background: color-mix(in srgb, var(--warning-100) 45%, transparent); }
.ad[b-06k5di4z84]  .ad-zeile.ng { color: var(--text-muted); }
.ad[b-06k5di4z84]  .num { text-align: right; }
.ad[b-06k5di4z84]  .stark { font-weight: 600; color: var(--text-strong); }
.ad[b-06k5di4z84]  .ad-zeile .auf { color: var(--warning-600); font-weight: 600; }
.ad[b-06k5di4z84]  .ad-zeile .ab { color: var(--success-600); font-weight: 600; }
.ad[b-06k5di4z84]  .ad-zeile .lf a { font-weight: 600; color: var(--brand-strong); }
.ad[b-06k5di4z84]  .ad-zeile .lf span, .ad[b-06k5di4z84]  .ad-zeile .w span { display: block; font-size: var(--text-2xs); color: var(--text-subtle); }
.ad[b-06k5di4z84]  .ad-zeile .w b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ad[b-06k5di4z84]  .ad-zeile .qn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad[b-06k5di4z84]  .ad-zeile .bl { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--brand-strong); }
.ad[b-06k5di4z84]  .ad-zeile .marke { min-width: 0; }
.ad[b-06k5di4z84]  .ad-zeile .marke .pill { white-space: normal; }
.ad[b-06k5di4z84]  .ad-zeile .zv { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ad[b-06k5di4z84]  .ad-zeile .zv .pill { white-space: normal; text-align: right; }
.ad[b-06k5di4z84]  .ad-warnung { display: flex; gap: 9px; align-items: flex-start; background: var(--warning-100); color: var(--warning-600); border-radius: 12px; padding: 9px 12px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; }
.ad[b-06k5di4z84]  .ad-fuss { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); padding: 0 4px; }
.ad[b-06k5di4z84]  .pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-style: normal; font-size: var(--text-2xs); font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ad[b-06k5di4z84]  .pill.amb { background: var(--warning-100); color: var(--warning-600); }
.ad[b-06k5di4z84]  .pill.grau { background: var(--sand-100); color: var(--text-subtle); }

/* Handy: Kacheln untereinander, Tabellenzeilen werden zweizeilige Karten. */
@media (max-width: 959.98px) {
    .ad[b-06k5di4z84] { padding: 12px 14px; }
    .ad-kacheln[b-06k5di4z84] { grid-template-columns: 1fr; }
    .ad-kachel:first-child[b-06k5di4z84] { background: var(--brand-wash); border-color: transparent; }
    .ad[b-06k5di4z84]  .ad-kopf { display: none; }
    .ad[b-06k5di4z84]  .ad-q { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
    .ad[b-06k5di4z84]  .ad-q > :nth-child(2), .ad[b-06k5di4z84]  .ad-q > :nth-child(3), .ad[b-06k5di4z84]  .ad-q > :nth-child(4) { display: none; }
    .ad[b-06k5di4z84]  .ad-v { grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1fr) auto; min-height: 48px; }
    .ad[b-06k5di4z84]  .ad-v > :nth-child(4), .ad[b-06k5di4z84]  .ad-v > :nth-child(5), .ad[b-06k5di4z84]  .ad-v > :nth-child(6) { display: none; }
    .ad[b-06k5di4z84]  .ad-v > .marke { grid-column: 1 / -1; }
}

/* Touch: 44 px je Bedienelement; entschieden wird über die Art der Bedienung, nicht die Breite (#1901). */
@media (pointer: coarse) {
    .ad[b-06k5di4z84]  .ad-filter button { height: 44px; }
}
/* /Einkauf/Pages/ArtikelListe.razor.rz.scp.css */
.av[b-xqx4rkll43] { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.av-banner[b-xqx4rkll43] { border-radius: 14px; padding: 10px 13px; background: var(--warning-100); color: var(--warning-600); font-family: var(--font-ui); font-size: var(--text-sm); }
.av-leer[b-xqx4rkll43] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.av-leer a[b-xqx4rkll43] { color: var(--text-link); }
.av-kopfzeile[b-xqx4rkll43] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-kopfzeile input[b-xqx4rkll43] { flex: 1; min-width: 200px; max-width: 320px; height: 34px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); padding: 0 12px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); }
.av-lieferant[b-xqx4rkll43] { height: 34px; max-width: 240px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); padding: 0 10px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; text-overflow: ellipsis; }
.av-lieferant:focus-visible[b-xqx4rkll43] { outline: 2px solid var(--brand); outline-offset: 2px; }
.av-filter[b-xqx4rkll43] { display: flex; gap: 6px; flex-wrap: wrap; }
.av-filter button[b-xqx4rkll43] { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.av-filter button.an[b-xqx4rkll43] { background: var(--brand-wash); border-color: transparent; color: var(--brand-strong); }
.av-filter .zahl[b-xqx4rkll43] { margin-left: 5px; border-radius: 999px; padding: 1px 7px; background: var(--surface-sunken); font-size: var(--text-xs); }
.av-tabelle[b-xqx4rkll43] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; overflow: clip; }
.av-tabelle ul[b-xqx4rkll43] { list-style: none; margin: 0; padding: 0; }
.av-kopf[b-xqx4rkll43], .av-zeile[b-xqx4rkll43] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) 130px 130px minmax(0, 1fr) 150px; gap: 10px; align-items: center; padding: 7px 12px; }
.av-kopf.av-op[b-xqx4rkll43], .av-zeile.av-op[b-xqx4rkll43] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 80px minmax(0, 1.4fr) minmax(0, 1.2fr); }
.av-kopf[b-xqx4rkll43] { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border-soft); background: var(--surface-page); }
.av-kopf .num[b-xqx4rkll43] { text-align: right; }
.av-zeile[b-xqx4rkll43] { border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); text-decoration: none; }
.av-zeile:hover[b-xqx4rkll43] { background: var(--surface-page); }
.av-zeile:focus-visible[b-xqx4rkll43] { outline: 2px solid var(--brand); outline-offset: -2px; }
.av-zeile .w[b-xqx4rkll43], .av-zeile .bei[b-xqx4rkll43], .av-zeile .qu[b-xqx4rkll43], .av-zeile .rz[b-xqx4rkll43] { min-width: 0; }
.av-zeile b[b-xqx4rkll43] { display: block; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Name kürzt, die Bio-Marke daneben nie. */
.av-zeile .w b[b-xqx4rkll43] { display: flex; align-items: center; min-width: 0; }
.av-zeile .w b .n[b-xqx4rkll43] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; color: inherit; }
.av-zeile .w span[b-xqx4rkll43], .av-zeile .bei span[b-xqx4rkll43], .av-zeile .pr span[b-xqx4rkll43], .av-zeile .ag span[b-xqx4rkll43] { display: block; font-size: var(--text-2xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-zeile .qu[b-xqx4rkll43], .av-zeile .rz[b-xqx4rkll43] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-zeile .pr b[b-xqx4rkll43], .av-zeile .ag b[b-xqx4rkll43] { font-family: var(--font-display); font-size: var(--text-base); }
.av-zeile .num[b-xqx4rkll43] { text-align: right; font-variant-numeric: tabular-nums; }
.av-zeile .alt[b-xqx4rkll43] { color: var(--warning-600); font-weight: 600; }
.av-zeile .leer[b-xqx4rkll43] { color: var(--text-subtle); }
.av-zeile.ohne b[b-xqx4rkll43] { color: var(--text-muted); font-weight: 500; }
.av-zeile .marken[b-xqx4rkll43] { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.pill[b-xqx4rkll43] { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-style: normal; font-size: var(--text-2xs); font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.pill.amb[b-xqx4rkll43] { background: var(--warning-100); color: var(--warning-600); }
.pill.grau[b-xqx4rkll43] { background: var(--sand-100); color: var(--text-subtle); }
.av-fuss[b-xqx4rkll43] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); padding: 0 4px; }

/* Mobil: Karten statt Tabelle. Ware und Preis oben, darunter Bezugsquellen und Marken, jeweils über die ganze Breite —
   eine Spalte „auto“ mit nowrap-Inhalt würde sonst der Ware die Breite nehmen. */
@media (max-width: 959.98px) {
    .av[b-xqx4rkll43] { padding: 12px 14px; }
    .av-kopfzeile input[b-xqx4rkll43] { max-width: none; }
    .av-lieferant[b-xqx4rkll43] { flex: 1; min-width: 0; max-width: none; }
    .av-tabelle[b-xqx4rkll43] { background: none; border: 0; overflow: visible; }
    .av-tabelle ul[b-xqx4rkll43] { display: flex; flex-direction: column; gap: 8px; }
    .av-kopf[b-xqx4rkll43] { display: none; }
    .av-zeile[b-xqx4rkll43], .av-zeile.av-op[b-xqx4rkll43] { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 11px 13px; }
    .av-zeile.av-op[b-xqx4rkll43] { grid-template-columns: minmax(0, 1fr); }
    .av-zeile .bei[b-xqx4rkll43], .av-zeile .geb[b-xqx4rkll43], .av-zeile .rz[b-xqx4rkll43] { display: none; }
    .av-zeile:not(.av-op) .pr[b-xqx4rkll43] { grid-column: 2; grid-row: 1; }
    .av-zeile:not(.av-op) .qu[b-xqx4rkll43] { grid-column: 1; grid-row: 2; }
    .av-zeile:not(.av-op) .ag[b-xqx4rkll43] { grid-column: 2; grid-row: 2; }
    .av-zeile:not(.av-op) .marken[b-xqx4rkll43] { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
    .av-zeile .qu[b-xqx4rkll43] { font-size: var(--text-xs); color: var(--text-subtle); }
    .av-tabelle[b-xqx4rkll43]  .bl { margin-top: 8px; border: 1px solid var(--border-soft); border-radius: 14px; }
}

/* Touch: 44 px je Bedienelement; entschieden wird über die Art der Bedienung, nicht die Breite (#1901). */
@media (pointer: coarse) {
    .av-kopfzeile input[b-xqx4rkll43], .av-lieferant[b-xqx4rkll43], .av-filter button[b-xqx4rkll43] { height: 44px; }
}
/* /Einkauf/Pages/BelegZeilenTabelle.razor.rz.scp.css */
.pb-tabelle[b-pxcs5ihqsf] { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; }
.pb-tabelle ul[b-pxcs5ihqsf] { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }

.pb-kopfzeile[b-pxcs5ihqsf], .pb-zeile[b-pxcs5ihqsf] { display: grid; grid-template-columns: 34px 88px minmax(0, 1fr) 96px 88px; gap: 10px; align-items: center; padding: 9px 14px; }
.pb-kopfzeile[b-pxcs5ihqsf] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface-page); border-bottom: 1px solid var(--border-soft); }
.rechts[b-pxcs5ihqsf] { text-align: right; }

.pb-zeile[b-pxcs5ihqsf] { width: 100%; border: 0; border-bottom: 1px solid var(--border-soft); background: none; text-align: left; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; font-variant-numeric: tabular-nums; }
.pb-zeile:hover[b-pxcs5ihqsf] { background: var(--surface-page); }
.pb-zeile:focus-visible[b-pxcs5ihqsf] { outline: 2px solid var(--brand); outline-offset: -2px; }
.pb-zeile.erledigt[b-pxcs5ihqsf] { color: var(--text-muted); background: var(--surface-page); }
.pb-zeile.erledigt :is(.pb-zl, .pb-nr, .pb-text b, .rechts)[b-pxcs5ihqsf] { opacity: .7; }
.pb-zeile.erledigt:hover[b-pxcs5ihqsf] { background: var(--surface-sunken); }
.pb-zeile.sel[b-pxcs5ihqsf], .pb-zeile.sel:hover[b-pxcs5ihqsf] { background: var(--brand-wash); box-shadow: inset 3px 0 0 var(--brand); }
.pb-zeile.sel :is(.pb-zl, .pb-nr, .pb-text b, .rechts)[b-pxcs5ihqsf] { opacity: 1; }

.pb-zl[b-pxcs5ihqsf] { color: var(--text-subtle); }
.pb-nr[b-pxcs5ihqsf] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pb-text[b-pxcs5ihqsf] { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-text b[b-pxcs5ihqsf] { font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-zeile.erledigt .pb-text b[b-pxcs5ihqsf] { font-weight: 500; color: var(--text-muted); }
.pb-stand[b-pxcs5ihqsf] { display: flex; align-items: center; min-width: 0; }
.pb-status[b-pxcs5ihqsf] { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: 1px 8px; font-size: var(--text-2xs); font-weight: 600; background: var(--success-100); color: var(--success-600); }
.pb-status svg[b-pxcs5ihqsf] { flex: none; }
.pb-zeile.offen .pb-status[b-pxcs5ihqsf] { background: var(--warning-100); color: var(--warning-600); }

.pb-marke[b-pxcs5ihqsf] { font-style: normal; font-size: var(--text-2xs); font-weight: 600; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.pb-marke.info[b-pxcs5ihqsf] { background: var(--info-100); color: var(--info-600); }
.pb-marke.rose[b-pxcs5ihqsf] { background: var(--rose-100); color: var(--rose-500); }
.pb-marke.sand[b-pxcs5ihqsf] { background: var(--sand-100); color: var(--ink-500); }

.pb-fortschritt[b-pxcs5ihqsf] { display: flex; align-items: baseline; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pb-fortschritt b[b-pxcs5ihqsf] { font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }

@media (pointer: coarse) {
    .pb-zeile[b-pxcs5ihqsf] { min-height: 44px; }
}

/* Am Telefon steht die Tabelle im Blatt der Seite: ohne Kopfzeile, Art.-Nr. und Menge (stehen in der Zeilenkarte). */
@media (max-width: 959.98px) {
    .pb-kopfzeile[b-pxcs5ihqsf], .pb-nr[b-pxcs5ihqsf], .pb-zeile > .rechts:nth-last-child(2)[b-pxcs5ihqsf] { display: none; }
    .pb-zeile[b-pxcs5ihqsf] { grid-template-columns: 26px minmax(0, 1fr) auto; min-height: 56px; padding: 8px 16px; }
}
/* /Einkauf/Pages/BestellBlatt.razor.rz.scp.css */
em[b-1gjcb1tnvc] { font-style: normal; font-weight: 600; color: var(--text-body); }
.bb-leer[b-1gjcb1tnvc] { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.bb-kopf[b-1gjcb1tnvc] { margin: 0 0 10px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.bb-zahlen span[b-1gjcb1tnvc] { display: block; }
.bb-summe[b-1gjcb1tnvc] { font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bb-mindest[b-1gjcb1tnvc] { margin-top: 1px; }
/* flex: none, sonst staucht der Rumpf (Flex-Spalte) die Liste, statt zu scrollen, und overflow schneidet den Rest ab. */
.bb-liste[b-1gjcb1tnvc] { flex: none; list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.bb-liste li[b-1gjcb1tnvc] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 8px 8px 12px; border-top: 1px solid var(--border-soft); font-family: var(--font-ui); }
.bb-liste li:first-child[b-1gjcb1tnvc] { border-top: none; }
.bb-liste li.hat[b-1gjcb1tnvc] { background: var(--brand-wash); }
.bb-liste .w[b-1gjcb1tnvc] { display: flex; align-items: center; min-width: 0; }
.bb-liste .w b[b-1gjcb1tnvc] { font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-liste .s[b-1gjcb1tnvc] { grid-column: 1; font-size: var(--text-xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bb-liste .vh[b-1gjcb1tnvc], .bb-liste .vw[b-1gjcb1tnvc] { grid-column: 1 / -1; font-size: var(--text-xs); }
.bb-liste .vh[b-1gjcb1tnvc] { color: var(--text-subtle); }
.bb-liste .vw[b-1gjcb1tnvc] { color: var(--warning-600); font-weight: 600; }
.bb-liste .st[b-1gjcb1tnvc] { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 2px; }
.st button[b-1gjcb1tnvc] { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); color: var(--brand); display: grid; place-items: center; cursor: pointer; }
.st button:disabled[b-1gjcb1tnvc] { opacity: .4; cursor: default; }
.st button.vor[b-1gjcb1tnvc] { width: auto; height: 30px; margin-right: 4px; padding: 0 10px; border-style: dashed; border-color: var(--brand); background: transparent; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st button.vor.ok[b-1gjcb1tnvc] { border-style: solid; background: var(--brand-wash); }
.st b[b-1gjcb1tnvc] { min-width: 28px; text-align: center; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.st b.null[b-1gjcb1tnvc] { color: var(--text-subtle); font-weight: 500; }

.bb-frei[b-1gjcb1tnvc] { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-ui); }
.bb-frei label[b-1gjcb1tnvc] { display: flex; gap: 10px; align-items: baseline; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.bb-frei .r[b-1gjcb1tnvc] { margin-left: auto; font-weight: 500; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-frei textarea[b-1gjcb1tnvc] { box-sizing: border-box; width: 100%; min-height: 64px; resize: vertical; border-radius: 12px; border: 1px solid var(--border-default); background: var(--surface-card); padding: 9px 12px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--text-strong); }
.bb-frei textarea[b-1gjcb1tnvc]::placeholder { color: var(--text-subtle); }
.bb-frei textarea:focus[b-1gjcb1tnvc] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.sendet .bb-liste[b-1gjcb1tnvc], .sendet .bb-frei[b-1gjcb1tnvc] { opacity: .55; }

.bb-vorschau[b-1gjcb1tnvc] { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-ui); }
.bb-vh[b-1gjcb1tnvc] { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.bb-kz[b-1gjcb1tnvc] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--text-sm); }
.bb-kz dt[b-1gjcb1tnvc] { font-weight: 600; color: var(--text-muted); }
.bb-kz dd[b-1gjcb1tnvc] { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
/* Die Mail als ein Blatt: Anfang und Schluss sind Eingabefelder, die Bestellzeilen dazwischen liegen fest (#3058). */
.bb-mail[b-1gjcb1tnvc] { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-card); }
.bb-feld[b-1gjcb1tnvc], .bb-text[b-1gjcb1tnvc] { box-sizing: border-box; width: 100%; margin: 0; padding: 6px 8px; border-radius: 8px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--text-strong); }
.bb-feld[b-1gjcb1tnvc] { field-sizing: content; resize: none; border: 1px dashed var(--border-default); background: transparent; }
.bb-feld:focus[b-1gjcb1tnvc] { outline: none; border-style: solid; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.bb-text[b-1gjcb1tnvc] { border: 1px solid transparent; background: var(--surface-sunken); white-space: pre-wrap; overflow-wrap: anywhere; }
.sendet .bb-vorschau[b-1gjcb1tnvc] { opacity: .55; }
.bb-knoepfe[b-1gjcb1tnvc] { display: inline-flex; gap: 8px; }

/* Das Ergebnis steht zwischen Rumpf und Fuß und scrollt nicht mit: man sieht es dort, wo man eben geklickt hat. */
.bb-erg[b-1gjcb1tnvc] { flex: none; margin: 0 20px 12px; border-radius: 14px; padding: 11px 14px; display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; }
.bb-erg[b-1gjcb1tnvc] >  svg { flex: none; margin-top: 1px; }
.bb-erg .tx[b-1gjcb1tnvc] { flex: 1; min-width: 0; }
.bb-erg b[b-1gjcb1tnvc] { display: block; font-weight: 700; }
.bb-erg .tx > span[b-1gjcb1tnvc] { display: block; font-size: var(--text-xs); margin-top: 2px; }
.bb-erg a[b-1gjcb1tnvc] { font-weight: 700; white-space: nowrap; align-self: center; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.bb-erg.ok[b-1gjcb1tnvc] { background: var(--success-100); color: var(--success-600); }
.bb-erg.ok b[b-1gjcb1tnvc] { color: var(--text-strong); }
.bb-erg.ok .tx > span[b-1gjcb1tnvc] { color: var(--text-muted); }
.bb-erg.ok a[b-1gjcb1tnvc] { color: var(--brand-strong); }
.bb-erg.warn[b-1gjcb1tnvc] { background: var(--warning-100); color: var(--warning-600); }
.bb-erg.warn a[b-1gjcb1tnvc] { color: var(--warning-600); text-decoration: underline; text-underline-offset: 3px; }
.bb-erg.still[b-1gjcb1tnvc] { background: var(--surface-sunken); color: var(--text-muted); font-size: var(--text-xs); padding: 8px 12px; align-items: center; }
.bb-erg.still[b-1gjcb1tnvc] >  svg { margin-top: 0; }

.bb-senden.laeuft:disabled[b-1gjcb1tnvc] { opacity: .75; }
.bb-senden.laeuft[b-1gjcb1tnvc]  svg { animation: bb-dreht-b-1gjcb1tnvc 1s linear infinite; }
@keyframes bb-dreht-b-1gjcb1tnvc { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bb-senden.laeuft[b-1gjcb1tnvc]  svg { animation: none; } }

.sendet[b-1gjcb1tnvc]  .zm-kopf .x { opacity: .3; cursor: default; }

/* Am Telefon kommt das Blatt von unten, der Knopf sitzt am Daumen. */
@media (max-width: 959.98px) {
    .bb[b-1gjcb1tnvc]  .bb-modal { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 88dvh; border-radius: 20px 20px 0 0; }
    .bb[b-1gjcb1tnvc]  .bb-modal .zm-rumpf { padding: 12px 14px; }
    .bb[b-1gjcb1tnvc]  .bb-modal .zm-fuss { flex-wrap: wrap; padding: 10px 14px 16px; }
    .bb[b-1gjcb1tnvc]  .bb-modal .zm-fuss .bb-pruefen, .bb-knoepfe[b-1gjcb1tnvc] { flex: 1 0 100%; }
    .bb[b-1gjcb1tnvc]  .bb-modal .zm-fuss .bb-pruefen, .bb-knoepfe .chip[b-1gjcb1tnvc] { height: 48px; justify-content: center; font-size: var(--text-base); }
    .bb-knoepfe .bb-senden[b-1gjcb1tnvc] { flex: 1; }
    .st button[b-1gjcb1tnvc] { width: 44px; height: 44px; }
    /* Eigene Zeile, sonst bleibt neben Vorschlag und Zähler kaum Platz für Name und Gebinde. */
    .bb-liste .st[b-1gjcb1tnvc] { grid-column: 1 / -1; grid-row: auto; justify-content: flex-end; margin-top: 4px; }
    .st button.vor[b-1gjcb1tnvc] { margin-right: auto; height: 36px; }
    .bb-domain[b-1gjcb1tnvc], .bb-an[b-1gjcb1tnvc], .bb-frei .r[b-1gjcb1tnvc] { display: none; }
    .bb-erg[b-1gjcb1tnvc] { margin: 0 14px 10px; flex-wrap: wrap; }
    .bb-erg a[b-1gjcb1tnvc] { flex-basis: 100%; margin-left: 28px; margin-top: 2px; }
}
/* /Einkauf/Pages/BioMarke.razor.rz.scp.css */
.bio-marke[b-w2r4c07e01] { flex: none; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--green-100); color: var(--green-600); font-family: var(--font-ui); font-style: normal; font-size: var(--text-2xs); font-weight: 600; line-height: 1.5; vertical-align: middle; }
/* /Einkauf/Pages/EinheitKorrigieren.razor.rz.scp.css */
.ek[b-4bx98kwiia] { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; color: var(--text-body); max-width: 560px; }
.ek-kopf[b-4bx98kwiia] { display: flex; gap: 10px; align-items: flex-start; color: var(--text-strong); }
.ek-kopf[b-4bx98kwiia]  svg { flex: none; margin-top: 1px; color: var(--warning-600); }
.ek-kopf b[b-4bx98kwiia] { font-weight: 600; }
.ek-meldung[b-4bx98kwiia] { border-radius: 12px; padding: 10px 12px; background: var(--warning-100); color: var(--warning-600); }
.ek-quelle[b-4bx98kwiia] { display: flex; flex-direction: column; gap: 6px; }
.ek-label[b-4bx98kwiia] { font-weight: 600; color: var(--text-muted); }
.ek-feld[b-4bx98kwiia] { display: flex; align-items: center; gap: 8px; }
.ek-gebinde[b-4bx98kwiia] { width: 110px; height: 44px; box-sizing: border-box; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); padding: 0 10px; font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-strong); }
.ek-gebinde:focus[b-4bx98kwiia] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.ek-tipp[b-4bx98kwiia] { color: var(--text-subtle); }
.ek-probe[b-4bx98kwiia] { display: flex; gap: 8px; align-items: flex-start; border-radius: 12px; padding: 10px 12px; }
.ek-probe[b-4bx98kwiia]  svg { flex: none; margin-top: 2px; }
.ek-probe.gut[b-4bx98kwiia] { background: var(--success-100); color: var(--success-600); }
.ek-probe.warn[b-4bx98kwiia] { background: var(--warning-100); color: var(--warning-600); }
.ek-umstellen[b-4bx98kwiia] { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--brand); background: var(--brand); color: var(--text-on-brand); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-base); cursor: pointer; }
.ek-umstellen:disabled[b-4bx98kwiia] { opacity: .5; cursor: default; }
/* /Einkauf/Pages/EinkaufAuftraege.razor.rz.scp.css */
/* Muster: Lieferanten-Verzeichnis (EinkaufLieferanten.razor.css), Größen auf der Typo-Skala. */
.au[b-ubwvros2ez] { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; min-height: 0; }
.au-leer[b-ubwvros2ez] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.au-arbeit[b-ubwvros2ez] { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; min-height: 0; }
.au-liste[b-ubwvros2ez] { min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.au-filter[b-ubwvros2ez] { display: flex; gap: 6px; }

.au-tabelle[b-ubwvros2ez] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; overflow: clip; display: flex; flex-direction: column; }
.au-tabelle ul[b-ubwvros2ez] { list-style: none; margin: 0; padding: 0; }
.au-kopf[b-ubwvros2ez], .au-zeile[b-ubwvros2ez] { display: grid; grid-template-columns: 92px minmax(0, 1fr) 156px 104px; gap: 10px; align-items: center; padding: 0 12px; }
.au-kopf[b-ubwvros2ez] { padding-top: 8px; padding-bottom: 8px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border-soft); background: var(--surface-page); }
.au-zeile[b-ubwvros2ez] { min-height: 38px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); text-decoration: none; }
.au-zeile:hover[b-ubwvros2ez] { background: var(--surface-page); }
.au-zeile:focus-visible[b-ubwvros2ez] { outline: 2px solid var(--brand); outline-offset: -2px; }
.au-zeile.sel[b-ubwvros2ez] { background: var(--brand-wash); box-shadow: inset 3px 0 0 var(--brand); }
.au-zeile .nr[b-ubwvros2ez] { font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-zeile .lfn[b-ubwvros2ez] { min-width: 0; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zeit zuerst und unkürzbar: nur der Name (in Produktion oft die UPN) wird mit „…“ gekürzt. */
.au-zeile .von[b-ubwvros2ez] { min-width: 0; display: flex; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-zeile .vz[b-ubwvros2ez] { flex: none; }
.au-zeile .vn[b-ubwvros2ez] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.au-zeile .vn[b-ubwvros2ez]::before { content: "\00a0·\00a0"; }
.au-zeile.erl .nr[b-ubwvros2ez], .au-zeile.erl .lfn[b-ubwvros2ez] { color: var(--text-muted); font-weight: 500; }

.pill[b-ubwvros2ez] { display: inline-flex; align-items: center; font-family: var(--font-ui); font-style: normal; font-size: var(--text-2xs); font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pill.teal[b-ubwvros2ez] { background: var(--brand-wash); color: var(--brand-strong); }
.pill.amb[b-ubwvros2ez] { background: var(--warning-100); color: var(--warning-600); }
.pill.grau[b-ubwvros2ez] { background: var(--surface-sunken); color: var(--text-subtle); }

.au-detail[b-ubwvros2ez] { min-width: 0; align-self: start; }
.au-hinweis[b-ubwvros2ez] { padding: 24px 16px; border: 1px dashed var(--border-default); border-radius: 18px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.au-nicht-gefunden[b-ubwvros2ez] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 16px; font-family: var(--font-ui); font-size: var(--text-sm); }
.au-nicht-gefunden b[b-ubwvros2ez] { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); }
.au-nicht-gefunden p[b-ubwvros2ez] { margin: 8px 0 12px; color: var(--text-muted); font-family: var(--font-body); }
.au-nicht-gefunden a[b-ubwvros2ez] { color: var(--text-link); }

/* Karte des Auftrags: Form der Lieferantenkarte (LieferantKarte.razor.css). */
.auk[b-ubwvros2ez] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 16px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); }
.auk-zurueck[b-ubwvros2ez] { display: none; align-items: center; gap: 4px; color: var(--text-link); text-decoration: none; font-weight: 600; }
.auk-kopf[b-ubwvros2ez] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; }
.auk-kopf b[b-ubwvros2ez] { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.auk-lf[b-ubwvros2ez] { margin-top: 4px; }
.auk-lf a[b-ubwvros2ez] { font-weight: 600; color: var(--brand-strong); text-decoration: none; }
.auk-lf a:hover[b-ubwvros2ez] { color: var(--brand); }
.auk-lf span[b-ubwvros2ez] { color: var(--text-subtle); }
.auk-wer[b-ubwvros2ez] { margin-top: 2px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.auk-warnung[b-ubwvros2ez] { margin-top: 12px; border-radius: 12px; padding: 10px 12px; background: var(--warning-100); color: var(--warning-600); line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
.auk-warnung[b-ubwvros2ez]  svg { flex: none; margin-top: 2px; }
.auk dl[b-ubwvros2ez] { display: grid; grid-template-columns: 96px minmax(0, 1fr); row-gap: 6px; margin: 12px 0 0; }
.auk dt[b-ubwvros2ez] { color: var(--text-subtle); font-weight: 400; }
.auk dd[b-ubwvros2ez] { margin: 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.auk dd.leer[b-ubwvros2ez] { color: var(--text-subtle); font-style: italic; font-weight: 400; }
.auk-abschnitt[b-ubwvros2ez] { margin-top: 14px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.auk-zeilen[b-ubwvros2ez] { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.auk-zeilen li[b-ubwvros2ez] { padding: 7px 11px; border-top: 1px solid var(--border-soft); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.auk-zeilen li:first-child[b-ubwvros2ez] { border-top: none; }
.auk-notiz[b-ubwvros2ez] { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-page); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.auk-mail[b-ubwvros2ez] { margin-top: 8px; font-size: var(--text-xs); color: var(--text-subtle); display: flex; align-items: center; gap: 5px; }
.auk-fuss[b-ubwvros2ez] { margin: 14px -16px -16px; padding: 12px 16px 14px; border-top: 1px solid var(--border-soft); background: var(--surface-page); border-radius: 0 0 18px 18px; }
.auk-knopf[b-ubwvros2ez] { width: 100%; height: 42px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-body); cursor: pointer; }
.auk-knopf:disabled[b-ubwvros2ez] { opacity: .6; cursor: default; }
.auk-knopf:focus-visible[b-ubwvros2ez] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* Ab Rechnerbreite bleiben Kopf, Filter und Karte stehen. */
@media (min-width: 960px) {
    .au[b-ubwvros2ez] { height: 100%; box-sizing: border-box; overflow: hidden; }
    .au-arbeit[b-ubwvros2ez] { flex: 1; grid-template-rows: minmax(0, 1fr); }
    .au-tabelle[b-ubwvros2ez] { min-height: 0; overflow: auto; }
    .au-detail[b-ubwvros2ez] { max-height: 100%; overflow-y: auto; }
}

/* Mobil: Liste ODER Karte, wie im Lieferanten-Verzeichnis. Die Zeile wird zur Karte: Lieferant vorn, darunter Nummer · wer · wann. */
@media (max-width: 959.98px) {
    .au[b-ubwvros2ez] { padding: 12px 14px; }
    .au-arbeit[b-ubwvros2ez] { display: block; }
    .au.hat-auswahl .au-liste[b-ubwvros2ez] { display: none; }
    .au:not(.hat-auswahl) .au-detail[b-ubwvros2ez] { display: none; }
    .au-tabelle[b-ubwvros2ez] { background: none; border: 0; overflow: visible; }
    .au-tabelle ul[b-ubwvros2ez] { display: flex; flex-direction: column; gap: 8px; }
    .au-kopf[b-ubwvros2ez] { display: none; }
    .au-zeile[b-ubwvros2ez] { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lfn lfn zst" "nr von zst"; gap: 3px 0; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 10px 13px; }
    .au-zeile .lfn[b-ubwvros2ez] { grid-area: lfn; font-size: var(--text-base); }
    .au-zeile .nr[b-ubwvros2ez], .au-zeile .von[b-ubwvros2ez] { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
    .au-zeile .nr[b-ubwvros2ez] { grid-area: nr; }
    .au-zeile .von[b-ubwvros2ez] { grid-area: von; }
    .au-zeile .von[b-ubwvros2ez]::before { content: "\00a0·\00a0"; }
    .au-zeile .zst[b-ubwvros2ez] { grid-area: zst; margin-left: 10px; }
    .au-tabelle[b-ubwvros2ez]  .bl { margin-top: 8px; border: 1px solid var(--border-soft); border-radius: 14px; }
    .auk-zurueck[b-ubwvros2ez] { display: inline-flex; min-height: 44px; }
}

/* Touch: 44 px je Bedienelement (#1901). */
@media (pointer: coarse) {
    .auk-knopf[b-ubwvros2ez] { height: 48px; }
    .au-filter[b-ubwvros2ez]  .fm button { height: 44px; }
}
/* /Einkauf/Pages/EinkaufLieferanten.razor.rz.scp.css */
.lv[b-dgp6oyx12t] { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; min-height: 0; }
.lv-banner[b-dgp6oyx12t] { border-radius: 14px; padding: 10px 13px; background: var(--warning-100); color: var(--warning-600); font-family: var(--font-ui); font-size: 12.5px; line-height: 1.45; }
.lv-leer[b-dgp6oyx12t] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }

.lv-arbeit[b-dgp6oyx12t] { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; min-height: 0; }
.lv-liste[b-dgp6oyx12t] { min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.lv-kopfzeile[b-dgp6oyx12t] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-kopfzeile input[b-dgp6oyx12t] { flex: 1; min-width: 200px; max-width: 320px; height: 34px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); padding: 0 12px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-body); }
.lv-filter[b-dgp6oyx12t] { display: flex; gap: 6px; }

.lv-tabelle[b-dgp6oyx12t] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; overflow: auto; min-height: 0; }
.lv-tabelle ul[b-dgp6oyx12t] { list-style: none; margin: 0; padding: 0; }
.lv-kopf[b-dgp6oyx12t], .lv-zeile[b-dgp6oyx12t] { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .8fr) 88px; gap: 10px; align-items: center; padding: 8px 12px; }
.lv-kopf[b-dgp6oyx12t] { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border-soft); background: var(--surface-page); }
.lv-zeile[b-dgp6oyx12t] { border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: 12.5px; color: var(--text-body); text-decoration: none; }
.lv-zeile:hover[b-dgp6oyx12t] { background: var(--surface-page); }
.lv-zeile:focus-visible[b-dgp6oyx12t] { outline: 2px solid var(--brand); outline-offset: -2px; }
.lv-zeile.sel[b-dgp6oyx12t] { background: var(--brand-wash); box-shadow: inset 3px 0 0 var(--brand); }
.lv-zeile .lf[b-dgp6oyx12t] { min-width: 0; }
.lv-zeile .lf b[b-dgp6oyx12t] { display: block; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-zeile .lf span[b-dgp6oyx12t] { display: block; font-family: var(--font-body); font-size: 11px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-zeile .weg[b-dgp6oyx12t] { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand); min-width: 0; }
.lv-zeile .knr[b-dgp6oyx12t] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-zeile .dat[b-dgp6oyx12t] { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.lv-zeile .leer[b-dgp6oyx12t] { color: var(--text-subtle); font-weight: 500; }
.lv-zeile.ohne .lf b[b-dgp6oyx12t] { color: var(--text-muted); font-weight: 500; }
.lv-zeile.ohne[b-dgp6oyx12t] { color: var(--text-muted); }
.lv-zeile .notiz-kurz[b-dgp6oyx12t], .lv-gruppe[b-dgp6oyx12t] { display: none; }

.pill[b-dgp6oyx12t] { font-family: var(--font-ui); font-style: normal; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }
.pill.amb[b-dgp6oyx12t] { background: var(--warning-100); color: var(--warning-600); }

.lv-fuss[b-dgp6oyx12t] { font-family: var(--font-ui); font-size: 11.5px; color: var(--text-subtle); padding: 0 4px; }
.lv-detail[b-dgp6oyx12t] { min-width: 0; align-self: start; }
.lv-hinweis[b-dgp6oyx12t] { padding: 24px 16px; border: 1px dashed var(--border-default); border-radius: 18px; text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }
.lv-karte[b-dgp6oyx12t] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 16px; font-family: var(--font-ui); font-size: 13px; }
.lv-nicht-gefunden b[b-dgp6oyx12t] { font-family: var(--font-display); font-size: 18px; color: var(--text-strong); }
.lv-nicht-gefunden p[b-dgp6oyx12t] { margin: 8px 0 12px; color: var(--text-muted); font-family: var(--font-body); }
.lv-nicht-gefunden a[b-dgp6oyx12t] { color: var(--text-link); }

/* Ab Rechnerbreite scrollt nur die Liste; Kopf, Filter und Karte bleiben stehen. */
@media (min-width: 960px) {
    .lv[b-dgp6oyx12t] { height: 100%; box-sizing: border-box; overflow: hidden; }
    .lv-arbeit[b-dgp6oyx12t] { flex: 1; grid-template-rows: minmax(0, 1fr); }
    .lv-kopf[b-dgp6oyx12t] { position: sticky; top: 0; z-index: 1; }
    .lv-detail[b-dgp6oyx12t] { max-height: 100%; overflow-y: auto; }
}

/* Mobil: Liste ODER Karte, wie in der Social Inbox. Die Liste wird zu Karten, die Notiz steht vorn. */
@media (max-width: 959.98px) {
    .lv[b-dgp6oyx12t] { padding: 12px 14px; }
    .lv-arbeit[b-dgp6oyx12t] { display: block; }
    .lv.hat-auswahl .lv-liste[b-dgp6oyx12t], .lv.hat-auswahl .lv-banner[b-dgp6oyx12t] { display: none; }
    .lv:not(.hat-auswahl) .lv-detail[b-dgp6oyx12t] { display: none; }
    .lv-kopfzeile input[b-dgp6oyx12t] { max-width: none; height: 42px; font-size: 14px; }
    .lv-tabelle[b-dgp6oyx12t] { background: none; border: 0; overflow: visible; }
    .lv-tabelle ul[b-dgp6oyx12t] { display: flex; flex-direction: column; gap: 8px; }
    .lv-kopf[b-dgp6oyx12t], .lv-zeile .weg[b-dgp6oyx12t], .lv-zeile .knr[b-dgp6oyx12t] { display: none; }
    .lv-gruppe[b-dgp6oyx12t] { display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); padding: 6px 4px 0; }
    .lv-zeile[b-dgp6oyx12t] { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 11px 13px; }
    .lv-zeile .lf b[b-dgp6oyx12t] { font-size: 14px; }
    .lv-zeile .notiz-kurz[b-dgp6oyx12t] { display: block; grid-column: 1 / -1; font-family: var(--font-body); font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* /Einkauf/Pages/ErledigteZeile.razor.rz.scp.css */
.pb-ergebnis[b-08pw7spv9d] { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-sunken); }
.pb-ergebnis-kopf[b-08pw7spv9d] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pb-chip[b-08pw7spv9d] { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--border-soft); color: var(--text-body); font-size: var(--text-xs); font-weight: 700; }
.pb-chip.gut[b-08pw7spv9d] { background: var(--success-100); color: var(--success-600); }
.pb-wer[b-08pw7spv9d] { font-size: var(--text-xs); color: var(--text-muted); }
.pb-felder[b-08pw7spv9d] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--text-sm); }
.pb-felder dt[b-08pw7spv9d] { color: var(--text-muted); }
.pb-felder dd[b-08pw7spv9d] { margin: 0; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pb-neben[b-08pw7spv9d] { font-weight: 400; color: var(--text-muted); }
.pb-korrektur[b-08pw7spv9d] { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.pb-korrektur a[b-08pw7spv9d] { color: var(--text-link); }
/* /Einkauf/Pages/GewichtJeLiter.razor.rz.scp.css */
.gjl[b-f7wc6pb1lr] { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-top: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--sand-100); font-family: var(--font-ui); }
.gjl label[b-f7wc6pb1lr] { font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }
.gjl-zeile[b-f7wc6pb1lr] { display: flex; align-items: center; gap: 8px; }
.gjl-zeile input[b-f7wc6pb1lr] { width: 88px; height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-strong); }
.gjl-zeile input:focus-visible[b-f7wc6pb1lr] { outline: 2px solid var(--brand); outline-offset: 1px; }
.gjl-zeile span[b-f7wc6pb1lr] { font-size: var(--text-sm); color: var(--text-body); }
.gjl-merken[b-f7wc6pb1lr] { margin-left: auto; }
.gjl-hin[b-f7wc6pb1lr] { font-size: var(--text-xs); line-height: 1.45; color: var(--text-muted); }
.gjl-meldung[b-f7wc6pb1lr] { font-size: var(--text-xs); line-height: 1.45; color: var(--danger-600); }

.gjl-stand[b-f7wc6pb1lr] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: var(--text-xs); color: var(--text-muted); }
.gjl-aendern[b-f7wc6pb1lr] { padding: 0; border: 0; background: none; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); color: var(--text-link); cursor: pointer; }
.gjl-aendern:hover[b-f7wc6pb1lr] { text-decoration: underline; }
.gjl-aendern:focus-visible[b-f7wc6pb1lr] { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.gjl-aendern:disabled[b-f7wc6pb1lr] { opacity: .45; cursor: default; }

@media (pointer: coarse) {
    .gjl-zeile input[b-f7wc6pb1lr] { height: 44px; }
    .gjl-merken[b-f7wc6pb1lr] { height: 44px; }
    .gjl-aendern[b-f7wc6pb1lr] { min-height: 44px; }
}
/* /Einkauf/Pages/KiHinweisKasten.razor.rz.scp.css */
/* margin-top: auto hält den Kasten am unteren Rand der Karte, solange das Formular darüber sie nicht füllt. */
.pb-ki[b-721ebcglz3] { display: flex; flex-direction: column; gap: 6px; margin-top: auto; border: 1px dashed var(--border-default); border-radius: 12px; padding: 10px 12px; background: var(--surface-sunken); font-family: var(--font-ui); }
.pb-ki-kopf[b-721ebcglz3] { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.pb-ki-kopf b[b-721ebcglz3] { font-weight: 600; color: var(--text-strong); }
.pb-ki p[b-721ebcglz3] { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.45; color: var(--text-body); overflow-wrap: anywhere; }
.pb-ki-ware[b-721ebcglz3] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--text-sm); }
.pb-ki-ware span[b-721ebcglz3] { font-size: var(--text-xs); color: var(--text-muted); }
.pb-ki-ware b[b-721ebcglz3] { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
/* /Einkauf/Pages/LieferantArtikel.razor.rz.scp.css */
.la[b-eqzuk811td] { margin-top: 14px; }
.la-kopf[b-eqzuk811td] { display: flex; align-items: baseline; gap: 8px; }
.la-kopf .eyebrow[b-eqzuk811td] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.la-kopf .n[b-eqzuk811td] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }
.la-liste[b-eqzuk811td] { list-style: none; margin: 7px 0 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--surface-card); }
.la-zeile[b-eqzuk811td] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 11px; border-top: 1px solid var(--border-soft); font-family: var(--font-ui); }
.la-zeile:first-child[b-eqzuk811td] { border-top: none; }
.la-zeile .w[b-eqzuk811td] { display: flex; align-items: center; min-width: 0; }
.la-zeile a[b-eqzuk811td] { font-weight: 600; font-size: var(--text-sm); color: var(--brand-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-zeile .p[b-eqzuk811td] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); text-align: right; font-variant-numeric: tabular-nums; }
.la-zeile.ohne .p[b-eqzuk811td] { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--text-subtle); }
.la-zeile .s[b-eqzuk811td] { font-size: var(--text-xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-zeile .d[b-eqzuk811td] { font-size: var(--text-xs); color: var(--text-subtle); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.la-zeile .d.alt[b-eqzuk811td] { color: var(--warning-600); font-weight: 600; }
/* /Einkauf/Pages/LieferantBelegeAuswerten.razor.rz.scp.css */
/* Steht in der Umbruch-Zeile „Rechnungen auswerten“ der Karte und nimmt dort eine eigene Zeile ein. */
.lb[b-8bitdtq5hi] { flex-basis: 100%; margin-top: 4px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-ui); }
.lb-knopf[b-8bitdtq5hi] { width: 100%; height: 42px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-body); cursor: pointer; }
.lb-knopf:disabled[b-8bitdtq5hi] { opacity: .6; cursor: default; }
.lb-grenze[b-8bitdtq5hi] { margin: -4px 0 0; font-size: var(--text-xs); color: var(--text-subtle); }
.lb-ergebnis[b-8bitdtq5hi] { border-radius: 12px; padding: 10px 12px; background: var(--success-100); color: var(--success-600); line-height: 1.45; }
.lb-ergebnis a[b-8bitdtq5hi] { color: inherit; font-weight: 600; }
.lb-fehler[b-8bitdtq5hi] { border-radius: 12px; padding: 10px 12px; background: var(--warning-100); color: var(--warning-600); line-height: 1.45; }
/* /Einkauf/Pages/LieferantFormular.razor.rz.scp.css */
.lf-karte[b-u0bww4sd9y] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 16px; font-family: var(--font-ui); font-size: 12.5px; display: flex; flex-direction: column; gap: 10px; }
.lf-kopf b[b-u0bww4sd9y] { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text-strong); }
.lf-kopf span[b-u0bww4sd9y] { color: var(--text-subtle); }
.lf-konflikt[b-u0bww4sd9y] { border-radius: 12px; padding: 10px 12px; background: var(--warning-100); color: var(--warning-600); line-height: 1.45; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.lf-feld[b-u0bww4sd9y] { display: flex; flex-direction: column; min-width: 0; }
.fl[b-u0bww4sd9y] { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.lf-feld input[b-u0bww4sd9y], .lf-feld textarea[b-u0bww4sd9y] { border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); padding: 0 10px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-strong); }
.lf-feld input[b-u0bww4sd9y] { height: 34px; }
.lf-feld textarea[b-u0bww4sd9y] { padding: 8px 10px; line-height: 1.5; resize: vertical; min-height: 84px; }
.lf-feld input:focus[b-u0bww4sd9y], .lf-feld textarea:focus[b-u0bww4sd9y] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.lf-feld input.err[b-u0bww4sd9y] { border-color: var(--danger-600); }
.err-t[b-u0bww4sd9y] { font-size: 11px; color: var(--danger-600); margin-top: 3px; }
.zw[b-u0bww4sd9y] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.seg[b-u0bww4sd9y] { display: flex; flex-wrap: wrap; gap: 5px; }
.seg button[b-u0bww4sd9y] { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-card); display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-weight: 600; font-size: 11.5px; color: var(--text-muted); cursor: pointer; }
.seg button.on[b-u0bww4sd9y] { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-strong); }

.lf-hinweis[b-u0bww4sd9y] { font-size: 11px; color: var(--text-subtle); }
.lf-fuss[b-u0bww4sd9y] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px -16px -16px; padding: 12px 16px 14px; border-top: 1px solid var(--border-soft); background: var(--surface-page); border-radius: 0 0 18px 18px; }
.lf-knopf[b-u0bww4sd9y] { height: 38px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--text-body); cursor: pointer; }
.lf-knopf.pri[b-u0bww4sd9y] { background: var(--brand); border-color: transparent; color: var(--text-on-brand); }
.lf-knopf:disabled[b-u0bww4sd9y] { opacity: .45; cursor: default; }
.lf-fassung[b-u0bww4sd9y] { flex-basis: 100%; font-size: 11px; color: var(--text-subtle); }

@media (max-width: 959.98px) {
    .zw[b-u0bww4sd9y] { grid-template-columns: 1fr; }
    .lf-feld input[b-u0bww4sd9y] { height: 42px; font-size: 14px; }
}
/* /Einkauf/Pages/LieferantKarte.razor.rz.scp.css */
.lk[b-mg69q811j9] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 16px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-body); }
.lk-zurueck[b-mg69q811j9] { display: none; align-items: center; gap: 4px; margin-bottom: 10px; color: var(--text-link); text-decoration: none; font-weight: 600; }
.lk-kopf[b-mg69q811j9] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.lk-kopf b[b-mg69q811j9] { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text-strong); }
.lk-kopf span[b-mg69q811j9] { color: var(--text-subtle); }
.lk-weg[b-mg69q811j9] { margin-top: 4px; color: var(--text-muted); }
.pill[b-mg69q811j9] { font-family: var(--font-ui); font-style: normal; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pill.amb[b-mg69q811j9] { background: var(--warning-100); color: var(--warning-600); }
.pill.grau[b-mg69q811j9] { background: var(--surface-sunken); color: var(--text-subtle); }
.lk-warnung[b-mg69q811j9] { margin-top: 12px; border-radius: 12px; padding: 10px 12px; background: var(--warning-100); color: var(--warning-600); line-height: 1.45; }
.lk-auswertung[b-mg69q811j9] { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lk-auswertung-titel[b-mg69q811j9] { font-weight: 600; color: var(--text-strong); }
.lk-wahl[b-mg69q811j9] { display: flex; gap: 6px; }
.lk-wahl button[b-mg69q811j9] { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.lk-wahl button.an[b-mg69q811j9] { background: var(--brand-wash); border-color: transparent; color: var(--brand-strong); }
.lk-wahl button:disabled[b-mg69q811j9] { cursor: default; }
.lk-wahl button:disabled:not(.an)[b-mg69q811j9] { opacity: .5; }
.lk-auswertung p[b-mg69q811j9] { flex-basis: 100%; margin: 0; font-size: 11.5px; color: var(--text-subtle); }
.lk-auswertung .lk-warnung[b-mg69q811j9] { flex-basis: 100%; margin-top: 4px; }
.lk-leer[b-mg69q811j9] { margin-top: 14px; padding: 14px; border: 1px dashed var(--border-default); border-radius: 12px; color: var(--text-muted); font-family: var(--font-body); }

.lk-aktion[b-mg69q811j9] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.ak[b-mg69q811j9] { height: 54px; border-radius: 14px; border: 1.5px solid var(--border-default); background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-weight: 600; font-size: 12px; color: var(--brand); text-decoration: none; }
.ak.pri[b-mg69q811j9] { background: var(--brand); border-color: transparent; color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.ak.aus[b-mg69q811j9] { opacity: .4; color: var(--text-muted); }
button.ak[b-mg69q811j9] { width: 100%; padding: 0; font-family: inherit; cursor: pointer; }
.ak:focus-visible[b-mg69q811j9] { outline: 2px solid var(--brand); outline-offset: 2px; }

.lk-abschnitt[b-mg69q811j9] { margin-top: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.lk dl[b-mg69q811j9] { display: grid; grid-template-columns: 112px minmax(0, 1fr); row-gap: 6px; margin: 8px 0 0; }
.lk dt[b-mg69q811j9] { color: var(--text-subtle); }
.lk dd[b-mg69q811j9] { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lk dd.leer[b-mg69q811j9] { color: var(--text-subtle); font-style: italic; font-weight: 400; }
.lk-notiz[b-mg69q811j9] { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-page); font-family: var(--font-body); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.lk-stand[b-mg69q811j9] { margin-top: 6px; font-size: 11px; color: var(--text-subtle); }
.lk-bb[b-mg69q811j9] { margin-top: 14px; border-top: 1px dashed var(--border-soft); }
.lk-bb dd[b-mg69q811j9] { font-weight: 500; }

.lk-fuss[b-mg69q811j9] { margin: 14px -16px -16px; padding: 12px 16px 14px; border-top: 1px solid var(--border-soft); background: var(--surface-page); border-radius: 0 0 18px 18px; }
.lk-knopf[b-mg69q811j9] { width: 100%; height: 42px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--text-body); cursor: pointer; }

/* Am Telefon: die drei Bestell-Knöpfe sind der Zweck der Seite und werden größer. */
@media (max-width: 959.98px) {
    .lk-zurueck[b-mg69q811j9] { display: inline-flex; min-height: 44px; margin-bottom: 0; }
    .ak[b-mg69q811j9] { height: 64px; font-size: 12.5px; }
}
/* /Einkauf/Pages/PositionenBestaetigen.razor.rz.scp.css */
.pb[b-mrm8wmlsml] { display: flex; flex-direction: column; gap: 12px; padding: 16px 28px 18px; min-height: 0; }
.pb-banner[b-mrm8wmlsml] { border-radius: 14px; padding: 10px 13px; background: var(--warning-100); color: var(--warning-600); font-family: var(--font-ui); font-size: var(--text-sm); }
.pb-leer[b-mrm8wmlsml] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.pb-fertig[b-mrm8wmlsml] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; color: var(--success-600); background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; text-align: center; }
.pb-fertig b[b-mrm8wmlsml] { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-strong); }
.pb-fertig p[b-mrm8wmlsml] { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.pb-kopf[b-mrm8wmlsml] { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 12px 16px; }
.pb-lieferant[b-mrm8wmlsml] { display: flex; align-items: center; gap: 10px; color: var(--brand); min-width: 0; }
.pb-lieferant[b-mrm8wmlsml]  svg { flex-shrink: 0; }
.pb-lieferant > span[b-mrm8wmlsml] { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* Der Lieferantenname löst das Lieferanten-Menü aus (#2574). Über 260 px kürzt ihn die eigene Hülle mit „…“;
   Lage und Breite des geteilten Menüs setzt die Seite per ::deep. */
.pb-wahl[b-mrm8wmlsml] { position: relative; display: flex; min-width: 0; max-width: 100%; }
.pb-wahl-knopf[b-mrm8wmlsml] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; color: var(--text-strong); cursor: pointer; text-align: left; }
.pb-wahl-knopf:hover[b-mrm8wmlsml] { color: var(--brand-strong); }
.pb-wahl-knopf:focus-visible[b-mrm8wmlsml] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.pb-wahl-name[b-mrm8wmlsml] { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-chevron[b-mrm8wmlsml] { display: inline-flex; flex: none; color: var(--text-subtle); }
.pb-wahl[b-mrm8wmlsml]  .am-menue { top: calc(100% + 8px); left: -10px; width: min(320px, calc(100vw - 80px)); }
.pb-lieferant small[b-mrm8wmlsml] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }

.pb-daten[b-mrm8wmlsml] { display: flex; gap: 22px; margin: 0; }
.pb-daten dt[b-mrm8wmlsml] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.pb-daten dd[b-mrm8wmlsml] { margin: 2px 0 0; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-offen[b-mrm8wmlsml] { color: var(--warning-600); }

.pb-pdf-link[b-mrm8wmlsml] { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--text-link); text-decoration: none; }
.pb-pdf-link:hover[b-mrm8wmlsml] { text-decoration: underline; }

.pb-blaettern[b-mrm8wmlsml] { margin-left: auto; display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: 999px; overflow: hidden; }
.pb-blaettern button[b-mrm8wmlsml] { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 0; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-body); cursor: pointer; }
.pb-blaettern button:hover:not(:disabled)[b-mrm8wmlsml] { background: var(--surface-page); }
.pb-blaettern button:disabled[b-mrm8wmlsml] { color: var(--text-subtle); cursor: default; }
.pb-blaettern button:focus-visible[b-mrm8wmlsml] { outline: 2px solid var(--brand); outline-offset: -2px; }
.pb-position[b-mrm8wmlsml] { padding: 0 12px; height: 34px; display: inline-flex; align-items: center; gap: 4px; background: var(--brand-wash); color: var(--brand-strong); font-family: var(--font-ui); font-size: var(--text-sm); white-space: nowrap; }

.pb-arbeit[b-mrm8wmlsml] { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px; min-height: 0; align-items: start; }

@media (min-width: 960px) {
    .pb[b-mrm8wmlsml] { height: 100%; box-sizing: border-box; overflow: hidden; }
    .pb-arbeit[b-mrm8wmlsml] { flex: 1; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
}

/* Das Beleg-PDF daneben erst am breiten Monitor. Ausgeblendet lädt der Rahmen mit loading="lazy" nicht (in Edge gemessen),
   sonst holte jeder Belegwechsel das PDF aus BuchhaltungsButler. */
.pb-pdf[b-mrm8wmlsml] { display: none; }

@media (min-width: 2200px) {
    .pb-arbeit[b-mrm8wmlsml] { grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr); }
    .pb-pdf[b-mrm8wmlsml] { display: block; width: 100%; height: 100%; min-height: 0; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface-card); }
}

@media (pointer: coarse) {
    .pb-blaettern button[b-mrm8wmlsml], .pb-position[b-mrm8wmlsml] { height: 44px; }
    .pb-wahl-knopf[b-mrm8wmlsml] { min-height: 44px; }
}

/* Zeilenliste: am Rechner Spalte im Raster (Hülle per display: contents weg), am Telefon ein Blatt über der Karte (#2535). */
.pb-zeilen[b-mrm8wmlsml] { display: contents; }
.pb-blatt[b-mrm8wmlsml] { display: contents; }
.pb-schleier[b-mrm8wmlsml], .pb-blatt-kopf[b-mrm8wmlsml] { display: none; }

@media (max-width: 959.98px) {
    .pb[b-mrm8wmlsml] { padding: 12px 16px 16px; gap: 10px; }
    .pb-kopf[b-mrm8wmlsml] { gap: 8px 16px; padding: 10px 14px; }
    .pb-lieferant[b-mrm8wmlsml] { flex: 1 1 100%; }
    .pb-wahl-name[b-mrm8wmlsml] { max-width: none; }
    .pb-daten[b-mrm8wmlsml] { flex-wrap: wrap; gap: 6px 18px; }
    .pb-blaettern[b-mrm8wmlsml] { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
    .pb-position[b-mrm8wmlsml] { flex: 1; justify-content: center; }
    .pb-pdf-link[b-mrm8wmlsml] { min-height: 36px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-size: var(--text-sm); }

    .pb-arbeit[b-mrm8wmlsml] { grid-template-columns: minmax(0, 1fr); }

    .pb-zeilen[b-mrm8wmlsml] { display: none; }
    .pb-zeilen.offen[b-mrm8wmlsml] { display: block; }
    .pb-zeilen.offen .pb-schleier[b-mrm8wmlsml] { display: block; position: fixed; inset: 0; z-index: 1400; border: 0; background: color-mix(in srgb, var(--ink-900) 38%, transparent); }
    .pb-zeilen.offen .pb-blatt[b-mrm8wmlsml] { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1401; max-height: 85dvh; background: var(--surface-card); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg); padding-bottom: env(safe-area-inset-bottom); }
    .pb-zeilen.offen .pb-blatt-kopf[b-mrm8wmlsml] { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px 18px; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); }
    .pb-blatt-zu[b-mrm8wmlsml] { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: none; color: var(--text-muted); cursor: pointer; }
    .pb-zeilen.offen .pb-blatt[b-mrm8wmlsml]  .pb-tabelle { flex: 1; min-height: 0; border: 0; border-radius: 0; }
}
/* /Einkauf/Pages/PreisuebernahmeDialog.razor.rz.scp.css */
.pu-text[b-e8i2xyhnn2] { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.pu-liste[b-e8i2xyhnn2] { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.pu-liste li[b-e8i2xyhnn2] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.pu-liste li:last-child[b-e8i2xyhnn2] { border-bottom: 0; }
.pu-liste .n[b-e8i2xyhnn2] { flex: 1; min-width: 0; font-weight: 600; color: var(--text-strong); }
.pu-liste .feld[b-e8i2xyhnn2] { display: block; margin-top: 1px; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
.pu-liste .alt[b-e8i2xyhnn2] { color: var(--text-muted); text-decoration: line-through; white-space: nowrap; }
.pu-liste .neu[b-e8i2xyhnn2] { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.pu-wirkung[b-e8i2xyhnn2] { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pu-wirkung b[b-e8i2xyhnn2] { display: block; font-weight: 600; color: var(--text-strong); }
/* /Einkauf/Pages/RohstoffpreiseSeite.razor.rz.scp.css */
/* Nur was der Arbeitsliste eigen ist. Fläche, Banner, Laufstreifen, Pillen, Tabelle und Zustands-Pille stehen geteilt
   in wwwroot/css/finanz-components.css; die Zeile bringt ihre eigenen Stile mit (RohstoffpreisZeile.razor.css). */

.rp code[b-0a7qvxpfxf] { font-size: inherit; background: var(--surface-card); border-radius: 4px; padding: 0 4px; }
.rp-kopfzeile[b-0a7qvxpfxf] { flex-wrap: wrap; }
.rp-kopfzeile .fz-pillen[b-0a7qvxpfxf] { flex-wrap: wrap; }

.rp-kasten[b-0a7qvxpfxf] { width: 36px; }
.rp-rohstoff[b-0a7qvxpfxf] { width: 21%; }
/* Breit genug für „53,75 € je Gebinde · 1 × 25 kg“ in einer Zeile. */
.rp-heute[b-0a7qvxpfxf] { width: 178px; }
.rp-stand[b-0a7qvxpfxf] { width: 204px; }

.rp-nicht-verfuegbar[b-0a7qvxpfxf] { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; }
.rp-nicht-verfuegbar .text[b-0a7qvxpfxf] { max-width: 520px; }

.rp-protokoll[b-0a7qvxpfxf] { flex: none; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.rp-protokoll summary[b-0a7qvxpfxf] { padding: 10px 14px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-body); cursor: pointer; }
.rp-protokoll summary:focus-visible[b-0a7qvxpfxf] { outline: 2px solid var(--brand); outline-offset: -2px; }
.rp-protokoll .zahl[b-0a7qvxpfxf] { margin-left: 6px; border-radius: var(--radius-pill); padding: 1px 7px; background: var(--surface-sunken); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rp-protokoll .fz-tabelle[b-0a7qvxpfxf] { border: 0; border-top: 1px solid var(--border-soft); border-radius: 0; max-height: 260px; }
.rp-protokoll td[b-0a7qvxpfxf] { cursor: default; vertical-align: top; }
.rp-feld[b-0a7qvxpfxf] { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-subtle); }
.rp-meldung[b-0a7qvxpfxf] { display: block; max-width: 340px; margin-top: 4px; white-space: normal; font-size: var(--text-xs); line-height: 1.45; color: var(--danger-600); }

@media (min-width: 960px) {
    .rp-tabelle[b-0a7qvxpfxf] { flex: 1; min-height: 180px; }
}

/* Schmal werden Arbeitsliste und Protokoll zu Karten (Muster der Abgleich-Seite); wie eine Zeile darin steht, sagt
   RohstoffpreisZeile.razor.css. Das Protokoll scrollt dann nicht mehr in sich, die Seite scrollt. */
@media (max-width: 959.98px) {
    .rp-kopfzeile .fz-suche[b-0a7qvxpfxf] { flex: 1 1 100%; margin-left: 0; }
    .rp-kopfzeile .fz-suche input[b-0a7qvxpfxf] { width: 100%; box-sizing: border-box; }
    .rp-tabelle thead[b-0a7qvxpfxf], .rp-protokoll thead[b-0a7qvxpfxf] { display: none; }
    .rp-tabelle table[b-0a7qvxpfxf], .rp-tabelle tbody[b-0a7qvxpfxf], .rp-protokoll table[b-0a7qvxpfxf], .rp-protokoll tbody[b-0a7qvxpfxf] { display: block; }

    .rp-protokoll .fz-tabelle[b-0a7qvxpfxf] { max-height: none; }
    .rp-protokoll tr[b-0a7qvxpfxf] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
    .rp-protokoll td[b-0a7qvxpfxf] { display: block; padding: 0; border: 0; white-space: normal; }
    .rp-protokoll td.wer[b-0a7qvxpfxf] { grid-area: 1 / 1; }
    .rp-protokoll .rpp-wann[b-0a7qvxpfxf] { grid-area: 1 / 2; text-align: right; font-size: var(--text-xs); color: var(--text-subtle); }
    .rp-protokoll td.rpp-bisher[b-0a7qvxpfxf] { grid-area: 2 / 1; text-align: left; }
    .rp-protokoll td.rpp-neu[b-0a7qvxpfxf] { grid-area: 2 / 2; }
    .rp-protokoll .rpp-ausgang[b-0a7qvxpfxf] { grid-area: 3 / 1; }
    .rp-protokoll .rpp-von[b-0a7qvxpfxf] { grid-area: 3 / 2; text-align: right; font-size: var(--text-xs); color: var(--text-muted); }
    .rpp-bisher[b-0a7qvxpfxf]::before, .rpp-neu[b-0a7qvxpfxf]::before { content: attr(data-titel); display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
    .rp-meldung[b-0a7qvxpfxf] { max-width: none; }
}

@media (pointer: coarse) {
    .rp .fz-pillen button[b-0a7qvxpfxf], .rp .fz-suche input[b-0a7qvxpfxf] { height: 44px; }
}
/* /Einkauf/Pages/RohstoffpreisZeile.razor.rz.scp.css */
/* Die Zellen umbrechen und sind keine Klickfläche: die geteilte Tabelle (finanz-components.css) geht von einzeiligen,
   wählbaren Zeilen aus. */
.rpz td[b-7hwvzbhn28] { white-space: normal; cursor: default; vertical-align: top; padding: 12px; }
.rpz.ruhig td[b-7hwvzbhn28] { background: var(--surface-page); }

.rpz-kasten[b-7hwvzbhn28] { width: 36px; }
.rpz-kasten input[b-7hwvzbhn28] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); cursor: pointer; }
.rpz-kasten input:disabled[b-7hwvzbhn28] { cursor: default; }

.rpz-rohstoff b[b-7hwvzbhn28] { display: block; font-weight: 600; font-size: var(--text-base); color: var(--text-strong); }
.rpz-rohstoff span[b-7hwvzbhn28] { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }

.rpz-heute[b-7hwvzbhn28] { white-space: nowrap; }
.rpz-heute b[b-7hwvzbhn28] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.rpz-heute small[b-7hwvzbhn28] { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
/* Woraus sich der Kilopreis ergibt, darf umbrechen: „53,75 € je Gebinde · 1 × 25 kg“ ist breiter als die Spalte. */
.rpz-heute small.woraus[b-7hwvzbhn28] { display: block; margin-top: 2px; white-space: normal; color: var(--text-subtle); }
.rpz-heute .leer[b-7hwvzbhn28] { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--text-subtle); }

/* Die Angaben einer Bezugsquelle umbrechen unter dem Preis, nicht unter dem Auswahlknopf. */
.rpz-quelle[b-7hwvzbhn28] { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 4px -10px; padding: 5px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.rpz-quelle.an[b-7hwvzbhn28] { background: var(--brand-wash); border-color: var(--brand-soft); }
.rpz-quelle input[b-7hwvzbhn28] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer; }
.rpz-quelle input:disabled[b-7hwvzbhn28] { cursor: default; }
.rpz-quelle .was[b-7hwvzbhn28] { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 9px; min-width: 0; }
.rpz-quelle b[b-7hwvzbhn28] { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.rpz-quelle .wer[b-7hwvzbhn28] { color: var(--text-body); }
.rpz-quelle .ware[b-7hwvzbhn28], .rpz-quelle .wann[b-7hwvzbhn28], .rpz-quelle .umgerechnet[b-7hwvzbhn28] { font-size: var(--text-xs); color: var(--text-muted); }
.rpz-quelle .tag[b-7hwvzbhn28] { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--sand-100); font-style: normal; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

.rpz .hin[b-7hwvzbhn28] { display: block; margin-top: 4px; font-size: var(--text-xs); line-height: 1.45; color: var(--text-muted); }
.rpz .hin.rot[b-7hwvzbhn28] { color: var(--danger-600); }

.rpz-stand .fz-zustand[b-7hwvzbhn28] { display: inline-flex; align-items: center; gap: 5px; }
.rpz-hochrechnung[b-7hwvzbhn28] { display: block; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpz-wirkung[b-7hwvzbhn28] { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }
.rpz-menge[b-7hwvzbhn28] { display: block; margin-top: 1px; font-size: var(--text-xs); color: var(--text-muted); }
.rpz-zuordnen[b-7hwvzbhn28] { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-link); text-decoration: none; white-space: nowrap; }
.rpz-zuordnen:hover[b-7hwvzbhn28] { text-decoration: underline; }
.rpz-zuordnen:focus-visible[b-7hwvzbhn28] { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Schmal wird jede Zeile eine Karte (Muster der Abgleich-Seite): Kasten links, daneben untereinander Rohstoff, Stand,
   RezeptAssist heute und die Bezugsquellen. Die Spaltenüberschrift fehlt dort, deshalb trägt „heute“ sie selbst. */
@media (max-width: 959.98px) {
    .rpz[b-7hwvzbhn28] { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
    .rpz.ruhig[b-7hwvzbhn28] { background: var(--surface-page); }
    .rpz td[b-7hwvzbhn28] { display: block; padding: 0; border: 0; background: none; }
    .rpz-kasten[b-7hwvzbhn28] { grid-area: 1 / 1 / 5 / 2; width: auto; }
    .rpz-rohstoff[b-7hwvzbhn28] { grid-area: 1 / 2; }
    .rpz-stand[b-7hwvzbhn28] { grid-area: 2 / 2; }
    .rpz td.rpz-heute[b-7hwvzbhn28] { grid-area: 3 / 2; text-align: left; white-space: normal; }
    .rpz-heute:not([data-titel])[b-7hwvzbhn28] { display: none; }
    .rpz-heute[b-7hwvzbhn28]::before { content: attr(data-titel); display: block; margin-bottom: 1px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
    .rpz-einkauf[b-7hwvzbhn28] { grid-area: 4 / 2; }
    .rpz-quelle[b-7hwvzbhn28] { margin-left: 0; }
    .rpz-hochrechnung[b-7hwvzbhn28] { white-space: normal; }
}

@media (pointer: coarse) {
    .rpz-kasten input[b-7hwvzbhn28] { width: 24px; height: 24px; }
    .rpz-quelle[b-7hwvzbhn28] { padding: 9px 10px; }
    .rpz-quelle input[b-7hwvzbhn28] { width: 20px; height: 20px; }
}
/* /Einkauf/Pages/WareBearbeiten.razor.rz.scp.css */
.wb-karte[b-tt6fajr1ww] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 16px; font-family: var(--font-ui); font-size: var(--text-sm); display: flex; flex-direction: column; gap: 10px; }
.wb-meldung[b-tt6fajr1ww] { border-radius: 12px; padding: 10px 12px; background: var(--warning-100); color: var(--warning-600); line-height: 1.45; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wb-feld[b-tt6fajr1ww] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wb-feld .fl[b-tt6fajr1ww] { font-weight: 600; color: var(--text-muted); }
.wb-feld input[b-tt6fajr1ww] { height: 38px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); padding: 0 10px; font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-strong); }
.wb-feld input:focus[b-tt6fajr1ww] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.wb-tipp[b-tt6fajr1ww] { color: var(--text-subtle); }
.wb-bio[b-tt6fajr1ww] { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); cursor: pointer; }
.wb-gewaehlt[b-tt6fajr1ww] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; min-height: 38px; padding: 4px 10px; border-radius: 10px; background: var(--brand-wash); color: var(--brand-strong); font-weight: 600; }
.wb-gewaehlt.leer[b-tt6fajr1ww] { background: var(--surface-sunken); color: var(--text-subtle); font-weight: 500; }
.wb-rohstoff-name[b-tt6fajr1ww] { min-width: 0; overflow-wrap: anywhere; }
.wb-vorschlaege[b-tt6fajr1ww] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; border: 1px dashed var(--border-default); border-radius: 12px; padding: 8px 10px; background: var(--surface-sunken); color: var(--text-muted); }
.wb-rohstoff-liste[b-tt6fajr1ww] { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--border-soft); border-radius: 12px; }
.wb-rohstoff-option[b-tt6fajr1ww] { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); text-align: left; cursor: pointer; }
.wb-rohstoff-option:hover[b-tt6fajr1ww] { background: var(--surface-page); }
.wb-kein-treffer[b-tt6fajr1ww] { display: block; padding: 7px 8px; }
.wb-fuss[b-tt6fajr1ww] { display: flex; justify-content: flex-end; gap: 8px; }
.wb-knopf[b-tt6fajr1ww] { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); cursor: pointer; }
.wb-knopf.pri[b-tt6fajr1ww] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.wb-knopf:disabled[b-tt6fajr1ww] { opacity: .5; cursor: default; }

@media (pointer: coarse) {
    .wb-feld input[b-tt6fajr1ww], .wb-knopf[b-tt6fajr1ww], .wb-rohstoff-option[b-tt6fajr1ww] { min-height: 44px; }
}
/* /Einkauf/Pages/ZeileKarte.razor.rz.scp.css */
/* Karte und alle drei Formulare: die Formulare sind Kind-Komponenten, daher ::deep unter .pb-karte. */
.pb-karte[b-w6ms0l3snw] { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 14px 16px; overflow-y: auto; font-family: var(--font-ui); }

.pb-karte-kopf[b-w6ms0l3snw] { display: flex; flex-direction: column; gap: 6px; }
.pb-karte-zeile[b-w6ms0l3snw] { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); color: var(--text-subtle); }
.pb-pfeile[b-w6ms0l3snw] { display: inline-flex; gap: 4px; }
.pb-pfeile button[b-w6ms0l3snw] { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-card); color: var(--text-muted); cursor: pointer; }
.pb-karte h3[b-w6ms0l3snw] { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.pb-meta[b-w6ms0l3snw] { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: var(--text-xs); }
.pb-meta div[b-w6ms0l3snw] { display: flex; gap: 5px; }
.pb-meta dt[b-w6ms0l3snw] { color: var(--text-subtle); }
.pb-meta dd[b-w6ms0l3snw] { margin: 0; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }

.pb-konflikt[b-w6ms0l3snw], .pb-meldung[b-w6ms0l3snw] { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-radius: 12px; padding: 10px 12px; background: var(--warning-100); color: var(--warning-600); font-size: var(--text-sm); line-height: 1.45; }
.pb-knopf[b-w6ms0l3snw] { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-body); cursor: pointer; }
.pb-hinweis[b-w6ms0l3snw], .pb-karte[b-w6ms0l3snw]  .pb-hinweis { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

/* flex: none – mit overflow: hidden schrumpfte die Leiste sonst auf einen Strich, sobald der Karteninhalt höher ist als die Karte (#2297). */
.pb-reiter[b-w6ms0l3snw] { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
.pb-reiter button[b-w6ms0l3snw] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 8px; border: 0; border-right: 1px solid var(--border-soft); background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); cursor: pointer; }
.pb-reiter button:last-child[b-w6ms0l3snw] { border-right: 0; }
.pb-reiter button.an[b-w6ms0l3snw] { background: var(--brand-wash); color: var(--brand-strong); box-shadow: inset 0 -2px 0 var(--brand); }
.pb-reiter button:disabled[b-w6ms0l3snw] { color: var(--text-subtle); opacity: .6; cursor: not-allowed; }

.pb-karte[b-w6ms0l3snw]  .pb-formular { display: flex; flex-direction: column; gap: 14px; }
.pb-karte[b-w6ms0l3snw]  section { display: flex; flex-direction: column; gap: 8px; }
.pb-karte[b-w6ms0l3snw]  h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.pb-karte[b-w6ms0l3snw]  .pb-schritt { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand); color: var(--text-on-brand); font-size: var(--text-2xs); }
.pb-karte[b-w6ms0l3snw]  .pb-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-karte[b-w6ms0l3snw]  .pb-label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-muted); }
.pb-karte[b-w6ms0l3snw]  .pb-label small { color: var(--text-subtle); }
.pb-karte[b-w6ms0l3snw]  input { height: 36px; border: 1px solid var(--border-default); border-radius: 10px; padding: 0 10px; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); min-width: 0; }
.pb-karte[b-w6ms0l3snw]  input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pb-karte[b-w6ms0l3snw]  .pb-reihe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.pb-karte[b-w6ms0l3snw]  .pb-gebinde-zeile { display: flex; gap: 6px; }
.pb-karte[b-w6ms0l3snw]  .pb-gebinde { width: 80px; }
.pb-karte[b-w6ms0l3snw]  .pb-einheiten { display: inline-flex; border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; }
.pb-karte[b-w6ms0l3snw]  .pb-einheiten button { padding: 0 10px; border: 0; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); cursor: pointer; }
.pb-karte[b-w6ms0l3snw]  .pb-einheiten button.an { background: var(--brand); color: var(--text-on-brand); }


.pb-karte[b-w6ms0l3snw]  .pb-probe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; border-radius: 12px; padding: 9px 11px; font-size: var(--text-sm); line-height: 1.4; }
.pb-karte[b-w6ms0l3snw]  .pb-probe.gut { background: var(--success-100); color: var(--success-600); }
.pb-karte[b-w6ms0l3snw]  .pb-probe.warn { background: var(--warning-100); color: var(--warning-600); }
.pb-karte[b-w6ms0l3snw]  .pb-probe span { flex: 1; min-width: 0; }
.pb-karte[b-w6ms0l3snw]  .pb-probe-gewicht { height: 30px; padding: 0 12px; border: 1px solid currentColor; border-radius: 999px; background: var(--surface-card); color: inherit; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }

.pb-karte[b-w6ms0l3snw]  .pb-waren { display: flex; flex-direction: column; gap: 6px; }
.pb-karte[b-w6ms0l3snw]  .pb-ware-gewaehlt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--brand-wash); color: var(--brand-strong); }
.pb-karte[b-w6ms0l3snw]  .pb-ware-gewaehlt span { display: flex; flex-direction: column; }
.pb-karte[b-w6ms0l3snw]  .pb-ware-gewaehlt b { font-size: var(--text-sm); }
.pb-karte[b-w6ms0l3snw]  .pb-ware-gewaehlt small { font-size: var(--text-xs); color: var(--text-muted); }
.pb-karte[b-w6ms0l3snw]  .pb-suchfeld { display: flex; align-items: center; gap: 6px; padding-left: 10px; border: 1px solid var(--border-default); border-radius: 10px; color: var(--text-subtle); }
.pb-karte[b-w6ms0l3snw]  .pb-suchfeld input { flex: 1; border: 0; }
.pb-karte[b-w6ms0l3snw]  .pb-ware-liste { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--border-soft); border-radius: 12px; }
.pb-karte[b-w6ms0l3snw]  .pb-ware-gruppe { padding: 6px 8px 2px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.pb-karte[b-w6ms0l3snw]  .pb-ware-option, .pb-karte[b-w6ms0l3snw]  .pb-ware-neu { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); text-align: left; cursor: pointer; }
.pb-karte[b-w6ms0l3snw]  .pb-ware-option:hover, .pb-karte[b-w6ms0l3snw]  .pb-ware-neu:hover { background: var(--surface-page); }
.pb-karte[b-w6ms0l3snw]  .pb-ware-option.an { background: var(--brand-wash); color: var(--brand-strong); font-weight: 600; }
.pb-karte[b-w6ms0l3snw]  .pb-ware-neu { color: var(--text-link); font-weight: 600; }
.pb-karte[b-w6ms0l3snw]  .pb-bio { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; }

.pb-karte[b-w6ms0l3snw]  .pb-aktionen { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.pb-karte[b-w6ms0l3snw]  .pb-bestaetigen { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--brand); color: var(--text-on-brand); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.pb-karte[b-w6ms0l3snw]  .pb-bestaetigen:disabled, .pb-karte[b-w6ms0l3snw]  .pb-ueberspringen:disabled { opacity: .5; cursor: not-allowed; }
.pb-karte[b-w6ms0l3snw]  .pb-ueberspringen { height: 38px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-body); cursor: pointer; }
.pb-karte[b-w6ms0l3snw]  .pb-fehlt { margin: 0; font-size: var(--text-xs); color: var(--text-subtle); }

.pb-karte[b-w6ms0l3snw]  .pb-quellen { display: flex; flex-direction: column; gap: 6px; }
.pb-karte[b-w6ms0l3snw]  .pb-quelle { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); font-family: var(--font-ui); text-align: left; cursor: pointer; }
.pb-karte[b-w6ms0l3snw]  .pb-quelle.an { border-color: var(--brand); background: var(--brand-wash); box-shadow: inset 0 0 0 1px var(--brand); }
.pb-karte[b-w6ms0l3snw]  .pb-quelle b { font-size: var(--text-sm); color: var(--text-strong); }
.pb-karte[b-w6ms0l3snw]  .pb-quelle small { font-size: var(--text-xs); color: var(--text-muted); }
.pb-karte[b-w6ms0l3snw]  .pb-keine-quellen { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.pb-karte[b-w6ms0l3snw]  .pb-gruende { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-karte[b-w6ms0l3snw]  .pb-grund { height: 32px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--text-body); cursor: pointer; }
.pb-karte[b-w6ms0l3snw]  .pb-grund.an { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-strong); }

@media (pointer: coarse) {
    .pb-reiter button[b-w6ms0l3snw], .pb-karte[b-w6ms0l3snw]  .pb-bestaetigen, .pb-karte[b-w6ms0l3snw]  .pb-ueberspringen, .pb-karte[b-w6ms0l3snw]  input,
    .pb-karte[b-w6ms0l3snw]  .pb-quelle, .pb-karte[b-w6ms0l3snw]  .pb-grund { min-height: 44px; }
}

/* Den Knopf zur Zeilenliste gibt es nur am Telefon; am Rechner steht die Liste daneben. */
.pb-zeilen-knopf[b-w6ms0l3snw] { display: none; }

/* Telefon (#2535): die Karte scrollt mit der Seite, die Aktionen kleben unten am Daumen. */
@media (max-width: 959.98px) {
    .pb-karte[b-w6ms0l3snw] { overflow: visible; border-radius: 20px; }
    .pb-zeile-nr[b-w6ms0l3snw] { display: none; }
    .pb-zeilen-knopf[b-w6ms0l3snw] { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-link); cursor: pointer; }
    .pb-zeilen-knopf b[b-w6ms0l3snw] { font-weight: 700; }
    .pb-pfeile button[b-w6ms0l3snw] { width: 40px; height: 40px; border-radius: 999px; }
    .pb-karte h3[b-w6ms0l3snw] { font-size: var(--text-xl); }

    .pb-reiter[b-w6ms0l3snw] { border-radius: 999px; padding: 4px; gap: 4px; background: var(--surface-sunken); border: 0; }
    .pb-reiter button[b-w6ms0l3snw] { min-height: 44px; border: 0; border-radius: 999px; background: none; white-space: normal; line-height: 1.15; font-size: var(--text-sm); }
    .pb-reiter button.an[b-w6ms0l3snw] { background: var(--surface-card); box-shadow: var(--shadow-sm); }
    .pb-reiter[b-w6ms0l3snw]  svg { display: none; }

    .pb-karte[b-w6ms0l3snw]  input { height: 44px; font-size: var(--text-base); }
    .pb-karte[b-w6ms0l3snw]  .pb-reihe { grid-template-columns: minmax(0, 1fr); }
    .pb-karte[b-w6ms0l3snw]  .pb-gebinde { width: 96px; }
    .pb-karte[b-w6ms0l3snw]  .pb-einheiten { flex: 1; }
    .pb-karte[b-w6ms0l3snw]  .pb-einheiten button { flex: 1; min-height: 44px; font-size: var(--text-sm); }
    .pb-karte[b-w6ms0l3snw]  .pb-ware-option, .pb-karte[b-w6ms0l3snw]  .pb-ware-neu { min-height: 44px; }
    .pb-karte[b-w6ms0l3snw]  .pb-quelle, .pb-karte[b-w6ms0l3snw]  .pb-grund { min-height: 44px; }

    .pb-karte[b-w6ms0l3snw]  .pb-aktionen { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px -14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface-card); border-top: 1px solid var(--border-soft); border-radius: 0 0 20px 20px; }
    /* Einzeilige Texte; reicht die Breite nicht (320 px), rutscht „Überspringen“ in die zweite Zeile. */
    .pb-karte[b-w6ms0l3snw]  .pb-bestaetigen { flex: 1 0 auto; justify-content: center; height: 48px; padding: 0 12px; white-space: nowrap; }
    .pb-karte[b-w6ms0l3snw]  .pb-ueberspringen { flex: 1 0 auto; height: 48px; }
}
/* /Label/Pages/Batch.razor.rz.scp.css */
/* PDF-Vorschau (Lieferdatum-Stapel) */
.pdf-preview[b-cua2q874t9] {
    width: 100%;
    height: 75vh;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    margin-top: 8px;
}
/* /Label/Pages/Single.razor.rz.scp.css */
/* PDF-Vorschau (Einzeldruck) */
.pdf-preview[b-eblo7d508c] {
    width: 100%;
    height: 75vh;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    margin-top: 8px;
}
/* /Lieferschein/Components/AbweichungsKarte.razor.rz.scp.css */
.abwk-karte[b-2dqnk7vkcc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
}

.abwk-kopf[b-2dqnk7vkcc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.abwk-kunde[b-2dqnk7vkcc] {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-strong);
}

.abwk-tag[b-2dqnk7vkcc] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.abwk-unterschrift-knopf[b-2dqnk7vkcc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.abwk-unterschrift-bild[b-2dqnk7vkcc] {
    max-width: 260px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.abwk-hinweis[b-2dqnk7vkcc] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.abwk-tabelle[b-2dqnk7vkcc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.abwk-tabelle th[b-2dqnk7vkcc] {
    text-align: left;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--border-default);
}

.abwk-tabelle td[b-2dqnk7vkcc] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
}

.abwk-zeile-konflikt td[b-2dqnk7vkcc] {
    background: var(--warning-100);
    color: var(--warning-600);
}

.abwk-zeile-entfernt td[b-2dqnk7vkcc],
.abwk-zeile-neu td[b-2dqnk7vkcc] {
    color: var(--text-muted);
}

.abwk-konflikt[b-2dqnk7vkcc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.abwk-konflikt button[b-2dqnk7vkcc] {
    border: 1px solid var(--warning-600);
    background: var(--surface-card);
    color: var(--warning-600);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.abwk-konflikt button.aktiv[b-2dqnk7vkcc] {
    background: var(--warning-600);
    color: var(--text-on-brand);
}

.abwk-lage-hinweis[b-2dqnk7vkcc] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.abwk-fehler[b-2dqnk7vkcc] {
    margin: 0;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
}

.abwk-uebernehmen[b-2dqnk7vkcc] {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.abwk-uebernehmen:disabled[b-2dqnk7vkcc] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}

.abwk-manuell[b-2dqnk7vkcc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.abwk-sperrgrund[b-2dqnk7vkcc] {
    flex: 1 1 100%;
    margin: 0;
    color: var(--text-body);
    font-size: 0.85rem;
}

.abwk-manuell-eingabe[b-2dqnk7vkcc] {
    flex: 1 1 240px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.7rem;
    font-family: var(--font-ui);
}

.abwk-manuell-knopf[b-2dqnk7vkcc] {
    flex: 0 0 auto;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.abwk-manuell-knopf:disabled[b-2dqnk7vkcc] {
    background: var(--border-default);
    color: var(--text-muted);
    cursor: not-allowed;
}
/* /Lieferschein/Components/FahrerKarte.razor.rz.scp.css */
.fk-flaeche[b-ergtuifwxs] {
    height: calc(100dvh - 14rem);
    min-height: 18rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
    isolation: isolate; /* Leaflet-Ebenen (z 400–1000) unter dem Drawer halten */
}

.fk-verortet[b-ergtuifwxs], .fk-ohne[b-ergtuifwxs] {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.fk-ohne[b-ergtuifwxs] { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.4rem; }
.fk-ohne li[b-ergtuifwxs] { display: flex; flex-direction: column; }
.fk-ohne strong[b-ergtuifwxs] { color: var(--text-strong); }

.fk-fehler[b-ergtuifwxs] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1rem; border-radius: var(--radius-md);
    background: var(--surface-card); color: var(--warning-600);
}

/* Die Blase erzeugt das Skript außerhalb dieses Komponenten-Markups — ::deep erreicht sie. */
[b-ergtuifwxs] .fk-blase { font-family: var(--font-ui); display: grid; gap: 0.35rem; min-width: 12rem; }
[b-ergtuifwxs] .fk-adresse, [b-ergtuifwxs] .fk-hinweis { color: var(--text-muted); font-size: var(--text-sm); }
[b-ergtuifwxs] .fk-oeffnen, [b-ergtuifwxs] .fk-navi { display: block; padding: 0.45rem 0; font-weight: 600; }
/* /Lieferschein/Components/OhneUnterschriftKarte.razor.rz.scp.css */
.ohuk-karte[b-p1jdwlx976] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
}

.ohuk-kopf[b-p1jdwlx976] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.ohuk-kunde[b-p1jdwlx976] {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-strong);
}

.ohuk-tag[b-p1jdwlx976] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ohuk-grund[b-p1jdwlx976] {
    margin: 0;
    color: var(--warning-600);
    background: var(--warning-100);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.ohuk-fehler[b-p1jdwlx976] {
    margin: 0;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
}

.ohuk-aktionen[b-p1jdwlx976] {
    display: flex;
    gap: 0.6rem;
}

.ohuk-bestaetigen[b-p1jdwlx976] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}

.ohuk-bestaetigen:disabled[b-p1jdwlx976] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}

.ohuk-klaeren[b-p1jdwlx976] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}

.ohuk-klaeren:disabled[b-p1jdwlx976] {
    color: var(--text-muted);
    cursor: not-allowed;
}

.ohuk-klaeren-feld[b-p1jdwlx976] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ohuk-klaeren-eingabe[b-p1jdwlx976] {
    flex: 1 1 260px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.7rem;
    font-family: var(--font-ui);
}

.ohuk-klaeren-knopf[b-p1jdwlx976] {
    flex: 0 0 auto;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.ohuk-klaeren-knopf:disabled[b-p1jdwlx976] {
    background: var(--border-default);
    color: var(--text-muted);
    cursor: not-allowed;
}
/* /Lieferschein/Components/SpontanKarte.razor.rz.scp.css */
.spok-karte[b-l85n3lrxzk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
}

.spok-kopf[b-l85n3lrxzk] {
    display: flex;
    flex-direction: column;
}

.spok-kunde[b-l85n3lrxzk] {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-strong);
}

.spok-tag[b-l85n3lrxzk] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.spok-fehler[b-l85n3lrxzk] {
    margin: 0;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
}

.spok-knopf[b-l85n3lrxzk] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0.55rem 1.1rem;
    cursor: pointer;
}

.spok-knopf:disabled[b-l85n3lrxzk] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}
/* /Lieferschein/Components/Unterschriftsfeld.razor.rz.scp.css */
.usf-feld[b-s1fbwq5zxh] {
    position: relative;
    width: 100%;
    height: 220px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    touch-action: none;
    overflow: hidden;
}

.usf-leinwand[b-s1fbwq5zxh] {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.usf-platzhalter[b-s1fbwq5zxh] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-family: var(--font-ui);
    pointer-events: none;
}

.usf-loeschen[b-s1fbwq5zxh] {
    align-self: flex-end;
    margin-top: 0.4rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    cursor: pointer;
}

.usf-loeschen:disabled[b-s1fbwq5zxh] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Trefferfläche am Telefon und an jedem Fingergerät — vorher ein Textknopf von rund 20 px. */
@media (max-width: 959.98px), (pointer: coarse) {
    .usf-loeschen[b-s1fbwq5zxh] {
        min-height: 44px;
        padding: 0 0.9rem;
    }
}
/* /Lieferschein/Pages/LieferungAbschluss.razor.rz.scp.css */
.absch-seite[b-zwsbmt5fz7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 2rem;
    font-family: var(--font-ui);
}

.absch-laedt[b-zwsbmt5fz7] {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
    font-family: var(--font-ui);
}

.absch-fehler[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-family: var(--font-ui);
}

.absch-fehler button[b-zwsbmt5fz7] {
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid var(--danger-600);
    background: transparent;
    color: var(--danger-600);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}


.absch-unvollstaendig[b-zwsbmt5fz7] {
    background: var(--warning-100);
    color: var(--warning-600);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    margin: 0;
}

.absch-abweichungen[b-zwsbmt5fz7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.absch-abweichungen h2[b-zwsbmt5fz7] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-ui);
}

/* Eine Karte, die Abweichungen darin durch Linien getrennt — wie auf der Leinwand. */
.absch-abweichungen-liste[b-zwsbmt5fz7] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0 0.9rem;
}

.absch-abweichung-zeile[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--warning-600);
}

.absch-abweichung-zeile:last-child[b-zwsbmt5fz7] {
    border-bottom: none;
}

.absch-abweichung-text[b-zwsbmt5fz7] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.absch-artikel[b-zwsbmt5fz7] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-strong);
}

.absch-soll[b-zwsbmt5fz7] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.absch-ist[b-zwsbmt5fz7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--text-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.absch-ist[b-zwsbmt5fz7]  svg {
    color: var(--text-muted);
}

.absch-wie-bestellt[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.absch-feld[b-zwsbmt5fz7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.absch-feld label[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-body);
}

.absch-pflicht[b-zwsbmt5fz7] {
    font-size: 0.7rem;
    color: var(--brand);
    font-weight: 600;
}

.absch-eingabe[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.5rem;
    padding: 0 0.9rem;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-muted);
}

.absch-eingabe input[b-zwsbmt5fz7] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.7rem 0;
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--text-strong);
}

.absch-eingabe:focus-within[b-zwsbmt5fz7] {
    border-color: var(--brand);
}

.absch-abschluss-fehler[b-zwsbmt5fz7] {
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    margin: 0;
}

.absch-abschliessen[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    min-height: 3.5rem;
    padding: 0 1rem;
    box-shadow: var(--shadow-brand);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
}

.absch-abschliessen:disabled[b-zwsbmt5fz7] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.absch-ausnahme-trenner[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.absch-ausnahme-trenner[b-zwsbmt5fz7]::before,
.absch-ausnahme-trenner[b-zwsbmt5fz7]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-default);
}

.absch-ohne-unterschrift[b-zwsbmt5fz7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-pill);
    min-height: 3.25rem;
    padding: 0 1rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.absch-ohne-unterschrift:disabled[b-zwsbmt5fz7] {
    color: var(--text-muted);
    cursor: not-allowed;
}

.absch-ausnahme-hinweis[b-zwsbmt5fz7] {
    margin: -0.5rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.absch-zurueck[b-zwsbmt5fz7] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
}

/* Am Rechner trägt der PageHeader den Zurück-Pfeil. */
@media (min-width: 960px) {
    .absch-zurueck[b-zwsbmt5fz7] {
        display: none;
    }
}

@media (max-width: 480px) {
    .absch-seite[b-zwsbmt5fz7] {
        padding: 0.75rem;
    }
}
/* /Lieferschein/Pages/Lieferungen.razor.rz.scp.css */
.lief-seite[b-cxxzccbgci] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
}

/* Eine Zeile: Tag blättern (Mitte öffnet den Kalender) plus Liste/Karte (Canvas „Lieferungen Kopfbereich", Variante A). */
.lief-tage[b-cxxzccbgci] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lief-stepper[b-cxxzccbgci] {
    flex: 1;
    min-width: 0;
    height: 3.25rem;
    display: flex;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.lief-stepper button[b-cxxzccbgci] {
    border: none;
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    padding: 0;
}

.lief-stepper .pf[b-cxxzccbgci] {
    flex: none;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lief-stepper .pf:first-child[b-cxxzccbgci] { border-right: 1px solid var(--border-soft); }
.lief-stepper .pf:last-child[b-cxxzccbgci] { border-left: 1px solid var(--border-soft); }

.lief-stepper .mitte[b-cxxzccbgci] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-ui);
    color: var(--text-muted);
}

.lief-stepper .mitte b[b-cxxzccbgci] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sitzt auf der oberen Kante des Feldes, damit das Datum darunter seinen Platz behält. */
.lief-stepper .mitte em[b-cxxzccbgci] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: normal;
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1.4;
    color: var(--brand-strong);
    background: var(--brand-soft);
    border-radius: var(--radius-pill);
    padding: 0 0.5rem;
}

.lief-ansicht[b-cxxzccbgci] {
    flex: none;
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}

.ansicht[b-cxxzccbgci] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 13px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.ansicht.aktiv[b-cxxzccbgci] {
    background: var(--surface-card);
    color: var(--brand-strong);
    box-shadow: 0 1px 4px rgba(77, 77, 77, .14);
}

/* Das Eingabefeld des Pickers bleibt unsichtbar; sein Dialog liegt fest über der Seite. */
.lief-kalender[b-cxxzccbgci]  .mud-input-control {
    display: none;
}

.lief-fehler[b-cxxzccbgci] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-family: var(--font-ui);
}

.lief-fehler button[b-cxxzccbgci] {
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid var(--danger-600);
    background: transparent;
    color: var(--danger-600);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.lief-laedt[b-cxxzccbgci],
.lief-leer[b-cxxzccbgci] {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
    font-family: var(--font-ui);
}

.lief-karten[b-cxxzccbgci] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lief-karte[b-cxxzccbgci] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-left: 12px solid var(--ink-400);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.lief-karte a[b-cxxzccbgci] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 0.8rem 0.8rem 0.9rem;
    text-decoration: none;
    color: inherit;
}

.lief-kopf[b-cxxzccbgci] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lief-kunde[b-cxxzccbgci] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lief-tour[b-cxxzccbgci] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-ui);
}

.lief-zustand[b-cxxzccbgci] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.7rem;
    font-size: var(--text-xs);
    font-weight: 700;
    font-family: var(--font-ui);
    white-space: nowrap;
    border-radius: var(--radius-pill);
    padding: 0 0.7rem;
    background: var(--sand-100);
    color: var(--text-strong);
}

.lief-zustand[b-cxxzccbgci]  svg {
    color: var(--text-muted);
}

/* Je Zustand eine eigene Streifenfarbe, wie auf der Leinwand: offen neutral, begonnen Marke,
   ohne Unterschrift Warnung, abgeschlossen Erfolg auf gedämpfter Karte. */
.z-offen[b-cxxzccbgci] { border-left-color: var(--ink-400); }

.z-begonnen[b-cxxzccbgci] { border-left-color: var(--brand); }
.z-begonnen .lief-zustand[b-cxxzccbgci] { background: var(--brand-soft); }
.z-begonnen .lief-zustand[b-cxxzccbgci]  svg { color: var(--brand-strong); }

.z-abgeschlossen[b-cxxzccbgci] { border-left-color: var(--success-600); background: var(--sand-100); box-shadow: none; }
.z-abgeschlossen .lief-kunde[b-cxxzccbgci] { color: var(--text-body); }
.z-abgeschlossen .lief-zustand[b-cxxzccbgci] { background: var(--success-100); }
.z-abgeschlossen .lief-zustand[b-cxxzccbgci]  svg { color: var(--success-600); }

.z-ohneunterschrift[b-cxxzccbgci] { border-left-color: var(--warning-600); }
.z-ohneunterschrift .lief-zustand[b-cxxzccbgci] { background: var(--warning-100); }
.z-ohneunterschrift .lief-zustand[b-cxxzccbgci]  svg { color: var(--warning-600); }

.lief-meldung[b-cxxzccbgci] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--success-600);
    border-radius: var(--radius-md);
    background: var(--success-100);
    color: var(--success-600);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}

.lief-meldung span[b-cxxzccbgci] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--text-body);
}

.lief-meldung strong[b-cxxzccbgci] {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--text-strong);
}

/* Steht in der Aktionsleiste des PageHeader — auf dem Telefon unten am Daumen, auf dem
   Desktop oben rechts. Kein sticky/bottom mehr: die Leiste platziert selbst. */
.lief-spontan[b-cxxzccbgci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0.6rem 1.1rem;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    white-space: nowrap;
    text-decoration: none;
}

@media (max-width: 959.98px) {
    /* Am Daumen über die volle Breite der Leiste, wie der Abschluss-Knopf der Erfassung. */
    .lief-spontan[b-cxxzccbgci] {
        flex: 1;
        min-height: 3.5rem;
        font-weight: 600;
        box-shadow: var(--shadow-brand);
    }
}

@media (max-width: 480px) {
    .lief-seite[b-cxxzccbgci] {
        padding: 0.75rem;
    }
}

/* Unter 360 px passen Kalendersymbol und Datum nicht mehr nebeneinander. */
@media (max-width: 359.98px) {
    .lief-stepper .mitte[b-cxxzccbgci]  svg {
        display: none;
    }
}
/* /Lieferschein/Pages/LieferungErfassen.razor.rz.scp.css */
.erf-seite[b-hpvsd7rav3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 6rem;
}

.erf-laedt[b-hpvsd7rav3] {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
    font-family: var(--font-ui);
}

.erf-fehler[b-hpvsd7rav3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-family: var(--font-ui);
}

.erf-fehler button[b-hpvsd7rav3] {
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid var(--danger-600);
    background: transparent;
    color: var(--danger-600);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

/* ── Sperrhinweis: ein anderes Gerät hält die Eingabe ─────────────────────── */
.erf-anspruch[b-hpvsd7rav3] {
    background: var(--warning-100);
    border: 1px solid var(--sand-300);
    border-radius: var(--radius-lg);
    padding: 0.9rem 0.95rem 0.95rem;
    font-family: var(--font-ui);
}

.erf-anspruch-kopf[b-hpvsd7rav3] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--warning-600);
}

.erf-anspruch-kopf[b-hpvsd7rav3]  svg {
    flex: none;
    margin-top: 0.1rem;
}

.erf-anspruch h2[b-hpvsd7rav3] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.erf-anspruch p[b-hpvsd7rav3] {
    margin: 0.2rem 0 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-body);
}

.erf-uebernehmen[b-hpvsd7rav3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 0.8rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-brand);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
}

.erf-kontakt[b-hpvsd7rav3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.erf-anruf[b-hpvsd7rav3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem; /* Daumengröße — angetippt wird im Stehen, oft mit Handschuh */
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    text-decoration: none;
}

.erf-anruf-text[b-hpvsd7rav3] {
    color: inherit;
}

.erf-ansprechpartner[b-hpvsd7rav3] {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: 0.95rem;
}

.erf-anruf-art[b-hpvsd7rav3] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.erf-kontakt-fehler[b-hpvsd7rav3] {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

/* ── Positionen: Zustand als Streifen links, Hintergrund und Rand der Mengen-Box ── */
.erf-positionen[b-hpvsd7rav3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.erf-zeile[b-hpvsd7rav3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-left: 12px solid var(--sand-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding-right: 0.8rem;
}

.erf-zeile.beruehrt[b-hpvsd7rav3] {
    border-left-color: var(--success-600);
    background: var(--success-100);
}

.erf-zeile.abweichend[b-hpvsd7rav3] {
    border-left-color: var(--warning-600);
    background: var(--warning-100);
}

.erf-zeile.gesperrt[b-hpvsd7rav3] {
    border-left-color: var(--sand-300);
    background: var(--sand-100);
    box-shadow: none;
}

.erf-name[b-hpvsd7rav3] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.75rem 0.4rem 0.75rem 0.8rem;
    cursor: pointer;
    font-family: var(--font-ui);
}

.erf-artikel[b-hpvsd7rav3] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    line-height: 1.2;
    color: var(--text-strong);
}

.erf-karton[b-hpvsd7rav3] {
    font-size: var(--text-xs);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.erf-abweichung[b-hpvsd7rav3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.erf-abweichung[b-hpvsd7rav3]  svg {
    color: var(--warning-600);
}

.erf-status[b-hpvsd7rav3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-body);
}

.erf-zeile.beruehrt .erf-status[b-hpvsd7rav3]  svg {
    color: var(--success-600);
}

.erf-zeile.offen .erf-status[b-hpvsd7rav3],
.erf-zeile.gesperrt .erf-status[b-hpvsd7rav3] {
    color: var(--text-muted);
}

.erf-menge[b-hpvsd7rav3] {
    flex: none;
    width: 5.75rem;
    min-height: 3.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-strong);
    cursor: pointer;
}

.erf-menge-zahl[b-hpvsd7rav3] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-2xl);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.erf-menge-einheit[b-hpvsd7rav3] {
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-muted);
}

.erf-zeile.offen .erf-menge[b-hpvsd7rav3] {
    border: 2px dashed var(--border-strong);
}

.erf-zeile.offen .erf-menge-zahl[b-hpvsd7rav3] {
    color: var(--text-muted);
}

.erf-zeile.beruehrt .erf-menge[b-hpvsd7rav3] {
    border-color: var(--success-600);
}

.erf-zeile.abweichend .erf-menge[b-hpvsd7rav3] {
    border: 2px solid var(--warning-600);
}

.erf-zeile.gesperrt .erf-menge[b-hpvsd7rav3] {
    border: 1px solid var(--border-soft);
    background: var(--sand-050);
}

.erf-zeile.gesperrt .erf-artikel[b-hpvsd7rav3],
.erf-zeile.gesperrt .erf-menge-zahl[b-hpvsd7rav3] {
    color: var(--text-muted);
}

.erf-zeile button:disabled[b-hpvsd7rav3] {
    cursor: not-allowed;
}

.erf-zurueck[b-hpvsd7rav3] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: 0 0.75rem;
    text-decoration: none;
}

/* ── Abschlussleiste: Fortschritt links, Abschließen rechts ──────────────────
   Sitzt in <Actions> des PageHeader: am Telefon unten am Daumen, am Rechner oben rechts. */
.erf-leiste[b-hpvsd7rav3] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.erf-fortschritt[b-hpvsd7rav3] {
    display: flex;
    flex-direction: column;
    width: 12rem;
    font-family: var(--font-ui);
}

.erf-fortschritt-zahl[b-hpvsd7rav3] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.erf-fortschritt-rest[b-hpvsd7rav3] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erf-balken[b-hpvsd7rav3] {
    display: block;
    height: 8px;
    margin-top: 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--sand-200);
    overflow: hidden;
}

.erf-balken-fuellung[b-hpvsd7rav3] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand);
}

/* Doppelte Klasse: schlägt die 44-px-Mindesthöhe, die der PageHeader allen Knöpfen der Leiste gibt. */
.erf-leiste .erf-abschluss[b-hpvsd7rav3] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0 1.4rem;
    box-shadow: var(--shadow-brand);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-base);
    white-space: nowrap;
    cursor: pointer;
}

.erf-leiste .erf-abschluss:disabled[b-hpvsd7rav3] {
    background: var(--sand-200);
    color: var(--text-body);
    border: 2px dashed var(--border-strong);
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 959.98px) {
    .erf-leiste[b-hpvsd7rav3] {
        flex: 1;
        min-width: 0;
    }

    .erf-fortschritt[b-hpvsd7rav3] {
        flex: 1;
        min-width: 0;
        width: auto;
    }
}

@media (max-width: 480px) {
    .erf-seite[b-hpvsd7rav3] {
        padding: 0.75rem;
    }
}
/* /Lieferschein/Pages/LieferungFreigabe.razor.rz.scp.css */
.frg-seite[b-dnl71oeqte] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 2rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--font-ui);
}

.frg-kopf h1[b-dnl71oeqte] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--text-strong);
}

.frg-unterzeile[b-dnl71oeqte] {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
}

.frg-fehler[b-dnl71oeqte] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

.frg-fehler button[b-dnl71oeqte] {
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid var(--danger-600);
    background: transparent;
    color: var(--danger-600);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.frg-laedt[b-dnl71oeqte] {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
}

.frg-abschnitt[b-dnl71oeqte] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.frg-abschnitt h2[b-dnl71oeqte] {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-ui);
}

.frg-leer[b-dnl71oeqte] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

@media (max-width: 720px) {
    .frg-seite[b-dnl71oeqte] {
        padding: 1rem;
    }
}
/* /Lieferschein/Pages/MengeSheet.razor.rz.scp.css */
.menge-artikel[b-obr3mabzxq] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--text-strong);
}

.menge-unterzeile[b-obr3mabzxq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-variant-numeric: tabular-nums;
}

.menge-bestellt[b-obr3mabzxq],
.menge-karton-kopf[b-obr3mabzxq] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.menge-karton-kopf[b-obr3mabzxq]::before {
    content: "·";
    margin-right: 0.45rem;
    color: var(--border-strong);
}

.menge-schnellwerte[b-obr3mabzxq] {
    display: flex;
    gap: 0.6rem;
}

.menge-schnellwerte button[b-obr3mabzxq] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3.25rem;
    border: 1.5px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-pill);
    padding: 0 0.5rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
}
/* /Lieferschein/Pages/OhneUnterschriftSheet.razor.rz.scp.css */
.ous-ueberlagerung[b-4ynajfp95j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 30;
}

.ous-blatt[b-4ynajfp95j] {
    width: 100%;
    max-width: 640px;
    background: var(--surface-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-brand);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--font-ui);
}

.ous-blatt h2[b-4ynajfp95j] {
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-strong);
}

.ous-hinweis[b-4ynajfp95j] {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ous-gruende[b-4ynajfp95j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ous-gruende button[b-4ynajfp95j] {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-md);
    padding: 0.7rem;
    text-align: left;
    font-family: var(--font-ui);
    cursor: pointer;
}

.ous-gruende button.aktiv[b-4ynajfp95j] {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand-strong);
}

.ous-blatt textarea[b-4ynajfp95j] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.6rem;
    font-family: var(--font-ui);
    min-height: 4rem;
    resize: vertical;
}

.ous-aktionen[b-4ynajfp95j] {
    display: flex;
    gap: 0.5rem;
}

.ous-aktionen button[b-4ynajfp95j] {
    flex: 1 1 0;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.8rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    cursor: pointer;
}

.ous-aktionen [data-test="ohne-unterschrift-schliessen"][b-4ynajfp95j] {
    background: var(--surface-sunken);
    color: var(--text-body);
}

.ous-aktionen [data-test="ohne-unterschrift-bestaetigen"][b-4ynajfp95j] {
    background: var(--danger-600);
    color: var(--text-on-brand);
}

.ous-aktionen [data-test="ohne-unterschrift-bestaetigen"]:disabled[b-4ynajfp95j] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}

@media (max-width: 959.98px), (pointer: coarse) {
    .ous-gruende button[b-4ynajfp95j] {
        min-height: 52px;
    }

    .ous-aktionen button[b-4ynajfp95j] {
        min-height: 44px;
    }
}
/* /Lieferschein/Pages/SpontanAbschluss.razor.rz.scp.css */
.spa-seite[b-9l9ctyirpu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 6rem;
    font-family: var(--font-ui);
}

.spa-abschnitt[b-9l9ctyirpu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spa-abschnitt h2[b-9l9ctyirpu] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.spa-uebergeben[b-9l9ctyirpu] {
    list-style: none;
    margin: 0;
    padding: 0 0.9rem;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.spa-uebergeben li[b-9l9ctyirpu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.5rem 0;
    color: var(--text-muted);
}

.spa-uebergeben li + li[b-9l9ctyirpu] {
    border-top: 1px solid var(--border-soft);
}

.spa-text[b-9l9ctyirpu] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.spa-name[b-9l9ctyirpu] {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.spa-nr[b-9l9ctyirpu] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.spa-menge[b-9l9ctyirpu] {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-strong);
}

.spa-feld[b-9l9ctyirpu] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.spa-feld label[b-9l9ctyirpu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-sm);
    color: var(--text-body);
}

.spa-pflicht[b-9l9ctyirpu] {
    font-size: var(--text-2xs);
    color: var(--brand);
    font-weight: 600;
}

.spa-feld input[b-9l9ctyirpu] {
    min-height: 48px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.8rem;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--text-strong);
}

.spa-abschluss-fehler[b-9l9ctyirpu] {
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    margin: 0;
    font-size: var(--text-sm);
}

.spa-anlage-fehler[b-9l9ctyirpu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--danger-100);
    color: var(--text-body);
    border-radius: var(--radius-md);
    padding: 0.9rem;
    font-size: var(--text-sm);
}

.spa-anlage-fehler strong[b-9l9ctyirpu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--text-strong);
}

.spa-anlage-fehler strong[b-9l9ctyirpu]  svg {
    color: var(--danger-600);
}

.spa-anlage-fehler button[b-9l9ctyirpu],
.spa-abschliessen[b-9l9ctyirpu] {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    padding: 0.7rem 1rem;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

.spa-anlage-fehler button:disabled[b-9l9ctyirpu],
.spa-abschliessen:disabled[b-9l9ctyirpu] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}

.spa-ausnahme-trenner[b-9l9ctyirpu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.spa-ausnahme-trenner[b-9l9ctyirpu]::before,
.spa-ausnahme-trenner[b-9l9ctyirpu]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-default);
}

.spa-ohne-unterschrift[b-9l9ctyirpu] {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-pill);
    padding: 0.7rem 1rem;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    cursor: pointer;
}

.spa-ohne-unterschrift:disabled[b-9l9ctyirpu] {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* In der Aktionsleiste: nur nach gescheiterter Anlage, als Ausgang zur Tagesliste. */
.spa-zur-liste[b-9l9ctyirpu] {
    flex: 1 1 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.2rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .spa-seite[b-9l9ctyirpu] {
        padding: 0.75rem;
        padding-bottom: 6rem;
    }
}
/* /Lieferschein/Pages/SpontaneLieferung.razor.rz.scp.css */
.spon-seite[b-oztjjg3bqx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 6rem;
    font-family: var(--font-ui);
}

.spon-abschnitt[b-oztjjg3bqx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spon-abschnitt h2[b-oztjjg3bqx] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.spon-suchfeld[b-oztjjg3bqx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 0.25rem 0 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.spon-suchfeld:focus-within[b-oztjjg3bqx] {
    border-color: var(--brand);
    background: var(--surface-card);
}

.spon-suchfeld input[b-oztjjg3bqx] {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--text-strong);
}

/* Das eigene Kreuz räumt auf — das des Browsers würde daneben ein zweites zeichnen. */
.spon-suchfeld input[b-oztjjg3bqx]::-webkit-search-cancel-button {
    display: none;
}

.spon-suchfeld button[b-oztjjg3bqx] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.spon-treffer[b-oztjjg3bqx],
.spon-positionen[b-oztjjg3bqx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spon-treffer button[b-oztjjg3bqx] {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--brand);
    padding: 0.6rem 0.9rem;
    font-family: var(--font-ui);
    cursor: pointer;
}

.spon-treffer button.erfasst[b-oztjjg3bqx] {
    background: var(--surface-sunken);
    color: var(--success-600);
}

/* Lange Namen kürzen statt die Zeile zu sprengen: min-width:0 hängt an der eigenen Hülle. */
.spon-text[b-oztjjg3bqx] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.spon-name[b-oztjjg3bqx] {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.spon-nr[b-oztjjg3bqx] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.spon-kunde-karte[b-oztjjg3bqx],
.spon-positionen li[b-oztjjg3bqx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 64px;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    border-radius: var(--radius-md);
    border-left: 6px solid var(--brand);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.spon-aendern[b-oztjjg3bqx] {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    cursor: pointer;
}

.spon-pos-menge[b-oztjjg3bqx] {
    flex: 0 0 auto;
    min-width: 5.5rem;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-strong);
    cursor: pointer;
}

.spon-pos-zahl[b-oztjjg3bqx] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.1;
}

.spon-pos-menge small[b-oztjjg3bqx] {
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.spon-hinweis[b-oztjjg3bqx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.spon-hinweis-text[b-oztjjg3bqx] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: var(--text-sm);
}

.spon-hinweis-text strong[b-oztjjg3bqx] {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--text-strong);
}

.spon-hinweis-fehler[b-oztjjg3bqx] {
    border-color: transparent;
    background: var(--danger-100);
    color: var(--danger-600);
}

.spon-hinweis button[b-oztjjg3bqx] {
    flex: 1 1 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    cursor: pointer;
}

/* In der Aktionsleiste des PageHeader: am Telefon unten am Daumen, am Desktop oben rechts. */
.spon-leiste[b-oztjjg3bqx] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.spon-leiste-stand[b-oztjjg3bqx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
}

.spon-leiste-stand strong[b-oztjjg3bqx] {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--text-strong);
}

.spon-leiste-stand small[b-oztjjg3bqx] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spon-weiter[b-oztjjg3bqx] {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--text-on-brand);
    padding: 0 1.4rem;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.spon-weiter:disabled[b-oztjjg3bqx] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .spon-seite[b-oztjjg3bqx] {
        padding: 0.75rem;
        padding-bottom: 6rem;
    }
}
/* /Lieferschein/Pages/SpontanMengeSheet.razor.rz.scp.css */
.spm-artikel[b-gx0ni9ap6a] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-strong);
}

.spm-unterzeile[b-gx0ni9ap6a] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.spm-entfernen[b-gx0ni9ap6a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--danger-600);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    cursor: pointer;
}
/* /Lieferschein/Pages/ZiffernBlatt.razor.rz.scp.css */
.menge-ueberlagerung[b-7ninzvd7mz] {
    position: fixed;
    inset: 0;
    background: rgba(77, 77, 77, 0.42);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 30;
}

.menge-blatt[b-7ninzvd7mz] {
    width: 100%;
    max-width: 640px;
    background: var(--surface-card);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -14px 40px rgba(77, 77, 77, 0.2);
    padding: 0.9rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--font-ui);
}

.menge-griff[b-7ninzvd7mz] {
    width: 44px;
    height: 5px;
    margin: 0 auto;
    border-radius: var(--radius-pill);
    background: var(--sand-200);
}

.menge-kopf[b-7ninzvd7mz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menge-eingabe[b-7ninzvd7mz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0 0;
}

.menge-gross[b-7ninzvd7mz] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3.25rem;
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.menge-gross small[b-7ninzvd7mz] {
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.4rem;
}

.menge-hinweis[b-7ninzvd7mz] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.menge-ziffernblock[b-7ninzvd7mz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.menge-ziffernblock button[b-7ninzvd7mz] {
    min-height: 3.75rem;
    border: 1px solid var(--border-soft);
    background: var(--sand-100);
    color: var(--text-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.menge-ziffernblock .menge-taste-neben[b-7ninzvd7mz] {
    background: var(--surface-card);
    border-color: var(--border-default);
    color: var(--text-body);
    font-size: 1.25rem;
}

.menge-aktionen[b-7ninzvd7mz] {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.15rem;
}

.menge-aktionen button[b-7ninzvd7mz] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
}

.menge-aktionen [data-test="menge-abbrechen"][b-7ninzvd7mz] {
    background: var(--surface-card);
    border: 1.5px solid var(--border-default);
    color: var(--text-body);
}

.menge-aktionen [data-test="menge-uebernehmen"][b-7ninzvd7mz] {
    background: var(--brand);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-brand);
}

.menge-aktionen [data-test="menge-uebernehmen"]:disabled[b-7ninzvd7mz] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
}
/* /Meetings/Pages/AufgabeKarte.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: Aufgabe als Zeile ohne Rahmen, Frist rechts; Größen auf der Typo-Skala. */
.aufg[b-19vryulga7] { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.45; color: var(--text-body); }
.aufg.aktiv[b-19vryulga7] { margin: 0 -8px; padding: 7px 8px; border-radius: 8px; border-bottom-color: transparent; background: var(--brand-wash); }
.aufg-punkt[b-19vryulga7] { flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--text-subtle); }
.aufg-text[b-19vryulga7] { flex: 1; min-width: 0; }
.aufg-wo[b-19vryulga7] { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }
.aufg-wer[b-19vryulga7] { font-family: var(--font-ui); font-weight: 700; color: var(--text-muted); }
.aufg-frist[b-19vryulga7] { flex: none; padding-top: 1px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aufg-frist.dringend[b-19vryulga7] { color: var(--danger-600); }
.aufg-frist.in-worten[b-19vryulga7] { max-width: 9rem; font-weight: 500; white-space: normal; text-align: right; }
.aufg-beleg[b-19vryulga7] { flex: none; }

@media print {
    .aufg[b-19vryulga7], .aufg.aktiv[b-19vryulga7] { margin: 0; padding: 3px 0; border: 0; background: none; break-inside: avoid; }
}
/* /Meetings/Pages/AufnahmenKarte.razor.rz.scp.css */
/* Entwurf „Meeting-Protokolle“, Abschnitt 2 (rechte Karte) und 5c; Größen auf der Typo-Skala. */
.card[b-h3tc7ix7gw] { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; }
.cardhead[b-h3tc7ix7gw] { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.cardtitle[b-h3tc7ix7gw] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); }
.luft[b-h3tc7ix7gw] { flex: 1; }

.chip[b-h3tc7ix7gw] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--sand-100); color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.chip.ok[b-h3tc7ix7gw] { background: var(--success-100); color: var(--success-600); border-color: transparent; }
.chip.lauf[b-h3tc7ix7gw] { background: var(--blue-100); color: var(--blue-700); border-color: transparent; }
.chip.err[b-h3tc7ix7gw] { background: var(--danger-100); color: var(--danger-600); border-color: transparent; }

/* Das Dateifeld liegt unsichtbar über der ganzen Fläche: Klicken und Ablegen treffen es überall. */
.drop[b-h3tc7ix7gw] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; padding: 16px; border: 1.5px dashed var(--border-strong); border-radius: 14px; text-align: center; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.drop:not(.zu)[b-h3tc7ix7gw] { border-color: var(--brand); color: var(--brand-strong); }
.drop:not(.zu):hover[b-h3tc7ix7gw] { background: var(--brand-wash); }
.drop:focus-within[b-h3tc7ix7gw] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.drop.zu[b-h3tc7ix7gw], .drop.laeuft[b-h3tc7ix7gw] { opacity: .55; }
.drop[b-h3tc7ix7gw]  .drop-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop.laeuft[b-h3tc7ix7gw]  .drop-eingabe { cursor: default; }
.drop-titel[b-h3tc7ix7gw] { margin-top: 2px; font-weight: 700; }
.drop-hilfe[b-h3tc7ix7gw] { font-size: var(--text-xs); color: var(--text-muted); }

.meldung[b-h3tc7ix7gw] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; }
.meldung.fehler[b-h3tc7ix7gw] { background: var(--danger-100); color: var(--danger-600); }
.meldung.info[b-h3tc7ix7gw] { background: var(--sand-100); color: var(--text-muted); }
.meldung[b-h3tc7ix7gw]  svg { flex: none; margin-top: 1px; }
.meldung-text[b-h3tc7ix7gw] { flex: 1; min-width: 0; }

.teile[b-h3tc7ix7gw] { list-style: none; margin: 0; padding: 0; }
.teil[b-h3tc7ix7gw] { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); }
.teil:last-child[b-h3tc7ix7gw] { border-bottom: 0; }
.teil-nr[b-h3tc7ix7gw] { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sand-200); color: var(--text-muted); font-weight: 700; font-size: var(--text-xs); }
.teil-text[b-h3tc7ix7gw] { flex: 1; min-width: 0; }
.teil-name[b-h3tc7ix7gw] { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); overflow-wrap: anywhere; }
.teil-meta[b-h3tc7ix7gw] { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-subtle); }

.balken[b-h3tc7ix7gw] { display: block; width: 100%; height: 6px; margin-top: 6px; border: 0; border-radius: var(--radius-pill); background: var(--sand-200); overflow: hidden; appearance: none; }
.balken[b-h3tc7ix7gw]::-webkit-progress-bar { background: var(--sand-200); border-radius: var(--radius-pill); }
.balken[b-h3tc7ix7gw]::-webkit-progress-value { background: var(--brand); border-radius: var(--radius-pill); }
.balken[b-h3tc7ix7gw]::-moz-progress-bar { background: var(--brand); border-radius: var(--radius-pill); }

.btn[b-h3tc7ix7gw] { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
.btn:disabled[b-h3tc7ix7gw] { opacity: .45; cursor: default; }
.btn:focus-visible[b-h3tc7ix7gw] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

@media (pointer: coarse) {
    .btn[b-h3tc7ix7gw] { min-height: 44px; }
    .drop[b-h3tc7ix7gw] { min-height: 88px; justify-content: center; }
}
/* /Meetings/Pages/BelegChip.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: ein Chip „n Stellen“ je Zeile; Größen auf der Typo-Skala. */
.beleg[b-j0qann1sqc] { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--brand-soft); border-radius: var(--radius-pill); background: var(--brand-wash); color: var(--brand-strong); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); line-height: 1.5; white-space: nowrap; }
button.beleg[b-j0qann1sqc] { cursor: pointer; }
button.beleg:hover[b-j0qann1sqc] { background: var(--blue-100); }
button.beleg:focus-visible[b-j0qann1sqc] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.beleg.aktiv[b-j0qann1sqc], .beleg.aktiv:hover[b-j0qann1sqc] { border-color: var(--brand); background: var(--brand); color: var(--text-on-brand); }
.beleg.text[b-j0qann1sqc] { border-color: var(--border-soft); background: var(--sand-100); color: var(--text-subtle); }

/* Die Trefferfläche wächst unsichtbar auf 44 px, die Zeilenhöhe bleibt. */
@media (pointer: coarse) {
    button.beleg[b-j0qann1sqc] { position: relative; }
    button.beleg[b-j0qann1sqc]::after { content: ""; position: absolute; inset: -12px -4px; }
}

/* Auf Papier gibt es nichts zu öffnen. */
@media print {
    .beleg[b-j0qann1sqc] { display: none; }
}
/* /Meetings/Pages/EintragListe.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: Zeile einer Kachel; Größen auf der Typo-Skala. */
.eintraege[b-mls9srtjoy] { margin: 0; padding: 0; list-style: none; }
.aussage[b-mls9srtjoy] { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.45; color: var(--text-body); }
.aussage.aktiv[b-mls9srtjoy] { margin: 0 -8px; padding: 7px 8px; border-radius: 8px; border-bottom-color: transparent; background: var(--brand-wash); }
.punkt[b-mls9srtjoy] { flex: none; width: 0.75rem; font-family: var(--font-ui); font-weight: 700; color: var(--text-subtle); }
.aussage-text[b-mls9srtjoy] { flex: 1; min-width: 0; }
.aussage-beleg[b-mls9srtjoy] { flex: none; }

@media print {
    .aussage[b-mls9srtjoy], .aussage.aktiv[b-mls9srtjoy] { margin: 0; padding: 3px 0; border: 0; background: none; }
}
/* /Meetings/Pages/MeetingProtokoll.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B (#3065); Größen auf der Typo-Skala.
   Grundform (Telefon und Druck): alles untereinander. Ab 960 px passt die Seite ohne Scrollen ins Fenster. */
.pr[b-xa4iggh0du] { display: flex; flex-direction: column; gap: 12px; padding: 12px 28px 18px; }
.pr-laedt[b-xa4iggh0du] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.btn[b-xa4iggh0du] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.btn.pri[b-xa4iggh0du] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.btn.pri:hover:not(:disabled)[b-xa4iggh0du] { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn.klein[b-xa4iggh0du] { gap: 6px; padding: 5px 12px; font-size: var(--text-xs); }
.btn.warn[b-xa4iggh0du] { background: var(--warning-100); border-color: color-mix(in srgb, var(--warning-600) 30%, var(--warning-100)); color: var(--warning-600); }
.btn:disabled[b-xa4iggh0du] { opacity: .45; cursor: default; }
.btn:focus-visible[b-xa4iggh0du] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.pr-desktop[b-xa4iggh0du], .pr-mobil[b-xa4iggh0du] { display: inline-flex; align-items: center; gap: 7px; }
.pr-mobil[b-xa4iggh0du] { display: none; }

.meldung[b-xa4iggh0du] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; }
.meldung.lauf[b-xa4iggh0du] { background: var(--blue-100); color: var(--blue-700); }
.meldung.fehler[b-xa4iggh0du] { align-items: center; background: var(--danger-100); color: var(--danger-600); }
.meldung.info[b-xa4iggh0du] { background: var(--sand-100); color: var(--text-muted); }
.meldung[b-xa4iggh0du]  svg { flex: none; margin-top: 1px; }
.meldung-text[b-xa4iggh0du] { flex: 1; min-width: 0; }

.pr-ansicht[b-xa4iggh0du] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.pr-reiter[b-xa4iggh0du] { display: none; gap: 4px; border-bottom: 1px solid var(--border-soft); }
.pr-tab[b-xa4iggh0du] { padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.pr-tab.on[b-xa4iggh0du] { color: var(--brand-strong); border-bottom-color: var(--brand); }
.pr-tab:focus-visible[b-xa4iggh0du] { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }

.ki[b-xa4iggh0du] { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 12px; background: var(--rose-100); color: var(--accent-strong); font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; }
.ki[b-xa4iggh0du]  svg { flex: none; }
.ki-text[b-xa4iggh0du] { flex: 1; min-width: 0; }
.ki-text b[b-xa4iggh0du] { color: var(--text-body); }

@media (pointer: coarse) {
    .btn[b-xa4iggh0du], .pr-tab[b-xa4iggh0du] { min-height: 44px; }
}

/* Höhe wie auf der Händlerkarte aus dem Fenster abgeleitet: 100dvh − 70 px Topbar (PageHeader);
   die Kacheln teilen sich, was nach Meldungen und KI-Hinweis bleibt. Nichts wird gemessen. */
@media screen and (min-width: 960px) {
    .pr[b-xa4iggh0du] { height: calc(100dvh - 70px); min-height: 520px; box-sizing: border-box; }
    .pr-ansicht[b-xa4iggh0du] { flex: 1; min-height: 0; }
    .pr-inhalt[b-xa4iggh0du] { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
}

/* Telefon: Reiter Protokoll/Transkript, die Aktionen unten am Daumen je halb breit. Den Knopf „Transkript“
   ersetzt dort der Reiter. */
@media screen and (max-width: 959.98px) {
    .pr[b-xa4iggh0du] { padding: 12px 14px; }
    .pr-reiter[b-xa4iggh0du] { display: flex; }
    .zeigt-transkript .ki[b-xa4iggh0du], .zeigt-transkript .pr-inhalt[b-xa4iggh0du] { display: none; }
    .pr-aktion[b-xa4iggh0du] { flex: 1; }
    .pr-transkript-knopf[b-xa4iggh0du] { display: none; }
    .pr-desktop[b-xa4iggh0du] { display: none; }
    .pr-mobil[b-xa4iggh0du] { display: inline-flex; }
}

/* Druckansicht des Browsers: nur das Protokoll; die Kennzeichnung steht in der Kopfzeile des Druckblatts. */
@media print {
    .pr[b-xa4iggh0du] { display: block; padding: 0; }
    .meldung[b-xa4iggh0du], .pr-reiter[b-xa4iggh0du], .ki[b-xa4iggh0du] { display: none; }
}
/* /Meetings/Pages/MeetingTermin.razor.rz.scp.css */
/* Entwurf „Meeting-Protokolle“, Abschnitt 2 (Termin) und 5d/5e/5h; Größen auf der Typo-Skala. */
.mt[b-jcudtmtst9] { display: flex; flex-direction: column; gap: 16px; padding: 16px 28px 18px; }
.mt-laedt[b-jcudtmtst9] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.mt-spalten[b-jcudtmtst9] { display: flex; align-items: flex-start; gap: 16px; }
.mt-links[b-jcudtmtst9] { flex: none; width: 32.5rem; min-width: 0; }
.mt-rechts[b-jcudtmtst9] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.btn[b-jcudtmtst9] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn.pri[b-jcudtmtst9] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.btn.pri:hover[b-jcudtmtst9] { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn.gefahr[b-jcudtmtst9] { background: var(--danger-600); border-color: var(--danger-600); color: var(--text-on-brand); }
.btn.klein[b-jcudtmtst9] { padding: 6px 12px; font-size: var(--text-xs); }
.btn:disabled[b-jcudtmtst9] { opacity: .45; cursor: default; }
.btn:focus-visible[b-jcudtmtst9] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.chip[b-jcudtmtst9] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.chip.ok[b-jcudtmtst9] { background: var(--success-100); color: var(--success-600); }
.chip.err[b-jcudtmtst9] { background: var(--danger-100); color: var(--danger-600); }

.meldung[b-jcudtmtst9] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; }
.meldung.info[b-jcudtmtst9] { background: var(--sand-100); color: var(--text-muted); }
.meldung.lauf[b-jcudtmtst9] { background: var(--blue-100); color: var(--blue-700); }
.meldung[b-jcudtmtst9]  svg { flex: none; margin-top: 1px; }
.meldung-text[b-jcudtmtst9] { flex: 1; min-width: 0; }
.mt-erstellt[b-jcudtmtst9] { align-items: center; }

.rueckfrage[b-jcudtmtst9] { display: flex; flex-direction: column; gap: 10px; max-width: 36rem; padding: 14px 16px; border: 1px solid var(--danger-100); border-radius: 14px; background: var(--surface-card); box-shadow: var(--shadow-md); font-family: var(--font-ui); }
.rueckfrage h2[b-jcudtmtst9] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); }
.rueckfrage p[b-jcudtmtst9] { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); }
.rueckfrage-fuss[b-jcudtmtst9] { display: flex; justify-content: flex-end; gap: 8px; }

.mt-protokoll[b-jcudtmtst9] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; }
.mt-protokoll-text[b-jcudtmtst9] { flex: 1 1 auto; white-space: nowrap; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

@media (pointer: coarse) {
    .btn[b-jcudtmtst9] { min-height: 44px; }
}

/* Mobil: die Karten untereinander, Teilnehmer zuerst. */
@media (max-width: 959.98px) {
    .mt[b-jcudtmtst9] { padding: 12px 14px; }
    .mt-spalten[b-jcudtmtst9] { flex-direction: column; }
    .mt-links[b-jcudtmtst9] { width: auto; }
    .mt-protokoll-text[b-jcudtmtst9] { white-space: normal; }
    .mt-protokoll .btn[b-jcudtmtst9] { flex: 1 1 100%; }
    .mt-erstellt[b-jcudtmtst9] { flex-wrap: wrap; }
    .mt-erstellt .btn[b-jcudtmtst9] { flex: 1 1 100%; }
    .mt-loeschen[b-jcudtmtst9] { flex: 1; }
}
/* /Meetings/Pages/MeetingUebersicht.razor.rz.scp.css */
/* Entwurf „Meeting-Protokolle“, Abschnitte 1 (Übersicht) und 5b (leer); Größen auf der Typo-Skala. */
.mu[b-h1jfqflg9t] { padding: 16px 28px 18px; }
.mu-geladen[b-h1jfqflg9t] { display: flex; flex-direction: column; gap: 16px; }
.mu-laedt[b-h1jfqflg9t] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

.mu-neu[b-h1jfqflg9t] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--brand); background: var(--brand); color: var(--text-on-brand); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.mu-neu:hover[b-h1jfqflg9t] { background: var(--brand-strong); border-color: var(--brand-strong); }
.mu-neu:focus-visible[b-h1jfqflg9t] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.mu-liste[b-h1jfqflg9t] { list-style: none; margin: 0; padding: 4px 6px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; }
.mu-liste li[b-h1jfqflg9t] { border-bottom: 1px solid var(--border-soft); }
.mu-liste li:last-child[b-h1jfqflg9t] { border-bottom: 0; }

.zeile[b-h1jfqflg9t] { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 13px; text-decoration: none; color: inherit; }
.zeile:hover[b-h1jfqflg9t] { background: var(--surface-page); }
.zeile:focus-visible[b-h1jfqflg9t] { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.z-text[b-h1jfqflg9t] { flex: 1; min-width: 0; }
.z-titel[b-h1jfqflg9t] { display: block; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-meta[b-h1jfqflg9t] { display: block; margin-top: 3px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }
.z-stand[b-h1jfqflg9t] { flex: none; }
.z-zahl[b-h1jfqflg9t] { flex: none; min-width: 72px; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 1.1; color: var(--text-body); font-variant-numeric: tabular-nums; }
.z-zahl small[b-h1jfqflg9t] { display: block; font-family: var(--font-ui); font-weight: 500; font-size: var(--text-2xs); color: var(--text-subtle); }
.z-pfeil[b-h1jfqflg9t] { flex: none; display: inline-flex; color: var(--text-subtle); }

.chip[b-h1jfqflg9t] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--sand-100); color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.chip.ok[b-h1jfqflg9t] { background: var(--success-100); color: var(--success-600); border-color: transparent; }
.chip.lauf[b-h1jfqflg9t] { background: var(--blue-100); color: var(--blue-700); border-color: transparent; }
.chip.warn[b-h1jfqflg9t] { background: var(--warning-100); color: var(--warning-600); border-color: transparent; }
.chip.err[b-h1jfqflg9t] { background: var(--danger-100); color: var(--danger-600); border-color: transparent; }

.leer-zustand[b-h1jfqflg9t] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 18px; text-align: center; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.leer-zustand .gross[b-h1jfqflg9t] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.leer-zustand[b-h1jfqflg9t]  svg { color: var(--text-subtle); }
.leer-zustand .mu-neu[b-h1jfqflg9t] { margin-top: 6px; }
.leer-zustand .mu-neu[b-h1jfqflg9t]  svg { color: inherit; }

@media (pointer: coarse) {
    .mu-neu[b-h1jfqflg9t] { min-height: 44px; }
}

/* Mobil: Titel und Meta oben über die volle Breite, Stand und Aufgaben darunter. */
@media (max-width: 959.98px) {
    .mu[b-h1jfqflg9t] { padding: 12px 14px; }
    .mu-neu[b-h1jfqflg9t] { flex: 1; }
    .leer-zustand .mu-neu[b-h1jfqflg9t] { flex: none; }
    .zeile[b-h1jfqflg9t] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "text text pfeil" "stand zahl pfeil"; gap: 8px 12px; }
    .z-text[b-h1jfqflg9t] { grid-area: text; }
    .z-stand[b-h1jfqflg9t] { grid-area: stand; }
    .z-zahl[b-h1jfqflg9t] { grid-area: zahl; min-width: 0; font-size: var(--text-sm); }
    .z-zahl small[b-h1jfqflg9t] { display: inline; margin-left: 4px; font-size: var(--text-xs); }
    .z-pfeil[b-h1jfqflg9t] { grid-area: pfeil; }
    .z-titel[b-h1jfqflg9t] { white-space: normal; }
}
/* /Meetings/Pages/MeineAufgabenKachel.razor.rz.scp.css */
/* Wie Gruppenkopf und Zusatz der Aufgaben-Kachel im Protokoll (ProtokollRaster.razor.css). */
.kopf-hinweis[b-z5r6guzyyo] { margin-left: auto; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }

.gruppe[b-z5r6guzyyo] { padding: 10px 0 2px; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-2xs); letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); }
/* /Meetings/Pages/MeineMeetings.razor.rz.scp.css */
/* Entwurf „Meine Meetings“, Abschnitt 2 (Übersicht, noch kein Termin); Größen auf der Typo-Skala. */
.mm[b-vdi6s8jons] { padding: 16px 28px 18px; }
.mm-geladen[b-vdi6s8jons] { display: flex; flex-direction: column; gap: 12px; max-width: 46rem; }
.mm-laedt[b-vdi6s8jons] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.mm-hinweis[b-vdi6s8jons] { max-width: 46rem; padding: 9px 12px; border-radius: 12px; background: var(--sand-100); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); }

.termine[b-vdi6s8jons] { list-style: none; margin: 0; padding: 0; }
.termine li[b-vdi6s8jons] { border-bottom: 1px solid var(--border-soft); }
.termine li:last-child[b-vdi6s8jons] { border-bottom: 0; }
.termin[b-vdi6s8jons] { display: flex; align-items: center; gap: 10px; padding: 11px 0; text-decoration: none; color: inherit; font-family: var(--font-ui); }
.termin:hover .t-n[b-vdi6s8jons] { color: var(--brand-strong); }
.termin:focus-visible[b-vdi6s8jons] { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); border-radius: 10px; }
.datum[b-vdi6s8jons] { flex: none; width: 46px; padding: 4px 0; border-radius: 10px; background: var(--brand-wash); color: var(--brand-strong); text-align: center; font-weight: 700; font-size: var(--text-base); line-height: 1.1; font-variant-numeric: tabular-nums; }
.datum small[b-vdi6s8jons] { display: block; font-weight: 600; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; }
.t-tx[b-vdi6s8jons] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-n[b-vdi6s8jons] { font-weight: 700; font-size: var(--text-sm); color: var(--text-strong); overflow-wrap: anywhere; }
.t-s[b-vdi6s8jons] { font-size: var(--text-xs); color: var(--text-subtle); }
.mein[b-vdi6s8jons] { flex: none; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--brand-soft); background: var(--brand-wash); color: var(--brand-strong); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.chev[b-vdi6s8jons] { flex: none; display: inline-flex; color: var(--text-subtle); }

@media (max-width: 959.98px) {
    .mm[b-vdi6s8jons] { padding: 14px 16px; }
}

@media (pointer: coarse) {
    .termin[b-vdi6s8jons] { min-height: 44px; }
}
/* /Meetings/Pages/MeinMeeting.razor.rz.scp.css */
/* Entwurf „Meine Meetings“, Abschnitt 2 (ein Termin); Größen auf der Typo-Skala. */
.mein[b-p8zk2qizuo] { display: flex; flex-direction: column; gap: 12px; max-width: 46rem; padding: 16px 28px 18px; }
.mein-laedt[b-p8zk2qizuo] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.mein-fehlt[b-p8zk2qizuo] { padding: 16px 28px 18px; }
.mein-hinweis[b-p8zk2qizuo] { padding: 9px 12px; border-radius: 12px; background: var(--sand-100); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); }

.ki[b-p8zk2qizuo] { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--rose-100); color: var(--accent-strong); font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; }
.ki[b-p8zk2qizuo]  svg { flex: none; }

@media (max-width: 959.98px) {
    .mein[b-p8zk2qizuo], .mein-fehlt[b-p8zk2qizuo] { padding: 14px 16px; }
}
/* /Meetings/Pages/NeuerTermin.razor.rz.scp.css */
/* Entwurf „Meeting-Protokolle“, Abschnitt 5a; Größen auf der Typo-Skala. */
.nt[b-dgb5g4qzoa] { display: flex; flex-direction: column; gap: 12px; max-width: 36rem; padding: 16px 18px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; }
.nt-kopf[b-dgb5g4qzoa] { padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); }

.feld[b-dgb5g4qzoa] { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-ui); }
.feld label[b-dgb5g4qzoa] { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }

.eingabe[b-dgb5g4qzoa] { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 11px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); }
.eingabe:focus-within[b-dgb5g4qzoa] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
.eingabe.fehler[b-dgb5g4qzoa] { border-color: var(--danger-600); }
.eingabe input[b-dgb5g4qzoa] { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.nt-datum[b-dgb5g4qzoa] { width: 100%; text-align: left; cursor: pointer; }
.nt-datum[b-dgb5g4qzoa]  svg { flex: none; color: var(--text-subtle); }
.nt-kalender[b-dgb5g4qzoa]  .mud-input-control { display: none; }
.feld-fehler[b-dgb5g4qzoa] { font-size: var(--text-xs); color: var(--danger-600); }

/* Gewählte Teilnehmer, Entwurf „Meine Meetings“, Abschnitt 1. */
.chips[b-dgb5g4qzoa] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.chip-p[b-dgb5g4qzoa] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 4px 3px 4px; border-radius: var(--radius-pill); background: var(--brand-wash); border: 1px solid var(--brand-soft); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--brand-strong); }
.chip-p.gast[b-dgb5g4qzoa] { background: var(--sand-100); border-color: var(--border-soft); color: var(--text-body); }
.chip-n[b-dgb5g4qzoa] { min-width: 0; overflow-wrap: anywhere; }
.chip-weg[b-dgb5g4qzoa] { flex: none; display: inline-flex; padding: 2px; border: 0; background: none; color: var(--text-subtle); cursor: pointer; border-radius: var(--radius-pill); }
.chip-weg:hover[b-dgb5g4qzoa] { color: var(--text-strong); }
.chip-weg:focus-visible[b-dgb5g4qzoa] { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }

.nt-fuss[b-dgb5g4qzoa] { display: flex; justify-content: flex-end; gap: 8px; }
.btn[b-dgb5g4qzoa] { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.btn.pri[b-dgb5g4qzoa] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.btn:disabled[b-dgb5g4qzoa] { opacity: .45; cursor: default; }
.btn:focus-visible[b-dgb5g4qzoa] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

@media (pointer: coarse) {
    .btn[b-dgb5g4qzoa], .eingabe[b-dgb5g4qzoa] { min-height: 44px; }
    .chip-weg[b-dgb5g4qzoa] { position: relative; }
    .chip-weg[b-dgb5g4qzoa]::after { content: ""; position: absolute; inset: -10px; }
}
/* /Meetings/Pages/PersonKuerzel.razor.rz.scp.css */
/* Entwurf „Meine Meetings“, Abschnitt 1. */
.av[b-a3w3mvu57w] { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--text-on-brand); font-family: var(--font-ui); font-weight: 700; font-size: var(--text-2xs); line-height: 1; }
.av.gast[b-a3w3mvu57w] { background: var(--sand-300); color: var(--text-body); }
/* /Meetings/Pages/ProtokollBlatt.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: Blatt von rechts unter der Topbar (70 px, PageHeader). */
.blatt-schleier[b-pe398bzfpn] { position: fixed; inset: 70px 0 0 0; z-index: 1400; padding: 0; border: 0; background: color-mix(in srgb, var(--ink-900) 18%, transparent); cursor: default; }
.blatt[b-pe398bzfpn] { position: fixed; top: 70px; right: 0; bottom: 0; z-index: 1401; width: min(520px, 100vw); display: flex; flex-direction: column; background: var(--surface-card); border-left: 1px solid var(--border-soft); box-shadow: var(--shadow-lg); }
.blatt:focus[b-pe398bzfpn] { outline: none; }
.blatt-kopf[b-pe398bzfpn] { flex: none; display: flex; align-items: center; gap: 10px; min-height: 3.5rem; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); }
.blatt-zu[b-pe398bzfpn] { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-muted); cursor: pointer; }
.blatt-zu:hover[b-pe398bzfpn] { background: var(--sand-100); color: var(--text-body); }
.blatt-zu:focus-visible[b-pe398bzfpn] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.blatt-rumpf[b-pe398bzfpn] { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 12px; }
.blatt-fuss[b-pe398bzfpn] { flex: none; }

@media (pointer: coarse) {
    .blatt-zu[b-pe398bzfpn] { width: 44px; height: 44px; }
}

/* Telefon: als Vollbild-Blatt, oder als Reiter in der Seite, die dann selbst scrollt. */
@media screen and (max-width: 959.98px) {
    .blatt-schleier[b-pe398bzfpn] { display: none; }
    .blatt[b-pe398bzfpn] { top: 0; width: 100%; border-left: 0; }
    .blatt-kopf[b-pe398bzfpn] { flex-wrap: wrap; row-gap: 8px; }
    .blatt.als-reiter[b-pe398bzfpn] { position: static; width: auto; border: 0; background: none; box-shadow: none; }
    .als-reiter .blatt-kopf[b-pe398bzfpn] { padding: 10px 0; }
    .als-reiter .blatt-rumpf[b-pe398bzfpn] { overflow: visible; padding: 8px 0 0; }
}

@media print {
    .blatt-schleier[b-pe398bzfpn], .blatt[b-pe398bzfpn] { display: none; }
}
/* /Meetings/Pages/ProtokollDruckblatt.razor.rz.scp.css */
/* Druckblatt des Protokolls: feste px-Größen, damit das Blatt bei jeder Browser-Schriftgröße gleich umbricht.
   Die Klassen darunter gehören den Kacheln und Zeilen; hier stehen nur ihre Größen auf Papier. */
.pd-kopf[b-ouzlsypwp3] { display: none; }

/* Am Bildschirm keine eigene Box, damit die Seite ihr Raster direkt in der Höhe aufspannt. */
@media screen {
    .pd[b-ouzlsypwp3] { display: contents; }
}

@media print {
    .pd-kopf[b-ouzlsypwp3] { display: block; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); font-family: var(--font-ui); font-weight: 600; font-size: 10px; color: var(--text-muted); }
    .pd[b-ouzlsypwp3]  .kachel-titel { font-size: 14px; }
    .pd[b-ouzlsypwp3]  .kopf-offen { font-size: 14px; }
    .pd[b-ouzlsypwp3]  .aussage { font-size: 11px; }
    .pd[b-ouzlsypwp3]  .person-name { font-size: 9px; }
    .pd[b-ouzlsypwp3]  .aufg { font-size: 11px; }
    .pd[b-ouzlsypwp3]  .aufg-frist { font-size: 10px; }
}
/* /Meetings/Pages/ProtokollKachel.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: Kachel mit Titel, Anzahl, Liste und Blätterleiste; Größen auf der Typo-Skala. */
.kachel[b-72fyxes7w4] { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.kachel-kopf[b-72fyxes7w4] { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px 6px; }
.kachel-titel[b-72fyxes7w4] { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); line-height: 1.3; color: var(--text-strong); }
.kachel-zahl[b-72fyxes7w4] { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); }
.kachel-rumpf[b-72fyxes7w4] { flex: 1; min-height: 0; padding: 0 16px 8px; }
.kachel-fuss[b-72fyxes7w4] { flex: none; }
.kachel-fuss[b-72fyxes7w4]  .bl { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* Gerendert werden alle Zeilen, damit der Druck sie zeigt; am Bildschirm nur die der aktuellen Seite. */
@media screen {
    .kachel-rumpf[b-72fyxes7w4]  .ausserhalb { display: none; }
}

/* Die Seitengrößen sind so gewählt, dass eine Seite in die Kachel passt; wird das Fenster enger,
   scrollt die Kachel, statt Zeilen abzuschneiden. */
@media screen and (min-width: 960px) {
    .kachel-rumpf[b-72fyxes7w4] { overflow-y: auto; }
}

@media print {
    .kachel[b-72fyxes7w4] { display: block; margin-top: 12px; border: 0; border-radius: 0; }
    .kachel-kopf[b-72fyxes7w4], .kachel-rumpf[b-72fyxes7w4] { padding: 0; }
    .kachel-zahl[b-72fyxes7w4], .kachel-fuss[b-72fyxes7w4] { display: none; }
}
/* /Meetings/Pages/ProtokollRaster.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: vier Inhalte als Kacheln; Größen auf der Typo-Skala.
   Grundform (Telefon und Druck): Kacheln untereinander. */
.raster[b-ub7rr0g2pk] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.raster-spalte[b-ub7rr0g2pk] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.raster-feld[b-ub7rr0g2pk] { display: grid; min-width: 0; }

.kopf-offen[b-ub7rr0g2pk] { margin-left: 6px; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); color: var(--text-muted); }
.kopf-zahl[b-ub7rr0g2pk] { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); }
.kopf-hinweis[b-ub7rr0g2pk] { margin-left: auto; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }

.person-name[b-ub7rr0g2pk] { padding: 10px 0 2px; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-2xs); letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); }

/* Ab 960 px füllt das Raster die Höhe, die die Seite ihm lässt; links teilen sich zwei Kacheln die Höhe,
   rechts steht die Aufgaben-Kachel über beide. */
@media screen and (min-width: 960px) {
    .raster[b-ub7rr0g2pk] { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 0; }
    .raster.eine-spalte[b-ub7rr0g2pk] { grid-template-columns: minmax(0, 1fr); }
    .raster-spalte[b-ub7rr0g2pk] { min-height: 0; }
    .raster-feld[b-ub7rr0g2pk] { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
}

@media print {
    .raster[b-ub7rr0g2pk], .raster-spalte[b-ub7rr0g2pk], .raster-feld[b-ub7rr0g2pk] { display: block; }
    .kopf-zahl[b-ub7rr0g2pk], .kopf-hinweis[b-ub7rr0g2pk] { display: none; }
}
/* /Meetings/Pages/SprecherBlatt.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: Sprecher-Zuordnung als Blatt; Größen auf der Typo-Skala. */
.sb-titel[b-658qvrl1nd] { flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); color: var(--text-strong); }

.spr[b-658qvrl1nd] { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.spr-k[b-658qvrl1nd] { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-card); }
.spr-kopf[b-658qvrl1nd] { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); color: var(--text-subtle); }
.spr-zitat[b-658qvrl1nd] { margin: 0; font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.45; color: var(--text-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spr-wahl[b-658qvrl1nd] { width: 100%; padding: 4px 9px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--surface-card); color: var(--text-strong); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.spr-wahl:focus-visible[b-658qvrl1nd] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.spr-wahl:disabled[b-658qvrl1nd] { opacity: .55; cursor: default; }
.spr-k.unsicher .spr-wahl[b-658qvrl1nd] { border-color: var(--warning-600); background: var(--warning-100); }

.sb-fuss[b-658qvrl1nd] { display: flex; justify-content: flex-end; padding: 10px 16px 12px; border-top: 1px solid var(--border-soft); }
.sb-neu[b-658qvrl1nd] { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--brand); border-radius: var(--radius-pill); background: var(--brand); color: var(--text-on-brand); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.sb-neu:hover:not(:disabled)[b-658qvrl1nd] { background: var(--brand-strong); border-color: var(--brand-strong); }
.sb-neu:disabled[b-658qvrl1nd] { opacity: .45; cursor: default; }
.sb-neu:focus-visible[b-658qvrl1nd] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

@media (pointer: coarse) {
    .spr-wahl[b-658qvrl1nd], .sb-neu[b-658qvrl1nd] { min-height: 44px; }
}
/* /Meetings/Pages/TeilnehmerKarte.razor.rz.scp.css */
/* Entwurf „Meeting-Protokolle“, Abschnitt 2 (linke Karte); Größen auf der Typo-Skala. */
.card[b-ragyipvooy] { display: flex; flex-direction: column; gap: 10px; height: 100%; min-width: 0; padding: 16px 18px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; }
.cardhead[b-ragyipvooy] { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.cardtitle[b-ragyipvooy] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); }
.luft[b-ragyipvooy] { flex: 1; }

.chip[b-ragyipvooy] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--sand-100); color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.chip.ok[b-ragyipvooy] { background: var(--success-100); color: var(--success-600); border-color: transparent; }
.chip.warn[b-ragyipvooy] { background: var(--warning-100); color: var(--warning-600); border-color: transparent; }

.tn-liste[b-ragyipvooy] { list-style: none; margin: 0; padding: 0; }
.tn[b-ragyipvooy] { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); }
.tn-neu[b-ragyipvooy] { border-bottom: 0; }
.box[b-ragyipvooy] { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--text-on-brand); }
.box.on[b-ragyipvooy] { background: var(--brand); border-color: var(--brand); }
button.box[b-ragyipvooy] { cursor: pointer; }
button.box:hover[b-ragyipvooy] { border-color: var(--brand); }
button.box:focus-visible[b-ragyipvooy] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
button.box:disabled[b-ragyipvooy] { cursor: default; opacity: .45; }
.tn-name[b-ragyipvooy] { flex: 1; min-width: 0; font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); overflow-wrap: anywhere; }
.tn-stand[b-ragyipvooy] { flex: none; font-size: var(--text-xs); color: var(--text-subtle); }

.tk-plus[b-ragyipvooy] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-link); cursor: pointer; }
.tk-plus:focus-visible[b-ragyipvooy] { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); border-radius: 6px; }

/* Die Suche ist eine Kind-Komponente: Breite und Ausrichtung hängen an der eigenen Hülle. */
.tk-form[b-ragyipvooy] { flex: 1; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.tk-suche[b-ragyipvooy] { flex: 1; min-width: 0; }

.btn[b-ragyipvooy] { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
.btn:focus-visible[b-ragyipvooy] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tk-weg[b-ragyipvooy] { padding: 6px 8px; color: var(--text-subtle); }
.tk-weg:hover[b-ragyipvooy] { color: var(--text-strong); }

.meldung[b-ragyipvooy] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; }
.meldung.fehler[b-ragyipvooy] { background: var(--danger-100); color: var(--danger-600); }

.hinweis[b-ragyipvooy] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sand-100); font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; color: var(--text-muted); }
.hinweis[b-ragyipvooy]  svg, .meldung[b-ragyipvooy]  svg { flex: none; margin-top: 1px; }
.hinweis[b-ragyipvooy]  svg { color: var(--text-subtle); }

@media (pointer: coarse) {
    .tn[b-ragyipvooy] { min-height: 44px; }
    .box[b-ragyipvooy] { width: 28px; height: 28px; }
    button.box[b-ragyipvooy] { position: relative; }
    button.box[b-ragyipvooy]::after { content: ""; position: absolute; inset: -8px; }
    .tk-plus[b-ragyipvooy], .btn[b-ragyipvooy] { min-height: 44px; }
    .tk-weg[b-ragyipvooy] { min-width: 44px; justify-content: center; }
}
/* /Meetings/Pages/TeilnehmerSuche.razor.rz.scp.css */
/* Entwurf „Meine Meetings“, Abschnitt 1 (Teilnehmer-Auswahl); Größen auf der Typo-Skala. */
.ts[b-1v8xmwnpmq] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.eingabe[b-1v8xmwnpmq] { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 11px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); }
.eingabe:focus-within[b-1v8xmwnpmq] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.eingabe.fehler[b-1v8xmwnpmq] { border-color: var(--danger-600); }
.eingabe[b-1v8xmwnpmq]  svg { flex: none; color: var(--text-subtle); }
.eingabe input[b-1v8xmwnpmq] { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.eingabe input[b-1v8xmwnpmq]::placeholder { color: var(--text-subtle); }

.vorschlag[b-1v8xmwnpmq] { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-card); box-shadow: var(--shadow-md); overflow: hidden; }
.vz[b-1v8xmwnpmq] { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border-soft); background: none; font-family: var(--font-ui); text-align: left; cursor: pointer; }
.vz:last-child[b-1v8xmwnpmq] { border-bottom: 0; }
.vz.an[b-1v8xmwnpmq], .vz:hover[b-1v8xmwnpmq] { background: var(--brand-wash); }
.vz:focus-visible[b-1v8xmwnpmq] { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.vz:disabled[b-1v8xmwnpmq] { cursor: default; opacity: .45; }
.vz-tx[b-1v8xmwnpmq] { display: flex; flex-direction: column; min-width: 0; }
.vz-n[b-1v8xmwnpmq] { font-weight: 700; font-size: var(--text-sm); color: var(--text-strong); }
.vz-m[b-1v8xmwnpmq] { font-size: var(--text-xs); color: var(--text-subtle); overflow-wrap: anywhere; }
.vz-ext[b-1v8xmwnpmq] { font-size: var(--text-sm); color: var(--text-muted); }
.vz-hinweis[b-1v8xmwnpmq] { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); background: var(--sand-100); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

@media (pointer: coarse) {
    .eingabe[b-1v8xmwnpmq], .vz[b-1v8xmwnpmq] { min-height: 44px; }
}
/* /Meetings/Pages/TerminNichtGefunden.razor.rz.scp.css */
/* Entwurf „Meeting-Protokolle“, Zustand 6n; Größen auf der Typo-Skala. */
.leer-zustand[b-h3lru9azu0] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 18px; text-align: center; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.leer-zustand .gross[b-h3lru9azu0] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.leer-zustand[b-h3lru9azu0]  svg { color: var(--text-subtle); }

.btn[b-h3lru9azu0] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn:focus-visible[b-h3lru9azu0] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

@media (pointer: coarse) {
    .btn[b-h3lru9azu0] { min-height: 44px; }
}
/* /Meetings/Pages/TranskriptSpalte.razor.rz.scp.css */
/* Entwurf „Protokoll-Seite ruhiger“, Variante B: Transkript-Blatt mit Stelle, Bezug und Suche; Größen auf der Typo-Skala. */
.cardtitle[b-c7ajjlsomf] { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); color: var(--text-strong); }
.chip[b-c7ajjlsomf] { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--sand-100); color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }

.stelle[b-c7ajjlsomf] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 11px; border-radius: var(--radius-pill); background: var(--warning-100); color: var(--warning-600); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.stelle-pfeil[b-c7ajjlsomf] { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid color-mix(in srgb, var(--warning-600) 30%, var(--warning-100)); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--warning-600); cursor: pointer; }
.stelle-pfeil:disabled[b-c7ajjlsomf] { opacity: .4; cursor: default; }
.stelle-pfeil:focus-visible[b-c7ajjlsomf] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* Lupe und Suchfeld nach dem Vorbild von /backstube/tk-lager (TkBestand), auf Kopf-Höhe. */
.ts-lupe[b-c7ajjlsomf] { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-muted); cursor: pointer; }
.ts-lupe.on[b-c7ajjlsomf] { background: var(--brand-wash); border-color: var(--brand-soft); color: var(--brand-strong); }
.ts-lupe:focus-visible[b-c7ajjlsomf] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.ts-such[b-c7ajjlsomf] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 2rem; padding: 0 6px 0 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--sand-100); color: var(--text-subtle); }
.ts-such:focus-within[b-c7ajjlsomf] { background: var(--surface-card); border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); color: var(--text-strong); }
.ts-such input[b-c7ajjlsomf] { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); }
.ts-such-x[b-c7ajjlsomf] { flex: none; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-subtle); font-size: var(--text-lg); line-height: 1; cursor: pointer; }
.ts-such-x:hover[b-c7ajjlsomf] { background: var(--sand-200); color: var(--text-body); }
.ts-leer[b-c7ajjlsomf] { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sand-100); color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; }

.bezug[b-c7ajjlsomf] { margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-wash); font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.5; color: var(--text-body); }
.bezug small[b-c7ajjlsomf] { display: block; margin-bottom: 3px; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-2xs); letter-spacing: .07em; text-transform: uppercase; color: var(--brand-strong); }

.tr-liste[b-c7ajjlsomf] { margin: 0; padding: 0; list-style: none; }
.tr[b-c7ajjlsomf] { display: flex; gap: 10px; padding: 5px 8px; border-radius: 8px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--text-body); scroll-margin: 16px; }
.tr.mark[b-c7ajjlsomf] { background: var(--warning-100); box-shadow: inset 3px 0 0 var(--warning-600); }
.zeit[b-c7ajjlsomf] { flex: none; width: 2.75rem; padding-top: 1px; font-family: var(--font-numeric); font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.zeit.mit-teil[b-c7ajjlsomf] { width: 4.25rem; white-space: nowrap; }
.wer[b-c7ajjlsomf] { flex: none; width: 5.5rem; font-weight: 700; color: var(--brand-strong); overflow-wrap: anywhere; }
.was[b-c7ajjlsomf] { flex: 1; min-width: 0; }

@media (pointer: coarse) {
    .ts-lupe[b-c7ajjlsomf], .ts-such-x[b-c7ajjlsomf], .stelle-pfeil[b-c7ajjlsomf] { width: 44px; height: 44px; }
    .ts-such[b-c7ajjlsomf] { height: 44px; }
}

/* Telefon: Titel, Lupe und ✕ bleiben oben; Stelle und Suchfeld bekommen je eine eigene Zeile, sonst
   reicht die Breite ab rund 375 px nicht (Kopf bricht um, ProtokollBlatt). */
@media screen and (max-width: 959.98px) {
    .wer[b-c7ajjlsomf] { width: 4.5rem; }
    .stelle[b-c7ajjlsomf] { order: 2; flex-basis: 100%; }
    .stelle-text[b-c7ajjlsomf] { margin-right: auto; }
    .ts-such[b-c7ajjlsomf] { order: 3; flex-basis: 100%; }
}
/* /Pages/Admin/Coordinator.razor.rz.scp.css */
/*
 * Canvas "Admin Infra Ampel" (Coordinator, CoordinatorWeg, CoordinatorMobil). Statusblock, Karte,
 * Pille und Knopf kommen aus wwwroot/css/admin-components.css; hier steht nur der Aufbau dieser Seite.
 */

.co-karten[b-0ghp29nh8w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 14px;
    align-items: start;
}

.co-name b[b-0ghp29nh8w] {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-strong);
}

.co-vor[b-0ghp29nh8w] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.co-leer[b-0ghp29nh8w] {
    padding: 0 16px 16px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.co-mobil[b-0ghp29nh8w] {
    display: none;
}

/* Steht im Faktenraster, dessen <span> sonst Blöcke sind. */
.co-breit[b-0ghp29nh8w] {
    display: inline;
}

/* ── Telefon: Sperren zuerst, Zeilen gestapelt ── */
@media (max-width: 959.98px) {
    .co-karten[b-0ghp29nh8w] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .co-sperren[b-0ghp29nh8w] {
        order: -1;
    }

    .co-breit[b-0ghp29nh8w], .adm-h[b-0ghp29nh8w], .adm-karte thead[b-0ghp29nh8w], .adm-karte-f[b-0ghp29nh8w], .co-uhr[b-0ghp29nh8w] {
        display: none;
    }

    /* Station und Zeitpunkt stehen am Telefon gemeinsam in .co-mobil. */
    .adm-karte td.co-station[b-0ghp29nh8w], .adm-karte td.co-seit[b-0ghp29nh8w] {
        display: none;
    }

    .adm-karte-k[b-0ghp29nh8w] {
        padding: 12px 14px 8px;
    }

    .co-leer[b-0ghp29nh8w] {
        padding: 0 14px 14px;
    }

    .adm-karte table[b-0ghp29nh8w], .adm-karte tbody[b-0ghp29nh8w] {
        display: block;
    }

    .adm-karte tr[b-0ghp29nh8w] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 10px;
        padding: 10px 14px;
        border-top: 1px solid var(--border-soft);
    }

    .adm-karte td[b-0ghp29nh8w] {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .co-name b[b-0ghp29nh8w] {
        font-size: var(--text-base);
    }

    .co-vor[b-0ghp29nh8w], .co-alter[b-0ghp29nh8w] {
        font-size: var(--text-xs);
        color: var(--text-muted);
    }

    .adm-karte td.co-mobil[b-0ghp29nh8w] {
        display: block;
        grid-column: 1 / -1;
        font-size: var(--text-xs);
        color: var(--text-muted);
    }
}
/* /Pages/Admin/Infra.razor.rz.scp.css */
/*
 * Canvas "Admin Infra Ampel". Statusblock, Karte, Pille und Knopf kommen aus
 * wwwroot/css/admin-components.css; hier steht nur, was diese Seite anders macht.
 * Keine eigenen Farben — alles aus den Tokens.
 */

.ia-app b[b-1xr4s1njio] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-strong);
}

.ia-app a[b-1xr4s1njio] {
    color: var(--text-link);
    text-decoration: none;
}

.ia-app a:hover[b-1xr4s1njio] {
    text-decoration: underline;
}

.ia-app a b[b-1xr4s1njio] {
    color: inherit;
}

.ia-app span[b-1xr4s1njio], .ia-hinweis[b-1xr4s1njio] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.ia-hinweis[b-1xr4s1njio] {
    margin-top: 3px;
}

.ia-mobil[b-1xr4s1njio] {
    display: none;
}

/* ── Telefon: Zeilen gestapelt, zwei Fakten ── */
@media (max-width: 959.98px) {
    .ia-breit[b-1xr4s1njio] {
        display: none;
    }

    .adm-karte-k[b-1xr4s1njio], .adm-karte thead[b-1xr4s1njio], .ia-app span[b-1xr4s1njio], .ia-hinweis[b-1xr4s1njio] {
        display: none;
    }

    .adm-karte table[b-1xr4s1njio], .adm-karte tbody[b-1xr4s1njio] {
        display: block;
    }

    /* Version und Antwortzeit stehen am Telefon gemeinsam in .ia-mobil. */
    .adm-karte td.ia-version[b-1xr4s1njio], .adm-karte td.ia-dauer[b-1xr4s1njio] {
        display: none;
    }

    .adm-karte tr[b-1xr4s1njio] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 10px;
        padding: 11px 14px;
        border-bottom: 1px solid var(--border-soft);
    }

    .adm-karte td[b-1xr4s1njio] {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .ia-app b[b-1xr4s1njio] {
        font-size: var(--text-base);
    }

    .adm-karte td.ia-mobil[b-1xr4s1njio] {
        display: block;
        grid-column: 1 / -1;
        font-size: var(--text-xs);
        color: var(--text-muted);
    }

    .adm-karte td.ia-mobil:empty[b-1xr4s1njio] {
        display: none;
    }
}
/* /Pages/Admin/Tischspiegel.razor.rz.scp.css */
/*
 * Vokabular des internen Ops-Kits aus dem LilleHus Design System (Digital), Canvas
 * "LilleHus Tischspiegel Status". Keine eigenen Farben — alles aus den Tokens.
 */

.ts-seite[b-imxpbfc0pz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 28px 18px;
}

/* ── Statusblock ── */
.ts-stat[b-imxpbfc0pz] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-ui);
}

.ts-stat.ok[b-imxpbfc0pz]   { box-shadow: inset 4px 0 0 var(--success-600); }
.ts-stat.warn[b-imxpbfc0pz] { box-shadow: inset 4px 0 0 var(--warning-600); }
.ts-stat.err[b-imxpbfc0pz]  { box-shadow: inset 4px 0 0 var(--danger-600); }
.ts-stat.n[b-imxpbfc0pz]    { box-shadow: inset 4px 0 0 var(--ink-300); }

.ts-stat-k[b-imxpbfc0pz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ts-ampel[b-imxpbfc0pz] {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-stat.ok   .ts-ampel[b-imxpbfc0pz] { background: var(--success-100); color: var(--success-600); }
.ts-stat.warn .ts-ampel[b-imxpbfc0pz] { background: var(--warning-100); color: var(--warning-600); }
.ts-stat.err  .ts-ampel[b-imxpbfc0pz] { background: var(--danger-100);  color: var(--danger-600); }
.ts-stat.n    .ts-ampel[b-imxpbfc0pz] { background: var(--sand-200);    color: var(--text-muted); }

.ts-stat-k b[b-imxpbfc0pz] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    line-height: 1.2;
}

/* "div span" statt nur "span": .ts-ampel ist ebenfalls ein direktes <span>-Kind von .ts-stat-k
   und geriete sonst unter dieselbe Regel — deren display:block schlug bislang die eigene
   display:flex-Regel von .ts-ampel, weil "Klasse + Element" spezifischer ist als "Klasse
   allein" (#2047, Icon saß dadurch oben links statt zentriert in der Kachel). */
.ts-stat-k div span[b-imxpbfc0pz] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ts-fakten[b-imxpbfc0pz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px solid var(--border-soft);
    padding-top: 11px;
}

@media (max-width: 600px) {
    .ts-fakten[b-imxpbfc0pz] {
        grid-template-columns: 1fr 1fr;
    }
}

.ts-fakten span[b-imxpbfc0pz] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.ts-fakten b[b-imxpbfc0pz] {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-strong);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ts-skip[b-imxpbfc0pz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--text-xs);
}

.ts-skip-l[b-imxpbfc0pz] {
    color: var(--text-subtle);
    margin-right: 2px;
}

.ts-skip-h[b-imxpbfc0pz] {
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* Wie im Entwurf (.ph .skip-h): auf dem Handy beantworten die Marken selbst die
   häufigste Rückfrage "warum nur X von Y?" schon, der Erklärsatz entfällt. */
@media (max-width: 600px) {
    .ts-skip-h[b-imxpbfc0pz] {
        display: none;
    }
}

.ts-tag[b-imxpbfc0pz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    color: var(--text-body);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.ts-tag b[b-imxpbfc0pz] {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-strong);
}

.ts-fehler[b-imxpbfc0pz] {
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: var(--text-xs);
    line-height: 1.45;
}

.ts-stat.warn .ts-fehler[b-imxpbfc0pz] {
    background: var(--warning-100);
    color: var(--warning-600);
}

/* ── Karten ── */
.ts-zwei[b-imxpbfc0pz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 14px;
}

/* Die 6-spaltige Tabelle braucht ~650-700px; mit der 264px-Sidebar reicht die linke Karte
   erst deutlich oberhalb von 1400px, sonst läuft sie in die rechte Karte (#2047). */
@media (max-width: 1400px) {
    .ts-zwei[b-imxpbfc0pz] {
        grid-template-columns: 1fr;
    }
}

.ts-karte[b-imxpbfc0pz] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ts-karte-k[b-imxpbfc0pz] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 13px 16px 10px;
    font-family: var(--font-ui);
}

.ts-karte-k b[b-imxpbfc0pz] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.ts-n[b-imxpbfc0pz] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-subtle);
}

.ts-h[b-imxpbfc0pz] {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

/* Eigene Hülle statt Overflow auf .ts-karte: die Layout-Zusage gehört ins eigene Markup
   der Karte, nicht in den Inhalt (root CLAUDE.md). Rettet die Tabelle, wenn die Karte am
   Laptop schmaler ist als die 6 Spalten brauchen (#2047). */
.ts-tabelle[b-imxpbfc0pz] {
    overflow-x: auto;
}

/* Eigene <table> statt MudTable: die Zellen liegen im eigenen Markup, die Isolation
   greift direkt — kein `::deep`, keine MudBlazor-Fließtextschrift in der Tabelle. */
.ts-offen table[b-imxpbfc0pz] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-body);
}

.ts-offen th[b-imxpbfc0pz] {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-soft);
    border-top: 1px solid var(--border-soft);
    background: var(--sand-050);
    white-space: nowrap;
}

.ts-offen th.num[b-imxpbfc0pz], .ts-offen td.num[b-imxpbfc0pz] {
    text-align: right;
}

.ts-offen td[b-imxpbfc0pz] {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.ts-offen tbody tr:last-child td[b-imxpbfc0pz] {
    border-bottom: none;
}

/* Handy bleibt eine <table> (Abweichung vom Entwurf, im PR mit Bild gezeigt): Raum,
   Pos. und Letzte Nachbestellung blenden aus statt einer zweiten Listen-Markup-Fassung. */
@media (max-width: 600px) {
    .ts-offen th:nth-child(2)[b-imxpbfc0pz], .ts-offen td:nth-child(2)[b-imxpbfc0pz],
    .ts-offen th:nth-child(4)[b-imxpbfc0pz], .ts-offen td:nth-child(4)[b-imxpbfc0pz],
    .ts-offen th:nth-child(6)[b-imxpbfc0pz], .ts-offen td:nth-child(6)[b-imxpbfc0pz] {
        display: none;
    }

    .ts-offen th[b-imxpbfc0pz], .ts-offen td[b-imxpbfc0pz] {
        padding: 7px 10px;
    }
}

.ts-tisch[b-imxpbfc0pz] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.ts-tisch span[b-imxpbfc0pz] {
    display: block;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--text-2xs);
    color: var(--text-subtle);
}

.ts-offen td span[b-imxpbfc0pz] {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-subtle);
}

/* ── Aufklappen: Artikel je Tisch ── */
.ts-zeile[b-imxpbfc0pz] {
    cursor: pointer;
}

.ts-zeile:hover td[b-imxpbfc0pz] {
    background: var(--sand-050);
}

.ts-tisch-z[b-imxpbfc0pz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-auf[b-imxpbfc0pz] {
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-subtle);
    cursor: pointer;
}

@media (pointer: coarse) {
    .ts-auf[b-imxpbfc0pz] {
        width: 44px;
        height: 44px;
    }
}

/* Spezifischer als ".ts-offen td", damit der Umbruch für lange Artikelnamen greift. */
.ts-offen tr.ts-artikel td[b-imxpbfc0pz] {
    background: var(--sand-050);
    padding: 6px 16px 10px 52px;
    white-space: normal;
}

.ts-artikel-z[b-imxpbfc0pz] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 84px;
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
    font-size: var(--text-sm);
}

.ts-artikel-m[b-imxpbfc0pz] {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-strong);
    text-align: right;
}

.ts-artikel-t[b-imxpbfc0pz] {
    font-size: var(--text-xs);
    color: var(--text-subtle);
    white-space: nowrap;
}

.ts-artikel-s[b-imxpbfc0pz] {
    text-align: right;
    white-space: nowrap;
}

.ts-artikel-leer[b-imxpbfc0pz] {
    font-size: var(--text-xs);
    color: var(--text-subtle);
    padding: 4px 0;
}

@media (max-width: 600px) {
    .ts-offen tr.ts-artikel td[b-imxpbfc0pz] {
        padding-left: 10px;
    }

    .ts-artikel-z[b-imxpbfc0pz] {
        grid-template-columns: 34px minmax(0, 1fr) 72px;
    }

    .ts-artikel-t[b-imxpbfc0pz] {
        display: none;
    }
}

.ts-betrag[b-imxpbfc0pz] {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-strong);
}

.ts-dim[b-imxpbfc0pz] {
    color: var(--text-subtle);
}

.ts-karte-f[b-imxpbfc0pz] {
    margin-top: auto;
    border-top: 1px solid var(--border-soft);
    padding: 9px 16px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-subtle);
    display: flex;
    gap: 14px;
    font-variant-numeric: tabular-nums;
}

.ts-karte-f b[b-imxpbfc0pz] {
    color: var(--text-strong);
    font-weight: 600;
}

.ts-kpis[b-imxpbfc0pz] {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 16px 12px;
}

.ts-kpis > div[b-imxpbfc0pz] {
    background: var(--sand-050);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-family: var(--font-ui);
}

.ts-kpis span[b-imxpbfc0pz] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ts-kpis b[b-imxpbfc0pz] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

/* MudChart bekommt nur diese Hülle — CSS-Isolation greift nicht ins Kind-Markup. */
.ts-chart[b-imxpbfc0pz] {
    padding: 0 12px 6px;
}

/* ── Leer-/Hinweiszustände ── */
.ts-leer[b-imxpbfc0pz] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    margin: 0 16px 16px;
    padding: 16px 18px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.ts-leer b[b-imxpbfc0pz] {
    display: block;
    font-weight: 600;
    color: var(--text-strong);
    font-size: var(--text-sm);
}

.ts-leer span[b-imxpbfc0pz] {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-subtle);
    margin-top: 1px;
}

.ts-hinweis[b-imxpbfc0pz] {
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-body);
    margin: 16px 28px;
}

.ts-hinweis b[b-imxpbfc0pz] {
    color: var(--text-strong);
}

/* ── Aktion ── */
.ts-neu[b-imxpbfc0pz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    min-height: 44px;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    white-space: nowrap;
}

.ts-neu:disabled[b-imxpbfc0pz] {
    opacity: .6;
}
/* /Pages/AreaLanding.razor.rz.scp.css */
/* ============================================================
   Area landing page — token values from prototype lines 187–212
   ============================================================ */

.area-landing[b-tceijbqurs] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 40px 56px;
}

/* ── Area header ───────────────────────────────────────────── */
.area-header[b-tceijbqurs] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* 54×54, border-radius:16px, tinted via inline style */
.area-icon-tile[b-tceijbqurs] {
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.area-header-text[b-tceijbqurs] {
    flex: 1;
}

/* font-display, 600, 27px, letter-spacing -.01em */
.area-name[b-tceijbqurs] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 27px;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}

/* font-ui, 13.5px, muted, margin-top:2px */
.area-sub[b-tceijbqurs] {
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* danger pill: inline-flex, gap:7px, 600, 13.5px, danger-600/100, border-radius:999px, padding:8px 14px */
.area-overdue-pill[b-tceijbqurs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--danger-600);
    background: var(--danger-100);
    border-radius: 999px;
    padding: 8px 14px;
    white-space: nowrap;
}

/* ── Tool grid — 3 columns, gap:16px, margin-top:26px ─────── */
.area-grid[b-tceijbqurs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 26px;
}

/* Am Rechner ein Raster: die Gruppen treten zurueck, ihre Karten sind direkte Raster-Kinder. */
.area-gruppe[b-tceijbqurs], .area-gruppe-liste[b-tceijbqurs] { display: contents; }
.area-gruppe-titel[b-tceijbqurs] { display: none; }

/* ── Tool cards ────────────────────────────────────────────── */
/* white card, border-soft, border-radius:18px, padding:18px, shadow-xs, flex col, gap:10px */
.area-tool-card[b-tceijbqurs] {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

.area-tool-card:hover[b-tceijbqurs] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* top row: icon tile + optional danger badge */
.area-tool-card-top[b-tceijbqurs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* 42×42, border-radius:12px, brand-wash/brand-strong (always per prototype line 203) */
.area-tool-icon[b-tceijbqurs] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-wash);
    color: var(--brand-strong);
    flex: none;
}

/* danger badge: inline-flex, gap:5px, 700, 11.5px, danger-100/600, border-radius:999px, padding:3px 9px */
.area-tool-badge[b-tceijbqurs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11.5px;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: 999px;
    padding: 3px 9px;
}

/* Zeigt an, dass der Klick den Manager verlaesst — zurueckhaltend, keine zweite Auszeichnung neben dem Badge. */
.area-tool-extern[b-tceijbqurs] {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}

/* font-display, 600, 16.5px, text-strong, margin-top:2px */
.area-tool-name[b-tceijbqurs] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16.5px;
    color: var(--text-strong);
    margin-top: 2px;
}

/* font-body, 13px, muted, line-height:1.5, text-wrap:pretty */
.area-tool-desc[b-tceijbqurs] {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

/* Telefon (#2113, Leinwand „Manager mobil – Bereichsseite", Variante B): zwei Gruppen,
   kompakte Zeilen nur mit dem Namen. Die Beschreibung bleibt dem Rechner vorbehalten. */
@media (max-width: 959.98px) {
    .area-landing[b-tceijbqurs] { padding: 16px 16px 32px; }
    .area-header[b-tceijbqurs] { flex-wrap: wrap; align-items: center; gap: 12px; }
    .area-icon-tile[b-tceijbqurs] { width: 38px; height: 38px; border-radius: 12px; }
    .area-name[b-tceijbqurs] { font-size: 21px; }
    .area-sub[b-tceijbqurs] { display: none; }

    .area-grid[b-tceijbqurs] { display: block; margin-top: 4px; }

    .area-gruppe[b-tceijbqurs] { display: block; }
    .area-gruppe-liste[b-tceijbqurs] {
        display: block;
        background: #fff;
        border: 1px solid var(--border-soft);
        border-radius: 18px;
        overflow: hidden;
    }
    .area-gruppe--rechner .area-gruppe-liste[b-tceijbqurs] { background: transparent; }

    .area-gruppe-titel[b-tceijbqurs] {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 20px 2px 9px;
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .area-gruppe-symbol[b-tceijbqurs] { display: inline-flex; color: var(--warning-600); }
    .area-gruppe-hinweis[b-tceijbqurs] {
        margin-left: auto;
        letter-spacing: 0;
        text-transform: none;
        font-weight: 500;
        font-size: 11.5px;
    }

    .area-tool-card[b-tceijbqurs] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 0 14px;
        background: transparent;
        border: none;
        border-top: 1px solid var(--border-soft);
        border-radius: 0;
        box-shadow: none;
    }
    .area-tool-card:first-child[b-tceijbqurs] { border-top: none; }
    .area-tool-card:hover[b-tceijbqurs] { box-shadow: none; transform: none; background: var(--sand-050); }
    .area-tool-card-top[b-tceijbqurs] { display: contents; }
    .area-tool-icon[b-tceijbqurs] { order: -1; width: 34px; height: 34px; border-radius: 11px; }
    .area-gruppe--rechner .area-tool-icon[b-tceijbqurs] { background: var(--sand-100); color: var(--text-muted); }
    .area-tool-name[b-tceijbqurs] { order: -1; flex: 1; min-width: 0; margin-top: 0; font-family: var(--font-ui); font-size: 15px; color: var(--text-body); }
    .area-gruppe--rechner .area-tool-name[b-tceijbqurs] { color: var(--text-muted); font-weight: 500; }
    .area-tool-desc[b-tceijbqurs] { display: none; }
    .area-tool-card[b-tceijbqurs]::after {
        content: "";
        flex: none;
        width: 8px; height: 8px;
        margin-right: 4px;
        border-top: 2px solid var(--text-subtle);
        border-right: 2px solid var(--text-subtle);
        transform: rotate(45deg);
    }
}
/* /Pages/B2b/OhneTourPanel.razor.rz.scp.css */
.ot[b-adq43vanx1] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--lh-radius-card, 16px);
    padding: 1rem 1.15rem 1.15rem;
}

.ot-kopf[b-adq43vanx1] {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--border-soft);
}

.ot-titel[b-adq43vanx1] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--warning-600);
}

.ot-zahl[b-adq43vanx1] {
    font-family: var(--font-numeric, var(--font-display));
    font-weight: 700;
    font-size: .8rem;
    background: var(--warning-100);
    color: var(--warning-600);
    border-radius: 999px;
    padding: .12rem .6rem;
    font-variant-numeric: tabular-nums;
}

.ot-fueller[b-adq43vanx1] { flex: 1; }

.ot-text[b-adq43vanx1] {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--text-muted);
    line-height: 1.55;
    padding: .75rem 0 .3rem;
}

.ot-info[b-adq43vanx1] { margin: .4rem 0 .2rem; }

.ot-kunde[b-adq43vanx1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem 2.2rem;
    align-items: center;
    gap: .7rem;
    padding: .45rem .3rem;
    border-bottom: 1px solid var(--border-soft);
}

.ot-kunde:last-child[b-adq43vanx1] { border-bottom: none; }

.ot-name[b-adq43vanx1] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .86rem;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.ot-nr[b-adq43vanx1] {
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.ot-leer--unbekannt[b-adq43vanx1] {
    background: var(--warning-100);
    color: var(--warning-600);
}

.ot-leer[b-adq43vanx1] {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-radius: var(--lh-radius-md, 13px);
    padding: .9rem 1rem;
    margin-top: .5rem;
}
/* /Pages/B2b/Portal.razor.rz.scp.css */
/* Reiterleiste der Portal-Verwaltung: ein ORT, keine Aktion — deshalb Unterstrich statt
   gefuellter Pille. Vorher waren beide Abschnitte gefuellte MudButtons und damit optisch
   nicht von „Neuer Portal-Benutzer" daneben zu unterscheiden. */
.pv-tabs[b-bo1x07ngxd] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}

.pv-tab[b-bo1x07ngxd] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .25rem .6rem;
    border-bottom: 2.5px solid transparent;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .93rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.pv-tab:hover[b-bo1x07ngxd] {
    color: var(--text-strong);
    text-decoration: none;
}

.pv-tab.is-on[b-bo1x07ngxd] {
    color: var(--brand-strong);
    border-bottom-color: var(--brand);
}

.pv-tab-zahl[b-bo1x07ngxd] {
    font-family: var(--font-numeric, var(--font-display));
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-subtle);
}

.pv-tab.is-on .pv-tab-zahl[b-bo1x07ngxd] {
    color: var(--brand);
}

.pv-tab:focus-visible[b-bo1x07ngxd] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}
/* /Pages/B2b/PortalMitteilungDialog.razor.rz.scp.css */
.pmd[b-lq4n74198i] { display: flex; flex-direction: column; font-family: var(--font-ui); }

.pmd-kopf[b-lq4n74198i] { padding: 16px 20px 12px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: flex-start; gap: 10px; }
.pmd-kopf .t[b-lq4n74198i] { flex: 1; min-width: 0; }
.pmd-kopf b[b-lq4n74198i] { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.pmd-kopf .t > span[b-lq4n74198i] { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.pmd-kopf .x[b-lq4n74198i] { border: 0; background: none; padding: 2px; color: var(--text-subtle); cursor: pointer; border-radius: 8px; }
.pmd-kopf .x:disabled[b-lq4n74198i] { opacity: .4; cursor: default; }

/* Eingabe links, Vorschau rechts — die Mail ist 600 px breit und soll ungestaucht zu sehen sein. */
.pmd-rumpf[b-lq4n74198i] { padding: 14px 20px 16px; display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 18px; align-items: start; }

.pmd-eingabe[b-lq4n74198i] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.feld[b-lq4n74198i] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld > span[b-lq4n74198i], .eyebrow[b-lq4n74198i] { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.feld input[b-lq4n74198i], .feld textarea[b-lq4n74198i] { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); padding: 10px 14px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); }
.feld input[b-lq4n74198i] { height: 44px; padding-block: 0; }
.feld textarea[b-lq4n74198i] { min-height: 16rem; line-height: 1.5; resize: vertical; }
.feld input:focus[b-lq4n74198i], .feld textarea:focus[b-lq4n74198i] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.feld input:disabled[b-lq4n74198i], .feld textarea:disabled[b-lq4n74198i] { background: var(--surface-sunken); color: var(--text-muted); }
.feld em[b-lq4n74198i] { font-style: normal; font-size: var(--text-xs); color: var(--text-muted); }

.pmd-vorschau[b-lq4n74198i] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pmd-vorschau iframe[b-lq4n74198i] { width: 100%; height: 30rem; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-page); }
.leer[b-lq4n74198i] { border: 1.5px dashed var(--border-default); border-radius: var(--radius-md); background: var(--surface-page); padding: 13px 14px; font-size: var(--text-sm); color: var(--text-muted); }

.pmd-ergebnis[b-lq4n74198i] { padding: 18px 20px; font-size: var(--text-sm); color: var(--text-body); }
.pmd-ergebnis b[b-lq4n74198i] { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.pmd-ergebnis p[b-lq4n74198i] { margin: 8px 0 0; color: var(--text-muted); }
.pmd-ergebnis ul[b-lq4n74198i] { margin: 6px 0 0; padding-left: 1.2rem; list-style: disc; overflow-wrap: anywhere; }

.pmd-fuss[b-lq4n74198i] { padding: 12px 20px 14px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; }
.klein[b-lq4n74198i] { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--text-muted); }
.klein.fehler[b-lq4n74198i] { color: var(--danger-600); }

.knopf[b-lq4n74198i] { flex: none; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-body); white-space: nowrap; cursor: pointer; }
.knopf.pri[b-lq4n74198i] { background: var(--brand); border-color: transparent; color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.knopf.marke[b-lq4n74198i] { border-color: var(--brand); color: var(--brand-strong); }
.knopf:disabled[b-lq4n74198i] { opacity: .45; box-shadow: none; cursor: default; }

@media (max-width: 959.98px) {
    .pmd-rumpf[b-lq4n74198i] { grid-template-columns: minmax(0, 1fr); }
    .pmd-fuss[b-lq4n74198i] { flex-wrap: wrap; }
    .klein[b-lq4n74198i] { flex-basis: 100%; }
}
/* /Pages/B2b/PortalUserFormDialog.razor.rz.scp.css */
.pud[b-95pnamx5c9] { display: flex; flex-direction: column; font-family: var(--font-ui); }

.pud-kopf[b-95pnamx5c9] { padding: 16px 20px 12px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: flex-start; gap: 10px; }
.pud-kopf .t[b-95pnamx5c9] { flex: 1; min-width: 0; }
.pud-kopf b[b-95pnamx5c9] { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.pud-kopf .t > span[b-95pnamx5c9] { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; overflow-wrap: anywhere; }
.pud-kopf .x[b-95pnamx5c9] { border: 0; background: none; padding: 2px; color: var(--text-subtle); cursor: pointer; border-radius: 8px; }

.pud-rumpf[b-95pnamx5c9] { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.pud-rumpf > *[b-95pnamx5c9] { flex: none; }

.pud-fuss[b-95pnamx5c9] { padding: 12px 20px 14px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; }
.klein[b-95pnamx5c9] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--text-muted); }
.klein[b-95pnamx5c9]  svg { flex: none; color: var(--brand); }

.knopf[b-95pnamx5c9] { flex: none; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-body); white-space: nowrap; cursor: pointer; }
.knopf.pri[b-95pnamx5c9] { background: var(--brand); border-color: transparent; color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.knopf.marke[b-95pnamx5c9] { border-color: var(--brand); color: var(--brand-strong); }
.knopf:disabled[b-95pnamx5c9] { opacity: .45; box-shadow: none; cursor: default; }

.chip[b-95pnamx5c9] { display: inline-flex; align-items: center; font-style: normal; font-weight: 600; font-size: var(--text-2xs); border-radius: var(--radius-pill); padding: 2px 8px; background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap; }
.chip.brand[b-95pnamx5c9] { background: var(--brand-soft); color: var(--brand-strong); }
.chip.ok[b-95pnamx5c9] { background: var(--success-100); color: var(--success-600); }
.chip.warn[b-95pnamx5c9] { background: var(--warning-100); color: var(--warning-600); }

.abschnitt[b-95pnamx5c9] { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.eyebrow[b-95pnamx5c9] { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.eyebrow .n[b-95pnamx5c9] { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0; color: var(--text-muted); margin-left: 4px; }
.abschnitt .rechts[b-95pnamx5c9] { margin-left: auto; font-size: var(--text-xs); color: var(--text-subtle); display: inline-flex; align-items: center; gap: 5px; }

.leer[b-95pnamx5c9] { border: 1.5px dashed var(--border-default); border-radius: var(--radius-md); background: var(--surface-page); padding: 13px 14px; display: flex; gap: 11px; align-items: flex-start; }
.leer[b-95pnamx5c9]  svg { flex: none; color: var(--text-subtle); margin-top: 1px; }
.leer b[b-95pnamx5c9] { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--text-body); }
.leer span[b-95pnamx5c9] { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.kr[b-95pnamx5c9] { display: grid; grid-template-columns: 32px minmax(0, 1fr) 190px 32px 32px; align-items: center; gap: 6px; padding: 7px 8px 7px 6px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-card); }
.kr.primaer[b-95pnamx5c9] { background: var(--brand-wash); border-color: var(--brand-soft); }
.stern[b-95pnamx5c9], .ico[b-95pnamx5c9] { width: 32px; height: 32px; border: 0; background: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; padding: 0; }
.stern[b-95pnamx5c9] { color: var(--ink-300); }
.stern.an[b-95pnamx5c9] { color: var(--warning-600); }
.stern.an[b-95pnamx5c9]  svg { fill: currentColor; }
.ico.weg:hover[b-95pnamx5c9] { color: var(--danger-600); }
.kname[b-95pnamx5c9] { min-width: 0; }
.nm[b-95pnamx5c9] { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }
.nm-t[b-95pnamx5c9] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub[b-95pnamx5c9] { display: block; font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Natives select, damit Aussehen und CSS-Isolation in der eigenen Hand bleiben. */
.sel[b-95pnamx5c9] { position: relative; height: 36px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); padding: 0 8px 0 12px; display: flex; align-items: center; gap: 7px; color: var(--text-body); }
.sel .kl[b-95pnamx5c9] { flex: none; font-weight: 500; font-size: var(--text-2xs); color: var(--text-subtle); }
.sel select[b-95pnamx5c9] { flex: 1; min-width: 0; appearance: none; border: 0; background: none; padding: 0 18px 0 0; font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: inherit; cursor: pointer; text-overflow: ellipsis; }
.sel select:focus[b-95pnamx5c9] { outline: none; }
.sel:focus-within[b-95pnamx5c9] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.sel[b-95pnamx5c9]  svg { position: absolute; right: 9px; color: var(--text-subtle); pointer-events: none; }
.sel.ohne[b-95pnamx5c9] { border-color: transparent; background: var(--warning-100); color: var(--warning-600); }
.sel.ohne .kl[b-95pnamx5c9], .sel.ohne[b-95pnamx5c9]  svg { color: var(--warning-600); }

.suchzeile[b-95pnamx5c9] { display: flex; gap: 8px; align-items: stretch; }
.suchzeile .knopf[b-95pnamx5c9] { height: 44px; }
.suchzeile .fld[b-95pnamx5c9], .suche[b-95pnamx5c9] { flex: 1; min-width: 0; }

.fld[b-95pnamx5c9] { height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); padding: 0 14px; display: flex; align-items: center; gap: 10px; cursor: text; }
.fld[b-95pnamx5c9]  svg { flex: none; color: var(--text-subtle); }
.fld input[b-95pnamx5c9] { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 0; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); }
.fld input[b-95pnamx5c9]::placeholder { color: var(--text-subtle); }
.fld:focus-within[b-95pnamx5c9] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }

/* MudAutocomplete bleibt (Suche, Tastatur, Popover), bekommt aber Feldform und Schrift der Maske. */
.suche[b-95pnamx5c9]  .mud-input-control { margin: 0; }
.suche[b-95pnamx5c9]  .mud-input.mud-input-outlined { height: 44px; border-radius: var(--radius-md); background: var(--surface-card); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); }
.suche[b-95pnamx5c9]  .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-md); border-color: var(--border-default); }
.suche[b-95pnamx5c9]  .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-width: 1px; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.suche[b-95pnamx5c9]  input { font-family: var(--font-ui); font-size: var(--text-sm); }
.suche[b-95pnamx5c9]  input::placeholder { color: var(--text-subtle); opacity: 1; }
.suche[b-95pnamx5c9]  .mud-input-adornment svg { color: var(--text-subtle); font-size: 20px; }

.vs[b-95pnamx5c9] { display: flex; align-items: center; gap: 10px; width: 100%; font-family: var(--font-ui); }
.vs b[b-95pnamx5c9] { font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }
.vs span[b-95pnamx5c9] { margin-left: auto; font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

.flbl[b-95pnamx5c9] { display: flex; align-items: baseline; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--text-body); margin-top: 6px; }
.flbl em[b-95pnamx5c9] { font-style: normal; color: var(--danger-600); }
.hilfe[b-95pnamx5c9] { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); margin-top: -4px; }
.hilfe[b-95pnamx5c9]  svg { color: var(--success-600); }

.meldung[b-95pnamx5c9] { display: flex; gap: 9px; align-items: flex-start; border-radius: 12px; padding: 9px 12px; font-size: var(--text-xs); font-weight: 600; line-height: 1.4; }
.meldung[b-95pnamx5c9]  svg { flex: none; margin-top: 1px; }
.meldung span[b-95pnamx5c9] { font-weight: 500; }
.meldung.warn[b-95pnamx5c9] { background: var(--warning-100); color: var(--warning-600); }
.meldung.fehler[b-95pnamx5c9] { background: var(--danger-100); color: var(--danger-600); }

@media (pointer: coarse) {
    .stern[b-95pnamx5c9], .ico[b-95pnamx5c9], .pud-kopf .x[b-95pnamx5c9] { min-width: 44px; min-height: 44px; }
    .knopf[b-95pnamx5c9] { height: 44px; }
}
/* /Pages/B2b/PortalUsers.razor.rz.scp.css */
/* Zaehlstreifen: die drei Zahlen, die man morgens wissen will — und zugleich der Filter.
   Kacheln sind <button>, damit Tastatur und Screenreader sie als Bedienelement bekommen. */
.pu-streifen[b-ggvv3kwdae] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.pu-kachel[b-ggvv3kwdae] {
    text-align: left;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--lh-radius-md, 14px);
    padding: .6rem .85rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.pu-kachel.is-warn[b-ggvv3kwdae] { background: var(--warning-100); border-color: transparent; }
.pu-kachel.is-on[b-ggvv3kwdae]   { border-color: var(--brand); box-shadow: var(--shadow-md); }

.pu-kachel:focus-visible[b-ggvv3kwdae] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.pu-kachel-zahl[b-ggvv3kwdae] {
    display: block;
    font-family: var(--font-numeric, var(--font-display));
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.05;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.pu-kachel.is-warn .pu-kachel-zahl[b-ggvv3kwdae] { color: var(--warning-600); }

.pu-kachel-text[b-ggvv3kwdae] {
    display: block;
    font-family: var(--font-ui);
    font-size: .76rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

/* Liste. Kopf und Zeilen teilen sich EINE Rasterdefinition — getrennt gepflegt fluchten
   die Spalten sofort nicht mehr. */
.pu-tabelle[b-ggvv3kwdae] {
    --pu-cols: minmax(0, 1.5fr) minmax(0, 1.2fr) 11.5rem 9rem 6.5rem;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--lh-radius-card, 16px);
    overflow: hidden;
}

.pu-kopf[b-ggvv3kwdae], .pu-zeile[b-ggvv3kwdae] {
    display: grid;
    grid-template-columns: var(--pu-cols);
    align-items: center;
    gap: .9rem;
    padding: .55rem 1.1rem;
}

.pu-kopf[b-ggvv3kwdae] {
    background: var(--sand-050);
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-ui);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.pu-zeile[b-ggvv3kwdae] {
    padding-block: .7rem;
    border-bottom: 1px solid var(--border-soft);
}

.pu-zeile:last-child[b-ggvv3kwdae] { border-bottom: none; }
.pu-zeile.is-warn[b-ggvv3kwdae]    { background: var(--warning-100); }

.pu-rechts[b-ggvv3kwdae] { text-align: right; }

.pu-name[b-ggvv3kwdae] {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .92rem;
    color: var(--text-strong);
}

.pu-name.is-fehlend[b-ggvv3kwdae] { color: var(--warning-600); }

.pu-unten[b-ggvv3kwdae] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--text-subtle);
    margin-top: .18rem;
}

.pu-unten-warn[b-ggvv3kwdae] { color: var(--warning-600); }

.pu-mail[b-ggvv3kwdae] {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--text-body);
    overflow-wrap: anywhere;
}

.pu-zahl[b-ggvv3kwdae] {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.pu-zahl small[b-ggvv3kwdae] {
    display: block;
    font-size: .7rem;
    color: var(--text-subtle);
    margin-top: .12rem;
}

.pu-chip[b-ggvv3kwdae] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    padding: .1rem .55rem;
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 600;
    background: var(--sand-100);
    color: var(--text-muted);
    white-space: nowrap;
}

.pu-chip--aktiv[b-ggvv3kwdae]      { background: var(--success-100); color: var(--success-600); }
.pu-chip--eingeladen[b-ggvv3kwdae] { background: var(--warning-100); color: var(--warning-600); }
.pu-chip--ohne-kunde[b-ggvv3kwdae] { background: var(--danger-100);  color: var(--danger-600); }

.pu-aktion[b-ggvv3kwdae] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .15rem;
}

.pu-suche[b-ggvv3kwdae] { min-width: 15rem; }

.pu-leer[b-ggvv3kwdae] {
    background: var(--surface-sunken);
    border-radius: var(--lh-radius-card, 16px);
    padding: 2.4rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.pu-leer-titel[b-ggvv3kwdae] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .98rem;
    color: var(--text-strong);
    margin-top: .5rem;
}

.pu-leer-text[b-ggvv3kwdae] {
    font-family: var(--font-body);
    font-size: .85rem;
    margin-top: .3rem;
}

/* Schmal: der Zaehlstreifen wird zweizeilig, die Liste gibt die beiden ruhigen Spalten auf.
   Zustand und Aktion bleiben — sie tragen die Entscheidung. */
@media (max-width: 1100px) {
    .pu-tabelle[b-ggvv3kwdae] { --pu-cols: minmax(0, 1.6fr) minmax(0, 1.2fr) 10.5rem 6.5rem; }
    .pu-kopf > :nth-child(4)[b-ggvv3kwdae], .pu-zeile > .pu-zahl[b-ggvv3kwdae] { display: none; }
}

@media (max-width: 780px) {
    .pu-streifen[b-ggvv3kwdae] { grid-template-columns: repeat(2, 1fr); }
    .pu-tabelle[b-ggvv3kwdae]  { --pu-cols: minmax(0, 1fr) 9.5rem 6.5rem; }
    .pu-kopf > :nth-child(2)[b-ggvv3kwdae], .pu-zeile > .pu-mail[b-ggvv3kwdae] { display: none; }
}
/* /Pages/B2b/TourBahn.razor.rz.scp.css */
.tb[b-l9m4m52qoa] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .4rem;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--lh-radius-card, 16px);
    align-self: start;
}

.tb-titel[b-l9m4m52qoa] {
    font-family: var(--font-ui);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: .5rem .7rem .35rem;
}

.tb-zeile[b-l9m4m52qoa] {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    text-align: left;
    padding: .55rem .7rem;
    border: 1px solid transparent;
    border-radius: var(--lh-radius-md, 13px);
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.tb-zeile:hover[b-l9m4m52qoa]  { background: var(--surface-sunken); }
.tb-zeile.is-on[b-l9m4m52qoa]  { background: var(--brand-wash); border-color: var(--brand-soft); }
.tb-zeile.is-still .tb-name[b-l9m4m52qoa] { color: var(--text-muted); }
.tb-zeile:focus-visible[b-l9m4m52qoa] { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

.tb-luecke[b-l9m4m52qoa]        { background: var(--warning-100); margin-top: .5rem; }
.tb-luecke.is-on[b-l9m4m52qoa]  { background: var(--warning-100); border-color: var(--warning-600); }
.tb-luecke.is-leer[b-l9m4m52qoa] { background: none; }

.tb-marke[b-l9m4m52qoa] {
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tb-marke.is-warn[b-l9m4m52qoa] { background: var(--warning-600); color: var(--white); }
.tb-zeile.is-still .tb-marke[b-l9m4m52qoa] { background: var(--sand-200); color: var(--text-subtle); }

.tb-text[b-l9m4m52qoa] { flex: 1; min-width: 0; }

.tb-name[b-l9m4m52qoa] {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .85rem;
    color: var(--text-strong);
}

.tb-luecke .tb-name[b-l9m4m52qoa] { color: var(--warning-600); }
.tb-luecke.is-leer .tb-name[b-l9m4m52qoa] { color: var(--text-strong); }

.tb-meta[b-l9m4m52qoa] {
    display: block;
    font-family: var(--font-ui);
    font-size: .72rem;
    color: var(--text-subtle);
    margin-top: .15rem;
}

/* Wochentag-Reihe statt des Strings „Mo Mi Fr" — auf einen Blick vergleichbar.
   Sa/So sind selten und stehen als „+", damit die Reihe schmal bleibt. */
.tb-tage[b-l9m4m52qoa] {
    display: inline-flex;
    gap: 2px;
    flex: none;
}

.tb-tage span[b-l9m4m52qoa] {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .66rem;
    background: var(--sand-100);
    color: var(--text-subtle);
}

.tb-tage span.is-on[b-l9m4m52qoa] { background: var(--brand); color: var(--white); }

.tb-still[b-l9m4m52qoa] {
    flex: none;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-subtle);
    background: var(--sand-100);
    border-radius: 999px;
    padding: .1rem .5rem;
}
/* /Pages/B2b/TourDetail.razor.rz.scp.css */
.td[b-8ep14tn4x6] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--lh-radius-card, 16px);
    padding: 1rem 1.15rem 1.15rem;
}

.td-kopf[b-8ep14tn4x6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-soft);
}

.td-titel[b-8ep14tn4x6] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--text-strong);
}

.td-fueller[b-8ep14tn4x6] { flex: 1; }

.td-chip[b-8ep14tn4x6] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .12rem .55rem;
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 600;
    background: var(--sand-100);
    color: var(--text-muted);
    white-space: nowrap;
}

.td-chip.is-ok[b-8ep14tn4x6] { background: var(--success-100); color: var(--success-600); }

.td-werte[b-8ep14tn4x6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1.6rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.td-wert--breit[b-8ep14tn4x6] { grid-column: 1 / -1; }

.td-label[b-8ep14tn4x6] {
    font-family: var(--font-ui);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.td-v[b-8ep14tn4x6] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-body);
    margin-top: .3rem;
}

.td-v small[b-8ep14tn4x6] { font-weight: 500; font-size: .75rem; color: var(--text-subtle); }

.td-hinweis[b-8ep14tn4x6] {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .25rem;
    line-height: 1.45;
}

/* Wochentag-Reihe, dieselbe Ordnung wie in der Bahn und im Formular. */
.td-tage[b-8ep14tn4x6] {
    display: flex;
    gap: .25rem;
    margin-top: .35rem;
}

.td-tage span[b-8ep14tn4x6] {
    width: 2.4rem;
    height: 2.1rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .78rem;
    background: var(--sand-100);
    color: var(--text-subtle);
}

.td-tage span.is-on[b-8ep14tn4x6] { background: var(--brand); color: var(--text-on-brand); }

.td-kunden-kopf[b-8ep14tn4x6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .85rem 0 .5rem;
}

.td-kunden-titel[b-8ep14tn4x6] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .92rem;
    color: var(--text-strong);
}

.td-filter[b-8ep14tn4x6] { max-width: 12rem; }

.td-zuordnen[b-8ep14tn4x6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--surface-sunken);
    border-radius: var(--lh-radius-md, 13px);
    padding: .6rem .7rem;
    margin-bottom: .5rem;
}

.td-zuordnen-feld[b-8ep14tn4x6] { flex: 1; min-width: 16rem; }

/* Der Umzugs-Hinweis bricht auf eine eigene Zeile — er gehoert zur Auswahl darueber,
   nicht neben den Knopf. */
.td-zuordnen-hinweis[b-8ep14tn4x6] { flex-basis: 100%; margin: 0; }

.td-kunde[b-8ep14tn4x6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem 2.2rem;
    align-items: center;
    gap: .7rem;
    padding: .45rem .3rem;
    border-bottom: 1px solid var(--border-soft);
}

.td-kunde:last-child[b-8ep14tn4x6] { border-bottom: none; }

.td-kunde-name[b-8ep14tn4x6] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .86rem;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.td-kunde-id[b-8ep14tn4x6] {
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.td-leer[b-8ep14tn4x6] {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-radius: var(--lh-radius-md, 13px);
    padding: .9rem 1rem;
    line-height: 1.5;
}

@media (max-width: 780px) {
    .td-werte[b-8ep14tn4x6] { grid-template-columns: 1fr; }
    .td-tage span[b-8ep14tn4x6] { width: 2rem; height: 2rem; font-size: .72rem; }
}
/* /Pages/B2b/TourFormular.razor.rz.scp.css */
.tf[b-kevf7wvg62] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--lh-radius-card, 16px);
    padding: 1rem 1.15rem 1.15rem;
}

.tf-kopf[b-kevf7wvg62] {
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: .35rem;
}

.tf-titel[b-kevf7wvg62] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-strong);
}

.tf-label[b-kevf7wvg62] {
    font-family: var(--font-ui);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: .4rem;
}

.tf-tage[b-kevf7wvg62] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.tf-tag[b-kevf7wvg62] {
    width: 2.6rem;
    height: 2.4rem;
    border-radius: 11px;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
}

.tf-tag.is-on[b-kevf7wvg62] {
    background: var(--brand);
    border-color: transparent;
    color: var(--text-on-brand);
}

.tf-tag:focus-visible[b-kevf7wvg62] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.tf-knoepfe[b-kevf7wvg62] { gap: .5rem; }
/* /Pages/B2b/Tours.razor.rz.scp.css */
/* Bahn links, eine Tour im Fokus rechts. */
.tr-flaeche[b-cdxev2i025] {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.tr-detail[b-cdxev2i025] { min-width: 0; }

.tr-hinweis[b-cdxev2i025] { margin-bottom: .75rem; }

.tr-leer[b-cdxev2i025] {
    background: var(--surface-sunken);
    border-radius: var(--lh-radius-card, 16px);
    padding: 2.6rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.tr-leer-titel[b-cdxev2i025] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-strong);
    margin-top: .5rem;
}

.tr-leer-text[b-cdxev2i025] {
    font-family: var(--font-body);
    font-size: .85rem;
    margin: .35rem auto 0;
    max-width: 34rem;
    line-height: 1.55;
}

/* Schmal: die Bahn legt sich ueber das Detail statt daneben. */
@media (max-width: 1000px) {
    .tr-flaeche[b-cdxev2i025] { grid-template-columns: 1fr; }
}
/* /Pages/BankeinzahlungSeite.razor.rz.scp.css */
.be[b-391w0lpef5] {
    padding: 18px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 18px;
    align-items: start;
    font-family: var(--font-ui);
}

.be-hinweis[b-391w0lpef5] {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    font-size: var(--text-sm);
    color: var(--text-body);
}

.be-hinweis--fehler[b-391w0lpef5] { background: var(--danger-100); border-color: transparent; color: var(--danger-600); }

.be-liste[b-391w0lpef5], .be-detail[b-391w0lpef5] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.be-tabelle[b-391w0lpef5] { width: 100%; border-collapse: collapse; }
.be-tabelle th[b-391w0lpef5] { text-align: left; font-weight: 700; font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); padding: 10px 16px; border-bottom: 1px solid var(--border-default); }
.be-tabelle td[b-391w0lpef5] { padding: 10px 16px; border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.be-tabelle .r[b-391w0lpef5] { text-align: right; }
.be-tabelle tr.is-gewaehlt td[b-391w0lpef5] { background: var(--brand-wash); }
.be-tabelle tr.is-gewaehlt td:first-child[b-391w0lpef5] { box-shadow: inset 3px 0 0 var(--brand); }
.be-summe-zelle[b-391w0lpef5] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }

.be-wahl[b-391w0lpef5] {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--text-link);
    cursor: pointer;
}

.be-detail[b-391w0lpef5] { padding: 18px 20px; display: flex; flex-direction: column; }
.be-detail-kopf[b-391w0lpef5] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.be-detail-titel[b-391w0lpef5] { font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.be-detail-zeit[b-391w0lpef5] { font-size: var(--text-xs); color: var(--text-muted); }

.be-drucken[b-391w0lpef5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    background: var(--brand);
    color: var(--text-on-brand);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
}

.be-tag[b-391w0lpef5] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--text-sm);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.be-gesamt[b-391w0lpef5] { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.be-gesamt-l[b-391w0lpef5] { font-weight: 700; font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.be-gesamt-v[b-391w0lpef5] { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.be-fuss[b-391w0lpef5] { margin-top: 10px; font-size: var(--text-xs); color: var(--text-muted); }

@media (max-width: 959.98px) {
    .be[b-391w0lpef5] { grid-template-columns: 1fr; padding: 14px 16px; }
}

@media print {
    .be[b-391w0lpef5] { display: block; padding: 0; }
    .be-liste[b-391w0lpef5], .be-detail[b-391w0lpef5], .be-hinweis[b-391w0lpef5] { display: none; }
}
/* /Pages/CafeStats.razor.rz.scp.css */
.dash[b-qn4guvs78i] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 28px 18px;
    gap: 12px;
}

/* ── Filterzeile (Kopf + Haupt-Aktionen liegen in der Topbar) ── */
.dash-filters[b-qn4guvs78i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.dash-filters-spacer[b-qn4guvs78i] {
    flex: 1;
}

.dash-datepicker[b-qn4guvs78i] {
    width: 150px;
}

.dash-select[b-qn4guvs78i] {
    width: 190px;
}

.dash-progress[b-qn4guvs78i] {
    flex: none;
}

/* ── KPI-Reihe ── */
.dash-kpis[b-qn4guvs78i] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex: none;
}

.dash-kpi[b-qn4guvs78i] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.dash-kpi:hover[b-qn4guvs78i] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 6px 16px rgba(77, 77, 77, .12));
}

.dash-kpi-text[b-qn4guvs78i] {
    min-width: 0;
}

.dash-kpi-eyebrow[b-qn4guvs78i] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.dash-kpi-value[b-qn4guvs78i] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    color: var(--text-strong);
}

.dash-kpi-icon[b-qn4guvs78i] {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-wash);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Inhalts-Grid (Diagramm | Tabelle) ── */
.dash-grid[b-qn4guvs78i] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
}

.dash-grid--cafe[b-qn4guvs78i] {
    grid-template-columns: minmax(320px, 0.78fr) 1.5fr;
}

.dash-card[b-qn4guvs78i] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 18px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.dash-card:hover[b-qn4guvs78i] {
    box-shadow: var(--shadow-md, 0 6px 16px rgba(77, 77, 77, .12));
}

.dash-card-title[b-qn4guvs78i] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-strong);
    flex: none;
    margin-bottom: 12px;
}

.dash-card-body[b-qn4guvs78i] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.dash-table[b-qn4guvs78i] {
    padding: 0;
}

.dash-empty[b-qn4guvs78i] {
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text-muted);
    padding: 8px 2px;
}

/* ── ABC-Pille ── */
.pill[b-qn4guvs78i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11px;
}

/* ── In-Café Mini-Fortschritt ── */
.incafe-cell[b-qn4guvs78i] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.incafe-bar[b-qn4guvs78i] {
    display: inline-block;
    height: 5px;
    border-radius: 999px;
    background: var(--sand-100);
    width: 60px;
    overflow: hidden;
    vertical-align: middle;
}

.incafe-fill[b-qn4guvs78i] {
    display: block;
    height: 100%;
    background: var(--green-500, #6D998C);
    border-radius: 999px;
}

.incafe-pct[b-qn4guvs78i] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-strong);
    min-width: 38px;
    text-align: right;
}
/* /Pages/Components/PacklistBestellzeile.razor.rz.scp.css */
.zeile[b-rg7akixle5] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1.5px solid transparent;
    border-radius: 13px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.zeile:hover[b-rg7akixle5] { background: var(--brand-wash); }

.zeile.on[b-rg7akixle5] {
    background: var(--brand-wash);
    border-color: var(--brand-soft);
}

/* Der Störfall ist kein ausgegrauter Text, sondern eine Warnung mit Ausweg. */
.zeile.gestoert[b-rg7akixle5] {
    background: var(--danger-100, #f3e0dc);
    cursor: default;
}

.zeile.gestoert:hover[b-rg7akixle5] { background: var(--danger-100, #f3e0dc); }

.box[b-rg7akixle5] {
    width: 22px;
    height: 22px;
    flex: none;
    border: 1.5px solid var(--border-strong, #d9bc9c);
    border-radius: 7px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.box.an[b-rg7akixle5] { background: var(--brand); border-color: var(--brand); }
.box.kaputt[b-rg7akixle5] { border-color: var(--danger-600); color: var(--danger-600); }

.text[b-rg7akixle5] { flex: 1; min-width: 0; }
.name[b-rg7akixle5] { display: block; font-weight: 600; font-size: .95rem; color: var(--text-strong, #2e2e2e); }
.name.warn[b-rg7akixle5] { color: var(--danger-600); }

.meta[b-rg7akixle5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: .75rem;
    color: var(--text-subtle, #908b83);
}

/* Kommentar aus dem Händlerportal: höchstens zwei Zeilen, der volle Text steht auf dem Einzelblatt. */
.kommentar[b-rg7akixle5] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--text-sm);
    color: var(--text-body);
}
.kommentar-text[b-rg7akixle5] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    text-align: left;
}

.gruppe[b-rg7akixle5] {
    border-radius: 999px;
    padding: 2px 9px;
    background: var(--sand-100);
    font-weight: 600;
}

.zahl[b-rg7akixle5] {
    display: block;
    width: 78px;
    flex: none;
    text-align: right;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.zahl small[b-rg7akixle5] { display: block; font-weight: 500; font-size: .66rem; color: var(--text-subtle, #908b83); margin-top: 1px; }

.stoerung[b-rg7akixle5] { text-align: right; }
.stoerung .warn[b-rg7akixle5] { display: block; font-weight: 600; font-size: .8rem; color: var(--danger-600); }
.stoerung .meta[b-rg7akixle5] { justify-content: flex-end; }

/* Mobil (#2607): statt der Auswahl-Zeile die aufklappbare Bestellung mit ihren Positionen. */
.aufklapp[b-rg7akixle5] { display: none; }

@media (max-width: 959.98px) {
    button.zeile[b-rg7akixle5] { display: none; }

    .aufklapp[b-rg7akixle5] {
        display: block;
        border-bottom: 1px solid var(--border-soft);
    }
    .aufklapp:last-of-type[b-rg7akixle5] { border-bottom: 0; }

    .aufklapp-kopf[b-rg7akixle5] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 2px;
        list-style: none;
        cursor: pointer;
    }
    .aufklapp-kopf[b-rg7akixle5]::-webkit-details-marker { display: none; }

    .zahl[b-rg7akixle5] { width: auto; min-width: 52px; }

    .pfeil[b-rg7akixle5] {
        flex: none;
        display: inline-flex;
        color: var(--text-subtle, #908b83);
        transition: transform .15s var(--ease-out, ease);
    }
    .aufklapp[open] .pfeil[b-rg7akixle5] { transform: rotate(180deg); }

    /* Ohne Einzelblatt am Handy muss der Kommentar ganz lesbar sein. */
    .kommentar-text[b-rg7akixle5] { display: block; -webkit-line-clamp: unset; overflow: visible; }

    .positionen[b-rg7akixle5] {
        margin: 0 0 12px;
        padding: 4px 12px;
        list-style: none;
        border-radius: 12px;
        background: var(--sand-100);
    }
    .positionen li[b-rg7akixle5] {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px solid var(--border-soft);
        font-size: var(--text-sm);
    }
    .positionen li:last-child[b-rg7akixle5] { border-bottom: 0; }
    .pos-name[b-rg7akixle5] { flex: 1; min-width: 0; color: var(--text-body); }
    .pos-name small[b-rg7akixle5] { display: block; font-size: var(--text-xs); color: var(--text-subtle, #908b83); }
    .pos-menge[b-rg7akixle5] { flex: none; font-weight: 600; color: var(--text-strong, #2e2e2e); font-variant-numeric: tabular-nums; text-align: right; }
}
/* /Pages/Components/PacklistDHLHinweis.razor.rz.scp.css */
/* Dieselben Abstände wie eine Bestellzeile, damit das Paket-Zeichen unter den Haken steht. */
.dhl-hinweis[b-1pkjf97aso] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 6px;
    padding: 11px 12px;
    border-radius: 13px;
    background: var(--sand-100);
}

.dhl-zeichen[b-1pkjf97aso] {
    width: 22px;
    height: 22px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: var(--text-muted, #6e6e6a);
}

.dhl-text[b-1pkjf97aso] { flex: 1; min-width: 0; }
.dhl-kopf[b-1pkjf97aso] { display: block; font-weight: 600; font-size: .84rem; color: var(--text-body); }
.dhl-wo[b-1pkjf97aso] { font-weight: 500; color: var(--text-muted, #6e6e6a); }
.dhl-namen[b-1pkjf97aso] { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.45; color: var(--text-muted, #6e6e6a); }
/* /Pages/Components/PacklistDruckauftrag.razor.rz.scp.css */
.auftrag[b-cbixgz0b3m] {
    width: 348px;
    flex: none;
    border-left: 1px solid var(--border-soft);
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.eyebrow[b-cbixgz0b3m] {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-subtle, #908b83);
}

.hero[b-cbixgz0b3m] {
    margin-top: 6px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--brand-strong, #307382);
    font-variant-numeric: tabular-nums;
}

.kv[b-cbixgz0b3m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 5px 0;
    font-size: .82rem;
    color: var(--text-muted, #6e6e6a);
}

.kv b[b-cbixgz0b3m] { font-size: .95rem; color: var(--text-body); font-variant-numeric: tabular-nums; }
.kv.summe[b-cbixgz0b3m] { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 9px; }

.hinweis[b-cbixgz0b3m] {
    display: flex;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--sand-100);
    font-size: .76rem;
    line-height: 1.5;
    color: var(--text-muted, #6e6e6a);
}

.hinweis[b-cbixgz0b3m]  .mud-icon-root { color: var(--warning-600, #b07a3c); flex: none; }

.mini[b-cbixgz0b3m] {
    border: 1px solid var(--border-default, #e0d9cd);
    border-radius: 10px;
    background: #fff;
    padding: 12px 13px;
}

.mini-kopf[b-cbixgz0b3m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--text-strong, #2e2e2e);
}

.mini-titel[b-cbixgz0b3m] { font-weight: 700; font-size: .82rem; }
.mini-datum[b-cbixgz0b3m] { font-size: .66rem; color: var(--text-muted, #6e6e6a); }

.mini-zeile[b-cbixgz0b3m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: .72rem;
}

.mini-zeile:last-child[b-cbixgz0b3m] { border-bottom: none; }
.mini-name[b-cbixgz0b3m] { flex: 1; min-width: 0; }
.mini-menge[b-cbixgz0b3m] { font-weight: 700; font-variant-numeric: tabular-nums; }

.mini-kasten[b-cbixgz0b3m] {
    width: 13px;
    height: 13px;
    flex: none;
    border: 1.2px solid var(--text-body);
    border-radius: 3px;
}

.auftrag-fuss[b-cbixgz0b3m] { margin-top: auto; padding-top: 6px; }

.auftrag-note[b-cbixgz0b3m] {
    margin-top: 8px;
    text-align: center;
    font-size: .72rem;
    color: var(--text-subtle, #908b83);
}

/* Mobil wird nicht gedruckt (#2607). */
@media (max-width: 959.98px) {
    .auftrag[b-cbixgz0b3m] { display: none; }
}
/* /Pages/Components/PacklistSheet.razor.rz.scp.css */
.sheet[b-xxc8l2vo2t] {
    border: 1px solid var(--line, #e2e2e2);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    background: #fff;
}

.sheet-kopf[b-xxc8l2vo2t] {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding-bottom: .5rem;
    border-bottom: 2px solid #111;
}

.sheet-titel[b-xxc8l2vo2t] { display: flex; align-items: baseline; gap: .6rem; font-size: 1.25rem; font-weight: 700; }
.sheet-marke[b-xxc8l2vo2t] {
    background: #111; color: #fff; border-radius: 4px;
    padding: .1rem .45rem; font-size: .8rem; letter-spacing: .04em;
}
.sheet-kdnr[b-xxc8l2vo2t] { font-size: .9rem; font-weight: 400; opacity: .65; }
.sheet-meta[b-xxc8l2vo2t] { display: flex; gap: .9rem; font-size: .9rem; opacity: .75; }

.sheet-notiz[b-xxc8l2vo2t] {
    margin: .6rem 0 0; padding: .4rem .6rem;
    background: var(--sand-200, #f4f1ea); border-radius: 6px; font-size: .9rem;
}

.sheet-kommentar p[b-xxc8l2vo2t] { margin: .15rem 0 0; white-space: pre-line; }
.sheet-kommentar-titel[b-xxc8l2vo2t] {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .7;
}

.sheet-tabelle[b-xxc8l2vo2t] { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.sheet-tabelle th[b-xxc8l2vo2t] {
    text-align: left; font-size: .75rem; text-transform: uppercase;
    letter-spacing: .05em; opacity: .6; padding: .35rem .3rem;
    border-bottom: 1px solid var(--line, #ddd);
}
.sheet-tabelle td[b-xxc8l2vo2t] { padding: .45rem .3rem; border-bottom: 1px solid #eee; vertical-align: top; }

.c-menge[b-xxc8l2vo2t] { width: 15rem; }
.c-haken[b-xxc8l2vo2t] { width: 4.5rem; text-align: center; }

.art-name[b-xxc8l2vo2t] { font-weight: 500; }
.art-nr[b-xxc8l2vo2t] { font-size: .78rem; opacity: .55; font-variant-numeric: tabular-nums; }
.art-hinweis[b-xxc8l2vo2t] { font-size: .82rem; font-style: italic; margin-top: .15rem; }

.menge-gross[b-xxc8l2vo2t] { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.menge-klein[b-xxc8l2vo2t] { font-size: .78rem; opacity: .6; font-variant-numeric: tabular-nums; }

.kasten[b-xxc8l2vo2t] {
    display: inline-block; width: 1.15rem; height: 1.15rem;
    border: 1.5px solid #666; border-radius: 3px;
}

.sheet-fuss[b-xxc8l2vo2t] { margin-top: .7rem; font-size: .75rem; opacity: .6; }

@media print {
    .sheet[b-xxc8l2vo2t] {
        border: none; border-radius: 0; padding: 0;
        break-after: page;
    }
    .sheet:last-child[b-xxc8l2vo2t] { break-after: auto; }
    .sheet-tabelle[b-xxc8l2vo2t] { font-size: 11pt; }
    .sheet-tabelle tr[b-xxc8l2vo2t] { break-inside: avoid; }
    .sheet-kopf[b-xxc8l2vo2t] { border-bottom-color: #000; }
}
/* /Pages/Components/PacklistTagesbahn.razor.rz.scp.css */
.bahn[b-jyyt78yra4] {
    width: 296px;
    flex: none;
    border-right: 1px solid var(--border-soft);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.bahn-titel[b-jyyt78yra4] {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-subtle, #908b83);
    padding: 2px 12px 8px;
}

/* Vierzehn Tage passen nicht auf jede Schirmhoehe: die Liste scrollt, die Wochensumme
   bleibt unten stehen (gleiche Bauform wie die KassenBahn im Tagesabschluss). */
.bahn-tage[b-jyyt78yra4] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Trennt die laufende Woche von der Vorschau — ohne ihn liest sich die Bahn als 14
   gleichwertige Packtage, obwohl nur die erste Haelfte vorausgewaehlt ist. */
.bahn-trenner[b-jyyt78yra4] {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-subtle, #908b83);
    padding: 14px 12px 6px;
    margin-top: 6px;
    border-top: 1px solid var(--border-soft);
}

.tag[b-jyyt78yra4] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tag:hover[b-jyyt78yra4] { background: var(--brand-wash); }

.tag.on[b-jyyt78yra4] {
    background: #fff;
    border-color: var(--brand-soft);
    box-shadow: 0 6px 18px rgba(77, 77, 77, .08);
}

.marke[b-jyyt78yra4] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marke.alle[b-jyyt78yra4] { background: var(--brand); color: #fff; }
.marke.teils[b-jyyt78yra4] { background: var(--sand-300, #e8d9c6); color: var(--text-body); }
.marke.keine[b-jyyt78yra4] { background: var(--sand-200); }
.marke.dhl[b-jyyt78yra4] { background: var(--sand-200); color: var(--text-subtle, #908b83); }

.tag-text[b-jyyt78yra4] { flex: 1; min-width: 0; }
.tag-name[b-jyyt78yra4] { display: block; font-weight: 600; font-size: .84rem; }
.tag-meta[b-jyyt78yra4] { display: block; font-size: .72rem; color: var(--text-subtle, #908b83); margin-top: 2px; }

.tag-wert[b-jyyt78yra4] {
    display: block;
    text-align: right;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tag-wert.still[b-jyyt78yra4] { color: var(--text-subtle, #908b83); }

/* Vergangene und kommende Tage bleiben sichtbar und anklickbar (Nachdruck bzw.
   Vorschau), treten aber zurück — sie sind nicht vorausgewählt. */
.tag.vergangen .tag-name[b-jyyt78yra4],
.tag.naechste .tag-name[b-jyyt78yra4] { font-weight: 500; color: var(--text-muted, #6e6e6a); }
.tag.on .tag-name[b-jyyt78yra4] { font-weight: 600; color: var(--text-strong, #2e2e2e); }
.tag-wert small[b-jyyt78yra4] { display: block; font-weight: 500; font-size: .66rem; color: var(--text-subtle, #908b83); margin-top: 1px; }

.bahn-summe[b-jyyt78yra4] {
    margin-top: 12px;
    background: var(--sand-100);
    border-radius: 14px;
    padding: 13px 14px;
}

.summe-zeile[b-jyyt78yra4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--text-muted, #6e6e6a);
    margin-bottom: 6px;
}

.summe-zeile:last-child[b-jyyt78yra4] { margin-bottom: 0; }
.summe-zeile b[b-jyyt78yra4] { font-size: .95rem; color: var(--text-strong, #2e2e2e); font-variant-numeric: tabular-nums; }

.tag-name-kurz[b-jyyt78yra4],
.tag-meta-kurz[b-jyyt78yra4] { display: none; }

/* Mobil (#2607): die Bahn wird zum waagerechten Streifen schmaler Tages-Chips. Gewählt und
   gedruckt wird dort nicht, deshalb fallen Marke, Kartonzahl und Wochensumme weg. */
@media (max-width: 959.98px) {
    .bahn[b-jyyt78yra4] {
        width: auto;
        border-right: 0;
        padding: 4px 0 12px;
    }

    .bahn-titel[b-jyyt78yra4],
    .bahn-summe[b-jyyt78yra4],
    .marke[b-jyyt78yra4],
    .tag-wert[b-jyyt78yra4],
    .tag-name[b-jyyt78yra4],
    .tag-meta[b-jyyt78yra4] { display: none; }

    .bahn-tage[b-jyyt78yra4] {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 14px;
        scrollbar-width: none;
    }

    .tag[b-jyyt78yra4] {
        flex: none;
        width: auto;
        min-width: 96px;
        padding: 9px 12px;
        border-color: var(--border-soft);
        border-radius: 14px;
    }

    .tag-name-kurz[b-jyyt78yra4] { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--text-strong, #2e2e2e); white-space: nowrap; }
    .tag-meta-kurz[b-jyyt78yra4] { display: block; font-size: var(--text-xs); color: var(--text-subtle, #908b83); margin-top: 2px; white-space: nowrap; }
    .tag.on .tag-meta-kurz[b-jyyt78yra4] { color: var(--brand-strong); font-weight: 600; }
    .tag.vergangen .tag-name-kurz[b-jyyt78yra4],
    .tag.naechste .tag-name-kurz[b-jyyt78yra4] { font-weight: 500; color: var(--text-muted, #6e6e6a); }

    /* Der Wochen-Trenner wird zur senkrechten Linie zwischen den Chips. */
    .bahn-trenner[b-jyyt78yra4] {
        flex: none;
        width: 1px;
        margin: 4px 2px;
        padding: 0;
        border-top: 0;
        background: var(--border-soft);
        font-size: 0;
    }
}
/* /Pages/DealerAlerts.razor.rz.scp.css */
.dash[b-jzcn1qsvij] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 28px 18px;
    gap: 12px;
}

.dash-sub[b-jzcn1qsvij] {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-muted);
}

.dash-progress[b-jzcn1qsvij] {
    flex: none;
}

/* ── KPI-Reihe (7 Lifecycle-Kacheln) ── */
.dash-kpis[b-jzcn1qsvij] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    flex: none;
}

.dash-kpi[b-jzcn1qsvij] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.dash-kpi:hover[b-jzcn1qsvij] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 6px 16px rgba(77, 77, 77, .12));
}

.dash-kpi-text[b-jzcn1qsvij] {
    min-width: 0;
}

.dash-kpi-eyebrow[b-jzcn1qsvij] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.dash-kpi-value[b-jzcn1qsvij] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    color: var(--text-strong);
}

.dash-kpi-icon[b-jzcn1qsvij] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dash-kpi-icon[b-jzcn1qsvij]  .status-badge {
    font-size: .65rem;
}

/* ── Tabelle ── */
.dash-card[b-jzcn1qsvij] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 18px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.dash-card:hover[b-jzcn1qsvij] {
    box-shadow: var(--shadow-md, 0 6px 16px rgba(77, 77, 77, .12));
}

.dash-card-title[b-jzcn1qsvij] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-strong);
    flex: none;
    margin-bottom: 12px;
}

.dash-card-body[b-jzcn1qsvij] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.dash-table[b-jzcn1qsvij] {
    padding: 0;
}

.dash-table-card[b-jzcn1qsvij] {
    flex: 1;
    min-height: 0;
}

.dash-empty[b-jzcn1qsvij] {
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text-muted);
    padding: 8px 2px;
}
/* /Pages/DealerDetail.razor.rz.scp.css */
.dash-sub[b-vxdlg0wi13] {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
/* /Pages/DealerMap.razor.rz.scp.css */
/* Händlerkarte — Umsetzung des Claude-Design-Handoffs (Variante A · Werkzeug-Seitenleiste,
   Projekt „LilleHus Manager App Redesign"). Tokens global aus css/design-tokens.css. */

/* Nutzt automatisch die volle Fensterhöhe: 100dvh − PageHeader-Topbar (70px, .ph
   in PageHeader.razor.css) − eigener Rand (2× 14px margin). Der Wert stimmt nur
   auf dem Desktop — dort ist .ph fix 70px hoch, mobil variabel (min. 48px). */
.map-page[b-l0utog9n4x] {
    display: flex;
    height: calc(100dvh - 70px - 28px);
    min-height: 420px;
    margin: 14px;
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.dm-sidebar[b-l0utog9n4x] {
    width: 324px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--white);
    border-right: 1px solid var(--border-soft);
    padding: 22px 20px;
    overflow-y: auto;
}

.dm-header[b-l0utog9n4x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dm-subtitle[b-l0utog9n4x] {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.dm-banner[b-l0utog9n4x] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--brand-wash);
    border: 1px solid var(--brand-soft);
    border-radius: 12px;
    padding: 9px 13px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--brand-strong);
    line-height: 1.4;
}

.dm-banner--error[b-l0utog9n4x] {
    background: var(--danger-100);
    border-color: var(--danger-100);
    color: var(--danger-600);
}

.dm-spin[b-l0utog9n4x] {
    display: inline-flex;
    animation: dm-rotate-b-l0utog9n4x 1.1s linear infinite;
}

@keyframes dm-rotate-b-l0utog9n4x {
    to { transform: rotate(360deg); }
}

.dm-section-label[b-l0utog9n4x] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 8px;
}

/* ── Kundengruppen ──────────────────────────────────────────────────────── */
.dm-groups[b-l0utog9n4x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm-group-row[b-l0utog9n4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 12px;
}

.dm-group-row:hover[b-l0utog9n4x] {
    background: var(--sand-050);
}

.dm-check[b-l0utog9n4x] {
    width: 19px;
    height: 19px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--white);
    border: 1.5px solid var(--border-strong);
    color: transparent;
    cursor: pointer;
    padding: 0;
}

.dm-check.on[b-l0utog9n4x] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
}

.dm-check:focus-visible[b-l0utog9n4x] {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.dm-dot[b-l0utog9n4x] {
    width: 11px;
    height: 11px;
    flex: none;
    border-radius: 50%;
}

.dm-group-name[b-l0utog9n4x] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-group-count[b-l0utog9n4x] {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-subtle);
}

.dm-km[b-l0utog9n4x] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    padding: 3px 10px 3px 4px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-subtle);
}

.dm-km input[b-l0utog9n4x] {
    width: 34px;
    border: none;
    background: transparent;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-strong);
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}

.dm-km input[b-l0utog9n4x]::-webkit-outer-spin-button,
.dm-km input[b-l0utog9n4x]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dm-km input:focus[b-l0utog9n4x] {
    outline: none;
}

.dm-km:focus-within[b-l0utog9n4x] {
    border-color: var(--border-brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.dm-switch-row[b-l0utog9n4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 10px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-body);
}

.dm-switch[b-l0utog9n4x] {
    width: 40px;
    height: 23px;
    flex: none;
    position: relative;
    border: none;
    border-radius: 999px;
    background: var(--border-strong);
    cursor: pointer;
    padding: 0;
    transition: background 140ms var(--ease-out);
}

.dm-switch span[b-l0utog9n4x] {
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(77, 77, 77, .25);
    transition: left 140ms var(--ease-out);
}

.dm-switch.on[b-l0utog9n4x] {
    background: var(--brand);
}

.dm-switch.on span[b-l0utog9n4x] {
    left: 19.5px;
}

.dm-switch:focus-visible[b-l0utog9n4x] {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Pills & Icon-Buttons ───────────────────────────────────────────────── */
.dm-pill[b-l0utog9n4x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-body);
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: background 140ms var(--ease-out);
}

.dm-pill:hover[b-l0utog9n4x] {
    background: var(--sand-050);
}

.dm-pill--brand[b-l0utog9n4x] {
    color: var(--brand-strong);
    background: var(--brand-wash);
    border-color: var(--brand-wash);
}

.dm-pill--brand:hover[b-l0utog9n4x] {
    background: var(--brand-soft);
}

.dm-pill--brand.active[b-l0utog9n4x] {
    color: var(--text-on-brand);
    background: var(--brand);
    border-color: var(--brand);
}

.dm-icon-btn[b-l0utog9n4x] {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    padding: 0;
}

.dm-icon-btn:hover[b-l0utog9n4x] {
    background: var(--rose-100);
    color: var(--danger-600);
}

.dm-icon-btn--plain[b-l0utog9n4x] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--text-muted);
    flex: none;
}

.dm-icon-btn--plain:hover[b-l0utog9n4x] {
    background: var(--brand-wash);
    color: var(--brand-strong);
}

.dm-icon-btn--plain:disabled[b-l0utog9n4x] {
    opacity: .55;
    cursor: default;
}

/* ── Region (Länder + Bundesland) ───────────────────────────────────────── */
.dm-country-row[b-l0utog9n4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dm-select[b-l0utog9n4x] {
    width: 100%;
    margin-top: 9px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-strong);
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
}

.dm-select:focus-visible[b-l0utog9n4x] {
    outline: none;
    border-color: var(--border-brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Plan-Pins ──────────────────────────────────────────────────────────── */
.dm-section[b-l0utog9n4x] {
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
}

.dm-section-head[b-l0utog9n4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.dm-section-head .dm-section-label[b-l0utog9n4x] {
    margin-bottom: 0;
}

.dm-pins[b-l0utog9n4x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm-pin-row[b-l0utog9n4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sand-050);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 8px 12px;
}

.dm-pin-icon[b-l0utog9n4x] {
    display: inline-flex;
    color: var(--accent-strong);
}

.dm-pin-name[b-l0utog9n4x] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-pin-radius[b-l0utog9n4x] {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-subtle);
}

/* ── Unverortete Händler ────────────────────────────────────────────────── */
.dm-issues[b-l0utog9n4x] {
    margin-top: auto;
    border-top: 1px solid var(--border-soft);
    padding-top: 13px;
}

.dm-issues-head[b-l0utog9n4x] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0 0 8px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-body);
    text-align: left;
    cursor: pointer;
}

.dm-issues-head span:nth-child(2)[b-l0utog9n4x] {
    flex: 1;
}

.dm-issues-icon[b-l0utog9n4x] {
    display: inline-flex;
    color: var(--warning-600);
}

.dm-issue-list[b-l0utog9n4x] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dm-issue[b-l0utog9n4x] {
    background: var(--warning-100);
    border-radius: 10px;
    padding: 7px 11px;
}

.dm-issue-name[b-l0utog9n4x] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-strong);
}

.dm-issue-name span[b-l0utog9n4x] {
    font-weight: 500;
    color: var(--text-muted);
}

.dm-issue-reason[b-l0utog9n4x] {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: var(--warning-600);
    margin-top: 1px;
}

.dm-issues > .dm-pill[b-l0utog9n4x] {
    margin-top: 9px;
}

/* ── Karte ──────────────────────────────────────────────────────────────── */
.map-host[b-l0utog9n4x] {
    flex: 1;
    min-width: 0;
    min-height: 400px;
    z-index: 0; /* Leaflet-Panes unter MudBlazor-Overlays halten */
    background: var(--sand-100);
}

/* Detailgrad dämpfen: OSM-Kacheln entsättigt + warm getönt, damit Straßennetz/POIs
   zurücktreten und Marker/Radien dominieren (Design-Look „warmes Papier"). */
.map-host[b-l0utog9n4x]  .leaflet-tile-pane {
    filter: saturate(0.5) contrast(0.92) brightness(1.04) sepia(0.14);
}

/* Plan-Pin-Marker (divIcon aus dealerMap.js) */
.map-host[b-l0utog9n4x]  .dm-map-pin {
    color: var(--accent-strong);
    filter: drop-shadow(0 2px 3px rgba(77, 77, 77, .3));
}

/* Zoom-Control im Design-Stil (Position bottomright kommt aus dealerMap.js) */
.map-host[b-l0utog9n4x]  .leaflet-control-zoom {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.map-host[b-l0utog9n4x]  .leaflet-control-zoom a {
    width: 36px;
    height: 34px;
    line-height: 34px;
    font-family: var(--font-ui);
    color: var(--text-body);
    background: var(--white);
    border-bottom: 1px solid var(--border-soft);
}

.map-host[b-l0utog9n4x]  .leaflet-control-zoom a:hover {
    background: var(--sand-050);
}

.map-host[b-l0utog9n4x]  .leaflet-control-zoom a:last-child {
    border-bottom: none;
}

/* Popup-Chrome */
.map-host[b-l0utog9n4x]  .leaflet-popup-content-wrapper {
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    background: var(--white);
}

.map-host[b-l0utog9n4x]  .leaflet-popup-content {
    margin: 16px 17px;
    min-width: 220px;
}

/* Popup-Inhalt (dm-pop* baut DealerMapPayloadBuilder) */
.map-host[b-l0utog9n4x]  .dm-pop {
    font-family: var(--font-ui);
}

.map-host[b-l0utog9n4x]  .dm-pop__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.map-host[b-l0utog9n4x]  .dm-pop__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-strong);
    line-height: 1.25;
}

.map-host[b-l0utog9n4x]  .dm-pop__badge {
    flex: none;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 9px;
}

.map-host[b-l0utog9n4x]  .dm-pop__badge--brand   { background: var(--brand-wash);  color: var(--brand-strong); }
.map-host[b-l0utog9n4x]  .dm-pop__badge--success { background: var(--success-100); color: var(--success-600); }
.map-host[b-l0utog9n4x]  .dm-pop__badge--neutral { background: var(--sand-100);    color: var(--text-muted); }
.map-host[b-l0utog9n4x]  .dm-pop__badge--warning { background: var(--warning-100); color: var(--warning-600); }
.map-host[b-l0utog9n4x]  .dm-pop__badge--danger  { background: var(--danger-100);  color: var(--danger-600); }
.map-host[b-l0utog9n4x]  .dm-pop__badge--pin     { background: var(--rose-100);    color: var(--accent-strong); }

.map-host[b-l0utog9n4x]  .dm-pop__meta {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 5px;
}

.map-host[b-l0utog9n4x]  .dm-pop__addr {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-body);
    margin-top: 7px;
    line-height: 1.5;
}

.map-host[b-l0utog9n4x]  .dm-pop__stats {
    display: flex;
    gap: 14px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--border-soft);
}

.map-host[b-l0utog9n4x]  .dm-pop__stat {
    line-height: 1.25;
}

.map-host[b-l0utog9n4x]  .dm-pop__label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.map-host[b-l0utog9n4x]  .dm-pop__value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-strong);
}

.map-host[b-l0utog9n4x]  .dm-pop__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--brand-strong);
    margin-top: 11px;
    text-decoration: none;
}

.map-host[b-l0utog9n4x]  .dm-pop__link:hover {
    text-decoration: underline;
}
/* /Pages/DealerStats.razor.rz.scp.css */
.dash[b-vfw92y958z] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 28px 18px;
    gap: 12px;
}

/* ── Filterzeile ──
   Breiten über das eigene Raster: eine Klasse an MudDatePicker/MudSelect erreicht die
   CSS-Isolation nicht (Mud-Kindmarkup). */
.dash-filters[b-vfw92y958z] {
    display: grid;
    grid-template-columns: repeat(2, 160px) repeat(2, 220px);
    gap: 10px;
    flex: none;
}

.dash-progress[b-vfw92y958z] {
    flex: none;
}

/* ── KPI-Reihe ── */
.dash-kpis[b-vfw92y958z] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex: none;
}

.dash-kpi[b-vfw92y958z] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.dash-kpi:hover[b-vfw92y958z] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 6px 16px rgba(77, 77, 77, .12));
}

.dash-kpi-text[b-vfw92y958z] {
    min-width: 0;
}

.dash-kpi-eyebrow[b-vfw92y958z] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.dash-kpi-value[b-vfw92y958z] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    color: var(--text-strong);
}

.dash-kpi-icon[b-vfw92y958z] {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-wash);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Inhalts-Grid (zwei Reihen: Diagramme + Tabelle) ── */
.dash-grid[b-vfw92y958z] {
    display: grid;
    gap: 12px;
}

.dash-grid--charts[b-vfw92y958z] {
    grid-template-columns: 1.4fr 1fr;
    flex: none;
    height: 236px;
}

.dash-card[b-vfw92y958z] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px 18px;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.dash-card:hover[b-vfw92y958z] {
    box-shadow: var(--shadow-md, 0 6px 16px rgba(77, 77, 77, .12));
}

.dash-card-title[b-vfw92y958z] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-strong);
    flex: none;
    margin-bottom: 12px;
}

.dash-card-body[b-vfw92y958z] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.dash-table[b-vfw92y958z] {
    padding: 0;
}

.dash-table-card[b-vfw92y958z] {
    flex: 1;
    min-height: 0;
}

.dash-empty[b-vfw92y958z] {
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text-muted);
    padding: 8px 2px;
}

/* ── Kundengruppen-Pille ── */
.pill[b-vfw92y958z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11px;
}

/* ── Händlerliste ──
   Eine eigene Liste statt MudTable: Dosis statt Merriweather, Blätterleiste (#1901),
   und unter 960 px werden dieselben Zeilen per CSS zu Karten. */
.hs-titel[b-vfw92y958z] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-bottom: 12px;
}

.hs-titel .dash-card-title[b-vfw92y958z] { margin-bottom: 0; }

.hs-sortwahl[b-vfw92y958z] { display: none; }

.hs-anfang[b-vfw92y958z] { height: 0; outline: none; scroll-margin-top: 56px; }

.hs-kopf[b-vfw92y958z],
.hs-zeile[b-vfw92y958z] {
    display: grid;
    /* Feste Spalten nach dem breitesten Kopf (mit Sortierpfeil) bzw. Inhalt; in Summe ≤ 1008 px,
       der Kartenbreite bei 1400er-Fenster mit offener Seitenleiste (#3090). */
    grid-template-columns: 64px minmax(140px, 1fr) 92px 84px 96px 92px 92px 76px 124px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
}

.hs-kopf[b-vfw92y958z] {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 36px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
}

.hs-kopf > span[b-vfw92y958z],
.hs-kopf > button[b-vfw92y958z] {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    text-align: left;
    white-space: nowrap;
}

.hs-kopf > button[b-vfw92y958z] {
    justify-self: start;
    border: 0;
    background: transparent;
    padding: 8px 0;
    cursor: pointer;
}

.hs-kopf > button.num[b-vfw92y958z] { justify-self: end; }

.hs-kopf > button:hover[b-vfw92y958z],
.hs-kopf > button.an[b-vfw92y958z] { color: var(--brand-strong); }

.hs-liste[b-vfw92y958z] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-zeile[b-vfw92y958z] {
    min-height: 46px;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-body);
    text-decoration: none;
}

.hs-zeile:hover[b-vfw92y958z] { background: var(--sand-050); }

.hs-name[b-vfw92y958z] {
    font-weight: 600;
    color: var(--text-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.num[b-vfw92y958z],
.hs-kopf > .num[b-vfw92y958z] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hs-brutto[b-vfw92y958z] { font-weight: 700; color: var(--text-strong); }

.hs-letzte small[b-vfw92y958z] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.nur-mobil[b-vfw92y958z] { display: none; }

/* ── Telefon ──
   Die No-Scroll-Hülle gibt es nur am Rechner; darunter scrollt die Seite als Ganzes. */
@media (max-width: 959.98px) {
    .dash[b-vfw92y958z] {
        height: auto;
        overflow: visible;
        padding: 4px 14px 16px;
        gap: 10px;
    }

    .dash-filters[b-vfw92y958z] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .dash-kpis[b-vfw92y958z] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .dash-kpi[b-vfw92y958z] { padding: 10px 13px; border-radius: 16px; }
    .dash-kpi:hover[b-vfw92y958z] { transform: none; }
    .dash-kpi-icon[b-vfw92y958z] { display: none; }
    .dash-kpi-value[b-vfw92y958z] { font-size: var(--text-lg); white-space: nowrap; }

    .dash-grid--charts[b-vfw92y958z] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .dash-grid--charts .dash-card[b-vfw92y958z] { height: 190px; padding: 12px 14px; }
    .dash-card--top[b-vfw92y958z] { display: none; }

    /* Die Liste trägt keine Karte um die Karten herum. */
    .dash-table-card[b-vfw92y958z] {
        flex: none;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .dash-table-card:hover[b-vfw92y958z] { box-shadow: none; }
    .dash-table-card .dash-card-body[b-vfw92y958z] { overflow: visible; }

    .hs-titel[b-vfw92y958z] { margin: 4px 2px 8px; }

    .hs-sortwahl[b-vfw92y958z] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--border-default);
        border-radius: 999px;
        background: var(--surface-card);
        color: var(--text-muted);
    }

    .hs-sortwahl select[b-vfw92y958z] {
        border: 0;
        background: transparent;
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-body);
    }

    .hs-kopf[b-vfw92y958z] { display: none; }

    .hs-liste[b-vfw92y958z] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .hs-zeile[b-vfw92y958z] {
        grid-template-columns: auto auto auto 1fr;
        gap: 5px 7px;
        padding: 10px 12px;
        min-height: 0;
        background: var(--surface-card);
        border: 1px solid var(--border-soft);
        border-radius: 16px;
        box-shadow: var(--shadow-xs);
        font-size: var(--text-xs);
        color: var(--text-muted);
    }

    .hs-name[b-vfw92y958z] {
        grid-row: 1;
        grid-column: 1 / 4;
        font-family: var(--font-display);
        font-size: var(--text-base);
    }

    .hs-brutto[b-vfw92y958z] {
        grid-row: 1;
        grid-column: 4;
        justify-self: end;
        font-family: var(--font-display);
        font-size: var(--text-base);
        font-weight: 600;
    }

    .hs-gruppe[b-vfw92y958z] { grid-row: 2; grid-column: 1; }
    .hs-status[b-vfw92y958z] { grid-row: 2; grid-column: 2; }
    .hs-best[b-vfw92y958z]   { grid-row: 2; grid-column: 3; text-align: left; }
    .hs-letzte[b-vfw92y958z] { grid-row: 2; grid-column: 4; }
    .hs-letzte small[b-vfw92y958z] { display: inline; font-size: inherit; }

    .hs-nr[b-vfw92y958z], .hs-netto[b-vfw92y958z], .hs-avg[b-vfw92y958z], .nur-rechner[b-vfw92y958z] { display: none; }
    .nur-mobil[b-vfw92y958z] { display: inline; }
}

/* Fingerbedienung: die Sortier-Köpfe sind sonst zu schmale Ziele. */
@media (pointer: coarse) {
    .hs-kopf > button[b-vfw92y958z] { min-height: 44px; }
    .hs-sortwahl[b-vfw92y958z] { height: 44px; }
}
/* /Pages/Index.razor.rz.scp.css */
/* ============================================================
   Hub start page — token values reproduced from prototype lines 115–184
   ============================================================ */

.hub[b-gz8yrry5ti] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 40px 56px;
}

/* ── Greeting ─────────────────────────────────────────────── */
.hub-greeting[b-gz8yrry5ti] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 30px;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}

/* ── Status line ──────────────────────────────────────────── */
.hub-status[b-gz8yrry5ti] {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--text-muted);
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.hub-status-sep[b-gz8yrry5ti] {
    margin: 0 2px;
    color: var(--text-subtle);
}

.hub-danger[b-gz8yrry5ti] {
    color: var(--danger-600);
}

.hub-refresh[b-gz8yrry5ti] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--border-soft);
    background: var(--surface-card);
    color: var(--text-subtle);
    border-radius: 999px;
    cursor: pointer;
    transition: color .2s var(--lh-ease), border-color .2s var(--lh-ease);
}

/* Am Telefon bleibt der Kreis optisch 26 px (er sitzt in einer Textzeile), die
   Trefferflaeche waechst unsichtbar auf 44 px (#1955). */
@media (max-width: 959.98px) {
    .hub-refresh[b-gz8yrry5ti] { position: relative; }
    .hub-refresh[b-gz8yrry5ti]::after { content: ""; position: absolute; inset: -10px; }
}

.hub-refresh:hover:not(:disabled)[b-gz8yrry5ti] {
    color: var(--brand-strong);
    border-color: var(--border-default);
}

.hub-refresh:disabled[b-gz8yrry5ti] {
    cursor: default;
    opacity: 0.7;
}

.hub-refresh.is-spinning[b-gz8yrry5ti]  svg {
    animation: hub-refresh-spin-b-gz8yrry5ti 0.8s linear infinite;
}

@keyframes hub-refresh-spin-b-gz8yrry5ti {
    to { transform: rotate(360deg); }
}

/* ── Section headers ──────────────────────────────────────── */
.hub-section-header[b-gz8yrry5ti] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0 13px;
}

.hub-section-header--spaced[b-gz8yrry5ti] {
    margin-top: 32px;
}

.hub-section-icon[b-gz8yrry5ti] {
    color: var(--text-muted);
    line-height: 0;
}

.hub-section-label[b-gz8yrry5ti] {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* ── Grids ────────────────────────────────────────────────── */
.hub-grid[b-gz8yrry5ti] {
    display: grid;
    gap: 14px;
}

/* auto-fit statt fester Spaltenzahl: oberhalb von 960 px passt sich das Raster stufenlos
   an; darunter gilt die Mobil-Regel am Dateiende. */
.hub-grid--4[b-gz8yrry5ti] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.hub-grid--3[b-gz8yrry5ti] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Das Aussehen der Kacheln gehoert den Komponenten Shared/Nav/HubKachelSammlung und
   HubKachelEinzelseite (.hub-icon-tile/.hub-badge global in site.css). Die Anordnung
   auf dem Telefon haengt dagegen am Abschnitt, nicht an der Kachel — sie steht deshalb
   hier und greift per ::deep in beide Varianten. */

/* Telefon (#1964): Leinwand „Hub mobil – Alternativen", Variante A (= Board C1 der
   Navigations-Leinwand). Jeder Bereich eine eigene Karte, das Badge direkt hinter dem
   Namen, der Sub-Text ungekuerzt darunter; Uebergreifend/Administration als zweispaltige
   Kurzkacheln ohne Beschreibung. `display: contents` holt Symbol, Badge und
   Extern-Hinweis aus der Kopfzeile der Kachel ins Raster. Hover ohne translateY: auf
   Touch-Geraeten bliebe die Karte nach dem Tippen angehoben stehen. */
@media (max-width: 959.98px) {
    .hub[b-gz8yrry5ti] { position: relative; padding: 16px 16px 32px; }
    .hub-greeting[b-gz8yrry5ti] { font-size: 26px; padding-right: 52px; }
    .hub-status[b-gz8yrry5ti] { font-family: var(--font-ui); font-size: 13px; padding-right: 52px; }
    .hub-refresh[b-gz8yrry5ti] { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; margin: 0; }
    .hub-section-header[b-gz8yrry5ti] { margin: 20px 0 8px; }
    .hub-section-header--spaced[b-gz8yrry5ti] { margin-top: 20px; }

    .hub-grid--3[b-gz8yrry5ti] { grid-template-columns: minmax(0, 1fr); gap: 10px; }

    .hub-grid--3[b-gz8yrry5ti]  .hub-area-card,
    .hub-grid--3[b-gz8yrry5ti]  .hub-card {
        display: grid;
        grid-template-columns: 48px auto minmax(0, 1fr) auto 18px;
        grid-template-areas:
            "icon name badge extern chevron"
            "icon desc desc desc chevron";
        align-items: center;
        column-gap: 12px;
        row-gap: 3px;
        min-height: 78px;
        padding: 14px;
        background: var(--surface-card);
        border: 1px solid var(--border-soft);
        border-radius: 18px;
        box-shadow: var(--shadow-md);
    }
    .hub-grid--3[b-gz8yrry5ti]  .hub-area-card:hover,
    .hub-grid--3[b-gz8yrry5ti]  .hub-card:hover { transform: none; }
    .hub-grid--3[b-gz8yrry5ti]  .hub-area-card-top,
    .hub-grid--3[b-gz8yrry5ti]  .hub-app-card-top { display: contents; }
    .hub-grid--3[b-gz8yrry5ti]  .hub-icon-tile { grid-area: icon; width: 48px; height: 48px; border-radius: 14px; }
    .hub-grid--3[b-gz8yrry5ti]  .hub-badge { grid-area: badge; justify-self: start; }
    .hub-grid--3[b-gz8yrry5ti]  .hub-card-extern { grid-area: extern; }
    .hub-grid--3[b-gz8yrry5ti]  .hub-area-name,
    .hub-grid--3[b-gz8yrry5ti]  .hub-card-name { grid-area: name; margin-top: 0; font-size: 17px; }
    .hub-grid--3[b-gz8yrry5ti]  .hub-area-sub,
    .hub-grid--3[b-gz8yrry5ti]  .hub-card-desc { grid-area: desc; margin-top: 0; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; }
    .hub-grid--3[b-gz8yrry5ti]  .hub-area-card::after,
    .hub-grid--3[b-gz8yrry5ti]  .hub-card::after {
        content: "";
        grid-area: chevron;
        width: 8px; height: 8px;
        border-top: 2px solid var(--text-subtle);
        border-right: 2px solid var(--text-subtle);
        transform: rotate(45deg);
    }

    .hub-grid--4[b-gz8yrry5ti] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .hub-grid--4[b-gz8yrry5ti]  .hub-area-card,
    .hub-grid--4[b-gz8yrry5ti]  .hub-card {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon name extern"
            "icon badge extern";
        align-content: center;
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
        min-height: 60px;
        padding: 10px 12px;
        border-radius: 16px;
        box-shadow: var(--shadow-sm);
    }
    /* Ohne Badge eine Zeile: sonst verteilt die zweizeilige Icon-Spalte ihre Hoehe auf
       beide Zeilen, und der Name rutscht nach oben statt mittig zu stehen. */
    .hub-grid--4[b-gz8yrry5ti]  .hub-area-card:not(:has(.hub-badge)),
    .hub-grid--4[b-gz8yrry5ti]  .hub-card:not(:has(.hub-badge)) { grid-template-areas: "icon name extern"; }
    .hub-grid--4[b-gz8yrry5ti]  .hub-area-card:hover,
    .hub-grid--4[b-gz8yrry5ti]  .hub-card:hover { transform: none; }
    .hub-grid--4[b-gz8yrry5ti]  .hub-area-card-top,
    .hub-grid--4[b-gz8yrry5ti]  .hub-app-card-top { display: contents; }
    .hub-grid--4[b-gz8yrry5ti]  .hub-icon-tile { grid-area: icon; width: 36px; height: 36px; border-radius: 12px; }
    .hub-grid--4[b-gz8yrry5ti]  .hub-badge { grid-area: badge; justify-self: start; margin-top: 3px; }
    .hub-grid--4[b-gz8yrry5ti]  .hub-card-extern { grid-area: extern; }
    .hub-grid--4[b-gz8yrry5ti]  .hub-area-name,
    .hub-grid--4[b-gz8yrry5ti]  .hub-card-name {
        grid-area: name;
        margin-top: 0;
        font-family: var(--font-ui);
        font-size: 13.5px;
        color: var(--text-strong);
    }
    .hub-grid--4[b-gz8yrry5ti]  .hub-area-sub,
    .hub-grid--4[b-gz8yrry5ti]  .hub-card-desc { display: none; }
}

/* /Pages/Neues.razor.rz.scp.css */
.neues[b-unyzymx0p8] {
    max-width: 720px;
    margin: 0 auto;
    padding: 26px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.neues-lead[b-unyzymx0p8] {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--text-muted);
}

.neues-tag[b-unyzymx0p8] {
    margin: 10px 4px -4px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text-subtle);
}

.neues-karte[b-unyzymx0p8] {
    padding: 4px 22px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
}

.neues-karte.is-neu[b-unyzymx0p8] {
    border-color: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

.neues-mehr[b-unyzymx0p8] {
    align-self: center;
    appearance: none;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 22px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-strong);
    cursor: pointer;
}

.neues-mehr:hover[b-unyzymx0p8] {
    border-color: var(--brand);
    background: var(--brand-wash);
}

.neues-mehr:focus-visible[b-unyzymx0p8] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.neues-mehr-zahl[b-unyzymx0p8] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

@media (pointer: coarse) {
    .neues-mehr[b-unyzymx0p8] {
        min-height: 44px;
    }
}

.neues-fuss[b-unyzymx0p8] {
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-subtle);
}

@media (max-width: 959.98px) {
    .neues[b-unyzymx0p8] {
        padding: 16px 14px 32px;
    }

    .neues-karte[b-unyzymx0p8] {
        padding: 2px 16px;
    }
}
/* /Pages/OrderTracking.razor.rz.scp.css */
/* Überfällige Orders (>5 Tage alt) bekommen einen dezenten Rosa-Tint
   aus der CI – fällt auf, ohne wie ein roter Alarm zu wirken. */
[b-ll4muj57sf] .overdue-row {
    background-color: rgba(194, 153, 155, 0.10) !important; /* LilleHusBranding.Rose500 @ 10% */
}

[b-ll4muj57sf] .overdue-row:hover {
    background-color: rgba(194, 153, 155, 0.18) !important;
}

/* DHL-Verlauf-Zelle mit kompaktem zwei-Zeilen-Layout */
[b-ll4muj57sf] .dhl-journey {
    line-height: 1.3;
}

[b-ll4muj57sf] .dhl-journey .eta {
    font-size: 0.78rem;
    color: #5A8C8C; /* LilleHusBranding.Green600 */
    font-weight: 500;
}

[b-ll4muj57sf] .dhl-journey .event {
    font-size: 0.85rem;
    color: #4D4D4D; /* LilleHusBranding.Ink700 */
}

/* Empty-State */
.empty-state[b-ll4muj57sf] {
    padding: 3rem 1rem;
    color: #5A8C8C;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #F5F2ED; /* LilleHusBranding.Sand100 */
    border: 1px solid #F0EAE1; /* LilleHusBranding.Sand200 */
    border-radius: 8px;
}

[b-ll4muj57sf] .empty-state-icon {
    font-size: 4rem !important;
    color: #81A69B !important; /* LilleHusBranding.Green400 */
    width: 4rem !important;
    height: 4rem !important;
}
/* /Pages/OrdioUmsatzSeite.razor.rz.scp.css */
.ou[b-vwsb6p2nfk] { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-ui); }
.ou-monat[b-vwsb6p2nfk] { font-family: var(--font-ui); display: inline-flex; align-items: center; gap: 6px; background: var(--sand-100); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 6px; }
.ou-mbtn[b-vwsb6p2nfk] { border: 0; background: none; color: var(--text-muted); display: inline-flex; padding: 4px; border-radius: 999px; cursor: pointer; }
.ou-mbtn:disabled[b-vwsb6p2nfk] { opacity: .35; cursor: default; }
.ou-mv[b-vwsb6p2nfk] { font-weight: 600; font-size: 13px; color: var(--text-strong); min-width: 118px; text-align: center; }
.ou-btn[b-vwsb6p2nfk] { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; border-radius: 999px; padding: 9px 16px; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); cursor: pointer; white-space: nowrap; }
.ou-btn:disabled[b-vwsb6p2nfk] { opacity: .6; cursor: default; }
.ou-btn--sm[b-vwsb6p2nfk] { padding: 6px 12px; font-size: 12.5px; }
.ou-btn--primary[b-vwsb6p2nfk] { border-color: transparent; background: var(--brand); color: var(--text-on-brand); }
.ou-banner[b-vwsb6p2nfk] { display: flex; gap: 10px; align-items: center; border-radius: 14px; padding: 11px 14px; font-size: 13px; background: var(--sand-100); border: 1px solid var(--border-soft); color: var(--text-body); }
.ou-banner--fehler[b-vwsb6p2nfk] { background: var(--danger-100); border-color: transparent; color: var(--danger-600); }
.ou-laedt[b-vwsb6p2nfk] { display: flex; gap: 8px; align-items: center; color: var(--text-muted); padding: 24px; }
.ou-kpis[b-vwsb6p2nfk] { display: flex; gap: 12px; }
.ou-kpi[b-vwsb6p2nfk] { flex: 1; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px 16px; }
.ou-kpi-l[b-vwsb6p2nfk] { font-size: 12px; color: var(--text-muted); }
.ou-kpi-v[b-vwsb6p2nfk] { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ou-kpi-v--ok[b-vwsb6p2nfk] { color: var(--success-600); }
.ou-kpi-v--offen[b-vwsb6p2nfk] { color: var(--brand-strong); }
.ou-kpi-h[b-vwsb6p2nfk] { font-size: 11.5px; color: var(--text-subtle); }
.ou-tbl[b-vwsb6p2nfk] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 6px 8px; display: flex; flex-direction: column; }
.ou-tr[b-vwsb6p2nfk] { display: flex; align-items: center; gap: 14px; padding: 7px 12px; border-radius: 10px; font-size: 13px; color: var(--text-body); font-variant-numeric: tabular-nums; min-height: 40px; }
.ou-tr:nth-child(even):not(.ou-th):not(.ou-tr--offen)[b-vwsb6p2nfk] { background: var(--sand-050); }
.ou-tr--offen[b-vwsb6p2nfk] { background: var(--brand-wash); border-radius: 10px 10px 0 0; }
.ou-tr--ink[b-vwsb6p2nfk] { background: var(--danger-100) !important; }
.ou-th > span[b-vwsb6p2nfk] { font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-subtle); }
.ou-auf[b-vwsb6p2nfk] { width: 22px; flex: none; }
.ou-aufbtn[b-vwsb6p2nfk] { border: 0; background: none; color: var(--text-subtle); display: inline-flex; padding: 0; cursor: pointer; }
.ou-tag[b-vwsb6p2nfk] { width: 80px; flex: none; font-weight: 600; color: var(--text-strong); }
.ou-netto[b-vwsb6p2nfk] { width: 104px; flex: none; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong); }
.ou-brutto[b-vwsb6p2nfk] { width: 90px; flex: none; text-align: right; color: var(--text-muted); }
.ou-ordio[b-vwsb6p2nfk] { width: 104px; flex: none; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ou-ordio--ab[b-vwsb6p2nfk] { color: var(--warning-600); }
.ou-ordio--ink[b-vwsb6p2nfk] { color: var(--danger-600); }
.ou-status[b-vwsb6p2nfk] { width: 130px; flex: none; }
.ou-st[b-vwsb6p2nfk] { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ou-st--ok[b-vwsb6p2nfk] { background: var(--success-100); color: var(--success-600); }
.ou-st--fehlt[b-vwsb6p2nfk] { background: var(--blue-100); color: var(--blue-700); }
.ou-st--ab[b-vwsb6p2nfk] { background: var(--warning-100); color: var(--warning-600); }
.ou-st--ink[b-vwsb6p2nfk] { background: var(--danger-100); color: var(--danger-600); }
.ou-st--leer[b-vwsb6p2nfk] { background: var(--sand-200); color: var(--text-muted); }
.ou-hint[b-vwsb6p2nfk] { flex: 1; min-width: 0; color: var(--text-muted); font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ou-act[b-vwsb6p2nfk] { width: 150px; flex: none; text-align: right; }
.ou-zb[b-vwsb6p2nfk] { background: var(--brand-wash); border-radius: 0 0 12px 12px; padding: 4px 16px 14px 48px; margin-bottom: 4px; }
.ou-zr[b-vwsb6p2nfk] { display: flex; gap: 14px; padding: 5px 12px; font-size: 12.5px; background: var(--surface-card); font-variant-numeric: tabular-nums; }
.ou-zr--kopf > span[b-vwsb6p2nfk] { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.ou-zr--summe[b-vwsb6p2nfk] { font-weight: 700; color: var(--text-strong); border-top: 1px solid var(--border-default); }
.ou-zk[b-vwsb6p2nfk] { width: 220px; flex: none; }
.ou-zs[b-vwsb6p2nfk] { width: 60px; flex: none; text-align: right; color: var(--text-muted); }
.ou-zn[b-vwsb6p2nfk] { width: 110px; flex: none; text-align: right; }
.ou-znote[b-vwsb6p2nfk] { flex: 1; text-align: right; color: var(--text-subtle); font-weight: 500; font-size: 11.5px; }
.ou-res[b-vwsb6p2nfk] { display: flex; gap: 11px; align-items: flex-start; margin: 4px 12px 8px 48px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 14px; box-shadow: inset 4px 0 0 var(--danger-600); }
.ou-res-t[b-vwsb6p2nfk] { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-strong); }
.ou-res-s[b-vwsb6p2nfk] { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.ou-rest[b-vwsb6p2nfk] { text-align: center; color: var(--text-subtle); padding: 8px; }
/* /Pages/Packlisten.razor.rz.scp.css */
/* height:100% ist tragend, nicht kosmetisch: .shell-content gibt die Höhe vor, ohne sie
   erbt die Seite nur Inhaltshöhe und die drei Spalten enden mitten im Schirm. */
.pl-page[b-5fhfgs3guj] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pl-hinweis[b-5fhfgs3guj] { max-width: 46rem; margin: 1rem 0; }

/* Drei Spalten auf Schirmhöhe: Tages-Bahn · Tag im Fokus · Druckauftrag. */
.pl-arbeitsflaeche[b-5fhfgs3guj] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.pl-tag-karte[b-5fhfgs3guj] {
    flex: 1;
    min-width: 0;
    margin: 16px;
    padding: 16px 18px 12px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
}

/* Wächst nur so weit wie nötig und scrollt erst bei vollem Tag — so klebt die Fußzeile an
   den Zeilen statt am Kartenboden, und ein Tag mit einer Bestellung reißt nicht auf. */
.pl-tag-liste[b-5fhfgs3guj] {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.pl-tag-kopf[b-5fhfgs3guj] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.pl-tag-titel[b-5fhfgs3guj] { font-weight: 600; font-size: 1.05rem; color: var(--text-strong, #2e2e2e); }
.pl-spacer[b-5fhfgs3guj] { flex: 1; }

.pl-chip[b-5fhfgs3guj] {
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted, #6e6e6a);
}

.pl-tag-fuss[b-5fhfgs3guj] {
    flex: none;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    color: var(--text-muted, #6e6e6a);
}

/* Die Blätter sind Druck-Erzeugnis, keine Bildschirm-Vorschau — rechts steht eine Miniatur. */
.pl-blaetter[b-5fhfgs3guj] { display: none; }

/* Hülle um die Auswahl- und Druckknöpfe: am Rechner unsichtbar für das Layout. */
.pl-nur-rechner[b-5fhfgs3guj] { display: contents; }

/* Mobil (#2607): nachsehen statt drucken. Die Tagesbahn liegt als Streifen über der
   Tageskarte, Druckauftrag, Auswahl und Kartenfuß entfallen, die Seite scrollt als Ganzes. */
@media (max-width: 959.98px) {
    .pl-page[b-5fhfgs3guj] { height: auto; }

    .pl-arbeitsflaeche[b-5fhfgs3guj] {
        flex: none;
        flex-direction: column;
        align-items: stretch;
    }

    .pl-tag-karte[b-5fhfgs3guj] {
        margin: 0 14px 16px;
        padding: 12px 14px 8px;
    }

    .pl-tag-liste[b-5fhfgs3guj] { overflow: visible; }

    .pl-nur-rechner[b-5fhfgs3guj],
    .pl-tag-fuss[b-5fhfgs3guj] { display: none; }
}

@media print {
    /* Beim Drucken zählen nur die Blätter — die Arbeitsfläche verschwindet. */
    .pl-arbeitsflaeche[b-5fhfgs3guj] { display: none; }
    .pl-hinweis[b-5fhfgs3guj] { display: none; }

    /* Beide bleiben sonst display:flex — break-after:page auf .sheet (PacklistSheet.razor.css)
       sitzt hier verschachtelt drin; Flex-Items ignorieren Seitenumbrueche in Blink zuverlaessig
       genug, dass das als zweite Ursache neben der Shell-Hoehe gilt. Block haelt die Blaetter
       weiterhin untereinander, weil sie ohnehin einzeln volle Breite einnehmen. */
    .pl-page[b-5fhfgs3guj] { display: block; padding: 0; }
    .pl-blaetter[b-5fhfgs3guj] { display: block; }
}
/* /Pages/RecurringOrderEdit.razor.rz.scp.css */
/* Entwurf: „LilleHus B2B-Dauerbestellungen mobil" — Kopf und Zeitplan aus A2, Mengen-Raster aus C2
   (hier nur zum Lesen: die Mengen werden in der WaWi gepflegt), Verlauf aus A4. */
.ro-seite[b-8ptci5co4i] {
    padding: 16px 28px 18px;
}

.ro-spalten[b-8ptci5co4i] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.ro-spalte[b-8ptci5co4i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ro-karte[b-8ptci5co4i] {
    min-width: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 14px 16px 16px;
    box-shadow: var(--shadow-md);
}

.ro-karte-warn[b-8ptci5co4i] {
    border-color: #E7D5BA;
}

.ro-titel[b-8ptci5co4i] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
}

.ro-titel-r[b-8ptci5co4i] {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.ro-label[b-8ptci5co4i] {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.ro-suche[b-8ptci5co4i] {
    margin-bottom: 14px;
}

.ro-hinweis[b-8ptci5co4i] {
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

/* ── Aktiv-Schalter ── */
.ro-aktiv[b-8ptci5co4i] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ro-aktiv-text[b-8ptci5co4i] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    line-height: 1.3;
}

.ro-aktiv-text b[b-8ptci5co4i] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.ro-aktiv-text span[b-8ptci5co4i] {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.ro-sw[b-8ptci5co4i] {
    position: relative;
    flex: none;
    width: 54px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--sand-300);
    cursor: pointer;
    transition: background-color .16s ease-out;
}

/* Das Ziel ist 44 px hoch, auch wenn der Schalter schmaler gezeichnet ist. */
.ro-sw[b-8ptci5co4i]::before {
    content: "";
    position: absolute;
    inset: -6px 0;
}

.ro-sw.on[b-8ptci5co4i] {
    background: var(--success-600);
}

.ro-sw i[b-8ptci5co4i] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(77, 77, 77, .2);
    transition: transform .16s ease-out;
}

.ro-sw.on i[b-8ptci5co4i] {
    transform: translateX(22px);
}

.ro-sw:focus-visible[b-8ptci5co4i],
.ro-tag:focus-visible[b-8ptci5co4i],
.ro-knopf:focus-visible[b-8ptci5co4i],
.ro-x:focus-visible[b-8ptci5co4i],
.ro-link:focus-visible[b-8ptci5co4i] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ── Nächste Lieferung ── */
.ro-termin-text[b-8ptci5co4i] {
    font-family: var(--font-ui);
    line-height: 1.2;
}

.ro-termin-text b[b-8ptci5co4i] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.ro-termin-text span[b-8ptci5co4i] {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.ro-termin-text span.w[b-8ptci5co4i] {
    color: var(--warning-600);
    font-weight: 600;
}

/* ── Liefertage: gefüllt = Liefertag, gesperrt = die Standardbestellung hat dort keine Mengen ── */
.ro-wochen[b-8ptci5co4i] {
    display: flex;
    gap: 5px;
}

.ro-tag[b-8ptci5co4i] {
    flex: 1;
    min-width: 0;
    max-width: 64px;
    height: 46px;
    padding: 0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    color: var(--text-body);
    cursor: pointer;
    transition: background-color .16s ease-out, border-color .16s ease-out;
}

.ro-tag:hover:not(:disabled)[b-8ptci5co4i] {
    border-color: var(--border-default);
}

.ro-tag.ro-tag-an[b-8ptci5co4i] {
    background: var(--brand);
    border-color: transparent;
    color: var(--text-on-brand);
}

.ro-tag.ro-tag-an:hover[b-8ptci5co4i] {
    background: var(--brand-strong);
}

.ro-tag:disabled[b-8ptci5co4i] {
    background: transparent;
    border-style: dashed;
    color: var(--text-subtle);
    cursor: not-allowed;
}

.ro-info[b-8ptci5co4i] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--brand-wash);
    border: 1px solid var(--brand-soft);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: 1.45;
}

.ro-info-warn[b-8ptci5co4i] {
    background: var(--warning-100);
    border-color: #E7D5BA;
}

.ro-titel + .ro-info[b-8ptci5co4i] {
    margin-top: 0;
}

.ro-link[b-8ptci5co4i] {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--brand-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ── Mengen-Raster: Zeilen sind Artikel, Spalten die Liefertage ── */
.mx-rahmen[b-8ptci5co4i] {
    overflow-x: auto;
}

.mx-r[b-8ptci5co4i] {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) repeat(var(--tage), minmax(40px, 64px));
    gap: 6px;
    align-items: center;
    min-height: 48px;
    border-top: 1px solid var(--border-soft);
}

.mx-r.h[b-8ptci5co4i] {
    min-height: 34px;
    border-top: none;
}

.mx-r.s[b-8ptci5co4i] {
    min-height: 40px;
}

.mx-lab[b-8ptci5co4i] {
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mx-h[b-8ptci5co4i] {
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-strong);
}

.mx-n[b-8ptci5co4i] {
    min-width: 0;
    padding: 6px 0;
}

.mx-n b[b-8ptci5co4i] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.mx-n span[b-8ptci5co4i] {
    display: block;
    margin-top: 1px;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.mx-c[b-8ptci5co4i] {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.mx-c.z[b-8ptci5co4i] {
    font-weight: 400;
    color: var(--text-subtle);
}

.mx-t[b-8ptci5co4i] {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Felder ── */
/* Das schwebende Etikett der Mud-Felder sitzt auf der oberen Kante und braucht Luft zum Titel. */
.ro-felder[b-8ptci5co4i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding-top: 6px;
}

.ro-feld-breit[b-8ptci5co4i] {
    grid-column: 1 / -1;
}

.ro-felder-neu[b-8ptci5co4i] {
    margin-top: 6px;
}

.ro-erzeugen[b-8ptci5co4i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
}

/* ── Knöpfe ── */
.ro-knopf[b-8ptci5co4i] {
    flex: none;
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border-default);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease-out, border-color .16s ease-out;
}

.ro-knopf:hover:not(:disabled)[b-8ptci5co4i] {
    border-color: var(--border-strong);
    background: var(--sand-100);
}

.ro-knopf:disabled[b-8ptci5co4i] {
    opacity: .55;
    cursor: default;
}

.ro-knopf-pri[b-8ptci5co4i] {
    background: var(--brand);
    border-color: transparent;
    color: var(--text-on-brand);
    box-shadow: 0 5px 14px rgba(58, 125, 140, .26);
}

.ro-knopf-pri:hover:not(:disabled)[b-8ptci5co4i] {
    background: var(--brand-strong);
    border-color: transparent;
}

.ro-knopf-breit[b-8ptci5co4i] {
    width: 100%;
    margin-top: 8px;
}

/* ── Ausgelassene Tage ── */
.ro-zeile[b-8ptci5co4i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    border-bottom: 1px solid var(--border-soft);
}

.ro-zeile-text[b-8ptci5co4i] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    line-height: 1.3;
}

.ro-zeile-text b[b-8ptci5co4i] {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.ro-zeile-text span[b-8ptci5co4i] {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.ro-x[b-8ptci5co4i] {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
}

.ro-x:hover[b-8ptci5co4i] {
    background: var(--sand-100);
    color: var(--text-strong);
}

/* ── Verlauf ── */
.run[b-8ptci5co4i] {
    padding: 10px 0;
    border-top: 1px solid var(--border-soft);
    font-family: var(--font-ui);
}

.ro-titel + .run[b-8ptci5co4i] {
    border-top: none;
    padding-top: 0;
}

.run-kopf[b-8ptci5co4i] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.run .d[b-8ptci5co4i] {
    flex: none;
    width: 78px;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.run .tx[b-8ptci5co4i] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.run .no[b-8ptci5co4i] {
    flex: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.run-fehler[b-8ptci5co4i] {
    margin-top: 6px;
    font-size: var(--text-sm);
    color: var(--danger-600);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.st[b-8ptci5co4i] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--sand-200);
    color: var(--text-strong);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.st.good[b-8ptci5co4i] {
    background: var(--success-100);
}

.st.bad[b-8ptci5co4i] {
    background: var(--danger-100);
}

@media (max-width: 959.98px) {
    .ro-seite[b-8ptci5co4i] {
        padding: 6px 14px 14px;
    }

    .ro-spalten[b-8ptci5co4i] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ro-spalte[b-8ptci5co4i] {
        gap: 10px;
    }

    .ro-karte[b-8ptci5co4i] {
        padding: 13px 14px 14px;
    }

    .ro-tag[b-8ptci5co4i] {
        max-width: none;
    }

    .ro-felder[b-8ptci5co4i] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ro-knopf-pri[b-8ptci5co4i] {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ro-sw[b-8ptci5co4i],
    .ro-sw i[b-8ptci5co4i],
    .ro-tag[b-8ptci5co4i],
    .ro-knopf[b-8ptci5co4i] {
        transition: none;
    }
}
/* /Pages/RecurringOrders.razor.rz.scp.css */
/* Entwurf: „LilleHus B2B-Dauerbestellungen mobil", Übersichtskarte A1. */
.dl-seite[b-muza20gw2p] {
    padding: 16px 28px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-karten[b-muza20gw2p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}

.sec[b-muza20gw2p] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ro[b-muza20gw2p] {
    display: flex;
    min-width: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .16s ease-out, transform .16s ease-out;
}

.ro:hover[b-muza20gw2p] {
    box-shadow: var(--shadow-lg, var(--shadow-md));
    transform: translateY(-1px);
}

.ro:focus-visible[b-muza20gw2p] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.ro .mk[b-muza20gw2p] {
    flex: none;
    width: 8px;
}

.ro.warn .mk[b-muza20gw2p] {
    background: var(--warning-600);
}

.ro .in[b-muza20gw2p] {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 12px 14px 13px 10px;
}

.ro-top[b-muza20gw2p] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ro-nm[b-muza20gw2p] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ro-cu[b-muza20gw2p] {
    display: block;
    margin-top: 2px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ro-bot[b-muza20gw2p] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
}

.st[b-muza20gw2p] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--sand-200);
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.st .ic[b-muza20gw2p] {
    display: inline-flex;
    color: var(--warning-600);
}

.st.warn[b-muza20gw2p] {
    background: var(--warning-100);
}

.wd[b-muza20gw2p] {
    flex: none;
    display: inline-flex;
    gap: 3px;
}

.wd span[b-muza20gw2p] {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 600;
    background: var(--sand-100);
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
}

.wd span.on[b-muza20gw2p] {
    background: var(--brand);
    color: var(--text-on-brand);
    border-color: transparent;
}

.wd.off span.on[b-muza20gw2p] {
    background: var(--ink-300);
}

.nx[b-muza20gw2p] {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-family: var(--font-ui);
    line-height: 1.2;
}

.nx b[b-muza20gw2p] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.nx span[b-muza20gw2p] {
    display: block;
    margin-top: 1px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    /* „in 5 Tagen · wird So 11.10. 18 Uhr bestellt" passt neben dem Streifen nicht in eine Zeile. */
    text-wrap: balance;
}

.nx span.w[b-muza20gw2p] {
    color: var(--warning-600);
    font-weight: 600;
}

.ro.mut[b-muza20gw2p] {
    background: var(--sand-100);
    box-shadow: none;
}

.ro.mut .ro-nm[b-muza20gw2p] {
    color: var(--text-body);
}

.dl-warn[b-muza20gw2p] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--warning-100);
    border: 1px solid #E7D5BA;
    border-radius: 18px;
    padding: 13px 14px 14px;
    color: var(--warning-600);
}

.dl-warn b[b-muza20gw2p] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.dl-warn span[b-muza20gw2p] {
    display: block;
    margin-top: 3px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: 1.45;
}

.dl-fehler[b-muza20gw2p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: var(--danger-100);
    border: 1px solid #E8C9C4;
    border-radius: 18px;
    padding: 14px 15px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-body);
}

.dl-fehler b[b-muza20gw2p] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.dl-knopf[b-muza20gw2p] {
    margin-top: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid var(--border-default);
    background: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-body);
    cursor: pointer;
}

.dl-leer[b-muza20gw2p] {
    padding: 56px 22px;
    text-align: center;
}

.dl-leer b[b-muza20gw2p] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--text-strong);
}

.dl-leer p[b-muza20gw2p] {
    max-width: 44ch;
    margin: 8px auto 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.55;
}

@media (max-width: 959.98px) {
    .dl-seite[b-muza20gw2p] {
        padding: 6px 14px 14px;
    }

    .dl-karten[b-muza20gw2p] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ro[b-muza20gw2p] {
        transition: none;
    }

    .ro:hover[b-muza20gw2p] {
        transform: none;
    }
}
/* /Pages/Shop/BestellKopf.razor.rz.scp.css */
/* Kopf-Streifen (Entwurf Weiche 2, Variante A): eine Zeile, Systeme als Marken. */
.bb-kopf[b-esjhxnoptn] { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: var(--shadow-xs); }
.bb-av[b-esjhxnoptn] { width: 40px; height: 40px; flex: none; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-strong); font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); }
.bb-wer[b-esjhxnoptn] { min-width: 0; }
.bb-wer > b[b-esjhxnoptn] { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong);
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-wer > span[b-esjhxnoptn] { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-fakt[b-esjhxnoptn] { flex: none; display: flex; flex-direction: column; padding-left: 14px; border-left: 1px solid var(--border-soft);
    font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.bb-fakt b[b-esjhxnoptn] { margin-top: 2px; font-size: var(--text-sm); letter-spacing: 0; text-transform: none; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bb-marken[b-esjhxnoptn] { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bb-marke[b-esjhxnoptn] { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
    font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.bb-marke.teal[b-esjhxnoptn] { background: var(--brand-wash); color: var(--brand-strong); }
.bb-marke.grau[b-esjhxnoptn] { background: var(--sand-100); color: var(--text-muted); }
.bb-marke.bb-gast[b-esjhxnoptn] { height: 20px; padding: 0 8px; font-size: var(--text-2xs); background: var(--sand-100); border: 1px solid var(--border-default); color: var(--text-muted); }

@media (max-width: 959.98px) {
    .bb-kopf[b-esjhxnoptn] { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
    .bb-av[b-esjhxnoptn] { width: 36px; height: 36px; font-size: var(--text-xs); }
    .bb-wer[b-esjhxnoptn] { flex: 1; }
    .bb-wer > b[b-esjhxnoptn] { font-size: var(--text-base); }
    .bb-marken[b-esjhxnoptn] { flex: 1 0 100%; margin-left: 0; justify-content: flex-start; }
}
/* /Pages/Shop/BestellungBearbeiten.razor.rz.scp.css */
/* Huelle von „Bestellung bearbeiten“: Eingabe, Kopf, Reiter, darunter genau ein Reiter.
   Die Reklamation fuellt den Rest ohne Seiten-Scroll; deshalb ist die Seite eine Flex-Spalte. */
.bb-seite[b-ekus0yrvlt] { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 22px; overflow: hidden; }

/* ── Eingabe ── */
.bb-suche[b-ekus0yrvlt] { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-feld[b-ekus0yrvlt] { position: relative; width: 260px; height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 14px;
    background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
    color: var(--text-muted); cursor: text; }
.bb-feld:focus-within[b-ekus0yrvlt] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.bb-feld-l[b-ekus0yrvlt] { position: absolute; top: -8px; left: 10px; padding: 0 5px; background: var(--surface-card);
    font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .02em; color: var(--text-subtle); }
.bb-feld input[b-ekus0yrvlt] { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: .02em; color: var(--text-strong); }
.bb-feld input[b-ekus0yrvlt]::placeholder { font-family: var(--font-ui); font-weight: 500; font-size: var(--text-base); letter-spacing: 0; color: var(--text-subtle); }
.bb-laden[b-ekus0yrvlt] { flex: none; height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
    border-radius: var(--radius-pill); background: var(--brand); color: var(--text-on-brand); box-shadow: var(--shadow-brand);
    font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); }
.bb-laden:hover:not(:disabled)[b-ekus0yrvlt] { background: var(--brand-strong); }
.bb-laden:disabled[b-ekus0yrvlt] { background: var(--sand-200); color: var(--text-subtle); box-shadow: none; cursor: not-allowed; }
.bb-laden:focus-visible[b-ekus0yrvlt] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.bb-klein[b-ekus0yrvlt] { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }

/* ── Fehler beim Laden ── */
.bb-fehler[b-ekus0yrvlt] { flex: none; display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: 16px;
    background: var(--danger-100); border: 1px solid var(--danger-100); color: var(--danger-600);
    font-family: var(--font-ui); font-size: var(--text-sm); }
.bb-fehler span[b-ekus0yrvlt] { color: var(--text-body); line-height: 1.45; }
.bb-fehler[b-ekus0yrvlt]  svg { flex: none; margin-top: 1px; }

/* ── Leerzustand (Tafel 1) ── */
.bb-leer[b-ekus0yrvlt] { flex: none; margin-top: 6px; padding: 36px 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: var(--shadow-xs); }
.bb-leer-ic[b-ekus0yrvlt] { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-wash); color: var(--brand); }
.bb-leer > b[b-ekus0yrvlt] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--text-strong); }
.bb-leer-text[b-ekus0yrvlt] { max-width: 520px; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.bb-leer-notizen[b-ekus0yrvlt] { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 220px); gap: 12px; text-align: left; }
.bb-leer-notizen > div[b-ekus0yrvlt] { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--sand-050); border: 1px solid var(--border-soft);
    font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; color: var(--text-muted); }
.bb-leer-notizen b[b-ekus0yrvlt] { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.bb-leer-notizen b[b-ekus0yrvlt]  svg { color: var(--brand); }

/* ── Reiter (Form wie tkb-reiter: DS navigation/Tabs, Variante pill) ── */
.bb-reiter[b-ekus0yrvlt] { flex: none; align-self: flex-start; display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.bb-tab[b-ekus0yrvlt] { min-height: 44px; padding: 0 20px; appearance: none; border: none; background: transparent; cursor: pointer;
    border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.bb-tab:hover[b-ekus0yrvlt] { color: var(--text-strong); }
.bb-tab[aria-selected="true"][b-ekus0yrvlt] { background: var(--surface-card); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
.bb-tab:focus-visible[b-ekus0yrvlt] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Der Reiter bekommt den Rest der Hoehe; was nicht passt, scrollt hier, nicht die Seite. */
.bb-inhalt[b-ekus0yrvlt] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
/* Hülle ohne eigene Box, damit die Höhenkette der Reiter unverändert bleibt; ausgeblendet ganz weg. */
.bb-panel[b-ekus0yrvlt] { display: contents; }
.bb-panel[hidden][b-ekus0yrvlt] { display: none; }

@media (max-width: 959.98px) {
    .bb-seite[b-ekus0yrvlt] { height: auto; min-height: 100%; overflow: visible; padding: 8px 16px 12px; gap: 10px; }
    .bb-suche[b-ekus0yrvlt] { flex-wrap: nowrap; }
    .bb-feld[b-ekus0yrvlt] { flex: 1; width: auto; height: 48px; }
    .bb-laden[b-ekus0yrvlt] { height: 48px; padding: 0 16px; }
    .bb-klein[b-ekus0yrvlt] { display: none; }
    .bb-leer[b-ekus0yrvlt] { margin-top: 0; padding: 20px 16px; }
    .bb-leer-notizen[b-ekus0yrvlt] { grid-template-columns: minmax(0, 1fr); width: 100%; }
    .bb-reiter[b-ekus0yrvlt] { align-self: stretch; display: flex; }
    .bb-tab[b-ekus0yrvlt] { flex: 1 1 0; padding: 0 6px; }
    .bb-inhalt[b-ekus0yrvlt] { flex: 1 0 auto; overflow: visible; }
}
/* /Pages/Shop/ShopRecurringOrderEdit.razor.rz.scp.css */
/*
 * Abschnitts-Überschriften in der Display-Schrift des LilleHus Design Systems.
 * MudBlazors `Typo.h6` bringt die generische Material-Typografie mit; die Marke lebt aber von
 * Dosis für Überschriften und Merriweather für Fließtext. Die Flächen selbst kommen weiter aus
 * dem MudTheme, das dieselben Tokens trägt.
 */

.db-titel[b-c574c25q5s] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
    color: var(--text-strong);
    margin: 0 0 16px;
}

/* Für Abschnitte, unter denen direkt ein erklärender Satz steht — dort trennt der Text,
   nicht der Abstand. */
.db-titel-eng[b-c574c25q5s] {
    margin-bottom: 6px;
}

/* Volle Breite, aber mit Rand — die Shell gibt keinen vor. Werte wie die Übersicht. */
.db-seite[b-c574c25q5s] {
    padding: 16px 28px 18px;
}

/* ── Weiche „Für wen?" ──
   Zwei einander ausschließende Fälle, die zu verschiedenen Formularen führen. */
.db-weiche[b-c574c25q5s] {
    display: inline-flex;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 16px;
}

.db-weiche button[b-c574c25q5s] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .85rem;
    color: var(--text-muted);
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.db-weiche button.db-weiche-an[b-c574c25q5s] {
    background: var(--surface-card);
    color: var(--brand-strong);
    box-shadow: var(--shadow-xs);
}

/* ── Liefertage ──
   Gefüllt = Liefertag. Vorher füllte das ChipSet alle sieben Tage und markierte den gewählten
   nur mit einem Haken — die Auswahl las sich als das Gegenteil von dem, was sie war. */
.db-wochen[b-c574c25q5s] {
    display: inline-flex;
    gap: 5px;
}

.db-tag[b-c574c25q5s] {
    width: 40px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    color: var(--text-subtle);
    cursor: pointer;
}

.db-tag:hover[b-c574c25q5s] {
    border-color: var(--border-default);
    color: var(--text-body);
}

.db-tag.db-tag-an[b-c574c25q5s] {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
}

.db-tag.db-tag-an:hover[b-c574c25q5s] {
    background: var(--brand-strong);
    color: #fff;
}

/* Rechnet vor, was Wochentage und Vorlauf zusammen bedeuten. */
.db-plan[b-c574c25q5s] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--brand-wash);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--text-body);
}

/* Erklärender Satz unter einer Abschnitts-Überschrift. MudBlazors `Color.Secondary` ist die
   Akzentfarbe — der Text las sich dadurch wie ein Link. */
.db-hilfe[b-c574c25q5s] {
    color: var(--text-muted);
}

.db-plan[b-c574c25q5s]  .mud-icon-root {
    color: var(--brand-strong);
}
/* /Pages/Shop/ShopRecurringOrders.razor.rz.scp.css */
/*
 * Vokabular des internen Ops-Kits aus dem LilleHus Design System (Digital):
 * ruhige, warme Flächen, weiche Ränder, KPI-Kacheln über der Arbeitsfläche,
 * Status als Abzeichen. Keine eigenen Farben — alles aus den Tokens.
 */

/* Volle Breite, aber mit Rand — die Shell gibt keinen vor. Werte wie `/stats/dealer-stats`. */
.db-seite[b-1w733mk1ui] {
    padding: 16px 28px 18px;
}

.db-kpis[b-1w733mk1ui] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 960px) {
    .db-kpis[b-1w733mk1ui] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.db-kpi[b-1w733mk1ui] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-xs);
}

.db-kpi-label[b-1w733mk1ui] {
    font-family: var(--font-ui);
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--text-muted);
}

/* Dosis ist schmal und licht — auf Normalstärke wirkt eine 26-px-Zahl dünner als die
   Beschriftung darüber. Die Kachel lebt aber von der Zahl. */
.db-kpi-wert[b-1w733mk1ui] {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

/* Ein Wert, der Aufmerksamkeit braucht, wird warm hervorgehoben — nicht alarmrot.
   „Unklar" heißt nachsehen, nicht Feuer. */
.db-kpi.db-kpi-achtung[b-1w733mk1ui] {
    border-color: var(--border-brand);
    background: var(--brand-wash);
}

.db-kpi-fuss[b-1w733mk1ui] {
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--text-subtle);
}

/* ── Tabellen-Karte ── */
.db-karte[b-1w733mk1ui] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 6px 4px;
    box-shadow: var(--shadow-xs);
}

/* Eigene <table> statt MudTable: die Zellen liegen im eigenen Markup, die Isolation greift
   direkt — kein `::deep`, kein Wettlauf gegen MudBlazors Tabellen-Typografie. */
.db-tabelle[b-1w733mk1ui] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
}

.db-tabelle th[b-1w733mk1ui] {
    text-align: left;
    padding: 10px 12px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border-soft);
}

.db-tabelle td[b-1w733mk1ui] {
    padding: 8px 12px;
    vertical-align: middle;
    color: var(--text-body);
    border-bottom: 1px solid var(--border-soft);
}

.db-tabelle tbody tr:last-child td[b-1w733mk1ui] {
    border-bottom: none;
}

.db-tabelle tbody tr:hover td[b-1w733mk1ui] {
    background: var(--sand-100);
}

.db-sp-aktiv[b-1w733mk1ui] { width: 74px; }
.db-sp-tage[b-1w733mk1ui] { width: 190px; }
.db-tabelle .db-sp-zahl[b-1w733mk1ui] { width: 96px; text-align: right; }
.db-sp-termin[b-1w733mk1ui] { width: 176px; }
.db-sp-aktionen[b-1w733mk1ui] { width: 96px; white-space: nowrap; }

.db-zeile-titel[b-1w733mk1ui] {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-strong);
}

.db-zeile-name[b-1w733mk1ui] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: .9rem;
    color: var(--text-body);
}

.db-zeile-sub[b-1w733mk1ui] {
    display: block;
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--text-subtle);
    margin-top: 2px;
}

.db-gast[b-1w733mk1ui] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 600;
    background: var(--rose-100);
    color: var(--accent-strong);
}

/* ── Wochentag-Streifen ──
   Sieben feste Marken statt „Mo · Mi · Fr": über mehrere Zeilen hinweg wird der Rhythmus
   vergleichbar, ohne ihn zu lesen — und die Spalte wird schmaler als der Fließtext. */
.db-wochen[b-1w733mk1ui] {
    display: inline-flex;
    gap: 3px;
}

.db-tag[b-1w733mk1ui] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 600;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    color: var(--text-subtle);
}

.db-tag.db-tag-an[b-1w733mk1ui] {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
}

.db-zahl[b-1w733mk1ui] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.db-einheit[b-1w733mk1ui] {
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--text-subtle);
}

.db-leer[b-1w733mk1ui] {
    padding: 34px 20px;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-ui);
}

.db-leer-titel[b-1w733mk1ui] {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-strong);
    margin-bottom: 4px;
}

/* Pausiert tritt zurück, bleibt aber lesbar — der Schalter ist die Aktion, das Wort in der
   Termin-Spalte die Auskunft. */
.db-tabelle tr.db-zeile-aus[b-1w733mk1ui] {
    opacity: .55;
}
/* /Pages/Shop/Tabs/BestelldatumTab.razor.rz.scp.css */
/* Reiter Bestelldatum (Entwurf Tafel 2): links das neue Datum mit vorher → nachher je System,
   rechts die Zusammenfassung mit der Reihenfolge beim Speichern. */
.bt-meldung[b-v0hshd846l] { flex: none; display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; padding: 13px 14px; border-radius: 16px;
    font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; color: var(--text-body); }
.bt-meldung[b-v0hshd846l]  svg { flex: none; margin-top: 1px; }
.bt-meldung.ok[b-v0hshd846l] { background: var(--success-100); color: var(--success-600); }
.bt-meldung.warn[b-v0hshd846l] { background: var(--warning-100); color: var(--warning-600); }
.bt-meldung.bad[b-v0hshd846l] { background: var(--danger-100); color: var(--danger-600); }
.bt-meldung span[b-v0hshd846l] { color: var(--text-body); }

.bb-arbeit[b-v0hshd846l] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }

.bt-vorgang[b-v0hshd846l] { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
    background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: var(--shadow-xs); }
.bt-schritt[b-v0hshd846l] { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); }
.bt-schritt em[b-v0hshd846l] { margin-left: auto; font-style: normal; font-family: var(--font-ui); font-weight: 500; font-size: var(--text-xs); color: var(--text-subtle); }
.bt-n[b-v0hshd846l] { width: 21px; height: 21px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: var(--text-on-brand); font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 700; }
.bt-datum[b-v0hshd846l] { max-width: 250px; }

.bt-vn[b-v0hshd846l] { display: grid; grid-template-columns: 170px minmax(0, 1fr) 28px minmax(0, 1fr); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
    overflow: hidden; font-family: var(--font-ui); font-size: var(--text-sm); }
.bt-vn > span[b-v0hshd846l] { min-width: 0; padding: 11px 13px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 7px; }
.bt-vn > span.bt-k[b-v0hshd846l] { border-top: none; padding: 8px 13px; background: var(--sand-050);
    font-size: var(--text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.bt-vn > span.bt-sys[b-v0hshd846l] { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.bt-sys b[b-v0hshd846l] { font-weight: 600; color: var(--text-strong); }
.bt-sys small[b-v0hshd846l] { font-size: var(--text-2xs); color: var(--text-subtle); }
.bt-alt[b-v0hshd846l] { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); font-variant-numeric: tabular-nums; }
.bt-vn > span.bt-pf[b-v0hshd846l] { padding: 0; justify-content: center; color: var(--text-subtle); }
.bt-neu[b-v0hshd846l] { font-weight: 600; color: var(--success-600); font-variant-numeric: tabular-nums; }
.bt-bleibt[b-v0hshd846l] { color: var(--text-subtle); }

.bb-zusammenfassung[b-v0hshd846l] { display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: var(--shadow-md); }
.bt-det-h[b-v0hshd846l] { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 9px; }
.bt-det-h b[b-v0hshd846l] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); }
.bt-marke[b-v0hshd846l] { margin-left: auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
    font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.bt-marke.gruen[b-v0hshd846l] { background: var(--success-100); color: var(--success-600); }
.bt-marke.amb[b-v0hshd846l] { background: var(--warning-100); color: var(--warning-600); }
.bt-det-b[b-v0hshd846l] { padding: 13px 16px; }
.bt-eyebrow[b-v0hshd846l] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.bt-ablauf[b-v0hshd846l] { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;
    font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); }
.bt-ablauf li[b-v0hshd846l] { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.4; }
.bt-p[b-v0hshd846l] { width: 22px; height: 22px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
    background: var(--sand-100); color: var(--text-muted); font-size: var(--text-2xs); font-weight: 700; }
.bt-ablauf b[b-v0hshd846l] { font-weight: 600; color: var(--text-strong); }
.bt-ablauf small[b-v0hshd846l] { display: block; font-size: var(--text-xs); color: var(--text-subtle); }
.bt-ablauf li.aus b[b-v0hshd846l] { color: var(--text-subtle); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.bt-det-f[b-v0hshd846l] { border-top: 1px solid var(--border-soft); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 9px; background: var(--sand-050); }
.bt-summe[b-v0hshd846l] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-body); }
.bt-summe b[b-v0hshd846l] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bt-cta[b-v0hshd846l] { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
    border-radius: var(--radius-pill); background: var(--brand); color: var(--text-on-brand); box-shadow: var(--shadow-brand);
    font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); }
.bt-cta:hover:not(:disabled)[b-v0hshd846l] { background: var(--brand-strong); }
.bt-cta:disabled[b-v0hshd846l] { background: var(--sand-200); color: var(--text-subtle); box-shadow: none; cursor: not-allowed; }
.bt-cta:focus-visible[b-v0hshd846l] { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Telefon: eine Spalte, je System eine Zeile vorher → nachher (Entwurf Tafel 2 rechts). */
@media (max-width: 959.98px) {
    .bb-arbeit[b-v0hshd846l] { grid-template-columns: minmax(0, 1fr); }
    .bt-vorgang[b-v0hshd846l] { padding: 14px; gap: 12px; }
    .bt-datum[b-v0hshd846l] { max-width: none; }
    .bt-vn[b-v0hshd846l] { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
    .bt-vn > span.bt-k[b-v0hshd846l] { display: none; }
    .bt-vn > span.bt-sys[b-v0hshd846l] { grid-column: 1 / -1; padding-bottom: 0; }
    .bt-cta[b-v0hshd846l] { min-height: 48px; }
}
/* /Pages/Shop/Tabs/ReklamationTab.razor.rz.scp.css */
/* Reiter Reklamation: fuellt den Rest der Huelle „Bestellung bearbeiten“, ohne Seiten-Scroll. */
.rk-page[b-36zgcxt2jj] { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 12px; }

.rk-banner[b-36zgcxt2jj] { flex: none; border-radius: 14px; }

/* two-column grid, no page scroll */
.rk-grid[b-36zgcxt2jj] { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 344px; grid-template-rows: minmax(0, 1fr); gap: 12px; }
.rk-card[b-36zgcxt2jj] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* step badge */
.rk-step[b-36zgcxt2jj] { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-strong); }
.rk-step-num[b-36zgcxt2jj] { width: 19px; height: 19px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  font-family: var(--font-ui); display: inline-flex; align-items: center; justify-content: center; }

/* items card */
.rk-items-head[b-36zgcxt2jj] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; flex: none; }
.rk-items-head-right[b-36zgcxt2jj] { display: flex; align-items: center; gap: 12px; }
.rk-counter[b-36zgcxt2jj] { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted); }
.rk-selectall[b-36zgcxt2jj] { font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; color: var(--brand-strong); background: var(--brand-wash);
  border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.rk-selectall:hover[b-36zgcxt2jj] { background: var(--brand-soft); }
.rk-items-colhead[b-36zgcxt2jj], .rk-row[b-36zgcxt2jj] { display: grid; grid-template-columns: 42px 1fr 90px 130px; align-items: center; gap: 14px; padding: 8px 20px; }
.rk-items-colhead.is-credit[b-36zgcxt2jj], .rk-row.is-credit[b-36zgcxt2jj] { grid-template-columns: 42px 1fr 80px 120px 110px; }
.rk-items-colhead[b-36zgcxt2jj] { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); border-bottom: 1px solid var(--border-soft); flex: none; }
.rk-c[b-36zgcxt2jj] { text-align: center; }
.rk-items-body[b-36zgcxt2jj] { flex: 1; min-height: 0; overflow-y: auto; }
.rk-row[b-36zgcxt2jj] { border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .15s; }
.rk-row:hover[b-36zgcxt2jj] { background: var(--sand-050); }
.rk-row.is-selected[b-36zgcxt2jj] { background: var(--brand-wash); }
.rk-check[b-36zgcxt2jj] { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--border-strong, #D9BC9C); display: inline-flex;
  align-items: center; justify-content: center; color: #fff; }
.rk-check.is-on[b-36zgcxt2jj] { background: var(--brand); border-color: var(--brand); }
.rk-prod[b-36zgcxt2jj] { font-family: var(--font-body); font-size: 14px; color: var(--text-body); }
.rk-orig[b-36zgcxt2jj] { font-family: var(--font-ui); font-weight: 600; color: var(--text-muted); }
.rk-stepper[b-36zgcxt2jj] { display: inline-flex; align-items: center; background: var(--sand-050); border: 1px solid var(--border-default);
  border-radius: 999px; overflow: hidden; }
.rk-stepper.is-dim[b-36zgcxt2jj] { opacity: .4; }
.rk-stepper button[b-36zgcxt2jj] { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; }
.rk-stepper button:hover[b-36zgcxt2jj] { color: var(--brand-strong); }
.rk-stepper span[b-36zgcxt2jj] { min-width: 26px; text-align: center; font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--text-strong); }
.rk-stepper-wrap[b-36zgcxt2jj], .rk-credit-wrap[b-36zgcxt2jj] { display: flex; justify-content: center; }

/* op sidebar */
.rk-op[b-36zgcxt2jj] { padding: 0; }
.rk-op-body[b-36zgcxt2jj] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rk-tabs[b-36zgcxt2jj] { display: flex; gap: 5px; margin: 14px 14px 0; background: var(--sand-100); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 5px; flex: none; }
.rk-tab[b-36zgcxt2jj] { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; background: transparent;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; border-radius: 999px; padding: 9px; cursor: pointer; color: var(--text-muted); }
.rk-tab.is-active[b-36zgcxt2jj] { background: var(--surface-card); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
.rk-tab:disabled[b-36zgcxt2jj] { opacity: .45; cursor: not-allowed; }
.rk-gast-hinweis[b-36zgcxt2jj] { flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 10px 14px 0; padding: 9px 12px;
  border-radius: 12px; background: var(--sand-050); border: 1px solid var(--border-soft);
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.rk-gast-hinweis[b-36zgcxt2jj]  svg { flex: none; margin-top: 1px; }
.rk-op-form[b-36zgcxt2jj] { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.rk-bonus[b-36zgcxt2jj] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rk-bonus-label[b-36zgcxt2jj] { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--text-body); }
.rk-bonus-seg[b-36zgcxt2jj] { display: inline-flex; gap: 4px; background: var(--sand-100); border-radius: 999px; padding: 4px; }
.rk-bonus-seg button[b-36zgcxt2jj] { border: none; background: transparent; font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--text-muted); }
.rk-bonus-seg button.is-active[b-36zgcxt2jj] { background: var(--surface-card); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
.rk-payout[b-36zgcxt2jj] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
  border-radius: 12px; background: var(--brand-wash); border: 1px solid var(--border-brand); }
.rk-payout-label[b-36zgcxt2jj] { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--brand-strong); }
.rk-payout-sub[b-36zgcxt2jj] { font-family: var(--font-ui); font-size: 12px; color: var(--text-muted); }
.rk-payout-amount[b-36zgcxt2jj] { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--brand-strong); white-space: nowrap; }
.rk-op-foot[b-36zgcxt2jj] { flex: none; border-top: 1px solid var(--border-soft); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rk-summary[b-36zgcxt2jj] { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--font-ui); font-size: 13px; color: var(--text-strong); }
.rk-fehlt[b-36zgcxt2jj] { font-size: 12.5px; font-weight: 600; color: var(--warning-600); }
.rk-fehlt.is-ok[b-36zgcxt2jj] { display: inline-flex; align-items: center; gap: 4px; color: var(--success-600); }
.rk-summary b[b-36zgcxt2jj] { font-family: var(--font-display); font-size: 16px; }
.rk-cta[b-36zgcxt2jj] { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; width: 100%;
  font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; border-radius: 999px; padding: 12px; cursor: pointer;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-brand, 0 10px 28px rgba(58,125,140,.20)); transition: background .15s; }
.rk-cta:hover:not(:disabled)[b-36zgcxt2jj] { background: var(--brand-strong); }
.rk-cta:disabled[b-36zgcxt2jj] { background: var(--sand-200); color: var(--text-subtle); cursor: not-allowed; box-shadow: none; }

/* Telefon (#1952): der feste Rahmen faellt, die Seite scrollt wie gewohnt, beide Karten
   stehen untereinander. Mit `1fr 344px` und overflow:hidden schrumpfte die Artikelliste
   sonst auf 0 px — kein Artikel waehlbar, der Knopf blieb gesperrt. */
@media (max-width: 959.98px) {
    .rk-page[b-36zgcxt2jj] { flex: 1 0 auto; overflow: visible; }

    /* Kurzer Inhalt (etwa nach der Buchung): die Seite füllt den Schirm, die letzte Zeile
       nimmt den Rest und die Summenleiste sitzt darin unten. */
    .rk-grid[b-36zgcxt2jj] { flex: 1 0 auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
    .rk-items-body[b-36zgcxt2jj], .rk-op-form[b-36zgcxt2jj] { overflow: visible; }

    /* Zaehler und Knopf IMMER in eigener Zeile: einzeilig lag der Kopf auf 390 px genau an
       der Kante, und schon „2/3" statt „1/3" oder „Alle abwaehlen" liess ihn umspringen. */
    .rk-items-head[b-36zgcxt2jj] { flex-wrap: wrap; gap: 8px; }
    .rk-items-head-right[b-36zgcxt2jj] { flex: 1 0 100%; justify-content: space-between; }
    .rk-items-colhead[b-36zgcxt2jj] { display: none; }

    /* Ohne Spaltenkopf steht die Originalmenge als „bestellt N" unter dem Namen. */
    .rk-row[b-36zgcxt2jj], .rk-row.is-credit[b-36zgcxt2jj] {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        grid-template-areas:
            "check prod step"
            "check orig step"
            ".     credit credit";
        column-gap: 12px; row-gap: 2px; padding: 12px 16px;
    }
    .rk-check[b-36zgcxt2jj] { grid-area: check; }
    .rk-prod[b-36zgcxt2jj] { grid-area: prod; }
    .rk-orig[b-36zgcxt2jj] { grid-area: orig; text-align: left; font-size: 12.5px; font-weight: 500; }
    .rk-orig[b-36zgcxt2jj]::before { content: "bestellt "; }
    .rk-stepper-wrap[b-36zgcxt2jj] { grid-area: step; }
    .rk-credit-wrap[b-36zgcxt2jj] { grid-area: credit; justify-content: flex-start; margin-top: 6px; }
    .rk-stepper button[b-36zgcxt2jj] { width: 44px; height: 44px; }

    /* Menge und Betrag zählen erst nach der Wahl; an ungewählten Zeilen nur Rauschen. */
    .rk-row:not(.is-selected) .rk-stepper-wrap[b-36zgcxt2jj],
    .rk-row:not(.is-selected) .rk-credit-wrap[b-36zgcxt2jj] { display: none; }

    .rk-selectall[b-36zgcxt2jj], .rk-tab[b-36zgcxt2jj], .rk-bonus-seg button[b-36zgcxt2jj] { min-height: 44px; }
    .rk-cta[b-36zgcxt2jj] { min-height: 48px; }

    /* Margin.Dense ist 40 px hoch. Das Etikett rückt nur im leeren Zustand mit; das
       geschrumpfte Etikett (Wert/Fokus) setzt MudBlazor spezifischer und bleibt, wo es ist. */
    .rk-page[b-36zgcxt2jj]  .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
    .rk-page[b-36zgcxt2jj]  div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense { padding-top: 12.5px; padding-bottom: 12.5px; }
    .rk-page[b-36zgcxt2jj]  .mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(14px, 14px) scale(1); }

    /* Die Summenleiste bleibt am Daumen. Sticky haftet nur innerhalb des Elternelements und
       nie durch ein overflow:hidden hindurch: .rk-op löst sich deshalb auf, damit die Leiste
       Kind des Rasters ist, das die ganze Seite umfasst. Nie fixed (Tastatur). */
    .rk-op[b-36zgcxt2jj] { display: contents; }
    .rk-op-body[b-36zgcxt2jj] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px;
        box-shadow: var(--shadow-xs); padding-bottom: 4px; }
    .rk-op-foot[b-36zgcxt2jj] { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--surface-card); grid-row: 3; align-self: end; }

    /* Nach der Buchung ersetzt das Ergebnis die Maske: die Meldungen oben bleiben im Blick,
       unten steht nur noch „Nächste Reklamation". */
    .rk-page.is-done .rk-items[b-36zgcxt2jj],
    .rk-page.is-done .rk-op-body[b-36zgcxt2jj] { display: none; }
}
/* /Pages/Tagesabschluss.razor.rz.scp.css */
/* Drei Spalten auf voller Schirmhöhe: Kassen-Bahn · Zählraster · Ergebnis.
   Der Seitenkopf entfällt — Titel und Aktionen liegen in der Topbar (PageHeader). */
.ta-page[b-03hwxh15fs] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ta-grid[b-03hwxh15fs] {
    flex: 1;
    min-height: 0;
    display: flex;
}

.ta-empty[b-03hwxh15fs] {
    margin: 16px;
}

.ta-blocker[b-03hwxh15fs] {
    margin: 12px 16px 0;
    flex: none;
}

.ta-locked[b-03hwxh15fs] {
    margin: 12px 16px 0;
    flex: none;
}

.ta-hinweis[b-03hwxh15fs] {
    margin: 12px 16px 0;
    flex: none;
}

.ta-locked-row[b-03hwxh15fs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ta-datepicker[b-03hwxh15fs] {
    max-width: 170px;
}
/* /Pages/TrinkgeldRechner.razor.rz.scp.css */
.trr[b-umjfin039b] { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.trr-body[b-umjfin039b] { flex: 1; min-height: 0; display: flex; }
.trr-center[b-umjfin039b] { flex: 1; min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.trr-btn[b-umjfin039b] { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); border-radius: 999px; padding: 9px 16px; border: 1px solid var(--border-soft); background: var(--surface-card); color: var(--text-body); cursor: pointer; white-space: nowrap; }
.trr-btn:disabled[b-umjfin039b] { opacity: .5; cursor: default; }
.trr-btn--primary[b-umjfin039b] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.trr-btn--primary:hover:not(:disabled)[b-umjfin039b] { background: var(--brand-strong); border-color: var(--brand-strong); }
.trr-aktion-fehler[b-umjfin039b] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--danger-600); align-self: center; }
.trr-fehler[b-umjfin039b] { margin: 24px; display: flex; gap: 12px; align-items: flex-start; background: var(--danger-100); border-radius: 14px; padding: 14px 16px; font-family: var(--font-ui); color: var(--text-body); }
.trr-fehler[b-umjfin039b]  svg { color: var(--danger-600); flex: none; }
.trr-fehler b[b-umjfin039b] { display: block; color: var(--text-strong); }
.trr-laedt[b-umjfin039b] { margin: 24px; display: flex; gap: 10px; align-items: center; font-family: var(--font-ui); color: var(--text-muted); }

.trr-ergebnis[b-umjfin039b] { display: contents; }
.trr-kopf[b-umjfin039b] { display: flex; align-items: center; gap: 10px; }
.trr-monatzeile[b-umjfin039b] { display: none; }

/* Unter der Shell-Kante (960 px) wird die Seite schlank (Entwurf „Trinkgeld mobil schlank“):
   Monatszeile → Kasse → Summe → Hinweise → Personen als Liste, der aktuelle Schritt der
   Auszahlung sitzt unten am Daumen. Geldfluss, Quellen und frühere Monate sind Schreibtisch-
   Arbeit und fallen weg. Leiste und Mitte lösen sich per display:contents auf; die order-
   Werte der Leisten-Kinder stehen in TrinkgeldRechnerLeiste.razor.css (1, 3), die der
   Tabelle in ihrer eigenen Datei (4). */
@media (max-width: 959.98px) {
    .trr[b-umjfin039b] { height: auto; }
    .trr-kopf[b-umjfin039b] { display: none; }
    .trr-monatzeile[b-umjfin039b] { display: block; padding: 4px 12px 0; }
    .trr-body[b-umjfin039b] { flex-direction: column; gap: 12px; padding: 4px 16px 0; }
    .trr-center[b-umjfin039b] { display: contents; }
    .trr-ergebnis[b-umjfin039b] { display: block; order: 2; }
    .trr-aktion-fehler[b-umjfin039b] { white-space: normal; }
}
/* /Pages/WcStats/BestandskundenAbschnitt.razor.rz.scp.css */
.bk[b-h511uvz3mj] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); padding: 20px 22px 16px; margin-bottom: 24px; }
.bk-kopf[b-h511uvz3mj] { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-kopf h2[b-h511uvz3mj] { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); }
.bk-kopf p[b-h511uvz3mj] { margin: 2px 0 0; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.bk-umschalter[b-h511uvz3mj] { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--text-link); background: none; border: 1px solid var(--border-default); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.bk-umschalter:hover[b-h511uvz3mj] { background: var(--brand-wash); }
.bk-umschalter:focus-visible[b-h511uvz3mj] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.bk-raster[b-h511uvz3mj] { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bk-diagramm[b-h511uvz3mj] { min-width: 0; }
.bk-diagramm h3[b-h511uvz3mj] { margin: 0; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-body); }
.bk-hero[b-h511uvz3mj] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 2px; }
.bk-zahl[b-h511uvz3mj] { font-family: var(--font-numeric); font-size: var(--text-3xl); font-weight: 600; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bk-delta[b-h511uvz3mj] { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; }
.bk-delta.up[b-h511uvz3mj] { color: var(--success-600); }
.bk-delta.down[b-h511uvz3mj] { color: var(--danger-600); }
.bk-delta.flat[b-h511uvz3mj] { color: var(--text-muted); }
.bk-unter[b-h511uvz3mj] { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 6px; }

.bk-legende[b-h511uvz3mj] { display: flex; gap: 16px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); margin: 8px 0 2px; }
.bk-legende span[b-h511uvz3mj] { display: inline-flex; align-items: center; gap: 6px; }
.bk-legende i[b-h511uvz3mj] { display: inline-block; }
.lg-balken[b-h511uvz3mj] { width: 10px; height: 12px; background: var(--brand-strong); border-radius: 2px 2px 0 0; }
.lg-strich[b-h511uvz3mj] { width: 14px; border-top: 2px solid var(--ink-400); }
.lg-linie[b-h511uvz3mj] { width: 18px; border-top: 2px solid var(--brand-strong); }
.lg-gestrichelt[b-h511uvz3mj] { width: 18px; border-top: 2px dashed var(--ink-400); }
.lg-offen[b-h511uvz3mj] { width: 14px; height: 12px; border: 1px solid var(--border-default); background: repeating-linear-gradient(45deg, var(--sand-200) 0 3px, var(--white) 3px 6px); }

.bk-tabelle[b-h511uvz3mj] { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.bk-tabelle th[b-h511uvz3mj] { text-align: right; font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border-default); }
.bk-tabelle td[b-h511uvz3mj] { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-body); }
.bk-tabelle th:first-child[b-h511uvz3mj], .bk-tabelle td:first-child[b-h511uvz3mj] { text-align: left; }

.bk-fuss[b-h511uvz3mj] { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }

@media (max-width: 959.98px) {
    .bk-raster[b-h511uvz3mj] { grid-template-columns: 1fr; }
}
/* /Pages/WcStats/Customers.razor.rz.scp.css */
/* Kundenliste (#3105): am Rechner eine Tabelle, unter 960 px wird jede Zeile per CSS zur Karte
   (Entwurf „Kundenliste“ im Shop-Statistik-Konzept). Kacheln wie in der Übersicht. */
.kl-aktionen[b-1uz75m461z] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; font-family: var(--font-ui); }
.kl-stand[b-1uz75m461z] { flex: 1 1 auto; font-size: var(--text-xs); color: var(--text-muted); }

.kl-kacheln[b-1uz75m461z] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 12px 0 24px; }

.kl-liste[b-1uz75m461z] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); overflow: hidden; }
.kl-kopf[b-1uz75m461z] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.kl-kopf h2[b-1uz75m461z], .kl-top h2[b-1uz75m461z] { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); }
.kl-zahl[b-1uz75m461z] { margin-left: 4px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kl-suche[b-1uz75m461z] {
    margin-left: auto; width: 250px; height: 34px; padding: 0 12px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-default); background: var(--surface-card);
    font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body);
}
.kl-suche:focus-visible[b-1uz75m461z] { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.kl-leer[b-1uz75m461z] { margin: 0; padding: 18px 14px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.kl-hinweis[b-1uz75m461z] { margin: 6px 2px 24px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

.kl-tabelle[b-1uz75m461z] { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); }
.kl-tabelle th[b-1uz75m461z] {
    text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-page); white-space: nowrap;
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle);
}
.kl-tabelle td[b-1uz75m461z] { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kl-tabelle tbody tr[b-1uz75m461z] { cursor: pointer; }
.kl-tabelle tbody tr:hover td[b-1uz75m461z] { background: var(--sand-050); }
.kl-tabelle .num[b-1uz75m461z] { text-align: right; }
.kl-tabelle td small[b-1uz75m461z] { color: var(--text-muted); font-size: var(--text-xs); }

.kl-name[b-1uz75m461z] { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.kl-name button[b-1uz75m461z] {
    padding: 0; border: 0; background: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); text-align: left;
}
.kl-name button:focus-visible[b-1uz75m461z] { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.kl-umsatz[b-1uz75m461z] { font-weight: 600; color: var(--text-strong); }

.kl-pillen[b-1uz75m461z] { display: inline-flex; gap: 4px; }
.kl-pille[b-1uz75m461z] { font-size: var(--text-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); text-transform: lowercase; }
.kl-pille.aktiv[b-1uz75m461z] { background: var(--surface-sunken); color: var(--text-muted); }
.kl-pille.gefaehrdet[b-1uz75m461z] { background: var(--rose-100); color: var(--danger-600); }
.kl-pille.verloren[b-1uz75m461z] { background: var(--danger-100); color: var(--danger-600); }
.kl-pille.vip[b-1uz75m461z] { background: var(--green-100); color: var(--success-600); text-transform: none; }

.nur-karte[b-1uz75m461z] { display: none; }

.kl-top[b-1uz75m461z] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); padding: 14px 16px; margin-bottom: 24px; }
.kl-top ol[b-1uz75m461z] { margin: 10px 0 0; padding: 0; list-style: none; font-family: var(--font-ui); font-size: var(--text-sm); }
.kl-top li[b-1uz75m461z] { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.kl-top-name[b-1uz75m461z] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-weight: 600; }
.kl-top-wert[b-1uz75m461z] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); }
.kl-top small[b-1uz75m461z] { width: 64px; text-align: right; color: var(--text-muted); font-size: var(--text-xs); }

@media (max-width: 959.98px) {
    .kl-kacheln[b-1uz75m461z] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }

    .kl-kopf[b-1uz75m461z] { padding: 10px 12px; }
    .kl-suche[b-1uz75m461z] { flex: 1 1 100%; width: 100%; margin-left: 0; box-sizing: border-box; }

    .kl-tabelle thead[b-1uz75m461z] { display: none; }
    .kl-tabelle[b-1uz75m461z], .kl-tabelle tbody[b-1uz75m461z] { display: block; }
    .kl-tabelle tr[b-1uz75m461z] {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
        padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
    }
    .kl-tabelle td[b-1uz75m461z] { display: block; padding: 0; border: 0; }
    .kl-tabelle tbody tr:hover td[b-1uz75m461z] { background: none; }
    .kl-name[b-1uz75m461z] { grid-area: 1 / 1; max-width: none; }
    .kl-name button[b-1uz75m461z] { font-size: var(--text-base); }
    .kl-tabelle td.kl-best[b-1uz75m461z] { grid-area: 2 / 1; text-align: left; font-size: var(--text-xs); color: var(--text-muted); white-space: normal; }
    .kl-umsatz[b-1uz75m461z] { grid-area: 1 / 2; text-align: right; }
    .kl-stufe[b-1uz75m461z] { grid-area: 2 / 2; text-align: right; }
    .kl-tabelle td.kl-rest[b-1uz75m461z] { display: none; }
    .nur-karte[b-1uz75m461z] { display: inline; }
}

@media (pointer: coarse) {
    .kl-suche[b-1uz75m461z] { height: 44px; }
    .kl-tabelle tbody tr[b-1uz75m461z] { min-height: 44px; }
}
/* /Pages/WcStats/Kundenwert.razor.rz.scp.css */
/* Kundenwert (#3105): Aufbau und Telefon-Karten wie die Kundenliste (Customers.razor.css). */
.kw-aktionen[b-igihm46o29] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; font-family: var(--font-ui); }
.kw-stand[b-igihm46o29] { flex: 1 1 auto; font-size: var(--text-xs); color: var(--text-muted); }

.kw-kacheln[b-igihm46o29] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 12px 0 24px; }

.kw-liste[b-igihm46o29] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); overflow: hidden; }
.kw-kopf[b-igihm46o29] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.kw-kopf h2[b-igihm46o29] { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); }
.kw-zahl[b-igihm46o29] { margin-left: 4px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kw-unter[b-igihm46o29] { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.kw-leer[b-igihm46o29] { margin: 0; padding: 18px 14px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.kw-hinweis[b-igihm46o29] { margin: 6px 2px 24px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }
.kw-export[b-igihm46o29] { display: flex; justify-content: flex-end; padding: 10px 14px 0; }
.kw-uwg[b-igihm46o29] { margin: 0; padding: 10px 14px 14px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

.kw-tabelle[b-igihm46o29] { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); }
.kw-tabelle th[b-igihm46o29] {
    text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-page); white-space: nowrap;
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle);
}
.kw-tabelle td[b-igihm46o29] { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-tabelle .num[b-igihm46o29] { text-align: right; }
.kw-tabelle td.kw-name[b-igihm46o29] { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text-strong); }
.kw-wert[b-igihm46o29] { font-weight: 600; color: var(--text-strong); }

.kw-erst tbody tr[b-igihm46o29] { cursor: pointer; }
.kw-erst tbody tr:hover td[b-igihm46o29], .kw-erst tbody tr.offen td[b-igihm46o29] { background: var(--sand-050); }
.kw-name button[b-igihm46o29] {
    padding: 0; border: 0; background: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); text-align: left;
}
.kw-name button:focus-visible[b-igihm46o29] { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

.kw-tabelle tr.kw-zweit td[b-igihm46o29] { white-space: normal; background: var(--surface-page); padding: 10px 16px 14px 28px; }
.kw-zweit h3[b-igihm46o29] { margin: 0 0 6px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.kw-zweit .kw-leer[b-igihm46o29] { padding: 0; }
.kw-zweit ol[b-igihm46o29] { margin: 0; padding: 0; list-style: none; max-width: 520px; }
.kw-zweit li[b-igihm46o29] { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; border-top: 1px solid var(--border-soft); }
.kw-zweit li span[b-igihm46o29] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-zweit li b[b-igihm46o29] { font-variant-numeric: tabular-nums; color: var(--text-strong); }

.kw-pille[b-igihm46o29] { font-size: var(--text-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); text-transform: lowercase; }
.kw-pille.aktiv[b-igihm46o29] { background: var(--surface-sunken); color: var(--text-muted); }
.kw-pille.gefaehrdet[b-igihm46o29] { background: var(--rose-100); color: var(--danger-600); }
.kw-pille.verloren[b-igihm46o29] { background: var(--danger-100); color: var(--danger-600); }

.nur-karte[b-igihm46o29] { display: none; }

@media (max-width: 959.98px) {
    .kw-kacheln[b-igihm46o29] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
    .kw-kopf[b-igihm46o29] { padding: 10px 12px; }

    .kw-tabelle thead[b-igihm46o29] { display: none; }
    .kw-tabelle[b-igihm46o29], .kw-tabelle tbody[b-igihm46o29] { display: block; }
    .kw-tabelle tr[b-igihm46o29] {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
        padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
    }
    .kw-tabelle td[b-igihm46o29] { display: block; padding: 0; border: 0; }
    .kw-erst tbody tr:hover td[b-igihm46o29], .kw-erst tbody tr.offen td[b-igihm46o29] { background: none; }
    .kw-erst tbody tr.offen[b-igihm46o29] { background: var(--sand-050); }
    .kw-tabelle td.kw-name[b-igihm46o29] { grid-area: 1 / 1; max-width: none; font-size: var(--text-base); }
    .kw-name button[b-igihm46o29] { font-size: var(--text-base); }
    .kw-tabelle td.kw-wert[b-igihm46o29] { grid-area: 1 / 2; text-align: right; }
    .kw-tabelle td.kw-detail[b-igihm46o29] { grid-area: 2 / 1; text-align: left; font-size: var(--text-xs); color: var(--text-muted); white-space: normal; }
    .kw-erst td.kw-detail[b-igihm46o29] { grid-column: 1 / -1; }
    .kw-tabelle td.kw-stufe[b-igihm46o29] { grid-area: 2 / 2; text-align: right; }
    .kw-tabelle td.kw-rest[b-igihm46o29] { display: none; }
    .kw-tabelle tr.kw-zweit[b-igihm46o29] { display: block; padding: 10px 12px 12px 20px; background: var(--surface-page); }
    .kw-tabelle tr.kw-zweit td[b-igihm46o29] { padding: 0; background: none; }
    .nur-karte[b-igihm46o29] { display: inline; }
}

@media (pointer: coarse) {
    .kw-tabelle tbody tr[b-igihm46o29] { min-height: 44px; }
}
/* /Pages/WcStats/Overview.razor.rz.scp.css */
.ub-aktionen[b-51ewl0n23u] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; font-family: var(--font-ui); }
.ub-stand[b-51ewl0n23u] { flex: 1 1 auto; font-size: var(--text-xs); color: var(--text-muted); }
.ub-hinweis[b-51ewl0n23u] { margin: 0 0 12px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

.ub-kacheln[b-51ewl0n23u] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 12px 0 24px; }

.ub-mehr-knopf[b-51ewl0n23u] { display: none; }

.ub-diagramme[b-51ewl0n23u] { display: grid; grid-template-columns: 7fr 5fr; gap: 14px; margin-bottom: 24px; }
.ub-karte[b-51ewl0n23u] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); padding: 16px 18px; min-width: 0; }
.ub-karte h2[b-51ewl0n23u] { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); }
.ub-leer[b-51ewl0n23u] { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

@media (max-width: 959.98px) {
    .ub-kacheln[b-51ewl0n23u] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
    .ub-kacheln:not(.mehr-offen)[b-51ewl0n23u]  .ub-mehr { display: none; }
    .ub-mehr-knopf[b-51ewl0n23u] {
        display: block; width: 100%; margin-bottom: 16px; padding: 8px; cursor: pointer;
        font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-link);
        background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    }
    .ub-diagramme[b-51ewl0n23u] { grid-template-columns: 1fr; }
}

.ub-mehr-knopf:focus-visible[b-51ewl0n23u] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (pointer: coarse) {
    .ub-mehr-knopf[b-51ewl0n23u] { min-height: 44px; }
}
/* /Pages/WcStats/WcAufklappAbschnitt.razor.rz.scp.css */
.wa[b-l059gof5uf] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); margin-bottom: 16px; font-family: var(--font-ui); overflow: hidden; }
.wa-kopf[b-l059gof5uf] {
    display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; text-align: left; cursor: pointer;
    background: none; border: 0; padding: 14px 16px; font-family: var(--font-ui); color: var(--text-body);
}
.wa-kopf:focus-visible[b-l059gof5uf] { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.wa-titel[b-l059gof5uf] { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); }
.wa-zahl[b-l059gof5uf] { margin-left: 4px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wa-unter[b-l059gof5uf] { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.wa-pfeil[b-l059gof5uf] { font-size: var(--text-lg); color: var(--text-link); }
.wa-inhalt[b-l059gof5uf] { border-top: 1px solid var(--border-soft); }

@media (pointer: coarse) {
    .wa-kopf[b-l059gof5uf] { min-height: 44px; }
}
/* /Pages/WcStats/WcKennzahl.razor.rz.scp.css */
.wk[b-tvq4ze5kau] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); padding: 14px 16px; min-width: 0; font-family: var(--font-ui); }
.wk-k[b-tvq4ze5kau] { font-size: var(--text-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.wk-v[b-tvq4ze5kau] { font-family: var(--font-numeric); font-size: var(--text-2xl); font-weight: 600; line-height: 1.15; margin: 4px 0 2px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.wk[b-tvq4ze5kau]  .wk-d { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wk[b-tvq4ze5kau]  .wk-d.up { color: var(--success-600); }
.wk[b-tvq4ze5kau]  .wk-d.down { color: var(--danger-600); }

@media (max-width: 959.98px) {
    .wk[b-tvq4ze5kau] { padding: 10px 12px; }
    .wk-v[b-tvq4ze5kau] { font-size: var(--text-xl); }
}
/* /Pages/WcStats/WcKohortenAbschnitt.razor.rz.scp.css */
.ko[b-fmpxkyq7hc] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); margin-bottom: 24px; font-family: var(--font-ui); }
.ko-kopf[b-fmpxkyq7hc] {
    display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; text-align: left; cursor: pointer;
    background: none; border: 0; padding: 16px 22px; font-family: var(--font-ui); color: var(--text-body);
}
.ko-kopf:focus-visible[b-fmpxkyq7hc], .ko-export:focus-visible[b-fmpxkyq7hc] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ko-titel[b-fmpxkyq7hc] { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); }
.ko-unter[b-fmpxkyq7hc] { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.ko-pfeil[b-fmpxkyq7hc] { font-size: var(--text-lg); color: var(--text-link); }

.ko-inhalt[b-fmpxkyq7hc] { padding: 0 22px 18px; }
.ko-leer[b-fmpxkyq7hc] { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.ko-aktionen[b-fmpxkyq7hc] { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: var(--text-sm); color: var(--text-muted); }
.ko-export[b-fmpxkyq7hc] { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--text-link); background: none; border: 1px solid var(--border-default); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.ko-export:hover[b-fmpxkyq7hc] { background: var(--brand-wash); }

/* Ausnahme von „Listen blättern“: eine Matrix ist keine Zeilenliste, ihre Spalten gehören
   zusammen – deshalb darf genau sie waagerecht scrollen. */
.ko-rollbar[b-fmpxkyq7hc] { overflow-x: auto; }

.ko-matrix[b-fmpxkyq7hc] { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ko-matrix th[b-fmpxkyq7hc] { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 6px; border-bottom: 1px solid var(--border-default); text-align: center; }
.ko-matrix td[b-fmpxkyq7hc] { padding: 6px; text-align: center; white-space: nowrap; color: var(--text-body); border-bottom: 1px solid var(--border-soft); }
.ko-matrix th:first-child[b-fmpxkyq7hc], .ko-matrix td:first-child[b-fmpxkyq7hc] { text-align: left; font-weight: 600; }
.ko-matrix th:nth-child(2)[b-fmpxkyq7hc], .ko-matrix td:nth-child(2)[b-fmpxkyq7hc] { text-align: right; }

.ko-zelle.st0[b-fmpxkyq7hc] { background: var(--surface-sunken); }
.ko-zelle.st1[b-fmpxkyq7hc] { background: color-mix(in srgb, var(--brand) 15%, var(--surface-card)); }
.ko-zelle.st2[b-fmpxkyq7hc] { background: color-mix(in srgb, var(--brand) 32%, var(--surface-card)); }
.ko-zelle.st3[b-fmpxkyq7hc] { background: color-mix(in srgb, var(--brand) 50%, var(--surface-card)); color: var(--text-strong); }
.ko-zelle.st4[b-fmpxkyq7hc] { background: color-mix(in srgb, var(--brand) 70%, var(--surface-card)); color: var(--text-on-brand); }
.ko-zelle.st5[b-fmpxkyq7hc] { background: var(--brand-strong); color: var(--text-on-brand); }

@media (max-width: 959.98px) {
    .ko-kopf[b-fmpxkyq7hc] { padding: 14px 16px; }
    .ko-inhalt[b-fmpxkyq7hc] { padding: 0 16px 16px; }
}

@media (pointer: coarse) {
    .ko-kopf[b-fmpxkyq7hc], .ko-export[b-fmpxkyq7hc] { min-height: 44px; }
}
/* /Pages/WcStats/WcStatsNav.razor.rz.scp.css */
.wsn[b-riu5h3vfrh] { margin-bottom: 20px; font-family: var(--font-ui); }

.wsn-bereiche[b-riu5h3vfrh] { display: flex; flex-wrap: wrap; gap: 8px; }
.wsn-bereich[b-riu5h3vfrh] {
    font-size: var(--text-sm); font-weight: 600; color: var(--text-body); text-decoration: none;
    padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card);
}
.wsn-bereich:hover[b-riu5h3vfrh] { background: var(--brand-wash); }
.wsn-bereich.aktiv[b-riu5h3vfrh] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.wsn-bereich:focus-visible[b-riu5h3vfrh], .wsn-tab:focus-visible[b-riu5h3vfrh] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wsn-kurz[b-riu5h3vfrh] { display: none; }

.wsn-reiter[b-riu5h3vfrh] { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--border-soft); }
.wsn-tab[b-riu5h3vfrh] { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; padding: 4px 0 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wsn-tab:hover[b-riu5h3vfrh] { color: var(--text-body); }
.wsn-tab.aktiv[b-riu5h3vfrh] { color: var(--text-link); font-weight: 600; border-bottom-color: var(--brand); }

@media (max-width: 959.98px) {
    .wsn-lang[b-riu5h3vfrh] { display: none; }
    .wsn-kurz[b-riu5h3vfrh] { display: inline; }
}

@media (pointer: coarse) {
    .wsn-bereich[b-riu5h3vfrh], .wsn-tab[b-riu5h3vfrh] { min-height: 44px; display: inline-flex; align-items: center; }
}
/* /Pages/WcStats/WcZeitraumFilter.razor.rz.scp.css */
.zf[b-5tzpnocru9] { font-family: var(--font-ui); margin-bottom: 12px; }

.zf-leiste[b-5tzpnocru9] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs); padding: 10px 14px;
}
.zf-chips[b-5tzpnocru9] { display: flex; flex-wrap: wrap; gap: 6px; }
.zf-chip[b-5tzpnocru9] {
    font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); cursor: pointer;
    padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card);
}
.zf-chip:hover[b-5tzpnocru9] { background: var(--brand-wash); }
.zf-chip.aktiv[b-5tzpnocru9] { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-strong); font-weight: 600; }
.zf-chip:focus-visible[b-5tzpnocru9], .zf-knopf:focus-visible[b-5tzpnocru9], .zf-uebernehmen:focus-visible[b-5tzpnocru9] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.zf-titel[b-5tzpnocru9] { align-self: center; margin-right: 2px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.zf-frei[b-5tzpnocru9] { min-width: 260px; }
.zf-spanne[b-5tzpnocru9] { margin-left: auto; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.zf-knopf[b-5tzpnocru9], .zf-schleier[b-5tzpnocru9], .zf-blatt[b-5tzpnocru9] { display: none; }

@media (max-width: 959.98px) {
    .zf-leiste[b-5tzpnocru9] { display: none; }

    .zf-knopf[b-5tzpnocru9] {
        display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
        font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); text-align: left;
        background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 9px 12px;
    }
    .zf-chev[b-5tzpnocru9] { color: var(--text-link); font-weight: 600; white-space: nowrap; }
    .zf-knopf-text b[b-5tzpnocru9] { font-weight: 600; }

    .zf-schleier[b-5tzpnocru9] { display: block; position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--ink-900) 35%, transparent); }
    .zf-blatt[b-5tzpnocru9] {
        display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
        max-height: 85dvh; overflow-y: auto; background: var(--surface-card); border-radius: 18px 18px 0 0;
        box-shadow: var(--shadow-lg); padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
    }
    .zf-griff[b-5tzpnocru9] { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-300); margin: 0 auto 12px; }
    .zf-blatt-titel[b-5tzpnocru9] { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); }
    .zf-blatt h4[b-5tzpnocru9] {
        margin: 14px 0 6px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
    }
    .zf-blatt .zf-chip[b-5tzpnocru9] { padding: 8px 12px; }
    .zf-blatt .zf-frei[b-5tzpnocru9] { margin-top: 8px; }
    .zf-uebernehmen[b-5tzpnocru9] {
        margin-top: 18px; padding: 12px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
        background: var(--brand); color: var(--text-on-brand); font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600;
    }
}

@media (pointer: coarse) {
    .zf-chip[b-5tzpnocru9], .zf-knopf[b-5tzpnocru9], .zf-uebernehmen[b-5tzpnocru9] { min-height: 44px; }
    .zf-kanal[b-5tzpnocru9]  .mud-button-root { min-height: 44px; }
}
/* /RezeptAssistSpiegel/Pages/AbgleichHinweis.razor.rz.scp.css */
.rzah[b-0zxim67cda] { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 10px 13px; background: var(--warning-100); color: var(--warning-600); font-family: var(--font-ui); font-size: var(--text-sm); }
.rzah b[b-0zxim67cda] { font-weight: 600; }
.rzah-knopf[b-0zxim67cda] { margin-left: auto; height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* /RezeptAssistSpiegel/Pages/RezeptAenderungsListe.razor.rz.scp.css */
.rza-banner[b-2ai6fcnd0e] { border-radius: 14px; padding: 10px 13px; background: var(--danger-100); color: var(--danger-600); font-family: var(--font-ui); font-size: var(--text-sm); }
.rza-banner button[b-2ai6fcnd0e] { margin-left: 8px; }
.rza-leer[b-2ai6fcnd0e] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.rza-tabelle[b-2ai6fcnd0e] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; overflow: clip; }
.rza-tabelle ul[b-2ai6fcnd0e] { list-style: none; margin: 0; padding: 0; }
.rza-zeile .w[b-2ai6fcnd0e] { min-width: 0; }
.rza-zeile .w b[b-2ai6fcnd0e] { display: block; font-weight: 600; color: var(--text-strong); }
.rza-zeile .w span[b-2ai6fcnd0e] { display: block; font-size: var(--text-2xs); color: var(--text-subtle); }
.rza-zeile .zeit[b-2ai6fcnd0e] { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.rza-tag[b-2ai6fcnd0e] { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface-page); padding: 7px 12px; border-bottom: 1px solid var(--border-soft); }
.rza-zeile[b-2ai6fcnd0e] { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 2.2fr); gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); text-decoration: none; }
.rza-zeile:hover[b-2ai6fcnd0e] { background: var(--surface-page); }
.rza-zeile .kz[b-2ai6fcnd0e] { color: var(--text-muted); white-space: normal; }
.rza-fuss[b-2ai6fcnd0e] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); padding: 7px 12px; }
/* /RezeptAssistSpiegel/Pages/RezepteSeite.razor.rz.scp.css */
.rzs[b-ugvbj6npvs] { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.rzs-reiter[b-ugvbj6npvs] { display: flex; gap: 8px; }
.rzs-reiter__knopf[b-ugvbj6npvs] { height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.rzs-reiter__knopf.aktiv[b-ugvbj6npvs] { background: var(--brand-wash); border-color: transparent; color: var(--brand-strong); }
/* /RezeptAssistSpiegel/Pages/RezeptHistorieSeite.razor.rz.scp.css */
.rzh[b-voc18tlviw] { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.rzh-raster[b-voc18tlviw] { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.rzh-banner[b-voc18tlviw] { border-radius: 14px; padding: 10px 13px; background: var(--danger-100); color: var(--danger-600); font-family: var(--font-ui); font-size: var(--text-sm); }
.rzh-banner button[b-voc18tlviw] { margin-left: 8px; }
.rzh-leer[b-voc18tlviw] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

@media (max-width: 959.98px) {
    .rzh-raster[b-voc18tlviw] { grid-template-columns: minmax(0, 1fr); }
}
/* /RezeptAssistSpiegel/Pages/RezeptKatalogAnsicht.razor.rz.scp.css */
.rzk h3[b-a8e3zra3ir] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); margin: 12px 0 6px; }
.rzk table[b-a8e3zra3ir] { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); }
.rzk td[b-a8e3zra3ir] { padding: 3px 6px; border-bottom: 1px solid var(--border-soft); }
.rzk td.num[b-a8e3zra3ir] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rzk-pillen[b-a8e3zra3ir] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.rzk-pillen li[b-a8e3zra3ir] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; border-radius: 999px; padding: 3px 9px; background: var(--sand-100); color: var(--text-muted); }
.chg[b-a8e3zra3ir], .rzk-pillen li.chg[b-a8e3zra3ir] { background: var(--warning-100); }
.neu[b-a8e3zra3ir], .rzk-pillen li.neu[b-a8e3zra3ir] { background: var(--success-100); }
.weg[b-a8e3zra3ir], .rzk-pillen li.weg[b-a8e3zra3ir] { background: var(--danger-100); color: var(--danger-600); text-decoration: line-through; }
/* /RezeptAssistSpiegel/Pages/RezeptListe.razor.rz.scp.css */
.rzl-banner[b-ms5ek432t8] { border-radius: 14px; padding: 10px 13px; background: var(--danger-100); color: var(--danger-600); font-family: var(--font-ui); font-size: var(--text-sm); }
.rzl-leer[b-ms5ek432t8] { padding: 24px; text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }
.rzl-kopfzeile[b-ms5ek432t8] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rzl-kopfzeile input[b-ms5ek432t8] { flex: 1; min-width: 200px; max-width: 320px; height: 34px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); padding: 0 12px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); }
.rzl-filter[b-ms5ek432t8] { display: flex; gap: 6px; flex-wrap: wrap; }
.rzl-filter button[b-ms5ek432t8] { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.rzl-filter button.an[b-ms5ek432t8] { background: var(--brand-wash); border-color: transparent; color: var(--brand-strong); }
.rzl-tabelle[b-ms5ek432t8] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; overflow: clip; }
.rzl-tabelle ul[b-ms5ek432t8] { list-style: none; margin: 0; padding: 0; }
.rzl-kopf[b-ms5ek432t8] { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border-soft); background: var(--surface-page); }
.rzl-zeile[b-ms5ek432t8] { border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); text-decoration: none; }
.rzl-zeile:hover[b-ms5ek432t8] { background: var(--surface-page); }
.rzl-zeile:focus-visible[b-ms5ek432t8] { outline: 2px solid var(--brand); outline-offset: -2px; }
.rzl-zeile .w[b-ms5ek432t8] { min-width: 0; }
.rzl-zeile b[b-ms5ek432t8] { display: block; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rzl-zeile .w span[b-ms5ek432t8] { display: block; font-size: var(--text-2xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill[b-ms5ek432t8] { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-style: normal; font-size: var(--text-2xs); font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.pill.grau[b-ms5ek432t8] { background: var(--sand-100); color: var(--text-subtle); }
.rzl-kopf[b-ms5ek432t8], .rzl-zeile[b-ms5ek432t8] { display: grid; grid-template-columns: 60px minmax(0, 2fr) minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 7px 12px; }
.rzl-zeile.aus[b-ms5ek432t8], .rzl-zeile.aus b[b-ms5ek432t8] { color: var(--text-subtle); font-weight: 500; }
.rzl-zeile .nr[b-ms5ek432t8] { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.pill.gruen[b-ms5ek432t8] { background: var(--success-100); color: var(--success-600); }
.rzl-banner button[b-ms5ek432t8] { margin-left: 8px; }
/* /RezeptAssistSpiegel/Pages/RezeptStandAnsicht.razor.rz.scp.css */
.rzst[b-w0kkfugqvu] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: var(--shadow-md); }
.rzst-kopf[b-w0kkfugqvu] { padding: 12px 16px 11px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-ui); }
.rzst-kopf b[b-w0kkfugqvu] { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.rzst-kopf span[b-w0kkfugqvu] { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-subtle); }
.rzst-raster[b-w0kkfugqvu] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; padding: 12px 16px 14px; }
.rzst h3[b-w0kkfugqvu] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); margin: 12px 0 6px; }
.rzst-zutaten[b-w0kkfugqvu] { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); }
.rzst-zutaten td[b-w0kkfugqvu] { padding: 4px 6px; border-bottom: 1px solid var(--border-soft); }
.rzst-zutaten td.num[b-w0kkfugqvu] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rzst-zutaten tr.schritt td[b-w0kkfugqvu] { font-style: italic; color: var(--text-muted); background: var(--surface-page); }
.chg[b-w0kkfugqvu] { background: var(--warning-100); }
.neu[b-w0kkfugqvu] { background: var(--success-100); box-shadow: inset 3px 0 0 var(--success-600); }
.weg td[b-w0kkfugqvu] { background: var(--danger-100); color: var(--danger-600); text-decoration: line-through; }
.rzst dl[b-w0kkfugqvu] { margin: 0; display: grid; gap: 5px; font-family: var(--font-ui); font-size: var(--text-sm); }
.rzst dl > div[b-w0kkfugqvu] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border-radius: 6px; padding: 0 4px; }
.rzst dl > div.lang[b-w0kkfugqvu] { grid-template-columns: 1fr; }
.rzst dt[b-w0kkfugqvu] { color: var(--text-subtle); }
.rzst dd[b-w0kkfugqvu] { margin: 0; font-weight: 600; color: var(--text-strong); text-align: right; white-space: pre-line; }
.rzst dl > div.lang dd[b-w0kkfugqvu] { text-align: left; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); }
.alt[b-w0kkfugqvu] { color: var(--text-subtle); font-weight: 400; margin-right: 4px; display: inline-block; }
.rzst details summary[b-w0kkfugqvu] { cursor: pointer; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); margin-top: 12px; }
.rzst-hinweis[b-w0kkfugqvu] { margin: 6px 0 0; padding: 4px 8px; border-radius: 6px; font-family: var(--font-ui); font-size: var(--text-xs); }

/* Unter 1200 px ist der Stand neben der Zeitleiste zu schmal für zwei Spalten. */
@media (max-width: 1199.98px) {
    .rzst-raster[b-w0kkfugqvu] { grid-template-columns: minmax(0, 1fr); }
}
/* /RezeptAssistSpiegel/Pages/RezeptZeitleiste.razor.rz.scp.css */
.rzz[b-ypufvtfkf2] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 10px; }
.rzz-titel[b-ypufvtfkf2] { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); padding: 6px 8px 8px; }
.rzz-titel em[b-ypufvtfkf2] { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 500; }
.rzz ol[b-ypufvtfkf2] { list-style: none; margin: 0; padding: 0; }
.rzz-v[b-ypufvtfkf2] { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 12px; padding: 9px 10px 10px 30px; position: relative; font-family: var(--font-ui); cursor: pointer; }
.rzz-v[b-ypufvtfkf2]::before { content: ""; position: absolute; left: 10px; top: 12px; width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--border-strong); background: var(--surface-card); }
.rzz-v.an[b-ypufvtfkf2] { background: var(--brand-wash); }
.rzz-v.an[b-ypufvtfkf2]::before { border-color: var(--brand); background: var(--brand); }
.rzz-v b[b-ypufvtfkf2] { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rzz-v span[b-ypufvtfkf2] { display: block; margin-top: 3px; font-size: var(--text-xs); line-height: 1.45; color: var(--text-muted); }
.rzz-fuss[b-ypufvtfkf2] { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-subtle); padding: 8px; }
/* /Shared/AbschlussErgebnisSpalte.razor.rz.scp.css */
.erg[b-657tqik659] {
    width: 344px;
    flex: none;
    border-left: 1px solid var(--border-soft);
    background: var(--surface-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.erg-eyebrow[b-657tqik659] {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 5px;
}

.erg-row[b-657tqik659] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.erg-row--sep[b-657tqik659] {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 0;
}

.erg-label[b-657tqik659] {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
}

.erg-val[b-657tqik659] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.erg-hero[b-657tqik659] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 38px;
    color: var(--brand-strong);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── Abgleich + Tausch ───────────────────────────────────────────────── */
.erg-box[b-657tqik659] {
    border-radius: 14px;
    padding: 14px 15px;
}

.erg-box--neutral[b-657tqik659] { background: var(--sand-100); }
.erg-box--ok[b-657tqik659]      { background: var(--success-100); }
.erg-box--warn[b-657tqik659]    { background: var(--warning-100); }
.erg-box--bad[b-657tqik659]     { background: var(--danger-100); }

.erg-diff-row[b-657tqik659] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.erg-diff-label[b-657tqik659] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-body);
}

.erg-box--ok .erg-diff-label[b-657tqik659],
.erg-box--ok .erg-diff[b-657tqik659] { color: var(--success-600); }

.erg-box--warn .erg-diff-label[b-657tqik659],
.erg-box--warn .erg-diff[b-657tqik659] { color: var(--warning-600); }

.erg-box--bad .erg-diff-label[b-657tqik659],
.erg-box--bad .erg-diff[b-657tqik659] { color: var(--danger-600); }

.erg-diff[b-657tqik659] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-strong);
}

.erg-tausch-head[b-657tqik659] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-strong);
    margin-bottom: 7px;
}

.erg-tausch-text[b-657tqik659] {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-body);
    line-height: 1.45;
    margin: 0 0 8px;
}

.erg-tausch-list[b-657tqik659] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.erg-tausch-zeile[b-657tqik659] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-body);
}

.erg-tausch-anz[b-657tqik659] {
    font-weight: 600;
    width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.erg-tausch-wert[b-657tqik659] {
    color: var(--text-muted);
}

.erg-tausch-sum[b-657tqik659] {
    flex: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.erg-tausch-total[b-657tqik659] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, .09);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12.5px;
}

.erg-tausch-total b[b-657tqik659] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* ── Wochensumme zur Bank ───────────────────────────────────────────── */
.erg-bank[b-657tqik659] {
    border-radius: 14px;
    padding: 14px 15px;
    background: var(--brand-wash);
    box-shadow: inset 0 0 0 2px var(--brand);
    font-family: var(--font-ui);
}

.erg-bank-kopf[b-657tqik659] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.erg-bank-titel[b-657tqik659] { color: var(--brand-strong); }

.erg-bank-link[b-657tqik659] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-link);
    text-decoration: none;
    white-space: nowrap;
}

.erg-bank-summe[b-657tqik659] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    margin: 2px 0 8px;
}

.erg-bank-tag[b-657tqik659] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.erg-bank-tag.is-tag[b-657tqik659] { font-weight: 700; color: var(--text-strong); }
.erg-bank-tag.is-offen[b-657tqik659] { font-weight: 600; color: var(--text-subtle); font-style: italic; }

.erg-cta[b-657tqik659] {
    margin-top: auto;
    text-transform: none;
}
/* /Shared/AuswahlMenue.razor.rz.scp.css */
.am-menue[b-2exdcm7s1d] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 41;
    min-width: 200px;
    /* Der Aufrufer kann in einem Vorfahren mit overflow:hidden liegen (Positionen bestätigen):
       ohne Grenze wären die unteren Einträge abgeschnitten und unerreichbar. */
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    padding: 6px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.am-eintrag[b-2exdcm7s1d] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
    text-align: left;
}

.am-eintrag:hover[b-2exdcm7s1d] { background: var(--surface-sunken); }
.am-eintrag:focus-visible[b-2exdcm7s1d] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.am-eintrag.on[b-2exdcm7s1d] { color: var(--text-strong); }
.am-haken[b-2exdcm7s1d] { width: 18px; flex: none; display: inline-flex; color: var(--brand); }
.am-name[b-2exdcm7s1d] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-zahl[b-2exdcm7s1d] { font-family: var(--font-numeric); font-weight: 700; color: var(--text-subtle); }
.am-trenner[b-2exdcm7s1d] { height: 1px; margin: 4px 6px; background: var(--border-soft); }

/* Fingerbreite Einträge am Telefon und bei Touch-Bedienung. */
@media (max-width: 959.98px), (pointer: coarse) {
    .am-eintrag[b-2exdcm7s1d] { min-height: 48px; }
}
/* /Shared/BankeinzahlungBeleg.razor.rz.scp.css */
/* Druckblatt: feste px-Größen, damit das A4-Blatt bei jedem gleich umbricht (#1920). */
.beleg[b-xijox77y7o] { display: none; }

@media print {
    .beleg[b-xijox77y7o] {
        display: block;
        font-family: var(--font-ui);
        color: var(--ink-900);
        padding: 8px 4px;
    }
}

.beleg-firma[b-xijox77y7o] { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.beleg-titel[b-xijox77y7o] { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 28px 0 4px; }
.beleg-zeit[b-xijox77y7o] { font-size: 14px; color: var(--text-muted); }

.beleg-tabelle[b-xijox77y7o] { width: 100%; border-collapse: collapse; margin-top: 22px; }
.beleg-tabelle th[b-xijox77y7o] { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid var(--border-default); }
.beleg-tabelle td[b-xijox77y7o] { padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; font-variant-numeric: tabular-nums; }
.beleg-tabelle .r[b-xijox77y7o] { text-align: right; }

.beleg-summe[b-xijox77y7o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 18px;
    padding: 14px 0;
    border-top: 2px solid var(--ink-900);
    border-bottom: 2px solid var(--ink-900);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.beleg-summe b[b-xijox77y7o] { font-family: var(--font-display); font-size: 30px; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.beleg-unterschrift[b-xijox77y7o] { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 64px; font-size: 12px; color: var(--text-muted); }
.beleg-unterschrift div[b-xijox77y7o] { border-top: 1px solid var(--ink-900); padding-top: 6px; }
/* /Shared/BehaelterZaehlkarte.razor.rz.scp.css */
.tab[b-a34isi1twu] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    overflow-y: auto;
}

/* Kopf und Karte teilen Breite und Mitte — sonst klebt die Karte links und der
   Art-Umschalter wandert auf breiten Schirmen weit von ihr weg. */
.tab-head[b-a34isi1twu],
.tab-card[b-a34isi1twu],
.tab-anhang[b-a34isi1twu] {
    width: 100%;
    max-width: 1170px;
    align-self: center;
}

.tab-anhang[b-a34isi1twu] {
    flex: none;
}

.tab-head[b-a34isi1twu] {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
}

.tab-icon[b-a34isi1twu] {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    background: var(--brand-wash);
    color: var(--brand-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab-head-text[b-a34isi1twu] {
    flex: 1;
    min-width: 0;
}

.tab-title[b-a34isi1twu] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--text-strong);
}

.tab-sub[b-a34isi1twu] {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-muted);
}

.tab-kind-toggle[b-a34isi1twu] {
    flex: none;
    text-transform: none;
}

/* ── Zählraster: Scheine + Münzen, gedeckelt, damit Summe und Eingabe
      auch auf sehr breiten Schirmen nah beieinander bleiben ───────────── */
.tab-card[b-a34isi1twu] {
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px 20px 12px;
    container-type: inline-size;
}

.tab-blocks[b-a34isi1twu] {
    display: flex;
    flex-direction: column;
}

.tab-block[b-a34isi1twu] {
    flex: 1;
    min-width: 0;
}

.tab-block + .tab-block[b-a34isi1twu] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

/* Umbruch an der Kartenbreite, nicht am Viewport — Sidebar ein-/ausklappen zieht mit. */
@container (min-width: 860px) {
    .tab-blocks[b-a34isi1twu] {
        flex-direction: row;
        align-items: flex-start;
    }

    .tab-block[b-a34isi1twu] {
        max-width: 540px;
    }

    .tab-block + .tab-block[b-a34isi1twu] {
        margin: 0 0 0 22px;
        padding: 0 0 0 22px;
        border-top: none;
        border-left: 1px solid var(--border-soft);
    }

    .tab-block .tab-row[b-a34isi1twu] {
        padding: 4px 14px;
    }
}

.tab-block-head[b-a34isi1twu] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px 8px;
}

.tab-block-icon[b-a34isi1twu] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab-block--scheine .tab-block-icon[b-a34isi1twu] {
    background: var(--green-100);
    color: var(--green-600);
}

.tab-block--muenzen .tab-block-icon[b-a34isi1twu] {
    background: var(--sand-200);
    color: var(--sand-400);
}

.tab-block-title[b-a34isi1twu] {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--text-strong);
}

.tab-block-sum-label[b-a34isi1twu] {
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-subtle);
}

.tab-block-sum[b-a34isi1twu] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.tab-colhead[b-a34isi1twu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px 4px;
    flex: none;
}

.tab-h[b-a34isi1twu] {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.tab-h-wert[b-a34isi1twu]  { width: 92px; text-align: right; }
.tab-h-soll[b-a34isi1twu]  { width: 52px; text-align: center; }
.tab-h-count[b-a34isi1twu] { width: 104px; text-align: right; }
.tab-h-sum[b-a34isi1twu]   { flex: 1; text-align: right; }

.tab-row[b-a34isi1twu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 14px;
    border-radius: 12px;
}

.tab-row:hover[b-a34isi1twu] {
    background: var(--sand-050);
}

.tab-wert[b-a34isi1twu] {
    width: 92px;
    flex: none;
    text-align: right;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16.5px;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.tab-soll[b-a34isi1twu] {
    width: 52px;
    flex: none;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.tab-soll.is-short[b-a34isi1twu] {
    color: var(--warning-600);
}

.tab-count[b-a34isi1twu] {
    width: 104px;
    flex: none;
    display: flex;
    justify-content: flex-end;
}

.tab-input[b-a34isi1twu] {
    width: 96px;
}

.tab-sum[b-a34isi1twu] {
    flex: 1;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.tab-sum.is-strong[b-a34isi1twu] {
    color: var(--text-body);
    font-weight: 600;
}

/* ── Fußzeile: verankert die Karte unten ─────────────────────────────── */
.tab-foot[b-a34isi1twu] {
    flex: none;
    margin-top: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: baseline;
    gap: 22px;
}

.tab-foot-label[b-a34isi1twu] {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
}

.tab-foot b[b-a34isi1twu] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.tab-foot-spacer[b-a34isi1twu] {
    flex: 1;
}

.tab-foot b.tab-foot-skim[b-a34isi1twu] {
    color: var(--brand-strong);
    font-size: 20px;
}
/* /Shared/Blaetterleiste.razor.rz.scp.css */
/* Werte 1:1 vom Pager auf /finanzen/rechnungen (#1881) übernommen — dort ist der Entwurf
   abgenommen. Einzige Ergänzung ist die Touch-Größe am Ende. */
.bl[b-89x4bp9o8a] {
    flex: none;
    margin-top: auto;
    border-top: 1px solid var(--border-soft);
    padding: 7px 12px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-subtle);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-card);
}

.bl b[b-89x4bp9o8a] { color: var(--text-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-steuerung[b-89x4bp9o8a] { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.bl label[b-89x4bp9o8a] { display: inline-flex; align-items: center; gap: 6px; }

.bl select[b-89x4bp9o8a] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    background: var(--surface-card);
    font: inherit;
    color: var(--text-body);
    font-weight: 600;
    cursor: pointer;
}

.bl button[b-89x4bp9o8a] {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bl button:disabled[b-89x4bp9o8a] { opacity: .4; cursor: default; }
.bl button:focus-visible[b-89x4bp9o8a], .bl select:focus-visible[b-89x4bp9o8a] { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Die Leiste klebt am unteren Rand der Listenhülle — auch dort, wo eine lange Seite
   (Zeilen je Seite: 100) am Schreibtisch doch einmal in sich scrollt. */
@media (min-width: 960px) {
    .bl[b-89x4bp9o8a] { position: sticky; bottom: 0; z-index: 1; }
}

/* Touch (Terminal, Tablet, Telefon): 44 px je Bedienelement. Entschieden wird über die Art
   der Bedienung, nicht über die Bildschirmbreite — ein Touch-Laptop bekommt die großen
   Knöpfe, ein kleines Fenster mit Maus nicht. Reines CSS, keine Messung im Code (#1901). */
@media (pointer: coarse) {
    .bl[b-89x4bp9o8a] { padding: 6px 12px; }
    .bl button[b-89x4bp9o8a] { width: 44px; height: 44px; }
    .bl select[b-89x4bp9o8a] { min-height: 44px; padding: 0 12px; }
    /* LucideIcon ist eine eigene Komponente — ihr <svg> erreicht die Isolation nur per ::deep. */
    .bl[b-89x4bp9o8a]  svg { width: 20px; height: 20px; }
}
/* /Shared/Charts/LhAreaChart.razor.rz.scp.css */
.lh-area[b-yxqvncmh88] { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.lh-area-svg[b-yxqvncmh88] { flex: 1; min-height: 0; width: 100%; }
.lh-area-labels[b-yxqvncmh88] { display: flex; justify-content: space-between; margin-top: 6px; }
.lh-area-labels span[b-yxqvncmh88] { font-family: var(--font-ui); font-size: 11px; color: var(--text-subtle); }
/* /Shared/Charts/LhBarChart.razor.rz.scp.css */
.lh-bars[b-00v7dwcb3j] { display: flex; flex-direction: column; gap: 9px; }
.lh-bar-row[b-00v7dwcb3j] { display: grid; align-items: center; gap: 10px; }
.lh-bar-label[b-00v7dwcb3j] { font-family: var(--font-body); font-size: 12.5px; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-bar-track[b-00v7dwcb3j] { background: var(--sand-100); border-radius: 999px; height: 14px; overflow: hidden; }
.lh-bar-fill[b-00v7dwcb3j] { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-strong), var(--brand)); transition: width .4s var(--lh-ease, cubic-bezier(.22,.61,.36,1)); }
.lh-bar-value[b-00v7dwcb3j] { text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-strong); }
/* /Shared/Charts/LhVorjahrBalken.razor.rz.scp.css */
.vj[b-frn4yhv8jd] { display: block; width: 100%; height: auto; overflow: visible; }
.vj-treffer[b-frn4yhv8jd] { fill: transparent; }
.vj-spalte:hover .vj-treffer[b-frn4yhv8jd] { fill: var(--brand-wash); }
.vj-balken[b-frn4yhv8jd] { fill: var(--brand-strong); }
.vj-strich-halo[b-frn4yhv8jd] { stroke: var(--white); stroke-width: 4; }
.vj-strich[b-frn4yhv8jd] { stroke: var(--ink-400); stroke-width: 2; stroke-linecap: round; }
.vj-wert[b-frn4yhv8jd] { font-family: var(--font-ui); font-size: 12px; font-weight: 600; fill: var(--text-strong); }
/* /Shared/Charts/LhVorjahrLinie.razor.rz.scp.css */
.vj[b-ief20qe7k7] { display: block; width: 100%; height: auto; overflow: visible; }
.vj-treffer[b-ief20qe7k7] { fill: transparent; }
.vj-spalte:hover .vj-treffer[b-ief20qe7k7] { fill: var(--brand-wash); fill-opacity: .6; }
.vj-linie[b-ief20qe7k7] { fill: none; stroke: var(--brand-strong); stroke-width: 2; stroke-linejoin: round; }
.vj-linie-vorjahr[b-ief20qe7k7] { fill: none; stroke: var(--ink-400); stroke-width: 2; stroke-dasharray: 5 4; }
.vj-punkt[b-ief20qe7k7] { fill: var(--brand-strong); stroke: var(--white); stroke-width: 2; }
.vj-wert[b-ief20qe7k7] { font-family: var(--font-ui); font-size: 12px; font-weight: 600; fill: var(--text-strong); }
.vj-offen[b-ief20qe7k7] { font-family: var(--font-ui); font-size: 11px; fill: var(--text-muted); }
.vj-schraffur-grund[b-ief20qe7k7] { fill: var(--white); }
.vj-schraffur-strich[b-ief20qe7k7] { fill: var(--sand-200); }
/* /Shared/Charts/VorjahrAchsen.razor.rz.scp.css */
.vj-gitter[b-e5dvq05hvo] { stroke: var(--border-soft); }
.vj-grundlinie[b-e5dvq05hvo] { stroke: var(--ink-300); }
.vj-achse[b-e5dvq05hvo] { font-family: var(--font-ui); font-size: 11px; fill: var(--text-muted); }
/* /Shared/DealerStatusBadge.razor.rz.scp.css */
.status-badge[b-xn26ksrbko] {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.status-badge--aktiv[b-xn26ksrbko]       { background: #e6f4ea; color: #1e7e34; }
.status-badge--waechst[b-xn26ksrbko]     { background: #d9f2e3; color: #14691f; }
.status-badge--neukunde[b-xn26ksrbko]    { background: #e3f2fd; color: #1565c0; }
.status-badge--reaktiviert[b-xn26ksrbko] { background: #e0f7fa; color: #00838f; }
.status-badge--stagnierend[b-xn26ksrbko] { background: #fff8e1; color: #b26a00; }
.status-badge--gefaehrdet[b-xn26ksrbko]  { background: #fff3cd; color: #9c6500; }
.status-badge--abgewandert[b-xn26ksrbko] { background: #fdecea; color: #c62828; }
.status-badge--none[b-xn26ksrbko]        { background: #f0f0f0; color: #999; }
/* /Shared/DismissiblePopover.razor.rz.scp.css */
/* Nur der Klick-Faenger ist allgemein genug fuer diese Datei; Ausloeser und
   Menuekasten behalten ihr Aussehen im isolierten CSS des Aufrufers.
   `position: fixed` loest hier nur dann gegen den Viewport auf, wenn kein
   Vorfahre transform/filter/perspective/backdrop-filter/contain/will-change
   setzt — ein solcher Vorfahre wird sonst still zum Bezugsrahmen. */
.dp-scrim[b-t40ps89l81] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* Abgedunkelt wird nur dort, wo der Aufklapper unter 960 px zum Blatt wird
   (.bar-more): ein Blatt ueber der halben Seite braucht das Signal "der Rest
   ist gerade ausser Betrieb", ein kleiner Aufklapper nicht. Der Vorfahre bleibt
   unscoped, die Kennung haengt an .dp-scrim — deshalb steht die Regel hier und
   nicht beim Aufrufer, dessen Kennung .dp-scrim nie traefe. */
@media (max-width: 959.98px) {
    .bar-more .dp-scrim[b-t40ps89l81] { background: color-mix(in srgb, var(--text-strong) 30%, transparent); }
}
/* /Shared/FilterMenue.razor.rz.scp.css */
.fm[b-7puuf9onrt] { position: relative; }
.fm button[b-7puuf9onrt] { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-card); font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; color: var(--text-body); cursor: pointer; }
.fm button.an[b-7puuf9onrt] { background: var(--brand-wash); border-color: transparent; color: var(--brand-strong); }
.fm button:focus-visible[b-7puuf9onrt] { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.fm .dim[b-7puuf9onrt] { color: var(--text-subtle); font-weight: 500; }
.fm button.an .dim[b-7puuf9onrt] { color: inherit; }
.fm button[b-7puuf9onrt]  svg { color: var(--text-subtle); }
.fm[b-7puuf9onrt]  .am-menue { min-width: 180px; }
/* /Shared/KassenBahn.razor.rz.scp.css */
.kb[b-fmexfeb7zb] {
    width: 292px;
    flex: none;
    border-right: 1px solid var(--border-soft);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.kb-eyebrow[b-fmexfeb7zb] {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: 0 4px 4px;
}

.kb-list[b-fmexfeb7zb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    min-height: 0;
}

.kb-till[b-fmexfeb7zb] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 13px;
    border: 1px solid transparent;
    cursor: pointer;
}

.kb-till:hover:not(.is-active)[b-fmexfeb7zb] {
    background: var(--sand-050);
}

.kb-till.is-active[b-fmexfeb7zb] {
    background: var(--surface-card);
    border-color: var(--brand-soft);
    box-shadow: var(--shadow-md);
}

.kb-dot[b-fmexfeb7zb] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kb-dot--done[b-fmexfeb7zb]   { background: var(--success-100); color: var(--success-600); }
.kb-dot--active[b-fmexfeb7zb] { background: var(--brand); color: #fff; }
.kb-dot--todo[b-fmexfeb7zb]   { background: var(--sand-200); color: var(--text-subtle); }

.kb-till-text[b-fmexfeb7zb] {
    flex: 1;
    min-width: 0;
}

.kb-till-name[b-fmexfeb7zb] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-till-meta[b-fmexfeb7zb] {
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-subtle);
    margin-top: 1px;
}

.kb-flag[b-fmexfeb7zb] { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-family: var(--font-ui); font-weight: 700; font-size: 10.5px; border-radius: 999px; padding: 0 6px; background: var(--warning-100); color: var(--warning-600); vertical-align: middle; }

.kb-hinweis[b-fmexfeb7zb] { margin-left: 6px; font-family: var(--font-ui); font-style: italic; font-size: 11px; color: var(--text-subtle); vertical-align: middle; }

.kb-till-val[b-fmexfeb7zb] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.kb-till-val.is-active[b-fmexfeb7zb] {
    color: var(--brand-strong);
}

/* ── Info-Blöcke: bleiben unten, egal wie lang die Kassenliste wird ───── */
.kb-info[b-fmexfeb7zb] {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
}

.kb-box[b-fmexfeb7zb] {
    background: var(--sand-100);
    border-radius: 14px;
    padding: 12px 14px;
}

.kb-box--accent[b-fmexfeb7zb] {
    background: var(--brand-wash);
}

.kb-box .kb-eyebrow[b-fmexfeb7zb] {
    padding: 0 0 7px;
}

.kb-row[b-fmexfeb7zb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.kb-row:last-child[b-fmexfeb7zb] {
    margin-bottom: 0;
}

.kb-label[b-fmexfeb7zb] {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
}

.kb-val[b-fmexfeb7zb] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.kb-val.is-ok[b-fmexfeb7zb]    { color: var(--success-600); }
.kb-val.is-plus[b-fmexfeb7zb]  { color: var(--warning-600); }
.kb-val.is-minus[b-fmexfeb7zb] { color: var(--danger-600); }
/* /Shared/MainLayout.razor.rz.scp.css */
/* App shell — collapsible sidebar + seiteneigene Topbar (Story #313, Topbar #940).
   Die Topbar selbst liegt in PageHeader.razor.css: sie gehört der Seite, nicht dem Shell. */

.shell[b-1wsows2dwy] {
    display: flex;
    height: 100vh;
    /* 100dvh folgt der Adressleiste mobiler Browser; 100vh darüber ist der Fallback für
       alles, was dvh nicht kennt. Mit 100vh allein ragt der untere Rand auf dem Telefon
       unter die Leiste — und dort sitzt seit #1176 die Aktionsleiste. */
    height: 100dvh;
    overflow: hidden;
    background: var(--surface-page);
    font-family: var(--font-body);
}

.shell-sidebar[b-1wsows2dwy] {
    width: 264px;
    flex: none;
    background: #fff;
    border-right: 1px solid var(--border-soft);
    transition: width .24s var(--lh-ease);
    overflow: hidden;
}

.shell-sidebar.is-collapsed[b-1wsows2dwy] {
    width: 74px;
}

.shell-main[b-1wsows2dwy] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Auf dem Desktop eine Leiste; die beiden Sections (Titel links, Aktionen rechts)
   stehen darin nebeneinander und tragen ihr Aussehen selbst — fehlt der PageHeader,
   rendert keine von beiden und die Leiste hat keine Höhe. */
.shell-head[b-1wsows2dwy] {
    display: flex;
    align-items: stretch;
    flex: none;
}

.shell-topbar[b-1wsows2dwy] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.shell-actions[b-1wsows2dwy] { display: flex; flex: none; }

/* Der Burger existiert nur, solange die Seitenleiste weg ist. */
.shell-burger[b-1wsows2dwy] { display: none; }

/* ── Content (scrolls for normal pages; Task 7 inbox fills it) ─────────── */
.shell-content[b-1wsows2dwy] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

/* ── Telefon & kleines Tablet ────────────────────────────────────────────────
   Breakpoint 960 px = MudBlazors `md`, damit Shell und die vorhandenen
   MudItem-md-Angaben der Seiten dieselbe Kante benutzen.

   Umgeschaltet wird ausschliesslich hier in CSS: kein IsMobile im C#, kein
   JS-Interop, kein Circuit-Roundtrip beim Drehen des Geraets. */
@media (max-width: 959.98px) {
    /* Die Seitenleiste ist fix 264 px breit — auf 390 px blieben dem Inhalt 126 px.
       Unterhalb des Breakpoints navigiert stattdessen der Hub (Variante C, #1176). */
    .shell-sidebar[b-1wsows2dwy] { display: none; }

    /* Aufgeloest, damit Kopfzeile und Aktionsleiste direkte Kinder der Flex-Spalte
       werden und die order-Regeln greifen. */
    .shell-head[b-1wsows2dwy] { display: contents; }

    .shell-topbar[b-1wsows2dwy] {
        order: 1;
        flex: none;
        gap: 4px;
        padding: 4px 8px 0;
        background: var(--surface-page);
    }

    .shell-actions[b-1wsows2dwy] { order: 4; flex: none; }

    .shell-burger[b-1wsows2dwy] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: none;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--text-body);
        cursor: pointer;
    }

    .shell-burger:hover[b-1wsows2dwy] { background: var(--sand-100); }

    .shell-burger:focus-visible[b-1wsows2dwy] {
        outline: none;
        box-shadow: 0 0 0 3px var(--brand-soft);
    }

    .shell-content[b-1wsows2dwy] { order: 3; }
}

/* Nur das Aussehen. Die Sichtbarkeit steuert .lh-nur-rechner-hinweis in site.css —
   eine display-Regel hier waere spezifischer (Scope-Attribut) und wuerde sie aushebeln. */
.shell-rechner-hinweis[b-1wsows2dwy] {
    order: 2;
    flex: none;
    align-items: center;
    gap: 10px;
    margin: 0 16px 4px;
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--warning-100);
    color: var(--warning-600);
    font-family: var(--font-ui);
    font-size: 12.5px;
    line-height: 1.45;
}

@media print {
    /* Seitennavigation und Seitenkopf gehoeren nicht aufs Papier.
       .shell traegt im Normal-Layout height:100vh + overflow:hidden — ein Vorfahre mit fixer
       Viewport-Hoehe und overflow:hidden ist die klassische Ursache fuer "druckt nur Seite 1"
       in Chrome/Edge (Bestellungen mit mehreren Blaettern brachen deshalb nach Blatt 1 ab).
       Alle drei Ebenen im Druckpfad muessen deshalb auf natuerliche Hoehe zurueckgesetzt werden. */
    .shell[b-1wsows2dwy] { display: block; height: auto; overflow: visible; }
    .shell-sidebar[b-1wsows2dwy] { display: none; }
    /* .shell-main bleibt sonst display:flex — ein Flex-Container ist neben der fixen
       Hoehe oben die zweite bekannte Ursache fuer break-after:page-Abbrueche in
       Blink (der Umbruch sitzt auf .sheet, verschachtelt in .shell-main > .shell-content
       > .pl-page > .pl-blaetter, alle drei muessen deshalb auf block zurueck). */
    .shell-main[b-1wsows2dwy] { display: block; height: auto; overflow: visible; }
    .shell-head[b-1wsows2dwy] { display: none; }
}
/* /Shared/Nav/DrawerNav.razor.rz.scp.css */
/* Mobiler Navigations-Drawer. Oberhalb des Breakpoints existiert er nicht —
   dort navigiert die Seitenleiste. */

.drawer[b-u1u6af0u5j],
.drawer-backdrop[b-u1u6af0u5j] { display: none; }

@media (max-width: 959.98px) {
    .drawer-backdrop[b-u1u6af0u5j] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(46, 46, 46, .42);
    }

    .drawer[b-u1u6af0u5j] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 31;
        width: min(300px, 84vw);
        background: #fff;
        box-shadow: 0 18px 48px rgba(77, 77, 77, .22);
        /* visibility, nicht nur transform: ein bloss verschobenes Panel bliebe
           per Tab erreichbar. */
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .24s var(--lh-ease), visibility .24s var(--lh-ease);
    }

    .drawer.is-open[b-u1u6af0u5j] {
        visibility: visible;
        transform: translateX(0);
    }

    .drawer-head[b-u1u6af0u5j] {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: none;
        padding: 12px 10px 12px 18px;
        border-bottom: 1px solid var(--border-soft);
    }

    .drawer-wm[b-u1u6af0u5j] {
        flex: 1;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 19px;
        color: var(--text-strong);
    }

    .drawer-wm .thin[b-u1u6af0u5j] { font-weight: 300; color: var(--text-muted); }

    /* Kopf und Fuss stehen fest, gescrollt wird nur dazwischen — sonst rutscht der
       Benutzerfuss hinter fuenf aufgeklappte Bereiche. */
    .drawer-scroll[b-u1u6af0u5j] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 10px 10px 16px;
    }

    .drawer-group[b-u1u6af0u5j] {
        padding: 14px 10px 6px;
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }

    .drawer-arearow[b-u1u6af0u5j] { display: flex; align-items: center; gap: 2px; }

    .drawer-row[b-u1u6af0u5j] {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
        min-height: 48px;
        padding: 8px 12px;
        border-radius: 14px;
        font-family: var(--font-ui);
        font-weight: 600;
        font-size: 15px;
        color: var(--text-body);
        text-decoration: none;
    }

    .drawer-row:hover[b-u1u6af0u5j] { background: var(--sand-100); }

    .drawer-glyph[b-u1u6af0u5j],
    .drawer-tile[b-u1u6af0u5j] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .drawer-label[b-u1u6af0u5j] {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .drawer-chevron[b-u1u6af0u5j] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        transition: transform .2s var(--lh-ease);
    }

    .drawer-chevron.is-open[b-u1u6af0u5j] { transform: rotate(180deg); }

    .drawer-tools[b-u1u6af0u5j] {
        display: flex;
        flex-direction: column;
        margin: 2px 0 6px 22px;
        padding-left: 12px;
        border-left: 2px solid var(--border-soft);
    }

    .drawer-tool[b-u1u6af0u5j] {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 6px 10px;
        border-radius: 12px;
        font-family: var(--font-ui);
        font-size: 14px;
        color: var(--text-muted);
        text-decoration: none;
    }

    .drawer-tool:hover[b-u1u6af0u5j] { background: var(--sand-100); color: var(--text-body); }

    /* Schreibtisch-Werkzeuge stehen mit im Drawer — ausgeblendet hiesse mobil
       unerreichbar. Der Glyph sagt vorher, was der Hinweisstreifen nachher sagt. */
    .drawer-desk[b-u1u6af0u5j] { flex: none; color: var(--warning-600); display: inline-flex; }

    .drawer-badge[b-u1u6af0u5j] {
        flex: none;
        min-width: 20px;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--rose-100);
        color: var(--accent-strong);
        font-size: 11.5px;
        font-weight: 700;
        text-align: center;
    }

    .drawer-news[b-u1u6af0u5j] {
        flex: none;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        margin: 0 10px 6px;
        padding: 0 12px;
        border-radius: 12px;
        font-family: var(--font-ui);
        font-size: 14px;
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
    }

    .drawer-news.is-active[b-u1u6af0u5j] {
        background: var(--brand-wash);
        color: var(--brand-strong);
    }

    .drawer-news-ic[b-u1u6af0u5j] {
        position: relative;
        display: inline-flex;
    }

    .drawer-news-dot[b-u1u6af0u5j] {
        position: absolute;
        top: -2px;
        right: -3px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent-strong);
        box-shadow: 0 0 0 2px #fff;
    }

    .drawer-news-v[b-u1u6af0u5j] {
        margin-left: auto;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--text-subtle);
        font-variant-numeric: tabular-nums;
    }

    .drawer-foot[b-u1u6af0u5j] {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border-soft);
    }

    .drawer-avatar[b-u1u6af0u5j] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: var(--brand-wash);
        color: var(--brand-strong);
        font-family: var(--font-ui);
        font-weight: 700;
        font-size: 13px;
    }

    .drawer-userinfo[b-u1u6af0u5j] {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--font-ui);
        font-size: 14px;
        color: var(--text-body);
    }

    .drawer-iconbtn[b-u1u6af0u5j] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        text-decoration: none;
    }

    .drawer-iconbtn:hover[b-u1u6af0u5j] { background: var(--sand-100); }
}

@media print {
    .drawer[b-u1u6af0u5j],
    .drawer-backdrop[b-u1u6af0u5j] { display: none; }
}
/* /Shared/Nav/HubKachelEinzelseite.razor.rz.scp.css */
/* Kachel einer NavEinzelseite auf dem Hub.

   Diese Regeln standen bis #1496 in Pages/Index.razor.css. Sie mussten mitziehen,
   als das Markup hierher wanderte: CSS-Isolation gilt nur fuer Elemente der eigenen
   .razor-Datei, nie fuer Kind-Komponenten — im Elternteil verblieben sie wirkungslos.
   Geteilt mit HubKachelSammlung genutzte Klassen (.hub-icon-tile, .hub-badge)
   liegen deshalb global in site.css. */

.hub-card[b-brzyeum7u0] {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 11px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

.hub-card:hover[b-brzyeum7u0] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.hub-app-card-top[b-brzyeum7u0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Zeigt an, dass der Klick den Manager verlaesst (externe App auf eigenem App Service).
   Zurueckhaltend gehalten: ein Hinweis, keine zweite Auszeichnung neben dem Badge. */
.hub-card-extern[b-brzyeum7u0] {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}

/* Am Rechner sagt das Symbol nichts; es steht nur mobil (Farbe wie im Drawer). */
.hub-card-desk[b-brzyeum7u0] {
    display: none;
    align-items: center;
    color: var(--warning-600);
}

@media (max-width: 959.98px) {
    .hub-card-desk[b-brzyeum7u0] { display: inline-flex; }
}

.hub-card-name[b-brzyeum7u0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--text-strong);
    line-height: 1.2;
}

.hub-card-desc[b-brzyeum7u0] {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
    text-wrap: pretty;
}
/* /Shared/Nav/HubKachelSammlung.razor.rz.scp.css */
/* Kachel einer NavSammlung auf dem Hub.

   Diese Regeln standen bis #1496 in Pages/Index.razor.css. Sie mussten mitziehen,
   als das Markup hierher wanderte: CSS-Isolation gilt nur fuer Elemente der eigenen
   .razor-Datei, nie fuer Kind-Komponenten — im Elternteil verblieben sie wirkungslos.
   Geteilt mit HubKachelEinzelseite genutzte Klassen (.hub-icon-tile, .hub-badge)
   liegen deshalb global in site.css. */

.hub-area-card[b-m8etqqpo0x] {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-xs);
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

.hub-area-card:hover[b-m8etqqpo0x] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.hub-area-card-top[b-m8etqqpo0x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.hub-area-name[b-m8etqqpo0x] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17.5px;
    color: var(--text-strong);
    margin-top: 13px;
}

.hub-area-sub[b-m8etqqpo0x] {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
}
/* /Shared/Nav/SidebarNav.razor.rz.scp.css */
/* Sidebar — reproduces design_handoff prototype lines 31–89 (Story #313). */

.sb[b-a1rk2hi23l] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    overflow: hidden;
}

/* ── Brand + collapse ─────────────────────────────────────────────────── */
.sb-brand[b-a1rk2hi23l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 14px;
    min-height: 42px;
}

.sb.is-collapsed .sb-brand[b-a1rk2hi23l] {
    justify-content: center;
    padding: 4px 0 14px;
}

.sb-logo[b-a1rk2hi23l] {
    width: 30px;
    height: 30px;
    flex: none;
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sb-wordmark[b-a1rk2hi23l] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--brand);
    letter-spacing: -.01em;
    flex: 1;
    white-space: nowrap;
}

.sb-wordmark .thin[b-a1rk2hi23l] {
    font-weight: 500;
}

.sb-toggle[b-a1rk2hi23l] {
    width: 30px;
    height: 30px;
    flex: none;
    border: none;
    background: transparent;
    color: var(--text-subtle);
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sb-toggle:hover[b-a1rk2hi23l] {
    background: var(--sand-100);
    color: var(--text-body);
}

.sb-toggle--expand[b-a1rk2hi23l] {
    width: 48px;
    height: 34px;
    margin: 0 auto 8px;
}

/* ── Suche + Benachrichtigungen (aus der Topbar hierher gezogen, #940) ── */
.sb-search[b-a1rk2hi23l] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 2px 4px;
    padding: 8px 13px;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-subtle);
    font-family: var(--font-ui);
    font-size: 13px;
}

.sb.is-collapsed .sb-search[b-a1rk2hi23l] {
    justify-content: center;
    padding: 8px 0;
    margin: 0 0 4px;
}

.sb-search-text[b-a1rk2hi23l] {
    flex: 1;
    white-space: nowrap;
}

.sb-kbd[b-a1rk2hi23l] {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    padding: 1px 7px;
}

/* Platzhalter ohne Funktion: sichtbar reserviert, aber nicht anklickbar wirkend. */
.sb-soon[b-a1rk2hi23l] {
    cursor: default;
    opacity: .6;
}

.sb-row.sb-soon:hover[b-a1rk2hi23l] {
    background: transparent;
}

/* ── Nav scroll ───────────────────────────────────────────────────────── */
.sb-scroll[b-a1rk2hi23l] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -4px;
    padding: 0 4px;
}

.sb-row[b-a1rk2hi23l] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 14px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text-body);
    text-decoration: none;
    cursor: pointer;
    margin-top: 2px;
    white-space: nowrap;
}

.sb-row:hover:not(.is-active)[b-a1rk2hi23l] {
    background: var(--sand-100);
}

.sb-row.is-active[b-a1rk2hi23l] {
    background: var(--brand-wash);
    color: var(--brand-strong);
}

.sb.is-collapsed .sb-row[b-a1rk2hi23l] {
    justify-content: center;
    padding: 8px 0;
}

.sb-glyph[b-a1rk2hi23l] {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sb-tile[b-a1rk2hi23l] {
    position: relative;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sb-dot[b-a1rk2hi23l] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1.5px solid #fff;
}

.sb-dot--danger[b-a1rk2hi23l] {
    background: var(--danger-600);
}

.sb-dot--rose[b-a1rk2hi23l] {
    background: var(--accent-strong);
}

.sb-label[b-a1rk2hi23l] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.sb-badge[b-a1rk2hi23l] {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 8px;
}

.sb-badge--danger[b-a1rk2hi23l] {
    background: var(--danger-100);
    color: var(--danger-600);
}

.sb-badge--rose[b-a1rk2hi23l] {
    background: var(--rose-100);
    color: var(--accent-strong);
}

.sb-group[b-a1rk2hi23l] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: 16px 10px 6px;
    white-space: nowrap;
}

.sb-divider[b-a1rk2hi23l] {
    height: 1px;
    background: var(--border-soft);
    margin: 12px 8px;
}

/* ── Neuigkeiten ──────────────────────────────────────────────────────── */
.sb-news[b-a1rk2hi23l] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 12px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.sb-news:hover[b-a1rk2hi23l] {
    background: var(--sand-100);
    color: var(--text-body);
}

.sb-news.is-active[b-a1rk2hi23l] {
    background: var(--brand-wash);
    color: var(--brand-strong);
}

.sb.is-collapsed .sb-news[b-a1rk2hi23l] {
    justify-content: center;
}

.sb-news-ic[b-a1rk2hi23l] {
    position: relative;
    display: inline-flex;
}

.sb-news-dot[b-a1rk2hi23l] {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-strong);
    box-shadow: 0 0 0 2px #fff;
}

.sb-news-v[b-a1rk2hi23l] {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

/* ── User footer ──────────────────────────────────────────────────────── */
.sb-user[b-a1rk2hi23l] {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb.is-collapsed .sb-user[b-a1rk2hi23l] {
    justify-content: center;
}

.sb-avatar[b-a1rk2hi23l] {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
}

.sb-userinfo[b-a1rk2hi23l] {
    font-family: var(--font-ui);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.sb-userinfo b[b-a1rk2hi23l] {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-userrole[b-a1rk2hi23l] {
    font-size: 12px;
    color: var(--text-subtle);
}

.sb-logout[b-a1rk2hi23l] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: var(--text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.sb-logout:hover[b-a1rk2hi23l] {
    background: var(--sand-100);
    color: var(--text-body);
}
/* /Shared/NeuigkeitenDialog.razor.rz.scp.css */
/* Über Seitenleiste und Drawer (30/31), unter der Reconnect-Anzeige (2000). */
.nd-backdrop[b-t5mgimd6is] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(51, 51, 51, .36);
}

.nd[b-t5mgimd6is] {
    position: fixed;
    z-index: 1101;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 48px));
    max-height: min(760px, calc(100dvh - 64px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-card);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    outline: none;
}

.nd-kopf[b-t5mgimd6is] {
    position: relative;
    flex: none;
    padding: 24px 64px 16px 26px;
    border-bottom: 1px solid var(--border-soft);
}

.nd-eyebrow[b-t5mgimd6is] {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brand);
}

.nd-kopf h2[b-t5mgimd6is] {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.01em;
    color: var(--text-strong);
}

.nd-kopf p[b-t5mgimd6is] {
    margin: 4px 0 0;
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text-muted);
}

.nd-x[b-t5mgimd6is] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nd-x:hover[b-t5mgimd6is] {
    background: var(--sand-100);
    color: var(--text-body);
}

.nd-liste[b-t5mgimd6is] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 26px;
}

.nd-fuss[b-t5mgimd6is] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 26px 18px;
    border-top: 1px solid var(--border-soft);
    background: var(--sand-050);
}

.nd-alle[b-t5mgimd6is] {
    margin-right: auto;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--brand-strong);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nd-ok[b-t5mgimd6is] {
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    background: var(--brand);
    color: var(--text-on-brand);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--shadow-brand);
    cursor: pointer;
}

.nd-ok:hover[b-t5mgimd6is] {
    background: var(--brand-strong);
}

.nd-ok:focus-visible[b-t5mgimd6is],
.nd-x:focus-visible[b-t5mgimd6is],
.nd-alle:focus-visible[b-t5mgimd6is] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Telefon: Blatt von unten, Aktionen am Daumen. Kante wie die Shell (960 px). */
@media (max-width: 959.98px) {
    .nd[b-t5mgimd6is] {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        width: auto;
        max-height: calc(100dvh - 72px);
        border-radius: 24px 24px 0 0;
    }

    .nd-kopf[b-t5mgimd6is] {
        padding: 18px 56px 14px 20px;
    }

    .nd-x[b-t5mgimd6is] {
        top: 12px;
        right: 10px;
    }

    .nd-liste[b-t5mgimd6is] {
        padding: 0 20px;
    }

    .nd-fuss[b-t5mgimd6is] {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 12px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .nd-alle[b-t5mgimd6is] {
        margin-right: 0;
        justify-content: center;
        min-height: 44px;
    }

    .nd-ok[b-t5mgimd6is] {
        padding: 14px 20px;
        font-size: 15px;
    }
}
/* /Shared/NeuigkeitenEintrag.razor.rz.scp.css */
.ne[b-4m4itp02y2] {
    padding: 16px 0;
}

.ne + .ne[b-4m4itp02y2] {
    border-top: 1px dashed var(--border-soft);
}

.ne-meta[b-4m4itp02y2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ne-chip[b-4m4itp02y2] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11.5px;
    color: var(--brand-strong);
    background: var(--brand-wash);
    border-radius: 999px;
    padding: 2px 9px;
    font-variant-numeric: tabular-nums;
}

.ne--patch .ne-chip[b-4m4itp02y2] {
    background: var(--sand-100);
    color: var(--text-muted);
    font-weight: 600;
}

.ne-datum[b-4m4itp02y2] {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.ne-neu[b-4m4itp02y2] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-strong);
    background: var(--rose-100);
    border-radius: 999px;
    padding: 2px 8px;
}

h3.ne-titel[b-4m4itp02y2] {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--text-strong);
}

h4.ne-titel[b-4m4itp02y2] {
    margin: 6px 0 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text-strong);
}

.ne-text[b-4m4itp02y2] {
    margin: 5px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-body);
    text-wrap: pretty;
}

.ne--patch .ne-text[b-4m4itp02y2] {
    margin-top: 3px;
    font-size: 13.5px;
}

.ne-punkte[b-4m4itp02y2] {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ne-punkte li[b-4m4itp02y2] {
    display: flex;
    gap: 9px;
    font-family: var(--font-ui);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-body);
}

.ne-punkte li[b-4m4itp02y2]  svg {
    flex: none;
    margin-top: 1px;
    color: var(--success-600);
}
/* /Shared/PageHeader.razor.rz.scp.css */
/* Seiten-Topbar. Die Höhe steckt bewusst hier und nicht im Shell: Seiten ohne
   PageHeader sollen keine leere Leiste bekommen, sondern gar keine. Genau deshalb
   tragen .ph UND .ph-actions je das volle Leisten-Aussehen — auf dem Desktop stehen
   sie nebeneinander und ergeben nahtlos eine Leiste; fehlt der PageHeader, rendert
   keins von beiden und es bleibt nichts übrig. */
.ph[b-j1ac4lo6em] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 70px;
    flex: 1;
    min-width: 0;
    padding: 0 0 0 24px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(8px);
}

.ph-back[b-j1ac4lo6em] {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    border: 1px solid var(--border-default);
    background: #fff;
    color: var(--text-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ph-back:hover[b-j1ac4lo6em] {
    background: var(--sand-050);
    border-color: var(--border-strong);
}

.ph-titles[b-j1ac4lo6em] {
    margin-right: auto;
    min-width: 0;
}

.ph-title[b-j1ac4lo6em] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--text-strong);
    letter-spacing: -.01em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-context[b-j1ac4lo6em] {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sitzt am rechten Rand des Titel-Blocks, weil .ph-titles margin-right:auto trägt. */
.ph-title-actions[b-j1ac4lo6em] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding-right: 24px;
}

@media (max-width: 959.98px) {
    .ph-title-actions[b-j1ac4lo6em] { padding-right: 0; }
}

.ph-actions[b-j1ac4lo6em] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    height: 70px;
    padding: 0 24px 0 0;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(8px);
}

/* Manche Seiten geben <Actions> unbedingt weiter, auch wenn ihr Inhalt an einen noch
   ladenden Zustand gebunden ist — dann bleibt der Slot leer, obwohl er is-not-null ist. */
.ph-actions:empty[b-j1ac4lo6em] { display: none; }

/* ── Telefon ─────────────────────────────────────────────────────────────────
   Der Titel bleibt oben (er wird gelesen), die Aktionen wandern nach unten (sie
   werden getippt). Das Verschieben macht die order-Regel im MainLayout; hier steht
   nur, wie die beiden Blöcke an ihrem neuen Platz aussehen.

   Die Aktionsleiste ist bewusst NICHT position:fixed, sondern das letzte Element
   der Flex-Spalte auf 100dvh. Nur so schrumpft das Layout mit der Bildschirm-
   tastatur und die Leiste steht ÜBER ihr statt dahinter. */
@media (max-width: 959.98px) {
    .ph[b-j1ac4lo6em] {
        /* Sitzt jetzt als Zeilen-Kind neben dem Burger, nicht mehr als eigenes
           Spaltenkind — deshalb flex:1 statt flex:none. */
        flex: 1;
        min-width: 0;
        height: auto;
        min-height: 48px;
        padding: 4px 8px 8px 4px;
        border-bottom: none;
        background: transparent;
        backdrop-filter: none;
    }

    /* Unterhalb des Breakpoints führt der Drawer nach oben, in den Bereich der
       aktuellen Seite. Ein zweiter Pfeil daneben wäre Redundanz. */
    .ph-back[b-j1ac4lo6em] { display: none; }

    .ph-title[b-j1ac4lo6em] { white-space: normal; }
    .ph-context[b-j1ac4lo6em] { white-space: normal; font-size: 12px; }

    .ph-actions[b-j1ac4lo6em] {
        /* Sitzt in .shell-actions, einer Flex-ZEILE. Mit dem flex:none von oben waere sie
           so breit wie ihr Inhalt: das overflow-x griffe nie, und was nicht passt, schnitte
           das overflow:hidden der Shell rechts ab (Knoepfe auf /backstube/backplan weg). */
        flex: 1;
        min-width: 0;
        height: auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
        border-bottom: none;
        border-top: 1px solid var(--border-soft);
        box-shadow: 0 -6px 20px rgba(77, 77, 77, .07);
        background: #fff;
        backdrop-filter: none;
    }

    /* Trefferflächen: unter 44 px wird es auf dem Telefon zum Zielen statt Tippen. */
    .ph-actions[b-j1ac4lo6em]  .mud-button-root,
    .ph-actions[b-j1ac4lo6em]  button {
        min-height: 44px;
    }

    /* Einzeilig und nicht gestaucht: was nicht passt, scrollt die Leiste waagerecht (overflow-x oben),
       statt die Knopftexte umzubrechen und den letzten abzuschneiden (#2535). */
    .ph-actions[b-j1ac4lo6em]  .mud-button-root {
        flex: none;
        white-space: nowrap;
    }
}

/* Ein aus der Leiste herausklappendes Panel (Info-Icon) muss über dem Seiteninhalt
   liegen. backdrop-filter macht .ph ohnehin zum Stapelkontext; ohne eigene Ebene malt
   der Inhalt darunter stellenweise durch das Panel (am 05.10.2026 im Bild gesehen). */
.ph[b-j1ac4lo6em] { position: relative; z-index: 3; }

/* Neben dem Titel steht das Info-Icon am rechten Ende der Leiste: nach rechts geöffnet
   liefe das Panel aus dem Fenster. Hier öffnet es deshalb nach links. */
@media (min-width: 960px) {
    .ph-title-actions[b-j1ac4lo6em]  .info-panel-body { left: auto; right: 0; }
}
/* /Shared/StatsInfoPanel.razor.rz.scp.css */
.info-panel[b-hcxf3meaq3] { position: relative; display: inline-flex; align-items: center; }

.info-panel-toggle[b-hcxf3meaq3] {
    border: none; background: transparent; cursor: pointer; padding: 2px;
    color: var(--mud-palette-text-secondary, #777); display: inline-flex; border-radius: 50%;
}
.info-panel-toggle:hover[b-hcxf3meaq3] { color: var(--mud-palette-primary, #333); background: rgba(0, 0, 0, .05); }

.info-panel-body[b-hcxf3meaq3] {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    width: min(440px, 80vw); padding: 12px 14px;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    font-size: .8rem; line-height: 1.45;
}
.info-panel-title[b-hcxf3meaq3] { font-weight: 600; margin-bottom: 6px; }

/* Unter der Shell-Kante steht das Icon neben dem Titel weit rechts: am Icon verankert
   hinge das Panel aus dem Bild. Dort deshalb über die ganze Breite unter der Kopfzeile. */
@media (max-width: 959.98px) {
    .info-panel-body[b-hcxf3meaq3] { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; font-size: .875rem; }
}

/* Mit dem Finger bedient: 16 px Icon + 2 × 14 px = 44 px Trefferfläche. */
@media (pointer: coarse) {
    .info-panel-toggle[b-hcxf3meaq3] { padding: 14px; }
}
/* /Shared/TrinkgeldAuszahlungSchritt.razor.rz.scp.css */
.tgs[b-6lj33n36dy] { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 13px; font-family: var(--font-ui); }
.tgs-nr[b-6lj33n36dy] { flex: none; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--sand-200); color: var(--text-body); font-weight: 700; font-size: var(--text-sm); }
.tgs-body[b-6lj33n36dy] { flex: 1; min-width: 0; }
.tgs-body b[b-6lj33n36dy] { display: block; font-size: var(--text-sm); color: var(--text-strong); font-weight: 600; }
.tgs-text[b-6lj33n36dy] { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.tgs-akt[b-6lj33n36dy] { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.tgs--erledigt[b-6lj33n36dy] { background: var(--sand-050); }
.tgs--erledigt .tgs-nr[b-6lj33n36dy] { background: var(--success-600); color: var(--text-on-brand); }
.tgs--erledigt b[b-6lj33n36dy] { color: var(--text-muted); }
.tgs--jetzt[b-6lj33n36dy] { border: 1.5px solid var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.tgs--jetzt .tgs-nr[b-6lj33n36dy] { background: var(--brand); color: var(--text-on-brand); }
.tgs--spaeter[b-6lj33n36dy] { opacity: .6; }
/* /Shared/TrinkgeldAuszahlungSpalte.razor.rz.scp.css */
.tas[b-cht776uted] { width: 316px; flex: none; border-left: 1px solid var(--border-soft); background: var(--surface-card); padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.tas-eyebrow[b-cht776uted] { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 6px; }
.tas-fluss[b-cht776uted] { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); padding: 6px 0; }
.tas-fluss + .tas-fluss[b-cht776uted] { border-top: 1px dashed var(--border-soft); }
.tas-w[b-cht776uted] { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.tas-w[b-cht776uted]  svg { color: var(--text-subtle); flex: none; }
.tas-w small[b-cht776uted] { flex-basis: 100%; font-size: var(--text-xs); color: var(--text-subtle); padding-left: 23px; }
.tas-fluss b[b-cht776uted] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tas-schritte[b-cht776uted] { display: flex; flex-direction: column; gap: 10px; }
.tas-btn[b-cht776uted] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); border-radius: 999px; padding: 11px 16px; border: 1px solid var(--border-soft); background: var(--surface-card); color: var(--text-body); cursor: pointer; white-space: nowrap; }
.tas-btn:disabled[b-cht776uted] { opacity: .5; cursor: default; }
.tas-btn--primary[b-cht776uted] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.tas-btn--primary:hover:not(:disabled)[b-cht776uted] { background: var(--brand-strong); border-color: var(--brand-strong); }
.tas-link[b-cht776uted] { align-self: flex-start; border: 0; background: none; padding: 0; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--brand-strong); cursor: pointer; text-decoration: underline; }
.tas-link:disabled[b-cht776uted] { opacity: .5; cursor: default; }
.tas-datei[b-cht776uted] { display: flex; gap: 8px; align-items: center; background: var(--sand-100); border-radius: 10px; padding: 7px 10px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-body); }
.tas-datei[b-cht776uted]  svg { color: var(--brand-strong); flex: none; }
.tas-datei-name[b-cht776uted] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tas-datei .tas-link[b-cht776uted] { align-self: center; }
.tas-warn[b-cht776uted] { display: block; font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; color: var(--text-body); background: var(--warning-100); border-radius: 10px; padding: 7px 10px; }
.tas-hinweis[b-cht776uted] { display: flex; gap: 9px; align-items: flex-start; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.tas-hinweis[b-cht776uted]  svg { flex: none; margin-top: 2px; }

/* Mobil löst sich die Spalte auf: nur der Schritt, der dran ist, klebt als Dock unten am
   Daumen. Den Geldfluss gibt es am Telefon nicht — das ist Schreibtisch-Arbeit (Florian, #2035).
   Erledigte Schritte bleiben nur stehen, wenn keiner mehr dran ist (abgeschlossen). */
@media (max-width: 959.98px) {
    .tas[b-cht776uted] { display: contents; }
    .tas > *[b-cht776uted] { order: 7; }
    .tas-geldfluss[b-cht776uted] { display: none; }
    .tas-schritte[b-cht776uted] { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 10px 16px 14px; gap: 8px; background: var(--surface-card); border-top: 1px solid var(--border-soft); box-shadow: 0 -6px 18px rgba(77, 77, 77, .08); }
    .tas-schritte > .tas-eyebrow[b-cht776uted] { display: none; }
    .tas-schritte[b-cht776uted]  .tgs--spaeter { display: none; }
    .tas-schritte:has(.tgs--jetzt)[b-cht776uted]  .tgs--erledigt { display: none; }
    .tas-schritte[b-cht776uted]  .tgs--erledigt:not(:last-child) { display: none; }
    .tas-btn[b-cht776uted] { min-height: 48px; }
    .tas-link[b-cht776uted] { min-height: 44px; }
}
/* /Shared/TrinkgeldFruehereMonate.razor.rz.scp.css */
.tfm[b-meuqqafg4q] { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.tfm-eyebrow[b-meuqqafg4q] { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 6px; }
.tfm-leer[b-meuqqafg4q] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }
.tfm-row[b-meuqqafg4q] { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 10px; padding: 7px 6px; font-family: var(--font-ui); cursor: pointer; text-align: left; }
.tfm-row:hover[b-meuqqafg4q] { background: var(--surface-sunken); }
.tfm-monat[b-meuqqafg4q] { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfm-betrag[b-meuqqafg4q] { font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tfm-stand[b-meuqqafg4q] { font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.tfm-row[b-meuqqafg4q]  svg { color: var(--success-600); flex: none; }

@media (max-width: 959.98px) {
    .tfm-row[b-meuqqafg4q] { min-height: 44px; }
}
/* /Shared/TrinkgeldKennzahlLeiste.razor.rz.scp.css */
.tkl[b-ygqpj7kxxl] { container-type: inline-size; display: flex; gap: 12px; flex: none; }
.tkl-kpi[b-ygqpj7kxxl] { flex: 1; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px 16px; }
.tkl-l[b-ygqpj7kxxl] { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.tkl-v[b-ygqpj7kxxl] { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); color: var(--text-strong); font-variant-numeric: tabular-nums; margin-top: 2px; }
.tkl-v--brand[b-ygqpj7kxxl] { color: var(--brand-strong); }
.tkl-v--neg[b-ygqpj7kxxl] { color: var(--warning-600); }
.tkl-h[b-ygqpj7kxxl] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); margin-top: 1px; }
.tkl-v[b-ygqpj7kxxl] { white-space: nowrap; }

/* Schmale Mitte: sonst bricht „100,00 €“ vor dem Euro-Zeichen um. */
@container (max-width: 560px) {
    .tkl-kpi[b-ygqpj7kxxl] { padding: 10px 12px; }
    .tkl-v[b-ygqpj7kxxl] { font-size: var(--text-xl); }
}

/* Mobil bleibt nur die Summe als Zeile über der Liste: „Verteilt“ links, Betrag rechts.
   Trinkgeld über die Kasse, Korrektur und Kasse stehen am Rechner. */
@media (max-width: 959.98px) {
    .tkl-kpi[b-ygqpj7kxxl] { display: none; }
    .tkl-kpi--haupt[b-ygqpj7kxxl] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; background: none; border: 0; padding: 0 4px; }
    .tkl-kpi--haupt .tkl-l[b-ygqpj7kxxl] { grid-column: 1; }
    .tkl-kpi--haupt .tkl-h[b-ygqpj7kxxl] { grid-column: 1; }
    .tkl-kpi--haupt .tkl-v[b-ygqpj7kxxl] { grid-column: 2; grid-row: 1 / span 2; font-size: var(--text-xl); margin-top: 0; }
}
/* /Shared/TrinkgeldMonatWahl.razor.rz.scp.css */
.tmw[b-jy7mcl6sv0] { display: inline-flex; align-items: center; gap: 4px; background: var(--sand-100); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px; }
.tmw-btn[b-jy7mcl6sv0] { width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--text-body); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tmw-btn:disabled[b-jy7mcl6sv0] { color: var(--ink-300); cursor: default; }
.tmw-name[b-jy7mcl6sv0] { min-width: 140px; text-align: center; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); white-space: nowrap; }

/* Am Telefon: volle Breite, ohne Pillen-Hintergrund, mit 44-px-Trefferflächen. */
.tmw--zeile[b-jy7mcl6sv0] { display: flex; justify-content: space-between; background: none; border: 0; padding: 0; }
.tmw--zeile .tmw-btn[b-jy7mcl6sv0] { width: 44px; height: 44px; color: var(--text-muted); }
.tmw--zeile .tmw-name[b-jy7mcl6sv0] { min-width: 0; font-size: var(--text-base); }
/* /Shared/TrinkgeldPruefblock.razor.rz.scp.css */
.tpb[b-jhpgjnexnq] { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 14px 16px 12px; font-family: var(--font-ui); }
.tpb--warn[b-jhpgjnexnq] { border-color: var(--warning-100); box-shadow: inset 4px 0 0 var(--warning-600); }

.tpb-head[b-jhpgjnexnq] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tpb-head-text[b-jhpgjnexnq] { min-width: 0; }
.tpb-ic[b-jhpgjnexnq] { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.tpb-ic--warn[b-jhpgjnexnq] { background: var(--warning-100); color: var(--warning-600); }
.tpb-ic--ok[b-jhpgjnexnq] { background: var(--success-100); color: var(--success-600); }
.tpb-ic--neutral[b-jhpgjnexnq] { background: var(--sand-200); color: var(--text-muted); }
.tpb-ic--err[b-jhpgjnexnq] { background: var(--danger-100); color: var(--danger-600); }
.tpb-t[b-jhpgjnexnq] { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); line-height: 1.2; }
.tpb-s[b-jhpgjnexnq] { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.tpb-stand[b-jhpgjnexnq] { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-subtle); white-space: nowrap; }
.tpb-btn[b-jhpgjnexnq] { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; border-radius: 999px; padding: 6px 12px; border: 1px solid var(--border-soft); background: var(--surface-card); color: var(--text-body); cursor: pointer; }
.tpb-btn:disabled[b-jhpgjnexnq] { opacity: .5; cursor: default; }

.tpb-meldung[b-jhpgjnexnq] { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }

.tpb-rows[b-jhpgjnexnq] { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tpb-hit[b-jhpgjnexnq] { border-radius: 12px; background: var(--sand-050); padding: 8px 12px; }
.tpb-hit-main[b-jhpgjnexnq] { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; row-gap: 4px; font-size: 13px; color: var(--text-body); font-variant-numeric: tabular-nums; }
.tpb-when[b-jhpgjnexnq] { width: 72px; flex: none; color: var(--text-muted); }
.tpb-beleg[b-jhpgjnexnq] { width: 104px; flex: none; font-weight: 600; color: var(--text-strong); }
.tpb-zart[b-jhpgjnexnq] { width: 78px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; font-size: 11px; border-radius: 999px; padding: 2px 8px; }
.tpb-zart--bar[b-jhpgjnexnq] { background: var(--warning-100); color: var(--warning-600); }
.tpb-zart--unbar[b-jhpgjnexnq] { background: var(--brand-wash); color: var(--brand-strong); }
.tpb-zart--mix[b-jhpgjnexnq] { background: var(--sand-200); color: var(--text-body); }
.tpb-ware[b-jhpgjnexnq] { width: 104px; flex: none; text-align: right; color: var(--text-muted); }
.tpb-tg[b-jhpgjnexnq] { width: 96px; flex: none; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-strong); }
.tpb-why[b-jhpgjnexnq] { flex: 1; text-align: right; font-weight: 600; color: var(--warning-600); }
.tpb-hint[b-jhpgjnexnq] { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; padding-left: 86px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.tpb-hint[b-jhpgjnexnq]  svg { color: var(--warning-600); }

.tpb-fix[b-jhpgjnexnq] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; padding-left: 86px; font-size: 12px; color: var(--text-muted); }
.tpb-fix-in[b-jhpgjnexnq] { width: 96px; height: 30px; border-radius: 9px; border: 1.5px solid var(--border-soft); background: var(--surface-card); padding: 0 10px; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-strong); }
.tpb-fix-in:focus[b-jhpgjnexnq] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.tpb-btn--primary[b-jhpgjnexnq] { background: var(--brand); border-color: var(--brand); color: #fff; }
.tpb-fix-err[b-jhpgjnexnq] { color: var(--danger-600); }
.tpb-done[b-jhpgjnexnq] { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--success-600); }
.tpb-link[b-jhpgjnexnq] { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.tpb-tg--alt[b-jhpgjnexnq] { text-decoration: line-through; color: var(--text-subtle); }
.tpb-neu[b-jhpgjnexnq] { flex: 1; text-align: right; font-weight: 600; color: var(--success-600); }
/* /Shared/TrinkgeldRechnerLeiste.razor.rz.scp.css */
.trl[b-bxtq8hynoa] { width: 256px; flex: none; border-right: 1px solid var(--border-soft); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.trl-box[b-bxtq8hynoa] { border-radius: 14px; padding: 13px 14px; }
.trl-box--brand[b-bxtq8hynoa] { background: var(--brand-wash); }
.trl-box--plain[b-bxtq8hynoa] { background: var(--surface-card); border: 1px solid var(--border-soft); }
.trl-eyebrow[b-bxtq8hynoa] { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-subtle); }
.trl-eyebrow--warn[b-bxtq8hynoa] { color: var(--warning-600); margin-bottom: 8px; }
.trl-field[b-bxtq8hynoa] { margin-top: 7px; height: 44px; border-radius: 12px; border: 1.5px solid var(--border-soft); background: var(--surface-card); display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.trl-field:focus-within[b-bxtq8hynoa] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
.trl-field input[b-bxtq8hynoa] { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.trl-field--zu[b-bxtq8hynoa] { background: var(--sand-050); }
.trl-field--zu[b-bxtq8hynoa]  svg { color: var(--text-subtle); flex: none; }
.trl-field input:disabled[b-bxtq8hynoa] { color: var(--text-muted); }
.trl-einheit[b-bxtq8hynoa] { font-family: var(--font-display); font-size: var(--text-base); color: var(--text-subtle); }
.trl-hint[b-bxtq8hynoa] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); margin-top: 6px; line-height: 1.4; }
.trl-src[b-bxtq8hynoa] { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-family: var(--font-ui); }
.trl-src + .trl-src[b-bxtq8hynoa] { border-top: 1px solid var(--border-soft); }
.trl-src[b-bxtq8hynoa]  svg { color: var(--success-600); margin-top: 1px; flex: none; }
.trl-src b[b-bxtq8hynoa] { display: block; font-size: var(--text-sm); color: var(--text-strong); font-weight: 600; }
.trl-src span[b-bxtq8hynoa] { display: block; font-size: var(--text-xs); color: var(--text-subtle); margin-top: 1px; }
.trl-warn[b-bxtq8hynoa] { background: var(--warning-100); border-radius: 14px; padding: 12px 14px; font-family: var(--font-ui); }
.trl-warnrow[b-bxtq8hynoa] { display: flex; gap: 9px; align-items: flex-start; font-size: var(--text-sm); color: var(--text-body); line-height: 1.4; }
.trl-warnrow + .trl-warnrow[b-bxtq8hynoa] { margin-top: 8px; }
.trl-warnrow[b-bxtq8hynoa]  svg { color: var(--warning-600); margin-top: 1px; flex: none; }
.trl-fuss[b-bxtq8hynoa] { margin-top: auto; font-family: var(--font-ui); font-size: var(--text-sm); }

/* Mobil zerfällt die Leiste in die Spalte der Seite: Kasse und Hinweise bleiben, Quellen und
   frühere Monate sind Schreibtisch-Arbeit. Die Seite vergibt 2 (Summe), die Tabelle 4. */
@media (max-width: 959.98px) {
    .trl[b-bxtq8hynoa] { display: contents; }
    .trl-box--brand[b-bxtq8hynoa] { order: 1; }
    .trl-warn[b-bxtq8hynoa] { order: 3; }
    .trl-fuss[b-bxtq8hynoa], .trl-box--plain[b-bxtq8hynoa] { display: none; }
    .trl-field[b-bxtq8hynoa] { height: 52px; }
    .trl-field input[b-bxtq8hynoa] { font-size: var(--text-2xl); }
}
/* /Shared/TrinkgeldVerteilungTabelle.razor.rz.scp.css */
.tvt[b-a3cuxr27xm] { container-type: inline-size; flex: 1; min-height: 0; overflow: auto; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 6px 8px; display: flex; flex-direction: column; }
.tvt-tr[b-a3cuxr27xm] { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 10px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); min-height: 38px; }
.tvt-tr:nth-child(odd):not(.tvt-th)[b-a3cuxr27xm] { background: var(--sand-050); }
.tvt-th[b-a3cuxr27xm] { font-size: var(--text-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-subtle); padding-top: 10px; padding-bottom: 8px; min-height: 0; }
.tvt-name[b-a3cuxr27xm] { flex: 1 1 180px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvt-name b[b-a3cuxr27xm] { font-weight: 600; color: var(--text-strong); }
.tvt-emp[b-a3cuxr27xm] { font-size: var(--text-xs); color: var(--text-subtle); margin-left: 6px; }
.tvt-pnr[b-a3cuxr27xm] { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.tvt-emp--w[b-a3cuxr27xm] { color: var(--warning-600); font-weight: 600; }
.tvt-h[b-a3cuxr27xm] { width: 56px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.tvt-eh[b-a3cuxr27xm] { width: 52px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.tvt-tg[b-a3cuxr27xm] { width: 96px; flex: none; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tvt-th .tvt-tg[b-a3cuxr27xm] { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-subtle); }
.tvt-weg[b-a3cuxr27xm] { flex: 1.4 1 220px; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.tvt-weg[b-a3cuxr27xm]  svg { flex: none; color: var(--brand); }
.tvt-weg-text[b-a3cuxr27xm] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tvt-weg--bar[b-a3cuxr27xm] { color: var(--warning-600); font-weight: 600; }
.tvt-weg--bar[b-a3cuxr27xm]  svg { color: var(--warning-600); }
.tvt-th .tvt-weg[b-a3cuxr27xm] { color: var(--text-subtle); font-weight: 600; }
.tvt-st[b-a3cuxr27xm] { width: 118px; flex: none; display: flex; justify-content: flex-end; align-items: center; }
.tvt-toggle[b-a3cuxr27xm] { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--text-subtle); border: 1px solid var(--border-default); border-radius: 999px; padding: 3px 10px; background: var(--surface-card); cursor: pointer; }
.tvt-toggle--an[b-a3cuxr27xm] { background: var(--warning-100); border-color: var(--warning-600); color: var(--warning-600); }
.tvt-toggle:disabled[b-a3cuxr27xm] { opacity: .5; cursor: default; }
.tvt-haken[b-a3cuxr27xm] { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.tvt-haken:disabled[b-a3cuxr27xm] { cursor: default; }
.tvt-status[b-a3cuxr27xm] { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.tvt-status--ok[b-a3cuxr27xm] { color: var(--success-600); }
.tvt-fuss[b-a3cuxr27xm] { display: flex; gap: 18px; padding: 10px 12px 6px; margin-top: auto; border-top: 1px solid var(--border-soft); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.tvt-fuss b[b-a3cuxr27xm] { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; margin-left: 4px; }
.tvt-leer[b-a3cuxr27xm] { padding: 24px 12px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

/* Schmale Mitte (1280 px mit Seitenleiste): in einer Zeile blieb für Name und Weg nichts übrig.
   Dann rutscht der Weg samt Schalter in eine zweite Zeile, statt die Spalten auf null zu drücken. */
@container (max-width: 760px) {
    .tvt-tr[b-a3cuxr27xm] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "name h eh tg" "weg weg weg st"; row-gap: 2px; }
    .tvt-th .tvt-weg[b-a3cuxr27xm], .tvt-th .tvt-st[b-a3cuxr27xm] { display: none; }
    .tvt-th[b-a3cuxr27xm] { grid-template-areas: "name h eh tg"; }
    .tvt-name[b-a3cuxr27xm] { grid-area: name; }
    .tvt-h[b-a3cuxr27xm] { grid-area: h; }
    .tvt-eh[b-a3cuxr27xm] { grid-area: eh; }
    .tvt-tg[b-a3cuxr27xm] { grid-area: tg; }
    .tvt-weg[b-a3cuxr27xm] { grid-area: weg; font-size: var(--text-xs); }
    .tvt-st[b-a3cuxr27xm] { grid-area: st; }
}

@media (pointer: coarse) {
    .tvt-haken[b-a3cuxr27xm] { width: 26px; height: 26px; }
    .tvt-toggle[b-a3cuxr27xm] { min-height: 32px; padding: 4px 12px; }
}

/* Mobil eine schlanke Liste: je Person Name, Betrag und rechts Schalter bzw. Status. Stunden,
   Weg und Summenzeile stehen am Rechner; wer bar bekommt, zeigt das Geldbeutel-Symbol. */
@media (max-width: 959.98px) {
    .tvt[b-a3cuxr27xm] { order: 4; flex: none; overflow: visible; padding: 2px 14px; border-radius: 16px; }
    .tvt-tr[b-a3cuxr27xm] { display: flex; gap: 10px; padding: 0; min-height: 44px; border-radius: 0; border-bottom: 1px solid var(--border-soft); }
    .tvt-tr:last-of-type[b-a3cuxr27xm] { border-bottom: 0; }
    .tvt-tr:nth-child(odd):not(.tvt-th)[b-a3cuxr27xm] { background: none; }
    .tvt-th[b-a3cuxr27xm], .tvt-pnr[b-a3cuxr27xm], .tvt-emp[b-a3cuxr27xm], .tvt-h[b-a3cuxr27xm], .tvt-eh[b-a3cuxr27xm], .tvt-fuss[b-a3cuxr27xm], .tvt-weg-text[b-a3cuxr27xm] { display: none; }
    .tvt-name[b-a3cuxr27xm] { flex: 1 1 auto; font-size: var(--text-sm); }
    .tvt-tg[b-a3cuxr27xm] { width: auto; font-size: var(--text-base); }
    .tvt-weg[b-a3cuxr27xm] { flex: none; width: auto; }
    .tvt-weg:not(.tvt-weg--bar)[b-a3cuxr27xm] { display: none; }
    .tvt-st[b-a3cuxr27xm] { width: auto; min-width: 44px; }
    .tvt-status-text[b-a3cuxr27xm] { display: none; }
    .tvt-leer[b-a3cuxr27xm] { text-align: center; }
}
/* /Sortiment/Components/StueckelungEintragen.razor.rz.scp.css */
/* Eigene Regeln statt der Klassen der Seite: CSS-Isolation reicht nicht in Kind-Komponenten. */

.formular[b-0doig3j59x] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    border-radius: var(--radius-m, 8px);
    background: var(--surface-2, #f2f0ea);
}

.feld-reihe[b-0doig3j59x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.feld[b-0doig3j59x] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.feld-ziel[b-0doig3j59x] {
    flex: 1 1 16rem;
    min-width: 0;
}

.feld-zahl[b-0doig3j59x] {
    flex: 0 0 8rem;
}

.feld label[b-0doig3j59x] {
    font-weight: 600;
    font-size: var(--text-sm);
}

.feld select[b-0doig3j59x],
.feld input[b-0doig3j59x] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-s, 6px);
    background: var(--surface-0, #fff);
    font: inherit;
    font-size: var(--text-sm);
    max-width: 100%;
}

.hilfe[b-0doig3j59x],
.vorschau[b-0doig3j59x],
.gesperrt[b-0doig3j59x] {
    margin: 0;
    font-size: var(--text-sm);
}

.hilfe[b-0doig3j59x],
.gesperrt[b-0doig3j59x] {
    color: var(--text-muted);
}

.hinweis-fehler[b-0doig3j59x] {
    border: 1px solid var(--tint-rose-fg, #9c4a4a);
    border-radius: var(--radius-m, 8px);
    background: var(--tint-rose-bg, #fbeeee);
    padding: 0.6rem 0.8rem;
    font-size: var(--text-sm);
}

.aktionen[b-0doig3j59x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.knopf[b-0doig3j59x] {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-s, 6px);
    background: var(--surface-0, #fff);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.schreiben[b-0doig3j59x] {
    background: var(--brand, #3A7D8C);
    border-color: var(--brand, #3A7D8C);
    color: #fff;
    font-weight: 600;
}

.knopf:disabled[b-0doig3j59x] {
    opacity: 0.55;
    cursor: default;
}

.knopf:focus-visible[b-0doig3j59x],
.feld select:focus-visible[b-0doig3j59x],
.feld input:focus-visible[b-0doig3j59x] {
    outline: 2px solid var(--brand, #3A7D8C);
    outline-offset: 1px;
}

/* Fingerbedienung entscheidet der Zeigegeraet-Typ, nicht die Fensterbreite. */
@media (pointer: coarse) {
    .knopf[b-0doig3j59x],
    .feld select[b-0doig3j59x],
    .feld input[b-0doig3j59x] { min-height: 44px; }
}
/* /Sortiment/Pages/KuchenAnlegen.razor.rz.scp.css */
/* Bewusst eigene HTML-Elemente statt Kind-Komponenten: CSS-Isolation greift nur auf das
   Markup DIESER Datei, an einem MudPaper bliebe jede Klasse hier wirkungslos. */

.sortiment[b-tadqr7hnky] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
    padding-block: 1rem;
}

.karte[b-tadqr7hnky] {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-m, 8px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.karte h2[b-tadqr7hnky] { margin: 0; font-size: var(--text-lg); }
.karte h3[b-tadqr7hnky] { margin: 0.5rem 0 0; font-size: var(--text-base); }

.lead[b-tadqr7hnky] { margin: 0; color: var(--text-muted); }
.lead-warnung[b-tadqr7hnky] { color: var(--text-strong); }

.feld[b-tadqr7hnky] { display: flex; flex-direction: column; gap: 0.35rem; }
.feld label[b-tadqr7hnky] { font-weight: 600; font-size: var(--text-sm); }

.feld input[b-tadqr7hnky] {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-s, 6px);
    font: inherit;
    background: var(--surface-0, #fff);
}

.feld input:focus-visible[b-tadqr7hnky] {
    outline: 2px solid var(--brand, #3A7D8C);
    outline-offset: 1px;
}

/* Wird bei schmalem Fenster zur Spalte -- drei Zahlenfelder nebeneinander sind auf dem
   Telefon unbedienbar. */
.feld-reihe[b-tadqr7hnky] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.feld-reihe .feld[b-tadqr7hnky] {
    flex: 1 1 10rem;
    min-width: 0;
}

.hilfe[b-tadqr7hnky] { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.leise[b-tadqr7hnky] { color: var(--text-subtle); }

/* Kein Akzentstreifen an der Seite: das Haus benutzt linke Rahmen fuer
   Verschachtelung (Drawer, Kommentar-Baum, Mail-Zitat), nicht fuer Hinweise.
   Die Bedeutung traegt hier die Flaeche, nicht eine Kante. */
.hinweis[b-tadqr7hnky] {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-m, 8px);
    border: 1px solid;
}

.hinweis-gesperrt[b-tadqr7hnky] {
    background: #f9f5e8;
    border-color: #ddd0a4;
    color: #4a3c0c;
}

.hinweis-fehler[b-tadqr7hnky] {
    background: #fbefec;
    border-color: #e4bdb4;
    color: #6b281e;
}

.vorschau[b-tadqr7hnky] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.vorschau th[b-tadqr7hnky] {
    text-align: left;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-1, #e0ded8);
    padding: 0.4rem 0.5rem;
}

.vorschau td[b-tadqr7hnky] {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border-2, #f0eee9);
    vertical-align: top;
}

.vorschau .nr[b-tadqr7hnky],
.vorschau .preis[b-tadqr7hnky] { font-variant-numeric: tabular-nums; white-space: nowrap; }

.ok[b-tadqr7hnky] { color: #2f6b4f; font-weight: 500; }
.fehlgeschlagen[b-tadqr7hnky] { color: #9c3b2e; font-weight: 500; }

/* Eigene Farbe, bewusst weder grün noch rot: der Artikel existiert (kein Fehlschlag),
   ist aber nicht fertig (kein Erfolg). */
.unvollstaendig[b-tadqr7hnky] { color: #8a5a1c; font-weight: 500; }

/* Unklarer Ausgang: derselbe Ton, aber hervorgehoben — hier muss der Nutzer selbst
   nachsehen, und ein zweiter Anlauf ohne Prüfung ist die teure Handlung. */
.unklar[b-tadqr7hnky] { color: #8a5a1c; font-weight: 600; }

.vorlagen[b-tadqr7hnky] { margin: 0; padding-left: 1.2rem; font-size: var(--text-sm); }

.knopfreihe[b-tadqr7hnky] { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.knopf[b-tadqr7hnky] {
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-s, 6px);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}

.knopf:disabled[b-tadqr7hnky] { opacity: 0.5; cursor: not-allowed; }

.knopf-weiter[b-tadqr7hnky],
.knopf-anlegen[b-tadqr7hnky] {
    background: var(--brand, #3A7D8C);
    color: #fff;
}

.drucker[b-tadqr7hnky] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.knopf-drucker[b-tadqr7hnky],
.knopf-zurueck[b-tadqr7hnky] {
    background: transparent;
    border-color: var(--border-1, #e0ded8);
    color: inherit;
}
/* /Sortiment/Pages/SortimentArtikel.razor.rz.scp.css */
/* Eigene HTML-Elemente statt Kind-Komponenten: CSS-Isolation greift nur auf das Markup
   DIESER Datei. Groessen aus der Typo-Skala (--text-*), nicht als px (#1920). */

.artikel[b-moqqaryo9e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
    padding-block: 1rem;
}

.karte[b-moqqaryo9e] {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-m, 8px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.karte h2[b-moqqaryo9e] {
    margin: 0;
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Eigene Huelle fuer die Kuerzung: in einer Flex-Zeile muss min-width: 0 am Flex-KIND
       haengen, sonst laeuft die Zeile ueber statt zu kuerzen (#1519). */
    min-width: 0;
}

.feld[b-moqqaryo9e] { display: flex; flex-direction: column; gap: 0.35rem; }
.feld label[b-moqqaryo9e] { font-weight: 600; font-size: var(--text-sm); }

.feld input[b-moqqaryo9e] {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-s, 6px);
    font: inherit;
    background: var(--surface-0, #fff);
}

.feld input:focus-visible[b-moqqaryo9e] {
    outline: 2px solid var(--brand, #3A7D8C);
    outline-offset: 1px;
}

.hilfe[b-moqqaryo9e],
.leer[b-moqqaryo9e],
.fussnote[b-moqqaryo9e] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ── Trefferliste ───────────────────────────────────────────────────────── */

.treffer[b-moqqaryo9e],
.partner[b-moqqaryo9e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.treffer-knopf[b-moqqaryo9e],
.partner-knopf[b-moqqaryo9e] {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-s, 6px);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.treffer-knopf:hover[b-moqqaryo9e],
.partner-knopf:hover[b-moqqaryo9e] {
    background: var(--surface-2, #f2f0ea);
}

.treffer-knopf:focus-visible[b-moqqaryo9e],
.partner-knopf:focus-visible[b-moqqaryo9e] {
    outline: 2px solid var(--brand, #3A7D8C);
    outline-offset: 1px;
}

/* Der gerade angesehene Treffer bekommt eine eigene Markierung — und zwar nicht nur Farbe:
   eine Rahmenkante traegt auch dann, wenn jemand Farben schlecht unterscheidet. */
.treffer-knopf.aktiv[b-moqqaryo9e] {
    background: var(--surface-2, #f2f0ea);
    border-color: var(--brand, #3A7D8C);
    font-weight: 600;
}

.nummer[b-moqqaryo9e] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-sm);
    flex: 0 0 auto;
}

.bezeichnung[b-moqqaryo9e] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Feldliste ──────────────────────────────────────────────────────────── */

.felder[b-moqqaryo9e] {
    display: grid;
    grid-template-columns: minmax(10rem, auto) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: var(--text-sm);
}

.felder dt[b-moqqaryo9e] { color: var(--text-muted); }
.felder dd[b-moqqaryo9e] { margin: 0; }

/* Auf dem Telefon untereinander — zwei Spalten mit langen Feldnamen sind dort unlesbar. */
@media (max-width: 30rem) {
    .felder[b-moqqaryo9e] { grid-template-columns: 1fr; gap: 0.1rem; }
    .felder dt[b-moqqaryo9e] { margin-top: 0.5rem; }
}

/* ── Zusammenhang ───────────────────────────────────────────────────────── */

.partner li[b-moqqaryo9e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.rolle[b-moqqaryo9e] {
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    min-width: 6.5rem;
}

.marke[b-moqqaryo9e] {
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    border: 1px solid;
}

.marke-inaktiv[b-moqqaryo9e] {
    background: var(--surface-2, #f2f0ea);
    border-color: var(--border-1, #e0ded8);
    color: var(--text-muted);
}

.hinweis[b-moqqaryo9e] {
    border-radius: var(--radius-m, 8px);
    padding: 0.85rem 1rem;
    font-size: var(--text-sm);
    border: 1px solid;
}

.hinweis-fehler[b-moqqaryo9e] {
    background: var(--tint-rose-bg, #fbeeee);
    border-color: var(--tint-rose-fg, #9c4a4a);
}

/* Fingerbedienung entscheidet der Zeigegeraet-Typ, nicht die Fensterbreite. */
@media (pointer: coarse) {
    .treffer-knopf[b-moqqaryo9e],
    .partner-knopf[b-moqqaryo9e] { min-height: 44px; }
}
/* /Sortiment/Pages/SortimentPruefen.razor.rz.scp.css */
/* Eigene HTML-Elemente statt Kind-Komponenten: CSS-Isolation greift nur auf das Markup
   DIESER Datei. Groessen aus der Typo-Skala (--text-*), nicht als px (#1920). */

.pruefung[b-rkixd7aahf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 56rem;
    padding-block: 1rem;
}

.karte[b-rkixd7aahf] {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-m, 8px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.karte h2[b-rkixd7aahf] {
    margin: 0;
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Die Zahl steht neben dem Regelnamen, damit beim Ueberfliegen sichtbar ist, welcher Befund
   viele Artikel betrifft und welcher einen einzelnen. */
.anzahl[b-rkixd7aahf] {
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--surface-2, #f2f0ea);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    color: var(--text-muted);
}

.befunde[b-rkixd7aahf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.befunde li[b-rkixd7aahf] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.6rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-1, #e0ded8);
}

.befunde li:last-child[b-rkixd7aahf] {
    padding-bottom: 0;
    border-bottom: none;
}

.nummer[b-rkixd7aahf] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-sm);
    font-weight: 600;
}

.bezeichnung[b-rkixd7aahf] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    /* Eigene Huelle, eigene Kuerzungs-Zusage: in einer Grid-Zeile muss min-width: 0 am
       Grid-Kind haengen, sonst laeuft die Spalte ueber statt zu kuerzen (#1519). */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meldung[b-rkixd7aahf] {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0;
    font-size: var(--text-sm);
}

/* Huelle im eigenen Markup: an die Korrektur-Komponente darunter reicht diese Datei nicht. */
.korrektur[b-rkixd7aahf] {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    min-width: 0;
}

.hinweis[b-rkixd7aahf] {
    border-radius: var(--radius-m, 8px);
    padding: 0.85rem 1rem;
    font-size: var(--text-sm);
    border: 1px solid;
}

.hinweis-ok[b-rkixd7aahf] {
    background: var(--tint-green-bg, #eef6ee);
    border-color: var(--tint-green-fg, #4b7a4e);
}

.hinweis-fehler[b-rkixd7aahf] {
    background: var(--tint-rose-bg, #fbeeee);
    border-color: var(--tint-rose-fg, #9c4a4a);
}

.laedt[b-rkixd7aahf],
.fussnote[b-rkixd7aahf] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.knopf[b-rkixd7aahf] {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-1, #e0ded8);
    border-radius: var(--radius-s, 6px);
    background: var(--surface-0, #fff);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.knopf:disabled[b-rkixd7aahf] {
    opacity: 0.55;
    cursor: default;
}

.knopf:focus-visible[b-rkixd7aahf] {
    outline: 2px solid var(--brand, #3A7D8C);
    outline-offset: 1px;
}

/* Fingerbedienung entscheidet der Zeigegeraet-Typ, nicht die Fensterbreite — auch ein
   grosser Touch-Monitor braucht 44px. */
@media (pointer: coarse) {
    .knopf[b-rkixd7aahf] { min-height: 44px; }
}
/* /WebsiteHaendler/Pages/WebsiteHaendlerSeite.razor.rz.scp.css */
/* Rand setzt die Seite selbst, die Shell gibt keinen vor. */
.wh-seite[b-a9qilanvf0] {
    padding: 16px 28px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--font-ui);
}

.wh-hinweis[b-a9qilanvf0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-body);
    background: var(--brand-wash);
    border: 1px solid var(--brand-soft);
}

/* Das Symbol trägt die Farbe, der Text bleibt in voller Tinte: die Status-Paare des
   Design-Systems liegen als Text-auf-Fläche nur bei rund 3:1. */
.wh-hinweis[b-a9qilanvf0]  svg {
    flex: none;
    margin-top: 2px;
    color: var(--brand-strong);
}

.wh-hinweis.wh-hinweis-warn[b-a9qilanvf0] {
    background: var(--warning-100);
    border-color: transparent;
}

.wh-hinweis.wh-hinweis-warn[b-a9qilanvf0]  svg {
    color: var(--warning-600);
}

.wh-hinweis-knopf[b-a9qilanvf0] {
    margin-left: auto;
    flex: none;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 4px 12px;
    cursor: pointer;
}

.wh-hinweis-knopf:disabled[b-a9qilanvf0] {
    color: var(--text-muted);
    cursor: default;
}

.wh-stand[b-a9qilanvf0] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 11px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-xs);
}

.wh-stand.wh-stand-warn[b-a9qilanvf0] {
    background: var(--warning-100);
    border-color: transparent;
    box-shadow: none;
}

/* Eigene Hülle: LucideIcon ist ein Kind-Bauteil, die Isolation erreicht sein Markup nicht. */
.wh-stand-symbol[b-a9qilanvf0] {
    display: inline-flex;
    flex: none;
    color: var(--success-600);
}

.wh-stand.wh-stand-warn .wh-stand-symbol[b-a9qilanvf0] {
    color: var(--warning-600);
}

.wh-stand.wh-stand-ruhig .wh-stand-symbol[b-a9qilanvf0] {
    color: var(--text-muted);
}

.wh-stand-text[b-a9qilanvf0] {
    flex: 1;
    min-width: 0;
}

.wh-stand-titel[b-a9qilanvf0] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-strong);
}

.wh-stand-sub[b-a9qilanvf0] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 1px;
}

/* Auf der Warnfläche bleibt der Text in voller Tinte, wie bei .wh-hinweis-warn. */
.wh-stand.wh-stand-warn .wh-stand-sub[b-a9qilanvf0] {
    color: var(--text-body);
}

.wh-hinzu[b-a9qilanvf0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Die Hülle trägt die Breite: MudAutocomplete schiebt eigene Boxen dazwischen, eine
   Flex-Zusage am Bauteil selbst hinge am falschen Kind. */
.wh-suche[b-a9qilanvf0] {
    flex: 1 1 320px;
    max-width: 420px;
    min-width: 0;
}

.wh-suche[b-a9qilanvf0]  .mud-input-control {
    margin: 0;
}

.wh-knopf[b-a9qilanvf0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--brand);
    color: var(--text-on-brand);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.wh-knopf:disabled[b-a9qilanvf0] {
    background: var(--sand-100);
    border-color: var(--border-soft);
    color: var(--text-muted);
    cursor: default;
}

.wh-knopf.wh-knopf-neben[b-a9qilanvf0] {
    flex: none;
    border-color: var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
}

.wh-knopf.wh-knopf-neben:disabled[b-a9qilanvf0] {
    color: var(--text-muted);
}

.wh-spalten[b-a9qilanvf0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
}

/* Ohne Reihenfolge-Spalte (WaWi nicht erreichbar) gehört die ganze Breite der Tabelle. */
.wh-spalten.wh-spalten-eine[b-a9qilanvf0] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1180px) {
    .wh-spalten[b-a9qilanvf0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wh-karte[b-a9qilanvf0] {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 6px 14px 8px;
    box-shadow: var(--shadow-xs);
    min-width: 0;
}

/* Schreibtisch-Werkzeug: am Telefon behält die Tabelle ihre Mindestbreite und lässt sich quer
   schieben, statt dass sich Spaltenköpfe buchstabenweise umbrechen. */
.wh-tabellen-karte[b-a9qilanvf0] {
    overflow-x: auto;
}

/* Eigene <table> statt MudTable: die Zellen liegen im eigenen Markup, die Isolation greift direkt. */
.wh-tabelle[b-a9qilanvf0] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
}

.wh-tabelle th[b-a9qilanvf0] {
    text-align: left;
    padding: 10px 6px 9px;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-soft);
}

.wh-tabelle td[b-a9qilanvf0] {
    padding: 8px 6px;
    vertical-align: middle;
    color: var(--text-body);
    border-bottom: 1px solid var(--border-soft);
}

.wh-tabelle tbody tr:last-child td[b-a9qilanvf0] {
    border-bottom: none;
}

.wh-sp-schalter[b-a9qilanvf0] { width: 130px; }
.wh-sp-aktionen[b-a9qilanvf0] { width: 84px; white-space: nowrap; text-align: right; }

.wh-titel[b-a9qilanvf0] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh-sub[b-a9qilanvf0] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh-angepasst[b-a9qilanvf0] {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: var(--text-2xs);
    font-weight: 600;
    background: var(--sand-100);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
}

.wh-grund[b-a9qilanvf0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--warning-100);
    color: var(--text-body);
    white-space: nowrap;
}

.wh-grund[b-a9qilanvf0]  svg {
    flex: none;
    color: var(--warning-600);
}

.wh-waehlen[b-a9qilanvf0] {
    display: block;
    margin-top: 5px;
}

/* Pausiert tritt zurück, bleibt aber lesbar — der Schalter ist die Aktion und bleibt voll sichtbar. */
.wh-tabelle tr.wh-zeile-aus .wh-titel[b-a9qilanvf0],
.wh-tabelle tr.wh-zeile-aus .wh-sub[b-a9qilanvf0] {
    opacity: .62;
}

.wh-folge-titel[b-a9qilanvf0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-strong);
    padding: 10px 4px 2px;
}

.wh-folge-sub[b-a9qilanvf0] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--border-soft);
}

.wh-folge[b-a9qilanvf0] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-soft);
}

.wh-folge:last-child[b-a9qilanvf0] {
    border-bottom: none;
}

.wh-folge-nr[b-a9qilanvf0] {
    width: 18px;
    flex: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wh-folge-wer[b-a9qilanvf0] {
    min-width: 0;
}

.wh-folge-name[b-a9qilanvf0] {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-strong);
}

.wh-folge-ort[b-a9qilanvf0] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 1px;
}

.wh-folge-fuss[b-a9qilanvf0] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 4px 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.wh-folge-fuss[b-a9qilanvf0]  svg {
    flex: none;
}

.wh-leer[b-a9qilanvf0] {
    padding: 34px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.wh-leer-titel[b-a9qilanvf0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text-strong);
    margin-bottom: 4px;
}
/* /WebsiteHaendler/Pages/WebsiteHaendlerTexteDialog.razor.rz.scp.css */
.whd[b-2gdpuqnjpu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-ui);
}

.whd-abschnitt[b-2gdpuqnjpu] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.whd-wahl[b-2gdpuqnjpu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.whd-opt[b-2gdpuqnjpu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: 14px;
    padding: 11px 13px;
    background: var(--surface-card);
    cursor: pointer;
}

.whd-opt.whd-opt-an[b-2gdpuqnjpu] {
    border-color: var(--brand);
    background: var(--brand-wash);
    box-shadow: 0 0 0 1px var(--brand);
}

.whd-opt input[b-2gdpuqnjpu] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--brand);
}

.whd-opt-text[b-2gdpuqnjpu] {
    min-width: 0;
}

.whd-opt-titel[b-2gdpuqnjpu] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-strong);
}

.whd-opt-zeile[b-2gdpuqnjpu] {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.whd-hinweis[b-2gdpuqnjpu] {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-muted);
}

.whd-zwei[b-2gdpuqnjpu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.whd-vorschau[b-2gdpuqnjpu] {
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px 14px;
}

.whd-vorschau-kopf[b-2gdpuqnjpu] {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.whd-vorschau-name[b-2gdpuqnjpu] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
}

.whd-vorschau-zeile[b-2gdpuqnjpu] {
    font-size: var(--text-sm);
    color: var(--text-body);
    margin-top: 2px;
}

.whd-vorschau-route[b-2gdpuqnjpu] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 5px;
}

@media (max-width: 520px) {
    .whd-wahl[b-2gdpuqnjpu],
    .whd-zwei[b-2gdpuqnjpu] {
        grid-template-columns: 1fr;
    }
}

@media (pointer: coarse) {
    .whd-opt[b-2gdpuqnjpu] {
        min-height: 44px;
    }
}