/* HWS Hero – interaktives Bild mit Punkten (Hotspots) */

.hbp {
  --hbp-color: #e30613;
  --hbp-size: 22px;
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  line-height: 0;
}
.hbp--center { display: block; margin-left: auto; margin-right: auto; }

.hbp__img,
.hbp img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ---- Punkt ---- */
.hbp-point {
  position: absolute;
  width: var(--hbp-size);
  height: var(--hbp-size);
  transform: translate(-50%, -50%);
  display: block;
  z-index: 2;
  text-decoration: none;
}
.hbp-point__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hbp-color);
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  transition: transform .18s ease;
}

/* Dauer-Pulsieren (Ring) */
.hbp--pulse .hbp-point__dot::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--hbp-color);
  opacity: .55;
  z-index: -1;
  animation: hbp-pulse 2s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes hbp-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Hover-Varianten */
.hbp--hover-grow .hbp-point:hover .hbp-point__dot,
.hbp--hover-grow .hbp-point:focus-visible .hbp-point__dot {
  transform: scale(1.4);
}
.hbp--hover-pulse .hbp-point:hover .hbp-point__dot::after,
.hbp--hover-pulse .hbp-point:focus-visible .hbp-point__dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--hbp-color);
  animation: hbp-ping .65s ease-out 1;
}
@keyframes hbp-ping {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ---- Label ---- */
.hbp-point__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #3a3a3a;
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.3;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.hbp-point__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3a3a3a;
}
.hbp-point:hover .hbp-point__label,
.hbp-point:focus-visible .hbp-point__label {
  opacity: 1;
}
.hbp-point--static { cursor: default; }

/* ---- Text-Feld (Marker-Typ "text": Balken mit Text statt Kreis) ---- */
.hbp-point.hbp-point--text {
  width: auto;
  height: auto;
  min-width: 0;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Standard 9px/18px (Balken-Look); pro Marker im Backend ueberschreibbar
     ueber --hbp-pad (gleicher Abstand auf allen Seiten, 0 = eng am Text). */
  padding: var(--hbp-pad, 9px 18px);
  border-radius: 4px;
  background: var(--hbp-bg, transparent);
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.35;
  /* Umbruch NUR an Leerzeichen/manuellen Enter-Umbruechen - nie mitten im Wort.
     !important noetig, weil Theme-CSS oft global hyphens/overflow-wrap setzt
     und dadurch lange Woerter (z.B. "Erfahrungsaustausch") haesslich mit
     Bindestrich mitten im Wort umgebrochen hat. */
  white-space: pre-line;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  transition: transform .18s ease;
}

/* Dauer-Pulsieren fuers Textfeld: eigener Rahmen in derselben Farbe statt Kreis-Ring */
.hbp--pulse .hbp-point--text::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--hbp-bg, transparent);
  opacity: .55;
  z-index: -1;
  animation: hbp-pulse-box 2s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes hbp-pulse-box {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Hover-Varianten fuers Textfeld (gleiche 3 Optionen wie beim Punkt) */
.hbp--hover-grow .hbp-point--text:hover,
.hbp--hover-grow .hbp-point--text:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
}
.hbp--hover-pulse .hbp-point--text:hover::after,
.hbp--hover-pulse .hbp-point--text:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 2px solid var(--hbp-bg, #fff);
  animation: hbp-ping-box .65s ease-out 1;
}
@keyframes hbp-ping-box {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.3);  opacity: 0; }
}

/* ---- Mobil: Punkte ausblenden, Bild bleibt ---- */
@media (max-width: 782px) {
  .hbp-point { display: none; }

  /* Option: Text-Felder trotzdem zeigen, verkleinert (Kreise bleiben aus) */
  .hbp--mobiletext .hbp-point.hbp-point--text {
    display: inline-flex;
    transform: translate(-50%, -50%) scale(var(--hbp-mobile-scale, .68));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hbp--pulse .hbp-point__dot::before,
  .hbp-point__dot::after,
  .hbp--pulse .hbp-point--text::before,
  .hbp-point--text::after { animation: none !important; }
}