/* ==========================================================================
   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 ---------------------------------------------------------- */
/* 100dvh statt 100vh: Am Handy zählt 100vh die Fläche HINTER der Browserleiste mit,
   dadurch rutscht das untere Ende der App (und damit der Listenrand) unerreichbar aus
   dem Bild. dvh folgt der wirklich sichtbaren Höhe. Die vh-Zeile bleibt als Rückfall
   für Browser ohne dvh stehen; am Laptop sind beide Werte identisch. */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.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; }
/* Am Handy weg: Die Schiene ist 16 px breit mit 10 px hohen Buchstaben — als Tippziel
   unbrauchbar (ein Finger braucht ~44 px), und sie nimmt dem Inhalt Platz weg. Auf dem
   Telefon scrollt man ohnehin, statt Buchstaben anzupeilen. */
@media screen and (max-width: 760px) { .az-rail { display: 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; }
/* Werkzeug-/Legenden-Gruppe: am Laptop löst sie sich auf (die Knöpfe liegen direkt in
   der Leiste, exakt wie vorher) und ihr Schalter ist unsichtbar. Nur am Handy — siehe
   Responsiv-Block — wird daraus ein aufklappbarer Bereich. */
.amx__acts { display: contents; }
.amx__grpbtn { display: none; }
.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: help; }
.amx__warnbubble[hidden] { display: none; }
.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;
  /* Acht Kacheln in EINE Zeile zu zwingen ging nicht auf: Bei 1280 px blieben je
     117 px, das Datum („04.08.2025", 34 px fett) braucht aber 191 px und lief 51 px
     in die Nachbarkachel „Spieler anwesend" hinein. auto-fit legt so viele Kacheln
     nebeneinander, wie bei 150 px Mindestbreite Platz haben, und bricht den Rest in
     eine zweite Zeile um — auf einem breiten Schirm bleibt es bei einer Zeile. Die
     Datumskachel zaehlt doppelt, damit das Datum immer am Stueck steht. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  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; min-height: 86px;
  overflow: hidden; }   /* harte Grenze: kein Text kann mehr in die Nachbarkachel bluten */
.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); grid-column: span 2; }
.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: clamp(24px, 2.2vw, 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; overflow-wrap: anywhere; }
.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; }
/* Die Chart-Leiste brauchte 370 px und bekam am Handy 178: Der Umschalter
   „Verlauf | Verteilung" wurde auf 2 px zusammengedrückt, und weil die Pille
   overflow: hidden trägt, waren beide Knöpfe unsichtbar und damit unerreichbar.
   Umbrechen statt quetschen, und die Pille schrumpft gar nicht mehr.
   (Muss NACH der Regel oben stehen: ein @media erhöht die Spezifität nicht.) */
@media screen and (max-width: 760px) {
  .devx__chartbar { flex-wrap: wrap; }
  .devx__modeseg { flex: none; }
  .devx__mode { margin-left: 0; }
}

.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 */
  /* Die direkt bearbeitbaren Felder (Uhrzeit, Ort, Gegner) trugen ihre Laptop-Groesse
     mit ins Handy: 22 px fett plus der negative Rand liessen „18:00" und „Gegner
     eintragen" aus der 102 px schmalen Kachel laufen. min-width: 0 ist noetig, weil
     ein <input type="time"> sonst die Breite seines Uhr-Symbols als Mindestmass
     behaelt und sich nicht schmaler ziehen laesst. */
  .aday__bedit { font-size: var(--fs-md); min-width: 0; margin-left: 0; margin-right: 0;
    padding-left: 0; padding-right: 0; }
  .aday__bedit--txt { font-size: var(--fs-sm); }
  .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; overflow-x: hidden; min-height: 0; padding: var(--sp-5) 0; }
/* Riegel: Falls doch einmal etwas zu breit wird (Tabelle, Bild), soll es die Spalte
   nicht seitwaerts wegschieben. Code-Bloecke haben ihren eigenen Scroll (chat-pre). */
