/* ============================================================
   Reisekarte (Leaflet). Tokens siehe luna.css.
   ============================================================ */

:root{
  --marker-ring:#9aa09b; /* helles Grau, damit die Akzentfarbe der Lieblingsplätze traegt */
}

.ll-map{
  width:100%;
  height:clamp(460px,76vh,820px);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--soft);
  z-index:0; /* haelt die Karte unter Header und mobilem Menue */
}
.ll-map--teaser{height:clamp(320px,46vh,460px);margin-top:14px}

.ll-map-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:0 0 12px}
.ll-map-count{font-family:'Josefin Sans';font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:14px;color:var(--amber)}
.ll-map-hint{font-size:14px;color:var(--grey)}
.ll-map-legal{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--grey)}
/* Auf der Stellplatz-Übersicht folgt direkt der Länderfilter. Der bekommt
   Luft nach der Zeile mit den Kartendaten, sonst klebt die Auswahl an der
   Karte. Vorher 38px, seit 1.31.0 mehr Abstand auf Wunsch. */
.ll-map-legal + .filter{margin-top:64px}
@media(max-width:640px){.ll-map-legal + .filter{margin-top:44px}}
.ll-map-legal a{color:var(--grey);text-decoration:underline}
.ll-map-empty{max-width:620px;margin:0 auto;text-align:center;color:var(--grey)}

/* Marker im Sticker-Stil: runder Rahmen mit dem Foto vom Ort.
   Ohne Beitragsbild steht die laufende Nummer im Kreis.
   Standard traegt den ruhigen Schiefergrau-Rand, Lieblingsplaetze das Petrol. */
.ll-marker{background:none;border:0}
.ll-marker-kreis{
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:#fff;border:3px solid var(--marker-ring);
  box-shadow:0 2px 8px rgba(37,42,40,.22);
  transition:transform .15s ease;
}
.ll-marker-kreis img{width:100%;height:100%;object-fit:cover;display:block}
.ll-marker-kreis svg{width:22px;height:22px;color:var(--marker-ring)}
.ll-marker:hover .ll-marker-kreis{transform:scale(1.08)}

/* Lieblingsplatz */
.ll-marker-kreis.ist-top{
  width:56px;height:56px;border-color:var(--amber);border-width:4px;
  box-shadow:0 0 0 4px rgba(31,107,122,.22),0 3px 10px rgba(37,42,40,.3);
}
.ll-marker-kreis.ist-top svg{width:26px;height:26px;color:var(--amber)}

/* Legende ueber der Karte */
.ll-map-legende{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--grey)}
.ll-map-legende i{width:16px;height:16px;border-radius:50%;border:3px solid var(--amber);background:#fff;flex:none}

/* Popup */
.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 8px 24px rgba(37,42,40,.18)}
/* Kein width-Override: Leaflet setzt die Breite selbst per Inline-Stil,
   ein "width:auto !important" würde jede maxWidth wirkungslos machen. */
.leaflet-popup-content{margin:0}
.ll-pop{padding:0 0 14px;font-family:inherit}
.ll-pop img{display:block;width:100%;height:150px;object-fit:cover;border-radius:14px 14px 0 0;margin:0 0 10px}
.ll-pop-nr{display:block;padding:0 14px;font-family:'Josefin Sans';font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:11px;color:var(--label)}
.ll-pop h3{margin:2px 0 4px;padding:0 14px;font-size:20px;line-height:1.15;color:var(--ink)}
.ll-pop h3:first-child{padding-top:14px}
.ll-pop p{margin:0 0 6px;padding:0 14px;font-size:15px;line-height:1.45;color:var(--ink)}
.ll-pop-meta{color:var(--grey) !important;font-size:13px !important;margin-bottom:8px !important}
/* Der Weg zum Platz soll im Popup sofort ins Auge fallen.
   Die Selektoren sind bewusst spezifischer als Leaflets eigenes
   ".leaflet-container a", das sonst die Schriftfarbe überschreibt. */
