/* Baustein pillen: Zustandspillen (Bedienkonzept E1, Festlegung 20 und 34;
   Bauplan Pilot Maschinen WP1, R1). Besitzer: WP1. Die Grundvorlage bindet
   die Datei nach dem globalen Stylesheet ein.

   Nur Regeln fuer eigene, neue Klassen (zp-, skala-, ampelpunkt-);
   keine globale Klasse wird umdefiniert. Farben als Token mit
   Rueckfall. Kein
   Ocker und kein Orange der alten offenen Pille (Korrektur K-a); Orange
   gibt es nur in .skala-orange (Schadensstufe in Normfarbe, A18). Gelb
   immer mit dunkler Schrift: jede Schrift hier hat gegen ihren Grund
   mindestens 4,5 zu 1 (tests/test_pillen.py misst nach). Eine Regel fuer
   die Telefonbreite (560px).

   Ausrollen Abschnitt B (B1a): die neutrale Marke (zp-marke, Haken, "!",
   "-", ohne Ampelfarbe; K14) und die Skala als Eingabe (skala-wahl: je
   Wert ein Auswahlknopf mit der eckigen Marke in Normfarbe; der gesetzte
   traegt einen Navy-Ring, nie eine Ampelfarbe), dazu die Marke als
   Eingabe (zp-wahl: je Wert die neutrale Marke, Ring wie dort). */

/* --- Pille: Frist, Sperre, Stand, Einstufung --------------------------- */
.zp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: middle;
}
.zp .symbol {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}
.zp-wort {
  min-width: 0;
}

/* Kleine Form fuer Tabellenzellen: dasselbe Zeichen, dasselbe Wort. */
.zp-kurz {
  gap: 3px;
  padding: 1px 7px;
  font-size: 0.75rem;
}
.zp-kurz .symbol {
  width: 12px;
  height: 12px;
}

/* Frist: gruen ok, gelb wird faellig (Uhr), rot ueberfaellig ("!"), grau
   ohne Frist. Ziffern gleich breit, damit Daten im Grund untereinander
   stehen. */
.zp-frist {
  font-variant-numeric: tabular-nums;
}
.zp-gruen {
  background: #e9f5ea;
  color: #1e5e22;
  border-color: #b9dcbb;
}
.zp-gelb {
  background: #fff4d6;
  color: #4a3800;
  border-color: #e3c56b;
}
.zp-rot {
  background: #fdecea;
  color: #8a1c15;
  border-color: #efb7b2;
}
.zp-grau {
  background: #eef1f6;
  color: #4b5b6b;
  border-color: #d3dae3;
}

/* Sperre: kraeftiges Rot mit Verbotskreis; schlaegt jede Frist und hebt
   sich deshalb von der hellroten Frist ab. */