.chat__col { min-width: 0; }
/* Offene Tastatur: Vom sichtbaren Bereich bleiben oft nur ~330 px. Die grosszügigen
   Abstände von Kopfzeile und Verlauf fressen davon rund 70 px — genug, dass die
   Eingabeleiste unten hinausragt. Solange getippt wird, rücken sie deshalb zusammen.
   Die Klasse setzt das JS (visualViewport), am Laptop kommt sie nie vor. */
/* Das Dokument selbst festnageln, solange die Tastatur offen ist. iOS scrollt die
   Seite sonst weg, um das Eingabefeld ins Bild zu holen — die App bleibt dabei oben
   am Dokument kleben und man sieht darunter den Seitenhintergrund. Ein fest
   positioniertes, unscrollbares Dokument hat nichts mehr zu verschieben. */
body.kb-offen { position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
body.kb-offen .chat__scroll { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
body.kb-offen .chat__top { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.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; }
/* overflow-wrap: anywhere ist hier Pflicht, nicht Kosmetik: Ein langes Wort ohne
   Leerzeichen (eine URL, ein verrutschter Tastendruck) bricht sonst NICHT um. Die
   Blase bleibt zwar bei 80 %, ihr Inhalt schiebt aber den ganzen Chatbereich zur
   Seite — gemessen 285 px Querscroll, wodurch der Text am Handy unter die
   Seitenleiste rutschte und rechts aus dem Bild lief. */
.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; overflow-wrap: anywhere; font-size: var(--fs-base); line-height: 1.45; }
.chat__a { max-width: 100%; min-width: 0; overflow-wrap: anywhere; 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); overflow-wrap: anywhere; }
.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; }
/* Am Handy standen Eingabefeld und Modell-Umschalter nebeneinander: Von den 336 px
   der Zeile blieben der Eingabe 109 px. Der Platzhalter „Stelle eine beliebige Frage …"
   braucht darin 3,7 Zeilen — sichtbar war eine, der Rest abgeschnitten. Der Umschalter
   bekommt deshalb eine eigene Zeile ÜBER der Eingabe (order: -1), damit die Eingabe die
   volle Breite hat und dort bleibt, wo der Daumen sie erwartet: ganz unten.
   (Muss NACH .chat__composer-row stehen: ein @media erhöht die Spezifität nicht.) */
