/* Ampeln Hamburg - Gestaltung.
   Die Signalfarben stehen als Merkmale am :root und werden im Farbsehmodus
   ueber [data-cvd] ausgetauscht; die Zeichenschicht liest sie von dort,
   damit es genau eine Quelle fuer jede Farbe gibt. */

:root {
  --grund:      #0e1216;
  --tafel:      rgba(17, 23, 29, 0.94);
  --rand:       rgba(255, 255, 255, 0.12);
  --schrift:    #f2f5f7;
  --schrift-2:  #97a4b0;
  --schrift-3:  #64717d;

  /* Signalbilder: 0 dunkel, 1 rot, 2 gelb, 3 gruen, 4 rot-gelb,
     5 gelb blinkend, 6 gruen blinkend, u unbekannt */
  --s0: #6b7885;
  --s1: #ff3b30;
  --s2: #ffe000;
  --s3: #34d058;
  --s4: #ff8c00;
  --s5: #fff06b;
  --s6: #7ee89b;
  --su: #2b3640;
}

/* Geprueft mit dem Palettenvalidator: Gruen->Blau hebt die Rot-Gruen-Falle
   auf (schlechtestes Paar 19,7 statt 5,7 dE bei Farbsehschwaeche). */
:root[data-cvd="1"] {
  --s1: #ff5a36;
  --s2: #ffe800;
  --s3: #33b1ff;
  --s4: #ff8c1a;
  --s5: #fff28a;
  --s6: #8fd6ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--grund);
  color: var(--schrift);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#karte { position: absolute; inset: 0; background: var(--grund); }

/* --- Tafel oben links ------------------------------------------------ */
.tafel {
  position: absolute; z-index: 500; top: 12px; left: 12px;
  width: 268px; max-width: calc(100vw - 24px);
  padding: 14px 16px 12px;
  background: var(--tafel);
  border: 1px solid var(--rand);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.tafel h1 {
  margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
}

.einklappen {
  border: 0; background: transparent; color: var(--schrift-2);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
  border-radius: 6px;
}
.einklappen:hover { background: rgba(255,255,255,0.08); color: var(--schrift); }

.unterzeile {
  margin: 8px 0 12px; font-size: 12.5px; color: var(--schrift-2);
  display: flex; align-items: center; gap: 7px;
}

.puls {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--s3); flex: none;
  box-shadow: 0 0 0 0 currentColor;
  animation: puls 2.4s ease-out infinite;
}
.puls[data-aus="1"] { background: var(--s0); animation: none; }
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(52, 208, 88, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 208, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 208, 88, 0); }
}
@media (prefers-reduced-motion: reduce) { .puls { animation: none; } }

/* --- Verteilungsbalken ----------------------------------------------- */
.balken {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--su); gap: 2px; margin-bottom: 12px;
}
.stueck { transition: width 0.6s ease; min-width: 0; }
.stueck[data-z="1"] { background: var(--s1); }
.stueck[data-z="2"] { background: var(--s2); }
.stueck[data-z="3"] { background: var(--s3); }
.stueck[data-z="4"] { background: linear-gradient(var(--s2) 50%, var(--s1) 50%); }
.stueck[data-z="0"] { background: var(--s0); }
.stueck[data-z="u"] { background: var(--su); }

/* --- Legende ---------------------------------------------------------- */
.legende { list-style: none; margin: 0 0 12px; padding: 0; font-size: 12.5px; }
.legende li {
  display: flex; align-items: center; gap: 8px;
  padding: 2.5px 0; color: var(--schrift-2);
}
.legende .punkt {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  outline: 1px solid rgba(0,0,0,0.5); outline-offset: -1px;
}
.legende .zahl { margin-left: auto; color: var(--schrift); font-variant-numeric: tabular-nums; }

/* --- Schalter --------------------------------------------------------- */
.schalter {
  border-top: 1px solid var(--rand); padding-top: 10px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12.5px; color: var(--schrift-2);
}
.schalter label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.schalter input { accent-color: var(--s3); margin: 0; }
.hinweis {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1px solid var(--schrift-3); color: var(--schrift-3);
  font-size: 10px; line-height: 12px; text-align: center; cursor: help;
}

