/**
 * Karten-Stack: zentrale Stylueberschreibung fuer Leaflet-Defaults.
 *
 * Wird VOR `leaflet/dist/leaflet.css` eingebunden (oder dahinter, da spaetere
 * Regeln hoehere Spezifitaet haben), um die Standard-Optik der Attribution-
 * Leiste unten rechts in der Karte deutlich zurueckzunehmen. Lizenzpflichtige
 * OpenMapTiles-/OpenStreetMap-Hinweise bleiben lesbar, nur sehr klein und
 * mit niedriger Deckkraft; das Leaflet-eigene Logo (kein Pflicht-Element)
 * wird nahezu unsichtbar geschaltet.
 *
 * Wichtig: NUR CSS, keine Aenderung an der HTML-Struktur der
 * `.leaflet-control-attribution` -- Leaflet kommt mit nachtraeglichen
 * Eingriffen in die interne DOM-Struktur des Controls nicht klar.
 */

/* Hinweis .leaflet-container davor: Leaflets Default hat die spezifischere
   Form `.leaflet-container .leaflet-control-attribution`. Mit dem gleichen
   Prefix gewinnt der spaeter geladene Override (Kaskade nach Reihenfolge
   bei gleicher Spezifitaet). */
.leaflet-container .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0);
  margin: 0;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1.2;
  color: #333;
  opacity: 0.25;
  transition: opacity 0.2s ease-in-out;
}

.leaflet-container .leaflet-control-attribution:hover,
.leaflet-container .leaflet-control-attribution:focus-within {
  opacity: 0.85;
}

.leaflet-control-attribution a {
  text-decoration: none;
}

.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
  text-decoration: underline;
}

/* Leaflet-eigenes Logo: kein Pflicht-Element, laut Leaflet-Lizenz darf es
   weggelassen werden. Hier komplett unsichtbar schalten -- nicht aus dem DOM,
   nur visuell, damit Lizenztechnisch alles seine Ordnung hat. */
.leaflet-attribution-flag {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  display: inline-block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Diagnose-Werkzeug: Zoom-Stufen-Anzeige unten links (siehe map-setup.js,
   erstelleZoomAnzeige). Nur fuer die Design-Abstimmung mit Gene gedacht,
   darf spaeter komplett entfernt werden -- rein additiv, keine bestehende
   Regel oben veraendert. */
.leaflet-zoom-anzeige {
  margin: 0 0 6px 6px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.55);
  color: #333;
  font-size: 11px;
  line-height: 1.4;
  font-family: inherit;
  border-radius: 3px;
  pointer-events: none;
  user-select: none;
}

/* Light/Dark-Mode-Schalter unten rechts, ueber dem Satellit-Schalter (siehe map-setup.js,
   erstelleThemeSchalter). Anders als die Zoom-Anzeige klickbar, daher eigener Hover-
   Zustand und kein pointer-events:none. Rechter Margin (wie der Satellit-Schalter), damit
   beide in der rechten Ecke buendig uebereinander sitzen. */
.leaflet-theme-schalter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 6px 4px 0;
  padding: 0;
  color: #e5e7eb;
  background: rgba(31, 41, 55, 0.85);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.leaflet-theme-schalter:hover {
  background: #1f2937;
  color: #ffffff;
}

/* Waehrend die Satellitenansicht aktiv ist (siehe erstelleSatellitSchalter): Theme-Schalter
   bleibt sichtbar, wirkt aber erkennbar inaktiv (hell/dunkel betrifft nur die eigenen
   Kacheln). Klicks ignoriert der JS-Handler bereits selbst, cursor:default vermeidet
   zusaetzlich den irrefuehrenden Klick-Cursor. */
.leaflet-theme-schalter--inaktiv {
  opacity: 0.4;
  cursor: default;
}

.leaflet-theme-schalter--inaktiv:hover {
  background: rgba(31, 41, 55, 0.85);
  color: #e5e7eb;
}

/* Satellit-Schalter unten rechts, Gegenstueck zur Zoom-Anzeige unten links (siehe
   map-setup.js, erstelleSatellitSchalter). Stapelt sich automatisch ueber die Leaflet-
   Standard-Attribution (dieselbe Ecke), daher der Abstand nach unten. */
.leaflet-satellit-schalter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 6px 4px 0;
  padding: 0;
  color: #e5e7eb;
  background: rgba(31, 41, 55, 0.85);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.leaflet-satellit-schalter:hover {
  background: #1f2937;
  color: #ffffff;
}

/* Icon-Groesse fuer beide Schalter (SVG erbt Farbe via currentColor). */
.leaflet-theme-schalter svg,
.leaflet-satellit-schalter svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Info-/Legenden-Menue unten links (siehe info-box.js). Der I-Button sitzt fix
   unten (ueber der Zoom-Anzeige, falls sichtbar), das Popup waechst nach oben.
   Optik konsistent mit den anderen Stack-Controls; theme-faehig ueber .ist-dunkel. */
.leaflet-info-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 6px 6px;
  gap: 6px;
  max-width: calc(100vw - 1rem);
}

.leaflet-info-box-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #e5e7eb;
  background: rgba(31, 41, 55, 0.85);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.leaflet-info-box-btn:hover,
.leaflet-info-box-btn--aktiv {
  background: #1f2937;
  color: #ffffff;
}

.leaflet-info-box-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Popup: standardmaessig ausgeblendet, nur mit --offen sichtbar. Optik fest dunkel
   (Gene 2026-08-03: Standard, unabhaengig vom Kacheln-Theme-Schalter .ist-dunkel). */
