: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;
    max-width: min(520px, calc(100vw - 24px));
    pointer-events: none;
    transition: top 120ms ease-out, left 120ms ease-out;
}

.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-target {
    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-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 */
.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;
}

.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;
}

.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-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;
}

.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);
}

/* 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;
}

.audio-config-list .audio-config-list-item.selected-folder {
    background-color: var(--mud-palette-primary) !important;
    color: #fff !important;
}

.audio-config-list .audio-config-list-item.selected-folder * {
    color: #fff !important;
}

.audio-config-list .audio-config-list-item.selected-file {
    background-color: var(--mud-palette-primary) !important;
    color: #fff !important;
}

.audio-config-list .audio-config-list-item.selected-file * {
    color: #fff !important;
}

.audio-config-selected-text {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* 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;
}

.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%);
}

/* Bugfix 2026-06: Benachrichtigungen (rechts aufpoppende Radzen-Toasts) duerfen niemals
   hinter der App-Chrome verschwinden.

   WARUM das noetig ist:
   Der Radzen-Notification-Container hat per Default nur "z-index: 1002" und erscheint bei
   "top: 100px; right: 1rem". Der deckende Sticky-Seitenkopf (.page-header-sticky, z-index 1104)
   bzw. die Sticky-Breadcrumb (.app-breadcrumb-sticky, z-index 1105) sitzen ab "top: 56px"
   abwaerts und liegen damit hoeher als die Meldungen. Folge: Die leere rechte Haelfte des
   Seitenkopfes ueberdeckte den oberen Teil der Meldungen (genau der vom Nutzer markierte Bereich).

   FIX:
   Wir heben den gesamten Notification-Container ueber die persistente App-Chrome:
     - AppBar               z-index 1200
     - Navigations-Fortschritt z-index 1250
     - Toolbar (unten)      z-index 1300 / 1400
     - Sticky-Seitenkoepfe  z-index 1104 / 1105 / 1110
     - Pending-Overlay      z-index 1600
   1700 liegt sicher ueber all dem. BEWUSST unter modalen Dialogen (rz-dialog ~3560) belassen,
   damit ein offener Dialog die Toasts weiterhin verdecken darf (Standardverhalten). */
.rz-notification {
    z-index: 1700 !important;
}

/* Lists, tabs, breadcrumbs, misc */
.mud-compat-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mud-compat-list-item {
    list-style: none;
}

.mud-compat-tabs {
    display: grid;
    gap: 0.85rem;
}

.mud-compat-tabpanel {
    border: 1px solid var(--mud-border-color);
    border-radius: var(--mud-radius-sm);
    padding: 0.9rem;
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent);
}

.mud-compat-breadcrumbs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mud-compat-breadcrumbs-item,
.mud-compat-breadcrumbs-separator {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

/* Keep breadcrumb navigation visible while scrolling pages */
.app-breadcrumb-sticky {
    position: sticky;
    top: 56px;
    z-index: 1105;
    padding: 0.15rem 0;
    /* Re-Design 2026-06: deckend und OHNE backdrop-filter, damit beim Scrollen kein Inhalt
       (Tooltips/Status/Zeilen) durch den fixierten Kopf durchscheint.
       Alt: background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent); backdrop-filter: blur(6px); */
    background: var(--mud-palette-surface);
}

/* Sticky page headers for list/detail pages with breadcrumb + meta info */
.page-header-sticky {
    position: sticky;
    top: 56px;
    z-index: 1104;
    /* Re-Design 2026-06: deckend und OHNE backdrop-filter -> kein Durchscheinen von Inhalten
       (z. B. Tooltips) durch den Sticky-Kopf beim Scrollen.
       Alt: background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent) !important; backdrop-filter: blur(6px); */
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-border-color);
}

.page-header-sticky .app-breadcrumb-sticky {
    position: static;
    top: auto;
    z-index: auto;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}

/* In scoring pages the breadcrumb should also stay sticky inside the sticky shell */
.scoring-sticky-shell .app-breadcrumb-sticky {
    top: 0;
    z-index: 7;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}

.mud-compat-link {
    color: inherit;
}

.mud-compat-tooltip-host {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mud-compat-tooltip-popup {
    position: absolute;
    z-index: 3000;
    min-width: 180px;
    max-width: min(420px, 80vw);
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--mud-border-color);
    border-radius: var(--mud-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, black 6%);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.mud-compat-tooltip-top {
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
}

.mud-compat-tooltip-bottom {
    left: 50%;
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
}

.mud-compat-tooltip-left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translate(4px, -50%);
}

.mud-compat-tooltip-right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translate(-4px, -50%);
}

.mud-compat-tooltip-host:hover .mud-compat-tooltip-popup,
.mud-compat-tooltip-host:focus-within .mud-compat-tooltip-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mud-compat-tooltip-host:hover .mud-compat-tooltip-top,
.mud-compat-tooltip-host:focus-within .mud-compat-tooltip-top {
    transform: translate(-50%, 0);
}

.mud-compat-tooltip-host:hover .mud-compat-tooltip-bottom,
.mud-compat-tooltip-host:focus-within .mud-compat-tooltip-bottom {
    transform: translate(-50%, 0);
}

.mud-compat-tooltip-host:hover .mud-compat-tooltip-left,
.mud-compat-tooltip-host:focus-within .mud-compat-tooltip-left {
    transform: translate(0, -50%);
}

.mud-compat-tooltip-host:hover .mud-compat-tooltip-right,
.mud-compat-tooltip-host:focus-within .mud-compat-tooltip-right {
    transform: translate(0, -50%);
}

/* Toolbar display tooltips: always above item and anchored to left edge */
.toolbar-display-tooltip .mud-compat-tooltip-top {
    left: 0;
    right: auto;
    bottom: calc(100% + 8px);
    transform: translate(0, 4px);
}

.toolbar-display-tooltip:hover .mud-compat-tooltip-top,
.toolbar-display-tooltip:focus-within .mud-compat-tooltip-top {
    transform: translate(0, 0);
}

.toolbar-container,
.toolbar,
.display-status-list {
    overflow: visible;
}

.mud-compat-file-upload-activator,
.mud-compat-file-upload-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px dashed var(--mud-border-color);
    border-radius: var(--mud-radius-sm);
    padding: 0.4rem 0.7rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

/* Progress */
.mud-compat-progress-linear,
.mud-progress-linear {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    overflow: hidden;
}

.mud-compat-progress-linear-bar {
    width: 42%;
    height: 100%;
    background: var(--mud-palette-primary);
    animation: mud-linear-indeterminate 1.1s ease-in-out infinite;
}

@keyframes mud-linear-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

.mud-compat-progress-circular,
.mud-progress-circular {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    border: 0.18rem solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    border-top-color: var(--mud-palette-primary);
    animation: mud-spin 0.9s linear infinite;
}

@keyframes mud-spin {
    to { transform: rotate(360deg); }
}

/* Grids */
.mud-compat-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--mud-grid-gap, 0.75rem);
}

.mud-compat-item {
    min-width: 0;
    grid-column: span var(--mud-cols-xs, 12);
}

@media (min-width: 600px) {
    .mud-compat-item {
        grid-column: span var(--mud-cols-sm, var(--mud-cols-xs, 12));
    }
}

@media (min-width: 960px) {
    .mud-compat-item {
        grid-column: span var(--mud-cols-md, var(--mud-cols-sm, var(--mud-cols-xs, 12)));
    }
}

@media (min-width: 1280px) {
    .mud-compat-item {
        grid-column: span var(--mud-cols-lg, var(--mud-cols-md, var(--mud-cols-sm, var(--mud-cols-xs, 12))));
    }
}

