/* =========================================================================
   MSI Design-System
   Token-basiertes, wiederverwendbares Styling. Additiv gedacht: greift nur
   dort, wo die msi-* Klassen verwendet werden, und bricht keine Bestandsseiten.
   ========================================================================= */

:root{
  /* Marke */
  --msi-brand:#2f9257;         /* MSI Grün */
  --msi-brand-deep:#256e43;
  --msi-brand-soft:#e6f2ea;
  --msi-navy:#16232a;          /* Ink / dunkle Flächen */
  --msi-teal:#0f7c8c;          /* Sekundär-Akzent (Charts) */

  /* Semantik */
  --msi-good:#2f9e5b;
  --msi-warn:#c6870f;
  --msi-bad:#d1495b;

  /* Neutrale (leicht grünstichig) */
  --msi-ink:#16232a;
  --msi-ink-soft:#556169;
  --msi-ink-faint:#8a959b;
  --msi-line:#e4e9e8;
  --msi-card:#ffffff;
  --msi-surface:#f6f8f7;
  --msi-surface-2:#eef2ec;

  /* Form */
  --msi-radius:16px;
  --msi-radius-lg:20px;
  --msi-shadow:0 1px 2px rgba(16,35,42,.05), 0 4px 14px rgba(16,35,42,.05);
  --msi-shadow-hover:0 8px 22px rgba(16,35,42,.12);

  /* Seitenhintergrund (schaltet im Dark Mode um) */
  --msi-page:#ffffff;
  color-scheme: light;
}

/* ---------- Dark Mode ----------
   Tokens werden dunkel überschrieben; Topbar/Tabbar bleiben (nutzen --msi-navy).
   Explizite Wahl via :root[data-theme="dark"]; ohne Wahl folgt es dem System. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --msi-brand-deep:#57bd85;
  --msi-brand-soft:#1d3a2a;
  --msi-good:#3bb46e; --msi-warn:#e0a53a; --msi-bad:#e8697a;
  --msi-ink:#e7ecea; --msi-ink-soft:#9aa4a8; --msi-ink-faint:#727c81;
  --msi-line:#2c373d; --msi-card:#1a2429; --msi-surface:#222d33; --msi-surface-2:#2a353b; --msi-page:#10171b;
  --msi-shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.4);
  --msi-shadow-hover:0 8px 22px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --msi-brand-deep:#57bd85;
    --msi-brand-soft:#1d3a2a;
    --msi-good:#3bb46e; --msi-warn:#e0a53a; --msi-bad:#e8697a;
    --msi-ink:#e7ecea; --msi-ink-soft:#9aa4a8; --msi-ink-faint:#727c81;
    --msi-line:#2c373d; --msi-card:#1a2429; --msi-surface:#222d33; --msi-surface-2:#2a353b; --msi-page:#10171b;
    --msi-shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.4);
    --msi-shadow-hover:0 8px 22px rgba(0,0,0,.55);
  }
}

body{ background:var(--msi-page); }

/* ------------------------------- Basis ---------------------------------- */
.msi-scope{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--msi-ink);
  -webkit-font-smoothing:antialiased;
}
.msi-scope h1,.msi-scope h2,.msi-scope h3{letter-spacing:-.01em;text-wrap:balance;}

/* Formularfelder mobil-freundlich: komfortable Tap-Höhe (>=44px), ruhige Optik.
   Schrift bleibt >=16px, damit iOS beim Fokus nicht hineinzoomt. */
.msi-scope .form-control,.msi-scope .form-select,
.msi-scope input[type=text],.msi-scope input[type=number],
.msi-scope input[type=date],.msi-scope input[type=email],
.msi-scope input[type=password],.msi-scope select,.msi-scope textarea{
  min-height:46px;font-size:16px;padding:10px 14px;border-radius:12px;
  border:1px solid var(--msi-line);background:var(--msi-surface,#fff);color:var(--msi-ink);
}
.msi-scope textarea{min-height:92px;}
/* Selects: mehr vertikaler Raum + natürliche Zeilenhöhe, sonst schneidet iOS die
   Unterlängen der Schrift ab (p/g/y wirkten „abgeschnitten"). */
.msi-scope select,.msi-scope .form-select{min-height:50px;line-height:1.5;
  padding-top:8px;padding-bottom:8px;}
.msi-scope .form-control:focus,.msi-scope .form-select:focus,
.msi-scope input:focus,.msi-scope select:focus,.msi-scope textarea:focus{
  outline:none;border-color:var(--msi-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--msi-brand) 18%,transparent);
}
/* readonly/disabled sichtbar abgesetzt (nicht editierbar) */
.msi-scope input[readonly],.msi-scope input:disabled,
.msi-scope textarea[readonly],.msi-scope select:disabled{
  background:var(--msi-line);color:var(--msi-ink-soft);cursor:default;}
/* Checkboxen/Radios etwas größer für Touch */
.msi-scope input[type=checkbox],.msi-scope input[type=radio]{width:20px;height:20px;}
.msi-scope label{font-size:14px;}

/* Container für die neue Optik (mobil zuerst, zentriert) */
.msi-shell{max-width:760px;margin:0 auto;padding:8px 4px 40px;}
.msi-shell--wide{max-width:1040px;}

/* Kleine neutrale Chips (Kennzahlen, Flags) */
.msi-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;padding:3px 9px;
  border-radius:99px;background:var(--msi-surface);color:var(--msi-ink-soft);border:1px solid var(--msi-line);}
