.svg-hotspots {
  --hs-farbe: #E30613;          /* Punkt */
  --hs-farbe-hover: #1369B0;    /* Punkt bei Hover/Fokus */
  --hs-rand: #12263F;
  --hs-text: #12263F;
  --hs-marker: clamp(22px, 4.6vw, 38px);
  --hs-schrift: clamp(13px, 2.1vw, 18px);
}

.svg-hotspots__stage {
  position: relative;
  max-width: 100%;
}

.svg-hotspots__bild {
  display: block;
  width: 100%;
  height: auto;
}

/* Ankerpunkt ohne eigene Größe: x/y aus dem Backend = Mittelpunkt des Markers */
.svg-hotspots__punkt {
  position: absolute;
  width: 0;
  height: 0;
  color: var(--hs-text);
  text-decoration: none;
}

.svg-hotspots__marker {
  position: absolute;
  left: calc(var(--hs-marker) / -2);
  top: calc(var(--hs-marker) / -2);
  width: var(--hs-marker);
  height: var(--hs-marker);
  border-radius: 50%;
  z-index: 1;
  background: var(--hs-farbe);
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .15s;
}

.svg-hotspots__label {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: max-content;
  max-width: 10em;
  font-size: var(--hs-schrift);
  font-weight: 400;
  line-height: 1.25;
  padding: .3em .6em .3em calc(var(--hs-marker) / 2 + .35em);
  background: rgba(255, 255, 255, .8);
  border-radius: 5px;
}



.svg-hotspots__punkt--rechts .svg-hotspots__label { left: 0; }
.svg-hotspots__punkt--links  .svg-hotspots__label { right: calc(var(--hs-marker) / 2 + 6px); }
.svg-hotspots__punkt--oben   .svg-hotspots__label { left: 0; top: auto; bottom: calc(var(--hs-marker) / 2 + 4px); transform: translateX(-50%); }
.svg-hotspots__punkt--unten  .svg-hotspots__label { left: 0; top: calc(var(--hs-marker) / 2 + 4px); transform: translateX(-50%); }

.svg-hotspots__punkt:hover .svg-hotspots__marker,
.svg-hotspots__punkt:focus-visible .svg-hotspots__marker {
  transform: scale(1.15);
  background: var(--hs-farbe-hover);
}

.svg-hotspots__punkt:hover .svg-hotspots__label,
.svg-hotspots__punkt:focus-visible .svg-hotspots__label {
  color: var(--hs-farbe-hover);
}

.svg-hotspots__punkt:focus-visible {
  outline: none;
}

.svg-hotspots__punkt:focus-visible .svg-hotspots__label {
  outline: 3px solid var(--hs-farbe-hover);
  outline-offset: 2px;
}

/* Pulsierender Ring in der Punktfarbe, unabhängig vom Schatten */
.svg-hotspots__marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hs-farbe);
  opacity: .5;
  animation: hs-puls 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes hs-puls {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .svg-hotspots__marker::after { animation: none; display: none; }
}

/* Auf schmalen Bildschirmen nur Marker, Beschriftung steht in der Lightbox */
@media (max-width: 480px) {
  .svg-hotspots__label { display: none; }
}

/* Lightbox-Inhalt */
.svg-hotspots__popup {
  position: relative;
  max-width: 640px;
  margin: 20px auto;
  padding: 28px 32px;
  background: #fff;
  color: var(--hs-text, #12263F);
  border-radius: 4px;
}

.svg-hotspots__popup-titel {
  margin-top: 0;
  color: #1369B0;
}

/* Sanftes Einblenden (Magnific mainClass: mfp-fade) */
.mfp-fade.mfp-bg,
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: opacity .2s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready { opacity: .8; }
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; }
.mfp-fade.mfp-bg.mfp-removing,
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }

/* Koordinatenhilfe für Redakteure (Seite mit #koordinaten aufrufen) */
.svg-hotspots__koordinaten {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  padding: 10px 14px;
  background: #12263F;
  color: #fff;
  font: 14px/1.4 system-ui, sans-serif;
  border-radius: 4px;
}

/* Schließen-Kreuz in der Lightbox (Seiten-CSS färbt es sonst weiß) */
.svg-hotspots__popup .mfp-close {
  color: #12263F !important;
  opacity: .7;
  width: 44px;
  height: 44px;
  line-height: 44px;
  padding: 0 !important;
  top: 4px !important;
  right: 4px !important;
  font-size: 32px;
}
.svg-hotspots__popup .mfp-close:hover,
.svg-hotspots__popup .mfp-close:focus-visible {
  opacity: 1;
}
.svg-hotspots__popup-titel {
  padding-right: 40px;
}

/* Ausrichtung und Größe der Grafik */
.svg-hotspots { width: 100%; }
.svg-hotspots__stage { max-width: var(--hs-breite, 100%); }
.svg-hotspots--links .svg-hotspots__stage { margin-left: 0; margin-right: auto; }
.svg-hotspots--zentriert .svg-hotspots__stage { margin-left: auto; margin-right: auto; }
.svg-hotspots--rechts .svg-hotspots__stage { margin-left: auto; margin-right: 0; }
@media (max-width: 600px) {
  .svg-hotspots__stage { max-width: 100%; }
}

/* Beschriftung "Keine": nur der Punkt ist sichtbar, der Text bleibt für Screenreader */
.svg-hotspots__punkt--keine .svg-hotspots__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Handy: Blätterpfeile würden den Text überdecken */
@media (max-width: 600px) {
  .mfp-wrap .svg-hotspots__popup ~ .mfp-arrow,
  .mfp-inline-holder .mfp-arrow { display: none !important; }
  .svg-hotspots__popup { padding: 22px 20px; margin: 12px auto; }
}

/* Button in der Lightbox */
.svg-hotspots__popup-button {
  margin: 20px 0 0;
}

/* Einblend-Animation der Website (hideitem) gilt nicht in der Lightbox */
.svg-hotspots__popup .hideitem,
.svg-hotspots__popup .aniitem {
  opacity: 1 !important;
  transform: none !important;
}