/* =============================================================
   Vereinsquiz – Teilnehmerbereich
   Palette:  Navy #032950 · Rot #b51f2a · Grau #D6D6D6 · Fond #F7F8FA
   Signatur: das „Korpsband" – schmaler Schrägstreifen in Vereinsfarben,
             wie die Schärpe eines Spielmannszugs.
   ============================================================= */
:root{
  --navy:#032950; --red:#b51f2a; --muted:#D6D6D6;
  --bg:#F7F8FA; --card:#ffffff; --ink:#13212f; --ink-soft:#5a6b7c;
  --ok:#1d7a3e; --ok-soft:#e4f4ea; --bad:#b51f2a; --bad-soft:#fbe9ea;
  --gold:#e8b23a;
  --radius:16px; --shadow:0 2px 10px rgba(3,41,80,.08), 0 10px 30px rgba(3,41,80,.06);
  --sash:repeating-linear-gradient(115deg,
      var(--navy) 0 14px, var(--red) 14px 22px, #fff 22px 26px, var(--muted) 26px 30px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5; min-height:100dvh;
}
#app{max-width:560px; margin:0 auto; padding:0 16px calc(96px + env(safe-area-inset-bottom));}
button{font:inherit; cursor:pointer}
img,video{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--red); outline-offset:2px; border-radius:6px}

/* ---------- Boot ---------- */
.boot{display:grid; place-items:center; min-height:80dvh; gap:14px; color:var(--ink-soft)}
.boot-drum{width:54px;height:54px;border-radius:50%;border:6px solid var(--navy);
  border-top-color:var(--red); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Kopf mit Korpsband ---------- */
.head{position:sticky; top:0; z-index:20; margin:0 -16px 16px; background:var(--bg);
  padding:0 16px; box-shadow:0 1px 0 rgba(3,41,80,.06)}
.sash{height:6px; background:var(--sash); margin:0 -16px}
.head-row{display:flex; align-items:center; gap:10px; padding:10px 0}
.head-logo{height:34px; width:auto; max-width:110px; object-fit:contain}
.head-title{font-weight:800; font-size:.95rem; letter-spacing:.01em; color:var(--navy);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.icon-btn{border:1.5px solid var(--muted); background:var(--card); border-radius:10px;
  width:38px; height:38px; display:grid; place-items:center; font-size:1.05rem; color:var(--navy)}
.icon-btn:active{transform:scale(.94)}

/* Fortschritt */
.progress-wrap{padding:0 0 10px}
.progress-label{display:flex; justify-content:space-between; font-size:.78rem;
  color:var(--ink-soft); font-weight:600; margin-bottom:5px}
.progress-label b{color:var(--navy)}
.pbar{height:8px; border-radius:99px; background:var(--muted); overflow:hidden}
.pbar > i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--navy),var(--red)); transition:width .45s cubic-bezier(.2,.8,.2,1)}
.dots{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted); transition:transform .2s, background .2s}
.dot.done{background:var(--navy)}
.dot.now{background:var(--red); transform:scale(1.35)}

/* ---------- Karten & Typo ---------- */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 18px; margin-bottom:16px; border-top:5px solid transparent;
  border-image:var(--sash) 1; border-image-slice:1 0 0 0; animation:rise .3s ease both}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}
h1{font-size:1.5rem; line-height:1.2; margin:.2em 0 .4em; color:var(--navy);
  font-weight:800; letter-spacing:-.015em}
h2{font-size:1.12rem; margin:.2em 0 .5em; color:var(--navy); font-weight:800}
.eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-bottom:6px}
.soft{color:var(--ink-soft)}
.small{font-size:.85rem}
.center{text-align:center}
.prewrap{white-space:pre-wrap}

