/* Layout: Hallen-Werkbank – Werkzeuge links, Feld in der Mitte, Eigenschaften & Übungstext rechts */
:root{
  --bg:#f3f1ec; --panel:#ffffff; --line:#ddd8cc; --fg:#1d232b; --muted:#6b7079;
  --accent:#c2352f; --accent-ink:#ffffff; --sel:#1f6fd1; --soft:#f7f5f0;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16191d; --panel:#1f2328; --line:#343a42; --fg:#e8e6e1; --muted:#9aa0a8;
  --accent:#e0554d; --accent-ink:#ffffff; --sel:#5b9bf0; --soft:#262b31; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16191d; --panel:#1f2328; --line:#343a42; --fg:#e8e6e1; --muted:#9aa0a8;
  --accent:#e0554d; --accent-ink:#ffffff; --sel:#5b9bf0; --soft:#262b31; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;padding-inline:16px;padding-block:12px;margin:0}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
header.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px}
header.top h1{font-size:26px;letter-spacing:.01em}
header.top h1 span{color:var(--accent)}
header.top .sub{color:var(--muted);font-size:13px}
header.top .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:6px;padding:6px 10px;font-weight:500}
button:hover{border-color:var(--muted)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sel);outline-offset:1px}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.danger{color:var(--accent)}
.grid{display:grid;grid-template-columns:230px minmax(0,1fr) 320px;gap:12px;align-items:start}
@media (max-width:1100px){.grid{grid-template-columns:minmax(0,1fr)}.stage{order:-1}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{font-size:17px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tool{display:flex;align-items:center;gap:6px;justify-content:flex-start;padding:7px 8px;font-size:13px}
.tool svg{flex:none}
.tool[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pos-pick{display:flex;flex-wrap:wrap;gap:4px}
.pos-pick button{width:34px;height:30px;padding:0;color:#fff;font-weight:700;border:2px solid transparent}
.pos-pick button[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 1px var(--panel) inset}
.kader{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 4px;border-radius:999px;font-size:13px;background:var(--soft);border:1px solid var(--line)}
.chip i{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-style:normal;font-size:10px;font-weight:700}
.chip[aria-pressed="true"]{border-color:var(--fg);background:var(--panel)}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;min-width:0}
.stagebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.stagebar .hint{color:var(--muted);font-size:13px}
.stagebar .spacer{flex:1}
.courtset{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;margin-bottom:8px;padding:6px 8px;background:var(--soft);border:1px solid var(--line);border-radius:6px}
.courtset select{width:auto;padding:3px 6px}
.courtset b{font-family:var(--f-display);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.objs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.objs button{display:flex;gap:6px;align-items:center;padding:5px 7px;font-size:13px}
.objs button[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.objs svg{flex:none}
.chip.on{opacity:.55}
.chip .x{margin-left:2px;font-weight:700;color:var(--accent)}
#court{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:6px}
input[type=text],textarea,select{font:inherit;width:100%;border:1px solid var(--line);background:var(--soft);color:var(--fg);border-radius:6px;padding:6px 8px}
textarea{resize:vertical;min-height:54px;line-height:1.35}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.three{display:grid;grid-template-columns:80px 80px minmax(0,1fr);gap:8px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs button{border:none;border-bottom:2px solid transparent;border-radius:0;background:none;padding:6px 8px;color:var(--muted);font-family:var(--f-display);font-size:16px;font-weight:600}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.stufe{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.stufe .sh{padding:4px 8px;color:#fff;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.04em;display:flex;gap:6px;align-items:center}
.stufe .sh input{background:rgba(255,255,255,.18);border:none;color:#fff;padding:3px 6px}
.stufe textarea{border:none;border-radius:0}
.empty{color:var(--muted);font-size:13px;line-height:1.45}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:6px;font-weight:500;z-index:60}
.modal{position:fixed;inset:0;background:rgba(10,12,15,.55);display:grid;place-items:center;padding:16px;z-index:50}
.modal .box{background:var(--panel);color:var(--fg);border-radius:10px;padding:16px;width:min(560px,100%);display:flex;flex-direction:column;gap:10px;max-height:90vh;overflow:auto}
.modal textarea{min-height:200px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
/* Seitenvorschau (GoodNotes-Layout, A4 quer) */
.pv{position:fixed;inset:0;background:rgba(10,12,15,.7);z-index:55;overflow:auto;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pv .bar{display:flex;gap:8px;width:min(1100px,100%);justify-content:flex-end}
.page{width:min(1100px,100%);aspect-ratio:297/210;background:#fff;color:#1d232b;border-radius:4px;padding:2.2%;display:grid;grid-template-columns:66% 1fr;grid-template-rows:auto 1fr auto;gap:1.4%;font-family:var(--f-body);font-size:clamp(7px,1.05vw,12px);overflow:hidden}
.page .hd{grid-column:1/3;display:flex;gap:1.6%;align-items:center}
.page .badge{color:#fff;border-radius:6px;padding:.6em 1.1em;text-align:center;font-family:var(--f-display);line-height:1.1}
.page .badge b{display:block;font-size:2.1em}
.page .hd h3{font-size:2em}
.page .hd p{margin:.25em 0 0}
.page .zeit{color:#b91c1c}
.page .img svg{width:100%;height:auto}
.page .side{border:1px solid #d1d5db;border-radius:6px;padding:.8em;display:flex;flex-direction:column;gap:.6em;overflow:hidden}
.page .side ul{margin:0;padding-left:1.1em}
.page .st{border-radius:4px;overflow:hidden;border:1px solid}
.page .st div{padding:.25em .6em;color:#fff;font-weight:700}
.page .st ul{padding:.3em .6em .3em 1.6em;background:#f9fafb}
.page .ft{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:1.4%}
.page .ft>div{border-radius:6px;padding:.7em .9em;min-height:7em}
.page .ft ul{margin:.3em 0 0;padding-left:1.1em}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- App ---------- */
a{color:inherit}
.btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:6px;padding:6px 12px;font-weight:500}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:12px}
body.center{display:grid;place-items:center;min-height:100%}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.card.narrow{width:min(420px,100%)}
.card h1{font-size:28px}
.msg{background:var(--soft);border:1px solid var(--line);padding:8px 10px;border-radius:6px}
.msg.err{border-color:var(--accent);color:var(--accent)}
nav.main{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
nav.main .brand{font-family:var(--f-display);font-size:22px;font-weight:700;margin-right:10px}
nav.main .brand span{color:var(--accent)}
nav.main a{font-family:var(--f-display);font-size:17px;font-weight:600;text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}
nav.main a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
nav.main .sp{flex:1}
main{display:flex;flex-direction:column;gap:14px;max-width:1200px;margin-inline:auto}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar h2{font-size:24px;margin-right:auto}
.list{display:flex;flex-direction:column;gap:8px}
.srow{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-decoration:none}
.srow:hover{border-color:var(--muted)}
.srow .d{font-family:var(--f-display);font-size:20px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.srow .d small{display:block;font-size:13px;color:var(--muted);font-weight:500}
.srow.past{opacity:.6}
.pill{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--soft);border:1px solid var(--line);white-space:nowrap}
.pill.ok{background:#e3f4ea;border-color:#9fd3b2;color:#14532d}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
.att{display:flex;flex-direction:column;gap:4px}
.arow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dashed var(--line)}
.arow .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}
.arow .nm{min-width:0}
.arow .nm small{color:var(--muted);display:block;font-size:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:none;border-radius:0;padding:4px 8px;font-size:12px;background:var(--panel)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"].da{background:#2e9e5b;color:#fff}
.seg button[aria-pressed="true"].spaeter{background:#d4b000;color:#1d232b}
.seg button[aria-pressed="true"].fehlt{background:#9aa0a8;color:#fff}
.sum{display:flex;flex-wrap:wrap;gap:6px}
.block{display:grid;grid-template-columns:70px 150px minmax(0,1fr);gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--c,#999);border-radius:8px;padding:8px 10px}
.block .t{font-family:var(--f-display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.block .t small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.block svg{width:150px;height:auto;border-radius:4px;display:block}
.block .ti{font-weight:600;min-width:0}
.block .ti small{display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:2px}
.block .acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.block .acts button{padding:4px 8px;font-size:12px}
.block input.dur{width:56px;padding:3px 5px}
@media (max-width:700px){.block{grid-template-columns:60px minmax(0,1fr)}.block .th{display:none}}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ex{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.ex svg{width:100%;height:auto;display:block;background:#e7e0d1}
.ex .b{padding:8px 10px;display:flex;flex-direction:column;gap:6px;flex:1}
.ex .b .acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.ex .b .acts button,.ex .b .acts a{padding:4px 8px;font-size:12px}
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ptable input[type=text],.ptable select{padding:4px 6px}
.altpick{display:flex;gap:3px}
.altpick label{display:inline-flex;align-items:center;gap:2px;font-size:12px}
.scroll{overflow-x:auto}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.save-state{font-size:13px;color:var(--muted)}