html, body {
    font-family: 'Roboto', sans-serif;
}

.rl-nav-unlicensed {
    opacity: 0.5;
}

/* Klickbare Zeile in einem Auswahl-Suchpanel (Kalendereintrag-, Mitglied-, Waffe-Dialog). */
.rl-listitem { cursor: pointer; border-bottom: 1px solid var(--mud-palette-lines-default); }
.rl-listitem:hover { background: var(--mud-palette-action-default-hover); }
.rl-listitem-aktiv { background: var(--mud-palette-primary-hover); }

/* Feature 2026-10-31: Buchungsseite (SchiessstandDetail.razor) - Tagesleiste, Bahnkarten und Slot-Kacheln.
   Nur MudBlazor-Palettenvariablen, damit Hell/Dunkel und der Kontrast-Modus ohne Sonderfälle funktionieren.
   Slot-Art ist nie allein über die Farbe erkennbar: jede Kachel trägt zusätzlich Icon und Text (Öffentlich / Intern / Self-Check-in). */
.rl-buchung-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rl-buchung-hinweis {
    display: flex; gap: 8px; align-items: flex-start; flex: 1 1 380px;
    padding: 10px 14px; border-radius: 12px; font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}
.rl-buchung-hinweis .mud-icon-root { margin-top: 2px; flex: none; }

.rl-buchung { border-radius: 20px; }

.rl-tagesleiste { display: flex; align-items: center; gap: 4px; margin: 0 -4px; }
.rl-tagesleiste__tage {
    display: flex; gap: 8px; flex: 1; overflow-x: auto; padding: 4px;
    scroll-snap-type: x proximity; scrollbar-width: thin;
}
.rl-tag {
    flex: none; width: 62px; padding: 8px 0; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; line-height: 1.15; cursor: pointer;
    font: inherit; color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.rl-tag:hover { border-color: var(--mud-palette-primary); transform: translateY(-2px); }
.rl-tag__wochentag, .rl-tag__monat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mud-palette-text-secondary); }
.rl-tag__nummer { font-size: 1.35rem; font-weight: 600; }
.rl-tag--aktiv {
    color: var(--mud-palette-primary-text); background: var(--mud-palette-primary); border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}
.rl-tag--aktiv .rl-tag__wochentag, .rl-tag--aktiv .rl-tag__monat { color: inherit; opacity: 0.85; }

.rl-slotlegende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.rl-slotlegende__eintrag { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.rl-slotlegende__eintrag--oeffentlich .mud-icon-root { color: var(--mud-palette-primary); }
.rl-slotlegende__eintrag--intern .mud-icon-root { color: var(--mud-palette-warning); }
.rl-slotlegende__eintrag--selfcheckin .mud-icon-root { color: var(--mud-palette-info); }

.rl-bahnkarte {
    padding: 14px 16px 16px; border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 2.5%, var(--mud-palette-surface));
}
.rl-bahnkarte__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rl-bahnkarte__titel { font-size: 1.05rem; font-weight: 500; }
.rl-bahnkarte__frei {
    margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 500;
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}
.rl-bahnkarte__frei--leer { color: var(--mud-palette-text-secondary); background: var(--mud-palette-action-disabled-background); }

.rl-slotraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }

.rl-slot {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 10px 12px 10px 14px; text-align: left; font: inherit; cursor: pointer;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
/* farbiger Streifen links = Slot-Art, zusätzlich zu Icon und Text */
.rl-slot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rl-slot-farbe, transparent); }
.rl-slot--oeffentlich { --rl-slot-farbe: var(--mud-palette-primary); }
.rl-slot--intern {
    --rl-slot-farbe: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, var(--mud-palette-surface));
}
.rl-slot:not(:disabled):hover {
    transform: translateY(-2px); border-color: var(--rl-slot-farbe);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}
