/* 03.11.2026 (Paket 6a, G1/G2): winHockey -- Anzeigetafel, Karten auf ruhigem Grund, eine Signalfarbe Eisblau (Tor-Rot nur für Tore) */
:root {
    --grund: #eef1f5; --flaeche: #ffffff; --linie: #d9dfe7; --text: #121821; --text2: #556171;
    --akzent: #0f6bd6; --akzent-weich: #e3eefb; --auf-akzent: #ffffff; --gut: #1f6f43; --warn: #8a5e00; --warn-weich: #f6ebce; --fehler: #a32222;
    --tor: #d7263d; --leiste: #0c1117; --leiste-linie: #1d2733; --leiste-text: #e8edf3; --leiste-text2: #8e9bab; --leiste-akzent: #4aa3ff;
    /* feste dunkle Werte für Tafel, Lupe, Arbeitsmodus und Vorführen (auch im hellen Modus dunkel) */
    --d-grund: #0c1117; --d-flaeche: #121921; --d-linie: #2a3542; --d-text: #e8edf3; --d-text2: #9aa7b6; --d-akzent: #4aa3ff; --d-akzent-weich: #11243a;
    --d-sz: #3d8be0; --d-sz-hell: #9ccaff;
    --schrift: "Segoe UI", system-ui, -apple-system, sans-serif;
    --schrift-tafel: "Bahnschrift", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    --schrift-zeichen: "Segoe UI Symbol", "Segoe UI", sans-serif;
}
/* Nachtrag 6a-a (N5, T1): System folgt Windows; data-thema="hell"/"dunkel" am html-Element (Schalter in der Seitenleiste) gewinnt */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) { --grund: #0a0e13; --flaeche: #121921; --linie: #243040; --text: #e8edf3; --text2: #9aa7b6; --akzent: #4aa3ff;
            --akzent-weich: #11243a; --auf-akzent: #06121f; --gut: #6fcf97; --warn: #e9be5c; --warn-weich: #2b2415; --fehler: #ff8a80;
            --tor: #ff5468; --leiste: #070a0e; --leiste-linie: #1a2330; color-scheme: dark; }
}
:root[data-thema="dunkel"] { --grund: #0a0e13; --flaeche: #121921; --linie: #243040; --text: #e8edf3; --text2: #9aa7b6; --akzent: #4aa3ff;
            --akzent-weich: #11243a; --auf-akzent: #06121f; --gut: #6fcf97; --warn: #e9be5c; --warn-weich: #2b2415; --fehler: #ff8a80;
            --tor: #ff5468; --leiste: #070a0e; --leiste-linie: #1a2330; color-scheme: dark; }
html, body { margin: 0; background: var(--grund); color: var(--text); font: 15px/1.5 var(--schrift); }
a { color: var(--akzent); }
.kopf { display: flex; align-items: center; gap: 2rem; padding: .7rem 1.5rem; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf .marke { font-weight: 700; text-decoration: none; color: var(--text); }
.kopf nav { display: flex; gap: 1.2rem; }
.inhalt { max-width: 1400px; margin: 0 auto; padding: 1.2rem 1.5rem 3rem; }
h1 { font-size: 1.5rem; margin: .3rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; background: var(--flaeche); }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-size: .82rem; color: var(--text2); font-weight: 600; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover { background: var(--akzent-weich); }
button, .knopf { font: inherit; padding: .4rem .9rem; border-radius: 5px; border: 1px solid var(--akzent); background: var(--akzent);
                 color: var(--auf-akzent); cursor: pointer; text-decoration: none; display: inline-block; }
button.zweit, .knopf.zweit { background: transparent; color: var(--akzent); }
button.klein { padding: .1rem .5rem; font-size: .85rem; }
button:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=password], select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--linie); border-radius: 4px;
                           background: var(--flaeche); color: var(--text); }