/* Hover cards */
.hover-lift {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

/* Ensure sticky headers use theme background */
.scoring-sticky-header {
    background-color: var(--mud-palette-background) !important;
}

.scoring-sticky-shell {
    overflow: hidden;
    border-bottom: 1px solid var(--score-grid-line);
    isolation: isolate;
}

/* Im Light-Mode muessen Breadcrumb und oberer Scoring-Header auf heller Flaeche laufen,
   damit rote Links und der aktuelle schwarze Eintrag lesbar bleiben. */
.light-mode .page-header-sticky,
.light-mode .scoring-sticky-shell {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent) !important;
}

.light-mode .scoring-sticky-shell {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
    border-bottom-color: color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent) !important;
}

.light-mode .scoring-sticky-shell .mud-paper,
.light-mode .scoring-sticky-shell .app-breadcrumb-sticky {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.scoring-sticky-shell .mud-paper {
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Kompakter Scoring-Kopf: weniger vertikaler Platz, mehr sichtbare Tabelle */
.scoring-sticky-shell > .mud-paper:nth-child(1),
.scoring-sticky-shell > .mud-paper:nth-child(2) {
    padding-top: 0.22rem !important;
    padding-bottom: 0.22rem !important;
}

.scoring-sticky-shell > .mud-paper:nth-child(3) {
    padding-top: 0.18rem !important;
    padding-bottom: 0.18rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    z-index: 3;
}

.scoring-rider-info-content {
    padding: 0.18rem 0.5rem 0.12rem;
}

.scoring-sticky-shell > .mud-paper:nth-child(3) .mud-stack {
    gap: 0.14rem !important;
}

.scoring-sticky-shell > .mud-paper:nth-child(3) .mud-stack[style*="margin-top: 8px"] {
    margin-top: 2px !important;
}

.scoring-sticky-shell > .mud-paper:nth-child(3) .mud-stack[style*="margin-top: 4px"] {
    margin-top: 0 !important;
}

.scoring-sticky-shell > .mud-paper:nth-child(3) .mud-typography-h5 {
    font-size: 1.45rem !important;
    line-height: 1.1;
}

.scoring-sticky-shell > .mud-paper:nth-child(3) .mud-typography-h3,
.scoring-sticky-shell > .mud-paper:nth-child(3) .mud-typography-h2 {
    font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
    line-height: 1.05;
}

.scoring-integrated-header {
    margin-top: 0.06rem;
    padding-top: 0;
    border-top: 1px solid var(--score-grid-line);
    position: relative;
}

.scoring-page {
    /* Die globale Toolbar ist fix am unteren Bildschirmrand. Der Scoring-Bereich
       braucht deshalb eigenen Abschlussraum, damit die letzte Eingabezeile beim
       Scrollen oberhalb der roten Leiste stehen kann und nicht halb darunter liegt. */
    padding-bottom: calc(var(--score-bottom-toolbar-clearance, 42px) + 24px);
    scroll-padding-bottom: calc(var(--score-bottom-toolbar-clearance, 42px) + 120px);
}

.scoring-page::after {
    /* Sichtschutz direkt oberhalb der roten Toolbar: Eine angeschnittene Tabellenzeile
       soll nicht halb sichtbar hinter der Toolbar stehen. Sie verschwindet in dieser
       neutralen Zone und wird erst nach dem naechsten Scrollschritt wieder voll sichtbar. */
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--score-toolbar-height, 30px);
    height: var(--score-bottom-hidden-row-guard, 76px);
    background: var(--mud-palette-background);
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent);
    z-index: 1295;
    pointer-events: auto;
}

/* Nur im Paperless-/BlackHorse-Modus: das schwarze Sichtschutz-Band schmal halten, damit bei
   geoeffneter Showboard-Toolbar weniger Platz verloren geht. Die Modifier-Klasse setzt die
   Scoring-Seite (Scoring.razor) nur, wenn Paperless UND BlackHorse aktiv sind. In allen anderen
   Pruefungen bleibt es beim Standardwert (76px). Scrollen bleibt in beiden Faellen moeglich. */
.scoring-page--pbh {
    --score-bottom-hidden-row-guard: 10px;
}

.scoring-table input[type="text"] {
    /* Browser-Fokus-Scrollen und unser JS-Fokuswächter nutzen diese Reserve,
       damit aktive Felder nicht erst direkt an der Toolbar-Kante sichtbar werden. */
    scroll-margin-bottom: calc(var(--score-bottom-toolbar-clearance, 42px) + 120px);
    scroll-margin-top: calc(56px + var(--score-judge-card-height, 104px) + 96px);
}

.scoring-integrated-header .scoring-table,
.scoring-body-shell .scoring-table {
    width: 100% !important;
    margin: 0 !important;
}

/* Scoring specific support classes */
.scoring-table input:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.scoring-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed !important;
    border-right: 1px solid var(--score-grid-line-vertical);
    border-left: 1px solid var(--score-grid-line-vertical);
}

.scoring-page .scoring-table col[style*="width: 60px"] {
    width: 60px !important;
}

.scoring-page .scoring-table col[style*="width: 300px"] {
    width: var(--score-lesson-column-width) !important;
    min-width: 0 !important;
    max-width: none !important;
}

.scoring-page .scoring-table col[style*="width: 40px"] {
    width: 40px !important;
}

.scoring-page .scoring-table col[style*="--score-judge-column-width"] {
    width: var(--score-judge-column-width) !important;
}

.scoring-page .scoring-table col[style*="--score-comment-column-width"] {
    width: var(--score-comment-column-width) !important;
}

.scoring-table th,
.scoring-table td {
    border-right: 1px solid var(--score-grid-line-vertical) !important;
    border-bottom: 1px solid var(--score-grid-line) !important;
}

.scoring-sticky-shell .scoring-table thead th {
    line-height: 1.05;
    vertical-align: middle;
}

.scoring-sticky-shell .scoring-table thead th:not(.judge-complete):not(.judge-incomplete) {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    height: var(--score-header-label-row-height);
    font-size: 0.92rem;
}

.scoring-table th:last-child,
.scoring-table td:last-child {
    border-right: none !important;
}

