/* Landschaft hinter der Sternenkarte (Entwurf H, „Gebirge“ im Admin-Fenster der Konzept-Ansicht): Höhenlinien in sanftem Moosgrün, die langsam atmen,
   Wälder (derzeit aus) als weiche grüne Flächen, Flüsse in gedecktem Blau, Namen klein und leise. Die Fläche liegt unter Sternen,
   Verbindungslinien und Orten; nur die Zeichen für Gipfel und Sehenswürdigkeiten reagieren auf die Maus. */
.ls-ebene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Unsichtbare Begrenzung: Die Landschaft endet am Kartenrand und läuft dort weich aus, statt herauszuragen */
.ls-ebene > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
.karte > .sterne, .karte > svg, .karte > .ort-punkt { position: absolute; z-index: 1; }
.karte > .ort-punkt { z-index: 2; }

.ls-wald { fill: #2F6B4F; opacity: 0.2; }
.ls-linie { fill: none; stroke: #8CC4A6; stroke-width: 0.9; vector-effect: non-scaling-stroke; opacity: 0.2;
  animation: ls-atmen 10s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.ls-fluss { fill: none; stroke: #6FA3C7; stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.5; }
.ls-fluss.haupt { stroke-width: 1.8; opacity: 0.62; }

/* Atmen: Die Ringe werden nacheinander etwas heller, wie eine langsame Welle vom Rand zum Gipfel */
@keyframes ls-atmen {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-linie { animation: none; opacity: 0.16; }
}

.ls-name { position: absolute; display: flex; align-items: center; gap: 4px; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; }
.ls-name b { font-weight: 600; }
.ls-region b { font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: #8CC4A6; opacity: 0.6; }
.ls-wasser b { font: italic 500 0.6875rem/1 var(--serif, Georgia, serif); color: #8FB8D6; opacity: 0.8; }
.ls-gipfel i { display: block; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 8px solid #8CC4A6; opacity: 0.8; }
.ls-sehens i { display: block; width: 7px; height: 7px; transform: rotate(45deg); background: rgba(244, 194, 77, 0.75); }

/* Gipfel und Sehenswürdigkeiten: nur das Zeichen; Name und Beschreibung ploppen beim Überfahren auf */
.ls-marken { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ls-marke { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; transform: translate(-50%, calc(-50% + var(--dy, 0px))); cursor: default;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s, visibility 0.4s; }
/* Erst sichtbar, wenn das passende Interesse gewählt ist */
.ls-marke.an { opacity: 1; visibility: visible; pointer-events: auto; }
.ls-marke:hover { z-index: 5; }
.ls-marke:hover i { opacity: 1; filter: drop-shadow(0 0 4px rgba(244, 194, 77, 0.6)); }
.ls-info { position: absolute; left: calc(100% - 2px); top: 50%; display: grid; gap: 2px; padding: 6px 10px; border: 1px solid #2B4A6B; border-radius: 10px; background: rgba(11, 21, 36, 0.94); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); white-space: nowrap; line-height: 1.2;
  opacity: 0; visibility: hidden; transform: translate(-4px, -50%); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; }
.ls-marke.links .ls-info { left: auto; right: calc(100% - 2px); transform: translate(4px, -50%); }
.ls-marke:hover .ls-info { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.ls-info b { font-size: 0.75rem; font-weight: 650; color: #E9EEF6; }
.ls-info small { font-size: 0.6875rem; color: #AAB6C8; }

/* Nur sichtbar, wenn „Gebirge“ eingeschaltet ist; weiches Ein- und Ausblenden */
.ls-ebene, .ls-marken { transition: opacity 0.5s, visibility 0.5s; }
.karte:not(.mit-gebirge) .ls-ebene, .karte:not(.mit-gebirge) .ls-marken { opacity: 0; visibility: hidden; }
.karte:not(.mit-gebirge) .ls-marke { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* Mit Gebirge weniger Sterne: in der Karte nur fünf, im Himmel über der Karte jeder fünfte */
.leise-stern { transition: opacity 0.5s; }
.mit-gebirge-himmel .leise-stern { opacity: 0 !important; animation: none; }