.leaflet-info-box-popup {
  display: none;
  width: 224px;
  max-width: calc(100vw - 1rem);
  padding: 10px 12px;
  background: rgba(31, 41, 55, 0.96);
  color: #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  font-size: 12px;
  line-height: 1.4;
  font-family: inherit;
}

.leaflet-info-box-popup--offen {
  display: block;
}

.leaflet-info-box-sektion + .leaflet-info-box-sektion {
  margin-top: 12px;
}

.leaflet-info-box-titel {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
}

.leaflet-info-box-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}

.leaflet-info-box-zeile:last-child {
  margin-bottom: 0;
}

/* Checkbox-Zeile direkt unter einem Sektions-Titel (z. B. "Nur meine eigenen Marker
   anzeigen"). Eigener Abstand nach unten, damit sie sich optisch von der Typ-Liste
   darunter absetzt. */
.leaflet-info-box-checkzeile {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  cursor: pointer;
}

.leaflet-info-box-checkbox {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: #e5e7eb;
}

/* Klickbare Markertyp-Zeile (nur wenn onTypKlick gesetzt). */
.leaflet-info-box-typ {
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.12s ease-in-out;
}

.leaflet-info-box-typ:hover {
  background: rgba(148, 163, 184, 0.16);
}

/* Ausgeblendeter Typ: ausgegraut + durchgestrichenes Label, Punkt blasser. */
.leaflet-info-box-typ--aus {
  opacity: 0.45;
}

.leaflet-info-box-typ--aus .leaflet-info-box-text {
  text-decoration: line-through;
}

.leaflet-info-box-punkt {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Platzhalter-Punkt ohne Farbe (z. B. Geste "Halten") -- unsichtbar, haelt aber
   die Ausrichtung. */
.leaflet-info-box-punkt--leer {
  border-color: transparent;
  box-shadow: none;
}

.leaflet-info-box-geste {
  font-weight: 600;
}

/* Ortsverein-Namen-Labels (siehe drk-cluster-layer.js, ovLabelGruppe): permanent sichtbar
   ab einer Zoom-Schwelle statt Tooltip/Popup (bewusst entfernt). Bewusst OHNE jeden Halo/
   Hintergrund/Rahmen (Gene-Entscheidung 2026-08-02, loest die fruehere Halo-Variante ab) --
   nur die reine Schriftfarbe. Icon selbst traegt width/height:auto (kein Leaflet-Default-
   Icon-Mass), daher hier zentriert auf den berechneten Punkt statt oben-links daran
   verankert. */
.drk-ov-label {
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  font-size: 12px;
  line-height: 1.4;
  font-family: inherit;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Dark Mode: Karten-Hintergrund dunkel statt Leaflet-Standard #ddd (siehe ist-dunkel-Klasse,
   gesetzt vom Theme-Schalter in map-setup.js/wendeAnsichtAn, direkt auf .leaflet-container).
   Grund (Diagnose 2026-08-02): einzelne Kachel-Canvas-Elemente (canvas-tile-layer.js) haben
   bei Bildschirm-Skalierung ungleich 100% winzige Sub-Pixel-Luecken zwischen sich (Chromium
   rundet die CSS-Transform-Position jeder Kachel unabhaengig) -- dieselbe Grundursache wie bei
   den vertigen Kachel-Naehten, nur dass dieser Rest (Element-Abstand, kein Bild-Bleeding mehr)
   vom Canvas-Umstieg nicht erfasst wurde. Der helle Standard-Hintergrund scheint durch diese
   Luecken sichtbar durch -- im Light-Stil faellt das kaum auf (aehnlicher Hellwert), im
   Dark-Stil ergibt es ein deutliches helles Gitter. Farbe = exakter background-Layer-Wert aus
   style-dark.json/style.json (Dark-Variante), damit die Luecke unsichtbar wird statt nur
   weniger grell. Behebt zugleich den Hell-Flash beim Zoomen und kurz hell aufblitzende neu
   geladene Kacheln im Dark Mode (beides derselbe durchscheinende Hintergrund waehrend/vor dem
   Kachel-Zeichnen, siehe createTile in canvas-tile-layer.js -- Canvas ist bis zum fertigen
   drawImage() transparent). */
/* Hell-Modus: dieselbe Technik wie beim Dark-Mode-Hintergrund unten (Luecken/Blitzer waehrend
   des Kachel-Zeichnens unsichtbar machen, siehe dortiger Kommentar) -- Farbe = exakter
   background-Layer-Wert aus style.json (Hell-Variante). Bisher fehlte das hier: Leaflets
   Standard-Grau (#ddd) blieb unangepasst sichtbar, das war der weisse Blitzer beim Zoomen im
   Hellmodus (Diagnose 2026-08-02). */
/* DEAKTIVIERT auf Gene-Anweisung (2026-08-02, nach dem Pruning-Fix in canvas-tile-layer.js) --
   Original siehe Kommentar-Block oben drueber. */
/*
.leaflet-container {
  background: #a8cc88;
}

.leaflet-container.ist-dunkel {
  background: #3a5324;
}
*/

.ist-dunkel .drk-ov-label {
  color: #fff;
}

/* Schwebender Gebiets-Titel zentriert im sichtbaren Bereich der Maske (siehe maske.js,
   erstelleMaske + opts.titel). Bewusst gross und halbtransparent, damit er auf jedem
   Karten-Hintergrund lesbar bleibt; nur sichtbar ab Z=10 (siehe MASKE_TITEL_MIN_ZOOM),
   darunter wuerde der Titel riesig wirken. Pointer-Events aus, damit Klicks durchgehen. */
.rb-maske-titel {
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  font-family: inherit;
  letter-spacing: 0.02em;
  color: rgba(17, 24, 39, 0.85);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-align: center;
}

.ist-dunkel .rb-maske-titel {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.5);
}