.msi-chip--bad{background:color-mix(in srgb,var(--msi-bad) 12%,transparent);color:#8f2f3c;border-color:transparent;}
.msi-chip--warn{background:color-mix(in srgb,var(--msi-warn) 15%,transparent);color:#8a5a08;border-color:transparent;}

.msi-greet h2{font-size:clamp(22px,5vw,26px);margin:0;}
.msi-greet p{margin:4px 0 0;color:var(--msi-ink-soft);font-size:14px;}

.msi-section-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--msi-ink-faint);margin:26px 4px 10px;}

/* -------------------------- Hero: nächstes Training ---------------------- */
.msi-hero{
  background:linear-gradient(155deg,var(--msi-brand),var(--msi-brand-deep));
  color:#fff;border-radius:var(--msi-radius-lg);padding:20px 20px 18px;
  box-shadow:0 10px 26px color-mix(in srgb,var(--msi-brand) 38%,transparent);
  position:relative;overflow:hidden;
}
.msi-hero::after{content:"";position:absolute;right:-45px;top:-45px;width:160px;height:160px;
  border-radius:50%;background:rgba(255,255,255,.09);}
.msi-hero__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85;}
.msi-hero__plan{font-size:20px;font-weight:750;margin:6px 0 2px;letter-spacing:-.01em;}
.msi-hero__meta{font-size:13.5px;opacity:.92;}
.msi-hero__prog{margin:15px 0 6px;height:7px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;}
.msi-hero__prog span{display:block;height:100%;background:#fff;border-radius:99px;}
.msi-hero__row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;flex-wrap:wrap;}
.msi-hero__row small{font-size:12.5px;opacity:.9;}
.msi-hero__start{background:#fff;color:var(--msi-brand-deep);border:0;font-weight:750;font-size:15px;
  padding:12px 22px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  text-decoration:none;transition:transform .12s ease;}
.msi-hero__start:hover{transform:translateY(-1px);color:var(--msi-brand-deep);}
/* Leerzustand */
.msi-hero--leer{background:var(--msi-card);color:var(--msi-ink);border:1px solid var(--msi-line);
  box-shadow:var(--msi-shadow);}
.msi-hero--leer .msi-hero__k{color:var(--msi-brand-deep);opacity:1;}
.msi-hero--leer .msi-hero__plan{font-size:17px;}
.msi-hero--leer::after{display:none;}

/* ------------------------------- Tiles ---------------------------------- */
.msi-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.msi-tile{background:var(--msi-card);border:1px solid var(--msi-line);border-radius:var(--msi-radius);
  padding:16px;box-shadow:var(--msi-shadow);display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:var(--msi-ink);transition:transform .15s ease, box-shadow .15s ease;}
.msi-tile:hover{transform:translateY(-2px);box-shadow:var(--msi-shadow-hover);color:var(--msi-ink);}
.msi-tile__ic{width:40px;height:40px;border-radius:12px;background:var(--msi-brand-soft);
  color:var(--msi-brand-deep);display:grid;place-items:center;}
.msi-tile__lbl{font-weight:650;font-size:15px;}
.msi-tile__sub{font-size:12px;color:var(--msi-ink-faint);margin-top:-4px;}

/* --------------------------- Eigenschaften-Liste ------------------------- */
.msi-props{background:var(--msi-card);border:1px solid var(--msi-line);border-radius:var(--msi-radius);
  box-shadow:var(--msi-shadow);overflow:hidden;}
.msi-prop{display:flex;align-items:center;gap:13px;padding:14px 16px;border-top:1px solid var(--msi-line);
  text-decoration:none;color:var(--msi-ink);width:100%;background:none;border-left:0;border-right:0;
  border-bottom:0;text-align:left;cursor:pointer;font:inherit;}
.msi-prop:first-child{border-top:0;}
.msi-prop:hover{background:color-mix(in srgb,var(--msi-brand) 5%,transparent);color:var(--msi-ink);}
.msi-prop__ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--msi-teal) 14%,transparent);color:var(--msi-teal);}
.msi-prop__t{font-weight:600;font-size:14.5px;margin-right:auto;}
.msi-prop__v{margin-left:auto;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;}
.msi-prop__v.msi-muted{color:var(--msi-ink-faint);font-weight:600;}
.msi-prop__chev{color:var(--msi-ink-faint);display:grid;place-items:center;}

/* ------------------------------- Buttons -------------------------------- */
.msi-btn{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:14px;
  padding:10px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;}
.msi-btn--primary{background:var(--msi-brand);color:#fff;}
.msi-btn--primary:hover{background:var(--msi-brand-deep);color:#fff;transform:translateY(-1px);}
.msi-btn--ghost{background:var(--msi-card);border-color:var(--msi-line);color:var(--msi-ink);}
.msi-btn--ghost:hover{border-color:var(--msi-brand);color:var(--msi-brand-deep);}

/* --------------------------- Zurück-Link -------------------------------- */
.msi-back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--msi-ink-soft);
  font-size:14px;font-weight:600;margin:4px 2px 2px;}
.msi-back:hover{color:var(--msi-brand-deep);}

.msi-h1{font-size:clamp(21px,5vw,26px);margin:10px 2px 2px;text-align:left;}
.msi-scope .msi-section-title{text-align:left;}

