/* ============================================================
   Trainingsportal – Monatskalender
   ============================================================ */
.kal-wrap { padding: 24px 28px 48px; max-width: 1320px; margin: 0 auto; }

/* ── Gastseite (nicht eingeloggt, kein Token) ── */
.gast-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; padding: 32px 16px;
}
.gast-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 40px 48px; text-align: center; max-width: 400px;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.gast-icon  { font-size: 40px; line-height: 1; }
.gast-titel { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px; }
.gast-sub   { font-size: 14px; color: var(--text2); line-height: 1.5; }

/* ── Share-Banner (Gastansicht-Hinweis oben) ── */
.share-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius); padding: 8px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--text);
}
.share-banner strong { color: var(--accent); }
.share-banner-login  { font-size: 12px !important; padding: 4px 10px !important; }
.share-banner-close  {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--text2); line-height: 1; padding: 2px 4px;
  opacity: .7; transition: opacity .15s;
}
.share-banner-close:hover { opacity: 1; }

/* ── Aktionsleiste (Abonnieren + Teilen) unter Kalender/Liste ── */
.kal-actions-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 4px;
}
.kal-action-btn { font-size: 13px !important; }

/* ── Teilen-Dialog ── */
.share-create-form  { margin-bottom: 20px; }
.share-label        { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text2); margin-bottom: 6px; }
.share-form-row     { display: flex; gap: 8px; align-items: center; }
.share-select       { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 14px; }
.share-tokens-heading { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; }
.share-token-row    { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.share-token-row:last-child { border-bottom: none; }
.share-token-info   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-token-name   { font-weight: 600; font-size: 13px; }
.share-token-url    { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.share-token-actions { display: flex; gap: 4px; flex-shrink: 0; }
.share-copy-btn, .share-del-btn { font-size: 14px !important; padding: 4px 8px !important; }
.share-token-meta   { font-weight: 400; font-size: 12px; color: var(--text2); }
/* Erstellen-Formular: Gruppe / Ansicht / Zeitraum nebeneinander */
.share-field-grid   { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 10px; align-items: end; }
.share-field-grid .share-select { width: 100%; box-sizing: border-box; }
.share-create-btn   { margin-top: 12px; }
.share-token-edit   { display: block; background: var(--surf2, rgba(127,127,127,.06)); border-radius: 8px; padding: 12px; }
.share-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
@media (max-width: 560px) {
  .share-field-grid { grid-template-columns: 1fr; }
}

.kal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.kal-nav { display: flex; align-items: center; gap: 12px; }
.kal-nav-right { display: flex; align-items: center; gap: 8px; }
.kal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 28px; letter-spacing: .5px;
  color: var(--text); margin: 0; min-width: 220px; text-align: center;
}

.kal-loading, .kal-error {
  padding: 48px; text-align: center; color: var(--text2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.kal-error { color: var(--primary); }

.kal-grid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.kal-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--accent); color: var(--on-accent);
}
.kal-head-cell {
  padding: 8px 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; text-align: center;
}
.kal-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
}
.kal-cell {
  min-height: 120px; padding: 6px 8px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  /* Grid-Gotcha: ohne min-width:0 expandieren Zellen mit langem Content */
  min-width: 0; overflow: hidden;
}
.kal-cell-items, .kal-cell-head, .kal-feiertag-list { min-width: 0; }
.kal-item, .kal-feiertag { max-width: 100%; }
.kal-cell:last-child { border-right: none; }
.kal-cell.out-month { background: var(--surf2); }
.kal-cell.out-month .kal-day-num { color: var(--text2); opacity: .55; }
.kal-cell.weekend { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.kal-cell.drag-over {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
}
.kal-cell.is-today { background: var(--surface); }
.kal-cell.is-today .kal-day-num {
  background: var(--primary); color: var(--on-primary);
  border-radius: 50%; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}

.kal-cell-head { display: flex; justify-content: flex-end; }
.kal-day-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px; color: var(--text);
}
.kal-cell-items { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.kal-item {
  font-size: 12px; line-height: 1.25;
  padding: 4px 6px; border-radius: 5px; cursor: pointer;
  background: var(--surf2); color: var(--text);
  border-left: 3px solid var(--accent);
  transition: background .1s, transform .1s;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden; position: relative;
}
.kal-item:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surf2)); }
.kal-item.is-cancelled { opacity: .7; }
.kal-item.is-cancelled .kal-item-title { text-decoration: line-through; }
.kal-item[draggable="true"] { cursor: grab; }
.kal-item[draggable="true"]:active { cursor: grabbing; }
.kal-item.kal-item-dragging { opacity: .4; }
.kal-item-time { font-size: 10px; color: var(--text2); font-weight: 600; }
.kal-item-title {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── Kalender-Item: interne Struktur ── */
.kal-item-top {
  display: flex; align-items: baseline; gap: 2px; min-width: 0;
}
.kal-item-top .kal-item-title { flex: 1; min-width: 0; }

/* Absagegrund-Anzeige im Item */
.kal-item-absage-notiz {
  display: block;
  font-size: 10px; line-height: 1.3;
  color: var(--primary); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

/* ── Aktions-Buttons (löschen / absagen / wiederherstellen) ── */
.kal-item-del,
.kal-item-absagen,
.kal-item-wiederherstellen {
  display: none; flex-shrink: 0;
  background: none; border: none; padding: 0 2px;
  color: var(--text2); font-size: 11px; line-height: 1;
  cursor: pointer; opacity: .7;
  transition: opacity .1s, color .1s;
}
.kal-item-del:hover            { opacity: 1; color: var(--primary); }
.kal-item-absagen:hover        { opacity: 1; color: #d97706; }
.kal-item-wiederherstellen:hover { opacity: 1; color: var(--accent,#16a34a); }
.kal-item:hover .kal-item-del,
.kal-item:hover .kal-item-absagen,
.kal-item:hover .kal-item-wiederherstellen { display: inline-block; }

/* Kalenderfarben (Border-Akzent) werden dynamisch per JS injiziert
   (siehe applyKalenderFarben in 00_config.js → .kal-cal-{key}). */

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
}
.modal-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto; overflow-x: hidden;
}
.modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--border);
}
.modal-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
}
.modal-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 22px; letter-spacing: .3px; color: var(--text); margin: 4px 0 2px;
}
.modal-sub { font-size: 13px; color: var(--text2); }
.modal-body { padding: 14px 20px 20px; }
.modal-row {
  display: flex; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.modal-row:last-child { border-bottom: none; }
.modal-label {
  flex: 0 0 110px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text2); padding-top: 2px;
}

.btn-login-header {
  background: var(--btn-bg); color: var(--on-btn); border: none;
  padding: 8px 16px; border-radius: 7px; font-weight: 600;
  cursor: pointer; font-size: 13px;
}
.btn-login-header:hover { background: var(--btn-bg2); }

.page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 32px; letter-spacing: .5px;
}

