/* ==========================================================================
   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: space-between; align-items: center; gap: 12px; margin: 0 0 var(--sp-3); flex-direction: row-reverse; }
.pform__req { color: var(--danger); font-weight: 700; }
.pform__reqhint { font-size: var(--fs-sm); }
.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); }
/* J+S-Typen: Trainingstag (ganzer Tag Training) und Lagertag — kein Wettkampf,
   darum bewusst andere Farbfamilien als FS (orange) und MS (blau). */
.amx__type--TT { color: #fff; background: #0891B2; border-color: #0891B2; }
.amx__type--LT { color: #fff; background: #7C3AED; border-color: #7C3AED; }
.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__lg--tt { background: #0891B2; color: #fff; }
.amx__lg--lt { background: #7C3AED; color: #fff; }
.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: 1px solid color-mix(in srgb, var(--danger) 65%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 65%, transparent) !important; }
.amx__row--red > td:first-child { border-left: 1px solid color-mix(in srgb, var(--danger) 65%, transparent) !important; }
.amx__row--red > td:last-child { border-right: 1px solid color-mix(in srgb, var(--danger) 65%, transparent) !important; }
.amx__warnbubble { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--danger) 80%, transparent);
  color: var(--danger); background: none; padding: 0; cursor: pointer; }
.amx__warnbubble:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.amx__warnbubble[hidden] { display: none; }
.amx__warnbubble__hint { display: block; margin-top: 3px; font-weight: 600; opacity: .85; font-size: var(--fs-micro); }
.amx__warnbubble::before { content: "!"; font-size: 10px; font-weight: 800; line-height: 1; }
.amx__warnbubble__txt { display: none; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  z-index: 96; width: max-content; max-width: 220px; background: var(--c-white); color: var(--danger);
  border: 1px solid var(--danger); box-shadow: 0 4px 14px rgba(11, 24, 56,.2);
  padding: 5px 9px; font-size: var(--fs-micro); font-weight: 700; line-height: 1.3;
  white-space: normal; text-align: left; pointer-events: none; }
.amx__warnbubble:hover .amx__warnbubble__txt { display: block; }
/* 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(7, minmax(0, 1fr));   /* 7 Kacheln (inkl. Dauer) in EINER Zeile */
  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; }

}

/* ============================ 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 ===== */
.trn-empty { padding: var(--sp-5) 0; }
/* 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; }
/* v2-Editor: einspaltig (die Einheit IST die Tabelle), Farb-Swatches, Zell-Medien */
.trn-unitrow--v2 { grid-template-columns: minmax(0, 1fr); }
.trn-bgsw { display: inline-flex; gap: 4px; align-items: center; }
.trn-bgbtn { width: 22px; height: 22px; border: 1px solid var(--c-line-strong);
  border-radius: 4px; cursor: pointer; padding: 0; }
.trn-bgbtn--none { background: var(--c-white); position: relative; }
.trn-bgbtn--none::after { content: "×"; position: absolute; inset: 0; display: grid;
  place-items: center; color: var(--c-muted); font-size: 12px; line-height: 1; }
.trn-tbl td.trnv2-media { padding: 0; vertical-align: middle; }
.trn-tbl .trn-cellimg { width: 100%; max-height: 150px; object-fit: contain; display: block; }
.trn-tbl .trn-celldraw { display: block; width: 100%; }
.trn-tbl td.is-drawtarget { outline: 2px solid var(--c-fill); outline-offset: -2px; }
/* Import-Review: Grafik-Ziel-Zelle + Tabellenbox */
.trn-tbl td.timp-gcell { padding: 0; vertical-align: middle; }
.trn-tbl .timp-gcell-in { display: grid; place-items: center; min-height: 64px; margin: 3px;
  border: 1px dashed var(--c-line-strong); border-radius: 4px;
  font-size: var(--fs-micro); color: var(--c-muted); }
.timp-tblbox { margin: 6px 0 10px; }
/* Trainingsplan-Import (1:1): Quellbild ist nur Canvas-Quelle; Plan-Tabellen ohne Höhen-Norm
   (die min-height der Einheiten-Norm würde einen 150-Zeilen-Plan meterhoch machen) */
.pimp-src { display: none; }
.pimp-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 12px; }
.pimp-meta .timp-lbl { min-width: 260px; }
.pimp-page { margin-bottom: var(--sp-4); }
.pimp-pagehead { font-size: var(--fs-sm); margin-bottom: 6px; }
.trnv2--plan .trnv2-in { min-height: 22px; height: auto; overflow: visible; }
.pplan-extract { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  font-size: var(--fs-sm); }
.pplan-exnum { width: 70px; }
.pplan-exname { min-width: 220px; }
/* Plan-Ansicht: Druck-Blöcke am Schirm versteckt; im Druck nur sie (eine Plan-Seite je Blatt) */
.pplan-printwrap { display: none; }
@media print {
  @page pplan { size: A4 portrait; margin: 8mm; }
  .lv--pplanview { page: pplan; }
  .lv--pplanview .pplan-edit, .lv--pplanview .lv__head:first-child .trn-saved { display: none !important; }
  .lv--pplanview .pplan-printwrap { display: block; }
  .pplan-page { break-after: page; }
  .pplan-page:last-child { break-after: auto; }
  .pplan-page tr { break-inside: avoid; }
  .pplan-page .trnv2--plan { font-size: 8px; }
  .pplan-page .trnv2-in { padding: 2px 3px; }
}
.timp-croptool { margin: 4px 0 10px; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 6px 10px; }
.timp-croptool summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-fill);
  user-select: none; }
