.htig{ --hs: 52px; }
.htig__wrap{ position:relative; max-width:100%; }
.htig__img{ width:100%; height:auto; display:block; border-radius:14px; }
.htig__overlay{ position:absolute; inset:0; }

/* --- Spot base (all styles driven by CSS vars set inline per hotspot) --- */
.htig-spot{
  position:absolute;
  transform: translate(-50%,-50%);
  width: var(--hs, 52px);
  height: var(--hs, 52px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action: manipulation;
  text-decoration:none;

  background: var(--htig-fill-rgba, rgba(0,0,0,0.18));
  border: var(--htig-bw, 2px) solid var(--htig-border-rgba, rgba(255,255,255,0.85));
  box-shadow: 0 10px 26px rgba(0,0,0,.14);

  opacity: var(--htig-o, 1);
  pointer-events: var(--htig-pe, auto);
}

.htig-spot.is-circle{ border-radius:999px; }
.htig-spot.is-rect{
  width: var(--hw, var(--hs, 80px));
  height: var(--hh, var(--hs, 56px));
  border-radius: 10px;
}

/* Kein Punkt in der Mitte (gewünscht) */
.htig-spot__dot{ display:none !important; }

/* --- Effekt-Layer (nur Deko, nie klickbar) --- */
.htig-spot::before,
.htig-spot::after{
  content:"";
  position:absolute;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
}

/* Pulsieren (ruhig / auffällig): Ring + Außenwelle */
.htig-spot.fx-calm::before,
.htig-spot.fx-blink::before{
  inset: calc(-1 * var(--htig-bw, 2px));
  box-shadow: 0 0 0 var(--htig-bw, 2px) var(--htig-border-rgba, rgba(255,255,255,0.85));
  opacity: .95;
}
.htig-spot.fx-calm::after,
.htig-spot.fx-blink::after{
  inset: calc(-1 * var(--htig-bw, 2px) * 5);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--htig-border-rgba, rgba(255,255,255,0.65)) 70%, transparent);
  opacity: 0;
}

.htig-spot.fx-calm::before{ animation: htig_pulse_ring 2.0s ease-in-out infinite; }
.htig-spot.fx-calm::after { animation: htig_pulse_wave 2.0s ease-in-out infinite; }

.htig-spot.fx-blink::before{ animation: htig_pulse_ring_strong 1.5s ease-in-out infinite; }
.htig-spot.fx-blink::after { animation: htig_pulse_wave_strong 1.5s ease-in-out infinite; }

@keyframes htig_pulse_ring{
  0%,100% { transform: scale(1.00); opacity: .90; }
  50%     { transform: scale(1.06); opacity: .55; }
}
@keyframes htig_pulse_wave{
  0%   { transform: scale(1.00); opacity: 0.00; }
  35%  { transform: scale(1.10); opacity: .22; }
  70%  { transform: scale(1.22); opacity: 0.00; }
  100% { transform: scale(1.22); opacity: 0.00; }
}
@keyframes htig_pulse_ring_strong{
  0%,100% { transform: scale(1.00); opacity: .95; }
  50%     { transform: scale(1.10); opacity: .45; }
}
@keyframes htig_pulse_wave_strong{
  0%   { transform: scale(1.00); opacity: 0.00; }
  30%  { transform: scale(1.12); opacity: .28; }
  65%  { transform: scale(1.28); opacity: 0.00; }
  100% { transform: scale(1.28); opacity: 0.00; }
}

/* Rand läuft: Gradient-Ring + Glow (Farben kommen aus --htig-g1/2/3) */
.htig-spot.fx-runner{ border-color: transparent; }

