/* Die Kästchen an Gates und Abschnitten auf der Karte.
 *
 * EIGENE DATEI, weil sie an ZWEI Stellen gebraucht werden: im Admin-Portal (Stände →
 * Gates, mit Bearbeiten) und auf der öffentlichen Seite /Zufahrtwege_Auto, die den
 * Standbetreibern per Mail geschickt wird. Beide zeichnen dasselbe Gelände mit
 * derselben Funktion (`setGates` in js/map.js) — und sollen dieselben Kästchen
 * zeigen. Zwei Kopien wären zwei Karten desselben Geländes, und die zweite wäre die,
 * die nach der nächsten Änderung anders aussieht.
 *
 * Was hier NICHT steht: alles zum Bearbeiten (Griffe, Kontextmenü, die Listen der
 * Ansicht). Das gibt es nur im Portal und steht in css/admin.css.
 *
 * `--lf-ink-60`, `--lf-warn-bg` und `--lf-warn-fg` kommen aus css/tokens.css; beide
 * Seiten laden es vorher.
 */

.gatemarker { pointer-events: none; }
.gatelabel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1.5px solid var(--gate-farbe, #222);
  background: rgba(255, 255, 255, .94);
  font-size: 11.5px;
  font-weight: 800;
  color: #1b1d20;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.gatelabel--gate { border-color: #00B3A6; color: #00635C; }
/* Wozu das Gate dient, steht als kurze Marke im Kästchen: „ein", „aus", „ein/aus".
   Eine Ausfahrt bekommt einen warmen Grund — sie ist die eine Sorte Gate, an der ein
   Irrtum Gegenverkehr bedeutet. */
.gatelabel__art {
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(0, 179, 166, .18);
  color: #00635C;
}
.gatelabel--aus .gatelabel__art { background: var(--lf-warn-bg); color: var(--lf-warn-fg); }
.gatelabel--sperr {
  border-color: #D4537E;
  color: #9C2F52;
  border-style: dashed;
}
/* Der Abschnitt hinter der Gate-Nummer — kleiner, damit die Nummer die Zeile trägt. */
.gatelabel__zu {
  font-weight: 700;
  font-size: 10.5px;
  color: var(--lf-ink-60);
  border-left: 1px solid rgba(0, 0, 0, .18);
  padding-left: 5px;
}