/* /Components/Notenbogen/NotenbogenHinweisBanner.razor.rz.scp.css */
/* ==========================================================================
   Hinweisstreifen "Notenbogen noch nicht eingemessen" (29.07.2026)

   Farbgebung bewusst mit eigenem Grund und darauf abgestimmter Schrift: Der
   Streifen soll in JEDEM der vier Farbschemata gleich auffallen. Würde er sich
   mitfärben, wäre er mal deutlich und mal kaum wahrnehmbar — und dann übersieht
   man ihn genau an dem Tag, an dem es darauf ankommt.

   Der Ton ist warnend, aber nicht alarmierend: Es ist kein Fehler, sondern ein
   fehlender Einrichtungsschritt, der in einer Minute erledigt ist.
   ========================================================================== */

.notenbogen-banner[b-sjzsctim2h] {
    background: #fff7ed;
    border-left: 5px solid #f59e0b;
    color: #451a03;
}

/* Alle Texte im Streifen auf den eigenen Grund abstimmen — sonst greift wieder
   die Textfarbe des Themes und steht bei dunklem Schema hell auf hell. */
.notenbogen-banner[b-sjzsctim2h]  .mud-typography,
.notenbogen-banner[b-sjzsctim2h]  p,
.notenbogen-banner[b-sjzsctim2h]  span {
    color: #451a03;
}
/* /Components/Notenbogen/NotenbogenPanel.razor.rz.scp.css */
/* ==========================================================================
   Notenbogen-Panel in der Wertungsmaske (28.07.2026)

   Zwei Anläufe waren nötig, beide mit derselben Wurzel — deshalb hier
   ausführlich, damit der Fehler nicht ein drittes Mal passiert:

   1. Anlauf: Farben gar nicht gesetzt, dazu die Beschriftungen per Deckkraft
      abgeschwächt. Ergebnis im Betrieb: nahezu unlesbar. Ursache ist, dass
      dieses Panel eine RADZEN-Karte (heller Grund) in einer MUDCOMPAT-Maske
      ist, deren Textfarbe aus dem Theme kommt — und ScoreControl läuft
      standardmäßig im DUNKLEN Theme. Also helle Schrift auf heller Karte.

   2. Anlauf: feste dunkle Farben auf festem hellem Grund. Das behebt den
      hellen Fall und zerlegt dafür den dunklen — ScoreControl kennt vier
      Modi (dark, light, lightpink, darkpink), dark ist die Vorgabe.

   Richtig ist der dritte Weg: die Theme-Variablen benutzen, damit sich das
   Panel mitdreht, aber OHNE Deckkraft-Abschwächung, die sie unlesbar macht.
   Die Rückfallwerte hinter dem Komma greifen nur, wenn die Variable fehlt.

   Merksatz für künftige Arbeiten an diesem Projekt: Farben nie fest setzen
   und nie über Deckkraft abschwächen — immer die Theme-Variablen nehmen und
   in beiden Modi gegenprüfen.
   ========================================================================== */

.notenbogen-panel[b-pqkaudiz09] {
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--mud-palette-primary, #2563eb);
    /* Grund und Schrift kommen beide aus dem Theme — nur so passen sie
       zueinander, egal welcher der vier Modi aktiv ist. */
    background: var(--mud-palette-surface, #f8fafc);
    color: var(--mud-palette-text-primary, #0f172a);
}

.notenbogen-panel-kopf[b-pqkaudiz09] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.notenbogen-panel-titel[b-pqkaudiz09] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary, #0f172a);
}

/* Die Kennzahlen nebeneinander; auf schmalen Geräten bricht die Zeile um,
   statt den Rest der Maske zu verschieben. */
.notenbogen-panel-zahlen[b-pqkaudiz09] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: baseline;
}

.notenbogen-panel-zahlen > div[b-pqkaudiz09] {
    display: flex;
    flex-direction: column;
}

/* Beschriftungen: kleiner und in der Zweitfarbe des Themes, aber KEINE
   Deckkraft-Abschwächung. Genau die hatte sie im ersten Anlauf verschluckt. */
.notenbogen-label[b-pqkaudiz09] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary, #475569);
}

.notenbogen-wert[b-pqkaudiz09] {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, #0f172a);
}

/* Die Prozentzahl ist der eigentliche Vergleichswert — deutlich größer und in
   der Akzentfarbe des Themes, damit sie sich vom Rest der Maske abhebt. Genau
   diese Zahl hält Frank am Turnier gegen seine parallele Handeingabe. */
