/* Gestaltung nach RACE RESULT (raceresult.com, abgelesen 01.10.2026): Hauptfarbe #a81815
   (theme-color), Logo #c41011, Text #2c2c2c, Flächen #f6f6f6, Linien #ddd, Schrift URW DIN.
   URW DIN ist lizenziert (Typekit von RACE RESULT) → DIN-artige Systemschriften als Ersatz.
   Das Frankfurt-Marathon-Logo bleibt die Identität des Events (Kopf, App-Symbol). */
:root {
  --blau: #a81815;          /* Name historisch: Hauptfarbe (RACE-RESULT-Rot) */
  --rot: #c41011;
  --grund: #f6f6f6;
  --flaeche: #ffffff;
  --text: #2c2c2c;
  --leise: #5f5f5f;
  --linie: #dddddd;
  --gut: #0f7b3f;
  --warn: #b42318;
  --knopf-text: #ffffff;
  --led-grund: #0b0b0b;
  --led: #ffd21f;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blau: #ff7b70;
    --grund: #141414;
    --flaeche: #1f1f1f;
    --text: #ededed;
    --leise: #a3a3a3;
    --linie: #333333;
    --gut: #4cc38a;
    --warn: #ff8a80;
    --knopf-text: #141414;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--text);
  font: 16px/1.45 "urw-din", "DIN Alternate", "DIN 2014", "D-DIN", "Bahnschrift", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.schirm { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }

h1 { font-size: 22px; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: .02em; }
.absender { display: block; margin: 20px auto 4px; width: 150px; height: auto; opacity: .9; }
.absender-text { text-align: center; color: var(--leise); font-size: 12px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 8px; letter-spacing: .02em; text-transform: uppercase; color: var(--leise); }
.hilfe { color: var(--leise); font-size: 14px; margin: 6px 0 0; }

/* Kopf: Logo, Titel, höchstens eine Aktion (Material 3: Einstellungen auf eigenem Schirm) */
.kopf { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; }
.kopf img { height: 56px; width: auto; background: #fff; border-radius: 8px; padding: 4px; }
.kopf-text { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.kopf-text span { color: var(--leise); font-size: 14px; }
.text-knopf { background: none; border: 0; color: var(--blau); font: inherit; font-weight: 600; padding: 10px 4px; cursor: pointer; }

.verbindung { margin: 0 0 10px; display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: baseline; }
.verbindung::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--leise); grid-row: 1; transform: translateY(1px); }
.verbindung strong { grid-column: 2; }
.verbindung span { grid-column: 2; color: var(--leise); font-size: 14px; }
.verbindung span:empty { display: none; }
.verbindung.gut::before { background: var(--gut); }
.verbindung.schlecht strong { color: var(--warn); }
.verbindung.schlecht::before { background: var(--warn); }

/* Vorschau: wie die LED-Zeile (eine Zeile, höchstens 9 Zeichen) */
.vorschau-block { margin-bottom: 14px; }
.vorschau {
  background: var(--led-grund); color: var(--led); border-radius: 12px;
  font: 700 clamp(40px, 13vw, 64px)/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .04em; text-align: center; padding: 22px 8px; min-height: 1.6em;
  white-space: pre; overflow: hidden;
}
.vorschau.leer { color: #555; font-size: 20px; font-weight: 500; letter-spacing: 0; padding: 34px 8px; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 14px; margin-bottom: 12px; }

/* Modus als Segment-Auswahl */
.segment { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.segment button {
  font: inherit; font-weight: 600; padding: 12px 4px; border: 0; background: transparent; color: var(--text); cursor: pointer;
  border-left: 1px solid var(--linie);
}
.segment button:first-child { border-left: 0; }
.segment button[aria-checked="true"] { background: var(--blau); color: var(--knopf-text); }
.segment button:disabled { opacity: .6; }

.textzeile { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: end; margin-top: 12px; }
.textzeile .haupt { grid-column: 1 / -1; }
.zaehler { color: var(--leise); font-variant-numeric: tabular-nums; padding-bottom: 12px; }
.zaehler.voll { color: var(--text); font-weight: 700; }

.presenter-jetzt { font-size: 18px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
button[aria-busy="true"] { cursor: progress; }

.werte { font-size: 20px; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }

label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; margin-top: 10px; }
input {
  font: inherit; font-size: 18px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--grund); color: var(--text); width: 100%;
}
input:focus-visible, button:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.mit-einheit { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.mit-einheit input { width: 6em; }
h3 { font-size: 14px; margin: 18px 0 4px; letter-spacing: .02em; text-transform: uppercase; color: var(--leise); }
.segment.sieben { grid-template-columns: repeat(7, 1fr); margin-top: 8px; }
.segment.sieben button { font-variant-numeric: tabular-nums; }

/* Auswahl der Presenter-Fenster: Haken, Titel + Wert, Vorschau wie auf dem Display */
.auswahlliste { margin-top: 6px; }
.auswahl-zeile { flex-direction: row; align-items: center; gap: 10px; margin: 0; padding: 8px 0; border-top: 1px solid var(--linie); font-weight: 400; }
.auswahl-zeile:first-child { border-top: 0; }
.auswahl-zeile input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--blau); }
.auswahl-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.auswahl-text small { color: var(--leise); font-size: 13px; overflow-wrap: anywhere; }
.auswahl-text small.grund { color: var(--warn); font-weight: 600; }
.auswahl-zeile.aus { opacity: .6; }
.mini-led { flex: none; background: var(--led-grund); color: var(--led); border-radius: 6px; padding: 4px 6px;
  font: 700 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; min-width: 8.6ch; text-align: left; }
.mini-led:empty { visibility: hidden; }

.textfeld { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }

button.haupt, button.zweit {
  font: inherit; font-weight: 700; width: 100%; padding: 14px; border-radius: 12px; cursor: pointer; margin-top: 12px;
}
button.haupt { background: var(--blau); color: var(--knopf-text); border: 0; }
button.zweit { background: transparent; color: var(--blau); border: 2px solid var(--blau); }
button:disabled { cursor: default; opacity: .6; }

.protokoll { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.protokoll li { padding: 6px 0; border-top: 1px solid var(--linie); display: flex; gap: 10px; }
.protokoll li:first-child { border-top: 0; }
.protokoll time { color: var(--leise); font-variant-numeric: tabular-nums; flex: none; }

.fehler, .meldung { color: var(--warn); font-weight: 600; }
.meldung { position: sticky; bottom: 12px; background: var(--flaeche); border: 2px solid var(--warn); border-radius: 12px; padding: 12px; }

#anmeldung { text-align: center; padding-top: 40px; }
#anmeldung .karte { text-align: left; margin-top: 20px; }
.logo-gross { width: 160px; height: 160px; border-radius: 24px; }

dialog { border: 0; border-radius: 16px; padding: 20px; max-width: 420px; background: var(--flaeche); color: var(--text); }
dialog::backdrop { background: rgba(0, 0, 0, .5); }
.dialog-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .segment button, button.haupt, button.zweit { transition: background-color .15s, color .15s; }
}