:root {
  --bg: #0d1330; --bg2: #161f4a; --card: #1d2759; --line: #33407f;
  --text: #f4f6ff; --mut: #aab3de; --gelb: #ffd60a; --rot: #ff4d5e; --gruen: #2fd67b;
  --o0: #ff5a6a; --o1: #3d8bff; --o2: #ffb703; --o3: #25c685; --o4: #b56bff;
  --r: 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, #2a3a8f 0%, transparent 60%), radial-gradient(900px 700px at -10% 110%, #5a2a8f 0%, transparent 55%), var(--bg);
  background-attachment: fixed; color: var(--text); font-size: 18px; line-height: 1.35; overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: 560px; margin: 0 auto; padding: 18px 16px 28px; min-height: 100dvh; display: flex; flex-direction: column; }
.center { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 16px; }
.logo { font-weight: 800; letter-spacing: .02em; font-size: 15px; color: var(--mut); text-transform: uppercase; }
.logo b { color: var(--gelb); }
.gross { font-size: clamp(30px, 8vw, 44px); font-weight: 800; line-height: 1.1; }
.mittel { font-size: 22px; font-weight: 700; }
.mut { color: var(--mut); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; width: 100%; }
.btn { background: var(--gelb); color: #1a1a1a; font-weight: 800; font-size: 20px; padding: 16px 22px; border-radius: 16px; width: 100%; transition: transform .12s, opacity .2s, background .2s; box-shadow: 0 6px 0 #b89600; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b89600; }
.btn:disabled { opacity: .35; box-shadow: none; cursor: default; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; font-size: 15px; padding: 9px 14px; width: auto; font-weight: 600; }
.feld { width: 100%; font-size: 24px; font-weight: 700; text-align: center; padding: 16px; border-radius: 16px; border: 2px solid var(--line); background: #0f1638; outline: none; }
.feld:focus { border-color: var(--gelb); }
.fehler { color: #ff9aa5; min-height: 1.4em; font-size: 16px; }

/* Namens-Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { background: #26327a; border: 1px solid #4352a8; padding: 7px 14px; border-radius: 999px; font-weight: 700; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.chip.ich { background: var(--gelb); color: #1a1a1a; border-color: var(--gelb); }
.chip.off { opacity: .4; }
.chip.ok { background: var(--gruen); border-color: var(--gruen); color: #06281a; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rein { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.rein { animation: rein .45s ease both; }
.rein2 { animation: rein .45s .12s ease both; }
.rein3 { animation: rein .45s .24s ease both; }
.punkte3 span { display: inline-block; width: 12px; height: 12px; margin: 0 5px; border-radius: 50%; background: var(--gelb); animation: puls 1s infinite; }
.punkte3 span:nth-child(2) { animation-delay: .15s; } .punkte3 span:nth-child(3) { animation-delay: .3s; }

/* Frage auf dem Handy */
.kopf { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--mut); font-weight: 700; margin-bottom: 8px; }
.zeit { height: 10px; background: #0b102b; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.zeit i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gruen), var(--gelb), var(--rot)); background-size: 100vw 100%; border-radius: 99px; transform-origin: left; }
.ftext { font-size: clamp(19px, 5.2vw, 24px); font-weight: 750; margin-bottom: 6px; }
.hinweis { font-size: 14px; color: var(--gelb); font-weight: 700; margin-bottom: 10px; min-height: 1.3em; }
.opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.opt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 14px; border-radius: 16px; background: var(--card); border: 3px solid transparent; font-size: clamp(17px, 4.6vw, 20px); font-weight: 650; color: var(--text); transition: transform .12s, border-color .15s, background .15s, opacity .3s; animation: rein .35s ease both; }
.opt .bu { flex: 0 0 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; color: #10142e; font-size: 19px; }
.opt.c0 .bu { background: var(--o0); } .opt.c1 .bu { background: var(--o1); } .opt.c2 .bu { background: var(--o2); } .opt.c3 .bu { background: var(--o3); } .opt.c4 .bu { background: var(--o4); }
.opt.sel { border-color: var(--gelb); background: #2a3572; transform: scale(1.015); }
.opt.fest { opacity: .45; } .opt.fest.sel { opacity: 1; }
.opt.richtig { border-color: var(--gruen); background: #12442f; opacity: 1; }
.opt.falschgew { border-color: var(--rot); background: #4a1a26; opacity: 1; }
.unten { position: sticky; bottom: 0; margin-top: auto; padding: 14px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 72%, transparent); z-index: 2; }
.drin { text-align: center; padding: 14px; border-radius: 16px; background: #12442f; border: 2px solid var(--gruen); font-weight: 800; animation: pop .4s both; }
.urteil { font-size: 64px; line-height: 1; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.plus { font-size: 40px; font-weight: 900; color: var(--gelb); }
.erkl { font-size: 17px; color: #dfe4ff; text-align: left; }
.platz { font-size: 84px; font-weight: 900; line-height: 1; color: var(--gelb); }
.balken { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: var(--card); width: 100%; font-weight: 700; }
canvas#konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* ---------- Beamer / Verwaltung ---------- */
body.beamer { font-size: 22px; overflow: hidden; }
.stage { height: 100dvh; padding: 2.6vh 3.4vw 78px; display: flex; flex-direction: column; overflow-y: hidden; }
.stage > * { zoom: var(--z, 1); }
.stage .center { gap: 2.4vh; }
.riesig { font-size: clamp(44px, 6.4vw, 110px); font-weight: 900; line-height: 1.04; }
.url { font-size: clamp(48px, 7.5vw, 130px); font-weight: 900; color: var(--gelb); letter-spacing: -.01em; }
.beitritt { display: flex; align-items: center; gap: 2.2vw; text-align: left; }
.qr { flex: 0 0 auto; width: clamp(170px, 34vh, 380px); aspect-ratio: 1; background: #fff; border-radius: 16px; padding: 6px; animation: pop .5s both; }
.qr svg { width: 100%; height: 100%; display: block; }
.beitritt .url { font-size: clamp(36px, 5vw, 96px); }
.sub { font-size: clamp(20px, 2.2vw, 34px); color: var(--mut); font-weight: 600; }
.bchips .chip { font-size: clamp(18px, 1.9vw, 30px); padding: .4em .9em; cursor: pointer; }
.bfrage { font-size: clamp(22px, min(3.2vw, 5.6vh), 60px); font-weight: 800; line-height: 1.15; text-align: center; max-width: 1500px; margin: 0 auto; }
.fzeile { display: flex; align-items: center; gap: 2.4vw; }
.fzeile .bfrage { flex: 1; text-align: left; margin: 0; }
.bkopf { display: flex; justify-content: space-between; align-items: center; color: var(--mut); font-weight: 700; font-size: clamp(16px, 1.4vw, 22px); margin-bottom: 1.5vh; }
.bopts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vh 1.2vw; margin-top: 2.4vh; }
.bopts.eins { grid-template-columns: 1fr; max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
.bopt { position: relative; display: flex; align-items: center; gap: 1vw; padding: 1.5vh 1.2vw; border-radius: 18px; background: var(--card); border: 4px solid transparent; font-size: clamp(17px, min(1.95vw, 3.5vh), 36px); line-height: 1.2; font-weight: 700; overflow: hidden; transition: opacity .5s, border-color .4s, background .4s, transform .4s; animation: rein .4s ease both; }
.bopt .bu { flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: .45em; display: grid; place-items: center; font-weight: 900; color: #10142e; }
.bopt.c0 .bu { background: var(--o0); } .bopt.c1 .bu { background: var(--o1); } .bopt.c2 .bu { background: var(--o2); } .bopt.c3 .bu { background: var(--o3); } .bopt.c4 .bu { background: var(--o4); }
.bopt .txt { position: relative; z-index: 1; flex: 1; }
.bopt .n { position: relative; z-index: 1; font-weight: 900; color: var(--mut); min-width: 1.4em; text-align: right; }
.bopt .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .09); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.bopt.richtig { border-color: var(--gruen); background: #12442f; transform: scale(1.012); }
.bopt.richtig .n { color: #fff; }
.bopt.falsch { opacity: .38; }
.mitte { display: flex; align-items: center; gap: 1.6vw; margin-top: 2vh; flex-wrap: wrap; }
.ring { position: relative; flex: 0 0 auto; width: clamp(84px, min(9vw, 17vh), 150px); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .bgc { stroke: #0b102b; } .ring .fg { stroke: var(--gelb); stroke-linecap: round; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(30px, 3.4vw, 56px); font-weight: 900; }
.ring.knapp .fg { stroke: var(--rot); } .ring.knapp b { animation: puls .5s infinite; }
.zaehler { font-size: clamp(20px, min(2vw, 3.6vh), 36px); font-weight: 800; white-space: nowrap; }
.zaehler span { color: var(--gelb); }
.erklbox { margin: 2.2vh auto 0; max-width: 1400px; width: 100%; background: #111a44; border: 1px solid var(--line); border-left: 8px solid var(--gruen); border-radius: 16px; padding: 1.6vh 1.4vw; font-size: clamp(16px, min(1.8vw, 3.2vh), 30px); animation: rein .5s .3s ease both; }
.erklbox.ruhig { animation: none; }
.erklbox ul { margin: .5em 0 0; padding-left: 1.2em; color: #dfe4ff; font-size: .9em; }
.erklbox li { margin: .25em 0; }
.schnell { text-align: center; color: var(--mut); font-weight: 700; margin-top: 1.4vh; font-size: clamp(16px, 1.5vw, 24px); animation: rein .5s .6s ease both; }
.schnell b { color: var(--gelb); }
.rang { position: relative; width: min(1100px, 100%); margin: 2vh auto 0; flex: 1; }
.zeile { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 1vw; padding: 0 1.4vw; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-weight: 800; font-size: clamp(18px, 2vw, 32px); transition: top 1.1s cubic-bezier(.3, 1.3, .4, 1), background .6s; overflow: hidden; }
.zeile .pl { width: 1.8em; color: var(--mut); } .zeile .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.zeile .pk { position: relative; z-index: 1; font-variant-numeric: tabular-nums; } .zeile .pp { color: var(--gruen); font-size: .7em; min-width: 4em; text-align: right; position: relative; z-index: 1; }
.zeile .bar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(255, 214, 10, .22), rgba(255, 214, 10, .05)); transition: width 1.2s ease; }
.zeile.p1 { background: #4a3d00; border-color: var(--gelb); }
.podest { display: flex; align-items: flex-end; justify-content: center; gap: 1.5vw; height: 46vh; margin-top: 2vh; }
.stufe { width: 22vw; max-width: 340px; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 1.5vh; font-weight: 900; transform: translateY(110%); animation: hoch 1s cubic-bezier(.2, 1.2, .3, 1) forwards; }
.stufe .med { font-size: clamp(34px, 4vw, 70px); } .stufe .nm { font-size: clamp(18px, 2vw, 34px); text-align: center; padding: 0 .4em; overflow-wrap: anywhere; } .stufe .pk { color: rgba(0, 0, 0, .65); font-size: clamp(16px, 1.6vw, 26px); }
.stufe.s1 { height: 100%; background: linear-gradient(#ffe066, #ffc300); color: #2b2100; animation-delay: 2.2s; }
.stufe.s2 { height: 74%; background: linear-gradient(#e4e9f5, #b9c2d8); color: #1c2233; animation-delay: 1.2s; }
.stufe.s3 { height: 54%; background: linear-gradient(#f0b27a, #d98a4b); color: #2e1a08; animation-delay: .3s; }
@keyframes hoch { to { transform: none; } }
.rest { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin-top: 2vh; color: var(--mut); font-weight: 700; font-size: clamp(15px, 1.4vw, 22px); animation: rein .6s 3.2s both; }
.leiste { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 10px 16px; background: rgba(8, 12, 34, .92); border-top: 1px solid var(--line); z-index: 20; font-size: 15px; }
.leiste .btn { width: auto; font-size: 17px; padding: 10px 22px; box-shadow: none; }
.leiste .sp { flex: 1; } .leiste .info { color: var(--mut); font-weight: 600; }
.setup { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3vw; flex: 1; align-items: center; }
.runden { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; font-size: 16px; }
.runden h3 { font-size: 15px; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.runden label { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; font-weight: 600; }
.runden input { width: 20px; height: 20px; accent-color: var(--gelb); }
.runden .n { margin-left: auto; color: var(--mut); font-weight: 600; }
.trigger { max-width: 1100px; border-left: 10px solid var(--gelb); text-align: left; padding: 3vh 2.4vw; }
@media (max-width: 900px) { .setup { grid-template-columns: 1fr; } .bopts { grid-template-columns: 1fr; } }