/* /Areas/Admin/Admin.razor.rz.scp.css */ tr.pending[b-rphgjts9lm] { background-color: #fff3cd; } /* /Areas/Admin/Kanaele.razor.rz.scp.css */ /* Webhook-Key-Verwaltung, Stufe 2. Die Feld-Gruppe folgt der Input-Konvention aus gui/CLAUDE.md: das MudTextField-Root ist flex: 1 1 auto und wuerde ohne diese Gruppe den Platz der aeusseren Row fuellen und den Button an den Rand druecken. ::deep ist noetig, weil die Feld-Klasse auf der Wurzel der Kind-Komponente sitzt und dort kein b-scope-Attribut dieser Datei traegt. */ .kanal-feld-gruppe[b-efmp1ef4rd] { display: flex; flex: 0 0 auto; min-width: 0; } .kanal-feld-gruppe[b-efmp1ef4rd] .kanal-wert-feld, .kanal-feld-gruppe[b-efmp1ef4rd] .kanal-fingerabdruck-feld { flex: 0 0 auto; min-width: 0; max-width: 480px; width: 480px; } .kanal-feld-gruppe[b-efmp1ef4rd] .kanal-fingerabdruck-feld { max-width: 260px; width: 260px; } .kanal-abdruecke code[b-efmp1ef4rd] { font-size: 0.95em; letter-spacing: 0.03em; } /* Herkunfts-Zeile: gedaempft, weil sie eine Einordnung ist und keine Zahl -- "laut Eintrag" bzw. "laut Rueckmeldung" gegen "gemessen". */ .kanal-herkunft[b-efmp1ef4rd] { opacity: 0.7; font-style: italic; } .kanal-einzeiler[b-efmp1ef4rd] { background: #e8edf4; border-radius: 4px; padding: 0.6rem 0.8rem; overflow-x: auto; font-size: 0.85em; margin: 0.4rem 0 0; } .kanal-probe-detail[b-efmp1ef4rd] { opacity: 0.75; } /* /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
(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 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
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%; } /* Plan 56 A9 (Rolf 2026-09-26): Kopf-Card bleibt beim Scrollen unter der fixierten App-Leiste stehen. ".adr-detail-kopf" sitzt auf der MudCard selbst (Kind-Komponente, ihr Root-Element traegt NICHT das b-Scope-Attribut dieser Datei, s. .adr-such-gruppe-Kommentar oben zur allgemeinen ::deep-Regel) -- MudCard ist hier aber das direkte, oberste Element seines @if-Zweigs, OHNE literalen Vorfahren INNERHALB dieser Datei, an den ein "::deep"-Selektor die Scope-Bedingung haengen koennte (empirisch verifiziert: ein bare "::deep .foo" ohne vorangehenden Selektor kompiliert zu "[b-scope] .foo" -- ein Nachfahren-Selektor, der einen ELTERN mit dem Scope-Attribut braucht; ohne wrappenden literalen Vorfahren traf das nichts). Deshalb ein neuer literaler Wrapper-
("adr-detail-kopf-sticky", traegt das b-Scope-Attribut wie jedes literale Element dieser Datei automatisch, s. .adr-detail-kopf-zeile unten) -- er traegt jetzt das frühere "mt-2" der Karte (Margin-Collapse-Vermeidung: ein Margin auf dem GEKIND, nicht auf dem sticky-Wrapper selbst, koennte sonst oben aus dessen Box herauskollabieren). top = dieselbe Formel wie MudBlazors eigener Inhalts-Versatz unter der App-Leiste (Review F3, 2026-09-26): ".mud-main-content" (der Container, der den gesamten Seiteninhalt inkl. dieser Karte nach unten schiebt, damit er nicht unter der fixierten AppBar startet) setzt "padding-top" NICHT einheitlich auf "var(--mud-appbar-height)", sondern breakpoint-abhaengig (gegen die reale ~/.nuget/packages/mudblazor/9.5.0/staticwebassets/MudBlazor.min.css verifiziert, nicht geraten): Basis (unbedingt) "calc(h - h/8)", darueber "@media (min-width: 0px) and (orientation: landscape)" "calc(h - h/4)", darueber "@media (min-width: 600px)" "h" (volle Hoehe) -- bei gleicher Selektor- Spezifitaet gewinnt die zuletzt im Stylesheet stehende, zutreffende Regel, in dieser Reihenfolge. Eine feste "top: var(--mud-appbar-height)" waere unter 600px Breite (Hochformat: 7/8 h, Querformat: 3/4 h) zu GROSS -- die Karte bliebe dann ein paar Pixel ZU WEIT unten stehen (kleine Luecke zur echten AppBar-Unterkante) statt direkt darunter anzuschliessen. Die drei Regeln hier spiegeln daher 1:1 dieselben drei Faelle/dieselbe Reihenfolge. z-index 10: klar UEBER normalem Seiteninhalt (kein eigenes z-index, Stapelkontext 0) und klar UNTER jedem MudBlazor-Overlay -- Drawer 1100, Popover 1200, AppBar 1300, Dialog 1400, Snackbar 1500, Tooltip 1600 (Reflection-Probe gegen "new MudTheme().ZIndex" auf MudBlazor 9.5.0). Deckender Hintergrund (var(--mud-palette-surface), identisch zum MudCard-Default) noetig, weil sonst durchscrollender Seiteninhalt durch den mt-2-Zwischenraum ueber der Karte schimmern wuerde; dezenter Schatten unten macht die fixierte Kante sichtbar. */ .adr-detail-kopf-sticky[b-tp6g41ih8d] { position: sticky; top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8); z-index: 10; background-color: var(--mud-palette-surface); box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.35); } @media (min-width: 0px) and (orientation: landscape) { .adr-detail-kopf-sticky[b-tp6g41ih8d] { top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4); } } @media (min-width: 600px) { .adr-detail-kopf-sticky[b-tp6g41ih8d] { top: var(--mud-appbar-height); } } /* Plan 56 A4: Kopf-Card -- Nummer/Suchbegriff/Badges links, Umschalter fuer die rechte Spalte rechts. */ .adr-detail-kopf-zeile[b-tp6g41ih8d] { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Task 12 (A6, .superpowers/sdd/runde-110/task-12-brief.md): Kontakt-Card zweispaltig statt der frueheren 4-spaltigen -- 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-
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
, 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 -- 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 ): 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-
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 `... @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; } /* Plan 48 T4 (design.md §4.3): USt-IdNr.-Block in der Kaufmaennisch-Card -- wiederverwendet die .adr-kontakt-zeile/-label/-wert-Regeln (128-175), bewusst NICHT .adr-kontakt-container/-grid (die bringen die Container-Query und das zweispaltige Layout mit, hier ist der Block einspaltig unter der Umsatz-Tabelle). */ .adr-ustid-block[b-tp6g41ih8d] { margin-top: .75rem; } .adr-ustid-nummer[b-tp6g41ih8d] { font-family: monospace; margin-right: .25rem; } .adr-ustid-block .adr-kontakt-zeile:last-child[b-tp6g41ih8d] { border-bottom: 0; } /* /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
-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 // 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; } /* Plan 45 E5: Warnsymbol neben der FIFO-eff.-Zelle (MudIcon, Kind-Komponente -> ::deep). Bewusst ohne bUnit-Test/Kill (bUnit rendert kein CSS) -- Optik wird im Live-Smoke geprueft (Plan-45 §4.7). Plan 49: Klasse arb-fifo-warn sitzt jetzt auf dem Wrapper-Span, das Icon traegt arb-fifo-warn-icon. */ .arb-table[b-b9kq8om8zv] .arb-fifo-warn-icon { vertical-align: middle; margin-left: .25rem; } /* /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). */ /* 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--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-/ der MudTable-Kind-Komponente kein b-scope- Attribut dieser Datei tragen (Wrapper .mr-tabellen ist das eigene Element). */ .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-a { background-color: #e8edf4; } .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-b { background-color: #d4dfec; } /* A6 Punkt 3 (Abnahme a2-test-148): die Tabelle nimmt nur die Breite ihres Inhalts ein (nicht mehr 100% des .mud-table-container) -- links ausgerichtet (Tabellen sind per Default linksbuendig, kein zusaetzliches margin:auto noetig, gegen MudBlazor.min.css geprueft: .mud-table-root traegt nur width:100%, kein margin). Bei vielen Spalten bleibt HorizontalScrollbar (.mud-table-container{overflow-x:auto}) unveraendert wirksam -- width:auto aendert nur, WIE breit die Tabelle wird, nicht OB der Container scrollt. Gilt fuer VK und EK (beide teilen den Wrapper .mr-tabellen ::deep-Selektor). */ .mr-tabellen[b-k2xrv5cui3] table.mud-table-root { width: auto; } /* A6 Punkt 1 (Abnahme a2-test-148): erste zwei Spalten (Auswahl-Checkbox + Modellreihe) bleiben beim waagerechten Scrollen sichtbar. Scroll-Container ist MudTables eigenes
(overflow-x:auto, MudBlazor.min.css, HorizontalScrollbar="true") ZWISCHEN unserem .mr-tabellen-Wrapper und
-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
Bootstrap elements -> scoped CSS reaches them directly (no ::deep needed). Stage-32 #7 BUG-FIX: Bootstrap sets color directly on via `.table > :not(caption) > * > *` (bootstrap.css ~1878), overriding inherited
tragen kein b-scope-Attribut dieser Datei) UND die farbige Beleg-Kopfzeile im Beide-Modus (GroupHeaderTemplate setzt dieselben Klassen auf die spannende -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 . */ .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); } /* Review F6: Fusszeile (Plan 55 §4.4 Export-Knopf + Plan 56 A10.1 Anzahl-Text) -- Text und Export-Knopf nebeneinander, vertikal zentriert (der MudIconButton ist hoeher als der reine Textinhalt). */ .ah-export-zeile[b-fkbnevc74a] { display: flex; align-items: center; gap: 8px; } /* /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
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%; } /* Plan 53 A4: Zebra (gui/CLAUDE.md Tabellen-Konvention, Praezedenz AuftragHistorie.razor.css) -- RowClassFunc liefert mr-zeile-a/-b; ::deep, weil die
-- position:sticky greift gegen den naechsten SCROLLENDEN Vorfahren, nicht gegen den unmittelbaren Elternknoten, .mr-tabellen selbst muss also nicht der Scroll-Container sein (gegen die MudBlazor-9.5.0-CSS verifiziert, nicht geraten). Spalte 1 (Checkbox: mr-th-filter Kopfzeile 1, mr-th-auswahl Kopfzeile 2, mr-td-auswahl Daten, mr-tf-auswahl Fuss) bekommt eine FESTE Breite (Variable) -- sonst waere der linke Versatz von Spalte 2 instabil (Filter-Icon/ Checkbox/leere Fusszelle sind unterschiedlich breit). Spalte 2 (Modellreihe: mr-th-name mit rowspan 2, mr-td-name, mr-tf-titel "Summe") liegt bei left: var(--mr-auswahl-breite). Deckender Hintergrund je Zeilentyp: sticky loest die Zelle aus dem normalen Stapel-Kontext, die Zebra-Farbe sitzt aber auf dem (gui/CLAUDE.md Tabellen-Zebra-Konvention) -- OHNE eigene Zellfarbe schiene der durchscrollende Inhalt dahinter durch. Codex-Finding F2 (2026-09-26, gegen MudBlazor.min.css 9.5.0 NACHVERIFIZIERT): Kopf-/Fusszellen sind NICHT unconditional deckend -- die einzigen passenden MudBlazor-Regeln sind ".mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell,.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-loading{background-color:var(--mud-palette-surface); position:sticky;z-index:2}" bzw. ".mud-table-sticky-footer * .mud-table-root .mud-table-foot * .mud-table-cell{background-color:var(--mud-palette-surface)}" -- BEIDE gaten hinter den Modifikatorklassen "mud-table-sticky-header"/"mud-table-sticky-footer", die MudTable nur bei FixedHeader="true"/FixedFooter="true" setzt (hier NICHT gesetzt, s. Kommentar weiter unten). Diese Regeln feuern fuer unsere Tabelle also NIE -- wir setzen die Variable hier deshalb nicht "trotzdem", sondern WEIL sie die einzige Quelle deckender Kopf-/Fusszellen ist. z-index-Schema (Stand Plan 56a8-Nachzug/Codex-Finding F2, s. die ausfuehrlichen Begruendungen bei den jeweiligen Regeln unten): 1 fuer die sticky-LINKS-Spalten der Daten-Zeilen, 2 fuer die Fuss-BASIS (tfoot.mr-summenzeile), 3 fuer die Kopf-BASIS (thead.mud-table-head) UND alle sticky-LINKEN Ecken (Kopf UND Fuss) -- Kopf/Fuss ueberdecken sich vertikal nie (entgegengesetzte Raender), ein Gleichstand zwischen Kopf-Basis und Fuss-Basis waere also folgenlos, trotzdem bewusst 3 vs. 2 (Kopf gewinnt). Das Artikelnummern-MudPopover rendert ausserhalb dieser Komponente im globalen MudPopoverProvider (eigener DOM-Ast, s. Kommentar bei .mr-auswahl-hinweis unten) und bleibt davon unberuehrt -- kein z-index-Konflikt moeglich, der Provider liegt nicht im Stapelkontext dieser Tabelle. */ /* A6-Nachzug (Review-Fund HIGH, 2026-09-25): --mr-auswahl-breite war reine Deko -- ohne eigenes Zell-Padding blieb MudBlazors Dense-Padding in Kraft (".mud-table-dense * .mud-table-row .mud-table-cell{padding:6px 24px 6px 16px}", verifiziert in MudBlazor.min.css 9.5.0, ~/.nuget/packages/mudblazor/9.5.0/staticwebassets, Spezifitaet 3 Klassen = (0,3,0)) -- allein 16+24 = 40px horizontales Padding, OBEN DRAUF auf Checkbox/Filter-Icon. Der tatsaechliche Platzbedarf lag damit weit ueber den deklarierten 56px, waehrend Spalte 2 (left: var(--mr-auswahl-breite)) exakt darauf vertraute -- daher der sichtbare Versatz. Arithmetik (gegen die tatsaechlich gerenderte MudBlazor-9.5.0-Markup verifiziert -- per bUnit Render von MudCheckBox/MudIconButton bzw. einer minimalen MudTable gerendert und das Markup inspiziert, NICHT geraten): - Checkbox (MudCheckBox Dense="true" Size="Size.Small" in einer Tabellenzelle, s. mr-check-kopf/ mr-check-zeile): das traegt "mud-icon-size-small" (font-size:1.25rem = 20px, ".mud-icon-root{width:1em;height:1em}"); der umschliessende Button- traegt "mud-checkbox-dense" (NICHT "mud-icon-button-size-small" -- Size wirkt hier nur auf das Icon, nicht auf die Button-Klasse, per Render-Sonde bestaetigt) und bezieht sein Padding aus ".mud-checkbox .mud-checkbox-dense{padding:4px}" bzw. gleichlautend ".mud-table-cell .mud-checkbox>.mud-icon-button{padding:4px}" -- macht 20 + 2*4 = 28px gemalte Breite. (Das / (s. weiter unten). Die sticky-LINKEN Eck-Zellen erzeugen dagegen JEDE einen eigenen Stapel-Kontext (eigenes position:sticky) und muessen deshalb explizit ueber diese normalen Geschwister-Zellen gehoben werden, sonst koennten beim waagerechten Scrollen durchscrollende Jahres-/Block-Zellen ueber der fixierten Ecke gemalt werden. z-index 3 macht die Ecke unabhaengig von der DOM-Reihenfolge zur obersten Schicht (ueber den Jahreszellen UND -- Plan 56a8-Nachzug F2 -- ueber der neuen tfoot-Sticky-Basis, die selbst z-index 2 traegt, s. dort). */ .mr-tabellen[b-k2xrv5cui3] thead th.mr-th-filter, .mr-tabellen[b-k2xrv5cui3] thead th.mr-th-auswahl, .mr-tabellen[b-k2xrv5cui3] thead th.mr-th-name { background-color: var(--mud-palette-surface); z-index: 3; } .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-tf-auswahl, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-tf-titel { background-color: var(--mud-palette-surface); z-index: 3; } /* Plan 56 A8.1+A8.4 (Nachzug a2-test-149/150, Punkte 1+4), Praemisse per Codex-Finding F2 (2026-09-26) korrigiert: Kopf (beide Zeilen) und Summenzeile bleiben beim senkrechten Scrollen stehen. MudBlazor traegt zwar Regeln fuer genau diesen Zweck (".mud-table-head .mud-table-cell{background-color: var(--mud-palette-surface);position:sticky;z-index:2}" + ".mud-table-head .mud-table-cell{top:0}" sowie ".mud-table-foot{position:sticky;z-index:2;bottom:0}" + ".mud-table-foot * .mud-table-cell{background-color: var(--mud-palette-surface)}"), ALLE VIER stehen aber -- gegen MudBlazor.min.css 9.5.0 NACHVERIFIZIERT, der fruehere Kommentar hatte "unconditional" behauptet, das war falsch -- HINTER den Modifikator-Selektoren ".mud-table-sticky-header * .mud-table-root ..." bzw. ".mud-table-sticky-footer * .mud-table-root ...". MudTable setzt diese Klassen NUR bei FixedHeader="true" bzw. FixedFooter="true" (hier bewusst NICHT gesetzt, s. naechster Absatz) -- die vier Regeln feuern fuer unsere Tabelle NIE. Kopf UND Fuss sind deshalb VOLLSTAENDIG unsere EIGENEN CSS-Regeln: der Kopf ueber das sticky -Element (s. A8-Nachzug I2 unten), der Fuss ueber die eigene ".mr-tabellen ::deep tfoot.mr-summenzeile"-Regel direkt im Anschluss (Plan 56a8-Nachzug, Codex-Finding F2) -- mit derselben deckenden Hintergrundfarbe und demselben scrollenden Vorfahren wie die sticky-LINKS-Spalten (s. --mr-auswahl-breite-Kommentar oben). Wir geben dem Scroll-Container GENAU diese Rolle: .mud-table-container ist bereits der Container, gegen den auch die sticky-LINKS-Spalten oben rechnen (HorizontalScrollbar="true", overflow-x:auto) -- eine begrenzte Hoehe + overflow-y:auto auf DEMSELBEN Element haelt beide Sticky-Achsen (links/rechts und oben/unten) am selben scrollenden Vorfahren fest, statt zwei verschiedene Container zu riskieren, gegen die "sticky" unterschiedlich rechnen wuerde. BEWUSST NICHT MudTable Height/FixedHeader/FixedFooter verwendet: diese Parameter sind fuer MudBlazors EIGENE Header-/Footer-Templates gebaut, unsere CustomHeader/CustomFooter="true"- Vorlage (zwei MudTHeadRow + eigene MudTFootRow) hat keine verifizierte Interaktion damit -- ohnehin ohne Belang, seit klar ist, dass die MudBlazor-Regeln fuer UNS gar nicht gaten koennten: Kopf UND Fuss sticky sind komplett eigene, unbedingte Regeln, kein Framework-Interna-Risiko. Hoehe (~20 Datenzeilen, dokumentiert statt geraten): dense Zellen tragen 6px+6px=12px vertikales Padding (".mud-table-dense * .mud-table-row .mud-table-cell{padding:6px 24px 6px 16px}", MudBlazor.min.css 9.5.0) + Body2-Zeilenhoehe (MudBlazor-Theme-Default Typography.Body2: font-size 0.875rem/line-height 1.43 ≈ 20px) -> Datenzeile ≈ 32px. Kopf-/Fusszellen nutzen Subtitle2 (0.875rem/1.57 ≈ 22px) + dieselben 12px Padding -> ≈ 34px je Zeile (zwei Kopfzeilen + eine Fusszeile = 3 x 34px = 102px). 20 x 32px + 102px ≈ 742px -- grob gerundet, endgueltig per Sicht-Abnahme wie die uebrigen Farb-/Abstands-Werte dieser Datei. */ .mr-tabellen[b-k2xrv5cui3] .mud-table-container { max-height: 742px; overflow-y: auto; } /* A8-Nachzug (Review-Fund I2, SHOWSTOPPER-artig), Praemisse per Codex-Finding F2 (2026-09-26) korrigiert: ".mud-table-head .mud-table-cell{top:0}" ist in Wahrheit ".mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell{top:0}" (MudBlazor.min.css 9.5.0, exakt EIN Vorkommen, gegen die Datei nachverifiziert) -- gated hinter "mud-table-sticky-header", das MudTable hier NIE setzt (s. Kommentar oben). Der historisch beschriebene Konflikt "beide Kopfzeilen sticken unabhaengig voneinander an dieselbe Position top:0" haette diese (nie feuernde) Regel also gar nicht ausloesen koennen; unabhaengig davon bleibt der gewaehlte Fix richtig und noetig -- ohne ihn traegt KEINE einzelne Kopfzelle eigenes position:sticky, das waere also ueberhaupt nicht senkrecht fixiert. Fix: das -ELEMENT SELBST sticky (beide MudTHeadRow-Zeilen ruecken dadurch als EIN Block, Zeile 1 bleibt in normalem Fluss ueber Zeile 2). position:sticky auf table-header-group ist in allen aktuellen Browsern (Chromium, Firefox, Safari >= 15.4) implementiert, exakt der uebliche "sticky thead"-Trick fuer HTML-Tabellen. Die (nie greifende) per-Zelle top:0-Regel wird trotzdem defensiv neutralisiert (top:auto) -- schadet nicht, schuetzt aber gegen einen kuenftigen MudBlazor-Update, der FixedHeader-Verhalten aendert; die sticky-LINKEN Eckzellen (mr-th-filter/mr-th-auswahl/mr-th-name) behalten dadurch unveraendert ihr EIGENES position:sticky fuer die waagerechte Achse (nur "left" gesetzt, kein eigenes "top" mehr noetig: die senkrechte Fixierung kommt jetzt vom sticky-thead-Vorfahren); ein sticky-Element ganz ohne gesetzten Offset (top/right/bottom/left alle auto) verhaelt sich wie position:relative ohne Versatz -- fuer die uebrigen (nicht-linken) Kopfzellen also folgenlos. */ .mr-tabellen[b-k2xrv5cui3] thead.mud-table-head { position: sticky; top: 0; z-index: 3; } .mr-tabellen[b-k2xrv5cui3] .mud-table-head .mud-table-cell { top: auto; } /* Plan 56a8-Nachzug (Codex-Finding F2, 2026-09-26): Summenzeile sticky UNTEN -- Pendant zum sticky oben, aus demselben Grund (MudBlazors ".mud-table-sticky-footer * .mud-table-root .mud-table-foot{ position:sticky;z-index:2;bottom:0}" gatet hinter "mud-table-sticky-footer", das FixedFooter="true" voraussetzt -- hier NICHT gesetzt, s. Kommentar oben -- die Regel feuert also NIE). Ohne eigene Regel war die Summenzeile bislang GAR NICHT sticky (reiner Anzeige-Bug, kein Konflikt wie beim Kopf). z-index 2 passt ins bestehende Schema: 1 fuer normale Daten-Zeilen (sticky-LINKS-Spalten, s. .mr-td-auswahl/.mr-td-name unten), 2 fuer die eigentliche Kopf-/Fuss-BASIS (thead z-index 3 bleibt hoeher, weil beim UEBERLAPPEN von Kopf und Fuss -- Kopf oben "gewinnen" soll, praktisch aber irrelevant: beide sind an entgegengesetzten Raendern fixiert und ueberdecken sich im normalen Scrollbereich nie), 3 fuer die sticky-LINKEN Ecken (Kopf UND Fuss, s. .mr-th-filter/.mr-th-auswahl/.mr-th-name bzw. .mr-tf-auswahl/.mr-tf-titel oben) -- die Ecken muessen ueber der eigenen Zeilenbasis UND ueber den durchscrollenden Jahres-/Block-Zellen stehen. */ .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile { position: sticky; bottom: 0; z-index: 2; } /* Plan 56a8-Nachzug (Codex-Finding F2): deckender Hintergrund fuer ALLE Fusszellen -- die sticky-linken Ecken (mr-tf-auswahl/mr-tf-titel, s. oben) und die gruppen-eingefaerbten Zellen (mr-gruppe-a/b/total/aus, s. unten) tragen ihre Farbe bereits EXPLIZIT mit hoeherer Selektor-Spezifitaet (jeweils >= 3 Klassen) und gewinnen deshalb unveraendert; diese Basis-Regel (2 Klassen) deckt NUR die uebrigen Fusszellen (Menge/ Umsatz/Summe-Spalten ohne Gruppenfarbe), die sonst -- jetzt, wo der ganze sticky ist -- durchsichtig blieben und darunter scrollende Datenzeilen durchschimmern liessen. */ .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td { background-color: var(--mud-palette-surface); } /* Plan 56 A8.5 (Review-Fund I4, korrigiert): Scrollbalken der Modellreihen-Tabelle dauerhaft sichtbar und in der Primaerfarbe. FRUEHERER Stand hatte scrollbar-color/scrollbar-width UND ::-webkit-scrollbar* auf DEMSELBEN Element -- das ist in Chromium >=121 NICHT unbedenklich nebeneinander (wie der alte Kommentar behauptete), sondern GEGENSAETZLICH: sobald scrollbar-color auf einem Element gesetzt ist, ignoriert Blink genau DIESES Elements ::-webkit-scrollbar*-Pseudoelemente vollstaendig -- die 14px/immer-sichtbar- Regeln waeren in Chromium damit toter Code, "aeltere Chromium-Versionen" war zu eng gefasst (>=121 ist die ueberwiegende Mehrheit aktueller Installationen). Fix: scrollbar-color/scrollbar-width nur noch dort, wo ::-webkit-scrollbar* NICHT verstanden wird (Firefox) -- @supports not selector(::-webkit-scrollbar) ist genau diese Bedingung (Chromium/Safari verstehen den Selektor, das Feature-Query-Ergebnis ist dort false, der Block wird uebersprungen; Firefox kennt ihn nicht, das Query ist dort true). Chromium/Safari bleiben exakt bei den ::-webkit-scrollbar*-Regeln (14px, Primaerfarben-Thumb, heller Track, dauerhaft sichtbar durch den ERSETZTEN OS-Overlay-Scrollbalken) -- jetzt ohne Kollision. Scope bewusst nur der Tabellen-Scroll-Container hier UND (separat, wwwroot/app.css) html/body fuer die Seite -- nicht jedes scrollbare Element der Anwendung. */ @supports not selector(::-webkit-scrollbar) { .mr-tabellen[b-k2xrv5cui3] .mud-table-container { scrollbar-color: var(--mud-palette-primary) #eef1f6; scrollbar-width: auto; } /* Plan 57 Nachzug K6 (Rolf 2026-09-27, Firefox 156 Konsolen-Messung): ".mr-tabellen ::deep .mud-table-container" hat hier offsetHeight == clientHeight == 742px -- Firefox reserviert fuer den Overlay-Scrollbalken (kein ::-webkit-scrollbar-Feature, deshalb dieser @supports-Zweig) KEINEN eigenen Platz im Scrollport, anders als Chromium/Safari mit dem klassischen, Platz reservierenden Balken (dort kein Problem, Rolf bestaetigt). Die sticky tfoot (bottom:0, s. ".mr-tabellen ::deep tfoot.mr-summenzeile" oben) endet exakt an der Unterkante des Scrollports -- der Overlay-Balken liegt deshalb GENAU auf der Summenzeile statt daneben. Anders als der revertierte A10.3-Fix (s. Kommentar bei "Review F2 (Revert...)" oben): DORT wurde die STICKY-POSITION der Zeile selbst um die Balkenhoehe verschoben (bottom-Versatz) -- das riss eine Luecke UNTER der Zeile auf und deckte die letzte Datenzeile teilweise ab. HIER bleibt "bottom: 0" unveraendert; nur das ZELL-PADDING der Fusszeile waechst um 14px nach unten. Die Zeile selbst wird dadurch hoeher, der Text bleibt an seiner bisherigen Position (oben in der Zelle, unveraendertes Padding oben/links/rechts), der Balken liegt auf dem zusaetzlichen Polster -- das bleibt opak (Hintergrund kommt unveraendert von ".mr-tabellen ::deep tfoot.mr-summenzeile td { background-color: var(--mud-palette-surface); }" oben, NICHT auf @supports beschraenkt, gilt fuer alle Fusszellen). Bottom-Padding bleibt ADDITIV zum jeweiligen Status quo (bestehendes Padding + 14px), damit die TEXT-Position unveraendert bleibt -- zwei Basiswerte in dieser Datei: - .mr-tf-auswahl (Export-Icon-Zelle): eigenes "padding: 0 6px" oben -> 0px Bottom-Basis. - alle uebrigen Fusszellen (mr-tf-titel/-menge/-umsatz/-summe-menge/-summe-umsatz, je mit/ohne mr-gruppe-*): kein eigenes Padding in dieser Datei -> MudBlazor-Dense-Default 6px Bottom-Basis (MudBlazor.min.css 9.5.0, ~/.nuget/packages/mudblazor/9.5.0/staticwebassets, gegen die Datei verifiziert: ".mud-table-dense * .mud-table-row .mud-table-cell{padding:6px 24px 6px 16px}" bzw. ".mud-table-dense .mud-table-cell{padding:6px 16px}" -- beide liefern 6px vertikal). */ .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td { padding-bottom: calc(6px + 14px); } .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-tf-auswahl { padding-bottom: calc(0px + 14px); } } .mr-tabellen[b-k2xrv5cui3] .mud-table-container::-webkit-scrollbar { width: var(--mr-scrollbar-hoehe); height: var(--mr-scrollbar-hoehe); } /* Review F2 (Revert, 2026-09-26): der vormalige tfoot-"bottom"-Versatz um die Scrollbalken-Variable (Plan 56 A10.3) ist ENTFERNT. Begruendung (CSS Position Level 3, https://www.w3.org/TR/css-position-3/#sticky-pos): ein sticky-positioniertes Element haelt seine Kante an der Kante des SCROLLPORTS seines naechsten scrollenden Vorfahren fest -- der Scrollport ist der sichtbare Innenbereich des Scroll-Containers OHNE die Scrollbar-Spur (die Scrollbar liegt ausserhalb, auf einer eigenen "Furche" am Rand des Containers, nicht innerhalb des Scrollports). Ein zusaetzlicher bottom-Versatz um die Balkenhoehe schiebt die sticky Summenzeile deshalb zu WEIT nach oben: er reisst eine 14px-Luecke UNTER der Zeile auf (dort scheint jetzt der Container-Hintergrund durch) UND deckt gleichzeitig einen Teil der letzten DATENZEILE ab, die durch den Versatz teilweise UNTER die hochgeschobene tfoot ruckt. Der Scrollbalken selbst braucht keine eigene Platzreservierung durch die tfoot -- er liegt bereits ausserhalb des Scrollports und ueberlappt die sticky Zeile nicht. Basis-Regel "bottom: 0" (oben) bleibt daher unveraendert die einzige Regel; --mr-scrollbar-hoehe dient nur noch der Balkendicke selbst. */ .mr-tabellen[b-k2xrv5cui3] .mud-table-container::-webkit-scrollbar-track { background: #eef1f6; } .mr-tabellen[b-k2xrv5cui3] .mud-table-container::-webkit-scrollbar-thumb { background-color: var(--mud-palette-primary); border-radius: 2px; } .mr-tabellen[b-k2xrv5cui3] tbody td.mr-td-auswahl, .mr-tabellen[b-k2xrv5cui3] tbody td.mr-td-name { z-index: 1; } .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-a > td.mr-td-auswahl, .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-a > td.mr-td-name { background-color: #e8edf4; } .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-b > td.mr-td-auswahl, .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-b > td.mr-td-name { background-color: #d4dfec; } /* Kante an Spalte 2 (Modellreihe): dezenter Schatten am rechten Rand, damit sichtbar bleibt, dass darunter noch Inhalt liegt, der gerade unter der fixierten Spalte hindurchscrollt. Nur an Spalte 2 (Punkt 1 nennt sie explizit) -- Spalte 1 (Checkbox) ist zu schmal fuer eine eigene Kante und Spalte 2 folgt ohnehin direkt. */ .mr-tabellen[b-k2xrv5cui3] th.mr-th-name, .mr-tabellen[b-k2xrv5cui3] td.mr-td-name, .mr-tabellen[b-k2xrv5cui3] td.mr-tf-titel { box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.35); } /* Plan 53 B4: Summenzeile (FooterClass auf dem tfoot) fett und abgesetzt; Summenspalte rechts fett. */ .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td { font-weight: 700; border-top: 2px solid #9fb3cc; } .mr-tabellen[b-k2xrv5cui3] td.mr-td-summe-menge, .mr-tabellen[b-k2xrv5cui3] td.mr-td-summe-umsatz { font-weight: 600; } /* Plan 53 B4: Reihenname + Info-Symbol; das Popover verankert sich an dieser Zelle. */ .mr-tabellen[b-k2xrv5cui3] .mr-reihe-zelle { position: relative; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; } /* Plan 56 A10.2: Kopf-Checkbox "alle Jahre/Bloecke" oben rechts in der (rowspan-2) Modellreihe-Kopfzelle -- "Modellreihe"-Text links, Checkbox rechts, auch bei nur einer angezeigten Spalte vorhanden (Plan-Vorgabe). */ .mr-tabellen[b-k2xrv5cui3] .mr-th-name-zeile { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .mr-tabellen[b-k2xrv5cui3] .mr-th-spalte { display: inline-flex; align-items: center; gap: 2px; /* Plan 56 A1 (Punkt 1): anders als die Reihenname-Zelle darf die Jahres-/Block-Beschriftung in Kopfzeile 1 umbrechen ("2026 (bis heute)" ist die laengste) -- deshalb HIER kein white-space:nowrap. */ } /* Plan 56 A1 (Punkt 1): Kopfzellen duerfen umbrechen (schmalere Spalten durch kurze "Menge"/"Umsatz"-Beschriftung in Zeile 2 statt "2026 Menge"); Zahlenzellen (Daten + Fuss) bleiben nowrap, ein umbrechendes "3.456,00 €" zwischen Zahl und Waehrungszeichen waere haesslich. Plan 56a8-Nachzug (Codex-Finding F2, 2026-09-26): dieselbe Regel traegt jetzt zusaetzlich einen deckenden Hintergrund -- Kopfzellen OHNE eigene Gruppenfarbe (die Zeile-2-Zellen mr-th-spalte tragen erst ab A1 eine mr-gruppe-*-Klasse, wenn Jahres-/Block-Gruppen aktiv sind) waren sonst durchsichtig und liessen beim senkrechten Scrollen darunterliegenden Inhalt durch das sticky durchschimmern. Niedrige Spezifitaet (1 Klasse + 2 Elemente) -- die sticky-linken Ecken (3 Klassen, s. mr-th-filter/mr-th-auswahl/mr-th-name oben) und die Gruppenfarben (2 Klassen, s. mr-gruppe-* unten) gewinnen unveraendert. */ .mr-tabellen[b-k2xrv5cui3] thead th { white-space: normal; background-color: var(--mud-palette-surface); } .mr-tabellen[b-k2xrv5cui3] td.mr-td-menge, .mr-tabellen[b-k2xrv5cui3] td.mr-td-ek-menge, .mr-tabellen[b-k2xrv5cui3] td.mr-td-umsatz, .mr-tabellen[b-k2xrv5cui3] td.mr-td-ek-umsatz, .mr-tabellen[b-k2xrv5cui3] td.mr-td-summe-menge, .mr-tabellen[b-k2xrv5cui3] td.mr-td-summe-umsatz, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-tf-menge, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-tf-umsatz, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-tf-summe-menge, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-tf-summe-umsatz { white-space: nowrap; } /* Plan 56 A1 (E7 Jahres-Optik): Gruppen-Hintergrundfarbe NUR in beiden Kopfzeilen und der Summenzeile (die Datenzeilen behalten ausschliesslich das bestehende Zeilen-Zebra oben -- zwei ueberlagernde Farbsysteme (Zeile + Spaltengruppe) auf denselben Zellen waeren unruhig, gui/CLAUDE.md Tabellen-Zebra-Konvention nennt nur das Zeilen-Zebra als Pflicht; die Gruppenfarbe ist eine bewusste, hier begruendete Erweiterung NUR fuer Kopf/Fuss). Farben laut Plan: #dfe6f0/#c7d4e5 (a/b), Total #bfcde0. */ .mr-tabellen[b-k2xrv5cui3] thead th.mr-gruppe-a, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-gruppe-a { background-color: #dfe6f0; } .mr-tabellen[b-k2xrv5cui3] thead th.mr-gruppe-b, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-gruppe-b { background-color: #c7d4e5; } .mr-tabellen[b-k2xrv5cui3] thead th.mr-gruppe-total, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-gruppe-total { background-color: #bfcde0; } /* mr-gruppe-start: dicke Trennlinie VOR jeder Spaltengruppe (Total + jede Jahres-/Block-Gruppe), durch ALLE Zeilen (Kopf, Daten, Fuss) -- markiert die Gruppengrenze unabhaengig von der Hintergrundfarbe. */ .mr-tabellen[b-k2xrv5cui3] .mr-gruppe-start { border-left: 2px solid #9fb3cc; } /* Plan 53 B4: Hinweis ueber der Tabelle bei aktiver Auswahl. (Die Popover-Regeln stehen GLOBAL in wwwroot/app.css: MudPopover rendert im MudPopoverProvider ausserhalb dieser Komponente, scoped CSS greift dort nicht.) */ .mr-auswahl-hinweis[b-k2xrv5cui3] { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .mr-veraltet[b-k2xrv5cui3] { display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* A6 Punkt 4 (Abnahme a2-test-148, Variante "ausgegraut"): nicht gewaehlte Jahres-/Block-Gruppen sichtbar deaktivieren, wenn die wirksame Spaltenauswahl nicht leer UND der Ansichtsfilter AUS ist (Klasse "mr-gruppe-aus", ModellreihenCard.razor GruppeAusgegraut) -- ersetzt die fruehere, nur auf die Fusszeile beschraenkte Daempfung "mr-summe-abgewaehlt" (Review N4/Plan 56a) durchgaengig fuer Kopf, Daten und Fuss. Nie auf die Total-Gruppe angewandt (kein Spalten-Key dort). Zwei Regel-Gruppen, weil Kopfzeile 1 (mr-th-jahrkopf) die Jahres-/Block-CHECKBOX enthaelt: opacity/color auf dem th selbst wuerde die Checkbox mitfaerben (Kind-opacity:1 kann Eltern-Alpha-Compositing nicht rueckgaengig machen) -- Punkt 4 verlangt ausdruecklich "die Checkbox bleibt voll sichtbar/bedienbar". Dort wird NUR die Label-Zelle (.mr-th-spalte-label) grau; alle anderen Zellarten (Kopfzeile 2, Daten, Fuss) haben keine interaktive Kind-Komponente und werden direkt grau (Text + Deckkraft ~45%, --mud-palette-text-disabled). Blasser Kopf-/Fuss-Hintergrund NUR in Kopf/Fuss (Datenzeilen behalten ausschliesslich das Zeilen-Zebra, wie die bestehende Jahres-Optik oben, E7) -- Quelltext-Reihenfolge NACH den mr-gruppe-a/b/total-Hintergrundregeln oben, damit sie bei gleicher Selektor-Spezifitaet gewinnt. */ .mr-tabellen[b-k2xrv5cui3] td.mr-gruppe-aus, .mr-tabellen[b-k2xrv5cui3] th.mr-th-menge.mr-gruppe-aus, .mr-tabellen[b-k2xrv5cui3] th.mr-th-umsatz.mr-gruppe-aus { color: var(--mud-palette-text-disabled); opacity: 0.45; } .mr-tabellen[b-k2xrv5cui3] th.mr-th-jahrkopf.mr-gruppe-aus .mr-th-spalte-label { color: var(--mud-palette-text-disabled); opacity: 0.45; } .mr-tabellen[b-k2xrv5cui3] thead th.mr-gruppe-aus, .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-gruppe-aus { background-color: #eef1f6; } /* A6-Nachzug (Review-Fund LOW): "tfoot.mr-summenzeile td" (Plan 53 B4, oben) setzt font-weight:700 mit hoeherer Spezifitaet (2 Klassen + 2 Elemente) als "td.mr-gruppe-aus" allein (2 Klassen + 1 Element) -- ausgegraute Fusszellen blieben trotz opacity:0.45 FETT. Eigene Regel mit ".mr-gruppe-aus" IM tfoot.mr-summenzeile-Kontext (3 Klassen + 2 Elemente) schlaegt die Fettschrift-Regel gezielt, ohne die uebrigen (nicht ausgegrauten) Fusszellen wie die Summenspalten anzutasten. */ .mr-tabellen[b-k2xrv5cui3] tfoot.mr-summenzeile td.mr-gruppe-aus { font-weight: 400; } /* Plan 56 A8.2: Total-Sortierhaken-Zeile -- Checkbox (Sort-Icon) und Total-Text nebeneinander, wie das bestehende .mr-th-spalte-Muster (Jahres-/Block-Checkbox + Label) fuer die uebrigen Kopfzellen. */ .mr-tabellen[b-k2xrv5cui3] .mr-th-total { display: inline-flex; align-items: center; gap: 2px; } /* Plan 56 A8.3 (Nachzug a2-test-149/150): nicht ausgewaehlte Zeilen ausgrauen, wenn die Zeilenauswahl DIESER Tabelle nicht leer UND der Ansichtsfilter AUS ist (ModellreihenCard.ZeilenKlasse liefert "mr-zeile-aus" auf dem ) -- analog A6.4 (mr-gruppe-aus), hier aber zeilenweise statt spaltenweise. Die Checkbox-Spalte bleibt bewusst AUSGENOMMEN (":not(.mr-td-auswahl)"), sie muss laut Vorgabe "voll sichtbar und bedienbar" bleiben. A8-Nachzug (Review-Fund I3): die STICKY Namensspalte (.mr-td-name, position:sticky links, EIGENE deckende Hintergrundfarbe je Zeile -- s. Regelblock oben) ist HIER ebenfalls ausgenommen. Der fruehere Stand (opacity:0.45 auf ALLEN Zellen ausser der Checkbox) machte auch den HINTERGRUND dieser Zelle durchsichtig -- opacity wirkt auf das gesamte gemalte Element inkl. seiner eigenen Hintergrundfarbe, nicht nur auf den Text --: beim waagerechten Scrollen schien darunterliegender, durchscrollender Inhalt durch die fixierte Spalte hindurch. Fix: color ohne opacity -- eigene Regel direkt im Anschluss. Alle UEBRIGEN (nicht-sticky) Zellen tragen weiterhin opacity (kein eigener deckender Hintergrund, das durchscheinende Zeilen-Zebra dahinter -- gui/CLAUDE.md Tabellen-Zebra-Konvention -- ist hier gewollt und unproblematisch, weil es keinen horizontal scrollenden Inhalt UNTER diesen Zellen gibt). */ .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-aus > td:not(.mr-td-auswahl):not(.mr-td-name) { color: var(--mud-palette-text-disabled); opacity: 0.45; } .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-aus > td.mr-td-name { color: var(--mud-palette-text-disabled); } /* "Summenwerte nicht fett" (Plan-Vorgabe woertlich): die bestehende Fettschrift-Regel fuer die Summenspalte (".mr-td-summe-menge"/".mr-td-summe-umsatz", oben) hat 1 Klasse Spezifitaet je Selektor -- eine Regel mit "tr.mr-zeile-aus > td...." (1 Klasse + 1 Element + 1 Klasse = hoehere Spezifitaet) schlaegt sie gezielt, analog dem A6-Nachzug fuer "tfoot.mr-summenzeile td.mr-gruppe-aus" oben. */ .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-aus > td.mr-td-summe-menge, .mr-tabellen[b-k2xrv5cui3] tr.mr-zeile-aus > td.mr-td-summe-umsatz { font-weight: 400; } /* /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 /-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; } /* /Areas/Developer/TopKundenCard.razor.rz.scp.css */ /* Plan 63: Top-Kunden-Card. Zebra (gui/CLAUDE.md Tabellen-Konvention): RowClassFunc liefert tk-zeile-a/-b; ::deep, weil die der MudTable-Kind-Komponente kein b-scope-Attribut dieser Datei tragen (Wrapper .tk-tabellen ist das eigene Element). Die Artikelnummern-Popover-Regeln stehen GLOBAL in wwwroot/app.css (MudPopover rendert im MudPopoverProvider ausserhalb dieser Komponente, scoped CSS greift dort nicht). */ .tk-tabellen[b-ejumksg2a7] tr.tk-zeile-a { background-color: #e8edf4; } .tk-tabellen[b-ejumksg2a7] tr.tk-zeile-b { background-color: #d4dfec; } /* Tabelle nur so breit wie ihr Inhalt (Scroll bei vielen Spalten bleibt ueber HorizontalScrollbar). */ .tk-tabellen[b-ejumksg2a7] table.mud-table-root { width: auto; } /* Sticky Kopf/Fuss (Muster ModellreihenCard, dort ausfuehrlich begruendet): MudBlazors eigene Sticky-Regeln gelten nur unter "mud-table-sticky-header/-footer", das MudTable hier nicht setzt. Deshalb das /-ELEMENT selbst sticky, der Scroll-Container (.mud-table-container) bekommt eine begrenzte Hoehe + overflow-y. Deckender Hintergrund, sonst scheinen die Zeilen durch. */ .tk-tabellen[b-ejumksg2a7] .mud-table-container { max-height: 620px; overflow-y: auto; } .tk-tabellen[b-ejumksg2a7] thead.mud-table-head { position: sticky; top: 0; z-index: 3; } .tk-tabellen[b-ejumksg2a7] tfoot.tk-summenzeile { position: sticky; bottom: 0; z-index: 3; } .tk-tabellen[b-ejumksg2a7] tfoot.tk-summenzeile td { font-weight: 700; background-color: #c7d4e5; } /* Gruppenfarben nur Kopf/Fuss (Zeilen behalten das Zebra); Total-Gruppe abgesetzt; Trennlinie vor jeder Gruppe. */ .tk-tabellen[b-ejumksg2a7] thead th { background-color: #f4f6fa; } .tk-tabellen[b-ejumksg2a7] thead th.tk-gruppe-a, .tk-tabellen[b-ejumksg2a7] tfoot.tk-summenzeile td.tk-gruppe-a { background-color: #dfe6f0; } .tk-tabellen[b-ejumksg2a7] thead th.tk-gruppe-b, .tk-tabellen[b-ejumksg2a7] tfoot.tk-summenzeile td.tk-gruppe-b { background-color: #c7d4e5; } .tk-tabellen[b-ejumksg2a7] thead th.tk-gruppe-total, .tk-tabellen[b-ejumksg2a7] tfoot.tk-summenzeile td.tk-gruppe-total { background-color: #bfcde0; } .tk-tabellen[b-ejumksg2a7] .tk-gruppe-start { border-left: 2px solid #9fb3cc; } .tk-tabellen[b-ejumksg2a7] td.tk-td-summe-menge, .tk-tabellen[b-ejumksg2a7] td.tk-td-summe-umsatz { font-weight: 600; } .tk-tabellen[b-ejumksg2a7] .tk-ohne { font-style: italic; color: var(--mud-palette-text-secondary, #6e6e6e); } .tk-tabellen[b-ejumksg2a7] .tk-deaktiviert-chip { margin-left: 6px; } .tk-tabellen[b-ejumksg2a7] .tk-gruppe-link { display: inline-flex; align-items: center; gap: 2px; } .tk-tf-titel[b-ejumksg2a7] { white-space: nowrap; } .tk-fuss[b-ejumksg2a7] { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; } .tk-hinweis[b-ejumksg2a7] { color: var(--mud-palette-text-secondary, #6e6e6e); font-size: 0.875rem; } .tk-reihe-hinweis[b-ejumksg2a7] { display: inline-flex; align-items: center; gap: 2px; } /* /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: / 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
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); } /* Plan 47 E6: Kopf-Kosten-Tabelle (Fracht/Zoll/Rechnungs-Nebenkosten/verwendet). Zebra-Ausnahme (gui/CLAUDE.md Tabellen-Zebra-Konvention verlangt einen dokumentierten Grund): Kopf-Tabelle = Label/Wert-Paare, kein Datensatz-Listing ⇒ kein Zebra, Praezedenz fifo-kopf-table (FifoDetailsDialog.razor, ebenfalls Label/Wert-Kopf ohne Zebra, kein eigenes .razor.css). Regulaeres Razor-Markup dieser Datei (kein RenderTreeBuilder) -> traegt das b-scope-Attribut direkt, kein ::deep noetig (Gegensatz .vpd-sn-link oben). */ .vpd-kopf-table th[b-zeur32v5wg] { width: 14rem; } /* /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/Retouren.razor.rz.scp.css */ /* A7b: die Seite selbst rendert keine Tabelle -- die Zebra-Konvention (gui/CLAUDE.md) betrifft die Retouren-Matrix (RetourenMatrix.razor, A8a) und die Quotentabelle (RetourenQuotentabelle.razor, A8d), nicht diese Datei. */ /* Review-Fix 1: .retouren-bedienleiste sitzt als Class= auf der -KOMPONENTE (Retouren.razor:49) -- der gerenderte div ist ein Element von MudPaper.razor, nicht dieser Datei, und traegt deshalb KEIN b-scope-Attribut dieser Datei. Ohne ::deep kompiliert die Regel zu .retouren-bedienleiste[b-xxx], was nie matcht (gleiche Falle wie gui/CLAUDE.md ::deep-Hinweis und die N16 "totes Scoped-CSS an Komponenten-Tags"-Lehre). .retouren-page ist dagegen ein PLAIN div DIESER Datei (Retouren.razor:16) -- ::deep davon aus erreicht den MudPaper-Nachfahren korrekt (verifiziert gegen obj/Debug/net10.0/scopedcss/.../Retouren.razor.rz.scp.css). */ @media print { .retouren-page[b-l2ct29ttqf] .retouren-bedienleiste { display: none; } } /* Review-Fix 7 (gui/CLAUDE.md Input-Feld-Konvention: kompakte Breite 160-200px statt voller Container-Breite). Die Bedienleisten-Feld-Wrapper sind PLAIN divs dieser Datei -- kein ::deep noetig, anders als Fix 1 oben. */ .retouren-feld[b-l2ct29ttqf] { max-width: 200px; } /* Task F1 Punkt 1 (Sicht-Abnahme a2-test-122): das Marktplatz-Select-Feld braucht mehr als die generischen 200px (Label "Marktpl..." wurde abgeschnitten, lange Eintraege wie "Freier Verkauf #40024" brachen mehrzeilig um) -- eigene Klasse NEBEN .retouren-feld auf demselben Wrapper-div (Razor: class="retouren-feld retouren-marktplatz-feld"). F1-Review-Fix (Minor): kein min/max- Spezialfall -- ".retouren-marktplatz-feld" hat dieselbe Spezifitaet wie ".retouren-feld" (je ein Klassenselektor) und steht in dieser Datei WEITER UNTEN, ihr max-width:none gewinnt also schlicht per Kaskaden-Reihenfolge gegen das max-width:200px von .retouren-feld oben. PLAIN div dieser Datei -- kein ::deep noetig (wie .retouren-feld oben). */ .retouren-marktplatz-feld[b-l2ct29ttqf] { min-width: 220px; max-width: none; } /* /Areas/PlentyConnector/RetourenBeschriftung.razor.rz.scp.css */ /* A8a2 (task-A8a2-brief.md) -- Pflichtangaben-Leiste, Saetze an der Matrix, Legende. Jeder Selektor hier sitzt auf einem Element, das RetourenBeschriftung.razor SELBST im Markup rendert (div/p/ul/li) -- Scoped-CSS-Regel (task-A8a2-brief.md): keine Klasse landet per Class="..." auf einem fremden Komponenten-Tag, keine der gestylten Klassen wird im @code-Block per RenderTreeBuilder erzeugt. */ .rb-pflicht[b-hnh3vwda3m] { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 4px; margin-bottom: 8px; font-size: 0.875rem; color: #475467; } .rb-satz[b-hnh3vwda3m] { margin: 4px 0; } .rb-legende[b-hnh3vwda3m] { margin: 8px 0 0; padding-left: 20px; font-size: 0.875rem; color: #475467; } .rb-legende li[b-hnh3vwda3m] { margin-bottom: 4px; } /* /Areas/PlentyConnector/RetourenEreignisseDialog.razor.rz.scp.css */ /* A8e (task-A8e-brief.md) -- Positionen-/Vollstaendigkeits-Saetze (Satz-Abstand), Zusatz-Marke "andere Reihe als der Verkauf" (FromOtherLine, §6.3b), Zebra auf der Ereignis-Tabelle (RowClassFunc re-zeile-a/-b). Scoped-CSS-Regel (task-A8e-brief.md, "Zweite Ausprägung"): jedes gestylte Element steht HIER im MARKUP (kein RenderTreeBuilder) -- .re-dialog, .re-hinweis und .re-marke-fremd sind allesamt Elemente, die RetourenEreignisseDialog.razor selbst literal rendert (auch innerhalb von , s. Datei-Kommentar in der .razor) und tragen deshalb ihr EIGENES b-Scope-Attribut -- kein ::deep noetig. Die tr-Elemente der Zebra dagegen stammen aus der MudTable-Kindkomponente und tragen KEIN eigenes Scope-Attribut dieser Datei -- ::deep noetig, Muster RetourenQuotentabelle.razor.css / AuftragHistorie.razor.css. */ .re-hinweis[b-0mmu4v41i8] { margin: 4px 0; } /* Zusatz-Marke bei FromOtherLine -- eigenes b-Scope-Attribut (literales im RowTemplate-Markup). */ .re-marke-fremd[b-0mmu4v41i8] { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background-color: #fde7e7; color: #7a1f1f; font-size: 0.75rem; } /* Zebra (gui/CLAUDE.md, Muster RetourenQuotentabelle.razor.css): ::deep, weil die tr-Elemente aus der MudTable-Kindkomponente stammen und kein eigenes b-scope-Attribut dieser Datei tragen -- .re-dialog selbst (der Anker) traegt es, der Compiler haengt es an den linken Teil des Selektors an. */ .re-dialog[b-0mmu4v41i8] tr.re-zeile-a { background-color: #e8edf4; } .re-dialog[b-0mmu4v41i8] tr.re-zeile-b { background-color: #d4dfec; } /* /Areas/PlentyConnector/RetourenMatrix.razor.rz.scp.css */ /* A8a1 (task-A8a1-brief.md, plan §5/§7) -- eigene HTML-Tabelle (E1, keine MudTable). Jeder Selektor hier sitzt auf einem Element, das RetourenMatrix.razor SELBST rendert (table/thead/tbody/tfoot/tr/ th/td/span/button/div) -- keine Klasse landet per Class="..." auf einem fremden Komponenten-Tag (Scoped-CSS-Regel, task-A8a1-brief.md). Die einzige Mud-Komponente hier (MudToggleGroup, Class= "rm-sort-toggle") wird deshalb bewusst NICHT ueber diese Datei gestylt -- MudBlazor liefert ihre eigene Optik, ein Selektor darauf wuerde ohnehin zu .rm-sort-toggle[b-xxx] kompilieren und nie matchen (dieselbe Falle wie Retouren.razor.css Review-Fix 1 / N16 "totes Scoped-CSS an Komponenten-Tags"). */ /* F1-Review Important (Sicht-Abnahme a2-test-122 Folge-Review): 8 Quartalsspalten x min-width 5.5rem (.rm-quartal, ~44rem) + Zeilenkopf-Spalte max-width 18rem (.rm-zeilenkopf) + die Summenspalte koennen die Kartenbreite auf schmaleren Viewports ueberschreiten -- ohne overflow-Regel wuerde das die Seite selbst breit ziehen statt nur die Tabelle. .retouren-matrix ist der eigene Wurzel-div dieser Datei (Zeile 11 im .razor, umschliesst Sortierleiste + Tabelle) -- kein ::deep noetig (gui/CLAUDE.md: breite Tabellen scrollen im eigenen Container). */ .retouren-matrix[b-4vqherqlcq] { overflow-x: auto; } .rm-matrix[b-4vqherqlcq] { border-collapse: collapse; width: 100%; } .rm-matrix caption[b-4vqherqlcq] { text-align: left; font-weight: 600; padding-bottom: 4px; } .rm-matrix th[b-4vqherqlcq], .rm-matrix td[b-4vqherqlcq] { padding: 4px 8px; text-align: right; border-bottom: 1px solid #d0d5dd; } .rm-matrix thead th[b-4vqherqlcq], .rm-matrix tbody th[scope="row"][b-4vqherqlcq] { text-align: left; } .rm-matrix thead th[b-4vqherqlcq] { background-color: #f2f4f7; font-weight: 600; } /* Task F1 Punkt 3 (Sicht-Abnahme a2-test-122): Quartalskoepfe brachen zweizeilig um ("Q4 / 2024"), Spaltenbreiten waren ungleich (Q2/Q3 2026 breit, andere schmal) -- verursacht durch die variable Zeilenkopf-Spalte (Sammelzeilen-Label) und lange Zustand-2-Texte, die Breite zogen. Eigene Klassen auf den Quartalsspalten-Zellen (Kopf UND Koerper/Fusszeile) statt Positions-Selektoren (nth-child waere fragil bei variabler Quartalsanzahl) -- eigene
-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 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 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
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
/ dieser Datei, kein ::deep noetig. table-layout:fixed bleibt bewusst AUS (Spaltenzahl ist fest, das Zeilenkopf-Label bleibt variabel, Brief). */ .rm-matrix .rm-quartal[b-4vqherqlcq] { min-width: 5.5rem; white-space: nowrap; } .rm-matrix .rm-zeilenkopf[b-4vqherqlcq] { max-width: 18rem; white-space: normal; } /* Tabellen-Zebra-Konvention (gui/CLAUDE.md): #e8edf4/#d4dfec auf den ZELLEN, nie auf tr (Bootstrap- Falle gilt hier zwar nicht -- die Tabelle traegt keine .table-Klasse -- die Konvention bleibt aus Konsistenz zu ArtikelSuche.razor.css verbindlich). Erweiterung ueber td hinaus auf den Zeilenkopf th[scope=row]: die Praezedenz nennt nur td, verbietet th aber nicht -- ohne das waere die Bezeichnungsspalte einer gestreiften Zeile weiss und die Streifen wirkten abgeschnitten. */ .rm-matrix tbody tr:nth-child(odd) > td[b-4vqherqlcq], .rm-matrix tbody tr:nth-child(odd) > th[b-4vqherqlcq] { background-color: #e8edf4; } .rm-matrix tbody tr:nth-child(even) > td[b-4vqherqlcq], .rm-matrix tbody tr:nth-child(even) > th[b-4vqherqlcq] { background-color: #d4dfec; } /* strukturelle Zeilen -- jede Zelle steht auf Zustand 2, der Zeilenkopf traegt zusaetzlich eine eigene, gedaempfte Optik (unterscheidbar von einer normalen Zeile, ohne allein auf Farbe zu setzen, §5.2). */ .rm-strukturell th[b-4vqherqlcq] { font-style: italic; color: #667085; } /* Zustand 2 -- "keine Zuordnung moeglich": gedaempft + kursiv. Task F1 Punkt 3: white-space/font-size ergaenzt -- der Text ist zu lang fuer die 5.5rem-Quartalsspalte (.rm-quartal setzt nowrap), darf hier also wieder umbrechen (kleinere Schrift haelt die Zeile trotzdem kompakt). F1-Review-Fix (Minor): ".rm-matrix td[data-zustand=\"2\"]" gewinnt gegen ".rm-matrix .rm-quartal" wegen des ZUSAETZLICHEN td-Typselektors (Spezifitaet 0,0,2,1 vs. 0,0,2,0) -- NICHT weil Attribut- ueber Klassenselektoren raengen (beide zaehlen gleich, je +1 im b-Feld der Spezifitaet); das gewinnt zuverlaessig unabhaengig von der Regel-Reihenfolge. */ .rm-matrix td[data-zustand="2"][b-4vqherqlcq] { font-style: italic; color: #667085; white-space: normal; font-size: .85em; } /* Zustand 7 -- "sonst": gedaempft, aber NICHT kursiv (muss von Zustand 2 unterscheidbar bleiben, §5.2 "hoechstens eine binaere Marke"). */ .rm-matrix td[data-zustand="7"][b-4vqherqlcq] { color: #98a2b3; } /* Sondermarken (Zustand 3/4b/6b) -- kleine, NICHT-farbliche Formen neben der Zahl statt einer Intensitaetsrampe (§5.2): Dreieck (fremd), Kreuz (storno, gemeinsam fuer 4b und 6b -- beide tragen dieselbe "hier steckt ein Storno drin"-Bedeutung, die ARIA-Beschriftung unterscheidet sie trotzdem: 4b bleibt aria-hidden [die Zahl selbst traegt die Information], 6b bekommt ein aria-label, weil dort die sichtbare Zahl IMMER "0" ist und sonst nicht von Zustand 6 unterscheidbar waere -- Review Runde 1, Important 3). Zustand 5 (Ruhig) bekommt bewusst KEINE eigene Marke -- plan §5.2 "hoechstens eine binaere Marke": das Punktraster unten IST die Marke dieses Zustands, ein zusaetzlicher Punkt-Span waere eine zweite (Review Runde 1, Ruling). Basis-Geometrie ist zustandsfrei (reine Groesse/ Ausrichtung), jede Farbe/Form haengt am jeweiligen data-zustand. */ .rm-matrix .rm-marke[b-4vqherqlcq] { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 4px; vertical-align: middle; } .rm-matrix td[data-zustand="3"] .rm-marke-fremd[b-4vqherqlcq] { background: #b54708; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .rm-matrix td[data-zustand="4b"] .rm-marke-storno[b-4vqherqlcq], .rm-matrix td[data-zustand="6b"] .rm-marke-storno[b-4vqherqlcq] { background: linear-gradient(45deg, transparent 40%, #912018 40%, #912018 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #912018 40%, #912018 60%, transparent 60%); } /* duenn (schmale Basis) -- Schraffur als eigenes, NICHT-farbliches Hintergrundmuster ueber die ganze Zelle. Zustand 5 (Punktraster unten) traegt bewusst ein ANDERES Muster -- §5.2 "nie dasselbe Zeichen" fuer "schmale Basis" und "hier heisst die Null etwas" (die beiden koennen laut Legalitaetstabelle, plan §4, ohnehin nie an derselben Zelle auftreten -- die Muster bleiben trotzdem system-weit unterschiedlich, damit keines der beiden Zeichen an anderer Stelle missverstanden wird). */ .rm-matrix td[data-duenn][b-4vqherqlcq] { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0, rgba(0, 0, 0, 0.12) 1px, transparent 1px, transparent 6px); } /* Zustand 5 -- "hier heisst die Null etwas": das Punktraster IST die (einzige) Marke dieses Zustands (§5.2 "hoechstens eine binaere Marke" -- kein zusaetzlicher .rm-marke-Span, das aria-label sitzt stattdessen direkt am , s. RetourenMatrix.razor). */ .rm-matrix td[data-zustand="5"][b-4vqherqlcq] { background-image: radial-gradient(circle, rgba(23, 92, 211, 0.35) 1px, transparent 1px); background-size: 6px 6px; } /* unreif -- abgeblendet (Retouren koennten noch nachreifen). */ .rm-matrix td[data-unreif][b-4vqherqlcq] { opacity: 0.65; } /* laufend -- gestrichelter Rahmen (Verkauf UND Retouren dieses Quartals sind noch unvollstaendig). */ .rm-matrix td[data-laufend][b-4vqherqlcq] { outline: 1px dashed #667085; outline-offset: -1px; } /* Zeilensummen-Spalte -- visuell abgesetzt (linker Doppelstrich): §1.1 traegt dort AUSSCHLIESSLICH row_sold_total, niemals row_returned_total -- ohne den Absatz laesst sich die Spalte leicht mit einer weiteren Retourenspalte verwechseln. */ .rm-matrix .rm-summe[b-4vqherqlcq] { border-left: 3px double #667085; font-weight: 600; } .rm-matrix tfoot th[b-4vqherqlcq], .rm-matrix tfoot td[b-4vqherqlcq] { border-top: 2px solid #667085; font-weight: 600; } /* Absprung (F28) -- Button ohne Button-Optik, volle Zellflaeche anklickbar, sichtbarer Fokusring fuer Tastaturnutzer. */ .rm-matrix .rm-absprung[b-4vqherqlcq] { all: unset; cursor: pointer; display: block; width: 100%; text-align: inherit; } .rm-matrix .rm-absprung:hover[b-4vqherqlcq] { text-decoration: underline; } .rm-matrix .rm-absprung:focus-visible[b-4vqherqlcq] { outline: 2px solid #175cd3; outline-offset: 2px; } .rm-sortierleiste[b-4vqherqlcq] { margin-bottom: 8px; } @media print { .rm-sortierleiste[b-4vqherqlcq] { display: none; } .rm-matrix .rm-absprung[b-4vqherqlcq] { cursor: default; pointer-events: none; } .rm-matrix .rm-absprung:hover[b-4vqherqlcq] { text-decoration: none; } } /* /Areas/PlentyConnector/RetourenQuotentabelle.razor.rz.scp.css */ /* A8d (task-A8d-brief.md) -- Zebra auf der Quotentabelle (RowClassFunc rq-zeile-a/-b) + Satz-Abstand. Scoped-CSS-Regel: jeder Selektor sitzt auf einem Element, das RetourenQuotentabelle.razor SELBST im Markup rendert (div/p) -- keine Klasse landet per Class="..." auf einem fremden Komponenten-Tag, keine der gestylten Klassen wird im @code-Block per RenderTreeBuilder erzeugt. */ .rq-satz[b-rdgpr3oboo] { margin: 4px 0; } /* Zebra (gui/CLAUDE.md, Muster Verkaeufe.razor .mp-tabelle / AuftragHistorie.razor.css .ah-lebenslauf): ::deep, weil die tr-Elemente aus der MudTable-Kindkomponente stammen und kein eigenes b-scope- Attribut dieser Datei tragen -- .rq-tabelle selbst (der Anker) traegt es, der Compiler haengt es an den linken Teil des Selektors an (.rq-tabelle[b-xxx] tr.rq-zeile-a). Zwei-Ton in der blaugrauen Familie, identisch zu den uebrigen Retouren-/Verkaeufe-Tabellen. */ .rq-tabelle[b-rdgpr3oboo] tr.rq-zeile-a { background-color: #e8edf4; } .rq-tabelle[b-rdgpr3oboo] tr.rq-zeile-b { background-color: #d4dfec; } /* /Areas/PlentyConnector/RetourenVerlauf.razor.rz.scp.css */ /* A8b (task-A8b-brief.md, plan §3.2/§3.3) -- Linie, Erwartungslinie, Rauschband, Rohbalken, Fensterschattierung, Austrittsstrecken, Reifeabblendung, Massnahmen-Marker, Saetze. Jeder Selektor hier sitzt auf einem Element, das RetourenVerlauf.razor SELBST im Markup rendert (figure/figcaption/ svg/rect/path/circle/line/text/p) -- Scoped-CSS-Regel (task-A8b-brief.md "Zweite Auspraegung"): keine Klasse landet per Class="..." auf einem fremden Komponenten-Tag, keine der gestylten Klassen wird im @code-Block per RenderTreeBuilder erzeugt. Der einzige Mud-Tag (MudButton, Ersatztext 1) traegt bewusst keine hier gestylte Klasse -- ein Selektor darauf wuerde ohnehin zu .klasse[b-xxx] kompilieren und nie matchen (dieselbe Falle wie RetourenMatrix.razor.css/N16). */ .rv[b-p606aqcjf0] { margin: 0 0 16px; } .rv svg[b-p606aqcjf0] { width: 100%; max-width: 800px; height: auto; } .rv-y-achse[b-p606aqcjf0] { font-size: 0.8125rem; color: #475467; margin-bottom: 4px; } .rv-satz[b-p606aqcjf0] { margin: 4px 0; } /* Rohbalken -- helle Balken HINTER der Linie/dem Band, auf derselben y-Skala (Ruling 1), damit ein Bandaustritt auch gegen die Rohwerte sichtbar bleibt. */ .rv-rohbalken[b-p606aqcjf0] { fill: #d0d5dd; } /* Rauschband (erwartet +/- 2*sqrt(erwartet)) -- Flaeche, gedaempfte Farbe. */ .rv-band[b-p606aqcjf0] { fill: #d1e0ff; fill-opacity: 0.55; stroke: none; } .rv-erwartet[b-p606aqcjf0] { fill: none; stroke: #475467; stroke-width: 1.5px; stroke-dasharray: 4 3; } .rv-linie[b-p606aqcjf0] { fill: none; stroke: #175cd3; stroke-width: 2px; } .rv-punkt[b-p606aqcjf0] { fill: #175cd3; stroke: #fff; stroke-width: 1px; } /* Reife-/Vorher-Abblendung -- zwei unabhaengige Gruende, dieselbe Wirkung (Opazitaet); beide koennen gleichzeitig an einem Punkt liegen. Review-Fix Runde 1, Minor: data-vorher traegt jetzt explizit "true"/"false" (Muster data-reif) statt des Blazor-Bool-Omit-Attributs -- der Selektor greift daher auf den Wert, nicht mehr nur auf die Anwesenheit. */ .rv-punkt.rv-unreif[b-p606aqcjf0], .rv-punkt[data-vorher="true"][b-p606aqcjf0] { opacity: 0.45; } /* Austrittsstrecke -- jetzt ein ueber alle Rolling-Punkte des Laufs (Review-Fix Runde 1, Important 3), deshalb "fill: none" (ein waere sonst mit einer impliziten Schlussflaeche gefuellt). NICHT nur ueber Farbe unterscheidbar (§5.2-Geist): zusaetzlich deutlich dicker als die Linie selbst + runde Enden, damit auch ein Ein-Punkt-Lauf (verdoppelter Punkt) sichtbar bleibt. */ .rv-austritt[b-p606aqcjf0] { fill: none; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; } .rv-austritt[data-richtung="oben"][b-p606aqcjf0] { stroke: #b54708; } .rv-austritt[data-richtung="unten"][b-p606aqcjf0] { stroke: #912018; } .rv-marker[b-p606aqcjf0] { stroke: #101828; stroke-width: 1.5px; stroke-dasharray: 2 2; } .rv-marker-text[b-p606aqcjf0] { font-size: 10px; fill: #101828; } .rv-x-label[b-p606aqcjf0] { font-size: 10px; fill: #667085; text-anchor: middle; } /* Fensterschattierung am gehoverten Punkt. */ .rv-fenster[b-p606aqcjf0] { fill: #175cd3; fill-opacity: 0.12; pointer-events: none; } .rv-spanne[b-p606aqcjf0] { font-size: 11px; fill: #101828; text-anchor: middle; } /* Trefferzone -- unsichtbar, deckt die volle Spaltenhoehe ab (Hover ohne JS-Interop, Ruling 2: auch per Fokus erreichbar). */ .rv-treffer[b-p606aqcjf0] { fill: transparent; cursor: pointer; } .rv-treffer:focus-visible[b-p606aqcjf0] { outline: 2px solid #175cd3; outline-offset: -2px; } @media print { .rv-treffer[b-p606aqcjf0], .rv-fenster[b-p606aqcjf0], .rv-spanne[b-p606aqcjf0] { display: none; } .rv-rohbalken[b-p606aqcjf0] { fill: #98a2b3; } .rv-band[b-p606aqcjf0] { fill: #e4e7ec; } .rv-linie[b-p606aqcjf0] { stroke: #000; } .rv-erwartet[b-p606aqcjf0] { stroke: #344054; } .rv-austritt[data-richtung="oben"][b-p606aqcjf0], .rv-austritt[data-richtung="unten"][b-p606aqcjf0] { stroke: #000; } } /* /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; } /* N16: Zebra-Konvention (gui/CLAUDE.md) auf der bearbeiteten Marktplatz-Tabelle. Zwei-Ton in der blaugrauen Familie; ::deep, weil die tr-Elemente aus der MudTable-Kindkomponente stammen und kein eigenes b-scope-Attribut dieser Datei tragen. Der Selektions-Akzent kommt als Inline-Style aus RowStyleFunc und schlaegt diese Klassenfarbe — die markierte Zeile bleibt sichtbar markiert. */ .mp-tabelle[b-7pvtd28jcd] tr.mp-zeile-a { background-color: #e8edf4; } .mp-tabelle[b-7pvtd28jcd] tr.mp-zeile-b { background-color: #d4dfec; } /* Selektierte Zeile: OPAK, nicht halbtransparent. Als Inline-Style rgba(...,0.12) wurde die Farbe gegen den weissen Karten-Grund komponiert und ersetzte die Zebra-Farbe — auf einer geraden Zeile war das Ergebnis (224,237,246) von der Zebra-Farbe (232,237,244) nicht zu unterscheiden. Spezifitaet (0,3,1) schlaegt die Zebra-Regeln; MudBlazors Hover-Regel hat (0,6,0) und bleibt. */ .mp-tabelle[b-7pvtd28jcd] tr.mp-zeile-sel { background-color: #b8d3ea; } /* /Areas/Werkzeuge/Transkription.razor.rz.scp.css */ /* Areas/Werkzeuge/Transkription.razor.css -- Job-ID-Teil der Karte (Brief "Job-ID auf der Karte, Rohcode bei Fehlschlag", Rolf 2026-09-15). .karte-id-wert sitzt als plain in MudTexts ChildContent -- echtes Markup dieser .razor-Datei, traegt deshalb das Scope-Attribut normal (kein ::deep noetig). Eine Klasse direkt auf der MudText-Wurzel selbst braeuchte ::deep, weil MudBlazor-Kind-Komponenten-Wurzeln das Scope-Attribut NICHT tragen (Praezedenz Seriennummern.razor.css .serial-quick-feld-Kommentar). Kein Kopier-Knopf/JS -- nur markierbar (user-select: all) und in fester Breite (monospace) lesbar. */ .karte-id-wert[b-zusaafk417] { font-family: monospace; user-select: all; } /* /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 -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 - 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/AdresseLink.razor.rz.scp.css */ /* Plan 37 (S2a) D3 (Review-Fund Phase 2): eigenes Markup (a/span) ist scoped -- deren b-scope- Attribut liegt direkt auf dem gerenderten Element. Das Icon ist aber eine KIND-KOMPONENTE (MudIcon) -- die traegt dieses Scope-Attribut NICHT, eine nackte .adresse-link-icon-Regel kompiliert zu .adresse-link-icon[b-...] (Attribut-Selektor auf dem eigenen Scope) und matcht dadurch NIE (Praezedenz Seriennummern.razor.css:25-46, .serial-retex-scope ::deep .serial-retex-sn-link -- dieselbe Kind-Komponenten-/RenderTreeBuilder-Falle). Fix: ::deep, verankert an .adresse-link (eigenes Markup, traegt b-scope). */ .adresse-link[b-qe0rhxwihx] .adresse-link-icon { vertical-align: middle; margin-left: .15rem; margin-right: 0; } /* /Shared/ArtikelLink.razor.rz.scp.css */ /* Plan 41 D4 (Praezedenz AdresseLink.razor.css): eigenes Markup (a/span) ist scoped -- deren b-scope-Attribut liegt direkt auf dem gerenderten Element. Das Icon ist aber eine KIND-KOMPONENTE (MudIcon) -- die traegt dieses Scope-Attribut NICHT, eine nackte .artikel-link-icon-Regel kompiliert zu .artikel-link-icon[b-...] (Attribut-Selektor auf dem eigenen Scope) und matcht dadurch NIE. Fix: ::deep, verankert an .artikel-link (eigenes Markup, traegt b-scope). */ .artikel-link[b-er127fjjji] .artikel-link-icon { vertical-align: middle; margin-left: .15rem; margin-right: 0; } /* /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