/*
 * Kabine - Gestaltung.
 *
 * Bewusst ohne eingebundene Webfonts: Schriften von Google Fonts laden die
 * IP-Adresse jedes Besuchers zu einem Drittanbieter hoch, was in Deutschland
 * bereits abgemahnt wurde. Systemschriften sind hier datenschutzfreundlich,
 * schnell und sehen auf jedem Gerät nativ aus.
 */

:root {
  --ground:#EEF3F8; --surface:#FFFFFF; --surface-2:#F6FAFD;
  --raise:0 1px 2px rgba(16,32,52,.06), 0 8px 24px -16px rgba(16,32,52,.28);
  --line:#DBE5EF; --line-strong:#C3D2E2;
  --ink:#0F1A25; --ink-2:#4B5E72; --ink-3:#7C8FA4;
  --accent:#0F4C9B; --accent-2:#1668C9; --accent-soft:#E2ECF9;
  --red:#C1202C; --red-soft:#FBE7E8;
  --green:#1B7A4C; --green-soft:#E3F3EA;
  --amber:#A96A00; --amber-soft:#FBEEDA;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r:10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0B131B; --surface:#131E29; --surface-2:#18242F;
    --raise:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.9);
    --line:#233240; --line-strong:#314456;
    --ink:#E9F0F7; --ink-2:#9EB2C6; --ink-3:#6D8296;
    --accent:#5AA0F0; --accent-2:#7FBAFB; --accent-soft:#15304C;
    --red:#F0707A; --red-soft:#3A1B20;
    --green:#4FC58E; --green-soft:#12301F;
    --amber:#E0A93F; --amber-soft:#332409;
  }
}
:root[data-theme="dark"] {
  --ground:#0B131B; --surface:#131E29; --surface-2:#18242F;
  --raise:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.9);
  --line:#233240; --line-strong:#314456;
  --ink:#E9F0F7; --ink-2:#9EB2C6; --ink-3:#6D8296;
  --accent:#5AA0F0; --accent-2:#7FBAFB; --accent-soft:#15304C;
  --red:#F0707A; --red-soft:#3A1B20;
  --green:#4FC58E; --green-soft:#12301F;
  --amber:#E0A93F; --amber-soft:#332409;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { margin:0; line-height:1.15; text-wrap:balance; font-weight:700; letter-spacing:-.01em; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; border-radius:4px; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* ---------------------------------------------------------------- Struktur */
.app {
  min-height:100vh; display:grid;
  grid-template-columns:minmax(0,236px) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"top top" "nav main";
}
.app > * { min-width:0; }
.top { grid-area:top; position:sticky; top:0; z-index:30; background:var(--surface); border-bottom:1px solid var(--line); }
.top-in { display:flex; align-items:center; gap:14px; padding:10px 20px; flex-wrap:wrap; }
.rule { height:3px; display:flex; }
.rule i { display:block; height:100%; }
.rule i:nth-child(1) { width:22%; background:var(--accent); }
.rule i:nth-child(2) { width:8px; background:var(--red); }
.rule i:nth-child(3) { flex:1; background:var(--line); }

.brand { display:flex; align-items:center; gap:10px; margin-right:auto; }
.crest { width:40px; height:40px; border-radius:9px; flex:none; display:block; }
.brand-lg .crest { width:64px; height:64px; border-radius:14px; }
.brand-lg { flex-direction:column; gap:12px; text-align:center; }
.brand.brand-lg > div:last-child { display:block; }
.login-note { text-align:center; margin:16px 0 0; font-size:12px; line-height:1.45; color:var(--ink-3); }

