:root{
  --bg:#0d0b1a;
  --bg-glow:#241a4d;
  --bg2:#151229;
  --card:#1c1836;
  --line:#2c2750;
  --text:#f3f0ff;
  --muted:#a49dd0;
  --accent:#7c5cff;
  --accent2:#ff4f9a;
  --ok:#33d69f;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,var(--bg-glow) 0%,var(--bg) 55%);
  color:var(--text);
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:560px;margin:0 auto;padding:18px 16px 60px}
.wrap-wide{max-width:960px}

/* Kopf */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.brand{font-weight:800;letter-spacing:.3px;font-size:15px}
.ig-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}
.ig-link:hover{color:var(--text)}

.event-head{margin:6px 0 18px}
.event-title-row{display:flex;align-items:center;gap:14px}
.veranstalter-logo{height:56px;width:auto;max-width:90px;object-fit:contain;border-radius:10px;flex:none}
.event-title-row h1{margin:0 !important}
.event-head h1{font-size:24px;line-height:1.15;margin:0 0 6px}
.event-sub{color:var(--muted);font-size:14px}

/* Sponsor */
.sponsor{
  display:flex;align-items:center;gap:10px;justify-content:center;
  background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px;margin:14px 0;font-size:13px;color:var(--muted);
  text-align:center
}
.sponsor b{color:var(--text)}
.sponsor a{color:var(--text);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.sponsor-col{flex-direction:column;gap:8px}
.sponsor-logo{max-height:70px;max-width:80%;object-fit:contain;display:block}
.ig-footer{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;color:var(--muted);margin:34px auto 8px;padding:16px;
  background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--radius);max-width:340px
}
.ig-footer svg{color:#e6683c}
.ig-footer-text{font-size:15px;font-weight:700;color:var(--text)}
.ig-footer-handle{font-size:14px;font-weight:600;color:var(--accent2)}
.ig-footer-sub{font-size:13px;color:var(--muted)}
.ig-footer{border-width:2px;border-color:var(--accent2)}
.ig-footer-text{font-size:16px !important}
.info-text{font-size:15px;line-height:1.55;color:var(--text);max-height:60vh;overflow:auto;white-space:normal}
.qr-follow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:0;padding:11px 14px;border-radius:12px;text-decoration:none;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(90deg,#feda75,#d62976 45%,#4f5bd5);box-shadow:0 4px 14px rgba(214,41,118,.35)}
.qr-follow:active{transform:scale(.98)}
.qr-speech{position:relative;display:block;max-width:88%;margin:16px auto 12px;background:#fff;color:#1a2e22;border:1px solid #e6e6e6;border-radius:14px;padding:9px 14px;font-size:13.5px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.qr-speech::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff;border-bottom:0}

/* Gewinn-Blase – auffaellig oben */
.gewinn-bubble{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#fff;border-radius:18px;padding:16px 18px;margin:0 0 16px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  animation:bubble-puls 1.8s ease-in-out infinite;
}
.gewinn-bubble-badge{
  display:inline-block;background:rgba(0,0,0,.25);border-radius:999px;
  padding:4px 12px;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
}
.gewinn-bubble-text{font-size:19px;font-weight:800;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.25)}
@keyframes bubble-puls{
  0%,100%{ transform:scale(1);    box-shadow:0 8px 30px rgba(0,0,0,.35); }
  50%    { transform:scale(1.03); box-shadow:0 10px 40px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce){ .gewinn-bubble{ animation:none; } }
.qr-overlay{position:fixed;inset:0;background:rgba(5,4,15,.82);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.qr-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;max-width:360px;width:100%;text-align:center}
.qr-title{font-size:18px;font-weight:800;margin-bottom:14px}
.qr-box{background:#fff;border-radius:12px;padding:12px;display:inline-block;line-height:0}
.qr-box svg{width:230px;height:230px;display:block}
.qr-hint{font-size:13px;color:var(--muted);margin:14px 0 8px}
.wa-btn{background:#25d366;color:#04310f;margin:10px 0 6px;text-decoration:none}
.slot{margin-bottom:14px}
.slot:last-child{margin-bottom:0}
.flyer-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;text-decoration:none;margin-bottom:14px}

/* Einladen-Button: deutlich sichtbares Pulsieren */
#qr-open{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;
  border:none;
  font-weight:800;
  will-change:transform,box-shadow;
  animation:einladen-puls 1.5s ease-in-out infinite;
}
@keyframes einladen-puls{
  0%,100%{ transform:scale(1);    box-shadow:0 0 0 0 rgba(255,79,154,0);   opacity:.9; }
  50%    { transform:scale(1.05); box-shadow:0 0 26px 5px rgba(255,79,154,.65); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  #qr-open{ animation:none; }
}

/* Karten */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.card h2{font-size:16px;margin:0 0 12px}

.count-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:14px;color:var(--muted)
}
.count-pill b{color:var(--text);font-size:16px}

/* Formularelemente */
label{display:block;font-size:13px;color:var(--muted);margin:2px 0 6px;font-weight:600}
input[type=text]{
  width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);color:var(--text);font-size:16px;outline:none
}
input[type=text]:focus{border-color:var(--accent)}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.row2{display:flex;gap:10px}
.row2>div{flex:1}

/* Suche + Ergebnisse */
.search-box{position:relative}
.results{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.res-item{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 10px
}
.res-item:active{border-color:var(--accent)}
.res-item img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:var(--line)}
.pv-play{flex:none;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;font-size:15px;line-height:1;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;padding:0}
.pv-play:active{transform:scale(.94)}
.res-meta{min-width:0}
.res-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-artist{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Ausgewaehlte Titel */
.picks{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pick{
  display:flex;align-items:center;gap:12px;
  background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;padding:8px 10px
}
.pick img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:var(--line)}
.pick .res-meta{flex:1;min-width:0}
.pick .rm{background:transparent;border:none;color:var(--accent2);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
.pick-empty{color:var(--muted);font-size:13px;text-align:center;padding:10px}

/* Buttons */
.btn{
  display:block;width:100%;text-align:center;border:none;cursor:pointer;
  padding:16px;border-radius:14px;font-size:16px;font-weight:800;color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  margin-top:8px
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:var(--bg2);border:1px solid var(--line);color:var(--text)}
.btn-sm{padding:15px 24px;font-size:17px;width:auto;display:inline-block;border-radius:12px}

/* Bestaetigung / Screenshot-Hinweis */
.confirm .check{font-size:44px;text-align:center;margin:4px 0}
.warnbox{
  background:rgba(255,79,154,.12);border:1px solid rgba(255,79,154,.4);
  border-radius:12px;padding:12px 14px;font-size:14px;margin:12px 0
}
.warnbox b{color:#ffd0e4}

/* Share */
.share{display:flex;gap:10px;margin-top:10px}
.share a{flex:1;text-decoration:none;text-align:center;padding:13px;border-radius:12px;font-weight:700;font-size:14px;color:#fff}
.share .wa{background:#25d366;color:#04310f}
.share .ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}

/* Tabellen (Admin) */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.rank-cover{width:38px;height:38px;border-radius:7px;object-fit:cover;background:var(--line)}
.rank-nr{font-weight:800;color:var(--accent);width:30px}
.votes-badge{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-weight:700}

/* Diverses */
.msg{padding:12px 14px;border-radius:12px;margin-bottom:12px;font-size:14px}
.msg-err{background:rgba(255,79,154,.12);border:1px solid rgba(255,79,154,.4)}
.msg-ok{background:rgba(51,214,159,.12);border:1px solid rgba(51,214,159,.4)}
.muted{color:var(--muted)}
.center{text-align:center}
a.link{color:var(--accent);text-decoration:none;font-weight:700;font-size:16px;display:inline-block;padding:6px 2px}
.linkbox{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;word-break:break-all;color:var(--muted)}
.spin{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}