.kwk-scope{
  --kwk-ink:#16130F; --kwk-ink-2:#1D1712; --kwk-stage:#241C15; --kwk-stage-2:#2C2219;
  --kwk-spot:#E8A23A; --kwk-spot-2:#F4C066; --kwk-velvet:#7C2D3B; --kwk-velvet-2:#9C3B4C;
  --kwk-paper:#F3EAD8; --kwk-smoke:#A79C89; --kwk-string:#C9A227; --kwk-good:#7C9A5E;
  --kwk-line: rgba(243,234,216,0.14);
  font-family:'Work Sans', sans-serif;
  box-sizing:border-box;
}
.kwk-scope *{ box-sizing:border-box; }
.kwk-scope h1,.kwk-scope h2,.kwk-scope h3{ font-family:'Fraunces', serif; letter-spacing:-0.01em; margin:0; }
.kwk-scope button{ font-family:inherit; cursor:pointer; }
.kwk-scope input{ font-family:inherit; }
.kwk-scope a{ color:var(--kwk-spot-2); }

.kwk-root{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(232,162,58,0.10), transparent 60%), var(--kwk-ink);
  color:var(--kwk-paper);
  border-radius:18px;
  min-height:320px;
  padding:1px; /* clip rounded corners */
  overflow:hidden;
}
.kwk-root.kwk-present-root{ /* siehe erweiterte Regeln weiter unten */ }

.kwk-eyebrow{ font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.18em; font-weight:600; color:var(--kwk-spot); font-size:0.78rem; }
.kwk-center{ display:flex; align-items:center; justify-content:center; padding:32px 20px; min-height:320px; }
.kwk-ticket{
  width:100%; max-width:420px; background:linear-gradient(180deg,var(--kwk-stage),var(--kwk-stage-2));
  border:1px solid var(--kwk-line); border-radius:20px; padding:32px 26px; position:relative;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.7);
}
.kwk-ticket::before,.kwk-ticket::after{ content:""; position:absolute; width:22px; height:22px; background:var(--kwk-ink); border-radius:50%; top:50%; transform:translateY(-50%); }
.kwk-ticket::before{ left:-11px; } .kwk-ticket::after{ right:-11px; }
.kwk-brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.kwk-pick{ width:14px; height:18px; background:var(--kwk-spot); clip-path:polygon(50% 0%, 100% 35%, 78% 100%, 22% 100%, 0% 35%); flex-shrink:0; }
.kwk-brand-title{ font-size:1.05rem; font-weight:700; }
.kwk-brand-sub{ font-size:0.72rem; color:var(--kwk-smoke); }

.kwk-code-input{
  width:100%; font-family:'Barlow Condensed', sans-serif; font-size:2.6rem; font-weight:700;
  letter-spacing:0.3em; text-align:center; background:var(--kwk-ink-2); border:1px solid var(--kwk-line);
  border-radius:12px; color:var(--kwk-paper); padding:14px 10px 10px 18px; margin:10px 0 16px;
}
.kwk-code-input:focus{ outline:none; border-color:var(--kwk-spot); }
.kwk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--kwk-spot);
  color:var(--kwk-ink); border:none; border-radius:10px; padding:13px 20px; font-weight:700; font-size:0.95rem; width:100%;
}
.kwk-btn:hover{ background:var(--kwk-spot-2); }
.kwk-error{ color:#E28B8B; font-size:0.85rem; margin-top:-6px; margin-bottom:10px; min-height:1.1em; }
.kwk-hint{ color:var(--kwk-smoke); font-size:0.8rem; line-height:1.5; }

.kwk-vote-wrap{ width:100%; max-width:480px; margin:0 auto; padding:20px 16px 40px; }
.kwk-vote-header{ text-align:center; margin-bottom:18px; }
.kwk-round-badge{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--kwk-smoke); font-size:0.85rem; }
.kwk-ring{ width:96px; height:96px; border-radius:50%; margin:14px auto; display:flex; align-items:center; justify-content:center; position:relative; background:conic-gradient(var(--kwk-spot) calc(var(--pct,100)*1%), rgba(255,255,255,0.08) 0); }
.kwk-ring::before{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--kwk-stage); }
.kwk-ring-num{ position:relative; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.7rem; }