/* Startbildschirm beim Öffnen */
.splash { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; text-align:center; color:#fff; background:linear-gradient(#1668C9, #0A3A78); transition:opacity .35s ease; }
.splash img { width:132px; height:132px; border-radius:30px; margin-bottom:14px; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); }
.splash b { font-size:30px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.splash span { font-size:14px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.splash small { position:absolute; bottom:max(28px, env(safe-area-inset-bottom)); font-size:12px; opacity:.7; }
.splash.out { opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .splash { transition:none; } }
.brand b { font-size:20px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; display:block; line-height:1; }
.brand span { font-size:11px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase; }
.brand-lg { justify-content:center; margin:0 0 22px; }

.ctl { display:flex; align-items:center; gap:8px; }
.ctl label { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:700; }
.who { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); font-weight:600; }

select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], input[type=time], input[type=date], input[type=url], textarea {
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink);
  padding:8px 11px; border-radius:8px; font-size:14.5px; width:100%;
}
select { cursor:pointer; padding-right:30px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
textarea { min-height:110px; resize:vertical; }

.nav {
  grid-area:nav; padding:18px 12px; border-right:1px solid var(--line);
  background:var(--surface); position:sticky; top:57px; align-self:start;
  height:calc(100vh - 57px); overflow:auto;
}
.nav-group { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:700; padding:0 10px 8px; }
.nav button {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; width:100%;
  color:var(--ink-2); font-weight:600; font-size:14.5px; cursor:pointer;
  border:1px solid transparent; background:none; text-align:left;
}
.nav button:hover { background:var(--surface-2); color:var(--ink); }
.nav button.on { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.nav .badge { margin-left:auto; background:var(--red); color:#fff; font-size:11px; font-weight:700;
  min-width:19px; height:19px; border-radius:999px; display:grid; place-items:center; padding:0 5px; }

main { grid-area:main; padding:24px 22px 72px; max-width:1180px; width:100%; }
.page-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { font-size:30px; }
.page-head p { margin:3px 0 0; color:var(--ink-2); font-size:14.5px; }
.spacer { margin-left:auto; }

/* Leiste unten (nur Handy/Tablet) */
.tabbar { display:none; }
.more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.more-grid button { padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); font-weight:600; font-size:15px; text-align:left; cursor:pointer; min-height:48px; }
.more-grid button.on { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.more-who { border-top:1px solid var(--line); padding-top:14px; }
.nav .nav-group:not(:first-child) { margin-top:14px; }

@media (max-width:900px) {
  .app { grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "main"; }
  .nav { display:none; }
  .tabbar {
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -6px 18px -14px rgba(16,32,52,.45);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar button {
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height:54px; padding:4px 2px; border:0; background:none; border-radius:10px; cursor:pointer;
    color:var(--ink-3); font-size:11.5px; font-weight:600;
  }
  .tabbar button span:not(.badge) { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabbar button.on { color:var(--accent); background:var(--accent-soft); }
  .tabbar .badge { position:absolute; top:3px; left:calc(50% + 6px); background:var(--red); color:#fff; font-size:10.5px; font-weight:700;
    min-width:17px; height:17px; border-radius:999px; display:grid; place-items:center; padding:0 4px; }
  main { padding:16px 14px calc(92px + env(safe-area-inset-bottom)); }
  .toast { bottom:calc(80px + env(safe-area-inset-bottom)); }
  .page-head h1 { font-size:24px; }
  /* Kopf kompakt: Wappen + Mannschaftsauswahl; Name und Abmelden stehen unter „Mehr“. */
  .top-in { padding:8px 12px; gap:10px; flex-wrap:nowrap; }
  .brand { margin-right:0; }
  .brand > div:last-child { display:none; }
  .crest { width:34px; height:34px; border-radius:8px; }
  .ctl { flex:1; min-width:0; }
  .ctl label { display:none; }
  .who, #logoutBtn { display:none; }
}

/* ------------------------------------------------------------- Bausteine */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--raise); min-width:0; }
.card-h { display:flex; align-items:center; gap:8px 10px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.card-h h3 { font-size:17px; min-width:0; }
.card-h .sub { font-size:12.5px; color:var(--ink-3); font-weight:600; }
.card-b { padding:16px; }
.grid { display:grid; gap:16px; }
.grid > * { min-width:0; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px) { .g3,.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:660px) { .g2,.g3,.g4 { grid-template-columns:1fr; } }
.stack { display:flex; flex-direction:column; gap:14px; }
.stack > * { min-width:0; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.btn { border:1px solid var(--line-strong); background:var(--surface); padding:8px 13px; border-radius:8px;
       font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--accent-2); border-color:var(--accent-2); color:#fff; }
.btn-danger:hover:not(:disabled) { border-color:var(--red); color:var(--red); }
.btn-sm { padding:5px 10px; font-size:13px; }
.btn-wide { width:100%; justify-content:center; padding:10px; }

.pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.05em;
        text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.p-blue { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 25%,transparent); }
.p-red { background:var(--red-soft); color:var(--red); border-color:color-mix(in srgb,var(--red) 28%,transparent); }
.p-green { background:var(--green-soft); color:var(--green); border-color:color-mix(in srgb,var(--green) 28%,transparent); }
.p-amber { background:var(--amber-soft); color:var(--amber); border-color:color-mix(in srgb,var(--amber) 30%,transparent); }
.p-grey { background:var(--surface-2); color:var(--ink-3); border-color:var(--line); }

.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.94em; }
.muted { color:var(--ink-2); }
.tiny { font-size:12.5px; }
.eyebrow { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ink-3); }
.err { color:var(--red); font-size:14px; margin:0; font-weight:600; }
.hint { font-size:13.5px; color:var(--ink-2); margin:0; background:var(--surface-2);
        border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:9px 11px; }
.note { background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--accent);
        border-radius:8px; padding:11px 13px; font-size:13.5px; color:var(--ink-2); }
