.training-timeline-wrap {
  margin-top: 1.5rem;
}

.training-calendar-intro {
  margin-bottom: 1rem;
}

.training-calendar-intro h2 {
  margin-bottom: 0.25rem;
}

.training-calendar-intro p {
  margin-top: 0;
  opacity: 0.82;
}

.training-timeline-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 0.75rem;
  outline: none;
  -webkit-overflow-scrolling: touch;
}

.training-timeline-scroll:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 72, 140, 0.25);
}

.training-timeline {
  --day-col-width: 4.45rem;
  --slot-width: 2rem;
  --lane-height: 2.56rem;

  --calendar-border: rgba(0, 42, 90, 0.16);
  --calendar-yellow: #ffe866;
  --calendar-yellow-soft: #fff2a3;

  --grid-line: rgba(0, 42, 90, 0.034);
  --grid-line-hour: rgba(0, 42, 90, 0.115);
  --day-divider: rgba(0, 42, 90, 0.12);
  --lane-divider: rgba(0, 42, 90, 0.032);

  width: 100%;
  max-width: 52.5rem;
  min-width: calc(var(--day-col-width) + var(--slot-count) * var(--slot-width));
  margin-inline: auto;

  display: grid;
  grid-template-columns: var(--day-col-width) repeat(var(--slot-count), var(--slot-width));
  position: relative;

  border: 1px solid var(--calendar-border);
  border-radius: 0.75rem;
  background: #fffaf0;
  box-shadow: none;
  overflow: hidden;
}

/* Kopfzeile */

.training-timeline__corner,
.training-timeline__time-head {
  position: sticky;
  top: 0;
  z-index: 8;

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

  min-height: 2.9rem;
  font-weight: 850;
  color: #061b34;
  background: var(--calendar-yellow);
  border-bottom: 1px solid var(--day-divider);
  box-shadow: none;
}

.training-timeline__corner {
  grid-column: 1;
  grid-row: 1;
  left: 0;
  z-index: 12;
  border-right: 1px solid rgba(0, 42, 90, 0.16);
}

.training-timeline__time-head {
  grid-column: var(--col) / span 4;
  grid-row: 1;
  justify-content: flex-start;
  padding-left: 0.35rem;
  border-left: 1px solid rgba(0, 42, 90, 0.10);
  font-size: 0.82rem;
}

/* Vertikale Zeitlinien */

.training-timeline__time-line {
  grid-column: var(--col);
  grid-row: 2 / -1;
  border-left: 1px solid var(--grid-line);
  pointer-events: none;
}

.training-timeline__time-line.is-hour {
  border-left-color: var(--grid-line-hour);
}

/* Tageslabels links: schmal, flach, tabellarisch.
   Die konkrete Tagesfarbe kommt über --mo/--di/... Klassen darunter. */

.training-timeline__day-label {
  grid-column: 1;
  grid-row: var(--row-start) / span var(--row-span);
  position: sticky;
  left: 0;
  z-index: 7;

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

  padding: 0.35rem;
  font-weight: 950;
  color: #061b34;

  background: #fff5bf;
  border-right: 1px solid rgba(0, 42, 90, 0.16);
  border-top: 1px solid var(--day-divider);
  border-bottom: 0;
  box-shadow: none;
}

/* Diskretes Zebra-Muster in der Wochentagsspalte.
   Mo/Mi/Fr hell, Di/Do leicht gelblicher. */

.training-timeline__day-label--mo,
.training-timeline__day-label--mi,
.training-timeline__day-label--fr {
  background: #fff8cc;
}

.training-timeline__day-label--di,
.training-timeline__day-label--do {
  background: #fff3b8;
}

.training-timeline__day-short {
  display: inline;
}

.training-timeline__day-long {
  display: none;
}

/* Tagesbahnen */

.training-timeline__lane-bg {
  grid-column: 2 / -1;
  grid-row: var(--row);
  border-bottom: 1px solid var(--lane-divider);
  pointer-events: none;
}

.training-timeline__lane-bg.is-day-start {
  border-top: 1px solid var(--day-divider);
}

