/* Trainingszeiten (templates/practicetimes.php): a grouped table on wide screens,
   collapsible team blocks on phones. */
.pt-table-wrap,
.pt-mobile {
  --pt-line: #dde3ea;
  --pt-muted: #5b6670;
  --pt-soft: #3a4550;
  --pt-aktive: var(--color-primary);
  --pt-jugend: #1d7a5f;
  --pt-minis: #b7791f;
  margin-bottom: var(--space-4xl);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.pt-group--aktive { --pt-c: var(--pt-aktive); }
.pt-group--jugend { --pt-c: var(--pt-jugend); }
.pt-group--minis  { --pt-c: var(--pt-minis); }

.pt-group-title::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.625rem;
  border-radius: 2px;
  background: var(--pt-c);
}

.pt-team {
  display: block;
  font-weight: 700;
}

.pt-year,
.pt-slot small {
  display: block;
  color: var(--pt-muted);
  font-size: 0.8125rem;
}

.pt-day {
  font-weight: 700;
  text-decoration: none;
}

.pt-time {
  font-variant-numeric: tabular-nums;
}

.main .pt-hall a {
  border-bottom: 1px solid #b9c4cf;
}

/* A summer- or winter-only time outside its period */
.pt-slot--off {
  opacity: 0.45;
}

.pt-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.main .pt-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 var(--space-md);
  border: 1px solid #c8d2dc;
  border-radius: 0.375rem;
  color: var(--color-text);
  font-size: 0.875rem;
}

.main .pt-button:hover,
.main .pt-button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pt-button-extra,
.pt-none {
  color: var(--pt-muted);
}

/* ---------- wide screens: table ---------- */
/* A white sheet, so the rows read clearly against the page's grey gradient (as on the
   design canvas). One surface for the whole table, not a card per team. */
.pt-table-wrap {
  overflow-x: auto;
  padding: var(--space-xl) var(--space-3xl) var(--space-2xl);
  border: 1px solid var(--pt-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.pt-table .pt-group:first-of-type .pt-group-title {
  padding-top: var(--space-xl);
}

.pt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
}

/* main.css paints every <th> blue and stripes every other row; not in this table. */
.main .pt-table th {
  background: none;
  color: var(--color-text);
}

.main .pt-table tr {
  background: none;
}

.main .pt-table thead th {
  padding: 0 var(--space-lg) var(--space-md) 0;
  border-bottom: 2px solid var(--color-primary);
  color: var(--pt-muted);
  font-weight: 500;
  text-align: left;
}

.pt-table .pt-group-title {
  padding: 2.25rem 0 var(--space-md);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: left;
}

.pt-table td {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-top: 1px solid var(--pt-line);
  vertical-align: top;
}

.pt-table td:first-child { width: 22%; }
.pt-table td:nth-child(2) { width: 40%; }

.pt-table .pt-slot {
  display: grid;
  grid-template-columns: 2.25rem 7.25rem minmax(0, 1fr);
  column-gap: var(--space-sm);
  align-items: baseline;
  padding: 0.125rem 0;
}

.pt-coach {
  display: block;
  color: var(--pt-soft);
}

.pt-mobile {
  display: none;
}

/* ---------- phones: jump bar and collapsible teams ---------- */
@media screen and (max-width: 48em) {
  .pt-table-wrap {
    display: none;
  }

  .pt-mobile {
    display: block;
    padding: var(--space-lg);
    border: 1px solid var(--pt-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .pt-jump {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
  }

  .main .pt-jump a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 var(--space-xs);
    border: 1px solid #c8d2dc;
    border-radius: 0.375rem;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
  }

  .pt-mobile .pt-group {
    margin-bottom: var(--space-3xl);
    scroll-margin-top: 6rem;
  }

  .main .pt-mobile .pt-group-title {
    display: flex;
    align-items: center;
    margin: 0;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: none;
  }

  .pt-card {
    border-bottom: 1px solid var(--pt-line);
  }

  .pt-card summary {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 3.5rem;
    padding: var(--space) 0;
    cursor: pointer;
    list-style: none;
  }

  .pt-card summary::-webkit-details-marker {
    display: none;
  }

  .pt-card summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
  }

  .pt-card-name {
    flex: 1;
    min-width: 0;
  }

  .pt-week {
    display: flex;
    gap: 2px;
  }

  .pt-week span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    background: #eef2f6;
    color: #8a96a3;
    font-size: 0.6875rem;
  }

  .pt-week .is-on {
    background: var(--pt-c);
    color: #fff;
    font-weight: 700;
  }

  .pt-chevron {
    color: var(--pt-muted);
    transition: transform 0.2s;
  }

  .pt-card[open] .pt-chevron {
    transform: rotate(180deg);
  }

  .pt-card .pt-slot {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-sm);
    padding: var(--space-xs) 0;
  }

  .pt-card .pt-hall {
    display: block;
  }

  .main .pt-coaches {
    margin: var(--space) 0 var(--space-md);
    color: var(--pt-soft);
  }

  .pt-card .pt-contact {
    flex-wrap: nowrap;
    padding-bottom: var(--space-lg);
  }

  .main .pt-card .pt-button {
    flex: 1;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-chevron {
    transition: none;
  }
}