.empty { padding:28px 16px; text-align:center; color:var(--ink-3); font-size:14px; }

/* ---------------------------------------------------------------- Termine */
.ev { display:flex; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:flex-start; }
.ev:last-child { border-bottom:0; }
.ev:hover { background:var(--surface-2); }
.type-bar { width:4px; border-radius:3px; align-self:stretch; flex:none; }
.t-game { background:var(--red); } .t-training { background:var(--accent); }
.t-tournament { background:var(--amber); } .t-other { background:var(--ink-3); }
.date-chip { flex:none; width:56px; text-align:center; border:1px solid var(--line-strong);
             border-radius:8px; padding:5px 0 6px; background:var(--surface-2); }
.date-chip .d { font-size:21px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.date-chip .m, .date-chip .w { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; }
.ev-main { flex:1; min-width:0; }
.ev-title { font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ev-title button { background:none; border:0; padding:0; font:inherit; font-weight:700; cursor:pointer; text-align:left; }
.ev-title button:hover { color:var(--accent); text-decoration:underline; }
.ev-meta { font-size:13px; color:var(--ink-2); display:flex; gap:12px; flex-wrap:wrap; margin-top:3px; }
.ev-side { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
@media (max-width:900px) {
  .ev { flex-wrap:wrap; }
  .ev-main { flex:1 1 60%; }
  .ev-side { width:100%; flex-direction:row; justify-content:flex-end; flex-wrap:wrap; }
}

.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:var(--surface); }
.seg button { border:0; background:transparent; padding:6px 11px; font-size:13px; font-weight:700;
              cursor:pointer; color:var(--ink-2); border-right:1px solid var(--line); }
.seg button:last-child { border-right:0; }
.seg button:hover { background:var(--surface-2); }
.seg button.on-yes { background:var(--green); color:#fff; }
.seg button.on-no { background:var(--red); color:#fff; }

.meter { height:8px; border-radius:999px; background:var(--line); overflow:hidden; display:flex; }
.meter i { display:block; height:100%; }
.m-yes { background:var(--green); } .m-no { background:var(--red); } .m-open { background:var(--line-strong); }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:8px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.dot { width:8px; height:8px; border-radius:3px; display:inline-block; }

.stat { padding:14px 16px; }
.stat .k { font-size:34px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.stat .l { font-size:12.5px; color:var(--ink-2); margin-top:4px; font-weight:600; }

.tw { overflow-x:auto; max-width:100%; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3);
     font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-2); }
.jersey { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px;
          background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14px; }

.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:13px; font-weight:600; padding:4px 9px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line); }
.chip.yes { background:var(--green-soft); border-color:color-mix(in srgb,var(--green) 25%,transparent); color:var(--green); }
.chip.no { background:var(--red-soft); border-color:color-mix(in srgb,var(--red) 25%,transparent); color:var(--red); }
.chip.open { background:var(--surface-2); color:var(--ink-3); }

.msg { padding:14px 16px; border-bottom:1px solid var(--line); }
.msg:last-child { border-bottom:0; }
.msg-h { display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); }
.msg h4 { font-size:17px; margin:4px 0 3px; }
.msg p { margin:0; font-size:14px; color:var(--ink-2); white-space:pre-wrap; }
.avatar { width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
          display:grid; place-items:center; font-size:11px; font-weight:700; flex:none; }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 16px; overflow-x:auto; }