/* ---------- Buttons ---------- */
.btn{display:block; width:100%; padding:15px 18px; border-radius:14px; border:none;
  background:var(--navy); color:#fff; font-weight:800; font-size:1.02rem;
  letter-spacing:.01em; transition:transform .12s, filter .15s, opacity .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.red{background:var(--red)}
.btn.ghost{background:transparent; color:var(--navy); border:2px solid var(--navy)}
.btn.sub{background:transparent; color:var(--ink-soft); font-weight:600; padding:10px}
.btn + .btn{margin-top:10px}

/* ---------- Formulare ---------- */
input[type=text],input[type=number],input[type=password]{
  width:100%; padding:14px 15px; border-radius:12px; border:1.5px solid var(--muted);
  font:inherit; background:#fff; color:var(--ink)}
input:focus{border-color:var(--navy); outline:none; box-shadow:0 0 0 3px rgba(3,41,80,.12)}
label{display:block; font-weight:700; font-size:.88rem; margin:14px 0 6px; color:var(--navy)}
select{width:100%; padding:13px 12px; border-radius:12px; border:1.5px solid var(--muted); font:inherit; background:#fff}

/* ---------- Frage ---------- */
.q-media{border-radius:12px; overflow:hidden; margin:0 0 14px; background:var(--navy)}
.q-media.ratio-169{aspect-ratio:16/9}
.q-media.ratio-11{aspect-ratio:1/1}
.q-media img,.q-media video{width:100%; height:100%; object-fit:cover}
.q-text{font-size:1.18rem; font-weight:800; color:var(--navy); line-height:1.35; margin-bottom:16px}
.q-points{display:inline-flex; align-items:center; gap:6px; background:#fdf6e6; color:#8a6510;
  border:1px solid #f0dfae; font-weight:800; font-size:.78rem; padding:4px 10px; border-radius:99px; margin-bottom:10px}

/* Auswahl-Buttons */
.opts{display:grid; gap:10px}
.opts.grid2{grid-template-columns:1fr 1fr}
.opt{position:relative; padding:16px 12px; border-radius:14px; border:2px solid var(--muted);
  background:#fff; font-weight:700; color:var(--ink); text-align:center; min-height:64px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s, opacity .3s, transform .12s}
.opt:active{transform:scale(.97)}
.opt.sel{border-color:var(--navy); background:#eaf0f7; color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--navy)}
.opt.correct{border-color:var(--ok); background:var(--ok-soft); color:var(--ok);
  animation:blink .8s ease 2}
.opt.wrong{border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}
.opt.hidden5050{opacity:.18; pointer-events:none; filter:grayscale(1)}
.opt .pct{position:absolute; left:8px; right:8px; bottom:5px; height:5px; border-radius:99px;
  background:rgba(3,41,80,.12); overflow:hidden}
.opt .pct > i{display:block; height:100%; background:var(--red); border-radius:99px; transition:width .6s}
.opt .pct-n{position:absolute; top:5px; right:9px; font-size:.7rem; color:var(--red); font-weight:800}
@keyframes blink{0%,100%{filter:none}50%{filter:brightness(1.28)}}

/* Sortieren */
.sort-list{display:grid; gap:8px}
.sort-item{display:flex; align-items:center; gap:10px; background:#fff; border:2px solid var(--muted);
  border-radius:12px; padding:10px 10px 10px 14px; font-weight:700; user-select:none;
  transition:box-shadow .15s, border-color .15s}
.sort-item.drag{border-color:var(--navy); box-shadow:0 8px 20px rgba(3,41,80,.18); opacity:.95}
.sort-item .grip{color:var(--muted); font-size:1.2rem; touch-action:none; cursor:grab; padding:4px}
.sort-item .txt{flex:1; min-width:0}
.sort-item .updown{display:flex; flex-direction:column; gap:2px}
.sort-item .updown button{border:none; background:#eef2f6; color:var(--navy); border-radius:8px;
  width:34px; height:26px; font-size:.8rem; font-weight:800}
.sort-num{width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-size:.75rem; font-weight:800; flex:none}
.sort-item.pos-ok{border-color:var(--ok); background:var(--ok-soft)}
.sort-item.pos-bad{border-color:var(--bad); background:var(--bad-soft)}

/* Audio */
.audio-box{display:flex; align-items:center; gap:14px; background:#eaf0f7; border-radius:14px;
  padding:14px; margin-bottom:14px}
.audio-play{width:58px; height:58px; border-radius:50%; border:none; background:var(--red);
  color:#fff; font-size:1.35rem; display:grid; place-items:center; flex:none;
  box-shadow:0 4px 12px rgba(181,31,42,.35)}
.audio-play:active{transform:scale(.93)}
.audio-meter{flex:1; display:flex; align-items:flex-end; gap:3px; height:34px}
.audio-meter i{flex:1; background:var(--navy); border-radius:3px; height:20%; opacity:.35; transition:height .12s}
.audio-box.playing .audio-meter i{animation:eq .7s ease-in-out infinite alternate; opacity:1}
.audio-meter i:nth-child(2n){animation-delay:.15s}
.audio-meter i:nth-child(3n){animation-delay:.28s}
@keyframes eq{from{height:15%}to{height:95%}}

/* Jahres-Hinweise */
.hint-card{background:#eaf0f7; border-left:4px solid var(--navy); border-radius:10px;
  padding:11px 13px; margin-bottom:8px; font-weight:600; animation:rise .3s ease both}
.hint-pts{display:flex; align-items:center; justify-content:space-between; margin:10px 0 6px;
  font-size:.85rem; font-weight:800; color:var(--navy)}
.hint-pts .val{color:var(--gold); text-shadow:0 1px 0 #fff; font-size:1.05rem}

/* Joker */
.jokers{display:flex; gap:10px; margin-top:14px}
.joker{flex:1; border:2px dashed var(--red); background:#fff; color:var(--red); border-radius:12px;
  padding:10px 8px; font-weight:800; font-size:.85rem; display:flex; flex-direction:column; gap:2px; align-items:center}
.joker small{font-weight:600; color:var(--ink-soft); font-size:.68rem}
.joker:disabled{border-color:var(--muted); color:var(--muted)}

/* Auflösung */
.expl{margin-top:14px; background:#fdf6e6; border:1px solid #f0dfae; border-radius:12px;
  padding:12px 14px; font-size:.92rem; animation:rise .35s ease both}
.expl b{color:#8a6510}
.reveal-ok{color:var(--ok); font-weight:800}
.reveal-bad{color:var(--bad); font-weight:800}

/* ---------- Fußnavigation ---------- */
.footnav{position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-top:1.5px solid var(--muted); padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.footnav-inner{max-width:560px; margin:0 auto; display:flex; gap:10px}
.footnav .btn{margin:0}
.footnav .btn.back{flex:0 0 auto; width:auto; padding:15px 16px; background:transparent;
  color:var(--navy); border:2px solid var(--muted)}
.footnav .btn.next{flex:1}

/* ---------- Preload ---------- */
.preload-ring{width:120px;height:120px; margin:26px auto 18px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:1.25rem; color:var(--navy);
  background:conic-gradient(var(--red) calc(var(--p,0)*1%), var(--muted) 0)}
.preload-ring > span{width:92px;height:92px;border-radius:50%;background:var(--card);
  display:grid;place-items:center}

/* ---------- Runden-Übergang / Finale ---------- */
.round-badge{width:86px;height:86px;border-radius:50%; margin:8px auto 14px;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  font-size:1.9rem; font-weight:800; box-shadow:0 0 0 7px #eaf0f7, 0 0 0 9px var(--red)}
.xp-big{font-size:3rem; font-weight:800; color:var(--navy); letter-spacing:-.02em}
.xp-big small{font-size:1rem; color:var(--gold); vertical-align:super; font-weight:800}
.rank-pill{display:inline-block; background:var(--red); color:#fff; font-weight:800;
  border-radius:99px; padding:7px 18px; margin-top:8px}

/* Leaderboard */
.board{list-style:none; margin:0; padding:0}
.board li{display:flex; align-items:center; gap:12px; padding:11px 6px;
  border-bottom:1px solid #edf0f3; font-weight:700}
.board .pos{width:32px; height:32px; border-radius:50%; background:#eaf0f7; color:var(--navy);
  display:grid; place-items:center; font-size:.85rem; font-weight:800; flex:none}
.board li:nth-child(1) .pos{background:var(--gold); color:#fff}
.board li:nth-child(2) .pos{background:#b9c2cc; color:#fff}
.board li:nth-child(3) .pos{background:#c98a4b; color:#fff}
.board .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.board .pt{color:var(--navy)}
.board li.me{background:#fdf6e6; border-radius:10px}

/* ---------- Modal ---------- */
.modal-back{position:fixed; inset:0; background:rgba(3,20,40,.55); z-index:50;
  display:grid; place-items:center; padding:20px; animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.modal{background:#fff; border-radius:var(--radius); padding:22px 18px; max-width:420px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h2{margin-top:0}
.modal .row{display:flex; gap:10px; margin-top:16px}
.modal .row .btn{margin:0}

#confetti{position:fixed; inset:0; pointer-events:none; z-index:60}

@media (max-width:390px){ .opts.grid2{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* Zugang zu veröffentlichten Ranglisten, wenn gerade kein Quiz läuft */
.board-links{margin-top:20px; border-top:1px solid var(--line); padding-top:16px}
.board-links .btn.sub{border:1px solid var(--line); border-radius:12px; margin-bottom:8px; width:100%}

/* ---------- Verbindungsanzeige ---------- */
#netBadge{position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:80;
  padding:7px 15px; border-radius:99px; font-size:.78rem; font-weight:700; color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.2); max-width:92vw; text-align:center}
#netBadge.warn{background:#c8891b}
#netBadge.bad{background:var(--red)}

/* ---------- Tastatur offen: Fußleiste ausblenden ---------- */
body.kb-open .footnav{display:none}
body.kb-open #app{padding-bottom:24px}

/* ---------- Warten auf Auflösung ---------- */
.wait-box{background:rgba(3,41,80,.05); border:1.5px dashed var(--muted); border-radius:14px;
  padding:14px 16px; margin-top:18px; text-align:left}
.wait-box b{color:var(--navy)}
.wait-box p{margin:6px 0 0; font-size:.9rem; color:var(--ink-soft)}

/* ---------- Persönliche Auflösung ---------- */
.res-summary{display:flex; gap:10px; margin:6px 0 18px}
.res-summary > div{flex:1; background:var(--navy); color:#fff; border-radius:12px; padding:12px 8px; text-align:center}
.res-summary span{display:block; font-size:1.35rem; font-weight:800; line-height:1.1}
.res-summary small{font-size:.68rem; opacity:.75; letter-spacing:.04em; text-transform:uppercase}
.res-q{border-radius:14px; padding:13px 15px; margin-bottom:10px; border-left:5px solid var(--muted);
  background:#fff; box-shadow:0 1px 4px rgba(3,41,80,.07)}
.res-q.good{border-left-color:#2f9e52; background:rgba(47,158,82,.05)}
.res-q.part{border-left-color:#c8891b; background:rgba(200,137,27,.05)}
.res-q.bad{border-left-color:var(--red); background:rgba(181,31,42,.04)}
.res-head{display:flex; align-items:center; gap:9px; margin-bottom:5px}
.res-ico{font-size:1.05rem; font-weight:800}
.res-q.good .res-ico{color:#2f9e52} .res-q.part .res-ico{color:#c8891b} .res-q.bad .res-ico{color:var(--red)}
.res-nr{font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.res-pts{margin-left:auto; font-weight:800; font-size:.85rem; color:var(--navy)}
.res-text{font-weight:700; margin-bottom:8px; line-height:1.35}
.res-line{font-size:.9rem; margin-bottom:3px}
.res-line b{color:var(--ink-soft); font-weight:700}
.res-expl{margin-top:7px; font-size:.86rem; background:rgba(232,178,58,.14); border-radius:9px; padding:8px 10px}
.res-meta{margin-top:5px; font-size:.76rem; color:var(--ink-soft)}