.kwk-song-card{ background:var(--kwk-stage); border:1px solid var(--kwk-line); border-radius:14px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:12px; }
.kwk-song-info{ flex:1; min-width:0; }
.kwk-song-title{ font-weight:600; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kwk-song-artist{ color:var(--kwk-smoke); font-size:0.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kwk-bar-track{ height:5px; border-radius:3px; background:rgba(255,255,255,0.08); margin-top:8px; overflow:hidden; }
.kwk-bar-fill{ height:100%; background:var(--kwk-spot); border-radius:3px; transition:width .4s ease; }
.kwk-vote-count{ font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--kwk-smoke); font-size:0.8rem; margin-top:4px; }
.kwk-vote-btn{ flex-shrink:0; width:52px; height:52px; border-radius:50%; border:1.5px solid var(--kwk-spot); background:transparent; color:var(--kwk-spot); font-size:1.4rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.kwk-vote-btn.kwk-voted{ background:var(--kwk-good); border-color:var(--kwk-good); color:var(--kwk-ink); }
.kwk-vote-btn:disabled{ opacity:1; cursor:default; }

.kwk-eq{ display:flex; align-items:flex-end; gap:2px; height:14px; margin-left:6px; }
.kwk-eq span{ width:3px; background:var(--kwk-spot); border-radius:2px; animation:kwkeq 0.9s ease-in-out infinite; }
.kwk-eq span:nth-child(2){ animation-delay:0.15s; } .kwk-eq span:nth-child(3){ animation-delay:0.3s; }
@keyframes kwkeq{ 0%,100%{height:4px;} 50%{height:14px;} }

.kwk-waiting{ text-align:center; padding:40px 20px; }
.kwk-waiting h2{ font-size:1.6rem; margin-bottom:8px; }
.kwk-spin{ width:34px; height:34px; border-radius:50%; margin:20px auto 0; border:3px solid var(--kwk-line); border-top-color:var(--kwk-spot); animation:kwkspin 1s linear infinite; }
@keyframes kwkspin{ to{ transform:rotate(360deg); } }

.kwk-thanks{ text-align:center; padding:40px 24px; max-width:520px; margin:0 auto; }
.kwk-thanks h1{ font-size:2.1rem; margin-bottom:10px; }
.kwk-socials{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
.kwk-social-pill{ border:1px solid var(--kwk-line); border-radius:999px; padding:9px 18px; font-size:0.9rem; color:var(--kwk-paper); text-decoration:none; }
.kwk-social-pill:hover{ border-color:var(--kwk-spot); color:var(--kwk-spot-2); }

/* ---------- presentation ---------- */
.kwk-root.kwk-present-root{
  aspect-ratio: 16 / 9;
  min-height:360px;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  position:relative;
  box-shadow: 0 40px 110px -40px rgba(0,0,0,0.65), 0 0 0 1px rgba(232,162,58,0.08);
}
.kwk-root.kwk-present-root .kwk-content{ height:100%; width:100%; }
.kwk-root.kwk-present-root:fullscreen,
.kwk-root.kwk-present-root:-webkit-full-screen,
.kwk-root.kwk-present-root:-moz-full-screen,
.kwk-root.kwk-present-root:-ms-fullscreen{
  aspect-ratio:auto;
  width:100vw;
  height:100vh;
  max-width:none;
  border-radius:0;
  margin:0;
}
.kwk-root.kwk-present-root:fullscreen .kwk-present-wrap,
.kwk-root.kwk-present-root:-webkit-full-screen .kwk-present-wrap{
  padding:5vh 6vw;
}
.kwk-root > .kwk-fs-btn{
  position:absolute !important; top:14px !important; right:14px !important; left:auto !important; bottom:auto !important;
  z-index:2147483000 !important;
  width:42px !important; height:42px !important; min-width:0 !important; min-height:0 !important;
  border-radius:50% !important; padding:0 !important; margin:0 !important;
  background:#E8A23A !important; border:1px solid rgba(255,255,255,0.35) !important;
  color:#16130F !important; font-size:1.2rem !important; line-height:1 !important; font-weight:700 !important;
  font-family:inherit !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  opacity:0 !important; pointer-events:none !important;
  transition:opacity .35s ease, transform .15s ease !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.35) !important;
  cursor:pointer !important; text-transform:none !important; text-decoration:none !important;
}
.kwk-root > .kwk-fs-btn.kwk-visible{ opacity:0.85 !important; pointer-events:auto !important; }
.kwk-root > .kwk-fs-btn.kwk-visible:hover, .kwk-root > .kwk-fs-btn.kwk-visible:focus{ opacity:1 !important; transform:scale(1.06); outline:none !important; }

.kwk-present-wrap{ height:100%; display:flex; flex-direction:column; padding:4vh 5vw; }
.kwk-present-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2vh; }
.kwk-present-title{ font-size:2.4vw; font-weight:700; }
.kwk-present-round{ font-family:'Barlow Condensed',sans-serif; color:var(--kwk-smoke); font-size:1.4vw; letter-spacing:.08em; text-transform:uppercase; }
.kwk-present-ring{ width:10vw; height:10vw; max-width:130px; max-height:130px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; background:conic-gradient(var(--kwk-spot) calc(var(--pct,100)*1%), rgba(255,255,255,0.08) 0); }
.kwk-present-ring::before{ content:""; position:absolute; inset:9%; border-radius:50%; background:var(--kwk-ink); }
.kwk-present-songs{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:1.4vh; }
.kwk-present-song{ display:flex; align-items:center; gap:2vw; background:var(--kwk-stage); border:1px solid var(--kwk-line); border-radius:16px; padding:1.6vh 2vw; transition: transform 550ms cubic-bezier(.2,.8,.2,1); will-change:transform; }
.kwk-present-rank{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:2.2vw; color:var(--kwk-spot); width:3vw; text-align:center; }
.kwk-present-song .kwk-song-title{ font-size:1.7vw; white-space:normal; }
.kwk-present-song .kwk-song-artist{ font-size:1vw; white-space:normal; }
.kwk-present-count{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.6vw; width:4vw; text-align:right; }
.kwk-present-winner{ text-align:center; margin:auto; }
.kwk-present-winner h1{ font-size:3.4vw; margin:14px 0; }

@media (max-width:700px){
  .kwk-present-title{ font-size:5vw; } .kwk-present-round{ font-size:3vw; }
  .kwk-present-song .kwk-song-title{ font-size:4vw; } .kwk-present-song .kwk-song-artist{ font-size:2.8vw; }
  .kwk-present-rank{ font-size:4.5vw; } .kwk-present-count{ font-size:3.4vw; }
  .kwk-present-ring{ width:18vw; height:18vw; } .kwk-present-winner h1{ font-size:8vw; }
}