.zp-sperre {
  background: var(--rot, #b3261e);
  color: #ffffff;
  border-color: var(--rot, #b3261e);
}

/* Stand: graublau, ohne Zeichen. */
.zp-stand {
  background: #e3ebf5;
  color: #2c4a6b;
  border-color: #c9d6e6;
  font-weight: 600;
}

/* Einstufung: neutral, nur umrandet; Prioritaet hoch kraeftig navy,
   niedrig grau. */
.zp-einstufung {
  background: #ffffff;
  color: var(--text, #1c2733);
  border-color: #c5ced9;
  font-weight: 600;
}
.zp-hoch {
  color: var(--navy, #1F4570);
  border-color: var(--navy, #1F4570);
  font-weight: 800;
}
.zp-niedrig {
  color: #556677;
  border-color: #d3dae3;
}

/* --- Skala: eckige Marke, Buchstabe mit Wort, nie ein Ampelzeichen ----- */
.skala {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 1px 8px 1px 0;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: middle;
}
.skala b {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 4px;
  border-right: 1px solid currentColor;
  font-weight: 800;
  text-align: center;
}
.skala-gruen {
  background: #e6f2e7;
  color: #1e5e22;
  border-color: #b9dcbb;
}
.skala-gelb {
  background: #fbf0c9;
  color: #4a3800;
  border-color: #e3c56b;
}
.skala-orange {
  background: #fde3cc;
  color: #7a3500;
  border-color: #f0b98a;
}
.skala-rot {
  background: #fbe3e1;
  color: #8a1c15;
  border-color: #efb7b2;
}
.skala-grau {
  background: #eef1f6;
  color: #4b5b6b;
  border-color: #d3dae3;
}

/* --- Ampelpunkt: Sprungleiste und Reiter; das Wort fuer den Vorleser --- */
.ampelpunkt {
  position: relative;
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  vertical-align: middle;
}
.ampelpunkt-gruen {
  background: var(--gruen, #2e7d32);
}
.ampelpunkt-gelb {
  background: var(--gold, #D4A648);
}
.ampelpunkt-rot {
  background: var(--rot, #b3261e);
}
.ampelpunkt-grau {
  background: #b6c0cc;
}
.ampelpunkt-sperre {
  background: var(--rot, #b3261e);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--rot, #b3261e);
}
.ampelpunkt-wort {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Marke: neutraler Arbeitsstand, Zeichen mit Wort (K14, B1a) ------- */
/* Navy und Grau des Hauses, nie Rot, Gelb oder Gruen: "!" heisst hier
   Handlungsbedarf, nicht ueberfaellig; der Haken heisst bewertet. */
.zp-marke {
  background: #ffffff;
  color: var(--navy, #1F4570);
  border-color: #c5ced9;
  font-weight: 600;
}
.zp-zeichen {
  display: inline-block;
  min-width: 1em;
  font-weight: 800;
  text-align: center;
}
.zp-marke-handlung {
  border-color: var(--navy, #1F4570);
  font-weight: 800;
}
.zp-marke-fertig {
  background: #f4f6f9;
}
.zp-marke-offen {
  color: #556677;
  border-style: dashed;
}

/* --- Skala als Eingabe: Auswahlknoepfe in Normfarbe mit Wort (B1a) ---- */
/* Die Farbe kommt aus der Marke selbst (.skala-gruen ... .skala-grau); der
   gesetzte Knopf traegt einen Navy-Ring, der Fokus einen Rahmen. */
.skala-wahl {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.skala-wahl-titel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skala-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
}
.skala-eingabe {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--navy, #1F4570);
}
.skala-eingabe:checked + .skala {
  box-shadow: 0 0 0 2px var(--navy, #1F4570);
  font-weight: 800;
}
.skala-eingabe:focus-visible + .skala {
  outline: 2px solid var(--navy-mid, #305186);
  outline-offset: 3px;
}

/* --- Marke als Eingabe: Auswahlknoepfe neutral mit Zeichen und Wort -- */
/* Teil-A-Status (K14): die Marke selbst ist neutral (.zp-marke); der
   gesetzte Knopf traegt denselben Navy-Ring wie die Skala als Eingabe. */
.zp-wahl {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.zp-wahl-titel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.zp-wahl-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
}
.zp-wahl-eingabe {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--navy, #1F4570);
}
.zp-wahl-eingabe:checked + .zp-marke {
  box-shadow: 0 0 0 2px var(--navy, #1F4570);
  font-weight: 800;
}
.zp-wahl-eingabe:focus-visible + .zp-marke {
  outline: 2px solid var(--navy-mid, #305186);
  outline-offset: 3px;
}

/* --- Telefonbreite: lange Gruende umbrechen statt seitlich zu schieben - */
@media (max-width: 560px) {
  .zp,
  .skala {
    white-space: normal;
  }
  .zp-wort {
    overflow-wrap: anywhere;
  }
  /* In einer Tabellenzelle nie mitten im Wort: die Tabelle scrollt in
     ihrem Kasten, und "anywhere" machte die Spalte Zustand so schmal wie
     ein Buchstabe (Pruefung bei 375 px, Pilot Maschinen). */
  td .zp-wort {
    overflow-wrap: normal;
  }
  /* Die Skala als Eingabe: Knoepfe untereinander, jeder gross genug fuer
     den Daumen (44px). */
  .skala-wahl,
  .zp-wahl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .skala-option,
  .zp-wahl-option {
    min-height: 44px;
  }
}