@font-face{font-family:'Anton';src:url('assets/fonts/anton-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('assets/fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Archivo';src:url('assets/fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('assets/fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/space-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#0A1118; --panel:#111c28; --raise:#172637; --line:#22344a;
  --gold:#F4A300; --mustard:#E0AA2F; --gold-deep:#B97F12;
  --red:#E30514; --green:#2fae66;
  --bone:#F5F0E4; --ash:#9BA4AD; --ash-dim:#6C7681;
  --r:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(1200px 700px at 50% -10%,#16233322,#0000 60%),var(--ink);
  color:var(--bone);font-family:'Archivo',system-ui,sans-serif;min-height:100vh}
.mono{font-family:'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase}

/* topbar */
.topbar{display:flex;align-items:center;gap:24px;padding:14px 22px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(10,17,24,.92);backdrop-filter:blur(6px);z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:30px;width:auto}
.brand .sub{font-family:'Anton';font-size:20px;letter-spacing:.04em;color:var(--gold);text-transform:uppercase}
.tabs{display:flex;gap:6px;margin-left:8px}
.tabs button{font-family:'Space Mono';font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);background:transparent;border:1px solid transparent;padding:8px 16px;border-radius:8px;cursor:pointer}
.tabs button:hover{color:var(--bone)}
.tabs button.active{color:var(--ink);background:var(--gold);font-weight:700}
.tname{margin-left:auto;font-family:'Space Mono';font-size:12px;letter-spacing:.14em;color:var(--ash-dim);text-transform:uppercase}

main{max-width:1100px;margin:0 auto;padding:28px 22px 80px}
h2{font-family:'Anton';font-size:34px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:4px}
.hint{color:var(--ash);font-size:14px;margin-bottom:22px}
.gtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.gtab{font-family:'Space Mono';font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 17px;cursor:pointer;min-width:44px}
.gtab:hover{color:var(--bone);border-color:var(--gold-deep)}
.gtab.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
/* Turnierbaum */
.qual{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qchip{font-family:'Archivo';font-weight:600;font-size:14px;text-transform:uppercase;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.qchip .qg{font-family:'Space Mono';font-size:11px;color:var(--ash-dim);margin-left:5px;text-transform:none}
.qchip.wc{border-color:var(--gold-deep);background:#1a12060d}
.qchip.wc .qg{color:var(--gold)}
.match.tbd{opacity:.72}
.match.tbd .side{font-family:'Archivo';font-weight:800;text-transform:uppercase;font-size:16px;padding:10px 12px}
.tbd{color:var(--ash-dim);font-style:italic;font-weight:400;text-transform:none}
.head .rn{color:var(--gold)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--gold)}
.eyebrow{font-family:'Space Mono';letter-spacing:.24em;font-size:12px;color:var(--gold);text-transform:uppercase;margin-bottom:6px}

.card{background:linear-gradient(180deg,var(--panel),#0e1722);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}

label{display:block;font-family:'Space Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--ink);color:var(--bone);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;font-family:'Archivo';font-size:15px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:120px;resize:vertical;font-family:'Space Mono';font-size:13px;line-height:1.6}
.field{flex:1 1 180px}

button.btn{font-family:'Archivo';font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.03em;
  background:var(--gold);color:var(--ink);border:none;border-radius:9px;padding:12px 20px;cursor:pointer}
button.btn:hover{background:#ffb61e}
button.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
button.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
button.btn.sm{padding:8px 13px;font-size:12px}
button.btn.danger{background:transparent;color:var(--ash-dim);border:1px solid var(--line)}
button.btn.danger:hover{color:var(--red);border-color:var(--red)}

/* team list */
.teamlist{display:flex;flex-direction:column;gap:8px;margin-top:14px;max-height:420px;overflow:auto}
.team{display:flex;align-items:center;gap:12px;background:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.team .n{font-family:'Anton';color:var(--ash-dim);width:26px;text-align:center}
.team .tn{font-weight:800;text-transform:uppercase}
.team .pl{color:var(--ash);font-size:13px}
.team .sp{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.team.editing{align-items:center;flex-wrap:wrap}
.te-fields{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
.te-fields input{flex:1;min-width:130px;background:var(--panel);border:1px solid var(--line);color:var(--bone);border-radius:7px;padding:9px 11px;font-family:'Archivo';font-size:14px;font-weight:600;outline:none}
.te-fields input.te-name{font-weight:800;text-transform:uppercase}
.te-fields input:focus{border-color:var(--gold)}
.team.incomplete{border-color:var(--red)}
.tag-inc{display:inline-block;margin-left:8px;font-family:'Space Mono';font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);padding:2px 6px;border-radius:4px;vertical-align:middle}
.warnbox{background:rgba(224,170,47,.1);border:1px solid var(--gold-deep);border-radius:9px;padding:10px 13px;margin:4px 0 12px;font-size:13px;color:var(--bone);line-height:1.5}
.warnbox.err{background:rgba(227,5,20,.12);border-color:var(--red)}
.warnbox ul{margin:6px 0 0;padding-left:18px}
.warnbox li{margin:2px 0}
.gtab.mama{border-color:var(--gold-deep)}
.gtab.mama.active{background:var(--red);border-color:var(--red);color:#fff}
.count{font-family:'Anton';color:var(--gold);font-size:20px}

/* matches */
.groupblock{margin-bottom:26px}
.groupblock h3{font-family:'Anton';font-size:22px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;letter-spacing:.03em}
.match{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:10px}
.match.done{border-color:#2a3d2f}
.match .head{display:flex;align-items:center;gap:10px;font-family:'Space Mono';font-size:11px;letter-spacing:.1em;color:var(--ash-dim);text-transform:uppercase;margin-bottom:10px}
.match .head .tk{margin-left:auto;color:var(--gold-deep)}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.side{display:flex;flex-direction:column;gap:8px}
.side.b{text-align:right}
.pick{font-family:'Archivo';font-weight:800;text-transform:uppercase;font-size:16px;background:var(--ink);
  border:1px solid var(--line);color:var(--bone);border-radius:9px;padding:10px 12px;cursor:pointer;text-align:inherit}
.pick:hover{border-color:var(--gold)}
.pick.win{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.vs{font-family:'Anton';color:var(--ash-dim);font-size:18px}
.side .pls{font-size:13px;color:var(--ash);line-height:1.55;margin-top:3px}
.side.b .pls{text-align:right}
.pickhint{text-align:center;font-family:'Space Mono';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:12px;opacity:.92}
.pickhint.hide{display:none}
.reds{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.reds .rt{font-family:'Space Mono';font-size:11px;letter-spacing:.12em;color:var(--red);text-transform:uppercase;margin-bottom:8px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl-red{display:flex;align-items:center;gap:8px;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.pl-red .pn{font-size:14px;flex:1;line-height:1.25;padding-right:6px;word-break:break-word}
.pl-red .pt{color:var(--ash-dim);font-size:11px}
.step button.plus{border-color:var(--red);color:var(--red);font-weight:700}
.step button.plus:hover{border-color:var(--red);background:rgba(227,5,20,.14)}
.step button.fired{animation:roteFired .5s ease}
@keyframes roteFired{0%{transform:scale(1)}30%{transform:scale(1.28);box-shadow:0 0 0 4px rgba(227,5,20,.35)}100%{transform:scale(1)}}
.modal-res .mteam{color:var(--ash);font-weight:700;text-transform:none}
.step{display:flex;align-items:center;gap:6px}
.step button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--raise);color:var(--bone);font-size:16px;cursor:pointer;line-height:1}
.step button:hover{border-color:var(--gold)}
.step .v{font-family:'Anton';min-width:20px;text-align:center;color:var(--gold)}
.match .act{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
/* Rote: zwei Spalten nach Team (links Team A, rechts Team B) */
.reds .pcols{display:grid;grid-template-columns:1fr 1fr;gap:6px 36px;position:relative}
.reds .pcols::before{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;border-radius:2px;background:var(--gold);opacity:.65}
.rteam{color:var(--ash-dim);font-weight:400}
.res-reds .rteam,.modal-reds .rteam{color:var(--ash)}
.pcol-h{font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #1a2a3a}
.pcol.b .pcol-h{text-align:right}
.pcol .pl-red{margin-bottom:8px}
.btn.save:disabled{opacity:.4;cursor:not-allowed}
.btn.save:disabled:hover{background:var(--gold)}
/* geschlossenes Spiel: Zusammenfassung */
.summary{padding:4px 2px}
.res-line{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.res-line .wname{font-family:'Archivo';font-weight:800;text-transform:uppercase;font-size:19px;color:var(--gold)}
.res-line .beats{font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim)}
.res-line .lname{font-family:'Archivo';font-weight:800;text-transform:uppercase;font-size:19px;color:var(--ash)}
.res-reds{font-family:'Space Mono';font-size:12px;color:var(--red);margin-top:8px;letter-spacing:.03em}
.res-reds b{color:var(--bone)}
.res-reds.none{color:var(--ash-dim)}

/* tables */
.tblwrap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stand{width:100%;border-collapse:collapse}
.stand th{font-family:'Space Mono';font-size:11px;letter-spacing:.1em;color:var(--ash-dim);text-transform:uppercase;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.stand td{padding:9px 8px;border-bottom:1px solid #1a2a3a}
.stand .pl{font-family:'Anton';color:var(--ash);text-align:center;width:34px}
.stand .tm{font-weight:800;text-transform:uppercase}
.stand .num{font-family:'Anton';text-align:center;width:52px}
.stand tr.q{background:#16233333}
.stand tr.q .pl,.stand tr.q .num.pts{color:var(--gold)}
.tie{display:inline-block;margin-left:6px;font-family:'Space Mono';font-size:9px;letter-spacing:.1em;color:var(--ink);background:var(--mustard);padding:2px 5px;border-radius:4px}
.via{display:inline-block;margin-left:6px;font-family:'Space Mono';font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);border:1px solid var(--line);padding:2px 5px;border-radius:4px}
.king td{padding:9px 8px;border-bottom:1px solid #1a2a3a}
.king .r{font-family:'Anton';text-align:center;width:34px;color:var(--ash)}
.king tr:nth-child(-n+3) .r{color:var(--gold)}
.king .reds{font-family:'Anton';color:var(--red);text-align:center;width:56px;border:0;padding:9px 8px}
.badge-empty{color:var(--ash-dim);font-size:14px;padding:20px 0}
/* Bestätigungs-Modal */
.modal-ov{position:fixed;inset:0;background:rgba(5,9,14,.74);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:linear-gradient(180deg,#152232,#0e1722);border:1px solid var(--gold-deep);border-radius:16px;padding:26px 28px;max-width:470px;width:100%;box-shadow:0 22px 60px #000a}
.modal-h{font-family:'Anton';font-size:24px;text-transform:uppercase;letter-spacing:.02em;color:var(--gold);margin-bottom:14px}
.modal-res{font-size:17px;line-height:1.5;margin-bottom:14px}
.modal-res .mw{font-weight:800;text-transform:uppercase;color:var(--gold)}
.modal-res .ml{font-weight:800;text-transform:uppercase;color:var(--ash)}
.modal-reds{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.modal-reds .mrt{font-family:'Space Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.modal-reds .mrl{font-size:15px;padding:3px 0}
.modal-reds .mrl b{font-family:'Anton';color:var(--red)}
.modal-none{color:var(--ash-dim);font-size:15px;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.modal-act{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.modal.wide{max-width:560px}
/* Tabellenkopf mit Entscheidungs-Button */
.gb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gb-head h3{margin:0}
.btn.tb-open{background:var(--red);border-color:var(--red);color:#fff}
.btn.tb-open:hover{filter:brightness(1.08)}
.btn.ghost.tb-open{background:transparent;color:var(--ash);border-color:var(--line)}
.btn.ghost.tb-open:hover{border-color:var(--gold);color:var(--gold)}
/* Entscheidungsduell-Modal */
.tb-help{font-size:14px;line-height:1.5;color:var(--ash);margin-bottom:14px}
.tb-help b{color:var(--bone)}
.tb-modes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.tb-lab{font-family:'Space Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim)}
.tb-mode{padding:6px 11px;border-radius:7px;border:1px solid var(--line);background:var(--raise);color:var(--bone);font-size:12px;cursor:pointer}
.tb-mode:hover{border-color:var(--gold);color:var(--gold)}
.tb-grp{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.tb-grp-h{font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-bottom:10px}
.tb-grp-h b{color:var(--gold)}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.tb-row+.tb-row{border-top:1px solid rgba(255,255,255,.05)}
.tb-name{font-family:'Archivo';font-weight:700;font-size:16px;color:var(--bone);flex:1;word-break:break-word}
.tb-step{display:flex;align-items:center;gap:8px}
.tb-step button{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--raise);color:var(--bone);font-size:18px;cursor:pointer;line-height:1}
.tb-step button:hover{border-color:var(--gold)}
.tb-v{font-family:'Anton';font-size:20px;min-width:26px;text-align:center;color:var(--gold)}
.tb-sub{font-family:'Space Mono';font-size:11px;letter-spacing:.05em;color:var(--ash-dim);font-weight:400;white-space:nowrap}
.card.wc-warn{border-color:var(--red);box-shadow:0 0 0 1px rgba(227,5,20,.25)}
/* Schiri-Codes / QR-Übersicht (druckbar) */
.codesheet{position:fixed;inset:0;background:#fff;color:#0A1118;z-index:200;overflow:auto;padding:22px}
.codesheet .cs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:'Archivo'}
.codesheet .cs-bar b{font-family:'Anton';font-size:20px;text-transform:uppercase}
.cs-actions{display:flex;gap:8px}
.cs-hint{color:#444;font-size:13px;margin:6px 0 16px;font-family:'Archivo'}
.cs-hint b{color:#0A1118}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cs-card{border:1px solid #ccd;border-radius:10px;padding:12px;text-align:center;break-inside:avoid}
.cs-label{font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#b97f12}
.cs-teams{font-family:'Archivo';font-weight:800;font-size:14px;margin:4px 0 8px;line-height:1.25}
.cs-vs{color:#999;margin:0 6px;font-weight:400}
.cs-qr{width:150px;height:150px;margin:0 auto}
.cs-qr svg{width:100%;height:100%;display:block}
.cs-code{font-family:'Space Mono';font-weight:700;font-size:26px;letter-spacing:.22em;margin-top:6px;color:#0A1118}
.cs-note{font-family:'Archivo';font-size:10px;color:#888;margin-top:2px}
@media print{
  body>*:not(.codesheet){display:none!important}
  .codesheet{position:static;padding:0}
  .cs-bar,.cs-hint{display:none!important}
}
@media(max-width:820px){.grid2,.tblwrap{grid-template-columns:1fr}.duel{grid-template-columns:1fr}.side.b{text-align:left}.reds .pcols{grid-template-columns:1fr}.reds .pcols::before{display:none}.pcol.b .pcol-h{text-align:left}}