.notenbogen-wert-gross[b-pqkaudiz09] {
    font-size: 2rem;
    line-height: 1.05;
    color: var(--mud-palette-primary, #1d4ed8);
}

.notenbogen-panel-hinweis[b-pqkaudiz09] {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Fußzeile: Laufzeiten und Kosten je Modell.
   -------------------------------------------------------------------------- */

.notenbogen-panel-fuss[b-pqkaudiz09] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    /* Halbtransparentes Grau statt Theme-Variable: Der Farbsatz dieses Projekts
       kennt keine Trennlinienfarbe, und ein transparentes Grau steht sowohl auf
       hellem als auch auf dunklem Grund. */
    border-top: 1px solid rgba(128, 128, 128, 0.35);
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #334155);
}

.notenbogen-lauf[b-pqkaudiz09] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary, #334155);
}

/* Mittleres Rot statt Theme-Variable: Der Farbsatz kennt keine Fehlerfarbe.
   Dieser Ton hat sowohl auf weißem als auch auf dunklem Grund genug Kontrast —
   ein dunkleres Rot würde im dunklen Theme verschwinden, ein helleres im hellen. */
.notenbogen-fehler[b-pqkaudiz09] {
    color: #ef4444;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Messbetrieb-Kennzeichnung.

   Die wichtigste Angabe im ganzen Panel: Solange sie dasteht, wird NICHTS
   gespeichert. Verschwindet sie, schreibt die Erkennung in die Datenbank —
   und dev2 teilt sie sich mit der Produktion. Diesen Unterschied muss man auf
   einen Blick erkennen.

   Hier ausnahmsweise feste Farben: Das Feld bringt seinen eigenen Grund mit,
   Grund und Schrift sind also aufeinander abgestimmt und in JEDEM Theme
   lesbar. Eine Warnkennzeichnung, die sich mitfärbt, wäre mal auffällig und
   mal unsichtbar — und ausgerechnet hier darf sie nie untergehen.
   -------------------------------------------------------------------------- */

.notenbogen-testhinweis[b-pqkaudiz09] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #78350f;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
/* /Components/Umgebungsband.razor.rz.scp.css */
/* ==========================================================================
   Warnband für geschützte Testumgebungen (31.07.2026)

   Feste Farben mit eigenem Grund — bewusst, obwohl sonst die Theme-Variablen
   gelten: Eine Warnung, die sich mitfärbt, ist mal auffällig und mal kaum
   sichtbar. Genau hier darf sie in keinem der vier Farbschemata untergehen.
   Grund und Schrift sind aufeinander abgestimmt und damit überall lesbar.
   ========================================================================== */

.umgebungsband[b-xeb5766ite] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #7f1d1d;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.35;
    border-bottom: 2px solid #dc2626;
}

.umgebungsband b[b-xeb5766ite] {
    color: #fff;
}

.umgebungsband-zeichen[b-xeb5766ite] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #7f1d1d;
    font-weight: 900;
    font-size: 1.05rem;
}

/* Am Telefon wird der Text kürzer gesetzt, damit das Band nicht den halben
   Bildschirm frisst — die Kernaussage steht im fett gesetzten Anfang. */
@media (max-width: 700px) {
    .umgebungsband[b-xeb5766ite] {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-2d8j0d80lo] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-2d8j0d80lo] {
    flex: 1;
}

.sidebar[b-2d8j0d80lo] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-2d8j0d80lo] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-2d8j0d80lo]  a, .top-row[b-2d8j0d80lo]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-2d8j0d80lo]  a:hover, .top-row[b-2d8j0d80lo]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-2d8j0d80lo]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-2d8j0d80lo] {
        justify-content: space-between;
    }

    .top-row[b-2d8j0d80lo]  a, .top-row[b-2d8j0d80lo]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-2d8j0d80lo] {
        flex-direction: row;
    }

    .sidebar[b-2d8j0d80lo] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-2d8j0d80lo] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-2d8j0d80lo]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-2d8j0d80lo], article[b-2d8j0d80lo] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-cylfgahdur] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-cylfgahdur] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-cylfgahdur] {
    font-size: 1.1rem;
}

.bi[b-cylfgahdur] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-cylfgahdur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-cylfgahdur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-cylfgahdur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-cylfgahdur] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-cylfgahdur] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-cylfgahdur] {
        padding-bottom: 1rem;
    }

    .nav-item[b-cylfgahdur]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-cylfgahdur]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-cylfgahdur]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-cylfgahdur] {
        display: none;
    }

    .collapse[b-cylfgahdur] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-cylfgahdur] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/NotenbogenEinrichten.razor.rz.scp.css */