/* Ruhige, alternierende Tagesflächen.
   Mo/Mi/Fr hell, Di/Do leicht gelblicher. */

.training-timeline__lane-bg--mo,
.training-timeline__lane-bg--mi,
.training-timeline__lane-bg--fr {
  background: #fffdf6;
}

.training-timeline__lane-bg--di,
.training-timeline__lane-bg--do {
  background: #fff9e7;
}

/* Trainingsblöcke */

.training-timeline__block {
  grid-column: var(--col-start) / span var(--col-span);
  grid-row: var(--row-start);
  z-index: 5;

  --team-bg: #004b93;
  --team-border: rgba(255, 255, 255, 0.30);

  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.35rem;
  align-content: center;

  margin: 0.18rem 0.12rem;
  padding: 0.32rem 0.42rem;
  border-radius: 0.64rem;

  color: #fff;
  background: var(--team-bg);
  border: 1px solid var(--team-border);
  box-shadow: none;
  text-decoration: none;
  overflow: hidden;
}

.training-timeline__block:hover,
.training-timeline__block:focus-visible {
  filter: brightness(1.05);
  text-decoration: none;
}

/* Teamfarben:
   flat, kräftig, klar unterscheidbar. */

.training-timeline__block--u6 {
  --team-bg: #0097a7;
}

.training-timeline__block--u8 {
  --team-bg: #168eea;
}

.training-timeline__block--u9 {
  --team-bg: #0057d9;
}

.training-timeline__block--u10 {
  --team-bg: #5c43d6;
}

.training-timeline__block--u11 {
  --team-bg: #007f73;
}

.training-timeline__block--u12 {
  --team-bg: #0b9444;
}

.training-timeline__block--u13 {
  --team-bg: #6d8f16;
}

.training-timeline__block--u14 {
  --team-bg: #df7300;
}

.training-timeline__block--u15 {
  --team-bg: #b9277b;
}

.training-timeline__block--u16 {
  --team-bg: #7330bf;
}

.training-timeline__block--u17 {
  --team-bg: #192e75;
}

/* Team-Pill im Block: flat, SCM-gelb, ohne 3D */

.training-timeline__block strong {
  grid-row: 1 / span 2;
  align-self: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2.15rem;
  min-height: 1.42rem;
  padding: 0.1rem 0.34rem;
  border-radius: 999px;

  color: #061b34;
  background: #ffe866;
  border: 1px solid rgba(6, 27, 52, 0.16);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: none;
}

.training-timeline__block span {
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.08;
  white-space: nowrap;
}

.training-timeline__block small {
  font-size: 0.63rem;
  line-height: 1.08;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Externe / unsichere SPG-Orte:
   - Gablitz klar zurückgenommen
   - Mischorte leicht zurückgenommen */

.training-timeline__block.is-gablitz {
  color: rgba(255, 255, 255, 0.76);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 0.35rem,
      rgba(255, 255, 255, 0.03) 0.35rem,
      rgba(255, 255, 255, 0.03) 0.7rem
    ),
    #8b8f96;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  box-shadow: none;
  opacity: 0.72;
  filter: saturate(0.25);
}

.training-timeline__block.is-gablitz strong {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(6, 27, 52, 0.12);
  color: rgba(6, 27, 52, 0.82);
}

.training-timeline__block.is-gablitz span,
.training-timeline__block.is-gablitz small {
  opacity: 0.82;
}

.training-timeline__block.is-mixed-location {
  opacity: 0.86;
  border-style: dashed;
  filter: saturate(0.72);
}


/* Trainingszeiten-Tabelle:
   aus data/trainingszeiten.yaml generiert;
   optisch bewusst an den Kalender angelehnt. */

.training-schedule {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  border-radius: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.schedule-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  color: #061b34;
  background: #fffaf0;
  border: 1px solid rgba(0, 42, 90, 0.16);
  border-radius: 0.75rem;

  font-size: 0.92rem;
  line-height: 1.25;
  text-align: center;
}

