:root {
    /* Radzen Dialog-Stack global anheben.
       Hintergrund-Overlays (Toolbar, AppBar, Drawer, etc.) liegen darunter. */
    --rz-dialog-mask-zindex: 3550;
    --rz-dialog-zindex: 3560;
    /* Radzen-Farbvariablen fuer das EquiDeck-Branding im Material-Dark-Theme. */
    --rz-primary: #ed2024;
    --rz-primary-light: #f05457;
    --rz-primary-lighter: #7a1e20;
    --rz-primary-dark: #b51619;
    --rz-secondary: #9ca3af;
    --rz-secondary-light: #c7cdd6;
    --rz-secondary-dark: #6b7280;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #ffffff;
    --rz-on-secondary: #0f0f10;
    --rz-on-secondary-light: #0f0f10;
    --rz-on-secondary-dark: #ffffff;
    --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;
    /* Ergaenzt am 05.08.2026 (Befund G): Diese fuenf Variablen wurden im Client benutzt, waren
       aber nirgends definiert - weder hier, noch im Radzen-Paket, noch im MudThemeProvider.
       Uebrig geblieben aus der MudBlazor-Zeit; der MudCompat-Shim bildet die Bauteile nach,
       aber nicht die vollstaendige Farbpalette. Ein var() ohne Ersatzwert auf eine unbekannte
       Variable macht die ganze Eigenschaft ungueltig, deshalb fielen die betroffenen Rahmen,
       Trennlinien und Hintergruende lautlos weg - ohne Meldung in der Konsole, mit gruenem Build.
       Die Werte sind bewusst aus den bereits vorhandenen abgeleitet, damit sich nichts Fremdes
       ins Erscheinungsbild schiebt.
       NICHT hier definiert: --mud-palette-divider. Das setzt der MudThemeProvider zur Laufzeit
       (Components\MudCompat\MudThemeProvider.razor, Zeile 46, mit 46 % statt 28 %) und ueber
       App.razor bzw. EmptyLayout auf jeder Seite. Eine Definition hier waere wirkungslos und
       wuerde beim naechsten Nachsehen nur in die Irre fuehren. */
    --mud-palette-lines-default: color-mix(in srgb, var(--mud-palette-text-secondary) 28%, transparent);
    --mud-palette-primary-text: #ffffff;
    --mud-palette-background-grey: #242424;
    --mud-palette-warning: #f59e0b;
    --mud-palette-info: #3b82f6;
    --mud-border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 28%, transparent);
    --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);
    --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;
    --score-grid-line: rgba(255, 255, 255, 0.36);
    --score-grid-line-vertical: transparent;
    --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;
}

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

* {
    box-sizing: border-box;
}

a,
a:visited {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#app {
    min-height: 100vh;
}

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

/* Menü am PC schon im vorgerenderten HTML offen (neu in 1.1.75, TSK-12 Lieferung 2; Entscheidung Frank).
   WARUM: Der Server kennt die Fensterbreite nicht und lieferte das Menü bisher immer zu; erst nach dem Start des
   Programms im Browser maß JavaScript die Breite und öffnete es - am PC sprang das Menü auf und der Inhalt rückte
   nach rechts. Jetzt entscheidet bis zu dieser Messung allein die Breite per Stilregel: Am PC (ab 960 px, dieselbe
   Grenze wie DrawerLayoutRegeln.DesktopBreakpointPx) steht das Menü offen und der Inhalt hat den Platz daneben,
   am Handy bleibt es wie bisher zu. Die Klasse site-menue-auto trägt das Layout (MainLayout.razor), solange das Programm
   noch nicht gemessen hat oder der Besucher das Menü noch nicht selbst bedient hat; danach gilt wie früher der
   Menüzustand (mud-compat-drawer-open) - er ergibt am PC genau dieselbe Darstellung, deshalb gibt es keinen Sprung. */