.htig-spot.fx-runner::before{
  inset: calc(-1 * var(--htig-bw, 2px));
  padding: var(--htig-bw, 2px);
  background: linear-gradient(135deg,
    var(--htig-g1, rgba(0,255,204,0.85)),
    var(--htig-g2, rgba(255,0,204,0.85)),
    var(--htig-g3, rgba(0,170,255,0.85))
  );
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: htig_runner 7s linear infinite;
  opacity: .98;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.htig-spot.fx-runner::after{
  inset: calc(-1 * var(--htig-bw, 2px) * 4);
  background: linear-gradient(135deg,
    var(--htig-g1, rgba(0,255,204,0.45)),
    var(--htig-g2, rgba(255,0,204,0.45)),
    var(--htig-g3, rgba(0,170,255,0.45))
  );
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: htig_runner 7s linear infinite;
  filter: blur(12px);
  opacity: .30;
}

@keyframes htig_runner{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Nur der geöffnete Spot hält an (nicht alle) */
.htig-spot.is-open::before,
.htig-spot.is-open::after{
  animation: none !important;
  opacity: .35;
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  .htig-spot::before,
  .htig-spot::after{ animation:none !important; }
}

/* --- Modal --- */
.htig-modal[hidden]{ display:none; }
.htig-modal{ position:fixed; inset:0; z-index: 99999; }
.htig-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.htig-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(720px, calc(100% - 28px));
  background:#fff;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  max-height: min(82vh, 760px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.htig-modal__close{
  position: sticky;
  top: 0;
  float: right;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  padding: 6px 10px;
  margin: -6px -6px 0 0;
}
.htig-modal__title{ font-weight: 800; font-size: 18px; margin: 2px 0 10px; }
.htig-modal__content{ overflow:auto; flex: 1 1 auto; line-height: 1.5; }
.htig-modal__cta{ flex: 0 0 auto; margin-top: 14px; }
.htig-modal__cta-btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0b5fff;
  color: #fff;
  text-decoration:none;
  font-weight: 700;
}
@media (max-width: 768px){
  .htig-modal__panel{
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 78vh;
  }
}

/* --- Textliste (Details) unter der Grafik --- */
.htig__textliste_toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 12px 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  font: inherit;
}
.htig__textliste.is-collapsed{ display:none; }
.htig__detail{
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.85);
}
.htig__detail > summary{ cursor:pointer; font-weight: 600; }
.htig__detailtext{ margin-top: 8px; }
.htig__detailcta{ margin-top: 10px; }
.htig__detailbtn{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.12);
}


/* v0.7.3 simplified spots */
.htig__wrap{position:relative;line-height:0;}
.htig__img{display:block;width:100%;height:auto;}
.htig__overlay{position:absolute;inset:0;}
.htig-spot{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:clamp(18px,var(--hs,44px),56px);height:clamp(18px,var(--hs,44px),56px);border:2px solid var(--htig-color,#e11d48);background:color-mix(in srgb, var(--htig-color,#e11d48) 18%, transparent);border-radius:999px;overflow:visible;opacity:1;}
.htig-spot.is-rect{width:clamp(28px,var(--hw,90px),160px);height:clamp(18px,var(--hh,40px),90px);border-radius:10px;}
.htig-spot::before,.htig-spot::after,.htig-spot.fx-runner::before,.htig-spot.fx-runner::after{display:none !important;content:none !important;}
.htig-spot__dot{display:block;width:8px;height:8px;border-radius:999px;background:var(--htig-color,#e11d48);}
.htig-spot__label{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#fff;padding:4px 8px;border-radius:8px;border:1px solid rgba(0,0,0,.12);box-shadow:0 4px 12px rgba(0,0,0,.08);white-space:nowrap;font-size:13px;line-height:1.2;color:#111827;}
.htig-spot.fx-calm{animation:htigPulseCalm2 1.9s ease-in-out infinite;}
.htig-spot.fx-blink{animation:htigPulseBlink2 1.1s ease-in-out infinite;}
.htig-spot.fx-none{animation:none;}
@keyframes htigPulseCalm2{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes htigPulseBlink2{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.16)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (max-width: 700px){.htig-spot{width:calc(var(--hs,44px)*0.65);height:calc(var(--hs,44px)*0.65)}.htig-spot.is-rect{width:calc(var(--hw,90px)*0.65);height:calc(var(--hh,40px)*0.65)}.htig-spot__label{font-size:12px;padding:3px 7px;left:calc(100% + 6px);}}