.scoring-table input[type="text"] {
    color: var(--score-input-text);
    background-color: var(--score-input-bg);
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.scoring-table input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.scoring-table th.judge-complete,
.scoring-table th.judge-incomplete {
    background-color: transparent !important;
    color: var(--score-judge-header-text) !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 !important;
    height: var(--score-header-label-row-height);
    vertical-align: top;
}

.scoring-sticky-shell .scoring-table thead th.judge-complete > div,
.scoring-sticky-shell .scoring-table thead th.judge-incomplete > div {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: calc(100% + 1px);
    margin: 0 !important;
    min-height: var(--score-judge-card-height) !important;
    padding: 6px 8px !important;
    border: none !important;
    background: var(--score-judge-header-bg) !important;
    border-radius: 0;
    box-shadow: none;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px !important;
}

.scoring-sticky-shell .scoring-table thead th.judge-complete > div > div,
.scoring-sticky-shell .scoring-table thead th.judge-incomplete > div > div {
    margin-top: 0 !important;
    line-height: 1.12;
}

.scoring-sticky-shell .scoring-table thead th.judge-complete > div > div:first-child,
.scoring-sticky-shell .scoring-table thead th.judge-incomplete > div > div:first-child {
    font-size: clamp(1.45rem, 1.8vw, 1.7rem) !important;
    font-weight: 800;
    line-height: 1.04;
}

.scoring-sticky-shell .scoring-table thead th.judge-complete > div > div:nth-child(2),
.scoring-sticky-shell .scoring-table thead th.judge-incomplete > div > div:nth-child(2) {
    font-size: 0.66rem !important;
}

.scoring-sticky-shell .scoring-table thead th.judge-complete > div > div:nth-child(3),
.scoring-sticky-shell .scoring-table thead th.judge-incomplete > div > div:nth-child(3) {
    font-size: 0.96rem !important;
}

/* Kür A/B-Anzeige (§402b Freestyle, 13.07.2026): A- und B-Zeile im Richterkopf sind
   gleichwertig und sollen deshalb BEIDE die große Wertzeilen-Schrift bekommen.
   Ohne diese Regel trifft die generische nth-child(3)-Regel oben nur die A-Zeile
   (drittes Kind), während B als viertes Kind klein bliebe. Steht bewusst NACH der
   nth-child-Regel, damit sie bei gleicher Spezifität gewinnt. Die Gesamt-Zeile
   (fünftes Kind, ohne Klasse) bleibt bewusst kleiner. */
.scoring-sticky-shell .scoring-table thead th.judge-complete > div > div.kuer-ab-zeile,
.scoring-sticky-shell .scoring-table thead th.judge-incomplete > div > div.kuer-ab-zeile {
    font-size: 0.96rem !important;
}

.scoring-table th.judge-complete *,
.scoring-table th.judge-incomplete * {
    color: var(--score-judge-header-text) !important;
}

.scoring-table td.score-confirmed {
    background-color: color-mix(in srgb, var(--score-confirmed-bg) 62%, transparent);
}

.scoring-table td.score-confirmed input[type="text"] {
    background-color: var(--score-confirmed-bg) !important;
    border-color: var(--score-confirmed-border) !important;
    color: var(--score-confirmed-text) !important;
}

.scoring-table td.score-comment-cell,
.scoring-table td.score-comment-cell * {
    color: var(--score-comment-text-color) !important;
}

.scoring-table td.score-comment-cell .score-comment-trigger {
    opacity: 1;
    min-width: 28px;
}

/* Remove number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.table-container thead {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* CREDITS */
.credits-page {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0.25rem 0 1.25rem;
}

.credits-hero {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-border-color) 90%, transparent);
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--mud-palette-primary) 16%, transparent), transparent 34%),
        radial-gradient(circle at 78% 22%, color-mix(in srgb, #00bfa5 12%, transparent), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-surface) 98%, transparent), color-mix(in srgb, var(--mud-palette-surface) 90%, black 10%));
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

.credits-title {
    letter-spacing: 0.2px;
    font-weight: 700;
    font-size: clamp(2rem, 3.8vw, 3.15rem);
    line-height: 1.08;
}

.credits-subtitle {
    opacity: 0.9;
    max-width: 1080px;
    margin: 0;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 82%, var(--mud-palette-text-secondary));
}

.credits-section {
    border: 1px solid var(--mud-border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
}

.credits-section-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.credits-card {
    height: 100%;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-border-color) 92%, transparent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
}

.credits-card:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 42%, var(--mud-border-color));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.credits-card-wide {
    background: color-mix(in srgb, var(--mud-palette-surface) 95%, transparent);
}

.credits-avatar {
    width: 34px;
    height: 34px;
    color: color-mix(in srgb, var(--mud-palette-primary) 58%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-border-color) 90%, transparent);
}

.credits-text {
    line-height: 1.45;
    opacity: 0.9;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 84%, var(--mud-palette-text-secondary));
}

.credits-page .mud-card-header {
    padding-bottom: 0.35rem;
}

.credits-page .mud-card-content {
    padding-top: 0.85rem;
}

.credits-page .mud-divider {
    border-top-color: color-mix(in srgb, var(--mud-border-color) 92%, transparent);
}

.credits-page .mud-chip {
    font-size: 0.73rem;
    font-weight: 600;
}

.credits-page .mud-chip.mud-chip-outlined {
    border-color: color-mix(in srgb, currentColor 52%, transparent) !important;
    background: color-mix(in srgb, currentColor 10%, transparent) !important;
}

.credits-page .mud-chip.mud-chip-filled {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent);
}

.credits-footer {
    border: 1px dashed var(--mud-border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
}

.credits-footer-text {
    opacity: 0.86;
}

/* Responsive */
@media (max-width: 1100px) {
    .main-content-with-toolbar {
        padding-bottom: 230px;
    }
}

@media (max-width: 960px) {
    .mud-compat-appbar,
    .mud-appbar {
        height: 52px;
    }

    .mud-compat-drawer,
    .mud-drawer {
        top: 52px;
        width: min(88vw, 320px);
    }

    .mud-compat-main,
    .mud-main-content {
        padding-top: 52px;
    }

    .mud-compat-drawer.mud-compat-drawer-open ~ .mud-compat-main {
        padding-left: 0;
    }

    .mud-compat-container,
    .mud-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .mud-compat-grid {
        gap: 0.65rem;
    }

    .mud-compat-table-wrap {
        border-radius: 0;
    }

    .mud-typography-h4 {
        font-size: 1.2rem;
    }

    .mud-typography-h6 {
        font-size: 1rem;
    }

    .main-content-with-toolbar {
        padding-bottom: 245px;
    }

    .app-breadcrumb-sticky {
        top: 52px;
    }

    .page-header-sticky {
        top: 52px;
    }

    .scoring-sticky-shell .app-breadcrumb-sticky {
        top: 0;
    }
}

@media (max-width: 760px) {
    .shows-flow-page {
        padding-right: 12px;
    }

    .starterlists-page {
        padding-right: 0;
    }

    body.showboard-drawer-open .shows-flow-page {
        padding-right: 0;
    }

    .scoring-sticky-shell > .mud-paper:nth-child(3) .mud-typography-h5 {
        font-size: 1.25rem !important;
    }

    .scoring-sticky-shell > .mud-paper:nth-child(3) .mud-typography-h3,
    .scoring-sticky-shell > .mud-paper:nth-child(3) .mud-typography-h2 {
        font-size: 1.35rem !important;
    }

    .scoring-sticky-shell .scoring-table thead th.judge-complete > div,
    .scoring-sticky-shell .scoring-table thead th.judge-incomplete > div {
        min-height: 58px !important;
        padding: 4px 4px !important;
        bottom: calc(100% + 3px);
    }

    .mud-compat-table {
        min-width: 0;
        display: block;
    }

    .mud-compat-table thead {
        display: none;
    }

    .mud-compat-table tbody,
    .mud-compat-table tr,
    .mud-compat-table td {
        display: block;
        width: 100%;
    }

    .mud-compat-table tr {
        border: 1px solid var(--mud-border-color);
        border-radius: var(--mud-radius-sm);
        margin-bottom: 0.65rem;
        padding: 0.45rem;
        background: color-mix(in srgb, var(--mud-palette-surface) 95%, transparent);
    }

    .mud-compat-table td {
        border: none;
        padding: 0.35rem 0.2rem;
    }

    .mud-compat-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        margin-bottom: 0.1rem;
    }

    .mud-compat-table td:last-child,
    .mud-compat-table th:last-child {
        text-align: left;
    }

    .mud-compat-table td:last-child > * {
        justify-content: flex-start;
    }
}

.scoring-result-print-root {
    display: none;
}

