/* Verteilstellen-Karte. Nutzt die Design-Tokens des Themes (--rot, --petrol …). */

.veg-vk { margin: 1.5rem 0; }

/* ---- Kopfzeile: Zahl und Schnellschalter ---- */
.veg-vk__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  margin-bottom: .6rem;
}
.veg-vk__zahl { font-weight: 700; }
.veg-vk__hinweis { font-size: .85rem; color: var(--text-leise); }

/* ---- Kategorie-Häkchen ----
 *
 * Nur in der Arbeitsansicht: Öffentlich wird die Leiste seit 06.08.2026 gar nicht
 * mehr ausgegeben (verteilstellen.php). Zehn Haken über der Karte sind mehr
 * Bedienung, als die Frage „wo liegt das Heft?“ braucht — beim Planen einer Runde
 * dagegen ist „heute nur die Bäcker“ genau die richtige Frage. */
.veg-vk__filter {
  display: flex; flex-wrap: wrap; gap: .35rem .6rem;
  margin-bottom: .9rem;
}
/* Solange keine Stelle da ist, bleibt die Leiste leer — dann soll sie auch keinen
   Abstand über der Karte aufspannen. */
.veg-vk__filter:empty { margin-bottom: 0; }
.veg-vk-haken {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem;
  background: var(--papier); border: 1px solid var(--petrol);
  border-radius: 999px; cursor: pointer; font-size: .9rem; line-height: 1.4;
}
.veg-vk-haken:hover { border-color: var(--rot); background: var(--petrol-hell); }
.veg-vk-haken:has(input:not(:checked)) { opacity: .5; }
.veg-vk-haken input { accent-color: var(--rot); cursor: pointer; margin: 0; }
.veg-vk-haken__symbol { line-height: 1; }
.veg-vk-haken__zahl {
  font-size: .78rem; color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.veg-vk-haken-schnell { display: inline-flex; gap: .35rem; align-items: center; }
.veg-vk-schnell {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px dashed var(--petrol); background: none; color: var(--text-leise);
}
.veg-vk-schnell:hover { border-color: var(--rot); color: var(--rot); }

/* ---- Die Karte ---- */
/* position/z-index: eigener Stapelkontext, damit Leaflets interne Werte (bis
   1000 für die Bedienelemente) nicht über der Navleiste des Themes landen und
   das Untermenü hinter der Karte verschwindet. Dieselbe Begründung wie bei
   .osm-karte in der style.css des Themes. */
.veg-vk__karte {
  position: relative;
  z-index: 0;
  height: 34rem; max-height: 80vh;
  border: 1px solid var(--petrol); border-radius: var(--radius);
}
@media (max-width: 40rem) { .veg-vk__karte { height: 24rem; } }

/* Marker: gezeichnete Punkte, damit die Farbe ohne neues Bild wechseln kann. */
.veg-vk-nadel { background: none; border: 0; }
.veg-vk-nadel__punkt {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* Bündel: die Zahl, die sich beim Hineinzoomen auflöst. */
.veg-vk-bund {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700;
  font-family: inherit; font-variant-numeric: tabular-nums;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* Die Bündel tragen bewusst KEINE Ampelfarben.
 *
 * Sie hatten einmal welche — grün unter 10, gelb unter 100, orangerot darüber.
 * Das kollidierte mit den Arbeitsständen, die genau dieselbe Palette benutzen
 * und etwas völlig anderes bedeuten: Ein grüner Kreis hieß dann je nach Zoom
 * „hier liegt das Heft aus“ oder „hier stehen wenige Stellen“. Zwei Bedeutungen
 * auf einer Farbe sind keine.
 *
 * Die Menge steckt jetzt in EINER Farbfamilie und zusätzlich in der Größe:
 * dunkler und größer heißt mehr. Damit ist die Ampel wieder eindeutig den
 * Arbeitsständen vorbehalten.
 *
 * Welche Familie das ist, hängt an der Ansicht — und das ist kein Zufall:
 *
 * ÖFFENTLICH (diese drei Regeln) grün. Dort ist jede einzelne Stelle grün, denn
 * es kommen nur die verteilten mit. Ein Bündel ist also nichts als ein Haufen
 * grüner Nadeln, und die Farbe sagt genau das. Das vorherige Grau-Blau war
 * derweil richtig und tot zugleich: Es stimmte nur, weil es nichts behauptete.
 * Die Zahl auf der Karte ist die gute Nachricht dieser Seite — sie darf danach
 * aussehen.
 *
 * IN DER ARBEITSANSICHT bleibt die Scheibe neutral (weiter unten, beim Ring):
 * Dort steht neben grün auch gelb auf der Karte, und eine grüne Scheibe hieße
 * fälschlich „hier ist alles erledigt“. Genau diese Doppeldeutigkeit war der
 * Grund, die Ampel aus den Bündeln zu nehmen.
 *
 * Die drei Grüntöne halten mit Weiß mindestens 4,5:1 aus (4,54 / 7,89 / 11,82) —
 * die Zahl im Kreis ist klein und muss auf dem Handy in der Sonne lesbar sein. */
.veg-vk-bund--klein  { background: #448527; font-size: .85rem; }
.veg-vk-bund--mittel { background: #2e5c1a; font-size: .9rem; }
.veg-vk-bund--gross  { background: #1f3f11; font-size: .95rem; }

/* Der Ring: woraus besteht das Bündel?
 *
 * Nur in der Arbeitsansicht. So sieht man schon beim Herauszoomen, welche Ecke
 * noch offen ist. Einfarbige Ringe werden ausdrücklich mitgezeichnet: rundum grün
 * heißt „hier ist alles erledigt“, rundum gelb „hier ist noch nichts passiert“ —
 * ließe man sie weg, sähen ausgerechnet diese beiden gleich aus.
 *
 * Die Ampel steckt hier ausschließlich im Ring; die Scheibe in der Mitte bleibt
 * neutral und trägt die Zahl. Dadurch bleiben Menge (Scheibe) und Zusammensetzung
 * (Ring) sauber getrennt. */
/* HIER KEIN `position` SETZEN.
 *
 * Leaflet positioniert jeden Marker über `.leaflet-marker-icon { position: absolute }`
 * (leaflet.css, Zeile 5/13) und schiebt ihn dann per `transform` an seinen Platz.
 * Diese Regel hat dieselbe Spezifität (0,1,0), und verteilkarte.css wird nach
 * leaflet.css geladen — ein `position: relative` hier gewinnt also und nimmt das
 * Bündel aus der absoluten Positionierung heraus. Es landet dann im normalen
 * Textfluss des Marker-Bereichs, und der `transform` verschiebt es von dort aus
 * weiter. Ergebnis: Die Bündel stehen irgendwo, nur nicht auf ihren Koordinaten.
 *
 * Genau das war am 05.08.2026 der Fehler „die Kreise sind vollkommen verschoben“ —
 * gemessen bis 1.062 px daneben (Zoom 14, rund 7 km), und je weiter man
 * hineinzoomt, desto mehr Bündel stapeln sich im Fluss.
 *
 * Der Reif darunter braucht kein `position: relative` als Bezug: Leaflets
 * `absolute` ist bereits ein Bezugsrahmen für `inset: 0`. Geprüft — die Geometrie
 * des Reifs ist mit und ohne diese Zeile identisch. */
.veg-vk-bund--ring { background: none; }
.veg-vk-bund__ring {
  position: absolute; inset: 0; border-radius: 50%;
  /* Die Mitte ausstanzen: Der Ring ist ein Reif, keine Torte — eine volle
     Kreisfläche in Ampelfarben würde wieder mit den Nadeln konkurrieren. */
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
          mask: radial-gradient(circle, transparent 58%, #000 59%);
}
.veg-vk-bund__kern {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 74%; height: 74%; border-radius: 50%;
}
/* Die Scheibe der Arbeitsansicht: neutral, aber nicht blass. Sie muss sich gegen
   den Ampelring behaupten, ohne selbst nach Ampel auszusehen — deshalb das satte
   Petrol des Themes und kein Grün (das hieße hier „erledigt“). */
.veg-vk-bund--ring .veg-vk-bund__kern { background: #2c5f66; }

/* Ohne Ring trägt der äußere Kreis die Farbe, der Kern nur die Zahl. */
.veg-vk-bund:not(.veg-vk-bund--ring) .veg-vk-bund__kern { width: 100%; height: 100%; }

/* ---- Popup ---- */
.veg-vk-popup { font-size: .92rem; line-height: 1.45; min-width: 11rem; }
.veg-vk-popup__kat { color: var(--text-leise); font-size: .85rem; margin-top: .1rem; }
.veg-vk-popup__adresse { margin-top: .35rem; }
.veg-vk-popup__notiz {
  margin-top: .4rem; padding-top: .35rem; border-top: 1px solid #e3e6e0;
  font-style: italic; color: var(--text-leise);
}

/* Arbeitsstand umschalten — nur für Angemeldete im Popup sichtbar. */
.veg-vk-stand {
  display: flex; gap: .25rem; margin-top: .6rem;
  padding-top: .5rem; border-top: 1px solid #e3e6e0;
}
.veg-vk-stand__knopf {
  display: inline-flex; align-items: center; gap: .25rem;
  font: inherit; font-size: .78rem; cursor: pointer;
  padding: .2rem .45rem; border-radius: 999px;
  border: 1px solid #cdd2ca; background: #fff; color: var(--text-leise);
}
.veg-vk-stand__knopf:hover { border-color: var(--text); color: var(--text); }
.veg-vk-stand__knopf.ist-aktiv {
  border-color: var(--text); color: var(--text); font-weight: 700; background: #f2f4f0;
}
.veg-vk-stand__knopf[disabled] { opacity: .5; cursor: progress; }
.veg-vk-stand__punkt {
  display: inline-block; width: .7rem; height: .7rem;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.2);
}

/* ---- Meldung mit Rücknahme ---- */
/* Liegt IN der Karte, unten mittig: Nach einem Tipp aufs Handy ist der Daumen
   dort und nicht am Seitenende. z-index 1000 — Leaflets Bedienelemente reichen
   bis 800, die Popups bis 700. */
.veg-vk__meldung {
  position: absolute; z-index: 1000;
  left: 50%; bottom: .75rem; transform: translateX(-50%);
  display: none; align-items: center; gap: .6rem;
  max-width: calc(100% - 1.5rem);
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(31, 42, 44, .94); color: #fff;
  font-size: .85rem; line-height: 1.35;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.veg-vk__meldung.ist-da { display: flex; }
.veg-vk__meldung-text { min-width: 0; }
.veg-vk__meldung-knopf {
  flex: none; font: inherit; font-weight: 700; cursor: pointer;
  padding: .15rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55); background: none; color: #fff;
}
.veg-vk__meldung-knopf:hover { background: rgba(255,255,255,.16); }

/* ---- Legende ---- */
.veg-vk__legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin-top: .7rem; font-size: .85rem; color: var(--text-leise);
}
.veg-vk__legende span { display: inline-flex; align-items: center; gap: .35rem; }
.veg-vk__legende i {
  width: .8rem; height: .8rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2); display: inline-block;
}
.veg-vk__legende-hinweis { font-style: italic; }
.veg-vk__quelle { margin-top: .5rem; font-size: .8rem; color: var(--text-leise); }