/* --------------------- Listen-Karten (z.B. Einheiten) -------------------- */
.msi-list{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.msi-item{background:var(--msi-card);border:1px solid var(--msi-line);border-radius:var(--msi-radius);
  box-shadow:var(--msi-shadow);padding:16px 16px 14px;}
.msi-item__head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
/* News-Seite (Trainer/Studio): auf schmalen Screens Kopf stapeln – Titel voll breit
   oben, Aktionsbuttons darunter (umbrechend). Verhindert Titel-Quetschung + Button-Überlauf. */
@media (max-width:560px){
  .msi-newspage .msi-item__head{flex-direction:column;align-items:stretch;gap:10px;}
  .msi-newspage .msi-item__head>div{flex-wrap:wrap;min-width:0;}
  .msi-newspage .msi-item__head .msi-btn{flex:1 1 auto;justify-content:center;}
}
.msi-item__title{font-weight:700;font-size:16px;margin:0;letter-spacing:-.01em;}
.msi-item__meta{color:var(--msi-ink-soft);font-size:13px;margin:6px 0 0;}
.msi-item__meta b{color:var(--msi-ink);font-weight:650;}
.msi-item__actions{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap;}
.msi-item__actions .msi-btn{flex:1;justify-content:center;min-width:120px;}

/* Status-Pill */
.msi-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 11px;border-radius:99px;white-space:nowrap;}
.msi-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.msi-pill--open{color:var(--msi-warn);background:color-mix(in srgb,var(--msi-warn) 13%,transparent);}
.msi-pill--done{color:var(--msi-good);background:color-mix(in srgb,var(--msi-good) 13%,transparent);}

/* Plan-Label / Badge */
.msi-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:650;padding:3px 10px;border-radius:99px;
  color:var(--msi-teal);background:color-mix(in srgb,var(--msi-teal) 12%,transparent);}

/* ------------------------------- Hinweise ------------------------------- */
/* ------------------------------ Pausen-Timer ---------------------------- */
.msi-timer{background:var(--msi-navy);color:#fff;border-radius:var(--msi-radius);
  padding:14px 16px;margin-top:14px;box-shadow:var(--msi-shadow);}
.msi-timer__label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.7;
  display:flex;align-items:center;gap:7px;}
.msi-timer__display{font-size:44px;font-weight:800;line-height:1;letter-spacing:.01em;margin:6px 0 12px;
  font-variant-numeric:tabular-nums;}
.msi-timer.is-done{animation:msi-timer-flash .5s ease 6;}
@keyframes msi-timer-flash{50%{background:var(--msi-brand);}}
@media (prefers-reduced-motion:reduce){.msi-timer.is-done{animation:none;background:var(--msi-brand);}}
.msi-timer__controls{display:flex;gap:8px;flex-wrap:wrap;}
.msi-timer__btn{flex:1;min-width:56px;border:0;border-radius:10px;padding:11px 8px;font-size:14px;font-weight:600;
  cursor:pointer;background:rgba(255,255,255,.14);color:#fff;transition:background .12s;}
.msi-timer__btn:hover{background:rgba(255,255,255,.24);}
.msi-timer__btn--main{flex:2;background:var(--msi-brand);}
.msi-timer__btn--main:hover{background:var(--msi-brand-deep);}
.msi-timer__btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}

.msi-alert{display:flex;gap:11px;align-items:flex-start;border-radius:var(--msi-radius);padding:13px 15px;
  font-size:14px;line-height:1.45;border:1px solid transparent;}
