/* ============================================================
   Wasserturmsiedlung — Kartenseite (2027 V1)
   Setzt tokens.css und base.css voraus. Nur Token-Variablen,
   transparente rgba-Werte basieren auf Primitives (Kommentar).
   Mobile first, Breakpoints: 560px (Tabs), 880px (Zweispalter).
   ============================================================ */

/* --- Utility: nur für Screenreader (base.css hat kein sr-only) --- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Seiteneinstieg --- */
.map-hero { padding-bottom: var(--space-3); }
.map-hero-lead { max-width: var(--maxw-narrow); margin-bottom: 0; }
.map-section { padding-top: var(--space-4); }

/* ============================================================
   Tabs für die drei Kartenmodi
   ============================================================ */
.map-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.map-tab {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: .55rem 1.15rem;
  background: var(--chip-bg); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.map-tab:hover { border-color: var(--accent); color: var(--accent); }
.map-tab[aria-selected="true"] {
  background: var(--chip-active-bg); color: var(--chip-active-tx);
  border-color: transparent;
}
.map-tab[aria-selected="true"]:hover { color: var(--chip-active-tx); }
@media (max-width: 560px) {
  /* Kompakt umbrechende Tabs auf sehr kleinen Displays */
  .map-tab { font-size: .88rem; padding: .5rem .85rem; flex: 1 1 auto; }
}

/* ============================================================
   Layout: Kartenbühne + Seitenspalte
   ============================================================ */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

@media (min-width: 880px) {
  /* Desktop: Karte links (~2/3), Liste rechts (~1/3), Liste sticky */
  .map-layout[data-mode="orientation"],
  .map-layout[data-mode="development"] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
  .map-layout[data-mode="orientation"] .map-side,
  .map-layout[data-mode="development"] .map-side {
    position: sticky; top: 4.5rem;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    padding-right: 2px; /* Platz für Fokusring beim Scrollen */
  }
}

/* ============================================================
   Kartenbühne: Bild mit Crossfade
   ============================================================ */
.map-frame {
  position: relative; margin: 0;
  width: 100%;
  /* aspect-ratio wird von map.js auf das aktuelle Bild gesetzt */
  background: var(--bg-soft); /* keine weiße Zwischenfläche im Dark Mode */
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
}
/* Im Abend-Theme darf die Karte leicht leuchten */
[data-theme="project"] .map-frame { box-shadow: var(--map-glow); }

.map-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity var(--dur-map) var(--ease);
  cursor: zoom-in;
}
.map-img.is-hidden { opacity: 0; pointer-events: none; }

/* --- Werkzeuge unter der Karte --- */
.map-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  justify-content: space-between;
  margin-top: var(--space-2);
}
.map-zoom-btn { font-size: .9rem; padding: .55rem 1.1rem; min-height: 44px; }

/* Lokaler Tag/Nacht-Schalter: bewusst klein und zurückhaltend */
.map-daynight { display: inline-flex; align-items: center; gap: var(--space-1); }
.map-daynight-label { font-size: .8rem; color: var(--text-soft); }

/* --- Erklärender Absatz je Modus --- */
.map-caption { display: none; margin: var(--space-3) 0 0; color: var(--text-soft); max-width: var(--maxw-narrow); }
.map-layout[data-mode="standard"]    .map-caption[data-caption="standard"],
.map-layout[data-mode="orientation"] .map-caption[data-caption="orientation"],
.map-layout[data-mode="development"] .map-caption[data-caption="development"] { display: block; }

/* ============================================================
   Legende (nur Entwicklungskarte, außerhalb des Bilds)
   ============================================================ */
.map-legend { display: none; }
.map-layout[data-mode="development"] .map-legend {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
}
.map-legend-title { font-size: 1.05rem; margin-bottom: var(--space-2); }
.map-legend-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 560px) { .map-legend-grid { grid-template-columns: 1fr 1fr; } }
.map-legend-label {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-soft); font-weight: 600; margin-bottom: var(--space-1);
}
.map-legend-list { list-style: none; margin: 0; padding: 0; }
.map-legend-list li { margin-bottom: .45rem; font-size: .92rem; color: var(--text-soft); }

/* ============================================================
   Seitenspalte: Panels, Filter, Zähler
   ============================================================ */
.map-panel-title { font-size: 1.3rem; margin-bottom: var(--space-2); }
.map-panel-note { color: var(--text-soft); font-size: .95rem; margin: 0; }

.map-filter-label { font-size: .85rem; color: var(--text-soft); margin: 0 0 var(--space-1); }
.map-filters { margin-bottom: var(--space-2); }

/* Zähler als Live-Region */
.map-counter { font-size: .85rem; color: var(--text-soft); margin: 0 0 var(--space-2); }

