/* Hörste-Karte (js/karte/hoerste-karte.js) und Kartenansicht (js/karte/hoerste-kartenansicht.js).
   Die Zeichenregeln (.karte-…) sind dieselben wie in der Dorf-Rallye (rallye/css/app.css) – wer dort etwas an
   Farben oder Strichen ändert, ändert es hier mit. Die Bedienung (.hk-…) ist für die Grav-Sites; Farben über
   Variablen, die eine Site überschreiben kann (Vorgabe: Grün wie leben-in-hoerste). */

.hk-ansicht {
  --hk-akzent: var(--leben-green, #2f6b3a);
  --hk-akzent-hell: #e8f2dc;
  --hk-text: #17231a;
  --hk-leise: #56645a;
  --hk-linie: #d6ded3;
  --hk-flaeche: #ffffff;
  --hk-schatten: 0 8px 24px rgba(23, 35, 26, 0.12);
  margin: 0 0 1.5rem;
}

/* hidden gilt auch gegen display: flex weiter unten (die Rallye hat das global, Grav-Themes nicht):
   sonst stand die Liste „Karten ↗“ von Anfang an offen */
.hk-ansicht [hidden] { display: none !important; }

/* ===== Zeichnung ===== */

.karte {
  display: block;
  height: auto;
  border: 1px solid var(--hk-linie, #d6ded3);
  border-radius: 1rem;
  background: #eef3ea;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.karte-norden { fill: var(--hk-leise, #56645a); font-size: 12px; font-weight: 700; }

.karte-weg-linie { fill: none; stroke: #22603c; stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; opacity: 0.75; }

.karte-ort { fill: #e8e6df; }
.karte-gruen { fill: #e1eed8; }
.karte-wald { fill: #cfe3c2; }
.karte-wasser { fill: #bfdcef; }
.karte-haus { fill: #d6d0c4; }
.karte-bach { fill: none; stroke: #9cc8e6; stroke-width: 1.5; }
.karte-weg { fill: none; stroke: #b5a993; stroke-width: 1; stroke-dasharray: 3 2; }
.karte-strasse-rand,
.karte-hauptstrasse-rand { fill: none; stroke: #c9c1b2; stroke-linecap: round; stroke-linejoin: round; }
.karte-strasse-rand { stroke-width: 5; }
.karte-hauptstrasse-rand { stroke-width: 7; }
.karte-strasse,
.karte-hauptstrasse { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.karte-strasse { stroke: #ffffff; stroke-width: 3.5; }
.karte-hauptstrasse { stroke: #fbe3a0; stroke-width: 5; }

/* Straßenname beim Zeigen mit der Maus: unsichtbare breite Linie über der Straße mit Tooltip */
.karte-strassen-zeigen path { fill: none; stroke: transparent; stroke-width: 9; stroke-linecap: round; pointer-events: stroke; }

.karte-hausnummern text { fill: #9a917f; font-weight: 600; }

.karte-name { fill: #5a5246; font-weight: 600; }
/* weiße Kontur als eigene Ebene unter der Schrift */
.karte-namen-rand .karte-name { fill: #ffffff; stroke: #ffffff; stroke-width: 2.5px; stroke-linejoin: round; }

.karte-position-genau { fill: rgba(37, 120, 230, 0.15); stroke: rgba(37, 120, 230, 0.45); stroke-width: 1; }
.karte-position-punkt { fill: #2578e6; stroke: #ffffff; stroke-width: 2.5; }
.karte-position-rand path { fill: #2578e6; stroke: #ffffff; stroke-width: 2.5; stroke-linejoin: round; }

.karte-osm text { fill: #22603c; font-size: 9px; font-weight: 700; stroke: #ffffff; stroke-width: 2.5px; paint-order: stroke; }
.karte-quelle { fill: var(--hk-leise, #56645a); font-size: 8px; }

.karte-nadel { stroke: var(--hk-text, #17231a); stroke-width: 1.2; }
.karte-nadel-punkt { fill: var(--hk-text, #17231a); }
.karte-station circle { fill: #ffffff; stroke: #2e7d4f; stroke-width: 2.5; }
.karte-station text { fill: var(--hk-text, #17231a); font-size: 13px; font-weight: 700; }
.karte-klein .karte-station text { font-size: 9.5px; }
.karte-klein .karte-station circle { stroke-width: 3; }
.karte .karte-station circle.karte-bogen { fill: none; }

.karte-wanderweg,
.karte-wanderweg-rand { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.karte-wanderweg { stroke-width: 3; stroke-dasharray: 7 4; }
.karte-wanderweg.punkte { stroke-width: 3.5; stroke-dasharray: 0.1 6; }
.karte-wanderweg-rand { stroke: #ffffff; stroke-width: 5.5; opacity: 0.9; }
.karte-wanderwege [data-weg] { transition: opacity 0.15s; }
.karte-wanderwege.mit-hervor [data-weg]:not(.hervor) { opacity: 0.2; }
.karte-wanderwege .hervor .karte-wanderweg { stroke-width: 4.5; }
.karte-wanderwege .hervor .karte-wanderweg-rand { stroke-width: 7.5; }

.karte-grenze-band,
.karte-grenze-linie { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.karte-grenze-band { stroke: rgba(122, 92, 140, 0.28); stroke-width: 9; }
.karte-grenze-linie { stroke: #7a5c8c; stroke-width: 1.4; stroke-dasharray: 8 3 2 3; }
.karte-nachbar { fill: #6a4c7c; font-style: italic; font-weight: 600; letter-spacing: 0.04em; stroke: #ffffff; stroke-width: 2.5px; stroke-linejoin: round; paint-order: stroke; }

.karte-wikihaus { cursor: pointer; }
.karte-wikihaus-flaeche { fill: transparent; }
.karte-wikihaus-punkt { fill: #d32f2f; stroke: #ffffff; stroke-width: 1.5; }
.karte-wikihaus:hover .karte-wikihaus-punkt,
.karte-wikihaus:focus-visible .karte-wikihaus-punkt { r: 5.5; fill: #a01818; }

.karte-archiv-flaeche { fill: transparent; }
.karte-archiv-punkt { fill: #6d4c41; stroke: #ffffff; stroke-width: 1.5; }
.karte-archiv-zahl { fill: #ffffff; font-size: 7.5px; font-weight: 700; pointer-events: none; }
.karte-archiv-nadel { stroke: #6d4c41; stroke-width: 1; }
.karte-archiv-nadel-punkt { fill: #6d4c41; }
.karte-archivort { opacity: 0.75; }
.karte-archivort:hover,
.karte-archivort:focus-visible { opacity: 1; }
.karte-archivort:hover .karte-archiv-punkt,
.karte-archivort:focus-visible .karte-archiv-punkt { fill: #4e342e; stroke-width: 2.5; }

.karte.zoombar { cursor: zoom-in; }

/* ===== Kartenansicht ===== */

.hk-titel { text-align: center; }

/* Streifen über die ganze Fensterbreite (Breite und Versatz setzt das Skript genau); er scrollt seitlich,
   nach unten scrollt die Seite */
.hk-streifen {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}

.hk-ansicht .karte {
  width: calc(min(768px, var(--hk-fenster, 100vw) - 2rem) * var(--hk-zoom, 1));
  max-width: none;
  margin: 0 auto;
}

.hk-streifen.zieht,
.hk-streifen.zieht .karte { cursor: grabbing; user-select: none; }

/* ＋/− und „Karten ↗“: Hülle 0 hoch direkt nach dem Streifen, klebt unten im Fenster */
.hk-zoom { position: sticky; z-index: 4; bottom: max(1rem, env(safe-area-inset-bottom)); height: 0; }
.hk-zoom-knoepfe {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.hk-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--hk-linie);
  border-radius: 999px;
  background: var(--hk-flaeche);
  color: var(--hk-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.hk-knopf:hover { border-color: var(--hk-akzent); }
.hk-knopf:focus-visible { outline: 3px solid var(--hk-akzent); outline-offset: 2px; }
.hk-knopf-icon { line-height: 1; }

.hk-schalter[aria-pressed="true"] { border-color: var(--hk-akzent); background: var(--hk-akzent-hell); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12); }

.hk-rund { width: 48px; height: 48px; min-height: 48px; padding: 0; font-size: 28px; font-weight: 700; line-height: 1; box-shadow: var(--hk-schatten); }
.hk-rund:disabled { opacity: 0.4; cursor: default; }
.hk-dienste-knopf { min-height: 36px; padding: 0 0.8rem; font-size: 0.9rem; box-shadow: var(--hk-schatten); }

.hk-menue { position: relative; }
.hk-dienste {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  width: min(22rem, calc(100vw - 2rem));
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--hk-linie);
  border-radius: 1rem;
  background: var(--hk-flaeche);
  box-shadow: var(--hk-schatten);
}
.hk-dienst { display: flex; flex-direction: column; padding: 0.35rem 0.7rem; border-radius: 0.7rem; color: var(--hk-text); line-height: 1.25; text-decoration: none; }
.hk-dienst:hover,
.hk-dienst:focus-visible { background: var(--hk-akzent-hell); }
.hk-dienst-name { font-weight: 700; }
.hk-dienst-hinweis { color: var(--hk-leise); font-size: 0.8em; }

.hk-knoepfe:empty { display: none; }
.hk-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0; }

.hk-standort { text-align: center; color: var(--hk-leise); }
.hk-standort:empty { display: none; }

.standort-punkt { width: 1.05em; height: 1.05em; border: 3px solid #ffffff; border-radius: 50%; background: #2578e6; box-shadow: 0 0 0 1px rgba(37, 120, 230, 0.45); box-sizing: border-box; }

/* Legende */
.hk-ansicht .legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0.6rem 0;
  padding: 0;
  list-style: none;
}
.hk-ansicht .legende li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.legende-grenze { width: 1.6rem; height: 0.55rem; border-top: 1.5px dashed #7a5c8c; background: rgba(122, 92, 140, 0.28); }
.legende-weg { width: 1.6rem; height: 0; border-top: 4px dashed; }
.legende-weg.punkte { border-top-style: dotted; }
.legende-haus { width: 0.6rem; height: 0.6rem; border: 2px solid #ffffff; border-radius: 50%; background: #d32f2f; box-shadow: 0 0 0 1px #d32f2f; }
.legende-station { width: 0.9rem; height: 0.9rem; border: 3px solid #2e7d4f; border-radius: 50%; background: #ffffff; box-sizing: border-box; }
.legende-stand { color: var(--hk-leise); }
.karte-station.antippbar { cursor: pointer; outline: none; }
.karte .karte-station circle.karte-tippflaeche { fill: transparent; stroke: none; }
.karte-station.antippbar:hover circle:not(.karte-tippflaeche) { stroke-width: 4; }
.karte .karte-station.antippbar:focus-visible circle.karte-tippflaeche { stroke: #2e7d4f; stroke-width: 2; stroke-dasharray: 3 2; }
.legende-archiv { width: 0.7rem; height: 0.7rem; border: 2px solid #ffffff; border-radius: 2px; background: #6d4c41; box-shadow: 0 0 0 1px #6d4c41; }

.legende-schalter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--hk-linie);
  border-radius: 999px;
  background: var(--hk-flaeche);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.legende-schalter[aria-pressed="true"] { border-color: #2578e6; background: #e3eefc; color: #134a94; }
.legende-schalter[aria-pressed="false"] { color: var(--hk-leise); text-decoration: line-through; }
.legende-schalter[aria-pressed="false"] .legende-weg { opacity: 0.35; }
.legende-wege li.mit-link { display: flex; align-items: stretch; border: 2px solid var(--hk-linie); border-radius: 999px; background: var(--hk-flaeche); overflow: hidden; }
.legende-wege li.mit-link:has(.legende-schalter[aria-pressed="true"]) { border-color: #2578e6; background: #e3eefc; }
.legende-wege li.mit-link .legende-schalter { border: 0; border-radius: 0; background: transparent; padding-right: 0.5rem; }
.legende-weglink { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: 0 0.6rem 0 0.5rem; border-left: 1px solid var(--hk-linie); color: #134a94; font-weight: 700; text-decoration: none; }
.legende-wege li.mit-link:has(.legende-schalter[aria-pressed="true"]) .legende-weglink { border-left-color: #9cc0f0; }
.legende-weglink:hover { background: rgba(37, 120, 230, 0.12); }

@media (max-width: 30rem) {
  .hk-knoepfe { gap: 0.5rem; }
  .hk-knoepfe .hk-knopf { padding-inline: 0.55rem; gap: 0.35rem; }
}