.tabs button { border:0; background:none; padding:9px 12px; font-weight:700; font-size:14px;
               color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs button.on { color:var(--accent); border-bottom-color:var(--accent); }
.tabs button:hover { color:var(--ink); }

.line-row { display:flex; gap:8px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); }
.line-row:last-child { border-bottom:0; }
.line-row .lbl { width:104px; flex:none; font-size:11.5px; font-weight:700; text-transform:uppercase;
                 letter-spacing:.07em; color:var(--ink-3); }

.kv { display:grid; grid-template-columns:118px 1fr; gap:6px 14px; font-size:14px; margin:0; }
.kv dt { color:var(--ink-3); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding-top:2px; }
.kv dd { margin:0; }
@media (max-width:560px) { .kv { grid-template-columns:1fr; gap:2px 0; } .kv dd { margin-bottom:8px; } }

/* --------------------------------------------------------------- Anmeldung */
.login { min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--ground); }
.login-card { width:min(420px,100%); background:var(--surface); border:1px solid var(--line);
              border-radius:14px; box-shadow:var(--raise); padding:26px 24px 24px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field > span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); }
.field small { font-size:12.5px; color:var(--ink-3); }

/* ------------------------------------------------------------------ Dialog */
.scrim { position:fixed; inset:0; background:rgba(8,16,26,.55); z-index:60; display:grid; place-items:end center; }
.sheet { background:var(--surface); width:min(760px,100%); max-height:92vh; overflow:auto;
         border-radius:14px 14px 0 0; border:1px solid var(--line); border-bottom:0; }
@media (min-width:760px) { .scrim { place-items:center; } .sheet { border-radius:14px; border-bottom:1px solid var(--line); } }
.sheet-h { position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--line);
           padding:16px 18px; display:flex; gap:12px; align-items:flex-start; z-index:2; }
.sheet-h h2 { font-size:21px; }
.x { margin-left:auto; border:1px solid var(--line-strong); background:var(--surface); width:32px; height:32px;
     border-radius:8px; cursor:pointer; font-size:16px; line-height:1; flex:none; }
.x:hover { border-color:var(--red); color:var(--red); }
.sheet-b { padding:18px; display:flex; flex-direction:column; gap:16px; }

.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--ink); color:var(--ground);
         padding:10px 16px; border-radius:999px; font-weight:600; font-size:14px; z-index:80; max-width:90vw; }
