html, body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* ---- Design-Refresh: ruhiger, rahmenbasierter Enterprise-Look (theme-getrieben) ----
LEITSATZ: Farbe bedeutet bedienbar. Der Teal-Akzent gehört Links, dem aktiven Menüpunkt, dem aktiven
Tab und der primären Schaltfläche — allem, was auf einen Klick reagiert. Reine Zierde bleibt neutral;
Statusfarben (Risiko, überfällig) sind davon ausgenommen, sie tragen eine Aussage. */
/* Einheitlicher, theme-getriebener Tastatur-Fokus (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--mud-palette-secondary); outline-offset: 2px; }
/* Rahmenbasierte Flächen: Karten/Drawer ohne Schatten; Schatten nur für schwebende Layer */
.mud-paper { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.mud-drawer { box-shadow: none !important; }
/* ---- Zeilenlänge auf breiten Monitoren begrenzen ----
MudContainer steht auf MaxWidth.ExtraLarge, das rechnet sich zu `max-width: none` auf — der Container
begrenzt also nichts. Bis ~1600 px Fensterbreite fällt das nicht auf; auf einem 24- oder 27-Zoll-Schirm
laufen Fließtext und Tabellenköpfe über die volle Breite, und der Blick verliert beim Zeilenwechsel die
Spur. 1440 px lässt breite Tabellen weiterhin atmen und deckelt nur die Extreme. */
.mud-main-content .mud-container-maxwidth-xl { max-width: 1440px; }
/* ---- Radienskala: Behälter 12 px, Bedienelemente 8 px ----
Vorher standen sechs Einzelwerte nebeneinander (14 / 10 / 9 / 8 …). Niemandem fällt ein einzelner davon
auf, aber die Summe liest sich beliebig. Zwei Stufen, konsequent angewendet, wirken gebaut statt gewachsen. */
/* ---- Karten: Haarlinie + Hauch Tiefe. Kein Schweben beim Überfahren ----
Eine Karte, die sich beim Zeigen anhebt, verspricht eine Handlung, die es meist nicht gibt. Die Kante
reagiert, die Höhe bleibt — ruhiger und ehrlicher gegenüber dem, was anklickbar ist. */
.mud-paper.mud-paper-outlined {
border-radius: 12px;
border-color: var(--mud-palette-lines-default);
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.mud-paper.mud-paper-outlined:hover {
border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 28%, var(--mud-palette-lines-default));
}
/* Eingebettete Flächen (Inline-Bearbeiten/Sub-Panels) bleiben flach und ruhig */
.mud-paper.mud-paper-outlined .mud-paper.mud-paper-outlined { box-shadow: none; }
.mud-paper.mud-paper-outlined .mud-paper.mud-paper-outlined:hover { box-shadow: none; }
/* Buttons: flach & klar (kein Schatten), klare Radien, ruhige Outlines */
.mud-button-root { border-radius: 8px; }
/* ---- Knopfhöhe an die Feldhöhe angleichen ----
Gemessen: ein Knopf in Standardgröße ist 37 px hoch, ein Eingabefeld mit Margin.Dense 40. Wo beide
in einer Zeile stehen (etwa /suche: Suchfeld + „Suchen"), zentriert `align-items: center` sie zwar
sauber — der Knopf sitzt also nicht schief, sondern ist symmetrisch 2 px oben und unten eingerückt.
Er liest sich dadurch als das kleinere Element, obwohl beide dieselbe Bedienzeile bilden.
40 px als Mindesthöhe bringt beide auf eine Kante und vergrößert nebenbei das Antippziel.
Bewusst NUR die Standardgröße (`-size-medium`): `Size.Small` ist an vielen Stellen absichtlich
klein (Tabellenzeilen, Reiterleisten) und bliebe sonst nicht mehr klein.
Nachtrag, am laufenden System gemessen: eine Stelle rutschte trotzdem durch. `MudButtonGroup`
gibt seine Größe NICHT an die Knöpfe weiter — die Gruppe trägt `mud-button-group-outlined-size-small`,
ihre Kinder aber `mud-button-text-size-medium`. Die drei Segmente Monat/Woche/Tag auf /kalender
(ebenso /rechnungen und /tools) wuchsen deshalb von 34 auf 40 px, obwohl im Markup `Size.Small`
steht — und standen damit neben 26-px-Symbolknöpfen. Die Gruppe sagt, was gemeint war; danach
richten wir uns. */
.mud-button-root[class*="-size-medium"]:not(.mud-icon-button) { min-height: 40px; }
[class*="mud-button-group"][class*="-size-small"] .mud-button-root { min-height: 0; }
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled:hover { box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent) !important; }
.mud-button-outlined { border-color: var(--mud-palette-lines-inputs); }
/* Chips etwas weicher und ruhiger */
.mud-chip { font-weight: 500; }
/* ---- Dialogfußzeile darf umbrechen ----
MudBlazor stellt `.mud-dialog-actions` auf `flex-wrap: nowrap`. Solange dort drei Knöpfe stehen,
fällt das nicht auf. Die zweistufige Löschabfrage im Termindialog macht vier daraus
(„Wirklich löschen?", „Abbrechen", „Schließen", „Speichern") — und weil MudBlazor-Knöpfe
`flex-shrink: 1` haben, schrumpfen dann alle vier. Am laufenden System bei 390 px gemessen:
die Beschriftungen standen 6 bis 15 px über ihre eigenen Knöpfe hinaus, „Wirklich löschen?"
bekam 54 px Platz für 83 px Text. Der Zeilenumlauf kostet 27 px Höhe und behält jede Beschriftung
ganz. `gap: 8px` setzt MudBlazor schon für beide Achsen — die zweite Reihe sitzt also richtig,
ohne dass hier ein Abstand nachgereicht werden muss. */
.mud-dialog-actions { flex-wrap: wrap; }
/* Eingabefelder: konsistente, weiche Radien */
.mud-input-control .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 8px; }
/* Tabellen: ruhiger Header, tabellarische Ziffern, angenehme Zeilenhöhe, dezenter Hover
ACHTUNG, am laufenden System gemessen (gleiche Falle wie beim aktiven Navigationspunkt):
`.mud-table-head .mud-table-cell` (0,2,0) war für Größe, Farbe und Laufweite TOTER CODE.
MudBlazor setzt `.mud-table-root .mud-table-head .mud-table-cell` (0,3,0) — spezifischer UND
später geladen (app.css steht vor MudBlazor.min.css, bei Gleichstand gewinnt also MudBlazor):
color: var(--mud-palette-text-primary); font-size: var(--mud-typography-subtitle2-size);
Gemessen vorher: 15,2 px in Text-Primär — also praktisch dieselbe Anmutung wie die 14-px-Datenzeile
darunter. Der Kopf las sich nicht als Kopf, sondern konkurrierte mit den Daten. Durchgekommen war
nur `font-weight: 600` (und das auch nur, weil MudBlazors Regel es gar nicht setzt).
Vier Klassen (0,4,0) schlagen die Regel sicher — ohne !important, das hier nichts erklären würde.
Gemessen nachher: 12,48 px, Text-Sekundär (#5B6573), Laufweite 0,37 px. */
.mud-table-root .mud-table-head .mud-table-row .mud-table-cell {
font-weight: 600;
font-size: .78rem;
letter-spacing: .03em;
text-transform: none;
color: var(--mud-palette-text-secondary);
}
.mud-table-cell, td, th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.mud-table-root .mud-table-row { min-height: 44px; }
.mud-table-root tbody .mud-table-row:hover { background: color-mix(in srgb, var(--mud-palette-action-default) 8%, transparent); }
.num { font-variant-numeric: tabular-nums; }
/* ---- Bildlaufschatten: zeigt an, dass rechts noch Spalten stehen ----
Am laufenden System bei 1024 px gemessen (Projekte, 8 Spalten): der Tabellenbehälter ist 701 px
breit, die Tabelle braucht 888 — 187 px liegen ausserhalb, darunter „Risiko", also genau die Spalte,
die den Zustand trägt. MudBlazor stellt den Behälter auf `overflow-x:auto`, es lässt sich also
scrollen — nur sagt das niemand. Die Tabelle sah schlicht aus, als endete sie bei „Frist".
Die Spalten zu opfern wäre der falsche Handel; stattdessen bekommt die Kante einen Hinweis.
Technik: zwei Verlaufspaare. Die deckenden (`local`) laufen MIT dem Inhalt und schieben sich am
jeweiligen Ende über den Schatten — der Hinweis verschwindet also von selbst, sobald man dort
angekommen ist. Die Schatten (`scroll`) stehen fest am Behälterrand.
Der Schatten ist über die Textfarbe gemischt statt schwarz: auf der dunklen Fläche (#23282F) wäre
ein schwarzer Schatten unsichtbar, so wird er dort hell und bleibt lesbar. */
.mud-table-container {
background-image:
linear-gradient(to right, var(--mud-palette-surface) 40%, transparent),
linear-gradient(to left, var(--mud-palette-surface) 40%, transparent),
linear-gradient(to right, color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent), transparent),
linear-gradient(to left, color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent), transparent);
background-position: left center, right center, left center, right center;
background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
}
/* Bezeichner (erste Spalte: Projekt-/Rechnungsnummer) und rechtsbündige Zahl-/Geldspalten sind
atomar — nie umbrechen (kein „RE-2026-⏎0002", kein „66.045,00 ⏎€"). Gilt für alle Listen-Views. */
.mud-table-cell:first-child { white-space: nowrap; }
.mud-table-cell[style*="text-align: right"],
.mud-table-cell[style*="text-align:right"] { white-space: nowrap; }
/* Kompaktere, symmetrische Zellenpolsterung (statt 16/24 px): schafft Breite, damit breite Listen
(Projekte 8 Spalten, Rechnungen 9) alle Spalten ohne Horizontal-Scroll zeigen.
!important, weil MudBlazors eigene Zellregel höher spezifisch ist (Muster wie .mud-drawer-Override). */
.mud-table-root .mud-table-cell { padding-left: 12px !important; padding-right: 12px !important; }
/* Rechner-Ergebnistabellen der Tools-Seite sind rohe