@media screen and (max-width: 760px) {
  /* Wie bei den grossen Messengern: Das Eingabefeld wächst höchstens auf fünf Zeilen
     und scrollt danach in sich selbst. Vorher waren es bis zu 180 px — bei offener
     Tastatur blieb dann für den Verlauf nichts mehr übrig, und das Feld selbst wurde
     oben angeschnitten. Ein kleines Feld ist ausserdem ein kleines Ziel: Es gibt dem
     Browser weniger Anlass, die Seite zu verschieben. */
  .chat__input { max-height: 126px; }
  .chat__composer-row { flex-wrap: wrap; }
  .chat__composer-row .chat__box { flex: 1 1 100%; }
  .chat__model { order: -1; margin-left: auto; min-height: 38px; }
  .chat__model-sel { max-width: none; }   /* eigene Zeile: „Claude" passt wieder ganz hin */
}
/* „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 am Handy: Titel + Saison + Rückgängig/Speichern/Bearbeiten bleiben immer
     sichtbar; die sieben Werkzeug-Knöpfe und die zehnteilige Legende verstecken sich
     hinter je einem Schalter. Ausgeklappt war die Leiste 461 px hoch — das war mehr als
     die halbe Liste. Zugeklappt sind es rund 80 px. */
  .amx__bar { flex-direction: row; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
  .amx__head { font-size: var(--fs-md); }
  /* Zeile 1: Titel + Saison. Zeile 2: die beiden Schalter links, die Werkzeug-Symbole
     rechts. Die aufgeklappten Bereiche hängen sich als Zeile 3 darunter. */
  .amx__grpbtn--leg { order: 1; }
  .amx__hist { order: 2; margin-left: auto; }
  .amx__grpbtn {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-full);
    font-size: var(--fs-sm); color: var(--c-muted); background: var(--c-white); cursor: pointer;
  }
  .amx__grpbtn::after { content: "▾"; font-size: 9px; }
  .amx__grpchk:checked + .amx__grpbtn { color: var(--c-fill); border-color: var(--c-fill); }
  .amx__grpchk:checked + .amx__grpbtn::after { content: "▴"; }
  /* Aufgeklappt: eigene Zeile über die volle Breite, Knöpfe untereinander lesbar. */
  .amx__acts { display: none; }
  .amx__grpchk:checked + .amx__grpbtn + .amx__acts {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); order: 9; flex-basis: 100%; width: 100%; margin-top: 2px;
  }
  .amx__legend { display: none; }
  .amx__grpchk:checked + .amx__grpbtn + .amx__legend {
    display: flex; 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);
  }

  /* Zugeklappte Leiste: Zaehler und Warnung sassen als eigene Spalte NEBEN dem Symbol
     (margin-left: auto) und schoben es aus der Mitte — bei „Anwesenheiten" und „Kader"
     stand das Symbol darum eingerueckt, bei allen anderen mittig. Am Handy gehoert so
     ein Abzeichen an die Ecke des Symbols, wie auf jedem App-Icon. Sobald die Leiste
     aufgeklappt ist (body.sb-open), gilt wieder die normale Zeilenanordnung. */
  body:not(.sb-open) .sidebar .tnode__top { position: relative; }
  body:not(.sb-open) .sidebar .tnode__notif,
  body:not(.sb-open) .sidebar .tnode__alert {
    position: absolute; top: 3px; left: 50%; margin-left: 2px;
    min-width: 12px; width: auto; height: 12px; padding: 0 3px;
    font-size: 9px; line-height: 1; border: 2px solid var(--c-bg); box-sizing: content-box;
  }

  /* Die Knöpfe (Blättern, Speichern) liegen absolut in der Ecke; die Zeile
     „SPIELERPROFIL · KADERSPIELER" wusste nichts davon und lief darunter durch. Ein
     Innenabstand half nicht — „SPIELERPROFIL" ist ein einzelnes langes Wort und ragt
     aus jedem zu schmalen Kasten heraus. Auf dem Telefon bekommen die Knöpfe deshalb
     ein eigenes Band, und der Name rückt darunter. */
  .player-identity { padding-top: 40px; }

  /* Tippziele: Ein Finger trifft zuverlässig ab etwa 44 px, eine Maus ab 20. Die
     Umschalter „Liste | Kalender" (27 px) und „Alle schliessen" (21 px) stecken in
     jeder zweiten Ansicht — die bekommen am Handy Höhe, ohne dass sich am Laptop
     etwas ändert. */
  .lv__vt { padding: 9px 16px; }
  .tab-act { padding: 7px 10px; }

  /* 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; }
.mbx__griff { display: none; }   /* nur am Handy, siehe Responsiv-Block */
/* 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; }
  /* Die Liste bekam fest 45 % und die Leseansicht die restlichen 55 % — auch wenn
     dort nur „Wähle links eine Nachricht" stand. Auf einem Telefon ist das der halbe
     Bildschirm für einen Satz. Jetzt zwei Dinge:
     1. Solange NICHTS ausgewählt ist, gehört der Platz der Liste; der Hinweis
        schrumpft auf seine eine Zeile.
     2. Ein Riegel dazwischen lässt sich ziehen — die Höhe steckt in --mbx-liste und
        wird gemerkt. Sobald gezogen wurde (.ist-gezogen), gilt immer der Wert von
        Hand, auch im leeren Zustand. */
  .mbx__list { width: auto; border-right: 0; border-bottom: 0; flex: none;
    height: var(--mbx-liste, 45%); max-height: none; min-height: 56px; }
  .mbx__read { flex: 1; min-height: 0; }
  .mbx__body:has(.mbx__read-empty):not(.ist-gezogen) .mbx__list { height: auto; flex: 1; }
  .mbx__body:has(.mbx__read-empty):not(.ist-gezogen) .mbx__read { flex: none; }
  /* Der Riegel selbst: hohe Grifffläche (Finger), schmale Linie (Auge). */
  .mbx__griff { display: flex; align-items: center; justify-content: center; flex: none;
    height: 22px; cursor: row-resize; touch-action: none; background: var(--c-surface-2);
    border-top: 1px solid var(--c-line-strong); border-bottom: 1px solid var(--c-line-strong); }
  .mbx__griff > span { display: block; width: 44px; height: 4px; border-radius: 999px;
    background: var(--c-line-strong); }
  .mbx__body.ist-gezogen .mbx__griff > span { background: var(--c-fill); }
  .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; }
