/* ==========================================================================
   SquadOS — Design System (Modern Enterprise SaaS / Soft Minimalism)
   Hell, Navy-Text (#0B1838), Electric Blue (#0866F5), zarte graue Ränder,
   weiche Radien, dezente Schatten, Inter. Tokens unten, danach Komponenten.
   ========================================================================== */

/* --- Schrift: Inter (Variable, selbst gehostet). Ein Gewicht-Bereich 100–900. --- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/Inter-latext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens (SquadOS) ---------------------------------------------------- */
:root {
  /* Marke */
  --color-primary: #0866F5;
  --color-primary-hover: #005AE0;
  --color-primary-soft: #EFF6FF;
  --color-cyan: #22DDF3;

  /* Text (nie reines Schwarz) */
  --text-primary: #0B1838;
  --text-secondary: #53617C;
  --text-muted: #8892A6;
  --text-disabled: #B8C0CF;

  /* Semantik */
  --success: #16A34A; --success-soft: #ECFDF3;
  --warning: #B45309; --warning-soft: #FFFBEA;
  --danger:  #DC2626; --danger-soft:  #FEF2F2;
  /* Positionsregeln (Design-System): Erzwingen = Blau, Verbieten = Slate/Grau (kein Grün/Rot). */
  --slate: #64748b; --slate-soft: #f1f5f9; --slate-border: #aebaca;

  /* Bestehende Token-Namen → neue Werte (damit alle var(--…) automatisch greifen) */
  --c-black: #0B1838;        /* Navy-Text (war #000) */
  --c-white: #FFFFFF;        /* Flächen/Karten („Papier") */
  --c-bg: #F8FAFC;           /* App-Hintergrund (neu) */
  --c-surface-2: #F2F5F9;    /* dezente Flächen (Header, Zähler) */
  --c-hover: #F8FAFC;        /* Hover-Flächen */
  --c-fill-soft: #EFF6FF;    /* zarter Blau-Hintergrund */
  --c-line: #E9EDF3;         /* Haarlinie (border-subtle) */
  --c-line-strong: #DCE2EB;  /* Standard-Rand (war #000 — zentraler Weichzeichner) */
  --c-muted: #53617C;        /* sekundärer Text */
  --c-faint: #8892A6;        /* Tertiär */
  --c-fill: #0866F5;         /* Aktionsfarbe (war var(--c-fill)) */

  /* Radien */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --radius: 8px;             /* Inputs/Buttons/Dropdowns (war 4) */

  /* Schatten (dezent, Navy-basiert) */
  --shadow-sm:      0 1px 2px rgba(11, 24, 56, 0.04);
  --shadow-card:    0 2px 8px rgba(11, 24, 56, 0.05);
  --shadow-popover: 0 12px 32px rgba(11, 24, 56, 0.12);
  --shadow-modal:   0 24px 64px rgba(11, 24, 56, 0.18);
  --c-overlay: rgba(15, 29, 51, 0.48);   /* Modal-Backdrop (abgedunkelt, wird zusätzlich unscharf) */

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --fs-micro: 11px; --fs-sm: 12px; --fs-base: 14px;
  --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 40px;

  --ff: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sidebar-w: 240px;
  --topbar-h: 64px;
  color-scheme: light;
}

/* --- Leichte Abrundung für Karten/Boxen/Menüs (sonst sehr eckig) --------- */
.flag, .login__box, .login__error, .topbar__menu, .topbar__profilebtn,
.analytics, .ml, .amx__filterbar, .amx__flyover, .aufgebot, .aufgebot__warn,
.lineup__hint, .lineup__sel, .benotung, .set__trainers, .users__new,
.pform__photo, .lv__vtoggle { border-radius: var(--radius); }

/* --- Hell/Dunkel-Umschalter entfernt (nur noch Hell) -------------------- */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--c-black);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input { accent-color: var(--c-fill); }   /* Häkchen/Radios in Electric Blue */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
ul { list-style: none; margin: 0; padding: 0; }

/* Label (Normalschreibung, kein Versal) */
.label, label {
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--c-muted);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 40px;
  font-size: var(--fs-base);
  letter-spacing: 0;
  text-transform: none;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line-strong);
  background: var(--c-white);
  color: var(--c-black);
  cursor: pointer;
  border-radius: var(--radius-md);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.btn:hover { background: var(--c-bg); border-color: var(--c-line-strong); color: var(--c-black); }
.btn--primary { background: var(--c-fill); border-color: var(--c-fill); color: #fff; box-shadow: 0 1px 2px rgba(8, 102, 245, 0.15); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.btn--ghost { border-color: transparent; background: transparent; color: var(--c-fill); box-shadow: none; }
.btn--ghost:hover { border-color: transparent; background: var(--color-primary-soft); color: var(--c-fill); }
.btn--danger { background: var(--c-white); border-color: #FECACA; color: var(--danger); box-shadow: none; }
.btn--danger:hover { background: var(--danger-soft); border-color: #FCA5A5; color: var(--danger); }
.btn--block { display: flex; width: 100%; }
.btn--sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); gap: 6px; }

.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 102, 245, 0.20);
  border-color: var(--c-fill);
}

/* --- Flags / Tags (Pillen, semantische Soft-Paare) ---------------------- */
.flag { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; font-weight: 500; padding: 2px 10px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-full); }
.flag--ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.flag--err { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag {
  font-size: var(--fs-sm); text-transform: none; letter-spacing: 0;
  border: 1px solid var(--c-line-strong); padding: 2px 10px; border-radius: var(--radius-full);
}

/* --- Login --------------------------------------------------------------- */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--c-bg); }
.login__box { width: 360px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--sp-6); }
.login__brand { display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-6); }
.login__wordimg { height: 34px; width: auto; display: block; }
.login__error { background: var(--danger-soft); color: var(--danger); border: none; border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.login .field { margin-bottom: var(--sp-4); }

/* --- App-Layout ---------------------------------------------------------- */
.app { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--c-nav);
  border-bottom: 1px solid var(--c-line);
  /* Eigener Stapelkontext ÜBER dem Inhaltsbereich (.main), damit das Profil-Menü
     immer im Vordergrund liegt — v.a. im Dark Mode, wo backdrop-filter auf .topbar
     sonst einen Kontext erzeugt, der hinter .main gerät. */
  position: relative; z-index: 100;
}
/* SquadOS-Lockup: Markenzeichen + Wortmarke */
.topbar__logo { display: flex; align-items: center; flex: none; }
.topbar__wordimg { height: 26px; width: auto; display: block; }
/* Segmentierter Umschalter (Hell/Dunkel/System) in den Einstellungen */
.themesw { display: inline-flex; gap: 2px; padding: 3px; background: var(--c-surface-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.themesw__btn { appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 7px 16px; border-radius: var(--radius); font: inherit; font-size: var(--fs-sm);
  font-weight: 600; color: var(--c-muted); transition: background .15s, color .15s; }
.themesw__btn:hover { color: var(--c-black); }
.themesw__btn[aria-pressed="true"] { background: var(--c-white); color: var(--c-fill);
  box-shadow: var(--shadow-sm); }
.mapmarker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.mapmarker__lbl { font-weight: 600; font-size: var(--fs-sm); }
.mapmarker__prev { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-white);
  box-shadow: var(--shadow-sm); display: inline-block; }
.mapmarker__sel { appearance: auto; font: inherit; font-size: var(--fs-sm); padding: 6px 10px;
  border-radius: var(--radius); border: 1px solid var(--c-line); background: var(--c-white);
  color: var(--c-black); cursor: pointer; }
.pitchbg { display: grid; gap: 10px; }
.pitchbg__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pitchbg__lbl { min-width: 140px; font-weight: 600; font-size: var(--fs-sm); }
/* Trainingsorte: Karten-Picker je Wochentag */
.set__maprow.is-hidden { display: none; }
.set__maprow > td { padding: 8px 0 14px; }
.set__trwx .home__map { height: 240px; }
.set__trreset { margin-top: 10px; }
.set__trmaphint { font-size: var(--fs-sm); }

/* Logo je Theme umschalten (hell/dunkel) */
.tl--dark { display: none; }
:root[data-theme="dark"] .tl--light { display: none; }
:root[data-theme="dark"] .tl--dark { display: block; }
.login__logo { display: block; width: 190px; height: auto; margin: 0 auto var(--sp-5); }
.topbar__spacer { flex: 1; }
/* Warnbanner im Aufgebot-Interface (indirekt geändert) + Bestätigungs-Popup bei Rollenänderung */
.lineup__dynwarn { display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--danger); background: rgba(211, 65, 12, 0.10); border-radius: 4px;
  padding: 8px 12px; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.lineup__dynwarn-head { font-weight: 700; color: var(--danger); display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.lineup__dynwarn-all { border: 1px solid var(--danger); background: none; color: var(--danger); border-radius: var(--radius-sm); padding: 1px 7px; cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 700; }
.lineup__dynwarn-all:hover { background: var(--danger); color: #fff; }
.lineup__dynwarn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lineup__dynwarn-item { display: flex; align-items: flex-start; gap: 7px; }
.lineup__dynwarn-txt { flex: 1 1 auto; min-width: 0; }
.lineup__dynwarn-when { flex: 0 0 auto; font-size: var(--fs-xs); }
.lineup__dynwarn-x { flex: 0 0 auto; border: 1px solid var(--danger); background: none; color: var(--danger);
  border-radius: var(--radius-sm); padding: 0 8px; cursor: pointer; font: inherit; font-weight: 700; line-height: 1.5; }
.lineup__dynwarn-x:hover { background: var(--danger); color: #fff; }
.cos-pop.rolewarn { max-width: 520px; }
.rolewarn__txt { font-size: var(--fs-sm); margin: 4px 0 8px; }
.rolewarn__list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 200px; overflow-y: auto; font-size: var(--fs-sm); }
.rolewarn__list > li { padding: 2px 0; border-bottom: 1px solid var(--c-line); }
/* Ein Konflikt-Block je Kombination (Kapazitäts-Warnung) */
.rolewarn__conf { border-left: 3px solid var(--danger); padding: 2px 0 6px 10px; margin: 0 0 10px; }
.rolewarn__combo { font-size: var(--fs-sm); margin-bottom: 4px; }
.rolewarn__conf .rolewarn__list { margin-bottom: 6px; }
.rolewarn__acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rolewarn__hint { font-size: var(--fs-micro); margin-top: 10px; }
/* Zurück/Vorwärts-Navigation oben rechts */
.topbar__nav { display: flex; align-items: center; gap: 4px; margin: 0 var(--sp-3); }
.topbar__navbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  background: none; border: 1px solid var(--c-line); border-radius: var(--radius-md); color: var(--c-muted); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.topbar__navbtn:hover:not(:disabled) { border-color: var(--c-line-strong); background: var(--c-bg); color: var(--c-black); }
.topbar__navbtn:disabled { color: var(--text-disabled); cursor: default; }
.topbar__user { font-size: var(--fs-sm); color: var(--c-muted); }
.topbar__link { font-size: var(--fs-sm); letter-spacing: 0; border-bottom: 1px solid transparent; }
.topbar__link:hover { border-bottom-color: var(--c-fill); color: var(--c-fill); }
.topbar__status { font-size: var(--fs-micro); }
/* Profil-Popup oben rechts */
.topbar__profile { position: relative; flex: none; }
.topbar__profilebtn { display: flex; align-items: center; gap: var(--sp-2); background: none; border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 6px 10px; cursor: pointer; font: inherit; color: var(--c-black); transition: background-color 150ms ease, border-color 150ms ease; }
.topbar__profilebtn:hover { border-color: var(--c-line-strong); background: var(--c-bg); }
.topbar__usericon { display: inline-flex; color: var(--c-muted); flex: none; }
.topbar__pname { font-size: var(--fs-sm); font-weight: 500; }
/* Schmale Screens: nur das Profil-Icon zeigen, sonst schiebt der Name die Topbar ueber den Rand;
   dazu Logo/Abstaende leicht verkleinern, damit die Topbar auf 375px-Geraete passt */
@media (max-width: 600px) { .topbar__pname { display: none; } }
@media (max-width: 480px) {
  .topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .topbar__wordimg { height: 20px; }
  .topbar__nav { margin: 0; }
}
.topbar__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); display: none; z-index: 60; padding: var(--sp-1); }
.topbar__profile.is-open .topbar__menu { display: block; }
.topbar__menuhead { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 600; }
.topbar__menuhead .muted { font-weight: 400; }
.topbar__menuitem { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); cursor: pointer; background: none; border: none; border-radius: var(--radius-sm); font-family: inherit; color: var(--c-black); }
.topbar__menuitem:hover { background: var(--color-primary-soft); color: var(--c-fill); }
.topbar__menuorg { padding: 2px var(--sp-3) var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); border-bottom: 1px solid var(--c-line); }
.topbar__menulabel { padding: var(--sp-2) var(--sp-3) 2px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-faint); }
.topbar__teamitem.is-current { font-weight: 700; }
.utable--bk { margin-top: var(--sp-3); }
.uteams { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }
.uteam { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); white-space: nowrap; }
/* Admin: Tool-Rechte je Benutzer — scrollbare, nach Kategorie gruppierte Liste */
.utoolform { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.utoolbox { max-height: 230px; overflow-y: auto; width: 340px; border: 1px solid var(--c-line); border-radius: 6px; padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2); }
.utoolcat { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-muted); font-weight: 700; margin: var(--sp-3) 0 2px; }
.utoolcat:first-child { margin-top: 0; }
.utoolrow { display: flex; gap: 7px; align-items: flex-start; padding: 4px 2px; font-size: var(--fs-sm); cursor: pointer; border-radius: var(--radius-md); }
.utoolrow:hover { background: var(--c-hover); }
.utoolrow input { margin-top: 3px; flex: none; }
.utoolrow__txt { display: flex; flex-direction: column; line-height: 1.25; }
.utoolrow__desc { font-size: var(--fs-micro); color: var(--c-muted); font-weight: 400; margin-top: 1px; }
.utoolrow__std { font-size: var(--fs-micro); color: var(--c-fill); font-weight: 700; border: 1px solid var(--c-fill); border-radius: var(--radius-sm); padding: 0 3px; }
.utoolrow.is-std { opacity: 0.9; }

.main { flex: 1; display: flex; min-height: 0; position: relative; }
.tnode__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.tnode__icon svg { display: block; }
.sb-backdrop { display: none; }

/* --- Sidebar: Navigation ------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--c-nav);
  border-right: 1px solid var(--c-line);
  overflow-y: auto; padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; gap: 1px;
}
.tnode--bottom { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.tnode__top {
  list-style: none; cursor: pointer;
  font-weight: 600; letter-spacing: 0; font-size: var(--fs-base);
  color: var(--c-black);
  min-height: 40px; padding: 0 var(--sp-3); margin: 1px 0;
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: var(--sp-3);
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.tnode__top::-webkit-details-marker { display: none; }
.tnode__top::before { display: none; }
.tnode__icon { color: var(--c-faint); }
.tnode__top:hover { background: var(--c-bg); }
.tnode__top.is-active { background: var(--color-primary-soft); color: var(--c-fill); }
.tnode__top.is-active .tnode__icon { color: var(--c-fill); }
.tnode__top .tcount { margin-left: auto; font-weight: 500; font-size: var(--fs-sm); color: var(--c-faint); }
.tnode__top.is-active .tcount { color: var(--c-fill); }
.tnode__notif { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-content: center; background: var(--c-fill); color: #fff; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; }
/* Roter Kreis mit „i": ein Aufgebot wurde beeinflusst (immer sichtbar an Anwesenheiten) */
.tnode__alert { margin-left: auto; width: 18px; height: 18px; display: inline-grid; place-content: center;
  background: var(--danger); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; font-style: italic;
  font-family: Georgia, "Times New Roman", serif; line-height: 1; flex: 0 0 auto; }

.tnode__kids { padding: 2px 0 var(--sp-2); }
.tleaf {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 34px; padding: 0 var(--sp-3) 0 44px; margin: 1px 0;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); color: var(--c-muted);
  transition: background-color 150ms ease, color 150ms ease;
}
.tleaf:hover { background: var(--c-bg); color: var(--c-black); }
.tleaf.is-active { background: var(--color-primary-soft); color: var(--c-fill); font-weight: 600; }
.tleaf .tcount { margin-left: auto; font-size: var(--fs-sm); color: var(--c-faint); }
.tleaf.is-active .tcount { color: var(--c-fill); }

/* --- Listenansicht im Hauptbereich --------------------------------------- */
.lv { padding: var(--sp-5) var(--sp-5) var(--sp-7); max-width: 720px; }
.lv__head { font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-xl); line-height: 1.2; color: var(--c-black); margin-bottom: var(--sp-5); border-bottom: none; padding-bottom: 0; }
.lv__bar { margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* Aufstellungen: Umschalter Liste / Kalender */
.lv__vtoggle { display: inline-flex; border: 1px solid var(--c-line); margin-left: auto; }
.lv__vt { padding: 5px 14px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; color: var(--c-black); }
.lv__vt + .lv__vt { border-left: 1px solid var(--c-line); }
.lv__vt.is-active { background: var(--c-fill); color: #fff; }
/* Kalender-Ansicht der Aufstellungen */
.cal { display: flex; flex-direction: column; gap: var(--sp-6); }
.cal__mlabel { font-weight: 700; letter-spacing: 0.06em; margin-bottom: var(--sp-2); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.cal__wd { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); text-align: center; padding: 4px 0; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line-strong); background: var(--c-surface-2); }
.cal__cell { min-height: 74px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.cal__cell--empty, .cal__cell--off { background: var(--c-surface-2); }
.cal__cell--today { box-shadow: inset 0 0 0 2px var(--c-line-strong); }
.cal__day { font-size: var(--fs-micro); color: var(--c-muted); font-variant-numeric: tabular-nums; padding: 0 2px; }
.cal__ev { display: block; font-size: var(--fs-micro); line-height: 1.25; padding: 2px 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__ev--plain { color: var(--c-muted); }
.cal__ev--plain:hover { background: var(--c-hover); color: var(--c-black); }
.cal__ev--game { background: var(--c-fill); color: #fff; font-weight: 700; }
.cal__ev--game:hover { filter: brightness(1.08); }
.lv__draghint { font-size: var(--fs-micro); margin: -2px 0 var(--sp-4); }
.lv__group { margin-bottom: var(--sp-5); }
.lv__cat {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-muted); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--c-line);
}
.lv__count { color: var(--c-faint); }
.lv__add {
  margin-left: auto; width: 18px; height: 18px; line-height: 16px; text-align: center;
  border: 1px solid var(--c-line); color: var(--c-black); font-size: 13px;
}
.lv__add:hover { border-color: var(--c-fill); background: var(--c-fill); color: #fff; }
.lv__list { }
.lv__list li { border-bottom: 1px solid var(--c-line); }
.lv__row { display: flex; align-items: baseline; gap: var(--sp-3); padding: 8px var(--sp-2); border-radius: var(--radius-md); }
.lv__row:hover { background: var(--c-fill); color: #fff; }
.lv__name { font-weight: 700; }
.lv__sub { color: var(--c-muted); }
.lv__row:hover .lv__sub { color: #fff; }
.lv__empty { color: var(--c-faint); padding: 4px var(--sp-2); font-size: var(--fs-sm); }
/* Aufgebot-Liste: gleich breite, ausgerichtete Spalten (Datum · Titel · Gegner · Ort · Zeit · Status) */
/* Listen mit harten, ausgerichteten Spalten (Aufgebot · Spielsystem · Kader) — auf Mobile
   horizontal scrollbar statt abgeschnitten. */
.lv__scroll { overflow-x: auto; }
/* Aufgebot-Liste hat 7 Spalten (inkl. Spielsystem) → breiter, damit nichts abgeschnitten wird */
.lv--lineup { max-width: 1060px; }
.lv__hrow, .lv__row--aufgebot {
  display: grid;
  grid-template-columns: 108px minmax(120px, 1.6fr) minmax(90px, 1fr) minmax(90px, 1fr) 60px minmax(96px, 1fr) 132px;
  gap: var(--sp-3); align-items: baseline;
}
.lv__hrow--sys, .lv__row--sys { display: grid; gap: var(--sp-3); align-items: baseline;
  grid-template-columns: minmax(160px, 2fr) 120px 130px 110px; }
.lv__hrow--perf, .lv__row--perf { display: grid; gap: var(--sp-3); align-items: baseline;
  grid-template-columns: minmax(160px, 2fr) 140px 120px 120px; }
.lv__row--perf:hover .lv__c, .lv__item:hover .lv__row--perf .lv__c { color: #fff; }
.lv__hrow--person, .lv__prow { display: grid !important; gap: var(--sp-3); align-items: baseline;
  grid-template-columns: 1fr 1fr; }
/* Kader-Liste mit Spalten Stammspieler/Rolle/(Position) — nutzt die volle Breite */
.lv.lv--kader { max-width: 940px; }
.lv.lv--kader-sys { max-width: 1280px; }
.lv__hrow--kader, .lv__prow--kader { grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.4fr) 132px 190px !important; align-items: center !important; }
.lv__hrow--kader-sys, .lv__prow--kader-sys { grid-template-columns: minmax(150px, 1.3fr) minmax(130px, 1.3fr) 132px 184px minmax(250px, 2.5fr) !important; align-items: center !important; }
/* Spaltenüberschriften der Kader-Liste nie abschneiden */
.lv__hrow--kader .lv__c { overflow: visible; text-overflow: clip; }
.lv__namelink { color: inherit; text-decoration: none; cursor: pointer; }
.lv__namelink:hover { text-decoration: underline; }
/* Kader-Zeile wird blau NUR bei Hover, Auswahl (lv-sel) oder Klick (:active) — sonst NIE.
   Nur die Namens-Links werden weiss; Formularelemente (Select/Dropdown/Toggle) behalten ihren
   eigenen hellen Hintergrund und bleiben lesbar. */
.lv__prow--kader:hover, .lv__item:hover .lv__prow--kader,
.lv__prow--kader:active,
.lv__prow--kader.lv-sel { background: var(--c-fill) !important; }
.lv__prow--kader:hover .lv__namelink, .lv__item:hover .lv__prow--kader .lv__namelink,
.lv__prow--kader:active .lv__namelink,
.lv__prow--kader.lv-sel .lv__namelink { color: #fff !important; }
.lv__stammtog { font: inherit; font-size: var(--fs-micro); font-weight: 700; border: 1px solid var(--c-line); background: var(--c-white);
  color: var(--c-muted); border-radius: 10px; padding: 1px 9px; cursor: pointer; }
.lv__stammtog.is-on { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.lv__roleedit { width: 100%; font-size: var(--fs-sm); padding: 2px 4px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-white); }
.lv__c--pos { display: flex; align-items: center; gap: 4px; overflow: visible; white-space: normal; }
/* Kader-Tabelle: Ein-/Ausgrenzen als zwei Multi-Select-Dropdowns je Zeile */
.lv__c--pos2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; overflow: visible; }
/* Spielsystem-Filter direkt über den Ein-/Ausgrenz-Spalten (wie Gruppen-Kopf der grossen Analyse-Tabelle) */
.lv__hrow--kader-sys[data-syshead] { align-items: end !important; }
.lv__possyshead { display: flex; flex-direction: column; gap: 5px; align-self: stretch; justify-content: flex-end; overflow: visible; }
.lv__possys { display: flex; align-items: center; gap: 6px; }
.lv__possys-lbl { font-size: var(--fs-micro); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lv__possyshead .lv__syssel { font: inherit; font-size: var(--fs-xs); padding: 2px 5px; border: 1px solid var(--c-line-strong); background: var(--c-white); }
.lv__pos2h { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; }
.lv__pos2h > span { font-size: var(--fs-micro); color: var(--c-muted); line-height: 1.2; }
.lv__posnosys { display: flex; align-items: center; font-size: var(--fs-xs); }
.posdd { position: relative; min-width: 0; }
.posdd__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 3px 6px; background: var(--c-white); color: var(--c-black); min-height: 26px; font-size: var(--fs-xs); }
.posdd__sum::-webkit-details-marker { display: none; }
.posdd__caret { margin-left: auto; color: var(--c-muted); flex: 0 0 auto; font-size: 9px; }
.posdd__tag { background: var(--c-fill-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 0 4px; white-space: nowrap; }
.posdd--in .posdd__tag { border-color: var(--color-primary); color: var(--color-primary); }   /* Erzwingen = blau */
.posdd--x .posdd__tag { border-color: var(--slate-border); color: var(--slate); border-style: dashed; }    /* Verbieten = slate, gestrichelt */
/* Kombinations-Chip: je Kombination „Mannschaft · TX · Position" ein eigenes umrandetes Element */
.posdd__combo { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 1px 5px; white-space: nowrap; background: var(--c-white); color: var(--c-black); font-size: var(--fs-micro); }
.posdd--in .posdd__combo { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.posdd--x .posdd__combo { border-color: var(--slate-border); color: var(--slate); background: var(--slate-soft); border-style: dashed; }
.posdd__combo-x { border: 0; background: transparent; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px 0 5px; margin: 0; color: inherit; opacity: .55; }
.posdd__combo-x:hover { opacity: 1; }
/* „Speichern" je Dropdown, unten klebend */
.posdd__save { position: sticky; bottom: -4px; background: var(--c-white); border-top: 1px solid var(--c-line);
  margin: 4px -4px -4px; padding: 6px; display: flex; justify-content: flex-end; }
/* Ein-/Ausgrenz-Dropdowns im Spieler-Formular (zwei Spalten nebeneinander, volle Breite) */
.pform__pps { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }
.pform__ppscol { flex: 1 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 5px; }
.pform__ppscol .posdd { width: 100%; }
.pform__ppslbl { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); }
.pform__ppsnote { margin-top: 6px; font-size: var(--fs-xs); }
.pform__ppssys { margin: 16px 0 2px; }
.pform__ppssysname { font-size: .98rem; margin-bottom: 7px; padding-bottom: 4px; border-bottom: 1px solid var(--c-line); }
.posdd__addlbl { color: var(--c-accent, var(--danger)); }   /* Leerzustand = anklickbarer „Position erzwingen/verbieten" */
.posdd--in .posdd__addlbl { color: var(--color-primary); }   /* erzwingen = blau (wie die Chips) */
.posdd--x .posdd__addlbl { color: var(--slate); }    /* verbieten = slate (wie die Chips) */
.posdd[open] .posdd__sum { border-color: var(--c-fill); }
/* position:FIXED (nicht absolute) + per JS platziert → entkommt dem overflow:auto von #tab-content,
   sonst wird das Menü abgeschnitten und ist unsichtbar (wirkt, als ginge das Dropdown nicht auf). */
.posdd__menu { position: fixed; z-index: 200; min-width: 210px; max-width: min(340px, 92vw); max-height: 300px; overflow: auto;
  background: var(--c-white); color: var(--c-black); border: 1px solid var(--c-line-strong);
  box-shadow: 0 6px 20px rgba(11, 24, 56,.18); border-radius: 4px; padding: 4px; }
/* Menü-Text IMMER themen-eigen (nicht das vom Hover geerbte Weiss der Zeile → sonst unlesbar im Light-Mode) */
.posdd__menu, .posdd__nsum, .posdd__opt { color: var(--c-black); }
.posdd__opt { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 20px; font-size: var(--fs-sm); cursor: pointer; border-radius: var(--radius-sm); white-space: nowrap; }
.posdd__opt:hover { background: var(--c-fill-soft); }
.posdd__empty { display: block; padding: 4px 6px; }
.posdd__tsn { font-size: var(--fs-micro); font-weight: 400; opacity: .85; }
/* Ausklappbarer Baum im Dropdown: Formation → (Mannschaft →) Teilspiel → Position */
.posdd__node { border: 0; }
.posdd__nsum { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); padding: 3px 6px; border-radius: var(--radius-sm); white-space: nowrap; }
.posdd__nsum::-webkit-details-marker { display: none; }
.posdd__nsum::before { content: "▸"; font-size: 9px; color: var(--c-muted); width: 8px; flex: 0 0 auto; }
.posdd__node[open] > .posdd__nsum::before { content: "▾"; }
.posdd__nsum:hover { background: var(--c-fill-soft); }
.posdd__node--form > .posdd__nsum { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.posdd__node--mann > .posdd__nsum { font-weight: 600; }
/* Gesperrte Mannschaft (fixe Teams, Spieler schon woanders erzwungen): grau, kursiv, nicht anklickbar. */
.posdd__node--blocked { cursor: not-allowed; }
.posdd__nsum--blocked { font-weight: 600; color: var(--c-muted); font-style: italic; cursor: not-allowed; opacity: .75; }
.posdd__nsum--blocked::before { content: "▸"; font-size: 9px; color: var(--c-muted); width: 8px; flex: 0 0 auto; }
.posdd__node--blocked:hover > .posdd__nsum--blocked { background: transparent; }
/* Hinweis bei gesperrter Mannschaft: kantig wie die übrigen Warnungen (weiss, schwarze Linie,
   roter Akzent links), voll umbrechend und gut lesbar. */
.posdd__blockwarn { background: var(--c-white); color: var(--c-black);
  border: 1px solid var(--c-line-strong); border-left: 3px solid var(--danger);
  padding: 7px 9px; margin: 2px 2px 7px; font-size: var(--fs-sm); line-height: 1.45;
  white-space: normal; overflow-wrap: anywhere; }
.posdd__nbody { padding-left: 9px; border-left: 1px solid var(--c-line); margin-left: 9px; }
.posdd__nbody .posdd__opt { padding-left: 6px; }
.lv__postags { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.lv__postag { font-size: var(--fs-micro); background: var(--c-fill-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 0 5px; white-space: nowrap; }
.lv__postag--f { border-color: var(--c-fill); }  /* (alt) erzwungene Position */
.lv__postag--in { border-color: var(--c-fill); color: var(--c-fill); font-weight: 600; }  /* eingegrenzt (Pflicht) — blauer Rahmen + ▸-Marker */
.lv__postag--x { border-color: var(--slate-border); color: var(--slate); border-style: dashed; text-decoration: line-through; }  /* verboten (Hard) — slate, gestrichelt */
.lv__posedit { flex: 0 0 auto; border: 0; background: transparent; color: var(--c-fill); cursor: pointer; font-size: 13px; padding: 0 3px; }
.lv__kbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 0 var(--sp-2) var(--sp-2); }
.lv__syssel-lbl { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.lv__syssel { width: auto; font-size: var(--fs-sm); padding: 2px 6px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.lv__selgrp { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-micro); color: var(--c-muted); }
.lv__pospop { position: fixed; z-index: 200; background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: 6px; box-shadow: 0 8px 26px rgba(11, 24, 56,0.18);
  padding: var(--sp-3); width: 280px; max-width: 92vw; }
.lv__pospop-h { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.lv__pospop-list { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }
.lv__pospop-list label { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); padding: 2px 3px; cursor: pointer; }
.lv__pospop-act { display: flex; gap: var(--sp-2); }
.lv__hrow { padding: 6px var(--sp-2); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-muted); border-bottom: 1px solid var(--c-line-strong); }
.lv__c { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
.lv__c--date { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lv__c--title, .lv__c--nn { font-weight: 700; }
.lv__c--vn { color: var(--c-muted); }
.lv__stamm { color: var(--c-fill); font-weight: 700; }
.lv__selsep { color: var(--c-muted); font-size: var(--fs-micro); margin-left: 6px; }
.pform__stamm { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; max-width: 640px; }
.pform__stamm input { margin-top: 3px; flex: 0 0 auto; }
.sys__stammnote { margin-top: var(--sp-3); font-size: var(--fs-sm); max-width: 720px; }
.lv__c--status { overflow: visible; }
.lv__row--aufgebot:hover .lv__c, .lv__item:hover .lv__row--aufgebot .lv__c,
.lv__row--sys:hover .lv__c, .lv__item:hover .lv__prow .lv__c { color: #fff; }
/* Aufgebot-Versandstatus (Liste + Detail) */
.lv__sent { white-space: nowrap; font-size: var(--fs-micro); font-weight: 700; padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--c-line); color: var(--c-muted); background: transparent; }
.lv__sent--yes { color: var(--success); border-color: var(--success); background: rgba(46, 204, 64, 0.12); }
.aufgebot__status { margin-left: var(--sp-2); text-transform: none; letter-spacing: 0; }
/* Mobile: volle Lesbarkeit über horizontales Scrollen INNERHALB der Liste (nichts wird abgeschnitten) */
@media (max-width: 720px) {
  .lv__hrow, .lv__row--aufgebot { grid-template-columns: 100px 170px 130px 130px 64px 120px 128px; min-width: 824px; }
  .lv__hrow--sys, .lv__row--sys { grid-template-columns: minmax(150px, 1fr) 110px 130px 110px; min-width: 520px; }
  .lv__hrow--perf, .lv__row--perf { grid-template-columns: minmax(150px, 1fr) 120px 110px 110px; min-width: 520px; }
}

/* Frei gestaltbarer Leistungstest (Editor) */
.perfc__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.perfc__title { font-size: var(--fs-lg); font-weight: 700; border: 1px solid var(--c-line); border-radius: 4px; padding: 6px 10px; min-width: 260px; flex: 1 1 260px; }
.perfc__datel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-muted); }
.perfc__spacer { flex: 1 1 auto; }
.perfc__hint { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.perfc__hint code { background: var(--c-fill-soft); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 0.92em; }
.perfc__sheetwrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: 4px; }
.perfc__table { border-collapse: collapse; table-layout: fixed; }
.perfc__table th, .perfc__table td { border: 1px solid var(--c-line); padding: 0; vertical-align: top; }
.perfc__namecol { background: var(--c-fill-soft); text-align: left; padding: 6px 10px !important; font-size: var(--fs-sm); position: sticky; left: 0; z-index: 1; }
.perfc__namecell { background: var(--c-white); padding: 5px 10px !important; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; z-index: 1; }
.perfc__colh { position: relative; padding: 4px 5px !important; background: rgba(128,128,128,0.06); }
.perfc__colh--f { background: var(--c-fill-soft); }
.perfc__coltop { display: flex; align-items: center; gap: 4px; }
.perfc__collet { font-size: var(--fs-micro); font-weight: 700; color: var(--c-fill); flex: 0 0 auto; }
.perfc__colname { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-sm); border: 1px solid transparent; background: transparent; padding: 2px 3px; border-radius: var(--radius-sm); }
.perfc__colname:focus { border-color: var(--c-line); background: var(--c-white); }
.perfc__colnamero { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 3px; }
.perfc__coldel { flex: 0 0 auto; border: 0; background: transparent; color: var(--c-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; }
.perfc__coldel:hover { color: var(--danger); }
/* Spaltenbreite am rechten Rand ziehen */
.perfc__resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.perfc__resize:hover { background: var(--c-fill); opacity: 0.4; }
.perfc__plusth { padding: 0 !important; text-align: center; background: rgba(128,128,128,0.06); }
.perfc__plus { border: 0; background: transparent; color: var(--c-fill); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; width: 100%; height: 100%; }
.perfc__plus:hover { background: var(--c-fill); color: #fff; }
.perfc__cell { padding: 0 !important; }
.perfc__cell--f { background: var(--c-fill-soft); }
.perfc__cell--plus { background: rgba(128,128,128,0.04); }
.perfc__val { width: 100%; border: 0; background: transparent; padding: 5px 8px; font-size: var(--fs-sm); text-align: right; box-sizing: border-box; }
.perfc__val:focus { outline: 2px solid var(--c-fill); outline-offset: -2px; background: var(--c-white); text-align: left; }
.perfc__cell--f .perfc__val { color: var(--c-fill); font-weight: 700; }
.perfc__cat { font-size: var(--fs-sm); color: var(--c-muted); }
/* Kategorie-Liste (Leistungstests) */
.perfcat { margin: 0 0 var(--sp-4); border: 1px solid var(--c-line); border-radius: 6px; overflow: hidden; }
.perfcat__head { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; background: rgba(128,128,128,0.06); border-bottom: 1px solid var(--c-line); }
.perfcat__name { font-weight: 700; font-size: var(--fs-md); color: var(--c-black); text-decoration: none; cursor: pointer; }
.perfcat__name:hover { text-decoration: underline; }
.perfcat__meta { font-size: var(--fs-micro); color: var(--c-muted); }
.perfcat__spacer { flex: 1 1 auto; }
.perfcat__del { flex: 0 0 auto; }
.perfcat__tests { list-style: none; margin: 0; padding: 0; }
.perfcat__test { display: flex; align-items: center; border-bottom: 1px solid var(--c-line); }
.perfcat__test:last-child { border-bottom: 0; }
.perfcat__testlink { flex: 1 1 auto; display: flex; gap: var(--sp-3); align-items: baseline; padding: 7px 12px; text-decoration: none; color: inherit; cursor: pointer; border-radius: var(--radius-md); }
.perfcat__testlink:hover { background: var(--c-hover); }
.perfcat__testdate { color: var(--c-muted); font-variant-numeric: tabular-nums; min-width: 92px; }
.perfcat__testtitle { font-weight: 600; }
.perfcat__empty { padding: 8px 12px; font-size: var(--fs-sm); }
.perfc__ai { margin: 0 0 var(--sp-3); }
.perfc__aibtn { display: inline-block; list-style: none; cursor: pointer; }
.perfc__aibtn::-webkit-details-marker { display: none; }
.perfc__aibox { max-width: 640px; margin-top: var(--sp-2); border: 1px solid var(--c-line); border-radius: 6px; padding: var(--sp-3); background: var(--c-fill-soft); }
.perfc__aibox p { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.perfc__airow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.perfc__aistatus { margin-top: var(--sp-2); font-size: var(--fs-sm); }

/* Aufstellungs-Zeile mit Lösch-Papierkorb (erscheint beim Hovern) */
.lv__item { position: relative; }
.lv__item:hover .lv__row { background: var(--c-fill); color: #fff; }
.lv__item:hover .lv__row .lv__sub { color: #fff; }
.lv__del {
  position: absolute; top: 0; right: 0; height: 100%; z-index: 2;
  display: none; align-items: center; padding: 0 var(--sp-3);
  background: none; border: none; cursor: pointer; color: #fff;
}
.lv__item:hover .lv__del { display: flex; }
.lv__del:hover { background: var(--c-white); color: var(--c-black); }
.lv__del svg { display: block; }

/* Personen-Zeilen: Drag & Drop zwischen Kategorien */
.lv__prow { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-user-drag: element; }
.lv__prow:active { cursor: grabbing; }
.lv__prow.dragging { opacity: 0.4; }
/* Kader-Mehrfachauswahl → Rollen setzen */
.lv__selctrl { margin: 0 var(--sp-2) var(--sp-3); }
/* Mehrere-bearbeiten-Leiste: kantig (scharfe Ecken), Schwarz/Weiss/Blau, klar strukturiert */
.lv__selbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); padding: 6px var(--sp-3);
  border: 2px solid var(--c-black); border-radius: var(--radius-sm); background: var(--c-white); }
.lv__selbar[hidden] { display: none; }   /* das hidden-Attribut (lvEnter/lvExit) muss die display:flex-Regel schlagen */
.lv__selcount { font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); margin-right: var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; }
.lv__selcount b { color: var(--c-fill); }
.lv__selgrp { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); color: var(--c-black); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.lv__selhint { font-size: var(--fs-micro); margin: 4px 0 0; color: var(--c-black); font-weight: 500; }
/* Spielsystem-Wahl (für Positionen) in der Kader-Leiste hervorheben */
.lv__syssel-lbl { font-weight: 700; color: var(--c-black); }
select.lv__syssel { border: 1px solid var(--c-line-strong); font-weight: 700; }
select.lv__syssel:focus { border-color: var(--c-fill); }
/* Positions-Popover: Kandidat (Häkchen) vs. Erzwungen (blauer „erzw."-Schalter) */
.lv__pospop-legend { font-size: var(--fs-micro); margin-bottom: var(--sp-2); }
.lv__pospop-row { justify-content: flex-start; }
.lv__pospop-name { flex: 1; min-width: 0; }
.lv__pospop-force, .lv__pospop-in { font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--c-muted); padding: 1px 6px; cursor: pointer; }
.lv__pospop-force:hover, .lv__pospop-in:hover { border-color: var(--c-fill); color: var(--c-fill); }
.lv__pospop-force.is-on, .lv__pospop-in.is-on { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.lv__pospop-forbid { font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--c-muted); padding: 1px 6px; cursor: pointer; }
.lv__pospop-forbid:hover { border-color: var(--danger); color: var(--danger); }
.lv__pospop-forbid.is-on { background: var(--danger); color: #fff; border-color: var(--danger); }
.lv-selmode .lv__prow { cursor: pointer; -webkit-user-drag: none; }
.lv__prow.lv-sel, .lv__prow.lv-sel .lv__c { background: var(--c-fill); color: #fff; }
.lv__marquee { border: 1px solid var(--c-fill); background: rgba(0, 87, 255, 0.12); pointer-events: none; z-index: 90; }
.lv__list { min-height: 42px; }   /* bequeme Ablagefläche, auch bei leerer Kategorie */
.lv__drop.cat-drop-ok { outline: 2px dashed var(--c-fill); outline-offset: -2px; background: var(--c-fill-soft); }

.lv__hint { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 var(--sp-4); max-width: 60ch; }

/* --- Spielsystem-Editor ------------------------------------------------- */
.sys { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); max-width: 1460px; }
.sys__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sys__name { flex: 1; min-width: 200px; font-size: var(--fs-lg); font-weight: 700; border: none; border-bottom: 2px solid var(--c-line-strong); padding: 4px 2px; background: none; color: var(--c-black); }
.sys__name:focus { outline: none; border-bottom-color: var(--c-fill); }
.sys__hbtns { display: flex; gap: var(--sp-2); }
.sys__forms { display: flex; flex-direction: column; gap: var(--sp-4); }
.sys__legend { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; max-width: 66ch; }
/* Maximale Systematische Rotation: Button + Gauge-Icon + ausklappbare Erklärung. */
.maxrot { margin: 14px 0; max-width: 620px; border: 1px solid var(--c-line); border-radius: 6px; padding: 8px 14px; }
.maxrot__sum { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.maxrot__sum::-webkit-details-marker { display: none; }
.maxrot__lbl { font-weight: 700; font-size: var(--fs-sm); }
.maxrot__gaugewrap { flex: 0 0 auto; display: inline-flex; }
.maxrot__gauge { display: block; }
.maxrot__na { font-size: 1.1rem; }
.maxrot__hint { margin-left: auto; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 2px; }
.maxrot__body { margin-top: 10px; border-top: 1px solid var(--c-line); padding-top: 8px; font-size: var(--fs-sm); }
.maxrot__body p { margin: 0 0 6px; }
.maxrot__body p:last-child { margin-bottom: 0; }
.maxrot__interp { background: var(--color-primary-soft); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.5; }
.maxrot__tbl { border-collapse: collapse; margin: 6px 0 8px; font-size: var(--fs-sm); }
.maxrot__tbl th, .maxrot__tbl td { border: 1px solid var(--c-line); padding: 3px 12px; text-align: left; }
.maxrot__sw { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: middle; }

/* Erfüllungsgrade des relevanten Aufgebots auf der Aufstellungs-Karte/-Kachel (neutral-blaue Ringe).
   Nach Algorithmus gruppiert: links Aufgebot, rechts Positionszuteilung; jeder Ring ist anklickbar. */
.erfg__bar { margin-top: 10px; }
.erfg__plus { font-weight: 400; }
.erfg__cols { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 10px; }
.erfg__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Trennlinie NUR wenn die Positions-Spalte der Aufgebot-Spalte folgt (nicht als einzige Spalte). */
.erfg__col--pos:not(:first-child) { padding-left: 26px; border-left: 1px solid var(--c-line); }
.erfg__colh { font-weight: 700; font-size: var(--fs-sm); color: var(--c-black); }
.erfg__row { display: flex; flex-wrap: wrap; gap: 14px; }
.erfg__cardwrap { position: relative; display: flex; }
.erfg__card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; text-align: center; text-decoration: none; cursor: pointer; }
.erfg__gauge { display: block; }
.erfg__lbl { font-size: var(--fs-micro); line-height: 1.2; color: var(--c-muted); }
a.erfg__card:hover .erfg__lbl { color: var(--c-fill); }
a.erfg__card:hover .erfg__gauge { filter: brightness(1.06); }
/* „×" zum direkten Entfernen EINES Erfüllungsgrads (nur in den Charts, per Hover eingeblendet). */
.erfg__x { position: absolute; top: -4px; right: 4px; width: 18px; height: 18px; padding: 0;
  display: none; align-items: center; justify-content: center; border-radius: var(--radius-full);
  border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-muted);
  font-size: 14px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.erfg__cardwrap:hover .erfg__x, .erfg__x:focus-visible { display: flex; }
.erfg__x:hover { border-color: var(--danger); color: var(--danger); }
.erfg__note { margin-top: 8px; font-size: var(--fs-sm); }
@media (max-width: 620px) { .erfg__col--pos:not(:first-child) { padding-left: 0; border-left: none; } }
/* Home-Kachel ist schmal: Gruppen untereinander statt nebeneinander, Kreise exakt links-aligned
   (keine Einrückung/Trennlinie der Positions-Spalte), damit die Ringe genau untereinander stehen. */
.home__chart .erfg__cols { flex-direction: column; gap: 16px; }
.home__chart .erfg__col--pos:not(:first-child) { padding-left: 0; border-left: none; }
/* Auswahl-Popup */
.erfpick { max-width: 560px; }
.erfpick__sub { margin: 2px 0 10px; font-size: var(--fs-sm); }
.erfpick__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.erfpick__grph { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 6px; }
.erfpick__opt { display: flex; align-items: center; gap: 6px; padding: 3px 2px; font-size: var(--fs-sm); }
@media (max-width: 560px) { .erfpick__grid { grid-template-columns: 1fr; } }
/* Einheitliche Erfüllungsgrad-Detail-Kopfzeile (grosser Kreis + Interpretation) + Konfig-Ort + Verteilung. */
.erfd__head { display: flex; align-items: center; gap: 18px; margin: 10px 0 8px; }
.erfd__gaugewrap { flex: 0 0 auto; display: inline-flex; }
.erfd__interp { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.erfd__def { margin-top: 4px; }
.erfd__config { margin: 16px 0 4px; font-size: var(--fs-sm); }
.erfd__cfglink { color: var(--c-fill); text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; cursor: pointer; }
.erfd__dist { margin: 6px 0 12px; font-size: var(--fs-sm); }
.erfd__dist-h { font-weight: 700; }
.sys__stamm { margin-top: var(--sp-4); border: 1px solid var(--c-line); border-radius: 4px; padding: var(--sp-3); max-width: 720px; }
.sys__stammhead { font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.sys__stammcount { color: var(--c-fill); font-weight: 700; margin-left: 4px; }
.sys__stammhint { font-size: var(--fs-micro); margin: var(--sp-2) 0; }
.sys__stammlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; }
.sys__stammpl { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 4px; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; }
.sys__stammpl.is-on { background: var(--c-fill-soft); font-weight: 600; }
.sysf { border: 1px solid var(--c-line-strong); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.sys__error { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; }
.sysf__teams { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sysf__teamsl { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }
.sysf__tname { border: 1px solid var(--c-line); padding: 3px 6px; font-size: var(--fs-xs); width: 130px; background: var(--c-white); }
.sysf__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sysf__name { flex: 1; min-width: 160px; font-weight: 600; border: 1px solid var(--c-line); padding: 5px 8px; background: var(--c-white); color: var(--c-black); }
.sysf__num { font-size: var(--fs-xs); color: var(--c-muted); display: inline-flex; align-items: center; gap: 4px; }
.sysf__num input { width: 54px; border: 1px solid var(--c-line); padding: 4px 6px; text-align: center; }
.sysf__ftlbl { font-size: var(--fs-xs); color: var(--c-muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.sysf__count { font-size: var(--fs-xs); color: var(--c-black); font-weight: 600; white-space: nowrap; }
.sysf__rm { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--c-muted); padding: 0 4px; }
.sysf__rm:hover { color: var(--c-black); }
.sysf__body { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-start; }
/* Editor-Spielfeld: gleiches Grün + gelbe Boxen wie das 7vs7-Interface, Positionen per Drag&Drop */
.sysf__fieldwrap { display: flex; gap: var(--sp-2); flex: 0 0 auto; align-items: stretch; }
/* Editor-Matrix: gross & quadratisch → echtes 15×15-Raster aus grossen Pixeln, deutliche Linien */
.spf.spf--edit { width: 620px; max-width: 88vw; aspect-ratio: 1 / 1; cursor: crosshair;
  background-image: repeating-linear-gradient(to right, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 1px, transparent 1px, transparent calc(100% / 15)),
                    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 1px, transparent 1px, transparent calc(100% / 15)); }
.spf--edit .spf__box { cursor: grab; font-size: 15px; padding: 4px 8px; }
.spf--edit .spf__box.dragging { opacity: .4; }
.spf__box--num { min-width: 26px; }
.spf__numedit { width: 40px; text-align: center; font-size: 14px; font-weight: 700; border: 1px solid var(--c-line-strong); padding: 1px; -moz-appearance: textfield; }
/* Editor-Feld: Auswahl, Doppelnummer, Rahmen-Auswahl, Inline-Löschen, Typ-Leiste */
.sys__hist { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.sysf__fieldcol { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.spf.spf--edit .spf__box.is-sel { box-shadow: 0 0 0 3px var(--c-fill); z-index: 2; }
.spf.spf--edit .spf__box--dup { box-shadow: 0 0 0 3px var(--danger); }
.spf.spf--edit .spf__box.is-sel.spf__box--dup { box-shadow: 0 0 0 3px var(--danger), 0 0 0 5px var(--c-fill); }
.spf.spf--edit .spf__box--editing { overflow: visible; max-width: none; white-space: nowrap; z-index: 5; display: flex; align-items: center; }
.spf__marquee { position: absolute; border: 1px dashed var(--c-fill); background: rgba(47,111,237,.14); pointer-events: none; z-index: 3; }
.spf__boxdel { border: none; background: var(--danger); color: #fff; font-weight: 700; cursor: pointer; margin-left: 3px; padding: 0 5px; line-height: 1.4; }
.sysf__typebar { align-items: center; gap: 6px; flex-wrap: wrap; background: var(--c-surface-2, #f7f7f7); border: 1px solid var(--c-line); padding: 4px 6px; max-width: 620px; }
.sysf__seltxt { font-size: var(--fs-xs); color: var(--c-black); }
.sysf__tbtn, .sysf__tdel { border: 1px solid var(--c-line); background: var(--c-white); cursor: pointer; font-size: var(--fs-xs); padding: 3px 8px; color: var(--c-black); }
.sysf__tbtn:hover { background: var(--c-fill-soft); }
.sysf__tdel { margin-left: auto; color: var(--danger); }
.sysf__tdel:hover { background: var(--danger-soft); }
/* Spiegel-Modus („Seiten spiegeln"): rechte Hälfte abgedunkelt + gesperrt, Mittellinie */
.spf__mirmask { position: absolute; top: 0; left: 53.333%; width: 46.667%; height: 100%; background: rgba(20,20,20,.30); pointer-events: none; z-index: 4; }
.spf__mirline { position: absolute; top: 0; left: 50%; width: 0; height: 100%; border-left: 1px dashed rgba(0,0,0,.5); pointer-events: none; z-index: 4; }
.spf.spf--edit .spf__box--mirror { cursor: default; opacity: .92; }
.sysf__mirbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sysf__optbtn { border: 1px solid var(--c-line); background: var(--c-white); cursor: pointer; font-size: var(--fs-xs); padding: 4px 9px; color: var(--c-black); }
.sysf__optbtn:hover { background: var(--c-fill-soft); }
.sysf__mirtoggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-line); background: var(--c-white); cursor: pointer; font-size: var(--fs-xs); padding: 4px 9px; color: var(--c-black); }
.sysf__mirtoggle:hover { background: var(--c-fill-soft); }
.sysf__mirtoggle.is-on { background: var(--c-black); color: var(--c-white); border-color: var(--c-black); }
.sysf__mirhint { font-size: var(--fs-xs); color: var(--c-muted); }
.spf-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--c-line); padding: var(--sp-2); background: var(--c-surface-2, #f7f7f7); width: 88px; }
.spf-bar__t { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); text-align: center; }
.spf-bar__chip { width: 40px; height: 30px; background: #eaa83c; border: 1px solid rgba(0,0,0,.35); color: #111; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: grab; }
.spf-bar__chip:active { cursor: grabbing; }
.spf-bar__h { font-size: 10px; color: var(--c-muted); text-align: center; line-height: 1.25; }
.sysf__poslist { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 4px; }
.sysf__empty { color: var(--c-faint); font-size: var(--fs-sm); padding: 6px 0; }
/* Pflicht/optional-Hinweis über den Positionen */
.sysf__poslegend { font-size: var(--fs-xs); color: var(--c-muted); padding: 2px 0 4px; }
.sysf__reqlbl { color: var(--c-black); font-weight: 700; }
.sysf__req { color: var(--danger); font-weight: 700; }
.sysf__req-in { border-color: var(--c-line-strong) !important; }   /* Pflichtfelder (Name/Typ) leicht betont */
.sysf__pos { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; row-gap: 4px; }
.sysf__pnum { flex: 0 0 auto; width: 42px; border: 1px solid var(--c-line); padding: 4px 4px; text-align: center; font-weight: 700; background: #eaa83c; color: #111; }
.sysf__pname { flex: 1 1 130px; min-width: 90px; max-width: 300px; border: 1px solid var(--c-line); padding: 4px 6px; }
.sysf__prole { border: 1px solid var(--c-line); padding: 4px 6px; background: var(--c-white); }
.sysf__prm { border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--c-muted); padding: 0 4px; }
.sysf__prm:hover { color: var(--c-black); }
.sysf__poswrap { display: flex; flex-direction: column; }
.sysf__candbtn { border: 1px solid var(--c-line); background: var(--c-white); cursor: pointer; font-size: var(--fs-xs); padding: 3px 7px; white-space: nowrap; color: var(--c-black); }
.sysf__candbtn:hover { background: var(--c-fill-soft); }
.sysf__candbtn--in { color: var(--color-primary); }               /* Erzwingen = blau */
.sysf__candbtn--in:hover { background: rgba(8,102,245,0.10); }
.sysf__cand { border: 1px solid var(--c-line); border-top: none; padding: var(--sp-2) var(--sp-2) var(--sp-3); background: var(--c-surface-2, #f7f7f7); margin-bottom: 4px; }
.sysf__candttl, .sysf__fixttl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; color: var(--c-muted); margin: 4px 0; }
.sysf__fixttl { margin-top: var(--sp-3); }
/* Spieler im Positions-Dropdown ALLE untereinander (eine Spalte), Rolle rechts daneben */
.sysf__candgrid { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow: auto; }
.sysf__candchk { justify-content: flex-start; }
.sysf__candchk em { margin-left: auto; padding-left: 12px; }
.sysf__candchk { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); padding: 2px 3px; cursor: pointer; }
.sysf__candchk.is-on { background: var(--c-fill-soft); }
.sysf__candchk em { color: var(--c-muted); font-style: normal; font-size: 10px; }
/* Ausgrenzen-Variante (rot) + Teilspiel-Zwischenüberschrift im Positions-Dropdown */
.sysf__candbtn--x { color: var(--slate); }               /* Verbieten = slate */
.sysf__candbtn--x:hover { background: var(--slate-soft); }
.sysf__cand--x { border-color: var(--slate-border); background: var(--slate-soft); }
.sysf__candts { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); font-weight: 700; margin: 6px 0 2px; }
.sysf__cand--x .sysf__candchk.is-on { background: #e2e8f0; }
.sysf__fixrow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sysf__fixsel { border: 1px solid var(--c-line); padding: 4px 6px; background: var(--c-white); }
.sysf__fixrange { font-size: var(--fs-xs); color: var(--c-black); }
.sysf__fixrange input { width: 46px; border: 1px solid var(--c-line); padding: 3px 4px; text-align: center; }
.sysf__fbench { font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 4px; }
/* SquadOS-Feinschliff Spielsystem-Editor: weichere Ecken statt kantig (neues Design System). */
.spf, .spf.spf--edit { border-radius: var(--radius-md); }
.spf__box, .spf-bar__chip, .spf__numedit, .spf__boxdel, .sysf__tname, .sysf__name,
.sysf__num input, .sysf__pnum, .sysf__pname, .sysf__prole, .sysf__fixsel, .sysf__fixrange input,
.sysf__tbtn, .sysf__tdel, .sysf__optbtn, .sysf__mirtoggle, .sysf__candbtn { border-radius: var(--radius-sm); }
.sysf__typebar, .spf-bar, .sysf__cand { border-radius: var(--radius-md); }
.sysf__fixerr { font-size: var(--fs-xs); margin-top: 6px; padding: 4px 6px; }

/* Spieler-Formular: Positions-Kandidaturen + erzwungene Position */
.pps__intro { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-3); line-height: 1.5; }
.pps__root { display: flex; flex-direction: column; gap: var(--sp-4); }
.pps__field { border: 1px solid var(--c-line); padding: var(--sp-3); border-radius: var(--radius); }
.pps__field--in { border-color: var(--color-primary); background: var(--color-primary-soft); }   /* Erzwingen — blau, keine Seitenlinie */
.pps__field--x { border-color: var(--slate-border); border-style: dashed; background: var(--slate-soft); }   /* Verbieten — slate, gestrichelt */
.pps__field--off { opacity: .5; }
.pps__field--off .pps__checks, .pps__field--off .pps__rowctl { pointer-events: none; }
.pps__syshead { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.pps__syslbl { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); }
.pps__syshead select { border: 1px solid var(--c-line); padding: 4px 6px; background: var(--c-white); font: inherit; }
.pps__lbl { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.pps__off { color: var(--c-muted); font-weight: 400; font-size: var(--fs-xs); }
.pps__rowctl { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pps__rowctl select, .pps__rowctl input[type=number] { border: 1px solid var(--c-line); padding: 4px 6px; background: var(--c-white); }
.pps__rowctl input[type=number] { width: 52px; text-align: center; }
/* Kandidaten-Positionen als VERTIKALE Liste (nach Positions-Nummer sortiert) */
.pps__checks { display: flex; flex-direction: column; gap: 1px; max-width: 480px; }
.pps__chk { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); padding: 3px 5px; cursor: pointer; border-radius: var(--radius-sm); }
.pps__chk:hover { background: var(--c-hover); }
.pps__chklbl { flex: 1 1 auto; }
.pps__chk em { color: var(--c-muted); font-style: normal; font-size: var(--fs-xs); flex: 0 0 auto; }
/* Position-verbieten: Teilspiel-Range je verbotener Position (kompakt) */
.pps__chk--conflict { background: #fdece8; }
.pps__conflict { flex: 1 1 100%; font-size: var(--fs-xs); color: var(--danger); }
.pps__xrange { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-muted); display: inline-flex; align-items: center; gap: 3px; }
.pps__xrange input[type=number] { width: 40px; text-align: center; border: 1px solid var(--c-line); padding: 2px 3px; background: var(--c-white); }
.pps__summ { margin-top: var(--sp-2); font-size: var(--fs-xs); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pps__tag { background: var(--c-fill-soft); border: 1px solid var(--c-line); padding: 1px 6px; }
.pps__forcecfg { font-size: var(--fs-sm); }

/* --- Spielsystem-Aufgebot: Picker + Anzeige --------------------------- */
.saf__label { font-weight: 700; font-size: var(--fs-sm); letter-spacing: .04em; margin: var(--sp-4) 0 var(--sp-2); }
.saf__systems { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }
.saf__sys { display: flex; align-items: baseline; gap: var(--sp-2); padding: 6px 8px; border: 1px solid var(--c-line); cursor: pointer; }
.saf__sys:hover { background: var(--c-fill-soft); }
.saf__types { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.saf__type { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid var(--c-line); cursor: pointer; }
.saf__type:hover { background: var(--c-fill-soft); }
/* Zeit/Ort/Gegner-Vorschau (aus der Anwesenheitsliste übernommen) + Trainer-Auswahl im Neu-Aufgebot */
.saf__daymeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); padding: 6px 8px; border: 1px solid var(--c-line); background: var(--c-fill-soft); margin-bottom: var(--sp-2); }
.saf__daymeta-lbl { font-weight: 700; letter-spacing: .04em; }
.saf__daymeta-i { white-space: nowrap; }
.saf__trainers { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); margin-bottom: var(--sp-2); }
.sysline__meta { font-size: var(--fs-sm); color: var(--c-black); margin: var(--sp-2) 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.sysline__edit { margin-bottom: var(--sp-4); }
.sysline__edit > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; padding: 6px 0; color: var(--c-fill); }
.sysline__formation { margin: var(--sp-4) 0; }
.sysline__fhead { font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid var(--c-line-strong); padding-bottom: 4px; margin-bottom: var(--sp-3); }
.sysline__team { margin-bottom: var(--sp-3); }
.sysline__thead { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); margin-bottom: var(--sp-2); }
/* Aufgebot: kleine Mini-Aufstellungen, max. 4 pro Zeile pro Mannschaft (1 Seite Druck).
   (Die grosse Editier-Matrix bleibt separat unter „Spielsystem".) */
/* Mini-Matrizen: bis zu 4 Teilspiele nebeneinander, zusammen so breit wie die Benotungstabelle
   (max 980px). JS (spfFitMinifields) reduziert --spf-cols (4→3→2→1), falls sich die gelben
   Namensboxen berühren → weniger pro Reihe = jede Matrix breiter = Boxen weiter auseinander. */
.sysline__games { display: grid; grid-template-columns: repeat(var(--spf-cols, 4), minmax(0, 1fr)); gap: var(--sp-2); max-width: 980px; }
.sysline__none { padding: var(--sp-2) 0; }
/* Bei mehreren Mannschaften: Rahmen um die zusammenhängenden Teilspiele je Mannschaft. */
.sysline__team--framed { border: 1px solid var(--c-line-strong); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
/* Grünes Spielfeld mit gelben Spielernamen-Boxen — identisch zum 7vs7-Look */
.spf-wrap { display: flex; flex-direction: column; }
.spf { position: relative; aspect-ratio: 3 / 4; width: 100%; background: #d9ead3; border: 1px solid var(--pitch-border, #60a550); overflow: hidden; }   /* grüner Rand wie .sau-pitch */
.spf__box { position: absolute; transform: translate(-50%, -50%); background: #eaa83c; color: #111; font-size: 11px; line-height: 1.1; font-weight: 600; padding: 2px 4px; border: 1px solid rgba(0,0,0,.4); white-space: nowrap; max-width: 96%; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.spf__box--empty { background: var(--c-white); color: var(--c-muted); font-weight: 400; }
.spf__box--off { box-shadow: 0 0 0 2px var(--danger); }   /* Kandidat für andere Position → rot umrandet */
/* Aufgebot-Mini „spielen": FESTE Höhe (--spf-h), Breite passt sich an (Anzahl Matrizen pro Reihe).
   Weniger Matrizen pro Reihe → BREITER (Rechteck), Höhe bleibt gleich. FIXE breite Namensboxen
   (--spf-chip-w). Positionen als Chip-Behälter → geteilte Positionen stapeln zwei Chips. */
.spf.spf--play { --spf-chip-w: 88px; --spf-h: 240px; aspect-ratio: auto; height: var(--spf-h); }
.spf--play .spf__box { width: min(var(--spf-chip-w, 88px), 42%); box-sizing: border-box; background: transparent;
  border: none; padding: 0; max-width: none; overflow: visible; white-space: normal; text-align: center;
  display: flex; flex-direction: column; gap: 1px; z-index: 1; }
.spf--play .spf__chip { display: block; background: #eaa83c; color: #111; border: 1px solid rgba(0,0,0,.4);
  font-size: 11px; line-height: 1.15; font-weight: 600; padding: 1px 3px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.spf--play .spf__chip + .spf__chip { border-top: 1px solid rgba(0,0,0,.35); }
.spf--play .spf__chip--off { box-shadow: 0 0 0 2px var(--danger); position: relative; z-index: 2; }
.spf--play .spf__chip--sel { box-shadow: 0 0 0 2px var(--c-fill); position: relative; z-index: 3; }
.spf--play .spf__chip.dragging { opacity: .4; }
.spf--play .spf__box--empty .spf__num { display: block; background: var(--c-white); color: var(--c-muted);
  border: 1px solid rgba(0,0,0,.25); font-weight: 700; font-size: 11px; line-height: 1.15; padding: 1px 3px; }
.spf--play .spf__box.drop-ok { outline: 2px solid var(--c-fill); outline-offset: 1px; }
.spf--play .spf__box:hover { z-index: 20; }   /* überlappende Boxen (2 in einer Reihe) beim Darüberfahren nach vorne */
.spf__num { font-weight: 700; }
.spf__cap { font-size: var(--fs-xs); font-weight: 700; text-align: center; margin: 0 0 2px; }

/* --- Aufstellungs-Charts (erzwungene/verbotene Positionen; Spieler- + Spielsystem-UI) -------- */
.pform__ppscharts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sys__charts { margin-top: var(--sp-5); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.sys__chartsh { font-size: var(--fs-md); margin: 0 0 4px; }
.sys__chartshint { margin: 0 0 var(--sp-3); }
.sys__charts .ssc-det { margin-bottom: 6px; }
.ssc-det { border: 1px solid var(--c-line-strong); }
.ssc-det > summary { cursor: pointer; padding: 6px 10px; font-weight: 600; font-size: var(--fs-sm);
  list-style: none; user-select: none; background: var(--c-surface-2); }
.ssc-det > summary::-webkit-details-marker { display: none; }
.ssc-det > summary::before { content: "▸ "; color: var(--c-muted); }
.ssc-det[open] > summary::before { content: "▾ "; }
.ssc-det[open] > summary { border-bottom: 1px solid var(--c-line); }
.ssc-det__body { padding: var(--sp-3); }
.ssc__pl { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-bottom: var(--sp-3); }
.ssc__pllbl { font-size: var(--fs-sm); color: var(--c-muted); }
.ssc__plchk { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ssc__units { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.ssc__field { --spf-chip-w: 84px; }
.ssc__field .ssc__chip { cursor: default; }
.ssc__field .ssc__chip--allow { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }
.ssc__field .ssc__chip--deny { background: var(--slate-soft); color: var(--slate); border-color: var(--slate-border); border-style: dashed; }
.ssc__num { display: none; }
.ssc--empty { padding: var(--sp-2) 0; }
/* Resultat-Eingabe unter jeder Mini-Aufstellung (wie 7vs7) */
.spf__result { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--c-white); border: 1px solid var(--pitch-border, #60a550); border-top: none; padding: 3px 2px; border-radius: 0 0 var(--radius-md) var(--radius-md); }
/* Feld mit angedockter Resultat-Leiste: untere Ecken eckig, damit die Leiste bündig anschliesst */
.spf-wrap .spf:has(+ .spf__result) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.spf__score { width: 26px; text-align: center; font-family: inherit; font-size: 12px; border: 1px solid var(--c-line); padding: 2px; -moz-appearance: textfield; }
.spf__score:focus { border-color: var(--c-black); outline: none; }
.spf__colon { font-weight: 700; }
.spf__bench { font-size: var(--fs-xs); color: var(--c-black); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.spf__benchk { font-weight: 700; margin-right: 2px; }
.spf__benchbox { background: #eaa83c; color: #111; border: 1px solid rgba(0,0,0,.4); padding: 1px 5px; font-weight: 600; cursor: grab; }
.spf__benchbox.dragging { opacity: 0.5; }
.spf__bench.drop-ok { outline: 2px solid var(--c-fill); outline-offset: 1px; background: rgba(0,0,0,.05); }

/* ===== Gemeinsamer Aufstellungs-Feld-Look: grünes Fussballfeld mit weissen Linien (SVG-Overlay) =====
   Ein einziges Linien-SVG (Rand, Mittellinie, Mittelkreis, Strafräume) über einem zweifarbigen Grün,
   für ALLE Felder (.spf Editor/Aufgebot, .posheat Heatmap, .pps-pitch Spieler). `.is-plain` = schlicht. */
.spf, .posheat__field, .pps-pitch, .aufsel__opt-field, .sau-pitch {
  background-color: #7cb767;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20133%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.72%22%20stroke-width%3D%220.8%22%3E%3Crect%20x%3D%222.5%22%20y%3D%222.5%22%20width%3D%2295%22%20height%3D%22128%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%222.5%22%20y1%3D%2266.5%22%20x2%3D%2297.5%22%20y2%3D%2266.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2266.5%22%20r%3D%2212%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2266.5%22%20r%3D%220.9%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%222.5%22%20width%3D%2244%22%20height%3D%2220%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%222.5%22%20width%3D%2220%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%22110.5%22%20width%3D%2244%22%20height%3D%2220%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22122.5%22%20width%3D%2220%22%20height%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* schlicht: heller Hintergrund ohne Feld/Linien — pro Ansicht via Container-Klasse `.is-pitchplain` */
.is-pitchplain .spf, .is-pitchplain .posheat__field, .is-pitchplain .pps-pitch {
  background-color: var(--c-surface-2); background-image: none;
  border-color: var(--c-line);
}
/* Marker als weiche runde Kästchen (statt bernsteinfarben eckig) — überall gleich */
/* Marker sind IMMER weiss/hell → Text IMMER dunkel (feste Farbe, kippt im Dark Mode NICHT auf hell). */
.spf__box, .spf--play .spf__chip, .spf__benchbox {
  background: rgba(255,255,255,.95); color: #0b1838; border: 1px solid rgba(33,49,70,.18);
  border-radius: 9px; box-shadow: 0 4px 12px rgba(12,35,56,.16); font-weight: 700;
}
.spf__box--empty, .spf--play .spf__box--empty .spf__num {
  background: rgba(255,255,255,.82); color: #5b6b83; border: 1px solid rgba(33,49,70,.14);
  border-radius: 9px; font-weight: 700;
}
.is-pitchplain .spf__box, .is-pitchplain .spf__chip, .is-pitchplain .spf__benchbox { box-shadow: 0 1px 3px rgba(12,35,56,.12); }

/* „Stammspieler-Fokus" / „Rollentreue"-Detail: Aufstellungs-Charts wie im Aufgebot, binär blau/weiss
   (blau+weiss = relevanter Spieler, sonst weiss+schwarz). Read-only, keine Editier-Interaktion. */
.posld__grid { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.posld__chart { width: 200px; }
.posld__cap { font-size: var(--fs-xs); font-weight: 700; text-align: center; margin: 0 0 3px; }
.posld__field { position: relative; height: 210px; background: #d9ead3; border: 1px solid var(--c-line-strong); overflow: hidden; }
.posld__box { position: absolute; transform: translate(-50%, -50%); width: min(84px, 44%); box-sizing: border-box; text-align: center; }
.posld__box:hover { z-index: 20; }
.posld__chip { display: block; background: #fff; color: #111; border: 1px solid rgba(0,0,0,.45); font-size: 11px; line-height: 1.15; font-weight: 600; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posld__chip + .posld__chip { border-top: 1px solid rgba(0,0,0,.3); }
.posld__chip--hl { background: var(--c-fill); color: #fff; border-color: #0044cc; }
.posld__chip--click { cursor: pointer; }
.posld__ptype { display: none; font-size: var(--fs-micro); font-weight: 400; opacity: .9; }
.posld__chip.is-revealed { white-space: normal; }
.posld__chip.is-revealed .posld__ptype { display: block; }
.posld__box--empty .posld__num { display: block; background: #fff; color: #888; border: 1px solid rgba(0,0,0,.3); font-size: 10px; font-weight: 700; padding: 1px 4px; }
.posld__bench { font-size: var(--fs-xs); color: var(--c-black); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.posld__benchk { font-weight: 700; margin-right: 2px; }
.posld__benchbox { background: #fff; color: #111; border: 1px solid rgba(0,0,0,.45); padding: 1px 5px; font-weight: 600; }
.posld__benchbox.posld__chip--hl { background: var(--c-fill); color: #fff; border-color: #0044cc; }
.posld__nums { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--c-muted); }
.posld__num-i b { color: var(--c-black); font-weight: 700; margin-left: 2px; }
.posld__num-i--r b { color: var(--c-fill); }
.posld__legend { font-weight: 700; }
.posld__legend--hl { color: var(--c-fill); }
.sysline__hints { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.sysline__draghint { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.sysline__legend { font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.spf__legendbox { display: inline-block; width: 20px; height: 14px; background: #eaa83c; border: 1px solid rgba(0,0,0,.4); box-shadow: 0 0 0 2px var(--danger); flex: 0 0 auto; }
.sysline__manual { font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* --- Workspace + Tab-Leiste --------------------------------------------- */
.workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--c-bg); }
.tab-strip {
  flex: none; display: flex; align-items: stretch; gap: 2px;
  background: var(--c-nav);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto; min-height: 40px; padding: 4px var(--sp-3) 0;
}
.tab {
  display: flex; align-items: center;
  flex: 1 1 0; min-width: 96px; max-width: 200px;   /* gleich breite Tabs (Flex-Basis 0 → gleicher Anteil) */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid transparent; border-bottom: none;
}
.tab--active { background: var(--c-bg); border-color: var(--c-line); }
.tab--selected { background: var(--color-primary-soft); border-color: var(--color-primary); }
.tab__label {
  flex: 1 1 auto; min-width: 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tab:hover .tab__label { color: var(--c-black); }
.tab--active .tab__label { color: var(--c-fill); font-weight: 600; }
.tab--selected .tab__label { color: var(--color-primary); }
.tab__close {
  padding: 0 var(--sp-2) 0 2px; align-self: stretch; display: flex; align-items: center; flex: none;
  color: var(--c-faint); font-size: 15px; border-radius: var(--radius-sm);
}
.tab__close:hover { color: var(--danger); }
/* Tab-Leisten-Aktionen: Auswahl schliessen (nur bei Mehrfachauswahl) + alle schliessen */
.tab-strip__acts { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 6px; align-self: center; }
.tab-act { flex: none; font-size: var(--fs-micro); color: var(--c-muted); background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.tab-act:hover { color: var(--c-black); background: var(--c-surface-2); }
.tab-act--sel { color: var(--color-primary); border-color: var(--color-primary); }
.tab-act--sel:hover { background: var(--color-primary-soft); }

.tab-content { flex: 1; overflow-y: auto; background: var(--c-bg); }

/* --- Leerer Zustand ------------------------------------------------------ */
.empty { height: 100%; display: grid; place-content: center; text-align: center; color: var(--c-muted); gap: var(--sp-3); }
.empty__mark { font-weight: 700; font-size: var(--fs-2xl); letter-spacing: -0.02em; color: var(--c-line-strong); }
.empty__plus { border: 1px solid var(--c-line-strong); color: var(--c-black); padding: 0 6px; border-radius: var(--radius-sm); }

/* --- Personen-Formular --------------------------------------------------- */
.pform { display: block; }
.pform__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-line-strong);
  position: sticky; top: 0; background: var(--c-white); z-index: 10; isolation: isolate;
}
.pform__id { min-width: 0; }
/* Rechts oben: Pfeile + Speichern-Icon auf Namenshöhe, Foto darunter */
.pform__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); flex: 0 0 auto; }
.pform__savebtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px;
  border: 1px solid var(--c-fill); background: var(--c-fill); color: #fff; border-radius: 4px; cursor: pointer; }
.pform__savebtn:hover { background: var(--c-white); color: var(--c-fill); }
.pform__name { font-weight: 700; font-size: var(--fs-xl); line-height: 1.1; }
.pform__meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.pform__cat { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pform__cat select { width: auto; }

/* Foto: eigene, NICHT fixierte Zeile unter dem Kopf (scrollt weg) — zentriert */
.pform__photo { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); }
.pform__photo img { width: 96px; height: 116px; object-fit: cover; border: 1px solid var(--c-line-strong); display: block; }
.pform__photo-empty {
  width: 96px; height: 116px; border: 1px solid var(--c-line);
  display: grid; place-content: center; font-size: 9px; letter-spacing: 0.08em; color: var(--c-faint);
}
.pform__photo input[type=file] { width: 120px; font-size: 10px; }

.pform__actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }

/* ===== Spieler-Banner (Design-System): flache weisse Karte, kein Verlauf ===== */
.player-hero { position: relative; margin: var(--sp-3) var(--sp-4); padding: 14px; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(0, 1.9fr); gap: 12px; align-items: center; background: var(--c-white); }
.player-hero--slim { grid-template-columns: 1fr; }
.player-identity { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; position: relative; z-index: 1; }
.player-avatar { position: relative; width: 86px; height: 100px; border: 1px solid var(--c-line-strong); border-radius: 16px; overflow: hidden; cursor: pointer; display: block;
  background: var(--color-primary-soft); }
.player-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-avatar__ph { position: absolute; inset: 0; display: grid; place-content: center; font-size: 25px; font-weight: 800; color: var(--color-primary); text-transform: uppercase; }
.player-avatar__up { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; padding: 3px; background: rgba(11,23,57,0.55); color: #fff; opacity: 0; transition: opacity .12s; }
.player-avatar:hover .player-avatar__up, .player-avatar:focus-within .player-avatar__up { opacity: 1; }
.player-avatar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.player-idtext { min-width: 0; }
.player-eyebrow { color: var(--c-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.player-name { margin: 3px 0 8px; font-size: 30px; font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; color: var(--c-black); }
.player-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ptag { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 11px; border-radius: 999px; border: 1px solid #d9e3f0; background: rgba(255,255,255,.8); color: #263757; font-size: 12px; font-weight: 650; }
.ptag--num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ptag--ok { background: #e9f8ef; border-color: #ccefd9; color: #12824a; }
.ptag--warn { background: #fff3d8; border-color: #f4dca0; color: #96650a; }
.ptag--role { background: var(--color-primary-soft); border-color: #b6d3ff; color: var(--color-primary); font-weight: 700; }
.ptag--cat { padding: 2px 6px 2px 11px; color: var(--c-muted); }
.ptag--cat select { border: none; background: transparent; font: inherit; color: var(--c-black); cursor: pointer; padding: 2px; }
.hero-right { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; position: relative; z-index: 1; padding-top: 26px; }
.hero-stat { min-height: 76px; border: 1px solid var(--c-line); border-radius: 12px; padding: 11px 12px; background: var(--c-surface-2);
  display: flex; flex-direction: column; justify-content: space-between; }
.hero-stat__lbl { color: var(--c-muted); font-size: 10px; font-weight: 700; }
.hero-stat strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; color: var(--c-black); }
.hero-stat small { color: var(--c-muted); font-size: 12px; }
.player-hero__actions { position: absolute; right: 12px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: var(--sp-2); }
.phicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-white); color: var(--c-black); cursor: pointer; text-decoration: none; font-size: 17px; }
.phicon:hover { border-color: var(--color-primary); color: var(--color-primary); }
.phicon.is-off { opacity: 0.35; pointer-events: none; }
.phicon--save { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.phicon--save:hover { background: var(--color-primary); color: #fff; filter: brightness(0.94); }
.player-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: var(--sp-4); }
.phcard { min-height: 90px; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-white); display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.phcard__lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); font-weight: 700; }
.phcard__val { font-size: 24px; font-weight: 750; color: var(--c-black); line-height: 1; }
.phcard__val--paused { color: #d78300; font-size: var(--fs-lg); }
.phcard__val--active { color: #22b45b; font-size: var(--fs-lg); }
.phcard__sub { font-size: var(--fs-micro); color: var(--c-muted); }

/* Sticky Bereichs-Navigation (Spieler-Ansicht) */
.psecnav { position: sticky; top: 6px; z-index: 20; display: flex; gap: 3px; flex-wrap: wrap; margin: 0 var(--sp-4) var(--sp-3); padding: 4px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.psecnav__tab { border: 0; background: transparent; color: var(--c-muted); font: inherit; font-size: var(--fs-sm); font-weight: 700; padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.psecnav__tab:hover { background: var(--c-hover); color: var(--c-black); }
.psecnav__tab.is-on { background: var(--color-primary-soft); color: var(--color-primary); }
#sec-leistung, #sec-stammdaten, #sec-rolle, #sec-regeln, #sec-pause, .pform__anchor { scroll-margin-top: 64px; }
/* Stammdaten als Akkordeon-Gruppen */
.pform__acctools { display: flex; justify-content: flex-end; margin: 0 0 var(--sp-3); }
.pform__acc { border: 1px solid var(--c-line); border-radius: var(--radius-lg); margin: 0 0 var(--sp-3); background: var(--c-white); box-shadow: var(--shadow-sm); overflow: hidden; }
.pform__accsum { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px var(--sp-4); font-size: var(--fs-md); font-weight: 700; color: var(--c-black); cursor: pointer; list-style: none; min-height: 48px; }
.pform__accsum::-webkit-details-marker { display: none; }
.pform__accsum:hover { background: var(--c-hover); }
.pform__accchev { color: var(--c-muted); transition: transform .15s; flex: none; }
.pform__acc[open] > .pform__accsum .pform__accchev { transform: rotate(180deg); }
.pform__acc[open] > .pform__accsum { border-bottom: 1px solid var(--c-line); }
.pform__acc > .pform__fields { padding: var(--sp-4); }
/* Klarer, beschrifteter Speichern-Button unten bei den Bearbeitungsfeldern */
.pform__saverow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.pform__savebig { font-weight: 700; }
.pform__savehint { font-size: var(--fs-micro); }
/* Konfig-Sektionen (Aufgebot / Spielsystem) */
.pform__section--config { background: rgba(128,128,128,0.03); border: 1px solid var(--c-line); border-radius: 6px; }
.pform__cfghint { font-size: var(--fs-sm); line-height: 1.4; margin: 0 0 var(--sp-3); max-width: 780px; }
.pform__stammrow { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.pform__stammopt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); cursor: pointer; }
.pform__roles { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.pform__rolelbl { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; }
.pform__rolelbl select { width: auto; }
.pform__rolehint { font-size: var(--fs-xs); }

/* Spieler-Dashboard: alle KPIs des Spielers gegen den Mannschaftsdurchschnitt */
.pdash { margin: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.pdash__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.pdash__title { font-weight: 700; font-size: var(--fs-md); text-transform: none; letter-spacing: -0.01em; }
.pdash__sub { font-size: var(--fs-micro); color: var(--c-muted); }
.pdash__ctrls { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.pdash__toggle { font: inherit; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; border: 1px solid var(--c-line-strong);
  background: var(--c-white); color: var(--c-muted); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; }
.pdash__toggle.is-on { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.pdash__syssel { font-size: var(--fs-micro); padding: 2px 4px; max-width: 190px; }
.pdash__group { margin-top: var(--sp-3); }
.pdash__group:first-of-type { margin-top: 0; }
.pdash__glabel { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: 6px; }
.pdash__glhint { font-weight: 400; color: var(--c-faint); font-size: var(--fs-micro); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.pdash__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--sp-2); }
.pdash__chart { overflow-x: auto; padding-bottom: 2px; }
.pdash__chart .barchart { max-width: 100%; height: auto; }
/* Desktop: Charts/Karten nebeneinander (2 Spalten); Benchmarks + Heatmap volle Breite. Mobil: 1 Spalte. */
.pdash__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; margin-top: var(--sp-3); }
.pdash__grid > .pdash__group { margin-top: 0; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-3); background: var(--c-white); box-shadow: var(--shadow-sm); min-width: 0; }
.pdash__group--full { grid-column: 1 / -1; }
.chart--drill .bc-hit { cursor: pointer; }
.chart--drill .bc-hit:hover { fill: rgba(8,102,245,0.06); }
.pdash__benchgrid { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-2); }
.pdash__bench { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pdash__benchlabel { font-size: var(--fs-micro); font-weight: 700; color: var(--c-muted); letter-spacing: 0.02em; }
.pdash__bench .barchart { width: 118px; height: auto; }
.pdash__card { border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong); border-radius: var(--radius-sm); padding: 6px 8px; background: var(--c-white); }
.pdash__card--good { border-left-color: var(--success); }
.pdash__card--bad { border-left-color: #e23b2e; }
.pdash__card--neutral { border-left-color: var(--c-fill); }
.pdash__klabel { font-size: var(--fs-micro); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash__val { font-size: 20px; font-weight: 700; line-height: 1.1; margin: 2px 0 3px; }
.pdash__cmp { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.pdash__delta { font-size: var(--fs-micro); font-weight: 700; white-space: nowrap; }
.pdash__delta--good { color: var(--success); }
.pdash__delta--bad { color: #e23b2e; }
.pdash__delta--flat { color: var(--c-muted); }
.pdash__delta--neutral { color: var(--c-fill); }
.pdash__avg { font-size: var(--fs-micro); color: var(--c-faint); white-space: nowrap; }
.pdash--paused { opacity: 0.9; }
.pdash__hmhead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 6px; }
.pdash__hmmodes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pdash__heatmaps { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.pdash__heatmap { flex: 0 0 auto; width: 260px; max-width: 100%; }
.pdash__hmlabel { font-size: var(--fs-micro); color: var(--c-muted); margin-bottom: 4px; }

/* ===== Spieler-Leistungskarte (Redesign nach Mockup) ===== */
.pcard { margin: var(--sp-4); padding: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow-sm); }
.pcard--paused { opacity: 0.92; }
.pcard .card-head { min-height: 56px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.pcard .card-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pcard .card-title h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; font-weight: 750; }
.pcard .card-title p { margin: 5px 0 0; color: var(--c-muted); font-size: 13px; font-weight: 400; }
.pcard .card-body { padding: 14px; display: grid; gap: 10px; }
.pcard .filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.pcard .filters .control, .pcard .filters select, .pcard .filters input { height: 36px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-white); padding: 0 11px; color: #263757; font-size: 13px; outline: none; }
.pcard .filters .control:focus, .pcard .filters select:focus, .pcard .filters input:focus { border-color: #8ebcff; box-shadow: 0 0 0 3px rgba(8,102,245,.12); }

.chart-grid-top { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 2.2fr); gap: 10px; }
.subcard { border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-white); padding: 13px; min-width: 0; }
.subcard-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.subcard-title h3 { font-size: 14px; margin: 0; text-transform: uppercase; letter-spacing: .055em; color: #263757; font-weight: 700; }
.subcard-title > span { color: var(--c-muted); font-size: 12px; }

.donut-wrap { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 150px; }
.pdash__donutsvg { width: 150px; height: 150px; }
.legend { display: grid; gap: 9px; }
.legend-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; font-size: 13px; padding: 3px 5px; margin: -3px -5px; border-radius: 7px; }
.legend-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-row strong { font-size: 14px; }
.legend-row.is-click { cursor: pointer; }
.legend-row.is-click:hover { background: var(--color-primary-soft); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.metric { min-height: 70px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); }
.metric.is-click { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.metric.is-click:hover { border-color: #8ebcff; box-shadow: 0 0 0 3px rgba(8,102,245,.08); }
.metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.metric-label { color: var(--c-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.metric-value { margin-top: 4px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.delta { font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 999px; white-space: nowrap; }
.delta.up { color: #10814a; background: #e9f8ef; }
.delta.down { color: #b43d4a; background: #fff0f2; }
.delta.flat { color: var(--c-muted); background: #f0f3f8; }
/* Positionstyp-KPIs (GSP/DEF/MIT/OFF) sind weder gut noch schlecht → neutral (blau), nicht grün/rot. */
.delta.neutral { color: var(--color-primary); background: rgba(8,102,245,.10); }
/* Anklickbare Hero-KPI-Kacheln (Einsätze/Spielminuten/T/G) → Datengrundlage. */
.hero-stat.is-click, .hero-stat--link { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.hero-stat.is-click:hover, .hero-stat--link:hover { border-color: #8ebcff; box-shadow: 0 0 0 3px rgba(8,102,245,.08); }
.bullet { height: 5px; margin-top: 9px; border-radius: 999px; background: var(--c-line); position: relative; }
.bullet .player { position: absolute; left: 0; top: 0; height: 100%; width: var(--player); border-radius: inherit; background: var(--color-primary); }
.bullet .avg { position: absolute; left: var(--avg); top: -3px; width: 2px; height: 11px; background: var(--c-muted); border-radius: 2px; }
.metric-foot { display: flex; justify-content: space-between; margin-top: 6px; color: var(--c-muted); font-size: 10px; }

.charts-row { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px; margin-top: 0; align-items: start; }
.charts-row--single { grid-template-columns: 1fr; }
/* Mitte: Entwicklung (links, dominant) | Positions-Heatmap (rechts). */
.pdash__mid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.pdash__mid.charts-row--single { grid-template-columns: 1fr; }
/* Unten: Weitere Kennzahlen | Leistungstests — kompakte Wert-Zeilen. */
.pdash__lower { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.pdash__kv { display: grid; gap: 4px; }
.pdash__kvrow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface-2); }
.pdash__kvrow.is-click { cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.pdash__kvrow.is-click:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pdash__kvk { font-size: 12px; font-weight: 650; color: var(--c-black); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdash__kvd { font-size: 10px; }
.pdash__kvv { font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: var(--c-black); }
.pdash__posbars { margin-top: 12px; }
.pdash__subh { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: 8px; }
.bar-chart { display: grid; gap: 9px; }
@media (max-width: 900px) { .pdash__lower { grid-template-columns: 1fr; } }
.bar-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 12px; padding: 3px 5px; margin: -3px -5px; border-radius: 7px; }
.bar-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; background: #edf2f7; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #0d78ff, #3d96ff); }
.bar-row strong { text-align: right; }
.bar-row.is-click { cursor: pointer; }
.bar-row.is-click:hover { background: var(--color-primary-soft); }
.axis-note { margin-top: 14px; color: var(--c-muted); font-size: 11px; }

.pheat__modes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Rolle & Einsatzstatus (Auswahlkarten + Rollen-Buttons) */
.selection-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: 16px; }
.choice-stack { display: grid; gap: 10px; }
.choice-card { display: flex; align-items: flex-start; gap: 12px; padding: 13px; border: 1px solid var(--c-line); border-radius: 11px; cursor: pointer; background: var(--c-white); }
.choice-card input { margin-top: 3px; accent-color: var(--color-primary); }
.choice-card.active { border-color: #8dbdff; background: #eef6ff; box-shadow: 0 0 0 3px rgba(8,102,245,.07); }
.choice-card b { display: block; font-size: 13px; }
.choice-card span { display: block; color: var(--c-muted); font-size: 11px; line-height: 1.45; margin-top: 4px; }
.role-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.role-option { min-height: 96px; padding: 12px; border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-white); cursor: pointer; text-align: left; }
.role-option:hover { border-color: #a7c9fb; }
.role-option.active { background: var(--color-primary-soft); border-color: #8ebcff; box-shadow: 0 0 0 3px rgba(8,102,245,.08); }
.role-option .role-icon { width: 32px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #f0f4fa; margin-bottom: 10px; font-size: 11px; font-weight: 750; color: var(--c-muted); letter-spacing: .03em; }
.role-option.active .role-icon { background: #d4e7ff; color: var(--color-primary); }
.role-option b { display: block; font-size: 12px; }
.role-option > span:last-child { display: block; color: var(--c-muted); font-size: 10px; margin-top: 3px; }
.info-box { margin-top: 14px; padding: 12px 14px; border: 1px solid #cfe3ff; border-radius: 11px; background: #f2f8ff; color: #36577c; font-size: 12px; line-height: 1.5; }
@media (max-width: 1250px) { .selection-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .role-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Positionsregeln: Karte mit Spielsystem-Tabs, Regel-Boxen + Nur-Lese-Feld (blau=erzwungen, grau=verboten) */
.system-tabs { display: flex; gap: 6px; overflow: auto; padding-bottom: 2px; flex-wrap: wrap; }
.system-tab { white-space: nowrap; min-height: 34px; padding: 0 13px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-white); color: var(--c-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.system-tab:hover { border-color: #a7c9fb; color: var(--color-primary); }
.system-tab.active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.systab-panel.is-hidden { display: none; }
.pps-help { margin-top: 12px; border: 1px solid var(--c-line); border-radius: 11px; background: #fbfcfe; }
.pps-help > summary { cursor: pointer; list-style: none; padding: 11px 14px; font-size: 12px; font-weight: 700; color: var(--c-muted); }
.pps-help > summary::-webkit-details-marker { display: none; }
.pps-help__body { padding: 0 14px 12px; color: var(--c-muted); font-size: 12px; line-height: 1.55; }
.pps-help__body p { margin: 0 0 8px; }
.rules-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 16px; margin-top: 16px; align-items: start; }
.rule-lists { display: grid; gap: 12px; min-width: 0; }
.rule-box { border: 1px solid var(--c-line); border-radius: 13px; padding: 14px; background: var(--c-white); }
/* Farbige Ober-Ränder entfernt (cleaner) — die Zähl-Badges „blau · N" / „grau · N" markieren den Typ. */
.rule-box h4 { margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.rule-box h4 span { color: var(--c-muted); font-size: 11px; font-weight: 600; }
.pps-savehint { font-size: 11px; margin: 2px 0 0; }
.formation-card { border: 1px solid var(--c-line); border-radius: 12px; padding: 13px; background: var(--c-surface-2); min-width: 0; }
.formation-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 11px; }
.formation-top h4 { margin: 0; font-size: 14px; }
.formation-top span { color: var(--c-muted); font-size: 11px; }
/* Spieler-Feld: Hochformat (3:4), Linien kommen vom gemeinsamen SVG-Overlay oben. */
.pps-pitch { position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: 340px; margin: 0 auto;
  border-radius: 14px; overflow: hidden; border: 1px solid #6ca45a; }
.pps-pitch__penalty { display: none; }   /* Strafräume zeichnet jetzt das SVG-Overlay */
.pps-pos { position: absolute; transform: translate(-50%, -50%); z-index: 3; width: 62px; min-height: 42px; padding: 5px;
  border: 2px solid rgba(255,255,255,.86); border-radius: 11px; background: rgba(255,255,255,.93); color: #0b1838;
  box-shadow: 0 7px 18px rgba(12,35,56,.18); font-size: 10px; font-weight: 700; text-align: center; display: grid; place-content: center;
  font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; line-height: 1.1; transition: transform .1s ease, box-shadow .12s ease; }
.pps-pos:hover { z-index: 6; box-shadow: 0 0 0 3px rgba(8,102,245,.25), 0 8px 20px rgba(12,35,56,.28); }
.pps-pos:active { transform: translate(-50%, -50%) scale(.94); }
/* gesperrte Mannschaft (fixe Teams): im Erzwingen-Modus nicht setzbar → gedimmt + Sperr-Cursor */
[data-mode="force"] .pps-chart.is-blocked .pps-pitch { opacity: .5; filter: grayscale(.3); }
[data-mode="force"] .pps-chart.is-blocked .pps-pos { cursor: not-allowed; }
[data-mode="force"] .pps-chart.is-blocked .pps-pos:hover { box-shadow: 0 7px 18px rgba(12,35,56,.18); }
.pps-chart__lock { font-size: 10px; }
/* Kräftige Hervorhebung je nach Modus: erzwungene Positionen (blau) ODER verbotene (grau), SOLID +
   weisser Text + weisser Rahmen → gut lesbar in Hell UND Dunkel. Nicht-hervorgehobene bleiben weiss. */
[data-mode="force"] .pps-pos.is-force { background: var(--color-primary); color: #fff; border-color: #fff;
  box-shadow: 0 0 0 3px rgba(8,102,245,.40), 0 7px 16px rgba(12,35,56,.28); z-index: 5; }
[data-mode="ban"] .pps-pos.is-ban { background: var(--slate); color: #fff; border-color: #fff;
  box-shadow: 0 0 0 3px rgba(100,116,139,.45), 0 7px 16px rgba(12,35,56,.28); z-index: 5; }
.pps-pos__num { display: block; font-size: 14px; line-height: 1; }
.pps-pos__nm { display: block; font-size: 9px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56px; }
.pps-legend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 10px; color: var(--c-muted); font-size: 11px; }
.pps-legend__sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--c-line-strong); background: #fff; }
.pps-legend__sw--force { background: var(--color-primary); border-color: var(--color-primary); }
.pps-legend__sw--ban { background: var(--slate); border-color: var(--slate); }
.pps-fieldnote { font-size: 11px; margin: 8px 0 0; }
.pps-forms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pps-formbtn { min-height: 30px; padding: 0 11px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-white); color: var(--c-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.pps-formbtn:hover { border-color: #a7c9fb; color: var(--color-primary); }
.pps-formbtn.active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.pps-formation.is-hidden { display: none; }
/* Kopfleiste: Formations-Tabs links, Erzwungene/Verbotene-Umschalter rechts */
.pps-headbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pps-modebar { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); }
.pps-modebtn { min-height: 30px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: var(--c-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.pps-modebtn.pps-modebtn--force.active { background: var(--color-primary); color: #fff; }
.pps-modebtn.pps-modebtn--ban.active { background: var(--slate); color: #fff; }
/* Horizontal scrollbare Reihe: je Teilspiel/Mannschaft ein Mini-Feld */
.pps-charts { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.pps-chart { flex: 0 0 auto; width: 168px; scroll-snap-align: start; }
.pps-chart__cap { font-size: 11px; font-weight: 700; text-align: center; margin-bottom: 6px; color: var(--c-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pps-chart .pps-pitch { max-width: none; margin: 0; min-height: 0; }
.pps-chart .pps-pos { width: auto; min-width: 24px; min-height: 20px; padding: 2px 5px; border-width: 1.5px; border-radius: 7px; box-shadow: 0 3px 8px rgba(12,35,56,.16); }
.pps-chart .pps-pos__num { font-size: 11px; }
.pps-chart .pps-pos__nm { display: none; }   /* im Mini-Feld nur die Nummer */
@media (max-width: 1250px) { .rules-layout { grid-template-columns: 1fr; } }
.pcard .pdash__group--extra { margin-top: 16px; }
.pcard .pdash__group--extra:first-of-type { margin-top: 0; }

@media (max-width: 1250px) {
  .chart-grid-top { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .charts-row { grid-template-columns: 1fr; }
  .player-hero { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); }
  .hero-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donut-wrap { grid-template-columns: 125px 1fr; gap: 12px; }
  .pdash__donutsvg { width: 125px; height: 125px; }
  .bar-row { grid-template-columns: 100px minmax(0, 1fr) 24px; }
  .pcard .card-head { align-items: flex-start; flex-direction: column; }
  .pcard .filters { justify-content: flex-start; }
}

/* Vor/Zurück-Navigation im Personen-Interface (oben rechts) */
.pform__navrow { display: flex; align-items: center; gap: var(--sp-2); }
.pform__nav { display: inline-flex; gap: 4px; }
.pform__navbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); border-radius: 4px;
  font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none; }
.pform__navbtn:hover { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.pform__navbtn--off { opacity: 0.3; pointer-events: none; }

.pform__body { padding: 0 var(--sp-4) var(--sp-7); }
.pform__section { border-bottom: 1px solid var(--c-line); padding: var(--sp-5) 0; }
.pform__section:last-child { border-bottom: none; }
.pform__section-title {
  font-size: var(--fs-md); text-transform: none; letter-spacing: -0.01em; font-weight: 600;
  margin-bottom: var(--sp-4); color: var(--c-black);
}
.pform__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}

/* --- Felder -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { margin-bottom: 2px; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--fs-base); color: var(--c-black);
  background: var(--c-white);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--sp-3);
  height: 40px;
  width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea { height: auto; padding: var(--sp-2) var(--sp-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-fill); outline: none; box-shadow: 0 0 0 3px rgba(8, 102, 245, 0.12);
}
.field textarea { resize: vertical; line-height: 1.5; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--danger); }
.field--error input:focus, .field--error select:focus, .field--error textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.field__error { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--danger); }

/* --- Karten-Utility (SquadOS) ------------------------------------------- */
.card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-5); }

/* --- Benutzerverwaltung -------------------------------------------------- */
.users { padding: var(--sp-6); max-width: 920px; }
.users__title { letter-spacing: 0.12em; margin-bottom: var(--sp-4); }
.users__msg { border: 1px solid var(--c-line-strong); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.users__new { border: 1px solid var(--c-line); padding: var(--sp-4); margin-bottom: var(--sp-6); }
.users__new h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-3); }
.users__form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--sp-3); align-items: end; }
.utable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.utable th, .utable td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); }
.utable th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.utable tr.is-inactive td { color: var(--c-faint); }
.utable__actions { display: flex; gap: var(--sp-3); align-items: center; }
.inline-form { display: flex; gap: var(--sp-1); align-items: center; }
.inline-form input { border: 1px solid var(--c-line); padding: 2px var(--sp-2); font-size: var(--fs-sm); }

/* --- Einstellungen ------------------------------------------------------- */
.settings { padding: var(--sp-5) var(--sp-5) var(--sp-7); max-width: 860px; }
/* A–Z-Schnellnavigation links neben den (alphabetischen) Einstellungen */
.settings--az { display: flex; align-items: flex-start; gap: var(--sp-3); max-width: 900px; }
.settings--az .settings__main { flex: 1; min-width: 0; }
.az-rail { position: sticky; top: var(--sp-2); flex: none; display: flex; flex-direction: column;
  padding: var(--sp-2) 2px; user-select: none; cursor: ns-resize; touch-action: none; }
.az-letter { font-size: 10px; line-height: 1.18; color: var(--c-faint); text-align: center; width: 16px; pointer-events: none; }
.az-rail:hover .az-letter { color: var(--c-muted); }
.set { border-bottom: 1px solid var(--c-line); padding: var(--sp-5) 0; }
.set:last-child { border-bottom: none; }
.set__bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.set__title { font-size: var(--fs-lg); font-weight: 650; text-transform: none; letter-spacing: -0.01em; color: var(--c-black); }
.set__hint { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); max-width: 640px; }
.set__hint code { font-family: inherit; border: 1px solid var(--c-line); padding: 0 4px; }
.set__lbl { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: var(--sp-2); }
.set__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.set__form .field { margin-bottom: var(--sp-4); }
.set__actions { margin-top: var(--sp-2); }
.set__cat { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-muted); margin: var(--sp-3) 0 var(--sp-1); }

/* Wochentag-Picker */
.wdays { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.wday { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-line); padding: 4px var(--sp-2); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--c-black); font-size: var(--fs-sm); }
.wday:hover { border-color: var(--c-black); }
.wday input { accent-color: var(--c-fill); }

/* Trainer-Rhythmus-Tabelle */
.set__trainers { border-collapse: collapse; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.set__trainers th, .set__trainers td { border: 1px solid var(--c-line); padding: 4px 8px; text-align: center; }
.set__trainers th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
.set__trainers .set__tn { text-align: left; white-space: nowrap; font-weight: 700; }
.set__trainers thead .set__tn { font-weight: 400; }

/* --- Anwesenheitsliste (Matrix) ------------------------------------------ */
.amx-layout { display: flex; height: 100%; min-height: 0; }
.amx__analytics { flex: 0 0 260px; align-self: stretch; overflow-y: auto; margin: 0; border: none; border-left: 1px solid var(--c-line-strong); max-width: 300px; }
/* Desktop: Analyse standardmässig AUSGEBLENDET, per seitlichem Tab einblendbar. Nur die Seitenspalten-
   Kopie (--desk); die Inline-Kopie (--mob) ist nur am Handy sichtbar (siehe Media-Query). */
.amx__analytics { display: none; }
.amx-layout.an-open .amx__analytics--desk { display: block; }
.amx__antab {
  flex: none; align-self: stretch; width: 24px; border: none; cursor: pointer;
  background: var(--c-line-strong); color: #fff; writing-mode: vertical-rl; text-orientation: mixed;
  font: 700 var(--fs-micro)/1 var(--ff); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 0;
}
.amx__antab:hover { filter: brightness(1.25); }
.amx__hint-edit { color: var(--c-faint); }
.amx { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1; min-width: 0; }
.amx__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line-strong); flex: none; flex-wrap: wrap; }
.amx__head { font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-xl); color: var(--c-black); }
.amx__legend { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; font-size: var(--fs-micro); color: var(--c-muted); }
/* Rückgängig / Wiederherstellen / Speichern */
.amx__hist { display: inline-flex; gap: 4px; align-items: center; }
.amx__histbtn { display: inline-grid; place-content: center; width: 28px; height: 26px; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-black); cursor: pointer; padding: 0; border-radius: var(--radius-sm); }
.amx__histbtn:hover { border-color: var(--c-fill); color: var(--c-fill); }
.amx__histbtn.is-off { opacity: 0.3; pointer-events: none; }
#amx-save { color: var(--c-fill); }
.amx__histbtn.is-flash { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.amx__histbtn.is-active { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
/* Mehrfach-Auswahl (Stift) */
.amx-selmode .amx__cell[data-pid] { cursor: cell; }
.amx__cell.amx-sel { box-shadow: inset 0 0 0 2px var(--c-fill), inset 0 0 0 9999px rgba(0, 87, 255, 0.22) !important; }
.amx__selbar { display: none; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--c-line-strong); background: var(--c-fill-soft); font-size: var(--fs-sm); }
.amx__selbar.is-on { display: flex; }
.amx__selinfo { color: var(--c-muted); margin-right: auto; }
/* Long-Press-Fortschrittskreis (Handy: gedrückt halten → Absenz-Details) */
.amx-lpc { position: fixed; z-index: 9999; width: 40px; height: 40px; margin-left: -20px; pointer-events: none; }
.amx-lpc svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.amx-lpc__bg { fill: rgba(0, 0, 0, 0.4); stroke: rgba(255, 255, 255, 0.55); stroke-width: 3; }
.amx-lpc__fg { fill: none; stroke: var(--c-fill); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 106.8; stroke-dashoffset: 106.8; animation: amxLpFill 2s linear forwards; }
@keyframes amxLpFill { to { stroke-dashoffset: 0; } }
/* Spiel- & trainingsfreie Zeit (Ferien): Banner-Zeile + Erfassungs-Panel + Auswahl */
.amx__row--free td.amx__free { background: var(--c-surface-2); color: var(--c-muted); border-bottom: 1px solid var(--c-line); padding: 0; cursor: pointer; }
.amx__row--free td.amx__free--ro { cursor: default; }
.amx__freetxt { position: sticky; left: 118px; display: inline-block; padding-left: 8px; font-style: italic; font-size: var(--fs-sm); letter-spacing: 0.03em; white-space: nowrap; }
.amx__row--free td.amx__free:hover .amx__freetxt { color: var(--c-fill); }
.amx__freebar { display: none; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line-strong); background: var(--c-fill-soft); }
.amx__freebar.is-on { display: flex; }
.amx__freeadd { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.amx__freeadd label { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); }
.amx__freeadd input[type=date] { font: inherit; padding: 3px 5px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); }
.amx__freelbl { font-weight: 700; color: var(--c-black); }
.amx__freehint { color: var(--c-muted); font-size: var(--fs-micro); }
.amx__freeadd input[type=text].amx__freereason { font: inherit; padding: 3px 6px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); min-width: 170px; }
.amx__freelist { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); min-width: 240px; }
.amx__freerow { display: flex; align-items: center; gap: 4px; }
.amx__freeedit { display: inline-flex; align-items: center; gap: 6px; flex: 1; padding: 3px 7px; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-black); cursor: pointer; text-align: left; }
.amx__freeedit:hover { border-color: var(--c-fill); color: var(--c-fill); }
.amx__freeedit svg { margin-left: auto; flex: none; opacity: 0.6; }
.amx__freespan { font-variant-numeric: tabular-nums; }
.amx__freereasontag { color: var(--c-muted); font-style: italic; }
.amx__freedel { display: inline-grid; place-content: center; width: 24px; height: 24px; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-black); cursor: pointer; padding: 0; flex: none; }
.amx__freedel:hover { border-color: var(--danger); color: var(--danger); }
/* Ferien-Bearbeiten-Popup */
.cos-pop--free { border-color: var(--c-line-strong); }
.free-pop__span { font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 8px; }
.free-pop__dates { display: flex; gap: var(--sp-3); margin-bottom: 6px; }
.free-pop__dates label { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); font-size: var(--fs-sm); }
.free-pop__dates input[type=date] { font: inherit; padding: 3px 5px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); }
.amx__freeempty { color: var(--c-muted); font-style: italic; }
.amx-freemode .amx__row { cursor: ns-resize; }
.amx__row.amx-free-sel td { box-shadow: inset 0 0 0 9999px rgba(0, 87, 255, 0.16); }
.btn--active { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.amx__lg { display: inline-grid; place-content: center; width: 16px; height: 16px; border: 1px solid var(--c-line-strong); font-size: 10px; font-weight: 700; }
.amx__lg--abs { position: relative; }   /* rote Ecke (Absenz gemeldet) in der Legende sichtbar machen */

.amx__scroll { overflow: auto; flex: 1; min-height: 0; }
/* Saison-Trennzeile (immer sichtbar; Saison + 5 Jahre davor / 2 danach). Aktuelle Saison hervorgehoben. */
.amx__seasonrow td { padding: 0; }
.amx__seasoncell { position: sticky; left: 0; z-index: 8; background: var(--c-line-strong); color: var(--c-black); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: .02em; padding: 7px 14px; white-space: nowrap; }
.amx__seasonrow--current .amx__seasoncell { background: var(--c-fill); color: #fff; box-shadow: inset 4px 0 0 rgba(255,255,255,.6); }
/* Tage AUSSERHALB der aktuellen Saison: leicht ausgegraut (Farben entsättigt, Text gedämpft) — noch gut
   erkennbar und normal bearbeitbar, aber die aktuelle Saison sticht heraus. Kein filter/opacity auf <tr>
   (würde die sticky-Spalten brechen) — nur auf den einzelnen Zellen-Inhalten. */
.amx__row--off .amx__cell { filter: grayscale(.85) opacity(.72); }
.amx__row--off .amx__type { filter: grayscale(1) opacity(.7); }
.amx__row--off .amx__c { filter: grayscale(.92) brightness(.96); color: var(--c-muted); }   /* auch die Info-/Event-Spalten entfärben (nicht mehr blau) */
.amx__row--off:hover .amx__cell, .amx__row--off:hover .amx__type { filter: none; }   /* Zeile unter Maus: volle Farbe zum Bearbeiten */
.amx__row--off:hover .amx__c { filter: none; color: var(--c-black); }
/* border-collapse: SEPARATE — sonst „geistern" sticky-Zellen in collapse-Tabellen
   (Inhalt scheint durch die Titelzeile durch). Ränder daher rechts+unten je Zelle. */
.amx__table { border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); table-layout: fixed; }
.amx__c, .amx__cell, .amx__pcol { border: 0; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.amx__h { border-top: 1px solid var(--c-line); }
.amx__dt { border-left: 1px solid var(--c-line); }
.amx__table th, .amx__table td { padding: 0; }

/* Kopfzeile sticky oben; Datumsspalte sticky links */
.amx__h { position: sticky; top: 0; z-index: 10; background: var(--c-white); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); font-weight: 700; padding: 3px 4px; border-bottom: 1px solid var(--c-line-strong); vertical-align: bottom; }
.amx__dt { position: sticky; z-index: 2; background: var(--c-white); width: 110px; padding: 2px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
th.amx__dt { z-index: 4; }
.amx__wd { width: 30px; text-align: center; color: var(--c-muted); }
.amx__meta { font-size: var(--fs-micro); padding: 2px 4px !important; }
.amx__cnt { width: 34px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; background: var(--c-surface-2); }
.amx__h.amx__cnt { font-weight: 700; color: var(--c-black); }
.amx__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amx__metaedit { cursor: text; }
.amx__metaedit:hover { box-shadow: inset 0 0 0 1px var(--c-faint); }
/* FIXE Spaltenbreiten (table-layout:fixed nimmt die Breite aus der Kopfzeile) */
.amx__col-type { width: 46px; max-width: 46px; text-align: center; padding: 1px 2px !important; }
.amx__col-time { width: 52px; max-width: 52px; }
.amx__col-loc  { width: 110px; max-width: 110px; }
.amx__col-opp  { width: 120px; max-width: 120px; }

/* Info-Spalten DATUM…SPIELER beim Seitwärts-Scrollen LINKS fixieren (Personen-
   spalten scrollen darunter durch). Die linken Offsets setzt JS (amxFreezeCols)
   exakt aus den gemessenen Spaltenbreiten. */
.amx__wd, .amx__col-type, .amx__col-time, .amx__col-loc, .amx__col-opp,
.amx__cnt--staff, .amx__cnt--players {
  position: sticky; z-index: 2; background: var(--c-white);
}
.amx__cnt--staff, .amx__cnt--players { background: var(--c-surface-2); }
/* Eingefrorene KOPFzellen: oben UND links fixiert (Ecke) → über allem. */
th.amx__dt, .amx__h.amx__wd, .amx__h.amx__col-type, .amx__h.amx__col-time,
.amx__h.amx__col-loc, .amx__h.amx__col-opp, .amx__h.amx__cnt { z-index: 11; }
/* Datumsspalte über ALLEN anderen Spalten (Kopf + Body) — beim horizontalen
   Scrollen (v.a. Handy) verschwinden alle übrigen Spalten sauber DAHINTER. */
td.amx__dt { z-index: 6; }
th.amx__dt { z-index: 12; }
/* Beschriftungen DATUM…GEGNER einzeilig → alle auf gleicher Höhe (Filterpfeil
   bricht sonst in schmalen Spalten um und schiebt das Label nach oben). */
.amx__h.amx__dt, .amx__h.amx__wd, .amx__h.amx__col-type,
.amx__h.amx__col-time, .amx__h.amx__col-loc, .amx__h.amx__col-opp { white-space: nowrap; }
/* Event-Typ-Auswahl (TR/FS/MS) als kompaktes Badge-Dropdown */
.amx__type { width: 100%; border: 1px solid var(--c-line); background: var(--c-white); font: 700 var(--fs-micro)/1.4 var(--ff); text-align: center; text-align-last: center; padding: 1px 0; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: var(--radius-sm); color: var(--c-muted); }
.amx__type:focus { outline: 2px solid var(--c-line-strong); outline-offset: -2px; }
.amx__type--TR { color: var(--c-black); background: var(--c-white); border-color: var(--c-line); }
.amx__type--FS { color: #fff; background: #e07a1f; border-color: #e07a1f; }
.amx__type--MS { color: #fff; background: var(--c-fill); border-color: var(--c-fill); }
.amx__type--none { color: var(--c-faint); background: var(--c-white); border-style: dashed; }
.amx__type--warn { color: #fff !important; background: var(--danger) !important; border-color: var(--danger) !important; font-weight: 700; }
.amx__col-type--warn { box-shadow: inset 0 0 0 2px var(--danger); }
/* Legenden-Swatches Event-Typ (gleiche Farben wie die Badges) */
.amx__lg--ms { background: var(--c-fill); color: #fff; }
.amx__lg--fs { background: #e07a1f; color: #fff; }
.amx__lg--tr { background: var(--c-white); color: var(--c-black); box-shadow: inset 0 0 0 1px var(--c-line); }
.amx__lgsep { display: inline-block; width: 1px; height: 12px; background: var(--c-line); margin: 0 6px; vertical-align: middle; }
.amx__metain { width: 100%; box-sizing: border-box; border: none; background: var(--c-white); font: inherit; padding: 0 2px; color: var(--c-black); border-radius: var(--radius); }
.amx__metain:focus { outline: 2px solid var(--c-line-strong); outline-offset: -2px; }
.amx__row td.amx__c { padding: 2px 4px; }
.amx__daylink { display: block; flex: 1; min-width: 0; }
.amx__daylink:hover { text-decoration: underline; }
/* „Blaues Plus" zum Hinzufügen eines weiteren Events am selben Tag (wie in Word).
   Inline-Gutter (kein Layout-Sprung): unsichtbar bis Zeilen-Hover. */
.amx__dtwrap { display: flex; align-items: center; gap: 3px; position: relative; }
/* Datumsspalte: Marker, ob für einen Spieltag (FS/MS) bereits ein Aufgebot existiert */
.amx__lu { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-left: 1px; box-sizing: border-box; }
.amx__lu--on { background: var(--success); cursor: pointer; }
.amx__lu--on:hover { box-shadow: 0 0 0 2px rgba(46,125,50,.35); }
.amx__lu--off { background: transparent; border: 1.5px solid var(--c-faint); }
/* Trainingsplan-Punkt: blau statt gruen, damit er neben dem Aufgebots-Punkt unterscheidbar ist */
.amx__lu--tp { background: var(--c-fill); }
.amx__lu--tp:hover { box-shadow: 0 0 0 2px rgba(0, 87, 255, 0.3); }
.amx__addday, .amx__delday {
  flex: none; width: 14px; height: 14px; padding: 0; line-height: 12px; text-align: center;
  border: none; border-radius: 50%; color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; visibility: hidden;
}
.amx__addday { background: var(--c-fill); }
.amx__delday { background: var(--danger); }
.amx__row:hover .amx__addday, .amx__row:hover .amx__delday { visibility: visible; }
/* Kleines schwarzes Tooltip (JS-positioniert, body-fixed → kein Clipping) */
.cos-tip {
  position: fixed; z-index: 9999; pointer-events: none; background: #000; color: #fff;
  font-size: 11px; line-height: 1.25; font-weight: 400; letter-spacing: 0; text-transform: none;
  padding: 3px 7px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: 0 1px 4px rgba(11, 24, 56,0.3);
}

/* Personen-Spalten (schmal, vertikal kompakt) */
.amx__pcol { width: 26px; }
/* Personenspalte: Name (rotiert) = Link zum Interface, Filter über kleines Icon unten */
/* Personenspalte-Kopf: sticky oben (bleibt beim Vertikal-Scroll wie Zeile 1), Name LINKSBÜNDIG (rotiert) */
.amx__h.amx__pcol { position: sticky; top: 0; z-index: 10; height: 90px; padding: 0; text-align: start; }
.amx__h.amx__pcol .amx__pname { display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; height: 100%; box-sizing: border-box; padding: 15px 2px 4px; line-height: 1.05; text-align: start;
  font-weight: 700; color: var(--c-black); text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; }
.amx__h.amx__pcol .amx__pname:hover { color: var(--c-fill); text-decoration: underline; }
.amx__h.amx__pcol .amx__vn { font-weight: 400; color: var(--c-muted); }
.amx__filter-btn { position: absolute; bottom: 0; left: 0; right: 0; height: 14px; margin: 0 auto; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: none; background: none;
  color: var(--c-faint); cursor: pointer; }
.amx__h.amx__pcol:hover .amx__filter-btn { color: var(--c-black); }
.amx__h.amx__pcol.amx__h--filtered .amx__filter-btn { color: #fff; }
/* Anklickbare Personennamen (Tagessicht, Benotungstabelle, Analyse-Tabelle) → Personen-Interface;
   beim Hover unterstrichen als Klick-Signal */
.aday__nlink, .ben__nlink, .ana-nlink { color: inherit; text-decoration: none; cursor: pointer; }
.aday__nlink:hover, .ben__nlink:hover, .ana-nlink:hover { color: var(--c-fill); text-decoration: underline; }
.ana-nlink { display: block; }
.ana-nlink:hover .analytics__nn, .ana-nlink:hover .analytics__vn { color: var(--c-fill); }
.amx__tcol { background: var(--c-surface-2); }

/* Spaltenfilter: Kopfzellen klickbar */
.amx__h { cursor: pointer; }
.amx__h:not(.amx__pcol)::after { content: " ▾"; color: var(--c-faint); font-size: 9px; }
.amx__h--filtered { background: var(--c-fill) !important; color: #fff !important; }
.amx__h--filtered .amx__vn { color: #ccc !important; }
.amx__h--filtered::after { color: #fff; }
.amx__filterpop {
  position: fixed; z-index: 60; background: var(--c-white); border: 1px solid var(--c-line-strong);
  min-width: 170px; max-width: 264px; max-height: 70vh; overflow: auto; font-size: var(--fs-sm);
  box-shadow: 0 2px 10px rgba(11, 24, 56, 0.18);
}
.amx__filterbar { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; background: var(--c-white); }
.amx__filterbar button { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border: 1px solid var(--c-line); background: var(--c-white); cursor: pointer; }
.amx__filterbar button:hover { border-color: var(--c-fill); background: var(--c-fill); color: #fff; }
.amx__filterlist { padding: 6px 8px; }
.amx__filterlist label { display: flex; align-items: center; gap: 6px; padding: 2px 0; white-space: nowrap; text-transform: none; letter-spacing: 0; color: var(--c-black); font-size: var(--fs-sm); }
.amx__datetree .amx__drow { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
.amx__dtog { display: inline-block; width: 12px; text-align: center; cursor: pointer; color: var(--c-muted); user-select: none; }
.amx__dkids { padding-left: 14px; }
.amx__dleaf { font-variant-numeric: tabular-nums; padding-left: 2px; }

/* Kreuz-Hover: aktuelle Zeile + Spalte leicht dunkler */
.amx__table tbody td.amx-hl-col,
.amx__table tbody tr.amx-hl-row > td { box-shadow: inset 0 0 0 9999px rgba(11, 24, 56, 0.06); }
/* Schnittzelle (Zeile ∩ Spalte) im Hellmodus etwas kräftiger für ein klares Fadenkreuz. */
.amx__table tbody tr.amx-hl-row > td.amx-hl-col { box-shadow: inset 0 0 0 9999px rgba(11, 24, 56, 0.11); }
/* Gleiches Kreuz-Hover in der grossen Analyse-Tabelle (Zeile + Spalte hervorheben, Schnittzelle kräftiger). */
.analytics__table tbody td.amx-hl-col,
.analytics__table tbody tr.amx-hl-row > td { box-shadow: inset 0 0 0 9999px rgba(11, 24, 56, 0.06); }
.analytics__table tbody tr.amx-hl-row > td.amx-hl-col { box-shadow: inset 0 0 0 9999px rgba(11, 24, 56, 0.11); }
/* Dark Mode: kräftiger blauer Schleier (statt unsichtbarem dunklem) + Schnittzelle am stärksten. */
:root[data-theme="dark"] .amx__table tbody td.amx-hl-col,
:root[data-theme="dark"] .amx__table tbody tr.amx-hl-row > td,
:root[data-theme="dark"] .analytics__table tbody td.amx-hl-col,
:root[data-theme="dark"] .analytics__table tbody tr.amx-hl-row > td { box-shadow: inset 0 0 0 9999px rgba(38, 140, 255, 0.22) !important; }
:root[data-theme="dark"] .amx__table tbody tr.amx-hl-row > td.amx-hl-col,
:root[data-theme="dark"] .analytics__table tbody tr.amx-hl-row > td.amx-hl-col { box-shadow: inset 0 0 0 9999px rgba(38, 140, 255, 0.40) !important; }

.amx__cell { position: relative; width: 26px; height: 22px; line-height: 20px; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; padding: 0 !important; cursor: pointer; user-select: none; }
/* Absenz: 'n' an Spieltagen mit rotem Eck-Dreieck oben rechts (anklickbar → Popup). */
.amx--abs-n::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 7px solid #ff4136; border-left: 7px solid transparent; pointer-events: none; }
.amx__cell:hover { box-shadow: inset 0 0 0 1px var(--c-faint); }
.amx__in { width: 100%; height: 20px; border: none; background: transparent; text-align: center; font: inherit; line-height: 20px; color: inherit; padding: 0; border-radius: var(--radius); -moz-appearance: textfield; }
.amx__in:focus { outline: 2px solid var(--c-line-strong); outline-offset: -2px; background: var(--c-white); color: var(--c-black); }
.amx--1 { background: var(--c-white); }                 /* anwesend */
.amx--0 { background: var(--danger); color: #fff; font-weight: 700; }  /* Absenz rot */
.amx--j { background: var(--success); color: #fff; font-weight: 700; }  /* aufgeboten grün */
.amx--n { background: #000; color: #fff; }             /* nicht aufgeboten — bleibt schwarz */
.amx--off { background: var(--c-surface-2); }                       /* Trainer abwesend (leer) */
.amx--blank { background: var(--c-surface-2); }
.amx__lg.amx--1 { background: var(--c-white); }

/* Wochenende (Sa/So): leicht gräulich */
.amx__row--weekend .amx__c { background: var(--c-surface-2); }
.amx__row--weekend .amx__cell.amx--blank { background: var(--c-surface-2); }
/* zu wenige Trainer: ganze Zeile rot (Warnung) */
/* aktueller Tag: kräftiger schwarzer Rahmen rund um die Zeile (einziger „dicker" Tag) */
.amx__row--today > td { border-top: 2px solid var(--c-fill) !important; border-bottom: 2px solid var(--c-fill) !important; }
.amx__row--today > td:first-child { border-left: 2px solid var(--c-fill) !important; }
.amx__row--today > td:last-child { border-right: 2px solid var(--c-fill) !important; }
.amx__row--today .amx__dt { font-weight: 700; }
/* Trainer-Mangel: Event rot UMRANDET (nicht mehr Zellen einfärben) + Sprechblase */
.amx__row--red > td { border-top: 2px solid var(--danger) !important; border-bottom: 2px solid var(--danger) !important; }
.amx__row--red > td:first-child { border-left: 2px solid var(--danger) !important; }
.amx__row--red > td:last-child { border-right: 2px solid var(--danger) !important; }
.amx__warnbubble { position: absolute; left: calc(100% + 11px); top: 50%; transform: translateY(-50%); z-index: 96;
  width: 200px; background: var(--c-white); border: 2px solid var(--danger); box-shadow: 0 4px 16px rgba(11, 24, 56,.22);
  padding: 8px 10px; font-size: var(--fs-sm); line-height: 1.35; white-space: normal; text-align: left; }
.amx__warnbubble[hidden] { display: none; }
.amx__warnbubble::before { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  border: 8px solid transparent; border-right-color: var(--danger); }
.amx__warnbubble::after { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-right-color: var(--c-white); }
.amx__warnbubble__txt { color: var(--danger); font-weight: 700; }
/* Dynamisch geänderte Aufstellung: Zeile rot umrandet (bitte prüfen) */
.amx__row--dyn > td { border-top: 2px solid var(--danger) !important; border-bottom: 2px solid var(--danger) !important; }
.amx__row--dyn > td:first-child { border-left: 2px solid var(--danger) !important; }
.amx__row--dyn > td:last-child { border-right: 2px solid var(--danger) !important; }
.amx-dynnotice { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 80; max-width: 460px; background: var(--c-white); border: 2px solid var(--danger); box-shadow: 0 4px 18px rgba(11, 24, 56,0.25); padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
/* Kurz-Toast für Backend-Ablehnungen (z.B. „gleiche Uhrzeit") */
.cos-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 200; max-width: 460px; background: var(--c-white); border: 2px solid var(--danger); color: var(--c-black); box-shadow: 0 6px 20px rgba(11, 24, 56,.28); padding: 10px 16px; font-size: var(--fs-sm); font-weight: 600; border-radius: 4px; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.cos-toast--in { opacity: 1; transform: translate(-50%, 0); }
.cos-toast--ok { border-color: var(--success); background: #0e234a; color: #fff; }

/* Klebrige Speicherleiste unten im Spieler-Formular */
.sticky-save { position: sticky; bottom: 12px; z-index: 40; margin: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid #d8e4f3; border-radius: 13px; background: rgba(255,255,255,.94); backdrop-filter: blur(15px);
  box-shadow: 0 14px 40px rgba(13,48,99,.12); }
.sticky-save .save-state { display: flex; align-items: center; gap: 9px; color: var(--c-muted); font-size: 12px; }
.sticky-save .save-actions { display: flex; align-items: center; gap: 8px; }
.state-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning, #e99900); box-shadow: 0 0 0 4px #fff3d8; flex: 0 0 auto; }
.state-dot.saved { background: var(--success); box-shadow: 0 0 0 4px #e9f8ef; }
@media (max-width: 640px) { .sticky-save { flex-direction: column; align-items: stretch; } .sticky-save .save-actions { justify-content: flex-end; } }
/* Aufgebot-Titel-Flyover */
/* (Titel-Flyover .titlepop entfernt — die Aufgebot-Erstellung läuft jetzt über das Blur-Modal /lineup/create-pop) */
/* „Aufgebot aus Datum übernommen"-Banner im Neu-Aufgebot */
.lineup__adopted { background: var(--c-fill-soft); border: 1px solid var(--c-fill); border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.amx-dynnotice__x { position: absolute; top: 4px; right: 6px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--c-muted); }
.amx-dynnotice__x:hover { color: var(--c-black); }
.amx-dynnotice__ttl { font-weight: 700; color: var(--danger); margin-bottom: 4px; }
.amx-dynnotice__hint { color: var(--c-muted); margin: 0 0 var(--sp-2); }
.amx-dynnotice__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.amx-dynnotice__open { color: var(--c-fill); font-weight: 600; margin-left: 6px; white-space: nowrap; }
/* Sprechblase direkt an der roten Zeile: „Aufgebot beeinflusst — bitte prüfen" (x schliesst + löscht Rahmen) */
.amx__dynbubble { position: absolute; left: calc(100% + 11px); top: 50%; transform: translateY(-50%); z-index: 95;
  width: 280px; background: var(--c-white); border: 1px solid var(--danger); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover); padding: 10px 22px 10px 12px; font-size: var(--fs-sm); line-height: 1.4;
  white-space: normal; text-align: left; }
.amx__dynbubble::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-right-color: var(--danger); }
.amx__dynbubble::after { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-right-color: var(--c-white); }
.amx__dynbubble__head { font-weight: 600; color: var(--danger); margin-bottom: 6px; }
.amx__dynbubble__list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.amx__dynbubble__item { display: flex; align-items: flex-start; gap: 6px; }
.amx__dynbubble__x { flex: 0 0 auto; border: 1px solid var(--danger); background: none; cursor: pointer; font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--danger); border-radius: var(--radius-full); padding: 0 6px; }
.amx__dynbubble__x:hover { background: var(--danger); color: #fff; }
.amx__dynbubble__txt { color: var(--c-black); flex: 1 1 auto; min-width: 0; }
.amx__dynbubble__open { display: inline-block; color: var(--danger); font-weight: 600; text-decoration: none; white-space: nowrap; }
.amx__dynbubble__open:hover { text-decoration: underline; }
.amx__dynbubble__foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.amx__dynbubble__clearall { border: 1px solid var(--danger); background: none; cursor: pointer; color: var(--danger); font-weight: 600; border-radius: var(--radius-full); padding: 2px 10px; font-size: 11px; white-space: nowrap; }
.amx__dynbubble__clearall:hover { background: var(--danger); color: #fff; }
/* Änderungshistorie-Popover im Aufgebot-Interface */
/* Aufgebot-Begründung (Bedingungen + Positions-Reasoning) */
.lineup__reason { position: relative; }
.lineup__reason > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-black); font-size: var(--fs-sm); white-space: nowrap; }
.lineup__reason > summary::-webkit-details-marker { display: none; }
.lineup__reasonbody { padding: var(--sp-3) 0; font-size: var(--fs-sm); max-width: 660px; }
.lineup__reasonconds { margin: 0 0 var(--sp-3); padding-left: 1.1em; line-height: 1.55; }
.lineup__reasonposhd { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; }
.lineup__reasonp { border-top: 1px solid var(--c-line); padding: 5px 0; }
.lineup__reasonpname { font-weight: 700; }
.lineup__reasonp ul { margin: 2px 0; padding-left: 1.1em; line-height: 1.45; }
.lineup__reasonstamm { font-size: var(--fs-micro); font-weight: 700; color: var(--c-fill); border: 1px solid var(--c-fill); border-radius: var(--radius-sm); padding: 0 3px; margin-left: 3px; }
.lineup__hist { position: relative; }
.lineup__hist > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-black); font-size: var(--fs-sm); white-space: nowrap; }
.lineup__hist > summary::-webkit-details-marker { display: none; }
.lineup__hist > summary:hover { border-color: var(--c-fill); color: var(--c-fill); }
.lineup__hist[open] > summary { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.lineup__histbox { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 340px; max-width: 88vw; background: var(--c-white); color: var(--c-black); border: 1px solid var(--c-line-strong); box-shadow: 0 4px 16px rgba(11, 24, 56,.16); padding: var(--sp-3); }
.lineup__histttl { font-weight: 700; font-size: var(--fs-sm); letter-spacing: .04em; margin-bottom: 6px; border-bottom: 1px solid var(--c-line); padding-bottom: 4px; }
.lineup__histlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); }
.lineup__histlist li { line-height: 1.35; }
.lineup__histwhen { display: inline-block; min-width: 82px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lineup__histempty { margin: 0; }

/* Flyover nach „Generiere zukünftige Aufgebote" */
.amx__flyover { position: fixed; top: 58px; right: 18px; z-index: 70; max-width: 360px; background: var(--c-white); border: 1px solid var(--c-line-strong); box-shadow: 0 2px 12px rgba(11, 24, 56,0.2); padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3); font-size: var(--fs-sm); }
.amx__flyclose { position: absolute; top: 4px; right: 6px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--c-muted); }
.amx__flyclose:hover { color: var(--c-black); }
.amx__flylist { margin-top: var(--sp-2); max-height: 220px; overflow: auto; }
.amx__flylist li { padding: 1px 0; border-bottom: 1px solid var(--c-line); }
.amx__genbtn { white-space: nowrap; display: inline-block; list-style: none; cursor: pointer; }
.amx__genbtn::-webkit-details-marker { display: none; }
.amx__gen { position: relative; }
.amx__genbox { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 340px; max-width: 90vw;
  background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: 6px; padding: var(--sp-3);
  box-shadow: 0 6px 24px rgba(11, 24, 56,0.12); }
.amx__genhint { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.amx__genquick { display: flex; gap: 6px; margin-bottom: var(--sp-2); }
.amx__genlist { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--sp-2); }
.amx__genitem { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; }
.amx__genitem:hover { background: var(--c-hover); }
.amx__gentype { font-size: var(--fs-micro); font-weight: 700; padding: 0 5px; border-radius: var(--radius-sm); border: 1px solid var(--c-line); }
.amx__gentype--fs { color: var(--c-fill); }
.amx__gentype--ms { color: var(--danger); }
.amx__gendate { font-weight: 600; }
.amx__genopp { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amx__genhas { margin-left: auto; flex: none; font-size: var(--fs-micro); font-weight: 600; color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 999px; padding: 1px 8px; }
.amx__genitem--has .amx__gendate, .amx__genitem--has .amx__genopp { color: var(--c-muted); }

/* --- Tagessicht ---------------------------------------------------------- */
/* ===== Day Summary (Design-System) ===================================== */
.aday { padding: var(--sp-4) var(--sp-5) var(--sp-8); max-width: 1440px; margin-inline: auto; font-family: var(--ff); }
.aday__back { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.aday__back a:hover { text-decoration: underline; }
/* Tag-Navigation: Vortag (links) · Anwesenheitsliste (mitte) · Folgetag (rechts) */
.aday__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.aday__events { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3); }
.aday__events-lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); margin-right: 2px; }
.aday__eventpill { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.aday__eventpill:hover { background: var(--c-hover); border-color: var(--color-primary); color: var(--color-primary); }
.aday__eventpill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.aday__navbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: background .12s, border-color .12s; }
.aday__navbtn:hover { background: var(--c-hover); border-color: var(--color-primary); color: var(--color-primary); }
.aday__navbtn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.aday__navback { font-size: var(--fs-sm); color: var(--c-muted); }
.aday__navback:hover { color: var(--c-black); text-decoration: underline; }
/* Blätter-Navigation zwischen Aufgeboten (nutzt dieselben Pillen wie die Tagesübersicht). */
.lineup__navrow { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }

/* ---- Summary-Banner ---- */
.aday__banner {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(6, minmax(0, 1fr));
  min-height: 172px; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background: var(--c-surface-2);
  box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4);
}
.aday__bseg { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: var(--sp-4) var(--sp-5); border-left: 1px solid var(--c-line); min-width: 0; }
.aday__bseg:first-child { border-left: 0; }
.aday__bseg--link { cursor: pointer; transition: background .12s; }
.aday__bseg--link:hover { background: var(--c-hover); }
.aday__bseg--date { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.aday__bdicon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--c-white); border: 1px solid var(--c-line); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.aday__bdtext { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aday__bwd { font-size: var(--fs-micro); letter-spacing: 0.1em; font-weight: 700; color: var(--c-muted); }
.aday__bdate { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; color: var(--c-black); }
/* Event-Badge in denselben Farben wie die Anwesenheitsliste: FS orange, MS blau, TR schlicht weiss. */
.aday__typebadge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 2px; min-height: 30px; padding: 0 13px; border-radius: 999px; color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.aday__typebadge--fs { background: #e07a1f; }
.aday__typebadge--ms { background: var(--c-fill); }
.aday__typebadge--tr { background: var(--c-white); color: var(--c-black); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.aday__blbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-muted); }
.aday__blbl svg { flex: none; color: var(--c-muted); }
.aday__bval { font-size: 30px; font-weight: 700; line-height: 1; color: var(--c-black); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.aday__bval--sm { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; }
.aday__bclamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aday__bsub { font-size: var(--fs-micro); color: var(--c-muted); overflow-wrap: anywhere; }
/* Direkt im Banner editierbare Felder (Uhrzeit / Ort / Gegner) — sehen aus wie der Wert, editierbar. */
.aday__bedit { width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--c-black); letter-spacing: -0.01em;
  padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-sm); transition: border-color .12s, background .12s; }
.aday__bedit--txt { font-size: var(--fs-md); }
.aday__bedit:hover { border-color: var(--c-line-strong); }
.aday__bedit:focus { border-color: var(--color-primary); background: var(--c-white); outline: none; }
.aday__bedit.is-nocoord { color: var(--danger); }
.aday__bseg--edit { gap: 6px; }
.aday__bseg--wx .aday__bwx-cond { font-size: var(--fs-sm); color: var(--c-black); font-weight: 600; }
.aday__bwx-temp { margin-top: 2px; }

/* ---- Content-Grid + Cards ---- */
.aday__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--sp-4); align-items: start; }
.aday__col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.card.aday__card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.aday__card .card__header { padding: var(--sp-4) var(--sp-4) 0; }
.aday__card .card__body { padding: var(--sp-4); }
.aday__ch { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--c-black); }

/* ---- Wetter & Standort ---- */
/* Tagesübersicht: Wetter kompakt OBEN, grosse interaktive Karte darunter (nutzt die Box-Breite voll). */
.aday__locwarn { border: 1px solid #f59e0b; background: #fffbeb; border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.aday__locwarn-txt { font-size: var(--fs-sm); color: #92400e; line-height: 1.45; }
.aday__locwarn-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.aday__caricon { border: none; background: none; color: var(--color-primary); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; margin-right: 4px; opacity: .85; }
.aday__caricon:hover { opacity: 1; }
.aday__cartoggle { flex: none; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-faint); cursor: pointer; padding: 4px; border-radius: var(--radius); display: inline-flex; align-items: center; }
.aday__cartoggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.aday__cartoggle.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
:root[data-theme="dark"] .aday__cartoggle { background: transparent; }
.rolewarn__ck { display: flex; align-items: center; gap: 8px; margin: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
.aday__trdrive { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.aday__trdrive-h { font-weight: 600; color: var(--c-black); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.aday__trdrive-list { display: flex; flex-direction: column; gap: 4px; }
.aday__trdrive-item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
.aday__trdrive-hint { font-size: var(--fs-micro); margin-top: var(--sp-2); line-height: 1.4; }
/* Fahrer-Zuteilung je Event-Typ (Einstellungen) — Matrix Trainer × Event-Typ */
.drmatrix__table { border-collapse: collapse; font-size: var(--fs-sm); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
.drmatrix__table th { padding: 8px 16px; color: var(--c-muted); font-weight: 600; text-align: center; border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.drmatrix__table th.drmatrix__tn { text-align: left; }
.drmatrix__table tbody td { border-bottom: 1px solid var(--c-line); }
.drmatrix__table tbody tr:last-child td { border-bottom: none; }
.drmatrix__tn { text-align: left; padding: 7px 16px; color: var(--c-black); white-space: nowrap; }
.drmatrix__cell { text-align: center; padding: 5px 16px; }
.drmatrix__box { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--c-line-strong); }
.drmatrix__box input { cursor: pointer; }
.drmatrix__box input:checked ~ svg { color: var(--color-primary); }
.drmatrix__ha { font-size: var(--fs-micro); font-weight: 500; padding: 3px 16px !important; }
.drmatrix__table th[colspan="2"] { border-left: 1px solid var(--c-line); }
.homevenues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.homevenues__box { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 4px; color: var(--c-black); }
.homevenues__box input { cursor: pointer; }
.homevenues__name { font-size: var(--fs-sm); }
:root[data-theme="dark"] .aday__locwarn { border-color: #b45309; background: rgba(180,83,9,.18); }
:root[data-theme="dark"] .aday__locwarn-txt { color: #fbbf24; }
.aday__wx { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin: 0; }
.aday__wx .home__weather { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.aday__wx .home__map { height: 460px; }
.aday__wxfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-divider, var(--c-line)); }
.aday__addr { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-black); }
.aday__addr svg { flex: none; color: var(--c-muted); }
.aday__addr--edit { flex: 1 1 auto; min-width: 0; }
.aday__locin { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--c-black); font: inherit; font-size: var(--fs-sm); padding: 3px 6px; border-radius: var(--radius); }
.aday__locin:hover { border-color: var(--c-line); }
.aday__locin:focus { border-color: var(--color-primary); background: var(--c-white); outline: none; }
.aday__locin.is-nocoord { border-color: #dc2626; background: #fef2f2; }
:root[data-theme="dark"] .aday__locin.is-nocoord { border-color: #ef4444; background: rgba(220,38,38,.14); }
.aday__nocoordhint { display: block; margin-top: 4px; font-size: var(--fs-micro); color: #dc2626; }
.aday__nocoordhint[hidden] { display: none; }   /* hidden-Attribut muss display:block schlagen */
:root[data-theme="dark"] .aday__nocoordhint { color: #f87171; }
.aday__route { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Anwesenheits-Gruppen (Trainer/Spieler) ---- */
.aday__attend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.aday__group { min-width: 0; }
.aday__ghead { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); margin-bottom: var(--sp-2); }
.aday__gdot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; }
.aday__gdot--present { background: var(--color-primary); color: #fff; }
.aday__gdot--absent { background: var(--c-white); color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.aday__gdot--paused { background: var(--color-primary-soft); color: var(--color-primary); }
.aday__gdot svg { width: 15px; height: 15px; }
.aday__plist { list-style: none; margin: 0; padding: 0; }
.aday__prow { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 3px 0; border-bottom: 1px solid var(--c-divider, var(--c-line)); }
.aday__prow:last-child { border-bottom: 0; }
.aday__pfig { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aday__pfig::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 999px; background: var(--c-surface-2); }
.aday__chk { flex: none; width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); }
.aday__paused { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-divider, var(--c-line)); }
.aday__prow--static { color: var(--c-muted); }
.aday__empty { list-style: none; color: var(--c-muted); font-size: var(--fs-sm); padding: 6px 0; }

/* ---- Aufgebot (Empty/State) ---- */
.aday__squad { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.aday__squad-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--color-primary-soft); color: var(--color-primary); }
.aday__squad-icon--empty { background: var(--c-surface-2); color: var(--c-muted); }
.aday__squad-txt { flex: 1; min-width: 140px; }
.aday__squad-title { font-weight: 700; color: var(--c-black); }
.aday__squad-desc { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }
.aday__squad-cta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Leistungstests ---- */
.aday__testlist { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aday__plink { text-decoration: none; color: var(--color-primary); font-size: var(--fs-sm); }
.aday__plink:hover { text-decoration: underline; }
.aday__tests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aday__testbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-white); color: var(--color-primary); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.aday__testbtn:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
/* Tablet: Banner in 2 Reihen (4 Spalten), Datum über die halbe Breite; Inhalt bleibt 2-spaltig. */
@media (max-width: 1099px) {
  .aday__banner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); min-height: 0; }
  .aday__bseg { border-left: 0; background: var(--c-white); }
  .aday__bseg--date { grid-column: 1 / 3; }
}

/* --- Sidebar: Aufstellung ------------------------------------------------ */
.sidebar__title--row { display: flex; align-items: center; justify-content: space-between; }
.sidebar__title--row .kgroup__add { border-color: #fff; }
.sidebar__empty { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-micro); color: var(--c-faint); }
.klist--lineups .krow__last { font-weight: 400; }

/* --- Aufstellung: Panel -------------------------------------------------- */
.lineup { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
.lineup-layout { display: flex; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.lineup-main { flex: 1 1 760px; min-width: 0; }
/* Aufgebot-Analyse: seitlicher Tab (rechts), Panel standardmässig ausgeblendet */
.lineup__antab { flex: none; align-self: stretch; width: 24px; border: none; cursor: pointer;
  background: var(--c-line-strong); color: #fff; writing-mode: vertical-rl; text-orientation: mixed;
  font: 700 var(--fs-micro)/1 var(--ff); letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 0; }
.lineup__antab:hover { filter: brightness(1.25); }
.lineup__analytics { display: none; align-self: stretch; }
.lineup-layout.an-open .lineup__analytics { display: block; }

/* --- Analytics-Panel ----------------------------------------------------- */
.analytics { flex: 0 0 280px; max-width: 320px; border: 1px solid var(--c-line-strong); align-self: stretch; }
.analytics__head { font-weight: 700; letter-spacing: 0.08em; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line-strong); display: flex; justify-content: space-between; align-items: baseline; }
.analytics__head .muted { font-weight: 400; font-size: var(--fs-micro); text-transform: none; letter-spacing: 0; }
.anrange { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); }
.anrange__lbl { font-size: var(--fs-micro); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.anrange__date { font: inherit; font-size: var(--fs-xs); border: 1px solid var(--c-line); padding: 2px 4px; background: var(--c-white); min-width: 0; }
.anrange__sep { color: var(--c-muted); }
.anrange__std { border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-muted); cursor: pointer; border-radius: var(--radius-sm); padding: 1px 7px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.anrange__std:hover { border-color: var(--c-fill); color: var(--c-fill); }
.anrange__std.is-on { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }   /* Default (STD) aktiv */
.anrange__day { letter-spacing: 0; text-transform: none; }   /* längeres Label „Nur Aufgebotstag" */
.ana-toolbar .anrange { border-bottom: 0; padding: 0; }   /* im grossen Analyse-Toolbar inline */
.ana-sysf { display: inline-flex; align-items: center; gap: 6px; }
.ana-sysf__lbl { font-size: var(--fs-sm); }
.ana-sysf .att-an__sel { font-size: var(--fs-sm); padding: 3px 6px; }
.analytics__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.analytics__table th, .analytics__table td { border-bottom: 1px solid var(--c-line); padding: 4px var(--sp-2); text-align: center; }
.analytics__table th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); border-bottom: 1px solid var(--c-line-strong); }
.analytics__name { text-align: left !important; }
.analytics__num { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Analyse: Positionstyp-/Positions-Spalten (Spielsystem-Auswahl rechts) */
.analytics__fstart { border-left: 2px solid var(--c-line-strong) !important; }
/* Spielsystem-Gruppe: Überschrift „Spielsystem" + Filter-Select (nach Leistungstests, über den Positionsspalten).
   WICHTIG: das <th> bleibt eine echte Tabellenzelle (kein display:flex!), sonst wird das colspan ignoriert und
   die erste Positionsspalte („Stürmer") aufgebläht. Die Flex-Anordnung sitzt im inneren Wrapper. */
.analytics__group--syssel { padding: 2px 4px; text-transform: none; letter-spacing: 0; }
.analytics__sysgrp { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.analytics__syslbl { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
/* Trainer-Zeilen in der grossen Analyse-Tabelle: nur SE/TE, klar abgesetzt */
.lv--analytics .analytics__trsep td { text-align: left; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--c-muted); background: var(--c-fill-soft); border-top: 2px solid var(--c-line-strong);
  padding: 3px var(--sp-2); height: auto; }
.lv--analytics .analytics__trrow .analytics__name { font-style: italic; }
select.analytics__syssel { min-width: 0; max-width: 100%; width: auto; font-size: var(--fs-micro); font-weight: 700;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-white); color: var(--c-black); padding: 2px 6px; cursor: pointer; }
.analytics__poscol { font-size: var(--fs-micro); font-weight: 700; white-space: nowrap; }
/* Leistungstest-Spalten (je Test eine Spalte, Kopf öffnet den Test) — EXAKT so breit wie alle
   anderen Datenspalten (var(--ana-cell)); der Kategorie-Kopf (colspan) darf breiter überlaufen. */
.analytics__testcol { font-size: var(--fs-micro); font-weight: 700; white-space: nowrap; }
.lv--analytics .analytics__table th.analytics__testcol,
.lv--analytics .analytics__table td.analytics__testnum {
  width: var(--ana-cell); max-width: var(--ana-cell); min-width: 0; overflow: hidden; }
.lv--analytics .analytics__table th.analytics__testcol .analytics__colh-lbl { max-height: 34px; overflow: hidden; }
.analytics__teststart { border-left: 2px solid var(--c-line-strong) !important; }
.analytics__testkind { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--c-fill); margin-bottom: 1px; }
a.analytics__testlink { color: inherit; text-decoration: none; cursor: pointer; }
a.analytics__testlink:hover { text-decoration: underline; }
/* Zwischenkategorie-Kopf (Leistungstests › Kategorie › Test). Der Text liegt ABSOLUT im Kopf, damit
   er die (colspan-)Spaltenbreite NICHT aufbläht → Test-Spalten bleiben so schmal wie alle anderen. */
.analytics__cathead { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: var(--fs-micro);
  background: rgba(128, 128, 128, 0.06); text-align: center; padding: 0; position: relative; height: 20px; overflow: hidden; }
.analytics__cathead-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 2px; white-space: nowrap; padding: 0 2px; }
.analytics__cathead-in .analytics__catlink { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.analytics__cathead-in .ana-graph { flex: 0 0 auto; }
a.analytics__catlink { color: var(--c-fill); text-decoration: none; cursor: pointer; }
a.analytics__catlink:hover { text-decoration: underline; }
.analytics__cathead .ana-graph { vertical-align: middle; }
.analytics__testnum { font-size: var(--fs-micro); font-weight: 700; }
/* Analyse-Vollansicht: breite Tabelle horizontal scrollbar, erste Spalte (Spieler) fixiert. */
.lv--analytics { max-width: none; }
.ana-scroll { overflow-x: auto; }
.lv--analytics .analytics__table { width: auto; min-width: 100%; }
.lv--analytics .analytics__name { position: sticky; left: 0; z-index: 2; background: var(--c-white); border-right: 1px solid var(--c-line-strong); text-align: left; }
.lv--analytics thead th.analytics__name { z-index: 4; }
.analytics__na { color: var(--c-faint); font-weight: 400; }
/* Heatmap-Zellen: dunkler Text auf der kräftigen Farbfläche (Hell- UND Dark Mode) */
.analytics__heat, .analytics__heat .ana-link { color: #111 !important; }
/* Analyse: sortierbare Spaltenköpfe (nur die Einzelspalten-Zeile, nicht die Gruppen) */
.analytics__table thead th[data-ci] { cursor: pointer; user-select: none; }
.analytics__table thead th[data-sort="asc"]::after { content: " ▲"; font-size: 8px; }
.analytics__table thead th[data-sort="desc"]::after { content: " ▼"; font-size: 8px; }
/* Sortierbare Kopfzellen der Aufgebot-/Kader-Liste (Klick sortiert die Spalte). */
.lv__hrow--sortable .lv__c[data-si] { cursor: pointer; user-select: none; }
.lv__hrow--sortable .lv__c[data-si]:hover { color: var(--c-fill); }
.lv__hrow--sortable .lv__c[data-si][data-sort="asc"]::after { content: " ▲"; font-size: 8px; }
.lv__hrow--sortable .lv__c[data-si][data-sort="desc"]::after { content: " ▼"; font-size: 8px; }
/* Gruppen-Kopfzeile (Spieleinsätze / Trainingseinsätze / Benotung / Leistungstests / Spielsystem) */
.analytics__group { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--c-black);
  background: rgba(128, 128, 128, 0.12); white-space: nowrap; position: relative; height: 22px; }
/* Gruppen-Beschriftung ABSOLUT (aus dem Fluss), damit ein langer Bereichsname wie „Leistungstests"
   die (colspan-)Spaltenbreite NICHT aufbläht → alle Datenspalten bleiben exakt gleich breit. */
.analytics__group-in { position: absolute; top: 0; left: 0; right: 0; height: 22px; display: flex;
  align-items: center; justify-content: center; white-space: nowrap; padding: 0 3px; pointer-events: none; }
.analytics__gstart { border-left: 1px solid var(--c-line); }
/* STD-Spalten optisch zurücknehmen (Heatmap-Hintergrund überschreibt via inline-style) */
.analytics__std:not(.analytics__heat) { background: rgba(128, 128, 128, 0.05); }
thead th.analytics__std { color: var(--c-faint); font-weight: 400; }
.ana-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.ana-link:hover { text-decoration: underline; }
.mdet__list { max-width: 560px; }
.mdet__val { margin-left: auto; font-weight: 700; }
.mdet__list .lv__row { gap: var(--sp-2); }
.analytics__foot { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-micro); border-top: 1px solid var(--c-line); }
/* Analyse-Legende (Spaltennamen unterhalb der Tabelle definiert) */
.ana-legend { margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.ana-legend > div { display: flex; gap: var(--sp-2); padding: 2px 0; }
.ana-legend dt { flex: none; width: 132px; font-weight: 700; }
.ana-legend dd { margin: 0; color: var(--c-muted); }
/* Analyse-Toolbar: Spielsystem-Auswahl + Spalten-Umschalter (über der Tabelle) */
.ana-toolbar { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.ana-toolbar__field { display: flex; flex-direction: column; gap: 2px; }
.ana-toolbar__lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
.ana-toolbar .att-an__sel { min-width: 180px; padding: 3px 6px; font-size: var(--fs-sm); }
.ana-cols { position: relative; }
.ana-cols__btn { display: inline-block; font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); background: var(--c-white); color: var(--c-black); padding: 4px 12px; cursor: pointer; list-style: none; }
.ana-cols__btn::-webkit-details-marker { display: none; }
.ana-cols__btn::after { content: " ▾"; color: var(--c-muted); }
.ana-cols[open] .ana-cols__btn { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.ana-cols[open] .ana-cols__btn::after { content: " ▴"; color: #fff; }
.ana-cols__pop { position: absolute; z-index: 40; left: 0; margin-top: 4px; background: var(--c-white);
  border: 1px solid var(--c-line-strong); border-radius: 4px; padding: var(--sp-3); min-width: 280px; max-width: 380px;
  box-shadow: 0 6px 24px rgba(11, 24, 56, 0.14); }
.ana-cols__std { padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ana-cols__hint { font-size: var(--fs-micro); color: var(--c-muted); }
.ana-cols__grp { padding: var(--sp-2) 0; }
.ana-cols__grphead { margin-bottom: 3px; }
.ana-cols__cols { display: flex; flex-wrap: wrap; }
.ana-cols__cols.muted { font-size: var(--fs-micro); color: var(--c-muted); }
/* Umschalt-Pillen: inaktiv = Umriss (hellgraue Schrift), aktiv = blau mit weisser
   Schrift → in beiden Themes klar lesbar (im Dark-Mode helle Schrift auf dunklem Grund). */
.ana-ctog { display: inline-block; font: inherit; font-size: var(--fs-micro); font-weight: 700; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: 2px 7px; margin: 2px 4px 2px 0; background: transparent; color: var(--c-muted); cursor: pointer; }
.ana-ctog:hover { border-color: var(--c-fill); color: var(--c-black); }
.ana-ctog.is-on { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.ana-ctog--grp { text-transform: uppercase; letter-spacing: 0.04em; }
.ana-ctog--std { border-style: dashed; }
.ana-ctog[disabled] { opacity: 0.4; cursor: default; }
.ana-ctog[disabled]:hover { border-color: var(--c-line); color: var(--c-muted); }
/* Views-Steuerung */
.ana-views { display: flex; align-items: center; gap: var(--sp-2); }
.ana-saveview { display: flex; flex-direction: column; gap: var(--sp-2); }
.ana-saveview__inp { font: inherit; font-size: var(--fs-sm); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 4px 6px; background: var(--c-white); color: var(--c-black); }
.ana-saveview__del { align-self: flex-start; margin-top: var(--sp-2); }
/* Farbausschluss: Icon im Spaltenkopf + Editor-Leiste */
/* Spaltenköpfe 90° nach Norden gedreht (wie Anwesenheitsliste) + quadratische, gleich grosse
   Datenzellen. Icon-Stapel (Graph oben, Ausblenden darunter) unten am Zellenrand fluchtend. */
.lv--analytics { --ana-cell: 2.2rem; }
.lv--analytics .analytics__table { table-layout: fixed; width: max-content; min-width: 0; }
.lv--analytics .anacol-name { width: 6.2rem; }
.lv--analytics .anacol-data { width: var(--ana-cell); }
.lv--analytics .anacol-sysph { width: 9.5rem; }
.analytics__sysph { background: rgba(128, 128, 128, 0.05); }
.lv--analytics .analytics__table th.analytics__colh {
  position: relative; vertical-align: bottom; padding: 4px 0 34px; }
.lv--analytics .analytics__colh-lbl { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; text-transform: none; letter-spacing: 0; line-height: 1.1; }
.analytics__colh-icons { position: absolute; left: 0; right: 0; bottom: 5px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* quadratische Datenzellen (Breite via colgroup = Höhe = --ana-cell) */
.lv--analytics .analytics__table td.analytics__num {
  box-sizing: border-box; height: var(--ana-cell); padding: 0; text-align: center; font-size: var(--fs-sm);
  overflow: hidden; }
/* Spielername: IMMER zweizeilig (Nachname / Vorname) → einheitliche Zeilenhöhe */
.lv--analytics .analytics__name {
  font-size: var(--fs-micro); line-height: 1.12; padding: 2px 6px; text-align: left; white-space: normal; overflow: hidden; }
.lv--analytics thead th.analytics__name { font-size: var(--fs-micro); }
.analytics__nn { font-weight: 700; }
.analytics__vn { color: var(--c-muted); font-weight: 400; }
.ana-xcol { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 1px;
  border: none; background: none; color: var(--c-faint); cursor: pointer; line-height: 1; }
.ana-xcol:hover { color: var(--c-black); }
.ana-xcol.is-active { color: var(--c-accent, var(--danger)); }
/* 2-Metriken-Tabelle (Aufgebot): klickbarer Name + Farbausschluss-Icon in eigener, ausgerichteter Spalte */
.analytics__name .ana-pname { color: inherit; text-decoration: none; cursor: pointer; }
.analytics__name .ana-pname:hover { text-decoration: underline !important; }
.att-an .analytics__name { white-space: nowrap; }
/* Eigene, schmale Spalte für das Ausblenden-Icon → alle Icons perfekt vertikal ausgerichtet */
.att-an__xh, .att-an__xcell { width: 22px; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; }
.att-an__mh { min-width: 40px; }
.ana-xrow { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: none; background: none; color: var(--c-muted); cursor: pointer; padding: 0; line-height: 1; opacity: 0.5; }
.ana-xrow:hover { opacity: 1; color: var(--c-black); }
.ana-xrow.is-active { color: var(--danger); opacity: 1; }
.ana-xcol.is-open { color: var(--c-black); background: rgba(128, 128, 128, 0.18); border-radius: 50%; }
.ana-exclbar { border: 1px solid var(--c-line-strong); border-radius: 4px; padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3); background: rgba(128, 128, 128, 0.06); }
.ana-exclbar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.ana-exclbar__close { border: none; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--c-muted); padding: 0 4px; }
.ana-exclbar__close:hover { color: var(--c-black); }
.ana-exclbar__players { display: flex; flex-wrap: wrap; }
.ana-exclbar__hint { margin-top: var(--sp-2); font-size: var(--fs-micro); }
/* Graph-Icon im Spaltenkopf (öffnet Balkendiagramm) */
.ana-graph { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 1px;
  border: none; background: none; color: var(--c-faint); cursor: pointer; line-height: 1; }
.ana-graph:hover { color: var(--c-fill); }
/* Balkendiagramm: Balkenumriss + Achsen/Beschriftung theme-aware (Dark-Mode = helle Schrift) */
.barchart { display: block; }
.barchart text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.barchart .bc-bar { stroke: var(--c-line-strong); stroke-width: 0.5; }
.barchart .bc-val { fill: var(--c-black); font-weight: 700; }
.barchart .bc-name { fill: var(--c-muted); }
.barchart .bc-axis { stroke: var(--c-line-strong); stroke-width: 1; }
/* Blaue Durchschnittslinie (über-/unterdurchschnittlich sofort erkennbar) */
.barchart .bc-avg { stroke: var(--c-fill); stroke-width: 1.4; stroke-dasharray: 5 3; }
.barchart .bc-avg-t { fill: var(--c-fill); font-weight: 700; }
/* Interaktive Diagramm-Ansicht (eigener Tab) */
.chartview__bar { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.chartview__opt { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.chartview__spacer { flex: 1 1 auto; }
.chartview__lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
/* Chart-Tab: Diagramm füllt den verfügbaren Platz (hohe Balken, breite nach Bedarf scrollbar) */
.chartview__chart { box-sizing: border-box; height: 74vh; overflow: auto; border: 1px solid var(--c-line);
  border-radius: 4px; padding: var(--sp-3); display: flex; align-items: stretch; }
.chartview__chart .barchart { height: 100%; width: auto; margin: 0 auto; }

/* Leistungstest-Entwicklung: Linienchart (Team-Ø dick blau, je Spieler eine farbige Linie) */
.linechart { display: block; }
.linechart text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.linechart .bc-axis { stroke: var(--c-line-strong); stroke-width: 1; }
.linechart .bc-name { fill: var(--c-muted); }
.linechart .lc-grid { stroke: var(--c-line); stroke-width: 0.6; }
.linechart .lc-yt { fill: var(--c-muted); }
.linechart .lc-team { stroke: var(--c-fill); }
.linechart .lc-team-dot { fill: var(--c-fill); stroke: var(--c-white); stroke-width: 0.8; }
.linechart .lc-yt-right { fill: var(--c-muted); }
.linechart .lc-axtitle { fill: var(--c-muted); font-weight: 700; }

/* ===== Entwicklung: Development Charts (3-Schritt-Design-System) ===== */
.charts__devwrap { display: block; }
.lc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; }
.lc-legitem { display: inline-flex; align-items: center; gap: 6px; color: var(--c-black); }
.lc-legline { width: 20px; height: 0; display: inline-block; }

.devx { border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); padding: 18px; margin-bottom: 16px; }
.devx__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.devx__brand { display: flex; align-items: center; gap: 12px; }
.devx__logo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); flex: none; }
.devx__title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-black); line-height: 1.05; }
.devx__sub { font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.devx__acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.devx__btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); cursor: pointer; }
.devx__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.devx__btn--outline { border-color: var(--color-primary); color: var(--color-primary); }
.devx__btn--outline:hover { background: var(--color-primary-soft); }
.devx__btn--ghost { border-color: transparent; color: var(--c-muted); padding: 8px 10px; }
.devx__btn--ghost:hover { color: var(--danger); background: var(--danger-soft); }

/* Reiter-Leiste: je Entwicklungs-Chart ein Reiter; der bearbeitete ist blau umrahmt; „+" ganz rechts. */
.devx__tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.devx__tabrow { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.devx__tab { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 8px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-muted); cursor: pointer; white-space: nowrap; flex: none; }
.devx__tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.devx__tab.is-active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); cursor: default; }
.devx__tabadd { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 8px; border: 1px dashed var(--c-line-strong); background: var(--c-white); color: var(--c-muted); cursor: pointer; }
.devx__tabadd:hover { border-color: var(--color-primary); color: var(--color-primary); border-style: solid; }
/* Werkzeugleiste über dem Chart (Name + Zu Home / Löschen). */
.devx__chartbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.devx__chartname { font-size: 15px; font-weight: 700; color: var(--c-black); letter-spacing: -0.01em; }
.devx__nameedit { position: relative; display: inline-flex; align-items: center; }
.devx__chartnameinput { font: inherit; font-size: 15px; font-weight: 700; color: var(--c-black); letter-spacing: -0.01em;
  border: 1px solid var(--c-line-strong); border-radius: 8px; background: var(--c-surface-2); padding: 5px 30px 5px 10px; max-width: 260px; min-width: 120px; }
.devx__chartnameinput:hover { border-color: var(--color-primary); }
.devx__chartnameinput:focus { outline: none; border-color: var(--color-primary); background: var(--c-white); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.devx__nameic { position: absolute; right: 9px; color: var(--c-muted); pointer-events: none; }
.devx__chartbar .devx__acts { margin-left: auto; }

.devx__chartcard { border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface-2); padding: 14px 16px; }
.devx__chart { overflow-x: auto; max-width: 100%; }
.devx__chart .linechart { display: block; margin: 0 auto; }
/* Wenige Tage: Chart streckt sich auf die volle Kachelbreite (Punkte gespreizt). */
.devx__chart .linechart.devline--fill { width: 100%; max-width: 100%; height: auto; }
/* Viele Tage: natürliche Breite je Tag, feste Höhe, horizontal scrollen (nicht stauchen). */
.devx__chart .linechart.devline--scroll { width: auto; max-width: none; height: 420px; margin: 0; }
.devx__charthint { text-align: center; font-size: 12px; color: var(--c-muted); margin-top: 8px; }
/* Development Chart als Home-Kachel: Chart füllt die Kachelbreite, Legende darunter. */
.home__devline { display: block; overflow-x: auto; }
.home__devline .linechart.devline--fill { width: 100%; max-width: 100%; height: auto; }
.home__devline .linechart.devline--scroll { width: auto; max-width: none; height: 300px; }

.devx__grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(440px, 1.35fr) minmax(240px, 0.65fr); gap: 12px; margin-top: 14px; align-items: start; }
.devx__step { border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); padding: 16px; min-width: 0; }
.devx__steph { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--c-black); margin-bottom: 12px; letter-spacing: -0.01em; flex-wrap: wrap; }
.devx__stepn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 700; flex: none; }

.devx__mgroup { border: 1px solid var(--c-line); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; }
.devx__mgroup.is-active { border-color: #8ebcff; background: var(--color-primary-soft); }
.devx__mgroup.is-locked { opacity: .55; }
.devx__mghead { display: flex; align-items: center; gap: 8px; }
.devx__mgstate { display: inline-flex; align-items: center; flex: none; }
.devx__ic-ok { color: var(--success); }
.devx__ic-lock { color: var(--c-muted); }
.devx__mgdot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); display: inline-block; }
.devx__mgname { font-size: 14px; font-weight: 600; color: var(--c-black); flex: 1 1 auto; min-width: 0; }
.devx__axbadge { font-size: 11px; font-weight: 700; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; flex: none; }
.devx__axbadge--l { background: var(--color-primary); }
.devx__axbadge--r { background: #6aa4ff; }
.devx__mgnote { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.devx__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.devx__testcat { margin-top: 8px; }
.devx__testcatlbl { display: block; font-size: 11px; color: var(--c-muted); margin-bottom: 4px; }
.devx__axhint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); margin-top: 4px; }

.devx__var { display: inline-flex; align-items: stretch; border-radius: 999px; }
.devx__varbtn { font: inherit; font-size: 13px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-muted); padding: 4px 11px; cursor: pointer; border-radius: 999px; }
.devx__varbtn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.devx__varbtn:disabled { cursor: not-allowed; }
.devx__var.is-on .devx__varbtn { background: var(--color-primary); border-color: var(--color-primary); color: #fff; border-radius: 999px 0 0 999px; }
.devx__modebtn { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--color-primary); border-left: none; background: var(--color-primary-soft); color: var(--color-primary); padding: 4px 9px; cursor: pointer; border-radius: 0 999px 999px 0; min-width: 28px; }
.devx__modebtn:hover { background: #d7e6ff; }

.devx__mode { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.devx__modeseg { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: 999px; overflow: hidden; }
.devx__segbtn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border: none; background: transparent; color: var(--c-muted); cursor: pointer; }
.devx__segbtn.is-on { background: var(--color-primary); color: #fff; }
.devx__warn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--warning); }
.devx__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.devx__chip { font: inherit; font-size: 13px; font-weight: 500; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-muted); padding: 5px 12px; cursor: pointer; border-radius: 999px; }
.devx__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.devx__chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.devx__searchwrap { position: relative; margin-bottom: 10px; }
.devx__searchic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.devx__search { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 12px 8px 34px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface-2); color: var(--c-black); }
.devx__plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 3px 12px; max-height: 260px; overflow-y: auto; padding: 4px 2px; }
.devx__pchk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--c-black); cursor: pointer; padding: 2px 0; }
.devx__pchk.is-locked { cursor: default; }
.devx__pchk.is-locked span { color: var(--c-muted); }
.devx__pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

.devx__groups { margin-top: 14px; border-top: 1px solid var(--c-line); padding-top: 12px; }
.devx__groupsh { font-size: 13px; font-weight: 700; color: var(--c-black); margin-bottom: 8px; }
.devx__gsave { width: 100%; font: inherit; font-size: 13px; font-weight: 600; padding: 8px; border-radius: 8px; border: none; background: var(--color-primary); color: #fff; cursor: pointer; }
.devx__gsave:hover:not(:disabled) { background: var(--color-primary-hover, #075bdd); }
.devx__gsave.is-off { background: var(--c-line); color: var(--c-muted); cursor: not-allowed; }
.devx__grow { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--c-line); }
.devx__gname { font-size: 13px; font-weight: 600; color: var(--c-black); }
.devx__gnameinput { font: inherit; font-size: 13px; font-weight: 600; color: var(--c-black); flex: 1 1 auto; min-width: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 3px 7px; }
.devx__gnameinput:hover { border-color: var(--c-line); }
.devx__gnameinput:focus { outline: none; border-color: var(--color-primary); background: var(--c-white); }
.devx__gcount { margin-left: auto; font-size: 12px; color: var(--c-muted); flex: none; }
.devx__gtrash { border: none; background: none; color: var(--c-muted); cursor: pointer; padding: 3px; line-height: 0; border-radius: 6px; }
.devx__gtrash:hover { color: var(--danger); background: var(--danger-soft); }

.devx__presets { display: flex; gap: 6px; margin-bottom: 12px; }
.devx__field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12px; color: var(--c-muted); }
.devx__flab { font-weight: 600; }
.devx__fhint { font-weight: 400; }
.devx__field input, .devx__field select { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface-2); color: var(--c-black); }

.devx__status { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); font-size: 13px; color: var(--c-muted); }
.devx__statusbrand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-black); }
.devx__stat { position: relative; padding-left: 17px; }
.devx__stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: var(--c-line-strong); }

.pdash__devcard { grid-column: 1 / -1; }
/* Im Mittelteil steht die Entwicklung NEBEN der Heatmap, spannt also nicht über beide Spalten. */
.pdash__mid .pdash__devcard { grid-column: auto; }
.devx--player { border: none; background: none; padding: 0; margin: 0; }
.devx__pcfg { margin-top: 10px; }
.devx__pcfg-h { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--c-black); padding: 4px 0; }
.devx__pcfg-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

@media (max-width: 1100px) { .devx__grid { grid-template-columns: 1fr 1fr; } .devx__step:last-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .devx__grid { grid-template-columns: 1fr; } .devx__step:last-child { grid-column: auto; } }

:root[data-theme="dark"] .devx { background: var(--c-surface); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .devx__chartcard, :root[data-theme="dark"] .devx__status,
:root[data-theme="dark"] .devx__step { background: var(--c-surface-2); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .devx__btn, :root[data-theme="dark"] .devx__chip, :root[data-theme="dark"] .devx__varbtn,
:root[data-theme="dark"] .devx__search, :root[data-theme="dark"] .devx__field input,
:root[data-theme="dark"] .devx__field select, :root[data-theme="dark"] .devx__tab,
:root[data-theme="dark"] .devx__tabadd { background: var(--c-surface-2); }
:root[data-theme="dark"] .devx__tab.is-active { background: var(--color-primary-soft); }
:root[data-theme="dark"] .devx__gnameinput:focus,
:root[data-theme="dark"] .devx__chartnameinput:focus { background: var(--c-surface-2); }
:root[data-theme="dark"] .devx--player { background: none; }
.perfchart__chart { box-sizing: border-box; max-height: 66vh; overflow: auto; border: 1px solid var(--c-line);
  border-radius: 4px; padding: var(--sp-3); }
.perfchart__chart .linechart { margin: 0 auto; max-width: 100%; height: auto; }
.perfchart__legend-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.perfchart__team-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; }
.perfchart__team-swatch { width: 20px; height: 3px; border-radius: var(--radius-sm); background: var(--c-fill); display: inline-block; }
.perfchart__swatch { width: 12px; height: 3px; border-radius: var(--radius-sm); display: inline-block; flex: 0 0 auto; }
.perfchart__pl { display: flex; align-items: center; gap: 6px; }
.perfchart__pl--nodata { opacity: 0.45; }

/* ── Positions-Heatmap (Formationsmatrix + transparente Rot/Grün-Heatmap) ────── */
/* Sidebar-Heatmaps: Spielsystem-Auswahl oben */
.posheat__syschoose { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.posheat__syssel-top { font-size: var(--fs-sm); padding: 3px 6px; max-width: 260px; }
/* Desktop: Heatmap + Spielerauswahl NEBENEINANDER (nicht umbrechen), damit man Änderungen sofort sieht */
.posheat__wrap { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: nowrap; }
.posheat__fieldcol { flex: 1 1 auto; min-width: 0; max-width: 620px; }
.posheat__forms { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* Das „Spielfeld": gleiche grüne, abgerundete Feld-Optik wie die Startaufstellung (.sau-pitch):
   Hochformat (0.74), grüner Rand, abgerundete Ecken; overflow:hidden klippt die Heatmap AUFS Feld
   (sie schiesst nicht mehr über den Rand hinaus) und entfernt den bisherigen blau-grauen Rahmen. */
.posheat__field { position: relative; width: 100%; aspect-ratio: 0.74;
  border: 1px solid var(--pitch-border, #60a550); border-radius: 8px; overflow: hidden; }   /* Grün + Linien vom gemeinsamen SVG-Overlay */
.posheat__field::before, .posheat__field::after { content: none; }
/* durchgehendes, interpoliertes Heatmap-Feld (per JS auf Canvas gezeichnet, bilinear hochskaliert) */
.posheat__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.posheat__addhome { margin-left: auto; }
/* Heatmap als Home-Kachel (kompakt, ohne Positionsnamen) */
.posheat__field--tile { max-width: 300px; margin: 0 auto; }
.home__heatmap-link { cursor: pointer; }
.home__heatmap-link:hover { outline: 2px solid var(--c-fill); outline-offset: 1px; }
.posheat__field--tile .posheat__pname { display: none; }
.posheat__field--tile .posheat__pos { padding: 0 3px; min-width: 18px; }
.posheat__field--tile .posheat__pnum { font-size: 9px; }
.posheat__field--tile .posheat__pcnt { font-size: 11px; }
/* --- Spieler-Heatmap-Karussell: Positions-Heatmaps über alle Aufgebote eines Spielers ---------- */
.plheat__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.plheat__arrow { border: 1px solid var(--c-line-strong); background: var(--c-white); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 11px; }
.plheat__arrow:hover { background: var(--c-fill); color: #fff; }
.plheat__arrow.is-off { color: var(--c-line); cursor: default; border-color: var(--c-line); }
.plheat__lbl { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 220px; text-align: center; }
.plheat__idx { font-size: var(--fs-micro); color: var(--c-muted); }
.plheat__game { font-size: var(--fs-sm); font-weight: 600; }
.plheat__when { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; }
.plheat__when--upcoming { color: var(--c-fill); }
.plheat__when--past { color: var(--c-muted); }
.plheat__fieldwrap { max-width: 360px; }
.plheat__nodata { margin-top: var(--sp-2); }
/* Heatmap-Galerie (Systematische Rotation über alle Aufgebote) */
.plptheat__filter { max-width: 640px; }
.plptheat__gal { display: flex; gap: var(--sp-4); align-items: flex-start; flex-wrap: wrap; margin-top: var(--sp-3); }
.plptheat__stage { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 340px; min-width: 300px; }
.plptheat__frames { flex: 1 1 auto; max-width: 360px; }
.plptheat__frame { display: none; }
.plptheat__frame.is-active { display: block; }
.plptheat__cap { font-size: var(--fs-sm); font-weight: 600; text-align: center; margin-bottom: var(--sp-2); color: var(--c-muted); }
.plptheat__nav { flex: none; width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-black); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s, box-shadow .15s; }
.plptheat__nav:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary); }
.plptheat__nav:disabled { opacity: .35; cursor: default; }
.plptheat__side { flex: 1 1 240px; min-width: 220px; max-width: 340px; }
.plptheat__listh { font-weight: 600; margin-bottom: 2px; }
.plptheat__listhint { font-size: var(--fs-xs); margin: 0 0 var(--sp-2); }
.plptheat__list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.plptheat__lrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius); font-size: var(--fs-sm); }
.plptheat__lrow:hover { background: var(--c-surface-2); }
.plptheat__lrow.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); }
.plptheat__lrow input { flex: none; cursor: pointer; }
.plptheat__llink { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; overflow: hidden; cursor: pointer; }
.plptheat__llink .plptheat__ltitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plptheat__llink:hover .plptheat__ltitle { color: var(--color-primary); text-decoration: underline; }
.plptheat__ldate { font-variant-numeric: tabular-nums; color: var(--c-muted); flex: none; }
.plptheat__ltitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plptheat__legend { max-width: 360px; margin-top: var(--sp-3); }
/* Charts-/Home-Heatmap-Kacheln zeigen den Positions-NAMEN (oben) + Anzahl/Note (unten) — nicht die Nummer */
.charts__hmfield .posheat__pos, .home__heatmap-link .posheat__pos { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; padding: 3px 8px; }
.charts__hmfield .posheat__pname, .home__heatmap-link .posheat__pname { display: block; font-size: 9px; font-weight: 700; }
/* Klickbare Positionen (nur im grossen Feld) → Aufgebot-Liste je Position */
.posheat__field .posheat__pos--link { pointer-events: auto; cursor: pointer; }
.posheat__field .posheat__pos--link:hover { box-shadow: 0 0 0 2px var(--c-fill); z-index: 4; }
/* Positions-Detail (Aufgebote je Spieler auf einer Position) */
.posdet__intro { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.posdet__group { border-top: 1px solid var(--c-line); padding: var(--sp-3) 0; }
.posdet__group:first-of-type { border-top: none; }
.posdet__player { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 4px; }
.posdet__pname { font-weight: 700; color: var(--c-black); text-decoration: none; font-size: var(--fs-md); }
.posdet__pname:hover { color: var(--c-fill); text-decoration: underline; }
.posdet__cnt { font-size: var(--fs-micro); color: var(--c-muted); }
.posdet__list { list-style: none; margin: 0; padding: 0; }
.posdet__list li { border-bottom: 1px solid var(--c-line); }
.posdet__llink { display: flex; align-items: baseline; gap: var(--sp-3); padding: 5px var(--sp-2); text-decoration: none; color: var(--c-black); }
.posdet__llink:hover { background: var(--c-fill); color: #fff; }
.posdet__ldate { flex: 0 0 auto; min-width: 92px; color: var(--c-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.posdet__ltitle { font-weight: 700; }
.posdet__lopp { color: var(--c-muted); font-size: var(--fs-sm); }
.posdet__lcnt { margin-left: auto; font-size: var(--fs-micro); font-weight: 700; color: var(--c-fill); }
.posdet__lnote { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--c-fill); }
.posdet__llink:hover .posdet__ldate, .posdet__llink:hover .posdet__lopp, .posdet__llink:hover .posdet__lcnt, .posdet__llink:hover .posdet__lnote { color: #fff; }
/* Positions-Labels als weisse, runde Pillen — identisch zum Namens-Chip der Startaufstellung (.sau-player). */
.posheat__pos { position: absolute; transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  background: #fff; border: 1px solid rgba(20, 35, 60, 0.16); border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(12, 35, 56, 0.16);
  padding: 3px 8px; min-width: 30px; max-width: 46%; text-align: center; }
.posheat__pnum { font-size: 10px; font-weight: 700; color: #111827; }
.posheat__pname { font-size: 9px; color: #374151; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posheat__pcnt { font-size: 12px; font-weight: 800; color: #111827; }
.posheat__pos:not(.is-hot) .posheat__pcnt { color: var(--c-muted); font-weight: 700; }
.posheat__modes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.posheat__compsep { color: var(--c-line); font-weight: 700; }
.ana-ctog--sm { padding: 2px 7px; }
.posheat__legend { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-micro); color: var(--c-muted); }
.posheat__legbar { flex: 0 0 120px; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, hsla(120,80%,46%,0.85), hsla(60,80%,46%,0.85), hsla(0,80%,46%,0.85)); }
/* Noten-Legende: tief=rot … hoch=grün (umgekehrt zur Einsätze-Legende) */
.posheat__legbar--grade {
  background: linear-gradient(to right, hsla(0,80%,46%,0.85), hsla(60,80%,46%,0.85), hsla(120,80%,46%,0.85)); }
.posheat__nodata { margin-top: var(--sp-3); font-size: var(--fs-sm); }
/* Rechte Spalte: Spieler-Auswahl (feste Breite, bleibt neben der Heatmap) */
.posheat__side { flex: 0 0 300px; border: 1px solid var(--c-line); border-radius: 4px; padding: var(--sp-3); }
.posheat__sidehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.posheat__sidetitle { font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.posheat__selcount { color: var(--c-muted); font-weight: 400; }
.posheat__quick { display: flex; gap: 4px; }
.posheat__roles { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.posheat__rolen { opacity: 0.7; font-weight: 400; }
.posheat__players { display: flex; flex-direction: column; gap: 1px; max-height: 62vh; overflow: auto; }
.posheat__pl { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 4px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); }
.posheat__pl:hover { background: var(--c-fill-soft); }
.posheat__pl.is-on { background: var(--c-fill-soft); }
.posheat__plname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posheat__plrole { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--c-muted); }
/* Mobile: Spielerliste UNTER die Heatmap stapeln */
@media (max-width: 760px) {
  .posheat__wrap { flex-wrap: wrap; }
  .posheat__fieldcol { flex: 1 1 100%; max-width: none; }
  .posheat__side { flex: 1 1 100%; width: 100%; }
  .posheat__players { max-height: 40vh; }
}
/* ── Home-Dashboard ────────────────────────────────────────────────────────── */
.lv--home { max-width: 1360px; }   /* gedeckelt, damit die quadratischen Kacheln eine sinnvolle Grösse haben */
.home__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
/* Mobile: Kacheln gestapelt (eine pro Zeile), randbündig mit beiden Telefonrändern */
@media (max-width: 720px) {
  .lv--home { max-width: none; padding-left: 0; padding-right: 0; }
  .lv--home .lv__head, .lv--home .home__hint { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .home__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .home__tile { border-left: none; border-right: none; border-radius: 0; max-width: 100%; }
  /* Event-Infobox mobil: natürliche Höhe (nicht quadratisch); Wetter volle Breite, Spieler/Trainer
     nebeneinander, Karte darunter. Höhere Spezifität als die Basisregeln (die später im CSS stehen). */
  .home__tile.home__event { aspect-ratio: auto; overflow: visible; }
  .lv--home .home__event .home__evcard { flex: none; min-height: 0; }
  .lv--home .home__event .evx__body { flex: none; min-height: 0; }
  .lv--home .home__event .evx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv--home .home__event .evx__card--wx { grid-column: 1 / -1; }
  .lv--home .home__event .evx__mapcol { min-height: 260px; }
  .home__chart-body { overflow-x: auto; }
  /* Aufstellungs-Kachel: Inhalt UMBRECHEN statt horizontal scrollen (overflow:auto verhindert sonst
     das flex-wrap → Pitch + Erfüllungsgrad-Ringe liefen über den Rand). Höhere Spezifität als die
     Basis-Regel `.home__chart-body { overflow-x: auto }`, damit sie greift. */
  .home__grid .home__chart-body--rule { overflow-x: clip; }
  /* Die zwei Mini-Aufstellungen untereinander, zentriert, nie breiter als die Kachel. */
  .home__grid .charts__matrixrow { flex-wrap: wrap; justify-content: center; }
  .home__grid .charts__matrix { width: 100%; max-width: 230px; min-width: 0; }
  .home__grid .charts__minifield, .home__grid .charts__minifield--names { width: 100%; }
  .lv--home { overflow-x: clip; }   /* Sicherheitsnetz gegen horizontales Seiten-Scrollen (Charts scrollen intern selbst) */
  .chartview__chart { height: 60vh; }
  /* Tagesübersicht (Design-System): Banner als 3-Spalten-Raster, Inhalt einspaltig. */
  .aday { padding: var(--sp-3) var(--sp-3) var(--sp-7); }
  .aday__cta { flex-direction: column; align-items: stretch; }
  .aday__cols, .aday__grid, .aday__attend, .aday__wx, .pdash__grid { grid-template-columns: 1fr; }
  .player-hero { grid-template-columns: 1fr; padding: 16px; }
  .player-hero__actions { top: 12px; right: 12px; }
  .hero-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stat { min-height: 92px; padding: 12px; }
  .hero-stat strong { font-size: 21px; }
  .player-name { font-size: 28px; }
  .player-identity { grid-template-columns: 80px minmax(0, 1fr); gap: var(--sp-3); }
  .player-avatar { width: 80px; height: 96px; }
  .aday__banner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); min-height: 0; }
  .aday__bseg { border-left: 0; background: var(--c-white); padding: var(--sp-3); }
  .aday__bseg--date { grid-column: 1 / -1; }
  .aday__bdate { font-size: 30px; }
  .aday__bval { font-size: 24px; }
  .aday__bval--sm { font-size: var(--fs-md); }   /* Text-Werte (Ort/Gegner/Wetter) klein halten */
  .aday__wx .home__map { height: 360px; }
  .aday__navtxt { display: none; }   /* Tag-Navigation: nur Pfeile auf dem Handy */
  .aday__navbtn { padding: 6px 10px; }
  .aday__squad-cta { width: 100%; }
  .aday__squad-cta .btn { flex: 1; }
  /* Aufstellungen: IMMER genau eine Mini-Matrix pro Zeile (lesbar auf dem Telefon) */
  .sysline__games { grid-template-columns: 1fr !important; max-width: none !important; }
}
/* Alle (manuell hinzugefügten) Kacheln sind gleich grosse QUADRATE; Inhalt scrollt bei Bedarf.
   Die fixe Event-Infobox ist ausgenommen (eigene Höhe, grössere Karte). */
.home__tile { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--c-white); box-shadow: var(--shadow-card); min-width: 0;
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; overflow: hidden; }
/* Fixe Event-Infobox: gleich grosses QUADRAT wie die anderen Kacheln (eine Zelle); Inhalt füllt das Quadrat. */
.home__tile.home__event { aspect-ratio: 1 / 1; overflow: hidden; gap: var(--sp-2); }
/* Leeres Home-Feld: dünner gestrichelter Rahmen + Einstellungs-Icon */
.home__empty { border: 1px dashed var(--c-line-strong); background: transparent; padding: 0; min-height: 150px; display: flex; border-radius: var(--radius-lg); box-shadow: none; }
.home__empty-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; color: var(--c-muted); text-decoration: none; cursor: pointer; }
.home__empty-add:hover { color: var(--c-fill); background: var(--c-fill-soft); }
.home__empty-gear { opacity: 0.85; }
.home__empty-lbl { font-size: var(--fs-sm); font-weight: 600; }
.home__tile.home-drop-tgt { box-shadow: inset 0 0 0 2px var(--c-fill); }
/* Analyse › Charts-Sammelseite: je Variable eine Zeile, Charts horizontal scrollbar */
.lv--charts { max-width: 1280px; }
/* Themenbereiche als abgerundete Karten (Akkordeon). */
.charts__theme { margin-bottom: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background: var(--c-white); box-shadow: var(--shadow-card); overflow: hidden; }
.charts__theme-h { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; text-transform: none; margin: 0; }
details.charts__theme > summary.charts__theme-h { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 14px; user-select: none; padding: 18px 18px; min-height: 78px; }
details.charts__theme > summary.charts__theme-h:hover { background: var(--c-surface-2); }
summary.charts__theme-h::-webkit-details-marker { display: none; }
.charts__theme-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--c-fill-soft); color: var(--c-fill); flex: 0 0 auto; }
.charts__theme-lbl { flex: 1 1 auto; min-width: 0; }
.charts__theme-chev { display: inline-grid; place-items: center; color: var(--c-muted); flex: 0 0 auto; transition: transform .18s ease; }
details.charts__theme[open] > summary.charts__theme-h .charts__theme-chev { transform: rotate(180deg); }
details.charts__theme > .charts__theme-body { padding: 0 18px 18px; }
details.charts__sys { border: 1px solid var(--c-line); border-radius: 6px; margin-bottom: var(--sp-3); background: var(--c-white); }
summary.charts__sys-h { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none;
  padding: var(--sp-2) var(--sp-3); font-weight: 650; font-size: var(--fs-base); background: rgba(128,128,128,0.05); border-radius: 6px; }
summary.charts__sys-h::-webkit-details-marker { display: none; }
summary.charts__sys-h::before { content: "\25B8"; font-size: 0.75em; color: var(--c-muted); transition: transform .15s ease; flex: 0 0 auto; }
details.charts__sys[open] > summary.charts__sys-h::before { transform: rotate(90deg); }
details.charts__sys > .charts__theme-body { padding: var(--sp-3); }
.charts__var { border: 1px solid var(--c-line); border-radius: 4px; margin-bottom: var(--sp-3); background: var(--c-white); }
/* Kurzes Hervorheben der Zeile, wenn man aus der Analyse-Tabelle per Chart-Icon hierher springt. */
.charts__var.cvar--flash { animation: cvarflash 1.8s ease; }
@keyframes cvarflash { 0%, 20% { box-shadow: 0 0 0 3px var(--color-primary); } 100% { box-shadow: 0 0 0 3px rgba(0,0,0,0); } }
.charts__var-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--c-line); background: rgba(128,128,128,0.04); }
.charts__var-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); background: var(--c-fill-soft); color: var(--c-fill); flex: 0 0 auto; }
.charts__var-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.charts__var-lbl { font-weight: 700; font-size: var(--fs-md); color: var(--c-black); }
.charts__var-desc { font-size: var(--fs-sm); }
.charts__var-open { font-size: var(--fs-micro); font-weight: 600; color: var(--color-primary); text-decoration: none; cursor: pointer; }
.charts__var-open:hover { text-decoration: underline; }
/* Leistungstests: Kategorie-Zwischenüberschrift über den einzelnen Test-Zeilen */
.charts__testcat { margin-bottom: var(--sp-4); }
.charts__testcat-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 650;
  margin: 0 0 var(--sp-2); color: var(--c-black); }
.charts__var-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.charts__onhome { font-size: var(--fs-sm); font-weight: 600; color: var(--c-fill); }
/* horizontal scrollbarer Chart-Streifen */
.charts__strip { display: flex; gap: var(--sp-4); align-items: stretch; overflow-x: auto; padding: var(--sp-3); }
/* je Chart eine Spalte: Chart oben, „Zu Home hinzufügen" direkt darunter */
.charts__item { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.charts__item-body { min-width: 0; position: relative; }
/* Aktionsleiste (Zu Home) IMMER unten am Chart → über alle Charts einer Zeile bündig auf gleicher Höhe */
.charts__item-act { display: flex; gap: 6px; align-items: flex-end; justify-content: center; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.charts__addbtn { white-space: nowrap; }
/* „Bereits auf Home": derselbe Button, aber transparent/Kontrast (kein Blau) — hell/dunkel via Variablen */
.charts__addbtn.is-added { background: transparent; border-color: var(--c-line); color: var(--c-muted); font-weight: 600; }
.charts__addbtn.is-added:hover { background: transparent; border-color: var(--c-fill); color: var(--c-fill); }
/* Leerzustand als Overlay (verschiebt das Chart/die Heatmap NICHT → Charts einer Zeile bleiben bündig) */
.charts__emptynote { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: var(--c-white); padding: 2px 8px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); font-size: var(--fs-micro); }
/* Sortier-/Ø-Steuerung oben rechts im Chart (dezent), für alle Chart-Typen auf gleicher Höhe */
.charts__ctl { position: absolute; top: 4px; right: 4px; z-index: 4; display: inline-flex; gap: 3px; }
.charts__ctlb { display: inline-flex; align-items: center; gap: 1px; font: inherit; font-size: var(--fs-micro);
  font-weight: 700; line-height: 1; padding: 2px 4px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-white) 88%, transparent); color: var(--c-muted); cursor: pointer; }
.charts__ctlb:hover { border-color: var(--c-fill); color: var(--c-black); }
.charts__ctlb.is-on { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.charts__ctlg { font-size: 11px; }
.charts__ctlar { font-size: 11px; }
.charts__ctlicon { display: block; width: 11px; height: 9px; }
/* Charts deutlich grösser/lesbarer: feste Höhe ~2×, natürliche Breite, Streifen scrollt horizontal.
   Das kleine Sortier-Icon (.charts__ctlicon) ist ausgenommen, sonst würde es mit aufgeblasen. */
.charts__item svg:not(.charts__ctlicon) { display: block; height: 380px; width: auto; max-height: none; }
.charts__hmfield { width: 300px; }
/* „+" (weitere Charts) am rechten Ende jeder Variablen-Zeile */
.charts__additem { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; }
.charts__plus { min-width: 88px; align-self: stretch; height: auto; font-size: 64px; line-height: 1; font-weight: 300;
  padding: 0 18px; border-style: dashed; color: var(--c-muted); }
.charts__plus:hover { color: var(--c-black); border-color: var(--c-line-strong); }
/* Extra-Charts (per „+" hinzugefügt): Kopf mit Typ + Entfernen */
.charts__extrah { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.charts__extra-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); font-weight: 700; }
.charts__extra-del { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--c-muted); font-size: 14px; line-height: 1; }
.charts__extra-del:hover { color: var(--danger); }
/* neue Diagrammtypen (Linie/Fläche/Kreis/Netz) */
.bc-line { stroke: var(--c-fill); stroke-width: 2; }
.bc-area { fill: rgba(0,87,255,0.18); }
.bc-dot { stroke: var(--c-white); stroke-width: 1; }
.bc-slice { stroke: var(--c-white); stroke-width: 1; }
.bc-slice-lbl { fill: #111; font-weight: 700; }
.bc-radar-grid { stroke: var(--c-line); stroke-width: 1; }
.bc-radar-area { fill: rgba(0,87,255,0.22); stroke: var(--c-fill); stroke-width: 1.5; }
/* Diagrammtyp-Galerie */
.cos-pop.typepicker { max-width: 440px; width: 440px; border-color: var(--c-line-strong); }
.typepicker__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.typepicker__type { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--c-line-strong); border-radius: 4px; background: var(--c-white); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.typepicker__type:hover { box-shadow: inset 0 0 0 2px var(--c-fill); }
.typepicker__lbl { font-size: var(--fs-sm); font-weight: 600; }
.typepicker__icon { flex: 0 0 auto; width: 20px; height: 16px; background: var(--c-fill); opacity: 0.75; }
.typepicker__icon--pie, .typepicker__icon--radar { border-radius: 50%; }
.typepicker__icon--line, .typepicker__icon--area { clip-path: polygon(0 100%, 25% 55%, 50% 70%, 75% 25%, 100% 40%, 100% 100%); }
.typepicker__icon--hbar { width: 16px; height: 20px; }
.typepicker__icon--heatmap { background: linear-gradient(135deg, var(--c-fill) 0 50%, rgba(128,128,128,.35) 50% 100%); border-radius: 3px; }
.charts__opt { display: inline-flex; gap: 3px; flex-wrap: wrap; }
/* Spieler-/Filter-Box UNTER dem Chart-Streifen (volle Breite → konstante Chart-Abstände) */
.charts__selbox { font-size: var(--fs-sm); border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 6px; }
.charts__selsum { cursor: pointer; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); font-weight: 700; padding: 2px 0; }
.charts__selstd { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; flex-wrap: wrap; }
.charts__refwrap { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 1px 6px; }
.charts__refwrap.is-on { border-color: var(--c-fill); background: rgba(0, 87, 255, 0.10); }
.charts__refdate { font-size: var(--fs-sm); border: none; background: none; color: inherit; padding: 1px 2px; }
.charts__selstd-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--c-muted); }
.charts__selstd-hint { font-size: var(--fs-micro); }
.charts__selquick { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.charts__selplayers { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px 14px; max-height: 190px; overflow-y: auto; }
.charts__selpl { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.charts__selpl--locked span { color: var(--c-muted); }
.charts__gdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; margin-right: 3px; vertical-align: middle; }
.charts__groups { margin-top: var(--sp-3); border-top: 1px solid var(--c-line); padding-top: var(--sp-2); }
.charts__grouplist { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.charts__grpitem { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface-2); }
.charts__grpname { flex: 1 1 auto; font-size: var(--fs-sm); color: var(--c-black); }
.charts__grptrash { border: none; background: none; color: var(--c-muted); cursor: pointer; padding: 2px; line-height: 0; border-radius: var(--radius-sm); }
.charts__grptrash:hover { color: var(--danger); background: var(--danger-soft); }
/* Kopfzeile der Charts-Seite + „Pausierte ein-/ausblenden"-Toggle (auch in der Anwesenheitsliste) */
.charts__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.charts__pausetoggle.is-on, .amx__pausetoggle.is-on { border-color: var(--c-fill); color: var(--c-fill); }
/* Formations-Beschriftung je Heatmap (bei mehreren Formationen) */
.charts__hmcap { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); text-align: center; margin-bottom: 4px; min-height: 1.2em; }
/* Spielsystem-Dropdown je Heatmap */
.charts__hmsys { margin-bottom: 6px; }
/* Heatmap-Spielsystem-Filter EINMAL im Variablen-Kopf (rechts) → verschiebt keine Heatmap-Felder mehr */
.charts__hmsys--head { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.charts__hmsys-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; }
.charts__selpaused { margin: 6px 0 2px; }
.charts__pausenote { font-size: var(--fs-micro); }
.charts__hmsel { font-size: var(--fs-sm); padding: 2px 6px; max-width: 300px; }
.home__lineuplink { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.home__lineuplink:hover { text-decoration: none; }
.home__lineup-sub { font-size: var(--fs-micro); margin-bottom: 6px; }
/* Aufstellung: EINE Aufstellung (nächste/aktuellste) als anklickbarer Block mit Mini-Matrizen + Bank */
/* Startaufstellung LINKS, Erfüllungsgrade RECHTS daneben; Button darunter. Padding hält Abstand zum Kartenrand. */
.charts__lineuprow { display: flex; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-3); overflow-x: auto; }
.charts__erfwrap { flex: 1 1 auto; min-width: 0; }
.charts__erfwrap .erfg__bar { margin-top: 0; }
.charts__lineup-foot { padding: 0 var(--sp-3) var(--sp-3); }
.charts__lineupsys { flex: 0 0 auto; text-decoration: none; color: inherit; border: 1px solid var(--c-line); border-radius: 4px; padding: 10px; display: block; cursor: pointer; }
.charts__lineupsys:hover { box-shadow: inset 0 0 0 2px var(--c-fill); }
.charts__lineupsys-h { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 8px; }
.charts__past { display: inline-block; margin-left: 8px; font-weight: 700; font-size: var(--fs-micro); color: var(--danger); }
.charts__matrixrow { display: flex; gap: 12px; }
.charts__matrix { flex: 0 0 auto; }
.charts__minifield { width: 150px; }
.charts__minifield--names { width: 230px; }
.charts__minifield--names .posheat__pos { transform: translate(-50%, -50%); }
/* Aufstellungs-Chart (Home/Charts): EINE saubere weisse Namensbox wie im Aufgebot-Interface — kein
   Doppelrahmen (der äussere .posheat__pos wird zum reinen Positionierer), und der ganze Name passt rein
   (mit Luft davor/danach, z.B. „Maximilian"). */
.charts__minifield--names .posheat__pos { background: none; border: none; border-radius: 0; padding: 0;
  min-width: 0; max-width: none; box-shadow: none; }
.charts__slotname { display: inline-block; max-width: none; font-size: 10px; line-height: 1.2; font-weight: 600; color: #111;
  background: #fff; border: 1px solid rgba(0,0,0,0.4); border-radius: 999px; padding: 2px 8px;
  overflow: visible; text-overflow: clip; white-space: nowrap; text-align: center; }
.charts__matrix-cap { font-size: var(--fs-micro); color: var(--c-muted); text-align: center; margin-top: 4px; }
.charts__bench { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.4; }
.charts__bench-lbl { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-micro); color: var(--c-muted); }
/* Schnellfilter der Spielerauswahl: Rollen-Chips (Zeile 1) + Kategorie/Stamm-Filter (Zeile 2) */
.charts__selsep { flex-basis: 100%; height: 0; }

/* Chart-Drill-Down: klickbare Datenpunkte (Säule/Punkt/Segment/Netz-Ecke) + Popup „Datengrundlage" */
.chart--drill .bc-hit { fill: transparent; cursor: pointer; }
.chart--drill .bc-hit:hover { fill: rgba(0, 87, 255, 0.12); }
.chart--drill .bc-hit-slice { cursor: pointer; }
.chart--drill .bc-hit-slice:hover { stroke: var(--c-black); stroke-width: 2.5; }
.cos-pop.chartdet { max-width: 580px; min-width: 320px; }
.chartdet__h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: 6px; }
.chartdet__title { font-weight: 700; }
.chartdet__metric { text-transform: uppercase; letter-spacing: 0.03em; }
.chartdet__ctx { font-size: var(--fs-sm); margin: 0 0 8px; }
.chartdet__total { font-size: var(--fs-sm); margin-bottom: 8px; }
.chartdet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.chartdet__ct { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); margin: 0 0 4px; }
.chartdet__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; font-size: var(--fs-sm); }
.chartdet__list > li { padding: 1px 0; }
.chartdet__list--events > li { border-bottom: 1px solid var(--c-line); }
.chartdet__row { display: flex; align-items: baseline; gap: var(--sp-3); text-decoration: none; color: inherit; padding: 4px 2px; }
.chartdet__row.js-nav { cursor: pointer; }
.chartdet__row.js-nav:hover { background: rgba(0, 87, 255, 0.08); }
.chartdet__date { flex: 0 0 auto; min-width: 80px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.chartdet__name { flex: 1 1 auto; min-width: 0; }
.chartdet__contrib { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.chartdet__foot, .chartdet__empty { font-size: var(--fs-micro); margin-top: 8px; }
.chartdet__pgroup { margin-bottom: 10px; }
.chartdet__pname { font-size: var(--fs-sm); margin-bottom: 2px; }
.chartdet-tab .aday__meta { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.chartdet-tab .chartdet__date { min-width: 92px; display: inline-block; }
/* Wochentag-Kürzel vor dem Datum (Datengrundlage-Listen) */
.chartdet__wd { display: inline-block; min-width: 1.6em; font-weight: 700; color: var(--c-fill); }
/* Klickbares Datum → Tages-Zusammenfassung */
.chartdet__daylink { color: inherit; text-decoration: none; cursor: pointer; }
.chartdet__daylink:hover { text-decoration: underline; }

/* Home-Chart-Kacheln: dieselben Bearbeitungswerkzeuge wie die Charts-Seite (Typ + expandable Filter) */
.home__chart-typerow { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.home__typelbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); }
.home__typesel { font-size: var(--fs-sm); padding: 2px 6px; max-width: 160px; }
.home__selbox { margin-top: 8px; border-top: 1px solid var(--c-line); padding-top: 6px; }
.home__event { display: flex; flex-direction: column; }
.home__chart-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.home__event-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); font-weight: 700; }
/* Blätter-Navigation (rechts oben) */
.home__evnav { display: inline-flex; align-items: center; gap: 6px; }
.home__evarrow { display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-black);
  border-radius: var(--radius); width: 30px; height: 30px; cursor: pointer; padding: 0; transition: border-color .15s, color .15s; }
.home__evarrow svg { width: 16px; height: 16px; }
.home__evarrow:hover { border-color: var(--c-fill); color: var(--c-fill); }
.home__evcount { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; color: var(--c-black); font-variant-numeric: tabular-nums; text-transform: none; }
.home__evcard { display: none; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); flex: 1 1 auto; min-height: 0; }
.home__evcard.is-active { display: flex; }
.home__event-empty { padding: var(--sp-4) 0; }

/* --- Event-Infobox-Redesign: Kopf (Badge, grosses Datum, Zeit/Ort-Pillen) + Körper (Karte links, Info-Karten rechts) --- */
.evx__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; flex: none; }
.evx__type { display: inline-flex; align-items: center; font-weight: 700; font-size: var(--fs-sm); line-height: 1.2;
  padding: 3px 11px; border-radius: var(--radius-full); border: 1px solid var(--c-fill); color: var(--c-fill); background: var(--c-fill-soft); }
.evx__type--FS, .evx__type--MS { border-color: var(--c-line-strong); color: var(--c-black); background: var(--c-surface-2); }
.evx__date { font-size: clamp(20px, 1.9vw, 27px); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; color: var(--c-black); }
.evx__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.evx__pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-full);
  border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-black); font-size: var(--fs-sm); font-weight: 600; max-width: 100%; }
.evx__pill span, .evx__pill { min-width: 0; }
.evx__pill svg { width: 14px; height: 14px; color: var(--c-muted); flex: none; }
/* Körper: drei Kennzahl-Kacheln oben, Karte ZUUNTERST (füllt die restliche Höhe des Quadrats). */
.home__event .evx__body { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; flex: 1 1 auto; min-height: 0; }
.evx__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); flex: none; }
.evx__mapcol { flex: 1 1 auto; min-height: 160px; }
/* Info-Karten (Wetter, Anwesenheit, Trainer) */
.evx__card { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-2); padding: var(--sp-3); flex: none; }
.evx__card-h { display: flex; align-items: center; gap: 7px; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--c-muted); font-weight: 700; margin-bottom: 8px; }
.evx__card-h svg { width: 15px; height: 15px; flex: none; }
.evx__card-sub { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); font-weight: 700; margin-bottom: 4px; }
.evx__names { font-size: var(--fs-sm); line-height: 1.45; color: var(--c-black); }
.evx__names--none { color: var(--c-muted); }
/* Kennzahl-Kacheln (Anzahl anwesende Spieler / Trainer): grosse Zahl + Label */
.evx__stat { display: flex; flex-direction: column; gap: 8px; }
.evx__stat-body { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.evx__stat-num { font-size: 32px; font-weight: 800; color: var(--c-black); line-height: 1; }
.evx__stat-lbl { font-size: var(--fs-sm); color: var(--c-muted); }
/* Wetter-Karte (kompakt in der 3er-Reihe): Icon + Zustand/Temperatur/Zusatz gestapelt */
.evx__card--wx { display: flex; align-items: center; }
.evx__card--wx .home__weather { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 0; background: none; border: none; border-radius: 0; padding: 0; }
.evx__card--wx .home__wx-icon svg { width: 42px; height: 42px; color: var(--c-muted); flex: none; }
.evx__card--wx .home__wx-info { min-width: 0; }
.evx__card--wx .home__wx-cond { font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); }
.evx__card--wx .home__wx-temp { font-size: 24px; font-weight: 800; color: var(--c-black); line-height: 1.1; }
.evx__card--wx .home__wx-feels { font-size: var(--fs-sm); font-weight: 400; color: var(--c-muted); }
.evx__card--wx .home__wx-sub { font-size: var(--fs-sm); color: var(--c-muted); }
.evx__card--wx .home__wx-loading, .evx__card--wx .home__wx-none { color: var(--c-muted); font-size: var(--fs-sm); font-style: normal; }
/* Wetter (Event-Tag) + interaktive OSM-Karte in der Home-Infobox */
.home__wx { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 12px; cursor: default; }
.home__weather { display: flex; align-items: center; gap: var(--sp-3); min-height: 46px;
  background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 8px 12px; }
.home__wx-loading, .home__map-note { color: var(--c-muted); font-size: var(--fs-sm); }
.home__wx-icon { flex: none; display: flex; }
.home__wx-icon svg { display: block; }
.home__wx-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home__wx-cond { font-weight: 700; font-size: var(--fs-sm); }
.home__wx-temp { font-size: var(--fs-base); color: var(--c-black); font-variant-numeric: tabular-nums; }
.home__wx-feels { font-size: var(--fs-micro); font-weight: 400; color: var(--c-muted); }
.home__wx-sub { font-size: var(--fs-micro); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.home__wx-none { color: var(--c-faint); font-size: var(--fs-sm); font-style: italic; }
.home__event .evx__mapcol .home__map { height: 100%; min-height: 160px; }   /* Event-Infobox: Karte füllt den unteren Bereich */
.home__map { height: 240px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line);
  background: var(--c-surface-2); display: flex; align-items: center; justify-content: center;
  /* Eigener Stapelkontext: Leaflets hohe z-index-Ebenen (Tiles/Marker/Controls bis 1000) bleiben IN
     der Karte gefangen und liegen so nie über der mobilen Sidebar (Drawer z-index 50). */
  isolation: isolate; }
.home__map { position: relative; }   /* für die Such-/Bestätigungs-Overlays der editierbaren Karte */
.home__map .leaflet-container { height: 100%; width: 100%; background: var(--c-surface-2); font: inherit; }
/* Editierbare Karte (Tagesübersicht): Hinweis, Suchleiste, „Als neuen Ort festlegen"-Popup */
.cosmap-msg { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; z-index: 1050;
  max-width: calc(100% - 24px); background: rgba(180,83,9,.94); color: #fff; font-size: 12px; font-weight: 500;
  padding: 7px 13px; border-radius: 10px; text-align: center; line-height: 1.4; box-shadow: 0 2px 8px rgba(12,35,56,.4); pointer-events: none; }
.cosmap-hint { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; z-index: 1050; background: rgba(14,35,74,.86);
  color: #fff; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; pointer-events: none; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
/* Suchleiste: über den Leaflet-Zoom-Buttons (die liegen bei z-index ~1000) */
.cosmap-search { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 1100; background: var(--c-white);
  border: 1px solid var(--c-line-strong); border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden; }
.cosmap-search__row { display: flex; align-items: center; gap: 4px; padding: 6px; }
.cosmap-search__in { flex: 1; min-width: 0; border: 1px solid var(--c-line); border-radius: 8px; padding: 8px 11px; font: inherit;
  font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); outline: none; }
.cosmap-search__in:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.cosmap-search__x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--c-muted); cursor: pointer; width: 30px; flex: none; }
.cosmap-search__res { max-height: 190px; overflow-y: auto; }
.cosmap-search__item { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--c-line);
  background: var(--c-white); color: var(--c-black); padding: 8px 12px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.cosmap-search__item:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.cosmap-search__none { padding: 8px 12px; color: var(--c-muted); font-size: var(--fs-sm); }
/* Eigener, sichtbarer Marker (Kandidat) — statt kaputtem Leaflet-PNG */
.cosmap-pin span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary);
  border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(8,102,245,.4), 0 3px 8px rgba(12,35,56,.4); }
/* Kompaktes Bestätigungs-Popup */
.home__map .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: var(--shadow-card); }
.home__map .leaflet-popup-content { margin: 9px 11px; }
.cosmap-pop { min-width: 190px; max-width: 250px; }
.cosmap-pop__name { font-size: 11px; font-weight: 600; color: var(--c-black); margin-bottom: 7px; line-height: 1.35; }
.cosmap-pop__btns { display: flex; flex-direction: column; gap: 5px; }
.cosmap-pop__ok, .cosmap-pop__no, .cosmap-pop__2nd { border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12px; cursor: pointer; text-align: center; }
.cosmap-pop__ok { border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; font-weight: 700; }
.cosmap-pop__2nd { border: 1px solid var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; }
.cosmap-pop__no { border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); font-weight: 600; }
/* Dark-Mode: das Leaflet-Popup ist sonst weiss → heller Text (Adresse) unsichtbar. Popup mitfärben. */
:root[data-theme="dark"] .home__map .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .home__map .leaflet-popup-tip { background: var(--c-surface-2); color: var(--c-black); }
/* Karten-Ansicht umschalten (unten rechts): Minimal / Informativ / Satellit */
.cosmapview { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-line); background: var(--c-white); margin: 0 10px 10px 0; }
.cosmapview__b { border: none; background: var(--c-white); color: var(--c-muted); font: inherit; font-size: 11px;
  padding: 4px 9px; cursor: pointer; border-left: 1px solid var(--c-line); line-height: 1.4; }
.cosmapview__b:first-child { border-left: none; }
.cosmapview__b:hover { background: var(--c-bg); color: var(--c-black); }
.cosmapview__b.is-on { background: var(--color-primary); color: #fff; }
:root[data-theme="dark"] .cosmapview { background: var(--c-surface-2); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .cosmapview__b { background: var(--c-surface-2); border-left-color: var(--c-line-strong); }
:root[data-theme="dark"] .cosmapview__b:hover { background: var(--c-hover); }
:root[data-theme="dark"] .cosmapview__b.is-on { background: var(--color-primary); color: #fff; }
/* Leaflet-Steuerung minimal an SquadOS anpassen: kleine, weiche, dezente Zoom-Buttons + zarte Attribution */
.home__map .leaflet-control-zoom { border: none; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin: 10px; }
.home__map .leaflet-control-zoom a { width: 26px; height: 26px; line-height: 26px; font-size: 16px; font-weight: 400;
  color: var(--c-muted); background: var(--c-white); border: none; }
.home__map .leaflet-control-zoom a:hover { color: var(--c-fill); background: var(--c-bg); }
.home__map .leaflet-bar a:first-child { border-bottom: 1px solid var(--c-line); }
.home__map .leaflet-control-attribution { font-size: 8px; padding: 0 4px; background: rgba(255,255,255,0.6); color: var(--c-faint); }
.home__map .leaflet-control-attribution a { color: var(--c-faint); }
:root[data-theme="dark"] .home__map .leaflet-control-attribution { background: rgba(9,17,34,0.55); color: var(--c-faint); }
:root[data-theme="dark"] .home__map .leaflet-control-attribution a { color: var(--c-faint); }
:root[data-theme="dark"] .home__map .leaflet-control-zoom a { background: var(--c-surface-2); color: var(--c-muted); }
:root[data-theme="dark"] .home__map .leaflet-control-zoom a:hover { color: var(--c-fill); background: var(--c-hover); }
:root[data-theme="dark"] .home__map .leaflet-bar a:first-child { border-bottom-color: var(--c-line-strong); }

/* --- Reiter „Spielort und gefahrene Kilometer" (Karte links, km + Ortsliste rechts) --- */
.so__hint { font-size: var(--fs-sm); font-weight: 400; margin-left: var(--sp-2); }
.lv--spielorte { max-width: none; }   /* volle Interface-Breite nutzen */
.so { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.so__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.so__mapwrap { border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: var(--sp-4); }
.so__map { height: 620px; }
.so__side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.so__block { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.so__blockhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.so__blocktitle { font-size: var(--fs-base); font-weight: 600; color: var(--c-black); margin: 0; }
.so__scope { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.so__scopebtn { border: none; background: var(--c-white); color: var(--c-muted); font: inherit; font-size: var(--fs-sm); padding: 4px 10px; cursor: pointer; border-left: 1px solid var(--c-line); }
.so__scopebtn:first-child { border-left: none; }
.so__scopebtn.is-on { background: var(--color-primary); color: #fff; }
.so__filters { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.so__f { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-black); }
.so__flab { color: var(--c-muted); }
.so__date { padding: 5px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; }
.so__spacer { flex: 1 1 auto; }
.so__tablewrap { overflow-x: auto; }
.so__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.so__table thead th { text-align: left; padding: 7px 8px; color: var(--c-muted); font-weight: 500; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.so__table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--c-line); color: var(--c-black); vertical-align: top; }
.so__row { cursor: default; }
.so__row:hover td { background: var(--c-bg); }
.so__row.is-hidden, .so__gamesrow.is-hidden { display: none; }
.so__cchk { width: 30px; text-align: center; }
.so__namecell { vertical-align: top; }
.so__names { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.so__nameblock { display: flex; flex-direction: column; gap: 3px; }
.so__renamein { width: 100%; min-width: 0; padding: 4px 7px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; }
.so__renamein::placeholder { color: var(--c-faint); }
.so__renamein.is-nocoord { border-color: #dc2626; background: #fef2f2; }
:root[data-theme="dark"] .so__renamein.is-nocoord { border-color: #ef4444; background: rgba(220,38,38,.14); }
.amx__col-loc--nocoord { box-shadow: inset 0 0 0 2px #dc2626; color: #dc2626; }
:root[data-theme="dark"] .amx__col-loc--nocoord { box-shadow: inset 0 0 0 2px #ef4444; color: #f87171; }
input.is-nocoord { border-color: #dc2626; background: #fef2f2; }
:root[data-theme="dark"] input.is-nocoord { border-color: #ef4444; background: rgba(220,38,38,.14); }
.so__renamein:disabled { background: var(--c-bg); color: var(--c-faint); }
.so__gamesbtn { flex: none; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-muted); border-radius: 999px; font-size: var(--fs-micro); padding: 1px 7px; cursor: pointer; white-space: nowrap; }
.so__gamesbtn:hover, .so__gamesbtn.is-open { border-color: var(--color-primary); color: var(--color-primary); }
.so__ccoord, .so__coord { width: 168px; white-space: nowrap; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.so__coord { vertical-align: top; }
.so__coordval { display: inline-block; padding-top: 5px; }
.so__coordbtn { border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-muted); border-radius: var(--radius); font-size: 12px; line-height: 1; padding: 3px 6px; margin-left: 4px; cursor: pointer; vertical-align: middle; }
.so__coordbtn:hover, .so__coordbtn.is-on { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.so__nocoord { display: inline-block; margin-top: 4px; font-size: var(--fs-micro); color: #b45309; background: #fef3c7; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
:root[data-theme="dark"] .so__nocoord { color: #fbbf24; background: rgba(180,83,9,.25); }
.so__nameline { display: flex; align-items: center; gap: 6px; }
.so__nameline .so__renamein { flex: 1 1 auto; }
.so__games { display: flex; flex-direction: column; gap: 2px; padding: 1px 0 2px 6px; border-left: 2px solid var(--c-line); margin-left: 2px; }
.so__games.is-hidden { display: none; }
.so__game { display: flex; gap: 8px; align-items: center; padding: 3px 6px; border-radius: var(--radius); cursor: pointer; text-decoration: none; color: var(--c-black); }
.so__game:hover { background: var(--color-primary-soft); }
.so__gdate { font-variant-numeric: tabular-nums; color: var(--c-muted); white-space: nowrap; }
.so__gtype { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: #fff; }
.so__gtype--ms { background: var(--color-primary); }        /* Meisterschaft = blau */
.so__gtype--fs { background: #f59e0b; }                     /* Freundschaftsspiel = orange */
.so__gtype--tr { background: var(--c-muted); }
.so__gopp { color: var(--c-black); }
.so__empty, .so__none { padding: var(--sp-3) var(--sp-2); }
/* Blauer Tropfen-Pin (Google-Maps-Stil) */
.so-pin { background: none; border: none; filter: drop-shadow(0 2px 3px rgba(12,35,56,.4)); }
/* Zeitraum + „Trainings mitzählen" */
.so__scopewrap { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.so__trtoggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
/* Trainer-km-Liste (rechte Spalte) */
.trkml { display: flex; flex-direction: column; }
.trkml__row { display: flex; flex-direction: column; gap: 2px; padding: 7px 4px; border-bottom: 1px solid var(--c-line); }
.trkml__row:last-child { border-bottom: none; }
.trkml__top { display: flex; align-items: center; gap: var(--sp-2); }
.trkml__routetog { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; flex: none; }
.trkml__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--c-line); display: inline-block; flex: none; }
.trkml__swatch--none { opacity: 0; }
.trkml__top .trkml__main { flex: 1 1 auto; }
.trkml__main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.trkml__name { font-weight: 500; color: var(--c-black); }
.trkml__cat { font-size: var(--fs-micro); }
.trkml__warn { font-size: var(--fs-micro); color: #b45309; background: #fef3c7; border-radius: 999px; padding: 0 6px; }
:root[data-theme="dark"] .trkml__warn { color: #fbbf24; background: rgba(180,83,9,.25); }
.trkml__km { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-black); }
.trkml__km strong { font-size: var(--fs-base); }
.trkml__kmbtn { border: 1px solid transparent; background: none; color: inherit; font: inherit; padding: 1px 6px; margin: -1px -6px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.trkml__kmbtn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.trkml__kmbtn:hover .muted { color: var(--color-primary); }
.trkml__home { min-width: 0; }
.trkml__homebtn { max-width: 100%; border: none; background: none; color: var(--c-muted); font: inherit; font-size: var(--fs-sm); padding: 1px 0; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trkml__homebtn:hover { color: var(--color-primary); text-decoration: underline; }
.trkml__pin { opacity: .8; }
.trkml__none { padding: var(--sp-2); }
.trkml__foot { padding: var(--sp-2) var(--sp-1) 0; font-size: var(--fs-micro); line-height: 1.4; }
/* Wohnort-Bearbeiten-Popup */
.trhome-edit { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.trhome-edit label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--c-muted); flex: 1 1 auto; }
.trhome-edit input { padding: 5px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; }
.trhome-edit__row { display: flex; gap: var(--sp-2); }
@media (max-width: 1000px) {
  .so__cols { grid-template-columns: 1fr; }
  .so__mapwrap { position: static; }
  .so__map { height: 380px; }
}

.so__pop { font-size: 12px; font-weight: 600; color: var(--c-black); max-width: 220px; line-height: 1.35; }
@media (max-width: 900px) {
  .so__map { height: 360px; }
}

/* --- Trainer-Profil: Wohnort-Karte + gefahrene Kilometer (Feature 4) --- */
.trhome { display: flex; flex-direction: column; gap: var(--sp-3); }
.trhome__loc { max-width: 360px; }
.trhome__wx { margin: 0; }
.trhome__wx .home__map { height: 340px; }
.trhome__note { font-size: var(--fs-sm); }
.trhome--addr { margin-top: var(--sp-3); }
.trhome__intro { font-size: var(--fs-sm); margin: 0 0 var(--sp-1); }
/* Trainer-km-Filter (wie Spesen-UI): Zeitraum + Trainings + eigener Bereich. */
.trkmf { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.trkmf__scope { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: 999px; overflow: hidden; }
.trkmf__scopebtn { display: inline-flex; align-items: center; padding: 5px 12px; font-size: var(--fs-sm); cursor: pointer; color: var(--c-muted); }
.trkmf__scopebtn input { position: absolute; opacity: 0; pointer-events: none; }
.trkmf__scopebtn:has(input:checked) { background: var(--color-primary); color: #fff; }
.trkmf__chk, .trkmf__range { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-black); }
.trkmf__range input { padding: 4px 6px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-sm); }
.trkm { margin-top: var(--sp-4); }
.trkm__ph { margin-top: var(--sp-4); }
.trkm__nohome { font-size: var(--fs-sm); }
.trkm__kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); cursor: pointer; text-align: left; }
.trkm__kpi:hover { border-color: var(--color-primary); }
.trkm__kpinum { font-size: var(--fs-2xl, 28px); font-weight: 700; letter-spacing: -0.02em; color: var(--c-black); line-height: 1.1; }
.trkm__kpilbl { font-size: var(--fs-sm); color: var(--c-black); }
.trkm__kpihint { font-size: var(--fs-micro); }
.trkm__list { margin-top: var(--sp-3); overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.trkm__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.trkm__table thead th { text-align: left; padding: 8px 12px; color: var(--c-muted); font-weight: 500; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.trkm__table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--c-line); color: var(--c-black); }
.trkm__table tbody tr:last-child td { border-bottom: none; }
.trkm__row { cursor: pointer; }
.trkm__row:hover td { background: var(--c-bg); }
.trkm__cnum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trkm__est { color: var(--c-muted); border-bottom: 1px dotted var(--c-line); cursor: help; }
.trkm__ort { color: var(--c-muted); }
.trkmtab__kpi { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 16px; }
.trkmtab__num { font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--c-black); }
.trkmtab__lbl { font-size: var(--fs-sm); }
.trkm__miss, .trkm__empty { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }

/* Gefahrene km — KPI-Kachel zentral im Trainer-Banner (Zahl klickbar → Historie, Filter direkt drin). */
.player-hero--trainer { grid-template-columns: minmax(300px, 1fr) minmax(260px, 360px); align-items: center; }
.hero-right--km { grid-template-columns: minmax(0, 1fr); }
.hero-km { min-height: 116px; border: 1px solid rgba(215,226,241,.95); border-radius: 14px; padding: 15px; background: rgba(255,255,255,.78);
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 18px rgba(19,67,121,.04); }
.hero-km__num { align-self: flex-start; border: none; background: none; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.hero-km__num strong { display: block; font-size: 25px; font-weight: 750; letter-spacing: -.02em; color: var(--c-black); }
.hero-km__num:hover strong { color: var(--color-primary); text-decoration: underline; }
.hero-km__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin-top: auto; }
.hero-km__scope { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: 999px; overflow: hidden; }
.hero-km__scope label { display: inline-flex; align-items: center; padding: 3px 11px; font-size: var(--fs-sm); cursor: pointer; color: var(--c-muted); }
.hero-km__scope input { position: absolute; opacity: 0; pointer-events: none; }
.hero-km__scope label:has(input:checked) { background: var(--color-primary); color: #fff; }
.hero-km__chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-black); }
.hero-km__range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-km__range label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--c-muted); }
.hero-km__range input { padding: 3px 6px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-sm); }

/* „Aufgebotsalgorithmus anwenden" an der Spielerliste (Tagesübersicht) + im Neu-Aufgebot-Formular. */
.aday__ch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.aday__algobtn { flex: none; }
.saf__algo { margin: var(--sp-3) 0 var(--sp-2); }

/* Datenpunkt-Historie: Karte links, Tabelle rechts. */
.trkmtab__home { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.trkmtab__homeicon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--color-primary-soft); color: var(--color-primary); flex: none; }
.trkmtab__homename { font-weight: 700; color: var(--c-black); }
.trkmtab__homelbl { font-size: var(--fs-sm); }
.trkmtab__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; margin-top: 4px; }
.trkmtab__mapwrap { position: sticky; top: 8px; }
.trkmtab__map { height: 520px; }
.trkmtab__side { min-width: 0; overflow-x: auto; }
.trkmtab__table { width: 100%; max-width: none; }
.trkmtab__row { cursor: pointer; }
.trkmtab__cchk { width: 34px; text-align: center; padding-left: 6px !important; padding-right: 6px !important; }
.trkmtab__routetog { display: inline-flex; align-items: center; cursor: pointer; }
.trkmtab__routechk { position: absolute; opacity: 0; pointer-events: none; }
.trkmtab__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); background: var(--c-line); opacity: .35; }
.trkmtab__routetog input:checked + .trkmtab__swatch { opacity: 1; }
.trkmtab__swatch--none { background: repeating-linear-gradient(45deg, var(--c-line), var(--c-line) 3px, transparent 3px, transparent 6px); opacity: .6; }
.trkmtab__wd { white-space: nowrap; }
@media (max-width: 900px) { .trkmtab__cols { grid-template-columns: 1fr; } .trkmtab__mapwrap { position: static; } .trkmtab__map { height: 320px; } }

/* Haus-Marker (Wohnort) auf der Karte — klar vom Ort-Tropfen unterscheidbar. */
.so-house { background: none; border: none; }
.so-house__b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(12,35,56,.4); }
.so-house__b svg { transform: rotate(45deg); }
/* „Wer ist gefahren"-Feld im Aufgebot (Feature 4) */
.sysdriver { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-white); }
.sysdriver__lab { font-weight: 600; color: var(--c-black); }
.sysdriver__sel { padding: 6px 10px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; }
.sysdriver__hint { font-size: var(--fs-sm); }

/* Anwesenheit: einheitliche Hierarchie (dezente Versal-Caption, EIN betonter Wert, ruhige Labels) —
   gleiche Sprache wie „NÄCHSTES EVENT" + Zeit/Ort. Kein wildes Wechseln zwischen fett und dünn. */
.home__att { display: flex; flex-direction: column; gap: var(--sp-4); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); margin-top: auto; }
.home__att-block { display: flex; flex-direction: column; gap: 3px; }
.home__att-cap { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.home__att-stat { font-size: var(--fs-sm); color: var(--c-muted); }
.home__att-count { font-size: var(--fs-lg); font-weight: 700; color: var(--c-black); margin-right: 3px; }
.home__att-detail { font-size: var(--fs-sm); line-height: 1.5; color: var(--c-black); }
.home__att-lbl { color: var(--c-muted); margin-right: 5px; }
.home__att-dash { color: var(--c-faint); }
.home__chart { cursor: grab; }
.home__chart.dragging { opacity: 0.5; }
.home__chart.home-drop-ok { box-shadow: inset 0 0 0 2px var(--c-fill); }
.home__chart-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 10px; }
.home__chart-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); background: var(--c-fill-soft); color: var(--c-fill); flex: 0 0 auto; }
.home__chart-titlewrap { flex: 1 1 auto; min-width: 0; cursor: grab; }
.home__chart-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home__chart-desc { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home__sort { display: flex; gap: 3px; flex: none; }
.home__sortb { font: inherit; font-size: var(--fs-micro); font-weight: 700; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 1px 5px; background: transparent; color: var(--c-muted); cursor: pointer; }
.home__sortb:hover { border-color: var(--c-fill); color: var(--c-black); }
.home__sortb.is-on { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.home__avgb { font-weight: 700; }
.home__chart-kind { display: inline-block; margin-left: 6px; font-size: var(--fs-micro); font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--c-muted); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 0 4px; vertical-align: 1px; }
.home__event--link { cursor: pointer; }
.home__event--link:hover { border-color: var(--c-fill); }
.home__chart-title { color: var(--c-black); font-weight: 700; font-size: var(--fs-md); text-transform: none; letter-spacing: normal; }
.home__chart-del { border: none; background: none; color: var(--c-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.home__chart-del:hover { color: var(--c-black); }
.home__chart-rename { border: none; background: none; color: var(--c-muted); font-size: 12px; line-height: 1; cursor: pointer; padding: 0 3px; flex: none; }
.home__chart-rename:hover { color: var(--c-fill); }
/* Lange Charts scrollen INNERHALB der Kachel (nicht die ganze Seite nach rechts) */
/* Chart-Körper füllt die restliche (quadratische) Kachelhöhe; Chart wird entsprechend grösser. */
.home__chart-body { flex: 1 1 auto; min-height: 0; overflow: auto; max-width: 100%; min-width: 0; position: relative; }
.home__chart-body .barchart { display: block; height: 100%; width: auto; min-width: 100%; }
/* Heatmap füllt die (quadratische) Kachel: quadratisches Feld auf volle Höhe, horizontal zentriert. */
.home__chart-body .posheat__field { height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
.home__chart-note { font-size: var(--fs-micro); margin-bottom: 4px; }
.home__hint { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.lineup__head { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.lineup__head-fields { display: flex; gap: var(--sp-4); flex: 1; }
.lineup__head-fields .field { min-width: 160px; }
/* Bestehende Aufstellung: Name-Zeile (mit Speichern/Löschen rechts), darunter Datum/Zeit/Ort/Gegner */
.lineup__head { flex-direction: column; align-items: stretch; }
.lineup__head-top { display: flex; align-items: flex-end; gap: var(--sp-4); }
.lineup__namefield { flex: 1; min-width: 160px; }
/* Datum, Zeit, Ort, Gegner in EINER Zeile — exakt gleich breit + oben bündig (kein Versatz) */
.lineup__metarow { display: flex; gap: var(--sp-3); align-items: start; }
.lineup__metarow .field { min-width: 0; flex: 1 1 0; }
.lineup__metarow .field label { white-space: nowrap; }
.lineup__metarow .field input { width: 100%; box-sizing: border-box; }
.lineup__actions { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); align-items: center; }
/* Speichern/Löschen als Icons (wie Anwesenheitsliste), direkt nebeneinander */
.lineup__iconbar { display: inline-flex; gap: 4px; align-items: center; align-self: flex-end; }
.lineup__save { color: var(--c-fill); }
.lineup__del:hover { border-color: var(--danger); color: var(--danger); }
/* „Neu würfeln" + Info-Kreis (Klick statt Warnung) */
.lineup__gen { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.lineup__info { position: relative; }
.lineup__info > summary { list-style: none; cursor: pointer; display: inline-grid; place-content: center; width: 18px; height: 18px; border: 1px solid var(--c-line-strong); border-radius: 50%; font: 700 11px/1 var(--ff); font-style: italic; color: var(--c-muted); user-select: none; }
.lineup__info > summary::-webkit-details-marker { display: none; }
.lineup__info > summary:hover { border-color: var(--c-fill); color: var(--c-fill); }
.lineup__info[open] > summary { background: var(--c-fill); color: #fff; border-color: var(--c-fill); }
.lineup__infobox { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 300px; max-width: 80vw; background: var(--c-white); color: var(--c-black); border: 1px solid var(--c-line-strong); box-shadow: 0 4px 16px rgba(11, 24, 56,.16); padding: var(--sp-3); font-size: var(--fs-sm); line-height: 1.45; }
.lineup__msg { display: inline-block; margin-bottom: var(--sp-4); }
.lineup__hint { border: 1px solid var(--c-line); padding: var(--sp-4); color: var(--c-muted); max-width: 640px; }

/* --- Erstellungs-Assistent ----------------------------------------------- */
.wizard { max-width: 760px; }
.wiz__back { background: none; border: none; color: var(--c-muted); cursor: pointer; font-size: var(--fs-sm); padding: 0 0 var(--sp-3); }
.wiz__back:hover { color: var(--c-black); }
.wiz__h { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-4); }
.wiz__sub { margin-bottom: var(--sp-4); }
.wiz__opts { display: grid; gap: var(--sp-3); max-width: 460px; }
.wiz__opt {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-md); font-weight: 700; cursor: pointer;
}
.wiz__opt .muted { font-weight: 400; font-size: var(--fs-sm); }
.wiz__opt:hover { background: var(--c-fill); color: #fff; }
.wiz__opt:hover .muted { color: #fff; }
.wiz__opt--off { border-color: var(--c-line); color: var(--c-faint); cursor: not-allowed; }
.wiz__opt--off:hover { background: var(--c-white); color: var(--c-faint); }
.wiz__actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }

.assign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); max-width: 620px; }
.assign__title { font-weight: 700; letter-spacing: 0.08em; font-size: var(--fs-sm); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line-strong); margin-bottom: var(--sp-2); display: flex; justify-content: space-between; }
.assign__count { color: var(--c-muted); }
.assign__chip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; text-align: left; border: 1px solid var(--c-line); background: var(--c-white);
  padding: 5px var(--sp-2); margin-bottom: 4px; cursor: pointer; font-size: var(--fs-sm);
}
.assign__chip--b { justify-content: flex-start; }
.assign__chip:hover { border-color: var(--c-fill); background: var(--c-fill); color: #fff; }
.assign__arrow { color: var(--c-faint); }
.assign__chip:hover .assign__arrow { color: #fff; }

.lineup__locked { columns: 3 160px; margin-bottom: var(--sp-4); font-size: var(--fs-sm); max-width: 620px; }
.lineup__locked li { padding: 2px 0; border-bottom: 1px solid var(--c-line); break-inside: avoid; }

.lineup__sel { border: 1px solid var(--c-line); margin-bottom: var(--sp-4); }
.lineup__sel > summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); user-select: none; }
.lineup__sel .muted { color: var(--c-faint); }
.lineup__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); padding: var(--sp-3); border-top: 1px solid var(--c-line); }
.lineup__cat { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: var(--sp-1); }
.chk { display: flex; align-items: center; gap: var(--sp-2); padding: 2px 0; font-size: var(--fs-sm); cursor: pointer; }

/* --- BENOTUNG-Tabelle ---------------------------------------------------- */
.benotung { border-collapse: collapse; width: 100%; max-width: 980px; margin-bottom: var(--sp-5); table-layout: fixed; }
.benotung td { border: 1px solid var(--c-line-strong); padding: 3px 6px; font-size: var(--fs-sm); height: 22px; text-align: center; }
.benotung__title td { font-weight: 700; letter-spacing: 0.08em; text-align: center; }
.benotung__head td { font-weight: 700; font-size: var(--fs-micro); }
.benotung__name { text-align: left !important; width: 13%; }
.ben-cell { padding: 0 !important; }
.ben {
  width: 100%; height: 100%; min-height: 20px; border: none; background: transparent;
  text-align: center; font: inherit; color: var(--c-black); padding: 2px 0;
  -moz-appearance: textfield; border-radius: var(--radius);
}
.ben:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; background: var(--c-surface-2); }
.ben-total { font-weight: 700; }
/* TIPS-Spalte: manuelle Gesamtnote (editierbar) ODER automatisch aus T/I/P/S (gesperrt). */
.benotung__tipsh { color: var(--color-primary); }
.ben-cell--tips { border-left: 2px solid var(--c-line-strong) !important; }
.ben-tips { font-weight: 700; }
.ben-tips--auto { background: var(--c-surface-2); color: var(--c-muted); cursor: default; }
.ben-tips--auto:focus { outline-color: var(--c-line-strong); }

/* --- Mannschaften + Mini-Aufstellungen ----------------------------------- */
.team { margin-bottom: var(--sp-5); max-width: 980px; }
.team__title { border: 1px solid var(--c-line-strong); font-weight: 700; letter-spacing: 0.08em; text-align: center; padding: 4px; font-size: var(--fs-sm); }
.team__games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

.ml { border: 1px solid var(--c-line-strong); border-top: none; }
.team__games .ml + .ml { border-left: none; }
.ml__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-black);
  border: 1px solid var(--c-line-strong);
}
.ml__cell {
  background: var(--c-white);
  min-height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); text-align: center; padding: 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ml__cell--o { background: #eaa83c; }   /* Spieler (orange wie im Screenshot) */
.ml__cell--g { background: #d9ead3; }   /* Dekozelle (hellgrün, kein Slot) */

/* Slot-Zellen + Drag & Drop */
.ml__slot { background: #eaa83c; flex-direction: column; gap: 1px; }
.ml__slot.is-empty { background: var(--c-white); }   /* leerer Slot (Ablageziel) */
.chip { cursor: grab; user-select: none; text-align: center; width: 100%; padding: 1px 0; color: #111; }   /* Spielername immer schwarz (farbiger Slot, auch Dark Mode) */
.chip:active { cursor: grabbing; }
.chip.dragging { opacity: 0.4; }
.ml__slot.is-multi .chip + .chip { border-top: 1px solid rgba(0, 0, 0, 0.35); }
.ml__slot.drop-ok { box-shadow: inset 0 0 0 2px var(--c-line-strong); }
/* Ersatzspieler AUSSERHALB der Matrix (wie beim Spielsystem) — variable Anzahl, keine Maximalgrenze */
.ml__bench { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px 3px; border: 1px solid var(--c-line-strong); border-top: none; background: var(--c-white); }
.ml__benchk { font-weight: 700; font-size: var(--fs-sm); margin-right: 2px; }
.ml__bench .ml__slot { flex: 0 0 auto; min-width: 34px; min-height: 20px; padding: 0; }
.lineup__tip { font-size: var(--fs-sm); color: var(--c-muted); border: 1px solid var(--c-line); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); max-width: 980px; }

/* Resultat-Box unter jeder Mini-Aufstellung */
.ml__result {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--c-white); border-top: 1px solid var(--c-line-strong);
  padding: 4px 2px;
}
.ml__score {
  width: 30px; text-align: center; font-family: inherit; font-size: var(--fs-base);
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: 2px;
  -moz-appearance: textfield;
}
.ml__score:focus { border-color: var(--c-black); outline: none; }
.ml__colon { font-weight: 700; }

/* --- Aufgebot-Mail (unter der Aufstellung) ------------------------------- */
.aufgebot { border: 1px solid var(--c-line-strong); margin-top: var(--sp-5); }
.aufgebot__head { font-weight: 700; letter-spacing: 0.1em; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line-strong); }
.aufgebot__flag { display: inline-block; margin: var(--sp-3) var(--sp-3) 0; }
.aufgebot__warn { margin: var(--sp-3) var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-muted); }
.aufgebot__form { padding: var(--sp-3); }
.aufgebot__form .field { margin-bottom: var(--sp-3); max-width: 640px; }
.aufgebot__row { display: flex; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-2); }
.aufgebot__fixed { font-size: var(--fs-sm); }
.aufgebot__body { width: 100%; max-width: 640px; font-family: var(--ff); font-size: var(--fs-sm); line-height: 1.5; resize: vertical; }
.aufgebot__meta { padding: var(--sp-3) var(--sp-3) 0; font-size: var(--fs-sm); }
.aufgebot__k { display: inline-block; min-width: 56px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
.aufgebot__text { padding: var(--sp-3); font-size: var(--fs-sm); line-height: 1.45; }
.aufgebot__p { white-space: pre-line; margin: 0 0 var(--sp-3); }
.aufgebot__facts { border-left: 2px solid var(--c-line); padding-left: var(--sp-3); margin: 0 0 var(--sp-3); }
.aufgebot__facts > div { padding: 1px 0; }
.na { color: #c0271a; font-weight: 700; }
.aufgebot__tbl { border-collapse: collapse; width: 100%; max-width: 360px; }
.aufgebot__tbl th, .aufgebot__tbl td { border: 1px solid var(--c-line); padding: 3px 8px; text-align: left; font-size: var(--fs-sm); }
.aufgebot__tbl th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
.aufgebot__tbl .ag-ja { font-weight: 700; }
.aufgebot__tbl .ag-nein { color: var(--c-muted); }
.aufgebot__send { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-top: 1px solid var(--c-line); flex-wrap: wrap; }
/* Aufgebot-Tabelle in der Vorschau (entspricht der formatierten Mail-Tabelle) */
.ag-table { border-collapse: collapse; font-size: var(--fs-sm); max-width: 360px; }
.ag-table th, .ag-table td { border: 1px solid #ccc; padding: 4px 12px; text-align: left; }
.ag-table th { background: var(--c-hover); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; }
/* ja = knallgrün, nein = knallrot; Text immer schwarz (auch Dark Mode) */
.ag-table td.ag-ja, .ag-table td.ag-nein, .aufgebot__tbl .ag-ja, .aufgebot__tbl .ag-nein { text-align: center; font-weight: 700; color: #111 !important; }
.ag-table td.ag-ja, .aufgebot__tbl td.ag-ja { background: #2ecc40; }
.ag-table td.ag-nein, .aufgebot__tbl td.ag-nein { background: #ff4136; }

/* --- KI-Chat (modern, volles Interface) --------------------------------- */
.chat { display: flex; flex-direction: column; height: 100%; }
/* Titelzeile EINHEITLICH wie die übrigen Interfaces (.lv__head): gleicher Abstand
   zur Sidebar (sp-5), gleiche Höhe, GROSS-Schrift, kräftige untere Trennlinie. */
.chat__top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-5) var(--sp-2); border-bottom: 1px solid var(--c-line-strong); flex: none; }
.chat__title { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; text-transform: none; }
.chat__new { font-size: var(--fs-sm); border: 1px solid var(--c-line); background: var(--c-white); padding: 5px 12px; cursor: pointer; color: var(--c-black); }
.chat__new:hover { border-color: var(--c-fill); color: var(--c-fill); }
.chat__scroll { flex: 1; overflow-y: auto; min-height: 0; padding: var(--sp-5) 0; }
.chat__col { max-width: 740px; margin: 0 auto; padding: 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); }
.chat__empty { text-align: center; color: var(--c-muted); margin-top: 12vh; }
.chat__empty-h { font-size: var(--fs-xl); font-weight: 700; color: var(--c-black); margin-bottom: var(--sp-3); }
.chat__empty-p { max-width: 540px; margin: 0 auto; font-size: var(--fs-sm); line-height: 1.5; }
.chat__row { display: flex; }
.chat__row--u { justify-content: flex-end; }
.chat__row--a { justify-content: flex-start; }
.chat__u { max-width: 80%; background: var(--c-fill); color: #fff; padding: var(--sp-2) var(--sp-3); border-radius: 14px 14px 2px 14px; white-space: pre-wrap; font-size: var(--fs-base); line-height: 1.45; }
.chat__a { max-width: 100%; font-size: var(--fs-base); line-height: 1.55; color: var(--c-black); }
.chat__a--err { color: var(--danger); }
.chat__a > :first-child { margin-top: 0; }
.chat__a p { margin: 0 0 var(--sp-2); }
.chat__a p:last-child { margin-bottom: 0; }
.chat__a ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); list-style: disc; }
.chat__a ol { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); list-style: decimal; }
.chat__a li { margin: 2px 0; }
.chat__a h1, .chat__a h2, .chat__a h3, .chat__a h4 { font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-2); }
.chat__a code { background: var(--c-hover); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 0.9em; }
.chat__a pre.chat-pre { background: var(--c-surface-2); border: 1px solid var(--c-line); padding: var(--sp-2) var(--sp-3); overflow-x: auto; }
.chat__a pre.chat-pre code { background: none; padding: 0; }
.chat-md-table { border-collapse: collapse; margin: var(--sp-2) 0; font-size: var(--fs-sm); }
.chat-md-table th, .chat-md-table td { border: 1px solid var(--c-line); padding: 4px 10px; text-align: left; }
.chat-md-table th { background: var(--c-surface-2); font-weight: 700; }
.chat__composer { flex: none; padding: var(--sp-3) 0 var(--sp-2); }
.chat__box { max-width: 740px; margin: 0 auto; display: flex; align-items: flex-end; gap: var(--sp-2); border: 1px solid var(--c-line-strong); border-radius: 24px; padding: 6px 6px 6px 12px; background: var(--c-white); }
.chat__box:focus-within { box-shadow: 0 0 0 2px rgba(0, 87, 255, 0.18); border-color: var(--c-fill); }
.chat__attach { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; cursor: pointer; color: var(--c-muted); border-radius: 50%; }
.chat__attach:hover { background: var(--c-hover); color: var(--c-black); }
.chat__attach input { display: none; }
.chat__field { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat__fname { font-size: var(--fs-micro); color: var(--c-fill); padding: 2px 2px 0; }
.chat__fname:empty { display: none; }
.chat__input { width: 100%; border: none; resize: none; font-family: var(--ff); font-size: var(--fs-base); line-height: 1.4; padding: 7px 4px; background: none; max-height: 180px; color: var(--c-black); }
.chat__input:focus { outline: none; }
.chat__send { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--c-fill); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat__send:hover { filter: brightness(1.08); }
.chat__send:disabled { background: var(--c-line); cursor: default; }
.chat__cfg { max-width: 740px; margin: var(--sp-2) auto 0; text-align: center; font-size: var(--fs-micro); color: var(--c-muted); }
/* KI-Modell-Umschalter NEBEN der Chat-Eingabe (admin, ≥2 Anbieter) — Pille mit Icon */
.chat__composer-row { max-width: 782px; margin: 0 auto; display: flex; align-items: flex-end; gap: var(--sp-2); }
.chat__composer-row .chat__box { flex: 1 1 auto; max-width: none; margin: 0; }
.chat__model { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--c-line-strong); border-radius: 24px; background: var(--c-white); cursor: pointer; }
.chat__model:hover, .chat__model:focus-within { border-color: var(--c-fill); box-shadow: 0 0 0 2px rgba(0, 87, 255, 0.16); }
.chat__model-ic { color: var(--c-fill); flex: none; }
.chat__model-sel { border: none; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); cursor: pointer; padding: 0; }
.chat__model-sel:focus { outline: none; }
@media (max-width: 720px) { .chat__model-sel { max-width: 88px; } }
/* „ClubOS antwortet …" mit wellenartig hüpfenden Punkten */
.chat__typing { display: inline-flex; align-items: center; gap: 9px; color: var(--c-muted); font-size: var(--fs-sm); }
.chat__dots { display: inline-flex; gap: 5px; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-fill); display: inline-block; animation: chatdot 1.15s infinite ease-in-out; }
.chat__dots i:nth-child(2) { animation-delay: 0.18s; }
.chat__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatdot { 0%, 65%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-6px); opacity: 1; } }
/* Vorschlags-Karte (Daten aus Dokument erfassen) */
.chat__propwrap { flex: none; padding: var(--sp-2) 0 0; }
.chat__prop { max-width: 740px; margin: 0 auto; border: 1px solid var(--c-fill); border-radius: 10px; padding: var(--sp-3) var(--sp-4); background: var(--c-fill-soft); }
.chat__prop-h { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.chat__prop-sec { margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.chat__prop-t { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
.chat__prop-sec ul { margin: 2px 0 0; padding-left: var(--sp-5); list-style: disc; }
.chat__prop-list { list-style: none !important; padding-left: 0 !important; }
.chat__prop-list li { margin: 1px 0; }
.chat__prop-item { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; }
.chat__prop-item input { margin-top: 3px; flex: 0 0 auto; }
.chat__prop-act { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

/* --- Leistungstest-Editor ------------------------------------------------ */
.perf { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
.perf__table { border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.perf__table th, .perf__table td { border: 1px solid var(--c-line); padding: 3px 8px; text-align: center; }
.perf__table th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); white-space: nowrap; }
.perf__nameh, td.perf__nameh { text-align: left; white-space: nowrap; }
td.perf__nameh { font-weight: 700; }
.perf__v { width: 56px; text-align: center; font: inherit; border: 1px solid var(--c-line); padding: 2px; -moz-appearance: textfield; border-radius: var(--radius); }
.perf__v:focus { border-color: var(--c-black); outline: none; }
.perf__best, td.perf__best { font-weight: 700; background: var(--c-surface-2); font-variant-numeric: tabular-nums; }
.perf__row--off { color: var(--c-faint); }
.perf__row--off .perf__v { background: var(--c-surface-2); color: var(--c-faint); }
.perf__row--off td.perf__best { background: var(--c-surface-2); color: var(--c-faint); }

/* --- Pausierung ---------------------------------------------------------- */
.amx__cell.amx--paused {
  background: repeating-linear-gradient(135deg, var(--c-surface-2), var(--c-surface-2) 4px, #e3e3e3 4px, #e3e3e3 8px);
  cursor: not-allowed;
}
/* Dark Mode: pausierte Spalte dunkler + unauffälliger (nicht das helle Grau). */
:root[data-theme="dark"] .amx__cell.amx--paused {
  background: repeating-linear-gradient(135deg, var(--c-bg), var(--c-bg) 4px, var(--c-surface-2) 4px, var(--c-surface-2) 8px);
}

.ppause { margin: 0 var(--sp-4) var(--sp-6); padding: 16px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow-sm); }
.ppause--on { border-color: var(--danger); background: var(--danger-soft); }
.ppause .pform__section-title { margin-top: 0; margin-bottom: 10px; font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.ppause__status { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.ppause__hint { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-3); }
.ppause__form { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.ppause__form .field { max-width: 200px; }
.btn--warn { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn--warn:hover { background: #d6442b; border-color: #d6442b; }

/* Pausierte Personen überall dünn, grau, kursiv (Matrix-Köpfe, Listen, Analyse …) */
.is-paused, .is-paused * { font-weight: 300 !important; font-style: italic !important; color: var(--c-faint) !important; }

/* Metrik-Auswahl in der Analyse-Tabelle (Anwesenheitsliste) */
.att-an__sel { font: inherit; font-size: var(--fs-micro); font-weight: 700; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-white); color: var(--c-black); padding: 1px 2px; max-width: 100%; cursor: pointer; }
.att-an__sysf { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; flex-wrap: wrap; }
.att-an__sysf-lbl { font-size: var(--fs-sm); }
.att-an__sysf .att-an__sel { font-size: var(--fs-sm); padding: 3px 6px; max-width: 100%; }

.ppause__conflicts--ok { font-size: var(--fs-sm); color: var(--c-muted); }

/* Offene Pausen-Konflikte (permanente Links unter der Pausierung) */
.ppause__conflicts { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.ppause__ctitle { font-size: var(--fs-sm); font-weight: 700; color: var(--danger); margin-bottom: var(--sp-2); }
.ppause__clist { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.ppause__clist li { padding: 2px 0; }
.ppause__clist a { color: var(--c-fill); cursor: pointer; }
.ppause__norepl { font-style: normal; font-size: var(--fs-micro); text-transform: none; letter-spacing: 0; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-full); padding: 0 3px; margin-left: 6px; }
.ppause__chint { font-size: var(--fs-micro); color: var(--c-muted); }

/* Konflikt-Popup (#cos-popup) */
.cos-pop { position: fixed; top: 64px; right: 18px; z-index: 80; max-width: 380px; background: var(--c-white); border: 1px solid var(--danger); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(11, 24, 56, 0.28); padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4); font-size: var(--fs-sm); }
.cos-pop__close { position: absolute; top: 4px; right: 8px; border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--c-muted); }
.cos-pop__close:hover { color: var(--c-black); }
.cos-pop__title { font-weight: 700; margin-bottom: var(--sp-2); }
.cos-pop__lead { margin: 0 0 var(--sp-2); color: var(--c-muted); }
.cos-pop__list { margin: 0; padding-left: var(--sp-4); }
.cos-pop__list li { padding: 2px 0; }
.cos-pop__list a { color: var(--c-fill); cursor: pointer; }

/* Absenz-Popup */
.cos-pop--abs { border-color: var(--c-line-strong); }
/* Feld-Auswahl beim „Zu Home hinzufügen" (Mini-Vorschau der 11 Home-Felder) */
.cos-pop.pickfield { max-width: 460px; width: 460px; border-color: var(--c-line-strong); }
.pickfield__h { font-weight: 700; margin-bottom: var(--sp-2); }
.pickfield__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pickfield__field { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 6px 8px; border: 1px solid var(--c-line-strong); border-radius: 4px; background: var(--c-white); text-align: left; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.pickfield__field--info { background: var(--c-fill-soft); cursor: default; }
.pickfield__field:not(.pickfield__field--info):hover { box-shadow: inset 0 0 0 2px var(--c-fill); }
.pickfield__field:not(.is-filled):not(.pickfield__field--info) { border-style: dashed; }
.pickfield__field.is-suggest { box-shadow: inset 0 0 0 2px var(--c-fill); }
.pickfield__num { font-size: var(--fs-micro); font-weight: 700; color: var(--c-muted); }
.pickfield__lbl { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pickfield__empty { font-size: var(--fs-sm); color: var(--c-muted); }
.pickfield__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.pickfield__foot .muted { font-size: var(--fs-micro); }
.abs-pop__name { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.abs-pop__tag { color: var(--danger); font-weight: 700; }
.abs-pop__lbl { display: block; font-size: var(--fs-micro); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.abs-pop__form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-sm); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 5px 7px; background: var(--c-white); color: var(--c-black); resize: vertical; margin-top: 3px; }
.abs-pop__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* pausierte Spieler in der Aufstellungs-Auswahl */
.chk--paused { opacity: 0.6; }
.chk__pausetag { font-style: normal; font-size: var(--fs-micro); text-transform: none; letter-spacing: 0; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-full); padding: 0 3px; margin-left: 3px; }
.chk__abstag { font-style: normal; font-size: var(--fs-micro); text-transform: none; letter-spacing: 0; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-full); padding: 0 3px; margin-left: 3px; }

/* --- Responsiv ----------------------------------------------------------- */
@media screen and (max-width: 760px) {
  /* Sidebar = schmale Icon-Leiste; Antippen klappt sie als Overlay aus (mit Namen). */
  .sidebar { width: 54px; padding: var(--sp-2) 0; overflow: visible; }
  .tnode__icon { display: inline-flex; }
  .tnode__top, .tleaf { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  .tnode__label, .sidebar .tcount, .tnode__kids { display: none; }
  .tnode__top::before { display: none; }

  body.sb-open .sidebar {
    position: absolute; top: 0; left: 0; bottom: 0; width: 248px; z-index: 50;
    background: var(--c-white); overflow-y: auto;
    box-shadow: 3px 0 16px rgba(11, 24, 56, 0.3);
  }
  body.sb-open .tnode__top, body.sb-open .tleaf { justify-content: flex-start; gap: var(--sp-3); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  body.sb-open .tleaf { padding-left: var(--sp-6); }
  body.sb-open .tnode__label, body.sb-open .sidebar .tcount { display: inline; }
  body.sb-open .tnode__kids { display: block; }
  body.sb-open .sb-backdrop { display: block; position: absolute; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.45); }

  /* Anwesenheits-Matrix scrollt eigenständig (Kopfzeile + Datumsspalte bleiben
     sticky); die 2-Metriken-Analyse rechts bleibt FIXIERT (eigener Scroll) und
     verschwindet NICHT beim Hochscrollen — nur die Matrix scrollt weg. */
  /* Die Matrix nimmt die VOLLE Breite ein und scrollt als EIN Bereich. Nach rechts
     wischen erscheint am rechten Ende — bündig angehängt — die 2-Metriken-Analyse
     (sie ist also normal NICHT im Bild). Kopfzeile + Datumsspalte bleiben sticky. */
  /* Handy = wie Desktop: die MATRIX scrollt INTERN (horizontal + vertikal), die Toolbar bleibt fix
     oben stehen und die 2-Metrik-Analyse hängt mit kleinem Abstand FIX rechts daneben (kein Riesen-
     Abstand, klebt aber nicht an). So bleiben Speichern/Bearbeiten immer erreichbar. */
  .amx-layout { overflow: hidden; min-height: 0; -webkit-overflow-scrolling: touch; }
  .amx { flex: 1; min-width: 0; height: 100%; }
  /* Matrix + Inline-Analyse liegen NEBENeinander in EINEM Scroll → nach rechts wischen zeigt erst alle
     Matrix-Spalten und ganz am Ende die 2-Metrik-Analyse (beim Öffnen ist sie also NICHT im Bild).
     Beide fliessen inline (nicht flex — sonst bricht das sticky der Datumsspalte). */
  .amx__scroll { display: block; white-space: nowrap; overflow: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
  .amx__table { display: inline-table; width: max-content; vertical-align: top; white-space: normal; }
  /* Handy: NUR die Datumsspalte bleibt LINKS fixiert — die übrigen Info-Spalten scrollen mit. Die
     KOPFZEILE bleibt komplett OBEN fixiert (sticky-top), damit erste Spalte UND oberste Zeile fix sind. */
  tbody .amx__wd, tbody .amx__col-type, tbody .amx__col-time, tbody .amx__col-loc,
  tbody .amx__col-opp, tbody .amx__cnt--staff, tbody .amx__cnt--players { position: static; }
  thead .amx__wd, thead .amx__col-type, thead .amx__col-time, thead .amx__col-loc,
  thead .amx__col-opp, thead .amx__cnt--staff, thead .amx__cnt--players { left: auto !important; }
  .amx__dt { left: 0 !important; }   /* Datumsspalte fix ganz links */
  /* Toolbar oben: erst Werkzeuge + Buttons, DANN die Legende über die volle Breite (bricht um bei Bedarf). */
  .amx__bar { flex-direction: row; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
  .amx__legend { order: 10; flex-basis: 100%; width: 100%; margin-left: 0; margin-top: 2px; flex-wrap: wrap; }
  .amx__antab, .amx__analytics--desk { display: none !important; }   /* Desktop-Seitenspalte + Toggle am Handy weg */
  /* Inline-Analyse: hängt ganz rechts an der Matrix (im selben Scroll), erst nach Rechtswischen sichtbar. */
  .amx__analytics--mob {
    display: inline-block; vertical-align: top; white-space: normal;
    width: 80vw; max-width: 360px; min-width: 210px;
    margin: 0; border: 0; border-left: 2px solid var(--c-line-strong); background: var(--c-white);
    overflow: visible; max-height: none;   /* mit der Matrix scrollen, KEIN eigener Scroll */
  }
  .amx__analytics--mob .analytics__head, .amx__analytics--mob .analytics__table thead th {
    position: sticky; top: 0; z-index: 3; background: var(--c-white);
  }

  /* Mobile: Pfeile+Speichern bleiben oben rechts auf Namenshöhe; Foto ist eine eigene Zeile darunter. */
  .pform__head { flex-wrap: wrap; align-items: flex-start; }
  .pform__id { flex: 1 1 auto; }
  .pform__actions { flex: 0 0 auto; margin-left: auto; }
  .users__form { grid-template-columns: 1fr; }
  .team__games { grid-template-columns: repeat(2, 1fr); }
}

/* --- Druck / PDF --------------------------------------------------------- */
.print-only { display: none; }
@media print {
  @page { size: A4 landscape; margin: 7mm; }

  /* Im Dark Mode trotzdem auf WEISSEM Papier drucken: helle Tokens erzwingen. */
    html, body { background: #fff !important; color: #000 !important; }

  /* Farben (orange/grün) zwingend mitdrucken */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  .topbar, .sidebar, .tab-strip, .lineup__form, .lineup__actions,
  .lineup__hint, .lineup__msg, .lineup__tip, .lineup__antab, .print-hide, .btn { display: none !important; }
  html, body, .app, .main, .workspace, .tab-content {
    display: block !important; height: auto !important; overflow: visible !important;
    margin: 0 !important;
  }
  html, body { font-size: 11px !important; }
  .lineup { padding: 0 !important; max-width: none !important; }
  .print-only { display: block !important; }
  .print-title { font-weight: 700; font-size: 14px; margin: 0 0 6px; letter-spacing: 0.04em; }

  /* Spielsystem-Aufstellung: Benotung auf Seite 1; Blöcke = Formationen, Zeile = Mannschaft,
     Teilspiele = Spalten (max 4/Zeile). Bei 9–12 Mini-Aufstellungen alle auf die Rückseite. */
  .sysline__meta, .sysline__hints { display: none !important; }
  .sysline__blocks--back { break-before: page; page-break-before: always; }
  .sysline__formation, .sysline__team { break-inside: avoid; page-break-inside: avoid; }
  .sysline__fhead { font-size: 12px; }
  .sysline__thead { font-size: 11px; color: #000; }
  /* Mini-Matrizen im Druck EXAKT wie im Interface: JS-Spaltenzahl (--spf-cols), feste Höhe,
     gleiche Boxbreite — KEINE zusätzliche Kompression (früher 23%/76px → viel zu eng). */
  .sysline__games { gap: 6px !important; }
  .spf--play .spf__chip, .spf--play .spf__box--empty .spf__num { font-size: 10px !important; padding: 1px 3px !important; line-height: 1.15 !important; }
  .spf__result { padding: 2px !important; border: 1px solid #000 !important; }
  .spf__score { border: 1px solid #000 !important; width: 24px; }
  .spf__box--off, .spf--play .spf__chip--off { outline: 2px solid var(--danger) !important; }

  /* BENOTUNG (max. 9 Zeilen, da max. 18 Spieler) */
  .benotung { max-width: none !important; width: 100%; margin: 0 0 9px; break-inside: avoid; }
  .benotung td { height: auto; padding: 3px 6px; font-size: 11px; }
  .benotung__title td { font-size: 12px; padding: 3px; }
  .benotung__head td { font-size: 9px; }

  /* Mannschaften + Mini-Aufstellungen — füllen die untere Blatthälfte */
  .team { max-width: none !important; margin: 0 0 9px; break-inside: avoid; }
  /* ZWINGEND alle 4 Aufstellungen in EINER Zeile (sonst 2 Seiten) */
  .team__games { grid-template-columns: repeat(4, 1fr) !important; }
  .team__title { font-size: 12px; padding: 3px; }
  .ml__cell { min-height: 20px; padding: 2px; font-size: 11px; line-height: 1.2; }
  .ml__result { padding: 3px 2px; }
  .ml__score { width: 28px; padding: 2px; font-size: 12px; border: 1px solid var(--c-line-strong) !important; }
  .ml__colon { font-size: 12px; }

  /* TRAININGSPLAN: eigene benannte Seite A4 HOCHformat (alle anderen Panels bleiben landscape).
     Safari ignoriert page: und faellt auf landscape zurueck (dort im Druckdialog umstellen). */
  @page tplan { size: A4 portrait; margin: 10mm; }
  .lv--tplanview { page: tplan; }
  .tpv-paper { width: 100% !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 0 !important; }
  .tpv-slot { break-inside: avoid; }
  .tpv-actions, .tpv-warn, .tpv-swap { display: none !important; }
  /* Dark Mode druckt sonst dunkles Papier bzw. fast-weissen Text (data-theme bleibt beim Drucken
     gesetzt und print-color-adjust erzwingt die Hintergruende) */
  .tps-paper, .tpv-paper { background: #fff !important; color: #000 !important; }
  .tps-val { background: none !important; color: #000 !important; font-weight: 700; }
  .tps-val--na { color: #666 !important; font-weight: 400; }
  .tpv-table td, .tpv-slot, .tpv-header, .tpv-footer { border-color: #999 !important; }
  .tpv-note { color: #8a5a00 !important; }
}

/* ============================ POSTFACH ==================================== */
.mbx { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.mbx__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line-strong); flex: none; flex-wrap: wrap; }
.mbx__baractions { margin-left: auto; display: flex; gap: var(--sp-2); }
.mbx__warn { color: var(--danger); font-size: var(--fs-sm); }
.mbx__body { display: flex; flex: 1; min-height: 0; }
.mbx__list { width: 340px; flex: none; border-right: 1px solid var(--c-line-strong); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mbx__read { flex: 1; min-width: 0; overflow: auto; }
/* Reiter als runde Pillen (nicht mehr gequetscht) — umbrechen statt abschneiden */
.mbx__folders { display: flex; flex-wrap: wrap; gap: 6px; flex: none; padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.mbx__tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; background: transparent; border: 1px solid var(--c-line); border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--c-muted); white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.mbx__tab:hover { background: var(--c-hover); color: var(--c-black); }
.mbx__tab.is-on { background: var(--color-primary); color: #fff; font-weight: 600; }
.mbx__badge { display: inline-grid; place-content: center; min-width: 17px; height: 17px; padding: 0 5px; background: var(--c-fill); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; }
.mbx__tab.is-on .mbx__badge { background: rgba(255,255,255,0.28); }
.mbx__readall { margin-left: auto; padding: 6px 12px; background: transparent; border: 1px solid var(--c-line); border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--c-muted); white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.mbx__readall:hover { background: var(--c-hover); color: var(--c-black); border-color: var(--c-line-strong); }

/* Filter- und Suchleiste */
.mbx__filter { display: flex; flex-direction: column; gap: 7px; padding: 0 var(--sp-3) var(--sp-3); flex: none; }
.mbx__searchwrap { position: relative; display: flex; align-items: center; }
.mbx__searchicon { position: absolute; left: 11px; color: var(--c-muted); pointer-events: none; }
.mbx__search { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-sm); }
.mbx__search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(8,102,245,0.12); }
.mbx__selects { display: flex; gap: 6px; flex-wrap: wrap; }
.mbx__sel { flex: 1 1 45%; min-width: 0; padding: 6px 8px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-micro); cursor: pointer; }
.mbx__sel:focus { outline: none; border-color: var(--color-primary); }

/* Mail-Zeilen als weiche Karten */
/* #mbx-rows ist der Scroll-Behälter (feste Höhe = Bildschirm); die Liste scrollt INNEN, Reiter+Filter bleiben fix. */
#mbx-rows { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.mbx__rows { padding: 0 var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: 5px; }
.mbx__row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "subj date" "who tags"; gap: 3px 8px; width: 100%; text-align: left; padding: 9px 12px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); cursor: pointer; font: inherit; transition: border-color .12s, background .12s, box-shadow .12s; }
.mbx__row:hover { background: var(--c-hover); border-color: var(--c-line-strong); box-shadow: var(--shadow-sm); }
/* Ungelesen: dezenter Punkt vor dem Betreff + fette Schrift (KEIN blauer Balken links). */
.mbx__row.is-unread .mbx__who, .mbx__row.is-unread .mbx__subj { font-weight: 700; color: var(--c-black); }
.mbx__row.is-unread .mbx__subj::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--color-primary); vertical-align: middle; }
/* Geöffnete Mail deutlich hervorgehoben. */
.mbx__row.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); box-shadow: none; }
.mbx__row.is-active:hover { background: var(--color-primary-soft); }
.mbx__who { grid-area: who; font-size: var(--fs-micro); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx__date { grid-area: date; display: inline-flex; align-items: center; gap: 5px; justify-self: end; font-size: var(--fs-micro); color: var(--c-muted); white-space: nowrap; align-self: start; }
.mbx__subj { grid-area: subj; font-size: var(--fs-sm); color: var(--c-black); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx__clip { vertical-align: -1px; color: var(--c-muted); }
.mbx__tags { grid-area: tags; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 5px; }
/* KI-Sternen-Marker je Mail (oben rechts): gescannt (Posteingang) / von KI verfasst (Gesendet). */
.mbx__ai { display: inline-flex; align-items: center; color: var(--color-primary); flex: none; }
.mbx__date .mbx__ai { margin-top: -1px; }
/* Anfrage-Zeile (Benutzer-Anfrage im Posteingang). */
.mbx__row--req { grid-template-columns: 1fr auto; grid-template-areas: "subj badge" "who date"; background: var(--color-primary-soft); border-color: var(--color-primary); }
.mbx__row--req:hover { background: var(--color-primary-soft); }
.mbx__reqbadge { grid-area: badge; justify-self: end; align-self: start; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--color-primary); color: #fff; white-space: nowrap; }
.mbx__row--req .mbx__date { grid-area: date; justify-self: end; }
.mbx__ki { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(46,158,91,0.15); color: #2e9e5b; }
.mbx__cat { font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.mbx__cat--absence { background: rgba(224,42,26,0.15); color: #c0271a; }
.mbx__cat--spielbetrieb { background: rgba(8,102,245,0.15); color: var(--color-primary); }
.mbx__cat--allgemein { background: rgba(120,130,150,0.15); color: var(--c-muted); }

/* KI-Prüfungs-Block unter der Mail */
.magent { margin-top: var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2); }
.magent--running, .magent--queued { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(8,102,245,0.08); }
.magent--error { border-color: var(--danger); }
.magent__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.magent__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--c-black); }
.magent__status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.magent__status--run { background: rgba(8,102,245,0.14); color: var(--color-primary); }
.magent__status--done { background: rgba(46,158,91,0.15); color: #2e9e5b; }
.magent__status--err { background: rgba(224,42,26,0.15); color: #c0271a; }
.magent__spin { width: 11px; height: 11px; border: 2px solid rgba(8,102,245,0.30); border-top-color: var(--color-primary); border-radius: 50%; animation: magent-spin .7s linear infinite; }
@keyframes magent-spin { to { transform: rotate(360deg); } }
.magent__wait { font-size: var(--fs-sm); color: var(--c-muted); margin: 8px 0 0; }
.magent__note { font-size: var(--fs-sm); color: var(--c-muted); margin: 8px 0; }
.magent__note--err { color: #c0271a; }
.magent__row { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.magent__lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); font-weight: 700; }
.magent__lbl--sp { display: block; margin: 12px 0 5px; }
.magent__muted { color: var(--c-faint); font-size: var(--fs-sm); }
.magent__reason { font-size: var(--fs-sm); color: var(--c-black); line-height: 1.5; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 9px 11px; margin: 8px 0 0; white-space: pre-line; }
/* Gerenderte KI-Begründung (Markdown-Teilmenge): Fett, Aufzählungen, Pipe-Tabellen. */
.magent__reason--md { white-space: normal; }
.magent__reason--md > :first-child { margin-top: 0; }
.magent__reason--md > :last-child { margin-bottom: 0; }
.magent__reason--md p { margin: 0 0 8px; }
.magent__reason--md ul { margin: 4px 0 8px; padding-left: 20px; }
.magent__reason--md li { margin: 2px 0; }
.magent__reason--md strong { font-weight: 600; }
.magent__reason--md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: rgba(128,128,128,.14); padding: 1px 4px; border-radius: 3px; }
.magent__reason--md .md-table { border-collapse: collapse; margin: 6px 0 8px; font-size: var(--fs-sm); display: block; overflow-x: auto; max-width: 100%; }
.magent__reason--md .md-table th, .magent__reason--md .md-table td { border: 1px solid var(--c-line); padding: 4px 9px; text-align: left; vertical-align: top; }
.magent__reason--md .md-table th { background: rgba(128,128,128,.12); font-weight: 600; }
.magent__acts { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--c-black); display: flex; flex-direction: column; gap: 3px; }
.magent__acts--done { color: var(--c-muted); margin-top: 4px; }
.magent__btns { display: flex; gap: var(--sp-2); margin-top: 12px; }
.magent__applied { margin-top: 10px; }
.magent__applied-mark { display: inline-block; font-size: var(--fs-sm); font-weight: 700; color: #2e9e5b; }
.magent__re { margin-top: 12px; }
.magent__refoot { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.magent__refoot .magent__re { margin-top: 0; }
/* Chat-Interface unter der Mail: Gesprächs-Bubbles + Eingabefeld „mit dem Agenten weiterreden". */
.magent__conv { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; }
.magent__chatbox { display: flex; align-items: flex-end; gap: 6px; margin: 12px 0 0; border: 1px solid var(--c-line-strong); border-radius: 12px; padding: 6px 6px 6px 11px; background: var(--c-white); }
.magent__chatbox.htmx-request { opacity: .6; }
.magent__chatinput { flex: 1; border: 0; background: none; resize: none; font: inherit; font-size: var(--fs-sm); color: var(--c-black); max-height: 140px; line-height: 1.45; outline: none; }
.magent__chatsend { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--c-fill); color: #fff; cursor: pointer; }
.magent__chatsend:disabled { opacity: .5; cursor: default; }
/* Vergangenheits-Absenz: Spieler wird für ein Training/Spiel in der Vergangenheit abgemeldet. */
.magent__act--warn { color: var(--warning); font-weight: 600; }

/* Gmail-Label-Chips in der Mail-Detailansicht (Klick setzt/entfernt das Label auch in Gmail) */
.mlabels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--sp-2) 0 var(--sp-3); }
.mlabels__lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); font-weight: 700; margin-right: 2px; }
.mlabels__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-white); color: var(--c-muted); font: inherit; font-size: var(--fs-micro); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.mlabels__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.mlabels__chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.mlabels__tick { font-size: 10px; }
.mlabels__ai { display: inline-flex; align-items: center; color: var(--color-primary); }
.mlabels__chip:hover .mlabels__ai { color: var(--color-primary); }
.mlabels__chip.is-on .mlabels__ai { color: #fff; }
.mlabels__none { font-size: var(--fs-micro); color: var(--c-faint); }

/* KI-Antwort-Entwurf (Abmeldung) */
.mreply { margin-top: var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2); }
.mreply__head { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--c-black); }
.mreply__to { font-weight: 400; color: var(--c-muted); }
.mreply__hint { font-size: var(--fs-sm); color: var(--c-muted); margin: 6px 0 8px; }
.mreply__ta { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-sm); line-height: 1.5; padding: 10px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); resize: vertical; }
.mreply__ta:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(8,102,245,0.12); }
.mreply__btns { display: flex; gap: var(--sp-2); margin-top: 10px; }
.mreply__msg { font-size: var(--fs-sm); color: var(--danger); margin-top: 6px; }
.mreply--sent { color: #2e9e5b; font-weight: 600; font-size: var(--fs-sm); }
.mreply__ok { font-weight: 700; }

/* Aufgebot-Status: Entwurf / Geschützt / Gesendet */
.lstatus { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.lstatus--draft { background: rgba(120,130,150,0.16); color: var(--c-muted); }
.lstatus--protected { background: rgba(224,122,31,0.16); color: #e07a1f; }
.lstatus--sent { background: rgba(46,158,91,0.16); color: #2e9e5b; }
.algo__applyitem--locked { color: var(--c-faint); }
.algo__applylock { font-size: 10px; opacity: 0.7; }
.mbx__rows-empty, .mbx__read-empty { padding: var(--sp-5); color: var(--c-muted); font-style: italic; }
.mbx__msg, .mbx__compose { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.mbx__msghead { display: flex; align-items: flex-start; gap: var(--sp-3); }
.mbx__msgsubj { font-size: var(--fs-md); font-weight: 700; flex: 1; word-break: break-word; }
.mbx__x { flex: none; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--c-muted); }
.mbx__x:hover { color: var(--c-black); }
.mbx__msgmeta { font-size: var(--fs-sm); color: var(--c-muted); display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-2); word-break: break-word; }
.mbx__msgmeta b { color: var(--c-black); font-weight: 600; }
.mbx__msgdate { color: var(--c-faint); }
.mbx__atts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mbx__att { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--c-line-strong); font-size: var(--fs-sm); color: var(--c-black); text-decoration: none; }
.mbx__att:hover { border-color: var(--c-fill); color: var(--c-fill); }
.mbx__attsize { color: var(--c-muted); }
.mbx__html { width: 100%; height: 460px; border: 1px solid var(--c-line); background: #fff; }
.mbx__text { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: var(--fs-sm); margin: 0; }
.mbx__thread { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); margin-top: var(--sp-2); }
.mbx__threadlbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); font-weight: 700; margin-bottom: 6px; }
.mbx__threadlist { display: flex; flex-direction: column; gap: 4px; }
.mbx__threaditem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-white); cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--c-black); transition: background .12s, border-color .12s; }
.mbx__threaditem:hover { background: var(--c-hover); border-color: var(--c-line-strong); }
.mbx__threaditem.is-cur { border-color: var(--color-primary); background: var(--color-primary-soft); }
.mbx__threaddir { flex: none; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.mbx__threaddir--in { background: rgba(46,158,91,0.15); color: #2e9e5b; }
.mbx__threaddir--out { background: var(--color-primary-soft); color: var(--color-primary); }
.mbx__threadwho { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx__threaddate { flex: none; font-size: var(--fs-micro); color: var(--c-muted); }
.mbx__threadcur { flex: none; font-size: var(--fs-micro); color: var(--color-primary); font-weight: 600; }
/* Icon-Buttons in der Postfach-Leiste (Aktualisieren, Einstellungen). */
.mbx__iconbtn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; }
.mbx__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* Zentrales Einstellungs-Popup */
.cos-pop--mailset { max-width: 460px; }
.mset { display: flex; flex-direction: column; gap: var(--sp-3); }
.mset__sec { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-3); margin: 0; }
.mset__legend { font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); padding: 0 6px; display: inline-flex; align-items: center; gap: 5px; }
.mset__ai { display: inline-flex; color: var(--color-primary); }
.mset__radio { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; padding: 4px 0; }
.mset__radio input, .mset__cb input, .mset__pill input { accent-color: var(--color-primary); flex: none; margin-top: 2px; }
.mset__cbs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.mset__cb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
.mset__cb input { margin-top: 0; }
.mset__cb em { color: var(--c-muted); font-style: italic; }
.mset__hint { display: block; color: var(--c-muted); font-size: var(--fs-micro); }
.mset__txtlbl { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.mset__txtlbl input { padding: 7px 9px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font: inherit; }
.mset__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.mset__rlbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); font-weight: 700; width: 52px; flex: none; }
.mset__pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; border: 1px solid var(--c-line-strong); border-radius: 999px; padding: 4px 11px; }
.mset__pill input { margin-top: 0; }
.mset__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* Anfrage-Detail im Lesebereich */
.mreq__badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--color-primary); color: #fff; vertical-align: middle; margin-right: 6px; }
.mreq__body { padding: var(--sp-3) var(--sp-4); }
.mreq__intro { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.mreq__acts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.mreq__sum { font-size: var(--fs-sm); }
.mreq__btns { display: flex; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }
.mreq__done { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-muted); font-style: italic; }
.mbx__msgactions { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; }
.mbx__rescan summary { list-style: none; }
.mbx__rescan summary::-webkit-details-marker { display: none; }
.mbx__rescanform { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; max-width: 440px; }
.mbx__rescanlbl { font-size: var(--fs-micro); color: var(--c-muted); }
.mbx__rescanta { font: inherit; font-size: var(--fs-sm); padding: 4px 6px; border: 1px solid var(--c-line-strong); border-radius: 4px; resize: vertical; }
.mbx__rescanres { margin: var(--sp-2) 0; font-size: var(--fs-sm); padding: 6px 8px; border-radius: 4px; border: 1px solid var(--c-line); }
.mbx__rescanres--ok { border-color: var(--success); background: rgba(46, 204, 64, 0.10); }
.mbx__field { display: flex; align-items: center; gap: var(--sp-2); }
.mbx__field > span, .mbx__attachrow > span { width: 60px; flex: none; color: var(--c-muted); font-size: var(--fs-sm); }
.mbx__field input { flex: 1; min-width: 0; font: inherit; padding: 5px 7px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); }
.mbx__bodyinput { font: inherit; font-size: var(--fs-sm); padding: 8px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); resize: vertical; }
.mbx__attachrow { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.mbx__sent-ok { padding: var(--sp-6); text-align: center; color: var(--c-muted); }
.mbx__sent-mark { font-size: 40px; color: #2e9e5b; line-height: 1; margin-bottom: var(--sp-2); }
@media (max-width: 760px) {
  .mbx__body { flex-direction: column; }
  .mbx__list { width: auto; border-right: 0; border-bottom: 1px solid var(--c-line-strong); max-height: 45%; }
  .mbx__html { height: 300px; }
  .mbx__field > span, .mbx__attachrow > span { width: 48px; }
}
/* Mail-Konto-Popup */
.cos-pop--mailacc { max-width: 430px; border-color: var(--c-line-strong); }
.mailacc__hint { font-size: var(--fs-sm); color: var(--c-muted); margin: 2px 0 10px; }
.mailacc__form { display: flex; flex-direction: column; gap: var(--sp-2); }
.mailacc__form label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--c-muted); }
.mailacc__form input { font: inherit; padding: 6px 8px; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); }
.mailacc__form small { color: var(--c-faint); font-size: var(--fs-micro); }
.mailacc__actions { display: flex; gap: var(--sp-2); margin-top: 6px; }
.mailacc__ok { color: #2e9e5b; font-size: var(--fs-sm); margin-bottom: 8px; font-weight: 600; }
.mailacc__lbl { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 4px; }
.mailacc__cbs { display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow-y: auto; border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 8px 10px; background: var(--c-white); }
.mailacc__cb { flex-direction: row !important; align-items: center; gap: 8px; color: var(--c-black) !important; cursor: pointer; }
.mailacc__cb input { width: auto !important; padding: 0 !important; border: 0 !important; accent-color: var(--color-primary); flex: 0 0 auto; }
.mailacc__cb em { color: var(--c-faint); font-style: normal; }
.mailacc__radio { flex-direction: row !important; align-items: center; gap: 8px; color: var(--c-black) !important; cursor: pointer; font-size: var(--fs-sm); }
.mailacc__radio input { width: auto !important; padding: 0 !important; border: 0 !important; accent-color: var(--color-primary); flex: 0 0 auto; }
/* Scan-Modus-Umschalter in der Postfach-Leiste */
.mbx__scanmode { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mbx__scanmode-lbl { font-size: var(--fs-micro); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.mbx__scanmode-btn { border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-muted); font: inherit; font-size: var(--fs-micro); padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.mbx__scanmode-btn.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
/* Antwort-Stil-Regler (Ton + Länge) in der Postfach-Leiste */
.mbx__replymode { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mbx__replymode-lbl { font-size: var(--fs-micro); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.mbx__seg { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: 999px; overflow: hidden; }
.mbx__seg-btn { border: 0; background: var(--c-white); color: var(--c-muted); font: inherit; font-size: var(--fs-micro); padding: 4px 11px; cursor: pointer; }
.mbx__seg-btn + .mbx__seg-btn { border-left: 1px solid var(--c-line-strong); }
.mbx__seg-btn.is-on { background: var(--color-primary); color: #fff; font-weight: 600; }
.mbx__replymode-desc { font-size: var(--fs-micro); color: var(--c-muted); }
/* KI erstellt gerade eine Antwort */
.mreply--draft { color: var(--c-muted); }
.mreply__spin { display: inline-block; width: 11px; height: 11px; border: 2px solid rgba(8,102,245,0.30); border-top-color: var(--color-primary); border-radius: 50%; animation: magent-spin .7s linear infinite; vertical-align: middle; }
/* Radio-Gruppen in den Einstellungen (Mail-Antworten) */
.set__radios { border: 0; padding: 0; margin: 0 0 var(--sp-3) 0; display: flex; flex-direction: column; gap: 8px; }
.set__radleg { font-size: var(--fs-micro); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 0; margin-bottom: 2px; }
.set__radio { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
.set__radio input { margin-top: 3px; accent-color: var(--color-primary); flex: 0 0 auto; }
/* Systemmeldungen */
.mbx__badge--sys { background: var(--c-fill); }
.mbx__sys { overflow: auto; flex: 1; min-height: 0; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.mbx__sysflash { font-size: var(--fs-sm); color: var(--c-black); background: var(--c-fill-soft); border: 1px solid var(--c-line); padding: 6px 10px; }
.mbx__syscard { border: 1px solid var(--c-line-strong); padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
.mbx__systop { display: flex; align-items: center; gap: var(--sp-2); }
.mbx__sysbadge { font-size: var(--fs-micro); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--c-fill); background: var(--color-primary-soft); padding: 2px 8px; border-radius: var(--radius-full); }
.mbx__sysbadge--req { background: var(--danger); }
.mbx__syscard--req { border-color: var(--danger); }
.mbx__sysdate { margin-left: auto; font-size: var(--fs-micro); color: var(--c-muted); }
.mbx__systtl { font-weight: 700; font-size: var(--fs-sm); word-break: break-word; }
.mbx__sysacts { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--c-black); display: flex; flex-direction: column; gap: 2px; }
.mbx__syssum { font-size: var(--fs-sm); color: var(--c-muted); }
.mbx__sysbtns { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }
/* Systemmeldungen-Verlauf (letzte 50 entschiedene) */
.mbx__syshist { margin-top: var(--sp-5); border-top: 1px solid var(--c-line); padding-top: var(--sp-3); display: flex; flex-direction: column; gap: 1px; }
.mbx__syshisth { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-2); }
.mbx__syshrow { display: flex; align-items: baseline; gap: var(--sp-2); padding: 6px 8px; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-line-soft, var(--c-line)); }
.mbx__syshrow--off { opacity: .62; }
.mbx__syshstate { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.mbx__syshstate--done { color: var(--c-fill); }
.mbx__syshstate--off { color: var(--danger); }
.mbx__syshbody { flex: 1; min-width: 0; }
.mbx__syshttl { font-weight: 600; word-break: break-word; }
.mbx__syshfrom { font-weight: 400; color: var(--c-muted); }
.mbx__syshacts { font-size: var(--fs-xs); color: var(--c-muted); word-break: break-word; }
.mbx__syshdate { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-faint); white-space: nowrap; }
/* Berechtigungs-Gate-Popup (An Admin weiterleiten) */
.cos-pop--gate { max-width: 380px; border-color: var(--c-line-strong); }
.gate__txt { font-size: var(--fs-sm); color: var(--c-black); margin: 4px 0 12px; line-height: 1.45; }
.gate__act { display: flex; gap: var(--sp-2); }
/* Postfach gesperrt (Member-Ansicht) */
.mbx--locked { height: 100%; display: flex; flex-direction: column; }
.mbx__lock { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-6); gap: var(--sp-2); }
.mbx__lockicon { color: var(--c-faint); }
.mbx__locktitle { font-size: var(--fs-lg); font-weight: 700; }
.mbx__locktxt { max-width: 520px; font-size: var(--fs-sm); color: var(--c-black); line-height: 1.5; }
.mbx__lockmuted { color: var(--c-muted); }



/* In-App-Dokumentation (Einstellungen → Dokumentation) */
.doc { max-width: 760px; padding: var(--sp-5) var(--sp-5) var(--sp-7); line-height: 1.55; }
.doc__h1 { font-size: 1.35rem; margin: 0 0 8px; letter-spacing: .01em; }
.doc__lead { color: var(--c-muted); margin: 0 0 var(--sp-4); }
.doc__h2 { font-size: 1.02rem; margin: var(--sp-5) 0 7px; padding-bottom: 3px; border-bottom: 1px solid var(--c-line); }
.doc p { margin: 0 0 10px; }
.doc__list { margin: 0 0 12px; padding-left: 20px; }
.doc__list li { margin: 3px 0; }
.doc__sub { margin: 4px 0; padding-left: 20px; }
.doc__sub li { margin: 2px 0; }
/* Algorithmen-Doku: Bedingungs-Namen, Beispiel-Tabelle, Schritte */
.doc__cond { font-weight: 600; color: var(--c-black); }
.doc__steps li { margin: 8px 0; }
.doc__tbl { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: var(--fs-sm); }
.doc__tbl th, .doc__tbl td { border: 1px solid var(--c-line); padding: 6px 10px; text-align: left; }
.doc__tbl thead th { background: var(--c-surface-2); font-weight: 600; }
.doc__tbl tbody tr:nth-child(even) { background: var(--c-surface-2); }
.doc__tbl .doc__num { text-align: right; font-variant-numeric: tabular-nums; }
.doc__tbl .doc__hl { color: var(--color-primary); font-weight: 600; }
.lwhy__doc { margin-left: 8px; vertical-align: middle; text-transform: none; }
.doc__tree { border: 1px solid var(--c-line); border-radius: 4px; padding: 10px 12px; margin: 2px 0 14px; background: var(--c-surface-2); }
.doc__lv { padding: 2px 0; position: relative; }
.doc__lv::before { content: "↳ "; color: var(--c-muted); }
.doc__lv--1::before { content: ""; }
.doc__lv--2 { padding-left: 20px; }
.doc__lv--3 { padding-left: 40px; }
.doc__lv--4 { padding-left: 60px; }
.doc__lv--5 { padding-left: 80px; }
.doc__ex { color: var(--c-muted); font-size: var(--fs-sm); margin-left: 8px; }

/* Algorithmen-Konfiguration (Einstellungen -> Algorithmen) */
.algo { max-width: 760px; padding: var(--sp-5) var(--sp-5) var(--sp-7); line-height: 1.55; }
.algo__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 8px; }
.algo__head .algo__h1 { margin: 0; }
.algo__h1 { font-size: 1.35rem; margin: 0 0 8px; letter-spacing: .01em; }
.algo__h2 { font-size: 1.02rem; margin: var(--sp-5) 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--c-line); }
.algo__lead { color: var(--c-muted); margin: 0 0 var(--sp-4); }
.algo__note { color: var(--c-muted); font-size: var(--fs-sm); margin: 10px 0 0; }
/* Zeit-Blick des Aufgebots-Algorithmus (rückblickend / global) */
.algo__scope { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.algo__scopeopt { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start;
  border: 1px solid var(--c-line); padding: 8px 11px; cursor: pointer;
  text-transform: none; letter-spacing: 0; color: var(--c-black); }
.algo__scopeopt.is-on { border-color: var(--c-line-strong); }
.algo__scopeopt > input { grid-row: 1 / span 2; align-self: center; }
.algo__scopelbl { font-weight: 600; font-size: var(--fs-sm); }
.algo__scopedesc { grid-column: 2; font-size: var(--fs-micro); color: var(--c-muted); line-height: 1.4; }
.algo__list { display: flex; flex-direction: column; gap: 8px; }
.algo__row { display: grid; grid-template-columns: 26px 16px 1fr auto; align-items: start; gap: 10px;
  border: 1px solid var(--c-line); border-radius: 4px; padding: 11px 12px; background: var(--c-white); }
.algo__row[data-idx] { cursor: grab; }
.algo__row[data-idx]:active { cursor: grabbing; }
.algo__row.dragging { opacity: .45; }
.algo__row.algo-drop-tgt { border-color: var(--c-black); box-shadow: inset 0 0 0 1px var(--c-black); }
.algo__row--hard { background: var(--c-surface-2); }
.algo__row--off { opacity: .55; }
.algo__rank { font-variant-numeric: tabular-nums; color: var(--c-muted); padding-top: 1px; }
.algo__grip { width: 12px; height: 16px; align-self: center; opacity: .55;
  background-image: radial-gradient(var(--c-muted) 1px, transparent 1.2px); background-size: 5px 5px; background-position: center; }
.algo__row--hard .algo__grip { visibility: hidden; }
.algo__label { font-size: .98rem; }
.algo__hint { color: var(--c-muted); font-size: var(--fs-sm); margin-top: 3px; }
.algo__tag { border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 0 5px; margin-left: 8px;
  font-size: .72rem; color: var(--c-muted); vertical-align: middle; white-space: nowrap; }
.algo__kader { margin-top: 9px; }
.algo__escope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0 24px; font-size: var(--fs-sm); }
.algo__escopeopt { display: inline-flex; align-items: center; gap: 5px; color: var(--c-muted); cursor: pointer; text-transform: none; }
.algo__escopeopt input { flex: none; }
.algo__subopt { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-sm); color: var(--c-muted); cursor: pointer; }
.algo__subopt input { flex: none; }
.algo__subopt--num select { padding: 3px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.algo__subopt--num select:disabled { opacity: .5; cursor: default; }
.tgd__filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; padding: 10px 12px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.tgd__filterm { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.tgd__filterm input { flex: none; }
.tgd__filhint { font-size: var(--fs-sm); }
/* Ausklappbare Beispielrechnung je Bedingung. */
.erfrange { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 14px; padding: 8px 12px; background: var(--c-surface-2, #F2F5F9); border-radius: var(--radius); font-size: var(--fs-sm); }
.erfrange__lbl { font-weight: 600; }
.erfrange__f { display: inline-flex; align-items: center; gap: 5px; }
.erfrange__f input { padding: 4px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); font: inherit; font-size: var(--fs-sm); }
.erfrange__note { font-style: italic; }
.algo__notice { margin-top: 8px; max-width: 640px; padding: 10px 12px; border-radius: var(--radius); font-size: var(--fs-sm); border: 1px solid var(--c-line); }
.algo__notice--warn { background: var(--warning-soft, #FFFBEA); border-color: #f2d98b; color: var(--c-black); }
.algo__notice--info { background: var(--color-primary-soft, #EFF6FF); border-color: #cfe0fb; color: var(--c-black); }
.algo__notice-txt { line-height: 1.45; }
.algo__notice-list { margin: 8px 0 0; padding-left: 18px; columns: 2; column-gap: 20px; }
.algo__notice-list li { margin-bottom: 2px; break-inside: avoid; }
.algo__notice-empty { margin-top: 6px; }
.algo__ex { margin-top: 8px; max-width: 640px; }
.algo__ex > summary { display: inline-block; cursor: pointer; font-size: var(--fs-sm); color: var(--c-fill); text-underline-offset: 2px; }
.algo__ex > summary:hover { text-decoration: underline; }
.algo__ex[open] > summary { margin-bottom: 6px; }
.algo__exbody { border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong); background: var(--c-surface-2); padding: 8px 12px; font-size: var(--fs-sm); }
.algo__exbody p { margin: 0 0 6px; }
.algo__exbody p:last-child { margin-bottom: 0; }
.algo__extbl { border-collapse: collapse; margin: 4px 0 8px; font-size: var(--fs-sm); }
.algo__extbl th, .algo__extbl td { border: 1px solid var(--c-line); padding: 3px 8px; text-align: left; }
.algo__extbl th { font-weight: 700; background: var(--c-white); }
/* Link vom Aufgebot-UI zu den Algorithmus-Einstellungen. */
.lsc__cfg { margin: 12px 0 0; font-size: var(--fs-sm); }
.lsc__cfg a { color: var(--c-fill); text-underline-offset: 2px; }
.lsc__cfg a:hover { text-decoration: underline; }
.algo__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--c-muted); white-space: nowrap; padding-top: 1px; }
.algo__toggle--fix { align-self: start; }
.algo__apply { margin-top: 12px; }
.algo__applyform { margin: 4px 0 8px; }
.algo__applyall { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 6px; }
.algo__applylist { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--c-line); border-radius: 4px; padding: 9px 11px; margin-bottom: 10px; max-width: 620px; }
.algo__applyitem { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.amx__genrow { display: inline-flex; align-items: center; gap: 3px; }
.lv__grouphd { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--c-line); }
.lv__grouphd--past { margin-top: 22px; }
.algo__score { margin-top: var(--sp-4); }
.algo__bars { display: flex; flex-direction: column; gap: 22px; margin-top: 10px; }
.algo__scorow--off { opacity: .55; }
.algo__scolbl { font-size: 1rem; margin-bottom: 4px; }
.algo__scodesc { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 9px; max-width: 640px; }
.algo__scobar { display: flex; align-items: center; gap: 14px; }
.algo__scobar--sys { margin-top: 4px; }
.algo__sysname { flex: 0 0 auto; min-width: 92px; font-size: var(--fs-sm); color: var(--c-muted); }
.algo__bar { flex: 1; height: 14px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-sm); overflow: hidden; }
.algo__barfill { height: 100%; background: var(--c-black); }
.algo__scoval { width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-size: .95rem; }
.algo__applied { margin: 10px 0 2px; }
/* „Bitte prüfen"-Punkt in der Aufgebote-Liste (Algorithmus/Anwesenheit hat das Aufgebot geändert) */
.lv__flag { color: var(--danger); margin-right: 6px; font-size: .8em; vertical-align: middle; }
.lv__flag--warn { color: var(--warning); font-size: .95em; }
/* Verwaistes Aufgebot: der zugehörige Tag/das Event fehlt in der Anwesenheitsliste. */
.lv__item--orphaned .lv__row { box-shadow: inset 3px 0 0 var(--warning); }
.lv__orphanwarn { display: flex; align-items: center; gap: 6px; color: var(--warning); font-size: var(--fs-sm); font-weight: 600; padding: 4px 12px 8px 14px; }
.lv__orphanwarn svg { flex: none; }

/* Erfüllungsgrad EINES Aufgebots (kompakt, im Aufgebots-Interface) */
.lsc__intro { color: var(--c-muted); font-size: var(--fs-sm); margin: 8px 0 12px; max-width: 620px; }
.lsc__bars { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
/* „Warum dieses Aufgebot?" — beide Algorithmen vereint (Begründung + Erfüllungsgrad je Algorithmus) */
.lwhy { margin-top: var(--sp-5); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.lwhy__h { font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.lwhy__part { margin-bottom: var(--sp-5); }
.lwhy__parthd { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--c-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lwhy__num { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border: 1px solid var(--c-line-strong); font-size: 11px; color: var(--c-black); flex: 0 0 auto; }
.lwhy__det { border: 1px solid var(--c-line); margin-bottom: 5px; max-width: 720px; }
.lwhy__det > summary { cursor: pointer; padding: 7px 11px; font-weight: 600; font-size: var(--fs-sm);
  list-style: none; user-select: none; background: var(--c-surface-2);
  text-transform: none; letter-spacing: 0; color: var(--c-black); }
.lwhy__det > summary::-webkit-details-marker { display: none; }
.lwhy__det > summary::before { content: "▸ "; color: var(--c-muted); }
.lwhy__det[open] > summary::before { content: "▾ "; }
.lwhy__body { padding: var(--sp-3); }
.lwhy__cols { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.lwhy__col { flex: 1 1 280px; min-width: 0; }
.lwhy__collbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin-bottom: 5px; }
.lwhy__plist { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.lwhy__plist > li { padding: 3px 0; border-bottom: 1px solid var(--c-line); line-height: 1.35; }
.lwhy__plist--out { opacity: .9; }
.lwhy__tag { font-size: var(--fs-micro); border: 1px solid var(--c-fill); color: var(--c-fill); padding: 0 4px; }
/* Modulare Begründung je Spieler: Kopfzeile (Reihenfolge) + ein Satz je Bedingung */
.lwhy__head { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 10px 12px; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.45; }
.lwhy__pl { padding: 6px 0 8px; }
.lwhy__plname { font-weight: 600; }
.lwhy__plsum { font-weight: 400; font-size: var(--fs-micro); }
.lwhy__args { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lwhy__arg { font-size: var(--fs-sm); line-height: 1.4; padding: 3px 8px; border-left: 3px solid var(--c-line); background: var(--c-surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.lwhy__arg--for { border-left-color: var(--success); }
.lwhy__arg--against { border-left-color: var(--warning); }
.lwhy__arg--neutral { border-left-color: var(--c-faint); }
.lwhy__argc { font-weight: 600; }
/* Mini-Anwesenheitsliste eines Spielers (Drilldown „Faire Spielzeit") + anklickbarer Wert */
.aic__vlink { color: var(--c-fill); cursor: pointer; text-decoration: none; text-underline-offset: 2px; }
.aic__vlink:hover { text-decoration: underline; }
.pgm__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.pgm__h1 { font-size: var(--fs-lg); margin: 0; }
.pgm__sub { font-size: var(--fs-sm); margin: 0 0 var(--sp-4); max-width: 760px; }
.pgm__pcol { writing-mode: horizontal-tb; text-align: center; min-width: 46px; font-size: var(--fs-sm); font-weight: 700; }
/* Reiche „Faire Spielzeit"-Ansicht: T/G-Ratio ohne/mit + layerhafte Chart je Spieler */
.tgd__scope { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
/* „Faire Spielzeit": Schalter-Swatches (ohne = hellblau, mit = dunkelblau) + Änderungs-Pfeil-Symbol. */
.abwd__sw--ohne { background: #a9c9f0; }
.abwd__sw--mit { background: var(--c-fill); }
.tgd__arrsw { color: var(--success); font-weight: 700; font-size: 13px; line-height: 1; }
/* Klare Herleitung des Erfüllungsgrades (Schritt für Schritt). */
.tgd__calc { border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong); padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4); max-width: 640px; background: var(--c-surface-2); }
.tgd__calc-h { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }
.tgd__calc-steps { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.tgd__calc-steps li { padding: 1px 0; }
/* Reiche „Zuverlässige Anwesenheit"-Ansicht: Anwesenheiten/Absenzen als aufsummierte Balken je Spieler */
.abwd__ctrls { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.abwd__ctrllbl { font-size: var(--fs-sm); color: var(--c-muted); }
.abwd__tog { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); cursor: pointer;
  text-transform: none; letter-spacing: 0; color: var(--c-black); }
.abwd__sw { width: 12px; height: 12px; display: inline-block; }
.abwd__leg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--c-black); }
.abwd__sw--tp { background: var(--c-fill); }
.abwd__sw--gp { background: var(--success); }
.abwd__sw--ta { background: #eaa83c; }
.abwd__sw--ga { background: var(--danger); }
/* Umschalter „Nicht aufgebotene grau" (Checkbox als Knopf): blendet die Farben der nicht aufgebotenen
   Spieler ein/aus. Häkchen gesetzt = grau (Standard); Häkchen entfernt = Farben. */
.abwd__mute { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm);
  text-transform: none; letter-spacing: 0; cursor: pointer; border: 1px solid var(--c-line);
  background: var(--c-white); color: var(--c-muted); padding: 3px 9px; }
.abwd__mute input { position: absolute; opacity: 0; width: 0; height: 0; }
.abwd__mute:has(input:checked) { border-color: var(--c-line-strong); color: var(--c-black); background: var(--c-surface-2); }
.abwd__muteic { flex: 0 0 auto; }

/* Sortier-Steuerung des abw-Diagramms (wie die Charts-Balken): A↕ alphabetisch, Wert↕ nach Zahl. */
.abwd__sortsep { width: 1px; align-self: stretch; min-height: 18px; background: var(--c-line); margin: 0 4px; }
.abwd__sortlbl { font-size: var(--fs-sm); }
.abwd__sortb { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--c-line); background: var(--c-white);
  color: var(--c-muted); cursor: pointer; padding: 2px 7px; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }
.abwd__sortb.is-on { border-color: var(--c-line-strong); color: var(--c-black); background: var(--c-surface-2); }
.abwd__sortg { font-weight: 700; }
.abwd__sortar { font-size: 11px; line-height: 1; }
.abwd__sorticon { display: block; }

/* Balkendiagramm im EXAKTEN Charts-Balken-Stil (serverseitig als SVG, bc-* Klassen). Horizontal
   scrollbar, wenn viele Spieler. Namen der nicht aufgebotenen Spieler grau + kursiv. */
.abwd__chartwrap { overflow-x: auto; margin-top: var(--sp-2); padding-bottom: 2px; }
.abwd__chartwrap .barchart { display: block; }
.barchart .bc-name--out { fill: var(--c-faint); font-style: italic; }
.barchart .bc-val--out { fill: var(--c-faint); font-style: italic; font-weight: 600; }
.abwd__hint { font-size: var(--fs-sm); margin: 6px 0 0; }
.lsc__row--off { opacity: .55; }
.lsc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lsc__lbl { font-size: .95rem; }
.lsc__val { font-variant-numeric: tabular-nums; font-size: .95rem; }
.lsc__bar { height: 12px; margin: 5px 0 6px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-sm); overflow: hidden; }
.lsc__fill { height: 100%; background: var(--c-black); }
.lsc__desc { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }

/* Kleiner „i"-Kreis neben jedem Erfüllungsgrad → öffnet die konkrete Berechnung als Tab */
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1px solid var(--c-line-strong, #999); border-radius: 50%; margin-left: 7px; cursor: pointer;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 11px; line-height: 1;
  color: var(--c-muted); text-decoration: none; vertical-align: middle; }
.info-i:hover { border-color: var(--c-black); color: var(--c-black); }

/* Erfüllungsgrad-Info-Tab (Liste je Aufgebot ODER konkrete Berechnung) */
.aic__overall { font-size: 1.05rem; margin: 4px 0 10px; }
.aic__group { margin: 10px 0 18px; }
.aic__grouphd { font-weight: 600; font-size: 1.02rem; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--c-line); }
.aic__groupval { color: var(--c-fill); font-weight: 700; margin-left: 6px; }
.aic__sub, .aic__for { color: var(--c-muted); }
.aic__for { margin: 0 0 10px; }
.aic__result { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 18px; padding: 12px 14px;
  border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-surface-2); max-width: 720px; }
.aic__big { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.aic__restext { color: var(--c-muted); }
.aic__tbl { border-collapse: collapse; width: 100%; max-width: 720px; margin: 6px 0 18px; font-size: .92rem; }
.aic__tbl th, .aic__tbl td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.aic__tbl th { color: var(--c-muted); border-bottom: 1px solid var(--c-line-strong, #999); }
.aic__num { text-align: right; font-variant-numeric: tabular-nums; }
.aic__rowlink { cursor: pointer; }
.aic__rowlink:hover td { background: var(--c-hover, #f4f4f4); }
.aic__basis { display: block; color: var(--c-muted); font-size: .82rem; margin-top: 2px; }
.aic__ok { color: var(--c-black); }
.aic__no { color: var(--c-accent, var(--danger)); }

/* Positionsverteilung-Heatmap dieses Aufgebots (inline) */
.auheat-toggle { margin: 12px 0 2px; }
.auheat { margin: 8px 0 14px; }
.auheat__hint { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 10px; max-width: 640px; line-height: 1.5; }
.auheat__empty { padding: 8px 0; }
.auheat .posheat__pl { cursor: pointer; }
.auheat .posheat__pl.is-solo { outline: 2px solid var(--c-accent, var(--danger)); outline-offset: -2px; border-radius: var(--radius-sm); }
/* Durchtipp-Steuerung unten rechts auf der Heatmap */
.auheat__step { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.93); border: 1px solid var(--c-line); border-radius: 5px; padding: 3px 5px; }
.auheat__stepbtn { width: 24px; height: 22px; line-height: 1; font-size: 15px; cursor: pointer; color: var(--c-black);
  border: 1px solid var(--c-line-strong); background: #fff; border-radius: 4px; }
.auheat__stepbtn:hover { border-color: var(--c-black); }
.auheat__steplbl { min-width: 58px; max-width: 130px; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: var(--fs-sm); color: var(--c-muted); }


/* ======================================================================
   SquadOS Dark Mode — eigenständiges Deep-Navy / Sports-Tech Theme
   (kein Invert; Struktur/Typo/Radien/Spacing identisch, nur Farbrollen)
   ====================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #268CFF;
  --color-primary-hover: #4A9AFF;
  --color-primary-soft: rgba(38, 140, 255, 0.16);
  --color-cyan: #22DDF3;

  --c-bg: #070D1B;               /* App-Canvas */
  --c-nav: #091122;              /* Sidebar / Topbar */
  --c-white: #0D172B;            /* Standard-Card / „Papier" */
  --c-surface-2: #111C32;        /* innere Panels / Header */
  --c-hover: #172642;
  --c-fill-soft: rgba(38, 140, 255, 0.16);

  --c-line: #1B2942;             /* border-subtle */
  --c-line-strong: #2A3B59;      /* border-default */

  --c-black: #F5F8FF;            /* Primärtext */
  --c-muted: #AAB6CD;            /* Sekundärtext */
  --c-faint: #74829D;            /* Muted */
  --c-fill: #268CFF;             /* Aktionsfarbe (heller auf Dunkel) */

  --text-primary: #F5F8FF;
  --text-secondary: #AAB6CD;
  --text-muted: #74829D;
  --text-disabled: #505D74;

  --success: #4ADE80; --success-soft: rgba(34, 197, 94, 0.14);
  --warning: #FBBF24; --warning-soft: rgba(245, 158, 11, 0.14);
  --danger:  #FF7676; --danger-soft:  rgba(239, 68, 68, 0.14);

  --shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow-card:    0 8px 24px rgba(0, 0, 0, 0.24);
  --shadow-popover: 0 20px 48px rgba(0, 0, 0, 0.46);
  --shadow-modal:   0 32px 80px rgba(0, 0, 0, 0.58);
  --c-overlay: rgba(2, 8, 20, 0.62);
}

/* Topbar: dezenter Glass-Effekt nur hier */
:root[data-theme="dark"] .topbar { background: rgba(9, 17, 34, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Fussballfeld (Pitch) — charakteristisches dunkles Grün statt hellgrün */
/* Dark Mode: dunkleres Grün, aber das weisse Linien-SVG (background-image) bleibt erhalten.
   AUSNAHME .spf (Aufgebot-/Spielsystem-Felder): bleibt HELL-grün wie .sau-pitch/Charts (gleiche Optik überall). */
:root[data-theme="dark"] .posld__field, :root[data-theme="dark"] .pps-pitch,
:root[data-theme="dark"] .charts__minifield, :root[data-theme="dark"] .posheat__field { background-color: #1f4a3d; }
:root[data-theme="dark"] .is-pitchplain .spf, :root[data-theme="dark"] .is-pitchplain .posheat__field,
:root[data-theme="dark"] .is-pitchplain .pps-pitch { background-color: var(--c-surface-2); }
:root[data-theme="dark"] .posld__field { border-color: var(--c-line-strong); }

/* ===== Dark Mode: neue Spieler-UI-Karten (feste helle Farben → dunkle Flächen) ===== */
:root[data-theme="dark"] .player-hero { background: var(--c-white); }
:root[data-theme="dark"] .player-avatar { background: var(--color-primary-soft); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .player-avatar__ph { color: #7fb4ff; }
:root[data-theme="dark"] .ptag { background: rgba(255,255,255,.05); border-color: var(--c-line-strong); color: var(--c-black); }
:root[data-theme="dark"] .ptag--ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
:root[data-theme="dark"] .ptag--warn { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
:root[data-theme="dark"] .hero-stat { background: rgba(255,255,255,.035); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .hero-km { background: rgba(255,255,255,.035); border-color: var(--c-line-strong); box-shadow: none; }
:root[data-theme="dark"] .hero-km__scope { border-color: var(--c-line-strong); }
:root[data-theme="dark"] .hero-km__range input { background: var(--c-surface-2); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .card-head { border-bottom-color: var(--c-line); }
:root[data-theme="dark"] .subcard-title h3 { color: var(--c-black); }
:root[data-theme="dark"] .metric { background: var(--c-surface-2); border-color: var(--c-line); }
:root[data-theme="dark"] .metric-value { color: var(--c-black); }
:root[data-theme="dark"] .bullet { background: var(--c-hover); }
:root[data-theme="dark"] .bullet .avg { background: #cdd8ea; }
:root[data-theme="dark"] .delta.up { background: var(--success-soft); color: var(--success); }
:root[data-theme="dark"] .delta.down { background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .delta.flat { background: var(--c-hover); color: var(--c-muted); }
:root[data-theme="dark"] .bar-track { background: var(--c-hover); }
:root[data-theme="dark"] .pcard .filters .control,
:root[data-theme="dark"] .pcard .filters select,
:root[data-theme="dark"] .pcard .filters input { color: var(--c-black); background: var(--c-white); }
:root[data-theme="dark"] .choice-card { background: var(--c-white); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .choice-card.active { background: var(--color-primary-soft); border-color: var(--c-fill); }
:root[data-theme="dark"] .role-option { border-color: var(--c-line-strong); }
:root[data-theme="dark"] .role-option .role-icon { background: var(--c-surface-2); color: var(--c-muted); }
:root[data-theme="dark"] .role-option.active { background: var(--color-primary-soft); }
:root[data-theme="dark"] .role-option.active .role-icon { background: rgba(38,140,255,.28); color: #7fb4ff; }
:root[data-theme="dark"] .info-box { background: var(--color-primary-soft); border-color: rgba(38,140,255,.32); color: #cfe0f5; }
:root[data-theme="dark"] .formation-card { background: var(--c-surface-2); border-color: var(--c-line); }
:root[data-theme="dark"] .pps-help { background: var(--c-surface-2); }
:root[data-theme="dark"] .pps-help > summary { color: var(--c-muted); }
:root[data-theme="dark"] .sticky-save { background: rgba(13,23,43,.95); border-color: var(--c-line-strong); }

/* Heatmap-Zellen tragen immer dunklen Text (die Farbflächen sind mittelhell) */
:root[data-theme="dark"] .analytics__heat, :root[data-theme="dark"] td[data-heatcell],
:root[data-theme="dark"] .amx__cell[style*="background"] { color: #07132F; }

/* Print-Overrides bleiben unberührt (eigenes @media print) */

/* --- Pivot-Tabelle (Excel-Funktion) --------------------------------------------------------- */
.pivot-head__hint { font-size: var(--fs-sm); font-weight: 400; margin-left: var(--sp-2); }
.ana-pivotbtn { white-space: nowrap; margin-left: auto; }
/* Export der Datentabelle (Excel/CSV) — Cluster rechts neben der Pivot-Schaltfläche. */
.ana-export { display: inline-flex; align-items: center; gap: 6px; }
.ana-export__lbl { font-size: 11px; color: var(--c-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ana-export__btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ana-export__ic { flex: none; }
.pivot { display: flex; flex-direction: column; gap: var(--sp-4); }

.pivot-cfg { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow-card); }
.pivot-cfg__sum { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 600; list-style: none; }
.pivot-cfg__sum::-webkit-details-marker { display: none; }
.pivot-cfg__sum::before { content: "\25B8"; margin-right: var(--sp-2); color: var(--c-faint); }
.pivot-cfg[open] .pivot-cfg__sum::before { content: "\25BE"; }

.pivot-builder { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-4); }
.pivot-builder__hint { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--c-muted); }
.pivot-builder__fields { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; max-height: 340px; }
.pivot-builder__h { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-faint); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2); }
.pivot-builder__search { border: none; border-bottom: 1px solid var(--c-line); border-radius: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.pivot-fieldlist { overflow-y: auto; padding: var(--sp-1); display: flex; flex-direction: column; gap: 2px; }
.pivot-field { display: flex; align-items: center; gap: var(--sp-2); text-align: left; border: 1px solid transparent; background: none; border-radius: var(--radius-sm); padding: 6px var(--sp-2); font-size: var(--fs-sm); color: var(--c-black); cursor: grab; }
.pivot-field:hover { background: var(--c-hover); border-color: var(--c-line); }
.pivot-field.is-placed { display: none; }
.pivot-field__ic { width: 16px; text-align: center; color: var(--c-faint); }
.pivot-field--measure .pivot-field__ic { color: var(--color-primary); }

.pivot-builder__zones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-content: start; }
.pivot-zone { border: 1px dashed var(--c-line-strong); border-radius: var(--radius); background: var(--c-bg); min-height: 84px; padding: var(--sp-2); transition: background .12s, border-color .12s; }
.pivot-zone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pivot-zone__h { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); font-weight: 600; margin-bottom: var(--sp-2); }
.pivot-zone__drop { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pivot-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: var(--radius-full); padding: 3px 6px 3px 10px; font-size: var(--fs-sm); cursor: grab; box-shadow: var(--shadow-sm); }
.pivot-chip__lbl { font-weight: 500; }
.pivot-chip__agg { height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--c-line); font-size: var(--fs-micro); padding: 0 4px; background: var(--c-surface-2); }
.pivot-chip__filt { border: none; background: var(--c-fill-soft); color: var(--color-primary); border-radius: var(--radius-full); font-size: var(--fs-micro); padding: 2px 8px; cursor: pointer; }
.pivot-chip__x { border: none; background: none; color: var(--c-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.pivot-chip__x:hover { color: var(--danger); }

.pivot-note { font-size: var(--fs-sm); background: var(--warning-soft); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); color: var(--c-black); }
.pivot-empty { padding: var(--sp-6); text-align: center; }
.pivot-tablewrap { overflow: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); max-height: 70vh; }
.pivot-table { border-collapse: collapse; font-size: var(--fs-sm); width: max-content; min-width: 100%; }
.pivot-table th, .pivot-table td { border: 1px solid var(--c-line); padding: 6px 10px; text-align: right; white-space: nowrap; }
.pivot-corner, .pivot-rowh { text-align: left; background: var(--c-surface-2); font-weight: 600; color: var(--c-black); }
.pivot-colh { background: var(--c-surface-2); font-weight: 600; text-align: center; color: var(--c-black); position: sticky; top: 0; z-index: 2; }
.pivot-colh--sub { font-weight: 500; color: var(--c-muted); }
.pivot-cell { color: var(--c-black); font-variant-numeric: tabular-nums; user-select: none; }
.pivot-cell.pivot-na { color: var(--c-faint); font-style: italic; }
.pivot-total, .pivot-total-row > * { background: var(--c-fill-soft); font-weight: 600; }
.pivot-cell.is-sel { background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }

.pivot-legend { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-3); font-size: var(--fs-sm); }
.pivot-legend dt { font-weight: 600; }
.pivot-legend dd { margin: 0; color: var(--c-muted); }
.pivot-legend > div { max-width: 400px; }

.pivot-filterpop__list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; margin: var(--sp-2) 0; }
.pivot-filterpop__opt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }

/* Etappe 2: Bereichs-Auswahl + Diagramm aus der Auswahl */
.pivot-cell[data-col] { cursor: cell; }
.pivot-selpop { max-width: 320px; }
.pivot-selpop__copy { display: block; width: 100%; margin-bottom: var(--sp-2); border: 1px solid var(--c-line-strong); background: var(--c-white); }
.pivot-selpop__ch { border-top: 1px solid var(--c-line); padding-top: var(--sp-2); margin-top: var(--sp-1); }
.pivot-selpop__lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); font-weight: 600; margin-bottom: 6px; }
.pivot-selpop__hint { font-size: var(--fs-sm); padding: var(--sp-1) 0; }
.pivot-selpop__heat { border-color: var(--color-primary) !important; color: var(--color-primary); font-weight: 600; }
.pivotchart__heat { max-width: 560px; margin-top: var(--sp-3); }
.pivotchart .chartview__chart { margin-top: var(--sp-3); }
/* Dark Mode: Achsen- und Legenden-Beschriftung jeder Pivot-Chart hell (SVG-Text überschreibt das
   inline fill-Attribut). Rasterlinien dezent abdunkeln. */
:root[data-theme="dark"] .pivotchart svg text { fill: #F5F8FF; }
:root[data-theme="dark"] .pivotchart svg line[stroke="#E9EDF3"] { stroke: #2A3B59; }

/* Postfach: Agent Runs */
.mbx__runs { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.mbx__runsintro { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.mbx__runrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
.mbx__runrow--running { border-color: var(--color-primary); background: var(--color-primary-soft); }
.mbx__runstate { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-width: 96px; }
.mbx__runstate--done { color: var(--success); }
.mbx__runstate--error { color: var(--danger); }
.mbx__runstate--running { color: var(--color-primary); }
.mbx__runspin { width: 12px; height: 12px; border: 2px solid var(--color-primary); border-top-color: transparent; border-radius: 50%; display: inline-block; animation: mbxspin 0.8s linear infinite; }
@keyframes mbxspin { to { transform: rotate(360deg); } }
.mbx__runbody { flex: 1 1 auto; min-width: 0; }
.mbx__runsubj { font-weight: 500; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx__runmeta { font-size: var(--fs-micro); }
.mbx__badge--run { background: var(--color-primary); color: #fff; }

/* Spielsystem-Editor: bei fixen Mannschaften gesperrte (bereits woanders erzwungene) Spieler */
.sysf__candchk--mannlock { opacity: 0.5; font-style: italic; cursor: not-allowed; }
.sysf__candchk--mannlock input { cursor: not-allowed; pointer-events: none; }
.rolewarn__sec { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.rolewarn__sech { font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }

/* --- Aufgebots-Mail-Baukasten (Etappe 1) --- */
.mailb__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.mailb__hint { margin: 4px 0 0; max-width: 660px; }
.mailb__headr { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.mailb__viewtog { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.mailb__vt { border: none; background: var(--c-white); color: var(--c-muted); padding: 6px 14px; font: inherit; cursor: pointer; }
.mailb__vt.is-on { background: var(--color-primary); color: #fff; }
.mailb__subjrow { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mailb__subjrow[hidden] { display: none; }   /* in der Vorschau nur der Preview-Betreff, nicht das Edit-Feld */
.mailb__subjlbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); flex: none; }
.mailb__subj { flex: 1 1 auto; }
.mailb__grid { display: grid; grid-template-columns: 1fr 250px; gap: var(--sp-4); align-items: start; }
/* In der Vorschau keine Palette-Spalte reservieren → Vorschau füllt die ganze Box. */
.mailb--preview .mailb__grid { grid-template-columns: 1fr; }
.mailb--embed.mailb--preview .mailb__prevbody { max-width: none; }
.mailtok-edit { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 10px 12px; background: var(--c-white); font-size: var(--fs-sm); line-height: 1.55; min-height: 42px; outline: none; }
.mailtok-edit:focus { border-color: var(--color-primary); }
.mailb__editor { min-height: 440px; white-space: pre-wrap; word-break: break-word; }
.mailtok { position: relative; display: inline-block; background: var(--color-primary); color: #fff; border-radius: var(--radius); padding: 1px 8px; font-size: var(--fs-xs); font-weight: 600; margin: 0 2px; user-select: none; white-space: nowrap; cursor: grab; }
.mailtok:active { cursor: grabbing; }
.mailtok__x { display: none; position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; line-height: 14px; text-align: center; border-radius: 50%; background: var(--c-line-strong); color: var(--c-black); font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); }
.mailtok:hover .mailtok__x { display: block; }
.mailtok__x:hover { background: var(--danger); color: #fff; }
.mailtok--missing { background: var(--danger); }

/* Echtes Bild im Editor (statt Pille), mit ×-Löschen + Grössen-Griff */
.mailimg { position: relative; display: inline-block; vertical-align: bottom; margin: 0 2px; cursor: grab; line-height: 0; }
.mailimg:active { cursor: grabbing; }
.mailimg img { display: inline-block; max-width: 100%; border-radius: 4px; user-select: none; }
.mailimg__x { display: none; position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: var(--c-line-strong); color: var(--c-black); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); z-index: 2; }
.mailimg:hover .mailimg__x { display: block; }
.mailimg__x:hover { background: var(--danger); color: #fff; }
.mailimg__h { display: none; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 3px; background: var(--color-primary); border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: nwse-resize; z-index: 2; }
.mailimg:hover .mailimg__h { display: block; }

/* Bilder-Palette: Thumbnails + Upload-Kachel */
.mailb__imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.mailb__imgs { padding-top: 10px; }   /* Platz für die Ecken-Buttons oben */
.mailimgtile { position: relative; width: 64px; height: 64px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; overflow: visible; cursor: grab; }
.mailimgtile img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }
/* Buttons sitzen in den oberen Ecken (halb über der Rundung), voll sichtbar, nicht auf dem Foto. */
.mailimgtile__x, .mailimgtile__cfg { display: none; position: absolute; top: -10px; width: 22px; height: 22px; line-height: 21px; text-align: center; border-radius: 50%; border: none; background: rgba(11,24,56,0.9); color: #fff; cursor: pointer; box-shadow: var(--shadow-sm); z-index: 3; }
.mailimgtile__x { right: -9px; font-size: 15px; font-weight: 700; }
.mailimgtile__cfg { left: -9px; font-size: 13px; }
.mailimgtile:hover .mailimgtile__x, .mailimgtile:hover .mailimgtile__cfg { display: block; }
.mailimgtile__cfg:hover { background: var(--color-primary); color: #fff; }
.mailimgtile__x:hover { background: var(--danger); color: #fff; }
.mailimgtile--up { flex-direction: column; gap: 2px; cursor: pointer; border-style: dashed; color: var(--c-muted); background: var(--c-surface-2); }
.mailimgtile--up:hover { border-color: var(--color-primary); color: var(--color-primary); }
.mailimgtile__plus { font-size: 18px; line-height: 1; }
.mailimgtile__uplbl { font-size: 8px; text-align: center; line-height: 1.1; padding: 0 3px; }
.mailna { color: var(--danger); font-style: italic; }
.mailb__palette { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-3); background: var(--c-surface-2); position: sticky; top: var(--sp-3); }
.mailb__paltitle { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: var(--sp-2); }
.mailb__pcat { margin-bottom: var(--sp-3); }
.mailb__pcatlbl { font-size: var(--fs-xs); font-weight: 700; color: var(--c-black); margin-bottom: 5px; }
.mailb__pitems { display: flex; flex-wrap: wrap; gap: 6px; }
.mailel { display: inline-flex; align-items: center; gap: 5px; background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 4px 8px 4px 10px; font-size: var(--fs-xs); cursor: grab; user-select: none; }
.mailel:hover { border-color: var(--color-primary); color: var(--color-primary); }
.mailel--off { opacity: 0.5; cursor: not-allowed; }
.mailel--off:hover { border-color: var(--c-line-strong); color: inherit; }
.mailel__soon { font-size: 9px; color: var(--c-faint); margin-left: 4px; text-transform: uppercase; }
.mailel__cfg { border: none; background: transparent; color: var(--c-muted); font-size: 12px; line-height: 1; padding: 2px; margin: -2px -2px -2px 0; cursor: pointer; border-radius: 4px; }
.mailel__cfg:hover { background: var(--c-fill); color: var(--color-primary); }

/* Element-Einstellungen-Popup (⚙) */
.mailcfg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.mailcfg[hidden] { display: none; }
.mailcfg__backdrop { position: absolute; inset: 0; background: rgba(11, 24, 56, 0.35); }
.mailcfg__box { position: relative; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-4); width: min(420px, 92vw); }
.mailcfg__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-black); margin-bottom: var(--sp-3); }
.mailcfg__row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mailcfg__lbl { font-size: var(--fs-sm); color: var(--c-muted); min-width: 60px; }
.mailcfg__sel, .mailcfg__num, .mailcfg__txt, .mailcfg__txtsm { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 5px 8px; font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
.mailcfg__num { width: 68px; }
.mailcfg__txt { flex: 1; min-width: 0; }
.mailcfg__txtsm { width: 70px; }
.mailcfg__hint { font-size: var(--fs-xs); margin: 0 0 var(--sp-3); }
.mailcfg__modes { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.mailcfg__radio { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
.mailcfg__rel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2); border-radius: var(--radius); margin-bottom: var(--sp-3); }
.mailcfg__relk { font-size: var(--fs-sm); color: var(--c-black); }
.mailcfg__warn { font-size: var(--fs-xs); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid var(--danger); border-radius: var(--radius); padding: 6px 9px; margin-bottom: var(--sp-3); }
.mailcfg__form--bad .mailcfg__rel { outline: 1px solid var(--danger); }
.mailcfg__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.mailcfg__sub { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); margin: var(--sp-2) 0 6px; }
.mailcfg__select { appearance: auto; font: inherit; font-size: var(--fs-sm); padding: 6px 10px;
  border-radius: var(--radius); border: 1px solid var(--c-line); background: var(--c-white);
  color: var(--c-black); cursor: pointer; }
.mailcfg__cks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: var(--sp-2); }
.mailcfg__ck { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
.mailcfg__grafikscroll { max-height: 42vh; overflow-y: auto; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-2); }
.mailcfg__sys { margin-bottom: var(--sp-3); }
.mailcfg__sys:last-child { margin-bottom: 0; }
.mailcfg__sysname { font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); margin-bottom: 4px; }
.mailcfg__mx { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.mailcfg__mxtitle { flex: 1; min-width: 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 4px 7px; font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
.mailb__prevbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.mailb__prevlbl { font-size: var(--fs-sm); color: var(--c-muted); }
.mailb__prevbody { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-4); background: #fff; color: #000; max-width: 640px; }
.mailb__prevbody a { color: #0866F5; }
.mailprev__subj { font-size: var(--fs-sm); color: #333; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 12px; }
.mailprev__k { color: #999; margin-right: 6px; }
/* Mail-Vorschau im Dark Mode dunkel (folgt der App-/Systemeinstellung). Der Mail-Inhalt erbt die Farbe;
   die inline dunkelblauen Überschriften der Mail werden aufgehellt (Inline-Style überschreiben). */
:root[data-theme="dark"] .mailb__prevbody { background: var(--c-surface-2); color: var(--c-black); border-color: var(--c-line-strong); }
:root[data-theme="dark"] .mailb__prevbody a { color: #6aa4ff; }
:root[data-theme="dark"] .mailprev__subj { color: var(--c-muted); border-bottom-color: var(--c-line-strong); }
:root[data-theme="dark"] .mailprev__k { color: var(--c-faint); }
:root[data-theme="dark"] .mailprev__body [style*="color:#0B1838"],
:root[data-theme="dark"] .mailprev__body [style*="color: #0B1838"] { color: #cdd8ea !important; }
:root[data-theme="dark"] .mailprev__body [style*="color:#0b1838"] { color: #cdd8ea !important; }
.set__mailbtn { margin: 0 0 var(--sp-3); }
/* Aufgebot-Mail im Lineup-UI: Empfänger + eingebetteter Baukasten */
.aufgebot__recip { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0; }
.aufgebot__stdrecip { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
.aufgebot__stdrecip b { font-weight: 600; }
.aufgebot__stdnote { flex: 1 1 100%; font-size: var(--fs-sm); }
/* Einstellungen: Standard-Empfänger + Verteiler */
.set__recip { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); max-width: 560px; }
.set__field { display: flex; flex-direction: column; gap: 5px; }
.set__flab { font-size: var(--fs-sm); font-weight: 600; color: var(--c-black); }
.set__field input { font: inherit; font-size: var(--fs-sm); padding: 8px 10px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-white); color: var(--c-black); }
.set__verteiler { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.set__ck { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-black); cursor: pointer; }
/* Popup „Verteileradressen anschauen" */
.verteiler { max-width: 720px; }
.verteiler__hint { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.verteiler__tablewrap { max-height: 60vh; overflow: auto; border: 1px solid var(--c-line); border-radius: var(--radius); }
.verteiler__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.verteiler__table th { position: sticky; top: 0; background: var(--c-surface-2); text-align: left; padding: 8px 12px; color: var(--c-muted); font-weight: 600; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.verteiler__table td { padding: 7px 12px; border-bottom: 1px solid var(--c-line); color: var(--c-black); }
.verteiler__table tr:last-child td { border-bottom: none; }
.verteiler__row--trainer { background: var(--color-primary-soft); }
.verteiler__name { font-weight: 600; white-space: nowrap; }
.verteiler__tag { font-size: var(--fs-micro); font-weight: 700; color: var(--color-primary); border: 1px solid #b6d3ff; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.verteiler__mail { word-break: break-all; }
.verteiler__mail--none { color: var(--c-faint); }
.verteiler__acts { margin-top: var(--sp-3); text-align: right; }
.aufgebot__recip .field { flex: 1; min-width: 220px; }
.aufgebot__to, .aufgebot__cc { width: 100%; border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 7px 10px; font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
.mailb--embed { margin: var(--sp-2) 0 0; }
.mailb--embed .mailb__head { margin-bottom: var(--sp-2); }
.mailb--embed .mailb__hint { font-size: var(--fs-xs); }
.aufgebot__send { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.aufgebot__wahint { margin: 6px var(--sp-3) 0; font-size: var(--fs-xs); }
.aufgebot__wahint[hidden] { display: none; }

/* Kanal-Wahl (E-Mail / WhatsApp) */
.aufgebot__channels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) 0; }
.aufgebot__chlbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); }
.aufgebot__ck { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); cursor: pointer; }
.aufgebot__ck input { accent-color: var(--color-primary); }
.aufgebot__recip[hidden] { display: none; }

/* Umschalter: welchen Text bearbeiten (E-Mail / WhatsApp) */
.aufgebot__edittabs { display: inline-flex; margin: var(--sp-3) var(--sp-3) 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; }
.aufgebot__et { border: none; background: var(--c-white); color: var(--c-muted); padding: 7px 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.aufgebot__et + .aufgebot__et { border-left: 1px solid var(--c-line-strong); }
.aufgebot__et.is-on { background: var(--color-primary); color: #fff; }
.aufgebot__builder { padding: 0 var(--sp-3); }
.aufgebot__builder[hidden] { display: none; }

/* Kanal-Regler im grossen Baukasten (Einstellungen) */
.mailb__chtog { display: inline-flex; margin-bottom: var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; }
.mailb__ct { border: none; background: var(--c-white); color: var(--c-muted); padding: 7px 16px; font: inherit; cursor: pointer; }
.mailb__ct + .mailb__ct { border-left: 1px solid var(--c-line-strong); }
.mailb__ct.is-on { background: var(--color-primary); color: #fff; }

/* WhatsApp-Vorschau (Sprechblase) */
.waprev { display: flex; justify-content: center; padding: var(--sp-3); }
.waprev__phone { width: 100%; max-width: 420px; }
.waprev__bubble { white-space: pre-wrap; word-break: break-word; background: #dcf8c6; color: #111; border-radius: 10px 10px 10px 2px; padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.5; box-shadow: var(--shadow-sm); }
.waprev__actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: 8px; flex-wrap: wrap; }
.waprev__meta { font-size: var(--fs-micro); color: var(--c-muted); }
@media (prefers-color-scheme: dark) { .waprev__bubble { background: #075e54; color: #e9ffe4; } }
:root[data-theme="dark"] .waprev__bubble { background: #075e54; color: #e9ffe4; }
:root[data-theme="light"] .waprev__bubble { background: #dcf8c6; color: #111; }

/* Einstellungen → Bilder (Team-Bilder für die Mail) */
.assets__grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.assets__item { position: relative; width: 150px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-2); background: var(--c-surface-2); }
.assets__thumb { height: 90px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius); overflow: hidden; }
.assets__thumb img { max-width: 100%; max-height: 90px; object-fit: contain; }
.assets__meta { margin-top: 6px; }
.assets__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assets__token { font-size: var(--fs-xs); color: var(--c-muted); }
.assets__del { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; border: none; background: var(--c-line-strong); color: var(--c-black); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); }
.assets__del:hover { background: var(--danger); color: #fff; }
.assets__upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.assets__name { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 6px 9px; font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
@media (max-width: 900px) { .mailb__grid { grid-template-columns: 1fr; } .mailb__palette { position: static; } }

/* ===== Aufstellungs-Auswahl-Flyover (Charts) ===== */
body.cos-modal-lock { overflow: hidden; }
.aufsel {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 24px;
  background: var(--c-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.aufsel__box {
  display: flex; flex-direction: column;
  width: min(760px, calc(100vw - 40px)); max-height: min(840px, calc(100dvh - 40px));
  overflow: hidden; background: var(--c-white); border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
}
.aufsel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--c-line); }
.aufsel__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-black); }
.aufsel__sub { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }
.aufsel__x { border: none; background: none; font-size: 24px; line-height: 1; color: var(--c-muted); cursor: pointer; padding: 0 2px; }
.aufsel__x:hover { color: var(--c-black); }
.aufsel__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--c-line); }
.aufsel__sys { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.aufsel__sys-sel { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 6px 9px; font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); font-weight: 600; }
.aufsel__sys-one { font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); }
.aufsel__quick { display: inline-flex; gap: 6px; }
.aufsel__body { overflow-y: auto; padding: 12px 20px 18px; }
.aufsel__form { border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.aufsel__form-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; cursor: pointer; list-style: none; background: var(--c-surface-2); }
.aufsel__form-h::-webkit-details-marker { display: none; }
.aufsel__form-nm { font-weight: 700; font-size: var(--fs-base); color: var(--c-black); }
.aufsel__form-cnt, .aufsel__mann-cnt { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.aufsel__mann { padding: 10px 13px 4px; }
.aufsel__mann-h { display: flex; align-items: baseline; gap: 8px; font-weight: 650; font-size: var(--fs-sm); color: var(--c-black); margin-bottom: 8px; }
.aufsel__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.aufsel__opt { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-white); cursor: pointer; }
.aufsel__opt:hover { border-color: var(--c-fill); }
.aufsel__opt[data-selected="true"] { border-color: var(--c-fill); background: var(--c-fill-soft); box-shadow: inset 0 0 0 1px var(--c-fill); }
.aufsel__opt-bar { display: flex; align-items: center; justify-content: space-between; }
.aufsel__opt-t { font-weight: 700; font-size: var(--fs-sm); color: var(--c-black); }
.aufsel__opt-cb { width: 16px; height: 16px; accent-color: var(--c-fill); cursor: pointer; }
.aufsel__opt-field { position: relative; width: 100%; aspect-ratio: 0.74; border: 1px solid var(--pitch-border, #60a550); border-radius: 7px; overflow: hidden; }
.aufsel__dot { position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12,35,56,.35); }
.aufsel__empty { padding: 20px 4px; }
.aufsel__foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--c-line); background: var(--c-white); }
.aufsel__hint { font-size: var(--fs-sm); color: var(--c-muted); }
.aufsel__foot-acts { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 720px) { .aufsel { padding: 0; } .aufsel__box { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } .aufsel__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Generisches zentriertes Blur-Modal (gleiches Muster wie .aufsel, wiederverwendbar) ===== */
.cmodal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  background: var(--c-overlay); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cmodal__box { display: flex; flex-direction: column; width: min(560px, calc(100vw - 40px));
  max-height: min(840px, calc(100dvh - 40px)); overflow: hidden; background: var(--c-white);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); }
.cmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--c-line); }
.cmodal__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-black); }
.cmodal__sub { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }
.cmodal__x { border: none; background: none; font-size: 24px; line-height: 1; color: var(--c-muted); cursor: pointer; padding: 0 2px; }
.cmodal__x:hover { color: var(--c-black); }
.cmodal__body { overflow-y: auto; padding: 14px 20px 16px; }
.cmodal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--c-line); background: var(--c-white); }
@media (max-width: 720px) { .cmodal { padding: 0; } .cmodal__box { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } }

/* --- Aufgebot-Erstell-Dialog (Titel + Typ + Spielsystem) --- */
.lcm__fields { display: flex; flex-direction: column; gap: 12px; }
.lcm__types { display: flex; gap: 8px; flex-wrap: wrap; }
.lcm__type { position: relative; flex: 1 1 0; min-width: 120px; }
.lcm__type input { position: absolute; opacity: 0; pointer-events: none; }
.lcm__type span { display: flex; align-items: baseline; gap: 6px; padding: 9px 12px; border: 1px solid var(--c-line-strong);
  border-radius: var(--radius); background: var(--c-white); cursor: pointer; font-size: var(--fs-sm); color: var(--c-muted); }
.lcm__type b { color: var(--c-black); }
.lcm__type input:checked + span { border-color: var(--c-fill); background: var(--c-fill-soft); box-shadow: inset 0 0 0 1px var(--c-fill); }
.lcm__type input:focus-visible + span { outline: 2px solid var(--c-fill); outline-offset: 1px; }
.lcm__sys { width: 100%; border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 9px 10px;
  font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); font-weight: 600; }
.lcm__addhint { font-size: var(--fs-sm); color: var(--c-muted); background: var(--c-surface-2);
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: 8px 10px; }

/* --- Tag-Wähler fürs neue Aufgebot: Anwesenheitsliste read-only, Tageszeile anklickbar --- */
.lnpick .cmodal__box { width: min(1240px, calc(100vw - 32px)); }
/* Tabelle bündig zum Box-Rand: KEIN Padding, sonst scrollen Zeilen im Padding-Streifen ÜBER den sticky Kopf. */
.lnpick__scroll { overflow: auto; max-height: calc(100dvh - 220px); padding: 0; }
.lnpick__scroll .amx__table { min-width: 100%; }
/* Bedien-Elemente in den Zeilen sind hier inert (kein Häkchen setzen, kein Navigieren) */
.lnpick__scroll .amx__row a, .lnpick__scroll .amx__row select, .lnpick__scroll .amx__row button,
.lnpick__scroll .amx__row input { pointer-events: none; }
.lnpick__scroll .amx__addday, .lnpick__scroll .amx__delday, .lnpick__scroll .amx__filter-btn,
.lnpick__scroll .amx__warnbubble, .lnpick__scroll .amx__dynbubble { display: none; }
.lnpick__scroll .amx__free { pointer-events: none; }   /* Ferien-Zelle darf den Ferien-Editor NICHT öffnen */
.lnpick__scroll .amx__row:not(.amx__row--free) { cursor: pointer; }
.lnpick__scroll .amx__row:not(.amx__row--free):hover td { background: var(--c-fill-soft); }

/* ===== Volle Startaufstellungs-Kachel (Charts › Öffnen) ===== */
.lv--sau { max-width: 1280px; }
.charts__var--sau { border: none; background: none; box-shadow: none; border-radius: 0; }
/* Home: die Startaufstellung ist EINE normale Kachel (nicht über beide Spalten). Die Erfüllungsgrade
   bleiben RECHTS neben den Aufstellungen (2-spaltig), damit alle Home-Kacheln gleich hoch/breit sind. */
.home__tile--sau { padding: 0; border: none; background: none; box-shadow: none; }
/* Sau-Kachel = gleich grosses Quadrat. Karte füllt die Höhe; Inhalt scrollt bei Bedarf. Die Aufstellungs-
   Felder sind kompakter, wenn Kennzahlen aktiv sind, und GRÖSSER ohne Kennzahlen (Anzeige hängt an den
   Kennzahlen). */
.home__tile--sau { overflow: hidden; }
.home__tile--sau .sau-card { height: 100%; display: flex; flex-direction: column; }
.home__tile--sau .sau-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Aufstellungs-Felder in normaler, LESBARER Grösse (wie sonst); bei mehreren Aufstellungen horizontal
   scrollen. Die Kachel bleibt quadratisch — die Erfüllungsgrade darunter erreicht man per vertikalem Scrollen. */
.home__tile--sau .sau-form { flex-basis: clamp(285px, 42%, 320px); }
.home__tile--sau .sau-card[data-has-metrics="false"] .sau-form { flex-basis: clamp(310px, 46%, 380px); }
.home__tile--sau .sau-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home__tile--sau .sau-lefthead { margin-bottom: 10px; }
.home__chart-head, .home__chart-typerow { flex: 0 0 auto; }
.home__empty { align-items: center; justify-content: center; }
.sau-card { border: 1px solid var(--c-line-strong); border-radius: var(--radius-xl); background: var(--c-white); box-shadow: var(--shadow-card); overflow: hidden; }
.sau-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--c-line); }
.sau-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sau-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--c-fill-soft); color: var(--c-fill); flex: 0 0 auto; }
.sau-title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-black); }
.sau-sub { font-size: var(--fs-sm); color: var(--c-muted); }
.sau-head-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sau-badge { border: 1px solid var(--c-line-strong); border-radius: var(--radius-full); padding: 6px 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-fill); background: var(--c-fill-soft); cursor: pointer; }
.sau-badge:hover { border-color: var(--c-fill); }
/* Aufstellungen oben, Erfüllungsgrade DARUNTER (nicht daneben) — passt in quadratische Kacheln. */
.sau-content { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; min-height: 0; }
.sau-card[data-has-metrics="false"] .sau-metrics { display: none; }
.sau-left { min-width: 0; }
.sau-lefthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sau-sech { font-size: var(--fs-md); font-weight: 700; color: var(--c-black); }
.sau-sech-sub { font-size: var(--fs-sm); }
.sau-selbtn { white-space: nowrap; }
.sau-selbtn-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: var(--radius-full); background: var(--c-fill-soft); color: var(--c-fill); font-size: var(--fs-sm); font-weight: 700; }
.sau-carowrap { position: relative; }
.sau-caronav { position: absolute; top: 44%; transform: translateY(-50%); z-index: 4; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); cursor: pointer; box-shadow: var(--shadow-popover); }
.sau-caronav--prev { left: -8px; }
.sau-caronav--next { right: -8px; }
.sau-caronav:hover { border-color: var(--c-fill); color: var(--c-fill); }
.sau-carousel { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; }
.sau-form { flex: 0 0 clamp(228px, 30%, 288px); scroll-snap-align: start; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-2); overflow: hidden; }
/* Formations-Rahmen: fasst die Aufstellungen EINER Formation zusammen (nur bei >1 Formation). */
.sau-fgroup { flex: 0 0 auto; position: relative; border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); padding: 16px 12px 12px; }
.sau-fgroup-lbl { position: absolute; top: -10px; left: 14px; padding: 0 8px; background: var(--c-white); font-size: var(--fs-sm); font-weight: 700; color: var(--c-black); }
.sau-fgroup-cards { display: flex; align-items: flex-start; gap: 14px; }
.sau-form-h { display: flex; align-items: center; gap: 8px; padding: 9px 11px; }
.sau-form-seq { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--c-fill-soft); color: var(--c-fill); font-weight: 700; font-size: var(--fs-sm); }
.sau-form-ts { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--c-line-strong); color: var(--c-black); font-weight: 700; font-size: var(--fs-sm); }
.sau-form-fmt { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.sau-pitch { position: relative; aspect-ratio: 0.74; margin: 0 10px; border: 1px solid var(--pitch-border, #60a550); border-radius: 8px; overflow: hidden; }
.sau-player { position: absolute; transform: translate(-50%, -50%); max-width: 84%; padding: 3px 8px; border: 1px solid rgba(20,35,60,.16); border-radius: var(--radius-full); background: #fff; color: #111827; font-size: var(--fs-sm); font-weight: 600; line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(12,35,56,.16); }
.sau-bench { display: grid; gap: 6px; padding: 10px 11px; margin-top: 8px; border-top: 1px solid var(--c-line); background: var(--c-white); }
.sau-bench-lbl { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.sau-bench-list { display: flex; flex-wrap: wrap; gap: 5px; }
.sau-bench-p { padding: 2px 8px; border-radius: var(--radius-full); background: var(--c-surface-2); border: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-black); }
.sau-bench-more { padding: 2px 8px; font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.sau-metrics { min-width: 0; border-top: 1px solid var(--c-line); padding-top: 14px; }
.sau-metrics .erfg__bar { margin: 8px 0 6px; }
/* Kennzahlen-Gruppen untereinander (Aufgebot oben, Positionszuteilung darunter) — KEIN Trenn-Strich. */
.sau-metrics .erfg__cols { flex-direction: column; gap: 16px; }
.sau-metrics .erfg__col--pos:not(:first-child) { padding-left: 0; border-left: none; }
/* Je Algorithmus horizontal scrollbar (swipe nach links/rechts). */
.sau-metrics .erfg__row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.sau-metrics .erfg__cardwrap { flex: 0 0 auto; scroll-snap-align: start; }
.sau-empty { padding: 22px 18px; }
.sau-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--c-line); }
.sau-foot-upd { font-size: var(--fs-sm); }


/* ===== Trainings-Modul (Etappe 1): Bibliothek + Trainingseinheiten-Editor ===== */
.lv--trainings { max-width: 980px; }
.trn-empty { padding: var(--sp-5) 0; }
.trn-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.trn-card { position: relative; display: flex; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background: var(--c-white); box-shadow: var(--shadow-card); overflow: hidden; }
.trn-card__main { display: flex; gap: 12px; padding: 12px; flex: 1 1 auto; min-width: 0;
  color: inherit; text-decoration: none; cursor: pointer; }
.trn-card__main:hover { background: var(--c-surface-2); }
.trn-card__thumb { flex: 0 0 72px; height: 72px; display: grid; place-items: center;
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface-2);
  color: var(--c-muted); overflow: hidden; }
.trn-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trn-card__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trn-card__name { font-weight: 700; color: var(--c-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-card__meta { font-size: var(--fs-sm); }
.trn-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
/* Löschknopf eigenständig sichtbar machen (.lv__del ist ausserhalb von .lv__item display:none;
   hier: dezent, deutlicher beim Karten-Hover). */
.trn-card__del { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--radius-sm);
  background: none; color: var(--c-faint); cursor: pointer; opacity: 0.6; }
.trn-card:hover .trn-card__del { opacity: 1; color: var(--c-muted); }
.trn-card__del:hover { background: var(--c-surface-2); color: var(--danger, #c0341d); }
/* Tag-Chips: drei Klassen farblich unterschieden (Zyklus blau, Tages gruen, Struktur violett) */
.trn-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-micro); font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.trn-chip--zyklus { background: var(--c-fill-soft); color: var(--c-fill); border-color: var(--c-fill); }
.trn-chip--tag { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.trn-chip--struktur { background: rgba(139, 92, 246, 0.12); color: #7c5cd6; border-color: #7c5cd6; }
.trn-chip--none { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-line); }
.trn-chip__x { border: none; background: none; color: inherit; cursor: pointer; font-size: 13px;
  line-height: 1; padding: 0 0 0 2px; }
:root[data-theme="dark"] .trn-chip--struktur { background: rgba(139, 92, 246, 0.18); color: #b39df1; border-color: #8b6fe0; }

/* --- Einheiten-Editor --- */
.lv--trnunit { max-width: 1100px; }
.trn-saved { margin-left: 10px; font-size: var(--fs-sm); color: var(--success); font-weight: 600; text-transform: none; letter-spacing: 0; }
.trn-msg { margin: 0 0 var(--sp-3); padding: 8px 12px; border: 1px solid var(--warning, #b45309);
  border-radius: var(--radius); background: var(--c-surface-2); color: var(--c-black); font-size: var(--fs-sm); }
.trn-namefield { max-width: 520px; margin-bottom: var(--sp-4); }
.trn-seclbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-muted); font-weight: 700; margin: var(--sp-4) 0 6px; }
.trn-unitrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-4); align-items: start; }
.trn-imgbox { border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg); min-height: 180px;
  display: grid; place-items: center; overflow: hidden; background: var(--c-surface-2); }
.trn-img { display: block; width: 100%; height: auto; }
.trn-img-empty { text-align: center; font-size: var(--fs-sm); padding: var(--sp-4); }
.trn-imgpick { display: inline-flex; margin-top: 8px; cursor: pointer; }
.trn-imgname { display: block; font-size: var(--fs-micro); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-imgremove { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-sm);
  color: var(--c-muted); text-transform: none; letter-spacing: 0; cursor: pointer; }
.trn-imghint { font-size: var(--fs-micro); margin-top: 8px; }
/* Texttabelle */
.trn-tbltools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.trn-tbltools__sep { width: 1px; height: 18px; background: var(--c-line-strong); margin: 0 4px; }
.trn-tbldim { font-size: var(--fs-sm); margin-left: auto; font-variant-numeric: tabular-nums; }
.trn-tblwrap { overflow-x: auto; }
.trn-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.trn-tbl td { border: 1px solid var(--c-line-strong); vertical-align: top; padding: 0; background: var(--c-white); }
.trn-tbl td.is-sel { outline: 2px solid var(--c-fill); outline-offset: -2px; background: var(--c-fill-soft); }
.trn-cell { min-height: 44px; padding: 7px 9px; font-size: var(--fs-sm); line-height: 1.45;
  color: var(--c-black); outline: none; white-space: pre-wrap; word-break: break-word; }
.trn-tblhint { font-size: var(--fs-micro); margin-top: 6px; }
/* Tags im Editor */
.trn-taghint { font-size: var(--fs-sm); margin: 0 0 8px; }
.trn-tagrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.trn-tagbox { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-2); padding: 10px 12px; }
.trn-tagbox__lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-muted); font-weight: 700; margin-bottom: 6px; }
.trn-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; min-height: 22px; }
.trn-taginput { width: 100%; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: 6px 9px; font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
/* Spielerzuteilung */
.trn-assign { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-4); }
.trn-assign__n { max-width: 170px; }
.trn-assign__mode { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.trn-radio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--c-black); text-transform: none; letter-spacing: 0; cursor: pointer; }
.trn-rolesel { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 6px 9px;
  font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
.trn-assign__hint { flex-basis: 100%; font-size: var(--fs-micro); }
.trn-actions { display: flex; gap: 8px; margin-top: var(--sp-5); }
@media (max-width: 860px) {
  .trn-unitrow { grid-template-columns: minmax(0, 1fr); }
  .trn-tagrow { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Trainings-Modul (Etappe 2): Uebungs-Grafik (Zeichnen + Anzeige) ===== */
/* Feld: Hochformat 3:4, gruen wie ueberall; Feldlinien optional per Haken. */
.trnd-field { position: relative; aspect-ratio: 0.75; background: #7cb767;
  border: 1px solid var(--pitch-border, #60a550); border-radius: 8px; overflow: hidden; }
.trnd-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.trnd { width: min(520px, 100%); cursor: default; }
.trnd-canvaswrap { display: flex; }
.trnd-mini.trnd-field { width: 100%; aspect-ratio: 0.75; border-radius: 6px; }
/* Objekte: absolut in Prozent, zentriert; SVG-Symbol ~34px im Editor, skaliert in Minis */
.trnd-obj { position: absolute; transform: translate(-50%, -50%); width: 7.5%; aspect-ratio: 1;
  min-width: 16px; max-width: 44px; cursor: grab; z-index: 2; }
.trnd-obj svg { width: 100%; height: 100%; display: block; overflow: visible; }
.trnd-obj.is-sel { outline: 2px solid var(--c-fill); outline-offset: 1px; border-radius: 6px; }
.trnd-obj.is-pick { outline: 2px dashed #ffffff; outline-offset: 1px; border-radius: 6px; }
.trnd-obj__n { position: absolute; right: -6px; top: -6px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--radius-full); background: #fff; color: #111827; font-size: 9px; font-weight: 800;
  display: grid; place-items: center; border: 1px solid rgba(20,35,60,.3); }
.trnd-obj--textlbl { width: auto; max-width: 60%; aspect-ratio: auto; min-width: 0; padding: 2px 7px;
  background: rgba(255,255,255,.92); border-radius: var(--radius-full); border: 1px solid rgba(20,35,60,.2);
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trnd-mini .trnd-obj { min-width: 8px; }
.trnd-mini .trnd-obj__n { display: none; }
.trnd-mini .trnd-obj--textlbl { font-size: 6px; padding: 0 3px; }
/* SVG-Teile: Wege/Linien/Flaechen anklickbar (nur im Editor relevant) */
.trnd-path { pointer-events: stroke; cursor: pointer; }
.trnd-path.is-sel { filter: drop-shadow(0 0 1.5px #fff); }
.trnd-coneline { pointer-events: stroke; cursor: pointer; }
.trnd-coneline.is-sel { stroke: var(--c-fill); }
.trnd-fill { pointer-events: fill; cursor: pointer; }
.trnd-fill.is-sel { stroke: var(--c-fill); stroke-width: 1; stroke-dasharray: 2 1.4; }
.trnd-handle { position: absolute; transform: translate(-50%, -50%); width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 2px solid var(--c-fill); cursor: grab; z-index: 3; }
/* Werkzeuge + Palette */
.trnd-editor { margin-top: var(--sp-4); }
.trnd-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.trnd-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.trnd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-full); background: var(--c-white);
  color: var(--c-black); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.trnd-chip:hover { border-color: var(--c-fill); color: var(--c-fill); }
.trnd-chip__ic { width: 22px; height: 22px; display: inline-grid; place-items: center;
  background: #7cb767; border-radius: 50%; overflow: hidden; }
.trnd-chip__ic svg { width: 18px; height: 18px; }
.trnd-toolrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.trnd-toolrow .is-on { border-color: var(--c-fill); color: var(--c-fill); background: var(--c-fill-soft); }
.trnd-colors { display: inline-flex; gap: 5px; }
.trnd-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-line-strong);
  cursor: pointer; padding: 0; }
.trnd-swatch.is-on { outline: 2px solid var(--c-fill); outline-offset: 1px; }
.trnd-lines { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--c-black); text-transform: none; letter-spacing: 0; cursor: pointer; }
.trn-imgmode { display: flex; gap: 12px; margin-bottom: 8px; }
.trn-imgbox--draw { border-style: solid; padding: 6px; }
@media (max-width: 860px) { .trnd { width: 100%; } }
/* [hidden] muss auch gegen .btn { display:... } gewinnen (UA-Regel verliert gegen Autoren-CSS) */
.trnd-toolrow [hidden], .trnd-editor[hidden], [data-trn-imgpane][hidden] { display: none !important; }
/* E2-Review-Fixes: Touch-Drag, Thumb-Letterbox, Swatch-Sichtbarkeit im Dark Mode */
.trnd, .trnd-obj, .trnd-handle { touch-action: none; }   /* Pointer-Drag statt Scrollen am Handy */
.trn-card__thumb .trnd-mini { width: auto; height: 100%; }   /* Feld komplett zeigen (Letterbox statt Beschnitt) */
.trnd-swatch { box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45); }   /* dunkle/weisse Farbe auf jedem Grund erkennbar */

/* ===== Trainings-Modul (Etappe 3): Zyklusregel + Tagesregel ===== */
.tz-intro { font-size: var(--fs-sm); margin: 0 0 var(--sp-4); max-width: 720px; }
.tz-card { margin-bottom: var(--sp-4); }
.tz-h { font-size: var(--fs-base); font-weight: 600; margin: 0; }
.tz-hint { font-size: var(--fs-sm); margin: 0 0 10px; max-width: 720px; }
.tz-units { margin-bottom: 8px; }
.tz-units__none { font-size: var(--fs-sm); }
.tz-unitadd { max-width: 320px; }
.tz-applyrow { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.tz-startlbl { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); font-weight: 700; }
.tz-startsel { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 6px 9px;
  font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
.tz-namebar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: 10px; }
.tz-nameinput { max-width: 260px; }
.tz-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
/* Wochenliste: kompakte, anklickbare Zeilen */
.tz-weeks { display: flex; flex-direction: column; gap: 3px; max-height: 520px; overflow-y: auto; }
.tz-week { display: grid; grid-template-columns: 52px 92px minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-3); padding: 4px 8px; border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface-2); cursor: pointer; user-select: none; -webkit-user-select: none; }
.tz-week:hover { border-color: var(--c-line-strong); }
.tz-week.is-sel { border-color: var(--c-fill); box-shadow: inset 0 0 0 1px var(--c-fill); }
.tz-week--past { opacity: 0.55; }
.tz-week--current { background: var(--c-fill-soft); }
.tz-week__kw { font-size: var(--fs-micro); font-weight: 700; color: var(--c-muted); }
.tz-week__range { font-size: var(--fs-sm); color: var(--c-black); white-space: nowrap; }
.tz-week__days { display: flex; gap: 4px; min-width: 0; }
.tz-week__day { font-size: var(--fs-micro); color: var(--c-muted); border: 1px solid var(--c-line);
  border-radius: 999px; padding: 0 6px; }
.tz-week__lbl { justify-self: end; min-width: 0; max-width: 100%; }
.tz-week__none { font-size: var(--fs-sm); }
/* Lange Titel abschneiden statt Datum/Zeile zu sprengen. Nur die reinen Text-Chips (Woche/Legende):
   inline-block statt inline-flex, sonst rendert text-overflow keine Ellipse. */
.tz-week .trn-chip, .tz-legend .trn-chip { display: inline-block; max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; vertical-align: middle; }
.tz-week__range { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Wochen-Farbklassen: eine stabile Farbe je Zyklus-Name (Reihenfolge des Auftretens) */
.trnw-c0 { background: var(--c-fill-soft); color: var(--c-fill); border-color: var(--c-fill); }
.trnw-c1 { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.trnw-c2 { background: rgba(232, 85, 58, 0.12); color: #cf4630; border-color: #cf4630; }
.trnw-c3 { background: rgba(139, 92, 246, 0.12); color: #7c5cd6; border-color: #7c5cd6; }
.trnw-c4 { background: rgba(234, 168, 60, 0.16); color: #a1701e; border-color: #c78f35; }
.trnw-c5 { background: rgba(14, 165, 190, 0.12); color: #0e7f94; border-color: #0e93ab; }
:root[data-theme="dark"] .trnw-c2 { background: rgba(232, 85, 58, 0.2); color: #f0937e; border-color: #d9694c; }
:root[data-theme="dark"] .trnw-c3 { background: rgba(139, 92, 246, 0.18); color: #b39df1; border-color: #8b6fe0; }
:root[data-theme="dark"] .trnw-c4 { background: rgba(234, 168, 60, 0.2); color: #ecc078; border-color: #cf9a3f; }
:root[data-theme="dark"] .trnw-c5 { background: rgba(14, 165, 190, 0.2); color: #7cd6e6; border-color: #22a7bf; }
/* Tagesregel */
.tt-day { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.tt-day:last-of-type { border-bottom: none; }
.tt-day__meta { display: flex; flex-direction: column; gap: 2px; }
.tt-day__name { font-weight: 600; color: var(--c-black); }
.tt-day__sub { font-size: var(--fs-sm); }
.tt-day__tags .trn-taginput { max-width: 260px; }
@media (max-width: 700px) {
  /* Datum behält seine natürliche Breite, der Titel bekommt den Rest (mit Ellipse) */
  .tz-week { grid-template-columns: 44px auto minmax(0, 1fr); }
  .tz-week__days { display: none; }
  .tz-week .trn-chip { max-width: 100%; }
  .tt-day { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

/* ===== Trainings-Modul (Etappe 4): Trainingsplansystem (A4-Baukasten) ===== */
.lv--tplansys { max-width: 980px; }
.tps-actions { align-items: center; }
.tps-fill { font-size: var(--fs-sm); margin-left: auto; }
.tps-palette { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tps-pcat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.tps-pcatlbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-muted); font-weight: 700; min-width: 88px; }
.tps-pitems { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.tps-fmt { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-black); }
/* A4-Blatt hochkant: waechst bei viel Inhalt ueber eine Seite hinaus (min-height haelt die Ratio) */
.tps-paper { position: relative; width: min(100%, 720px); margin: 0 auto var(--sp-4);
  background: #fff; color: #111827; border: 1px solid var(--c-line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--sp-5); display: flex; flex-direction: column;
  gap: var(--sp-3); }
.tps-paper::before { content: ""; display: block; position: absolute; inset: 0; pointer-events: none; }
:root[data-theme="dark"] .tps-paper { background: var(--c-surface-2); color: var(--c-black); border-color: var(--c-line-strong); }
.tps-header { white-space: pre-wrap; word-break: break-word; min-height: 120px; }
.tps-slotlist { display: flex; flex-direction: column; gap: var(--sp-3); }
.tps-slot { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface-2);
  padding: 8px 10px; cursor: grab; }
.tps-slot.dragging { opacity: 0.45; }
.tps-slot.tps-drop-tgt { border-color: var(--c-fill); box-shadow: inset 0 0 0 1px var(--c-fill); }
.tps-slot__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tps-slot__grip { color: var(--c-faint); cursor: grab; user-select: none; }
.tps-slot__num { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.tps-slot__title { flex: 1; min-width: 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: 5px 8px; font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); }
.tps-slot__del { font-size: 15px; padding: 2px 4px; color: var(--c-muted); }
.tps-slot__del:hover { color: var(--danger, #c0341d); }
.tps-slot__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-3); }
.tps-slot__sym { display: flex; gap: 6px; align-items: stretch; min-height: 56px; }
.tps-slot__img { flex: 1; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-sm);
  background: var(--c-fill-soft); }
.tps-slot__tbl { flex: 2; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.tps-slot__tbl i { display: block; height: 6px; border-radius: 3px; background: var(--c-line); }
.tps-slot__tags { display: flex; flex-direction: column; gap: 4px; }
.tps-slot__taglbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.tps-slot__tags .trn-taginput { max-width: 240px; }
.tps-paperbar { display: flex; justify-content: center; }
.tps-footer { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 8px 10px;
  font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); resize: vertical;
  font-family: inherit; }
.tps-noslots { font-size: var(--fs-sm); padding: 8px 0; }
/* Gestrichelte Seitengrenzen (nur Anzeige) */
.tps-breaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tps-break { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--c-line-strong); }
.tps-break__lbl { position: absolute; right: 8px; top: 2px; font-size: var(--fs-micro); color: var(--c-muted);
  background: inherit; }
/* Aufgeloeste Vorschau-Werte */
.tps-preview { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-sm); color: var(--c-black); }
.tps-val { background: var(--c-fill-soft); color: var(--c-fill); border-radius: var(--radius-sm);
  padding: 0 4px; font-weight: 600; }
.tps-val--na { color: var(--c-muted); background: var(--c-surface-2); font-weight: 400; }
@media (max-width: 700px) {
  .tps-slot__body { grid-template-columns: minmax(0, 1fr); }
  .tps-fill { flex-basis: 100%; margin-left: 0; }
}

/* ===== Trainings-Modul (Etappe 5): Trainingsplan-Ansicht + Plaene-Liste ===== */
.tpv-warn { border: 1px solid var(--warning, #b45309); background: rgba(234, 168, 60, 0.12);
  color: var(--c-black); border-radius: var(--radius); padding: 8px 12px; margin-bottom: var(--sp-3);
  font-size: var(--fs-sm); max-width: 720px; margin-left: auto; margin-right: auto; }
.tpv-paper { gap: var(--sp-4); }
.tpv-header { border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-3); }
.tpv-slot { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 8px 10px; }
.tpv-slot__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tpv-slot__num { font-weight: 700; color: var(--c-muted); font-size: var(--fs-sm); }
.tpv-slot__title { font-weight: 600; font-size: var(--fs-sm); }
.tpv-chip { font-size: 10px; }
.tpv-swap { margin-left: auto; max-width: 220px; font-size: var(--fs-micro); padding: 3px 6px; }
.tpv-slot__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-3); }
.tpv-slot__img img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.tpv-slot__img .trnd-mini { display: block; width: 100%; }
.tpv-noimg { display: block; min-height: 60px; height: 100%; border: 1px dashed var(--c-line);
  border-radius: var(--radius-sm); }
.tpv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tpv-table td { border: 1px solid var(--c-line); padding: 4px 6px; vertical-align: top;
  white-space: pre-wrap; word-break: break-word; }
.tpv-slot__players { margin-top: 6px; font-size: var(--fs-sm); }
.tpv-plabel { font-weight: 600; }
.tpv-note { margin-top: 4px; font-size: var(--fs-sm); color: var(--warning, #b45309); }
.tpv-footer { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); white-space: pre-wrap;
  font-size: var(--fs-sm); }
/* Plaene-Liste in der Bibliothek */
.trn-plansh { margin-top: var(--sp-6); }
.trn-plans { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.trn-plan { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface-2);
  text-decoration: none; color: var(--c-black); }
.trn-plan:hover { border-color: var(--c-line-strong); }
.trn-plan__date { font-weight: 600; font-size: var(--fs-sm); }
.trn-plan__meta { font-size: var(--fs-sm); margin-left: auto; }
@media (max-width: 700px) {
  .tpv-slot__body { grid-template-columns: minmax(0, 1fr); }
  .tpv-swap { margin-left: 0; max-width: 100%; }
}

/* ===== Trainings-Modul (Etappe 6): KI-Import (Upload + Review) ===== */
.trn-impform { display: inline-flex; align-items: center; gap: 8px; }
.trn-impbtn { position: relative; }
.trn-impspin { display: none; width: 14px; height: 14px; border: 2px solid var(--c-line-strong);
  border-top-color: var(--c-fill); border-radius: 50%; animation: magent-spin 0.8s linear infinite; }
.trn-impstatus { display: none; font-size: var(--fs-sm); color: var(--c-muted); }
.trn-impform.htmx-request .trn-impspin { display: inline-block; }
.trn-impform.htmx-request .trn-impstatus { display: inline; }
.trn-impform.htmx-request .trn-impbtn { opacity: 0.5; pointer-events: none; }
.lv--timport { max-width: 1050px; }
.timp-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.timp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-4); }
.timp-img img { display: block; width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--c-line); }
/* Zuschnitt-Rahmen: zeigt einen Ausschnitt der ganzen Seite; ziehen verschiebt, Zoom skaliert.
   Höhe folgt dem aspect-ratio; die Deckelung hoher Rahmen geschieht per inline max-width (aus
   frame_ar berechnet), damit das Seitenverhältnis erhalten bleibt (kein Verzerren). */
.timp-crop { width: 100%; border: 1px solid var(--c-line-strong);
  border-radius: var(--radius); background-repeat: no-repeat; background-color: var(--c-surface-2);
  cursor: grab; touch-action: none; overflow: hidden; }
.timp-crop.is-drag { cursor: grabbing; }
.timp-cropbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.timp-crophint { font-size: var(--fs-micro); }
.timp-noimg { border: 1px dashed var(--c-line-strong); border-radius: var(--radius);
  padding: 14px; font-size: var(--fs-sm); min-height: 70px; display: flex; align-items: center; }
.timp-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.timp-lbl { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); font-weight: 700; }
.timp-txt { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 6px 9px;
  font-size: var(--fs-sm); background: var(--c-white); color: var(--c-black); resize: vertical;
  font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 400; }
.timp-lbl .trn-taginput { text-transform: none; letter-spacing: 0; font-weight: 400; }
.timp-tagrow { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
.timp-tagbox { display: flex; flex-direction: column; gap: 4px; }
.timp-taglbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-muted); font-weight: 700; }
.timp-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 340px; }
.timp-none { font-size: var(--fs-sm); }
.timp-spieler { max-width: 190px; }
/* Abwaehlbare Checkbox-Chips ohne JS (.lcm__type-Rezept): abgewaehlt = ausgegraut+durchgestrichen */
.timp-chip { cursor: pointer; }
.timp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.timp-chip input:not(:checked) + .trn-chip { opacity: 0.45; text-decoration: line-through;
  background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-line); }
.timp-chip input:focus-visible + .trn-chip { outline: 2px solid var(--c-fill); outline-offset: 1px; }
@media (max-width: 780px) { .timp-grid { grid-template-columns: minmax(0, 1fr); } }
/* E6-Review-Fixes: Datei-Input per Tastatur erreichbar (visuell versteckt statt hidden) */
.trn-impfile { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.trn-impbtn:has(.trn-impfile:focus-visible) { outline: 2px solid var(--c-fill); outline-offset: 1px; }