:root {
  --navy:   #001935;
  --navy-2: #002b54;
  --accent: #95c11e;
  --muted:  #5C6975;
  --white:  #ffffff;
  --danger: #e0566a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1200px 800px at 70% 15%, var(--navy-2) 0%, var(--navy) 55%),
    var(--navy);
  color: var(--white);
  min-height: 100%;
}

/* ---------- Logo ---------- */
.logo-box { display: inline-flex; align-items: center; }
.logo-box img, .logo-box .logo-svg { height: 38px; width: auto; display: block; }
.logo-invert { filter: brightness(0) invert(1); opacity: .95; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--navy); background: var(--accent);
  border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn.ghost { color: var(--white); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.btn.danger { color: #fff; background: var(--danger); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.small { padding: 7px 13px; font-size: 13px; }

/* ---------- Inputs ---------- */
input[type=text], input[type=password], input[type=email], input:not([type]), textarea, select {
  font: inherit; font-size: 15px; color: var(--white);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px; padding: 11px 14px; width: 100%; outline: none;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.5); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
label.check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
label.check input { width: auto; }

/* ---------- Wordcloud ---------- */
.stage { position: absolute; inset: 0; }
.word {
  position: absolute;
  transform: translate(-50%, -50%) scale(.25) rotate(var(--rot));
  opacity: 0;
  transition:
    opacity .55s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.34,1.7,.45,1),
    left .65s cubic-bezier(.34,1.3,.4,1),
    top  .65s cubic-bezier(.34,1.3,.4,1);
  will-change: transform, opacity, left, top;
  user-select: none;
}
.word.in { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.word .inner { display: inline-block; }
.word.float .inner { animation: drift var(--dur) ease-in-out infinite alternate; animation-delay: var(--fdelay); }
@keyframes drift {
  0%   { transform: translate(var(--dx1), var(--dy1)) rotate(var(--r1)) scale(1); }
  100% { transform: translate(var(--dx2), var(--dy2)) rotate(var(--r2)) scale(1.04); }
}
.word .label {
  display: inline-block; font-weight: 700; line-height: 1; white-space: nowrap;
  filter: blur(0);
  transition: filter .55s ease, font-size .5s cubic-bezier(.34,1.4,.4,1), color .4s ease;
}
.word .label.blurred { filter: blur(14px); }
.word .label.bump { animation: bump .55s ease; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)} }

/* ---------- Bubble-Cluster (Abstimmungs-Übersicht) ---------- */
.bubble {
  position: absolute; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, rgba(149,193,30,.14), rgba(255,255,255,.04) 60%, rgba(255,255,255,.015));
  border: 1px solid rgba(149,193,30,.3);
  box-shadow: 0 10px 40px rgba(0,0,0,.25), inset 0 0 30px rgba(0,0,0,.15);
  opacity: 0; transition: opacity .5s ease, border-color .4s ease, box-shadow .4s ease;
  will-change: transform, width, height;
}
.bubble.in { opacity: 1; }
.bubble.revealed { border-color: rgba(149,193,30,.85); box-shadow: 0 10px 40px rgba(0,0,0,.25), 0 0 26px rgba(149,193,30,.35), inset 0 0 30px rgba(0,0,0,.12); }
.bubble.flash { animation: bflash .7s ease; }
@keyframes bflash { 30%{filter:brightness(1.6)} 100%{filter:brightness(1)} }
.blabel { position: absolute; top: 7%; left: 0; right: 0; text-align: center; z-index: 3;
  font-size: .62em; font-weight: 700; color: var(--accent); letter-spacing: .04em; opacity: .9; white-space: nowrap; pointer-events: none; }
.bcloud { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform-origin: center; }
.bw { position: absolute; white-space: nowrap; font-weight: 700; line-height: 1;
  transform: translate(-50%, -50%) rotate(var(--rot));
  transition: filter .55s ease, left .5s cubic-bezier(.34,1.3,.4,1), top .5s cubic-bezier(.34,1.3,.4,1); }
.bw.blurred { filter: blur(6px); }

/* ---------- Karten / Panels ---------- */
.card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 16px;
}

/* ---------- QR ---------- */
.qr-img { background: #fff; border-radius: 14px; padding: 12px; display: inline-block; }
.qr-img svg, .qr-img img { display: block; width: 100%; height: 100%; }

.code-pill {
  font-weight: 800; letter-spacing: .18em; font-size: 22px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(149,193,30,.5);
  padding: 8px 18px; border-radius: 12px; display: inline-block;
}

.muted { color: var(--muted); }
.accent { color: var(--accent); }