@media print {
    @page {
        size: a4;
        margin: 12mm;
    }

    .no-print,
    .mud-compat-drawer,
    .mud-drawer,
    .mud-compat-appbar,
    .mud-appbar,
    .mud-overlay,
    .mud-navmenu,
    .toolbar-container,
    .toolbar,
    .toolbar-toggle,
    .toolbar-content,
    .side-menu,
    .side-menu-toggle,
    .menu-toggle-in-header,
    .display-status-list,
    .display-status-item,
    .offline-alert,
    .mud-compat-button,
    .mud-button-root,
    .mud-compat-icon-button,
    .mud-icon-button,
    .mud-compat-fab,
    /* Ergaenzung 01.08.2026: Diese drei Einblendungen liegen AUSSERHALB von
       ".scoring-page" und wurden deshalb von der Ausblend-Regel weiter unten
       nicht erfasst. Sie haetten im Druck zusaetzliche Hoehe erzeugt und damit
       ebenfalls eine zweite Seite ausloesen koennen. */
    .external-pending-overlay,
    .beginner-mode-overlay,
    .umgebungsband,
    a,
    a:visited {
        display: none !important;
    }

    [style*="position: sticky"] {
        position: static !important;
        top: auto !important;
        box-shadow: none !important;
    }

    .scoring-table {
        border-collapse: collapse !important;
    }

    .scoring-table tbody tr + tr td {
        border-top: 1px solid #bdbdbd !important;
    }

    /* Fix 01.08.2026 - "immer eine leere zweite Seite":
       Die Layout-Container der App tragen im Bildschirmbetrieb Abstaende fuer die
       obere AppBar und die untere rote Toolbar:
         .mud-main-content        -> min-height: 100vh; padding-top: 56px
         <main> (Inline-Style)    -> padding-bottom: 60px
         .main-content-with-toolbar -> padding-bottom: 220px
         .scoring-page            -> padding-bottom: ca. 66px
       Der Ergebnisbogen selbst fuellt mit 297mm bereits ein volles A4-Blatt aus
       (der Druck laeuft ueber "@page { margin: 0 }", siehe ui-helpers.js).
       Die rund 400 zusaetzlichen Pixel der Container passen deshalb nicht mehr
       auf Seite 1 und erzeugten eine zweite, voellig leere Seite.
       Deshalb werden alle Container fuer den Ergebnisbogen-Druck zurueckgesetzt.
       "!important" ist noetig, weil padding-bottom und die Container-Breite als
       Inline-Styles aus MainLayout.razor kommen und sonst gewinnen wuerden.
       Die Regel haengt an "body.scoring-print-active" und wirkt daher NUR beim
       Ergebnisbogen-Druck - jeder andere Druck bleibt unveraendert. */
    body.scoring-print-active,
    body.scoring-print-active .mud-compat-main,
    body.scoring-print-active .mud-main-content,
    body.scoring-print-active .mud-compat-container,
    body.scoring-print-active .mud-container,
    body.scoring-print-active .main-content-with-toolbar,
    body.scoring-print-active .shows-flow-page,
    body.scoring-print-active .scoring-page {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-width: none !important;
        width: auto !important;
        overflow: visible !important;
    }

    body.scoring-print-active .scoring-page > :not(.scoring-result-print-root) {
        display: none !important;
    }

    body.scoring-print-active .scoring-result-print-root {
        display: block !important;
        color: #111 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    body.scoring-print-active .scoring-result-print-sheet {
        width: 210mm;
        /* --- ERSETZT am 01.08.2026: min-height: 297mm; ---
           Grund: Der Wert entsprach bei "@page { margin: 0 }" exakt der Blatthoehe.
           Schon Rundungsdifferenzen im Bruchteil eines Pixels lassen den Browser
           dann auf eine zweite Seite umbrechen. Der Bogen ist weiss auf weissem
           Papier - eine erzwungene Mindesthoehe bringt im Druck nichts und wurde
           deshalb stillgelegt. Die Hoehe ergibt sich jetzt aus dem Inhalt. */
        max-width: none;
        margin: 0 auto;
        padding: 12mm;
        box-sizing: border-box;
        background: #fff;
        color: #111;
        font-size: 10pt;
        line-height: 1.25;
    }

    body.scoring-print-active .scoring-result-print-show {
        font-size: 16pt;
        font-weight: 500;
        margin-bottom: 2mm;
    }

    body.scoring-print-active .scoring-result-print-title {
        font-size: 14pt;
        font-weight: 700;
        margin: 0 0 2mm 0;
    }

    body.scoring-print-active .scoring-result-print-subtitle {
        font-size: 9pt;
        font-weight: 600;
        margin-bottom: 4mm;
    }

    body.scoring-print-active .scoring-result-print-starter {
        margin: 6mm 0 12mm 0;
    }

    body.scoring-print-active .scoring-result-print-horse,
    body.scoring-print-active .scoring-result-print-rider,
    body.scoring-print-active .scoring-result-print-club {
        font-size: 10pt;
        font-weight: 700;
        margin-bottom: 4mm;
    }

    body.scoring-print-active .scoring-result-print-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    body.scoring-print-active .scoring-result-print-table th {
        text-align: left;
        font-size: 7pt;
        font-weight: 400;
        padding: 0 2mm 2mm 2mm;
    }

    body.scoring-print-active .scoring-result-print-table th:nth-child(2),
    body.scoring-print-active .scoring-result-print-table th:nth-child(3),
    body.scoring-print-active .scoring-result-print-table td:nth-child(2),
    body.scoring-print-active .scoring-result-print-table td:nth-child(3) {
        text-align: center;
    }

    body.scoring-print-active .scoring-result-print-position {
        width: 11mm;
        font-weight: 700;
    }

    body.scoring-print-active .scoring-result-print-judge-summary td {
        padding: 2mm;
        font-size: 9pt;
        font-weight: 700;
        vertical-align: middle;
    }

    body.scoring-print-active .scoring-result-print-scores-row td {
        border: 1px solid #d0d0d0;
        padding: 2mm;
        font-size: 8.5pt;
        page-break-inside: avoid;
    }

    body.scoring-print-active .scoring-result-print-scores {
        display: flex;
        justify-content: space-between;
        gap: 5mm;
        white-space: normal;
    }

    body.scoring-print-active .scoring-result-print-deduction {
        white-space: nowrap;
        margin-left: auto;
    }

    body.scoring-print-active .scoring-result-print-result {
        margin-top: 8mm;
        text-align: center;
        font-size: 10pt;
        font-weight: 700;
    }

    .scoring-page::after {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #111 !important;
    }
}


/* ================================================================================
   Radzen-Komponenten im Projekt-Theme (alle Farbthemes ueber die mud-Palette-Variablen).
   Ergaenzung 2026-07-07: Die neue Admin-Seite "API-Zugriffe" nutzt RadzenDataGrid/Text/
   FormField; ohne diese Regeln blieben Radzen-Bausteine im hellen Material-Standard und
   waren in dunklen Themes unlesbar. Konvention wie beim Dialog-/Notification-Block oben:
   konkrete rz-Klassen auf die mud-Variablen mappen - dann folgen sie jedem Farbthema.
   ================================================================================ */

/* Texte (Radzen setzt sonst eigene dunkle Titelfarben) */
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-subtitle1, .rz-text-subtitle2, .rz-text-body1, .rz-text-body2 {
    color: var(--mud-palette-text-primary);
}

.rz-text-caption {
    color: var(--mud-palette-text-secondary);
}

/* DataGrid: Flaechen, Kopfzeile, Zeilen, Leermeldung, Paginierung */
.rz-data-grid {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-border-color);
}

.rz-data-grid .rz-grid-table,
.rz-data-grid .rz-data-grid-data {
    background: transparent;
    color: var(--mud-palette-text-primary);
}

.rz-data-grid .rz-grid-table thead th {
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-text-primary) 12%);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-border-color);
}

.rz-data-grid .rz-grid-table tbody td {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-border-color);
}

