/* Varianten-Klassen.
 *
 * Die Designdateien berechnen an neun Stellen den Stil je Element
 * (style="{{ z.farbe }}" und aehnlich). Der Wandler kann daraus keine
 * gueltige Regel machen - dort stand zuletzt '.start-35 { {{ startBtnStyle }'
 * und der Browser hat die Regel verworfen. Sichtbar wurde es als weisser
 * Standardknopf.
 *
 * Zurueckschreiben als inline-Style geht nicht: die Sicherheitskopfzeilen
 * setzen style-src 'self'. Stattdessen hier feste Klassen fuer die endlich
 * vielen Zustaende - das ist ohnehin sauberer als berechnete Stile.
 */

/* --- Knopf "Ermittlung aufnehmen" / "Weiter zum Briefing" -------------- */
.start-35 {
  border: 1px solid #ff8c2f; background: #ff8c2f; color: #101012;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 15px 26px; cursor: pointer;
}
.start-35:hover { background: #ffa958; border-color: #ffa958; }
.start-35:disabled { background: transparent; color: #55524c; border-color: #2c2c31; cursor: default; }

/* --- Punktewerte im Briefing ------------------------------------------ */
.start-42 { font-family: 'Special Elite', monospace; font-size: clamp(26px, 5vw, 34px);
            line-height: 1; color: #ff8c2f; font-variant-numeric: tabular-nums; }
/* Farben der Briefing-Werte, README Abschnitt 5.1 */
.w-ink    { color: #f2efe9; }
.w-akzent { color: #ff8c2f; }
.w-fehler { color: #e2564a; }

/* --- Fortschrittsspur der Stationen ----------------------------------- */
.station-9 { display: flex; flex-direction: column; gap: 4px; }
.spur-geloest { opacity: .8;  margin-bottom: 0;   }
.spur-aktuell { opacity: 1;   margin-bottom: 6px; }  /* sitzt hoeher als der Rest */
.spur-offen   { opacity: .16; margin-bottom: 0;   }

/* --- Ziffernmaske ------------------------------------------------------ */
.station-21 { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.maske-zeichen  { min-width: 26px; }
.maske-trenner  { min-width: 12px; }
.station-22 { font-variant-numeric: tabular-nums; }
.zeichen-luecke  { color: #ff8c2f; }
.zeichen-ziffer  { color: #f2efe9; }
.zeichen-trenner { color: #8f8a81; }
.station-23 { height: 2px; width: 100%; }
.linie-luecke { background: #ff8c2f; }
.linie-leer   { background: transparent; }

/* --- Leitstelle: Fehlerzahl -------------------------------------------- */
.admin-29 { text-align: right; font-variant-numeric: tabular-nums; }
.fails-ok   { color: #8f8a81; }
.fails-warn { color: #ffb066; }
.fails-hoch { color: #e2564a; }

/* --- Leitstelle: Balken ------------------------------------------------ */
/* Prozentwerte in Zwanzigerschritten. Feiner braucht es nicht, und eine
 * inline-Breite waere gesperrt. */
.admin-26 { height: 4px; background: #ff8c2f; }   /* Teamfortschritt */
.admin-42 { height: 4px; background: #e2564a; }   /* Quote je Station */
.bar-0   { width: 0;    } .bar-5   { width: 5%;   } .bar-10  { width: 10%;  }
.bar-15  { width: 15%;  } .bar-20  { width: 20%;  } .bar-25  { width: 25%;  }
.bar-30  { width: 30%;  } .bar-35  { width: 35%;  } .bar-40  { width: 40%;  }
.bar-45  { width: 45%;  } .bar-50  { width: 50%;  } .bar-55  { width: 55%;  }
.bar-60  { width: 60%;  } .bar-65  { width: 65%;  } .bar-70  { width: 70%;  }
.bar-75  { width: 75%;  } .bar-80  { width: 80%;  } .bar-85  { width: 85%;  }
.bar-90  { width: 90%;  } .bar-95  { width: 95%;  } .bar-100 { width: 100%; }

/* --- Leitstelle: Warnband Testbetrieb ---------------------------------
 * Steht ganz oben und soll nicht zu uebersehen sein: UNLOCK_MODE=sofort
 * muss vor dem Start zurueck auf 'taeglich', sonst sind am ersten Tag
 * alle Stationen offen und die Taktung des Spiels ist weg. */
.warnband {
  border: 2px solid #e2564a;
  border-left-width: 10px;
  background: #2a1512;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.warnband-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.warnband-punkt {
  width: 11px; height: 11px; border-radius: 50%;
  background: #e2564a; flex: none;
  animation: pulse 1.4s ease-in-out infinite;
}
.warnband-titel {
  font-family: 'Special Elite', monospace;
  font-size: 27px; line-height: 1.1; color: #ff7a6b;
}
.warnband-frist {
  margin-left: auto;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #ff7a6b;
}
.warnband-text { font-size: 14px; line-height: 1.6; color: #e6ddd9; max-width: 90ch; }
.warnband-text strong { color: #fff3f0; }
.warnband-befehl {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  background: #140a09; border: 1px solid #5a2b25;
  color: #ffb9ae; padding: 10px 12px;
  overflow-x: auto; white-space: pre;
}

/* --- Leitstelle: Spickzettel -------------------------------------------
 * Die Loesungen aller Stationen. Steht nur auf /admin - oeffentlich ist die
 * Adresse 404, intern zusaetzlich hinter Basic Auth. Standardmaessig
 * zugeklappt, damit niemand sie beim Blick ueber die Schulter mitliest. */
.spick          { border: 1px solid #26262a; background: #141416; }
.spick > summary {
  cursor: pointer; padding: 16px 18px; font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: #8f8a81; list-style: none;
}
.spick > summary::-webkit-details-marker { display: none; }
.spick > summary::before { content: '▸ '; color: #ff8c2f; }
.spick[open] > summary::before { content: '▾ '; }
.spick > summary:hover { color: #f2efe9; }
.spick-warnung  { padding: 0 18px 14px; font-size: 12px; color: #e2564a; }
.spick-zeile    { padding: 16px 18px; border-top: 1px solid #1c1c1f;
                  display: flex; flex-direction: column; gap: 7px; }
.spick-kopf     { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.spick-nr       { font-family: 'Special Elite', monospace; font-size: 17px; color: #ff8c2f; }
.spick-titel    { font-size: 14px; color: #f2efe9; }
.spick-frage    { font-size: 12px; color: #8f8a81; max-width: 70ch; }
.spick-feld     { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 13px; }
.spick-label    { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
                  color: #8f8a81; padding-top: 3px; }
.spick-wert     { color: #f2efe9; max-width: 70ch; }
.spick-wert-leise { color: #b0aca4; max-width: 70ch; }

/* --- Leitstelle: Eingriffe des Spielleiters ----------------------------
 * Dieser Block hatte gar kein CSS: weder .tabelle noch table/th/td, die
 * Eingabefelder nicht und der Knopf nicht. Der Browser hat deshalb seine
 * Voreinstellung gezeigt - weisse Felder auf schwarzem Grund, und der
 * Beitrittscode in .admin-12, also der 34px-Schrift der Kennzahlen. */
.eingriffe      { display: flex; flex-direction: column; gap: 12px; }
.eingriff-karte { border: 1px solid #26262a; background: #141416; padding: 16px 18px;
                  display: flex; flex-direction: column; gap: 14px; }
.eingriff-kopf  { display: flex; justify-content: space-between; align-items: baseline;
                  gap: 16px; flex-wrap: wrap; }
.eingriff-team  { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eingriff-name  { font-size: 15px; color: #f2efe9; }
.marke-test     { font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
                  color: #8f8a81; border: 1px solid #2c2c31; padding: 2px 7px; }
.eingriff-zahlen{ display: flex; align-items: baseline; gap: 8px 10px; flex-wrap: wrap; }
.eingriff-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
                  color: #8f8a81; }
/* Der Code ist zum Vorlesen da - Schreibmaschine, aber in Lesegroesse. */
.eingriff-code  { font-family: 'Special Elite', monospace; font-size: 17px; color: #f2efe9;
                  letter-spacing: .14em; margin-right: 6px; }
.eingriff-wert  { font-family: 'Special Elite', monospace; font-size: 17px; color: #f2efe9;
                  font-variant-numeric: tabular-nums; margin-right: 6px; }
.eingriff-punkte{ font-family: 'Special Elite', monospace; font-size: 17px; color: #ff8c2f;
                  font-variant-numeric: tabular-nums; }
/* Die Sperrlage steht ueber den Formularen, nicht in der Zahlenzeile: sie ist
 * ein Zustand mit Ablaufdatum, keine Kennzahl, und sie gehoert neben den
 * Knopf, der sie aufhebt. */
.eingriff-sperre { font-family: 'IBM Plex Mono', monospace; font-size: 12px;
                   color: #e0a060; border-left: 2px solid #e0a060; padding-left: 10px; }
.eingriff-formulare { display: flex; flex-direction: column; gap: 10px;
                      border-top: 1px solid #1c1c1f; padding-top: 14px; }
.eingriff-form  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eingriff-form > .eingriff-label { min-width: 108px; }

/* --- Formularelemente der Leitstelle ------------------------------------ */
.feld {
  background: #0e0e10; border: 1px solid #2c2c31; color: #f2efe9;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  padding: 8px 10px; min-width: 0; flex: 1 1 160px;
}
.feld::placeholder { color: #55524c; }
.feld:focus { outline: none; border-color: #ff8c2f; }
.feld-zahl { flex: 0 0 72px; font-variant-numeric: tabular-nums; text-align: right; }
.knopf {
  background: transparent; border: 1px solid #ff8c2f; color: #ff8c2f;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 14px; cursor: pointer; flex: none;
}
.knopf:hover { background: #ff8c2f; color: #101012; }
/* Ohne eigene Regel sieht ein deaktivierter Knopf aus wie ein aktiver und
 * faerbt sich beim Ueberfahren sogar orange ein. */
.knopf:disabled { border-color: #2c2c31; color: #55524c; cursor: default; }
.knopf:disabled:hover { background: transparent; color: #55524c; }
.knopf-klein {
  background: transparent; border: 1px solid #2c2c31; color: #8f8a81;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; cursor: pointer;
}
.knopf-klein:hover { border-color: #ff8c2f; color: #ff8c2f; }

/* --- Alter der angezeigten Zahlen --------------------------------------- */
.stand     { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
             color: #55524c; }
.stand-alt { color: #e2564a; }

/* --- Leitstelle: Stationenzeile ----------------------------------------
 * Zwei Angaben je Station statt einer Zahl: links der Fortschritt (wie viele
 * Teams haben geloest), rechts die Huerde (was sie an Fehlversuchen gekostet
 * hat). Vorher stand dort nur die Trefferquote der Eingaben - unter der
 * Ueberschrift "Huerden" las sich ein voller Balken genau verkehrt herum. */
/* Das erzeugte Raster war 44px 1fr 96px 56px - zu eng, sobald unter Balken
 * und Zahl noch eine Zeile Text steht. */
.admin-40 { grid-template-columns: 44px 1fr 160px 128px; align-items: start; }
.station-spalte { display: flex; flex-direction: column; gap: 6px; min-width: 0;
                  padding-top: 2px; }
.station-zahl   { display: flex; flex-direction: column; gap: 4px;
                  align-items: flex-end; text-align: right; }

/* --- Leitstelle: Funkverkehr ------------------------------------------- */
.funkadmin-zeile { display: grid; grid-template-columns: 56px minmax(0, 140px) 1fr auto;
                   gap: 10px 12px; align-items: baseline; padding: 8px 0;
                   border-bottom: 1px solid #16161880; }
/* pre-wrap haelt die Zeilenumbrueche der Spieler, anywhere bricht ein
 * ueberlanges Wort um, statt die Spalte zu sprengen. */
.funkadmin-text  { font-size: 13px; line-height: 1.6; color: #e3dfd8;
                   white-space: pre-wrap; overflow-wrap: anywhere; }
.knopf-klein     { padding: 5px 9px; font-size: 10px; }
@media (max-width: 560px) {
  .funkadmin-zeile { grid-template-columns: 56px 1fr; }
  .funkadmin-text  { grid-column: 1 / -1; }
}

/* Link zur Leitstelle am Seitenende (18.10.2026): leise, aber auffindbar. */
/* Seit 19.10.2026 links unten, alle Wege gleichrangig (statt leuchtender Knoepfe). */
.seiten-fuss { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
               max-width: 960px; margin: 0 auto; padding: 28px 16px 22px; box-sizing: border-box; }
.fuss-link, .leitstelle-link { font: 11px 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase;
                   color: #6b675f; text-decoration: none; border-bottom: 1px dotted #3a3a40; }
.fuss-link:hover, .fuss-link:focus-visible, .leitstelle-link:hover, .leitstelle-link:focus-visible { color: #ff8c2f; border-bottom-color: #ff8c2f; }