@font-face{font-family:'Bodega Sans';src:url('fonts/BodegaSans-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:block}
@font-face{font-family:'Bodega Sans';src:url('fonts/BodegaSans-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:block}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body.nocursor,body.nocursor *{cursor:none!important}
#viewport{position:fixed;inset:0;overflow:hidden;background:#000}

/* ---------- Bühne ---------- */
#stage{--accent:#ffc20f;position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;color:#fff;font-family:'Bodega Sans','Arial Narrow',Impact,sans-serif;font-weight:900;background:#1a4fd6;user-select:none;-webkit-user-select:none}
.st-tex{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.st-header{position:absolute;left:0;right:0;top:0;height:var(--hh);display:flex;align-items:center;justify-content:center;gap:calc(var(--hfs)*.3);padding-top:calc(var(--hh)*.06)}
.st-fox{height:calc(var(--hfs)*.95);width:auto;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.st-title{display:flex;align-items:center;white-space:nowrap;font-size:var(--hfs);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.st-title span{display:block;line-height:1.25}
.st-t1{color:#fff}
.st-dot{color:var(--accent);padding:0 .28em}
.st-t2{color:var(--accent)}
.st-groups{position:absolute;display:grid}
.st-box{position:relative;display:flex;border:1.5px dashed rgba(255,255,255,.5);border-radius:var(--rad);background:rgba(8,14,46,.2);overflow:hidden;min-width:0;min-height:0}
.st-letter{flex:none;color:var(--accent);text-shadow:0 3px 8px rgba(0,0,0,.4);white-space:nowrap}
.st-mark{position:relative;width:var(--logo);height:var(--logo);display:grid;place-items:center;flex:none}
.st-ph{width:var(--ph);height:var(--ph);border-radius:50%;background:rgba(255,255,255,.13);border:2px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:calc(var(--ph)*.5);line-height:1;color:rgba(255,255,255,.65);box-shadow:inset 0 2px 6px rgba(0,0,0,.15)}
.st-ph span{display:block;transform:translateY(-.03em)}
.st-logo{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 2.5px rgba(255,255,255,.6)) drop-shadow(0 5px 9px rgba(0,0,0,.5))}
.st-logo.pending{visibility:hidden}
/* Abzeichen für Vereine mit mehreren Mannschaften (I, II) */
.st-mark,.rv-fly{container-type:size}
.st-badge{position:absolute;right:-3%;bottom:-2%;z-index:2;min-width:38%;height:38%;padding:0 7cqw;border-radius:999px;background:var(--accent);color:#16101a;border:max(1.5px,3.2cqw) solid #fff;display:grid;place-items:center;font-size:25cqw;line-height:1;letter-spacing:.03em;text-shadow:none;box-shadow:0 2px 6px rgba(0,0,0,.5);box-sizing:border-box}
.st-badge span{display:block;transform:translateY(.04em)}
.st-name{font-size:var(--nfs);line-height:1.08;text-transform:uppercase;color:#fff;letter-spacing:.01em;text-shadow:0 2px 5px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-slot.next .st-ph{border-color:var(--accent);color:var(--accent);background:rgba(255,255,255,.16);animation:phpulse 1.6s ease-in-out infinite}
#stage.no-next .st-slot.next .st-ph{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.65);background:rgba(255,255,255,.13);animation:none}
@keyframes phpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,0),0 0 8px var(--accent)}50%{transform:scale(1.07);box-shadow:0 0 0 calc(var(--ph)*.08) rgba(255,255,255,.12),0 0 calc(var(--ph)*.45) var(--accent)}}

/* Layout: Gruppen als Zeilen (wie Beispiel) */
.lay-rows .st-box{flex-direction:row;align-items:center}
.lay-rows .st-letter{width:var(--lw);text-align:center;font-size:var(--lfs);line-height:1}
.lay-rows .st-slots{display:flex;align-items:center;height:100%}
.lay-rows .st-slot{width:var(--pitch);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--nfs)*.35)}
.lay-rows .st-name{width:calc(var(--pitch) - 6px);text-align:center;min-height:calc(var(--nfs)*2.16)}
/* Layout: Gruppen als Spalten */
.lay-columns .st-box{flex-direction:column;align-items:stretch}
.lay-columns .st-letter{height:var(--lh);line-height:var(--lh);text-align:center;font-size:var(--lfs);text-transform:uppercase;letter-spacing:.02em;border-bottom:1.5px dashed rgba(255,255,255,.32)}
.lay-columns .st-slots{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(var(--pitch)*.08);min-height:0}
.lay-columns .st-slot{height:var(--pitch);display:flex;flex-direction:row;align-items:center;gap:calc(var(--logo)*.2);padding:0 calc(var(--logo)*.22)}
.lay-columns:not(.with-names) .st-slot{justify-content:center}
.lay-columns .st-name{flex:1;min-width:0;text-align:left}

.st-shine{position:absolute;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}

/* Aufdecken */
.rv{position:absolute;inset:0;z-index:20;pointer-events:none}
.rv-dim{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(12,10,26,.55),rgba(10,6,18,.9));opacity:0}
.rv-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--rv-gap)}
.rv-box{position:relative;width:var(--rv-s);height:var(--rv-s);flex:none}
.rv-rays{position:absolute;left:50%;top:50%;width:calc(var(--rv-s)*2.5);height:calc(var(--rv-s)*2.5);margin:calc(var(--rv-s)*-1.25) 0 0 calc(var(--rv-s)*-1.25);opacity:0}
.rv-rays-in{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(60,120,255,.45) 0deg 7deg,rgba(60,120,255,0) 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 16%,transparent 68%);mask:radial-gradient(circle,#000 16%,transparent 68%);animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rv-flash{position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(120,170,255,.4) 32%,rgba(120,170,255,0) 64%);opacity:0}
.rv-text{max-width:var(--rv-tw);text-wrap:balance}
.rv-kicker{color:var(--accent);font-size:var(--rv-k);line-height:1;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 3px 10px rgba(0,0,0,.45)}
.rv-name{color:#fff;font-size:var(--rv-n);line-height:1;text-transform:uppercase;text-shadow:0 3px 12px rgba(0,0,0,.55);margin-top:.12em}
.rv-fly{position:absolute;left:0;top:0;z-index:21;transform-origin:0 0;display:none;pointer-events:none}
.rv-img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 6px rgba(255,255,255,.5)) drop-shadow(0 12px 22px rgba(0,0,0,.55))}
.fx{position:absolute;inset:0;z-index:22;pointer-events:none}
.fx-ring{position:absolute;border-radius:50%;border-style:solid;border-color:var(--accent);box-shadow:0 0 18px var(--accent),inset 0 0 10px var(--accent)}
.fx-dot{position:absolute;border-radius:50%;box-shadow:0 0 6px rgba(255,255,255,.8)}

/* Bedien-Elemente im Ausgabefenster */
#hud{position:fixed;right:14px;top:14px;z-index:55;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .25s;pointer-events:none;font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#fff}
#hud.show{opacity:1;pointer-events:auto}
#hud .pill{border:0;border-radius:999px;padding:9px 14px;background:rgba(10,12,26,.88);color:#fff;font:inherit;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#hud button.pill{cursor:pointer}
#hud kbd{font:inherit;opacity:.6;margin-left:4px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:rgba(10,12,26,.92);color:#fff;padding:11px 18px;border-radius:10px;font:500 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90vw;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.5)}
#toast.show{opacity:1}
#net{position:fixed;right:8px;bottom:8px;z-index:56;width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px #ef4444;animation:netblink 1s steps(2) infinite}
@keyframes netblink{50%{opacity:.25}}

/* Ergebnis-Bild (index.html?bild=1) */
#bild{position:fixed;inset:0;z-index:80;background:#0b0e1a;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-align:center;overflow:auto}
#bild img{max-width:100%;max-height:70vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#bild a{display:inline-block;background:#ffc20f;color:#111;font-weight:700;text-decoration:none;padding:12px 20px;border-radius:12px}
#bild p{margin:0;color:#aab3cc;max-width:520px}