html, body{
  height: 100%;
  overflow: hidden !important;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:transparent; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; }

.sw-card{
  width: 100%;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  padding: 18px 18px 14px;
}

.sw-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.sw-title{ font-size:22px; font-weight:650; color:#1f2937; }
.sw-sub{ font-size:14px; color:#6b7280; margin-top:4px; }

.sw-badge{
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:800; color:#fff; user-select:none;
}
.sw-badge.ok{ background:#16a34a; }
.sw-badge.bad{ background:#b91c1c; }
.sw-badge.neutral{ background:#6b7280; }

/* FIXE Bühne */
.sw-stage{
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 20px;
  background: #f5f5f5;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Korb fix groß */
.sw-basket{
  width: 600px;
  height:auto;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));
  user-select:none;
  -webkit-user-drag:none;
}

.sw-bees{ position:absolute; inset:0; pointer-events:none; }

.sw-bee{
  position:absolute;
  left:0; top:0;
  will-change: transform, opacity;
  transform: translate3d(-9999px,-9999px,0);
  font-size: 26px;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.18));
}

/* Debug Hole */
.sw-hole{
  position:absolute;
  width: 12px; height: 12px;
  border-radius:50%;
  background: rgba(255,0,0,.75);
  transform: translate(-50%,-50%);
  opacity: 0; /* zum Debug 1 */
}

.sw-pill{
  margin:14px auto 10px;
  width:220px;
  text-align:center;
  padding:14px 16px;
  border-radius:999px;
  font-weight:800;
  color:#fff;
  user-select:none;
}
.sw-pill.ok{ background:#16a34a; }
.sw-pill.bad{ background:#b91c1c; }
.sw-pill.neutral{ background:#6b7280; }

.sw-foot{
  display:flex;
  justify-content:center;
  gap: 22px;
  font-size: 13px;
  color:#6b7280;
  padding-top: 6px;
}
/* =========================
   FEINSCHLIFF: Schwarmwolke + Hover Glow
   ========================= */

/* Hover-Glow nur im Alarm */
/* Hover-Glow nur im Alarm – subtil & flächig */
#swarmalarm-card.is-alarm:hover{
  box-shadow:
    0 18px 50px rgba(0,0,0,.12),
    0 0 0 2px rgba(185,28,28,.25);
}


/* Schwarmwolke (nur Alarm) als weiche, animierte Overlay-Schicht */
#swarmalarm-card.is-alarm .sw-stage::before{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  opacity:.85;
  background:
    radial-gradient(220px 160px at 20% 35%, rgba(185,28,28,.10), transparent 60%),
    radial-gradient(260px 190px at 70% 30%, rgba(185,28,28,.08), transparent 62%),
    radial-gradient(240px 170px at 55% 65%, rgba(0,0,0,.05), transparent 65%);
  filter: blur(10px);
  animation: swCloudDrift 5.5s ease-in-out infinite alternate;
}

@keyframes swCloudDrift{
  0%   { transform: translate3d(-8px,-6px,0) scale(1.02); }
  100% { transform: translate3d(10px,8px,0) scale(1.06); }
}

/* Landebienen: etwas kleiner, leichter “sitzen” */
.sw-bee.is-lander{
  font-size: 24px;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.20));
}
/* Scroll-Button im Schwarmalarm ausblenden */
#swarmalarm-card ~ .scroll-top,
.scroll-top,
.back-to-top,
#back-top {
  display: none !important;
}