.timp-croptool[open] summary { margin-bottom: 8px; }
.timp-croptool .timp-img { max-width: 620px; }
.timp-gcell-in.timp-gcell-live { border: 0; margin: 0; padding: 0; min-height: 0; cursor: grab; }
.timp-gcell-in.timp-gcell-edit { border: 0; margin: 0; padding: 6px; min-height: 0; cursor: default; }
.timp-gcell-edit .timp-cropwrap { width: 100%; }
.timp-gcell-edit .timp-crop { max-width: none !important; }
.timp-gcell-in.timp-gcell-live canvas { display: block; width: 100%; height: auto; }
.trn-tbl td.is-gdrop { outline: 2px dashed var(--c-fill); outline-offset: -2px; }
/* Naht nach „Einheiten verbinden": blauer Strich zeigt die Verbindungsstelle */
.trn-tbl td.trnv2-join { border-top: 3px solid var(--c-fill) !important; }
.timp-gghost { position: fixed; z-index: 9999; pointer-events: none; background: var(--c-surface);
  border: 1px solid var(--c-fill); border-radius: var(--radius-sm); padding: 3px 10px;
  font-size: var(--fs-micro); color: var(--c-fill); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.trn-tbl td.timp-gcell { position: relative; }
.timp-gx { display: none; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid #64748b; background: #ffffff;
  color: #1a2433; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  place-items: center; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,0.35); padding: 0; }
.timp-gx:hover { background: #fee2e2; color: #b91c1c; border-color: #b91c1c; }
.trn-tbl td.timp-gcell.is-sel .timp-gx, .trn-tbl td.timp-gcell:hover .timp-gx { display: grid; }
.trn-tbltools button[disabled] { opacity: 0.4; cursor: default; }
.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 */
.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; }


/* Trainingseinheit v2: freies Tabellen-Modell. Breiten-Norm: table-layout:fixed verteilt 1..20
   Spalten immer auf dieselbe Gesamtbreite (Quetschen ab der ersten Zusatzspalte). Höhen-Norm:
   unter 5 Zeilen adaptiv (gleichmässige Mindesthöhe je Zeile), ab 5 Zeilen genormte Gesamthöhe
   --v2h — die Zeilen quetschen über das Innen-Div (Tabellenzeilen selbst lassen sich nicht unter
   Inhaltshöhe zwingen, darum height+overflow am .trnv2-in). */
.trnv2 { width: 100%; table-layout: fixed; border-collapse: collapse; --v2h: 260px;
  font-size: var(--fs-sm); }
.trnv2 td { border: 1px solid var(--c-line-strong); padding: 0; vertical-align: top;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.trnv2-in { padding: 4px 6px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: break-word;
  min-height: calc(var(--v2h) / 5 * var(--rs, 1)); }
.trnv2--fixed .trnv2-in { height: calc(var(--v2h) / var(--v2rows) * var(--rs, 1));
  min-height: 0; overflow: hidden; }
.trnv2 td.trnv2-td--media .trnv2-in { padding: 0; }
.trnv2 .trnv2-in > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.trnv2 .trnv2-in .trnd-mini { display: block; width: 100%; }
/* Zellfarben: feste Palette (Schlüssel, kein Hex im Markup) — EINE Stelle für Editor, Plan,
   Druck und Import-Review. Farbige Zellen erzwingen dunkle Schrift (auch im Dark Mode). */
.trn-bg--titel { background: #c3cddc !important; }
.trn-bg--grau { background: #d4dae3 !important; }
.trn-bg--gelb { background: #ffd83f !important; }
.trn-bg--orange { background: #ffab52 !important; }
.trn-bg--rot { background: #ff8a80 !important; }
.trn-bg--gruen { background: #7ed184 !important; }
.trn-bg--blau { background: #7fb3ff !important; }
.trn-bg--violett { background: #bb9bef !important; }
td[class*="trn-bg--"], td[class*="trn-bg--"] .trnv2-in,
td[class*="trn-bg--"] .trn-cell { color: #1a2433; }
@media print {
  /* Nach den Screen-Regeln platziert, damit die Druck-Höhennorm gewinnt (gleiche Spezifität). */
  .trnv2 { --v2h: 70mm; }
}

/* ===== Trainings-Modul (Etappe 6): KI-Import (Upload + Review) ===== */
.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 die KOMPLETTE erkannte Region (contain), nichts wird beschnitten.
   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). Das Bild wird
   per JS absolut positioniert und skaliert; überstehende Seite bekommt einen neutralen Balken. */
.timp-crop { position: relative; width: 100%; border: 1px solid var(--c-line-strong);
  border-radius: var(--radius); background-color: var(--c-surface-2);
  cursor: grab; touch-action: none; overflow: hidden; }
.timp-crop.is-drag { cursor: grabbing; }
/* Ausschnitt-Markierung: helles Fenster = genau der gespeicherte Bereich; alles ausserhalb wird
   abgedunkelt (grosser Schlagschatten), damit benachbarte Übungen im Rahmen nicht stören und klar
   ist, was gespeichert wird. Nur Anzeige, nicht anklickbar. */
.timp-cropsel { position: absolute; pointer-events: none; visibility: hidden;
  box-shadow: 0 0 0 9999px rgba(2, 8, 20, 0.5);
  outline: 1px solid rgba(255, 255, 255, 0.9); border-radius: 2px; }
/* Höhere Spezifität als .timp-img img (0,1,1), sonst gewinnen dessen border/border-radius und ein
   1px-Strich + runde Ecken erschienen im neutralen Letterbox-Balken. */
.timp-img img.timp-cropimg { position: absolute; top: 0; left: 0; width: auto; height: auto;
  max-width: none; border: 0; border-radius: 0; pointer-events: none; user-select: none;
  -webkit-user-drag: none; }
/* Zuschnitt-Modus („Grafik bearbeiten"): fixer Rahmen (ganze Seite sichtbar), helles Crop-Rechteck
   mit Eck-Griffen (Seitenverhältnis frei ziehbar, wie in Word), alles ausserhalb abgedunkelt. */
.timp-crop.is-editing { cursor: default; background-color: #0b1220; }
.timp-editbox { position: absolute; box-sizing: border-box; display: none; z-index: 2;
  box-shadow: 0 0 0 9999px rgba(2, 8, 20, 0.62);
  outline: 1px solid rgba(255, 255, 255, 0.95); cursor: move; }
.timp-eh { position: absolute; width: 20px; height: 20px; z-index: 3; touch-action: none; }
.timp-eh::before, .timp-eh::after { content: ""; position: absolute; background: #0b0f14;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9); }
.timp-eh::before { height: 3px; width: 20px; }   /* horizontaler Arm der Ecke */
.timp-eh::after { width: 3px; height: 20px; }    /* vertikaler Arm der Ecke */
.timp-eh--nw { left: -2px; top: -2px; cursor: nwse-resize; }
.timp-eh--nw::before { left: 0; top: 0; } .timp-eh--nw::after { left: 0; top: 0; }
.timp-eh--ne { right: -2px; top: -2px; cursor: nesw-resize; }
.timp-eh--ne::before { right: 0; top: 0; } .timp-eh--ne::after { right: 0; top: 0; }
.timp-eh--sw { left: -2px; bottom: -2px; cursor: nesw-resize; }
.timp-eh--sw::before { left: 0; bottom: 0; } .timp-eh--sw::after { left: 0; bottom: 0; }
.timp-eh--se { right: -2px; bottom: -2px; cursor: nwse-resize; }
.timp-eh--se::before { right: 0; bottom: 0; } .timp-eh--se::after { right: 0; bottom: 0; }
.timp-editbtn.is-on { color: var(--c-fill); border-color: var(--c-fill); }
.timp-cropbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.timp-crophint { font-size: var(--fs-micro); }
.timp-selfcrop { margin-top: 6px; font-size: var(--fs-micro); line-height: 1.4;
  border-left: 2px solid var(--c-line-strong); padding-left: 8px; }
.timp-nographwrap { margin-top: 8px; }
.timp-nograph-done { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm);
  min-height: 70px; }
.timp-nograph-done[hidden] { display: none; }   /* [hidden] muss display:flex schlagen */
.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); } }
/* v2-Review-Karte: EINE Spalte in VOLLER Breite — muss NACH der Grid-Regel stehen (spätere Regel
   gewinnt), sonst quetscht die 1fr-Spalte die Karte auf ein Drittel. */
.timp-grid.timp-grid--v2 { display: block; }
.timp-fields.timp-fields--v2 { max-width: none; }
/* E6-Review-Fixes: Datei-Input per Tastatur erreichbar (visuell versteckt statt hidden) */

/* ============ DRUCK-LAYOUT-DESIGNER (app/druck.py, Tab „Druckeinstellungen") ============ */
/* WYSIWYG: .druck-page hat FIXE Pixel (= bedruckbare Flaeche), am Schirm per transform
   skaliert, im Druck 1:1. Papier ist IMMER weiss (auch Dark Mode) — Vorschau = Ausdruck. */
.lv--druck { padding: var(--sp-4); max-width: none; }   /* .lv deckelt sonst bei 720px — der Designer braucht die volle Breite */
.druck-bar { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.druck-bar__head { margin: 0; }
.druck-scope { font-size: var(--fs-sm); font-weight: 400; }
.druck-bar__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.druck-bar__spacer { flex: 1 1 auto; }
.druck-dirty { color: #b45309; font-size: var(--fs-sm); font-weight: 600; }
.druck-saveform { display: inline-flex; margin: 0; }
.druck-hint { font-size: var(--fs-sm); }
.druck-seg { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: 8px; overflow: hidden; }
.druck-seg__opt { display: inline-flex; position: relative; }
.druck-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.druck-seg__opt span, .druck-seg__btn { padding: 5px 10px; font-size: var(--fs-sm); cursor: pointer; background: none; border: none; color: var(--c-text); line-height: 1.2; }
.druck-seg__opt input:checked + span, .druck-seg__btn.is-on { background: var(--c-fill); color: #fff; }
.druck-palette { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2); border: 1px dashed var(--c-line-strong); border-radius: 8px; }
.druck-palette__lbl { font-size: var(--fs-sm); }
.druck-palette__page { margin: 0 2px; }
.druck-palette__chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.druck-chip { border: 1px solid var(--c-fill); color: var(--c-fill); background: none; border-radius: 999px; padding: 3px 10px; font-size: var(--fs-sm); cursor: pointer; }
.druck-chip:hover { background: var(--c-fill); color: #fff; }

.druck-pages { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.druck-pagewrap { position: relative; overflow: hidden; }
.druck-sheet { transform-origin: top left; position: relative; width: fit-content; background: #fff; padding: 26px; border: 1px solid #d5d9e0; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); }
.druck-page { position: relative; background: #fff; color: #111; outline: 1px dashed #dbe0e8; overflow: hidden; }
.druck[data-mode="view"] .druck-page { outline: none; }
.druck-pagedel { position: absolute; top: 3px; left: 26px; border: none; background: none; color: #c0392b; font-size: 11px; cursor: pointer; padding: 0 4px; display: none; }
.druck[data-mode="edit"] .druck-pagedel { display: block; }
.druck-pagedel:hover { text-decoration: underline; }
.druck-logo { position: absolute; top: 8px; right: 12px; opacity: 0.9; z-index: 5; pointer-events: none; }
.druck-logo img { height: 13px; width: auto; display: block; }

/* Frei platzierbare Elemente (Teilspiel-Boxen, Benotungstabelle) */
.druck-item { position: absolute; z-index: 1; }
.druck[data-mode="edit"] .druck-item { outline: 1px dashed rgba(8, 102, 245, 0.45); cursor: move; }
.druck[data-mode="edit"] .druck-item:hover { outline: 2px solid #0866F5; z-index: 3; }
.druck-x { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid #c0392b; color: #c0392b; font-size: 12px; line-height: 1; cursor: pointer; display: none; z-index: 4; padding: 0; }
.druck-x:hover { background: #c0392b; color: #fff; }
.druck-eh { position: absolute; width: 11px; height: 11px; background: transparent; display: none; z-index: 4; }
.druck-eh--nw { top: -4px; left: -4px; cursor: nwse-resize; border-top: 3px solid #0866F5; border-left: 3px solid #0866F5; }
.druck-eh--ne { top: -4px; right: -4px; cursor: nesw-resize; border-top: 3px solid #0866F5; border-right: 3px solid #0866F5; }
.druck-eh--sw { bottom: -4px; left: -4px; cursor: nesw-resize; border-bottom: 3px solid #0866F5; border-left: 3px solid #0866F5; }
.druck-eh--se { bottom: -4px; right: -4px; cursor: nwse-resize; border-bottom: 3px solid #0866F5; border-right: 3px solid #0866F5; }
.druck[data-mode="edit"] .druck-item .druck-x,
.druck[data-mode="edit"] .druck-item .druck-eh { display: block; }

/* Aufstellungs-Chart im Druck-Layout (.dpc — bewusst NICHT .spf, dessen Print-CSS funkt sonst
   rein). Schriften skalieren mit der Boxhoehe via --bh (Zahl = Boxhoehe in px, setzt JS). */
/* Massstab --dpc-s (setzt JS aus der Boxhoehe): das Chart ist EXAKT das Aufgebots-Chart
   (.spf--play: Chip 88px, Schrift 11px, Referenzhoehe ~270px) und skaliert NUR als Ganzes —
   Chip-Breite und Schrift wachsen im selben Verhaeltnis, darum schneiden Namen nie anders ab
   als im Aufgebot. */
.dpc { display: flex; flex-direction: column; width: 100%; height: 100%; }
.dpc__cap { font-size: calc(var(--dpc-s, 1) * 11px); font-weight: 700; color: #111; text-align: center; padding-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Das Feld = EXAKT der Aufgebots-Look: gleiches SVG-Linien-Overlay (Rand, Mittellinie, Mittelkreis,
   Strafräume) als HINTERGRUNDBILD (Marker liegen dadurch immer ÜBER den Linien), abgerundet.
   preserveAspectRatio none → die Linien verzerren mit der Boxgrösse (WYSIWYG). */
.dpc__pitch { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border: 1px solid #60a550; border-radius: 8px; background-size: 100% 100%; background-repeat: no-repeat; }
/* Platz-Designs (Root-Attribut data-pitch schaltet um — reine CSS-Sache) */
.druck[data-pitch="klassisch"] .dpc__pitch, .druck[data-pitch="hell"] .dpc__pitch, .druck[data-pitch="dunkel"] .dpc__pitch {
  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");
}
.druck[data-pitch="klassisch"] .dpc__pitch { background-color: #7cb767; }
.druck[data-pitch="hell"] .dpc__pitch { background-color: #d9ead3; border-color: #b7cfae; }
.druck[data-pitch="dunkel"] .dpc__pitch { background-color: #243040; border-color: #111827; }
.druck[data-pitch="weiss"] .dpc__pitch { background-color: #fff; border-color: #9aa3af;
  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%23b6bec9%22%20stroke-opacity%3D%220.9%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%23b6bec9%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");
}
.dpc__slot { position: absolute; transform: translate(-50%, -50%); width: min(calc(var(--dpc-s, 1) * 88px), 42%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--dpc-s, 1) * 2px); }
.dpc__num { display: block; background: rgba(255, 255, 255, 0.82); color: #5b6b83; border: 1px solid rgba(33, 49, 70, 0.14); border-radius: calc(var(--dpc-s, 1) * 9px); font-weight: 700; font-size: calc(var(--dpc-s, 1) * 11px); line-height: 1.15; padding: calc(var(--dpc-s, 1) * 1px) calc(var(--dpc-s, 1) * 4px); }
.dpc__res { text-align: center; font-weight: 700; color: #111; font-size: calc(var(--dpc-s, 1) * 12px); padding: 1px 0 0; }
.dpc__bench { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--dpc-s, 1) * 3px); color: #111; font-weight: 700; font-size: calc(var(--dpc-s, 1) * 10px); line-height: 1.25; padding-top: calc(var(--dpc-s, 1) * 2px); overflow: hidden; }
.dpc__bn { background: rgba(255, 255, 255, 0.95); color: #0b1838; border: 1px solid rgba(33, 49, 70, 0.18); border-radius: calc(var(--dpc-s, 1) * 7px); padding: calc(var(--dpc-s, 1) * 1px) calc(var(--dpc-s, 1) * 4px); }
.druck[data-bench="0"] .dpc__bench { display: none; }

/* Spieler-Marker: Namens-Schild | Körper-Symbol | Foto (data-marker) + Namensformat (data-namefmt).
   Alle Varianten sind im DOM; die Attribute blenden um. */
.dpc__pl { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.dpc__ico, .dpc__foto { display: none; }
.dpc__nm { display: block; width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: #111; font-weight: 600; font-size: calc(var(--dpc-s, 1) * 11px); line-height: 1.15; }
.druck[data-namefmt="voll"] .dpc__nm-v, .druck[data-namefmt="voll"] .dpc__nm-n { display: none; }
.druck[data-namefmt="vorname"] .dpc__nm-n, .druck[data-namefmt="vorname"] .dpc__nm-f { display: none; }
.druck[data-namefmt="nachname"] .dpc__nm-v, .druck[data-namefmt="nachname"] .dpc__nm-f { display: none; }
/* Namens-Schild = exakt der Aufgebots-Chip (weiss, abgerundet, weicher Schatten — Schatten fällt
   im Druck durch das globale box-shadow:none weg, gut für den Toner) */
.druck[data-marker="pill"] .dpc__nm { background: rgba(255, 255, 255, 0.95); color: #0b1838; border: 1px solid rgba(33, 49, 70, 0.18); border-radius: calc(var(--dpc-s, 1) * 9px); box-shadow: 0 4px 12px rgba(12, 35, 56, 0.16); font-weight: 700; padding: calc(var(--dpc-s, 1) * 1px) calc(var(--dpc-s, 1) * 4px); }
.druck[data-marker="icon"] .dpc__ico { display: block; width: calc(var(--dpc-s, 1) * 26px); color: #0B1838; }
.druck[data-pitch="dunkel"][data-marker="icon"] .dpc__ico { color: #e8edf5; }
.druck[data-marker="icon"] .dpc__ico svg { display: block; width: 100%; height: auto; }
.druck[data-marker="foto"] .dpc__foto { display: flex; width: calc(var(--dpc-s, 1) * 30px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #e2e8f0; color: #33415c; border: 1.5px solid #fff; align-items: center; justify-content: center; position: relative; }
.druck[data-marker="foto"] .dpc__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dpc__ini { font-weight: 700; font-size: calc(var(--dpc-s, 1) * 10px); }
.druck[data-marker="icon"] .dpc__nm, .druck[data-marker="foto"] .dpc__nm { background: rgba(255, 255, 255, 0.92); border-radius: 3px; padding: 0 calc(var(--dpc-s, 1) * 2px); width: auto; max-width: 100%; }
/* Positionsfremde Spieler rot umranden (nur wenn eingeschaltet, data-off="1") — wie .spf__chip--off */
.druck[data-off="1"] .dpc__pl--off .dpc__nm { box-shadow: 0 0 0 2px #DC2626; position: relative; z-index: 2; }
.druck[data-off="1"][data-marker="foto"] .dpc__pl--off .dpc__foto { border-color: #DC2626; box-shadow: 0 0 0 1.5px #DC2626; }
.druck[data-off="1"][data-marker="icon"] .dpc__pl--off .dpc__ico { color: #DC2626; }
.dpc__foto:has(img) .dpc__ini { visibility: hidden; }
/* Ersatzbank-Namen folgen dem Namensformat (dieselben dpc__nm-*-Gates) */
.dpc__bn { white-space: nowrap; }
.druck-opt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.druck-opt select { font-size: var(--fs-sm); }
.druck-opt--chk { gap: 5px; }

/* Benotungstabelle auf dem Druckblatt (leere Notenfelder zum Handausfuellen) */
.druck-ben { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; color: #111; }
.druck-ben td { border: 1px solid #9aa3af; font-size: clamp(7px, calc(var(--bh, 300) * 0.03px), 12px); padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.druck-ben td.druck-ben__name { width: 21%; text-align: left; }
.druck-ben__title td { height: 1.7em; font-weight: 700; text-align: center; }
.druck-ben__head td { height: 1.5em; font-weight: 600; text-align: center; }

@media print {
  .druck-bar, .druck-park, .druck-x, .druck-eh, .druck-pagedel { display: none !important; }
  /* Dark Mode: dunkle App-Hintergruende drucken sonst als schwarzer Rahmen um das Blatt mit
     (print-color-adjust exact ist global an) — alles hinter den Seiten WEISS zwingen. */
  .app, .main, .workspace, .tab-content, .lv--druck, .druck, .druck-pages, .druck-pagewrap, .druck-sheet { background: #fff !important; }
  .lv--druck { padding: 0 !important; max-width: none !important; }
  .druck-pages { display: block !important; }
  .druck-pagewrap { width: auto !important; height: auto !important; overflow: visible !important; break-after: page; page-break-after: always; }
  .druck-pagewrap:last-child { break-after: auto; page-break-after: auto; }
  .druck-sheet { transform: none !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
  .druck-page, .druck-item { outline: none !important; }   /* Editier-Markierungen (blau gestrichelt) nie mitdrucken */
}

/* Druck-Designer Etappe 3: freie Tabellen mit Zell-Regeln + Editor-Overlay */
.druck-tblhost { width: 100%; height: 100%; }
.druck-tbl { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; color: #111; background: #fff; }
.druck-tbl td { border: 1px solid #9aa3af; font-size: clamp(7px, calc(var(--bh, 250) * 0.032px), 12px); padding: 0 4px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.druck-tbledit { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); display: none; z-index: 4; border: 1px solid var(--c-fill); background: #fff; color: var(--c-fill); border-radius: 999px; font-size: 10px; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.druck-tbledit:hover { background: var(--c-fill); color: #fff; }
.druck[data-mode="edit"] .druck-item--table .druck-tbledit { display: block; }

/* Regel-Zellen im Tabellen-Editor: blaue Pille statt Text (der Inhalt kommt beim Rendern) */
.trn-rulecell { text-align: center; }
.trn-rulepill { display: inline-block; background: rgba(8, 102, 245, 0.12); border: 1px dashed #0866F5; color: #0866F5; border-radius: 999px; padding: 1px 8px; font-size: 11px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.druck-rulesw { margin-top: 4px; }
.druck-rulesw__lbl { font-size: var(--fs-sm); font-weight: 600; align-self: center; }

/* Editor-Overlay: weisse Karte (Papier-Look wie die Seiten), Hintergrund abgedunkelt */
.druck-modal { position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.druck-modal[hidden] { display: none; }
.druck-modal__card { background: #fff; color: #111; border-radius: 10px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35); max-width: min(1100px, 94vw); max-height: 88vh; display: flex; flex-direction: column; padding: var(--sp-4); gap: var(--sp-2); }
.druck-modal__body { overflow: auto; min-height: 0; }
.druck-modal__body .trn-cell { color: #111; }
.druck-modal__hint { font-size: var(--fs-sm); }
.druck-modal__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
@media print { .druck-tbledit, .druck-modal { display: none !important; } }

/* Druck: color-scheme dark (SquadOS Dark Mode, Z.4273) laesst Chrome die Druck-Leinwand SCHWARZ
   malen — der schwarze Rahmen ums Blatt. Beim Drucken IMMER helles Schema erzwingen (Papier). */
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; }
}

/* ================= TRAININGS NEU (Prototyp v9.15.1, app/trainings2.py) =================== */
/* Namespace .trn2-*; alle Farben ueber Theme-Variablen (hell UND dunkel). */
.lv--trn2 { padding: var(--sp-5); max-width: 1410px; }
.trn2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.trn2-title { margin: 0; font-size: 30px; letter-spacing: -0.5px; }
.trn2-sub { font-size: var(--fs-sm); margin-top: 5px; }
.trn2-tabs { display: flex; align-items: center; gap: 2px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-white); padding: 4px; margin-bottom: 18px; overflow-x: auto; }
.trn2-tab { position: relative; flex: 1 1 auto; height: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--c-muted); padding: 0 14px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer; }
.trn2-tab:hover { color: var(--c-black); background: var(--c-surface-2); }
.trn2-tab.is-on { color: var(--c-black); background: var(--c-surface-2); }
.trn2-tab.is-on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 999px; background: var(--c-fill); }
.trn2-empty { padding: 40px 0; text-align: center; }
.trn2-card { padding: 15px; margin-bottom: 14px; }
.trn2-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.trn2-card__title { font-size: 17px; font-weight: 800; }
.trn2-card__help { font-size: var(--fs-sm); max-width: 780px; margin-top: 3px; }
.trn2-card__foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); line-height: 1.5; }
.trn2-saveform { display: inline-flex; margin: 0; flex: none; }

/* Logik-Erklaerzeile (1 -> 2 -> 3) */
.trn2-logic { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); flex-wrap: wrap; }
.trn2-logic__step { flex: 1 1 150px; display: flex; gap: 7px; align-items: center; min-width: 0; }
.trn2-logic__step > span { flex: none; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--c-fill-soft, rgba(8,102,245,0.12)); color: var(--c-fill); font-size: var(--fs-xs); font-weight: 800; }
.trn2-logic__step b { display: block; font-size: var(--fs-sm); }
.trn2-logic__step small { display: block; margin-top: 1px; font-size: var(--fs-xs); }
.trn2-logic__arrow { color: var(--c-muted); font-size: 14px; }
.trn2-mxhelp { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-size: var(--fs-xs); flex-wrap: wrap; }
.trn2-mxlegend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trn2-mxlegend span { display: inline-flex; align-items: center; gap: 4px; }
.trn2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--trn2-cyc, var(--c-fill)); flex: none; }

/* Zyklus-Farbpalette (Index 0..9) — setzt --trn2-cyc fuer Punkt/Balken/Kopf */
.trn2-cyc--0 { --trn2-cyc: #2C8CFF; } .trn2-cyc--1 { --trn2-cyc: #2FC47D; }
.trn2-cyc--2 { --trn2-cyc: #9A6CFF; } .trn2-cyc--3 { --trn2-cyc: #FFB84D; }
.trn2-cyc--4 { --trn2-cyc: #FF6B7A; } .trn2-cyc--5 { --trn2-cyc: #24C6DC; }
.trn2-cyc--6 { --trn2-cyc: #E879F9; } .trn2-cyc--7 { --trn2-cyc: #A3E635; }
.trn2-cyc--8 { --trn2-cyc: #F97316; } .trn2-cyc--9 { --trn2-cyc: #14B8A6; }

/* Tagesregel-Matrix (JS-gerendert, Modell-first) */
.trn2-matrix { display: grid; grid-template-columns: minmax(112px, 0.65fr) repeat(var(--trn2-cols, 2), minmax(0, 1fr)); border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface-2); overflow: hidden; }
.trn2-mx__corner, .trn2-mx__cyc, .trn2-mx__day, .trn2-mx__cell { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); min-width: 0; overflow: hidden; }
.trn2-mx__corner { padding: 9px 10px; background: var(--c-white); display: flex; align-items: flex-end; }
.trn2-mx__corner b { font-size: var(--fs-sm); }
.trn2-mx__corner small { display: block; font-size: var(--fs-xs); }
.trn2-mx__cyc { min-height: 51px; padding: 8px 9px; background: var(--c-white); display: flex; align-items: center; gap: 7px; }
.trn2-mx__cyc.is-base .trn2-dot { background: transparent; border: 1px dashed var(--c-muted); }
.trn2-mx__cyc b { display: block; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.trn2-mx__cyc small { display: block; font-size: var(--fs-xs); margin-top: 1px; }
.trn2-mx__day { min-height: 94px; padding: 9px 10px; background: var(--c-white); display: flex; flex-direction: column; justify-content: center; }
.trn2-mx__day b { font-size: var(--fs-sm); }
.trn2-mx__day small { font-size: var(--fs-xs); margin-top: 2px; }
.trn2-mx__cell { min-height: 94px; padding: 8px; background: var(--c-surface-2); position: relative; }
.trn2-mx__cell:hover { background: var(--c-hover, var(--c-surface-3, var(--c-surface-2))); }
.trn2-mx__cell.has-own { box-shadow: inset 0 3px 0 var(--trn2-cyc, var(--c-fill)); }
.trn2-mx__ctx { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.trn2-mx__ctx span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--c-muted); font-weight: 800; }
.trn2-mx__ctx button { border: 0; background: transparent; color: var(--c-muted); font-size: 10px; padding: 1px 2px; cursor: pointer; }
.trn2-mx__ctx button:hover { color: var(--c-fill); }
.trn2-mx__tags, .trn2-mx__inhtags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.trn2-mx__tag { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 6px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-white); font-size: var(--fs-xs); font-weight: 700; max-width: 100%; overflow-wrap: anywhere; }
.trn2-mx__tag button { border: 0; background: none; color: inherit; padding: 0 0 0 3px; font-size: var(--fs-xs); cursor: pointer; }
.trn2-mx__inhtags span { font-size: 10px; padding: 2px 5px; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-muted); background: var(--c-white); }
.trn2-mx__add { min-width: 0; width: 100%; box-sizing: border-box; height: 27px; margin-top: 6px; border: 1px dashed var(--c-line-strong); border-radius: 7px; background: var(--c-white); color: var(--c-black); padding: 0 7px; font-size: var(--fs-xs); outline: 0; }
.trn2-mx__add:focus { border-color: var(--c-fill); }
.trn2-mx__enable { margin-top: 7px; height: 26px; border: 1px solid var(--c-line); border-radius: 7px; background: var(--c-white); color: var(--c-fill); font-size: var(--fs-xs); padding: 0 7px; cursor: pointer; }
.trn2-mx__enable:hover { background: var(--c-fill-soft, rgba(8,102,245,0.1)); border-color: var(--c-fill); }
.trn2-mx__cell.is-inherit .trn2-mx__inhtags { margin-top: 2px; }

/* Zyklus-Pillen + Kalender */
.trn2-cycbar { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 11px; }
.trn2-cycpill { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-black); font-size: var(--fs-xs); font-weight: 700; }
.trn2-cycpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--trn2-cyc, var(--c-fill)); }
.trn2-cycpill__x { border: 0; background: none; color: var(--c-muted); padding: 0 0 0 2px; cursor: pointer; font-size: 12px; }
.trn2-cycpill__x:hover { color: var(--danger); }
.trn2-calwrap { border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface-2); padding: 10px; max-height: 560px; overflow: auto; overscroll-behavior: contain; }
.trn2-calgrid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 9px; }
.trn2-month { border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-white); padding: 10px; }
.trn2-month__title { font-size: var(--fs-sm); font-weight: 800; margin-bottom: 7px; }
.trn2-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.trn2-weekdays span { text-align: center; color: var(--c-muted); font-size: 9px; }
.trn2-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.trn2-day { position: relative; height: 30px; border: 0; background: transparent; color: var(--c-black); font-size: 10px; padding: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; min-width: 0; }
.trn2-day.is-pad { pointer-events: none; }
.trn2-day.is-off { opacity: 0.18; pointer-events: none; }
.trn2-day > span { position: absolute; inset: 2px 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.trn2-day:hover > span { outline: 1px solid var(--c-line-strong); outline-offset: -1px; }
.trn2-day[data-cyc] > span { box-shadow: inset 0 -4px 0 var(--trn2-cyc, var(--c-fill)); }
.trn2-day.is-sel > span { background: var(--c-fill); color: #fff; box-shadow: none; }
.trn2-day.is-rsel > span { background: var(--c-fill-soft, rgba(8,102,245,0.2)); outline: 1px solid var(--c-fill); outline-offset: -1px; }
body.trn2-dragging { cursor: crosshair; }
.trn2-calwrap, .trn2-month, .trn2-days, .trn2-day { -webkit-user-select: none; user-select: none; }

/* Kleines Popover bei der Auswahl (fixed, kein Blur) */
.trn2-pop { position: fixed; z-index: 320; width: 280px; padding: 10px; border: 1px solid var(--c-line-strong); border-radius: 11px; background: var(--c-white); box-shadow: var(--shadow-popover, 0 16px 42px rgba(0,0,0,0.3)); }
.trn2-pop__title { font-size: var(--fs-xs); font-weight: 800; margin-bottom: 8px; }
.trn2-pop__lbl { display: block; margin-bottom: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--c-muted); font-weight: 800; }
.trn2-pop__input { width: 100%; box-sizing: border-box; height: 32px; margin-bottom: 7px; border: 1px solid var(--c-line-strong); border-radius: 8px; background: var(--c-surface-2); color: var(--c-black); padding: 0 8px; outline: 0; }
.trn2-pop__input:focus { border-color: var(--c-fill); }
.trn2-pop__actions { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
[data-trn2-repeatbtn].is-on { border-color: var(--c-fill); color: var(--c-fill); background: var(--c-fill-soft, rgba(8,102,245,0.1)); }

@media (max-width: 1050px) { .trn2-calgrid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
@media (max-width: 760px) {
  .trn2-calgrid { grid-template-columns: 1fr; }
  .trn2-logic { flex-direction: column; align-items: stretch; }
  .trn2-logic__arrow { transform: rotate(90deg); align-self: center; }
  .trn2-matrix { grid-template-columns: minmax(84px, 0.5fr) repeat(var(--trn2-cols, 2), minmax(0, 1fr)); }
  .trn2-mx__day small { display: none; }
}

/* Trainings NEU · Tab "Trainingsplanstruktur" (System-Editor) */
.trn2-sysbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface-2); flex-wrap: wrap; }
.trn2-sysbar__main { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.trn2-sysbar__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trn2-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 0.65px; color: var(--c-muted); font-weight: 800; }
.trn2-select { height: 34px; min-width: 190px; border: 1px solid var(--c-line-strong); border-radius: 8px; background: var(--c-white); color: var(--c-black); font-weight: 700; padding: 0 8px; }
.trn2-verspill { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-xs); }
.trn2-strukt-layout { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 12px; align-items: start; }
.trn2-ellist { padding: 8px; }
.trn2-ellist__head { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.trn2-ellist__head span { min-width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-xs); padding: 0 5px; }
.trn2-elrow { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.trn2-elrow:last-child { border-bottom: 0; }
.trn2-elrow:hover { background: var(--c-surface-2); }
.trn2-elrow.is-on { background: var(--c-fill-soft, rgba(8,102,245,0.1)); }
.trn2-elrow b { min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn2-elrow.is-header { border-bottom: 1px solid var(--c-line-strong); }
.trn2-elrow.is-header b::before { content: "▦ "; color: var(--c-fill); }
.trn2-elrow__side { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.trn2-elmove { display: none; width: 20px; height: 20px; border: 1px solid var(--c-line); border-radius: 5px; background: var(--c-white); color: var(--c-muted); font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.trn2-elrow:hover .trn2-elmove { display: inline-flex; align-items: center; justify-content: center; }
.trn2-elmove:hover { color: var(--c-fill); border-color: var(--c-fill); }
.trn2-elstatus { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); font-size: 10px; font-style: normal; white-space: nowrap; }
.trn2-elstatus::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-strong); }
.trn2-elstatus.is-tpl::before { background: #9A6CFF; }
.trn2-eledit { padding: 13px; min-width: 0; }
.trn2-eledit__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.trn2-eledit__titleblock { min-width: 0; flex: 1 1 320px; }
.trn2-eltitle { width: min(500px, 100%); border: 0; background: transparent; color: var(--c-black); outline: 0; padding: 0; font: inherit; font-size: 17px; font-weight: 800; }
.trn2-eledit__sub { font-size: var(--fs-xs); margin-top: 3px; }
.trn2-eledit__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trn2-dirty { color: #b45309; font-size: var(--fs-sm); font-weight: 600; }
.trn2-eledit__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: 10px; margin-top: 11px; }
.trn2-tplswitch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); }
.trn2-tplswitch b { display: block; font-size: var(--fs-sm); }
.trn2-tplswitch small { display: block; font-size: var(--fs-xs); line-height: 1.35; margin-top: 2px; }
.trn2-toggle { position: relative; width: 36px; height: 21px; flex: none; }
.trn2-toggle input { display: none; }
.trn2-toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--c-line-strong); cursor: pointer; }
.trn2-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: 0.16s; }
.trn2-toggle input:checked + span { background: var(--c-fill); }
.trn2-toggle input:checked + span::after { transform: translateX(15px); }
.trn2-toggle input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.trn2-transnote { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 9px; border-left: 2px solid #9A6CFF; border-radius: 0 8px 8px 0; background: var(--c-surface-2); }
.trn2-transnote > span { color: #9A6CFF; font-size: 16px; text-align: center; }
.trn2-transnote b { display: block; font-size: var(--fs-sm); }
.trn2-transnote small { display: block; font-size: var(--fs-xs); line-height: 1.4; margin-top: 2px; }
.trn2-dynpanel { margin-top: 10px; padding: 8px 9px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); }
.trn2-dynpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.trn2-dynpanel__head b { display: block; font-size: var(--fs-sm); }
.trn2-dynpanel__head small { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; }
.trn2-fx { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--c-fill-soft, rgba(8,102,245,0.12)); color: var(--c-fill); font-size: var(--fs-xs); font-weight: 800; }
.trn2-dynlist { display: flex; gap: 5px; flex-wrap: wrap; }
.trn2-dynchip { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; padding: 3px 7px; border: 1px solid var(--c-line-strong); border-radius: 7px; background: var(--c-white); color: var(--c-fill); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.trn2-dynchip:hover { border-color: var(--c-fill); background: var(--c-fill-soft, rgba(8,102,245,0.1)); }
.trn2-tplwork { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: 10px; margin-top: 10px; min-width: 0; }
.trn2-tplmain { border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); padding: 9px; min-width: 0; }
.trn2-tpltools { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.trn2-tpltools b { display: block; font-size: var(--fs-sm); }
.trn2-tplbtns { display: flex; gap: 4px; flex-wrap: wrap; }
.trn2-gbtn { height: 28px; padding: 0 8px; border: 1px solid var(--c-line-strong); border-radius: 6px; background: var(--c-white); color: var(--c-black); font-size: var(--fs-xs); cursor: pointer; }
.trn2-gbtn:hover { border-color: var(--c-fill); }
.trn2-gbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.trn2-tplhelp { margin-top: 6px; font-size: var(--fs-xs); }

/* Grid-Engine-Zellen (Kopfzeile + Struktur-Vorlage) */
.trn2-grid { display: grid; border-top: 1px solid var(--c-line-strong); border-left: 1px solid var(--c-line-strong); background: var(--c-white); }
.trn2-g__cell { position: relative; min-width: 0; min-height: 34px; padding: 5px 6px; border-right: 1px solid var(--c-line-strong); border-bottom: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-black); font-size: var(--fs-xs); overflow: hidden; user-select: none; -webkit-user-select: none; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 4px; }
.trn2-g__cell.is-sel { box-shadow: inset 0 0 0 2px var(--c-fill); z-index: 2; background: var(--c-fill-soft, rgba(8,102,245,0.08)); }
.trn2-g__cell.is-drop { box-shadow: inset 0 0 0 2px var(--c-fill); background: var(--c-fill-soft, rgba(8,102,245,0.12)); }
.trn2-g__cell.is-label { font-weight: 800; background: var(--c-surface-2); }
.trn2-g__cell.is-title { justify-content: center; font-size: 14px; font-weight: 800; }
.trn2-g__cell.is-logo { justify-content: center; font-weight: 800; color: var(--c-muted); }
.trn2-g__cell.is-legend { justify-content: center; }
.trn2-g__txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.trn2-g__tok { display: inline-flex; gap: 3px; align-items: center; background: var(--c-fill-soft, rgba(8,102,245,0.14)); color: var(--c-fill); font-weight: 800; border-radius: 5px; padding: 2px 5px; max-width: 100%; }
.trn2-g__tok button, .trn2-g__chip button { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; font-size: inherit; }
.trn2-g__ph { font-size: var(--fs-xs); }
.trn2-g__cell select { width: 100%; min-width: 0; height: 28px; border: 1px solid var(--c-line-strong); border-radius: 6px; background: var(--c-surface-2); color: var(--c-black); padding: 0 4px; font-size: var(--fs-xs); }
.trn2-g__chips { display: flex; gap: 3px; flex-wrap: wrap; width: 100%; }
.trn2-g__chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 4px; border-radius: 5px; background: var(--c-fill-soft, rgba(8,102,245,0.14)); color: var(--c-fill); font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.trn2-g__span { position: absolute; right: 3px; top: 2px; color: var(--c-muted); font-size: 9px; pointer-events: none; }

/* Chat-Assistent + helle Beispiel-Vorschau */
.trn2-chat { border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); display: grid; grid-template-rows: auto minmax(140px, 1fr) auto auto; overflow: hidden; min-width: 0; }
.trn2-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; border-bottom: 1px solid var(--c-line); }
.trn2-chat__head b { display: block; font-size: var(--fs-sm); }
.trn2-chat__head small { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.trn2-chat__msgs { min-height: 140px; max-height: 260px; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.trn2-chat__msg { max-width: 88%; padding: 7px 8px; border: 1px solid var(--c-line); border-radius: 9px; font-size: var(--fs-xs); line-height: 1.4; }
.trn2-chat__msg.is-user { align-self: flex-end; background: var(--c-fill-soft, rgba(8,102,245,0.14)); }
.trn2-chat__msg.is-ai { align-self: flex-start; background: var(--c-white); }
.trn2-chat__sugg { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 9px 7px; }
.trn2-chat__sugg button { border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); color: var(--c-muted); padding: 4px 7px; font-size: 10px; cursor: pointer; }
.trn2-chat__sugg button:hover { color: var(--c-black); border-color: var(--c-line-strong); }
.trn2-chat__compose { padding: 8px; border-top: 1px solid var(--c-line); }
.trn2-chat__compose textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--c-line-strong); border-radius: 8px; background: var(--c-white); color: var(--c-black); padding: 8px; font: inherit; font-size: var(--fs-xs); resize: vertical; min-height: 56px; outline: 0; }
.trn2-chat__compose textarea:focus { border-color: var(--c-fill); }
.trn2-chat__compose button { width: 100%; margin-top: 5px; }
.trn2-prevbox { margin-top: 10px; padding: 9px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); }
.trn2-prevbox__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.trn2-prevbox__head b { display: block; font-size: var(--fs-sm); }
.trn2-prevbox__head small { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.trn2-prevcanvas { display: grid; border-top: 1px solid #9aa3af; border-left: 1px solid #9aa3af; background: #f9fafb; color: #111827; }
.trn2-prevcell { min-width: 0; padding: 7px; border-right: 1px solid #9aa3af; border-bottom: 1px solid #9aa3af; font-size: var(--fs-xs); overflow: hidden; line-height: 1.35; }
.trn2-prevcell strong { display: block; font-size: var(--fs-xs); margin-bottom: 3px; }
.trn2-prevcell.is-grafik { background: #dfead9; position: relative; }
.trn2-prevcell.is-grafik::after { content: ""; position: absolute; inset: 13px; border: 1px solid #70866b; border-radius: 2px; }
.trn2-prevcell.is-label { font-weight: 800; background: #ececec; }
.trn2-prevcell.is-title { font-size: 14px; font-weight: 800; text-align: center; }
.trn2-prevcell.is-logo { font-weight: 800; text-align: center; color: #6b7280; }
.trn2-prevcell.is-legend { text-align: center; }
.trn2-prevdyn { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.trn2-prevdyn i { display: inline-flex; padding: 2px 4px; border-radius: 4px; background: #e7f1ff; color: #1d5eaa; font-size: 10px; font-weight: 700; font-style: normal; }

@media (max-width: 1150px) {
  .trn2-strukt-layout { grid-template-columns: 1fr; }
  .trn2-tplwork { grid-template-columns: 1fr; }
  .trn2-eledit__grid { grid-template-columns: 1fr; }
}

/* Trainings NEU · Tab "Uebungen" */
.trn2-uhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.trn2-ulayout { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 12px; align-items: start; }
.trn2-ufilter { padding: 14px; }
.trn2-fgroup { margin-bottom: 16px; }
.trn2-fgroup:last-child { margin-bottom: 0; }
.trn2-flabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--c-muted); font-weight: 800; margin-bottom: 7px; }
.trn2-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.trn2-fchip { height: 30px; padding: 0 9px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-xs); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn2-fchip.is-on { background: var(--c-fill-soft, rgba(8,102,245,0.12)); border-color: var(--c-fill); color: var(--c-fill); }
.trn2-umain { padding: 14px; min-width: 0; }
.trn2-utoolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.trn2-usearch { flex: 1 1 200px; height: 38px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface-2); color: var(--c-black); padding: 0 11px; outline: 0; }
.trn2-usearch:focus { border-color: var(--c-fill); }
.trn2-usort { height: 38px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface-2); color: var(--c-black); padding: 0 8px; }
.trn2-ugrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trn2-ucard { border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface-2); padding: 10px; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; min-height: 104px; cursor: pointer; transition: 0.15s; }
.trn2-ucard:hover { transform: translateY(-1px); border-color: var(--c-line-strong); background: var(--c-hover, var(--c-surface-2)); }
.trn2-ucard__thumb { border-radius: 8px; background: #7cb767; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); min-height: 82px; display: flex; align-items: center; justify-content: center; color: #fff; }
.trn2-ucard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trn2-ucard__thumb .trnd-mini { position: absolute; inset: 0; }
.trn2-ucard__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trn2-ucard__title { font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn2-ucard__meta { font-size: var(--fs-xs); }
.trn2-ucard__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.trn2-ucard__tags .trn-chip { min-height: 20px; padding: 1px 6px; font-size: 10px; }
.trn2-ucard__foot { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.trn2-ucard__zeit { font-size: var(--fs-xs); color: var(--c-black); }
.trn2-ucard__trans { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; background: var(--c-fill-soft, rgba(8,102,245,0.12)); color: var(--c-fill); font-size: 10px; font-weight: 800; }
.trn2-umodal .cmodal__box { width: min(1180px, calc(100vw - 40px)); max-width: none; }
.trn2-umodal__unit { min-width: 0; }
.trn2-umeta { display: grid; grid-template-columns: minmax(220px, 1.8fr) 110px 130px 170px; gap: 10px; margin-bottom: 10px; }
.trn2-urules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 11px; border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface-2); margin-bottom: 12px; }
.trn2-urule { min-width: 0; }
.trn2-urule .trn-chips { margin-bottom: 5px; }
.trn2-useclbl { font-size: var(--fs-sm); font-weight: 800; margin: 12px 0 2px; }
.trn2-usechelp { font-size: var(--fs-xs); margin-bottom: 8px; }
.trn2-umodal .cmodal__foot { display: flex; gap: 8px; align-items: center; }
.trn2-umodal__spacer { flex: 1; }
@media (max-width: 1150px) { .trn2-ugrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trn2-umeta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .trn2-ulayout { grid-template-columns: 1fr; } .trn2-ugrid { grid-template-columns: 1fr; } .trn2-urules { grid-template-columns: 1fr; } .trn2-umeta { grid-template-columns: 1fr; } }

/* Trainings NEU · Uebungen-KI (Leiste, Assistent, Uebersetzungen, Mikrofon) */
.trn2-aibar { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--c-line-strong); border-radius: 11px; background: var(--c-surface-2); margin-bottom: 12px; }
.trn2-mic { width: 40px; height: 38px; flex: none; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-white); color: var(--c-fill); font-size: 15px; cursor: pointer; }
.trn2-mic.is-listening { background: #5c1621; color: #ff8b93; border-color: #a74049; }
.trn2-aimodal .cmodal__box { width: min(980px, calc(100vw - 40px)); max-width: none; }
.trn2-ai__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.trn2-ai__chat { min-height: 380px; grid-template-rows: minmax(220px, 1fr) auto; }
.trn2-ai__composer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; margin-bottom: 5px; }
.trn2-ai__draft { border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface-2); padding: 12px; align-self: start; display: grid; gap: 8px; }
.trn2-ai__field { border-bottom: 1px solid var(--c-line); padding-bottom: 7px; font-size: var(--fs-sm); display: grid; gap: 2px; }
.trn2-ai__field span.muted { font-size: var(--fs-xs); }
.trn2-ai__field--txt span:last-child { font-size: var(--fs-xs); line-height: 1.4; }
.trn2-ai__use { width: 100%; }
.trn2-translist { display: grid; gap: 8px; margin: 8px 0 12px; }
.trn2-transnone { margin: 6px 0 12px; font-size: var(--fs-sm); }
.trn2-transwrap { min-width: 0; }
.trn2-transcard { border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); overflow: hidden; }
.trn2-transcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.trn2-transcard__head b { display: block; font-size: var(--fs-sm); }
.trn2-transcard__head small { display: block; font-size: var(--fs-xs); margin-top: 1px; }
.trn2-transcard__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.trn2-transcard__wait { padding: 14px; font-size: var(--fs-sm); }
.trn2-transcard__err { padding: 10px 12px; color: var(--danger); font-size: var(--fs-sm); }
.trn2-transgrid { margin: 8px; }
@media (max-width: 900px) { .trn2-ai__layout { grid-template-columns: 1fr; } }

/* Trainings NEU · Tab "Trainingsplaene" */
.trn2-playout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.trn2-playout.is-open { grid-template-columns: 285px minmax(0, 1fr); }
.trn2-pfilter { position: sticky; top: 8px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.trn2-pfilter__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.trn2-pfilter__note { padding: 8px 9px; border: 1px dashed var(--c-line); border-radius: 8px; font-size: var(--fs-xs); line-height: 1.4; margin-bottom: 10px; }
.trn2-fgroup.is-off { opacity: 0.35; pointer-events: none; }
.trn2-fdates { display: grid; gap: 6px; }
.trn2-fdates label { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 6px; color: var(--c-muted); font-size: var(--fs-xs); }
.trn2-fdates input, .trn2-fnums input { height: 31px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface-2); color: var(--c-black); padding: 0 7px; font: inherit; font-size: var(--fs-xs); min-width: 0; }
.trn2-fnums { display: grid; grid-template-columns: 1fr auto 1fr; gap: 5px; align-items: center; }
.trn2-fnums span { color: var(--c-muted); }
.trn2-finput { width: 100%; height: 33px; }
.trn2-pmain { min-width: 0; }
.trn2-pmaintop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.trn2-subnav { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-white); }
.trn2-subtab { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--c-muted); padding: 0 11px; font-size: var(--fs-xs); font-weight: 800; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.trn2-subtab span { min-width: 20px; height: 20px; border-radius: 999px; background: var(--c-surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; padding: 0 5px; }
.trn2-subtab.is-on { background: var(--c-fill-soft, rgba(8,102,245,0.12)); color: var(--c-fill); }
.trn2-psearchbar { display: flex; align-items: center; gap: 8px; min-width: 270px; flex: 1 1 300px; }
.trn2-psearchbar .trn2-usearch { flex: 1; }
.trn2-fcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-fill); color: #fff; font-size: 10px; font-weight: 800; }
.trn2-plist { overflow: hidden; padding: 0; }
.trn2-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 38px; padding: 0 10px; gap: 8px; border-bottom: 1px solid var(--c-line); }
.trn2-prow:last-child { border-bottom: 0; }
.trn2-prow:hover { background: var(--c-surface-2); }
.trn2-prow__title { min-width: 0; display: flex; align-items: center; gap: 5px; }
.trn2-prow__title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); font-weight: 700; }
.trn2-prow__edit { opacity: 0; border: 0; background: none; color: var(--c-muted); padding: 2px 3px; cursor: pointer; font-size: 11px; flex: none; }
.trn2-prow:hover .trn2-prow__edit { opacity: 1; }
.trn2-prow__edit:hover { color: var(--c-fill); }
.trn2-prow__side { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.trn2-prow__kind { font-size: 10px; font-style: normal; }
.trn2-prow__del { border: 0; background: none; color: var(--c-muted); font-size: 13px; padding: 2px 4px; cursor: pointer; opacity: 0; }
.trn2-prow:hover .trn2-prow__del { opacity: 1; }
.trn2-prow__del:hover { color: var(--danger); }
.trn2-plist .trn2-empty { padding: 18px; }

/* Erstellen-Modal */
.trn2-cmodal .cmodal__box { width: min(800px, calc(100vw - 40px)); max-width: none; }
.trn2-cbasics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trn2-chelp { font-size: var(--fs-xs); margin-top: 4px; }
.trn2-crules { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); flex-wrap: wrap; }
.trn2-crules__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.trn2-cfit { font-size: var(--fs-xs); text-align: right; max-width: 300px; }
.trn2-cfit.is-good { color: var(--success, #16a34a); }
.trn2-cfit.is-warn { color: #b45309; }
.trn2-cwarn { margin-top: 10px; border: 1px solid #8b6124; border-radius: 10px; background: rgba(245, 166, 70, 0.1); padding: 10px; font-size: var(--fs-sm); }
.trn2-cwarn__row { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.trn2-cwarn__row label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.trn2-chint { display: flex; align-items: center; gap: 8px; margin: 15px 0 8px; padding: 8px 10px; border-radius: 9px; background: var(--c-surface-2); font-size: var(--fs-sm); }
.trn2-chint span { color: var(--c-fill); font-size: 15px; }
.trn2-clist { display: grid; gap: 8px; margin-top: 8px; }
.trn2-cchoice { border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface-2); overflow: hidden; }
.trn2-cchoice[open] { border-color: var(--c-fill); }
.trn2-cchoice summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; cursor: pointer; list-style: none; }
.trn2-cchoice summary::-webkit-details-marker { display: none; }
.trn2-cchoice__ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--c-fill-soft, rgba(8,102,245,0.12)); color: var(--c-fill); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.trn2-cchoice__main { min-width: 0; flex: 1; }
.trn2-cchoice__main b { display: block; font-size: var(--fs-sm); }
.trn2-cchoice__main small { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.35; }
.trn2-cchoice__chev { color: var(--c-muted); transition: transform 0.15s; }
.trn2-cchoice[open] .trn2-cchoice__chev { transform: rotate(180deg); }
.trn2-cchoice__body { border-top: 1px solid var(--c-line); padding: 10px; }
.trn2-cchoice__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.trn2-cchoice__foot span { font-size: var(--fs-xs); color: var(--c-muted); }
.trn2-ctplprev { border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-white); padding: 8px; display: grid; gap: 5px; }
.trn2-ctplprev__row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.trn2-ctplprev__row i { width: 34px; height: 16px; border-radius: 3px; background: #7cb767; flex: none; }
.trn2-calgo { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-white); cursor: pointer; margin-bottom: 7px; }
.trn2-calgo b { display: block; font-size: var(--fs-xs); }
.trn2-calgo small { display: block; font-size: var(--fs-xs); line-height: 1.35; margin-top: 2px; }
.trn2-cdivider { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: var(--fs-xs); margin: 13px 0 4px; }
.trn2-cdivider::before, .trn2-cdivider::after { content: ""; height: 1px; background: var(--c-line); flex: 1; }
.trn2-cfoot { margin-top: 12px; padding: 0; border: 0; background: none; display: flex; justify-content: flex-end; }
@media (max-width: 820px) { .trn2-playout.is-open { grid-template-columns: 1fr; } .trn2-pfilter { position: static; max-height: none; } .trn2-cbasics { grid-template-columns: 1fr; } }

/* Trainings NEU · Plan-Editor + Vorschau/Druck */
.trn2-emodal .cmodal__box { width: min(1380px, calc(100vw - 28px)); max-width: none; }
.trn2-ectx { display: flex; align-items: center; gap: 18px; padding: 9px 10px; margin-bottom: 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); flex-wrap: wrap; }
.trn2-ectx__val { font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }
.trn2-etoolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.trn2-seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: 9px; overflow: hidden; background: var(--c-white); }
.trn2-seg__btn { height: 32px; border: 0; background: transparent; color: var(--c-muted); padding: 0 12px; font-size: var(--fs-xs); font-weight: 800; cursor: pointer; }
.trn2-seg__btn.is-on { background: var(--c-fill-soft, rgba(8,102,245,0.12)); color: var(--c-fill); }
.trn2-eheader { margin-top: 10px; }
.trn2-eslots { margin-top: 10px; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: var(--c-surface-2); }
.trn2-eslots__head, .trn2-eslot { display: grid; grid-template-columns: 40px 200px minmax(0, 1fr) 90px 210px; gap: 0; align-items: center; }
.trn2-eslots__head { background: var(--c-white); font-size: 10px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--c-muted); font-weight: 800; }
.trn2-eslots__head > div { padding: 7px 9px; border-right: 1px solid var(--c-line); }
.trn2-eslot { min-height: 62px; border-top: 1px solid var(--c-line); }
.trn2-eslot > div { padding: 8px 9px; border-right: 1px solid var(--c-line); min-width: 0; }
.trn2-eslot__n { text-align: center; }
.trn2-eslot__unit { display: flex; align-items: center; gap: 9px; }
.trn2-eslot__dauer { width: 100%; min-width: 0; height: 32px; border: 1px solid var(--c-line-strong); border-radius: 7px; background: var(--c-white); color: var(--c-black); padding: 0 7px; font-size: var(--fs-xs); }
.trn2-eslot__act { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
.trn2-pickthumb { width: 52px; height: 40px; border-radius: 6px; background: #7cb767; position: relative; overflow: hidden; flex: none; display: inline-block; }
.trn2-pickthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trn2-pickmain { min-width: 0; }
.trn2-pickmain b { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn2-pickmain small { display: block; font-size: var(--fs-xs); margin-top: 1px; }
.trn2-pickwrap { position: fixed; inset: 0; z-index: 340; background: var(--c-overlay, rgba(2,8,20,0.55)); display: flex; align-items: center; justify-content: center; padding: 24px; }
.trn2-pickwrap[hidden] { display: none; }
.trn2-pickcard { width: min(860px, 94vw); max-height: 84vh; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--c-line-strong); border-radius: 14px; background: var(--c-white); box-shadow: var(--shadow-modal, 0 30px 70px rgba(0,0,0,0.5)); overflow: hidden; }
.trn2-pickcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-line); }
.trn2-pickcard__head b { display: block; font-size: var(--fs-md); }
.trn2-pickcard__head small { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.trn2-pickhost { overflow: auto; padding: 12px 14px; }
.trn2-pickfilters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface-2); margin-bottom: 9px; font-size: var(--fs-xs); }
.trn2-picktools { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.trn2-picktools .trn2-usearch { flex: 1; }
.trn2-picklist { display: grid; }
.trn2-pickitem { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--c-line); }
.trn2-pickitem:last-child { border-bottom: 0; }
.trn2-pickitem:hover { background: var(--c-surface-2); }
.trn2-picktags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.trn2-picktags .trn-chip { min-height: 19px; padding: 1px 6px; font-size: 10px; }
.trn2-prevnote { font-size: var(--fs-xs); margin-bottom: 8px; }

/* Vorschau-Seiten (hell, druckgetreu) */
.trn2-pages { display: grid; gap: 18px; justify-items: center; padding: 8px; background: #dfe5ec; border-radius: 10px; }
.trn2-page { width: min(100%, 930px); background: #fff; color: #111827; padding: 20px 22px 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); border-radius: 3px; }
.trn2-pvbrand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 40px; margin-bottom: 8px; font-size: 11px; color: #4b5563; }
.trn2-pvbrand b { text-align: center; font-size: 17px; color: #111827; }
.trn2-pvbrand span:last-child { text-align: right; font-weight: 700; }
.trn2-pvhead { display: grid; border-top: 1px solid #5f6670; border-left: 1px solid #5f6670; }
.trn2-pvgap { height: 26px; }
.trn2-pvcell { min-width: 0; padding: 5px 6px; border-right: 1px solid #5f6670; border-bottom: 1px solid #5f6670; font-size: 10px; line-height: 1.3; overflow: hidden; }
.trn2-pvcell.is-label { font-weight: 800; background: #ececec; }
.trn2-pvcell.is-title { font-size: 15px; font-weight: 800; text-align: center; border-color: transparent; display: flex; align-items: center; justify-content: center; }
.trn2-pvcell.is-logo { font-weight: 800; text-align: center; color: #6b7280; border-color: transparent; display: flex; align-items: center; justify-content: center; }
.trn2-pvcell.is-legend { text-align: center; }
.trn2-pvcell strong { display: block; font-size: 10px; margin-bottom: 2px; }
.trn2-pvcell.is-grafik { background: #eef4ea; position: relative; padding: 4px; }
.trn2-pvcell--empty { color: #94a3b8; text-align: center; padding: 18px; }
.trn2-pvimg { width: 100%; max-height: 150px; object-fit: contain; display: block; }
.trn2-pvsection { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 6px 8px; border: 1px solid #5f6670; border-bottom: 0; background: #ececec; font-size: 11px; }
.trn2-pvsection b { font-size: 12px; }
.trn2-pvgrid { display: grid; border-top: 1px solid #5f6670; border-left: 1px solid #5f6670; }
.trn2-pvfoot { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 16px; font-size: 9px; color: #4b5563; }
.trn2-pvfoot span:nth-child(2) { text-align: center; }
.trn2-pvfoot span:nth-child(3) { text-align: right; }

@page trn2 { size: A4 portrait; margin: 10mm; }
@media print {
  body:has(.trn2-pages) * { visibility: hidden !important; }
  .trn2-pages, .trn2-pages * { visibility: visible !important; }
  .trn2-pages { position: absolute; inset: 0; display: block; padding: 0; background: #fff; border-radius: 0; page: trn2; }
  .trn2-page { width: 100%; min-width: 0; box-shadow: none; border-radius: 0; break-after: page; page-break-after: always; margin: 0 0 10mm; }
  .trn2-page:last-child { break-after: auto; page-break-after: auto; }
}
@media (max-width: 900px) { .trn2-eslots__head, .trn2-eslot { grid-template-columns: 32px minmax(0, 1fr) 150px; } .trn2-eslots__head > div:nth-child(2), .trn2-eslot > div:nth-child(2), .trn2-eslots__head > div:nth-child(4), .trn2-eslot > div:nth-child(4) { display: none; } .trn2-eslot__act { justify-content: flex-start; } }

/* ---------- Trainings NEU · T7: Import-Hub, Tages-Popup, Bulk-Tags ---------- */
.trn2-imodal .cmodal__box { width: min(680px, calc(100vw - 32px)); }
.trn2-implist { display: grid; gap: 10px; }
.trn2-impcard { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--c-line); border-radius: 10px; padding: 14px 16px; background: var(--c-surface-2); }
.trn2-impcard__txt { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.trn2-impcard__txt small { line-height: 1.45; }
.trn2-impbtn { position: relative; overflow: hidden; cursor: pointer; }
.trn2-impbtn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; }
.trn2-impwait { flex-basis: 100%; display: none; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.trn2-impspin { width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid var(--c-line-strong);
  border-top-color: var(--c-fill); border-radius: 50%; animation: magent-spin 0.8s linear infinite; }
.trn2-impcard.htmx-request .trn2-impwait { display: flex; }
.trn2-impcard.htmx-request .trn2-impbtn { opacity: 0.5; pointer-events: none; }
.trn2-impopen { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trn2-impopen .trn2-kicker { flex-basis: 100%; }

.trn2-daypop .cmodal__box { width: min(560px, calc(100vw - 32px)); }
.trn2-dayrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface-2); }
.trn2-dayrow + .trn2-dayrow { margin-top: 8px; }
.trn2-dayrow__txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }

.timp-bulk { margin-bottom: 12px; }
.timp-bulk__head { display: grid; gap: 2px; margin-bottom: 10px; }
.timp-bulk__go { align-self: center; }

/* ---------- Trainings NEU: eingebettete Trainingsplan-Werkstatt ---------- */
.trn2-hbtns { display: flex; align-items: center; gap: 8px; }
.trn2-wbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.trn2-wframe { width: 100%; height: calc(100vh - 210px); min-height: 480px; border: 1px solid var(--c-line);
  border-radius: 12px; background: #0b1220; }

/* ---------- Trainings NEU: «Übung erstellen» (Werkstatt) ---------- */
.trn2-uneumodal .cmodal__box { width: min(1180px, calc(100vw - 32px)); }
.trn2-uneu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.trn2-uneu__left .trnd-editor { border: none; padding: 0; }
.trn2-uneu__right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.trn2-uneu__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.trn2-uneu__taglist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--c-line); border-radius: 10px; padding: 8px; background: var(--c-surface-2); }
.trn2-uneu__tag { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.trn2-uneu__tag:hover { background: var(--c-hover); }
.trn2-uneu__tag.is-off { opacity: 0.55; cursor: default; }
.trn2-uneu__tag input { flex: 0 0 auto; }
.trn2-uneu__newtag { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px; }
.trn2-uneu__newtag summary { cursor: pointer; font-weight: 600; }
.trn2-uneu__newtag .field { margin-top: 8px; }
.trn2-uneu__newtagrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.trn2-uneu__status.is-warn { color: var(--danger, #c0341d); }
@media (max-width: 980px) {
  .trn2-uneu { grid-template-columns: minmax(0, 1fr); }
}

/* ============ VIDEOANALYSE ============ */
.vwarn { border: 1px solid var(--danger, #c0341d); color: var(--danger, #c0341d);
  border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 0.92em; }
.vconsent { display: flex; align-items: center; gap: 14px; border: 1px solid var(--c-line);
  border-radius: 10px; padding: 10px 12px; margin: 8px 0 16px; background: #fff7ee; }
.vconsent--on { background: #f0f9f0; }
.vconsent__txt { flex: 1; font-size: 0.9em; line-height: 1.45; }
.vupload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.vupload__title { flex: 1; min-width: 180px; }
.vupload__err { flex-basis: 100%; margin: 4px 0 0; }
.vdone { border: 1px solid #bfe0bf; background: #f0f9f0; color: #1c6b2a; border-radius: 10px;
  padding: 8px 12px; margin: 8px 0 0; font-size: 0.92em; line-height: 1.45; }
.vinbox__row { gap: 10px; }
.vinbox__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vinbox__form { display: flex; align-items: center; gap: 8px; }
.vbadge { display: inline-block; border-radius: 8px; padding: 1px 7px; font-size: 0.8em; font-weight: 600; }
.vbadge--open, .vbadge--pending { background: #fff1d6; color: #8a5a00; }
.vbadge--auto { background: #e8eefb; color: #2a4d9b; }
.vbadge--confirmed, .vbadge--corrected { background: #e2f4e2; color: #1c6b2a; }
.vbadge--err { background: #fde5e0; color: var(--danger, #c0341d); }
.vtab__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vtab__meta { font-size: 0.55em; font-weight: 400; }
.vtab__spacer { flex: 1; }
.vtab__player video { width: 100%; max-width: 640px; border-radius: 10px; background: #000; display: block; }
.vask { display: flex; align-items: flex-end; gap: 10px; }
.vask textarea { flex: 1; resize: vertical; }
.vjob { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.vjob__head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.vjob__pct { margin-left: auto; }
.vjob__bar { height: 6px; border-radius: 4px; background: var(--c-line); margin-top: 8px; overflow: hidden; }
.vjob__fill { height: 100%; background: #2a4d9b; transition: width 0.6s ease; }
.vjob__q { margin-top: 6px; }
.vjob__spin { width: 12px; height: 12px; border: 2px solid var(--c-line); border-top-color: #2a4d9b;
  border-radius: 50%; animation: vspin 0.9s linear infinite; }
@keyframes vspin { to { transform: rotate(360deg); } }
.vreview__q { font-weight: 600; margin: 6px 0 10px; }
.vreview__clip { width: 100%; max-width: 560px; border-radius: 10px; background: #000; display: block; margin-bottom: 10px; }
.vreview__opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vstat__pend { color: #8a5a00; font-weight: 600; margin-left: 2px; }
.vtab__cost { margin-top: 10px; font-size: 0.85em; }

/* Trainings NEU: Themaabhaengige Felder — «Beschreiben» in der Tagesregel-Matrix */
.trn2-mx__desc { margin-top: 6px; width: 100%; border: 1px dashed var(--c-line); border-radius: 8px;
  background: none; color: var(--c-text-2); font: inherit; font-size: 11px; font-weight: 700;
  padding: 5px 8px; cursor: pointer; }
.trn2-mx__desc:hover { border-color: var(--c-blue); color: var(--c-blue); }
.trn2-mx__desc.has-vals { border-style: solid; border-color: var(--c-blue); color: var(--c-blue); }
.trn2-descov { position: fixed; inset: 0; z-index: 90; background: rgba(5, 8, 14, .55);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.trn2-descbox { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px;
  width: min(640px, 94vw); max-height: 84vh; overflow: auto; padding: 18px; }
.trn2-descbox__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.trn2-descbox__head b { font-size: 15px; }
.trn2-desc__row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 12px;
  align-items: start; padding: 10px 0; border-top: 1px solid var(--c-line); }
.trn2-desc__name b { font-size: 12.5px; display: block; }
.trn2-desc__name small { display: block; margin-top: 2px; }
.trn2-desc__row textarea { width: 100%; resize: vertical; }
.trn2-desc__ck { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.trn2-desc__bild { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.trn2-desc__bild img { max-height: 72px; max-width: 160px; border-radius: 8px;
  border: 1px solid var(--c-line); }
.trn2-descbox__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; }

/* Anwesenheitsmatrix: Legende als Stempel-Werkzeug */
.amx__lgbtn { display: inline-flex; align-items: center; gap: var(--sp-2); background: none;
  border: 1px solid transparent; border-radius: 8px; padding: 2px 7px; margin: -2px -1px;
  color: inherit; font: inherit; font-size: var(--fs-micro); cursor: pointer; white-space: nowrap; }
.amx__lgbtn:hover { border-color: var(--c-line-strong); }
.amx__lgbtn.is-armed { border-color: var(--c-blue); color: var(--c-blue);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-blue) 35%, transparent); }
.amx__lgbtn--static { cursor: default; }
.amx__lgbtn--static:hover { border-color: transparent; }
.amx-stampmode .amx__cell[data-pid]:not([data-paused]),
.amx-stampmode .amx__col-type { cursor: crosshair; }

/* Entwicklungs-Chart: Verteilungs-Ansicht (Histogramme, ein Diagramm je Kennzahl) */
.devdist { display: flex; flex-direction: column; gap: 6px; }
.devdist__title { font-size: var(--fs-micro); font-weight: 700; color: var(--c-text-2); margin: 2px 0 0 46px; }
.devx__modeseg--off { opacity: .45; }
.devx__modeseg--off .devx__segbtn { cursor: not-allowed; }

/* Termin-Umfragen (Anwesenheitsliste): Popups Erstellen/Liste/Detail */
.upoll__daterow { display: flex; gap: 12px; }
.upoll__daterow .field { flex: 1; }
.upoll__wds { display: flex; gap: 10px; flex-wrap: wrap; }
.upoll__wd { display: flex; gap: 5px; align-items: center; font-size: 13px; }
.upoll__ck { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0 12px; }
.upoll__share { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.upoll__link { flex: 1; min-width: 200px; font-size: 12px; color: var(--c-text-2); }
.upoll__kicker { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-muted); margin: 14px 0 8px; }
.upoll__status { display: inline-block; margin-left: 10px; vertical-align: 2px; border-radius: 999px;
  padding: 2px 10px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.upoll__status.is-open { background: color-mix(in srgb, var(--c-blue) 18%, transparent); color: var(--c-blue); }
.upoll__status.is-closed { background: var(--c-fill); color: var(--c-muted); }
.upoll__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.upoll__day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 6px 7px; }
.upoll__day.has-n { border-color: var(--c-blue);
  background: color-mix(in srgb, var(--c-blue) 8%, transparent); }
.upoll__daywd { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-muted); }
.upoll__daywd b { color: var(--c-text); font-size: 11px; }
.upoll__dayn { font-size: 17px; font-weight: 800; color: var(--c-muted); }
.upoll__day.has-n .upoll__dayn { color: var(--c-blue); }
.upoll__daynamen { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.upoll__dn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; border-radius: 7px; padding: 1px 7px; }
.upoll__dn--da { color: var(--c-text-2); background: var(--c-fill); }
.upoll__dn--zu { color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 16%, transparent); }
.upoll__daybtn { margin-top: 3px; border: 1px solid var(--c-blue); border-radius: 8px; background: none;
  color: var(--c-blue); font: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 9px; cursor: pointer; }
.upoll__daybtn:hover { background: color-mix(in srgb, var(--c-blue) 15%, transparent); }
.upoll__daytype { position: absolute; top: 4px; right: 5px; font-size: 8.5px; font-weight: 800;
  color: var(--c-muted); }
.upoll__dayx { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: var(--c-blue); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
  display: grid; place-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); z-index: 2; }
.upoll__dayx:hover { background: var(--danger); }
.upoll__kicker--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.upoll__addtag { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.upoll__row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--c-line);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 6px; }
.upoll__avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid;
  place-content: center; font-size: 12px; font-weight: 800; color: var(--c-blue);
  background: color-mix(in srgb, var(--c-blue) 16%, transparent); }
.upoll__avatar.is-done { color: var(--c-muted); background: var(--c-fill); }
.upoll__rowmain { flex: 1; min-width: 0; }
.upoll__rowmain b { display: block; font-size: 13px; margin-bottom: 3px; }
.upoll__ok { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--c-muted); }
.upoll__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.upoll__chip { display: inline-block; border: 1px solid var(--c-line); border-radius: 7px;
  padding: 1px 7px; font-size: 10.5px; font-weight: 600; color: var(--c-text-2); }
.upoll__chip--more { border-style: dashed; color: var(--c-muted); }
.upoll__empty { font-size: 12.5px; border: 1px dashed var(--c-line); border-radius: 10px;
  padding: 12px; }
.upoll__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; flex-wrap: wrap; }
.upoll__foot-ghosts { display: flex; gap: 6px; flex-wrap: wrap; }
.upoll__legende { font-size: 11px; margin-top: 10px; line-height: 1.45; }
.upoll__neu { display: inline-block; background: color-mix(in srgb, var(--c-blue) 18%, transparent);
  color: var(--c-blue); border-radius: 8px; padding: 0 7px; font-size: 10px; font-weight: 700; }
.upoll__done { background: color-mix(in srgb, var(--c-blue) 12%, transparent);
  border: 1px solid var(--c-blue); border-radius: 10px; padding: 8px 12px; font-size: 12.5px;
  margin-bottom: 12px; }

/* ===== Export der Anwesenheitskontrolle (J+S-CSV, templates/_awk_export.html) ===== */
.awk .cmodal__body { display: flex; flex-direction: column; gap: 12px; }
.awk__range { display: flex; gap: 12px; }
.awk__range .field { flex: 1 1 0; }
.awk__hint { font-size: var(--fs-sm); margin: 0; }
.awk__sum { display: flex; gap: 8px; flex-wrap: wrap; }
.awk__sumbox { flex: 1 1 90px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-white); }
.awk__sumbox--wide { flex: 2 1 180px; }
.awk__sumbox strong { font-size: var(--fs-md); color: var(--c-black); }
.awk__sumbox span { font-size: var(--fs-sm); color: var(--c-muted); }
.awk__warn { border-radius: var(--radius-md); padding: 9px 12px; font-size: var(--fs-sm); }
.awk__warn--err { background: var(--danger-soft); color: var(--danger); }
.awk__warn--warn { background: var(--warning-soft); color: var(--warning); }
.awk__warn--ok { background: var(--success-soft); color: var(--success); }
.awk__warnt { font-weight: 600; }
.awk__warnl { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.awk__spec summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-muted); }
.awk__specbox { font-size: var(--fs-sm); color: var(--c-muted); padding-top: 6px; }
.awk__specbox code { font-size: var(--fs-sm); word-break: break-word; }
.awk__specbox ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.btn.is-disabled { opacity: .5; pointer-events: none; }

/* ===== Kader: Spieler/Trainer als Reiter im Panel (ein Sidebar-Eintrag) ===== */
.lv__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); margin: 0 0 var(--sp-3); }
.lv__tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: var(--fs-base);
  color: var(--c-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lv__tab:hover { color: var(--c-black); background: var(--c-hover); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.lv__tab.is-active { color: var(--c-fill); border-bottom-color: var(--c-fill); font-weight: 600; }
.lv__tabn { font-size: var(--fs-sm); color: var(--c-faint); background: var(--c-surface-2);
  border-radius: var(--radius-full); padding: 1px 7px; }
.lv__tab.is-active .lv__tabn { color: var(--c-fill); background: var(--c-fill-soft); }
.tnode__notif--count { background: var(--c-surface-2); color: var(--c-muted); }
.awk__sel { display: flex; flex-direction: column; gap: 12px; }
.awk__typen { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.awk__personen { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 6px; }
.awk__chk { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--c-black); }
.awk__search { width: 100%; }
.lv__head--row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.lv__headbtn { font-weight: 400; }

/* ===== Anwesenheitsliste: Sprungmarken zum Nachladen weiterer Saisons ===== */
.amx__more td { padding: 0; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.amx__morebtn { width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--c-muted); letter-spacing: .02em; }
.amx__morebtn:hover { background: var(--c-hover); color: var(--c-fill); }
.amx__morebtn.htmx-request { color: var(--c-fill); opacity: .7; cursor: progress; }
/* --- Spielerspezifische Vorgaben des Positionszuteilungs-Algorithmus (Editoren) --- */
.algoreq { width: min(720px, calc(100vw - 40px)); }
.algo__reqrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.algo__reqedit { white-space: nowrap; }
.algoreq__tools { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.algoreq__pick { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.algoreq__pick select { 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; }
.algoreq__formation { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.algoreq__fh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-weight: 700; font-size: var(--fs-base); color: var(--c-black); margin-bottom: 8px; }
.algoreq__fmax { font-size: var(--fs-micro); color: var(--c-muted); font-weight: 500; }
.algoreq__grid { border-collapse: collapse; }
.algoreq__grid th, .algoreq__grid td { padding: 4px 10px; font-size: var(--fs-sm); text-align: center; }
.algoreq__grid th { color: var(--c-muted); font-weight: 600; }
.algoreq__mname { text-align: left !important; color: var(--c-black) !important; }
.algoreq__grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-fill); cursor: pointer; }
.algoreq__acts { margin: 10px 0 4px; }
.algoreq__exh { font-weight: 700; font-size: var(--fs-sm); color: var(--c-black); margin: 14px 0 6px; }
.algoreq__exlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.algoreq__exrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.algoreq__kind { font-size: var(--fs-micro); font-weight: 700; border-radius: var(--radius-full); padding: 1px 8px; border: 1px solid var(--c-line-strong); color: var(--c-muted); }
.algoreq__kind--apart { border-color: var(--danger); color: var(--danger); }
.algoreq__kind--together { border-color: var(--ok, #2e8b57); color: var(--ok, #2e8b57); }
.algoreq__kinds { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); margin-bottom: 8px; }
.algoreq__pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 10px; margin-bottom: 10px; }
.algoreq__pcheck { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); cursor: pointer; }
.algoreq__tsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-sm); margin-bottom: 6px; }
.algoreq__tspick { display: inline-flex; flex-wrap: wrap; gap: 8px; color: var(--c-muted); }
.algoreq__tspick label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.algoreq__err { border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--c-white)); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 10px; font-size: var(--fs-sm); }
.algoreq__errh { font-weight: 700; color: var(--danger); }
.algoreq__errlist { margin: 6px 0 0; padding-left: 18px; }
.algoreq__warn { font-size: var(--fs-sm); color: var(--danger); margin-top: 3px; }
.algoreq__warn ul { margin: 3px 0 0; padding-left: 18px; }
.algoreq__ok { font-size: var(--fs-sm); color: var(--ok, #2e8b57); font-weight: 600; margin-bottom: 8px; }
.algoreq__hint { font-size: var(--fs-micro); color: var(--c-muted); }
.algoreq__empty { color: var(--c-muted); font-size: var(--fs-sm); }
.algoreq__cell--locked { opacity: .35; }

/* --- Abmeldungs-Frage: ersatzlos entfernen oder Positionen neu zuteilen --- */
.lineupq { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 9px 12px; margin: 8px 0; font-size: var(--fs-sm); }
.lineupq__q { font-weight: 650; margin-bottom: 6px; }
.lineupq__opt { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; cursor: pointer; }
.abslq { border-color: var(--c-line-strong); max-width: 430px; }
.abslq__row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--c-line); }
.abslq__row:last-of-type { border-bottom: none; }
.abslq__txt { font-size: var(--fs-sm); }
.abslq__foot { display: flex; justify-content: flex-end; padding-top: 8px; }
.abslq__hint { font-size: var(--fs-micro); color: var(--c-muted); margin-top: 6px; }
/* Speichern-Knopf der Aufstellung: Spinner während der Anfrage, blauer Haken nach Erfolg. */
.lineup__save .lineup__save-check, .lineup__save .lineup__save-spin { display: none; }
.lineup__form.htmx-request .lineup__save .lineup__save-disk { display: none; }
.lineup__form.htmx-request .lineup__save .lineup__save-spin { display: inline-block; }
.lineup__save.is-saved .lineup__save-disk { display: none; }
.lineup__save.is-saved .lineup__save-check { display: inline; color: var(--c-fill); }
.lineup__save-spin { width: 14px; height: 14px; border: 2px solid var(--c-fill); border-top-color: transparent; border-radius: 50%; animation: lineupspin .7s linear infinite; }
@keyframes lineupspin { to { transform: rotate(360deg); } }
/* Speichern-Knopf im Personen-Formular: Spinner während der Anfrage, blauer Haken nach Erfolg
   (gleiches Muster wie der Aufstellungs-Speichern-Knopf, Event personSaved). */
.phicon--save .phicon-check, .phicon--save .phicon-spin { display: none; }
.pform.htmx-request .phicon--save .phicon-disk { display: none; }
.pform.htmx-request .phicon--save .phicon-spin { display: inline-block; }
.phicon--save.is-saved .phicon-disk { display: none; }
.phicon--save.is-saved .phicon-check { display: inline; color: var(--c-fill); }
.phicon-spin { width: 14px; height: 14px; border: 2px solid var(--c-fill); border-top-color: transparent; border-radius: 50%; animation: lineupspin .7s linear infinite; }