.rl-slot:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); }
.rl-slot__zeit { font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.rl-slot__bis { font-weight: 400; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.rl-slot__meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.rl-slot__art { display: inline-flex; align-items: center; gap: 2px; }
.rl-slot__art .mud-icon-root { font-size: 0.95rem; }
.rl-slot--oeffentlich .rl-slot__art:first-child .mud-icon-root { color: var(--mud-palette-primary); }
.rl-slot--intern .rl-slot__art:first-child .mud-icon-root { color: var(--mud-palette-warning); }
.rl-slot__art--selfcheckin .mud-icon-root { color: var(--mud-palette-info); }
.rl-slot__frei { font-size: 0.7rem; font-weight: 500; color: var(--mud-palette-success); }
.rl-slot--gesperrt { cursor: not-allowed; background: var(--mud-palette-action-disabled-background); }
.rl-slot--gesperrt .rl-slot__zeit { color: var(--mud-palette-text-disabled); text-decoration: line-through; }
.rl-slot--gesperrt .rl-slot__bis, .rl-slot--gesperrt .rl-slot__meta { color: var(--mud-palette-text-disabled); }

/* Nutzer-Auftrag 2026-08-30: MudTooltip ist hover-basiert - auf Touch-Geräten (kein echtes Hover,
   z.B. Smartphone im Kalender: BuchungsKachel) bleibt der Tooltip nach einem Tap oft dauerhaft
   sichtbar hängen, weil nie ein "mouseleave" folgt, das ihn wieder verschwinden lässt. @media
   (hover: none) trifft zuverlässig genau Geräte ohne Maus/Hover-fähigen Zeiger - Tooltips sind
   dort ohnehin kein sinnvolles UI-Muster, deshalb komplett ausgeblendet statt nur das
   Verschwinden zu reparieren. .mud-tooltip ist die eigentliche Sprechblase (nicht .mud-tooltip-root,
   das den Trigger/die Kachel selbst umschließt und weiterhin sichtbar/klickbar bleiben muss). */
@media (hover: none) {
    .mud-tooltip {
        display: none !important;
    }
}

/* Kalender-Tooltips (BuchungsKachel.razor, KassiererSlotTooltip.razor): weiße Sprechblase mit dunkler Schrift und Schatten statt
   des grauen MudBlazor-Standards. Die Markierung .rl-kachel-tt liegt im Tooltip-Inhalt; :has() trifft damit genau
   die Sprechblase dieser Tooltips, andere MudTooltips der App bleiben unverändert. */
.mud-tooltip.mud-tooltip-default:has(.rl-kachel-tt) {
    background-color: #ffffff;
    color: #1f2933;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ToDos_0719 #32 führte einen immer aktiven, dicken Fokusring ein (kein Modus-Schalter, da als
   grundlegende Bedienbarkeit gedacht). ToDos_0726, 4. Versuch: User will den dicken Ring aber
   NICHT außerhalb des Kontrast-Modus sehen - das ist eine bewusste Abkehr vom ursprünglichen
   "immer aktiv"-Ansatz. Der Ring erscheint jetzt nur noch innerhalb .rl-high-contrast; außerhalb
   davon greift wieder der normale (dezente) Fokus, den die einzelnen MudBlazor-Komponenten schon
   selbst mitbringen (z.B. Outlined-Inputs färben ihre Umrandung beim Fokus in --mud-palette-primary
   ein, siehe MudBlazor.min.css .mud-input-outlined-border). Rundung (var(--mud-default-borderradius))
   und box-shadow statt outline (Safari/WebKit rundet outline+border-radius nicht zuverlässig ab)
   aus den vorherigen Versuchen bleiben für den Kontrast-Modus-Ring erhalten. */
.rl-high-contrast :focus-visible {
    outline: none !important;
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 0 0 4px var(--mud-palette-primary) !important;
}

/* ToDos_0719 #32: High-Contrast-Modus (Toggle in der AppBar) - erhöht den Kontrast, indem
   gedämpfte Text-/Rahmenfarben auf die volle Vordergrundfarbe angehoben werden. Nutzt bewusst
   MudBlazors eigene, Light/Dark-abhängige CSS-Variablen statt fixer Farbwerte, damit es mit
   beiden Themes funktioniert. */
.rl-high-contrast {
    --mud-palette-text-secondary: var(--mud-palette-text-primary);
    --mud-palette-lines-default: var(--mud-palette-text-primary);
    --mud-palette-lines-inputs: var(--mud-palette-text-primary);
    --mud-palette-action-disabled: var(--mud-palette-text-secondary);
    --mud-palette-gray-default: var(--mud-palette-text-primary);
}

/* RangeLib-Plan-0723 M7: Kopfzeilen (Titel + Favoriten-Stern/Buttons) nutzen durchgängig
   "d-flex justify-space-between align-center" ohne Wrap - bei langen Schießstand-Namen auf
   schmalen Bildschirmen überlappen Titel/Buttons statt sauber umzubrechen (gleiches Muster wie
   in SiFaAssist.Web bereits gefixt). */
@media (max-width: 600px) {
    .d-flex.justify-space-between.align-center {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* MudBlazor setzt .mud-card-actions auf "display:flex" ohne flex-wrap (Default: nowrap) und
   Buttons schrumpfen als Flex-Items nicht unter ihre Content-Breite - in der schmalen
   Schiessstandkachel (SchiessstandKarte.razor, bis zu 3 Buttons: "Reservieren",
   "Wettkämpfe ansehen", "Preisliste") lief die Buttonreihe deshalb über den Kachelrand hinaus,
   wodurch der "Preisliste"-Link abgeschnitten wirkte. */
.mud-card-actions {
    flex-wrap: wrap;
}

/* Gleiches Muster wie .mud-card-actions oben, für Dialoge statt Karten: MudBlazor setzt
   .mud-dialog-actions ebenfalls auf "display:flex" ohne flex-wrap. Meldung 2026-08-03:
   BuchungVerwaltenDialog.razor kann je nach Buchungsstatus/Berechtigung bis zu 6 Buttons zeigen
   (Schließen, Bearbeiten, Verschieben, Bestätigen/Ablehnen/Stornieren/Reaktivieren, Rechnung) -
   auf dem Smartphone lief die Buttonreihe über den Dialogrand hinaus, Button-Texte wirkten
   abgeschnitten. Betrifft app-weit jeden Dialog mit mehreren Aktions-Buttons, siehe
   [[Verhaltensregeln]] Regel 16. */
.mud-dialog-actions {
    flex-wrap: wrap;
}

/* MudBlazors .mud-table-toolbar (Suche/Filter über MudTable) ist ein Flex-Container mit fester
   Höhe und ohne flex-wrap - auf schmalen Bildschirmen quetschten sich Suchfeld, Zeitraum-/
   Status-Filter und Export-Button in eine Zeile statt umzubrechen (z.B. BetreiberBuchungen.razor).
   flex-wrap sorgt dafür, dass Elemente, die nicht mehr nebeneinander passen (allen voran das
   Suchfeld dank Mindestbreite über min-width:auto), automatisch in die nächste Zeile rutschen -
   reagiert auf die tatsächliche Breite des Containers, nicht auf eine feste Bildschirmgrenze. */
.mud-table-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px;
}

/* Allgemeines Stacking-Muster für Filter-/Button-Zeilen über Tabellen und in Seitenköpfen:
   MudSelect(s) + mehrere textbeschriftete Buttons in einer Reihe passten auf schmalen
   Bildschirmen oft noch knapp (oder gar nicht mehr) nebeneinander, wodurch Buttons über den
   Rand hinausliefen und unerreichbar wurden (realer Vorfall: "Neuer Termin" in
   BetreiberWettkaempfe.razor war dadurch unsichtbar). Zwei Varianten je nach Einsatzort:
   - .rangelib-toolbar-stack: auf den Flex-Container gesetzt, ALLE Kind-Elemente bekommen je
     eine volle Zeile ("untereinander" statt nur "bei Bedarf umbrechen").
   - .rangelib-toolbar-stack-item: direkt auf ein einzelnes Kind-Element gesetzt, wenn nur
     bestimmte Geschwister (z.B. innerhalb eines MudTable-ToolBarContent, wo Suchfeld/Spacer/
     Export-Button NICHT mitgestapelt werden sollen) betroffen sein sollen.
   MudSelect verschachtelt intern noch ein eigenes ".mud-select"-Div - ein direkt darauf
   gesetzter Marker landet nur am inneren Div, der tatsächliche Flex-Item-Nachbar im
   .mud-table-toolbar ist aber das äußere ".mud-select". Der :has()-Selektor greift deshalb
   zusätzlich eine Ebene höher (nur für den .mud-table-toolbar-Sonderfall nötig). */
@media (max-width: 600px) {
    .rangelib-toolbar-stack {
        flex-wrap: wrap;
    }
    .rangelib-toolbar-stack > * {
        flex: 1 1 100%;
    }
    .rangelib-toolbar-stack-item {
        flex: 1 1 100%;
    }
    .mud-table-toolbar > .mud-select:has(> .rangelib-toolbar-stack-item) {
        flex: 1 1 100%;
    }
}

/* Meldung 2026-08-03: die Auswahlliste beim "Farbe übernehmen"/"Öffnungszeiten übernehmen"-Menü
   (BetreiberBahnen.razor) war auf dem Smartphone abgeschnitten. Live gemessen (innerWidth 400px):
   MudBlazors Popover-Positionierung setzt "left" als festen Pixelwert relativ zur Anker-Schaltfläche
   (hier z.B. left:40px) UND die Box selbst wird oft breiter als nötig (hier 392px) - MudBlazors
   eigene "overflow-flip"-Logik wählt nur die Öffnungsrichtung, verhindert aber nicht, dass
   left + width über die Bildschirmbreite hinausragt (hier: 432px auf 400px verfügbar). Ein reines
   max-width reicht daher NICHT (die Box bleibt am ursprünglichen, zu weit rechts liegenden "left"
   hängen). Stattdessen Breite über beide Ränder definieren (left/right statt left/width) - das
   funktioniert unabhängig von der Anker-Position und deckt jeden Popover ab (MudMenu, MudSelect,
   MudAutocomplete, ...), nicht nur den hier gemeldeten Einzelfall. Live verifiziert: vorher
   left:40/right:432 (32px abgeschnitten) bei innerWidth 400, nachher left:8/right:400 (0px
   abgeschnitten). Grundsatz seit dieser Meldung, siehe [[Verhaltensregeln]]: jede Ansicht muss auch
   auf einem Smartphone ohne abgeschnittene Inhalte bedienbar sein. */
@media (max-width: 600px) {
    .mud-popover {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }
    .mud-popover .mud-menu-item-text,
    .mud-popover .mud-list-item-text {
        white-space: normal;
        word-break: break-word;
    }
}

/* Meldung 2026-08-10: Ringwert-Eingabe beim Wettkampf-Ergebnis-Eintragen (Portal-QR-Seite und
   Betreiber-Dialog, WettkampfErgebnisEintragen.razor/WettkampfErgebnisDialog.razor) war auf dem
   Smartphone unhandlig - 2 Felder pro Zeile mit winzigen nativen Spinnern. Ab 600px eigene Zeile
   je Ringwert mit großen roten/grünen +/- Buttons statt Grid; Desktop-Grid bleibt unverändert. */
.rl-ringwert-mobile {
    display: none;
}
@media (max-width: 600px) {
    .rl-ringwert-desktop {
        display: none;
    }
    .rl-ringwert-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .rl-ringwert-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .rl-ringwert-row .rl-ringwert-field {
        flex: 1 1 auto;
    }
}

/* Todo 17: Slots als Zellen mit Rand (wie BungtBlazors .calendar-cell). Ursprünglich inline in
   BetreiberKalender.razor, 2026-08-08 hierher verschoben, damit BetreiberWettkaempfe.razor
   (Wettkampfplaner-Belegungsraster) dieselbe Optik ohne Duplikat wiederverwenden kann. */
.rangelib-kalender th, .rangelib-kalender td {
    border: 1px solid var(--mud-palette-lines-default);
}
/* RangeLib-Plan-0723 M18: Kopfzeile (Uhrzeiten) und erste Spalte (Bahnnamen) unabhängig
   voneinander fixierbar (wie Excel-Fensterfixierung) - beide per position:sticky relativ
   zum umschließenden scrollbaren div, mit explizitem Hintergrund gegen durchscheinenden
   Inhalt beim Scrollen. */
.rangelib-kalender thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}
.rangelib-kalender tbody tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}
.rangelib-kalender thead th:first-child {
    left: 0;
    z-index: 3;
}
/* Schmale Trennspalte, wo alle Bahnen geschlossen sind (z.B. Mittagspause): hält Vormittag und
   Nachmittag optisch auseinander, statt dass die Spalten ohne Zeichen aneinanderrücken. Steht nach
   den thead-th-Regeln, damit der schraffierte Hintergrund auch in der fixierten Kopfzeile gilt. */
.rangelib-kalender th.kalender-luecke,
.rangelib-kalender td.kalender-luecke {
    width: 14px;
    min-width: 14px;
    max-width: 14px;
    padding: 0;
    background-color: var(--mud-palette-surface);
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 3px,
        var(--mud-palette-lines-default) 3px,
        var(--mud-palette-lines-default) 4px);
    border-left: 2px solid var(--mud-palette-text-secondary);
    border-right: 2px solid var(--mud-palette-text-secondary);
}