label { display: block; margin: .4rem 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem 1.5rem; }
.leise { color: var(--text2); font-size: .88rem; }
.hinweis { background: var(--warn-weich); border-left: 3px solid var(--warn); padding: .6rem .9rem; margin: .8rem 0; }
.fehler { color: var(--fehler); }
.zustand { display: inline-block; padding: .05rem .5rem; border-radius: 9px; font-size: .8rem; background: var(--akzent-weich); }
.zustand.fertig { color: var(--gut); } .zustand.laeuft { color: var(--warn); font-weight: 600; } .zustand.fehler { color: var(--fehler); }
.ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { .ergebnis { grid-template-columns: 1fr; } }
.video { position: sticky; top: .5rem; }
.video video { width: 100%; background: #000; border-radius: 4px; }
.liste { max-height: 75vh; overflow-y: auto; border: 1px solid var(--linie); }
.liste td { white-space: normal; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .6rem; }
/* 21.10.2026: Auswahl zum Vorführen */
.auswahl { border-top: 1px solid var(--linie); padding-top: .5rem; }
tr.gewaehlt td { background: var(--akzent-weich, rgba(80,140,255,.12)); }
input.anhaken { width: 1.1rem; height: 1.1rem; cursor: pointer; }
/* 21.10.2026: Fortschritt beim Export */
.fortschritt { display: inline-flex; align-items: center; gap: .5rem; }
.fortschritt progress { width: 12rem; height: .9rem; accent-color: var(--akzent); }
img.vorschau { width: 96px; height: 54px; object-fit: cover; border-radius: 3px; display: block; }
.zone { font-weight: 700; } .zone.D { color: var(--fehler); } .zone.O { color: var(--gut); } .zone.N { color: var(--text2); }
.zone.unbestimmt { color: var(--warn); }
/* 18.10.2026: Eingabe einer Szene unter dem Video */
.eingabe { border-left: 3px solid var(--akzent); margin-top: .6rem; }
.eingabe button.klein + button.klein { margin-left: .15rem; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: .6rem 1.2rem; background: var(--warn-weich); }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* 21.10.2026: Vorführen */
.vf-kopf { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-bottom: .6rem; }
.vf-raster { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; }
@media (max-width: 900px) { .vf-raster { grid-template-columns: 1fr; } }
.vf-buehne { display: flex; flex-direction: column; background: #000; border-radius: 4px; overflow: hidden; }
.vf-buehne:fullscreen { border-radius: 0; height: 100vh; }
.vf-bild { position: relative; flex: 1; min-height: 0; display: flex; }
.vf-bild video { width: 100%; height: 100%; max-height: 75vh; background: #000; object-fit: contain; }
.vf-buehne:fullscreen .vf-bild video { max-height: none; }
.vf-luecke { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #000;
             color: #fff; font-size: 1.6rem; text-align: center; white-space: pre-line; padding: 1rem; }
.vf-luecke.halb { background: rgba(0, 0, 0, .55); }
.vf-leiste { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; padding: .5rem .8rem; background: var(--d-grund); color: #eee; }
.vf-zaehler { color: var(--d-text2); } .vf-titel { font-weight: 700; font-size: 1.15rem; } .vf-text { color: var(--d-text); }
.vf-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem .8rem; background: var(--d-grund); }
.vf-knoepfe .leise { color: var(--d-text2); }
.vf-liste { margin: 0; padding-left: 1.6rem; max-height: 80vh; overflow-y: auto; }
.vf-liste li { cursor: pointer; padding: .3rem .2rem; border-radius: 3px; }
.vf-liste li.aktiv { background: var(--akzent-weich); font-weight: 600; }
.vf-zeit { display: flex; align-items: center; gap: .8rem; padding: .4rem .8rem 0; background: var(--d-grund); }
.vf-zeit-bar { flex: 1; height: 12px; background: #333; border-radius: 6px; cursor: pointer; position: relative; touch-action: none; }
.vf-zeit-fuell { height: 100%; width: 0; background: var(--d-akzent); border-radius: 6px; pointer-events: none; }
.vf-zeit-text { color: var(--d-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 22.10.2026 (A3b): Zeichnen ins Standbild */
.vf-zeichnung { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; touch-action: none; }
.vf-zeichnung.an { pointer-events: auto; cursor: crosshair; }
.vf-luecke { z-index: 3; }
.vf-werkzeuge { display: none; flex-wrap: wrap; gap: .4rem; align-items: center; padding: 0 .8rem .5rem; background: var(--d-grund); }
.vf-werkzeuge.an { display: flex; }
.vf-werkzeuge .leise { color: var(--d-text2); }
.vf-werkzeuge button.gewaehlt, #vf-zeichnen.gewaehlt { outline: 2px solid #ffd479; outline-offset: 1px; }
.vf-farben { display: inline-flex; gap: .3rem; }
button.farbe { width: 1.6rem; height: 1.6rem; padding: 0; border: 2px solid #555; border-radius: 50%; }
button.farbe.gewaehlt { border-color: #fff; outline: 2px solid #ffd479; }
/* 22.10.2026 (A3e): vorbereitete Standbilder */
.vf-standbilder { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; padding: .3rem .8rem 0; background: var(--d-grund); color: var(--d-text); }
.vf-standbilder .leise { color: var(--d-text2); }
.sb-chip { padding: .1rem .5rem; border-radius: 999px; border: 1px solid #ffd479; background: transparent; color: #ffd479; cursor: pointer; font-size: .9rem; }
.sb-chip.gewaehlt { background: #ffd479; color: var(--d-grund); }
.sb-chip.aussen { border-style: dashed; border-color: #777; color: var(--d-text2); cursor: default; }
.sb-marke { position: absolute; top: -3px; width: 3px; height: 18px; margin-left: -1px; background: #ffd479; border-radius: 1px; pointer-events: none; }
/* 22.10.2026 (A1 + A2): Listen und Reihenfolge */
.listen select { max-width: 16em; }
.listen input[type=text] { width: 14em; }
td.sortier { white-space: nowrap; }
.griff { cursor: grab; user-select: none; touch-action: none; padding: 0 .35em; font-size: 1.1em; color: #8492a0; }
.griff:hover { color: inherit; }
tr.zieht { opacity: .45; }
tr.ziel-vor > td { box-shadow: inset 0 3px 0 var(--akzent); }
tr.ziel-nach > td { box-shadow: inset 0 -3px 0 var(--akzent); }
button.pfeil { padding: 0 .4em; }
.vf-zustand { color: #ffd479; font-weight: bold; white-space: nowrap; min-width: 9.5em; }   /* 22.10.2026 (A3a): Standbild / Zeitlupe */
/* 22.10.2026 (H8): einklappbarer Block, Fortschritt des Laufs */
.aufklapper { all: unset; cursor: pointer; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; width: 100%; font-size: 1.1rem; }
.aufklapper:focus-visible { outline: 2px solid var(--akzent); }
.aufklapper .pfeil { width: 1rem; }
.laufbalken { display: flex; gap: .6rem; align-items: center; margin: .3rem 0 .6rem; }
.laufbalken progress { width: 18rem; height: 1rem; accent-color: var(--akzent); }
.stufenbalken progress { width: 8rem; height: .8rem; accent-color: var(--akzent); }
/* 23.10.2026 (A3f): Zeichnen beim Markieren auf der Spielseite */
.sp-bild { position: relative; overflow: hidden; }   /* Paket 2: Zeichenfläche kann beim Verkleinern kurz überstehen */
.sp-bild video { display: block; }
.sp-werkzeuge { display: none; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 0; }
.sp-werkzeuge.an { display: flex; }
.sp-werkzeuge button.gewaehlt, #sp-zeichnen.gewaehlt { outline: 2px solid #d4a017; outline-offset: 1px; }
.sp-werkzeuge button.farbe { border-color: var(--linie); }
.sp-werkzeuge button.farbe.gewaehlt { border-color: var(--text); }
.sp-standbilder { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; margin: .5rem 0 0; }
.sp-standbilder .sb-chip { border-color: var(--warn); color: var(--warn); }
.sp-standbilder .sb-chip.gewaehlt { background: #ffd479; color: var(--d-grund); }
/* 23.10.2026 (A3g): Eingabefeld für Text im Bild, Kennzeichen „✎ n“ */
.z-text-eingabe { position: absolute; z-index: 4; min-width: 8em; box-sizing: border-box; background: rgba(0, 0, 0, .55); border: 1px dashed #fff;
                  border-radius: 2px; font-weight: 600; font-family: system-ui, "Segoe UI", sans-serif; outline: none; }
.sb-zahl { margin-left: .3rem; }
/* 23.10.2026 (A3h): mehrzeiliges Textfeld */
textarea.z-text-eingabe { resize: none; overflow: hidden; white-space: pre; }
/* 23.10.2026 (A3h 1b): Rückfrage bei ungespeicherten Änderungen */
.sp-frage { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); }
.sp-frage .karte { max-width: 26rem; margin: 0; }
/* 23.10.2026 (A3h Paket 2): Arbeitsansicht -- Video oben über die volle Breite, Liste darunter, Lauf-Block und „Seite je Drittel“ am Ende */
.spielseite { display: flex; flex-direction: column; }
.spielseite > .lauf-unten { order: 9; margin-top: 1.2rem; }
.spielseite .ergebnis { display: block; }
.spielseite .video { position: static; }   /* „sticky“ aus dem Zwei-Spalten-Aufbau: legte den Vollbild-Ersatz unter die Liste */
.spielseite .ergebnis > div + div { margin-top: 1rem; }
.seiten-block { margin-top: 1.2rem; }
.sp-buehne { position: relative; }
/* 23.10.2026 (A3h Paket 2b, Y1 a): eigene Bedienleiste mit Zeitleiste und Marken (statt Streifen unter der Leiste des Browsers) */
.sp-bild video { cursor: pointer; }
.sp-bedien { position: relative; display: flex; align-items: center; gap: .45rem; margin: .3rem 0 .2rem; }
.sp-bedien .sp-k { padding: .1rem .45rem; min-width: 2.1rem; font-size: .95rem; background: transparent; color: var(--text); border-color: var(--linie); }
.sp-bedien .sp-ansicht { display: inline-flex; gap: 0; white-space: nowrap; }
.sp-bedien .sp-ansicht button { border-radius: 0; }
.sp-bedien .sp-ansicht button:first-child { border-radius: 5px 0 0 5px; }
.sp-bedien .sp-ansicht button:last-child { border-radius: 0 5px 5px 0; }
.sp-bedien .sp-laut { width: 5rem; accent-color: var(--akzent); }
.sp-zeit { flex: none; display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .9rem; }   /* Breite setzt app.js fest */
.sp-zeitleiste { position: relative; flex: 1; min-width: 6rem; height: 18px; background: var(--linie); border-radius: 3px; cursor: pointer; touch-action: none; }
.sp-zeitleiste .sz { position: absolute; top: 3px; height: 12px; background: var(--d-sz); border-radius: 2px; min-width: 3px; pointer-events: none; }
.sp-zeitleiste .sz.gewaehlt { background: var(--d-sz-hell); box-shadow: 0 0 0 2px var(--text); z-index: 1; }
.sp-zeitleiste .sb { position: absolute; top: 0; height: 18px; width: 3px; margin-left: -1px; background: #ffd479; border-radius: 1px; pointer-events: none; z-index: 2; }
.sp-zeitleiste .stelle { position: absolute; top: -3px; height: 24px; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; z-index: 3; }
.sp-zeitleiste .stelle.luecke { opacity: .4; }
tr.markiert { outline: 2px solid var(--akzent); outline-offset: -2px; }    /* X6 b: zuletzt angesprungene Szene */
.sp-nur-vollbild { display: none; }
/* X1 b: die Eingabe als Tafel rechts über dem Bild -- in der normalen Ansicht wie im Arbeitsmodus, dunkel wie im Vollbild */
.sp-buehne #szene-eingabe { position: absolute; top: .6rem; right: .6rem; width: 360px; max-height: calc(var(--sp-bildh, 70vh) - 1.2rem);
    overflow-y: auto; box-sizing: border-box; margin: 0; z-index: 5;
    --flaeche: var(--d-flaeche); --linie: var(--d-linie); --text: var(--d-text); --text2: var(--d-text2); --akzent: var(--d-akzent);
    --akzent-weich: var(--d-akzent-weich); --auf-akzent: #06121f; --warn: #e9be5c;
    --warn-weich: #2b2415; --fehler: #ff8a80; background: rgba(18, 25, 33, .92); color: var(--text); }
/* Arbeitsmodus (X3 a): der Bereich füllt das Browserfenster (F11 für den ganzen Schirm), dunkel */
.sp-buehne.arbeitsmodus { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #000; padding: 0 .6rem .4rem;
    box-sizing: border-box; --flaeche: var(--d-flaeche); --linie: #3a4652; --text: var(--d-text); --text2: var(--d-text2); --akzent: var(--d-akzent);
    --akzent-weich: var(--d-akzent-weich); --auf-akzent: #06121f; --warn: #e9be5c; --fehler: #ff8a80; color: var(--text); }
.sp-buehne.arbeitsmodus .sp-bild { flex: 1; min-height: 0; }
.sp-buehne.arbeitsmodus .sp-bild video { width: 100%; height: 100%; object-fit: contain; }
.sp-buehne.arbeitsmodus .sp-nur-normal { display: none; }
.sp-buehne.arbeitsmodus .sp-nur-vollbild { display: block; margin: 0; }
.sp-buehne.arbeitsmodus .sp-meldungen { position: absolute; top: .8rem; left: 1.4rem; z-index: 5; max-width: 40%; }
.sp-buehne.arbeitsmodus .sp-meldungen p { background: rgba(18, 25, 33, .88); padding: .3rem .6rem; border-radius: 4px; }
html.arbeitsmodus-an { overflow: hidden; }
/* 23.10.2026 (A3h Paket 2c): Knopf „✚ Szene“, Lupe über der Zeitleiste, eigener Hinweis, Hilfe */
.sp-bedien .sp-neu { white-space: nowrap; }
.sp-gehe { display: flex; align-items: center; gap: .4rem; margin: 0 0 .2rem; flex-wrap: wrap; font-size: .9rem; }
.sp-gehe input { width: 5rem; }
#video-liste td:last-child button { white-space: nowrap; }
.video-rollen { max-height: 50vh; overflow-y: auto; }
.video-rollen thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.sp-lupe { display: none; position: absolute; bottom: calc(100% + 2px); z-index: 7; box-sizing: border-box; background: rgba(18, 25, 33, .94);
    border: 1px solid #3a4652; border-radius: 4px; color: var(--d-text); cursor: pointer; }
.sp-lupe .lu-rand { display: flex; justify-content: space-between; font-size: .75rem; line-height: 14px; padding: 0 .3rem; color: var(--d-text2); pointer-events: none; }
.sp-lupe .lu-sz { position: absolute; height: 13px; background: var(--d-sz); border-radius: 2px; }
.sp-lupe .lu-sz:hover { background: #6aaef5; }
.sp-lupe .lu-sz.gewaehlt { background: var(--d-sz-hell); box-shadow: 0 0 0 2px var(--d-text); }
.sp-lupe .lu-sb { position: absolute; width: 5px; margin-left: -2px; background: #ffd479; border-radius: 1px; z-index: 1; }
.sp-lupe .lu-stelle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--d-text); pointer-events: none; z-index: 2; }
.sp-hinweis { display: none; position: absolute; z-index: 8; max-width: 26rem; padding: .3rem .55rem; border-radius: 4px; background: var(--d-grund);
    color: var(--d-text); border: 1px solid #3a4652; font-size: .85rem; pointer-events: none; }
.sp-hinweis hr { border: 0; border-top: 1px solid #3a4652; margin: .25rem 0; }
.sp-hinweis .leise { color: var(--d-text2); }
.sp-hilfe { position: absolute; left: 0; right: 0; top: .6rem; z-index: 9; display: flex; justify-content: center; cursor: pointer; }
.sp-hilfe .karte { margin: 0; max-width: 40rem; background: rgba(18, 25, 33, .95); color: var(--d-text); border-color: #3a4652; }
.sp-hilfe td { background: transparent; border-color: #2a3640; padding: .2rem .5rem; color: var(--d-text); }
.sp-hilfe table { background: transparent; }
.sp-hilfe kbd { font: inherit; font-weight: 600; white-space: nowrap; }
/* 24.10.2026 (A3h Paket 2d): Seite „Einstellungen“ */
.einst-tasten button.taste { min-width: 7rem; background: var(--flaeche); color: var(--text); border-color: var(--linie); font-weight: 600; }
.einst-tasten button.taste.erfasst { border-color: var(--akzent); outline: 2px solid var(--akzent); }
.einst-tasten tr.konflikt td { background: var(--warn-weich); }
/* feste Spaltenbreiten: Hinweise („Standard: …“, „doppelt belegt“) sollen die Tasten-Knöpfe nicht verschieben (Prüfung G3) */
.einst-tasten td:first-child, .einst-tasten th:first-child { width: 26rem; }
.einst-tasten td:nth-child(2), .einst-tasten th:nth-child(2) { width: 13rem; }
/* 24.10.2026 (A3h Paket 2e): Stopp-Marke in Vorführen, Löschen in der Szenenliste */
.sb-marke.stopp { background: #ffffff; }
.liste td .zeile-loeschen { margin-left: .25rem; }
/* 24.10.2026 (A3h Paket 3): Vorführen mit der Bedienleiste der Spielseite, Zeitleiste über die Auswahl */
.vf-buehne { position: relative; }
.vf-bedienrahmen { padding: .2rem .8rem 0; background: var(--d-grund); color: var(--d-text); }
.sp-zeitleiste .grenze { position: absolute; top: -2px; height: 22px; width: 2px; margin-left: -1px; background: var(--d-text); opacity: .75; pointer-events: none; z-index: 2; }
.sp-zeitleiste .sb.stopp, .sp-lupe .lu-sb.stopp { background: #ffffff; }
/* Nachtrag 4a (V1 a): Ordnerauswahl in den Einstellungen */
.ordnerwahl { border: 1px solid var(--linie); border-radius: 6px; padding: .6rem .8rem; margin: .4rem 0 .8rem; max-width: 60rem; }
.ordnerwahl-kopf, .ordnerwahl-fuss { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ordnerwahl-liste { max-height: 18rem; overflow-y: auto; margin: .5rem 0; display: flex; flex-direction: column; align-items: stretch; }
.ordnerwahl-eintrag { background: transparent; color: var(--text); border: 0; border-radius: 4px; text-align: left; padding: .2rem .5rem; }
.ordnerwahl-eintrag:hover, .ordnerwahl-eintrag:focus { background: var(--akzent-weich); }
.angaben-text { margin-right: .3rem; }
/* Paket 4b: nötige Funktionen und Gruppen der Stufentabelle */
.funktion.noetig { opacity: .85; }
/* Paket 4d (Y2 a): Name und Dauer oben, Beschreibung und Vermerke eingerückt darunter */
label.funktion { display: block; }
.raster.funktionen { grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); }   /* Name und Dauer passen in eine Zeile (Ort: 313 px) */
.funktion-kopf { display: block; }
.fortschritt-art { white-space: nowrap; }   /* Paket 4e: „noch ≈ …“ */
.funktion-kopf .zeit-angabe { white-space: nowrap; }
.funktion-text { display: block; margin: .1rem 0 0 1.6rem; font-size: .86rem; }
.funktion-text .noetig-fuer { margin-left: 0; margin-right: .3rem; }
.funktion-braucht { color: var(--text); }
.noetig-fuer { display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: 9px; font-size: .78rem; background: var(--akzent-weich); color: var(--akzent); }
tr.stufen-gruppe td { font-weight: 600; font-size: .85rem; color: var(--text2); background: var(--grund); padding-top: .5rem; }
/* Paket 4c: „alle“, ausgeblendete Szenen */
.funktion-alle { margin: .2rem 0 .4rem; }
tr.ausgeblendet td { opacity: .5; }
.ausgeblendet-marke { color: var(--text2); }
/* ================= 03.11.2026 (Paket 6a): Gestaltung winHockey ================= */
/* G3: Seitenleiste links statt Kopfzeile; der Inhalt bekommt die volle Höhe */
.rahmen { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); min-height: 100vh; }
.leiste { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 1.4rem; z-index: 20;
    padding: 1.1rem .7rem; background: var(--leiste); border-right: 1px solid var(--leiste-linie); color: var(--leiste-text); }
.leiste .marke { display: flex; flex-direction: column; gap: .3rem; padding: .2rem .6rem .9rem; border-bottom: 2px solid var(--leiste-akzent);
    color: var(--leiste-text); text-decoration: none; }
.leiste .marke svg { height: 2.1rem; width: auto; max-width: 100%; display: none; }
.leiste .marke .modul { font-family: var(--schrift-tafel); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leiste-text2); }
.leiste nav { display: flex; flex-direction: column; gap: .15rem; }
.leiste nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 6px; text-decoration: none;
    color: var(--leiste-text2); font-family: var(--schrift-tafel); font-size: .86rem; letter-spacing: .06em; text-transform: uppercase;
    border-left: 3px solid transparent; transition: background-color .12s ease, color .12s ease; }
.leiste nav a svg { width: 1.25rem; height: 1.25rem; flex: none; }
.leiste nav a:hover { background: var(--leiste-linie); color: var(--leiste-text); }
.leiste nav a.aktiv { color: var(--leiste-text); background: var(--leiste-linie); border-left-color: var(--leiste-akzent); }
.leiste nav a:focus-visible, .leiste .marke:focus-visible { outline: 2px solid var(--leiste-akzent); outline-offset: 2px; }
.leiste .unten { margin-top: auto; padding: 0 .65rem; font-size: .75rem; color: var(--leiste-text2); }
.rahmen > .inhalt { width: 100%; box-sizing: border-box; padding: 1.4rem 2rem 3rem; }
.leiste .marke svg.kurz { height: 2.2rem; }
/* Nachtrag 6a-a (N6): Logo-Probe A/B/C/E, Standard A; nach Marcos Wahl bleibt eines */
@media (max-width: 1100px) {
    .rahmen { grid-template-columns: 4.2rem minmax(0, 1fr); }
    .leiste { padding: 1rem .45rem; align-items: center; }
    .leiste .marke { padding: .2rem 0 .8rem; align-items: center; }
    .leiste .marke svg.voll, .leiste .marke .modul, .leiste nav a span { display: none !important; }
    .leiste .unten .text, .leiste .unten .lang { display: none; }
    .leiste .unten .kurz-knopf { display: inline-flex; }
    .leiste .unten { padding: 0; align-items: center; }
    .leiste nav a { padding: .55rem; justify-content: center; }
    .rahmen > .inhalt { padding: 1.2rem 1.2rem 3rem; }
}
/* G2: Tafelschrift für Überschriften, Spaltenköpfe, Uhr und Zähler */
h1, h2, h3, .vf-titel, .sp-zeit, .vf-zeit-text, .vf-zaehler, .aufklapper { font-family: var(--schrift-tafel); }
h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: .01em; margin: .2rem 0 1rem; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; }
th { font-family: var(--schrift-tafel); font-weight: 600; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.sp-zeit { font-size: 1rem; letter-spacing: .02em; }
/* G1: Karten statt loser Flächen, feine Kanten statt Schatten */
.karte { border-radius: 10px; padding: 1.1rem 1.3rem; }
table { border-radius: 8px; }
.liste { border-radius: 8px; background: var(--flaeche); }
.liste table { border-radius: 0; }
.video video, .vf-buehne { border-radius: 8px; }
input[type=text], input[type=password], input[type=number], select, textarea { border-radius: 6px; }
input[type=text]:focus-visible, input[type=password]:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 0; border-color: var(--akzent); }
button, .knopf { border-radius: 6px; font-weight: 500; }
button:focus-visible, .knopf:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.zustand { border-radius: 99px; padding: .08rem .6rem; font-weight: 600; font-size: .78rem; }
.zustand.fertig { background: color-mix(in srgb, var(--gut) 14%, transparent); }
.zustand.laeuft { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.zustand.fehler { background: color-mix(in srgb, var(--fehler) 14%, transparent); }
/* G6: Zeichen in einer festen Symbolschrift, eigene SVG-Zeichen */
button, .knopf, .sb-chip { font-family: var(--schrift), var(--schrift-zeichen); }
.zeichen { width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* G7: Abstände und Knöpfe in Listen, Leerzustände */
td > button.klein + button.klein, td > .klein + .klein { margin-left: .35rem; }
.zeile-bearbeiten { margin-left: .5rem; }   /* G7: „Bullybearbeiten“ -- Razor nimmt den Leerraum vor dem Knopf weg */
#spiele-liste td:last-child { white-space: nowrap; }
#spiele-liste td:last-child button.klein { min-width: 2.1rem; padding: .2rem .5rem; font-size: .95rem; }
.leer { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.6rem 1.4rem; }
.leer .leer-titel { font-family: var(--schrift-tafel); font-size: 1.15rem; font-weight: 600; }
/* G8: kurze Bewegung, nur CSS; mit reduzierter Bewegung aus */
@keyframes va-aufleuchten { 0% { background: color-mix(in srgb, var(--akzent) 28%, transparent); } 100% { background: transparent; } }
@keyframes va-herein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes va-aus { from { opacity: 1; } to { opacity: 0; } }
/* Nachtrag 6a-a (N7): „rechnet“ pulsiert ruhig -- Marcos Wahl gegen 6a-5 */
@keyframes va-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.zustand.laeuft { animation: va-atmen 1.8s ease-in-out infinite; }
tr.klickbar { transition: background-color .1s ease; }
button:not(.schlicht), .knopf { transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease; }
button:not(:disabled):not(.schlicht):active, .knopf:active { transform: translateY(1px) scale(.98); }
button:not(:disabled):not(.schlicht):hover { filter: brightness(1.08); }
.sp-buehne #szene-eingabe { animation: va-herein .16s ease-out; }
tr.markiert > td { animation: va-aufleuchten .18s ease-out 2 alternate; }
.gespeichert-meldung { animation: va-aus .18s ease-out 2.2s forwards; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    button:not(:disabled):active, .knopf:active { transform: none; }
}
#video-liste td { padding: .5rem .7rem; }
.video-rollen { max-height: 60vh; border: 1px solid var(--linie); border-radius: 8px; }
#video-liste td:nth-child(2) { white-space: nowrap; }
/* 6a-2: Vorführbühne ist immer dunkel -- dieselben Werte wie Tafel und Arbeitsmodus (sonst dunkle Schrift auf dunkler Leiste im hellen Modus) */
.vf-buehne { --flaeche: var(--d-flaeche); --linie: #3a4652; --text: var(--d-text); --text2: var(--d-text2); --akzent: var(--d-akzent);
    --akzent-weich: var(--d-akzent-weich); --auf-akzent: #06121f; --warn: #e9be5c; --fehler: #ff8a80; color: var(--text); }
/* ================= Nachtrag 6a-a (03.11.2026) ================= */
/* N1: Überschrift behält den Fokus nach dem Seitenwechsel, ohne Rahmen */
h1:focus, h1[tabindex="-1"]:focus { outline: none; }
/* N2: Links in Tabellen ohne Unterstreichung, beim Überfahren mit */
td a { text-decoration: none; }
td a:hover, td a:focus-visible { text-decoration: underline; }
/* N3: Aufklapper als ruhige Zeile, ohne Drück- und Hover-Effekt (Verdacht Firefox) */
.aufklapper { border-radius: 6px; padding: .2rem .3rem; margin: -.2rem -.3rem; }
.aufklapper:hover { background: var(--akzent-weich); }
/* N4: „Angelegt ▾“ als Spaltenkopf */
button.kopf-sortieren { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap; }
button.kopf-sortieren:hover { color: var(--text); }
button.kopf-sortieren:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* N5/N6: Schalter unten in der Seitenleiste */
.leiste .unten { display: flex; flex-direction: column; gap: .7rem; }
.leiste .schalter { display: flex; gap: 2px; background: var(--leiste-linie); border-radius: 7px; padding: 2px; }
.leiste .schalter button { all: unset; cursor: pointer; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 1.6rem;
    padding: .28rem .35rem; border-radius: 5px; color: var(--leiste-text2); font-family: var(--schrift-tafel); font-size: .75rem; letter-spacing: .05em; }
.leiste .schalter button:hover { color: var(--leiste-text); }
.leiste .schalter button:focus-visible { outline: 2px solid var(--leiste-akzent); }
.leiste .schalter button svg { width: 1rem; height: 1rem; }
:root:not([data-thema]) .thema [data-t="system"], :root[data-thema="hell"] .thema [data-t="hell"], :root[data-thema="dunkel"] .thema [data-t="dunkel"] { background: var(--leiste-akzent); color: var(--schalter-text, #06121f); }   /* nach 6a-d wiederhergestellt: aktiver Farbmodus (fiel beim Entfernen der Logo-Probe mit weg) */
.leiste .unten .text { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leiste-text2); font-family: var(--schrift-tafel); }
@media (min-width: 1101px) { .leiste .unten .kurz-knopf { display: none; } }   /* 6b: stand nach der schmalen Regel und blendete den Knopf auch schmal aus */
.leiste .kurz-knopf button { all: unset; cursor: pointer; padding: .4rem; border-radius: 6px; color: var(--leiste-text); }
.leiste .kurz-knopf button:focus-visible { outline: 2px solid var(--leiste-akzent); }
.leiste .kurz-knopf svg { width: 1.2rem; height: 1.2rem; display: none; }
:root:not([data-thema]) .kurz-knopf [data-t="system"], :root[data-thema="hell"] .kurz-knopf [data-t="hell"], :root[data-thema="dunkel"] .kurz-knopf [data-t="dunkel"] { display: block; }

/* ================= Nachtrag 6a-b/6a-c: heller Modus = H2 (Eis und Nachtblau), nur im hellen Modus ================= */
/* Bausteine mit Rückfall auf den bisherigen Stand (ohne Variante unverändert) */
a { color: var(--link, var(--akzent)); }
td a { color: var(--tab-link, var(--link, var(--akzent))); font-weight: var(--tab-link-w, 400); }
button, .knopf { background: var(--haupt, var(--akzent)); border-color: var(--haupt, var(--akzent)); color: var(--auf-haupt, var(--auf-akzent)); }
button.zweit, .knopf.zweit { background: var(--zweit-grund, transparent); color: var(--zweit-text, var(--akzent)); border-color: var(--zweit-rand, var(--akzent)); }
.karte, table, .liste { box-shadow: var(--karte-schatten, none); }
.liste table { box-shadow: none; }
th { background: var(--kopf-grund, transparent); }
/* immer dunkle Flächen: helle Bausteine dort zurücksetzen */
.sp-buehne #szene-eingabe, .sp-buehne.arbeitsmodus, .vf-buehne, .sp-hilfe { --link: initial; --tab-link: initial; --tab-link-w: initial; --zweit-text: initial; --zweit-rand: initial; --zweit-grund: initial; --haupt: initial; --auf-haupt: initial; --kopf-grund: initial; --karte-schatten: initial; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --tab-link: var(--text); --tab-link-w: 600; --zweit-text: #334155; --zweit-rand: #cfd6df; --zweit-grund: var(--flaeche); } }
:root[data-thema="hell"] { --tab-link: var(--text); --tab-link-w: 600; --zweit-text: #334155; --zweit-rand: #cfd6df; --zweit-grund: var(--flaeche); }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) .sp-buehne:not(.arbeitsmodus) { background: var(--b-grund, var(--d-grund)); padding: .55rem .7rem .5rem; border-radius: 10px; color: var(--d-text); color-scheme: dark; --flaeche: var(--d-flaeche); --linie: #3a4652; --text: var(--d-text); --text2: var(--d-text2); --akzent: var(--d-akzent); --akzent-weich: var(--d-akzent-weich); --auf-akzent: #06121f; --warn: #e9be5c; --fehler: #ff8a80; --link: initial; --tab-link: initial; --tab-link-w: initial; --zweit-text: initial; --zweit-rand: initial; --zweit-grund: initial; --haupt: initial; --auf-haupt: initial; } }
:root[data-thema="hell"] .sp-buehne:not(.arbeitsmodus) { background: var(--b-grund, var(--d-grund)); padding: .55rem .7rem .5rem; border-radius: 10px; color: var(--d-text); color-scheme: dark; --flaeche: var(--d-flaeche); --linie: #3a4652; --text: var(--d-text); --text2: var(--d-text2); --akzent: var(--d-akzent); --akzent-weich: var(--d-akzent-weich); --auf-akzent: #06121f; --warn: #e9be5c; --fehler: #ff8a80; --link: initial; --tab-link: initial; --tab-link-w: initial; --zweit-text: initial; --zweit-rand: initial; --zweit-grund: initial; --haupt: initial; --auf-haupt: initial; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) .sp-buehne:not(.arbeitsmodus) .sp-bedien .sp-k { color: var(--d-text); border-color: #3a4652; } }
:root[data-thema="hell"] .sp-buehne:not(.arbeitsmodus) .sp-bedien .sp-k { color: var(--d-text); border-color: #3a4652; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --grund: #e9f0f7; --flaeche: #ffffff; --linie: #d3deea; --text: #10233a; --text2: #3d5a78; --kopf-grund: #f1f6fb; --link: #0b5cbf; --zweit-text: #0f2238; --zweit-rand: #c2d1e1; --leiste: #0f2238; --leiste-linie: #173352; --leiste-text: #ffffff; --leiste-text2: #9fb3c8; --leiste-akzent: #4aa3ff; --b-grund: #0f2238; } }
:root[data-thema="hell"] { --grund: #e9f0f7; --flaeche: #ffffff; --linie: #d3deea; --text: #10233a; --text2: #3d5a78; --kopf-grund: #f1f6fb; --link: #0b5cbf; --zweit-text: #0f2238; --zweit-rand: #c2d1e1; --leiste: #0f2238; --leiste-linie: #173352; --leiste-text: #ffffff; --leiste-text2: #9fb3c8; --leiste-akzent: #4aa3ff; --b-grund: #0f2238; }
/* Logo F */
.leiste .marke svg.voll { display: block; }   /* Nachtrag 6a-d: Logo F fest */
@media (max-width: 1100px) { .leiste .marke svg.voll { display: none; } .leiste .marke svg.kurz { display: block; } }

/* ================= Nachtrag 6a-c/6a-d: dunkler Modus = D2 (Schiefer, Leiste nachtblau wie H2) ================= */
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --tab-link: var(--text); --tab-link-w: 600; --zweit-text: #c6d3e1; --zweit-rand: #2c4566; --zweit-grund: transparent; } }
:root[data-thema="dunkel"] { --tab-link: var(--text); --tab-link-w: 600; --zweit-text: #c6d3e1; --zweit-rand: #2c4566; --zweit-grund: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --grund: #10161e; --flaeche: #18212c; --linie: #29374a; --text: #e8edf3; --text2: #a0adbd; --akzent-weich: #172a40; --leiste: #0f2238; --leiste-linie: #173352; --leiste-text2: #9fb3c8; } }
:root[data-thema="dunkel"] { --grund: #10161e; --flaeche: #18212c; --linie: #29374a; --text: #e8edf3; --text2: #a0adbd; --akzent-weich: #172a40; --leiste: #0f2238; --leiste-linie: #173352; --leiste-text2: #9fb3c8; }
/* Paket 6b (F2): Sprachschalter DE | EN */
.leiste .schalter.sprache button.an { background: var(--leiste-akzent); color: var(--schalter-text, #06121f); }
.leiste .kurz-knopf .sprache-kurz { font-family: var(--schrift-tafel); font-size: .8rem; letter-spacing: .06em; }
#spiele-liste th { white-space: nowrap; }   /* 6b: „We are“ nicht umbrechen */

/* ================= Paket 6c (K1, 04.11.2026): ruhige Bühne -- in Videofenster, Eingabe, Arbeitsmodus und Vorführen sind Zweitknöpfe,
   Felder und Links neutral; blau bleiben Speichern, gewählte Kategorie, Fokus, Zeitleiste. !important, weil die Hell-Regeln der Bühne
   diese Bausteine mit höherer Spezifität auf „initial“ (= Akzent) zurücksetzen ================= */
.sp-buehne, .sp-buehne #szene-eingabe, .sp-buehne.arbeitsmodus, .vf-buehne {
    --zweit-text: #dbe3ec !important; --zweit-rand: #3a4757 !important; --zweit-grund: #1b2531 !important; --link: #c9d3de !important; }
.sp-buehne button.zweit:hover, .vf-buehne button.zweit:hover { border-color: #66778a; }
.sp-buehne a, .vf-buehne a { color: var(--link); text-decoration: underline; text-decoration-color: #56677a; text-underline-offset: 2px; }
.sp-buehne #szene-eingabe { background: #121a24; border: 1px solid #2c3948; border-left: 1px solid #2c3948; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
.sp-buehne #szene-eingabe input[type=text], .sp-buehne #szene-eingabe select, .sp-buehne #sp-gehe input, .sp-buehne #sp-gehe select {
    background: #0c121a; border-color: #3a4757; color: var(--d-text); }
.sp-buehne .sp-bedien .sp-ansicht button:not(.zweit) { background: #3a4757; border-color: #3a4757; color: #ffffff; }
.sp-buehne .sp-bedien .sp-ansicht button.zweit { background: transparent; }

/* Paket 7a (05.11.2026): Konto unten in der Seitenleiste; Formularseiten Anmelden, Admin anlegen, Passwort ändern */
.leiste .konto { display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid var(--leiste-linie); padding-top: .6rem; }
.leiste .konto-name { display: flex; align-items: center; gap: .5rem; color: var(--leiste-text); font-size: .8rem; overflow-wrap: anywhere; }
.leiste .konto-name .leise { color: var(--leiste-text2); }
.leiste .konto svg { width: 1.1rem; height: 1.1rem; flex: none; }
.leiste .konto-knopf { all: unset; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--leiste-text2); font-size: .78rem; }
.leiste .konto-knopf:hover { color: var(--leiste-text); }
.leiste .konto-knopf:focus-visible { outline: 2px solid var(--leiste-akzent); outline-offset: 2px; }
.leiste .abmelden-form { margin: 0; }
@media (max-width: 1100px) { .leiste .konto span { display: none; } .leiste .konto { align-items: center; } }
.anmelde-rahmen { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 2rem; box-sizing: border-box; background: var(--grund); }
.anmelde-karte { width: 100%; max-width: 26rem; padding: 1.6rem 1.8rem; }
.anmelde-logo { display: flex; align-items: center; gap: .6rem; font-family: var(--schrift-tafel); font-size: 1.1rem; margin-bottom: 1rem; }
.anmelde-logo svg { width: 2.2rem; height: 2.2rem; }
.anmelde-karte h1 { font-size: 1.4rem; margin: 0 0 .8rem; }
.anmelde-form { display: flex; flex-direction: column; gap: .75rem; }
.anmelde-form label { display: flex; flex-direction: column; gap: .25rem; }
.anmelde-form label.haken { flex-direction: row; align-items: center; gap: .45rem; }
.anmelde-form button[type="submit"] { align-self: flex-start; }
.fehler-zustand { color: var(--fehler, #d7263d); }
.von-angabe { font-size: .85em; margin-left: .6em; }

/* Nachtrag 7a-a: Logo F auf den Anmeldeseiten, Fuß mit Version und DE | EN, Auge an Passwortfeldern, Version in der Seitenleiste */
.anmelde-logo { display: flex; align-items: flex-end; gap: .5rem; margin-bottom: 1.2rem; color: var(--text); }
.anmelde-logo svg.voll { height: 2.4rem; width: auto; display: block; }
.anmelde-logo .modul { font-family: var(--schrift-tafel); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); padding-bottom: .3rem; }
.anmelde-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; font-size: .8rem; }
.anmelde-sprache a { text-decoration: none; padding: .15rem .35rem; border-radius: 4px; color: var(--text2); font-family: var(--schrift-tafel); letter-spacing: .06em; }
.anmelde-sprache a.an { color: var(--text); background: var(--linie); }
.pw-feld { position: relative; display: inline-flex; align-items: stretch; }
/* Nachtrag 7d-a: eigenes Formular je Passwortfeld, ohne Einfluss auf das Layout */
.zuruecksetzen-form { display: inline; margin: 0; }
.anmelde-form .pw-feld { display: flex; }
/* Nachtrag 7d-b: Kontoname auf „Passwort ändern“ (nur lesen, für Firefox der Benutzername) */
/* Nachtrag 7d-c: nicht anklickbar, nicht markierbar -- sieht nicht nach Eingabe aus */
.anmelde-form .feld-lesen { display: flex; flex-direction: column; gap: .25rem; }
.anmelde-form input.nur-lesen { background: transparent; border-color: transparent; padding-left: 0; box-shadow: none; cursor: default; pointer-events: none; user-select: none; outline: none; }
.pw-feld input { flex: 1; padding-right: 2.2rem; }
/* Nachtrag 7a-b: feste Klickfläche über die ganze Feldhöhe (vorher Inline-Knopf mit Zeilenhöhe 0 → nur die Mitte klickbar) */
.pw-auge { all: unset; box-sizing: border-box; position: absolute; right: 0; top: 0; bottom: 0; width: 2.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0 4px 4px 0; color: var(--text2); }
.pw-auge:hover { color: var(--text); }
.pw-auge:focus-visible { outline: 2px solid var(--akzent); }
.pw-auge svg { width: 1.15rem; height: 1.15rem; }
.pw-auge .zu { display: none; }
.pw-auge[aria-pressed="true"] .zu { display: block; }
.pw-auge[aria-pressed="true"] .offen { display: none; }
/* Nachtrag 7a-b: Version rechts in der Zeile „Abmelden“ */
.leiste .abmelden-form { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.leiste .fassung { font-size: .68rem; color: var(--leiste-text2); letter-spacing: .04em; }
.leiste .benutzer-zahl { margin-left: auto; min-width: 1.2rem; padding: 0 .3rem; border-radius: 9px; background: var(--leiste-akzent); color: #0c1117; font-size: .7rem; text-align: center; line-height: 1.2rem; }
@media (max-width: 1100px) { .leiste .fassung { display: none; } .leiste nav a .benutzer-zahl { display: inline-block !important; position: absolute; margin: -1.2rem 0 0 1.2rem; } }

/* Paket 7b: Band „Entwicklung“ (nur in der Entwicklungsfassung) */
.fassung-band { display: inline-block; margin: .1rem 0 .6rem; padding: .15rem .5rem; border-radius: 4px; background: #e0a100; color: #1a1300; font-family: var(--schrift-tafel); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.anmelde-logo .fassung-band { margin: 0 0 .3rem .4rem; }
@media (max-width: 1100px) { .leiste .fassung-band { font-size: 0; padding: .3rem; } .leiste .fassung-band::before { content: "E"; font-size: .7rem; } }

/* Paket 7d: Neuerungen (Punkt in der Seitenleiste, Seite) */
.leiste nav a .neu-punkt { display: inline-block !important; width: .5rem; height: .5rem; border-radius: 50%; background: var(--leiste-akzent); margin-left: auto; flex: none; }
@media (max-width: 1100px) { .leiste nav a { position: relative; } .leiste nav a .neu-punkt { position: absolute; top: .3rem; right: .3rem; } }
.neuerung-version h2 { display: flex; align-items: baseline; gap: .8rem; }
.neuerung-datum { font-size: .85rem; font-weight: normal; }
.neuerung-art { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text2); margin: .9rem 0 .3rem; font-family: var(--schrift-tafel); }
.neuerung-liste { margin: 0; padding-left: 1.2rem; }
.neuerung-liste li { margin: .25rem 0; line-height: 1.45; }
.neuerung-offen { border-left: 3px solid #e0a100; }
/* ================= Paket 6f (07.11.2026): Startseite mit Video, verwandte Seiten mit Startbild ================= */
.start-grund { position: relative; isolation: isolate; overflow: hidden; align-items: center; min-height: 100vh; min-height: 100dvh; padding: 2rem 1rem;
    background: #0b1118 var(--start-bild) center / cover no-repeat; }
.start-grund::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(6, 10, 16, .55); transition: background .7s ease; pointer-events: none; }
.start-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none;
    transition: filter .7s ease, transform .7s ease; }
.start-buehne::before { background: rgba(6, 10, 16, .12); }
.start-buehne.start-offen::before { background: rgba(6, 10, 16, .45); }
.start-buehne.start-offen .start-video { filter: blur(3px) brightness(.8); transform: scale(1.03); }
/* Karte als Milchglas */
.start-grund .anmelde-karte { background: color-mix(in srgb, var(--flaeche) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1); border-color: color-mix(in srgb, var(--linie) 70%, transparent); box-shadow: 0 18px 50px rgba(3, 8, 15, .45);
    margin-bottom: 0; }
.start-buehne .anmelde-karte { transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.start-intro .anmelde-karte { opacity: 0; transform: scale(.97); pointer-events: none; }
/* Hinweis während des Intros */
.start-tipp { position: absolute; left: 1rem; right: 1rem; bottom: 6vh; margin: 0; text-align: center; pointer-events: none; opacity: 0;
    font-family: var(--schrift-tafel); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 237, 243, .88);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.start-intro .start-tipp { animation: start-tipp .8s ease 2.2s forwards; }
@keyframes start-tipp { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .start-video { display: none; } }