:root{
  --bg:#020617;
  --card:#0f172a;
  --text:#e5e7eb;
  --accent:#22c55e;
  --border:#1f2937;
}

*{ box-sizing:border-box; }

/* ── Scrollbar (dunkel, dünn — wie Claude) ── */
* {
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}
*::-webkit-scrollbar       { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #475569; }

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

body{
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}


h1{ color: var(--accent); margin-top: 0; }


.btn{
  display:inline-block;
  background: var(--accent);
  color:#052e16;
  border:none;
  padding:10px 16px;
  border-radius:6px;
  cursor:pointer;
  font-weight:bold;
  text-decoration:none;
}

.btn:active{ transform: translateY(1px); }

.profile-fab{
  position: fixed;
  top:16px;
  right:16px;
  z-index:1000;
  width:44px;
  height:44px;
  border-radius:50%;
  background: var(--card);
  border:1px solid var(--border);
  color: var(--accent);
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.mebox{ margin:12px 0; color: var(--text); }


/* ===== App Layout (rote Bereiche) ===== */

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
  background: #020617;
  color: #e5e7eb;
}

.topbar{
  grid-column: 1 / -1;
  grid-row: 1;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;
  background: #020617;
  border-bottom: 1px solid #111827;
}


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: #e5e7eb;
}

.brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

.topbar-center {
  opacity: .9;
  font-size: 14px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  text-decoration: none;
  font-size: 16px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid #1f2937;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #1f2937;
  background: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Sidebar */


.sidebar {
  grid-column: 1;
  grid-row: 2;
  padding: 16px 12px;
  background: #0b1224;
  border-right: 1px solid #1f2937;

  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100vh - 64px);

  /* WICHTIG */
  margin: 0;
}


.nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #cbd5e1;
  border: 1px solid transparent;
}

.nav a:hover {
  background: #0f172a;
  border-color: #1f2937;
}

.nav a.active {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.25);
  color: #bbf7d0;
}

.nav a.disabled {
  opacity: .45;
  pointer-events: none;
}

.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Main content */

.main {
  grid-column: 2;
  grid-row: 2;

  padding: 20px;
  padding-top: 28px; /* DAS fehlt aktuell optisch */
}


body[data-page="dashboard"] .main-grid--twoThird{
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto;
}

body[data-page="dashboard"] .main{
  padding-top: 18px; /* etwas ruhiger */
}

/* ============================================================
   Layout: Main Grid (global)
   - Use <div class="main-grid main-grid--twoThird"> ... </div>
   - Default: 2/3 + 1/3 columns
   - Dashboard overrides can customize per page
   ============================================================ */

.main-grid{
  display: grid;
  gap: 16px;
  align-items: start;
}

.main-grid--twoThird{
  grid-template-columns: 2fr 1fr;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 980px){
  .main-grid--twoThird{ grid-template-columns: 1fr; }
}

.card{
  background: #0f172a;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.chat-messages{
  height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #1f2937;
  background: #0b1224;
  margin-top: 10px;
  font-size: 14px;
}

/* Dashboard: Chat Area zentrieren und max width */

body[data-page="dashboard"] .chat,
body[data-page="dashboard"] .chat-messages,
body[data-page="dashboard"] .chat-inputrow,
body[data-page="dashboard"] .chat-row{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


/* Chat größer */


.chat { display:flex; flex-direction:column; gap:10px; }



/* (duplicate entfernt) */


.chat-row{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
}

.chat-input{
  flex:1;
  width:100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background:#0b1224;
  color:#e5e7eb;
}

/* ── Chat Message Bubbles ── */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-inputrow{
  display:flex;
  gap:10px;
  align-items:center;
}
.chat-text{
  flex:1;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border:1px solid #1f2937;
  background:#0b1224;
  color:#e5e7eb;
}

.chat-send{
  width: 44px;
  height: 40px;
  border-radius: 10px;
  border: 0;
  background:#22c55e;
  cursor:pointer;
  font-weight:bold;
}

.btn-secondary{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color:#bbf7d0;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}

.chat-actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}


.calendar-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 🔥 genau dein Wunsch */
  gap: 20px;
  max-width: 100%;
} 

/* sicherstellen, dass Chat nicht zentriert ist */
#chatMessages, .msg { text-align: left; }

/* Normale Bot-Ausgabe */
.chat-output {
  line-height: 1.55;
  color: #e5e7eb;
}

/* ── Einheitliches Rendering für Chat + Trainingsplan ── */
.training-output {
  line-height: 1.6;
  color: #e2e8f0;
  font-size: 13px;
}