/* WYSIWYG-Editor (Quill, HtmlEditor.razor): an Theme/Dunkelmodus anpassen, Mindesthöhe über --rl-editor-hoehe. */
.rl-html-editor .ql-toolbar.ql-snow {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    background: var(--mud-palette-background-gray);
}
.rl-html-editor .ql-container.ql-snow {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
    font-family: inherit;
    font-size: 1rem;
}
.rl-html-editor .ql-editor {
    min-height: var(--rl-editor-hoehe, 220px);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}
.rl-html-editor .ql-editor.ql-blank::before { color: var(--mud-palette-text-secondary); font-style: normal; }
.rl-html-editor .ql-snow .ql-stroke { stroke: var(--mud-palette-text-primary); }
.rl-html-editor .ql-snow .ql-fill { fill: var(--mud-palette-text-primary); }
.rl-html-editor .ql-snow .ql-picker { color: var(--mud-palette-text-primary); }
.rl-html-editor .ql-snow .ql-picker-options { background: var(--mud-palette-surface); }
.rl-html-editor .ql-snow.ql-toolbar button:hover .ql-stroke,
.rl-html-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--mud-palette-primary); }

/* Zeilen im Wettkampf-Dialog für Serien und Rüstzeiten (WettkampfDialog.razor): Name flexibel, Zahlenfelder fest, Löschen-Button rechts. */
.rl-zeile {
    display: grid;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.rl-zeile-serie { grid-template-columns: minmax(0, 1fr) 84px 84px 108px 40px; }
.rl-zeile-ruest { grid-template-columns: minmax(0, 1fr) 84px 108px 40px; }
.rl-zeile .mud-input-control { margin-top: 0; }
@media (max-width: 640px) {
    .rl-zeile-serie, .rl-zeile-ruest { grid-template-columns: 1fr 1fr 1fr 40px; padding-bottom: 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
    .rl-zeile .rl-zeile-name { grid-column: 1 / -1; }
}

/* Kompakte Karten (Serien/Rüstzeiten in WettkampfDetail.razor): eine Zeile je Eintrag, mehrere Spalten je nach Breite. */
.rl-kompaktliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rl-kompaktkarte {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 6px 10px; min-height: 48px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}
.rl-kompaktkarte-text { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.rl-kompaktkarte-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ablauf-Stapel (WettkampfDetail.razor): Einträge untereinander, Auf-/Ab-Pfeile am linken Rand. */
.rl-kompaktstapel { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.rl-pfeile { display: flex; flex-direction: column; margin: -4px 0 -4px -4px; }
.rl-pfeile .mud-icon-button { padding: 0; height: 20px; width: 28px; }

/* Schützen-Startseite (Feature 2026-10-16) */
.rl-willkommen { padding: 16px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--mud-palette-primary-hover, rgba(0,0,0,.04)), transparent); border: 1px solid var(--mud-palette-lines-default); }
.rl-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: 100%; }

/* Rechtematrix: Legende für durch Rollen gewährte Rechte (Feature 2026-10-16) */
.rl-rolle-hinweis { font-size: .8rem; padding: 2px 8px; border-radius: 4px; background: rgba(var(--mud-palette-info-rgb), 0.18); }

/* Support-Tickets: gerenderter Text einer Nachricht (Feature 2026-10-17) */
.rl-ticket-text p { margin: 0 0 .5rem 0; }
.rl-ticket-text p:last-child { margin-bottom: 0; }
.rl-ticket-text blockquote { margin: .25rem 0 .5rem 0; padding-left: .75rem; border-left: 3px solid var(--mud-palette-lines-default); }
.rl-ticket-text ul, .rl-ticket-text ol { margin: .25rem 0 .5rem 1.25rem; padding: 0; }
.rl-ticket-text a { color: var(--mud-palette-primary); }
.rl-ticket-zeile-aktiv > td { background: rgba(var(--mud-palette-primary-rgb), 0.14) !important; }

/* Dateiauswahl (Shared/DateiAuswahl.razor): das echte, unsichtbare Dateifeld liegt über der Schaltfläche, damit der Klick den Dateidialog
   direkt öffnet (Safari verlangt das). Die Schaltfläche darunter reagiert nicht selbst auf Klicks. */
.rl-datei-huelle { position: relative; display: inline-block; vertical-align: middle; }
.rl-datei-inhalt { display: inline-block; }
.rl-datei-inhalt * { pointer-events: none; }
.rl-datei-ueberlagerung { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.rl-datei-ueberlagerung::file-selector-button { cursor: pointer; }
.rl-datei-huelle:hover .mud-button-root:not(.mud-disabled) { filter: brightness(0.95); }
.rl-datei-huelle:focus-within { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: var(--mud-default-borderradius); }
.rl-datei-aus { opacity: .6; }

/* ── Einsatzplanung (Feature 2026-10-22) ─────────────────────────────────────────────────────────────── */
.ep-chip { display:flex; align-items:center; gap:4px; min-height:20px; padding:2px 7px; border-radius:6px; color:#fff; font-size:0.72rem; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box; width:100%; cursor:pointer; user-select:none; border:0;
    box-shadow:0 1px 2px rgba(0,0,0,0.24), 0 2px 6px rgba(0,0,0,0.14); transition:box-shadow .15s ease, transform .15s ease; }
.ep-chip:hover { box-shadow:0 2px 4px rgba(0,0,0,0.28), 0 6px 14px rgba(0,0,0,0.20); transform:translateY(-1px); }
.ep-chip:focus-visible { outline:2px solid var(--mud-palette-primary); outline-offset:1px; }
.ep-chip-text { overflow:hidden; text-overflow:ellipsis; }
.ep-chip { position:relative; }
/* Geplant = gestrichelter Rand im Inneren der Karte. Als Pseudo-Element statt outline, weil outline mit negativem Abstand, Rundung und overflow:hidden
   nicht in jedem Browser (Safari) sichtbar ist. */
.ep-geplant::after { content:""; position:absolute; inset:2px; border:2px dashed rgba(255,255,255,0.9); border-radius:4px; pointer-events:none; }
.ep-chip-voll { flex-direction:column; align-items:flex-start; justify-content:flex-start; white-space:normal; gap:0; padding:2px 6px; }
body.ep-dragging .ep-chip { pointer-events:none; }
.ep-chip[draggable="true"] { cursor:grab; }

.ep-monat { display:grid; grid-template-columns:44px repeat(7, minmax(0, 1fr)); border-top:1px solid var(--mud-palette-lines-default); border-left:1px solid var(--mud-palette-lines-default); border-radius:10px; overflow:hidden; background:var(--mud-palette-surface); box-shadow:var(--mud-elevation-2); }
.ep-kopf, .ep-kw { padding:4px 6px; font-size:0.78rem; font-weight:600; text-align:center; border-right:1px solid var(--mud-palette-lines-default); border-bottom:1px solid var(--mud-palette-lines-default); background:var(--mud-palette-background-gray); }
.ep-kw { font-weight:400; opacity:0.75; display:flex; align-items:flex-start; justify-content:center; padding-top:6px; }
.ep-tag { min-height:112px; padding:2px 3px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--mud-palette-lines-default); border-bottom:1px solid var(--mud-palette-lines-default); min-width:0; }
.ep-tag-fremd { background:var(--mud-palette-background-gray); opacity:0.7; }
.ep-tag-we { background:rgba(128,128,128,0.07); }
.ep-tag-heute { box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 75%, transparent); background:color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.ep-tag-nr { font-size:0.78rem; text-align:right; padding:0 3px; cursor:pointer; border-radius:3px; align-self:flex-end; }
.ep-tag-nr:hover { background:var(--mud-palette-action-default-hover); }
.ep-tag-heute .ep-tag-nr { font-weight:700; color:var(--mud-palette-primary); }
.ep-mehr { font-size:0.7rem; padding:0 6px; cursor:pointer; color:var(--mud-palette-primary); }

.ep-raster { display:grid; border-top:1px solid var(--mud-palette-lines-default); border-left:1px solid var(--mud-palette-lines-default); overflow-x:auto; border-radius:10px; background:var(--mud-palette-surface); box-shadow:var(--mud-elevation-2); }
.ep-raster-kopf { padding:4px 6px; text-align:center; font-size:0.82rem; font-weight:600; background:var(--mud-palette-background-gray); border-right:1px solid var(--mud-palette-lines-default); border-bottom:1px solid var(--mud-palette-lines-default); cursor:pointer; }
.ep-raster-kopf-heute { color:var(--mud-palette-primary); box-shadow:inset 0 -3px 0 var(--mud-palette-primary); }
.ep-ganztag { padding:2px 3px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--mud-palette-lines-default); border-bottom:1px solid var(--mud-palette-lines-default); min-height:26px; min-width:0; }
.ep-zeitspalte { position:relative; border-right:1px solid var(--mud-palette-lines-default); }
.ep-stunde { position:absolute; right:4px; font-size:0.68rem; opacity:0.7; transform:translateY(-50%); }
.ep-spalte { position:relative; border-right:1px solid var(--mud-palette-lines-default); min-width:0; }
.ep-zelle { height:24px; box-sizing:border-box; border-top:1px dotted var(--mud-palette-lines-default); }
.ep-zelle-voll { border-top:1px solid var(--mud-palette-lines-default); }
.ep-zelle:hover { background:var(--mud-palette-action-default-hover); }
.ep-spalte-heute { background:rgba(25,118,210,0.05); }
.ep-jetzt { position:absolute; left:0; right:0; height:2px; background:#d32f2f; z-index:3; pointer-events:none; }
.ep-jetzt::before { content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#d32f2f; }

.ep-jahr { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; }
.ep-mini { border-radius:10px; padding:10px; background:var(--mud-palette-surface); box-shadow:var(--mud-elevation-2); }
.ep-mini-titel { font-weight:600; font-size:0.9rem; margin-bottom:4px; cursor:pointer; }
.ep-mini-gitter { display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; text-align:center; font-size:0.72rem; }
.ep-mini-wt { opacity:0.65; font-size:0.65rem; }
.ep-mini-tag { position:relative; padding:3px 0 7px; border-radius:3px; cursor:pointer; }
.ep-mini-tag:hover { background:var(--mud-palette-action-default-hover); }
.ep-mini-heute { box-shadow:inset 0 0 0 2px var(--mud-palette-primary); font-weight:700; }
.ep-mini-punkte { position:absolute; left:0; right:0; bottom:1px; display:flex; justify-content:center; gap:2px; }
.ep-mini-punkt { width:5px; height:5px; border-radius:50%; }

.ep-ma-wrap { overflow-x:auto; border-radius:10px; background:var(--mud-palette-surface); box-shadow:var(--mud-elevation-2); }
.ep-ma { border-collapse:collapse; font-size:0.7rem; }
.ep-ma th, .ep-ma td { border:1px solid var(--mud-palette-lines-default); text-align:center; padding:0; }
.ep-ma th.ep-ma-monat { text-align:left; padding:0 8px; font-weight:600; font-size:0.8rem; min-width:96px; position:sticky; left:0; background:var(--mud-palette-surface); z-index:1; }
.ep-ma th.ep-ma-wt { font-weight:400; opacity:0.7; min-width:26px; height:20px; }
.ep-ma td { width:26px; min-width:26px; height:26px; cursor:pointer; position:relative; }
.ep-ma td.ep-ma-leer { background:var(--mud-palette-background-gray); border-color:transparent; cursor:default; opacity:0.5; }
.ep-ma td.ep-ma-we { background:rgba(128,128,128,0.12); }
.ep-ma td.ep-ma-heute { box-shadow:inset 0 0 0 2px var(--mud-palette-primary); }
.ep-ma-nr { position:absolute; top:1px; left:2px; font-size:0.58rem; opacity:0.85; }
.ep-ma-kuerzel { font-weight:700; font-size:0.72rem; }
.ep-ma td.ep-ma-belegt { color:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15); }
.ep-legende { display:flex; flex-wrap:wrap; gap:12px; font-size:0.78rem; margin-top:10px; }
.ep-legende span::before { content:""; display:inline-block; width:12px; height:12px; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,0.25); margin-right:5px; vertical-align:-2px; background:var(--ep-farbe); }