/* Ohne min-width: 0 behält dieser Block die Breite seines laengsten Wortes
   („Startaufstellung") als Mindestmass und schiebt sich auf schmalen Schirmen unter
   die Knoepfe rechts — Titel und Kennzahlen-Pille lagen uebereinander. */
.sau-head-txt { 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); }
/* Handy: Auf 390 px ist fuer Titel UND zwei Knoepfe nebeneinander kein Platz — die
   Textspalte wurde auf 0 px gequetscht und lief unter die Knoepfe. Untereinander.
   WICHTIG: Dieser Block muss NACH .sau-head stehen. Ein @media erhoeht die
   Spezifitaet nicht; weiter oben in der Datei gewaenne die Basisregel. */
@media screen and (max-width: 760px) {
  .sau-head { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .sau-head-acts { justify-content: flex-start; }
}
/* 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; }
/* Am Handy bleiben von den 288 px der Zeile für „0 von 0" nur 30 px übrig — der Zähler
   brach auf drei Zeilen um. Umbrechen lassen statt quetschen. (Muss NACH der Regel oben
   stehen: ein @media erhöht die Spezifität nicht.) */
@media screen and (max-width: 760px) {
  .trn2-psearchbar { flex-wrap: wrap; min-width: 0; }
  .trn2-psearchbar .trn2-usearch { flex: 1 1 100%; }
}
.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: Saison nachladen durch Ziehen über den Rand ===== */
.amx__more td { padding: 0; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.amx__morebtn { --p: 0; width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 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); }
/* Der Ring füllt sich mit dem Ziehweg: --p läuft von 0 bis 1. */
.amx__ring { position: relative; width: 26px; height: 26px; flex: none; }
.amx__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.amx__ring circle { fill: none; stroke-width: 3.5; }
.amx__ring-bg { stroke: var(--c-line-strong); }
.amx__ring-fg { stroke: var(--c-fill); stroke-linecap: round;
  stroke-dasharray: 100.53; stroke-dashoffset: calc(100.53 * (1 - var(--p)));
  transition: stroke-dashoffset .08s linear; }
.amx__ring-ic { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; line-height: 1; color: var(--c-faint); transition: color .15s, transform .2s; }

/* Voll: der Ring springt auf die Aktionsfarbe, der Pfeil dreht sich. */
.amx__more.is-ready .amx__morebtn { color: var(--c-fill); }
.amx__more.is-ready .amx__ring-ic { color: var(--c-fill); transform: rotate(180deg); }

/* Während des Ladens dreht der Ring als Spinner. */
.amx__more.is-loading .amx__ring-fg { animation: amxSpin 1s linear infinite; transition: none; }
.amx__more.is-loading .amx__ring-ic { opacity: 0; }
.amx__more.is-loading .amx__morebtn { color: var(--c-fill); cursor: progress; }
@keyframes amxSpin { to { transform: rotate(360deg); transform-origin: 50% 50%; } }

/* Zurückfedern, wenn losgelassen wird, bevor der Ring voll ist. */
.amx__more.is-resetting .amx__ring-fg { transition: stroke-dashoffset .28s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .amx__ring-fg, .amx__ring-ic { transition: none; }
  .amx__more.is-loading .amx__ring-fg { animation: none; }
}
/* --- 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; }

/* ===== Anwesenheitsliste am Handy: eine Zeile je Tag ======================
   Die Matrix (30 Spalten, ~11 000 Zellen je Saison) ist am Telefon weder
   bedienbar noch schnell — mehrere Sekunden Layout. Diese Ansicht zeigt pro Tag
   nur, was am Spielfeldrand zählt; die Personen stehen in der Tagesübersicht,
   die ein Tippen auf die Zeile öffnet. Gerendert wird sie nur, wenn der Server
   weiss, dass er an ein Handy liefert (Cookie cos_vp, siehe base.html) — sie
   existiert also am Laptop gar nicht erst. */
/* table-layout: fixed ist hier Pflicht: Die Zeilen benutzen colspan=99 (wie die
   Sprungmarken), und bei automatischem Layout würde die Tabelle so breit wie ihr
   breitester Inhalt — die Zahl rechts fiele aus dem Bild. Fest heisst: 100 % breit,
   und der Ortsname kürzt sich per Ellipse. */
.amxm__table { width: 100%; display: table; table-layout: fixed; }
.amxm__cell { padding: 0; border-bottom: 1px solid var(--c-line); }
.amxm__day {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px var(--sp-3); text-decoration: none; color: inherit;
  font-size: var(--fs-sm); line-height: 1.25;
}
.amxm__dat { flex: none; display: flex; align-items: baseline; gap: 5px; min-width: 108px; }
.amxm__dat b { font-weight: 600; font-variant-numeric: tabular-nums; }
.amxm__wd { color: var(--c-muted); font-size: var(--fs-micro); }
.amxm__typ { flex: none; }
.amxm__zeit { flex: none; color: var(--c-muted); font-variant-numeric: tabular-nums; }
/* Ort/Gegner darf kürzen — die Zahl rechts muss immer sichtbar bleiben. */
.amxm__ort { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); }
.amxm__zahl { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.amxm__von { font-weight: 400; color: var(--c-muted); }
.amxm__zahl--rot { color: var(--danger); }
.amxm__zahl--rot::after { content: " !"; }
.amxm__chev { flex: none; color: var(--c-faint); font-size: 16px; }
.amxm__frei { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--c-muted); font-style: italic; }

/* Tage ohne Aktivität sind die Mehrheit. Sie bleiben sichtbar (der Kalender soll
   lückenlos sein und man muss einen Typ setzen können), treten aber zurück: halbe
   Höhe, blass, kein Pfeil. */
.amxm__row--leer .amxm__day { padding-top: 3px; padding-bottom: 3px; opacity: .5; }
.amxm__row--leer .amxm__chev { display: none; }
.amxm__row--akt { background: var(--c-white); }
.amxm__row--free .amxm__day { opacity: .75; }
.amxm__row--heute .amxm__day { box-shadow: inset 3px 0 0 var(--c-fill); }
.amxm__row--heute .amxm__dat b { color: var(--c-fill); }
.amxm__row--rot .amxm__day { box-shadow: inset 3px 0 0 var(--danger); }

/* Die Tagesliste scrollt nur senkrecht — kein max-content, keine Inline-Analyse. */
@media screen and (max-width: 760px) {
  .amx__scroll:has(.amxm__table) { white-space: normal; overflow-x: hidden; }
  .amxm__table { display: table; width: 100%; table-layout: fixed; }
}