.training-output h1 {
  font-size: 20px;
  font-weight: 800;
  color: #4ade80;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(74,222,128,0.3);
  letter-spacing: 0.01em;
}

.training-output h2 {
  font-size: 15px;
  font-weight: 800;
  color: #4ade80;
  margin: 10px 0 6px;
}

.training-output h3 {
  font-size: 13px;
  font-weight: 700;
  color: #86efac;
  margin: 8px 0 4px;
}

.training-output p {
  margin: 3px 0;
}

.training-output ul, .training-output ol {
  margin: 4px 0 8px 18px;
  padding: 0;
}

.training-output li {
  margin: 2px 0;
  line-height: 1.5;
}

.training-output strong {
  color: #86efac;
  font-weight: 700;
}

/* Im Chat-Fenster: etwas mehr Platz */
.msg.bot .training-output {
  font-size: 14px;
}

/* Im Trainingsplan-Phase-Card: kompakt, kein eigener Rahmen */
.tp-phase-text .training-output {
  font-size: 12.5px;
  line-height: 1.5;
}

/* ===== Forms (shared) ===== */


.form-grid{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-grid > *{ flex: 1 1 220px; }

.field label,
.muted-label{
  display:block;
  font-size: 12px;
  color: #94a3b8;
  margin: 8px 0 6px;
}

input, select, textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #1f2937;
  background:#0b1224;
  color:#e5e7eb;
  outline: none;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 0 3px rgba(34,197,94,.10);
}

textarea{ min-height: 220px; white-space: pre-wrap; }

.btn-primary{
  background:#22c55e;
  border: 0;
  color:#052e16;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 800;
}

.btn-primary:disabled,
.btn-secondary:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.status{
  margin-top: 10px;
  font-size: 12px;
  color:#94a3b8;
}

.status.ok{ color:#22c55e; }
.status.warn{ color:#f59e0b; }
.status.err{ color:#ef4444; }



/* ========= misc helpers ========= */

.card-title{ margin:0 0 10px 0; }
.section-title{ margin:14px 0 8px 0; font-size:14px; opacity:.9; }
.hint{ font-size:12px; opacity:.7; margin-top:6px; }
.sidebar-logout{ justify-content:flex-start; padding:0 12px; width:100%; }



/* ========= auth (login/registration) ========= */

body.auth{
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% 25%, rgba(34,197,94,0.14), rgba(2,6,23,0) 60%),
    linear-gradient(180deg, rgba(2,6,23,0.90), rgba(2,6,23,0.98)),
    var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 32px 16px;
}
.auth-card{ width: min(720px, 100%); padding: 22px 22px 18px 22px; }
.auth-header{ text-align:center; margin-bottom: 14px; }
.auth-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom: 12px; font-weight: 700; letter-spacing: .2px; }
.auth-brand .dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(34,197,94,0.12); }
.auth-title{ margin: 0; font-size: 34px; letter-spacing: 1px; text-transform: uppercase; }
.auth-subtitle{ opacity:.85; margin-top:6px; }
.auth-form{ margin-top: 14px; }
.pw-wrap{ position: relative; }
.pw-toggle{ position:absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; opacity: .85; padding: 6px; border-radius: 10px; }
.pw-toggle:hover{ opacity: 1; background: rgba(255,255,255,0.04); }
.auth-actions{ margin-top: 12px; display:flex; justify-content:center; }
.auth-actions .btn-primary{ min-width: 210px; padding: 12px 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.auth-links{ text-align:center; margin-top: 14px; line-height: 1.6; }
.auth-links a{ color: var(--accent); text-decoration: none; font-weight: 700; }
.auth-links a:hover{ text-decoration: underline; }
.auth-msg{ margin-top: 10px; text-align:center; font-size: 13px; opacity:.9; }

@media (max-width: 640px){
  .auth-title{ font-size: 28px; }
}




/* Trainingsboxen */

/* cards für trainingsliste */

.training-card{
  border:1px solid #1f2937;
  background:#0b1224;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.tc-title{ font-weight:700; }
.tc-sub{ opacity:.8; font-size: 13px; margin-top: 4px; }
.tc-notes{ opacity:.85; font-size: 13px; margin-top: 6px; }

/* mini match rows */
.mini-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #1f2937;
}
.mini-row:last-child{ border-bottom: 0; }
.mini-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  margin-top: 6px;
}
.mini-title{ font-weight:700; }
.mini-sub{ opacity:.8; font-size: 13px; }

/* calendar widget */

.cal-week{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin:10px 0; opacity:.85; font-size:12px; }
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.cal-cell{
  border:1px solid #1f2937;
  background:#0b1224;
  border-radius: 10px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
}
.cal-empty{ opacity:.25; }
.cal-has{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }


