/* tecis Designsprache: Blau 00325b · Himmelblau 009ee3 · Limette d3d800 · Sand cbcdb9 · Arial
   Titel-/Schlussbildschirme = Blau-Vollfläche (body), Inhaltsbildschirme = Weiß (body.light) mit Headline-Motiv */
:root{--blau:#00325b;--himmel:#009ee3;--lime:#d3d800;--sand:#cbcdb9;--sandh:#F4F4EE;--text:#3C3C3B;--ok:#2E7D32;--bad:#C0392B;
--bg:var(--blau);--fg:#fff;--mut:var(--sand);--wm:#fff;--track:#ffffff40}
body.light{--bg:#fff;--fg:var(--text);--mut:#6b6b69;--wm:var(--blau);--track:var(--sand)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh;background:var(--bg);color:var(--fg)}
h1,h2,h3,p{margin:0}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:.9em 1.5em;font-weight:700;color:var(--blau);background:var(--lime)}
button:disabled{opacity:.4;cursor:default}
button.ghost{background:transparent;color:#fff;border:2px solid #fff}
body.light button.ghost{color:var(--blau);border-color:var(--blau)}
input{font:inherit;width:100%;padding:1em;border-radius:10px;border:2px solid #fff;background:#fff;color:var(--text);font-size:1.1rem}
input:focus{outline:none;border-color:var(--lime)}

/* Headline-Motiv: Himmelblau-Label + Limette-Titelbox */
.label{display:inline-block;background:var(--himmel);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:.45em .9em}
.tbox{display:block;width:fit-content;background:var(--lime);color:var(--blau);font-weight:700;line-height:1.25;padding:.15em .5em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.motiv{display:grid;justify-items:start}
.wm{font-weight:700;font-style:italic;font-size:1.6rem;letter-spacing:-.02em;color:var(--wm)}
.claim,.sub{color:var(--mut)}
.claim{font-size:1.1rem}

.bar{height:10px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;background:var(--lime);width:100%}
body.light .bar i{background:var(--himmel)}

.board{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.board li{display:flex;align-items:center;gap:.8rem;background:var(--sandh);color:var(--blau);border-radius:12px;padding:.6em 1em;font-weight:700}
.board li span{flex:1}
.board li em{font-style:normal;background:var(--blau);color:#fff;border-radius:50%;width:1.9em;height:1.9em;display:grid;place-items:center;font-size:.9em}
.board li b{font-size:1.1em}
body:not(.light) .board li em{background:var(--himmel)}

.shape{display:inline-block;width:1.4em;text-align:center}
.opt0{background:var(--himmel);color:#fff}
.opt1{background:var(--lime);color:var(--blau)}
.opt2{background:var(--blau);color:#fff}
.opt3{background:var(--sand);color:var(--blau)}

/* Moderator */
.host{display:grid;grid-template-rows:auto 1fr auto auto;min-height:100vh;padding:2vw 4vw 1.2vw;gap:2vh}
.host header{display:flex;justify-content:space-between;align-items:center}
.host main{display:flex;flex-direction:column;justify-content:center;gap:3vh}
.host .title{font-size:clamp(2rem,4.4vw,4rem)}
.qt{font-size:clamp(1.6rem,3.2vw,2.9rem)}
.qhead{display:flex;justify-content:space-between;align-items:flex-end;gap:2vw}
.timer{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:700;color:var(--blau);white-space:nowrap}
.lobby{display:grid;grid-template-columns:auto 1fr;gap:4vw;align-items:center}
.qr{background:#fff;padding:18px;border-radius:16px;line-height:0}
.qr svg{width:min(28vw,380px);height:auto}
.url{font-size:1.1rem;color:var(--sand);margin-top:.6rem;word-break:break-all}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:1vw;margin:2vh 0}
.lv{background:var(--sandh);color:var(--blau);border-radius:14px;padding:1em 1.1em;text-align:left;border:4px solid transparent;font-weight:400;display:grid;gap:.15em}
.lv .n{font-size:2.2rem;font-weight:700;color:var(--himmel);line-height:1}
.lv b{font-size:1.25rem}
.lv small{color:var(--text);font-size:.95rem}
.lv.sel{background:var(--lime);border-color:#fff}
.lv.sel .n{color:var(--blau)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chips span{background:#fff;color:var(--blau);padding:.45em 1em;border-radius:99px;font-weight:700;animation:pop .3s}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.count{font-size:clamp(5rem,14vw,11rem);font-weight:700;color:var(--himmel);line-height:1}
.readbox{display:flex;align-items:center;gap:3vw}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:1.2vw}
.opts div{border-radius:14px;padding:1.1em 1.3em;font-size:clamp(1.1rem,2vw,1.9rem);font-weight:700;position:relative}
.opts div.dim{opacity:.3}
.opts div.right{outline:6px solid var(--ok);outline-offset:2px}
.opts div small{position:absolute;right:1em;top:50%;transform:translateY(-50%);font-size:1.3em}
.opts.compact div{padding:.55em 1.1em;font-size:clamp(1rem,1.7vw,1.5rem)}
.opts.compact{gap:.6vw}
.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:3vw;align-items:start}
.explain{color:var(--text);font-size:1.3rem;margin-top:.4rem}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:2vw;height:36vh}
.podium div{width:16vw;border-radius:14px 14px 0 0;text-align:center;padding-top:1rem;font-weight:700;background:var(--himmel);color:#fff}
.podium .p1{height:100%;background:var(--lime);color:var(--blau)}.podium .p2{height:72%}.podium .p3{height:52%;background:var(--sand);color:var(--blau)}
.podium small{display:block;font-weight:400}
.host footer{display:flex;gap:1rem;justify-content:flex-end;align-items:center}
.legal{color:var(--mut);font-size:.8rem;text-align:left}

/* Teilnehmer */
.play{max-width:520px;margin:0 auto;min-height:100vh;padding:20px 16px;display:flex;flex-direction:column;gap:16px}
.play .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.play .center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:center;align-items:center}
.play .center>*{max-width:100%}
.play .big{font-size:1.8rem;font-weight:700}
body.light .play .big{color:var(--blau)}
.pbtns{display:grid;gap:12px;flex:1}
.pbtns button{font-size:1.2rem;text-align:left;padding:1em 1.1em;border-radius:14px;min-height:74px;display:flex;align-items:center;gap:.6em}
.pbtns button:active{transform:scale(.98)}
.pq{font-size:1.2rem}
.pinfo{display:flex;justify-content:space-between;color:var(--mut)}
.pinfo #left{color:var(--blau);font-weight:700}
.card{background:var(--sandh);color:var(--blau);border-radius:16px;padding:20px;width:100%;display:grid;gap:8px}
.card .res{font-size:2rem;font-weight:700}
.card .res.ok{color:var(--ok)}.card .res.bad{color:var(--bad)}
.card .pts{font-size:1.5rem;font-weight:700;color:var(--blau)}
.card .sub{color:var(--text)}
.err{color:var(--lime);min-height:1.4em}
.stat{display:flex;justify-content:space-around;background:#fff;color:var(--blau);border-radius:14px;padding:14px;width:100%;margin-top:6px}
body.light .stat{background:var(--blau);color:#fff}
.stat div{display:grid;gap:2px}.stat b{font-size:1.6rem}.stat span{color:var(--text);font-size:.85rem}
body.light .stat span{color:var(--sand)}
.pcount{font-size:5rem;font-weight:700;color:var(--himmel);line-height:1}