.schedule-table th,
.schedule-table td {
  padding: 0.58rem 0.62rem;
  border-right: 1px solid rgba(0, 42, 90, 0.10);
  border-bottom: 1px solid rgba(0, 42, 90, 0.10);
  vertical-align: middle;
}

.schedule-table th:last-child,
.schedule-table td:last-child {
  border-right: 0;
}

.schedule-table thead th {
  color: #061b34;
  background: #ffe866;
  font-weight: 900;
  text-align: center;
}

.schedule-table thead th,
.schedule-table thead th .short,
.schedule-table thead th .long {
  text-align: center;
}

.schedule-table tbody tr:nth-child(odd) {
  background: #fffdf6;
}

.schedule-table tbody tr:nth-child(even) {
  background: #fff9e7;
}

.schedule-table tbody tr:last-child th,
.schedule-table tbody tr:last-child td {
  border-bottom: 0;
}

.schedule-table tbody th {
  width: 3.8rem;
  min-width: 3.8rem;
  max-width: 3.8rem;
  text-align: center;
  font-weight: 950;
  background: rgba(255, 232, 102, 0.38);
}

.schedule-table tbody th a {
  color: #006cae;
  text-decoration: none;
  font-weight: 950;
}

.schedule-table tbody th a:hover,
.schedule-table tbody th a:focus-visible {
  color: #004f98;
  text-decoration: underline;
}

.schedule-table td {
  min-width: 6.5rem;
}

.schedule-table td.has-training {
  background: rgba(255, 232, 102, 0.18);
}

.schedule-table td.is-gablitz {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0, 42, 90, 0.055) 0,
      rgba(0, 42, 90, 0.055) 0.35rem,
      rgba(255, 255, 255, 0.02) 0.35rem,
      rgba(255, 255, 255, 0.02) 0.7rem
    ),
    rgba(0, 42, 90, 0.07);
  color: rgba(6, 27, 52, 0.72);
}

.schedule-table td.is-mixed-location {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(112, 86, 8, 0.055) 0,
      rgba(112, 86, 8, 0.055) 0.3rem,
      rgba(255, 255, 255, 0.04) 0.3rem,
      rgba(255, 255, 255, 0.04) 0.75rem
    ),
    rgba(157, 126, 24, 0.11);

  box-shadow:
    inset 0 0 0 1px rgba(110, 86, 8, 0.07);
}

.schedule-table__entry {
  display: grid;
  gap: 0.12rem;
  justify-items: center;
}

.schedule-table__time {
  font-weight: 850;
  white-space: nowrap;
}

.schedule-table__location {
  display: block;
  font-size: 0.68rem;
  line-height: 1.1;
  opacity: 0.78;
  white-space: normal;
}

.schedule-table thead .short {
  display: none;
}

.schedule-table thead .long {
  display: inline;
}

.schedule-table .separator {
  display: inline;
}

.schedule-table .start,
.schedule-table .end {
  display: inline;
}

/* Trainingszeiten auf Teamseiten */

.team-training-list {
  margin-bottom: 0.6rem;
}

.team-training-list li + li {
  margin-top: 0.25rem;
}

.team-training-list em {
  font-size: 0.92em;
  opacity: 0.8;
}