.rz-data-grid .rz-grid-table tbody tr:hover td {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.rz-data-grid .rz-empty-message,
.rz-data-grid .rz-datatable-emptymessage,
.rz-data-grid .rz-empty {
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.rz-paginator {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-border-color);
}

/* Eingabefelder (z. B. Erstell-Dialog: Name, Ablaufdatum) */
.rz-form-field {
    color: var(--mud-palette-text-primary);
}

.rz-form-field .rz-form-field-label {
    color: var(--mud-palette-text-secondary);
}

.rz-textbox,
.rz-inputtext,
.rz-spinner input,
.rz-datepicker input {
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-text-primary) 6%);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-border-color);
}

/* --------------------------------------------------------------------------------
   Nachbesserung 2026-07-09: Die obigen td/th-Regeln reichen fuer die ZEILEN-Hintergruende
   NICHT aus, weil Radzen die Zebra-Streifen mit hoeherer Spezifitaet setzt
   (.rz-grid-table-striped tbody > tr:nth-child(...) > td, Spezifitaet 0-3-3) als unsere
   Regel (.rz-data-grid .rz-grid-table tbody td, Spezifitaet 0-2-2). Die hellen
   Material-Streifen "gewannen" deshalb trotz des Fixes vom 07.07. weiterhin - die
   Tabelle blieb im dunklen Theme hell.
   Loesung: KEIN Spezifitaets-Wettlauf, sondern Radzens EIGENE Farb-Variablen
   (--rz-grid-*) im Grid-Kontext umdefinieren. Radzens Regeln lesen diese Variablen -
   damit folgen Streifen, Hover, Selektion, Sortier-Kopf und Fusszeile automatisch
   jedem Farbthema, voellig egal, welche Regel den Kampf um die Spezifitaet gewinnt.
   -------------------------------------------------------------------------------- */
.rz-data-grid,
.rz-datatable,
.rz-paginator {
    /* Grundflaeche + Zebra-Streifen (Radzen faerbt gerade Zeilen mit "stripe",
       ungerade mit "stripe-odd") */
    --rz-grid-background-color: var(--mud-palette-surface);
    --rz-grid-stripe-odd-background-color: var(--mud-palette-surface);
    --rz-grid-stripe-background-color: color-mix(in srgb, var(--mud-palette-surface) 95%, var(--mud-palette-text-primary) 5%);
    /* Kopfzeile leicht abgesetzt (gleiches Mischverhaeltnis wie die th-Regel oben);
       sortierte Spalte noch einen Tick staerker abgesetzt */
    --rz-grid-header-background-color: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-text-primary) 12%);
    --rz-grid-header-sorted-background-color: color-mix(in srgb, var(--mud-palette-surface) 82%, var(--mud-palette-text-primary) 18%);
    --rz-grid-header-color: var(--mud-palette-text-primary);
    --rz-grid-sort-icon-color: var(--mud-palette-text-secondary);
    /* Zellen-Text, Fusszeile */
    --rz-grid-cell-color: var(--mud-palette-text-primary);
    --rz-grid-foot-background-color: var(--mud-palette-surface);
    --rz-grid-foot-cell-color: var(--mud-palette-text-primary);
    /* Hover/Selektion/Zell-Fokus: Primaerfarbe dezent ueber die Flaeche gemischt */
    --rz-grid-hover-background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    --rz-grid-hover-color: var(--mud-palette-text-primary);
    --rz-grid-selected-background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
    --rz-grid-selected-color: var(--mud-palette-text-primary);
    --rz-grid-cell-focus-background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    --rz-grid-cell-focus-color: var(--mud-palette-text-primary);
    /* Linien im Theme-Grau statt Material-Hellgrau */
    --rz-grid-border: 1px solid var(--mud-border-color);
    --rz-grid-cell-border: 1px solid var(--mud-border-color);
    --rz-grid-bottom-cell-border: 1px solid var(--mud-border-color);
    --rz-grid-header-cell-border-bottom: 1px solid var(--mud-border-color);
}
/* ==========================================================================================
   STARTERWECHSEL-KONTROLLE (v1.5.7.0, 21.07.2026): Positions-Statusleiste im Scoring.
   Nur bei Paperless ohne BlackHorse und NUR sichtbar, wenn mindestens eine Richterposition
   auf einem anderen Starter steht als die Maske - sonst existiert die Leiste gar nicht
   (Platz gehoert der Maske). Auffaellig gelb/orange, damit sie nicht uebersehen wird.
   ========================================================================================== */
.paperless-position-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 5px solid #e65100;
    background: #fff3e0;
    color: #6d3600;
    font-size: 0.95rem;
}

.paperless-position-bar-title {
    font-weight: 700;
}

.paperless-position-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(230, 81, 0, 0.12);
}

.paperless-position-label {
    font-weight: 700;
}

/* --------------------------------------------------------------------------------
   Radzen-Komponenten an das Farbschema anbinden (29.07.2026)

   Befund: Am 07.07.2026 wurde bereits geloest, dass Radzen-GRIDS dem Farbschema
   folgen — ueber Radzens eigene Variablen (--rz-grid-*), nicht ueber einen
   Spezifitaets-Wettlauf. Diese Loesung deckte aber NUR Grids ab.

   Alle uebrigen Radzen-Komponenten (Karten, Meldungen, Dialoge, Eingabefelder)
   blieben unangebunden und brachten ihre eigenen, hellen Grundflaechen mit —
   waehrend die Schrift aus dem Mud-Theme kam. ScoreControl laeuft standardmaessig
   im DUNKLEN Schema, also stand helle Schrift auf heller Flaeche und war
   praktisch unlesbar.

   Das betrifft systematisch JEDE neue Seite, denn nach agents.md 12.1 wird neuer
   UI-Code mit Radzen gebaut. Aufgefallen ist es am 28./29.07.2026 bei der
   Notenbogen-Fotoerkennung.

   Loesung analog zur Grid-Fassung: Radzens eigene Farb-Variablen auf die
   Mud-Palette abbilden. Damit folgen alle vier Schemata (dark, light, lightpink,
   darkpink) automatisch, ohne dass eine einzige Regel ueberschrieben werden muss.
   -------------------------------------------------------------------------------- */