/* ── Nächste Wettkämpfe ── */
.wettkampf-sektion { margin-top: 20px; margin-bottom: 4px; }
.wk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid #27ae60;
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
  transition: background .15s, box-shadow .15s;
}
.wk-card:hover {
  background: rgba(46,204,113,.06);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.wk-card-eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wk-datum {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text2);
}
.wk-card-name {
  font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3;
}
/* Disziplin-Buttons (An-/Abmelden) – nutzen .wk-pop-btn wie das Kalender-Popover */
.wk-disz-buttons {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
/* Gäste: Disziplinen nur anzeigen, nicht klickbar (kein Hover/Cursor) */
.wk-disz-static { cursor: default; pointer-events: none; }
/* Teilnehmer-Liste */
.wk-teilnehmer {
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.wk-tl-name {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--surf2); color: var(--text2);
}
.wk-tl-name--ich {
  background: color-mix(in srgb, var(--accent) 15%, var(--surf2));
  color: var(--accent); font-weight: 600;
}
.wk-badge-fest {
  background: color-mix(in srgb, #27ae60 15%, transparent);
  color: #27ae60;
}
.wk-badge-prognose {
  background: color-mix(in srgb, #c08010 12%, transparent);
  color: #c08010;
}

/* ── Heute-Sektion ── */
.heute-sektion { margin-bottom: 20px; }

/* Heute & Morgen nebeneinander */
.heute-morgen-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: stretch;   /* beide Spalten gleich hoch */
  margin-bottom: 4px;
}
.heute-morgen-wrap .heute-sektion {
  margin-bottom: 20px;
  display: flex; flex-direction: column;
}
.heute-morgen-wrap .heute-cards {
  flex: 1;                /* füllt die verbleibende Höhe der Sektion */
  align-items: stretch;   /* Karten strecken sich auf Zellhöhe */
}
.heute-morgen-wrap .heute-card { flex: 1; }
.heute-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text2); margin-bottom: 10px;
}
.wk-zeitraum-hint {
  font-size: 11px; font-weight: 400; letter-spacing: .5px; opacity: .65; text-transform: none;
}
.heute-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* align-items: stretch (default) → alle Kacheln gleich hoch */
}
.heute-cards-1 { grid-template-columns: 1fr; }
.heute-cards-2 { grid-template-columns: repeat(2, 1fr); }
.heute-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: default;
  box-shadow: var(--shadow);
  transition: background .15s, box-shadow .15s;
  display: flex; flex-direction: row; gap: 16px; align-items: stretch;
}
/* Zweispaltig wenn Komoot-Strecke vorhanden */
.heute-card-main {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.heute-card-komoot {
  display: none; /* wird via JS befüllt und dann sichtbar */
  flex: 0 0 42%; max-width: 44%;
  flex-direction: column; gap: 6px;
  min-height: 400px;
}
.heute-card-split .heute-card-komoot {
  display: flex;
}
.heute-card-komoot iframe {
  flex: 1; width: 100%; border: none;
  border-radius: 6px; min-height: 400px; display: block;
}
/* Treffpunkt-Karte (OSM-Kacheln, kompakt) */
.heute-card-map {
  display: none;
  flex: 0 0 180px;
  flex-direction: column; gap: 6px;
}
.heute-card-has-map .heute-card-map { display: flex; }
.heute-karte-map {
  flex: 1; min-height: 80px;
  position: relative; overflow: hidden;
  border-radius: 6px; user-select: none;
}
.heute-map-nav {
  display: flex; gap: 4px; flex-shrink: 0;
}
.heute-map-nav a {
  flex: 1; text-align: center; white-space: nowrap;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 4px 8px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--text);
  text-decoration: none; transition: background .1s;
}
.heute-map-nav a:hover { background: var(--surf2); }
/* Segs-Container wächst → Aktionen werden nach unten gedrückt */
.heute-segs {
  flex: 1; display: flex; flex-direction: column;
}
.heute-segs .heute-card-actions {
  margin-top: auto;
}
.heute-card:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.heute-card.is-cancelled { opacity: .75; }
.heute-card.is-cancelled .heute-card-titel { text-decoration: line-through; color: var(--text2); }
.heute-absage-info {
  color: var(--primary); font-size: 13px; font-weight: 500;
  margin-top: 2px; line-height: 1.4;
}
.heute-card-eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.heute-typ-label {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text2);
}
.heute-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; border-radius: 4px; padding: 1px 6px;
}
.heute-badge-abgesagt { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.heute-badge-intern   { background: color-mix(in srgb, var(--text2) 12%, transparent); color: var(--text2); }
.heute-badge-privat   { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.heute-card.is-privat { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.heute-card-titel {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 24px; letter-spacing: .3px;
  color: var(--text); line-height: 1.1;
}
.heute-card-info { font-size: 13px; color: var(--text2); }
.heute-treffpunkt { color: var(--text); }
.pace-warn-global {
  padding: 10px 16px; margin-bottom: 12px;
  background: color-mix(in srgb, #c08010 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #c08010 35%, transparent);
  border-left: 4px solid #c08010;
  border-radius: var(--radius);
  font-size: 13px; color: var(--text);
  box-shadow: var(--shadow);
}
.btn-link {
  background: none; border: none; padding: 0;
  color: inherit; font-size: inherit; font-weight: 700;
  cursor: pointer; text-decoration: underline; font-family: inherit;
}
.btn-link:hover { opacity: .75; }
.heute-seg-list { margin-top: 10px; }
.heute-card-actions {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border); flex-wrap: wrap; align-items: center;
}
.heute-dabei-btn {
  /* Optik wie .heute-map-nav a */
  font-size: 11px !important; font-weight: 600 !important;
  padding: 4px 8px !important; border-radius: 5px !important;
  line-height: 1.4; letter-spacing: 0;
  border: 1px solid var(--border) !important; color: var(--text) !important;
  background: none !important; transition: background .1s;
  cursor: pointer;
}
.heute-dabei-btn:hover { background: var(--surf2) !important; }
.heute-dabei-btn.is-dabei {
  background: color-mix(in srgb, var(--green, #1a8a3a) 15%, var(--surface)) !important;
  color: var(--green, #1a8a3a) !important;
  border-color: color-mix(in srgb, var(--green, #1a8a3a) 40%, transparent) !important;
}

/* Segment-Blöcke (TrainingPeaks-Stil) */
.seg-blocks-wrap { margin-top: 10px; }
.seg-blocks {
  display: flex; align-items: flex-end; gap: 3px;
  min-height: 24px; padding: 4px 0 2px;
}
.seg-blk {
  border-radius: 3px; transition: opacity .15s; cursor: default;
}
.seg-blk-work {
  min-width: 12px; opacity: .9;
}
.seg-blk-work:hover { opacity: 1; filter: brightness(1.1); }
.seg-blk-pause {
  min-width: 8px; opacity: .7;
  background: color-mix(in srgb, var(--text2) 35%, var(--surface));
  border-radius: 2px;
}
.seg-blk-sep {
  flex: 0 0 12px;
}
.seg-blk-typ-laufen    { background: var(--primary); }
.seg-blk-typ-intervall { background: var(--accent); }
.seg-blk-typ-kraft     { background: var(--green, #3a9); }
.seg-blk-typ-runde     { background: #8b5cf6; }
.seg-blk-typ-frei      { background: var(--text2); }
.seg-blk-summary { margin-top: 6px; }
.seg-blk-sum-row {
  font-size: 11px; color: var(--text2); line-height: 1.6;
}

/* ============================================================
   Quartalsplan / Listenansicht
   ============================================================ */
.liste-wrap { padding: 24px 28px 48px; max-width: 960px; margin: 0 auto; }
.liste-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.liste-nav { display: flex; align-items: center; gap: 12px; }
.liste-nav-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.liste-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 24px; letter-spacing: .5px;
  color: var(--text);
}
.view-toggle {
  display: flex;
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.view-toggle .btn { border-radius: 0; border: none !important; }
.view-toggle .btn + .btn { border-left: 1px solid var(--border) !important; }
.view-toggle .view-active {
  background: var(--accent); color: var(--on-accent);
}
.view-toggle .view-active:hover { background: var(--accent); opacity: .92; }

.liste-week-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}
.liste-kw-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  background: var(--surf2);
  border-bottom: 1px solid var(--border);
}
.liste-kw-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text2);
  background: var(--border); border-radius: 4px; padding: 2px 7px;
}
.liste-kw-range { font-size: 13px; color: var(--text2); font-weight: 500; }
.liste-rows { display: flex; flex-direction: column; }
.liste-row {
  display: grid;
  grid-template-columns: 110px 52px 88px 1fr auto;
  align-items: center;
  gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--border);
  cursor: pointer; transition: background .1s;
  font-size: 14px;
}
.liste-row:last-child { border-bottom: none; }
.liste-row:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.liste-row.is-today { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.liste-row.is-cancelled { opacity: .55; text-decoration: line-through; }
.liste-row.is-kein-training { opacity: .5; cursor: default; font-style: italic; }
.liste-row.is-kein-training:hover { background: none; }
.liste-date { font-weight: 600; color: var(--text); white-space: nowrap; }
.liste-date-today {
  background: var(--primary); color: var(--on-primary);
  border-radius: 4px; padding: 1px 6px;
}
.liste-time { color: var(--text2); font-size: 13px; white-space: nowrap; }
.liste-typ-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; border-radius: 4px; padding: 2px 7px;
  background: var(--surf2); color: var(--text2); white-space: nowrap;
  justify-self: start;
}
.liste-typ-intervall   { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.liste-typ-dauerlauf   { background: color-mix(in srgb, var(--green, #1a8a3a) 14%, var(--surface)); color: var(--green, #1a8a3a); }
.liste-typ-funktionell { background: color-mix(in srgb, #c08010 14%, var(--surface)); color: #c08010; }
.liste-typ-runde       { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.liste-typ-event       { background: color-mix(in srgb, #8845c0 14%, var(--surface)); color: #8845c0; }
.liste-typ-kein_training { background: none; color: var(--text2); letter-spacing: 0; }
.liste-title-text {
  font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liste-ort { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-loading, .liste-error, .liste-empty {
  padding: 48px; text-align: center; color: var(--text2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.liste-error { color: var(--primary); }

/* ── Listenansicht: angereicherte Elemente (Parität mit Kalender) ── */
/* Filter-Legende über der Liste */
#liste-legend:not(:empty) { margin-bottom: 14px; }
#liste-legend .kal-legend { margin-top: 0; justify-content: flex-start; }

/* Aktuelle KW in der Listendarstellung hervorheben */
.liste-week-block.is-current-kw {
  border-color: var(--primary);
}
.liste-week-block.is-current-kw .liste-kw-head {
  background: color-mix(in srgb, var(--primary) 10%, var(--surf2));
  border-bottom-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.liste-week-block.is-current-kw .liste-kw-badge {
  background: var(--primary);
  color: var(--on-primary);
}

/* Wochenkilometer-Badge im KW-Kopf */
.liste-kw-km {
  margin-left: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 15px; line-height: 1;
  color: var(--accent); white-space: nowrap;
}

/* Privater Eintrag (Mein Plan) */
.liste-row.is-privat {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.liste-mein-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
  flex-shrink: 0;
}
.liste-km {
  font-size: 12px; font-weight: 700; color: var(--text2);
  white-space: nowrap;
}
.liste-km.is-fallback-km { opacity: .6; font-style: italic; }

/* Wettkampf-Zeile (Forecast / Serie) – Farbe folgt dem konfigurierten Wettkampf-Typ */
.liste-row.liste-row-wettkampf { border-left-color: #27ae60; }
.liste-typ-wettkampf {
  background: color-mix(in srgb, #27ae60 16%, var(--surface)); color: #1e8449;
}
.liste-wk-prognose {
  font-size: 11px; font-weight: 600; color: var(--text2);
  font-style: italic; opacity: .8;
}
/* Disziplin-Chips + Teilnehmerzahl in der Wettkampf-Zeile (letzte Spalte) */
.liste-wk-extra {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  justify-content: flex-end; overflow: visible; max-width: 360px;
}
.liste-wk-chip {
  font-size: 10px; font-weight: 700; line-height: 1.4;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, #27ae60 14%, var(--surface)); color: #1e8449;
}
.liste-wk-teil {
  font-size: 11px; font-weight: 600; color: var(--text2);
  white-space: nowrap; margin-left: 2px;
}
.liste-wk-link {
  text-decoration: none; color: #1e8449; font-weight: 700;
  margin-left: 4px; opacity: .85;
}
.liste-wk-link:hover { opacity: 1; }

/* Historische Wettkampf-Kacheln (vergangene Veranstaltungen aus Statistikportal) */
.wk-hist-item {
  background: rgba(46,204,113,.07);
  border-left: 3px solid #27ae60;
  opacity: .72;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  display: block;
}
a.wk-hist-item:hover { opacity: 1; background: rgba(46,204,113,.15); }
.wk-hist-arrow {
  font-size: 10px;
  color: #27ae60;
  margin-left: 3px;
  opacity: .7;
}

/* Heute-Karten: 2-spaltig bei mittlerer Breite (außer explizite Count-Klasse) */
@media (max-width: 960px) and (min-width: 721px) {
  .heute-cards:not(.heute-cards-1):not(.heute-cards-2) { grid-template-columns: repeat(2, 1fr); }
}

/* Heute+Morgen-Wrap: ab 900px einspaltig stapeln */
@media (max-width: 900px) {
  .heute-morgen-wrap { grid-template-columns: 1fr; gap: 0; }
}

/* Mobile: kompakter Kalender */
@media (max-width: 720px) {
  .kal-wrap { padding: 12px 8px 32px; }
  .heute-cards { grid-template-columns: 1fr !important; }
  .heute-card { flex-direction: column; }
  .heute-card-komoot { flex: none; max-width: 100%; min-height: 180px; }
  .heute-card-komoot iframe { min-height: 180px; }
  .heute-card-map { flex: none; }
  .heute-karte-map { min-height: 140px; }
  .kal-title { font-size: 22px; min-width: 0; }
  .kal-cell { min-height: 80px; padding: 3px 4px; }
  .kal-head-cell { padding: 6px 4px; font-size: 10px; letter-spacing: .5px; }
  .kal-day-num { font-size: 13px; }
  .kal-item { font-size: 10px; padding: 2px 4px; }
  .kal-item-time { display: none; }
  .liste-wrap { padding: 12px 8px 32px; }
  .liste-title { font-size: 18px; }
  .liste-nav-right { gap: 6px; }
  .liste-row {
    grid-template-columns: 78px 40px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 8px; padding: 9px 12px;
  }
  .liste-row .liste-typ-badge { display: none; }
  .liste-row .liste-date  { grid-column: 1; grid-row: 1; }
  .liste-row .liste-time  { grid-column: 2; grid-row: 1; font-size: 12px; }
  .liste-row .liste-title-text { grid-column: 3; grid-row: 1; white-space: normal; word-break: break-word; }
  .liste-row .liste-ort   { grid-column: 2 / 4; grid-row: 2; text-align: left; }
  .liste-row .liste-wk-extra { justify-content: flex-start; max-width: none; }
  .liste-kw-km { font-size: 13px; }
  .liste-kw-range { font-size: 12px; }
  #liste-legend .kal-legend { gap: 6px 8px; }
}

/* Touch-Geräte: Aktionen ohne Hover dauerhaft sichtbar */
@media (hover: none) {
  .kal-item-del,
  .kal-item-absagen,
  .kal-item-wiederherstellen { display: inline-block; opacity: .85; }
  .kal-add-btn  { opacity: .7; }
}

/* Breite Tabellen (Admin) horizontal scrollbar statt Layout sprengen */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Wettkampfplanung-Tabelle ── */
/* Globale th/td-Regeln aus der shared app.css greifen; hier nur Spezifisches */
.wkp-table { min-width: 560px; }
.wkp-th-cb, .wkp-td-cb { width: 36px; text-align: center !important; }
.wkp-url-link { font-size: 11px; color: var(--primary); text-decoration: none; }
.wkp-ort { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* Admin → System: responsives Spaltenlayout */
.admin-sys-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.admin-sys-cols  { display: grid; grid-template-columns: 3fr 7fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 720px) {
  .admin-sys-stats, .admin-sys-cols { grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
  .admin-sys-table { min-width: 560px; }
  /* Statistik-Tabellen: lange Werte (DB-Server, E-Mail) umbrechen statt überlaufen */
  .admin-sys-stats table { table-layout: fixed; }
  .admin-sys-stats th, .admin-sys-stats td { word-break: break-word; overflow-wrap: anywhere; }
}

/* Smartphone-Politur: Modals fast bildschirmfüllend, größere Tap-Flächen */
@media (max-width: 560px) {
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal-card { max-height: 94vh; border-radius: 14px 14px 0 0; }
  .modal-head { padding: 16px 16px 10px; }
  .modal-body { padding: 12px 16px 16px; }
  .modal-label { flex-basis: 92px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }
  .view-toggle .btn { padding: 8px 10px; }
  .liste-nav .btn, .kal-nav .btn { min-width: 38px; }
}

/* ============================================================
   Trainingsportal – Editor & Segmente
   ============================================================ */

/* Cell-Add-Button */
.kal-add-btn {
  background: transparent; border: none; color: var(--text2);
  width: 18px; height: 18px; padding: 0; line-height: 1;
  font-size: 16px; cursor: pointer; opacity: 0; transition: opacity .1s;
}
.kal-cell:hover .kal-add-btn { opacity: 1; }
.kal-add-btn:hover { color: var(--accent); }
.kal-cell-head {
  display: flex; justify-content: space-between; align-items: center;
}

/* Segmente-Liste im Detail-Modal */
.modal-row-block { flex-direction: column; align-items: stretch; gap: 6px; }
.modal-row-block .modal-label { padding-top: 0; }

.seg-list { display: flex; flex-direction: column; gap: 6px; }
.seg-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surf2);
}
.seg-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.seg-main { flex: 1; font-size: 14px; }
.seg-pace {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px; padding: 2px 6px;
}

.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
}

/* ── Editor-Modal ── */
.modal-card.modal-wide { max-width: 760px; }

.ed-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
  margin-bottom: 18px;
}
.ed-fg { display: flex; flex-direction: column; gap: 4px; }
.ed-fg-wide { grid-column: 1 / -1; }
.ed-fg label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text2);
}
.ed-fg .ed-hint {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 11px; color: var(--text2); opacity: .8;
}
.ed-fg input, .ed-fg select, .ed-fg textarea {
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 8px 10px;
  font-size: 14px; font-family: inherit;
}
.ed-fg textarea { resize: vertical; }
.ed-fg input:focus, .ed-fg select:focus, .ed-fg textarea:focus {
  outline: none; border-color: var(--accent);
}

.ed-segwrap {
  border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px;
}
.ed-segheader {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.ed-segheader h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: .5px; margin: 0;
}
.ed-segactions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ed-seg-globals entfernt (Pace-Referenz / Pause-Typ jetzt pro Abschnitt) */

.ed-segleer {
  padding: 18px; text-align: center; color: var(--text2);
  background: var(--surf2); border: 1px dashed var(--border);
  border-radius: 6px; font-size: 13px;
}

.ed-seg-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.ed-seg-table th {
  text-align: left; padding: 4px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text2);
  border-bottom: 1.5px solid var(--border);
}
.ed-seg-table td {
  padding: 4px; border-bottom: 1px solid var(--border);
}
.ed-seg-input {
  width: 100%; background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 0 8px; font-size: 13px;
  font-family: inherit; height: 36px; box-sizing: border-box;
}
.ed-seg-input:focus { outline: none; border-color: var(--accent); }
.ed-seg-num  { width: 60px; }
.ed-seg-dist { width: 90px; }

/* Selects: einheitlicher heller Pfeil im Darkmode */
select.ed-seg-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a0a8be' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px; cursor: pointer;
}

/* Number-Spinner hell im Darkmode */
input[type=number].ed-seg-input::-webkit-inner-spin-button,
input[type=number].ed-seg-input::-webkit-outer-spin-button {
  opacity: 1; filter: brightness(8);
}

.btn-icon {
  background: transparent; border: none; color: var(--text2);
  font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1;
  border-radius: 4px;
}
.btn-icon:hover { background: var(--surf2); color: var(--primary); }

.ed-seghint {
  margin-top: 8px; font-size: 11px; color: var(--text2); font-style: italic;
}
.be-gesamtdistanz {
  margin-top: 6px; font-size: 12px; color: var(--text2);
  text-align: right; min-height: 1em;
}

.ed-titelwrap {
  padding-top: 14px; margin-top: 4px;
  border-top: 1px solid var(--border);
}
.ed-titel-row {
  display: flex; gap: 6px; align-items: center;
}
.ed-titel-row input { flex: 1; }
.ed-titel-reset {
  flex-shrink: 0; font-size: 16px; padding: 6px 10px;
}

.ed-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ed-footer-right { display: flex; gap: 8px; }

/* Buttons (falls noch nicht definiert in dieser Datei) */
.btn {
  padding: 8px 14px; border-radius: 7px; font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: inherit; border: 1.5px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary {
  background: var(--btn-bg); color: var(--on-btn); border-color: var(--btn-bg);
}
.btn-primary:hover { background: var(--btn-bg2); border-color: var(--btn-bg2); }

/* Anon-Header-Buttons (Anmelden/Registrieren) exakt wie im Statistikportal:
   die obigen addons.css-.btn-Overrides hier zurücknehmen und 1:1 die Werte
   der gemeinsamen app.css verwenden. */
.anon-btn-wrap .btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 7px; padding: 8px 18px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.anon-btn-wrap .btn.btn-sm {
  padding: 5px 12px; font-size: 12px; height: 30px;
  box-sizing: border-box; line-height: 1;
}
.anon-btn-wrap .btn-ghost {
  background: var(--surf2); color: var(--text); border: 1.5px solid var(--border);
}

/* Notifications */
#notification-container {
  position: fixed; bottom: 24px; right: 16px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
}
.notif {
  padding: 10px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); min-width: 220px;
}
.notif-ok   { background: var(--green); color: white; }
.notif-warn { background: #c08010; color: white; }

/* Mobile-Anpassung Editor */
@media (max-width: 640px) {
  .ed-grid { grid-template-columns: 1fr; }
  .ed-seg-num  { width: 50px; }
  .ed-seg-dist { width: 70px; }
}

/* ============================================================
   Trainingsportal – Pace-Anzeige im Detail-Modal
   ============================================================ */
.pace-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surf2));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 6px; font-size: 12px;
}
.pace-label { font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; font-size: 10px; }
.pace-mode-sel {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 5px; padding: 3px 6px; font-size: 12px; font-family: inherit;
}
.pace-mode-sel:focus { outline: none; border-color: var(--accent); }
.pace-hint { color: var(--text2); font-style: italic; }

.seg-pace-info {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; min-width: 90px;
}
.seg-split {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 18px; line-height: 1;
  color: var(--accent); letter-spacing: .3px;
}
.seg-split-unit { font-size: 10px; font-weight: 600; color: var(--text2); margin-left: 4px; letter-spacing: 0; }
.seg-pace-pace { font-size: 11px; font-weight: 600; color: var(--text2); }

/* ============================================================
   Trainingsportal – ICS-Abo-Modal
   ============================================================ */
.ics-section {
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.ics-section:last-child { border-bottom: none; }
.ics-section h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .5px;
  margin: 0 0 4px; color: var(--text);
}
.ics-hint { font-size: 12px; color: var(--text2); margin: 0 0 10px; }
.ics-url {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.ics-url input {
  flex: 1; min-width: 200px;
  background: var(--surf2); border: 1px solid var(--border);
  border-radius: 5px; padding: 6px 8px; font-size: 12px;
  font-family: ui-monospace, monospace; color: var(--text);
}
.ics-url input:focus { outline: none; border-color: var(--accent); }
.ics-actions {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.ics-warn {
  margin-top: 10px; font-size: 11px; color: var(--text2);
  background: color-mix(in srgb, #c08010 15%, var(--surf2));
  padding: 8px 10px; border-radius: 5px;
  border-left: 3px solid #c08010;
}
.ics-format-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 0 14px; border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.ics-format-label {
  font-size: 12px; font-weight: 600; color: var(--text2);
  margin-right: 2px;
}

/* ============================================================
   Trainingsportal – Trainingsblöcke
   ============================================================ */
.bloecke-wrap { padding: 24px 28px 48px; max-width: 1200px; margin: 0 auto; }

.bloecke-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 8px; flex-wrap: wrap;
}
.bloecke-toolbar-right { display: flex; gap: 8px; }
.bloecke-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 28px; letter-spacing: .5px;
  color: var(--text); margin: 0;
}
.bloecke-intro {
  font-size: 13px; color: var(--text2); margin: 0 0 20px;
}
.bloecke-loading {
  padding: 48px; text-align: center; color: var(--text2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.bloecke-leer {
  padding: 40px; text-align: center; color: var(--text2);
  background: var(--surf2); border: 1px dashed var(--border); border-radius: var(--radius);
  font-size: 14px;
}
.bloecke-error { color: var(--primary); }

.bloecke-gruppe-titel {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 10px;
}
.bloecke-gruppe-typ {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text2);
  padding: 2px 10px 2px 8px;
  border-left: 4px solid var(--accent);
  /* Farbe wird per JS in applyTypenFarben() überschrieben */
}
.bloecke-gruppe-count {
  font-size: 12px; font-weight: 600;
  color: var(--text2);
  background: var(--bg2); border-radius: 20px;
  padding: 1px 8px;
}

.bloecke-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Block-Karte */
.block-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
  border-top: 4px solid var(--accent);
  transition: box-shadow .15s, transform .1s;
}
.block-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

/* Typ-Akzentfarbe (oben) */
.block-typ-intervall    { border-top-color: var(--primary); }
.block-typ-dauerlauf    { border-top-color: var(--green, #1a8a3a); }
.block-typ-funktionell  { border-top-color: #c08010; }
.block-typ-runde        { border-top-color: var(--accent); }
.block-typ-event        { border-top-color: #8845c0; }
.block-typ-kein_training { border-top-color: var(--border); }

.block-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.block-typ-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 4px; padding: 2px 7px;
}
.block-sicht-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; border-radius: 4px; padding: 2px 7px;
}
.block-sicht-global {
  color: var(--green, #1a8a3a);
  background: color-mix(in srgb, var(--green, #1a8a3a) 12%, transparent);
}
.block-sicht-privat {
  color: var(--text2);
  background: color-mix(in srgb, var(--text2) 10%, transparent);
}

.block-titel {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 18px; letter-spacing: .3px; color: var(--text);
}
.block-treffpunkt { font-size: 12px; color: var(--text2); }
.block-bemerkung  { font-size: 13px; color: var(--text); line-height: 1.4; }

.block-seg-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  border-radius: 4px; padding: 2px 7px;
  color: var(--text2);
  background: color-mix(in srgb, var(--text2) 10%, transparent);
}
.block-seg-leer {
  color: #c08010;
  background: color-mix(in srgb, #c08010 12%, transparent);
}

.block-card-actions {
  display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap;
}
.btn.btn-sm { padding: 5px 11px; font-size: 12px; }

/* Responsive */
@media (max-width: 640px) {
  .bloecke-wrap { padding: 12px 8px 32px; }
  .bloecke-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Trainingsportal – Einstellungen-Layout
   ============================================================ */
/* Label-Spalte bekommt fixe Mindestbreite; Statistikportal-CSS hat
   kein flex-shrink:0, weshalb sie sonst auf Wortbreite (~60px) schrumpft.
   Input-Spalte erhält min-width:0 damit sie bei breitem Content nicht
   die Label-Spalte verdrängt. */
.settings-row-label { flex-shrink: 0; min-width: 180px; }
.settings-row-input { flex: 1; min-width: 0; }

.uhrzeiten-grid { display: flex; flex-direction: column; gap: 6px; }
.uhrzeit-row { display: flex; align-items: center; gap: 12px; }
.uhrzeit-label {
  font-size: 13px; font-weight: 600; color: var(--text);
  min-width: 90px; flex-shrink: 0;
}

/* ============================================================
   Trainingsportal – Feiertage / Ferien
   ============================================================ */
.kal-feiertag-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.kal-feiertag {
  font-size: 10px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  border-left: 3px solid var(--primary);
  text-transform: uppercase; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.kal-cell.is-feiertag {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

/* ============================================================
   Trainingsportal – Tagesnotizen im Planungskalender
   ============================================================ */
.kal-notiz-list {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px;
}
.kal-notiz {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 2px 3px;
  font-size: 11px; line-height: 1.3;
  padding: 2px 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  color: var(--text2);
  border-left: 3px solid var(--border);
  max-width: 100%; position: relative;
}
.kal-notiz-icon { flex-shrink: 0; font-size: 9px; margin-top: 1px; }
.kal-notiz-text {
  flex: 1; overflow-wrap: break-word; word-break: break-word; min-width: 0;
}
.kal-notiz-autor {
  flex: 0 0 100%; font-size: 9px; opacity: .65;
  white-space: nowrap; padding-left: 13px;
}
.kal-notiz[draggable="true"] { cursor: grab; }
.kal-notiz-dragging { opacity: .35; }
.kal-notiz-edit,
.kal-notiz-del {
  display: none; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  padding: 0 2px; font-size: 11px; line-height: 1;
  color: inherit; opacity: .6;
}
.kal-notiz-edit:hover { opacity: 1; }
.kal-notiz-del:hover  { opacity: 1; color: var(--primary); }
.kal-notiz:hover .kal-notiz-edit,
.kal-notiz:hover .kal-notiz-del { display: block; }

/* Notiz-Hinzufügen-Button im Tageskopf */
.kal-notiz-add {
  display: none;
  background: none; border: none; cursor: pointer;
  font-size: 11px; padding: 0 2px; opacity: .5;
  color: var(--text2); line-height: 1;
}
.kal-notiz-add:hover { opacity: 1; color: var(--primary); }
.kal-cell:hover .kal-notiz-add { display: inline; }
@media (max-width: 900px) {
  .kal-notiz-add { display: inline; }
  .kal-notiz-edit, .kal-notiz-del { display: block; }
}

/* ============================================================
   Trainingsportal – Profil-Modal (Pace-Referenzen)
   ============================================================ */
.profil-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 17px; letter-spacing: .3px;
  color: var(--text); margin: 0 0 6px;
}
.profil-hint-global {
  font-size: 13px; color: var(--text2); margin: 0 0 16px; line-height: 1.5;
}
.profil-refs { display: flex; flex-direction: column; }
.profil-ref-row {
  display: flex; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--border); align-items: flex-start;
}
.profil-ref-row:last-child { border-bottom: none; }
.profil-ref-label {
  flex: 0 0 115px; font-size: 13px; font-weight: 600;
  color: var(--text); padding-top: 9px;
}
.profil-ref-controls {
  flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.profil-sel-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.profil-modus-sel { flex: 1; min-width: 0; }
.profil-pace-chip {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 5px; padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profil-manual-wrap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.profil-manual-input { width: 130px !important; font-variant-numeric: tabular-nums; }
.profil-hint {
  font-size: 11px; color: var(--text2); font-style: italic;
}
.profil-ref-del {
  flex: 0 0 auto; margin-left: auto; align-self: flex-start; margin-top: 6px;
  font-size: 16px; line-height: 1; color: var(--text2);
}
.profil-ref-del:hover { color: var(--primary); }
.profil-add-row {
  display: flex; gap: 10px; align-items: center; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.profil-new-dist-input { flex: 1; max-width: 280px; }

/* Weg-zum-Training Section */
.profil-weg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.weg-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--border);
}
.weg-row select { flex: 1; min-width: 110px; }
.weg-km-wrap {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
}
.weg-km-wrap input[type="number"] { width: 80px !important; }
.weg-km-label { font-size: 13px; color: var(--text2); white-space: nowrap; }
.weg-del-btn {
  flex: 0 0 auto; font-size: 18px; line-height: 1;
  color: var(--text2); background: none; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
}
.weg-del-btn:hover { color: var(--primary); }
.weg-add-row {
  display: flex; align-items: center; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* km-Zeile im Einheit-Detail-Modal */
.modal-km-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 0;
}
.modal-km-chip {
  display: flex; flex-direction: column; align-items: center;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 8px; padding: 6px 14px; min-width: 80px;
}
.modal-km-chip-val {
  font-size: 15px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.modal-km-chip-lbl { font-size: 11px; color: var(--text2); margin-top: 1px; }
.modal-km-plus { font-size: 16px; color: var(--text2); font-weight: 600; }
.modal-km-chip.is-total {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.modal-km-chip.is-total .modal-km-chip-val { font-size: 17px; }

/* Error-Notification (fehlte bisher) */
.notif-err { background: var(--primary); color: white; }

/* Avatar: Klick-Cursor + Online-Dot */
.user-online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--surface);
  transform: translate(35%, 35%);
  pointer-events: none; z-index: 2;
}

/* ============================================================
   Trainingsportal – Planung (Split-View: Blöcke links + Kalender rechts)
   ============================================================ */

/* body.planung-active: App-Screen als Flex-Spalte, main füllt Rest – kein Seiten-Scroll */
body.planung-active                { overflow: hidden; }
body.planung-active #app-screen    { display: flex !important; flex-direction: column; height: 100vh; overflow: hidden; }
body.planung-active #main-content  { flex: 1; min-height: 0; overflow: hidden; padding: 0 !important; }
body.planung-active #app-footer    { display: none; }

.planung-wrap {
  height: 100%;    /* füllt das durch body-Class beschränkte #main-content */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-width: none;
}

.planung-split {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  gap: 0;
}

/* ── Sidebar: Blöcke (rechts) ── */
.planung-sidebar {
  width: 280px; flex-shrink: 0;
  height: 100%; overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
  /* kein border-radius, kein box-shadow – flächig in Layout eingebettet */
}
.planung-sidebar-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.planung-sidebar-head-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.planung-sidebar-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: .3px; color: var(--text);
}
.planung-sidebar-hint {
  font-size: 11px; color: var(--text2);
}

/* ── Kalender-Spalte (links) – Grid füllt exakt die Höhe, kein Scroll ── */
.planung-kal-col {
  flex: 1 1 0; min-width: 560px;
  height: 100%;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.planung-kal-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  flex-shrink: 0;
}
/* Grid füllt den verbleibenden Platz, Zeilen teilen sich die Höhe gleichmäßig */
.planung-kal-col .kal-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
.planung-kal-col .kal-row {
  flex: 1 1 0;
  min-height: 0;
}
.planung-kal-col .kal-cell {
  min-height: 0;
}
.planung-kal-col .kal-cell-items {
  overflow: hidden;
}
.planung-kal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 24px; letter-spacing: .5px;
  color: var(--text); margin: 0; flex: 1; text-align: center;
}
.planung-kal-loading {
  padding: 32px; text-align: center; color: var(--text2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}

/* Drop-Hinweis in leeren Zellen */
.planung-drop-hint {
  font-size: 10px; color: var(--text2); opacity: 0;
  text-align: center; padding: 4px 0; letter-spacing: .5px;
  transition: opacity .15s; pointer-events: none;
  text-transform: uppercase;
}
.planung-kal-cell:hover .planung-drop-hint { opacity: .6; }
.planung-kal-cell.planung-drag-over .planung-drop-hint { opacity: 1; }

/* Drop-Zone Highlight */
.planung-kal-cell.in-month {
  cursor: default;
  transition: background .1s, outline .1s;
}
.planung-kal-cell.planung-drag-over {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* Bearbeiten-Button auf Block-Karte */
.pblock-edit-btn {
  flex-shrink: 0; opacity: 0; transition: opacity .12s;
  padding: 3px 7px; font-size: 13px;
}
.pblock-card:hover .pblock-edit-btn { opacity: 1; }
.planung-bloecke-loading {
  padding: 32px 16px; text-align: center; color: var(--text2); font-size: 13px;
}

/* Gruppen in der Sidebar */
.pblock-gruppe { padding: 0 12px 12px; }
.pblock-gruppe-titel {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text2);
  padding: 12px 4px 6px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 8px;
  text-align: left;
}
.pblock-gruppe-titel.block-typ-intervall   { border-bottom-color: var(--primary); }
.pblock-gruppe-titel.block-typ-dauerlauf   { border-bottom-color: var(--green, #1a8a3a); }
.pblock-gruppe-titel.block-typ-funktionell { border-bottom-color: #c08010; }
.pblock-gruppe-titel.block-typ-runde       { border-bottom-color: var(--accent); }
.pblock-gruppe-titel.block-typ-event       { border-bottom-color: #8845c0; }
.pblock-gruppe-titel.block-typ-kein_training { border-bottom-color: var(--border); }

/* Draggable Block-Karte */
.pblock-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--surf2); border: 1.5px solid var(--border);
  border-radius: 8px; cursor: grab;
  border-left: 4px solid var(--accent);
  transition: box-shadow .12s, background .1s, opacity .15s;
  user-select: none;
}
.pblock-card:hover { box-shadow: var(--shadow); background: var(--surface); }
.pblock-card:active { cursor: grabbing; }
.pblock-card.pblock-dragging { opacity: .45; box-shadow: var(--shadow-lg); }
.pblock-card.block-typ-intervall   { border-left-color: var(--primary); }
.pblock-card.block-typ-dauerlauf   { border-left-color: var(--green, #1a8a3a); }
.pblock-card.block-typ-funktionell { border-left-color: #c08010; }
.pblock-card.block-typ-runde       { border-left-color: var(--accent); }
.pblock-card.block-typ-event       { border-left-color: #8845c0; }
.pblock-card.block-typ-kein_training { border-left-color: var(--border); }

.pblock-drag-handle {
  color: var(--text2); font-size: 16px; line-height: 1;
  flex-shrink: 0; opacity: .5; letter-spacing: -1px;
}
.pblock-info { flex: 1; min-width: 0; text-align: left; }
.pblock-titel {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pblock-meta {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px;
}

/* ── Hover-Popover auf Kalender-Einträge ── */
.kal-popover {
  position: fixed; z-index: 1200;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 12px 14px;
  display: none;
  pointer-events: auto;
}
.kal-pop-loading { color: var(--text2); font-size: 13px; }
.kal-pop-typ {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text2); margin-bottom: 4px;
}
.kal-pop-titel {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: .2px;
  color: var(--text); margin-bottom: 5px; line-height: 1.2;
}
.kal-pop-meta {
  font-size: 12px; color: var(--text2); margin-bottom: 4px;
}
.kal-pop-bemerkung {
  font-size: 12px; color: var(--text2); font-style: italic;
  border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px;
}
.kal-pop-segs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.kal-pop-seg {
  font-size: 11px; background: var(--surf2); border-radius: 4px;
  padding: 2px 6px; color: var(--text);
}
/* Segment-Block-Visualisierung im Popover: kompakter als im Modal */
.kal-pop-segs-blocks .seg-blocks-wrap { margin: 6px 0 0; }
.kal-pop-segs-blocks .seg-blocks { gap: 3px; }
.kal-pop-segs-blocks .seg-blk { min-width: 6px; border-radius: 3px; }
.kal-pop-segs-blocks .seg-blk-sep { width: 4px; }
.kal-pop-segs-blocks .seg-blk-sum-row {
  font-size: 11px; color: var(--text2); margin-top: 4px;
}

.kal-pop-actions {
  margin-top: 10px; border-top: 1px solid var(--border);
  padding-top: 8px; display: flex; gap: 6px;
}
.kal-pop-actions.kal-pop-actions-col { flex-direction: column; }
.kal-pop-abo-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text2);
  cursor: pointer; user-select: none;
  padding: 2px 0;
}
.kal-pop-abo-label:hover { color: var(--text); }
.kal-pop-abo-cb { accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }

/* Responsive: gestapeltes Layout, normales Seiten-Scrollen (Viewport-Lock
   wird in _applyPlanungLayout() für ≤900px deaktiviert) */
@media (max-width: 900px) {
  .planung-wrap { height: auto !important; overflow: visible; display: block; }
  .planung-split { flex-direction: column; align-items: stretch; overflow: visible; min-height: 0; }

  /* Kalender oben: natürliche Zeilenhöhen statt Flex-Fill (sonst kollabieren
     die Zeilen auf 0, weil die Spalte keine feste Höhe mehr hat) */
  .planung-kal-col {
    height: auto; overflow: visible; padding: 12px 8px 20px;
    order: 1; min-width: 0; flex: none;
  }
  .planung-kal-col .kal-grid { display: block; flex: none; min-height: 0; }
  .planung-kal-col .kal-row { flex: none; min-height: 0; }
  .planung-kal-col .kal-cell { min-height: 62px; }
  .planung-kal-col .kal-cell-items { overflow: visible; }
  .planung-kal-title { font-size: 20px; }

  /* Blöcke darunter: volle Breite, eigene Höhe – kein künstliches Stauchen */
  .planung-sidebar {
    width: 100%; height: auto; max-height: none;
    border-left: none; border-top: 1px solid var(--border);
    order: 2; overflow: visible;
  }
  .planung-sidebar-head { position: static; }
}

/* ── Treffpunkte ──────────────────────────────────────────── */
.tp-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 48px; }
.tp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.tp-header h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px; font-weight: 800; letter-spacing: .3px; margin: 0;
}
.tp-leer, .tp-loading, .tp-error {
  color: var(--text2); font-size: 15px; padding: 24px 0;
}
.tp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.tp-karte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
}
.tp-karte-map { width: 100%; height: 160px; overflow: hidden; flex-shrink: 0; }
.tp-karte-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tp-karte-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: .2px; color: var(--text);
}
.tp-coords { font-size: 12px; color: var(--text2); }
.tp-coords-leer { font-style: italic; }
.tp-map-links { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-karte-actions { display: flex; gap: 8px; margin-top: auto; }
.tp-del-btn { color: var(--primary) !important; }

/* Map-Picker im Modal */
.tp-map-hint { font-size: 13px; color: var(--text2); margin: 12px 0 6px; }
.tp-ed-map { height: 320px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.tp-map-err { padding: 20px; color: var(--text2); font-size: 13px; text-align: center; }

/* Treffpunkt-Links im Kalender-Modal */
.modal-treffpunkt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-link {
  font-size: 12px; color: var(--accent); text-decoration: none;
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 7px;
  white-space: nowrap;
}
.tp-link:hover { background: var(--accent); color: #fff; }

/* Komoot-Strecken-Embed */
.komoot-embed {
  width: 100%; border-radius: 8px; overflow: hidden;
  margin: 6px 0 8px; border: 1px solid var(--border);
}
.komoot-embed iframe {
  display: block; width: 100%; height: 680px; border: none;
}
/* Im Editor etwas kompakter */
.ed-komoot-preview { margin-top: 8px; }
.ed-komoot-preview .komoot-embed iframe { height: 480px; }

/*
 * Komoot-Embed im App-Darkmode:
 * Komoot liest prefers-color-scheme vom OS, nicht von data-theme.
 * → Filter nur wenn App dunkel ist UND OS hell (Komoot rendert dann hell).
 * → Wenn OS dunkel ist, schaltet Komoot selbst – kein Filter.
 */
[data-theme="dark"] .komoot-embed iframe,
[data-theme="dark"] .heute-card-komoot iframe,
[data-theme="dark"] .ed-komoot-preview iframe {
  filter: invert(1) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  /* OS dunkel → Komoot bereits dunkel → Filter zurücksetzen */
  [data-theme="dark"] .komoot-embed iframe,
  [data-theme="dark"] .heute-card-komoot iframe,
  [data-theme="dark"] .ed-komoot-preview iframe {
    filter: none;
  }
}


/* ── Block-Editor ──────────────────────────────────────────────────── */
.ed-block {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--surf2);
}
.ed-block-head {
  display: flex; gap: 12px; align-items: flex-start;
}
.ed-block-wdh {
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0; min-width: 72px;
}
.ed-block-wdh label {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text2);
}
.ed-block-abschnitte { flex: 1; min-width: 0; overflow-x: auto; }
.ed-block-del { margin-left: 4px; flex-shrink: 0; }
.ed-block-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Pace/Pause-Spalte in der Abschnitte-Tabelle */
.ed-seg-table td:nth-child(3) select,
.ed-seg-table th:nth-child(3) { min-width: 140px; }

/* Typ-Button (Tempo/Pause Toggle) */
.ed-typ-btn {
  padding: 4px 8px; border-radius: 5px; font-size: 11px; font-weight: 700;
  cursor: pointer; border: 1.5px solid transparent; font-family: inherit;
  white-space: nowrap; min-width: 58px;
}
.ed-typ-work {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.ed-typ-pause {
  background: color-mix(in srgb, var(--text2) 12%, transparent);
  color: var(--text2); border-color: color-mix(in srgb, var(--text2) 25%, transparent);
}

/* ============================================================
   Mein Plan – privater Trainingsplan
   ============================================================ */

/* Private Kalender-Einträge: invertierter Hintergrund (Kalenderfarbe als
   Füllung) – wird dynamisch per .kal-cal-{key} injiziert. */
.kal-item.is-privat {
  border-left-style: solid;
}

/* Km-Badge auf privaten Einträgen */
.kal-item-km {
  font-size: 10px; font-weight: 700; color: var(--text2);
  opacity: .85; line-height: 1;
}
/* Fallback-km (kein expliziter Wert, aus Typ-Konfiguration) */
.kal-item-km.is-fallback-km {
  opacity: .55; font-style: italic;
}

/* Legende in der Toolbar */
/* Kalender-Legende (Checkbox-Filter) */
.kal-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 10px; justify-content: flex-end;
  font-size: 12px; color: var(--text2);
}
.kal-legend-item {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none; white-space: nowrap;
  padding: 3px 8px 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surf2);
  transition: background 0.15s;
}
.kal-legend-item:hover { background: var(--surf3, var(--bg2)); }
.kal-legend-item input[type=checkbox] { accent-color: var(--primary); cursor: pointer; }
.kal-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--text2);
}
.kal-legend-dot-pub  {
  background: var(--surf2, #e8edf5);
  border-left: 3px solid var(--accent, #3a6bc9);
  border-radius: 2px;
  width: 14px; height: 10px;
}
.kal-legend-dot-gruppe {
  background: var(--surf2, #e8edf5);
  border-left: 3px solid var(--accent, #3a6bc9);
  border-radius: 2px;
  width: 14px; height: 10px;
}
.kal-legend-dot-priv {
  background: color-mix(in srgb, var(--accent, #3a6bc9) 18%, var(--surface));
  border-left: 3px solid var(--accent, #3a6bc9);
  border-radius: 2px;
  width: 14px; height: 10px;
}
/* Farbwähler je Kalender (Athlet überschreibt für sich) */
.kal-legend-color {
  width: 16px; height: 16px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.kal-legend-color::-webkit-color-swatch-wrapper { padding: 0; }
.kal-legend-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.kal-legend-color::-moz-color-swatch { border: none; border-radius: 50%; }
.kal-legend-color.has-override { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.kal-legend-reset {
  flex-shrink: 0; width: 16px; height: 16px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text2);
  font-size: 11px; line-height: 1; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.kal-legend-reset:hover { background: var(--primary); color: var(--on-primary, #fff); border-color: var(--primary); }
.kal-legend-name { cursor: pointer; }

/* Wettkampf-Gruppe: Box die alle drei WK-Optionen zusammenfasst */
.kal-legend-wk-group {
  display: flex; align-items: center; gap: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surf2);
  overflow: hidden;
}
.kal-legend-wk-group .kal-legend-item {
  border: none; border-radius: 0; background: transparent;
  padding: 3px 10px 3px 8px;
}
.kal-legend-wk-group .kal-legend-item:hover { background: var(--surf3, var(--bg2)); }
.kal-legend-wk-sep {
  width: 1px; align-self: stretch; background: var(--border); flex-shrink: 0;
}
.kal-legend-item--disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* Rückwärtskompatibilität (alte Klassen werden nicht mehr gerendert, aber defensive Keep) */
.meinplan-legend { display: none; }

/* Wrapper */
.meinplan-wrap { padding: 24px 28px 48px; max-width: 1400px; margin: 0 auto; }
.meinplan-kal-container { margin-top: 0; }

/* Kalender-Grid mit eingebetteter KW-Spalte */
.meinplan-kal-grid .kal-head,
.meinplan-kal-grid .kal-row {
  grid-template-columns: 68px repeat(7, 1fr);
}

/* KW-Kopfzelle */
.meinplan-kw-head-cell {
  background: var(--surf2);
  color: var(--text2);
  border-right: 1px solid var(--border);
}

/* KW-Datenzelle (erste Spalte jeder Zeile) */
.meinplan-kw-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 4px; gap: 3px; text-align: center;
  background: var(--surf2);
  border-right: 1px solid var(--border);
}
.meinplan-kw-num {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text2);
  white-space: nowrap;
}
.meinplan-kw-km {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 15px; color: var(--text2);
  line-height: 1; white-space: nowrap;
}
.meinplan-kw-km.has-km { color: var(--accent); }
.meinplan-kw-km.is-over-ziel  { color: #27ae60 !important; }
.meinplan-kw-km.is-under-ziel { color: #e67e22 !important; }

/* Ziel-Anzeige in der KW-Spalte */
.meinplan-kw-ziel {
  font-size: 10px; color: var(--text2);
  white-space: nowrap; line-height: 1; opacity: .8;
}
.meinplan-kw-ziel-leer {
  font-size: 10px; color: var(--text2); opacity: .4;
  white-space: nowrap; line-height: 1;
  transition: opacity .15s;
}
.meinplan-kw-cell:hover .meinplan-kw-ziel-leer { opacity: 1; color: var(--primary); }
.meinplan-kw-cell { cursor: pointer; }
.meinplan-kw-cell:hover { background: var(--bg2, var(--surf2)); }

/* Inline-Input zum Bearbeiten des Wochenziels */
.meinplan-kw-ziel-input {
  width: 44px; text-align: center;
  border: 1.5px solid var(--accent); border-radius: 4px;
  padding: 2px 3px; font-size: 12px;
  background: var(--surface); color: var(--text);
  outline: none;
  -moz-appearance: textfield;
}
.meinplan-kw-ziel-input::-webkit-inner-spin-button,
.meinplan-kw-ziel-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Hinweis "Aus dem Teamplan übernommen" */
.meinplan-ref-hint {
  font-size: 12px; color: var(--text2);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 6px; padding: 6px 10px;
  margin-bottom: 14px;
}

@media (max-width: 720px) {
  .meinplan-wrap { padding: 12px 8px 32px; }
  .kal-legend { justify-content: flex-start; }
  .meinplan-kw-cell { padding: 4px 2px; }
  .meinplan-kw-num  { font-size: 9px; }
  .meinplan-kw-km   { font-size: 12px; }
  .meinplan-kal-grid .kal-head,
  .meinplan-kal-grid .kal-row { grid-template-columns: 48px repeat(7, 1fr); }
}

/* ── Mobile Nav Drawer Items ─────────────────────────────── */
.mobile-nav-item {
  display: block; width: 100%; text-align: left;
  padding: 15px 20px;
  background: none; border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: 'Barlow', sans-serif; font-size: 16px; font-weight: 500;
  cursor: pointer; transition: background .12s;
}
.mobile-nav-item:hover,
.mobile-nav-item:focus-visible { background: var(--surf2); outline: none; }
.mobile-nav-item.active { color: var(--accent); font-weight: 700; }
.mobile-nav-item:last-child { border-bottom: none; }
.mobile-nav-profil { color: var(--text2); }
.mobile-nav-logout { color: var(--primary); border-top: 2px solid var(--border); border-bottom: none; margin-top: 8px; }

/* ── Serientermine ───────────────────────────────────────── */

/* Toggle-Zeile im Anwenden-Modal */
.serie-toggle-row { margin-top: 4px; }
.serie-toggle-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.serie-toggle-label input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

/* Serienkonfigurations-Block */
.apply-serie-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surf2, #f8f8f8);
  margin: 8px 0 4px;
}
.apply-serie-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  padding: 16px 16px 12px;
}
@media (max-width: 580px) {
  .apply-serie-inner { grid-template-columns: 1fr; }
}
.apply-serie-inner .ed-fg { margin: 0; }

/* Wochentage-Auswahl */
.byday-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.byday-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; cursor: pointer; font-size: 11px; font-weight: 600;
  color: var(--text2);
}
.byday-item input[type="checkbox"] { display: none; }
.byday-item span {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 2px solid var(--border);
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  transition: background .12s, border-color .12s, color .12s;
  user-select: none;
}
.byday-item input:checked + span {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}
.byday-item:hover span { border-color: var(--primary, #2563eb); }

/* Vorschau */
.apply-vorschau {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  min-height: 36px;
}
.vorschau-label {
  font-weight: 600; color: var(--text2); margin-bottom: 6px; font-size: 12px;
}
.vorschau-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.vorschau-datum {
  background: var(--surf2, #f0f0f0);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.vorschau-mehr {
  color: var(--text2); font-size: 12px;
  align-self: center; margin-left: 4px;
}
.vorschau-leer { color: var(--text2); font-size: 12px; }

/* Serie-Badge im Editor-Titel */
.serie-badge {
  display: inline-flex; align-items: center;
  background: var(--primary, #2563eb); color: #fff;
  border-radius: 4px; font-size: 11px; font-weight: 700;
  padding: 1px 6px; margin-left: 6px;
  vertical-align: middle; letter-spacing: .3px;
}

/* Serien-Lösch-Dialog im Editor-Footer */
.serie-del-frage {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 8px;
}
.serie-del-btns {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* ── Trainingsgruppen – Profil-Checkboxen ──────────────────────────────── */
.profil-gruppen-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0 8px;
}
.profil-gruppe-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--bg2, #f4f4f5); cursor: pointer;
  font-size: 13px; user-select: none;
  border: 1.5px solid transparent;
  transition: border-color .15s, background .15s;
}
.profil-gruppe-item:has(input:checked) {
  background: var(--accent-light, #e0f2fe);
  border-color: var(--accent, #0ea5e9);
  color: var(--accent, #0ea5e9);
  font-weight: 600;
}
.profil-gruppe-item input[type="checkbox"] { display: none; }
/* Gruppen aus Statistikportal: immer aktiv, read-only */
.profil-gruppe-stat {
  background: var(--accent-light, #e0f2fe);
  border-color: var(--accent, #0ea5e9);
  color: var(--accent, #0ea5e9);
  font-weight: 600;
  opacity: .85;
  cursor: default;
}
.profil-gruppe-badge {
  font-size: 10px; font-weight: 500; opacity: .7;
  padding: 1px 5px; background: rgba(0,0,0,.1);
  border-radius: 10px; margin-left: 2px;
}

/* ── Trainingsgruppen Vollseite ─────────────────────────────────────────── */
/* ── Trainingsgruppen-Konfigurationsseite ──────────────────────────────── */
.gk-page { padding: 16px; max-width: 720px; }
.gk-gruppen-list { display: flex; flex-direction: column; }
.gk-gruppe-row { border-bottom: 1px solid var(--border); }
.gk-gruppe-row:last-child { border-bottom: none; }
.gk-gruppe-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; min-height: 44px;
}
/* Native Checkbox für "im Gruppenplan sichtbar" */
.gk-tab-cb {
  width: 15px; height: 15px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--primary);
}
.gk-name { font-weight: 500; font-size: 13px; flex: 1; min-width: 0; }
.gk-expand-btn {
  flex-shrink: 0; background: none; border: 1px solid var(--border); cursor: pointer;
  font-size: 11px; color: var(--text2); padding: 3px 8px;
  border-radius: 5px; transition: background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 3px;
}
.gk-expand-btn:hover { background: var(--bg2); border-color: var(--primary); color: var(--primary); }
.gk-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--primary); color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 600;
}
.gk-mitglieder-panel {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface2, var(--bg2));
}
.gk-mitglied-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gk-mitglied-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 10px; border-radius: 12px;
  background: var(--surface); font-size: 12px;
  border: 1px solid var(--border);
}
.gk-mitglied-del {
  background: none; border: none; cursor: pointer;
  color: var(--text2); font-size: 14px; line-height: 1; padding: 0 2px;
  opacity: .5; transition: opacity .15s, color .15s;
}
.gk-mitglied-del:hover { opacity: 1; color: var(--danger, #c0392b); }
.gk-add-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.gk-add-select {
  flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); font-size: 13px;
  color: var(--text);
}
.gk-no-more { font-size: 12px; color: var(--text2); margin: 0; }
.gk-neue-gruppe {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 8px;
}

/* ── Trainingsgruppen – Block-Editor ───────────────────────────────────── */
.be-gruppen-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0;
}

/* ── Trainingsgruppen – Planungs-Tabs ──────────────────────────────────── */
/* Underline-Tabs: kein Box-Styling, passt zu Light- und Dark-Theme */
.planung-gruppen-bar {
  display: flex; align-items: center; gap: 0;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* Desktop: bündig mit section-nav (46px links) */
@media (min-width: 901px) {
  .planung-gruppen-bar { padding-left: 46px; padding-right: 28px; }
}
.planung-tab {
  padding: 8px 14px;
  border: none; border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text2);
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  font-family: inherit;
  margin-bottom: -1px;          /* sitzt exakt auf der Bar-Trennlinie */
  border-radius: 0;
  transition: color .15s, border-bottom-color .15s;
}
.planung-tab:hover { color: var(--text); border-bottom-color: color-mix(in srgb, var(--border) 80%, var(--accent)); }
.planung-tab-aktiv {
  /* color + border-bottom werden per JS inline mit der (dark-adjustierten) Gruppenfarbe gesetzt */
  font-weight: 700;
}
.planung-tab-aktiv:hover { opacity: .9; }
.planung-tab-config {
  padding: 8px 10px; font-size: 14px; color: var(--text2);
  margin-left: 0;
}
.planung-tab-config:hover { color: var(--text); }
/* Tab mit Gruppenfarb-Dot */
.planung-tab-wrap { display: inline-flex; align-items: center; gap: 5px; }
.planung-tab-color {
  width: 10px; height: 10px; padding: 0; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.planung-tab-color::-webkit-color-swatch-wrapper { padding: 0; }
.planung-tab-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.planung-tab-color::-moz-color-swatch { border: none; border-radius: 50%; }
.planung-gruppen-hint {
  font-size: 12px; color: var(--text2);
}
/* ── Wettkampf-Schnelleintrag-Popover ─────────────────────────────────── */
.wk-popover {
  position: fixed; z-index: 600;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 12px 14px; min-width: 180px; max-width: 300px;
  pointer-events: auto;
}
.wk-pop-name {
  font-weight: 700; font-size: 13px; color: var(--text);
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-pop-datum {
  font-size: 11px; color: var(--text2); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.wk-pop-badge {
  font-size: 10px; padding: 1px 5px; border-radius: 8px;
  background: var(--border); color: var(--text2);
}
.wk-pop-disz { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-pop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 16px;
  border: 1.5px solid #27ae60;
  background: rgba(46,204,113,.12); color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.wk-pop-btn:hover { background: rgba(46,204,113,.28); }
.wk-pop-btn--active {
  background: #27ae60; color: #fff; border-color: #1e8449;
}
.wk-pop-btn--active:hover { background: #1e8449; }
.wk-pop-km {
  font-size: 10px; color: var(--text2); font-weight: 400;
}

/* Optischer Trenner zwischen Gruppen-Tabs und Wettkämpfe-Tab */
.planung-gruppen-sep {
  flex: 1;          /* schiebt den Wettkämpfe-Tab an den rechten Rand */
  min-width: 8px;
}

/* btn-warning (Zwischen ghost und danger) */
.btn-warning {
  background: #f59e0b; color: #fff; border: none;
  border-radius: var(--radius); padding: 7px 14px;
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background .15s;
}
.btn-warning:hover { background: #d97706; }
.btn-warning.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ── Dark Mode: Akzent-als-Text aufhellen ──────────────────────────────
 * --accent (z. B. dunkles Vereinsblau) ist als Text auf dunklem Grund
 * kaum lesbar. Wie im Statistikportal auf die aufgehellte Variante
 * --accent-light umschalten. Gilt für beide Dark-Mode-Quellen
 * (manuell via data-theme + OS-Präferenz). */
[data-theme="dark"] .meinplan-kw-km.has-km,
[data-theme="dark"] .liste-kw-km {
  color: var(--accent-light);
}
[data-theme="dark"] .wk-tl-name--ich {
  color: var(--accent-light);
  background: color-mix(in srgb, var(--accent-light) 18%, var(--surf2));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .meinplan-kw-km.has-km,
  :root:not([data-theme="light"]) .liste-kw-km {
    color: var(--accent-light);
  }
  :root:not([data-theme="light"]) .wk-tl-name--ich {
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent-light) 18%, var(--surf2));
  }
}

/* ============================================================
   Trainingsportal – Plan-Freigabe (Profil) & Athletenpläne (Planung)
   ============================================================ */

/* ── Profil: Trainingsplan freigeben ── */
.profil-freigabe-list { display: flex; flex-direction: column; }
.profil-freigabe-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.profil-freigabe-row:last-child { border-bottom: none; }
.profil-freigabe-name {
  flex: 1; min-width: 0; font-size: 14px; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.profil-freigabe-rolle {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px; padding: 1px 6px;
}
.profil-freigabe-sel { flex: 0 0 auto; width: 170px; max-width: 50%; }

/* ── Planung: Athleten-Bereich scrollt normal (kein Viewport-Lock) ── */
.planung-wrap.planung-scroll {
  height: auto; overflow: visible; display: block;
}
/* Athleten-Bereich: admin-ähnlicher Content-Container */
.planung-athleten {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 18px 48px;
}
@media (max-width: 720px) { .planung-athleten { padding: 12px 10px 32px; } }

/* Übersichts-Tabelle */
.athleten-wrap { max-width: 880px; margin: 0 auto; }
.athleten-intro { font-size: 13px; color: var(--text2); margin: 0 0 18px; }
.athleten-leer {
  padding: 40px; text-align: center; color: var(--text2);
  background: var(--surf2); border: 1px dashed var(--border);
  border-radius: var(--radius); font-size: 14px;
}
.athleten-error { color: var(--primary); }

/* .athleten-table: Box-Stile kommen vom .panel-Wrapper; th/td von globaler app.css */
.athleten-table { font-size: 14px; }
.athlet-row-disabled { opacity: .6; }
.athlet-name { font-weight: 600; color: var(--text); }
.athlet-ich { font-size: 11px; color: var(--text2); font-weight: 400; }
.athlet-anzahl, .athlet-letztes { color: var(--text2); white-space: nowrap; }
.athlet-aktion { text-align: right; white-space: nowrap; }
.athlet-kein-zugriff { color: var(--text2); }

.athlet-stufe-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}
.athlet-stufe-voll {
  color: var(--green, #1a8a3a);
  background: color-mix(in srgb, var(--green, #1a8a3a) 14%, transparent);
}
.athlet-stufe-lesend {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.athlet-stufe-nicht {
  color: var(--text2);
  background: color-mix(in srgb, var(--text2) 12%, transparent);
}

/* Geöffneter Athletenplan */
.athlet-plan-wrap { max-width: 1000px; margin: 0 auto; }
.athlet-plan-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.athlet-plan-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 20px; letter-spacing: .3px; color: var(--text);
}
/* Kalender-Toolbar innerhalb der Panel-Box */
.athlet-plan-kal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surf2);
}

/* ── Planung: Untermenü (Admin-Stil, konsistent mit Admin-Seite) ── */
/*
 * Athleten-Tab: #main-content behält sein CSS-Padding (24px 28px aus app.css).
 *   Subtab-Position = 24px(main-top) + 14px(nav) = 38px  /  28px(main-left) + 18px(nav) = 46px
 *
 * Gruppen-Tab: _applyPlanungLayout() setzt #main-content padding:0 (Desktop, >900px).
 *   Damit die Subtabs visuell exakt an derselben Position erscheinen, übernimmt
 *   .planung-section-nav die Summe selbst: 24+14 = 38px oben, 28+18 = 46px links.
 *   (Auf Mobile ≤900px greift der Viewport-Lock nicht, daher kein Override nötig.)
 */
.planung-section-nav {
  padding: 14px 18px 0;   /* Athleten-Tab: main-Padding bereits aktiv */
  flex-shrink: 0;
}
@media (min-width: 901px) {
  .planung-wrap:not(.planung-scroll) .planung-section-nav {
    padding: 38px 46px 0; /* Gruppen-Tab Desktop: main-Padding (24/28) + nav-Padding (14/18) */
  }
}
.planung-section-nav .subtabs {
  margin-bottom: 0;
}

/* ── Athleten-Sidebar (Karten) + Plan-Subheader ─────────────────────── */
.athlet-cards { display: flex; flex-direction: column; gap: 0; }
.athlet-card {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.athlet-card:last-child { border-bottom: none; }
.athlet-card:hover:not(.is-disabled) { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.athlet-card.is-active { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.athlet-card.is-disabled { opacity: .55; cursor: default; }
.athlet-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap;
}
.athlet-card-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.athlet-card-meta { font-size: 11px; color: var(--text2); margin-top: 2px; }
.planung-athleten-leer { padding: 20px 14px; font-size: 13px; color: var(--text2); }

/* Subheader im Athletenplan-Kalender (Name + Zugriffstyp unterhalb Monatsnavigation) */
.athlet-plan-subhead {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 0 8px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Athletenplan-Kalender innerhalb des panels: kein eigener border-radius */
.athlet-plan-wrap .panel .kal-grid {
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.athlet-plan-wrap .panel .kal-loading,
.athlet-plan-wrap .panel .planung-kal-loading {
  padding: 40px;
  border: none;
  border-radius: 0;
}