.leaflet-popup-content a.ll-pop-link{
  display:block;margin:10px 14px 0;padding:11px 14px;
  background:var(--green);color:#fff;text-decoration:none;border-radius:8px;
  font-family:'Josefin Sans';font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-size:12px;line-height:1.3;text-align:center
}
.leaflet-popup-content a.ll-pop-link:hover{background:var(--amber);color:#fff}

/* Stationsliste unter der Karte */
.ll-stops{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ll-stop{position:relative;display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ll-stop-jump{display:block;width:100%;padding:0;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.ll-stop-jump figure{margin:0}
.ll-stop-jump figure img{display:block;width:100%;height:150px;object-fit:cover}
/* Ortsliste: zugeklappt unter der Karte, damit die Seite die Karte zeigt und der
   Inhalt trotzdem im Seitentext steht (Suchmaschinen, Tastaturbedienung). */
.ll-orte{margin:26px 0 0;border-top:1px solid var(--line);padding-top:16px}
.ll-orte>summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-family:'Josefin Sans';font-weight:600;letter-spacing:2px;text-transform:uppercase;
  font-size:12px;color:var(--grey)
}
.ll-orte>summary::-webkit-details-marker{display:none}
.ll-orte>summary::before{content:"+";font-size:16px;line-height:1}
.ll-orte[open]>summary{color:var(--amber)}
.ll-orte[open]>summary::before{content:"–"}
.ll-orte>summary:hover{color:var(--amber)}

.ll-stop-top{
  display:inline-block;margin:0 0 6px;
  font-family:'Josefin Sans';font-weight:600;letter-spacing:2px;text-transform:uppercase;
  font-size:11px;color:var(--amber)
}
.ll-stop-body{display:block;padding:14px 16px 12px}
.ll-stop-ort{display:block;font-family:'Josefin Sans';font-weight:600;font-size:19px;color:var(--ink)}
.ll-stop-meta{display:block;margin-top:2px;font-size:13px;color:var(--grey)}
.ll-stop-text{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink)}
.ll-stop-link{display:block;padding:0 16px 14px;font-size:14px;font-weight:600;color:var(--amber);text-decoration:none}
.ll-stop-link:hover{text-decoration:underline}
.ll-stop-jump:hover .ll-stop-ort{color:var(--amber)}
.ll-stop-jump:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

/* Startseiten-Teaser */
.route .ll-map-legal{text-align:right}
.ll-map-more{margin:14px 0 0;text-align:center}

@media(max-width:640px){
  .ll-map{height:60vh;border-radius:14px}
  .ll-map--teaser{height:44vh}
  .ll-stops{grid-template-columns:1fr;gap:14px}
}

/* Auf breiten Bildschirmen bekommt das Popup mehr Luft: höheres Bild,
   größere Schrift, Knopf nur so breit wie nötig. */
@media(min-width:900px){
  .ll-pop img{height:200px}
  .ll-pop h3{font-size:23px}
  .ll-pop p{font-size:16px;line-height:1.5}
  .ll-pop-meta{font-size:14px !important}
  .leaflet-popup-content a.ll-pop-link{display:inline-block;min-width:60%;font-size:13px;padding:12px 22px}
}

/* Schutzschild vor der Karte: die Kacheln kommen von OpenStreetMap und damit
   geht die IP des Besuchers dorthin. Deshalb lädt die Karte erst auf Klick.
   Der Kasten sitzt im Kartencontainer, dadurch bleibt die Höhe gleich und es
   springt nichts, wenn die Karte danach erscheint. */
.ll-map-schutz{position:absolute;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:var(--sand,#F3EFE7);border:1px dashed rgba(61,68,66,.35)}
.ll-map-schutz-text{margin:0;max-width:46ch;font-size:15px;line-height:1.55;color:var(--ink,#3D4442)}
.ll-map-schutz-fuss{margin:0;font-size:12px;color:var(--grey,#7C8481)}
.ll-map{position:relative}
@media(max-width:600px){
	.ll-map-schutz{padding:18px;gap:10px}
	.ll-map-schutz-text{font-size:14px}
}