/* /Areas/Admin/Admin.razor.rz.scp.css */
tr.pending[b-rphgjts9lm] {
    background-color: #fff3cd;
}
/* /Areas/Developer/Adressen.razor.rz.scp.css */
/* Adress-Info Phase 1a Task 8: Feld + Button in einer ENGEN Flex-Gruppe -- 1:1-Praezedenz
   Seriennummern.razor.css .serial-quick-gruppe (identische Root-Cause-Analyse: das MudTextField-
   Flex-Item beansprucht trotz max-width auf dem Input effektiv volle Breite und drueckt den Button
   an den Rand der aeusseren Leiste). ::deep ist noetig, weil .adr-such-feld auf dem Root-Element von
   MudTextField sitzt (Kind-Komponente, nicht Teil dieses Scopes).
   Responsive: max-width:100% auf der Gruppe + min-width:0 auf dem Feld verhindern ein Ueberlaufen auf
   schmalen Bildschirmen; das Wrap-Verhalten bleibt ueber die aeussere MudStack Wrap.Wrap erhalten. */
.adr-such-gruppe[b-tp6g41ih8d] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    max-width: 100%;
}

.adr-such-gruppe[b-tp6g41ih8d]  .adr-such-feld {
    flex: 0 0 auto;
    min-width: 0;
}

/* Task 9 (Spec §5.1/§5.4), Task 11 UPDATE (§10.1.1/§10.6): NUR die Warnung bleibt reiner TEXT
   (@wert, kein MarkupString) -- white-space: pre-wrap erhaelt manuelle Zeilenumbrueche des
   nutzergepflegten Freitexts. Die auffaellig rote Optik der Warnung-Box kommt bewusst aus dem
   bereits geladenen Bootstrap `alert alert-danger` (Praezedenz ArtikelDetail.razor
   .arb-clamp-banner) -- .adr-warnung-box liefert nur den Test-/Layout-Hook + pre-wrap, keine eigene
   Farbgebung. Bemerkung kehrt §10.1 fuer sich um: .adr-bemerkung-text ist nur noch der
   PLAINTEXT-FALLBACK-Pfad (wenn ToSafeHtmlOrNull null liefert); der Regelfall ist sanitized
   RTF-HTML in .adr-bemerkung-html (kein eigenes pre-wrap noetig -- RtfPipe emittiert bereits
   Block-/Zeilenumbruch-Tags). */
.adr-warnung-box[b-tp6g41ih8d] {
    white-space: pre-wrap;
}

.adr-bemerkung-text[b-tp6g41ih8d] {
    white-space: pre-wrap;
}

/* Plain <div> (kein MudText) -- vermeidet den ::deep-Umweg (MudText waere eine Kind-Komponente, deren
   Root-Element NICHT das b-Scope-Attribut dieser Datei traegt, s. .adr-such-gruppe-Kommentar oben zur
   allgemeinen Regel). font-size naehert MudBlazor Typo.body2 an. */
.adr-card-leer[b-tp6g41ih8d] {
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
    font-size: 0.875rem;
}

.adr-web-link[b-tp6g41ih8d],
.adr-email-mailto-link[b-tp6g41ih8d] {
    display: inline-flex;
    align-items: center;
}

/* Kontakt-Zeilen (Web/E-Mail) mischen bewusst Element-Typen: Copy = MudIconButton (Button-Box mit
   Padding), Oeffnen/mailto = literaler <a> mit MudIcon (Security: rel=noopener noreferrer, KEIN
   MudLink). Ohne gemeinsame vertikale Ausrichtung sitzen die Icons auf unterschiedlicher Baseline
   -> ungleich hoch. vertical-align:middle richtet alle inline-Kinder auf die Zeilenmitte (der
   URL-Text-Span traegt sein vertical-align:middle bereits inline). */
.adr-web-copy-btn[b-tp6g41ih8d],
.adr-email-copy-btn[b-tp6g41ih8d],
.adr-web-link[b-tp6g41ih8d],
.adr-email-mailto-link[b-tp6g41ih8d] {
    vertical-align: middle;
}

/* a2-test-94 Smoke-Feedback: der IdnHost-Hinweis erscheint NUR bei echten Punycode-Domains
   (xn--, s. Adressen.razor) und dann als ROTER Betrugs-Hinweis statt der frueheren
   immer-sichtbaren text-muted-Klammer -- die alte .adr-web-idnhost-Regel gibt es nicht mehr. */
.adr-web-idnhost-warn[b-tp6g41ih8d] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    color: var(--mud-palette-error);
}

/* gui-polish-104 Task 1: klickbarer Titel-Bereich der einklappbaren Cards (Historie/Notizen/
   Bemerkung) -- natives <div> statt @onclick auf MudCardHeader/Mud-Komponenten (Repo-Landmine
   MudBlazor#5168). Nimmt die volle CardHeaderContent-Breite ein, damit der Klick-Bereich nicht nur
   auf dem Text selbst liegt. */
.adr-collapse-header[b-tp6g41ih8d] {
    cursor: pointer;
    width: 100%;
}

/* Task 12 (A6, .superpowers/sdd/runde-110/task-12-brief.md): Kontakt-Card zweispaltig statt der
   frueheren 4-spaltigen <table> -- eine Tabelle reflowt am kleinen Breakpoint nicht ohne einen
   display:block-Hack, der die DOM-Struktur zerlegt (Markup-Vertrag Punkt 4 im Brief). Zwei
   Spalten-<div>s (.adr-kontakt-spalte-links/-rechts, je ein simpler vertikaler Stack) -- im
   einspaltigen Modus stapeln sie sich untereinander (erst komplett links, dann komplett rechts).
   Zebra-Ausnahme (gui/CLAUDE.md "Tabellen-Zebra-Konvention"): bewusst KEIN Zebra hier -- die
   Kontakttabelle hatte schon VOR diesem Umbau keins (verifiziert, keine Regression), und CSS-Grid
   kennt ohnehin keine durchgehende Zeilenparitaet mehr (kein <tr>, jede Spalte zaehlt unabhaengig
   von der anderen).

   Fix-Runde 1 (Review-Fund 1, KRITISCH): @media (min-width) mass den VIEWPORT, nicht die Karte.
   Die Karte sitzt in <MudItem xs="12" md="6"> -- bei genau 960px Viewport HALBIERT MudBlazor die
   Kartenbreite UND die Media-Query schaltet gleichzeitig zweispaltig, mit der alten Basis
   (Label 130px + Wert 200px = 338px je Spalte) reichte der dann verfuegbare Platz auf jedem
   ueblichen Laptop NICHT -- Werte brachen unter ihr Label um, die Karte wurde HOEHER statt
   kompakter (562px vs. 357px bei Viewport 968px, in Headless-Chrome gegen die echte
   MudBlazor.min.css 9.5.0 gemessen). Fix: Container-Query auf die tatsaechliche KARTEN-Breite
   statt auf den Viewport -- .adr-kontakt-container traegt container-type:inline-size (Groessen-
   Containment), @container schaltet NUR .adr-kontakt-grid um (ein Container kann sich nicht selbst
   abfragen, daher der eigene Wrapper). Schwellwert 512px ist aus dem GEMESSENEN Platzbedarf
   abgeleitet, nicht aus einer Framework-Breakpoint-Tabelle: 2 * (Label-Basis 96px + Zeilen-Gap 8px
   + Wert-Basis 120px) + Spalten-Gap 32px = 480px exakter rechnerischer Bedarf, PLUS 32px
   Sicherheitsmarge (Font-Metrik-Varianz zwischen Browsern/Betriebssystemen -- die reale Messung
   in Headless-Chrome traf den 480px-Wert exakt, ohne Marge waere ein Umschlagen unter das Label in
   einer geringfuegig breiteren Schrift denkbar) = 512px. Gegen die reale Kartenbreite in
   Headless-Chrome nachgemessen (MudBlazor 9.5.0, echtes CSS-Bundle, Karte in <MudItem md="6">):
   an der Schwelle (Viewport 1380px, Kartenbreite 545px) sinkt die Kartenhoehe bereits von
   467,7px (einspaltige Baseline, ueber den gesamten gemessenen Breitenbereich stabil) auf 412,6px
   (-11,8%), mit wachsendem Abstand bei groesseren Kartenbreiten bis -21,2% (s. Task-12-Fix-Report
   fuer die vollen Messwerte). Werte-Basis 120px (statt vormals 200px) und Label-Basis
   96px (statt vormals 130px, plus overflow-wrap:break-word als Sicherheitsnetz gegen das laengste
   Label "Ansprechpartner") sind die vom Review empfohlene Enge-Entschaerfung.

   Fix-Runde 1 (Review-Fund 2): grid-template-columns: 1fr 1fr ist minmax(auto, 1fr) -- die rechte
   Spur konnte wegen des Inline-Styles max-width:260px;white-space:nowrap auf .adr-web-text
   (Adressen.razor) nicht unter ihre min-content-Breite (~244px) schrumpfen und quetschte dadurch
   die LINKE Spalte auf deutlich unter die Haelfte (gemessen 118px|244px bei 1068px Viewport). Fix:
   minmax(0, 1fr) minmax(0, 1fr) -- beide Spuren duerfen bis auf 0 schrumpfen, 1fr verteilt den
   Rest dann tatsaechlich gleich.

   Fix-Runde 1 (Review-Fund 4): im einspaltigen Modus lagen die zwei Spalten-<div>s (die dann als
   zwei GRID-ZEILEN uebereinander stehen) ohne row-gap und ohne Trennlinie (letzte Zeile links hatte
   border-bottom:none) direkt aneinander. Fix: row-gap ergaenzt (Reviewer-Alternative row-gap statt
   :last-child-Restriktion gewaehlt -- einfacherer Fix, gleicher Effekt: sichtbarer Abstand). */