/* ==========================================================================
   Notenbogen einrichten — Gestaltung (28.07.2026)

   Diese Seite wird anders benutzt als die Handy-Seite NotenbogenFoto:
   Sie läuft in aller Ruhe am Schreibtisch, wenn die 87 Bögen der Reihe nach
   eingemessen werden. Deshalb hier bewusst KEIN Vollbild-Layout und keine
   riesigen Flächen, sondern eine ruhige Spalte mit begrenzter Breite —
   Fließtext, der über die ganze Bildschirmbreite läuft, liest sich schlecht.

   Trotzdem lauffähig am Handy: alles ist einspaltig und fließt.

   Isoliertes CSS (Blazor Scoped CSS). Es wirkt nur in
   NotenbogenEinrichten.razor und kann keine andere Seite beschädigen.
   ========================================================================== */

.ne-seite[b-5lxjrrw17q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    /* Begrenzte Lesebreite: Erklärtexte über 900 px werden mühsam. */
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */

.ne-kopf[b-5lxjrrw17q] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ne-titel[b-5lxjrrw17q] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Karten und Abschnitte
   -------------------------------------------------------------------------- */

.ne-schritt[b-5lxjrrw17q],
.ne-erklaerung[b-5lxjrrw17q] {
    padding: 16px;
}

.ne-abschnitt-titel[b-5lxjrrw17q] {
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    font-weight: 600;
}

/* Der Erklärtext ist die Antwort auf „warum muss ich das machen?". Er darf
   ruhig etwas größer sein als der übrige Text — gelesen wird er genau einmal,
   und dann soll er auch ankommen. */
.ne-erklaerung p[b-5lxjrrw17q] {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.ne-erklaerung p:last-child[b-5lxjrrw17q] {
    margin-bottom: 0;
}

.ne-erklaerung-schluss[b-5lxjrrw17q] {
    /* Die Kernaussage („nur einmal je Aufgabe") optisch abgesetzt, damit sie
       auch beim Überfliegen hängen bleibt. */
    padding: 8px 12px;
    border-left: 4px solid var(--rz-primary, #1976d2);
    background: rgba(127, 127, 127, 0.08);
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Zustandsanzeige der gewählten Aufgabe
   -------------------------------------------------------------------------- */

.ne-status[b-5lxjrrw17q] {
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Auswahl der Bildquelle (Foto / PDF)
   -------------------------------------------------------------------------- */

.ne-quellen[b-5lxjrrw17q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Bildbereich: Livebild bzw. Vorschau
   -------------------------------------------------------------------------- */

.ne-tipp[b-5lxjrrw17q] {
    margin: 0 0 12px 0;
    /* Zweitfarbe des Themes statt Abschwaechung per Deckkraft: opacity macht
       Text in JEDEM Schema blass — genau daran ist die Anzeige in der
       Wertungsmaske gescheitert (siehe BEFUNDE.md, 29.07.2026). */
    color: var(--mud-palette-text-secondary, #6B7280);
}

.ne-bildbereich[b-5lxjrrw17q] {
    position: relative;
    width: 100%;
    /* Feste Höhe statt „so hoch wie das Video": Sonst springt die ganze Seite
       in dem Moment, in dem der Kamerastream die erste Bildgröße meldet. */
    height: 46vh;
    min-height: 260px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.ne-video[b-5lxjrrw17q],
.ne-vorschau[b-5lxjrrw17q] {
    width: 100%;
    height: 100%;
    /* contain statt cover: Der Bogen muss VOLLSTÄNDIG zu sehen sein. Bei cover
       würde der Browser die Ränder abschneiden — und genau an den Rändern liegen
       die äußeren Notenkästchen und die Bestell-Nummer. */
    object-fit: contain;
    display: block;
}

/* Das <video> bleibt im DOM und wird nur unsichtbar geschaltet (siehe Kommentar
   in der .razor): Beim Entfernen ginge der Kamerastream verloren. */
.ne-verborgen[b-5lxjrrw17q] {
    visibility: hidden;
    position: absolute;
    inset: 0;
}

.ne-vorschau[b-5lxjrrw17q] {
    position: absolute;
    inset: 0;
}

/* Ausrichthilfe. Bewusst mit Abstand zum Bildrand: Wer den Bogen genau auf die
   Bildkante legt, hat beim nächsten Foto garantiert eine Ecke abgeschnitten. */
.ne-rahmen[b-5lxjrrw17q] {
    position: absolute;
    inset: 6%;
    border: 2px dashed rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    pointer-events: none;
}

/* Warteanzeige über dem Bild. Die Auswertung dauert einige Sekunden; ohne
   sichtbare Erklärung würde man ein zweites Mal drücken — und das kostet bei
   jedem Aufruf echtes Geld. */
.ne-warten[b-5lxjrrw17q] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.62);
    padding: 16px;
    text-align: center;
}

.ne-warten-text[b-5lxjrrw17q] {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.4;
    max-width: 32ch;
}

.ne-kamerafehler[b-5lxjrrw17q] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
}

/* --------------------------------------------------------------------------
   Bedienleiste
   -------------------------------------------------------------------------- */

.ne-bedienung[b-5lxjrrw17q] {
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Ergebnis
   -------------------------------------------------------------------------- */

.ne-zahlen[b-5lxjrrw17q] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ne-zahl[b-5lxjrrw17q] {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.10);
    text-align: center;
}

.ne-zahl-wert[b-5lxjrrw17q] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Lange Bestell-Nummern dürfen umbrechen statt die Kachel zu sprengen. */
    overflow-wrap: anywhere;
}

.ne-zahl-text[b-5lxjrrw17q] {
    font-size: 0.85rem;
    /* Siehe oben: Zweitfarbe statt Deckkraft. */
    color: var(--mud-palette-text-secondary, #6B7280);
}

/* Die Prüfmeldungen des Servers sind der eigentliche Nutzen dieser Seite.
   Sie bekommen deshalb eine eigene, gut lesbare Darstellung: eine Meldung je
   Block, ausreichend Zeilenabstand, deutliche Randmarkierung. Sie werden
   niemals gekürzt oder zusammengefasst. */
.ne-meldungen[b-5lxjrrw17q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ne-meldungen-titel[b-5lxjrrw17q] {
    font-weight: 600;
}

.ne-meldung[b-5lxjrrw17q] {
    padding: 10px 12px;
    border-left: 4px solid var(--rz-danger, #d32f2f);
    background: rgba(211, 47, 47, 0.10);
    border-radius: 4px;
    line-height: 1.45;
    /* Die Meldungen enthalten Aufzählungen von Lektionsnummern und können lang
       werden — sie müssen umbrechen dürfen, nicht seitlich verschwinden. */
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Vollbild-Aufnahmemodus (29.07.2026)

   Diese Seite wird meist am Schreibtisch benutzt — das Einmessen per Foto
   passiert aber am Handy. Und dort ist eine Formularseite mit Karten, in die
   ein Kamerabild eingelassen ist, unbrauchbar: Das Bild wird winzig, der
   Auslöser rutscht aus dem Schirm, und zwischen Erklärtexten ist nicht mehr
   erkennbar, was der Bogen im Sucher gerade macht. Genau diese Bauform ist auf
   der Aufnahmeseite bereits durchgefallen.

   Deshalb schaltet die Seite um, sobald wirklich fotografiert wird: Das Bild
   füllt den Schirm, die Bedienung schwebt darüber, die Erklärtexte treten
   zurück. Liegt ein Ergebnis vor, kommt die ruhige Ansicht zurück — dann will
   man lesen, nicht fotografieren.

   Umgesetzt allein über diese Klasse am Wurzelelement: Das Markup bleibt
   unverändert, es gibt also keine zweite Fassung derselben Seite, die
   auseinanderlaufen könnte.
   ========================================================================== */

.ne-vollbild[b-5lxjrrw17q] {
    position: fixed;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    background: #000;
    overflow: hidden;
    z-index: 1200;
}

/* Im Aufnahmemodus zählt nur der Sucher. Kopfzeile, Aufgabenauswahl,
   Quellenwahl und Erklärtexte werden ausgeblendet — sie haben ihre Arbeit
   getan, sobald die Kamera läuft. */
.ne-vollbild > .ne-kopf[b-5lxjrrw17q],
.ne-vollbild > .ne-erklaerung[b-5lxjrrw17q],
.ne-vollbild > .ne-schritt:not(.ne-schritt-aufnahme)[b-5lxjrrw17q] {
    display: none;
}

/* Die verbleibende Karte mit dem Sucher füllt den Schirm und verliert ihre
   Kartenoptik — ein Rahmen um ein Vollbild ergibt keinen Sinn. */
.ne-vollbild > .ne-schritt-aufnahme[b-5lxjrrw17q] {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

/* Überschrift und Erklärtext der Aufnahmekarte ebenfalls weg. */
.ne-vollbild .ne-abschnitt-titel[b-5lxjrrw17q],
.ne-vollbild .ne-tipp[b-5lxjrrw17q] {
    display: none;
}

.ne-vollbild .ne-bildbereich[b-5lxjrrw17q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ne-vollbild .ne-video[b-5lxjrrw17q],
.ne-vollbild .ne-vorschau[b-5lxjrrw17q] {
    width: 100%;
    height: 100%;
    /* "contain": Der Bogen muss VOLLSTÄNDIG sichtbar sein. Beschneiden wäre
       hier fatal — aus einem angeschnittenen Bogen entstünde ein falsches
       Raster, und das würde anschließend jeden Bogen dieser Aufgabe verderben. */
    object-fit: contain;
    background: #000;
}

/* Bedienung schwebt über dem Bild: unten mittig im Hochformat. */
.ne-vollbild .ne-bedienung[b-5lxjrrw17q] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: none;
}

.ne-vollbild .ne-bedienung .rz-button[b-5lxjrrw17q] {
    min-width: 220px;
    max-width: 460px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

/* Im Querformat nach rechts — dort liegt beim quer gehaltenen Gerät der
   Daumen, und quer ist bei A3-Bögen ohnehin die richtige Haltung. */
@media (orientation: landscape) and (max-height: 560px) {
    .ne-vollbild .ne-bedienung[b-5lxjrrw17q] {
        left: auto;
        right: calc(env(safe-area-inset-right, 0px) + 18px);
        top: 0;
        bottom: 0;
        justify-content: center;
        padding: 0;
    }
}

/* Wartehinweis und Ausrichtrahmen liegen bereits absolut im Bildbereich und
   brauchen im Vollbild nur noch die richtige Schichtung. */
.ne-vollbild .ne-warten[b-5lxjrrw17q],
.ne-vollbild .ne-rahmen[b-5lxjrrw17q] {
    z-index: 5;
}

/* ==========================================================================
   Bestell-Nummer nachtragen + Kostenübersicht (01.08.2026)

   Beide Blöcke sind bewusst OHNE feste Farbwerte gebaut: Sie beziehen alles
   aus den Theme-Variablen, damit sie in allen vier Modi (dunkel als Vorgabe,
   hell, pink, weiß) lesbar bleiben. Genau daran ist auf dieser Seite schon
   mehrfach etwas gescheitert — weiße Schrift auf weißem Grund entsteht immer
   dort, wo eine Farbe fest verdrahtet statt abgeleitet wurde.
   ========================================================================== */

.ne-nachtrag[b-5lxjrrw17q] {
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    /* Warnton, aber aus der Theme-Palette abgeleitet statt fest gesetzt. */
    border-left: 4px solid var(--mud-palette-warning, #ed6c02);
    background: var(--mud-palette-surface, rgba(127, 127, 127, 0.10));
    color: var(--mud-palette-text-primary, inherit);
}

.ne-nachtrag-titel[b-5lxjrrw17q] {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--mud-palette-text-primary, inherit);
}

.ne-nachtrag-text[b-5lxjrrw17q] {
    font-size: 0.9rem;
    line-height: 1.45;
    /* Sekundärfarbe: erklärender Text, soll den Titel nicht überstrahlen —
       aber immer noch klar lesbar sein (nicht "grau auf grau"). */
    color: var(--mud-palette-text-secondary, inherit);
    margin-bottom: 10px;
}

.ne-nachtrag-eingabe[b-5lxjrrw17q] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/* Das Eingabefeld muss auf dem Handy mit dem Finger gut treffbar sein und
   dieselbe Höhe haben wie der Knopf daneben. */
.ne-nachtrag-eingabe .rz-textbox[b-5lxjrrw17q] {
    height: 44px;
    width: 100%;
    background: var(--mud-palette-background, #fff);
    color: var(--mud-palette-text-primary, #000);
    border: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.4));
}

.ne-kosten[b-5lxjrrw17q] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 4px solid var(--mud-palette-info, #0288d1);
    background: var(--mud-palette-surface, rgba(127, 127, 127, 0.08));
    color: var(--mud-palette-text-primary, inherit);
}

.ne-kosten-titel[b-5lxjrrw17q] {
    font-weight: 600;
    margin-bottom: 6px;
}

.ne-kosten-zeile[b-5lxjrrw17q] {
    /* Zahlen untereinander lesbar halten: feste Zeichenbreite, damit Dauer und
       Betrag beider Anbieter direkt vergleichbar untereinander stehen. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary, inherit);
}

/* Hinweis "Foto eines leeren Bogens" (01.08.2026).
   Ersetzt einen Knopf, der fest deaktiviert war und nie etwas tun konnte —
   er wirkte dadurch wie eine kaputte Funktion. Farben ausschließlich aus dem
   Theme, damit er in allen vier Modi lesbar bleibt. */
.ne-quelle-hinweis[b-5lxjrrw17q] {
    flex: 1 1 240px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px dashed var(--mud-border-color, rgba(127, 127, 127, 0.4));
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary) 8%);
    color: var(--mud-palette-text-primary, inherit);
    line-height: 1.4;
    font-size: 0.9rem;
}

    .ne-quelle-hinweis .rzi[b-5lxjrrw17q] {
        color: var(--mud-palette-primary, inherit);
        font-size: 1.4rem;
        flex: 0 0 auto;
    }
/* /Pages/NotenbogenFoto.razor.rz.scp.css */
/* ==========================================================================
   Notenbogen fotografieren — Gestaltung als Kamera-Anwendung (28.07.2026)

   Vollständig neu geschrieben, nachdem die erste Fassung auf dem Telefon
   durchgefallen ist: Im Querformat blieb unten ein toter schwarzer Balken,
   der Auslöser rutschte aus dem Bild, und helle Schrift auf hellem Grund
   war im Freien nicht zu lesen.

   Der Denkfehler war, eine Formularseite zu bauen, in die ein Kamerabild
   eingelassen ist. Richtig ist das Gegenteil: eine Kamera-Anwendung, über
   deren Bild die Bedienung schwebt. Damit sind die schwarzen Flächen neben
   dem Bild keine toten Balken mehr, sondern genau der Platz, auf dem die
   Bedienelemente liegen — so wie in jeder Kamera-App.

   Durchgehende Regeln:
     - Dunkler Untergrund, helle Schrift. Frank arbeitet draußen, oft bei
       Sonne; heller Grund blendet und verschluckt die Schrift.
     - Nichts scrollt. Was nicht auf den Schirm passt, gehört nicht hierher.
     - Randabstände respektieren die geräteeigenen Sperrflächen (Notch,
       Home-Leiste) über env(safe-area-inset-*) — sonst liegt der Auslöser
       am iPhone unter der Wischleiste.
   ========================================================================== */

.nb-app[b-269i902c3l] {
    position: fixed;
    inset: 0;
    background: #000;
    overflow: hidden;
    /* Verhindert, dass ein versehentlicher Wisch die Seite verschiebt,
       während man das Handy über den Bogen hält. */
    touch-action: manipulation;
    user-select: none;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Bühne: das Kamerabild. Füllt den gesamten Schirm.
   -------------------------------------------------------------------------- */

.nb-buehne[b-269i902c3l] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nb-video[b-269i902c3l],
.nb-standbild[b-269i902c3l] {
    width: 100%;
    height: 100%;
    /* "contain" statt "cover": Der Bogen muss VOLLSTÄNDIG sichtbar sein.
       Beschneiden wäre hier fatal — ein abgeschnittener Bogenrand kostet
       Wertnoten, und das fällt womöglich erst bei der Auswertung auf. */
    object-fit: contain;
    background: #000;
}

.nb-aus[b-269i902c3l] {
    display: none;
}

/* Ausrichthilfe. Der Rahmen liegt bewusst innerhalb des Bildrands: Passt der
   Bogen genau auf die Kante, ist bei der nächsten Aufnahme garantiert eine
   Ecke ab. */
.nb-rahmen[b-269i902c3l] {
    position: absolute;
    top: 8%;
    left: 8%;
    right: 8%;
    bottom: 8%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    pointer-events: none;
    /* Dunkler Saum, damit die helle Linie auch auf weißem Papier steht —
       und ein Notenbogen ist nun einmal fast immer weiß. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Kopfleiste: Wer ist gerade dran?
   Schwebt über dem Bild, mit Verlauf nach unten, damit die Schrift auch auf
   hellem Papier lesbar bleibt.
   -------------------------------------------------------------------------- */

.nb-oben[b-269i902c3l] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 22px 14px;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.65) 55%,
                rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.nb-starter[b-269i902c3l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nb-startnummer[b-269i902c3l] {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.nb-namen[b-269i902c3l] {
    min-width: 0;
}

.nb-reiter[b-269i902c3l] {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    /* Lange Namen dürfen die Leiste nicht sprengen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nb-pferd[b-269i902c3l] {
    font-size: 0.95rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nb-zusatz[b-269i902c3l] {
    margin-top: 4px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.nb-zusatz-warn[b-269i902c3l] {
    color: #fcd34d;
}

.nb-laedt[b-269i902c3l] {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Fehlende Starterzuordnung: Das ist die einzige Meldung, die den Auslöser
   sperrt — sie muss sofort ins Auge fallen. */
.nb-warnung[b-269i902c3l] {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(180, 83, 9, 0.95);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.35;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Bedienung. Hochformat: unten mittig. Querformat: rechts mittig.
   Beides sind die Stellen, an denen der Daumen ohnehin liegt.
   -------------------------------------------------------------------------- */

.nb-bedienung[b-269i902c3l] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
}

/* Der Auslöser: großer runder Knopf im Stil einer Kamera-App. Rund, weil er
   damit auch ohne Hinsehen zu treffen ist — die Fingerkuppe findet eine
   Scheibe zuverlässiger als eine flache Leiste. */
.nb-ausloeser[b-269i902c3l] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.18);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    transition: transform 0.08s ease;
}

.nb-ausloeser-kern[b-269i902c3l] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
}

.nb-ausloeser:active[b-269i902c3l] {
    transform: scale(0.92);
}

.nb-ausloeser:disabled[b-269i902c3l] {
    opacity: 0.35;
    cursor: not-allowed;
}

.nb-ausloeser:disabled .nb-ausloeser-kern[b-269i902c3l] {
    background: #9ca3af;
}

.nb-bedien-text[b-269i902c3l] {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 0.85rem;
    color: #fcd34d;
    text-align: center;
}

/* Flächige Knöpfe für die übrigen Zustände (Senden, Neu aufnehmen …). */
.nb-knopf[b-269i902c3l] {
    width: 100%;
    max-width: 460px;
    min-height: 62px;
    border: none;
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.nb-knopf:active[b-269i902c3l] {
    transform: scale(0.985);
}

.nb-knopf-haupt[b-269i902c3l] {
    background: #16a34a;
}

.nb-knopf-neben[b-269i902c3l] {
    background: rgba(255, 255, 255, 0.22);
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 500;
}

.nb-knopf-klaeren[b-269i902c3l] {
    background: #d97706;
    min-height: 52px;
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Ganzflächige Überlagerungen: Wartehinweis und Kamerafehler.
   -------------------------------------------------------------------------- */

.nb-schleier[b-269i902c3l] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    z-index: 20;
}

.nb-kreisel[b-269i902c3l] {
    width: 56px;
    height: 56px;
    border: 5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: nb-drehen-b-269i902c3l 0.9s linear infinite;
}

@keyframes nb-drehen-b-269i902c3l {
    to { transform: rotate(360deg); }
}

.nb-schleier-text[b-269i902c3l] {
    font-size: 1.05rem;
    text-align: center;
    color: #fff;
    max-width: 22rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Tafeln: dunkler Grund, heller Text. Bewusst NICHT die hellen Radzen-
   Meldungsflächen — die stellten in der ersten Fassung fast weiße Schrift
   auf fast weißen Grund und waren im Freien unlesbar.
   -------------------------------------------------------------------------- */

.nb-tafel[b-269i902c3l] {
    width: 100%;
    max-width: 460px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(24, 24, 27, 0.96);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.nb-tafel-fehler[b-269i902c3l] {
    border-left: 5px solid #dc2626;
}

.nb-tafel-titel[b-269i902c3l] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
}

.nb-tafel-text[b-269i902c3l] {
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Ergebnis des letzten Bogens.
   -------------------------------------------------------------------------- */

.nb-ergebnis[b-269i902c3l] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 130px);
    display: flex;
    justify-content: center;
    padding: 0 16px;
    z-index: 10;
}

.nb-zahlen[b-269i902c3l] {
    display: flex;
    gap: 26px;
}

.nb-zahl[b-269i902c3l] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nb-zahl-wert[b-269i902c3l] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.nb-zahl-text[b-269i902c3l] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 3px;
}

.nb-zahl-gut .nb-zahl-wert[b-269i902c3l] {
    color: #4ade80;
}

.nb-zahl-warn .nb-zahl-wert[b-269i902c3l] {
    color: #fbbf24;
}

.nb-hinweise[b-269i902c3l] {
    margin: 12px 0 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    max-height: 22dvh;
    overflow-y: auto;
}

.nb-hinweise li[b-269i902c3l] {
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Fußzeile: Rückweg und Drehhinweis. Klein und am Rand — beides wird selten
   gebraucht, muss aber auffindbar sein.
   -------------------------------------------------------------------------- */

.nb-unten[b-269i902c3l] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 12px;
    font-size: 0.78rem;
}

.nb-wechsel[b-269i902c3l] {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    pointer-events: auto;
}

.nb-drehhinweis[b-269i902c3l] {
    color: #fcd34d;
}

/* ==========================================================================
   Querformat: die eigentlich richtige Haltung für A3-Bögen.

   Hier ist Höhe knapp und Breite reichlich. Deshalb wandert die Bedienung an
   den rechten Rand — dort liegt beim quer gehaltenen Gerät der rechte Daumen.
   Das Bild behält die volle Fläche; die Bedienung schwebt darüber, statt ihm
   Platz wegzunehmen.
   ========================================================================== */

@media (orientation: landscape) {

    /* Im Querformat ist das Gerät richtig gehalten — Hinweis weg. */
    .nb-drehhinweis[b-269i902c3l] {
        display: none;
    }

    .nb-bedienung[b-269i902c3l] {
        left: auto;
        right: calc(env(safe-area-inset-right, 0px) + 18px);
        top: 0;
        bottom: 0;
        width: auto;
        justify-content: center;
        padding: 0;
    }

    .nb-knopf[b-269i902c3l] {
        width: auto;
        min-width: 210px;
        padding: 0 22px;
    }

    .nb-ergebnis[b-269i902c3l] {
        /* Ergebnis nach links, damit es die Bedienung rechts nicht verdeckt. */
        right: auto;
        left: calc(env(safe-area-inset-left, 0px) + 14px);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
        justify-content: flex-start;
        max-width: 60%;
        padding: 0;
    }

    .nb-oben[b-269i902c3l] {
        /* Rechts Platz lassen, damit die Kopfleiste nicht unter dem
           Auslöser hindurchläuft. */
        right: 260px;
        padding-bottom: 16px;
    }

    .nb-unten[b-269i902c3l] {
        left: calc(env(safe-area-inset-left, 0px) + 14px);
        right: auto;
        justify-content: flex-start;
    }
}

/* Sehr flache Geräte im Querformat: Kopfzeilen und Auslöser verkleinern. */
@media (orientation: landscape) and (max-height: 430px) {
    .nb-startnummer[b-269i902c3l] { font-size: 2rem; }
    .nb-reiter[b-269i902c3l] { font-size: 1rem; }
    .nb-pferd[b-269i902c3l] { font-size: 0.85rem; }
    .nb-ausloeser[b-269i902c3l] { width: 72px; height: 72px; }
    .nb-ausloeser-kern[b-269i902c3l] { width: 54px; height: 54px; }
}

/* Kleine Geräte im Hochformat: Der Auslöser bleibt groß, alles andere darf
   schrumpfen. Er ist das Einzige, was sicher getroffen werden muss. */
@media (orientation: portrait) and (max-height: 700px) {
    .nb-startnummer[b-269i902c3l] { font-size: 2.1rem; }
    .nb-reiter[b-269i902c3l] { font-size: 1.05rem; }
    .nb-zahl-wert[b-269i902c3l] { font-size: 1.7rem; }
    .nb-ergebnis[b-269i902c3l] { bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); }
}

/* Tafel für die Aufforderung, den Notenbogen einzumessen. Blau abgesetzt statt
   rot: Es ist kein Fehler, sondern ein fehlender Einrichtungsschritt — und der
   ist in einer Minute erledigt. */
.nb-tafel-hinweis[b-269i902c3l] {
    border-left: 5px solid #2563eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nb-tafel-hinweis .nb-knopf[b-269i902c3l] {
    max-width: none;
}

.nb-tafel-fuss[b-269i902c3l] {
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* ==========================================================================
   Startfläche für Telefone (31.07.2026)

   iOS lässt ein Livebild nur im unmittelbaren Zusammenhang mit einer
   Fingerberührung starten. Ein automatischer Start beim Laden endete am
   iPhone in einem schwarzen Bild ohne jede Erklärung — der Anwender stand
   davor und wusste nicht, ob die Seite hängt oder die Kamera fehlt.

   Diese Fläche nimmt den ganzen Schirm ein: Man kann sie nicht verfehlen,
   und sie erklärt in einem Satz, warum dieser eine Handgriff nötig ist.
   ========================================================================== */

.nb-startflaeche[b-269i902c3l] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
    text-align: center;
}

.nb-startflaeche-kreis[b-269i902c3l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
}

.nb-startflaeche-punkt[b-269i902c3l] {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;
}

.nb-startflaeche-titel[b-269i902c3l] {
    font-size: 1.5rem;
    font-weight: 700;
}

.nb-startflaeche-text[b-269i902c3l] {
    max-width: 22rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

.nb-startflaeche:active .nb-startflaeche-kreis[b-269i902c3l] {
    transform: scale(0.94);
}
/* /Pages/Scoring.razor.rz.scp.css */
/* Scoring page specific styles */

.scoring-table input:focus[b-qkbs6dtip9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.scoring-table input:disabled[b-qkbs6dtip9] {
    opacity: 0.6;
    cursor: not-allowed;
}

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

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

/* Fixed header styling */
.table-container thead[b-qkbs6dtip9] {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}