/* ═══════════════════════════════════════════════
   LOADING OVERLAY – DAS EIGENTLICHE PLUGIN-ELEMENT
   ═══════════════════════════════════════════════ */

#jhdb-loading-overlay, #bitte-warten {
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* Schwarzer, leicht transparenter Schleier */
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

#jhdb-loading-overlay.is-active,  #bitte-warten.is-active {
  opacity: 1;
  pointer-events: all;
}

/* ── Zentrale Karte ── */
.jhdb-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0;
}

/* ── NETZWERK-ANIMATION ── */
.jhdb-net {
  position: relative;
  width: 140px;
  height: 140px;
}

/* SVG canvas */
.jhdb-net-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Verbindungslinien – geschwungen via stroke-dasharray Animation */
.jhdb-edge {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: edge-draw 1.8s ease-in-out infinite alternate;
}
.jhdb-edge:nth-child(1) { animation-delay: 0.0s; }
.jhdb-edge:nth-child(2) { animation-delay: 0.2s; }
.jhdb-edge:nth-child(3) { animation-delay: 0.4s; }
.jhdb-edge:nth-child(4) { animation-delay: 0.6s; }
.jhdb-edge:nth-child(5) { animation-delay: 0.8s; }
.jhdb-edge:nth-child(6) { animation-delay: 1.0s; }

@keyframes edge-draw {
  0%   { stroke-dashoffset: 80; opacity: 0; }
  40%  { opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 0.5; }
}

/* Knoten */
.jhdb-node-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

/* Zentraler Knoten – groß, grüner Glow */
.jhdb-node-dot--hub {
  width: 22px; height: 22px;
  top: 50%; left: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #c8f0c8);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.08),
    0 0 24px rgba(100, 220, 100, 0.55),
    0 0 48px rgba(100, 220, 100, 0.25);
  animation: hub-breathe 2.2s ease-in-out infinite;
}

@keyframes hub-breathe {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 0 18px rgba(100,220,100,0.5), 0 0 40px rgba(100,220,100,0.2);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255,255,255,0.05), 0 0 30px rgba(100,220,100,0.7), 0 0 60px rgba(100,220,100,0.35);
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* Satellitenknoten */
.jhdb-node-dot--sat {
  width: 11px; height: 11px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
  animation: sat-pulse 2.2s ease-in-out infinite;
}
.jhdb-node-dot--sat:nth-child(2) { top: 12%;  left: 50%;   animation-delay: 0.0s; }
.jhdb-node-dot--sat:nth-child(3) { top: 26%;  left: 82%;   animation-delay: 0.3s; }
.jhdb-node-dot--sat:nth-child(4) { top: 70%;  left: 88%;   animation-delay: 0.6s; }
.jhdb-node-dot--sat:nth-child(5) { top: 88%;  left: 55%;   animation-delay: 0.9s; }
.jhdb-node-dot--sat:nth-child(6) { top: 78%;  left: 15%;   animation-delay: 1.2s; }
.jhdb-node-dot--sat:nth-child(7) { top: 28%;  left: 10%;   animation-delay: 1.5s; }

@keyframes sat-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  50%       { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* Umlaufender Radar-Ring */
.jhdb-sweep-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.06);
}

.jhdb-sweep-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 300deg,
    rgba(130, 230, 130, 0.12) 330deg,
    rgba(130, 230, 130, 0.22) 355deg,
    transparent 360deg
  );
  animation: sweep-rotate 3s linear infinite;
}

@keyframes sweep-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Expanding pulse rings */
.jhdb-pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(130, 230, 130, 0.6);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: ring-expand 3s ease-out infinite;
}
.jhdb-pulse-ring:nth-child(2) { animation-delay: 1.0s; }
.jhdb-pulse-ring:nth-child(3) { animation-delay: 2.0s; }

@keyframes ring-expand {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.8; border-color: rgba(130,230,130,0.7); }
  100% { transform: translate(-50%, -50%) scale(5.2); opacity: 0;   border-color: rgba(130,230,130,0); }
}

/* ── Textblock ── */
.jhdb-overlay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.jhdb-overlay-title {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.jhdb-overlay-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Animierte Fortschrittsleiste */
.jhdb-progress-track {
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.jhdb-progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(130,230,130,0.8), transparent);
  border-radius: 2px;
  animation: progress-slide 1.8s ease-in-out infinite;
}

@keyframes progress-slide {
  0%   { left: -50%; width: 40%; }
  100% { left: 110%; width: 40%; }
}

/* Punkte */
.jhdb-dots {
  display: flex;
  gap: 6px;
}
.jhdb-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: dot-fade 1.5s ease-in-out infinite;
}
.jhdb-dots span:nth-child(2) { animation-delay: 0.3s; }
.jhdb-dots span:nth-child(3) { animation-delay: 0.6s; }

@keyframes dot-fade {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}