/* Die Ampel. Eigenstaendiges Stylesheet ohne Tailwind, damit sie unabhaengig
   vom Rest der Anwendung im Precache liegt und offline laeuft.

   Hier zaehlt Signalwirkung, nicht Corporate Design (Abschnitt 8.1). */

:root {
  --rot: #c0141e;
  --gelb: #f2b705;
  --gruen: #1a8a3c;
  --dunkel: #101214;
  --hell: #ffffff;
  --bedienung: rgba(0, 0, 0, 0.42);
  --bedienung-rand: rgba(255, 255, 255, 0.28);
}

* { box-sizing: border-box; }

/* Ein gesetztes hidden-Attribut muss jede display-Regel schlagen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
  background: var(--dunkel);
  color: var(--hell);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Die grosse Flaeche --------------------------------------------------
   Eine Flaeche, die ihre Farbe wechselt - aus 18 m besser lesbar als drei
   nebeneinanderliegende Felder. */
#flaeche {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Oben und unten liegen die beiden Leisten. Ihre gemessenen Hoehen stehen
     in --platz-oben/--platz-unten, damit die Uhr in dem Streifen dazwischen
     mittig sitzt und nicht in der Mitte des Bildschirms - sonst waere sie
     unten verdeckt, weil die Bedienleiste hoeher ist als die Kopfleiste.
     Die Werte bleiben stehen, wenn sich die Leisten ausblenden: ein
     springendes Bild waere schlimmer als der ungenutzte Rand. */
  padding: var(--platz-oben, calc(4.5rem + env(safe-area-inset-top)))
           env(safe-area-inset-right)
           var(--platz-unten, calc(5.5rem + env(safe-area-inset-bottom)))
           env(safe-area-inset-left);
  background: var(--rot);
  transition: background-color 140ms linear;
}
#flaeche[data-phase="vorbereitung"] { background: var(--gelb); color: #221a00; }
#flaeche[data-phase="schusszeit"]   { background: var(--gruen); }
#flaeche[data-phase="warnphase"]    { background: var(--gelb); color: #221a00; }
#flaeche[data-phase="abgelaufen"]   { background: var(--rot); }
#flaeche[data-phase="bereit"]       { background: var(--rot); }
#flaeche[data-phase="pause"]        { background: #3a3f45; }

/* Blinken mit 1 Hz - nie schneller als 3 Hz (Abschnitt 8.1). */
#flaeche[data-blinkt="true"] { animation: blinken 1s steps(1, end) infinite; }
@keyframes blinken {
  0%, 49.9%   { background-color: var(--gelb); }
  50%, 100%   { background-color: #8a6a00; }
}
@media (prefers-reduced-motion: reduce) {
  #flaeche[data-blinkt="true"] { animation: none; outline: 1.2vh solid rgba(0,0,0,0.35); outline-offset: -1.6vh; }
}

/* --- Restzeit ------------------------------------------------------------
   Die Ziffern sind das Einzige, was aus 18 m zaehlt: sie bekommen so viel
   Flaeche, wie der Rest uebrig laesst.

   Zwei Grenzen begrenzen sie:

   Die Hoehe kommt aus --zeit-platz. Das ist der von ampel.js gemessene Rest
   zwischen Kopf- und Bedienleiste; der Wert hier ist nur die Rueckfallebene,
   falls noch nicht gemessen wurde.

   Die Breite haengt davon ab, wie viele Ziffern dastehen. Seit die Anzeige
   nur Sekunden zeigt, sind es mal drei, mal zwei, mal eine; eine einzige
   Breitengrenze muesste sich am laengsten Fall - "140" - ausrichten und
   liesse bei "9" drei Viertel der Breite leer. ampel.js schreibt die
   Stellenzahl in data-stellen.

   Beim Uebergang von 100 auf 99 faellt damit eine Breitengrenze weg und die
   Ziffern werden groesser. Der Uebergang laeuft weich ab - ein Sprung
   mitten im Satz saehe wie ein Fehler aus. */
#zeit {
  font-size: min(calc(var(--zeit-platz, 46vh) / 0.82), 47vw);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-shadow: 0 0.4vh 1.6vh rgba(0, 0, 0, 0.22);
  margin: 0;
}
/* Erst nach der ersten Messung weich: das Einpassen beim Laden soll
   sofort sitzen, nicht sichtbar zurechtrutschen. */
#flaeche[data-gemessen="true"] #zeit { transition: font-size 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  #flaeche #zeit { transition: none; }
}
#zeit[data-stellen="1"] { font-size: min(calc(var(--zeit-platz, 46vh) / 0.82), 100vw); }
#zeit[data-stellen="2"] { font-size: min(calc(var(--zeit-platz, 46vh) / 0.82), 74vw); }
#zeit[data-stellen="3"] { font-size: min(calc(var(--zeit-platz, 46vh) / 0.82), 50vw); }

