@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
:root{
  --paper:#e8eef0;--surface:#f7fafa;--ink:#10303d;--muted:#4b6672;--line:#b9c9cf;
  --neutral:#1f6fb2;--pe-green:#1d8a3e;--pe-yellow:#f2cf1d;
  --pe:repeating-linear-gradient(-55deg,var(--pe-green) 0 9px,var(--pe-yellow) 9px 18px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 Barlow,"Segoe UI",sans-serif}
.page{max-width:880px;margin:0 auto;padding:40px 16px 72px}
h1,h2{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:600;line-height:1.05;margin:0}
h1{font-size:clamp(44px,9vw,76px)}
a{color:inherit}
:focus-visible{outline:3px solid var(--neutral);outline-offset:2px}

.head{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:end;justify-content:space-between;margin-bottom:32px}
.tally{margin:8px 0 0;color:var(--muted)}
.search{flex:1 1 240px;max-width:340px}
.search label{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
.search input{width:100%;font:inherit;color:inherit;padding:9px 12px;background:var(--surface);border:1px solid var(--muted);border-radius:3px}

.topic{margin-top:36px}
.topic h2{font-size:30px;margin-bottom:10px}
.rail{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rail li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:12px 1fr auto;gap:0 16px;align-items:stretch;text-decoration:none;background:var(--surface)}
.row:hover{background:#fff}
.row:hover .name{text-decoration:underline}
.wire{background:var(--neutral)}
.done .wire{background:var(--pe)}
.body{padding:13px 0;min-width:0}
.name{display:block;font-weight:600;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.type{display:block;color:var(--muted);font-size:15px}
.state{align-self:center;padding-right:16px;color:var(--muted);font-size:15px;text-align:right;white-space:nowrap}
.done .state{color:var(--ink);font-weight:600}

.note{background:var(--surface);border-left:12px solid var(--neutral);padding:16px 20px;margin-top:24px}
.note h2{font-size:28px;margin-bottom:6px}
.note p{margin:0;max-width:62ch}
.note code{font-size:.92em;background:var(--paper);padding:1px 5px}

.top{display:flex;justify-content:space-between;gap:16px;font-weight:600;margin-bottom:24px}
.player-head h1{font-size:clamp(34px,6vw,52px);overflow-wrap:anywhere}
.player-head p{margin:8px 0 20px;color:var(--muted)}
.result{color:var(--ink);font-weight:600}
.stage{background:#fff;border-top:6px solid var(--neutral);min-height:120px;padding:12px 16px 16px}
.stage.done{border-image:var(--pe) 6}
.stage iframe{display:block;width:100%}
.pager{display:flex;justify-content:space-between;gap:24px;margin-top:20px}
.pager a{max-width:48%;font-weight:600;overflow-wrap:anywhere}
.pager .next{margin-left:auto;text-align:right}

@media (max-width:520px){
  .page{padding-top:24px}
  .row{grid-template-columns:10px 1fr;gap:0 12px}
  .wire{grid-row:1 / 3}
  .state{grid-column:2;text-align:left;padding:0 0 12px;margin-top:-8px}
}

/* Verwaltung */
.admin h1{margin-bottom:0}
.admin-nav{display:flex;gap:20px;align-items:center;font-weight:600}
.admin-nav form{margin:0}
.panel{background:var(--surface);padding:20px;margin-top:20px}
.panel h2{font-size:30px;margin-bottom:14px}
.narrow{max-width:420px}
.field{display:block;flex:1 1 220px;min-width:0;margin-bottom:12px}
.field span{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
.field input{width:100%;font:inherit;color:inherit;padding:8px 10px;background:#fff;border:1px solid var(--muted);border-radius:3px}
.admin button{font:inherit;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--muted);border-radius:3px;padding:8px 16px;cursor:pointer}
.admin button:hover{background:var(--line)}
.admin button.primary{background:var(--neutral);border-color:var(--neutral);color:#fff}
.admin button.primary:hover{background:#185b93}
.admin button.delete{background:#a3241b;border-color:#a3241b;color:#fff}
.admin button.link{background:none;border:0;padding:0;text-decoration:underline}
.upload,.row-form{display:flex;flex-wrap:wrap;gap:0 16px;align-items:flex-end}
.upload button,.row-form button{margin-bottom:12px}
.hint{margin:4px 0 0;color:var(--muted);font-size:15px}
.back{margin-top:16px;font-weight:600}
.msg{padding:10px 14px;margin:12px 0 0;border-left:6px solid var(--neutral);background:var(--surface)}
.msg-ok{border-left-color:var(--pe-green)}
.msg-warn{border-left-color:var(--pe-yellow)}
.msg-error{border-left-color:#a3241b;font-weight:600}
.item{border-top:1px solid var(--line)}
.item>summary{cursor:pointer;padding:12px 0}
.item>summary::marker{color:var(--muted)}
.item>summary .name{display:inline;margin-left:4px;font-size:19px}
.item>summary .type{display:block;margin-left:20px}
.item-body{padding:0 0 16px 20px}
.item-body p{margin-top:0}
.danger summary,.section-summary{cursor:pointer;font-weight:600}
.danger p{margin:10px 0}
.section-summary{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:30px}
.pw{margin-top:14px}
.account{background:var(--surface);padding:14px 20px;margin-bottom:8px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.account .link{font:inherit;font-weight:600;color:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.account-form{display:flex;flex-wrap:wrap;gap:0 16px;align-items:flex-end;width:100%}
.account-form .field{flex:1 1 180px}
.account-form button{font:inherit;font-weight:600;color:#fff;background:var(--neutral);border:1px solid var(--neutral);border-radius:3px;padding:8px 16px;margin-bottom:12px;cursor:pointer}
.account-form button:disabled{opacity:.6}
.account-form .hint,.account-form .msg{flex:1 1 100%;margin-top:0}
.class-row{border-top:1px solid var(--line);padding:10px 0}
.class-row .name,.class-row .type{display:block}
.class-row .name{font-weight:600;font-size:19px}
.code{font-weight:600;letter-spacing:.06em}
.field select{width:100%;font:inherit;color:inherit;padding:8px 10px;background:#fff;border:1px solid var(--muted);border-radius:3px}
.table-wrap{overflow-x:auto;margin-bottom:12px}
.matrix{border-collapse:collapse;font-size:15px;min-width:100%}
.matrix th,.matrix td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:bottom}
.matrix thead th{min-width:110px;max-width:180px;font-weight:600}
.matrix tbody th{position:sticky;left:0;background:var(--surface);font-weight:600;white-space:nowrap}
.matrix thead th:first-child{position:sticky;left:0;background:var(--surface)}
.matrix td.none{color:var(--muted)}