body {
    /* Grundflaechen */
    --rz-body-background-color: var(--mud-palette-background);
    --rz-base-background-color: var(--mud-palette-surface);
    --rz-card-background-color: var(--mud-palette-surface);
    --rz-card-flat-background-color: var(--mud-palette-surface);
    --rz-dialog-background-color: var(--mud-palette-surface);
    --rz-panel-background-color: var(--mud-palette-surface);

    /* Schriftfarben */
    --rz-text-color: var(--mud-palette-text-primary);
    --rz-text-body1-color: var(--mud-palette-text-primary);
    --rz-text-body2-color: var(--mud-palette-text-primary);
    --rz-text-caption-color: var(--mud-palette-text-secondary);

    /* Eingabefelder: Grund und Schrift muessen gemeinsam wechseln, sonst steht
       heller Text in einem hellen Feld. */
    --rz-input-background-color: var(--mud-palette-surface);
    --rz-input-color: var(--mud-palette-text-primary);

    /* ============================================================================
       RADZEN-GRUNDPALETTE ANS THEME BINDEN (01.08.2026)

       DAS EIGENTLICHE PROBLEM
       Radzen baut fast alle Komponenten auf einer Graustufen-Skala --rz-base-50
       bis --rz-base-900 auf. Diese Skala ist FÜR EIN HELLES THEME gedacht:
       base-100/200 sind nahezu weiß. Ohne Anbindung bleiben sie auch im
       Dunkelmodus weiß — und genau daraus entstehen die immer wiederkehrenden
       Meldungen "weiß auf weiß": Tabellenköpfe, Ränder, Dropdown-Listen,
       Trennlinien. Bisher waren nur einzelne Bereiche (Grid, Karte, Dialog,
       Eingabefeld) einzeln angebunden; alles andere fiel durchs Raster, und
       jede neue Seite brachte das Problem erneut mit.

       DIE LÖSUNG
       Die Skala wird aus dem Theme ABGELEITET statt fest gesetzt: Ausgangspunkt
       ist die Flächenfarbe (--mud-palette-surface), und je höher die Stufe,
       desto mehr Textfarbe wird beigemischt. Dadurch stimmt die Richtung in
       JEDEM Modus automatisch — im Dunkelmodus wird die Skala nach hell,
       im Hellmodus nach dunkel abgestuft. Kein Modus muss einzeln gepflegt
       werden, und neue Seiten sind von Haus aus richtig.
       ============================================================================ */
    --rz-base: var(--mud-palette-surface);
    --rz-base-50: var(--mud-palette-surface);
    --rz-base-100: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-text-primary) 6%);
    --rz-base-200: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-text-primary) 12%);
    --rz-base-300: color-mix(in srgb, var(--mud-palette-surface) 80%, var(--mud-palette-text-primary) 20%);
    --rz-base-400: color-mix(in srgb, var(--mud-palette-surface) 68%, var(--mud-palette-text-primary) 32%);
    --rz-base-500: color-mix(in srgb, var(--mud-palette-surface) 55%, var(--mud-palette-text-primary) 45%);
    --rz-base-600: color-mix(in srgb, var(--mud-palette-surface) 42%, var(--mud-palette-text-primary) 58%);
    --rz-base-700: color-mix(in srgb, var(--mud-palette-surface) 30%, var(--mud-palette-text-primary) 70%);
    --rz-base-800: color-mix(in srgb, var(--mud-palette-surface) 18%, var(--mud-palette-text-primary) 82%);
    --rz-base-900: color-mix(in srgb, var(--mud-palette-surface) 8%, var(--mud-palette-text-primary) 92%);

    /* Schriftfarben auf den Grundflächen — sonst steht Text der Stufe 100/200
       weiterhin in Radzens Vorgabefarbe (dunkelgrau) auf dunklem Grund. */
    --rz-base-light: var(--mud-palette-text-primary);
    --rz-base-dark: var(--mud-palette-text-primary);
    --rz-on-base-light: var(--mud-palette-text-primary);
    --rz-on-base-dark: var(--mud-palette-text-primary);
    --rz-text-title-color: var(--mud-palette-text-primary);
    --rz-text-subtitle-color: var(--mud-palette-text-secondary);
    --rz-text-contrast-color: var(--mud-palette-text-primary);

    /* Auswahllisten und Aufklapp-Menüs. Diese Elemente rendert Radzen am Ende
       des Dokuments (außerhalb der Karte) — sie erben deshalb NICHTS von den
       Regeln weiter oben und brauchen ihre eigene Anbindung. Der Anwender sah
       hier zuletzt eine weiße Liste auf dunklem Schirm. */
    --rz-dropdown-background-color: var(--mud-palette-surface);
    --rz-dropdown-color: var(--mud-palette-text-primary);
    --rz-dropdown-panel-background-color: var(--mud-palette-surface);
    --rz-dropdown-item-color: var(--mud-palette-text-primary);
    --rz-dropdown-item-hover-background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    --rz-dropdown-item-hover-color: var(--mud-palette-text-primary);
    --rz-dropdown-item-selected-background-color: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface));
    --rz-dropdown-item-selected-color: var(--mud-palette-text-primary);
    --rz-panel-menu-background-color: var(--mud-palette-surface);
    --rz-menu-background-color: var(--mud-palette-surface);
    --rz-menu-color: var(--mud-palette-text-primary);
    --rz-input-placeholder-color: var(--mud-palette-text-secondary);
    --rz-input-border: 1px solid var(--mud-border-color);
    --rz-border-color: var(--mud-border-color);

    /* ---- Semantische Farben: Marke statt Radzen-Vorgabe -----------------
       Radzens Primärfarbe ist ein Violett (#4340D2) — nicht unsere Marke.
       Ohne diese Zeilen ist jeder Primary-Knopf im ganzen Programm violett
       statt rot, und die Alert-Farben stammen aus Radzens eigener Palette. */
    --rz-primary: var(--mud-palette-primary);
    --rz-primary-light: color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-surface));
    --rz-primary-dark: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-primary));
    --rz-primary-lighter: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
    --rz-primary-darker: color-mix(in srgb, var(--mud-palette-primary) 85%, black);
    --rz-on-primary: var(--mud-palette-primary-text, #fff);
    --rz-secondary: var(--mud-palette-secondary, var(--mud-palette-primary));
    --rz-on-secondary: var(--mud-palette-secondary-text, #fff);

    --rz-success: var(--mud-palette-success);
    --rz-success-lighter: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface));
    --rz-info: var(--mud-palette-info);
    --rz-info-lighter: color-mix(in srgb, var(--mud-palette-info) 18%, var(--mud-palette-surface));
    --rz-warning: var(--mud-palette-warning);
    --rz-warning-lighter: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface));
    --rz-danger: var(--mud-palette-error);
    --rz-danger-lighter: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface));

    /* WICHTIG — die "on-*-lighter"-Farben sind die SCHRIFTFARBE in getönten
       Hinweisfeldern (RadzenAlert mit Shade.Lighter). Radzen setzt dort den
       gesättigten Vollton, also z. B. kräftiges Grün auf blassgrünem Grund.
       Auf dem Handy und im hellen Theme ist das kaum zu lesen. Deshalb: die
       normale Textfarbe des Themes verwenden, die Farbe trägt ohnehin schon
       der Rahmen und das Symbol. */
    --rz-on-success-lighter: var(--mud-palette-text-primary);
    --rz-on-info-lighter: var(--mud-palette-text-primary);
    --rz-on-warning-lighter: var(--mud-palette-text-primary);
    --rz-on-danger-lighter: var(--mud-palette-text-primary);
    --rz-on-primary-lighter: var(--mud-palette-text-primary);

    /* Deaktivierte Knöpfe: Radzens Vorgabe ist 0.2 — bei einem hellen Knopf
       auf dunklem Grund verschwindet die Beschriftung damit vollständig.
       0.45 zeigt weiterhin klar "nicht anklickbar", bleibt aber lesbar. */
    --rz-button-disabled-opacity: 0.45;
}

/* ================================================================================
   Radzen-Knöpfe: Flächen aus dem Theme (01.08.2026)

   ButtonStyle.Light ist im Programm der Standard für Nebenaktionen ("Zurück",
   "PDF auswählen", "Neu aufnehmen"). Radzen gibt ihm --rz-base-200; das ist
   oben jetzt ans Theme gebunden, die Schriftfarbe zieht Radzen aber aus
   --rz-text-color. Damit beide sicher zusammenpassen — auch wenn Radzen die
   Regel künftig ändert — wird das Paar hier ausdrücklich gesetzt.
   ================================================================================ */
.rz-button.rz-light,
.rz-button.rz-base {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 82%, var(--mud-palette-text-primary) 18%) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-border-color) !important;
}

    .rz-button.rz-light:hover:not(.rz-state-disabled),
    .rz-button.rz-base:hover:not(.rz-state-disabled) {
        background-color: color-mix(in srgb, var(--mud-palette-surface) 70%, var(--mud-palette-text-primary) 30%) !important;
    }

/* Symbole in Knöpfen erben die Schriftfarbe — ohne diese Zeile bleibt ein
   Icon in Radzens Vorgabefarbe stehen, während der Text schon stimmt. */
.rz-button.rz-light .rzi,
.rz-button.rz-base .rzi {
    color: inherit !important;
}