.adr-kontakt-container[b-tp6g41ih8d] {
    container-type: inline-size;
}

.adr-kontakt-grid[b-tp6g41ih8d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 16px;
}

@container (min-width: 512px) {
    .adr-kontakt-grid[b-tp6g41ih8d] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.adr-kontakt-spalte[b-tp6g41ih8d] {
    display: flex;
    flex-direction: column;
}

/* Markup-Vertrag Punkt 1 (Brief): die adr-zeile-*-Klasse sitzt NUR auf .adr-kontakt-wert -- diese
   Zeilen-/Label-Klassen tragen absichtlich KEINE adr-zeile-*-Klasse. */
.adr-kontakt-zeile[b-tp6g41ih8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.adr-kontakt-spalte .adr-kontakt-zeile:last-child[b-tp6g41ih8d] {
    border-bottom: none;
}

.adr-kontakt-label[b-tp6g41ih8d] {
    flex: 0 0 96px;
    overflow-wrap: break-word;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.adr-kontakt-wert[b-tp6g41ih8d] {
    flex: 1 1 120px;
    min-width: 0;
}

/* Nachtrag (User-Auftrag "Icon vor Nummer", 2026-08-01): das Waehl-Icon steht jetzt VOR statt hinter
   der Nummer, damit unterschiedlich lange Nummern nicht mehr die Icon-Spalte verschieben. Zwischen
   dem @if-Block und dem @-Ausdruck fuer die Nummer liegt im Markup nur Whitespace -- Razor stuft das
   als insignifikant ein und entfernt es komplett (kein Leerzeichen im gerenderten DOM, anders als bei
   `<span>...</span> @wert`, wo das Leerzeichen literaler Text ist). Ohne Gegenmassnahme klebt die
   Nummer direkt am Button. Fix scoped NUR auf die drei Telefon-Zeilen (nicht auf .adr-kontakt-wert
   allgemein, das auch Land/E-Mail/Web/Fax traegt) -- gleiche display:flex+gap+align-items-Idiom wie
   .adr-ap-feld unten, das denselben Whitespace-Wegfall bereits ueber CSS `gap` statt literalem
   Leerzeichen abfaengt. */
.adr-zeile-telefon[b-tp6g41ih8d],
.adr-zeile-telefon2[b-tp6g41ih8d],
.adr-zeile-handy[b-tp6g41ih8d] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Block 2: Ansprechpartner-Karte ──────────────────────────────────────────────────────
   Bewusst Bloecke statt Tabelle und damit OHNE Zebra (Abweichung von der Zebra-Konvention
   in gui/CLAUDE.md, mit Grund): knapp 89 % der Zeilen tragen weder Telefon noch Handy noch
   Fax, rund 60 % keinen Vornamen -- eine Spaltentabelle waere zu fast neunzig Prozent leer.
   Getrennt werden die Personen stattdessen ueber eine duenne Trennlinie. */
.adr-ap-zeile[b-tp6g41ih8d] {
    padding: 0.4rem 0;
    border-top: 1px solid #e0e0e0;
}

.adr-ap-zeile:first-child[b-tp6g41ih8d] {
    border-top: none;
    padding-top: 0;
}

.adr-ap-name[b-tp6g41ih8d] {
    font-weight: 600;
}

.adr-ap-rolle[b-tp6g41ih8d] {
    line-height: 1.2;
}

.adr-ap-kontakt[b-tp6g41ih8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
    align-items: center;
    margin-top: 0.15rem;
}

.adr-ap-feld[b-tp6g41ih8d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.adr-ap-label[b-tp6g41ih8d] {
    color: #6c757d;
    font-size: 0.8125rem;
}

/* Lange Adressen duerfen die Karte nicht sprengen; der volle Wert steht im title-Attribut. */
.adr-ap-email-text[b-tp6g41ih8d] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}
/* /Areas/Developer/AdressSucheDialog.razor.rz.scp.css */
/* Adress-Info Phase 1a Task 8: Feld + Button in einer ENGEN Flex-Gruppe -- 1:1-Praezedenz
   SerialSucheDialog.razor.css .serial-such-gruppe (identische Root-Cause-Analyse dort). ::deep ist
   noetig, weil .adr-dlg-such-feld auf dem Root-Element von MudTextField sitzt (Kind-Komponente,
   nicht Teil dieses Scopes). */
.adr-dlg-such-gruppe[b-0ni8ku35rs] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    max-width: 100%;
}

.adr-dlg-such-gruppe[b-0ni8ku35rs]  .adr-dlg-such-feld {
    flex: 0 0 auto;
    min-width: 0;
}

/* Tabellen-Zebra-Konvention (gui/CLAUDE.md, Task "unterdrueckt-gui" -- die neue Art-Spalte macht
   diese Tabelle zu einer "Tabellen-Bearbeitung", die Konvention greift daher jetzt): Zwei-Ton-Zebra
   #e8edf4/#d4dfec auf den Trefferzeilen, 1:1-Farbpaar-Praezedenz AuftragHistorie.razor.css. ::deep
   ist noetig, MudTable rendert die <tr>-Elemente als Kind-Komponenten-Baum ohne den b-scope dieser
   Datei. .adr-dlg-treffer-tabelle ist der Wrapper-Div um die MudTable (Praezedenz .ah-lebenslauf). */
.adr-dlg-treffer-tabelle[b-0ni8ku35rs]  tr.adr-treffer-zeile-a {
    background-color: #e8edf4;
}

.adr-dlg-treffer-tabelle[b-0ni8ku35rs]  tr.adr-treffer-zeile-b {
    background-color: #d4dfec;
}
/* /Areas/Developer/ArtikelSuche.razor.rz.scp.css */
/* W2-T2 (Plan gui-conventions, A1-Konvention): Feld + Button in einer ENGEN Flex-Gruppe -- ohne
   diesen Wrapper drueckt das MudTextField-Flex-Item (dessen Root-Wrapper effektiv volle Breite
   beansprucht) trotz des max-width-Style auf dem Feld den Button an den Rand der Bootstrap-.row.
   1:1-Praezedenz: SerialSucheDialog.razor.css .serial-such-gruppe / Seriennummern.razor.css
   .serial-quick-gruppe (identische Root-Cause-Analyse dort). ::deep ist noetig, weil .such-feld auf
   dem Root-Element von MudTextField sitzt (Kind-Komponente, nicht Teil dieses Scopes) -- der
   Kommentar unten "kein ::deep noetig" gilt NUR fuer die plain <tr>/<td>-Regeln dort.
   .arb-such-gruppe traegt im Razor-Markup zusaetzlich Bootstrap .col-auto -- display:flex hier
   ueberschreibt NICHT dessen flex:0 0 auto/width:auto (andere Properties), die Spalte bleibt also
   eine normale Bootstrap-Grid-Spalte innerhalb der uebrigen .row (match-mode-Select, Checkboxen).
   Responsive: max-width:100% auf der Gruppe + min-width:0 auf dem Feld verhindern ein Ueberlaufen
   auf schmalen Bildschirmen; g-2 auf der aeusseren .row liefert dort weiterhin Wrap-Verhalten. */
.arb-such-gruppe[b-b9kq8om8zv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    max-width: 100%;
}

.arb-such-gruppe[b-b9kq8om8zv]  .such-feld {
    flex: 0 0 auto;
    min-width: 0;
}

/* Stage-31: EOL rows get a muted/greyed font colour (combined end_of_life marker:
   NichtMehrLieferbar=1 OR x-prefix). Plain <tr>/<td> Bootstrap elements -> scoped CSS
   reaches them directly (no ::deep needed).
   Stage-32 #7 BUG-FIX: Bootstrap sets color directly on <td> via
   `.table > :not(caption) > * > *` (bootstrap.css ~1878), overriding inherited <tr> color.
   Fix: target td level + !important to beat the Bootstrap specificity rule. */
.arb-eol-row td[b-b9kq8om8zv] {
    color: #9aa0a6 !important;
}

/* Runde 106 Task 3: Bootstrap-Zebra (table-striped, --bs-table-striped-bg) ersetzt durch die
   Zwei-Ton-Zebra-Konvention #e8edf4/#d4dfec (gui/CLAUDE.md "Tabellen-Zebra-Konvention"). Regeln auf
   ZELLEN-Ebene (tbody tr:nth-child td), NICHT auf tr: Bootstrap malt opake Zell-Hintergruende via
   --bs-table-bg (`.table > :not(caption) > * > *`, bootstrap.css ~1878) darueber -- ein
   tr-Hintergrund waere unsichtbar (dieselbe Root-Cause wie .arb-eol-row td oben, dort fuer color
   statt background-color). !important noetig aus demselben Grund, um die Bootstrap-Zell-Regel zu
   schlagen. Kein Konflikt mit .arb-eol-row td: die EOL-Regel setzt NUR die Font-Farbe, die
   Zebra-Regeln NUR den Hintergrund. */
.arb-table tbody tr:nth-child(odd) td[b-b9kq8om8zv] {
    background-color: #e8edf4 !important;
}

.arb-table tbody tr:nth-child(even) td[b-b9kq8om8zv] {
    background-color: #d4dfec !important;
}
/* /Areas/Developer/AuftragHistorie.razor.rz.scp.css */
/* Adress-Info Phase 1a.5 Task 10 (design-1a5.md §5): Praezedenz Seriennummern.razor.css
   .serial-lebenslauf ::deep .serial-positionen-btn, Klassen-Praefix ah- statt serial-. Stage 1b-A
   Task 6: die Gruppen-Toggle-CSS (.ah-gruppe-toggle / ::deep tr.ah-gruppe-kind) ist mit dem Gruppen-
   Render-Modell komplett entfallen -- die Historie ist ab jetzt flach (kein Auf-/Zuklappen mehr). */
.ah-positionen-btn[b-fkbnevc74a] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* gui-historie-layout Aenderung 3 (Smoke a2-test-99): ganze Zeile klickbar -- Klick-Affordance
   (MudTable hat schon Hover="true" fuer den Highlight-Effekt, hier zusaetzlich der Cursor). ::deep +
   Scope-Wrapper-Div (.ah-lebenslauf) noetig, weil MudTable-<tr>-Elemente kein b-scope-Attribut dieser
   Datei tragen (Kind-Komponente). Stage 1b-B Task 5: .ah-lebenslauf umschliesst jetzt 3 moegliche
   Tabellen-Varianten (Beleg/Posten/Beide, s.u.) -- NUR die Beleg-Tabelle traegt OnRowClick, daher
   Selektor auf tr.ah-event-zeile verengt (statt generisch "tbody tr"), sonst zeigten Posten-/Beide-
   Zeilen faelschlich einen Pointer-Cursor ohne tatsaechliche Klickbarkeit. */
.ah-lebenslauf[b-fkbnevc74a]  tr.ah-event-zeile {
    cursor: pointer;
}

/* Netto-EK-Gate-Hinweis (Adress-spezifisch, KEIN Serials-Praezedenz -- dezent statt "0 €"). */
.ah-netto-superadmin-hinweis[b-fkbnevc74a] {
    color: var(--mud-palette-text-secondary, #6e6e6e);
    font-style: italic;
}

.ah-netto-hinweistext[b-fkbnevc74a] {
    opacity: 0.8;
}

/* Stage 1b-B Task 5 (plan-1b-b.md §Task 5 Step 3): Zebra fuer die Belegübersicht (RowClassFunc,
   ::deep -- Kind-Komponenten-<tr>/<th> tragen kein b-scope-Attribut dieser Datei) UND die farbige
   Beleg-Kopfzeile im Beide-Modus (GroupHeaderTemplate setzt dieselben Klassen auf die spannende
   <MudTh>-Zelle -- EXPLIZITE Klasse ueber den Zeilen-/Gruppen-Index, NICHT nth-child: im Beide-Modus
   sind Posten-Zeilen zwischen den Gruppen-Headern eingestreut, nth-child gaebe kein stabiles
   per-Beleg-Zebra). Zwei-Ton-Paar #e8edf4/#d4dfec (dieselbe blaugraue Familie), Posten bleiben weiss
   als Kontrast-Anker. Kein Theme-Token-Bezug noetig -- rein dekorative Abwechslung, kein Status.
   User-Feedback 2026-07-24: -b wirkte neben dem kraeftigeren -a wie reines Weiss. */
.ah-lebenslauf[b-fkbnevc74a]  tr.ah-event-zeile-a,
.ah-lebenslauf[b-fkbnevc74a]  th.ah-event-zeile-a {
    background-color: #e8edf4;
}

.ah-lebenslauf[b-fkbnevc74a]  tr.ah-event-zeile-b,
.ah-lebenslauf[b-fkbnevc74a]  th.ah-event-zeile-b {
    background-color: #d4dfec;
}

/* Postenzeilen (Postenübersicht-only UND Beide-Modus RowTemplate) bleiben immer weiss, unabhaengig
   von jeder Tabellen-/Theme-Default-Stripe. */
.ah-lebenslauf[b-fkbnevc74a]  tr.ah-posten-zeile {
    background: #fff;
}

/* Task 7 (A2 Pfad 1, Brief 7c/7d): Freitext-/Leerzeilen-Positionen (Art 4/5, HistoriePosition.Freitext)
   -- eigene Zeilen-Klasse (s. RowClassFunc-Kommentar in AuftragHistorie.razor, IstFreitextZeile), damit
   sie NICHT von .ah-posten-zeile-Selektoren (Tests UND Zebra) mitgetroffen werden. Bleibt wie normale
   Postenzeilen weiss (Kontrastanker, gui/CLAUDE.md Tabellen-Zebra-Konvention). Zell-Styling optisch
   abgesetzt (kursiv/gedaempft) + white-space:pre-wrap fuer erhaltene Umbrueche (Praezedenz
   .adr-bemerkung-text, Adressen.razor.css:34-36) -- ::deep noetig, MudTd ist eine Kind-Komponente,
   die Klasse landet ueber die Splat-Mechanik (MudComponentBase.UserAttributes) auf deren <td>. */
.ah-lebenslauf[b-fkbnevc74a]  tr.ah-posten-freitext-zeile {
    background: #fff;
}

.ah-lebenslauf[b-fkbnevc74a]  td.ah-posten-freitext-zelle {
    white-space: pre-wrap;
    font-style: italic;
    color: var(--mud-palette-text-secondary, #6e6e6e);
}
/* /Areas/Developer/ModellreihenCard.razor.rz.scp.css */
/* Stage 1b-C Task 5: EK-Redaction-Hinweis (Praezedenz AuftragHistorie.razor.css
   .ah-netto-superadmin-hinweis/.ah-netto-hinweistext -- dezent statt "0 €"/nacktem "-"). */
.mr-ek-gesperrt-hinweis[b-k2xrv5cui3] {
    color: var(--mud-palette-text-secondary, #6e6e6e);
    font-style: italic;
}

.mr-ek-hinweistext[b-k2xrv5cui3] {
    opacity: 0.8;
}

/* gui-polish-104 Task 1: klickbarer Titel-Bereich der einklappbaren Card -- natives <div> statt
   @onclick auf MudCardHeader/Mud-Komponenten (Repo-Landmine MudBlazor#5168). Identische Regel wie
   Adressen.razor.css .adr-collapse-header (eigener CSS-Scope pro Komponente, keine Vererbung ueber
   Komponentengrenzen). */
.adr-collapse-header[b-k2xrv5cui3] {
    cursor: pointer;
    width: 100%;
}
/* /Areas/Developer/Overview.razor.rz.scp.css */
/* Areas/Developer/Overview.razor.css — capability cards (mirrors Home tiles). */
.dev-cards[b-wuavfve7l9] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .dev-cards[b-wuavfve7l9] { grid-template-columns: 1fr; } }

.dev-card[b-wuavfve7l9] { display: flex; flex-direction: column; align-items: flex-start;
    background: #fbfcfe; border: 1px solid #e2e7ee; border-radius: .6rem; padding: 1rem;
    text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.dev-card:hover[b-wuavfve7l9] { box-shadow: 0 6px 18px rgba(5, 39, 103, .12); transform: translateY(-2px); }
.dev-ico[b-wuavfve7l9] { width: 26px; height: 26px; display: block; margin-bottom: .5rem; }
.dev-name[b-wuavfve7l9] { font-weight: 700; color: rgb(5, 39, 103); font-size: 1rem; }
.dev-desc[b-wuavfve7l9] { color: #6a7886; font-size: .8rem; line-height: 1.45; margin-top: .35rem; flex: 1; }
.dev-open[b-wuavfve7l9] { margin-top: .7rem; font-size: .8rem; font-weight: 600; color: #004f9f; }
/* /Areas/Developer/SerialSucheDialog.razor.rz.scp.css */
/* W2-T1 (Plan gui-conventions, A1-Konvention): Feld + Button in einer ENGEN Flex-Gruppe -- ohne
   diesen Wrapper drueckt das MudTextField-Flex-Item (dessen Root-Wrapper effektiv volle Breite
   beansprucht) trotz des max-width-Style auf dem Feld den Button an den Rand der aeusseren Leiste.
   1:1-Praezedenz: Seriennummern.razor.css .serial-quick-gruppe (identische Root-Cause-Analyse dort).
   ::deep ist noetig, weil .serial-such-feld auf dem Root-Element von MudTextField sitzt (Kind-
   Komponente, nicht Teil dieses Scopes).
   Responsive: max-width:100% auf der Gruppe + min-width:0 auf dem Feld verhindern ein Ueberlaufen
   auf schmalen Bildschirmen; das Wrap-Verhalten bleibt ueber die aeussere MudStack Wrap.Wrap
   erhalten (die Gruppe selbst wrapt bei Bedarf zusaetzlich intern). */
.serial-such-gruppe[b-lobzj81mbz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    max-width: 100%;
}

.serial-such-gruppe[b-lobzj81mbz]  .serial-such-feld {
    flex: 0 0 auto;
    min-width: 0;
}
/* /Areas/Developer/Seriennummern.razor.rz.scp.css */
/* v1.8.1 (Spec §13.10 B10, R1-F3/Codex-Imp1): Feld + Button in einer ENGEN Flex-Gruppe -- ohne diesen
   Wrapper drueckt das MudTextField-Flex-Item (dessen Root-Wrapper MudBlazor-intern effektiv volle
   Breite beansprucht) trotz des max-width-Style auf dem Input den Button an den Rand der aeusseren
   Leiste (Root-Cause NICHT ein Justify, s. Razor-Kommentar an der Aufrufstelle).
   ::deep ist noetig, weil .serial-quick-feld/.serial-neue-suche auf dem Root-Element von MudTextField/
   MudButton sitzen (Kind-Komponenten, nicht Teil dieses Scopes) -- Praezedenz-Kommentar in
   ArtikelSuche.razor.css "kein ::deep noetig" gilt dort NUR fuer plain <tr>/<td>-Elemente; hier ist es
   umgekehrt ein MudBlazor-Komponenten-Root.
   Responsive (Codex-Imp1): max-width:100% auf der Gruppe + min-width:0 auf dem Feld verhindern ein
   Ueberlaufen auf schmalen Bildschirmen; das Wrap-Verhalten bleibt ueber die aeussere MudStack
   Wrap.Wrap erhalten (die Gruppe selbst wrapt bei Bedarf zusaetzlich intern). */
.serial-quick-gruppe[b-y2sqluu6yo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    max-width: 100%;
}

.serial-quick-gruppe[b-y2sqluu6yo]  .serial-quick-feld {
    flex: 0 0 auto;
    min-width: 0;
}

/* v1.8.1 (Spec §13.10 B13): sichtbare Link-Optik fuer verlinkte Retex-SNs -- vor v1.8.1 existierte
   KEIN CSS fuer die serial-*-Klassen, die <a> rendern (unstyled Browser-Default-Link). Fallback-Farbe
   identisch zum MudBlazor-Default-Primary (Praezedenz EnvironmentBadge.razor.css var(--mud-palette-
   error, #b00020) -- App definiert kein eigenes MudTheme, s. Verifikation gegen MudBlazor 9.5.0).
   FIX (Codex-Spotcheck MED, v1.8.1 Polish): urspruenglich als nackte .serial-retex-sn-link-Regel
   geschrieben -> kompilierte zu .serial-retex-sn-link[b-scope] (Attribut-Selektor). Das <a> traegt
   dieses Scope-Attribut aber NIE, weil es per RenderTreeBuilder in RenderRetexSn (@code, Seriennummern.
   razor) gebaut wird -- NUR Markup-Elemente, die der Razor-Compiler direkt aus dieser .razor-Datei
   generiert, bekommen das Attribut; hand-geschriebener RenderTreeBuilder-Code im @code-Block wird von
   diesem Kompilier-Pass nicht erfasst (ebenso wenig wie Kind-Komponenten-Wurzeln, s. .serial-quick-feld
   oben). Die Regel griff dadurch STILL NIE (Tests blieben gruen, weil bUnit nur das class-Attribut
   prueft, keinen computed style). Fix: ::deep-Regel, verankert an .serial-retex-scope -- einem eigens
   dafuer eingefuegten plain <div> um den RetexDetail-Block (s. Seriennummern.razor), dessen Wurzel-
   element (im Gegensatz zu MudPaper/MudText) echtes Markup dieser Komponente ist und daher das
   Scope-Attribut TRAEGT. Kompiliert dadurch zu ".serial-retex-scope[b-scope]  .serial-retex-sn-link"
   (Nachkommen-Selektor, kein Attribut auf .serial-retex-sn-link selbst) -- Praezedenz OrdersTable.razor.css
   ".orders-table ::deep .order-head-row" (identisches Muster: plain div-Wrapper + ::deep fuer Klassen auf
   MudBlazor-Kind-Komponenten-Wurzeln bzw. hier zusaetzlich RenderTreeBuilder-Elementen). */
.serial-retex-scope[b-y2sqluu6yo]  .serial-retex-sn-link {
    text-decoration: underline;
    color: var(--mud-palette-primary, #594AE2);
}

/* v1.8.1 (Spec §13.10 B14): Artikelnummer-Zeile -- Wert links, Details-Button rechts. */
.serial-artikelnr-zeile[b-y2sqluu6yo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* v1.9 T4 (Spec §14.3 Pkt.2/5): Gruppen-▼-Toggle -- natives <button> statt MudIconButton
   (MudBlazor#5168-Kollision OnClick + @onclick:stopPropagation, s. Razor-Kommentar an der
   Aufrufstelle). Kein ::deep noetig -- das <button> wird direkt in DIESER Komponente authored,
   traegt also das b-scope-Attribut (Praezedenz-Gegenteil zu .serial-retex-sn-link oben, das per
   RenderTreeBuilder gebaut wird). Reset des Browser-Default-Buttonlooks, damit es wie ein
   Icon-Button wirkt. */
.serial-gruppe-toggle[b-y2sqluu6yo] {
    background: none;
    border: none;
    padding: 0;
    margin-right: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* v1.9 T4 (Spec §14.3 Pkt.1): eingerueckte Unter-Belege (nur bei Gruppen-Expand sichtbar) -- ::deep
   + Scope-Wrapper-Div (.serial-lebenslauf, s. Seriennummern.razor) noetig, RowClassFunc-Klassen
   landen auf MudBlazor-eigenen <tr>-Elementen ohne b-scope-Attribut (Praezedenz OrdersTable.razor.css
   .orders-table ::deep .order-head-row -- FIX-Lesson oben zu .serial-retex-sn-link gilt analog: eine
   nackte .serial-gruppe-kind-Regel ohne ::deep + Wrapper wuerde zu .serial-gruppe-kind[b-scope]
   kompilieren und NIE matchen). Einrueckung NUR auf der Beleg-Zelle (Baum-Optik), nicht auf der
   ganzen Zeile -- sonst verschieben sich alle Spalten sichtbar gegeneinander. */
.serial-lebenslauf[b-y2sqluu6yo]  tr.serial-gruppe-kind td[data-label='Beleg'] {
    padding-left: 32px;
}

/* v1.9 T5 (Spec §14.4 Pkt.1/4, B7): Positionen-Trigger -- natives <button> (gleiche MudBlazor#5168-
   Kollisions-Begruendung wie .serial-gruppe-toggle oben). Kein ::deep noetig -- direkt in DIESER
   Komponente authored, traegt das b-scope-Attribut. Gleicher Button-Reset. */
.serial-positionen-btn[b-y2sqluu6yo] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
/* /Areas/Developer/VorgangPositionenDialog.razor.rz.scp.css */
/* v1.9 T5 (Spec §14.4 Pkt.2/3, B13-Reuse): SN-Link-Optik -- Praezedenz Seriennummern.razor.css
   .serial-retex-sn-link (identische Root-Cause-Lesson: <a>/<span> werden per RenderTreeBuilder in
   RenderSn (@code, VorgangPositionenDialog.razor) gebaut, NICHT direkt aus dieser .razor-Datei
   kompiliert -> bekommen KEIN b-scope-Attribut. Eine nackte .vpd-sn-link-Regel wuerde zu
   .vpd-sn-link[b-scope] kompilieren und NIE matchen. Fix: ::deep-Regel, verankert an .vpd-sn-scope --
   einem eigens dafuer eingefuegten plain <div> um die Positionen-Tabelle, dessen Wurzelelement
   echtes Markup DIESER Komponente ist und daher das Scope-Attribut TRAEGT. */
.vpd-sn-scope[b-zeur32v5wg]  .vpd-sn-link {
    text-decoration: underline;
    color: var(--mud-palette-primary, #594AE2);
}

/* Runde 110 Task 8 (Brief 8d/8e, Praezedenz Task 7 AuftragHistorie.razor.css .ah-posten-freitext-
   zeile/-zelle): Freitext-/Leerzeilen-Positionen (Art 4/5, SerialPosition.Freitext). KEIN ::deep
   noetig -- anders als .vpd-sn-link (per RenderTreeBuilder gebaut) ist tr.vpd-position-freitext-
   zeile/td.vpd-freitext-zelle regulaeres Razor-Markup dieser .razor-Datei und traegt daher das
   b-scope-Attribut direkt. Zeile bleibt weiss: diese Tabelle hat HEUTE kein Zebra (verifiziert --
   plain "table table-sm vpd-positionen-table" ohne table-striped, keine nth-child-Regel in dieser
   Datei), also gibt es keine Zebra-Farbe zu unterlaufen; die explizite #fff-Deklaration ist reine
   Konsistenz mit der Task-7-Praezedenz (dort Kontrastanker gegen echtes Zebra). Zell-Styling
   optisch abgesetzt (kursiv/gedaempft) + white-space:pre-wrap fuer erhaltene Umbrueche
   (Praezedenz .adr-bemerkung-text, Adressen.razor.css). */
tr.vpd-position-freitext-zeile[b-zeur32v5wg] {
    background: #fff;
}

td.vpd-freitext-zelle[b-zeur32v5wg] {
    white-space: pre-wrap;
    font-style: italic;
    color: var(--mud-palette-text-secondary, #6e6e6e);
}
/* /Areas/Developer/ZeitraumCard.razor.rz.scp.css */
/* Stage 1b-A Task 6 Step 1: Jahr-/Quartal-Chips sollen auf schmalen Bildschirmen umbrechen statt die
   Card zu ueberlaufen (::deep noetig -- MudChipSet ist eine Kind-Komponente, ihr Root traegt nicht das
   b-scope-Attribut dieser Datei, Praezedenz Adressen.razor.css .adr-such-gruppe-Kommentar). MudChipSet
   flext bereits intern, aber ohne ein explizites flex-wrap auf dem MudBlazor-eigenen Root ueberlaeuft
   eine lange Jahresliste auf sehr schmalen Viewports seitlich statt umzubrechen. */
.zr-jahr-chips[b-cvlm1cooef]  .mud-chipset,
.zr-quartal-chips[b-cvlm1cooef]  .mud-chipset {
    flex-wrap: wrap;
}

.zr-modus-toggle[b-cvlm1cooef] {
    flex-wrap: wrap;
}
/* /Areas/PlentyConnector/Dashboard.razor.rz.scp.css */
/* polish2 #4: Von/Bis + square sync icon-button in one row so the free-range card matches the
   fixed-window cards' height. align-items:flex-end keeps the square button level with the picker
   inputs (the floating labels sit above). */
.range-row[b-omol9ve7au] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.range-row[b-omol9ve7au]  .range-date {
    max-width: 140px;
}

/* Square button, height matched to the dense date inputs. */
.range-row[b-omol9ve7au]  .apply-range-btn {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
/* /Areas/PlentyConnector/OrdersTable.razor.rz.scp.css */
/* polish3 #2: subtle tint on every order DATA row so a new order is recognizable at a glance
   (the default-expanded position sub-rows stay plain white). Single-class specificity stays below
   MudBlazor's :hover rule, so hover highlighting still wins. */
.orders-table[b-mdk2a4qgtw]  .order-head-row {
    background-color: rgba(0, 107, 183, 0.06);
}

/* N4: return rows (TypeId==3) shown in orange Schriftfarbe (text color) per design §N4. */
.orders-table[b-mdk2a4qgtw]  .order-return-row td {
    color: #b35900;
}

/* N10: cancelled sale rows (TypeId==1 + RetourenReferenz set) shown in red Schriftfarbe. */
.orders-table[b-mdk2a4qgtw]  .order-cancelled-row td {
    color: #c0262d;
}

/* N11: duplicate rows dimmed grey — order-duplicate-row is checked first in OrderRowClass so grey dominates. */
.orders-table[b-mdk2a4qgtw]  .order-duplicate-row td {
    color: #9e9e9e;
}
/* /Areas/PlentyConnector/PlentySyncBanner.razor.rz.scp.css */
/* polish2 #1 (moved here with the banner): MudAlert message defaults to flex:0 1 auto (shrinks to
   content) -> the inner flex never reaches the right edge. Force it full-width so the Sync button sits
   flush right inside the banner. ::deep reaches the MudAlert child-component DOM. */
.plenty-banner[b-h62nqxdeud]  .mud-alert-message {
    flex: 1 1 auto;
    width: 100%;
}
/* /Areas/PlentyConnector/Verkaeufe.razor.rz.scp.css */
/* Fix B v2 (N10): Versand/Gebühren summary value rendered as plain MudText subtitle1
   (identical typography/alignment to the other three summary fields) but clickable.
   Hover underline signals interactivity without introducing button chrome. */
.fees-summary-value:hover[b-7pvtd28jcd] {
    text-decoration: underline;
}
/* /Components/AccountGate.razor.rz.scp.css */
.session-recovery[b-8n9e2x9gjb] { display:flex; gap:.75rem; align-items:center; justify-content:center; padding:2rem; }
.session-recovery-spinner[b-8n9e2x9gjb] {
    width:1.25rem; height:1.25rem; border:3px solid #ccc; border-top-color:#1976d2;
    border-radius:50%; animation:session-recovery-spin-b-8n9e2x9gjb .8s linear infinite;
}
@keyframes session-recovery-spin-b-8n9e2x9gjb { to { transform:rotate(360deg); } }
/* /Components/BuildBadge.razor.rz.scp.css */
/* Dezenter Build-Info-Badge — fixed bottom-right, nicht interaktiv. */
.build-badge[b-7sn7e8wp5e] {
    position: fixed;
    bottom: 4px;
    right: 8px;
    font-size: 11px;
    color: #888;
    opacity: .7;
    z-index: 1000;
    pointer-events: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: nowrap;
    user-select: none;
}
/* /Components/Layout/AppHeader.razor.rz.scp.css */
.app-brand[b-bk1aykha6m] {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    overflow: hidden;
}

.brand-logo[b-bk1aykha6m] { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; }

.brand-full[b-bk1aykha6m], .brand-short[b-bk1aykha6m] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.brand-short[b-bk1aykha6m] { display: none; }

    .app-brand:hover[b-bk1aykha6m] {
        color: #fff;
        text-decoration: none;
    }

.app-header-trailing[b-bk1aykha6m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .app-header-trailing[b-bk1aykha6m] { gap: .5rem; }
    .brand-full[b-bk1aykha6m] { display: none; }
    .brand-short[b-bk1aykha6m] { display: inline; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-5sqir93bc7] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5sqir93bc7] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation styling is provided by MudNavMenu (Stage 19). */

/* Stage-32 #5: .nav-group-title ::deep .nav-group-icon removed — cart icon moved to MudNavGroup Icon= gutter. */
/* .nav-group-title display:inline-flex retained for potential future inline icon use; currently inert. */
.nav-group-title[b-s4cqw01qb6] {
    display: inline-flex;
    align-items: center;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8y72kibzwd],
.components-reconnect-repeated-attempt-visible[b-8y72kibzwd],
.components-reconnect-failed-visible[b-8y72kibzwd],
.components-pause-visible[b-8y72kibzwd],
.components-resume-failed-visible[b-8y72kibzwd],
.components-rejoining-animation[b-8y72kibzwd] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-retrying[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-failed[b-8y72kibzwd],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8y72kibzwd] {
    display: block;
}


#components-reconnect-modal[b-8y72kibzwd] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8y72kibzwd 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8y72kibzwd 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8y72kibzwd 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8y72kibzwd]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-8y72kibzwd 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8y72kibzwd {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8y72kibzwd {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8y72kibzwd {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8y72kibzwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8y72kibzwd] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8y72kibzwd] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8y72kibzwd] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-8y72kibzwd] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-8y72kibzwd] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8y72kibzwd] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8y72kibzwd 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8y72kibzwd] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8y72kibzwd {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.avatar[b-0q94blpavc] {
    width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .5); display: block; background: #3a0647;
}

.user-menu-head[b-0q94blpavc] { display: flex; gap: .6rem; align-items: center; padding: .4rem .5rem .6rem; }
.user-menu-head .avatar[b-0q94blpavc] { width: 2.5rem; height: 2.5rem; border-color: rgba(0, 0, 0, .1); }
.user-menu-id[b-0q94blpavc] { min-width: 0; }
.user-name[b-0q94blpavc] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mail[b-0q94blpavc] { font-size: .85rem; color: #5a6b7b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verified[b-0q94blpavc] { color: #0f766e; }

.user-menu-item[b-0q94blpavc] {
    display: block; width: 100%; padding: .5rem; border-radius: .375rem;
    color: #213547; text-decoration: none; text-align: left; font: inherit;
}
.user-menu-item:hover[b-0q94blpavc] { background: #f1f3f5; }
.user-menu-logout[b-0q94blpavc] { padding: 0; margin: 0; }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Components/Pages/Home.razor.css — neutral landing page. Brand tokens mirror Login.razor.css; icons reuse the NavMenu Bootstrap SVGs in brand navy. */
.home[b-a3hzvibm7f] { max-width: 56rem; margin: 2.5rem auto; padding: 0 1rem; }

.home-greet[b-a3hzvibm7f] { color: #5a6b7b; font-size: 1.05rem; margin-bottom: .25rem; }
.home-title[b-a3hzvibm7f] { font-size: 1.9rem; font-weight: 700; color: rgb(5, 39, 103); margin: 0 0 1.75rem; }

.home-tiles[b-a3hzvibm7f] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .home-tiles[b-a3hzvibm7f] { grid-template-columns: 1fr; } }

.tile-ico[b-a3hzvibm7f] { width: 30px; height: 30px; display: block; margin-bottom: .6rem;
    background-size: contain; background-position: center; background-repeat: no-repeat; }
/* Task 3 (gui-polish-104): Bootstrap-Icons "box-seam" -- Pfad verifiziert gegen
   raw.githubusercontent.com/twbs/icons (main, icons/box-seam.svg) UND
   cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/box-seam.svg (identisch), 1 <path>-Element
   1:1 uebernommen (Konvention: Icon-Pfad NICHT raten/aus Prompt uebernehmen). */
.ico-artikel[b-a3hzvibm7f] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23052767' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/%3E%3C/svg%3E"); }
/* Memo-Finding #2 Option A (dashboard-serial-tile): Bootstrap-Icons "upc-scan" (Barcode) --
   Pfad verifiziert gegen raw.githubusercontent.com/twbs/icons (main, icons/upc-scan.svg) UND
   cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/upc-scan.svg (identisch). */
.ico-serial[b-a3hzvibm7f] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23052767' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5M.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5M3 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0z'/%3E%3C/svg%3E"); }
/* T10 (Spec design.md §5.3, adress-info): Bootstrap-Icons "person-rolodex" -- Pfad verifiziert
   gegen raw.githubusercontent.com/twbs/icons (main, icons/person-rolodex.svg) UND
   cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/person-rolodex.svg (identisch), 2 <path>-
   Elemente 1:1 uebernommen (Konvention: Icon-Pfad NICHT raten/aus Prompt uebernehmen). */
.ico-adress[b-a3hzvibm7f] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23052767' viewBox='0 0 16 16'%3E%3Cpath d='M8 9.05a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3Cpath d='M1 1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h.5a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h.5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H6.707L6 1.293A1 1 0 0 0 5.293 1zm0 1h4.293L6 2.707A1 1 0 0 0 6.707 3H15v10h-.085a1.5 1.5 0 0 0-2.4-.63C11.885 11.223 10.554 10 8 10c-2.555 0-3.886 1.224-4.514 2.37a1.5 1.5 0 0 0-2.4.63H1z'/%3E%3C/svg%3E"); }

.tile-name[b-a3hzvibm7f] { font-weight: 700; color: rgb(5, 39, 103); font-size: 1.05rem; }
/* Task 3 (gui-polish-104): flex-grow zieht die Beschreibung auf die verfuegbare Hoehe -- die
   3 Karten stretchen im Grid (Default align-items:stretch) auf dieselbe Hoehe, mit flex-grow auf
   .tile-desc rutschen Suchleiste + Badge IMMER an den unteren Card-Rand (buendig ueber alle 3
   Karten hinweg), unabhaengig von der Beschreibungslaenge. */
.tile-desc[b-a3hzvibm7f] { color: #6a7886; font-size: .85rem; line-height: 1.45; margin-top: .35rem; flex-grow: 1; }
.tile-badge[b-a3hzvibm7f] { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: .3rem; padding: .15rem .5rem; margin-top: .7rem; }
.badge-live[b-a3hzvibm7f] { background: #d1f0e0; color: #0f766e; }

.home-status[b-a3hzvibm7f] { margin-top: 1.6rem; padding: .55rem .9rem; background: #f4f6f9; border-radius: .5rem;
    color: #5a6b7b; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.home-status .status-dot[b-a3hzvibm7f] { color: #0f766e; }
.home-status .status-down[b-a3hzvibm7f] { color: #b42318; font-weight: 600; }
.home-status .status-muted[b-a3hzvibm7f] { color: #8895a4; }

/* Task 3 (gui-polish-104): Artikel-Schnellsuche -- 1:1 dieselbe Chrome/Flex-Gruppen-Mechanik wie
   .home-adress-card/.home-serial-card unten (Formular-Card, BEWUSST KEIN Hover-Lift; grid-column
   NICHT gesetzt -- belegt eine normale 1/3-Grid-Spalte als ERSTE Kachel). display:flex +
   flex-direction:column + align-items:flex-start (kombiniert mit .tile-desc{flex-grow:1} oben)
   sorgt fuer die Karten-Hoehen-Buendigkeit: Grid-Stretch (Default align-items:stretch) gleicht
   alle 3 Karten auf dieselbe Hoehe an, die wachsende Beschreibung schiebt Suchleiste+Badge an den
   unteren Rand -- Felder/Buttons liegen so ueber alle 3 Karten auf gleicher Hoehe. */
.home-artikel-card[b-a3hzvibm7f] { display: flex; flex-direction: column; align-items: flex-start;
    background: #fbfcfe; border: 1px solid #e2e7ee; border-radius: .6rem; padding: 1.1rem 1.1rem 1.2rem; }

.home-artikel-gruppe[b-a3hzvibm7f] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; max-width: 100%; }
.home-artikel-gruppe[b-a3hzvibm7f]  .home-artikel-feld { flex: 0 0 auto; min-width: 0; }

/* W2-T4 (Plan gui-conventions, D1) + Memo-Finding #2 Option A (dashboard-serial-tile,
   2026-07-14): Dashboard-Card Seriennummern-Schnellsuche -- an die frueheren Link-Kacheln
   angeglichen (Icon + Badge, s. .ico-serial oben + die geteilten .tile-name/.tile-desc/
   .tile-badge-Regeln), belegt als DRITTE Kachel (Task 3 gui-polish-104: Artikel -> 1., Adresse ->
   2.) eine normale 1/3-Grid-Spalte (KEIN grid-column: 1 / -1 -- abgeloest die fruehere "volle
   Breite unten"-Platzierung). BEWUSST KEIN Hover-Lift auf dieser Card -- sie ist ein Formular,
   kein Link. */
.home-serial-card[b-a3hzvibm7f] { display: flex; flex-direction: column; align-items: flex-start;
    background: #fbfcfe; border: 1px solid #e2e7ee; border-radius: .6rem; padding: 1.1rem 1.1rem 1.2rem; }

/* Flex-Gruppe Feld+Button (Konvention Welle 2, gui/CLAUDE.md "Input-Felder-Konvention" -- Praezedenz
   .serial-quick-gruppe/Seriennummern.razor.css): das MudTextField-Root ist flex:1 1 auto und wuerde
   ohne diesen inneren Wrapper den verfuegbaren Platz der aeusseren MudStack fuellen und den Button an
   den Rand druecken. ::deep ist noetig, weil .home-serial-feld auf dem Root-Element der MudTextField-
   Kind-Komponente sitzt (nicht Teil dieses Scopes). In der schmalen 1/3-Spalte wrapt der Button ggf.
   unter das Feld -- das ist ok. */
.home-serial-gruppe[b-a3hzvibm7f] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; max-width: 100%; }
.home-serial-gruppe[b-a3hzvibm7f]  .home-serial-feld { flex: 0 0 auto; min-width: 0; }

/* T10 (Spec design.md §5.3, adress-info): Adress-Schnellsuche -- 1:1 dieselbe Chrome/Flex-Gruppen-
   Mechanik wie .home-serial-card/.home-serial-gruppe oben (Formular-Card, BEWUSST KEIN
   Hover-Lift; grid-column NICHT gesetzt -- belegt eine normale 1/3-Grid-Spalte als ZWEITE Kachel,
   Task 3 gui-polish-104: Artikel-Card -> 1.). */
.home-adress-card[b-a3hzvibm7f] { display: flex; flex-direction: column; align-items: flex-start;
    background: #fbfcfe; border: 1px solid #e2e7ee; border-radius: .6rem; padding: 1.1rem 1.1rem 1.2rem; }

.home-adress-gruppe[b-a3hzvibm7f] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; max-width: 100%; }
.home-adress-gruppe[b-a3hzvibm7f]  .home-adress-feld { flex: 0 0 auto; min-width: 0; }
/* /Components/Pages/Login.razor.rz.scp.css */
/* The page chrome (gradient background, card, brand, hint) now comes from PreAuthCard.
   The Google sign-in button is now a MudButton — no page-local button styles needed. */
/* /Shared/EnvironmentBadge.razor.rz.scp.css */
/* Env-Badge im Header-Trailing — gleiche Hoehe + Stil wie der API-Badge (.server-status 2.2rem). */
/* env-badge-btn: resets MudBlazor/Bootstrap global <button> styles so a native button renders
   identically to the former <span role=button>. Native button: Enter+Space activate without
   page-scroll; Tab focus works by default. */
.env-badge-btn[b-0fh4pw3w93] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline-offset: 2px;
}

.env-badge[b-0fh4pw3w93] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 2.2rem;
    padding: 0 .6rem;
    border: 1.5px solid currentColor;
    border-radius: .35rem;
    background-color: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.env-text[b-0fh4pw3w93] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
}

.env-prefix[b-0fh4pw3w93] {
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #ced4da;            /* gedaempft — nicht in der Env-Farbe */
}

.env-name[b-0fh4pw3w93] {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.env-warn[b-0fh4pw3w93] {
    font-size: 1.05rem;
    line-height: 1;
}

.env-dev[b-0fh4pw3w93]  { color: #2ecc40; }   /* gruen — Develop-Clone (wie API-OK) */
.env-live[b-0fh4pw3w93] { color: #ff4136; }   /* rot — Produktiv (wie API-Down) */
.env-unknown[b-0fh4pw3w93] { color: #adb5bd; }
.env-badge.env-production[b-0fh4pw3w93] { background: var(--mud-palette-error, #b00020); color: #fff; }   /* Stage 20: hard red Production-Data override */
/* /Shared/NotizenDialog.razor.rz.scp.css */
/* Adressen-Polish Task 12 (Spec §10.7): "scrollbar bei langem Inhalt" -- Notizen koennen (nach dem
   varchar(max)-Widening, §10.2) sehr lang sein; ohne max-height waechst die MudDialog-Box unbegrenzt
   mit dem Viewport mit. */
.ntz-inhalt[b-attu70jrb4] {
    max-height: 60vh;
    overflow-y: auto;
}
/* /Shared/PageIntro.razor.rz.scp.css */
/* Shared/PageIntro.razor.css — page header block. Brand tokens mirror Home/Login; note uses CAS blue. */
.page-intro[b-hnnx1ckuzq] { margin: 0 0 2.8rem; }
.page-intro-title[b-hnnx1ckuzq] { font-size: 1.5rem; font-weight: 700; color: rgb(5, 39, 103); margin: 0; }
.page-intro-lead[b-hnnx1ckuzq] { color: #5a6b7b; font-size: .92rem; margin-top: .3rem; }
.page-intro-note[b-hnnx1ckuzq] { margin-top: .7rem; display: inline-flex; gap: .5rem; align-items: flex-start;
    background: #eef4fb; border-left: 3px solid #004f9f; border-radius: .3rem;
    padding: .45rem .7rem; font-size: .82rem; color: #33526f; }
.page-intro-note strong[b-hnnx1ckuzq] { color: #004f9f; }
/* /Shared/PreAuthCard.razor.rz.scp.css */
.preauth-page[b-qboji5nk2v] { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgb(5,39,103) 0%, #3a0647 100%); padding: 1rem; }

/* MudPaper is a child component -> its rendered .preauth-card div does NOT carry THIS file's scope
   attribute, so a plain `.preauth-card {}` (compiled to `.preauth-card[b-xxx]`) would not match it.
   Anchor on `.preauth-page` (direct markup in PreAuthCard.razor -> scoped) + `::deep` so the rule
   reaches the MudPaper. This restores the card padding/max-width that the MudBlazor migration dropped. */
.preauth-page[b-qboji5nk2v]  .preauth-card { background: #fff; border-radius: .75rem; box-shadow: 0 10px 40px rgba(0,0,0,.25);
    padding: 2.5rem; max-width: 26rem; width: 100%;
    display: flex; flex-direction: column; gap: 1rem; }

/* even vertical spacing between fields/button/alert inside the EditForm (and the raw account forms) */
.preauth-page[b-qboji5nk2v]  form { display: flex; flex-direction: column; gap: 1rem; margin: 0; }

/* brand/title are direct markup in PreAuthCard.razor -> the scoped rule applies directly (no ::deep);
   explicit margins removed so the card's flex `gap` handles spacing uniformly. */
.preauth-brand[b-qboji5nk2v] { font-size: 1.4rem; font-weight: 700; color: rgb(5,39,103); text-align: center; margin: 0; }
.preauth-title[b-qboji5nk2v] { font-weight: 600; color: #1f2d3a; text-align: center; margin: 0; }

/* info texts live in the page ChildContent (MudPaper child) -> re-anchored via `.preauth-page ::deep`;
   centered per design. (`::deep label/input/.preauth-readonly/.preauth-btn/.preauth-link` were removed
   in the MudBlazor migration — MudTextField/MudButton bring their own styling.) */
.preauth-page[b-qboji5nk2v]  .preauth-hint { color: #5a6b7b; text-align: center; margin: 0; }
.preauth-page[b-qboji5nk2v]  .preauth-error { color: #991b1b; }
.preauth-page[b-qboji5nk2v]  .preauth-signed-out { color: #0f766e; font-weight: 600; text-align: center; }
/* /Shared/ReferrerAvatar.razor.rz.scp.css */
/* polish2 #3: marketplace logos larger — height fills the table row (was a tiny 28x28 square).
   width:auto keeps each logo's aspect ratio (wide ones like Metro grow instead of being letterboxed);
   the initials-SVG fallback (onerror) scales to the same box. */
.referrer-avatar[b-il6cj0fan3] {
    height: 36px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
    border-radius: 4px;
    vertical-align: middle;
}
/* /Shared/ServerStatusIndicator.razor.rz.scp.css */
/* "API"-Status-Badge im Header-Trailing. Rahmen UND Text faerben sich nach Status. */
.server-status[b-g5k208wbcv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2.2rem;
    border: 1.5px solid #adb5bd;
    border-radius: 0.35rem;
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.api-label[b-g5k208wbcv] {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #adb5bd;
    transition: color 0.2s ease;
}

.server-status.status-ok[b-g5k208wbcv] { border-color: #2ecc40; }
.server-status.status-ok .api-label[b-g5k208wbcv] { color: #2ecc40; }

.server-status.status-degraded[b-g5k208wbcv] { border-color: #ffc107; }
.server-status.status-degraded .api-label[b-g5k208wbcv] { color: #ffc107; }

.server-status.status-down[b-g5k208wbcv] { border-color: #ff4136; }
.server-status.status-down .api-label[b-g5k208wbcv] { color: #ff4136; }

.server-status.status-unknown[b-g5k208wbcv] { border-color: #adb5bd; }
.server-status.status-unknown .api-label[b-g5k208wbcv] { color: #adb5bd; }
/* /Shared/StatusBadge.razor.rz.scp.css */
.status-badge[b-a8d1hqfwkm] { padding: .1rem .5rem; border-radius: 1rem; font-size: .78rem; font-weight: 600; }
.status-active[b-a8d1hqfwkm]   { background: #dcfce7; color: #166534; }
.status-pending[b-a8d1hqfwkm]  { background: #fef9c3; color: #854d0e; }
.status-rejected[b-a8d1hqfwkm] { background: #fee2e2; color: #991b1b; }
.status-disabled[b-a8d1hqfwkm] { background: #e5e7eb; color: #374151; }
.status-unknown[b-a8d1hqfwkm]  { background: #e5e7eb; color: #374151; }