/* --- Seitenleiste ----------------------------------------------------- */
.seite {
  position: absolute; z-index: 500; top: 12px; right: 12px; bottom: 46px;
  width: 300px; max-width: calc(100vw - 24px);
  padding: 14px 16px; overflow-y: auto;
  background: var(--tafel); border: 1px solid var(--rand);
  border-radius: 12px; backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.seite h2 { margin: 0 26px 2px 0; font-size: 15.5px; font-weight: 650; }
.seitenzeile { margin: 0 0 12px; font-size: 12.5px; color: var(--schrift-2); }
.zu {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: transparent; color: var(--schrift-2);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.zu:hover { background: rgba(255,255,255,0.08); color: var(--schrift); }

.spurblock { margin-bottom: 14px; }
.spurblock h3 {
  margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--schrift-3);
}
.gruppe {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gruppe:last-child { border-bottom: 0; }
.gruppe .punkt { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.gruppe .kennung { color: var(--schrift); font-variant-numeric: tabular-nums; }
.gruppe .wort { margin-left: auto; color: var(--schrift-2); font-size: 12px; }

/* --- Schwebeanzeige --------------------------------------------------- */
.schwebe {
  position: absolute; z-index: 600; pointer-events: none;
  padding: 6px 9px; font-size: 12px; line-height: 1.4;
  background: rgba(10, 14, 18, 0.96); color: var(--schrift);
  border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5); white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
}
.schwebe b { font-weight: 600; }
.schwebe .punkt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: -1px; margin-right: 5px;
}

/* --- Fusszeile -------------------------------------------------------- */
.fuss {
  position: absolute; z-index: 500; left: 12px; bottom: 10px;
  max-width: calc(100vw - 140px);
  font-size: 10.5px; line-height: 1.5; color: var(--schrift-3);
}
.fuss a { color: var(--schrift-2); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

.leaflet-container { background: var(--grund); }
.leaflet-control-attribution { display: none; } /* steht vollstaendig in der Fusszeile */
.leaflet-bar a {
  background: var(--tafel); color: var(--schrift);
  border-bottom-color: var(--rand);
}
.leaflet-bar a:hover { background: #1b232b; color: var(--schrift); }

/* --- Schmale Fenster -------------------------------------------------- */
@media (max-width: 720px) {
  .tafel { width: calc(100vw - 24px); }
  .seite {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%;
    max-height: 52vh; border-radius: 12px 12px 0 0;
  }
  .fuss { display: none; }
}

/* Die hellen OSM-Kacheln werden hier zum dunklen Untergrund. Umkehren und
   Farbton drehen erhaelt die Ordnung der Karte (Wasser bleibt blaeulich,
   Gruenflaechen bleiben gruenlich), nimmt ihr aber die Helligkeit, mit der
   sie sonst gegen die Signalpunkte anleuchtet. */
.kachel {
  filter: invert(1) hue-rotate(185deg) saturate(0.14) brightness(0.72) contrast(0.86);
}


/* Rot-Gelb ist der einzige Zustand, der zwei Lampen gleichzeitig zeigt.
   Gemessen liegt sein Farbton nur 15 dE von Rot entfernt - zu wenig, um ihn
   als Punkt allein ueber die Farbe zu erkennen. Deshalb wird er ueberall
   zweigeteilt dargestellt, wie die Anlage selbst ihn zeigt. */
.punkt[data-z="4"] {
  background: linear-gradient(var(--s2) 50%, var(--s1) 50%) !important;
}

/* --- Ladeschirm ------------------------------------------------------- */
/* Der Dienst schlaeft im Leerlauf. Beim ersten Besuch danach kommen die
   Signale einzeln herein - erst bei 80 % der erwarteten Menge wird die
   Karte freigegeben, sonst saehe der Besucher ein halbleeres Hamburg und
   hielte es fuer den echten Zustand. */
.ladeschirm {
  position: absolute; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: var(--grund);
  transition: opacity 0.5s ease, visibility 0.5s;
}
.ladeschirm[hidden] {
  display: flex !important;   /* [hidden] wuerde sonst hart ausblenden */
  opacity: 0; visibility: hidden; pointer-events: none;
}

.ladekarte {
  width: 320px; max-width: calc(100vw - 40px);
  padding: 28px 26px 22px; text-align: center;
}
.ladekarte h1 { margin: 0 0 6px; font-size: 19px; font-weight: 650; }

.ampel {
  width: 34px; margin: 0 auto 18px; padding: 5px 0;
  border-radius: 9px; background: #1b232b; border: 1px solid var(--rand);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lampe {
  width: 16px; height: 16px; border-radius: 50%;
  background: #2b3640;
  animation: lauf 3s infinite;
}
.lampe.l1 { animation-delay: 0s; }
.lampe.l2 { animation-delay: 1s; }
.lampe.l3 { animation-delay: 2s; }
.lampe.l2 { --an: var(--s2); }
.lampe.l3 { --an: var(--s3); }
.lampe.l1 { --an: var(--s1); }
@keyframes lauf {
  0%, 24% { background: var(--an); }
  30%, 100% { background: #2b3640; }
}
@media (prefers-reduced-motion: reduce) { .lampe { animation: none; } }

.ladetext { margin: 0 0 14px; font-size: 13px; color: var(--schrift-2); }

.ladebalken {
  height: 5px; border-radius: 3px; background: #1b232b; overflow: hidden;
}
.ladefortschritt {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--s1), var(--s2) 55%, var(--s3));
  transition: width 0.7s ease;
}
.ladezahl {
  margin: 9px 0 0; font-size: 12px; color: var(--schrift-3);
  font-variant-numeric: tabular-nums;
}
.ladefuss {
  margin: 18px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--schrift-3);
}
.trotzdem {
  margin-top: 16px; padding: 7px 14px; font: inherit; font-size: 12.5px;
  color: var(--schrift-2); background: transparent; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 8px;
}
.trotzdem:hover { background: rgba(255,255,255,0.07); color: var(--schrift); }

/* Im Sparmodus werden die nie meldenden Signale nicht gezeichnet. Die
   Legende fuehrt sie weiter auf - durchgestrichen, damit der Unterschied
   zwischen "es gibt sie nicht" und "sie sind gerade ausgeblendet" sichtbar
   bleibt. */
.legende li[data-aus="1"] { opacity: 0.5; }
.legende li[data-aus="1"] span:nth-child(2) { text-decoration: line-through; }
.legende li[data-aus="1"] .punkt { box-shadow: inset 0 0 0 1px var(--schrift-3); }