/* course-cards.css — die Kurskarte mit den Termin-Chips.
 *
 * Gehört zu lib/course_cards.php und wird von ZWEI Seiten geladen:
 * /kursuebersicht/ (öffentlich) und /admin/kurse.php (Ninas Verwaltung).
 * Deshalb steht hier nur die Karte selbst, keine Seitenrahmen.
 *
 * Tokens: --card --line --muted --ink --accent --accent-soft --accent-dark
 *         --rose-soft --rose-dark. Die öffentlichen Seiten bringen sie aus
 *         assets/site.css mit; der Admin (eigene rosé Palette) definiert die
 *         --accent-*-Aliase am Seitenanfang. Wer die Datei in einer dritten
 *         Seite einbindet, muss dasselbe tun. */

/* Zwischenüberschrift über einer Kartengruppe ("Herbst Kurse ab September") */
h3.season {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--muted);
  margin: 22px 0 10px;
}
section > h3.season:first-of-type { margin-top: 14px; }

.phase-note { color: var(--muted); font-size: 15px; margin: 0 0 4px; }

/* Mini-Legende: zwei Beispiel-Chips in denselben Zuständen wie .dates li.next /
   li.past, nur kleiner — erklärt sich damit selbst, ohne Text im Intro. */
.chip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.chip-legend .lg { border-radius: 8px; padding: 2px 9px; line-height: 1.5; }
.chip-legend .lg.next {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
  color: var(--ink);
  padding: 1px 8px;
}
.chip-legend .lg.past { border: 1px dashed var(--line); color: #A9A29A; }

.run-course {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px 20px;
  margin-bottom: 12px;
}
.run-course h3,
.run-course h4 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.run-meta { color: var(--muted); font-size: 15px; margin: 0 0 14px; }

/* Belegung nur bei kommenden Kursen — bei einem laufenden Kurs ist "2 Plätze
   frei" bedeutungslos, man kann ohnehin nicht mehr buchen. */
.run-badges {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.badge {
  flex: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.badge.free { background: var(--accent-soft); color: var(--accent-dark); }
.badge.wait { background: var(--rose-soft); color: var(--rose-dark); }
/* "Anmeldung ab 1.1.2027" — angekündigt, aber noch nicht buchbar. Ruhiger als
   die beiden anderen: es ist kein Zustand, auf den man reagieren muss. */
.badge.soon { background: #F1EEE7; color: var(--muted); }
/* Nur im Admin: der Kurs steht auf keiner öffentlichen Seite. */
.badge.hidden { background: #EDEAE4; color: var(--muted); border: 1px dashed var(--line); }

.dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.dates li {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 15px;
  line-height: 1.3;
  background: #FDFCFA;
}
/* "future" ist der Normalfall und braucht keine eigenen Werte — die Klasse
   steht trotzdem am Chip, damit im DOM jeder Termin seinen Zustand nennt. */
.dates li.future { /* bewusst leer */ }
/* Vergangene Termine bleiben stehen (die Familien zählen mit), treten aber
   zurück: durchgestrichen wäre zu laut für "war schon". */
.dates li.past { color: #A9A29A; background: transparent; border-style: dashed; }
.dates li.next {
  border-color: var(--accent);
  border-width: 2px;
  padding: 4px 9px;
  background: var(--accent-soft);
  font-weight: 700;
}
.dates .wd { font-weight: 700; }
/* Termin, der NICHT auf den Kurs-Wochentag fällt: der ganze Chip fett, nicht
   nur das Kürzel (Andy 2026-08-20). Wird automatisch aus dem Datum abgeleitet
   (cc_chips), nie von Hand gesetzt. Auch bei vergangenen Terminen — grau UND
   fett ist immer noch leiser als der aktuelle Termin. */
.dates li.wd-off { font-weight: 700; }
.dates .tag {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--accent-dark);
}
.dates li.past .tag { color: inherit; }
.dates .time { display: block; font-size: 12px; color: var(--muted); }
.dates li.next .time { color: var(--accent-dark); }

.next-hint {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--accent-dark);
  font-weight: 700;
}
.run-note { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.run-note.booking-soon { font-weight: 700; color: var(--ink); }
.signup-link { margin: 14px 0 0; font-size: 15px; }
.signup-link a { font-weight: 700; }

@media (max-width: 560px) {
  .run-head { flex-wrap: wrap; }
}