/* Trainingsfenster – Stundenplan-Raster (Zeit × Wochentag); Trainer-Matrix = Tagesblöcke × Athletenspalten
   Gestaltung: dunkle Kopfzeile, ruhiger heller Hintergrund, weiße Karten mit leichtem Schatten, blauer Akzent. */
:root{
  --bg:#f1f4f8; --surface:#ffffff; --surface-2:#f7f9fc; --ink:#1c2633; --muted:#5d6b7c; --line:#dde3ea; --line-strong:#b9c3cf;
  --nav:#14213d; --nav-2:#1d2e52; --nav-ink:#ffffff; --nav-muted:#aebbd3;
  --accent:#1a73e8; --accent-ink:#ffffff; --accent-soft:#e3eefd; --free:#1e9e5a;
  --arbeit:#7a6248; --arbeit-bg:#ece3d8;
  --praesenz:#4b4fc4; --praesenz-bg:#dfe0fa;
  --online:#0f8ac2; --online-bg:#d6eefa;
  --termin:#c07d06; --termin-bg:#fbebc9;
  --danger:#c62f2a;
  --on-bg:var(--ink); --on-bg-muted:var(--muted);
  --r:10px; --r-sm:6px;
  --shadow:0 1px 2px rgba(20,33,61,.06),0 2px 8px rgba(20,33,61,.06);
  --f-display:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
/* Dunkelmodus: nur Seitenhintergrund und Kopfzeile werden dunkel, Raster und Karten bleiben hell */
@media (prefers-color-scheme: dark){:root{
  --bg:#0e1522; --on-bg:#e6ecf4; --on-bg-muted:#9aa9bd;
  --nav:#0a1020; --nav-2:#16223a;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.35)}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
a{color:var(--accent)}
[hidden]{display:none!important}

/* Kopfzeile */
header.top{background:linear-gradient(180deg,var(--nav-2),var(--nav));color:var(--nav-ink);box-shadow:0 2px 6px rgba(0,0,0,.18)}
header.top .bar{max-width:1320px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--nav-ink);text-decoration:none;min-width:0}
.brand .logo{height:48px;width:auto;flex:none}
.brand-text{display:grid;min-width:0}
.brand .name{font-weight:700;font-size:20px;letter-spacing:.01em;line-height:1.2}
.brand .sub{color:var(--nav-muted);font-size:13px;line-height:1.3}
nav.tabs{display:flex;gap:4px;flex-wrap:wrap}
nav.tabs a{font-weight:600;font-size:14px;text-decoration:none;color:var(--nav-muted);padding:8px 14px;border-radius:999px;transition:background .15s,color .15s}
nav.tabs a:hover{color:var(--nav-ink);background:rgba(255,255,255,.08)}
nav.tabs a[aria-current="page"]{background:var(--accent);color:#fff}
nav.tabs a.out{border:1px solid rgba(255,255,255,.22)}
header.top a:focus-visible{outline-color:#fff}

.wrap{max-width:1320px;margin:0 auto;padding:8px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:26px} h2{font-size:20px}
h3{font-family:var(--f-display);font-weight:700;font-size:16px;margin:0}
.label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:13px}
.view{display:grid;gap:20px;margin-top:20px}
.stack{display:grid;gap:10px}
.center{display:grid;justify-items:center;gap:20px;margin-top:36px}
.center::before{content:"";width:150px;height:138px;background:url(logo.svg) center/contain no-repeat}
@media (prefers-color-scheme: dark){.center::before{background-image:url(logo-white.svg)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 28px;display:grid;gap:14px;width:100%;max-width:480px}
.card.wide{max-width:none}
.card p{margin:0}
.form{display:grid;gap:14px}
.notice{border-left:4px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.notice.warn{border-color:var(--termin);background:var(--termin-bg)}
input[type=text],input[type=email],input[type=number],select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:9px 11px;min-width:0;width:100%;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
select{width:auto}
button{font:inherit;font-weight:600;font-size:14px;cursor:pointer;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:9px 16px;transition:background .15s,border-color .15s}
button:hover{background:var(--surface-2);border-color:var(--muted)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover{filter:brightness(1.08);background:var(--accent)}
button.danger{color:var(--danger);border-color:var(--danger)}
button:disabled{opacity:.5;cursor:not-allowed}
.field{display:grid;gap:5px;min-width:0}
.err{color:var(--danger);font-size:13px;min-height:1.2em}
.status{font-size:13px;color:var(--muted);min-height:1.2em}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.foot{display:flex;gap:16px;justify-content:center;margin-top:40px;font-size:13px}
.foot a{color:var(--on-bg-muted)}
/* Texte direkt auf dem Seitenhintergrund */
.view > h1,.view > h2,.stack > h2,.view > .err,.view > .status{color:var(--on-bg)}
.view > .err{color:var(--danger)}
@media (prefers-color-scheme: dark){.view > .err{color:#ff8a84}}

/* Mein Plan */
.profile{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.profile .field{flex:1 1 220px}
.profile .field.narrow{flex:0 1 auto}
.static{padding:8px 0;overflow-wrap:anywhere}
.toolbar{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tool{display:flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--line);border-radius:var(--r)}
.tool[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.extra{display:flex;flex-wrap:wrap;gap:10px}
.extra .field{flex:1 1 220px}
.sw{width:16px;height:16px;border-radius:3px;flex:none;display:inline-block}
.sw.arbeit,.c-arbeit{background:var(--arbeit-bg);color:var(--arbeit)}
.sw.praesenz,.c-praesenz{background:var(--praesenz-bg);color:var(--praesenz)}
.sw.online,.c-online{background:repeating-linear-gradient(135deg,var(--online-bg) 0 5px,var(--surface) 5px 8px);color:var(--online)}
.sw.termin,.c-termin{background:var(--termin-bg);color:var(--termin)}
.sw.frei{background:var(--surface);border:1px dashed var(--line-strong)}
.sw.win{box-shadow:inset 0 0 0 2px var(--free)}
.sw.arbeit{box-shadow:inset 0 0 0 2px var(--arbeit)}.sw.praesenz{box-shadow:inset 0 0 0 2px var(--praesenz)}.sw.online{box-shadow:inset 0 0 0 2px var(--online)}.sw.termin{box-shadow:inset 0 0 0 2px var(--termin)}

.edit-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:980px){.edit-layout{grid-template-columns:minmax(0,1fr)}}
.grid-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.wgrid{display:grid;grid-template-columns:52px repeat(5,minmax(58px,1fr));min-width:360px;user-select:none;-webkit-user-select:none;touch-action:none}
.wgrid .hd{position:sticky;top:0;background:var(--surface-2);font-family:var(--f-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;padding:8px 0;border-bottom:2px solid var(--accent);z-index:1}
.wgrid .t{font-family:var(--f-display);font-size:13px;color:var(--muted);text-align:right;padding-right:6px;line-height:1;transform:translateY(-6px);font-variant-numeric:tabular-nums}
.wgrid .t.half{visibility:hidden}
.wgrid .c{height:22px;border-left:1px solid var(--line);border-top:1px dotted var(--line);cursor:crosshair;font-size:11px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px;line-height:22px}
.wgrid .c.hour{border-top:1px solid var(--line-strong)}
.wgrid .c.cont{color:transparent}

.blocks{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.blocks p{margin:0}
.blocklist{display:grid;gap:8px;max-height:640px;overflow:auto}
.block{display:grid;gap:6px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;border-left-width:5px}
.block.t-arbeit{border-left-color:var(--arbeit)}.block.t-praesenz{border-left-color:var(--praesenz)}.block.t-online{border-left-color:var(--online)}.block.t-termin{border-left-color:var(--termin)}
.block .row1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.block .when{font-family:var(--f-display);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.block .kind{font-size:13px;color:var(--muted)}
.block .miss{color:var(--termin);font-weight:700}
.block input{font-size:14px;padding:4px 6px}
.block .x{border:none;background:none;color:var(--muted);padding:0 4px;font-size:18px;line-height:1}

/* Trainer */
.ov-controls{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button{padding:5px 12px;font-size:13px;border-radius:999px}
.chips button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;gap:6px;align-items:center}
.matrix-scroll{overflow:auto;max-height:78vh;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
table.mx{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
table.mx th,table.mx td{padding:0}
table.mx thead th{position:sticky;background:var(--surface);z-index:2}
table.mx thead tr:first-child th{top:0;height:32px}
table.mx thead tr:nth-child(2) th{top:32px;height:110px;border-bottom:2px solid var(--accent)}
table.mx .tcol{position:sticky;left:0;background:var(--surface);z-index:1;font-family:var(--f-display);font-size:13px;color:var(--muted);text-align:right;padding:0 6px;min-width:46px;white-space:nowrap}
table.mx thead .tcol{z-index:3}
table.mx .dayh{font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;text-align:left;padding-left:8px}
table.mx .ath{vertical-align:bottom;width:24px;min-width:24px}
table.mx .ath div,table.mx .cnth div{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:104px;margin:0 auto;padding-bottom:4px}
table.mx .ath div{font-size:12px;font-weight:600}
table.mx .cnth div{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--free);font-weight:700}
table.mx td.s{width:24px;min-width:24px;height:16px;border-left:1px solid var(--line);border-top:1px dotted var(--line);cursor:pointer}
table.mx tr.hour td{border-top:1px solid var(--line-strong)}
table.mx .dstart{border-left:2px solid var(--line-strong)!important}
table.mx td.cnt{width:30px;min-width:30px;text-align:center;font-size:11px;font-weight:700;border-left:1px solid var(--line-strong);border-top:1px dotted var(--line)}
table.mx td.win{box-shadow:inset 0 0 0 2px var(--free)}
table.mx td.sel{outline:2px solid var(--accent);outline-offset:-2px}
.detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-height:48px;box-shadow:var(--shadow)}
.pill{padding:1px 6px;border-radius:3px;font-weight:700}
.windows{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.win-card{border-left:4px solid var(--free);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:grid;gap:2px;box-shadow:var(--shadow)}
.win-card .when{font-family:var(--f-display);font-weight:700;font-size:17px}
.win-card .who{font-size:13px;color:var(--muted)}
.roster{display:grid;gap:6px}
.roster-row{display:grid;grid-template-columns:28px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font-size:14px;box-shadow:var(--shadow)}
.roster-row .nr{font-family:var(--f-display);font-weight:700;color:var(--muted)}
.roster-row .mail{color:var(--muted);overflow-wrap:anywhere}
.roster-row .upd{color:var(--muted);font-size:13px}
.roster-row .pending{color:var(--termin);font-weight:600}
@media (max-width:640px){.roster-row{grid-template-columns:28px minmax(0,1fr) auto}.roster-row .mail,.roster-row .upd,.roster-row .acts{grid-column:2/4}}
.invite{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.invite .field{flex:1 1 220px}

/* Anleitung */
.guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:860px){.guide{grid-template-columns:minmax(0,1fr)}}
.guide article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:grid;gap:10px;align-content:start;box-shadow:var(--shadow)}
.guide p,.guide li{max-width:65ch;margin:0}
.guide ol,.guide ul{margin:0;padding-left:20px;display:grid;gap:6px}
.cat-table{display:grid;gap:8px}
.cat-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px;align-items:start}
.cat-row .tag{font-weight:700;font-size:13px;padding:4px 8px;border-radius:var(--r-sm)}
@media (max-width:480px){.cat-row{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.roster-row .acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.invite .field.year{flex:0 1 110px}
.invite .check{display:flex;gap:6px;align-items:center;font-size:14px;flex:1 1 100%}
@media (max-width:640px){.brand .logo{height:40px}.brand .sub{display:none}nav.tabs a{padding:6px 11px}}

/* Wetter über den Tagesspalten */
.wx{display:flex;justify-content:center;gap:2px;margin-top:4px;font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink);cursor:help}
.wx-p{display:grid;justify-items:center;min-width:0;flex:1 1 0;max-width:44px;line-height:1.15}
.wx-h{font-size:10px;color:var(--muted);font-weight:500}
.wx-i{font-size:16px;line-height:1.2}
.wx-t{font-size:12px;font-variant-numeric:tabular-nums}
.wgrid .hd .dn{display:block}
table.mx .dayh .dn{display:block;white-space:nowrap}
table.mx .dayh .wx{justify-content:flex-start;padding-right:6px}
table.mx.has-wx thead tr:first-child th{height:78px;vertical-align:top;padding-top:6px}
table.mx.has-wx thead tr:nth-child(2) th{top:78px}
@media (max-width:640px){.wx-h{display:none}.wx-i{font-size:14px}.wx-t{font-size:11px}}

/* Trainer: letzte Änderungen der Athleten */
.changes{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.changes-head{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center}
.changes-head p{margin:2px 0 0}
.change-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.change{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 10px;color:var(--muted)}
.change .who{color:var(--ink);overflow-wrap:anywhere}
.change .who b{font-weight:600}
.change .when{grid-column:1;font-size:13px}
.change button{grid-column:2;grid-row:1/3;padding:5px 10px;font-size:13px}
.change.new{background:var(--accent-soft);border-color:var(--accent);border-left-color:var(--accent)}
.change.new .who b{font-weight:700}
.change.new .when{color:var(--ink)}
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;vertical-align:1px}
table.mx .ath.new div{color:var(--accent);font-weight:700}
table.mx .ath.new div::before{content:"● "}

/* Trainer: Legende unter dem Kalender */
.legend-box{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.legend-box dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 20px;margin:0}
.legend-box dt{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.legend-box dd{margin:2px 0 0 36px;font-size:13px;color:var(--muted)}
.lg{display:inline-grid;place-items:center;width:28px;height:18px;border-radius:3px;border:1px solid var(--line);flex:none;font-style:normal;font-size:11px;font-weight:700}
.lg.frei{background:var(--surface);border-style:dashed;border-color:var(--line-strong)}
.lg.num{background:color-mix(in srgb,var(--free) 45%,var(--surface));color:var(--ink)}
.lg.win{background:var(--surface);box-shadow:inset 0 0 0 2px var(--free);border-color:transparent}
.lg.dot{border:none;color:var(--accent);font-size:14px}

/* Athleten: Hinweis bei doppelten Einträgen */
.invite .hint{font-size:12px;min-height:1.3em;color:var(--muted)}
.invite .hint.bad{color:var(--danger);font-weight:600}
.invite input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 15%,transparent)}