/* ===== Diagram (SVG) ===== */

.diagramBox{
  margin: 10px 0 14px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.15);
  background: rgba(2,6,23,.35);
}

.coach-diagram{
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
}




/* ===== Hamburger Button (nur Mobile sichtbar) ===== */

.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Sidebar-Overlay Backdrop */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1190;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ===== Mobile: Overlay-Sidebar (ChatGPT-Stil) ===== */

@media (max-width: 980px) {

  /* App: nur Topbar + Content, keine Sidebar-Spalte */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr;
  }

  body[data-page="dashboard"] .app {
    grid-template-columns: 1fr;
  }

  .topbar {
    height: 56px;
    padding: 0 12px;
    grid-column: 1;
  }

  .topbar-center { display: none; }

  /* Hamburger sichtbar */
  .hamburger-btn { display: flex; }

  /* ── Off-Canvas Sidebar ── */
  .sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    bottom: 0;
    width: 260px;
    height: 100vh;
    z-index: 1200;
    border-right: 1px solid #2d3748;
    border-top: none;
    padding: 20px 12px 16px;
    overflow-y: auto;
    transition: left 0.28s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    flex-direction: column;
  }

  .app.sidebar-open .sidebar {
    left: 0;
    box-shadow: 8px 0 40px rgba(0,0,0,.55);
  }

  .app.sidebar-open .sidebar-overlay {
    display: block;
  }

  /* Sidebar-Bottom wieder anzeigen (im Drawer) */
  .sidebar-bottom { display: flex; }

  /* Nav: vertikal im Drawer */
  .nav {
    flex-direction: column;
    gap: 4px;
  }

  .nav a {
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px;
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Main: volle Breite, kein Bottom-Padding für Bar */
  .main {
    grid-column: 1;
    grid-row: 2;
    padding: 14px 12px 24px;
  }

  /* Rechte Mini-Bar auf Mobile ausblenden */
  .side-right { display: none !important; }

  /* ── Chat-Card: volle Höhe, Flex-Column ── */
  .chat-card {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 56px - 28px);
  }

  .chat-card h2 {
    flex-shrink: 0;
  }

  /* Messages: scrollbar, füllt Platz */
  .chat-messages {
    flex: 1;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 8px;
    gap: 8px;
  }

  /* ── Input: Pill-Style, sticky unten ── */
  .chat-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0;
    background: #131f2e;
    border: 1px solid #2d3748;
    border-radius: 20px;
    padding: 8px 8px 8px 16px;
    margin-top: 10px;
  }

  .chat-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 0;
    font-size: 15px;
    color: #e5e7eb;
    outline: none;
    box-shadow: none;
    border-radius: 0;
  }

  .chat-input:focus {
    border: none;
    box-shadow: none;
  }

  .chat-send {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 16px;
  }

  /* Actions-Bar kompakter */
  .chat-actions {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }

  .chat-actions .btn-secondary {
    font-size: 11px;
    padding: 7px 10px;
    border-radius: 10px;
  }
}

/* ── Desktop: Hamburger niemals sichtbar ── */
@media (min-width: 981px) {
  .hamburger-btn { display: none !important; }
  .sidebar-overlay { display: none !important; }
}

/* Sehr kleine Phones */
@media (max-width: 420px) {
  .main { padding: 10px 10px 20px; }
  .icon-btn { width: 36px; height: 36px; }
  .avatar { width: 32px; height: 32px; }
  .chat-card { min-height: calc(100svh - 56px - 40px); }
}


/* ===== Login Hero Background (MVP) ===== */
.auth {
  min-height: 100vh;
  margin: 0;
  color: #fff;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 70%, rgba(0,0,0,.9) 100%),
    url("assets/login-bg.jpg") center/cover no-repeat fixed;
}

/* falls deine CSS im /assets/ liegt, dann background url relativ zur CSS:
   url("login-bg.jpg") wenn die Datei in assets/ liegt */

body.auth{
  background: url("../img/bg.jpg") center/cover no-repeat fixed;
}


/* ===== MVP: Right Mini Bar (nur Desktop) ===== */

@media (min-width: 981px) {
  body[data-page="dashboard"] .app{
    grid-template-columns: 200px 1fr 64px;
  }
  .side-right{
    grid-column: 3;
    grid-row: 2;
    border-left: 1px solid #1f2937;
    background: #0b1224;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    height: calc(100vh - 64px);
  }
}

.mini-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #1f2937;
  background: #0f172a;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.mini-btn:hover{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
}