/* ================================================================================
   Aufklapp-Listen liegen AUSSERHALB des Themen-Bereichs (01.08.2026)

   Radzen hängt Popups (Auswahllisten, Datumswähler, Menüs) direkt an den
   Dokumentkörper. Sie stehen damit außerhalb jeder Karte und übernehmen deren
   Farben nicht. Die Variablen oben greifen zwar auch hier, weil sie auf :root
   liegen — aber Radzen setzt für diese Elemente teilweise feste Farben im
   eigenen Stylesheet. Deshalb hier ausdrücklich nachziehen.
   ================================================================================ */
.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel,
.rz-datepicker-popup,
.rz-menu-popup,
.rz-popup {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-border-color) !important;
}

    .rz-dropdown-panel .rz-dropdown-item,
    .rz-multiselect-panel .rz-multiselect-item,
    .rz-autocomplete-panel .rz-autocomplete-item,
    .rz-popup li {
        background-color: transparent !important;
        color: var(--mud-palette-text-primary) !important;
    }

        .rz-dropdown-panel .rz-dropdown-item:hover,
        .rz-multiselect-panel .rz-multiselect-item:hover,
        .rz-autocomplete-panel .rz-autocomplete-item:hover,
        .rz-popup li:hover {
            background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface)) !important;
        }

        .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
        .rz-multiselect-panel .rz-multiselect-item.rz-state-highlight {
            background-color: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface)) !important;
            color: var(--mud-palette-text-primary) !important;
        }

/* Das geschlossene Auswahlfeld selbst (nicht die aufgeklappte Liste). */
.rz-dropdown,
.rz-multiselect,
.rz-autocomplete,
.rz-datepicker {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-border-color) !important;
}

    .rz-dropdown .rz-dropdown-label,
    .rz-dropdown .rz-inputtext,
    .rz-multiselect .rz-multiselect-label,
    .rz-datepicker .rz-inputtext {
        background-color: transparent !important;
        color: var(--mud-palette-text-primary) !important;
    }

    /* Der Pfeil rechts im Auswahlfeld — ohne Anbindung dunkelgrau auf dunkel. */
    .rz-dropdown .rz-dropdown-trigger,
    .rz-multiselect .rz-multiselect-trigger,
    .rz-datepicker .rz-datepicker-trigger {
        background-color: transparent !important;
        color: var(--mud-palette-text-secondary) !important;
    }

/* Das SUCHFELD innerhalb einer aufgeklappten Liste (AllowFiltering="true").
   Es sitzt im Popup, also außerhalb jeder Karte, und ist ein eigenes
   Eingabefeld — ohne diese Regel tippt man dunkle Schrift auf dunklen Grund
   bzw. sieht den Platzhaltertext nicht. Aufgefallen beim Einbau der
   Veranstaltungssuche in der Notenbogen-Auswertung (01.08.2026). */
.rz-dropdown-filter-container,
.rz-multiselect-filter-container {
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-border-color) !important;
}

.rz-dropdown-filter,
.rz-multiselect-filter {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-border-color) !important;
}

    .rz-dropdown-filter::placeholder,
    .rz-multiselect-filter::placeholder {
        color: var(--mud-palette-text-secondary) !important;
        opacity: 1; /* Firefox blasst Platzhalter sonst zusätzlich ab. */
    }

/* Die Lupe neben dem Suchfeld. */
.rz-dropdown-filter-container .rzi,
.rz-multiselect-filter-container .rzi {
    color: var(--mud-palette-text-secondary) !important;
}

/* ================================================================================
   HANDY-ANSICHT: Tabellen werden zu Karten (29.07.2026)

   Ausgangslage: ScoreControl ist eine Arbeitsplatz-Anwendung. Die Pruefungsliste
   ist auf einem 440 px breiten Telefon 1320 px breit — man muesste dreimal
   seitlich scrollen, um eine Zeile zu lesen. Auf dem Turnierplatz ist das
   unbrauchbar.

   Loesung: Unterhalb von 700 px wird jede Tabellenzeile zu einer Karte, in der
   die Felder untereinander stehen — links die Feldbezeichnung, rechts der Wert.
   Die Bezeichnung kommt aus dem Attribut data-label, das die Tabellenzellen
   ohnehin schon mitbringen (297 von 351 Zellen in der Pruefungsliste). Deshalb
   muss KEIN Markup geaendert werden, und die Regel wirkt sofort auf allen
   Tabellen der Anwendung.

   Ausgenommen ist die Notentabelle im Scoring: Dort ist das Raster aus Lektionen
   und Richterpositionen der Sinn der Sache — sie in Karten aufzuloesen wuerde die
   Eingabe zerstoeren. Sie bleibt eine Tabelle und darf seitlich scrollen.

   Grenze 700 px: Franks iPhone 17 Pro Max hat 440 px, das S24 Ultra rund 412 px.
   Tablets und Rechner liegen darueber und behalten die gewohnte Tabelle.
   ================================================================================ */

@media (max-width: 700px) {

    /* Kopfzeile weg — die Bezeichnungen stehen ab jetzt in jeder Zelle. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) thead {
        display: none;
    }

    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table),
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) tbody,
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) tr,
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Die Listen setzen fuer die Tabellenansicht eine feste Mindestbreite (z. B.
       1320 px in der Pruefungsliste), damit am Rechner alle Spalten nebeneinander
       passen. In der Kartenansicht ist genau diese Vorgabe der Grund, warum die
       Tabelle weiterhin ueber den Bildschirm hinausragt — sie muss deshalb hier
       ausdruecklich zurueckgenommen werden. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    .mud-compat-table-wrap {
        overflow-x: visible;
    }

    /* Jede Zeile wird eine Karte. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) tbody tr {
        margin: 0 0 10px 0;
        padding: 4px 0;
        border: 1px solid rgba(128, 128, 128, 0.35);
        border-radius: 8px;
        background: var(--mud-palette-surface);
        overflow: hidden;
    }

    /* Zebra-Streifen ergeben bei Karten keinen Sinn mehr. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) tbody tr.mud-table-row-striped {
        background: var(--mud-palette-surface);
    }

    /* Feld: links die Bezeichnung, rechts der Wert. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 44px;          /* bequem mit dem Finger treffbar */
        padding: 6px 12px;
        border: none;
        border-bottom: 1px solid rgba(128, 128, 128, 0.18);
        text-align: right;
    }

    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td:last-child {
        border-bottom: none;
    }

    /* Die Feldbezeichnung aus data-label vor den Wert setzen. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--mud-palette-text-secondary);
        text-align: left;
    }

    /* Leere Zellen und solche ohne Bezeichnung nehmen keinen Platz weg. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td:empty {
        display: none;
    }

    /* Gruppenkoepfe (z. B. Abteilungen) bleiben durchgehende Balken. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) tr.mud-compat-table-group-header {
        margin-top: 16px;
        border: none;
        border-radius: 0;
        background: none;
    }

    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) tr.mud-compat-table-group-header td {
        justify-content: flex-start;
        font-weight: 700;
        border-bottom: 2px solid var(--mud-palette-primary);
        text-align: left;
    }

    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) tr.mud-compat-table-group-header td::before {
        content: none;
    }

    /* Bedienelemente in Zellen duerfen die Karte nicht sprengen. */
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td .mud-compat-stack,
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td .rz-dropdown,
    .mud-compat-table:not(.scoring-body-table):not(.scoring-header-table) td .mud-input-control {
        max-width: 62%;
    }

    /* Klickflaechen: Am Telefon wird mit dem Finger bedient, nicht mit der Maus.
       44 px ist die uebliche Mindestgroesse, unter der zuverlaessiges Treffen
       aufhoert. */
    .mud-compat-table td .mud-button-root,
    .mud-compat-table td .mud-icon-button,
    .mud-compat-table td button {
        min-height: 40px;
        min-width: 40px;
    }
}

