/* LOADER */
    #circle-group {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      transition: transform 0.8s ease-in-out;
    }

    .catcher {
      position: absolute;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.6);
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
      transition: all 0.6s ease;
    }
    .catcher.active {
      width: 26px;
      height: 26px;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    .catcher.filled {
      background: #7f4caf;
    }

    .drop {
      position: absolute;
      width: 26px;
      height: 40px;
      background: #7f4caf;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      left: 50%;
      top: -80px;
      transform: translate(-50%, 0);
      opacity: 0;
    }
    .drop.fall {
      transition: top 0.45s ease-in, opacity 0.2s ease-in;
      opacity: 1;
    }
    .drop.to-circle {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    #loader-progress {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.4rem;
      font-weight: bold;
      color: #eee;
      text-shadow: 0 0 10px rgba(255,255,255,0.7);
      z-index: 20;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    #loader-progress.active {
      opacity: 1;
    }

    .start-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.3);
      background: linear-gradient(135deg, #9d4edd, #7f4caf);
      color: #fff;
      font-size: 1.6rem;
      font-weight: bold;
      padding: 0.8rem 3rem;
      border-radius: 1.6rem;
      border: none;
      box-shadow: 0 0 20px rgba(157, 78, 221, 0.7), 0 0 40px rgba(127, 76, 175, 0.5);
      cursor: pointer;
      user-select: none;
      opacity: 0;
      animation: bounceIn 0.8s ease forwards;
      animation-delay: 0.8s; /* Start nach Explosion */
      transition: transform 0.2s ease, box-shadow 0.3s ease;
  }

  /* Bounce-In Effekt */
  @keyframes bounceIn {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    50%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    70%  { transform: translate(-50%, -50%) scale(0.9); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  }

  /* Hover-Glow */
  .start-btn:hover {
    box-shadow: 0 0 25px rgba(157, 78, 221, 0.9), 0 0 50px rgba(127, 76, 175, 0.7);
    transform: translate(-50%, -50%) scale(1.05);
  }

  /* Klick-Feedback */
  .start-btn:active {
    transform: translate(-50%, -50%) scale(0.9);
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.6);
  }

  /* Loader-Text (Monologe) */
#loader-text {
  position: absolute;
  top: 90%;                  /* etwas unterhalb des Kreises */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--theme-primary-text, #fff);
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  /* padding: 0.5rem 1rem;
  border-radius: 6px; */
  background: none;
  pointer-events: none;       /* nicht anklickbar */
}