/* PUNCTUM – Gestaltung nach medienwerkstatt006 (Nacht #050508, Kalk #e8e0d4, Cyan #00e5ff, Space Mono / Unbounded) */
@font-face{font-family:"Unbounded";font-weight:900;src:url(../fonts/unbounded-latin-900-normal.ttf) format("truetype")}
@font-face{font-family:"Unbounded";font-weight:300;src:url(../fonts/unbounded-latin-300-normal.ttf) format("truetype")}
@font-face{font-family:"Space Mono";font-weight:400;src:url(../fonts/space-mono-latin-400-normal.ttf) format("truetype")}
@font-face{font-family:"Space Mono";font-weight:700;src:url(../fonts/space-mono-latin-700-normal.ttf) format("truetype")}
:root{--bg:#050508;--fg:#e8e0d4;--fg2:rgba(232,224,212,.68);--fg3:rgba(232,224,212,.36);--cy:#00e5ff;--mg:#ff2d55;--ye:#ffe600;--brass:#b4884a;
--mono:"Space Mono",ui-monospace,monospace;--disp:"Unbounded",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.6 var(--mono);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}
canvas#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
a{color:var(--cy)}
.mono{font-family:var(--mono)}.small{font-size:12px;letter-spacing:.06em;color:var(--fg2)}
.kick{font:700 11px/1.4 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--cy)}
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:20;background:radial-gradient(ellipse at center,rgba(5,5,8,.72),rgba(5,5,8,.94))}
.screen.on{display:flex}
#load .lw{text-align:center}
#load .ttl,h1{font:900 clamp(44px,9.4vw,150px)/.86 var(--disp);letter-spacing:-.02em;margin:14px 0 8px}
.bar{width:min(420px,70vw);height:2px;background:rgba(232,224,212,.15);margin:26px auto 12px}.bar i{display:block;height:100%;width:0;background:var(--cy);transition:width .2s}
.sw{max-width:980px;padding:5vh 6vw;max-height:100vh;overflow-y:auto;overflow-x:hidden}
.sub{font:300 clamp(16px,2vw,24px)/1.35 var(--disp);margin-bottom:22px}
.lead{max-width:760px;color:var(--fg2);border-left:3px solid var(--mg);padding-left:16px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}
.btn{font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);background:transparent;border:1px solid rgba(232,224,212,.35);padding:16px 20px;cursor:pointer;min-height:48px}
.btn:hover,.btn:focus-visible{border-color:var(--cy);color:var(--cy);outline:none}
.btn.voll{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn.voll:hover,.btn.voll:focus-visible{background:var(--cy);border-color:var(--cy);color:var(--bg)}
.ctrl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;font-size:12.5px;color:var(--fg2);border-top:1px solid rgba(232,224,212,.12);padding-top:18px}
.ctrl b{display:block;color:var(--fg);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:700px){.ctrl{grid-template-columns:1fr}}
.foot{margin-top:24px}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#list{position:absolute;left:18px;top:16px;display:flex;flex-direction:column;gap:4px}
#list .it{font:700 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);display:flex;gap:8px;align-items:center}
#list .it i{font-style:normal;color:var(--fg3)}
#list .it.near{color:var(--fg)}#list .it.done{color:var(--cy)}#list .it.done i{color:var(--cy)}
#meter{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(520px,80vw);text-align:center;transition:opacity .4s}
#meter .lab{display:flex;justify-content:space-between;font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
#meter .track{height:3px;background:rgba(232,224,212,.15)}#meter .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mg),var(--ye),var(--cy))}
#mHint{margin-top:8px;min-height:1.6em}
#eyeh{position:absolute;right:18px;bottom:26px}
#eyeh b{color:var(--fg)}
#tools{position:absolute;right:14px;top:12px;display:flex;gap:6px;pointer-events:auto}
.ib{width:44px;height:44px;border:1px solid rgba(232,224,212,.25);background:rgba(5,5,8,.55);color:var(--fg);font:700 15px var(--mono);cursor:pointer}
.ib.on{border-color:var(--cy);color:var(--cy)}
#cross{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid rgba(232,224,212,.5);border-radius:50%}
#toast{position:absolute;left:50%;top:18%;transform:translateX(-50%);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cy);opacity:0;transition:opacity .4s;text-align:center;text-shadow:0 0 12px #000}
#toast.on{opacity:1}
/* Karte */
#card .cw{max-width:760px;max-height:92vh;overflow:auto;padding:34px 34px 30px;background:rgba(11,11,16,.94);border:1px solid rgba(232,224,212,.14);border-top:6px solid var(--cy);margin:20px}
#card h2{font:900 clamp(30px,5vw,58px)/1 var(--disp);margin:10px 0 8px;letter-spacing:-.01em}
#card .src{margin-bottom:14px;color:var(--brass)}
#card p{color:var(--fg2);font-size:14.5px}
/* Touch */
#touch{position:fixed;inset:0;z-index:11;pointer-events:none}
#joy{position:absolute;left:28px;bottom:90px;width:130px;height:130px;border-radius:50%;border:1px solid rgba(232,224,212,.3);pointer-events:auto;background:rgba(5,5,8,.25)}
#joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:rgba(232,224,212,.25);border:1px solid var(--fg)}
#tbtns{position:absolute;right:20px;bottom:90px;display:grid;grid-template-columns:repeat(2,64px);gap:10px;pointer-events:auto}
.tb{width:64px;height:64px;border-radius:50%;border:1px solid rgba(232,224,212,.35);background:rgba(5,5,8,.4);color:var(--fg);font-size:20px}
#attract{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:12;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2);animation:puls 2.4s ease-in-out infinite}
#attract b{color:var(--cy)}
@keyframes puls{50%{opacity:.35}}
body.kiosk{cursor:none}
@media (prefers-reduced-motion:reduce){#attract{animation:none}}

/* Atelier */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#atelier .aw{max-width:820px;max-height:94vh;overflow:auto;padding:30px 32px;background:rgba(11,11,16,.96);border:1px solid rgba(232,224,212,.14);border-top:6px solid var(--brass);margin:20px}
#atelier h2{font:900 clamp(26px,4vw,48px)/1 var(--disp);margin:10px 0 10px}
#atelier p{color:var(--fg2);font-size:13.5px}
.arow{display:flex;align-items:center;gap:14px;margin:14px 0}
.arow label{cursor:pointer}#aPrev{height:64px;border:1px solid rgba(232,224,212,.25)}
.akind{border:0;padding:0;margin:8px 0 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:700px){.akind{grid-template-columns:1fr}}
.akind label{display:block;border:1px solid rgba(232,224,212,.2);padding:12px;cursor:pointer;font-size:12px;color:var(--fg2)}
.akind label:has(input:checked){border-color:var(--cy);background:rgba(0,229,255,.06)}
.akind input{accent-color:var(--cy);margin-right:6px}.akind b{color:var(--fg);font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}.akind small{display:block;margin-top:4px}
#aStat{min-height:1.6em;color:var(--cy)}

.gesamt{display:inline-block;margin-top:22px;color:#050508;background:#e8e0d4;padding:8px 12px;border-left:5px solid #ff2d55;text-decoration:none;letter-spacing:.12em;text-transform:uppercase}.gesamt:hover{background:#00e5ff}.gesamt[hidden]{display:none}