:root { /* Radzen Dialog-Stack global anheben. Hintergrund-Overlays (Toolbar, AppBar, Drawer, etc.) liegen darunter. */ --rz-dialog-mask-zindex: 3550; --rz-dialog-zindex: 3560; --mud-palette-primary: #ed2024; --mud-palette-secondary: #6b7280; --mud-palette-primary-darken: color-mix(in srgb, var(--mud-palette-primary) 78%, black); --mud-palette-primary-lighten: color-mix(in srgb, var(--mud-palette-primary) 80%, white); --mud-palette-background: #121212; --mud-palette-surface: #1e1e1e; --mud-palette-drawer-background: #1a1a1a; --mud-palette-drawer-text: #f3f4f6; --mud-palette-appbar-background: #151515; --mud-palette-appbar-text: #f8f9fb; --mud-palette-text-primary: #f3f4f6; --mud-palette-text-secondary: #a1a1aa; --mud-border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 28%, transparent); /* ================================================================================ NACHGEZOGENE PALETTEN-FARBEN (ergänzt am 06.08.2026) ================================================================================ WARUM DIESE NEUN VARIABLEN GEFEHLT HABEN ---------------------------------------- Dieses Projekt lief früher auf der Komponenten-Bibliothek "MudBlazor". Die hat ihren kompletten Farbkasten selbst mitgebracht — rund drei Dutzend Variablen mit Namen wie --mud-palette-error oder --mud-palette-divider. Als MudBlazor durch das hauseigene "MudCompat"-Shim ersetzt wurde (also durch einen schlanken Nachbau, der nur noch die Optik liefert), wurde dieser Farbkasten NICHT vollständig mitgenommen: Übernommen wurden nur die zwölf Farben, die für Hintergrund, Fläche, Leiste und Schrift gebraucht wurden. Neun weitere Namen wurden im Code aber weiterhin benutzt — sie zeigten seitdem ins Leere. WARUM EIN INS LEERE ZEIGENDES var() SO GEFÄHRLICH IST ----------------------------------------------------- In CSS gilt: Steht in einer Angabe ein var(--irgendwas), und dieses "irgendwas" ist nirgends definiert und hat auch keinen Ersatzwert hinterlegt, dann fällt nicht etwa nur die Farbe weg — der Browser wirft die GANZE Angabe weg. Aus "border: 1px solid var(--mud-palette-divider)" wird also nicht "ein Rahmen in Standardfarbe", sondern "gar kein Rahmen". Das ist der Grund, warum solche Fehler so schwer zu finden sind: Es sieht nicht falsch aus, es ist einfach nichts da. WAS DADURCH KONKRET KAPUTT WAR ------------------------------ 1. Die Rahmen der Notenfelder. Gemessen ergab der Browser dort "none 0px" — die Felder standen also ohne jede Umrandung nebeneinander. 2. Die komplette Signalfarben-Palette von Radzen. Weiter unten in dieser Datei werden Radzens eigene Farben an unsere Palette angehängt: --rz-warning, --rz-danger, --rz-success, --rz-info und die dazugehörigen "-lighter"-Mischungen. Alle diese Zuweisungen zeigten auf die fehlenden Namen und waren damit ebenfalls ungültig. Ergebnis: Radzen fiel auf seine eigenen Werksfarben zurück — Warn- und Fehlermeldungen erschienen violett statt im Marken-Rot. Das ist genau dieselbe Ursache wie bei den "weiß auf weiß"-Problemen, die am 01.08.2026 zentral in dieser Datei behoben wurden: Radzen war nicht angebunden. WOHER DIE WERTE STAMMEN ----------------------- Es wurde bewusst KEINE neue Farbe erfunden. Jeder Wert existiert im Projekt bereits an anderer Stelle, damit es eine einzige Wahrheit bleibt: - Trennlinien kommen aus --mud-border-color (ein paar Zeilen darüber), - Bernstein #f59e0b steckt in --score-input-outlier-bg, - Rot #ef4444 steckt in --score-input-error-bg, - Grün #16a34a steckt in --score-input-coefficient-bg, - Blau #0288d1 stand schon als ausdrücklicher Ersatzwert im Code. In den anderen vier Design-Blöcken weiter unten stehen dieselben neun Variablen noch einmal mit passenden Werten; dort verweist ein kurzer Kommentar hierher. ================================================================================ */ /* Trennlinien und Rahmen. Beide leiten sich aus --mud-border-color ab, damit es für "Linienfarbe" genau EINE Quelle im Projekt gibt und nicht drei, die irgendwann auseinanderlaufen. --mud-palette-lines-default ist der Name, den Radzen-nahe Regeln benutzen, --mud-palette-divider der aus dem Mud-Erbe. */ --mud-palette-divider: var(--mud-border-color); --mud-palette-lines-default: var(--mud-border-color); /* Signalfarben. Diese vier reicht die Datei weiter unten unverändert an Radzen durch (--rz-warning, --rz-danger, --rz-success, --rz-info), sie wirken also nicht nur hier, sondern in jeder Radzen-Meldung und jedem farbigen Knopf. */ --mud-palette-warning: #f59e0b; --mud-palette-error: #ef4444; --mud-palette-success: #16a34a; --mud-palette-info: #0288d1; /* Abgesetzte Fläche ("Grau"). Statt eines festen Grautons wird die Oberfläche des jeweiligen Designs mit einem Hauch Schriftfarbe gemischt. Das erledigt beide Richtungen von allein: Im dunklen Design ist die Schrift hell, die Fläche wird also etwas HELLER; im hellen Design ist die Schrift dunkel, die Fläche wird etwas DUNKLER. Genau dieselbe Mechanik benutzt die Datei weiter unten schon für Radzens Graustufen-Skala (--rz-base-100 und folgende). */ --mud-palette-background-grey: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary) 8%); /* ACHTUNG, häufiges Missverständnis: Das ist NICHT die normale Schriftfarbe (die heißt --mud-palette-text-primary). Gemeint ist die Schriftfarbe, die AUF einer Fläche in der Primär- bzw. Sekundärfarbe steht — also die Beschriftung eines roten Knopfes. Beleg dafür steht weiter unten in dieser Datei: --rz-on-primary: var(--mud-palette-primary-text, #fff). Da die Primärfarbe hier ein kräftiges Rot (#ed2024) und die Sekundärfarbe ein mittleres Grau (#6b7280) ist, ist Weiß in beiden Fällen die lesbare Wahl. */ --mud-palette-primary-text: #ffffff; --mud-palette-secondary-text: #ffffff; --mud-shadow-color: rgba(0, 0, 0, 0.36); --mud-radius-sm: 8px; --mud-radius-md: 12px; --mud-radius-lg: 16px; --score-input-bg: #f5f7fa; --score-input-text: #111827; --score-input-highlight-bg: color-mix(in srgb, var(--mud-palette-primary) 18%, #f5f7fa); --score-input-outlier-bg: color-mix(in srgb, #f59e0b 28%, #f5f7fa); --score-input-error-bg: color-mix(in srgb, #ef4444 24%, #f5f7fa); /* NEU: Kennzeichnung von Wertnoten-Feldern mit KOEFFIZIENT (Faktor 2, 3 …). Im Eingabefeld steht seit diesem Umbau immer die eingetippte Note (z. B. 6,5) und nicht mehr der multiplizierte Endwert (13,0) - vorher war das je Paragraf unterschiedlich. Damit der Richter trotzdem sofort sieht, dass hier verdoppelt oder verdreifacht wird, bekommt das Feld einen grünen Hintergrund und rechts daneben steht klein und ebenfalls grün der tatsächliche Endwert. Warum eine EIGENE Variable und nicht das vorhandene --score-input-highlight-bg: Jenes mischt die Primärfarbe ein, und die ist in diesem Projekt Rot (#ed2024) bzw. Pink (#ff1493). Rot ist an einem Notenfeld die Farbe für "da stimmt etwas nicht" - genau das Gegenteil der hier gewünschten Aussage. NACHTRAG 06.08.2026: Hier stand bis dahin, die alte Variable --score-input-highlight-bg werde "an anderen Stellen weiterverwendet". Das stimmt nicht mehr. Auf Franks Entscheidung wurden am 06.08.2026 auch die letzten drei Stellen umgestellt (§353a, §402a und die allgemeine Wertungsmaske in Pages/Scoring.razor) - die Koeffizienten- Kennzeichnung ist damit überall grün, und Rot bleibt ausschließlich Fehlerzuständen vorbehalten. --score-input-highlight-bg hat seither KEINEN aktiven Verwender mehr. Sie bleibt vorerst definiert, damit ein späterer Bedarf keine neue Variable braucht; wer sie wiederbelebt, sollte vorher prüfen, ob Rot an der Stelle wirklich gemeint ist. Warum der Hintergrund je Design gemischt wird, die Schriftfarbe aber nur zweifach existiert: Das Eingabefeld ist in ALLEN Designs hell (siehe --score-input-bg oben), der Endwert daneben steht dagegen auf dem TABELLEN-Hintergrund - und der ist im dunklen Design dunkel. Deshalb dort ein helles Grün, in den hellen Designs ein dunkles. */ --score-input-coefficient-bg: color-mix(in srgb, #16a34a 22%, #f5f7fa); --score-input-coefficient-fg: #4ade80; /* NEU (v1.6.2.19): Rahmenfarbe fuer Wertnoten, die kein halber Notenschritt sind (z. B. 7,2 bei §402b/§402c). Der Wert wird bewusst trotzdem uebernommen, das Feld aber dauerhaft umrandet - siehe Wertnotenraster.cs im Shared-Projekt. Warum eine eigene Variable und KEIN var(--mud-palette-warning): Diese Variable ist im ganzen Projekt nirgends definiert (MudBlazor wurde durch das MudCompat-Shim ersetzt, die Palette kam damals mit). Ein var() ohne Ersatzwert, das ins Leere zeigt, macht die ganze CSS-Angabe ungueltig - der Rahmen waere schlicht nicht erschienen. Warum nur EIN Wert und kein Ableger je Theme: Die Notenfelder haben in ALLEN vier Designs einen hellen Hintergrund (--score-input-bg oben, #f1f5f9 / #ffffff / #fff8fc) - auch im dunklen Design. Ein dunkles Bernstein sitzt deshalb ueberall gut lesbar. Es ist absichtlich dunkler als das helle Bernstein der Ausreisser-Markierung (--score-input-outlier-bg), damit beides gleichzeitig unterscheidbar bleibt. */ --score-input-step-warning-border: #b45309; --score-confirmed-bg: #4f8d63; --score-confirmed-border: #3d6f4d; --score-confirmed-text: #f4fff7; --score-judge-header-bg: #0d47a1; --score-judge-header-text: #f8fbff; --score-judge-confirmed-bg: #2f8f4a; --score-judge-confirmed-text: #f6fff8; --score-comment-text-color: #ffffff; /* Re-Design 2026-06: Tabellen-/Gitterlinien je Modus klar sichtbar machen. Alt (nur eine blasse horizontale Linie, keine vertikalen Trennlinien): --score-grid-line: rgba(255, 255, 255, 0.36); --score-grid-line-vertical: transparent; */ --score-grid-line: rgba(255, 255, 255, 0.46); --score-grid-line-vertical: rgba(255, 255, 255, 0.16); --table-border: rgba(255, 255, 255, 0.20); --score-judge-column-width: clamp(110px, 11vw, 150px); --score-lesson-column-width: clamp(240px, 22vw, 340px); --score-comment-column-width: clamp(280px, 26vw, 420px); --score-col-weight-number: 0.75; --score-col-weight-lesson: 3.2; --score-col-weight-k: 0.6; --score-col-weight-judge: 2.1; --score-col-weight-comment: 4.8; --score-judge-card-height: 104px; --score-header-label-row-height: 24px; --score-toolbar-height: 30px; --score-bottom-toolbar-clearance: 42px; /* Hoehe des schwarzen "Sichtschutz"-Bandes direkt ueber der Toolbar (.scoring-page::after). Standard ist und bleibt 76px (Originalverhalten fuer alle normalen Pruefungen). Nur im Paperless-/BlackHorse-Modus wird das Band per Modifier-Klasse verkleinert (siehe .scoring-page--pbh weiter unten), weil dort Platz gespart werden soll. */ --score-bottom-hidden-row-guard: 76px; } /* Explicit Dark Mode class (same palette as root) */ .dark-mode { --mud-palette-primary: #ed2024; --mud-palette-secondary: #6b7280; --mud-palette-background: #121212; --mud-palette-surface: #1e1e1e; --mud-palette-drawer-background: #1a1a1a; --mud-palette-drawer-text: #f3f4f6; --mud-palette-appbar-background: #151515; --mud-palette-appbar-text: #f8f9fb; --mud-palette-text-primary: #f3f4f6; --mud-palette-text-secondary: #a1a1aa; /* Nachgezogene Paletten-Farben — ausführliche Begründung im :root-Block ganz oben. Dunkles Design: gleiche Werte wie in :root, denn dieser Block ist der ausdrücklich gewählte Zwilling des Standard-Designs. Die abgesetzte Fläche wird durch die helle Schriftfarbe automatisch etwas heller als die Grundfläche. Weiß als Schrift auf Primär (Rot #ed2024) und Sekundär (Grau #6b7280) ist in beiden Fällen lesbar. */ --mud-palette-divider: var(--mud-border-color); --mud-palette-lines-default: var(--mud-border-color); --mud-palette-warning: #f59e0b; --mud-palette-error: #ef4444; --mud-palette-success: #16a34a; --mud-palette-info: #0288d1; --mud-palette-background-grey: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary) 8%); --mud-palette-primary-text: #ffffff; --mud-palette-secondary-text: #ffffff; /* Re-Design 2026-06: Tabellenlinien Dark-Mode explizit (vorher nur aus :root geerbt). */ --score-grid-line: rgba(255, 255, 255, 0.46); --score-grid-line-vertical: rgba(255, 255, 255, 0.16); --table-border: rgba(255, 255, 255, 0.20); --score-input-bg: #f1f5f9; --score-input-text: #111827; --score-input-highlight-bg: color-mix(in srgb, var(--mud-palette-primary) 20%, #f1f5f9); --score-input-outlier-bg: color-mix(in srgb, #f59e0b 24%, #f1f5f9); --score-input-error-bg: color-mix(in srgb, #ef4444 22%, #f1f5f9); /* Koeffizient-Kennzeichnung, siehe ausführliche Begründung im :root-Block ganz oben. Dunkles Design: Tabellenhintergrund ist dunkel, der Endwert daneben also hellgrün. */ --score-input-coefficient-bg: color-mix(in srgb, #16a34a 22%, #f1f5f9); --score-input-coefficient-fg: #4ade80; --score-confirmed-bg: #4f8d63; --score-confirmed-border: #3d6f4d; --score-confirmed-text: #f4fff7; } /* Light Mode overrides */ .light-mode { --mud-palette-primary: #ed2024; --mud-palette-secondary: #6b7280; --mud-palette-background: #f5f6f8; --mud-palette-surface: #ffffff; --mud-palette-drawer-background: #f8fafc; --mud-palette-drawer-text: #1f2937; --mud-palette-appbar-background: #ed2024; --mud-palette-appbar-text: #ffffff; --mud-palette-text-primary: #111827; --mud-palette-text-secondary: #4b5563; /* Nachgezogene Paletten-Farben — ausführliche Begründung im :root-Block ganz oben. Helles Design: Die vier Signalfarben bleiben gleich, denn sie sollen als Signal in jedem Design identisch wiedererkennbar sein. Die abgesetzte Fläche wird hier automatisch etwas DUNKLER als die weiße Grundfläche, weil die eingemischte Schriftfarbe in diesem Design dunkel ist. Weiß als Schrift auf Primär (Rot) und Sekundär (Grau) bleibt lesbar. */ --mud-palette-divider: var(--mud-border-color); --mud-palette-lines-default: var(--mud-border-color); --mud-palette-warning: #f59e0b; --mud-palette-error: #ef4444; --mud-palette-success: #16a34a; --mud-palette-info: #0288d1; --mud-palette-background-grey: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary) 8%); --mud-palette-primary-text: #ffffff; --mud-palette-secondary-text: #ffffff; /* Re-Design 2026-06: Tabellenlinien Light-Mode (vorher weisse Linien auf hellem Grund = unsichtbar). */ --score-grid-line: rgba(17, 24, 39, 0.26); --score-grid-line-vertical: rgba(17, 24, 39, 0.14); --table-border: rgba(17, 24, 39, 0.18); --score-input-bg: #ffffff; --score-input-text: #111827; --score-input-highlight-bg: color-mix(in srgb, var(--mud-palette-primary) 12%, #ffffff); --score-input-outlier-bg: color-mix(in srgb, #f59e0b 20%, #ffffff); --score-input-error-bg: color-mix(in srgb, #ef4444 18%, #ffffff); /* Koeffizient-Kennzeichnung, siehe ausführliche Begründung im :root-Block ganz oben. Helles Design: Tabellenhintergrund ist hell, der Endwert daneben also dunkelgrün. */ --score-input-coefficient-bg: color-mix(in srgb, #16a34a 18%, #ffffff); --score-input-coefficient-fg: #15803d; --score-confirmed-bg: #5b9b70; --score-confirmed-border: #457b58; --score-confirmed-text: #f4fff7; } /* Light Pink Mode overrides */ .lightpink-mode { --mud-palette-primary: #ff1493; --mud-palette-secondary: #c71585; --mud-palette-background: #ffe4e1; --mud-palette-surface: #fff0f5; --mud-palette-drawer-background: #fff6fa; --mud-palette-drawer-text: #6b2149; --mud-palette-appbar-background: #ffd8eb; --mud-palette-appbar-text: #7a1e4f; --mud-palette-text-primary: #5a183a; --mud-palette-text-secondary: #9b4d74; /* Nachgezogene Paletten-Farben — ausführliche Begründung im :root-Block ganz oben. Hell-Pink: Signalfarben unverändert (ein Fehler muss überall gleich rot aussehen). Die abgesetzte Fläche mischt die dunkle Pflaumen-Schriftfarbe ein und wird damit leicht dunkler als die rosa Grundfläche — sie bleibt dabei im Farbton des Designs, statt zu einem fremden Grau zu kippen. Weiß als Schrift auf Primär (#ff1493) und Sekundär (#c71585) ist bei beiden kräftigen Pinktönen gut lesbar. */ --mud-palette-divider: var(--mud-border-color); --mud-palette-lines-default: var(--mud-border-color); --mud-palette-warning: #f59e0b; --mud-palette-error: #ef4444; --mud-palette-success: #16a34a; --mud-palette-info: #0288d1; --mud-palette-background-grey: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary) 8%); --mud-palette-primary-text: #ffffff; --mud-palette-secondary-text: #ffffff; /* Re-Design 2026-06: Tabellenlinien Light-Pink deutlich sichtbar (Hauptbeschwerde). */ --score-grid-line: rgba(122, 30, 79, 0.40); --score-grid-line-vertical: rgba(122, 30, 79, 0.22); --table-border: rgba(122, 30, 79, 0.28); --score-input-bg: #fff8fc; --score-input-text: #6b2149; --score-input-highlight-bg: color-mix(in srgb, var(--mud-palette-primary) 14%, #fff8fc); --score-input-outlier-bg: color-mix(in srgb, #f59e0b 20%, #fff8fc); --score-input-error-bg: color-mix(in srgb, #ef4444 18%, #fff8fc); /* Koeffizient-Kennzeichnung, siehe ausführliche Begründung im :root-Block ganz oben. Hell-Pink: Tabellenhintergrund ist hell, der Endwert daneben also dunkelgrün. */ --score-input-coefficient-bg: color-mix(in srgb, #16a34a 18%, #fff8fc); --score-input-coefficient-fg: #15803d; --score-confirmed-bg: #5b9b70; --score-confirmed-border: #457b58; --score-confirmed-text: #f4fff7; } /* Dark Pink Mode overrides */ .darkpink-mode { --mud-palette-primary: #ff1493; --mud-palette-secondary: #ff69b4; --mud-palette-background: #111113; --mud-palette-surface: #1b1b21; --mud-palette-drawer-background: #17171d; --mud-palette-drawer-text: #ffe7f3; --mud-palette-appbar-background: #141419; --mud-palette-appbar-text: #ffe7f3; --mud-palette-text-primary: #ffe7f3; --mud-palette-text-secondary: #d8adc8; /* Nachgezogene Paletten-Farben — ausführliche Begründung im :root-Block ganz oben. Dunkel-Pink: Signalfarben unverändert. Die abgesetzte Fläche mischt die helle Rosa-Schriftfarbe ein und wird dadurch etwas heller als die dunkle Grundfläche. EINZIGE ABWEICHUNG IM GANZEN PROJEKT — bitte nicht "vereinheitlichen": In allen anderen Designs ist die Schrift auf der Sekundärfarbe weiß. Hier NICHT. Grund: Die Sekundärfarbe dieses Designs ist ein HELLES Rosa (#ff69b4) und nicht, wie sonst, ein dunkles Grau oder ein kräftiges Pink. Weiße Schrift darauf käme auf ein Kontrastverhältnis von rund 2:1 und wäre praktisch nicht lesbar — die Beschriftung eines solchen Knopfes würde in der Fläche verschwinden. Deshalb steht hier das dunkle Pflaumenton, das in diesem Block ohnehin schon als Schriftfarbe der Notenfelder benutzt wird (--score-input-text). Damit kommt der Kontrast auf rund 7:1. Die Primärfarbe (#ff1493) ist dagegen kräftig genug und behält wie überall sonst weiße Schrift. */ --mud-palette-divider: var(--mud-border-color); --mud-palette-lines-default: var(--mud-border-color); --mud-palette-warning: #f59e0b; --mud-palette-error: #ef4444; --mud-palette-success: #16a34a; --mud-palette-info: #0288d1; --mud-palette-background-grey: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary) 8%); --mud-palette-primary-text: #ffffff; --mud-palette-secondary-text: #4a1632; /* Re-Design 2026-06: Tabellenlinien Dark-Pink explizit (vorher nur aus :root geerbt). */ --score-grid-line: rgba(255, 231, 243, 0.40); --score-grid-line-vertical: rgba(255, 231, 243, 0.18); --table-border: rgba(255, 231, 243, 0.20); --score-input-bg: #f6e8f1; --score-input-text: #4a1632; --score-input-highlight-bg: color-mix(in srgb, var(--mud-palette-primary) 18%, #f6e8f1); --score-input-outlier-bg: color-mix(in srgb, #f59e0b 20%, #f6e8f1); --score-input-error-bg: color-mix(in srgb, #ef4444 18%, #f6e8f1); /* Koeffizient-Kennzeichnung, siehe ausführliche Begründung im :root-Block ganz oben. Dunkel-Pink: Tabellenhintergrund ist dunkel, der Endwert daneben also hellgrün. */ --score-input-coefficient-bg: color-mix(in srgb, #16a34a 18%, #f6e8f1); --score-input-coefficient-fg: #4ade80; --score-confirmed-bg: #4f8d63; --score-confirmed-border: #3d6f4d; --score-confirmed-text: #f4fff7; } html, body { margin: 0; min-height: 100%; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; line-height: 1.45; } body { overflow-y: auto; overflow-x: hidden; } .beginner-mode-overlay { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 3200; width: min(520px, calc(100vw - 24px)); max-width: min(520px, calc(100vw - 24px)); visibility: hidden; pointer-events: none; } .beginner-mode-bubble { position: relative; padding: 14px 18px; border: 2px solid #facc15; border-radius: 18px; background: linear-gradient(180deg, #fff7cc 0%, #ffe680 100%); color: #2f2400; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42); } .beginner-mode-bubble::after { content: ""; position: absolute; left: var(--beginner-mode-arrow-left, 42px); bottom: -12px; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 12px solid #ffe680; transform: translateX(-50%); } .beginner-mode-bubble::before { content: ""; position: absolute; left: var(--beginner-mode-arrow-left, 42px); bottom: -15px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 15px solid #facc15; transform: translateX(-50%); } .beginner-mode-overlay[data-placement="below"] .beginner-mode-bubble::after { top: -12px; bottom: auto; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 0; border-bottom: 12px solid #fff7cc; } .beginner-mode-overlay[data-placement="below"] .beginner-mode-bubble::before { top: -15px; bottom: auto; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 0; border-bottom: 15px solid #facc15; } .beginner-mode-overlay[data-placement="right"] .beginner-mode-bubble::after { left: -12px; top: var(--beginner-mode-arrow-top, 42px); bottom: auto; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 0; border-right: 12px solid #fff3a8; transform: translateY(-50%); } .beginner-mode-overlay[data-placement="right"] .beginner-mode-bubble::before { left: -15px; top: var(--beginner-mode-arrow-top, 42px); bottom: auto; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 0; border-right: 15px solid #facc15; transform: translateY(-50%); } .beginner-mode-overlay[data-placement="left"] .beginner-mode-bubble::after { right: -12px; left: auto; top: var(--beginner-mode-arrow-top, 42px); bottom: auto; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 0; border-left: 12px solid #fff3a8; transform: translateY(-50%); } .beginner-mode-overlay[data-placement="left"] .beginner-mode-bubble::before { right: -15px; left: auto; top: var(--beginner-mode-arrow-top, 42px); bottom: auto; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-right: 0; border-left: 15px solid #facc15; transform: translateY(-50%); } .beginner-mode-title { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .beginner-mode-message { margin-top: 4px; font-size: 1.05rem; font-weight: 700; } .beginner-mode-note { margin-top: 6px; font-size: 0.78rem; opacity: 0.78; } .beginner-mode-appbar-button { border-color: rgba(255, 255, 255, 0.72) !important; color: inherit !important; font-weight: 700 !important; text-transform: none !important; } .beginner-mode-js-target:not(:disabled):not([readonly]) { position: relative; z-index: 2; outline: 3px solid #facc15 !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.26), 0 0 24px rgba(250, 204, 21, 0.86) !important; border-radius: 10px !important; animation: beginner-mode-pulse 1.15s ease-in-out infinite; } tr.beginner-mode-js-target { box-shadow: inset 0 0 0 3px #facc15, 0 0 24px rgba(250, 204, 21, 0.74) !important; } @keyframes beginner-mode-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } } @media (max-width: 760px) { .beginner-mode-overlay { top: 58px; } .beginner-mode-message { font-size: 0.98rem; } .beginner-mode-appbar-button { padding-left: 8px !important; padding-right: 8px !important; } } * { box-sizing: border-box; } a, a:visited { color: var(--mud-palette-primary); text-decoration: none; } a:hover { text-decoration: underline; } #app { min-height: 100vh; } /* Re-Design 2026-06: Score-Control-Marken-Helfer. Theme-reaktive Emblem-Umschaltung fuer Seiten OHNE eigenen Theme-State (Login, Setup, Credits): helle Emblem-Variante auf dunklen Flaechen, dunkle Variante auf hellen Flaechen (light/lightpink). Standard = dunkles Theme. */ .sc-emblem-on-light { display: none; } /* Light-Pink nutzt bewusst die helle (kraeftige) Variante wie die dunklen Modi (Default oben), weil die dunkle Emblem-Variante auf rosa blass/ausgefranst wirkt. Nur reines Light (weiss) zeigt das dunkle Emblem. */ .light-mode .sc-emblem-on-dark { display: none; } .light-mode .sc-emblem-on-light { display: inline-block; } .sc-wordmark { font-weight: 800; letter-spacing: 0.05em; } .sc-wordmark .ctl { color: var(--mud-palette-primary); } /* Utility classes used heavily by existing pages */ .pa-0 { padding: 0 !important; } .pa-1 { padding: 0.25rem !important; } .pa-2 { padding: 0.5rem !important; } .pa-3 { padding: 0.75rem !important; } .pa-4 { padding: 1rem !important; } .pa-6 { padding: 1.5rem !important; } .pa-8 { padding: 2rem !important; } .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mt-4 { margin-top: 1rem !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .mb-4 { margin-bottom: 1rem !important; } .ml-2 { margin-left: 0.5rem !important; } .mr-2 { margin-right: 0.5rem !important; } .mr-4 { margin-right: 1rem !important; } .me-1 { margin-right: 0.25rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .pl-0 { padding-left: 0 !important; } .ps-3 { padding-left: 1rem !important; } .d-flex { display: flex !important; } .flex-column { flex-direction: column !important; } .align-center { align-items: center !important; } .justify-center { justify-content: center !important; } .justify-space-between { justify-content: space-between !important; } .flex-1 { flex: 1 1 auto !important; } .flex-grow-1 { flex-grow: 1 !important; } .gap-2 { gap: 0.5rem !important; } .rounded { border-radius: var(--mud-radius-sm) !important; } .text-center { text-align: center !important; } .text-end { text-align: right !important; } .mud-text-secondary { color: var(--mud-palette-text-secondary) !important; } /* Typography */ .mud-typography { color: inherit; } .mud-typography-h2 { margin: 0; font-size: clamp(1.75rem, 2.2vw, 2.2rem); line-height: 1.2; font-weight: 700; } .mud-typography-h3 { margin: 0; font-size: clamp(1.45rem, 1.9vw, 1.85rem); line-height: 1.25; font-weight: 700; } .mud-typography-h4 { margin: 0; font-size: clamp(1.25rem, 1.5vw, 1.55rem); line-height: 1.25; font-weight: 700; } .mud-typography-h5 { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 700; } .mud-typography-h6 { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 700; } .mud-typography-subtitle1 { font-size: 1rem; line-height: 1.35; font-weight: 600; } .mud-typography-subtitle2 { font-size: 0.95rem; line-height: 1.35; font-weight: 600; } .mud-typography-body1 { font-size: 0.95rem; line-height: 1.45; } .mud-typography-body2 { font-size: 0.88rem; line-height: 1.45; } .mud-typography-caption { font-size: 0.78rem; line-height: 1.35; } /* Color helper classes from MudCompatColor */ .mud-compat-default { color: var(--mud-palette-text-primary); } .mud-compat-primary { color: var(--mud-palette-primary); } .mud-compat-secondary { color: var(--mud-palette-secondary); } .mud-compat-success { color: #22c55e; } .mud-compat-info { color: #38bdf8; } .mud-compat-warning { color: #facc15; } .mud-compat-error { color: #ef4444; } .mud-compat-dark { color: #111827; } /* Layout */ .mud-compat-layout, .mud-layout { min-height: 100vh; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); } .mud-compat-appbar, .mud-appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: 56px; padding: 0 0.75rem; display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--mud-border-color); background: color-mix(in srgb, var(--mud-palette-appbar-background) 90%, transparent 10%); color: var(--mud-palette-appbar-text); backdrop-filter: blur(8px); } .mud-compat-drawer, .mud-drawer { position: fixed; top: 56px; left: 0; bottom: 0; width: min(84vw, 280px); z-index: 1190; background: var(--mud-palette-drawer-background); color: var(--mud-palette-drawer-text); border-right: 1px solid var(--mud-border-color); box-shadow: 0 12px 28px var(--mud-shadow-color); overflow-y: auto; } .mud-compat-drawer-header { padding: 1rem 0.8rem 0.7rem; border-bottom: 1px solid var(--mud-border-color); } .mud-compat-drawer:not(.mud-compat-drawer-open) { display: none !important; } .mud-compat-drawer.mud-compat-drawer-open ~ .mud-compat-main { padding-left: min(84vw, 280px); } .mud-compat-main, .mud-main-content { min-height: 100vh; padding-top: 56px; transition: padding-left 0.2s ease; } .mud-compat-container, .mud-container { width: 100%; } .main-content-with-toolbar { padding-bottom: 220px; } .shows-flow-page, .shows-flow-page .mud-paper, .shows-flow-page .mud-table-root, .shows-flow-page .mud-table-container { width: 100%; max-width: 100%; } .shows-flow-page:not(.starterlists-page) .mud-table-container { overflow-x: auto; } .shows-flow-page table { width: 100%; } .shows-flow-page { padding-right: 20px; box-sizing: border-box; } body.showboard-drawer-open .shows-flow-page { padding-right: 0; } /* Starterlists: use full available width and avoid per-block scrollbars in group/team views */ .starterlists-page { padding-right: 0; overflow-x: hidden; } .starterlists-page .starterlists-group-layout { width: 100%; align-items: stretch !important; } .starterlists-page .starterlists-group-layout > * { width: 100% !important; align-self: stretch !important; } .starterlists-page, .starterlists-page .starterlists-group-layout, .starterlists-page .starterlists-group-card, .starterlists-page .starterlists-group-table, .starterlists-page .mud-table-root, .starterlists-page .mud-table-container, .starterlists-page .mud-table { width: 100%; max-width: 100%; } .starterlists-page .mud-table, .starterlists-page .mud-table-root, .starterlists-page .mud-table-container { min-width: 0 !important; } .starterlists-page .mud-compat-table-wrap { overflow-x: clip !important; } .starterlists-page .starterlists-group-card { display: block; overflow: hidden; } .starterlists-page .starterlists-division-layout .starterlists-group-table table, .starterlists-page .starterlists-division-layout table.starterlists-group-table, .starterlists-page .starterlists-division-layout .starterlists-group-table .mud-table-root, .starterlists-page .starterlists-division-layout .starterlists-group-table .mud-compat-table { /* Jede Abteilungs-Kachel rendert ihre eigene Tabelle. Das eigentliche Tabellenlayout sitzt in MudBlazor auf der inneren Tabelle, nicht auf dem aeußeren Wrapper. Nur dort erzwingt table-layout: fixed identische Spaltenbreiten ueber alle Abteilungen. */ width: 100% !important; min-width: 0 !important; table-layout: fixed !important; border-collapse: collapse; } .starterlists-page .mud-table-container, .starterlists-page .starterlists-group-table .mud-table-container { overflow-x: clip !important; overflow-y: visible; } .starterlists-page .starterlists-group-table.mud-table { overflow-x: hidden !important; } @supports not (overflow: clip) { .starterlists-page .mud-compat-table-wrap, .starterlists-page .mud-table-container, .starterlists-page .starterlists-group-table .mud-table-container { overflow-x: hidden !important; } } .starterlists-page .starterlists-group-table th, .starterlists-page .starterlists-group-table td { vertical-align: top; padding: 0.46rem 0.52rem !important; } .starterlists-page .starterlists-group-header { background: linear-gradient(135deg, #2b3038 0%, #181c23 100%) !important; color: #f3f4f6 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .starterlists-page .starterlists-group-header .mud-typography, .starterlists-page .starterlists-group-header .mud-icon { color: #f3f4f6 !important; } .starterlists-page .starterlists-group-count-chip { background-color: rgba(255, 255, 255, 0.14) !important; color: #f3f4f6 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; } @media (max-width: 960px) { .starterlists-page .mud-compat-table-wrap, .starterlists-page .mud-table-container, .starterlists-page .starterlists-group-table .mud-table-container { overflow-x: auto !important; } .starterlists-page .starterlists-division-layout .starterlists-group-table { min-width: 680px !important; } } /* Navigation */ .mud-compat-navmenu, .mud-navmenu { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.45rem; } .mud-compat-navlink, .mud-nav-link { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 36px; border: none; border-radius: var(--mud-radius-sm); padding: 0.4rem 0.65rem; color: inherit; background: transparent; text-decoration: none; font-size: 0.9rem; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease; } .mud-compat-navlink:hover, .mud-nav-link:hover { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-text-primary); text-decoration: none; } .mud-compat-navlink.active, .mud-nav-link.active { background: color-mix(in srgb, var(--mud-palette-primary) 26%, transparent); color: var(--mud-palette-text-primary); font-weight: 600; } .mud-compat-navlink[disabled], .mud-compat-navlink.mud-compat-navlink-button[disabled] { opacity: 0.45; pointer-events: none; } /* Panels and cards */ .mud-compat-paper, .mud-paper, .mud-compat-card { background: color-mix(in srgb, var(--mud-palette-surface) 96%, black 4%); border: 1px solid var(--mud-border-color); border-radius: var(--mud-radius-md); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .mud-compat-card { overflow: hidden; } .mud-compat-card-content { padding: 1rem; } .mud-compat-card-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--mud-border-color); display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } .mud-compat-card-actions { padding: 0.65rem 1rem 0.95rem; display: flex; gap: 0.5rem; justify-content: flex-end; } .mud-compat-card-media { width: 100%; min-height: 120px; } .mud-compat-image { max-width: 100%; height: auto; } /* Inputs */ .mud-compat-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .mud-compat-label { font-size: 0.78rem; color: var(--mud-palette-text-secondary); letter-spacing: 0.01em; } .mud-compat-input-wrap { display: flex; align-items: center; gap: 0.25rem; border: 1px solid var(--mud-border-color); border-radius: var(--mud-radius-sm); background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mud-compat-input, .mud-compat-input-wrap .mud-compat-input, .mud-compat-field select.mud-compat-input, .mud-compat-field input.mud-compat-input, .mud-compat-field textarea.mud-compat-input { width: 100%; min-height: 36px; border: none; background: transparent; color: var(--mud-palette-text-primary); font: inherit; padding: 0.45rem 0.6rem; outline: none; } .mud-compat-field select.mud-compat-input { appearance: none; cursor: pointer; } .mud-compat-select-wrap { position: relative; gap: 0; } .mud-compat-select-input { padding-right: 2rem !important; } .mud-compat-select-input:disabled { cursor: not-allowed; } .mud-compat-select-input option { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); } .dark-mode .mud-compat-select-input, .darkpink-mode .mud-compat-select-input { color-scheme: dark; } .light-mode .mud-compat-select-input, .lightpink-mode .mud-compat-select-input { color-scheme: light; } .mud-compat-select-arrow { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); color: var(--mud-palette-text-secondary); pointer-events: none; display: inline-flex; align-items: center; justify-content: center; } .mud-compat-field input::placeholder, .mud-compat-field textarea::placeholder { color: color-mix(in srgb, var(--mud-palette-text-secondary) 78%, transparent); } .mud-compat-input:focus, .mud-compat-input-wrap:focus-within { border-color: color-mix(in srgb, var(--mud-palette-primary) 62%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); } .mud-compat-input-wrap:focus-within .mud-compat-input { box-shadow: none; } .mud-compat-adornment { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--mud-palette-text-secondary); padding: 0 0.45rem; cursor: pointer; } .mud-compat-helper { font-size: 0.74rem; color: var(--mud-palette-text-secondary); } .mud-compat-checkbox, .mud-compat-radio, .mud-compat-switch { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--mud-palette-text-primary); } .mud-compat-checkbox input, .mud-compat-radio input, .mud-compat-switch input { accent-color: var(--mud-palette-primary); } .mud-compat-slider { display: flex; flex-direction: column; gap: 0.3rem; /* position: relative, damit die Wert-Blase (absolut positioniert) sich am Regler ausrichten kann. */ position: relative; } .mud-compat-slider-input { width: 100%; accent-color: var(--mud-palette-primary); } /* Wert-Blase ueber dem Regler-Knopf: standardmaessig unsichtbar, nur waehrend des Ziehens (Maustaste gedrueckt -> :active auf dem Slider-Container) eingeblendet. 'left' wird per Inline-Style aus dem aktuellen Wert gesetzt; translateX(-50%) zentriert die Blase ueber der jeweiligen Position. */ .mud-compat-slider-bubble { position: absolute; bottom: 100%; margin-bottom: 6px; transform: translateX(-50%); padding: 1px 7px; border-radius: 6px; background: var(--mud-palette-primary); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.1s ease; z-index: 20; } /* Kleiner Zeiger unter der Blase (zeigt auf den Regler-Knopf). */ .mud-compat-slider-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--mud-palette-primary); } /* Sichtbar NUR solange der Slider aktiv gezogen wird: :active haelt ab dem Druck auf den Regler bis zum Loslassen (auch wenn die Maus dabei den Regler verlaesst) und endet beim Loslassen - genau das gewuenschte "nur beim Ziehen". Bewusst KEIN :focus-within, sonst bliebe die Blase nach dem Loslassen stehen, solange der Regler noch den Fokus hat. */ .mud-compat-slider:active .mud-compat-slider-bubble { opacity: 1; } /* Buttons */ .mud-compat-button, .mud-button-root { border-radius: var(--mud-radius-sm); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.08s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease; } .mud-compat-button:active, .mud-button-root:active { transform: translateY(1px); } .mud-compat-button:disabled, .mud-button-root:disabled, .mud-compat-icon-button:disabled, .mud-icon-button:disabled { opacity: 0.5; cursor: not-allowed; } .mud-compat-button.mud-button-filled, .mud-compat-button.mud-compat-filled { background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-surface)); color: var(--mud-palette-text-primary); } .mud-compat-button.mud-button-filled.mud-compat-primary { background: var(--mud-palette-primary); color: #fff; } /* Unterer "Send to Showboard"-Button: vor Senden in Richterkasten-Blau */ /* ERSETZT am 22.09.2026 (Frank, v1.6.9.5): Diese Regel stammt noch aus dem alten Zwei-Zustands- Modell (nur "gesendet" = grün, sonst immer blau) und kannte den seit v1.6.9.4 dazugekommenen Zwischenzustand "orange" (schon einmal gesendet, aber inzwischen durch etwas anderes ersetzt - siehe AnzeigeStatus im ShowboardService) nicht. Die feste Blaufärbung mit !important übermalte dadurch auch das korrekt berechnete Orange wieder blau. Jetzt zusätzlich :not(.mud-compat-warning) - Orange = schon gesendet, darf nicht übermalt werden. ALT: .send-showboard-pending:not(.mud-compat-success) { background: var(--score-judge-header-bg) !important; color: var(--score-judge-header-text) !important; border-color: color-mix(in srgb, var(--score-judge-header-bg) 78%, black) !important; } .send-showboard-pending:not(.mud-compat-success):hover, .send-showboard-pending:not(.mud-compat-success):focus-visible { background: color-mix(in srgb, var(--score-judge-header-bg) 88%, black) !important; color: var(--score-judge-header-text) !important; } */ .send-showboard-pending:not(.mud-compat-success):not(.mud-compat-warning) { background: var(--score-judge-header-bg) !important; color: var(--score-judge-header-text) !important; border-color: color-mix(in srgb, var(--score-judge-header-bg) 78%, black) !important; } .send-showboard-pending:not(.mud-compat-success):not(.mud-compat-warning):hover, .send-showboard-pending:not(.mud-compat-success):not(.mud-compat-warning):focus-visible { background: color-mix(in srgb, var(--score-judge-header-bg) 88%, black) !important; color: var(--score-judge-header-text) !important; } .mud-compat-button.mud-button-filled.mud-compat-secondary { background: var(--mud-palette-secondary); color: #fff; } .mud-compat-button.mud-button-filled.mud-compat-success { background: #15803d; color: #fff; } .mud-compat-button.mud-button-filled.mud-compat-warning { background: #facc15; border-color: #eab308; color: #2a2100; } .mud-compat-button.mud-button-filled.mud-compat-error { background: #b91c1c; color: #fff; } /* --- ERSETZT am 2026-09-24 (Frank-Entscheidung "Regel eingrenzen", Folgeauftrag zum Befund N10-Fund). Neue Fassung mit zwei Blöcken siehe unten. Ursprung (Commit 87a2caa, 17.02.2026, "Fix 1 17.02 V1.3.2"): Diese Regel kam mit dem kompletten MudCompat-Farbkasten auf einen Schlag ins Projekt (Ablösung der echten Bibliothek MudBlazor durch den hauseigenen, schlanken Nachbau). Ein eigener Kommentar dazu fehlt im damaligen Commit; erkennbarer Zweck war, umrandete Knöpfe überhaupt lesbar zu machen: Rahmen und Schrift bekamen die neutrale Vordergrundfarbe der Fläche (--mud-palette-text-primary), damit ein Knopf ohne eigene Farbe (z. B. "Zurück", "Aktualisieren") auf jeder Fläche erkennbar bleibt. Für FARBIGE umrandete Knöpfe (Color="Color.Primary/Secondary/Success/Info/Warning/Error" o. ä.) wurde nie eine eigene Fassung ergänzt - die Regel traf sie einfach mit, weil "zwei Klassen" (mud-button-outlined + mud-compat-button) jede einzelne Farbklasse (z. B. .mud-compat-error, weiter oben in dieser Datei) an Spezifität schlägt. Genau das war Befund N10: Der Knopf "Nein, ablehnen" (Color="Color.Error") wirkte umrandet dadurch wie ein ganz gewöhnlicher, ungefärbter Knopf statt wie eine Ablehnen-Aktion. Neue Fassung: Der alte, neutrale Zweck bleibt für Knöpfe OHNE eigene Farbe (Color.Default, Klasse mud-compat-default) unverändert erhalten - exakt dieselben zwei Zeilen wie vorher. Farbige umrandete Knöpfe bekommen jetzt Rahmen UND Schrift in ihrer eigenen Farbe aus der Palette (--mud-palette-primary/secondary/success/info/warning/error), statt in der neutralen Vordergrundfarbe zu verschwinden - in allen vier Designs, weil diese Variablen in jedem .light-mode/.dark-mode/-pink-Block eigens definiert sind (siehe NACHGEZOGENE PALETTEN-FARBEN weiter oben in dieser Datei). .mud-compat-button.mud-button-outlined, .mud-compat-button.mud-compat-outlined { background: transparent; border-color: var(--mud-border-color); color: var(--mud-palette-text-primary); } */ .mud-compat-button.mud-button-outlined.mud-compat-default, .mud-compat-button.mud-compat-outlined.mud-compat-default { background: transparent; border-color: var(--mud-border-color); color: var(--mud-palette-text-primary); } /* Farbige umrandete Knöpfe (jede Farbklasse außer mud-compat-default): eigene Palettenfarbe für Rahmen und Schrift statt der neutralen Vordergrundfarbe - siehe Begründung oben. */ .mud-compat-button.mud-button-outlined.mud-compat-primary, .mud-compat-button.mud-compat-outlined.mud-compat-primary { background: transparent; border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); } .mud-compat-button.mud-button-outlined.mud-compat-secondary, .mud-compat-button.mud-compat-outlined.mud-compat-secondary { background: transparent; border-color: var(--mud-palette-secondary); color: var(--mud-palette-secondary); } .mud-compat-button.mud-button-outlined.mud-compat-success, .mud-compat-button.mud-compat-outlined.mud-compat-success { background: transparent; border-color: var(--mud-palette-success); color: var(--mud-palette-success); } .mud-compat-button.mud-button-outlined.mud-compat-info, .mud-compat-button.mud-compat-outlined.mud-compat-info { background: transparent; border-color: var(--mud-palette-info); color: var(--mud-palette-info); } .mud-compat-button.mud-button-outlined.mud-compat-warning, .mud-compat-button.mud-compat-outlined.mud-compat-warning { background: transparent; border-color: var(--mud-palette-warning); color: var(--mud-palette-warning); } .mud-compat-button.mud-button-outlined.mud-compat-error, .mud-compat-button.mud-compat-outlined.mud-compat-error { background: transparent; border-color: var(--mud-palette-error); color: var(--mud-palette-error); } /* Color.Dark: aktuell kein einziger umrandeter Knopf im Projekt mit dieser Farbe (Stand 24.09.2026) - der Vollständigkeit halber trotzdem hier, statt sonst lautlos ohne Rahmen und ohne eigene Schriftfarbe dazustehen. Kein --mud-palette-dark vorhanden, deshalb derselbe feste Wert wie in der bestehenden allgemeinen Farb-Hilfsklasse .mud-compat-dark weiter oben in dieser Datei (#111827). */ .mud-compat-button.mud-button-outlined.mud-compat-dark, .mud-compat-button.mud-compat-outlined.mud-compat-dark { background: transparent; border-color: #111827; color: #111827; } .mud-compat-button.mud-button-text, .mud-compat-button.mud-compat-text { background: transparent; border-color: transparent; color: var(--mud-palette-text-primary); } .mud-compat-icon-button, .mud-icon-button { width: 32px; height: 32px; border-radius: 999px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--mud-palette-text-primary); cursor: pointer; text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .mud-compat-icon-button:hover, .mud-icon-button:hover { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); border-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent); text-decoration: none; } .mud-compat-fab { border-radius: 999px; min-width: 44px; min-height: 44px; border: 1px solid transparent; background: var(--mud-palette-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .mud-compat-fab-label { font-size: 0.85rem; font-weight: 600; } /* Icons */ .mud-compat-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.2rem; vertical-align: middle; } .mud-compat-icon .rz-icon { font-size: inherit !important; line-height: inherit; } .mud-compat-icon-size-small { font-size: 1rem; } .mud-compat-icon-size-medium { font-size: 1.25rem; } .mud-compat-icon-size-large { font-size: 1.75rem; } /* Chips and avatars */ .mud-compat-chip { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; padding: 0.15rem 0.55rem; font-size: 0.74rem; line-height: 1.3; } .mud-compat-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent); color: var(--mud-palette-text-primary); } .mud-compat-avatar-small { width: 24px; height: 24px; font-size: 0.75rem; } .mud-compat-avatar-medium { width: 34px; height: 34px; font-size: 0.9rem; } .mud-compat-avatar-large { width: 44px; height: 44px; font-size: 1.05rem; } /* Alerts */ .mud-compat-alert, .mud-alert { border-radius: var(--mud-radius-sm); padding: 0.7rem 0.85rem; border: 1px solid transparent; } .mud-compat-alert-info { background: color-mix(in srgb, #38bdf8 16%, var(--mud-palette-surface)); border-color: color-mix(in srgb, #38bdf8 35%, transparent); } .mud-compat-alert-success { background: color-mix(in srgb, #22c55e 15%, var(--mud-palette-surface)); border-color: color-mix(in srgb, #22c55e 32%, transparent); } .mud-compat-alert-warning { background: #facc15; border-color: #eab308; color: #2a2100; box-shadow: inset 0 0 0 1px color-mix(in srgb, #eab308 65%, transparent); } .mud-compat-alert-warning strong { color: #1f1900; } /* -------------------------------------------------------------------------- Ticket #3870 (04.09.2026): Schrift im gelben Hinweisbalken war fast weiß. WAS WAR KAPUTT? Der gelbe Hinweisbalken (.mud-compat-alert-warning, siehe oben) setzt selbst sauber "color: #2a2100" - also ein sehr dunkles Braun auf Gelb. Diese Farbe wird an alles vererbt, was KEINE eigene Farbe mitbringt. Genau daran scheitert es aber: Jedes im Balken rendert über Components/MudCompat/MudText.razor (Methode GetClass) immer auch eine Farbklasse mit - bei Color.Default und Color.Inherit ist das ".mud-compat-default". Und diese Klasse setzt weiter oben in dieser Datei ausdrücklich "color: var(--mud-palette-text-primary)". Eine eigene Farbangabe am Kind schlägt die Vererbung vom Elternteil immer - das Kind "erbt" gar nicht erst, es hat ja seine eigene Farbe. Damit gewinnt die Textfarbe des Themes gegen die dunkle Balkenfarbe. WARUM FÄLLT ES NUR IN DEN DUNKLEN DESIGNS AUF? --mud-palette-text-primary ist themeabhängig: Im hellen Design ist sie dunkel, da passt sie zufällig auf Gelb. Im dunklen Design ist sie #f3f4f6, im Dunkel-Pink #ffe7f3 - also praktisch Weiß auf Gelb und damit unlesbar. WARUM KEIN "*"-SELEKTOR? Naheliegend wäre ".mud-compat-alert-warning * { color: #2a2100 }". Das wäre falsch: Im selben Balken sitzt auf Pages/Competitions.razor ein ("Alle Konflikte mit TORIS lösen"), der bewusst weiße Schrift auf rotem Grund trägt. Ein Sammel-Selektor würde ihm die Schrift dunkelbraun einfärben - unlesbar auf Rot. Deshalb wird gezielt nur das getroffen, was reiner Text ist und nie einen eigenen Hintergrund hat: Typografie (MudText), Links und Symbole. Knöpfe, Chips und alles mit eigener Fläche bleiben unangetastet. WARUM ZUSÄTZLICH ".mud-compat-default"? Die Regel greift nur bei der Standardfarbe. Wer bewusst oder Color.Info in einen Warnbalken setzt, behält seine Farbe - wir reparieren nur den unbeabsichtigten Fall. WARUM "inherit" STATT EINER FESTEN FARBE? So gilt automatisch genau die Farbe, die der Balken selbst vorgibt. Wird #2a2100 oben je geändert, zieht der Text ohne weiteres Zutun mit; es gibt keinen zweiten Wert, der stillschweigend veralten kann. Damit sind beide gemeldeten Stellen mit EINER zentralen Regel erledigt: Pages/Competitions.razor (Konflikt-Hinweis) und Pages/AudioSettings.razor (Warnung vor dem Wegfallen belegter Knöpfe) - die .razor-Dateien selbst mussten nicht angefasst werden. -------------------------------------------------------------------------- */ .mud-compat-alert-warning .mud-typography.mud-compat-default, .mud-compat-alert-warning .mud-compat-link.mud-compat-default, .mud-compat-alert-warning .mud-compat-icon.mud-compat-default { color: inherit; } .mud-compat-alert-error { background: color-mix(in srgb, #ef4444 15%, var(--mud-palette-surface)); border-color: color-mix(in srgb, #ef4444 35%, transparent); } .mud-compat-divider, .mud-divider { border: none; border-top: 1px solid var(--mud-border-color); margin: 0; } /* Tables */ .mud-compat-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--mud-radius-sm); } .mud-compat-table, .mud-table { width: 100%; border-collapse: collapse; border-spacing: 0; min-width: 680px; } .mud-compat-table th, .mud-compat-table td { /* Re-Design 2026-06: dedizierter, je Modus klar sichtbarer Tabellenrahmen. Alt: border-bottom: 1px solid color-mix(in srgb, var(--mud-border-color) 90%, transparent); */ border-bottom: 1px solid var(--table-border); padding: 0.72rem 0.8rem; vertical-align: middle; text-align: left; } .mud-compat-table th { font-size: 0.82rem; font-weight: 700; color: var(--mud-palette-text-secondary); letter-spacing: 0.01em; white-space: nowrap; } .mud-compat-table td:last-child, .mud-compat-table th:last-child { text-align: right; white-space: nowrap; } .mud-compat-table-dense th, .mud-compat-table-dense td { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* Globales Striping fuer MudCompat-Tabellen (ersetzt das alte MudBlazor-Verhalten von Striped="true"). */ .mud-compat-table tr.mud-table-row-striped, .mud-table tr.mud-table-row-striped { background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); } /* Re-Design 2026-06: dezente Tabellen-Politur (alle Modi). Kopfzeile leicht abgesetzt und Zeilen-Hover fuer bessere Orientierung in Listen. Gilt bewusst NUR fuer generische MudCompat-Tabellen, nicht fuer die Scoring-Tabelle (eigene Klasse .scoring-table) mit ihren Eingabefeldern. */ .mud-compat-table thead th { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); } .mud-compat-table tbody tr:hover { background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); } .mud-compat-table-group-header { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); font-weight: 700; } .mud-compat-table-pager, .mud-compat-tablepager { display: flex; justify-content: flex-end; padding-top: 0.55rem; color: var(--mud-palette-text-secondary); font-size: 0.8rem; } /* Menu */ .mud-compat-menu { position: relative; } .mud-compat-menu-activator { display: inline-flex; align-items: center; } .mud-compat-menu-content { position: absolute; top: calc(100% + 0.35rem); min-width: 180px; max-height: min(70vh, 520px); overflow-y: auto; overflow-x: hidden; background: var(--mud-palette-surface); border: 1px solid var(--mud-border-color); border-radius: var(--mud-radius-sm); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28); padding: 0.3rem; z-index: 3600; opacity: 1; pointer-events: auto; } .mud-compat-menu-content-static { position: static; border: none; box-shadow: none; background: transparent; padding: 0; } .mud-compat-menu-content-left { left: 0; } .mud-compat-menu-content-right { right: 0; } .mud-compat-menu-item { width: 100%; display: flex; align-items: center; border: none; border-radius: 8px; padding: 0.45rem 0.6rem; background: transparent; color: var(--mud-palette-text-primary); text-align: left; cursor: pointer; } .mud-compat-menu-item:hover { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); } /* ------------------------------------------------------------------------------------------ Ticket #3974 (05.09.2026): Das Drei-Punkte-Menü (MudMenu) in Tabellen wurde vom Tabellenkasten abgeschnitten. Hintergrund: Der MudMenu-Ersatz (Components/MudCompat/MudMenu.razor) rendert das aufgeklappte Menü NICHT in einer eigenen Ebene über der Seite, sondern direkt an Ort und Stelle als absolut positioniertes
– also innerhalb der Tabellenzelle. Jeder Vorfahre, der „overflow" auf etwas anderes als „visible" setzt, schneidet das Menü deshalb ab. Solche Vorfahren gibt es mehrere: - .mud-compat-table-wrap (overflow-x: auto – oben in diesem Stylesheet; „auto" in einer Achse erzwingt Clipping in beiden) - .starterlists-page .mud-compat-table-wrap (overflow-x: clip !important) - .starterlists-page .starterlists-group-card (overflow: hidden – die Abteilungs-Kachel) - .starterlists-page (overflow-x: hidden – macht die Seite zum eigenen Scrollbereich, Menü am unteren Rand würde eine Bildlaufleiste statt Sichtbarkeit erzeugen) - .mud-compat-card (overflow: hidden – derzeit ohne Menü, aber vorsorglich, damit ein künftiges Menü in einer Karte nicht wieder in dieselbe Falle läuft) - tbody tr in der Handy-Kartenansicht (overflow: hidden, siehe Media-Block ≤700px weiter unten – dort wird jede Zeile zur Karte) Die .mud-table-container-Regeln stammen noch aus MudBlazor-Zeiten; der Tabellen-Ersatz (MudTable.razor) rendert diese Klasse gar nicht mehr. Sie werden trotzdem mitgeführt, damit die Freigabe auch greift, falls sie irgendwo wieder auftaucht. Lösung (Franks Entscheidung, Weg A): Solange ein Menü offen ist – und nur dann –, geben alle betroffenen Kästen ihren Inhalt frei. Das Menü steht nur bei geöffnetem Zustand im DOM, deshalb ist „:has(.mud-compat-menu-content)" ein zuverlässiger Schalter: Kein offenes Menü = keine Änderung am bisherigen Verhalten. Bewusst in Kauf genommene Nebenwirkung: Bei geöffnetem Menü ist eine zu breite Tabelle kurzzeitig nicht seitlich scrollbar (der Kasten ist ja gerade freigegeben). Sobald das Menü zu ist, greift wieder das normale Verhalten. Frank hat das am 05.09.2026 so entschieden, weil ein abgeschnittenes Menü das größere Übel ist. Die Regeln stehen mit „!important" und über „:has()" mit höherer Spezifität als die Ausgangsregeln (auch die im Media-Block ≤960px für die Starterliste, die selbst „!important" tragen), damit sie sich in jedem Fall durchsetzen. Ausgenommen ist die „statische" Menü-Variante (.mud-compat-menu-content-static): Die rendert MudMenu.razor dauerhaft, wenn gar kein Aufklapp-Knopf angegeben ist. Sie steht also immer im DOM und darf den Schalter nicht dauerhaft auslösen. ------------------------------------------------------------------------------------------ */ .mud-compat-table-wrap:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .mud-table-container:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .mud-compat-card:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .mud-compat-table tbody tr:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .starterlists-page:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .starterlists-page .mud-compat-table-wrap:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .starterlists-page .starterlists-group-card:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .starterlists-page .mud-table-container:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .starterlists-page .starterlists-group-table .mud-table-container:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)), .starterlists-page .starterlists-group-table.mud-table:has(.mud-compat-menu-content:not(.mud-compat-menu-content-static)) { overflow: visible !important; } /* Dialogs */ .mud-compat-inline-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.52); display: flex; align-items: center; justify-content: center; padding: 1rem 1rem 88px; z-index: 2600; pointer-events: auto; } .mud-compat-dialog { width: min(96vw, 620px); max-height: 92vh; overflow: auto; background: var(--mud-palette-surface); border: 1px solid var(--mud-border-color); border-radius: var(--mud-radius-md); box-shadow: 0 22px 38px rgba(0, 0, 0, 0.45); opacity: 1; } .mud-compat-dialog-title { padding: 0.9rem 1rem; border-bottom: 1px solid var(--mud-border-color); font-weight: 700; } .mud-compat-dialog-content { padding: 1rem; } .mud-compat-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.7rem 1rem 1rem; border-top: 1px solid var(--mud-border-color); } .mud-compat-messagebox { display: flex; flex-direction: column; gap: 1rem; } .mud-compat-messagebox-text { white-space: pre-line; } .mud-compat-messagebox-actions { margin-top: 0.25rem; } /* Audio/Kuer config dialogs */ .audio-config-dialog { width: min(94vw, 980px); max-width: 980px; } .audio-config-columns { display: flex; gap: 16px; min-height: 320px; height: min(56vh, 520px); } .audio-config-column { flex: 1; min-width: 0; display: flex; flex-direction: column; } .audio-config-list { flex: 1; min-height: 0; overflow-y: auto; } .audio-config-list .audio-config-list-item { margin: 2px 6px; border-radius: 8px; transition: background-color 0.12s ease, color 0.12s ease; } /* -------------------------------------------------------------------------- Befund 3 (04.09.2026): Sammelgriff in der markierten Listenzeile entfernt. WAS WAR DA? Zwei Regeln haben mit dem Sternchen-Selektor ALLES innerhalb der markierten Zeile zwangsweise auf Weiß gestellt: .audio-config-list .audio-config-list-item.selected-folder * { color: #fff !important; } .audio-config-list .audio-config-list-item.selected-file * { color: #fff !important; } Beides ist genau die Bauart, die agents.md Abschnitt 12.2 Regel 4 verbietet (Sammel-Selektor plus fest verdrahtete Farbe). Heute entsteht dadurch kein sichtbarer Schaden - es ist eine Falle für den Tag, an dem jemand ein farbiges Symbol oder einen farbigen Hinweis in die Zeile setzt: Der würde ohne Vorwarnung weiß eingefärbt. Dieselbe Überlegung steht ausführlich beim gelben Hinweisbalken weiter oben (Ticket #3870), die Regel hier ist nach derselben Vorlage gebaut. WARUM BRAUCHT ES ÜBERHAUPT EINE REGEL FÜR DIE KINDER? In einer Listenzeile stehen genau zwei Dinge (siehe AudioConfigDialog.razor und KuerMusicConfigDialog.razor): der Ordner- bzw. Dateiname als reiner Text und davor ein Symbol (MudIcon). Der reine Text erbt die Farbe der Zeile ganz von allein. Das Symbol nicht: MudIcon rendert immer eine eigene Farbklasse mit, bei der Standardfarbe ist das ".mud-compat-default", und die setzt weiter oben in dieser Datei ausdrücklich "color: var(--mud-palette-text-primary)". Eine eigene Farbe am Kind schlägt die Vererbung vom Elternteil immer - das Symbol würde also in der Schriftfarbe des Designs auf der roten bzw. pinken Markierung stehen. Deshalb wird gezielt NUR das Symbol wieder auf "inherit" gesetzt; alles mit eigener Fläche (Knöpfe, Chips) bleibt unangetastet. WARUM "inherit" UND KEINE FESTE FARBE? So gilt automatisch genau die Farbe, die die Zeile selbst vorgibt. Wird sie unten geändert, zieht das Symbol ohne weiteres Zutun mit; es gibt keinen zweiten Wert, der stillschweigend veralten kann. WARUM KEIN "!important" IN DER NEUEN REGEL? Die einzige konkurrierende Regel ist ".mud-compat-default" (Gewicht 0-1-0). Der neue Selektor wiegt 0-5-0 und gewinnt damit ohne Nachhilfe. Bei den beiden Regeln für die Zeile selbst bleibt "!important" dagegen stehen: Es stand schon vorher dort, war nicht Gegenstand des Befundes, und ohne Build und Browsertest lässt sich hier nicht belegen, dass keine Radzen-Regel dagegenhält - ein unbelegtes Entfernen wäre geraten, nicht geprüft. FARBE AUS DEM FARBSCHEMA STATT "#fff": --mud-palette-primary-text ist genau dafür da ("Schrift, die AUF einer Fläche in der Primärfarbe steht", Beleg im Kopf dieser Datei). Sie ist in :root und in allen vier Design-Blöcken auf #ffffff gesetzt, die Optik ändert sich also nicht - aber die Farbe hängt jetzt am Farbschema statt fest im Code. Der Ersatzwert #fff im var() ist Pflicht: Ein var() ohne Ersatzwert killt die ganze Regel, falls die Variable einmal fehlt (Erfahrung aus v1.6.5.0). -------------------------------------------------------------------------- */ .audio-config-list .audio-config-list-item.selected-folder { background-color: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text, #fff) !important; } .audio-config-list .audio-config-list-item.selected-file { background-color: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text, #fff) !important; } .audio-config-list .audio-config-list-item.selected-folder .mud-compat-icon.mud-compat-default, .audio-config-list .audio-config-list-item.selected-file .mud-compat-icon.mud-compat-default { color: inherit; } .audio-config-selected-text { color: var(--mud-palette-primary); font-weight: 600; } /* Ticket #3875 (04.09.2026): Zeile mit der ausgewählten Datei und dem Knopf zum Probehören - im Konfig-Fenster der Sound-Knöpfe UND im Kürmusik-Fenster. Der Dateiname darf beliebig lang sein und schrumpft deshalb (min-width:0 + Umbruch), damit der Probe-Knopf rechts immer sichtbar bleibt und nicht aus der Spalte gedrängt wird. Der Knopf selbst schrumpft nie (flex-shrink:0), sonst würde seine Beschriftung umbrechen. Keine festen Farben hier - die Zeile erbt alles vom Fenster (siehe Regel 12.2 in agents.md: Theme-Fehler nie mit eigenen Farbwerten reparieren). */ .audio-config-probe-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .audio-config-probe-row .audio-config-selected-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .audio-config-probe-row .mud-compat-button { flex: 0 0 auto; white-space: nowrap; } /* Dritte Spalte im Button-Konfig-Dialog: Grundlautstaerke-Fader. Schmaler als die beiden Listenspalten (die brauchen den Platz), aber breit genug fuer Fader und Prozentzahl. */ .audio-config-column--volume { flex: 0 0 200px; } .audio-default-volume-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; } /* Grosse, gut lesbare Prozentanzeige der eingestellten Grundlautstaerke. */ .audio-default-volume-value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--mud-palette-primary); } .audio-default-volume-box .mud-compat-slider { width: 100%; } .audio-default-volume-hint { text-align: center; } @media (max-width: 900px) { .audio-config-columns { flex-direction: column; height: min(70vh, 640px); } /* Im Schmal-Layout die Fader-Spalte nicht fix halten, sonst wird sie zu hoch. */ .audio-config-column--volume { flex: 0 0 auto; } } /* Radzen dialog + notifications in project theme */ .rz-dialog-mask { /* Dialog-Maske unter dem Dialog halten. Wichtig: Der Nutzer soll den Dialog bedienen koennen und trotzdem den Hintergrund blockieren. */ z-index: var(--rz-dialog-mask-zindex, 3550) !important; } .rz-dialog-wrapper { /* Wrapper und Dialog selbst muessen ueber der Maske liegen. */ z-index: var(--rz-dialog-zindex, 3560) !important; pointer-events: auto !important; } .rz-dialog, .rz-dialog-side { z-index: var(--rz-dialog-zindex, 3560) !important; pointer-events: auto !important; } .rz-dialog-wrapper .rz-dialog, .rz-dialog-side { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border: 1px solid var(--mud-border-color); border-radius: var(--mud-radius-md); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.42); max-height: calc(100vh - 32px); display: flex; flex-direction: column; opacity: 1 !important; } .rz-dialog-titlebar { background: color-mix(in srgb, var(--mud-palette-appbar-background) 90%, transparent); color: var(--mud-palette-appbar-text); border-bottom: 1px solid var(--mud-border-color); border-radius: var(--mud-radius-md) var(--mud-radius-md) 0 0; } .rz-dialog-content { color: var(--mud-palette-text-primary); overflow-y: auto !important; overscroll-behavior: contain; } /* --- ERSETZT am 03.09.2026: Diese Regel zeigte ins Leere. Neue Fassung siehe unten. GRUND: Radzen hat die Bausteine der Meldungen mit der Fassung 6.5.3 umbenannt. Aus ".rz-growl-item" wurde ".rz-notification-item" (nachgesehen in material-base.css der eingesetzten Fassung 6.5.3, dort gibt es "growl" nirgends mehr). Die Regel traf seitdem also gar nichts, und die Meldungen behielten Radzens weißen Werkskasten. Gemessen am 03.09.2026 auf einer isolierten Prüfseite: Kastenfarbe #ffffff in ALLEN vier Designs. .rz-notification .rz-growl-item { border-radius: 10px; border: 1px solid var(--mud-border-color); background: color-mix(in srgb, var(--mud-palette-surface) 88%, black 12%); } --- Ende der ersetzten Fassung --- */ /* ================================================================================ MELDUNGEN (Toasts): Form und Kennzeichnung (03.09.2026) Gemeldet von Dennis: Die kurz oben rechts aufpoppenden Meldungen erscheinen im hellen Look, egal welches Design eingestellt ist. Das traf zu — die Farben werden ein paar Zeilen weiter unten im body-Block angebunden, hier geht es nur um Form, Rahmen und den farbigen Streifen, der die Art der Meldung anzeigt. WARUM DER ÄUSSERE KASTEN EIGENE ECKEN BRAUCHT Radzen baut zwei Ebenen: einen äußeren Kasten (.rz-notification-item-wrapper), der die Grundfläche trägt, und darin die eigentliche Meldung (.rz-notification-item) mit der getönten Fläche. Nur die innere Ebene ist abgerundet. Ohne die gleichen Ecken am äußeren Kasten schauen an allen vier Ecken kleine eckige Zipfel der Grundfläche hervor. WARUM DAS SCHLIESSKREUZ ZURÜCKGESETZT WIRD Das Kreuz ist ein echter Knopf (