.toast.bad { background:var(--red); color:#fff; }

.skeleton { padding:40px 16px; text-align:center; color:var(--ink-3); }

/* ---------------------------------------------------------------------------
 * Hilfsklassen.
 *
 * Diese ersetzen inline style-Attribute. Grund ist nicht Ordnungsliebe,
 * sondern die Content-Security-Policy: mit style-src 'self' verbietet der
 * Browser jedes style-Attribut im HTML. Was dynamisch ist (Balkenbreiten),
 * wird nach dem Einfügen über das CSSOM gesetzt - das erlaubt die CSP.
 * ------------------------------------------------------------------------ */
.m0 { margin:0; }
.mb0 { margin-bottom:0; }
.mb6 { margin-bottom:6px; }
.mb7 { margin-bottom:7px; }
.mb8 { margin-bottom:8px; }
.mb9 { margin-bottom:9px; }
.mb12 { margin-bottom:12px; }
.mb14 { margin-bottom:14px; }
.mb16 { margin-bottom:16px; }
.mt4 { margin-top:4px; }
.mt5 { margin-top:5px; }
.mt6 { margin-top:6px; }
.mt7 { margin-top:7px; }
.mt8 { margin-top:8px; }
.mt9 { margin-top:9px; }
.mt10 { margin-top:10px; }
.mt12 { margin-top:12px; }
.mt16 { margin-top:16px; }
.right { text-align:right; }
.center { text-align:center; }
.between { justify-content:space-between; }
.align-end { align-items:flex-end; }
.gap7 { gap:7px; }
.gap8 { gap:8px; }
.w150 { width:150px; }
.w230 { min-width:230px; }
.narrow { max-width:420px; }
.breakall { word-break:break-all; }
.strong { color:var(--ink); }
.warn { color:var(--amber); font-weight:600; }
.h-lg { font-size:24px; margin:6px 0 0; }
.code-big { font-size:26px; font-weight:700; letter-spacing:.06em; }
.bar-label { font-size:13.5px; font-weight:600; }
.boxed { border:1px solid var(--line); border-radius:8px; padding:11px 12px; background:var(--surface-2); }
.cb { width:auto; }
.dot-yes { background:var(--green); }
.dot-no { background:var(--red); }
.dot-open { background:var(--line-strong); }
.m-accent { background:var(--accent); }
.k-green { color:var(--green); }
.k-red { color:var(--red); }
.k-amber { color:var(--amber); }

/* ------------------------------------------------------------------ Wiki */
.linkish { background:none; border:0; padding:0; font:inherit; font-weight:inherit; color:inherit; cursor:pointer; text-align:left; }
.linkish:hover { color:var(--accent); text-decoration:underline; }
.hidden-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.editor { min-height:320px; font-family:var(--mono); font-size:13.5px; line-height:1.55; }
.prose { max-width:72ch; font-size:15.5px; line-height:1.6; }
.prose h2 { font-size:22px; margin:22px 0 8px; }
.prose h3 { font-size:18px; margin:18px 0 6px; }
.prose h4 { font-size:16px; margin:14px 0 4px; }
.prose h2:first-child, .prose h3:first-child, .prose p:first-child { margin-top:0; }
.prose p { margin:0 0 12px; }
.prose ul, .prose ol { margin:0 0 12px; padding-left:24px; }
.prose li { margin:3px 0; }
.prose blockquote { margin:0 0 12px; padding:8px 14px; border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 8px 8px 0; color:var(--ink-2); }
.prose blockquote p { margin:0; }
.prose code { font-family:var(--mono); font-size:.9em; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.prose pre { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; overflow-x:auto; margin:0 0 12px; }
.prose pre code { border:0; padding:0; background:none; }
.prose hr { border:0; border-top:1px solid var(--line); margin:18px 0; }
.prose a { color:var(--accent); }
.prose table { margin-bottom:12px; }

/* Eigenständige Eisplanung, auch per Touch/Tastatur vollständig bedienbar. */
.planner-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.planner-toolbar .field { margin:0; }
input[type=date] { font:inherit; border:1px solid var(--line-strong); background:var(--surface-2); border-radius:8px; color:var(--ink); padding:8px 11px; }
.planner-summary .card-b { display:flex; flex-direction:column; gap:5px; }
.planner-summary strong { font-size:23px; }
.planner-summary span { font-size:12px; color:var(--ink-2); }
.planner-teams { display:flex; gap:10px; flex-wrap:wrap; }
.team-token { border-left:5px solid var(--team-color); cursor:grab; }
.team-token.selected { outline:3px solid var(--accent); outline-offset:2px; }
.team-color-0 { --team-color:#4b95ee; }
.team-color-1 { --team-color:#a478db; }
.team-color-2 { --team-color:#32a782; }
.team-color-3 { --team-color:#d39336; }
.team-color-4 { --team-color:#e17488; }
.team-color-5 { --team-color:#56a6bb; }
/* Eisplanung: volle Breite, sieben gleich breite Tage, kompakte Karten */
main[data-view="planung"] { max-width:none; }
.planner-week { display:grid; grid-template-columns:repeat(7,minmax(165px,1fr)); overflow-x:auto; gap:8px; padding-bottom:10px; align-items:start; }
.planner-day { border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:8px; min-width:0; }
.planner-day h2 { font-size:14px; margin:2px 2px 8px; }
.ice-slot { padding:9px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); margin-bottom:8px; }
.slot-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.ice-slot h3 { font-size:16px; margin:0; font-variant-numeric:tabular-nums; }
.slot-meta { margin:2px 0 6px; overflow-wrap:anywhere; }
.slot-free { margin-top:3px; }
.slot-assign { width:100%; margin-top:7px; }
.btn.btn-xs { padding:3px 8px; font-size:12.5px; min-height:0; line-height:1.4; border-radius:7px; }
.ice-slot.ice-drop { outline:3px solid var(--accent); background:var(--accent-soft); }
.ice-diagram { display:grid; grid-template-columns:repeat(6,1fr); gap:2px; height:14px; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; }
.ice-free { background:var(--green-soft); }
.ice-used { background:var(--accent); }
.ice-unavailable { background:repeating-linear-gradient(45deg,var(--line),var(--line) 3px,var(--surface-2) 3px,var(--surface-2) 7px); }
.training-block { border-left:4px solid var(--team-color); padding:6px 7px; background:var(--surface-2); border-radius:6px; margin-top:6px; }
.training-block[draggable=true] { cursor:grab; }
.block-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.block-head .pill { margin-left:auto; }
.block-actions { display:flex; gap:5px; margin-top:5px; }
.training-removed { border-left-color:var(--red); opacity:.85; }
.planner-empty { padding:8px 4px; color:var(--ink-3); font-size:12.5px; }
.planner-add { margin-top:2px; width:100%; padding:4px 8px; font-size:12.5px; }
.distribution-row { display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.distribution-row .row { flex-wrap:wrap; }
.distribution-row progress { width:100%; height:13px; accent-color:var(--accent); }
@media (max-width:660px) {
  .planner-week { grid-template-columns:1fr; overflow:visible; }
  .planner-day { min-height:0; }
  .planner-toolbar { align-items:center; }
  .planner-toolbar .field { flex:1; min-width:190px; }
  .distribution-row { grid-template-columns:65px minmax(0,1fr); }
  .btn,.nav button,.seg button { min-height:44px; }
  input,select,textarea { font-size:16px !important; }
  .top-in { gap:8px; }
  .who { flex-wrap:wrap; }
  .page-head { flex-wrap:wrap; gap:12px; }
  .page-head h1 { overflow-wrap:anywhere; }
  .sheet { max-height:92dvh; }
}

/* Elterndienste, Ausrüstung, Auswertung */
.duty-row { align-items:flex-start; padding:12px 0; }
.duty-main { flex:1; min-width:0; }
.duty-side { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.duty-row .dot { width:10px; height:10px; }
.tw td .meter { min-width:110px; }
@media (max-width:560px) {
  .duty-row { flex-direction:column; }
  .duty-side { justify-content:flex-start; }
}

/* Eisplanung: Wochenübersicht und Excel-Import */
.week-strip { display:grid; grid-template-columns:repeat(8,minmax(120px,1fr)); gap:8px; overflow-x:auto; padding-bottom:4px; }
.week-tile { display:flex; flex-direction:column; gap:4px; text-align:left; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font:inherit; }
.week-tile strong { font-size:20px; }
.week-tile.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.week-tile:hover { border-color:var(--accent-2); }
.import-sheet details summary { cursor:pointer; padding:6px 0; }
.import-table { max-height:46vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.import-table tr.muted td { color:var(--ink-3); }
.row.wrap { flex-wrap:wrap; }
@media (min-width:760px) { .sheet:has(.import-sheet) { width:min(1040px,100%); } }
.week-tile .pill { align-self:flex-start; }
.seg button.on-maybe { background:var(--amber, #B7791F); color:#fff; }
.ice-slot.ice-external { border-style:dashed; border-color:var(--accent-2); }
.venue-main { flex:1; min-width:0; text-align:left; }
.grow { flex:1; min-width:0; text-align:left; }

/* Hilfe für Eltern (hilfe.html) */
.help-page { background:var(--bg); }
.help-brand { color:inherit; text-decoration:none; }
.help { max-width:860px; margin:0 auto; padding:24px 16px 64px; }
.help h1 { font-size:30px; margin:8px 0 10px; }
.help h2 { font-size:21px; margin:0 0 10px; }
.help h3 { font-size:17px; margin:0 0 4px; }
.help-lead { font-size:17px; color:var(--ink-2); margin:0 0 18px; }
.help-section { margin:30px 0; scroll-margin-top:110px; }
.help-section p, .help-section li { line-height:1.55; }
.help-section ul, .help-section ol, .help-toc ol { padding-left:22px; }
.help-section li { margin:6px 0; }
.help-toc ol { margin:8px 0 0; columns:2; column-gap:28px; }
.help-toc li { margin:4px 0; break-inside:avoid; }
.help-faq { margin:8px 0; }
.help-faq summary { cursor:pointer; padding:14px 16px; font-weight:700; }
.help-faq[open] summary { border-bottom:1px solid var(--line); }
.help-contact { margin-top:32px; }
.nav .nav-help { display:block; padding:9px 12px; margin-top:8px; color:var(--ink-2); font-size:14px; text-decoration:none; }
.login-help { text-align:center; margin-top:14px; font-size:14px; }
@media (max-width:660px) { .help-toc ol { columns:1; } .help h1 { font-size:25px; } }
.help-page a.btn { text-decoration:none; }

/* Spielkader */
.squad-cell { padding-left:28px !important; }
.squad-list { max-height:55vh; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:4px 12px; }
.squad-row { padding:8px 0; border-bottom:1px dashed var(--line); }
.squad-row:last-child { border-bottom:0; }
.update-log { white-space:pre-wrap; font-size:12px; max-height:320px; overflow:auto; background:var(--surface-2); padding:10px; border-radius:8px; }
.linkbtn { background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit; }
.err.ok { color:var(--green); }
@media (max-width:900px) { .top-in:has(#teamPicker[hidden]) .brand > div:last-child { display:block; } }
.more-who a.btn { text-decoration:none; }
.plain-fieldset { border:0; padding:0; margin:0; min-width:0; }
/* Camp-Programm bearbeiten */
.camp-rows { gap:8px; }
.camp-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:6px; align-items:center;
  padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.camp-row input[data-f="title"] { grid-column:span 2; }
.fw-shift { align-items:flex-start; flex-wrap:wrap; gap:8px 12px; }
@media (max-width:660px) { .btn.btn-xs { min-height:36px; padding:6px 10px; } }
/* Eisland-Abgleich in der Wochenansicht */
.eisland-ghost { border:1.5px dashed var(--red); border-radius:10px; padding:8px 9px; margin-bottom:8px; background:color-mix(in srgb, var(--red) 6%, transparent); }
.eisland-flag { margin:2px 0 4px; font-weight:600; }
.eisland-cabin { margin:0 0 4px; color:var(--ink-2); }
.eisland-summary details summary { cursor:pointer; }
/* NEV-Markierungen und Spielkader */
.nev-badges { display:inline-flex; flex-wrap:wrap; gap:3px; vertical-align:middle; }
.nev-badge { display:inline-block; font-size:11px; font-weight:700; line-height:1.5; padding:0 6px; border-radius:6px; border:1px solid transparent; white-space:nowrap; }
.nev-core { background:var(--accent-soft); color:var(--accent); }
.nev-up { background:var(--amber-soft); color:var(--amber); }
.nev-up-young { background:var(--amber-soft); color:var(--amber); border-color:var(--amber); }
.nev-girl { background:color-mix(in srgb, #a478db 18%, transparent); color:#7d4fc0; }
.nev-bad { background:var(--red-soft); color:var(--red); }
.nev-ok { background:var(--green-soft); color:var(--green); }
.nev-unknown { background:var(--surface-2); color:var(--ink-3); border-color:var(--line); }
.nev-goalie { background:var(--ink); color:var(--surface); }
.nev-from, .nev-also { background:var(--surface-2); color:var(--ink-2); border-color:var(--line); }
.nev-legend { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; color:var(--ink-3); }
.nev-roster summary { cursor:pointer; list-style:none; }
.nev-verdict { font-weight:800; padding:8px 10px; border-radius:8px; margin-bottom:8px; }
.nev-verdict-ok { background:var(--green-soft); color:var(--green); }
.nev-verdict-warning { background:var(--amber-soft); color:var(--amber); }
.nev-verdict-error { background:var(--red-soft); color:var(--red); }
.nev-checks { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.nev-checks li { display:flex; gap:8px; align-items:flex-start; }
.nev-icon { flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; }
.nev-check-ok .nev-icon { background:var(--green); }
.nev-check-warning .nev-icon { background:var(--amber); }
.nev-check-error .nev-icon { background:var(--red); }
.sheet.sheet-wide { width:min(1240px,100%); }
.lineup-editor { display:grid; grid-template-columns:minmax(260px,330px) minmax(0,1fr); gap:16px; align-items:start; }
.lu-rules { position:sticky; top:0; }
.lu-table select { padding:4px 26px 4px 8px; font-size:13px; }
.lu-table tr.lu-selected { background:var(--accent-soft); }
.line-rot { box-shadow:inset 4px 0 0 #d23b3b; } .line-gelb { box-shadow:inset 4px 0 0 #e0b300; }
.line-gruen { box-shadow:inset 4px 0 0 #2e9e5b; } .line-blau { box-shadow:inset 4px 0 0 #2f6fd6; }
.line-row.line-rot .lbl { color:#d23b3b; } .line-row.line-gelb .lbl { color:#b38f00; }
.line-row.line-gruen .lbl { color:#2e9e5b; } .line-row.line-blau .lbl { color:#2f6fd6; }
@media (max-width:900px) { .lineup-editor { grid-template-columns:1fr; } .lu-rules { position:static; } }