#zweitzeile {
  margin-top: 1.2vh;
  font-size: clamp(1rem, 3.4vh, 2.25rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0.9;
  padding: 0 1rem;
}
#zweitzeile .trenner { opacity: 0.5; margin: 0 0.6em; }

/* --- Startknopf ---------------------------------------------------------- */
#start {
  min-height: 96px;
  min-width: min(74vw, 30rem);
  margin-top: 4vh;
  padding: 1.25rem 2.5rem;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-size: clamp(1.25rem, 3.4vh, 2rem);
  font-weight: 750;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 90ms ease, background-color 140ms ease;
}
#start:active { transform: scale(0.975); }
#start:hover { background: rgba(255, 255, 255, 0.22); }

/* --- Bedienleiste --------------------------------------------------------
   Blendet sich nach 5 s aus und kommt bei Beruehrung zurueck. */
#bedienung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem calc(0.75rem + env(safe-area-inset-right))
           calc(0.75rem + env(safe-area-inset-bottom)) calc(0.75rem + env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  opacity: 1;
  transition: opacity 320ms ease;
}
#bedienung[data-versteckt="true"] { opacity: 0; pointer-events: none; }

#kopfleiste {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: calc(0.6rem + env(safe-area-inset-top)) calc(0.75rem + env(safe-area-inset-right))
           0.6rem calc(0.75rem + env(safe-area-inset-left));
  opacity: 1;
  transition: opacity 320ms ease;
}
#kopfleiste[data-versteckt="true"] { opacity: 0; pointer-events: none; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 52px;
  min-width: 52px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bedienung-rand);
  border-radius: 14px;
  background: var(--bedienung);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 120ms ease, transform 80ms ease;
}
.knopf:hover { background: rgba(0, 0, 0, 0.58); }
.knopf:active { transform: scale(0.96); }
.knopf[aria-pressed="true"],
.knopf[data-aktiv="true"] {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.knopf svg { width: 20px; height: 20px; }
.knopf-gross { min-height: 60px; padding: 0.625rem 1.4rem; font-size: 1.0625rem; }

/* --- Formatwahl ---------------------------------------------------------- */
#formate {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  padding: 2px;
}
#formate::-webkit-scrollbar { display: none; }

/* --- Einstellungsschicht -------------------------------------------------- */
#einstellungen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
#einstellungen[data-offen="true"] { display: flex; }
#einstellungen .schicht {
  width: min(34rem, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: #1b1f23;
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}
#einstellungen h2 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.zeile:last-of-type { border-bottom: none; }
.zeile label { font-size: 0.9375rem; font-weight: 600; }
.zeile .hinweis { display: block; font-size: 0.8125rem; font-weight: 400; opacity: 0.6; margin-top: 2px; }
.zeile input[type="number"] {
  width: 6rem;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.zeile input[type="number"]:focus {
  outline: 2px solid var(--gelb);
  outline-offset: 1px;
}

/* --- Kopplung an einen Ligaabend ---------------------------------------- */
#kopplung-anzeige {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.2vh 0 0;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  font-size: clamp(0.8125rem, 1.9vh, 1.0625rem);
  font-weight: 650;
  letter-spacing: 0.01em;
}
#kopplung-anzeige[hidden] { display: none !important; }
#kopplung-anzeige .punkt {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
#kopplung-anzeige[data-zustand="verbunden"] { color: #eafff0; }
#kopplung-anzeige[data-zustand="wartet"]    { color: #fff4cc; }
#kopplung-anzeige[data-zustand="fehler"]    { color: #ffd9d9; background: rgba(120, 0, 0, 0.35); }

#hinweis-wachhalten {
  position: fixed;
  top: calc(0.6rem + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: none;
  max-width: min(92vw, 30rem);
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.8125rem;
  text-align: center;
}
#hinweis-wachhalten[data-sichtbar="true"] { display: block; }

#wachvideo {
  position: fixed;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
  bottom: 0;
  right: 0;
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Im Querformat auf kleinen Geraeten bleibt mehr Platz fuer die Ziffern. */
/* Im Querformat auf dem Handy ist die Hoehe knapp. Dort zaehlt jeder
   Pixel, den die Leisten nicht belegen: kleinere Knoepfe bleiben in einer
   Zeile, statt auf drei umzubrechen. */
@media (orientation: landscape) and (max-height: 500px) {
  #start { min-height: 64px; margin-top: 1.5vh; padding: 0.75rem 1.75rem; }
  #zweitzeile { margin-top: 0.6vh; font-size: clamp(0.8125rem, 3vh, 1.25rem); }
  .knopf { min-height: 44px; min-width: 44px; padding: 0.4rem 0.7rem; font-size: 0.875rem; }
  .knopf-gross { min-height: 44px; padding: 0.4rem 0.9rem; font-size: 0.9375rem; }
  #bedienung { gap: 0.35rem; padding-block: 0.4rem calc(0.4rem + env(safe-area-inset-bottom)); }
  #kopfleiste { padding-block: calc(0.35rem + env(safe-area-inset-top)) 0.35rem; }
}