/* =========================================================================
   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;

  /* 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);
}

/* ------------------------------- 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;}
.msi-scope select,.msi-scope .form-select{min-height:46px;}
.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;}
.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;}
.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;}
.msi-topbar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:0;}
.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;}
.msi-topbar__right{display:flex;align-items:center;gap:6px;}

.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) */
@media (max-width:1024px){
  .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;padding:16px;overflow-y:auto;}
  .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;}
  .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:1024px){ .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:-6px;left:12px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:#e5484d;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;}

/* 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:inherit;
  font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 7px;border-radius:7px;cursor:pointer;opacity:.7}
.msi-lang__btn.is-active{background:var(--msi-brand);border-color:var(--msi-brand);color:#fff;opacity:1}
.msi-lang__btn:hover{opacity:1}