/* ================================================================================
   HANDY-ANSICHT: Notentabelle im Scoring (29.07.2026)

   Die Notentabelle bleibt bewusst eine TABELLE — anders als die Listen wird sie
   nicht in Karten aufgeloest. Ihr Sinn ist ja gerade das Raster aus Lektionen und
   Richterpositionen; wer eine Note eintraegt, muss Zeile und Spalte gleichzeitig
   sehen. In Karten aufgeloest waere sie unbrauchbar.

   Am Telefon braucht sie aber schmalere Spalten. Mit den Vorgabewerten
   (Lektionsspalte 240 px, je Richter 110 px) kaeme man bei drei Richtern schon auf
   ueber 600 px — bei 440 px Bildschirm also seitliches Scrollen ab der ersten
   Zeile.

   Verkleinert passen drei Richterpositionen nebeneinander. Bei fuenf Positionen
   bleibt seitliches Scrollen unvermeidlich; damit man dabei nicht die Orientierung
   verliert, bleibt die Lektionsspalte stehen.

   Die Eingabefelder bleiben mindestens 44 px hoch: Darunter hoert zuverlaessiges
   Treffen mit dem Finger auf, und eine daneben getippte Wertnote ist teurer als
   ein paar Pixel Platzgewinn.
   ================================================================================ */

@media (max-width: 700px) {

    :root {
        --score-judge-column-width: 74px;
        --score-lesson-column-width: 118px;
    }

    /* Lektionstext darf umbrechen statt die Spalte zu sprengen. */
    .scoring-table td:nth-child(2) {
        white-space: normal;
        word-break: break-word;
        font-size: 0.8rem;
        line-height: 1.2;
    }

    /* Bei vielen Richterpositionen bleibt die Lektionsspalte beim seitlichen
       Scrollen stehen — sonst weiss man nicht mehr, welche Zeile man ausfuellt. */
    .scoring-table td:nth-child(1),
    .scoring-table th:nth-child(1),
    .scoring-table td:nth-child(2),
    .scoring-table th:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--mud-palette-surface);
    }

    .scoring-table td:nth-child(2),
    .scoring-table th:nth-child(2) {
        left: 34px;
    }

    /* Eingabefelder mit dem Finger bedienbar halten. */
    .scoring-table input[type="text"] {
        min-height: 44px;
        font-size: 1.05rem;
    }

    /* Kopfbereich der Wertungsmaske gibt am Telefon Hoehe ab — der Platz wird
       fuer die Notentabelle gebraucht. */
    .scoring-integrated-header {
        font-size: 0.85rem;
    }

    .scoring-rider-info-content {
        gap: 4px;
    }
}

/* ================================================================================
   Direkter Weg in die Kamera aus der Starterliste (31.07.2026)

   Bisher fuehrte der Weg zum Fotografieren ueber Starter -> Wertungsmaske ->
   automatische Umleitung. Am Telefon laedt dabei die schwerste Seite der ganzen
   Anwendung, nur um sie sofort wieder zu verlassen. Der Knopf in der Starterliste
   geht direkt zur Aufnahmeseite.

   Am Telefon nimmt er die volle Breite ein und ist gross genug fuer den Daumen —
   dort ist er der Hauptweg. Am Rechner bleibt er ein normaler Knopf in der
   Kopfzeile; dort wird ohnehin nicht fotografiert.
   ================================================================================ */

@media (max-width: 700px) {
    .starterlist-foto-knopf {
        width: 100%;
        min-height: 52px;
        font-size: 1.05rem;
        margin-top: 8px;
    }

    /* Kopfzeile untereinander statt nebeneinander, damit der Knopf die volle
       Breite bekommt. */
    .starterlists-page .page-header-sticky .mud-compat-stack-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =====================================================================================
   GESPERRTE FEHLER-ZAEHLER (2026-08-02, Frank)

   Die Plus-/Minus-Knoepfe der Fehler- und Abzugszaehler sollen ausgegraut aussehen,
   solange bei einem Starter noch keine Wertnote erfasst ist.

   WARUM NICHT EINFACH "disabled"?
     Frank wollte ausdruecklich BEIDES: den Zustand auf einen Blick erkennbar UND eine
     Meldung, wenn jemand trotzdem draufklickt ("Bitte zuerst eine Wertnote eingeben.").
     Ein echt deaktivierter Knopf loest aber gar kein Klick-Ereignis mehr aus - die
     Meldung koennte dann nie erscheinen. Deshalb sehen die Knoepfe hier nur deaktiviert
     AUS, bleiben technisch aber anklickbar; abgefangen wird der Klick in der jeweiligen
     Zaehl-Methode (ScoringCalculations.AreErrorCountersBlocked).

   Ganz bewusst KEIN "pointer-events: none" - genau das wuerde den Klick wieder
   verschlucken und die Meldung verhindern.
   ===================================================================================== */
.zaehler-gesperrt {
    opacity: 0.38; /* entspricht der ueblichen Deckkraft deaktivierter Schaltflaechen */
    cursor: not-allowed !important;
}

/* Im dunklen Design geht 0.38 optisch fast unter, deshalb etwas kraeftiger. */
.dark-mode .zaehler-gesperrt {
    opacity: 0.5;
}

/* ================================================================================
   Wertnoten-Felder mit KOEFFIZIENT (02.08.2026)

   Vorher zeigten die Masken §402b, §353c und §402c nach der Eingabe den bereits
   multiplizierten Wert (Eingabe 6,5 bei Koeffizient 2 → im Feld stand 13,0), die
   Kür-Variante von §402b dagegen die Rohnote. Dasselbe Feld sah also je nach
   Paragraf anders aus.

   Ab jetzt steht überall die eingetippte Note im Feld. Was der Koeffizient daraus
   macht, zeigt der kleine grüne Endwert rechts daneben — und der grüne Hintergrund
   des Feldes selbst (Variablen --score-input-coefficient-* ganz oben in dieser Datei).

   Warum der Endwert ABSOLUT positioniert wird (korrigiert am 02.08.2026):

   Erster Versuch war ein Flex-Kasten, der Feld und Endwert gemeinsam zentriert hat.
   Das Ergebnis war optisch falsch: Weil der Endwert Platz beansprucht, rutschte das
   Eingabefeld nach LINKS aus der Mitte und stand nicht mehr auf einer Linie mit den
   Feldern der Zeilen ohne Koeffizient. Genau das ist Frank aufgefallen.

   Jetzt bleibt der Endwert aus dem Textfluss heraus: Er hängt absolut an der Mitte der
   Zelle, um die halbe Feldbreite (35px) plus etwas Abstand nach rechts versetzt. Damit
   steht das Eingabefeld exakt so mittig wie überall sonst, und der Endwert daneben.
   Platz dafür ist da - die Richterspalte ist clamp(110px, 11vw, 150px) breit.

   Am Telefon (Spalte nur 74px) reicht es nicht: Dort wird der Endwert wieder in den
   Fluss geholt und steht unter dem Feld.
   ================================================================================ */
.score-feld-zelle {
    /* Bezugsrahmen für den absolut gesetzten Endwert. */
    position: relative;
    text-align: center;
}

.score-koeffizient-endwert {
    position: absolute;
    /* Mitte der Zelle + halbe Feldbreite (70px/2) + 6px Luft. */
    left: calc(50% + 41px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    color: var(--score-input-coefficient-fg, #15803d);
}

@media (max-width: 700px) {
    /* Am Telefon bekommt der Endwert eine eigene Zeile unter dem Feld — nebeneinander
       wäre bei 74px Spaltenbreite kein Platz mehr. Dafür zurück in den Textfluss. */
    .score-koeffizient-endwert {
        position: static;
        transform: none;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 0.7rem;
    }
}