/* ===== MVP: Recent Trainings Grid ===== */
.recent-trainings{
  margin-top: 14px;
}

.recent-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

.recent-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 980px){
  .recent-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Monatskalender kompakter ===== */
.month-grid{
  gap: 4px;              /* vorher 8px */
}

.day-box{
  height: 30px;          /* vorher 46px */
  font-size: 12px;       /* vorher 13px */
  border-radius: 8px;    /* vorher 10px */
}


/* ===== Monatskalender Navigation ===== */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-month-label {
  font-weight: 700;
  font-size: 14px;
  color: #e5e7eb;
}

.cal-nav-btn {
  background: #0f172a;
  border: 1px solid #1f2937;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s;
}

.cal-nav-btn:hover {
  border-color: rgba(34,197,94,.4);
  color: #22c55e;
}

.cal-today {
  border-color: #22c55e !important;
  background: rgba(34,197,94,.15) !important;
  color: #22c55e;
  font-weight: 700;
}

.cal-today span {
  color: #22c55e;
}


 body.auth {
      min-height:100vh; display:flex; align-items:center;
      justify-content:center; padding:24px 16px;
      background: url("../img/bg.jpg") center/cover no-repeat fixed;
    }
    .auth-wrap  { width:100%; max-width:460px; }
    .auth-card  { padding:32px 28px; }
    .brand-row  { text-align:center; margin-bottom:22px; }
    .auth-title { text-align:center; margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#e5e7eb; }
    .auth-sub   { text-align:center; font-size:13px; color:#64748b; margin:0 0 20px; line-height:1.5; }
    .auth-msg   { font-size:13px; text-align:center; padding:10px 14px; border-radius:10px; margin-bottom:16px; display:none; }
    .auth-msg.ok   { background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.3);  color:#4ade80;  display:block; }
    .auth-msg.err  { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.3);  color:#f87171;  display:block; }
    .auth-msg.info { background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.3); color:#60a5fa;  display:block; }
    .field       { margin-bottom:14px; }
    .field label { display:block; font-size:12px; color:#94a3b8; margin-bottom:5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
    .btn-full  { width:100%; padding:13px; border-radius:12px; font-family:inherit; font-size:15px; font-weight:800; border:none; cursor:pointer; }
    .btn-green { background:#22c55e; color:#052e16; }
    .btn-green:hover { background:#16a34a; }
    .btn-green:disabled { opacity:.5; cursor:not-allowed; }
    .btn-back  { background:#0f172a; color:#94a3b8; border:1px solid #1f2937; padding:13px; border-radius:12px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; flex:1; }
    .auth-links { text-align:center; margin-top:16px; font-size:13px; color:#64748b; line-height:1.9; }
    .auth-links a { color:#22c55e; text-decoration:none; font-weight:700; cursor:pointer; }
    .step-bar { display:flex; gap:6px; margin-bottom:20px; }
    .step-bar div { flex:1; height:4px; border-radius:4px; background:#1f2937; transition:background .3s; }
    .step-bar div.done   { background:#22c55e; }
    .step-bar div.active { background:#3b82f6; }
    .search-wrap { position:relative; }
    .search-dd { position:absolute; top:100%; left:0; right:0; background:#0f172a; border:1.5px solid rgba(34,197,94,.4); border-top:none; border-radius:0 0 10px 10px; max-height:210px; overflow-y:auto; z-index:100; display:none; }
    .sdi { padding:11px 13px; cursor:pointer; border-bottom:1px solid #1f2937; }
    .sdi:hover { background:#0b1224; }
    .sdi:last-child { border-bottom:none; }
    .sdi .n { font-size:14px; font-weight:600; color:#e5e7eb; }
    .sdi .s { font-size:12px; color:#64748b; margin-top:2px; }
    .club-chosen { background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.25); border-radius:10px; padding:9px 13px; margin-bottom:14px; display:none; font-size:13px; color:#4ade80; font-weight:700; }
    .team-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
    .team-btn { padding:10px 8px; background:#0b1224; border:1.5px solid #1f2937; border-radius:9px; color:#94a3b8; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .15s; text-align:center; }
    .team-btn:hover,.team-btn.sel { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.4); color:#4ade80; }
    .verify-box { text-align:center; padding:10px 0; }
    .verify-icon { font-size:54px; margin-bottom:14px; }
    .verify-title { font-size:20px; font-weight:800; margin-bottom:8px; color:#e5e7eb; }
    .verify-sub { font-size:14px; color:#64748b; line-height:1.7; margin-bottom:22px; }
    .summary { background:#0b1224; border-radius:10px; padding:13px 15px; margin-bottom:16px; font-size:14px; line-height:2; }

/* ============================================================
   DASHBOARD – neues Layout
   ============================================================ */

/* .main = fixer Container, kein eigenes Scrollen */
body[data-page="dashboard"] .main {
  padding: 20px;
  height: calc(100vh - 64px);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Grid füllt gesamte verfügbare Höhe */
body[data-page="dashboard"] .main-grid {
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* Linke Spalte (Chat): Flex-Spalte — Card kann wachsen */
body[data-page="dashboard"] .main-grid > section:first-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Rechte Spalte (Trainingspläne): eigenes Scrollen */
body[data-page="dashboard"] .main-grid > section:last-child {
  overflow-y: auto;
}

/* Chat-Card: Flex-Spalte, füllt linke Spalte komplett */
body[data-page="dashboard"] .chat-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Chat-Messages: scrollt intern — Input bleibt immer unten */
body[data-page="dashboard"] #chatMessages {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #1f2937;
  background: #0b1224;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
}

/* Input + Buttons: nicht schrumpfen — bleiben immer unten sichtbar */
body[data-page="dashboard"] .chat-row,
body[data-page="dashboard"] .chat-actions {
  flex-shrink: 0;
}

/* Haupt-Container: Chat oben, Karten unten */
.dash-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Chat-Card volle Breite */
.chat-card {
  width: 100%;
}

.chat-messages {
  height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #1f2937;
  background: #0b1224;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
}

/* Chat Nachrichten – kein JSON mehr */
.msg {
  padding: 10px 14px;
  border-radius: 12px;
  margin: 6px 0;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 85%;
}
.msg.user {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  margin-left: auto;
  text-align: right;
}
.msg.bot {
  background: rgba(148,163,184,.07);
  border: 1px solid #1f2937;
  margin-right: auto;
}

/* Trainingsplan-Karten Bereich */
.dash-plans {
  width: 100%;
}

/* 4 Karten nebeneinander, breit */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1000px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .plans-grid { grid-template-columns: 1fr; } }

/* Plan-Karte */
.plan-card {
  background: #0f172a;
  border: 1px solid #1f2937;
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
.plan-card:hover {
  border-color: rgba(34,197,94,.4);
  transform: translateY(-2px);
}
.plan-card--empty {
  cursor: default;
  opacity: .4;
}
.plan-card--empty:hover {
  transform: none;
  border-color: #1f2937;
}
.pc-date   { font-size: 11px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pc-title  { font-size: 14px; font-weight: 800; color: #e5e7eb; margin: 2px 0; }
.pc-sub    { font-size: 12px; color: #64748b; }
.pc-tag    { display: inline-block; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); color: #4ade80; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: auto; width: fit-content; }
.pc-actions { display: flex; gap: 8px; margin-top: 10px; }
.pc-btn     { flex: 1; padding: 7px; border-radius: 8px; font-size: 12px; font-weight: 700; border: 1px solid #1f2937; background: #0b1224; color: #94a3b8; cursor: pointer; font-family: inherit; transition: all .15s; text-align: center; text-decoration: none; }
.pc-btn:hover { border-color: rgba(34,197,94,.35); color: #4ade80; }
.pc-btn--pdf  { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); color: #f87171; }
.pc-btn--pdf:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); }

/* --- FIX: Bot-Output nicht zentrieren --- */

/* Chat-Container immer links */
#chatMessages, .chat-messages { 
  text-align: left;
}

/* Bot-Bubbles dürfen breiter sein */
.msg { text-align: left; }
.msg.user { text-align: left; }

.msg.bot{
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.msg.bot .chat-output,
.msg.bot .training-output { text-align: left; }
.msg.bot {
  line-height: 1.6;
}

.msg.bot h3 {
  color: #22c55e;
  margin-bottom: 6px;
}

.msg.bot h4 {
  color: #38bdf8;
  margin-bottom: 4px;
}

.msg.bot ul {
  padding-left: 18px;
  margin: 6px 0;
}

.msg.bot li {
  margin-bottom: 4px;
}

.msg.bot strong {
  color: #e5e7eb;
}
/* ── Checkbox-Chip (Stammdaten Hilfsmittel) ── */
.checkbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 20px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.checkbox-chip:hover {
  background: #273449;
  border-color: #4f86c6;
}
.checkbox-chip input[type="checkbox"] {
  accent-color: #3b82f6;
  width: 14px;
  height: 14px;
}
.checkbox-chip:has(input:checked) {
  background: rgba(59,130,246,0.15);
  border-color: #3b82f6;
  color: #93c5fd;
}