/* LAZ Bronze BW - Oberflaeche
   Regeln siehe Projekt: ui-richtlinien.md
   Knopfarten: .knopf.primaer (Hauptaktion, max. eine je Bereich), .knopf (Nebenaktion),
   .textlink (zurueckhaltend), .textlink.gefahr / button.gefahr (zerstoerend, geringe Auffaelligkeit),
   .knopf.gefahr-bestaetigen (nur innerhalb eines aufgeklappten Loeschbereichs) */

:root{--rot:#b00000;--rot-dunkel:#8a0000;--text:#1d1d1f;--grau:#5f6368;--linie:#d9d9de;--flaeche:#f4f4f6;--weiss:#fff;--gut:#0a7a2f;--warn:#a15c00;--fokus:#1a5fb4}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.45;color:var(--text);background:var(--flaeche)}

/* Kopf und Hauptmenue */
header.kopf{background:var(--rot);color:#fff;padding:0 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px}
.kopfzeile{display:flex;align-items:center;justify-content:space-between;min-height:60px;flex:1 1 auto}
header .marke{font-weight:700;font-size:1.1em;display:flex;flex-direction:column;padding:8px 0}
header .mandant{font-weight:400;font-size:.8em;opacity:.9}
header a.startlink{color:#fff;text-decoration:none}
header a.startlink:hover{text-decoration:underline}
nav.haupt{display:flex;flex-wrap:wrap;gap:0 4px;align-items:center}
nav.haupt a,nav.haupt button.link{color:#fff;text-decoration:none;font-size:.95em;background:none;border:0;border-radius:6px;padding:10px 10px;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font-family:inherit;font-weight:400}
nav.haupt a:hover,nav.haupt button.link:hover{background:rgba(255,255,255,.15)}
nav.haupt a.aktiv{background:rgba(255,255,255,.22);font-weight:600}
nav.haupt form.abmelden{display:inline}
nav.haupt button.link{justify-content:flex-start}
.menueknopf{display:none}
.nur-mobil{display:none}

/* Inhalt */
main{max-width:1600px;margin:16px auto;background:var(--weiss);padding:16px 20px 28px;border-radius:8px}
h1{font-size:1.5em;margin:.2em 0 .6em}
h2{font-size:1.15em;margin:1.8em 0 .6em;padding-bottom:4px;border-bottom:2px solid var(--flaeche)}
h3{font-size:1.05em;margin:0 0 6px}
a{color:var(--rot)}
.zurueck{margin:0 0 4px}.zurueck a{text-decoration:none}
.klein{font-size:.85em;color:var(--grau)}
.rechts{text-align:right!important}
form.inline{display:inline}

/* Formulare */
.formular label{display:block;margin:10px 0 4px;font-weight:600;font-size:.92em}
input,select,textarea{font:inherit;padding:10px;min-height:44px;border:1px solid #a9a9b0;border-radius:6px;width:100%;background:#fff;color:var(--text)}
input[type=checkbox]{min-height:0;width:20px;height:20px;padding:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--fokus);outline-offset:0;border-color:var(--fokus)}
input:disabled,select:disabled{background:var(--flaeche);color:var(--grau)}
input.kurz{width:auto;min-width:9em;max-width:14em}
.formular.schmal{max-width:420px}
.reihe{display:flex;flex-wrap:wrap;gap:0 16px}
.reihe>div{flex:1 1 220px}
.reihe>div.schmal{flex:0 1 140px}
label.haken{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:.95em;font-weight:400;cursor:pointer}
label.haken input{flex:0 0 auto;margin-top:2px}

/* Knoepfe: einheitliche Groesse, Hierarchie ueber Farbe und Rahmen */
button,.knopf{font:inherit;font-weight:600;font-size:.95em;line-height:1.2;padding:11px 18px;min-height:44px;border-radius:6px;border:1px solid #8e8e96;background:#fff;color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:hover,.knopf:hover{background:var(--flaeche)}
button:focus-visible,.knopf:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.knopf.primaer,button.primaer{background:var(--rot);border-color:var(--rot);color:#fff}
.knopf.primaer:hover,button.primaer:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel)}
.knopf.klein,button.klein{min-height:36px;padding:7px 12px;font-size:.88em}
/* zurueckhaltende und zerstoerende Aktionen: Textlink ohne Rahmen */
.textlink,button.gefahr{background:none;border:0;min-height:36px;padding:6px 4px;font-weight:400;font-size:.92em;color:var(--grau);text-decoration:underline;text-underline-offset:3px}
.textlink:hover,button.gefahr:hover{background:none;color:var(--text)}
.textlink.gefahr,button.gefahr{color:var(--rot)}
.textlink.gefahr:hover,button.gefahr:hover{color:var(--rot-dunkel)}
.knopf.gefahr-bestaetigen{border-color:var(--rot);color:var(--rot)}
.knopf.gefahr-bestaetigen:hover{background:#fde8e8}

/* Aktionsleiste: steht immer unter der Tabelle oder dem Formular, auf das sie wirkt */
.aktionsleiste,.knopfleiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.formular>button{margin-top:16px}

/* Tabellen */
table{border-collapse:collapse;width:100%}
table.liste th,table.liste td,table.eingabe th,table.eingabe td{text-align:left;padding:8px;border-bottom:1px solid var(--linie);vertical-align:middle}
table.liste th,table.eingabe th{font-size:.85em;color:var(--grau);font-weight:600}
table.liste tbody tr:hover{background:#fafafa}
table.eingabe td{padding:4px}
table.eingabe td.nr{font-size:.88em;white-space:nowrap;color:var(--grau);width:1%}
table.eingabe tr.fest td.nr{color:var(--rot);font-weight:600}
.tabelle-scroll{overflow-x:auto}
.tabelle-scroll table.eingabe{min-width:560px}
td.gut{color:var(--gut);font-weight:600}td.warn{color:var(--warn);font-weight:600}
tr.inaktiv td{color:var(--grau)}
td.aktionen{white-space:nowrap}
.status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.82em;background:var(--flaeche)}
.status-aktiv,.status-laeuft{background:#fde8e8;color:var(--rot)}
.status-abgeschlossen,.status-freigegeben{background:#e6f4ea;color:var(--gut)}

/* Inline bearbeiten in Tabellenzeilen */
details.inline-bearbeiten{display:inline-block;text-align:left}
details.inline-bearbeiten summary{list-style:none}
details.inline-bearbeiten summary::-webkit-details-marker{display:none}
details.inline-bearbeiten[open] summary{display:none}
details.inline-bearbeiten form{display:flex;gap:8px;align-items:center}
details.inline-bearbeiten input{width:11em}

/* Meldungen */
.meldung{padding:10px 14px;border-radius:6px;margin:0 0 14px;border-left:4px solid}
.meldung ul{margin:0;padding-left:18px}
.meldung-ok{background:#e6f4ea;border-color:var(--gut)}
.meldung-info{background:#eef3fb;border-color:#3a6fc4}
.meldung-fehler{background:#fde8e8;border-color:var(--rot)}
pre.fehlerdetails{white-space:pre-wrap;font-size:.85em;background:#fde8e8;padding:10px;border-radius:6px}

/* Karten und aufklappbare Bereiche */
.karte{border:1px solid var(--linie);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.karte p{margin:0 0 10px;font-size:.92em}
details.einfuegen{margin:0 0 12px;padding:8px 12px;background:var(--flaeche);border-radius:6px}
details.einfuegen summary{cursor:pointer;font-weight:600;min-height:32px}
details.einfuegen textarea{margin:6px 0 8px;font-family:ui-monospace,Consolas,monospace;font-size:.9em}
details.archiv summary{cursor:pointer;color:var(--grau);margin-bottom:8px;min-height:32px}
/* Loeschbereich: bewusst unauffaellig, Inhalt erst nach Aufklappen */
details.loeschbereich{margin-top:6px}
details.loeschbereich summary{cursor:pointer;color:var(--grau);font-size:.92em;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:8px 0}
details.loeschbereich[open] summary{color:var(--rot)}
details.loeschbereich[open]{border:1px solid var(--linie);border-radius:8px;padding:4px 16px 14px}
details.loeschbereich p{font-size:.92em}
code{background:var(--flaeche);padding:1px 4px;border-radius:3px}

/* Smartphone und schmale Tablets: Burger-Menue (nur wenn JavaScript aktiv ist) */
@media (max-width:760px){
  header.kopf{padding:0 12px}
  .kopfzeile{min-height:56px;width:100%}
  .nur-desktop{display:none}
  .js .menueknopf{display:inline-flex;align-items:center;gap:8px;background:none;border:2px solid rgba(255,255,255,.7);color:#fff;min-height:44px;padding:6px 12px;font-weight:600}
  .js .menueknopf:hover{background:rgba(255,255,255,.15)}
  .burger{display:inline-flex;flex-direction:column;gap:4px;width:20px}
  .burger span{display:block;height:2px;background:#fff;border-radius:1px;transition:transform .2s,opacity .2s}
  .menue-offen .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menue-offen .burger span:nth-child(2){opacity:0}
  .menue-offen .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  nav.haupt{flex-direction:column;align-items:stretch;width:100%;padding:0 0 12px;gap:2px}
  .js nav.haupt{display:none}
  .js .menue-offen nav.haupt{display:flex}
  nav.haupt a,nav.haupt button.link{font-size:1.05em;min-height:48px;padding:12px;width:100%;border-top:1px solid rgba(255,255,255,.2);border-radius:0}
  nav.haupt a.aktiv{border-radius:6px;border-top-color:transparent}
  nav.haupt form.abmelden{display:block}
  .nur-mobil{display:block}
  .menue-person{font-weight:600;padding:4px 12px 10px;font-size:.95em}
  .menue-person span{font-weight:400;opacity:.9;font-size:.9em}
}

/* Smartphone */
@media (max-width:640px){
  main{margin:0;border-radius:0;padding:12px 16px 24px}
  table.liste thead{display:none}
  table.liste tr{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--linie)}
  table.liste td.titel{order:-1;font-weight:600;font-size:1.05em;padding-bottom:4px}
  table.liste td{display:block;border:0;padding:3px 0;text-align:left!important}
  table.liste td[data-label]::before{content:attr(data-label) ": ";color:var(--grau);font-size:.85em}
  .aktionsleiste .knopf.primaer,.aktionsleiste button.primaer,.knopfleiste button.primaer{width:100%}
  details.inline-bearbeiten form{flex-wrap:wrap}
  details.inline-bearbeiten input{width:100%}
}
details.inline-bearbeiten input.breit{width:22em;max-width:100%}

/* Startseite: zwei grosse Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.kachel{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:10px;border:2px solid var(--linie);background:#fff;color:var(--text);text-decoration:none;min-height:140px}
.kachel:hover{border-color:#8e8e96;background:#fafafa}
.kachel-haupt{border-color:var(--rot)}
.kachel-haupt:hover{border-color:var(--rot-dunkel);background:#fff8f8}
.kachel-titel{font-size:1.3em;font-weight:700;color:var(--rot)}
.kachel-text{color:var(--grau)}
.kachel-info{margin-top:auto;font-weight:600}

/* Durchfuehren: Auswahllisten mit grossen Flaechen */
.kontextleiste{display:flex;flex-wrap:wrap;gap:4px 18px;padding:10px 12px;background:var(--flaeche);border-radius:8px;margin:0 0 16px;font-size:.95em}
.kontextleiste .textlink{min-height:0;padding:0 2px;font-size:.9em}
.auswahlliste{display:flex;flex-direction:column;gap:10px}
.auswahl{display:grid;grid-template-columns:1fr;grid-template-areas:"titel" "text";column-gap:14px;align-items:center;padding:14px 16px;min-height:64px;border:1px solid #8e8e96;border-radius:10px;background:#fff;color:var(--text);text-decoration:none}
.auswahl:hover{background:#fafafa;border-color:var(--text)}
.auswahl-titel{grid-area:titel;font-weight:700;font-size:1.08em}
.auswahl-text{grid-area:text;color:var(--grau);font-size:.92em}
.auswahl-zeit{grid-area:zeit;font-weight:700;font-size:1.25em;min-width:3.2em}
.auswahl.mit-zeit{grid-template-columns:auto 1fr;grid-template-areas:"zeit titel" "zeit text"}
.auswahl.naechste{border:2px solid var(--rot);background:#fff8f8;min-height:84px}
.auswahl.naechste .auswahl-zeit,.auswahl.naechste .auswahl-titel{color:var(--rot)}
.auswahl.gesperrt{background:var(--flaeche);border-style:dashed;color:var(--grau)}
.marke-heute{display:inline-block;background:var(--rot);color:#fff;font-size:.75em;padding:1px 8px;border-radius:10px;vertical-align:middle}
.gruppenkopf{display:flex;flex-wrap:wrap;gap:8px 28px;padding:12px 0 14px;border-bottom:2px solid var(--flaeche);margin-bottom:14px}
.knopf.gross{width:100%;min-height:60px;font-size:1.1em;margin-bottom:6px}
table.personen td:first-child{color:var(--grau);width:45%}

/* QR-Karussell am Laptop: immer nur ein Code sichtbar */
.qr-karussell{max-width:520px;margin:8px auto 0}
.qr-fenster{overflow:hidden;border:2px solid var(--linie);border-radius:12px;background:#fff;touch-action:pan-y;user-select:none;cursor:grab}
.qr-band{display:flex;transition:transform .25s ease}
.qr-folie{flex:0 0 100%;padding:18px 20px 16px;text-align:center}
.qr-titel{font-size:1.4em;margin:0 0 12px;padding:0;border:0}
.qr-code{width:100%;max-width:340px;margin:0 auto;aspect-ratio:1/1}
.qr-code svg{width:100%;height:auto;display:block}
.qr-folie:not(.aktiv) .qr-code{visibility:hidden}
.qr-text{color:var(--grau);margin:12px 0 0;min-height:2.9em}
.qr-belegt{width:100%;max-width:340px;aspect-ratio:1/1;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#e6f4ea;border:2px solid var(--gut);border-radius:10px;color:var(--gut);font-size:1.1em;padding:16px}
.qr-belegt strong{font-size:1.3em;color:var(--text)}
.qr-steuerung{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.qr-steuerung .knopf{min-width:120px}
.qr-steuerung .knopf:disabled{opacity:.4;cursor:default}
.qr-position{font-weight:700;font-size:1.1em}
.mitte{text-align:center}
/* Schiedsrichter-Seiten auf dem Smartphone */
body.sr header .marke span:first-child{font-weight:700}
.auswahl[disabled]{background:var(--flaeche);color:var(--grau);border-style:dashed;cursor:default}
button.auswahl{font:inherit;text-align:left;width:100%;cursor:pointer}
@media (max-width:640px){
  table.liste.personen tr{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0}
  table.liste.personen td{padding:0}
  table.liste.personen td:first-child{width:auto;font-size:.92em}
  table.liste.personen td:last-child{text-align:right!important}
}

/* Bewertungsbogen auf dem Smartphone */
.bogen-leiste{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:8px 0;margin:6px 0 8px;border-bottom:1px solid var(--linie)}
.summenkarte{display:flex;align-items:baseline;gap:10px}
.summenkarte span{color:var(--grau)}
.summenkarte strong{font-size:1.8em;line-height:1}
.sendestatus{font-size:.85em;padding:4px 10px;border-radius:12px;background:var(--flaeche);color:var(--grau);text-align:right}
.sendestatus.ok{background:#e6f4ea;color:var(--gut)}
.sendestatus.laeuft{background:#eef3fb;color:#3a6fc4}
.sendestatus.offline,.sendestatus.fehler{background:#fde8e8;color:var(--rot);font-weight:600}
details.kategorie{border:1px solid #8e8e96;border-radius:10px;margin:0 0 10px;background:#fff}
details.kategorie>summary{list-style:none;cursor:pointer;padding:14px 16px;min-height:56px;display:flex;flex-direction:column;gap:4px}
details.kategorie>summary::-webkit-details-marker{display:none}
details.kategorie[open]>summary{border-bottom:1px solid var(--linie);background:var(--flaeche);border-radius:10px 10px 0 0}
.kat-titel{font-weight:700;line-height:1.3}
.kat-titel::before{content:"▸ ";color:var(--grau)}
details.kategorie[open] .kat-titel::before{content:"▾ "}
.kat-info{display:flex;gap:12px;align-items:center;font-size:.88em;color:var(--grau)}
.kat-anzahl.aktiv{background:var(--rot);color:#fff;border-radius:10px;padding:1px 9px;font-weight:600}
ul.kriterien,ul.freie-fehler{list-style:none;margin:0;padding:0}
li.kriterium{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--linie)}
li.kriterium.hat-fehler{background:#fff4f4}
.kr-text{flex:1 1 auto;font-size:.95em}
.zaehler{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.zaehler button{width:48px;height:48px;min-height:48px;padding:0;font-size:1.5em;font-weight:700;border-radius:8px}
.zaehler .plus{background:var(--rot);border-color:var(--rot);color:#fff}
.zaehler .plus:hover{background:var(--rot-dunkel)}
.zaehler .anzahl{min-width:1.6em;text-align:center;font-weight:700;font-size:1.2em}
li.kriterium:not(.hat-fehler) .anzahl{color:var(--grau);font-weight:400}
ul.freie-fehler li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--linie);background:#fff4f4}
details.frei-neu{padding:10px 16px 14px}
details.frei-neu>summary{list-style:none;display:inline-flex}
details.frei-neu>summary::-webkit-details-marker{display:none}
details.frei-neu[open]>summary{display:none}
.frei-form{display:flex;gap:8px;flex-wrap:wrap}
.frei-form input{flex:1 1 200px}
.aktionsleiste.abgabe .knopf.primaer{width:100%;min-height:56px;font-size:1.1em}
ul.eintragsliste{margin:0 0 12px;padding-left:20px}
ul.eintragsliste li{margin:4px 0}
/* Rolle freigeben am Laptop */
[hidden]{display:none!important}
.qr-freigeben{margin:4px 0 0}
.fw-neu{margin-top:10px}
/* Besprechung am Laptop */
td.zahl,th.zahl{text-align:right}
.stand{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.88em;font-weight:600}
.stand-ok{background:#e6f4ea;color:var(--gut)}
.stand-offen{background:#fff4e0;color:#8a5300}
.stand-fehlt{background:#f1f3f4;color:var(--grau)}
.fehlerliste{list-style:none;margin:0 0 10px;padding:0}
.fehlerzeile{display:grid;grid-template-columns:40px 1fr auto;gap:4px 10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--linie)}
.fz-kat{font-weight:700;color:var(--grau);font-size:.9em}
.fz-punkte{font-weight:700;white-space:nowrap}
.fz-aktionen{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:4px 14px}
.fz-aktionen form{margin:0}
.fehlerzeile.entfernt .fz-text,.fehlerzeile.entfernt .fz-punkte,.eintragsliste li.entfernt{text-decoration:line-through;color:var(--grau)}
.fz-marke{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;background:#fff4e0;color:#8a5300;font-size:.8em;font-weight:600;text-decoration:none}
.besprechung-bogen{margin-bottom:10px}
fieldset.gutschriften{border:1px solid var(--linie);border-radius:8px;padding:10px 14px 2px;margin:0 0 12px}
fieldset.gutschriften legend{font-weight:600;padding:0 4px}
table.rechnung tr.summe td{font-weight:700;border-top:2px solid var(--text)}
.ergebnis-ok{color:var(--gut);font-size:1.15em}
.ergebnis-nein{color:var(--rot);font-size:1.15em}
.besprechung-bogen .fehlerliste,.besprechung-bogen > p{padding:0 14px}
/* Gruen: alles erledigt, weiter zum naechsten Schritt */
.knopf.gruen{background:var(--gut);border-color:var(--gut);color:#fff}
.knopf.gruen:hover{background:#075c23;border-color:#075c23;color:#fff}
.aktionsleiste.mitte{justify-content:center}
/* Auslosung Schritt fuer Schritt */
.los-wizard{margin:8px 0 16px}
.los-kopf{background:#fff4e0;border:2px solid #e0a040;border-radius:12px;padding:12px 16px;margin-bottom:12px;position:sticky;top:0;z-index:5}
.los-kopf.fertig{background:#e6f4ea;border-color:var(--gut)}
.los-zaehler{font-size:.9em;color:var(--grau);font-weight:600}
.los-funktion{font-size:1.6em;margin:2px 0 4px;line-height:1.2}
.los-frage{margin:0;font-size:.95em}
.los-personen{display:grid;gap:10px}
.los-person .auswahl-titel{font-size:1.15em}
.los-person.gewaehlt{border:2px solid var(--gut);background:#e6f4ea}
.los-titel-liste{margin:20px 0 6px;font-size:1em}
.los-uebersicht{list-style:none;margin:0;padding:0}
.los-zeile{display:flex;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:10px 12px;border:0;border-bottom:1px solid var(--linie);background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.los-zeile.aktiv{background:#fff4e0;font-weight:700}
.los-zeile.leer .los-z-name{color:var(--grau);font-style:italic}
.los-z-name{font-weight:600;text-align:right}
button.knopf:disabled{opacity:.45;cursor:not-allowed}
.los-person.belegt{opacity:.6;border-style:dashed}
/* U2: Rollen, Startseite der Rolle, Stoppuhr */
.qr-aufgaben{margin:-6px 0 10px;color:var(--grau);font-weight:600}
.qr-inhaber{margin:8px 0 0;font-size:.95em}
.qr-gesperrt{background:#f1f3f4;border-color:var(--grau);color:var(--grau)}
.rollenkopf{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;background:#f1f3f4;border-radius:10px;padding:10px 14px;margin:0 0 14px}
.auswahl.gesperrt{opacity:.55;border-style:dashed}
.auswahl.erledigt{opacity:.7}
.erledigt-liste{margin:16px 0}
.erledigt-liste summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.aktionsleiste.oben{margin:0 0 8px}
form.inline{display:inline;margin:0}
table.zeiten tr.abweichung td{background:#fff4e0}
.stoppuhr{border:2px solid var(--linie);border-radius:12px;padding:12px 14px;margin:0 0 16px;background:#fff}
.su-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.su-titel{font-weight:700}
.su-status{font-size:.85em;padding:2px 8px;border-radius:999px;background:#e6f4ea;color:var(--gut)}
.su-status.wartet{background:#fff4e0;color:#8a5300}
.su-anzeige{font-size:2.6em;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;margin:6px 0;color:var(--grau)}
.su-anzeige.laeuft{color:var(--text)}
.su-anzeige.fertig{color:var(--gut)}
.su-naechster{text-align:center;margin:0 0 10px;font-size:1.05em}
.su-art{color:var(--grau)}
.su-knopf{width:100%;min-height:64px;font-size:1.25em}
.su-knopf.su-ende{background:#1f1f1f;border-color:#1f1f1f;color:#fff}
.su-liste{margin:10px 0 0;padding-left:20px;font-size:.9em;color:var(--grau)}
/* Vorbereitung mit Kacheln (U6) */
.kachel{position:relative}
.kachel-nr{position:absolute;top:14px;right:16px;font-weight:700;color:var(--grau)}
.kachel-fehlt{border-color:var(--rot)}
.kachel-warn{color:var(--rot);font-weight:700}
.pruefliste{margin:6px 0 0 0;padding-left:20px}
.pruefliste li{margin:2px 0}
.rollenkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:8px 0}
.rollenkarte{border:1px solid var(--linie);border-radius:10px;padding:10px 14px 12px;margin:0;background:#fff;min-width:0}
.rollenkarte legend{font-weight:700;padding:0 4px}
.rollenkarte .haken{display:flex;align-items:center;gap:8px;min-height:36px;margin:0}
.rollenkarte label{display:block;margin-top:8px}
.rollenkarte select{width:100%}
.rollenkarte .textlink{margin-top:6px}
.feldtext{margin:8px 0 0;font-weight:600}
/* Bahnen-Board (Kachel Bahnen) */
.board{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.board-meldung{grid-column:1 / -1;margin:0}
.pool{position:sticky;top:0;z-index:5;max-height:40vh;overflow:auto;border:1px solid var(--linie);border-radius:10px;padding:10px;background:var(--flaeche);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.pool-kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.pool-karten{display:flex;flex-wrap:wrap;gap:8px}
.pool-karten .bk{width:210px}
.pool h2{margin:0;border:0;font-size:1.1em}
.pool.ziel-aktiv{outline:3px dashed var(--fokus);outline-offset:-3px}
.pool .bk{position:static;margin:0;min-height:62px;justify-content:flex-start;padding-top:5px;padding-bottom:5px}
.pool .bk-text{line-height:1.3}
.pool .bk-titel{white-space:normal}
.pool-filter{display:flex;gap:6px}
.pf{min-width:84px;min-height:36px;padding:0 10px;border-radius:6px;border:2px solid transparent;font-weight:700;font-size:.85em;cursor:pointer}
.pf:not(.aktiv){background:#fff;color:var(--grau);border-color:var(--linie);text-decoration:line-through}
.pf-bronze{background:#7a4a1e;color:#fff}
.pf-silber{background:#d7dade;color:#1d1d1f}
.pf-gold{background:#f0c94a;color:#1d1d1f}
.pf:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.pf-bronze.aktiv:hover{background:#673e18}
.pf-silber.aktiv:hover{background:#c8ccd1}
.pf-gold.aktiv:hover{background:#e6bc34}
.pf:not(.aktiv):hover{background:var(--flaeche)}
.pool-hinweis{margin:8px 0 0}
.board-scroll{overflow-x:auto;border:1px solid var(--linie);border-radius:10px}
.board-raster{display:flex;min-width:min-content}
.board-achse{position:relative;width:52px;flex:0 0 52px;margin-top:124px;border-right:1px solid var(--linie);background:#fff}
.board-achse span{position:absolute;right:6px;transform:translateY(-50%);font-size:.8em;color:var(--grau)}
.board-spalte{flex:1 0 220px;max-width:340px;border-right:1px solid var(--linie)}
.board-kopf{height:124px;box-sizing:border-box;padding:8px 10px;border-bottom:1px solid var(--linie);display:flex;flex-direction:column;gap:4px;background:#fff}
.board-titel{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.board-titel .board-zweck{align-self:center}
.board-details{align-self:stretch;text-align:center;margin-top:2px}
.board-name{font-weight:700;font-size:1.1em;color:var(--text)}
.board-zweck{font-size:.8em;font-weight:700;align-self:flex-start;padding:1px 8px;border-radius:10px}
.zweck-loescheinsatz{background:#fde8e8;color:#8a0000}
.zweck-modul{background:#e6eefb;color:#163f78}
.board-rasterwahl{display:flex;align-items:center;gap:6px;font-size:.9em;margin:2px 0}
.board-rasterwahl select{min-height:32px;padding:2px 6px;font-size:.95em;width:auto}
.board-kopf .textlink{font-size:.85em}
.board-koerper{position:relative;background:repeating-linear-gradient(to bottom,#fff 0,#fff 179px,#ececf0 179px,#ececf0 180px)}
.board-slot{position:absolute;left:0;right:0;box-sizing:border-box;border-bottom:1px dashed #e0e0e6;padding:2px 4px}
.board-slot .slot-zeit{font-size:.75em;color:#9a9aa2}
.board-slot.ziel-aktiv{background:#e6eefb;outline:2px dashed var(--fokus);outline-offset:-2px}
.board.waehlt .board-slot:not(:has(.bk)){cursor:pointer}
.bk{box-sizing:border-box;height:100%;border-radius:6px;padding:3px 8px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;cursor:grab;border:1px solid rgba(0,0,0,.25);line-height:1.2}
.bk[draggable="false"],.bk:not([draggable]){cursor:default}
.bk-titel{font-weight:700;font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-text{font-size:.75em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-bronze{background:#7a4a1e;color:#fff}
.bk-silber{background:#d7dade;color:#1d1d1f}
.bk-gold{background:#f0c94a;color:#1d1d1f}
.bk-pause{background:repeating-linear-gradient(135deg,#d6e6fb 0,#d6e6fb 8px,#c3d9f6 8px,#c3d9f6 16px);color:#0f2f5c;border:1px dashed #2f62a8}
.bk.gewaehlt{outline:3px solid var(--fokus);outline-offset:1px}
.bk:focus-visible{outline:3px solid var(--fokus);outline-offset:1px}
.bk.verborgen{display:none}
.board.laedt{opacity:.6;pointer-events:none}
@media (max-width:760px){
  .pool{max-height:45vh}
  .pool-karten .bk{width:100%}
}
/* Wettkampfbuero (U4) */
.bk-na{background:#fff;color:#5f6368;border:1px dashed #8e8e96;text-decoration:line-through}
.bk-fertig{box-shadow:inset 6px 0 0 #0a7a2f}
.buero-tabelle .aktionen form{display:inline}
.zeile-na td{color:#5f6368}
/* U5a Auslosung der Module: Kombination waehlen */
.komb-wahl{display:grid;gap:10px;margin:8px 0 16px}
.formular label.komb,label.komb{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;align-items:start;margin:0;padding:14px 16px;border:1px solid #8e8e96;border-radius:10px;background:#fff;cursor:pointer;font-weight:400}
.formular label.komb input,label.komb input{grid-column:1;grid-row:1 / span 2;width:24px;height:24px;min-height:0;margin:2px 0 0;padding:0}
.komb-nr{grid-column:2;font-weight:700;font-size:1.1em}
.komb-module{grid-column:2;display:grid;gap:2px;font-size:.92em;color:var(--grau)}
.komb-module b{display:inline-block;min-width:2.4em;color:var(--text)}
label.komb:has(input:checked){border:2px solid var(--rot);background:#fff7f6}
/* Automatische Aktualisierung: Symbol mit Sekunden in der Kopfzeile */
.auto-neu{background:none;border:0;padding:2px;margin:0 0 0 auto;min-height:0;color:#fff;cursor:pointer;line-height:0;border-radius:50%}
.auto-neu:hover,.auto-neu:focus{background:rgba(255,255,255,.15);color:#fff}
.auto-neu-pfeil{fill:#fff}
.auto-neu-zahl{fill:#fff;font-size:6.5px;font-weight:700}
.auto-neu.pausiert .auto-neu-pfeil{fill:rgba(255,255,255,.6)}
.kopfzeile .auto-neu + .menueknopf{margin-left:8px}
.auto-neu.rechts{margin:0}
/* U5b Modulbogen */
.su-anzeige.ueber{color:var(--warn)}
.modulkopf{display:flex;flex-direction:column;gap:2px;margin:10px 0 14px;padding:12px 14px;border-left:4px solid var(--rot);background:var(--flaeche);border-radius:6px}
.modulkopf > strong{font-size:1.2em}
/* U5c Besprechung Modulpruefung */
.zeit-modul{margin:10px 0 4px}
.zeit-modul .reihe{display:flex;gap:8px;align-items:center;max-width:420px}
.zeit-modul .reihe input{flex:1 1 auto}

/* Fusszeile mit Schalter Testmodus (dezent, damit er in einer Demo nicht stoert) */
.fusszeile{max-width:1600px;margin:0 auto 24px;padding:0 20px;font-size:.85em;color:var(--grau,#666);text-align:right}
.fusszeile form{display:inline-flex;align-items:center;gap:6px;margin:0}
.fusszeile .textlink{min-height:0;padding:0 2px;font-size:1em}
.testmodus-stand.an{color:var(--rot);font-weight:700}

/* Zeitraum des Tages in der Kopfzeile der Bahnen (unauffaellig) */
.vb-kopf{margin:0 0 12px}
.zeitraum{display:inline}
.zeitraum summary{display:inline;cursor:pointer;list-style:none}
.zeitraum summary::-webkit-details-marker{display:none}
.zeitraum summary .textlink{min-height:0;padding:0 2px;text-decoration:underline}
.zeitraum[open] summary .textlink{display:none}
.zeitraum-form{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 0 8px;padding:6px 10px;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche)}
.zeitraum-form label{display:inline-flex;align-items:center;gap:4px;margin:0;font-weight:400}
.zeitraum-form select{min-height:32px;padding:2px 6px;width:auto}

/* Aufklapper: Standard-Bedienelement mit Rahmen und Pfeil (z. B. abgeschlossene Mannschaften) */
details.aufklapper{border:1px solid #8e8e96;border-radius:10px;background:#fff}
details.aufklapper>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 16px;font-weight:600}
details.aufklapper>summary::-webkit-details-marker{display:none}
details.aufklapper>summary .chevron{flex:0 0 auto;transition:transform .15s}
details.aufklapper[open]>summary{border-bottom:1px solid var(--linie);background:var(--flaeche);border-radius:10px 10px 0 0}
details.aufklapper[open]>summary .chevron{transform:rotate(180deg)}
details.aufklapper>.auswahlliste{padding:10px}

/* ==========================================================================
   Robuste Oberflaeche fuer Schiedsrichter auf dem Smartphone (body.sr)
   Entwurf vom 15.10.2026: Knoepfe stehen auf (runde Ecken, Rahmen, Kante unten,
   sinken beim Antippen ein). Behaelter liegen flach (fast eckig, grau, duenne Linie).
   Schrift Atkinson Hyperlegible ab 18 px, Kontrast ab 5,7 : 1, hell und dunkel.
   ========================================================================== */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
body.sr{--s-bg:#FFFFFF;--s-flaeche:#F1F1F1;--s-text:#111111;--s-leise:#3A3A3A;--s-rand:#1A1A1A;--s-lip:#1A1A1A;--s-linie:#C4C4C4;
  --s-rot:#A30000;--s-rotlip:#5C0000;--s-kopf:#A30000;--s-gut:#0B6B2B;--s-gutfl:#E3F2E7;--s-info:#0B4F9C;--s-infofl:#E6EFFA;
  --s-warn:#8A5A00;--s-warnfl:#FFF1D6;--s-fehlerfl:#FDE8E8;--s-gesperrt:#5E5E5E;--s-fokus:#0B4F9C;
  --rot:var(--s-rot);--text:var(--s-text);--grau:var(--s-leise);--flaeche:var(--s-flaeche);--linie:var(--s-linie);--gut:var(--s-gut);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:18px;line-height:1.4;background:var(--s-bg);color:var(--s-text)}
html[data-thema=dunkel] body.sr{--s-bg:#0F0F0F;--s-flaeche:#1E1E1E;--s-text:#F7F7F7;--s-leise:#CFCFCF;--s-rand:#F7F7F7;--s-lip:#8C8C8C;--s-linie:#4A4A4A;
  --s-rot:#C81E1E;--s-rotlip:#5A0000;--s-kopf:#7A0000;--s-gut:#5BE08A;--s-gutfl:#12321C;--s-info:#7DB6FF;--s-infofl:#10223A;
  --s-warn:#F2B544;--s-warnfl:#33260A;--s-fehlerfl:#3A1414;--s-gesperrt:#A8A8A8;--s-fokus:#7DB6FF;color-scheme:dark}
html[data-thema=dunkel]{background:#0F0F0F}
body.sr main{background:var(--s-bg);border-radius:0;margin:0 auto;max-width:640px;padding:16px 16px 32px}
body.sr h1{font-size:1.5em}
body.sr .klein{color:var(--s-leise);font-size:.94em}
body.sr header.kopf{background:var(--s-haupt);color:var(--s-haupttext);border-bottom:var(--s-kopflinie)}
body.sr header.kopf .marke,body.sr header.kopf .marke span{color:var(--s-haupttext)}
body.sr .kopfzeile .auto-neu-pfeil,body.sr .kopfzeile .auto-neu-zahl{fill:var(--s-haupttext)}
body.sr .kopfzeile{min-height:72px;gap:10px}
body.sr header .marke span{font-size:1em}
body.sr header .marke .mandant{font-size:.9em}
/* Knopf im Kopf: hell oder dunkel, Aktualisieren */
body.sr .thema-knopf{flex:0 0 auto;min-width:48px;min-height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#fff;border:2px solid #fff;border-radius:12px}
body.sr .thema-knopf:hover{background:rgba(255,255,255,.15)}
body.sr .kopfzeile .auto-neu{margin-left:auto;min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}

/* ---- Knoepfe: stehen auf ---- */
body.sr button,body.sr .knopf,body.sr a.auswahl,body.sr button.auswahl,body.sr .textlink,body.sr details.kategorie>summary,body.sr details.aufklapper>summary{
  font-family:inherit;font-size:1.05em;font-weight:700;line-height:1.25;min-height:60px;padding:12px 18px;border-radius:16px;
  border:3px solid var(--s-rand);background:var(--s-knopf);color:var(--s-text);text-decoration:none;box-shadow:0 5px 0 var(--s-lip);
  margin-bottom:5px;transition:transform .05s,box-shadow .05s;-webkit-tap-highlight-color:transparent}
body.sr button:active,body.sr .knopf:active,body.sr a.auswahl:active,body.sr button.auswahl:active,body.sr .textlink:active,body.sr details.kategorie>summary:active,body.sr details.aufklapper>summary:active{
  transform:translateY(4px);box-shadow:0 1px 0 var(--s-lip)}
body.sr button:hover,body.sr .knopf:hover,body.sr a.auswahl:hover,body.sr .textlink:hover{background:var(--s-knopf);color:var(--s-text)}
body.sr button:focus-visible,body.sr .knopf:focus-visible,body.sr a:focus-visible,body.sr summary:focus-visible{outline:4px solid var(--s-fokus);outline-offset:3px}
body.sr .knopf.primaer,body.sr button.primaer,body.sr .zaehler .plus{background:var(--s-haupt);border:var(--s-hauptrand);color:var(--s-haupttext);box-shadow:0 5px 0 var(--s-hauptlip)}
body.sr .knopf.primaer:hover,body.sr button.primaer:hover,body.sr .zaehler .plus:hover{background:var(--s-haupt);color:var(--s-haupttext)}
body.sr .knopf.primaer:active,body.sr button.primaer:active,body.sr .zaehler .plus:active{box-shadow:0 1px 0 var(--s-hauptlip)}
body.sr .knopf.klein,body.sr button.klein{min-height:56px;font-size:1em}
/* Knopf, der (noch) nicht geht: flach, gestrichelt */
body.sr button:disabled,body.sr .knopf:disabled,body.sr button.knopf:disabled,body.sr .auswahl[disabled]{opacity:1;background:var(--s-flaeche);color:var(--s-gesperrt);border:3px dashed var(--s-gesperrt);box-shadow:none;transform:none;cursor:not-allowed}
/* Frueher Textlinks: jetzt Nebenknoepfe ueber die volle Breite */
body.sr .textlink{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;text-align:center}
body.sr .textlink.gefahr{color:var(--s-rot);border-color:var(--s-rot)}
body.sr .aktionsleiste{flex-direction:column;align-items:stretch;gap:12px}
body.sr .aktionsleiste>*{width:100%;box-sizing:border-box}
body.sr .aktionsleiste.oben{margin:0 0 14px}
/* Zurueck: Pfeil nach links */
body.sr .zurueck-knopf{justify-content:flex-start;gap:10px;min-height:56px}
body.sr .zurueck-knopf::before{content:"";width:24px;height:24px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
/* Auswahlknoepfe (Namen, Mannschaften, Personen): Pfeil nach rechts, wenn sie weiterfuehren */
body.sr .auswahlliste{gap:12px}
body.sr .auswahl{position:relative;min-height:64px;padding:12px 48px 12px 16px;text-align:left;width:100%;box-sizing:border-box}
body.sr a.auswahl::after,body.sr button.auswahl:not([disabled])::after{content:"";position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
body.sr .auswahl-titel{font-size:1.05em;color:inherit}
body.sr .auswahl-text{color:inherit;font-weight:400;font-size:.92em}
body.sr .auswahl-zeit{font-size:1.3em}
body.sr .auswahl.naechste{background:var(--s-haupt);border:var(--s-hauptrand);color:var(--s-haupttext);box-shadow:0 5px 0 var(--s-hauptlip);min-height:84px}
body.sr .auswahl.naechste:hover{background:var(--s-haupt);color:var(--s-haupttext)}
body.sr .auswahl.naechste:active{box-shadow:0 1px 0 var(--s-hauptlip)}
body.sr .auswahl.naechste .auswahl-zeit,body.sr .auswahl.naechste .auswahl-titel{color:var(--s-haupttext)}
body.sr .auswahl.erledigt{opacity:1}
body.sr .marke-heute{background:transparent;color:inherit;border:2px solid currentColor;font-size:.8em;font-weight:700;padding:1px 10px}
/* Wartende Mannschaft: kein Knopf, sondern flacher Behaelter */
body.sr .auswahl.gesperrt{opacity:1;background:var(--s-flaeche);border:1px solid var(--s-linie);border-radius:4px;box-shadow:none;color:var(--s-leise);padding-right:16px}
body.sr .auswahl.gesperrt::after{display:none}

/* ---- Behaelter: liegen flach ---- */
body.sr .rollenkopf,body.sr .stoppuhr,body.sr .los-kopf,body.sr details.kategorie,body.sr details.aufklapper,body.sr .meldung{
  background:var(--s-flaeche);border:1px solid var(--s-linie);border-radius:4px;box-shadow:none}
body.sr .rollenkopf{padding:12px 16px}
body.sr .gruppenkopf{border-bottom:1px solid var(--s-linie)}
body.sr .meldung{border-left-width:1px;color:var(--s-text)}
body.sr .meldung-ok{background:var(--s-gutfl)}
body.sr .meldung-info{background:var(--s-infofl)}
body.sr .meldung-fehler{background:var(--s-fehlerfl)}
body.sr .los-kopf{background:var(--s-warnfl);padding:14px 16px}
body.sr .los-kopf.fertig{background:var(--s-gutfl)}
body.sr .los-zaehler{color:var(--s-leise)}
body.sr .los-zeile{min-height:52px;color:var(--s-text);border-bottom:1px solid var(--s-linie);box-shadow:none;border-radius:0;border-top:0;border-left:0;border-right:0;background:none;margin:0;font-weight:400}
body.sr .los-zeile:active{transform:none;box-shadow:none}
body.sr .los-zeile.aktiv{background:var(--s-warnfl);font-weight:700}
body.sr .los-person.belegt{opacity:1}
body.sr .los-person.gewaehlt{background:var(--s-gutfl);border-color:var(--s-gut)}
/* Kategorie und Aufklapper: flacher Behaelter, Kopfzeile ist ein Knopf */
body.sr details.kategorie,body.sr details.aufklapper{padding:10px;margin:0 0 14px}
body.sr details.kategorie>summary,body.sr details.aufklapper>summary{list-style:none;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:12px 16px}
body.sr details.kategorie>summary::-webkit-details-marker,body.sr details.aufklapper>summary::-webkit-details-marker{display:none}
body.sr details.kategorie[open]>summary,body.sr details.aufklapper[open]>summary{background:var(--s-knopf);border-radius:16px;border-bottom:3px solid var(--s-rand)}
body.sr details.kategorie>summary::after{content:"";flex:0 0 auto;width:26px;height:26px;background:currentColor;transition:transform .15s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
body.sr details.kategorie[open]>summary::after{transform:rotate(180deg)}
body.sr .kat-titel::before,body.sr details.kategorie[open] .kat-titel::before{content:none}
body.sr .kat-info{color:var(--s-leise);font-weight:400}
body.sr .kat-anzahl.aktiv{background:var(--s-haupt);color:var(--s-haupttext);border:var(--s-chiprand)}
body.sr details.aufklapper>.auswahlliste{padding:12px 0 0}
/* Fehler im Bogen: Text oben, Zaehler darunter rechts */
body.sr .kriterium{flex-direction:column;align-items:stretch;gap:10px;padding:14px 6px;border-bottom:1px solid var(--s-linie)}
body.sr .kr-text{font-size:1em}
body.sr .zaehler{justify-content:flex-end;gap:14px}
body.sr .zaehler button{width:64px;height:64px;min-height:64px;padding:0;font-size:1.8em;border-radius:16px}
body.sr .zaehler .anzahl{font-size:1.6em;min-width:1.4em}
/* Stoppuhr */
body.sr .stoppuhr{padding:16px}
body.sr .su-anzeige{font-size:3em;color:var(--s-leise)}
body.sr .su-anzeige.laeuft{color:var(--s-text)}
body.sr .su-anzeige.fertig{color:var(--s-gut)}
body.sr .su-art,body.sr .su-liste{color:var(--s-leise)}
body.sr .su-knopf{min-height:76px;font-size:1.3em}
body.sr .su-knopf.su-ende{background:var(--s-text);border-color:var(--s-text);color:var(--s-bg);box-shadow:0 5px 0 var(--s-rotlip)}
body.sr .su-zurueck{margin-top:12px}
/* Status in Worten, nicht nur Farbe */
body.sr .su-status,body.sr .sendestatus{border:2px solid currentColor;font-weight:700;background:var(--s-gutfl);color:var(--s-gut)}
body.sr .su-status.wartet{background:var(--s-warnfl);color:var(--s-warn)}
body.sr .sendestatus.laeuft{background:var(--s-infofl);color:var(--s-info)}
body.sr .sendestatus.offline,body.sr .sendestatus.fehler{background:var(--s-fehlerfl);color:var(--s-rot)}
body.sr .bogen-leiste{background:var(--s-bg);border-bottom:3px solid var(--s-rand)}
body.sr .summenkarte span{color:var(--s-leise)}
body.sr .aktionsleiste.abgabe .knopf.primaer{min-height:72px;font-size:1.2em}
body.sr input,body.sr select,body.sr textarea{font-size:18px;min-height:56px;background:var(--s-bg);color:var(--s-text);border:2px solid var(--s-rand);border-radius:4px}
body.sr table.liste td,body.sr table.liste th{color:var(--s-text);border-color:var(--s-linie)}
/* Kopfknoepfe nicht wie Inhaltsknoepfe */
body.sr .kopfzeile button.auto-neu,body.sr .kopfzeile button.thema-knopf{flex:0 0 auto;min-width:48px;min-height:48px;padding:0;margin:0;font-size:1em;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--s-haupttext);border:2px solid var(--s-haupttext);border-radius:12px;box-shadow:none;transform:none}
body.sr .kopfzeile button.auto-neu{margin-left:auto}
body.sr .kopfzeile button.auto-neu:hover,body.sr .kopfzeile button.thema-knopf:hover{background:rgba(127,127,127,.18);color:var(--s-haupttext)}
/* Kopfzeile der Kategorie: Titel, darunter Punkte und Zahl, rechts der Pfeil */
body.sr details.kategorie>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:center}
body.sr details.kategorie>summary .kat-titel{grid-column:1;grid-row:1}
body.sr details.kategorie>summary .kat-info{grid-column:1;grid-row:2;flex-wrap:wrap}
body.sr details.kategorie>summary::after{grid-column:2;grid-row:1 / span 2}
/* Farben, die sonst fest hell sind, im Schema der Schiedsrichter */
body.sr li.kriterium.hat-fehler{background:var(--s-markiert)}
body.sr table.liste tbody tr:hover{background:transparent}
body.sr .stand-ok{background:var(--s-gutfl);color:var(--s-gut)}
body.sr .stand-offen{background:var(--s-warnfl);color:var(--s-warn)}
body.sr .stand-fehlt{background:var(--s-flaeche);color:var(--s-leise)}
body.sr .modulkopf{background:var(--s-flaeche);border:1px solid var(--s-linie);border-radius:4px}
body.sr .komb-module b{color:var(--s-text)}
body.sr .komb-module{color:var(--s-leise)}
/* Kombination waehlen: antippbare Karte wie ein Knopf */
body.sr label.komb{border:3px solid var(--s-rand);border-radius:16px;background:var(--s-knopf);color:var(--s-text);box-shadow:0 5px 0 var(--s-lip);margin-bottom:5px;cursor:pointer}
body.sr label.komb:active{transform:translateY(4px);box-shadow:0 1px 0 var(--s-lip)}
body.sr label.komb:has(input:checked){border-color:var(--s-akzent);background:var(--s-flaeche);box-shadow:0 5px 0 var(--s-hauptlip)}
body.sr label.komb input{width:28px;height:28px}

/* Laufende Zeit in der festen Kopfzeile des Bogens */
.bogen-leiste{flex-wrap:wrap}
.leiste-zeit strong{font-variant-numeric:tabular-nums}
.leiste-zeit.laeuft strong{color:var(--rot)}
.leiste-zeit.ueber strong{color:var(--warn)}
body.sr .bogen-leiste{gap:6px 14px}
body.sr .bogen-leiste .summenkarte{flex-direction:column;align-items:flex-start;gap:0}
body.sr .bogen-leiste .summenkarte span{font-size:.8em;font-weight:700}
body.sr .bogen-leiste .summenkarte strong{font-size:1.6em}
body.sr .leiste-zeit.laeuft strong{color:var(--s-akzent)}
body.sr .leiste-zeit.ueber strong{color:var(--s-warn)}
/* Feste Kopfzeile des Bogens: drei feste Spalten, damit nichts springt (Marco, 16.10.2026)
   Fehlerpunkte | Zeit (Stopp-Knopf) | Sendestatus */
.leiste-zeit.leiste-stopp{font:inherit;cursor:pointer;text-align:left;border:3px solid #1f1f1f;border-radius:12px;background:#1f1f1f;color:#fff;padding:4px 14px;min-height:56px}
.leiste-zeit.leiste-stopp strong{color:#fff}
body.sr .bogen-leiste{display:grid;grid-template-columns:minmax(0,1fr) 148px 104px;align-items:center;gap:8px}
body.sr .bogen-leiste>.summenkarte:first-child{grid-column:1}
body.sr .bogen-leiste .leiste-zeit{grid-column:2;box-sizing:border-box;width:148px;height:62px;margin:0;padding:4px 10px 4px 12px;border:3px solid transparent;border-radius:16px;justify-content:center}
body.sr .bogen-leiste .sendestatus{grid-column:3;margin:0;box-sizing:border-box;width:104px;min-height:62px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.78em;line-height:1.15;padding:4px 6px;overflow-wrap:anywhere}
body.sr .leiste-zeit.leiste-stopp{display:flex;border:3px solid var(--s-text);background:var(--s-text);color:var(--s-bg);box-shadow:0 5px 0 var(--s-rotlip);padding-left:40px;position:relative}
body.sr .leiste-zeit.leiste-stopp::before{content:"";position:absolute;left:13px;top:50%;width:16px;height:16px;margin-top:-8px;background:currentColor;border-radius:2px}
body.sr .leiste-zeit.leiste-stopp span,body.sr .leiste-zeit.leiste-stopp strong,body.sr .leiste-zeit.leiste-stopp.laeuft strong{color:var(--s-bg)}
body.sr .leiste-zeit.leiste-stopp:active{transform:translateY(4px);box-shadow:0 1px 0 var(--s-rotlip)}
body.sr .bogen-leiste .leiste-zeit strong{font-size:1.45em;white-space:nowrap}

/* ==========================================================================
   Farbkodierung je Trupp (Entwurf vom 16.10.2026, freigegeben)
   AT rot, WT blau, ST gelb, GF + ME weiss, MA gruen. Auslosung, PSA, Fahrzeug: neutral grau (seit 21.10.2026).
   --s-haupt: Kopf und Hauptknoepfe. --s-akzent: farbiger Text auf hellem Grund. Hintergrund leicht getoent.
   ========================================================================== */
body.sr{--s-haupt:#A30000;--s-haupttext:#FFFFFF;--s-hauptlip:#5C0000;--s-hauptrand:3px solid #A30000;--s-akzent:#A30000;--s-kopflinie:0;--s-chiprand:0}
html[data-thema=dunkel] body.sr{--s-haupt:#C81E1E;--s-hauptlip:#5A0000;--s-hauptrand:3px solid #C81E1E;--s-akzent:#FF8A8A}
body.sr.trupp-at{--s-bg:#FBEAEA;--s-flaeche:#F6DADA;--s-linie:#D9A7A7}
body.sr.trupp-wt{--s-haupt:#0B4F9C;--s-hauptlip:#062C57;--s-hauptrand:3px solid #0B4F9C;--s-akzent:#0B4F9C;--s-bg:#E7EFF9;--s-flaeche:#D6E3F4;--s-linie:#9DB7DB}
body.sr.trupp-st{--s-haupt:#F5C400;--s-haupttext:#111111;--s-hauptlip:#8A6D00;--s-hauptrand:3px solid #8A6D00;--s-akzent:#6B5300;--s-bg:#FFF6CC;--s-flaeche:#FCEBA6;--s-linie:#D9C26A}
/* Auslosung, Fahrzeug, PSA (SR 6): neutral, Anthrazit auf hellem Grau (Marco, 21.10.2026). Grund kuehler als bei GF + ME. */
body.sr.trupp-neutral{--s-haupt:#3A4048;--s-haupttext:#FFFFFF;--s-hauptlip:#1C1F23;--s-hauptrand:3px solid #3A4048;--s-akzent:#3A4048;--s-bg:#EEF0F3;--s-flaeche:#E1E4E9;--s-linie:#AEB5BF}
html[data-thema=dunkel] body.sr.trupp-neutral{--s-haupt:#5B6470;--s-haupttext:#FFFFFF;--s-hauptlip:#2A2F35;--s-hauptrand:3px solid #8A939E;--s-akzent:#C3CAD3;--s-bg:#121417;--s-flaeche:#1E2227;--s-linie:#3E444C}
body.sr.trupp-gf{--s-haupt:#FFFFFF;--s-haupttext:#111111;--s-hauptlip:#111111;--s-hauptrand:4px solid #111111;--s-akzent:#111111;--s-kopflinie:4px solid #111111;--s-chiprand:2px solid #111111;--s-bg:#E9E9E9;--s-flaeche:#DCDCDC;--s-linie:#9E9E9E}
body.sr.trupp-ma{--s-haupt:#0B6B2B;--s-hauptlip:#053A17;--s-hauptrand:3px solid #0B6B2B;--s-akzent:#0B6B2B;--s-bg:#E6F3EA;--s-flaeche:#D3EADB;--s-linie:#97C7A6}
html[data-thema=dunkel] body.sr.trupp-at{--s-bg:#1A0E0E;--s-flaeche:#2A1616;--s-linie:#5A3030}
html[data-thema=dunkel] body.sr.trupp-wt{--s-haupt:#2F6FC0;--s-hauptlip:#0A2A50;--s-hauptrand:3px solid #2F6FC0;--s-akzent:#8DBBFF;--s-bg:#0C1420;--s-flaeche:#152236;--s-linie:#2F4A6E}
html[data-thema=dunkel] body.sr.trupp-st{--s-akzent:#F5C400;--s-bg:#1A1706;--s-flaeche:#2A250B;--s-linie:#5C5220}
html[data-thema=dunkel] body.sr.trupp-gf{--s-hauptlip:#8C8C8C;--s-hauptrand:4px solid #F7F7F7;--s-akzent:#FFFFFF;--s-kopflinie:4px solid #F7F7F7;--s-chiprand:2px solid #F7F7F7;--s-bg:#141414;--s-flaeche:#222222;--s-linie:#4A4A4A}
html[data-thema=dunkel] body.sr.trupp-ma{--s-haupt:#178A3C;--s-hauptlip:#06381A;--s-hauptrand:3px solid #178A3C;--s-akzent:#5BE08A;--s-bg:#0B1710;--s-flaeche:#13261A;--s-linie:#2C5238}
html[data-thema=dunkel] body.sr.trupp-at,html[data-thema=dunkel] body.sr.trupp-wt,html[data-thema=dunkel] body.sr.trupp-st,html[data-thema=dunkel] body.sr.trupp-gf,html[data-thema=dunkel] body.sr.trupp-ma,html[data-thema=dunkel] body.sr.trupp-neutral{background:var(--s-bg)}
body.sr main{background:var(--s-bg)}
/* Kompakte Kopfzeile im Bogen: "FF Altdorf · Gruppe 1 · AT" */
body.sr .bogen-titel{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:1.2em;font-weight:700;margin:0 0 14px}
body.sr .trupp-chip{display:inline-flex;align-items:center;font-size:.85em;font-weight:700;padding:2px 12px;border-radius:999px;background:var(--s-haupt);color:var(--s-haupttext);border:var(--s-chiprand)}

/* Nebenknoepfe bleiben weiss bzw. schwarz, damit sie sich vom getoenten Grund abheben. Gezaehlte Fehler: kraeftigerer Ton. */
body.sr{--s-knopf:#FFFFFF;--s-markiert:#FDE8E8}
html[data-thema=dunkel] body.sr{--s-knopf:#0F0F0F;--s-markiert:#3A1414}
body.sr.trupp-at{--s-markiert:#F3CFCF}
body.sr.trupp-wt{--s-markiert:#C6D8F0}
body.sr.trupp-st{--s-markiert:#F9E07E}
body.sr.trupp-gf{--s-markiert:#CACACA}
body.sr.trupp-ma{--s-markiert:#BFE0C9}
html[data-thema=dunkel] body.sr.trupp-at{--s-markiert:#3A1A1A}
html[data-thema=dunkel] body.sr.trupp-wt{--s-markiert:#1B3050}
html[data-thema=dunkel] body.sr.trupp-st{--s-markiert:#3A330C}
html[data-thema=dunkel] body.sr.trupp-gf{--s-markiert:#333333}
html[data-thema=dunkel] body.sr.trupp-ma{--s-markiert:#173A24}
/* Dunkel: Gelb und Weiss behalten ihre Farbe (ueberschreibt das dunkle Rot) */
html[data-thema=dunkel] body.sr.trupp-st{--s-haupt:#F5C400;--s-haupttext:#111111;--s-hauptlip:#8A6D00;--s-hauptrand:3px solid #F5C400}
html[data-thema=dunkel] body.sr.trupp-gf{--s-haupt:#FFFFFF;--s-haupttext:#111111}
/* Erlaeuterung fehlender Modulbogen */
.modul-hinweis p{margin:0 0 8px}
.modul-hinweis p:last-child{margin-bottom:0}
/* Testmodus auf dem Smartphone: unauffaelliger Link, abgesetzt durch eine Linie (Marco, 16.10.2026) */
body.sr .testmodus-wechsel{margin:40px 0 8px;padding-top:12px;border-top:1px dashed var(--s-linie);font-size:.85em;color:var(--s-leise);display:flex;align-items:baseline;gap:8px}
body.sr .testmodus-marke{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.85em}
body.sr .testmodus-wechsel button.testmodus-link,body.sr .testmodus-wechsel button.testmodus-link:hover,body.sr .testmodus-wechsel button.testmodus-link:active{
  all:unset;cursor:pointer;color:var(--s-leise);text-decoration:underline;font:inherit;padding:10px 0;transform:none;box-shadow:none}
body.sr .testmodus-wechsel button.testmodus-link:focus-visible{outline:3px solid var(--s-fokus);outline-offset:2px}
/* Uebersicht Kontoarten (Seite Wettkampfleitung) */
details.kontoarten{margin:0 0 16px;padding:8px 12px;background:var(--flaeche);border:1px solid var(--linie);border-radius:6px}
details.kontoarten summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
details.kontoarten table.rechte{margin:8px 0;background:#fff}
table.rechte td.mitte,table.rechte th.mitte{text-align:center;width:9em}
.recht-ja{color:var(--gut);font-weight:700;font-size:1.2em}
.recht-nein{color:var(--grau);font-weight:700;font-size:1.2em}

/* Erkennen von Gefahrensymbolen: Kartenansicht (Marco, 22.10.2026) */
body.sr .gs-leiste{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:0 0 12px}
body.sr .gs-feld{background:var(--s-flaeche);border:1px solid var(--s-linie);border-radius:4px;padding:4px 6px;text-align:center;font-size:.85em}
body.sr .gs-feld span{display:block;color:var(--s-leise)}
body.sr .gs-feld strong{font-size:1.2em}
body.sr .gs-feld.sendestatus{display:flex;align-items:center;justify-content:center}
body.sr .gs-feld.offline{border-color:#A30000;color:#A30000;font-weight:700}
body.sr .gs-info,body.sr .gs-loesung,body.sr .gs-kurz{background:var(--s-flaeche);border:1px solid var(--s-linie);border-radius:4px;padding:12px;margin:0 0 14px}
body.sr .gs-info p,body.sr .gs-loesung p{margin:0 0 6px}
body.sr .gs-loesung h3{margin:0 0 8px;font-size:1em}
body.sr .gs-dran{font-weight:700;font-size:1.1em;text-align:center;padding:8px 10px;border:3px solid var(--s-rand);border-radius:8px;background:var(--s-knopf);margin:0 0 12px}
body.sr .gs-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
body.sr .gs-platz{aspect-ratio:1/1;border:2px solid var(--s-linie);border-radius:6px;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85em;position:relative;padding:4px;min-height:64px}
body.sr .gs-platz.jetzt{border:3px solid var(--s-rand)}
body.sr .gs-platz img{max-width:100%;max-height:100%}
body.sr .gs-marke{position:absolute;right:-4px;top:-8px;font-size:.7em;border-radius:4px;padding:0 4px;color:#fff}
body.sr .gs-marke.ok{background:#0B6B2E}
body.sr .gs-marke.fehler{background:#A30000}
body.sr .gs-kurz{display:flex;gap:12px;align-items:center}
body.sr .gs-kurz img{width:96px;height:96px;object-fit:contain;background:#fff;border:1px solid var(--s-linie);border-radius:4px;padding:4px;flex:0 0 auto}
body.sr .knopf.gs-weiter{background:#0B6B2E;color:#fff;border-color:#0B6B2E;box-shadow:0 5px 0 #063D1A}
body.sr .knopf.gs-fehler{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left}
body.sr .knopf.gs-fehler .gs-p{white-space:nowrap;border:2px solid currentColor;border-radius:6px;padding:0 6px;font-size:.85em}
body.sr .knopf.gs-fehler.an{background:#FDE8E8;border-color:#A30000;color:#A30000;box-shadow:0 5px 0 #A30000}
body.sr .gs-text{flex:1 1 auto}
body.sr .gs-gezaehlt{display:table;background:#A30000;color:#fff;border-radius:4px;padding:1px 6px;font-size:.75em;margin:0 0 4px}
body.sr .gs-ziffern{list-style:none;padding:0;margin:0 0 6px}
body.sr .gs-ziffern li{margin:4px 0}
body.sr .gs-ziffern b{display:inline-block;min-width:28px;text-align:center;border:2px solid #111;border-radius:4px;margin-right:8px;background:#FF9F1C;color:#111}
body.sr .gs .knopf{width:100%;box-sizing:border-box}
body.sr .gs-tabelle{margin:0 0 14px}
body.sr .gs-zeile{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--s-linie)}
body.sr .gs-zeile img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:3px;flex:0 0 auto}
body.sr .gs-zeile-text{flex:1 1 auto;min-width:0}
body.sr .gs .gs-zeile .knopf{width:auto;min-height:56px;margin:0;padding:4px 12px;flex:0 0 auto}
.gs-zeigen{position:fixed;inset:0;background:#fff;color:#111;z-index:1000;display:flex;flex-direction:column}
.gs-zeigen[hidden]{display:none}
.gs-zeigen-oben{padding:10px 14px;font-size:16px;color:#3A3A3A}
.gs-zeigen-bild{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:10px;min-height:0}
.gs-zeigen-bild img{width:100%;height:100%;object-fit:contain}
body.sr .gs-zeigen .knopf.gs-zurueck{margin:12px 14px 16px;width:auto;background:#fff;color:#111;border-color:#111;box-shadow:0 5px 0 #111}
body.gs-vollbild{overflow:hidden}