/* Farbpunkte in Status-Filterchips (nie einzige Information, Text steht daneben) */
.chip .dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; }
.dot-existing { background: var(--status-existing); }
.dot-planned  { background: var(--status-planned); }
.dot-build    { background: var(--status-build); }
.dot-idea     { background: var(--status-idea); }

/* ============================================================
   Punktliste (Orientierung + Entwicklung), Accordion-Prinzip
   ============================================================ */
.map-list { list-style: none; margin: 0; padding: 0; }
.map-point {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-map) var(--ease);
}
.map-point + .map-point { margin-top: var(--space-1); }

/* Hover/Fokus hebt den Listeneintrag deutlich hervor (keine Bild-Overlays) */
.map-point:hover,
.map-point:focus-within {
  background: var(--surface-warm);
  border-color: var(--accent);
}

.map-point-head {
  width: 100%; display: flex; align-items: flex-start; gap: var(--space-2);
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
  color: var(--heading); padding: .8rem var(--space-2); min-height: 44px;
}
.map-point-head::after {
  content: "+"; margin-left: auto; flex: none;
  font-size: 1.15rem; line-height: 1.4; color: var(--accent);
}
.map-point[data-open="true"] .map-point-head::after { content: "\2212"; } /* Minuszeichen */

/* Gestaltete Punkt-Nummer, passend zu den gedruckten Ziffern im Bild */
.map-point-num {
  flex: none; width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.02rem;
  color: var(--heading);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.map-point:hover .map-point-num,
.map-point:focus-within .map-point-num { border-color: var(--accent); color: var(--accent); }

.map-point-headtext { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding-top: .15rem; }
.map-point-title { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.3; }
.map-point-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.map-point-meta .badge { font-size: .7rem; padding: .12rem .55rem; }

.map-point-body { padding: 0 var(--space-2) var(--space-2) calc(2rem + var(--space-2) + var(--space-2)); color: var(--text-soft); font-size: .95rem; }
.map-point-body p { margin: 0 0 var(--space-2); }
.map-point-body p:last-child { margin-bottom: 0; }
.map-point-prio { font-size: .85rem; }
@media (max-width: 560px) {
  .map-point-body { padding-left: var(--space-2); }
}

/* Hinweis-Badge "Nur Tageskarte": erscheint nur bei dunkler Bildvariante */
.badge-dayonly { color: var(--text-soft); display: none; }
.map-layout[data-variant="dark"] .badge-dayonly { display: inline-flex; }

/* Gefilterte (nicht passende) Einträge werden visuell zurückgenommen,
   bleiben aber bedien- und vorlesbar; der Zähler kommuniziert den Stand */
.map-point.is-dimmed { opacity: .35; }

/* Cluster: der Garten-Entwicklungsraum wird als solcher hervorgehoben */
.map-point.is-cluster { border-left: 3px solid var(--gold); }
.map-cluster-tag {
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold); border: 1px solid currentColor;
  border-radius: var(--radius-pill); padding: .12rem .55rem;
}
.map-cluster-list { margin: 0 0 var(--space-2); padding-left: 1.1rem; }
.map-cluster-list li { margin-bottom: .25rem; }

/* CTA je Entwicklungspunkt */
.map-point-cta { display: inline-block; font-weight: 600; min-height: 44px; padding: .55rem 0; }

/* ============================================================
   Lightbox: aktuelles Kartenbild groß, horizontal scrollbar
   ============================================================ */
/* --- Map-Lightbox: eigener Namensraum, kollidiert nicht mit der Galerie-Lightbox aus styles.css --- */
.map-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 34, 46, .93); /* rgba auf Basis von --wts-night */
}
.map-lightbox[hidden] { display: none; }
.map-lightbox-close {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--wts-cream); /* Primitive bewusst: Lightbox ist immer dunkel */
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(251, 250, 245, .4); /* rgba auf Basis von --wts-cream */
  border-radius: 50%;
}
.map-lightbox-scroll {
  width: 100%; height: 100%;
  overflow: auto;
  display: flex; align-items: center;
  padding: var(--space-4) var(--space-3);
  -webkit-overflow-scrolling: touch;
}
.map-lightbox-img {
  max-width: none;           /* darf breiter als der Viewport sein */
  height: 82vh; width: auto; /* groß, horizontal scroll-/zoombar */
  margin: auto;
  border-radius: var(--radius-s);
}
@media (max-width: 640px) {
  .map-lightbox-img { height: 70vh; }
}

/* ============================================================
   Touch: Bedienelemente mindestens 44 x 44 px
   ============================================================ */
@media (pointer: coarse) {
  .map-filters .chip { min-height: 44px; }
  .map-daynight .ctrl-group button { min-height: 44px; min-width: 44px; }
}