.team-training-note {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Tablet gemäß custom.css-Grenze */

@media (min-width: 641px) and (max-width: 1024px) {
  .training-timeline {
    --day-col-width: 3.6rem;
    --slot-width: 1.82rem;
    --lane-height: 2.48rem;
    max-width: none;
    border-radius: 0.75rem;
  }

  .training-timeline__corner,
  .training-timeline__day-label,
  .training-timeline__time-head {
    font-size: 0.78rem;
  }

  .training-timeline__time-head {
    font-size: 0.74rem;
  }

  .training-timeline__block {
    padding: 0.30rem 0.34rem;
    gap: 0.08rem 0.25rem;
  }

  .training-timeline__block strong {
    min-width: 1.9rem;
    min-height: 1.28rem;
    font-size: 0.68rem;
  }

  .training-timeline__block span {
    font-size: 0.64rem;
    line-height: 1.08;
  }

  .training-timeline__block small {
    font-size: 0.57rem;
    line-height: 1.08;
  }

  .schedule-table {
    min-width: 36rem;
    font-size: 0.82rem;
  }

  .schedule-table thead .short {
    display: inline;
  }

  .schedule-table thead .long {
    display: none;
  }

  .schedule-table th,
  .schedule-table td {
    padding: 0.45rem 0.42rem;
  }

  .schedule-table tbody th {
    width: 3.2rem;
    min-width: 3.2rem;
    max-width: 3.2rem;
  }

  .schedule-table td {
    min-width: 5.6rem;
  }
}

/* Kompakte Altersstufentabelle auf der Mach-mit-Seite.
   Nutzt die bestehende schedule-table-Optik, aber nicht die volle Inhaltsbreite. */

.age-table-wrap {
  max-width: 34rem;
  margin: 1.6rem auto;
}

.age-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.age-table th:first-child,
.age-table td:first-child {
  width: 68%;
}

.age-table th:last-child,
.age-table td:last-child {
  width: 32%;
}

.age-table td,
.age-table th {
  padding-block: 0.55rem;
}

/* Mobile gemäß custom.css-Grenze */

@media (max-width: 640px) {
  .training-timeline {
    --day-col-width: 2.85rem;
    --slot-width: 1.72rem;
    --lane-height: 2.44rem;
    max-width: none;
    border-radius: 0.75rem;
  }

  .training-timeline__corner,
  .training-timeline__day-label,
  .training-timeline__time-head {
    font-size: 0.72rem;
  }

  .training-timeline__corner {
    justify-content: center;
    padding-inline: 0.2rem;
  }

  .training-timeline__time-head {
    justify-content: flex-start;
    padding-left: 0.25rem;
    font-size: 0.68rem;
  }

  .training-timeline__day-label {
    padding: 0.25rem;
  }

  .training-timeline__block {
    padding: 0.26rem 0.28rem;
    gap: 0.07rem 0.20rem;
    border-radius: 0.56rem;
  }

  .training-timeline__block strong {
    min-width: 1.62rem;
    min-height: 1.18rem;
    padding: 0.08rem 0.24rem;
    font-size: 0.62rem;
  }

  .training-timeline__block span {
    font-size: 0.58rem;
    line-height: 1.08;
  }

  .training-timeline__block small {
    font-size: 0.52rem;
    line-height: 1.08;
  }

  /* Tabelle: auf Mobile in die verfügbare Breite zwingen.
     Zeitwerte, Tagesköpfe und Teamnamen werden gezielt etwas größer gesetzt. */

  .schedule-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 0.70rem;
  }

  .schedule-table thead .short {
    display: inline;
  }

  .schedule-table thead .long {
    display: none;
  }

  .schedule-table th,
  .schedule-table td {
    padding: 0.28rem 0.14rem;
  }

  /* Kopfzeile: Team, Mo, Di, Mi, Do, Fr */
  .schedule-table thead th {
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
  }

  /* Erste Spalte: U6, U8, U9 ... */
  .schedule-table tbody th {
    width: 2.35rem;
    min-width: 2.35rem;
    max-width: 2.35rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1.05;
  }

  .schedule-table tbody th a {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  .schedule-table td {
    min-width: 0;
  }

  .schedule-table .separator {
    display: none;
  }

  .schedule-table .start,
  .schedule-table .end {
    display: block;
  }

  /* Uhrzeiten in den Tabellenzellen */
  .schedule-table__time {
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.05;
    white-space: normal;
  }

  /* Ort bewusst kleiner halten */
  .schedule-table__location {
    font-size: 0.54rem;
    line-height: 1.05;
    white-space: normal;
  }

  .age-table-wrap {
    max-width: 100%;
    margin: 1.2rem 0;
  }

  .age-table {
    font-size: 0.78rem;
  }

  .age-table td,
  .age-table th {
    padding: 0.45rem 0.35rem;
  }

  .age-table th:first-child,
  .age-table td:first-child {
    width: 62%;
  }

  .age-table th:last-child,
  .age-table td:last-child {
    width: 38%;
  }
}