.msi-alert i{margin-top:2px;flex:none;}
.msi-alert--info{background:color-mix(in srgb,var(--msi-teal) 9%,transparent);
  border-color:color-mix(in srgb,var(--msi-teal) 22%,transparent);color:#0b5c69;}
.msi-alert--good{background:color-mix(in srgb,var(--msi-good) 10%,transparent);
  border-color:color-mix(in srgb,var(--msi-good) 25%,transparent);color:#1d6b3f;}
.msi-alert--warn{background:color-mix(in srgb,var(--msi-bad) 9%,transparent);
  border-color:color-mix(in srgb,var(--msi-bad) 25%,transparent);color:#8f2f3c;}
.msi-alert--bad{background:color-mix(in srgb,var(--msi-bad) 14%,transparent);
  border-color:color-mix(in srgb,var(--msi-bad) 40%,transparent);color:#8f2f3c;font-weight:500;}

/* Übungszeile mit Start */
.msi-ex{display:flex;align-items:center;gap:14px;background:var(--msi-card);border:1px solid var(--msi-line);
  border-radius:var(--msi-radius);box-shadow:var(--msi-shadow);padding:14px 16px;}
.msi-ex__num{width:30px;height:30px;flex:none;border-radius:9px;background:var(--msi-brand-soft);
  color:var(--msi-brand-deep);font-weight:700;font-size:13px;display:grid;place-items:center;font-variant-numeric:tabular-nums;}
.msi-ex__name{font-weight:650;font-size:15px;}
.msi-ex__sub{font-size:12px;color:var(--msi-ink-faint);margin-top:1px;}
.msi-ex__go{margin-left:auto;}

/* ------------------------- Vorgabe / Stat-Tiles ------------------------- */
.msi-vorgabe{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.msi-stat{flex:1;min-width:130px;background:var(--msi-card);border:1px solid var(--msi-line);
  border-radius:var(--msi-radius);box-shadow:var(--msi-shadow);padding:14px 16px;}
.msi-stat__k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--msi-ink-faint);}
.msi-stat__v{font-size:20px;font-weight:750;margin-top:3px;font-variant-numeric:tabular-nums;}

/* Karte + einzelner Satz beim Ausfüllen */
.msi-formcard{background:var(--msi-card);border:1px solid var(--msi-line);border-radius:var(--msi-radius-lg);
  box-shadow:var(--msi-shadow);overflow:hidden;margin-top:18px;}
.msi-formcard__head{padding:16px 18px;border-bottom:1px solid var(--msi-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.msi-formcard__head h3{margin:0;font-size:17px;}
.msi-formcard__body{padding:16px 18px;}
.msi-satz{border:1px solid var(--msi-line);border-radius:var(--msi-radius);padding:14px 16px 4px;margin-bottom:12px;
  background:var(--msi-surface);}
.msi-satz__t{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 10px;color:var(--msi-brand-deep);}

/* ============================ App-Hülle (Shell) ========================== */
.msi-topbar{position:sticky;top:0;z-index:50;background:var(--msi-navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;
  /* In der installierten App (PWA/Notch) nicht unter die Statusleiste rutschen: */
  padding-top:calc(11px + env(safe-area-inset-top));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));}
.msi-topbar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:0 0 auto;}
.msi-topbar__brand img{height:32px;width:auto;display:block;border-radius:6px;background:#fff;padding:2px 4px;}
.msi-topbar__mark{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;font-weight:800;
  font-size:14px;color:#fff;letter-spacing:-.03em;background:linear-gradient(150deg,var(--msi-brand),var(--msi-brand-deep));}
.msi-topbar__title{font-size:14px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msi-topbar__title small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9fb0b8;}
/* Schrumpfbar + rechtsbündig umbrechen, damit die Nav nicht über das Logo läuft. */
.msi-topbar__right{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;justify-content:flex-end;flex-wrap:wrap;}

.msi-topnav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end;}
.msi-topnav a{position:relative;color:#cdd7db;text-decoration:none;font-size:13.5px;font-weight:600;padding:8px 11px;border-radius:9px;white-space:nowrap;}
.msi-topnav a:hover{color:#fff;background:rgba(255,255,255,.09);}
.msi-topnav a.msi-nav-logout{color:#93a2a9;}
.msi-navbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#e5484d;color:#fff;font-size:11px;font-weight:800;margin-left:5px;vertical-align:middle;}
.msi-navbadge--warn{background:var(--msi-warn);}

.msi-icetbtn{width:42px;height:42px;flex:none;border:0;border-radius:11px;background:rgba(255,255,255,.09);
  color:#fff;font-size:17px;cursor:pointer;display:grid;place-items:center;text-decoration:none;}
.msi-icetbtn:hover{background:rgba(255,255,255,.16);color:#fff;}

.msi-drawer,.msi-drawer__backdrop{display:none;}

.msi-main{padding:18px 14px 44px;min-height:60vh;}
.msi-main--athlete{padding-bottom:88px;}

/* Trainer-Topnav wird schmal zum Menü (Drawer).
   Breakpoint 1200px (statt 1024): die lange Trainer-Nav (News … Logout, inkl.
   Studioansicht/Therapie) passt bei iPad-Landscape-Breiten ~1025–1150px nicht und
   das erste Element „News" schob sich unters Logo. Ab hier klappt sie zum Menü. */
@media (max-width:1200px){
  .msi-topnav{display:none;}
  .msi-drawer{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;right:0;bottom:0;
    width:min(82vw,320px);background:var(--msi-card);box-shadow:-12px 0 44px rgba(0,0,0,.22);
    transform:translateX(100%);transition:transform .25s ease;z-index:70;overflow-y:auto;
    /* Safe-Area oben (iPhone-Notch/Statusleiste), damit das X zum Schließen erreichbar ist */
    padding:16px;padding-top:calc(16px + env(safe-area-inset-top));}
  .msi-drawer.open{transform:translateX(0);}
  .msi-drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  .msi-drawer__head b{font-size:15px;color:var(--msi-ink);}
  .msi-drawer a{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:10px;
    text-decoration:none;color:var(--msi-ink);font-weight:600;font-size:15px;}
  .msi-drawer a i{width:20px;text-align:center;color:var(--msi-ink-soft);}
  .msi-drawer a:hover{background:var(--msi-brand-soft);color:var(--msi-brand-deep);}
  .msi-drawer a:hover i{color:var(--msi-brand-deep);}
  .msi-drawer__backdrop.open{display:block;position:fixed;inset:0;background:rgba(10,20,25,.4);z-index:65;}
}
.msi-menubtn{display:none;}
@media (max-width:1200px){ .msi-menubtn{display:grid;} }

/* Untere Tab-Leiste (Athlet) */
.msi-tabbar{position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--msi-card) 95%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--msi-line);display:grid;grid-template-columns:repeat(4,1fr);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));}
.msi-tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;
  color:var(--msi-ink-faint);text-decoration:none;padding:4px 0;}
.msi-tab i{font-size:18px;}
.msi-tab.active{color:var(--msi-brand-deep);}
.msi-tab__ic{position:relative;}
.msi-tab__ic .msi-tab-badge{position:absolute;top:-7px;left:11px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:#e5484d;color:#fff;font-size:10px;font-weight:800;line-height:1;
  display:grid;place-items:center;z-index:3;box-shadow:0 0 0 2px var(--msi-card);pointer-events:none;}

/* Fokus sichtbar (Barrierefreiheit) */
.msi-tile:focus-visible,.msi-prop:focus-visible,.msi-hero__start:focus-visible,.msi-btn:focus-visible,
.msi-tab:focus-visible,.msi-topnav a:focus-visible{
  outline:3px solid color-mix(in srgb,var(--msi-brand) 45%,transparent);outline-offset:2px;}

/* Sprachumschalter (DE/EN) */
.msi-lang{display:inline-flex;gap:2px;align-items:center;margin:0}
.msi-lang__btn{border:1px solid var(--msi-line);background:transparent;color:var(--msi-ink);
  font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 7px;border-radius:7px;cursor:pointer;opacity:.92}
.msi-lang__btn.is-active{background:var(--msi-brand);border-color:var(--msi-brand);color:#fff;opacity:1}
.msi-lang__btn:hover{opacity:1}
/* Hell/Dunkel-Umschalter (neben DE/EN) */
.msi-theme-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;
  width:28px;height:26px;border:1px solid var(--msi-line);background:transparent;color:var(--msi-ink);
  border-radius:7px;cursor:pointer;opacity:.92;font-size:12px;line-height:1;padding:0}
.msi-theme-toggle:hover{opacity:1}
/* In der immer-dunklen Topbar müssen die Umschalter hell & gut lesbar sein –
   unabhängig vom gewählten Hell/Dunkel-Design. */
.msi-topbar .msi-lang__btn,
.msi-topbar .msi-theme-toggle{color:#eaf0f2;border-color:rgba(255,255,255,.34);opacity:1}
.msi-topbar .msi-lang__btn.is-active{background:var(--msi-brand);border-color:var(--msi-brand);color:#fff}
.msi-topbar .msi-lang__btn:not(.is-active){color:#c6d0d5}
.msi-topbar .msi-lang__btn:not(.is-active):hover,
.msi-topbar .msi-theme-toggle:hover{color:#fff;border-color:rgba(255,255,255,.6)}
/* Neurotransmitter-Ergebnis: einheitliche Zeilen (Name / Art·Wert / Balken).
   Alle Zeilen gleich hoch – auch hervorgehobene – damit Typ-/Mangel-Spalten fluchten. */
.nt-row{padding:6px 8px;margin:0 -8px 6px;border-radius:8px;}
.nt-row--hoch{background:color-mix(in srgb,var(--msi-brand,#4f9d69) 12%,transparent);}
.nt-row__name{display:flex;align-items:center;gap:6px;}
.nt-row__nm{font-weight:650;font-size:14px;line-height:1.2;}
.nt-row--hoch .nt-row__nm{font-weight:800;}
.nt-row__star{color:var(--msi-brand,#4f9d69);font-size:11px;flex:none;}
.nt-row__meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:3px 0 5px;}
.nt-row__art{font-size:11px;color:var(--msi-ink-faint);text-transform:uppercase;letter-spacing:.03em;}
.nt-row__val{font-weight:800;font-variant-numeric:tabular-nums;font-size:13px;color:var(--msi-ink-soft);white-space:nowrap;}
.nt-row--hoch .nt-row__val{color:var(--msi-brand-deep,#357a4c);}
.nt-row__track{height:7px;background:var(--msi-line);border-radius:5px;overflow:hidden;}
.nt-row__fill{height:100%;background:var(--msi-brand,#4f9d69);border-radius:5px;}
/* Geschätzte Trainingsdauer – einheitliche, dezent hervorgehobene Angabe (Athlet + Trainer). */
.msi-dauer{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:inherit;white-space:nowrap;}
.msi-dauer i{font-size:11px;opacity:.75;}
/* Einheitliche, theme-fähige Tabelle (ersetzt Bootstrap .table – im Dark Mode lesbar). */
.msi-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--msi-ink);}
.msi-table th{text-align:left;padding:8px 10px;font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--msi-ink-soft);border-bottom:2px solid var(--msi-line);white-space:nowrap;}
.msi-table td{padding:8px 10px;border-bottom:1px solid var(--msi-line);color:var(--msi-ink);vertical-align:middle;}
.msi-table tbody tr:last-child td{border-bottom:none;}
.msi-table tr.is-highlight td{background:color-mix(in srgb,var(--msi-brand,#2f9257) 12%,transparent);}
.msi-table a{color:var(--msi-bad);text-decoration:none;font-weight:600;}
/* Breite Tabellen (viele Spalten): auf Inhaltsbreite wachsen + horizontal scrollen
   statt Spalten zu quetschen/überlappen (im overflow-x:auto-Container verwenden). */
.msi-table--wide{width:max-content;min-width:100%;}
.msi-table--wide th,.msi-table--wide td{white-space:nowrap;}
/* Zeilen-Zustände (global, theme-fähig): abgebrochen / übersprungen. */
.msi-table .row-cancel td,.msi-table .row-cancel th{color:var(--msi-bad);}
.msi-table .row-skip td,.msi-table .row-skip th{opacity:.55;}
/* Aufklappbare Info-Falten (<details>) */
details.msi-item{overflow:hidden;}
details.msi-item summary{list-style:none;}
details.msi-item summary::-webkit-details-marker{display:none;}
details.msi-item summary .fa-chevron-down{transition:transform .18s ease;}
details.msi-item[open] summary .fa-chevron-down{transform:rotate(180deg);}

/* ============================================================
   Screening-Baukasten (zentral, damit alle Screens gleich aussehen)
   – vl-card:   aufklappbare Verlaufskarte (früher je Partial dupliziert)
   – msi-pill:  farbige Wert-Pille (neutral/good/warn/bad)
   – msi-trend: Trendpfeil ggü. Vormessung (up=grün, down=rot, flat=grau)
   – msi-stat:  KPI-Kachel (Label · große Zahl · Trend · Sparkline)
   – msi-spark: winzige Trendkurve (Inline-SVG, druckt sauber)
   ============================================================ */
.vl-card{border:1px solid var(--msi-line);border-radius:12px;background:var(--msi-card);overflow:hidden;}
.vl-card__sum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:11px 13px;}
.vl-card__sum::-webkit-details-marker{display:none;}
.vl-card[open] .vl-card__chev{transform:rotate(90deg);}
.vl-card[open] .vl-card__sum{border-bottom:1px solid var(--msi-line);}
.vl-card__chev{transition:transform .15s;color:var(--msi-brand-deep);font-size:.8em;flex:0 0 auto;}
.vl-card__date{flex:0 0 auto;font-weight:700;font-size:14px;letter-spacing:-.01em;}
.vl-card__vals{flex:1;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.vl-card__hint{flex:1;text-align:right;font-size:12.5px;color:var(--msi-ink-soft);}
.vl-card__body{padding:6px 13px 12px;background:var(--msi-surface);}
.vl-card__qa{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--msi-line);}
.vl-card__qa:first-child{border-top:0;}
.vl-card__q{flex:1;font-size:12.5px;color:var(--msi-ink-soft);}
.vl-card__a{flex:0 0 auto;font-weight:700;font-size:13.5px;color:var(--msi-ink);text-align:right;}

.msi-pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1;
  padding:4px 9px;border-radius:99px;background:var(--msi-surface);border:1px solid var(--msi-line);color:var(--msi-ink);white-space:nowrap;}
.msi-pill--good{background:color-mix(in srgb,var(--msi-good) 14%,transparent);border-color:transparent;color:var(--msi-good);}
.msi-pill--warn{background:color-mix(in srgb,var(--msi-warn) 16%,transparent);border-color:transparent;color:var(--msi-warn);}
.msi-pill--bad{background:color-mix(in srgb,var(--msi-bad) 14%,transparent);border-color:transparent;color:var(--msi-bad);}
.msi-pill__k{font-weight:650;opacity:.7;}

.msi-trend{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;font-weight:700;}
.msi-trend--up{color:var(--msi-good);}
.msi-trend--down{color:var(--msi-bad);}
.msi-trend--flat{color:var(--msi-ink-faint);}
/* Richtungs-bewusste Trendfarbe: gut=grün, schlecht=rot, dir=neutral (unklar) */
.msi-trend--dir{color:var(--msi-ink-faint);}
.msi-trend--gut{color:var(--msi-good);}
.msi-trend--schlecht{color:var(--msi-bad);}

.msi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.msi-stat{background:var(--msi-surface);border:1px solid var(--msi-line);border-radius:12px;padding:12px 14px;}
.msi-stat__k{font-size:12px;color:var(--msi-ink-soft);}
.msi-stat__row{display:flex;align-items:baseline;gap:7px;margin-top:2px;}
.msi-stat__v{font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.01em;}
.msi-stat__u{font-size:12px;color:var(--msi-ink-faint);}
.msi-spark{display:block;width:100%;height:22px;margin-top:6px;color:var(--msi-ink-faint);}
.msi-spark polyline{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.msi-spark--gut{color:var(--msi-good);}
.msi-spark--schlecht{color:var(--msi-bad);}
.msi-spark--dir{color:var(--msi-ink-faint);}

/* Status-Kopf je Screening (Icon + Titel + Datum + Ampel-Chip) */
.msi-scorehead{display:flex;align-items:center;gap:12px;}
.msi-scorehead__ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--msi-brand-soft);color:var(--msi-brand-deep);font-size:17px;}
.msi-scorehead__t{font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.2;}
.msi-scorehead__d{font-size:12.5px;color:var(--msi-ink-faint);margin-top:1px;}
.msi-chip--gut{background:color-mix(in srgb,var(--msi-good) 14%,transparent);color:var(--msi-good);border-color:transparent;}

/* Einklappbarer Abschnitt (z. B. Einzelübungen der Funktionellen Balance) */
.msi-collapse{margin-top:8px;}
.msi-collapse>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;color:var(--msi-ink);padding:8px 2px;}
.msi-collapse>summary::-webkit-details-marker{display:none;}
.msi-collapse>summary .msi-collapse__chev{transition:transform .15s;color:var(--msi-brand-deep);font-size:.85em;}
.msi-collapse[open]>summary .msi-collapse__chev{transform:rotate(90deg);}
.msi-collapse__count{font-weight:600;color:var(--msi-ink-soft);font-size:12px;}

@media print{
  .vl-card__body{background:transparent !important;}
  .vl-card{break-inside:avoid;}
  .vl-card__chev{display:none;}
  .msi-stat,.vl-card{border:1px solid #ddd !important;}
  .msi-collapse>summary{display:none !important;}
}

/* Nur im Druck sichtbares gebrandetes Kopfteil */
.print-only{display:none;}
.print-header{display:flex;align-items:center;gap:14px;}
.print-header__logo{max-height:56px;width:auto;}
.print-header__name{font-size:20px;font-weight:800;color:var(--msi-ink);line-height:1.1;}
.print-header__sub{font-size:12px;color:var(--msi-ink-soft);margin-top:2px;}

/* Gebrandetes Trainings-Dokument (Druck/PDF) */
.print-doc__meta{display:flex;flex-wrap:wrap;gap:6px 30px;font-size:13px;margin:0 0 14px;color:#17211d;}
.print-doc__lbl{color:#7a1f1f;font-weight:700;margin-right:6px;text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;}
.print-doc__table{width:100%;border-collapse:collapse;font-size:12.5px;}
.print-doc__table th{text-align:left;background:#f3e7e7;color:#7a1f1f;padding:7px 9px;border:1px solid #e2c9c9;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;}
.print-doc__table td{padding:7px 9px;border:1px solid #dcdcdc;vertical-align:top;}
.print-doc__table tbody tr:nth-child(even){background:#faf6f6;}
.print-doc__ablauf{display:inline-block;font-size:10px;font-weight:700;color:#7a1f1f;background:#f3e7e7;border-radius:4px;padding:0 5px;margin-left:4px;}
.print-doc__foot{margin-top:16px;font-size:10.5px;color:#8a9691;border-top:1px solid #eee;padding-top:8px;}

/* Druck: App-Navigation ausblenden, gebrandetes Kopfteil einblenden, sauberes Layout */
/* Rand 0 -> der Browser blendet seine Standard-Kopf-/Fußzeile (URL „https://…", Datum)
   aus. Der Seitenrand kommt stattdessen als Innenabstand des Druckbereichs. */
@page { margin: 0; }
@media print {
  /* Papier ist immer hell: Theme-Variablen im Druck auf Light-Werte zwingen (mit !important,
     sonst gewinnt :root[data-theme="dark"] wegen höherer Spezifität). Dadurch wird auf JEDEM
     Ausdruck/PDF ALLES dunkel auf weiß – Überschriften, Meta, Karten – egal welches Bildschirm-Theme. */
  :root{
    --msi-ink:#16232a !important; --msi-ink-soft:#485259 !important; --msi-ink-faint:#6b757b !important;
    --msi-line:#d9deda !important; --msi-card:#ffffff !important; --msi-surface:#ffffff !important;
    --msi-surface-2:#f1f4f1 !important; --msi-page:#ffffff !important;
  }
  html, body { background:#ffffff !important; color:#16232a !important; }
  .msi-print-area { padding: 1.4cm; box-sizing: border-box; }
  .msi-topbar, .msi-tabbar, .msi-drawer, .msi-drawer__backdrop,
  .msi-menubtn, .msi-back, .msi-nav-logout, .msi-topnav, .no-print { display: none !important; }
  .msi-main, .msi-main--athlete { padding: 0 !important; margin: 0 !important; }
  /* Rand 0 (@page) entfernt Browser-Kopf-/Fußzeile; der Seitenrand kommt hier als Padding,
     damit auf JEDEM Ausdruck (Screenings/ACL/… ohne .msi-print-area) nichts an den Blattrand stößt. */
  .msi-scope, .msi-shell, .msi-shell--wide { max-width: 100% !important; box-shadow: none !important;
    padding: 1.2cm !important; box-sizing: border-box; }
  .msi-print-area .msi-scope, .msi-print-area .msi-shell,
  .msi-scope .msi-shell, .msi-scope .msi-scope { padding: 0 !important; }  /* kein doppelter Rand bei Verschachtelung */
  .print-only { display: block !important; }
  .print-header { display: flex !important; border-bottom: 2px solid var(--msi-brand-deep, #7a1f1f);
    padding-bottom: 10px; margin: 0 0 16px; page-break-after: avoid; }
  /* Im Druck immer dunkle Schrift auf weißem Papier (unabhängig vom Bildschirm-Theme). */
  .print-header__name { color: #17211d !important; }
  .print-header__sub { color: #5c6b66 !important; }
  .msi-item { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  /* ============================================================================
     GENERELLER, SELBST-ANPASSENDER SEITENUMBRUCH FÜR ALLE AUSDRUCKE/PDFs.
     Gilt für jede App-Seite (alle Prints erben msi.css). Zwei Prinzipien:
     1) Karten/Blöcke werden nie mittig zerschnitten (break-inside: avoid).
     2) Mehrspaltige Karten-Grids werden im Druck einspaltig gestapelt, damit ein
        Umbruch niemals mehrere Spalten gleichzeitig durchschneidet.
     Attribut-Selektoren (*="card"/"kr"/"tile"/"box") erfassen auch KÜNFTIGE Karten
     automatisch, ohne dass hier jede Klasse einzeln gepflegt werden muss.
     ============================================================================ */
  /* 1) Nichts mittig brechen: benannte Karten + generische Karten-Namensmuster. */
  .msi-item, details, tr, figure, blockquote, li,
  .iso-card, .iso-gel, .iso-ext, .bw-test, .bw-group, .bw-summary, .bw-block,
  .rt-group, .spr-t, .rtaa-level, .export-table, .msi-hero, .msi-fchip,
  .rt-calc, .bw-calc, .acl-kr, .acl-card, .scr-pin,
  [class*="card"], [class*="-kr"], [class*="kr-"], [class*="tile"],
  [class*="box"], [class*="__card"], [class*="kachel"] {
    break-inside: avoid; page-break-inside: avoid; }
  /* 2) Karten-Grids/Flex-Reihen im Druck einspaltig stapeln (kein Spalten-Schnitt). */
  .acl-krafttbl, .acl-werte, .bw-stats, .ks-likert, .msi-charts, .spr-liste,
  .scr-pins__grid, .msi-tiles, .msi-stats, [class*="-grid"], [class*="grid-"],
  [class*="__grid"], [class*="cards"], [class*="karten"] {
    display: block !important; }
  .acl-krafttbl > *, .acl-werte > *, .bw-stats > *, .ks-likert > * {
    margin-bottom: 8px !important; break-inside: avoid; page-break-inside: avoid; }
  .pr-kraft, .pr-kraft .acl-krafttbl { break-inside: avoid; page-break-inside: avoid; }
  /* Überschriften nicht allein am Seitenende stehen lassen. */
  h1, h2, h3, h4, .msi-h1, .msi-h2, .msi-section-title, .iso-card__h,
  .bw-block__h, .bw-group__h, .bw-summary__h { break-after: avoid; page-break-after: avoid; }
  a[href]::after { content: ""; }  /* keine URL-Anhänge im Druck */
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Einheitliches Tabellen-Design für ALLE Ausdrucke/PDF (gebrandet) */
  .export-table table, .print-only table, table.print-doc__table {
    width:100% !important; border-collapse:collapse !important; font-size:12px !important; }
  .export-table th, .print-only th, .print-doc__table th {
    text-align:left !important; background:#f3e7e7 !important; color:#7a1f1f !important;
    padding:6px 9px !important; border:1px solid #e2c9c9 !important;
    font-size:10.5px !important; text-transform:uppercase; letter-spacing:.03em; }
  .export-table td, .print-only td, .print-doc__table td {
    padding:6px 9px !important; border:1px solid #dcdcdc !important; vertical-align:top; }
  .export-table tbody tr:nth-child(even) td, .print-only tbody tr:nth-child(even) td,
  .print-doc__table tbody tr:nth-child(even) td { background:#faf6f6 !important; }
}

/* Hervorgehobene Auswahl-Blöcke (Übungsauswahl / Set-Rep-Auswahl) bei der Planerstellung */
.ap-auswahl-hervor{border:2px solid var(--msi-brand-deep,#7a1f1f);background:var(--msi-brand-soft,#f3e7e7);
  border-radius:12px;padding:12px 14px;margin:8px 0;}
.ap-auswahl-hervor__lbl{font-weight:750;color:var(--msi-brand-deep,#7a1f1f);font-size:14px;margin-bottom:6px;}

/* RPE-Erklärung für Athleten (#RPE-Hilfe): einklappbare Skala */
.rpe-hilfe{border:1px solid var(--msi-line,#e2e2e2);border-radius:12px;background:var(--msi-surface,#fff);
  margin:10px 0;padding:0;}
.rpe-hilfe>summary{cursor:pointer;list-style:none;font-weight:700;font-size:14px;
  color:var(--msi-brand-deep,#7a1f1f);padding:12px 14px;display:flex;align-items:center;gap:8px;}
.rpe-hilfe>summary::-webkit-details-marker{display:none;}
.rpe-hilfe[open]>summary{border-bottom:1px solid var(--msi-line,#e2e2e2);}
.rpe-hilfe__body{padding:12px 14px;font-size:14px;color:var(--msi-ink,#1c2226);}
.rpe-hilfe__body p{margin:0 0 8px;color:var(--msi-ink-soft,#556169);}
.rpe-hilfe__body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.rpe-hilfe__body li{display:flex;align-items:baseline;gap:10px;}
.rpe-hilfe__n{flex:0 0 34px;text-align:center;font-weight:750;border-radius:8px;padding:2px 0;
  background:var(--msi-brand-soft,#f3e7e7);color:var(--msi-brand-deep,#7a1f1f);font-size:13px;}

/* Gesperrte Menü-Kachel (Feature nicht im Lizenzpaket) – #Lizenz-Sperren */
.msi-tile--locked{opacity:.55;cursor:not-allowed;position:relative;}
.msi-tile--locked .msi-tile__sub{color:var(--msi-brand-deep,#7a1f1f);font-weight:700;}

/* ---- Einheitlicher, aufklappbarer Chip-Filter (Screenings, Fortschritt, Historie …) ---- */
.msi-filter{border:1px solid var(--msi-line);border-radius:12px;background:var(--msi-surface);margin:12px 0;overflow:hidden;}
.msi-filter>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;padding:11px 14px;font-weight:700;font-size:14px;color:var(--msi-ink);}
.msi-filter>summary::-webkit-details-marker{display:none;}
.msi-filter>summary .msi-filter__ic{color:var(--msi-brand-deep);}
.msi-filter>summary .msi-filter__count{font-size:12px;font-weight:600;color:var(--msi-ink-soft);}
.msi-filter>summary .msi-filter__chev{margin-left:auto;transition:transform .18s;color:var(--msi-ink-soft);}
.msi-filter[open]>summary .msi-filter__chev{transform:rotate(180deg);}
.msi-filter__body{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 14px 13px;}
.msi-filter__lbl{font-size:11.5px;font-weight:800;color:var(--msi-ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-right:2px;}
.msi-filter__sep{width:1px;align-self:stretch;background:var(--msi-line);margin:2px 4px;}
.msi-fchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;padding:7px 13px;border-radius:99px;
  border:1.5px solid var(--msi-line);background:var(--msi-surface);color:var(--msi-ink-soft);cursor:pointer;user-select:none;
  transition:background .12s,border-color .12s,color .12s;}
.msi-fchip:hover{border-color:var(--msi-brand-deep);}
.msi-fchip input{position:absolute;opacity:0;width:0;height:0;}
.msi-fchip::before{content:"";width:13px;height:13px;border-radius:50%;border:1.5px solid var(--msi-line);flex:0 0 auto;transition:all .12s;}
.msi-fchip:has(input:checked){background:color-mix(in srgb,var(--msi-brand-deep) 12%,transparent);border-color:var(--msi-brand-deep);color:var(--msi-brand-deep);}
.msi-fchip:has(input:checked)::before{background:var(--msi-brand-deep);border-color:var(--msi-brand-deep);box-shadow:inset 0 0 0 2px var(--msi-surface);}
.msi-fchip--ctrl{font-weight:800;}
.msi-fchip--ctrl::before{display:none;}
/* Single-Select-Chip (aktiver Modus) – ohne Checkbox, Aktiv-Zustand per .is-active */
.msi-fchip--mode::before{display:none;}
.msi-fchip--mode.is-active{background:var(--msi-brand-deep);border-color:var(--msi-brand-deep);color:#fff;}