@media (min-width: 960px) {
    .site-menue-auto .mud-compat-drawer:not(.mud-compat-drawer-open) {
        display: flex !important;
        flex-direction: column;
    }

    .site-menue-auto .mud-compat-drawer ~ .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-group-table table {
    width: 100%;
    table-layout: fixed;
    min-width: 0 !important;
}

.starterlists-page .starterlists-group-table .mud-table-root {
    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;
}

/* Handy-Grenze 959.98px statt 960px: einheitlich mit dem Menü-Layout (05.09.2026) */
@media (max-width: 959.98px) {
    .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-group-table 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;
}

/* In der Navigation soll der Browser-Verlauf keine eigene Linkfarbe erzwingen.
   Sichtbar hervorgehoben wird nur der aktuell aktive Navigationspunkt. */
.mud-compat-navlink:visited,
.mud-nav-link:visited {
    color: inherit;
}

.mud-compat-navlink.active,
.mud-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 26%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.mud-compat-navlink.active .mud-compat-default,
.mud-nav-link.active .mud-compat-default {
    color: var(--mud-palette-primary);
}

.mud-compat-navlink[disabled],
.mud-compat-navlink.mud-compat-navlink-button[disabled] {
    opacity: 0.45;
    pointer-events: none;
}

/* Archiv-Menue: aufklappbare Jahresnavigation */
.archive-nav-content {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.archive-menu-toggle {
    font-weight: 600;
}

.archive-year-links {
    margin-left: 0.75rem;
    padding-left: 0.65rem;
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 40%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.archive-year-link {
    min-height: 32px !important;
    padding-top: 0.28rem !important;
    padding-bottom: 0.28rem !important;
    padding-left: 0.5rem !important;
    font-size: 0.84rem;
}

.archive-year-meta {
    padding: 0.15rem 0.7rem 0.35rem;
}

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

.mud-compat-slider-input {
    width: 100%;
    accent-color: var(--mud-palette-primary);
}

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

/* --- WIRKUNGSLOS, bewusst stillgelegt am 05.08.2026 (Entscheidung Frank) ---
 *
 * Die Regel sollte die eingestellte Symbolgroesse an das Symbol durchreichen. Sie hat aber nie
 * gegriffen: Radzen gibt dem Symbol die Klasse "rzi", nicht "rz-icon" - die Regel zielte also
 * auf einen Namen, den es hier gar nicht gibt.
 *
 * Folge im Ist-Zustand: Die Klassen mud-compat-icon-size-* darunter setzen die Groesse nur auf
 * dem umschliessenden <span>. Das Symbol selbst holt sich seine Groesse aus Radzens eigener
 * Variable --rz-icon-size (1.5rem = 24 px). Damit sind faktisch ALLE Symbole 24 px gross,
 * egal ob Small, Medium oder Large danebensteht.
 *
 * Warum nicht repariert: Der Einzeiler (".rzi" statt ".rz-icon") wuerde auf einen Schlag rund
 * 121 Symbole plus die daraus erzeugten in Chips und Knoepfen aendern. Vor allem aber wuerden
 * 36 Symbole in drei Admin-Uebersichten von 24 auf 56 bzw. 64 px aufblaehen - dort steht eine
 * feste Groesse direkt am Element, die heute wirkungslos ist und dann schlagartig greifen
 * wuerde. Frank hat sich am 05.08.2026 bewusst dagegen entschieden.
 *
 * Wer das spaeter angeht: zuerst die drei Admin-Uebersichten (Admin\Index.razor,
 * Admin\IndexEmbedded.razor, Admin\ScoreControl\Index.razor) auf die Klassen umstellen, dann
 * erst den Selektor korrigieren. Und die lokale Notloesung in Pages\Home.razor
 * (".home-event-livestream-button .rzi") kann danach entfallen.
 *
.mud-compat-icon .rz-icon {
    font-size: inherit !important;
    line-height: inherit;
}
 * --- Ende der stillgelegten Regel --- */

.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 {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-border-color) 90%, transparent);
    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 (vereinheitlicht 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);
}

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

@media (max-width: 900px) {
    .audio-config-columns {
        flex-direction: column;
        height: min(70vh, 640px);
    }
}

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

/* 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;
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
    backdrop-filter: blur(6px);
}

/* Sticky page headers for list/detail pages with breadcrumb + meta info */
.page-header-sticky {
    position: sticky;
    top: 56px;
    z-index: 1104;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent) !important;
    backdrop-filter: blur(6px);
    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: 430px) and (max-width: 599.98px) {
    /*
     * Grosse Handys sollen Kachel-Gridseiten schon vor dem regulären
     * 600px-Breakpoint zweispaltig zeigen. Die Klasse wird gezielt nur
     * auf Kachelansichten gesetzt, damit Formlayouts mobil nicht kippen.
     */
    .compact-mobile-grid > .mud-compat-item {
        grid-column: span 6 !important;
    }
}

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

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

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

/* Handy-Layout für Kopfzeile, Menü (Drawer) und Inhaltsfläche.
   Geändert am 05.09.2026 (Codex-Nacharbeit zu Ticket #3987): vorher max-width 960px. Bei genau
   960 px entscheiden JavaScript (equiDeckViewport.isDesktopLayout) und C# (DrawerLayoutRegeln)
   bereits auf Desktop — das Menü bleibt dann offen und ohne Vorhang. Mit 960px hier hätte der
   Inhalt bei genau dieser Breite trotzdem keinen seitlichen Platz bekommen und wäre vom Menü
   verdeckt worden. 959.98px schließt lückenlos an die Desktop-Grenze an. Wird per Test geprüft
   (EquiDeck.Tests/DrawerLayoutRegelnTests). */
@media (max-width: 959.98px) {
    .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;
    }
}

@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,
    /* Ergänzung 29.08.2026: Erfolgs-/Hinweis-Einblendungen (Radzen-Notification) beim
       Drucken ausblenden. Der Benachrichtigungs-Container liegt im Layout außerhalb des
       Seiteninhalts und würde sonst bei Strg+P mit auf dem Ausdruck landen — derselbe
       Fehler war in ScoreControl auf den Ergebnisausdrucken sichtbar. Global und mit
       !important, weil Radzen den Container per Inline-Stil positioniert. */
    .rz-notification,
    .rz-growl,
    .rz-growl-item,
    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;
    }

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