/* ── Kalendervorschau im Buchungsdialog (Feature 2026-10-23) ───────────────────────────────────────── */
.bv-scroll { max-height:300px; overflow:auto; border:1px solid var(--mud-palette-lines-default); border-radius:4px; }
.bv-tabelle { border-collapse:separate; border-spacing:0; width:100%; font-size:0.78rem; }
.bv-tabelle th, .bv-tabelle td { border-right:1px solid var(--mud-palette-lines-default); border-bottom:1px solid var(--mud-palette-lines-default); padding:3px 5px; vertical-align:top; text-align:left; }
.bv-tabelle thead th { position:sticky; top:0; background:var(--mud-palette-background-gray); z-index:2; font-weight:600; text-align:center; white-space:nowrap; }
.bv-tabelle th.bv-bahn { position:sticky; left:0; background:var(--mud-palette-background-gray); z-index:1; white-space:nowrap; font-weight:600; min-width:88px; }
.bv-tabelle thead th.bv-bahn { z-index:3; }
.bv-distanz { font-weight:400; opacity:0.7; font-size:0.72rem; line-height:1.1; }
.bv-kopf-ziel { color:var(--mud-palette-primary); box-shadow:inset 0 -3px 0 var(--mud-palette-primary); }
.bv-ziel-text { display:block; font-size:0.62rem; font-weight:400; }
.bv-zeile-ziel th.bv-bahn { box-shadow:inset 3px 0 0 var(--mud-palette-primary); }
.bv-zelle { min-width:96px; }
.bv-zelle-zu { background:repeating-linear-gradient(135deg, transparent 0 5px, rgba(128,128,128,0.15) 5px 10px); }
.bv-zelle-ziel { box-shadow:inset 0 0 0 2px var(--mud-palette-primary); background:rgba(25,118,210,0.08); }
.bv-frei, .bv-zu { opacity:0.55; font-size:0.72rem; }
.bv-chip { border-radius:3px; padding:1px 5px; margin-bottom:2px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; }
.bv-chip-bestaetigt { background:#2e7d32; }
.bv-chip-angefragt { background:#e65100; border:1px dashed rgba(255,255,255,0.85); }
.bv-chip-ziel { background:#1565c0; box-shadow:0 0 0 2px rgba(21,101,192,0.35); font-weight:600; }
/* Belegungsvorschau der Wettkampf-Bahnreservierung (Feature 2026-10-29) */
.bv-tabelle th.bv-bahn-wahl { min-width:210px; padding-top:0; padding-bottom:0; }
.bv-bahn-check { margin:0; white-space:nowrap; }
.bv-scroll.bv-scroll-hoch { max-height:min(60vh, 560px); }
.bv-chip-wk { background:#7b1fa2; }
.bv-chip-wk.bv-chip-frei { background:transparent; color:var(--mud-palette-text-secondary); border:1px dashed var(--mud-palette-lines-default); text-decoration:line-through; }
.bv-chip-konflikt { background:var(--mud-palette-warning); }
.bv-zelle-konflikt { background:rgba(255,152,0,0.16); box-shadow:inset 0 0 0 2px var(--mud-palette-warning); }
.bv-legende { font-size:0.74rem; }
.bv-legende .bv-chip { display:inline-block; width:22px; margin:0 4px -2px 0; }

/* ── Feiertage (Feature 2026-10-23) ─────────────────────────────────────────────────────────────────── */
.ep-feiertag { font-size:0.68rem; font-weight:600; color:color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-feiertag-kopf { font-size:0.62rem; font-weight:600; }
.ep-tag-kopf { display:flex; align-items:flex-start; gap:4px; min-width:0; }
.ep-tag-kopf .ep-feiertag { flex:1; min-width:0; padding-top:2px; }
.ep-tag-feiertag { background:color-mix(in srgb, var(--mud-palette-warning) 10%, transparent); }
.ep-spalte-feiertag { background:color-mix(in srgb, var(--mud-palette-warning) 9%, transparent); }
.ep-mini-feiertag { color:color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary)); font-weight:700; background:color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.ep-ma td.ep-ma-feiertag { background:color-mix(in srgb, var(--mud-palette-warning) 24%, transparent); }
.ep-tag-kopf .ep-tag-nr { align-self:flex-start; margin-left:auto; }
.ep-tag-kopf .ep-feiertag { white-space:normal; line-height:1.15; }


/* ── Kontextmenü für Tabellenzeilen (Feature 2026-10-29, siehe app.js rlZeilenMenue) ──────────────────────────────────────────────────── */
.rl-ktx { position:fixed; z-index:3000; min-width:210px; max-width:340px; padding:6px 0; border-radius:10px; background:var(--mud-palette-surface); color:var(--mud-palette-text-primary);
          box-shadow:var(--mud-elevation-8); border:1px solid var(--mud-palette-lines-default); font-size:0.9rem; }
.rl-ktx-eintrag { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; padding:7px 16px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-ktx-eintrag:hover:not([disabled]), .rl-ktx-eintrag:focus-visible { background:var(--mud-palette-action-default-hover); }
.rl-ktx-eintrag[disabled] { opacity:.45; cursor:default; }
.rl-ktx-icon { display:inline-flex; width:20px; height:20px; flex:none; opacity:.8; }
.rl-ktx-icon svg { width:20px; height:20px; fill:currentColor; }
.rl-ktx-gefahr { color:var(--mud-palette-error); }
.rl-ktx-trenner { height:1px; margin:5px 0; background:var(--mud-palette-lines-default); }
tr.rl-ktx-zeile > td { background:var(--mud-palette-action-default-hover); }

/* Dialog, der nur als Träger für eine Startaktion aus dem Zeilenmenü geöffnet wird (z. B. "Stornieren"): unsichtbar, der eigentliche Unterdialog erscheint direkt */
.mud-dialog.rl-startaktion { display:none !important; }
.rl-overlay-leer { background:transparent !important; }


/* ── Hilfe und FAQ (Feature 2026-10-29) ───────────────────────────────────────────────────────────────────────────────────────────────── */
.rl-hilfe-text { line-height:1.6; }
.rl-hilfe-text h2 { font-size:1.25rem; margin:1.4em 0 .4em; }
.rl-hilfe-text h3 { font-size:1.05rem; margin:1.1em 0 .3em; }
.rl-hilfe-text p { margin:.5em 0; }
.rl-hilfe-text ul, .rl-hilfe-text ol { margin:.4em 0 .6em 1.4em; padding:0; }
.rl-hilfe-text li { margin:.2em 0; }
.rl-hilfe-text a { color:var(--mud-palette-primary); }
.rl-hilfe-text blockquote { margin:.8em 0; padding:.5em .9em; border-left:4px solid var(--mud-palette-info); background:color-mix(in srgb, var(--mud-palette-info) 10%, transparent); border-radius:0 6px 6px 0; }
.rl-hilfe-text blockquote p { margin:.2em 0; }
.rl-hilfe-text table { border-collapse:collapse; margin:.6em 0; font-size:.92rem; }
.rl-hilfe-text th, .rl-hilfe-text td { border:1px solid var(--mud-palette-lines-default); padding:4px 10px; text-align:left; }
.rl-hilfe-text code { background:var(--mud-palette-background-gray); padding:1px 5px; border-radius:4px; font-size:.9em; }
.rl-hilfe-text kbd { border:1px solid var(--mud-palette-lines-default); border-bottom-width:2px; border-radius:4px; padding:0 5px; font-size:.85em; }

/* Feature 2026-10-29: Finanzreport - Kurzfazit-Karte, Diagramme (SVG) und Legendenpunkt */
.rl-fazit { background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); }
.rl-finanz-chart { overflow-x: auto; }
.rl-finanz-chart svg { min-width: 520px; }
.rl-legende { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* Feature 2026-10-29: Statistik - Datenbalken (Top Waffen, Schießstände) */
.rl-datenbalken { height: 10px; border-radius: 6px; background: var(--mud-palette-lines-default); overflow: hidden; margin-top: 4px; }
.rl-datenbalken > div { height: 100%; min-width: 4px; border-radius: 6px; background: var(--mud-palette-primary); }

/* Feature 2026-10-29: Meine Erfolge - Medaillenfarben, Platzierungsplakette, Ergebniszeile */
.rl-medaille-gold { color: #E0A800 !important; }
.rl-medaille-silber { color: #9AA3AD !important; }
.rl-medaille-bronze { color: #B87333 !important; }
.rl-erfolg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rl-erfolg-text { flex: 1 1 220px; min-width: 0; }
.rl-erfolg-ringe { text-align: right; min-width: 90px; }
.rl-platz { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem; color: var(--mud-palette-text-secondary); border: 2px solid var(--mud-palette-lines-default); }
.rl-platz-gold { background: #E0A800; border-color: #E0A800; color: #fff; }
.rl-platz-silber { background: #9AA3AD; border-color: #9AA3AD; color: #fff; }
.rl-platz-bronze { background: #B87333; border-color: #B87333; color: #fff; }

/* Feature 2026-10-29: Mein Schießbuch - Karten nach Monaten mit Datumskachel */
.rl-sb-monat { text-transform: capitalize; letter-spacing: .02em; }
.rl-sb-karte { display: flex; align-items: center; gap: 14px; }
.rl-sb-klickbar { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rl-sb-klickbar:hover { border-color: var(--mud-palette-primary); box-shadow: 0 1px 6px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent); }
.rl-sb-text { flex: 1 1 auto; min-width: 0; }
.rl-sb-aktion { flex: none; align-self: flex-start; }
.rl-sb-notiz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.rl-sb-datum { flex: none; width: 56px; padding: 6px 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)); color: var(--mud-palette-primary); }
.rl-sb-datum .rl-sb-tag { font-size: 1.4rem; font-weight: 700; }
.rl-sb-datum .rl-sb-mon { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.rl-sb-wettkampf { background: color-mix(in srgb, #E0A800 18%, var(--mud-palette-surface)); color: #B98600; }
.rl-sb-eigen { background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, var(--mud-palette-surface)); color: var(--mud-palette-text-secondary); }

/* Feature 2026-10-30: Finanzen-Diagramme - Reihenfarben (Grün, Blau, Orange, Lila), in hellem und dunklem Schema geprüft (Kontrast >= 3:1, Reihenfolge so, dass Nachbarn auch bei Farbfehlsichtigkeit trennbar bleiben) */
:root { --rl-c1: #2E7D32; --rl-c2: #2F6FB5; --rl-c3: #C8651B; --rl-c4: #9C4F9E; }
.rl-legende-zeile { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.rl-legende-zeile .rl-legende { width: 12px; height: 12px; border-radius: 3px; }
.rl-balken-mehr { display: flex; height: 10px; margin-top: 4px; border-radius: 6px; overflow: hidden; background: var(--mud-palette-lines-default); gap: 2px; }
.rl-balken-mehr > div { height: 100%; min-width: 3px; }
.rl-abschnitt { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
.rl-abschnitt::after { content: ""; flex: 1; height: 1px; background: var(--mud-palette-lines-default); }

/* Feature 2026-10-30: Extras einer Buchung (BuchungExtrasDialog) */
.rl-extra-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 10px; margin-bottom:6px; border:1px solid var(--mud-palette-lines-default); border-radius:8px; }
.rl-extra-zeile.rl-extra-aktiv { border-color:var(--mud-palette-primary); background:color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.rl-extra-name { display:flex; flex-direction:column; min-width:0; font-size:.9rem; }
.rl-extra-name .mud-text-secondary { font-size:.78rem; }
.rl-extra-menge { display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.rl-extra-anzahl { min-width:1.6em; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; }

/* Feature 2026-10-30: Buchung per Maus im Kalenderauszug auf einen anderen Slot ziehen (BuchungKalenderVorschau, app.js rlBuchungZiehen) */
.bv-ziehbar { cursor:grab; touch-action:none; user-select:none; }
.bv-chip-zieht { opacity:0.35; }
.bv-zelle-ablage { background:rgba(25,118,210,0.18); box-shadow:inset 0 0 0 2px var(--mud-palette-primary); }
.bv-geist { position:fixed; z-index:2147483000; pointer-events:none; margin:0; border-radius:3px; padding:1px 5px; color:#fff; background:#1565c0; font-size:0.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 6px 16px rgba(0,0,0,0.35), 0 0 0 2px rgba(21,101,192,0.5); transform:scale(1.04); }
body.bv-zieht-aktiv, body.bv-zieht-aktiv * { cursor:grabbing !important; user-select:none !important; }
.bv-chip-bisher { background:transparent; color:var(--mud-palette-text-secondary); border:1px dashed var(--mud-palette-primary); }

/* Feature 2026-11-01: "Meine Buchungen" - Farbpunkt der Gruppe (Gruppe.ColorTag) vor dem Gruppennamen, Kennzahl-Kacheln. */
.rl-gruppenpunkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rl-kachel { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.rl-kachel[style*="cursor:pointer"]:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }

/* Feature 2026-11-01: "Meine Wettkämpfe" - Termin-Karten mit Datumsblock, Inhalt und Ergebnis/Aktionen rechts; auf dem Handy untereinander. */
.rl-wk-karte { display: flex; align-items: center; gap: 16px; transition: box-shadow 0.12s ease; }
.rl-wk-karte:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.rl-wk-vorbei { opacity: 0.85; }
.rl-wk-datum {
    flex: none; width: 64px; padding: 8px 0; border-radius: 14px; text-align: center; line-height: 1.15;
    display: flex; flex-direction: column; align-items: center;
    color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.rl-wk-datum__wochentag, .rl-wk-datum__monat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.rl-wk-datum__tag { font-size: 1.6rem; font-weight: 600; }
.rl-wk-inhalt { flex: 1; min-width: 0; }
.rl-wk-titel { overflow-wrap: anywhere; }
.rl-wk-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rl-wk-ergebnis { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; gap: 4px; }
.rl-wk-ergebnis__zahl { font-size: 1.8rem; font-weight: 600; color: var(--mud-palette-primary); }
.rl-wk-ergebnis__einheit { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mud-palette-text-secondary); margin-top: -4px; }
@media (max-width: 599px) {
    .rl-wk-karte { flex-wrap: wrap; }
    .rl-wk-rechts { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
    .rl-wk-ergebnis { align-items: flex-start; }
}

/* Feature 2026-11-02: Kalenderauszug zur Gruppenreservierungsanfrage (GruppenAnfrageKalenderauszug.razor) */
.rl-auszug { margin-top: 8px; }
.rl-auszug__bedarf { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; font-size: .875rem; }
.rl-auszug__bedarf--ok { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.rl-auszug__bedarf--ok .mud-icon-root { color: var(--mud-palette-success); }
.rl-auszug__bedarf--knapp { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); }
.rl-auszug__bedarf--knapp .mud-icon-root { color: var(--mud-palette-error); }
.rl-auszug__tag { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 10px 0 4px; }
.rl-auszug__scroll { overflow-x: auto; }
.rl-auszug__tabelle { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: .75rem; }
.rl-auszug__tabelle th { font-weight: 500; color: var(--mud-palette-text-secondary); text-align: center; white-space: nowrap; padding: 0 2px; }
.rl-auszug__tabelle th.rl-auszug__bahn { text-align: left; padding-right: 8px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; color: var(--mud-palette-text-primary); }
.rl-auszug__ergebnis { width: 24px; text-align: center; }
td.rl-auszug__zelle { min-width: 56px; height: 28px; text-align: center; border-radius: 6px; overflow: hidden; white-space: nowrap; padding: 0 4px; }
.rl-auszug__zelle--frei { background: color-mix(in srgb, var(--mud-palette-success) 28%, transparent); }
.rl-auszug__zelle--angefragt { background: color-mix(in srgb, var(--mud-palette-warning) 38%, transparent); }
.rl-auszug__zelle--belegt { background: color-mix(in srgb, var(--mud-palette-error) 38%, transparent); }
.rl-auszug__zelle--geschlossen { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--mud-palette-text-secondary) 22%, transparent) 4px 6px); }
.rl-auszug__legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.rl-auszug__legende i.rl-auszug__zelle { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }