/*
 * Heavy Metal Buchungstool – Kursübersicht
 * Alle Klassen mit Präfix hm-. Ausschließlich vier Farben:
 *   Grün (Logo) #00A07A · Dunkelgrau #333333 · Beige #F4EFE6 · Weiß #FFFFFF
 * Grün nur für große/fette Schrift, Knöpfe und Flächen (Kontrast 3,3:1 auf Weiß).
 */

.hm-uebersicht {
  --hm-gruen: #00a07a;
  --hm-grau: #333333;
  --hm-beige: #f4efe6;
  --hm-weiss: #ffffff;
  --hm-radius: 6px;
  --hm-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hm-abstand: 1.25rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--hm-abstand);
  font-family: var(--hm-schrift);
  color: var(--hm-grau);
  line-height: 1.4;
  box-sizing: border-box;
}

.hm-uebersicht *,
.hm-uebersicht *::before,
.hm-uebersicht *::after {
  box-sizing: inherit;
}

/* ---------- Standort ---------- */

.hm-standort {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0 0.75rem 0.75rem;
  background: var(--hm-beige);
  border-radius: var(--hm-radius);
  overflow: hidden;
}

/* Breite proportional zur Anzahl der Kurse */
.hm-standort.hm-anzahl-2 { flex: 2 1 480px; }
.hm-standort.hm-anzahl-3 { flex: 3 1 680px; }
.hm-standort.hm-anzahl-4 { flex: 4 1 880px; }
.hm-standort.hm-anzahl-5,
.hm-standort.hm-anzahl-6 { flex: 5 1 100%; }

.hm-standort-kopf {
  margin: 0 -0.75rem 0.75rem;
  padding: 1rem 0.75rem 0.9rem;
  background: var(--hm-gruen);
  color: var(--hm-weiss);
  text-align: center;
}

.hm-standort-name {
  margin: 0;
  color: var(--hm-weiss);
  font-family: var(--hm-schrift);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hm-standort-adresse {
  margin: 0.2rem 0 0;
  color: var(--hm-weiss);
  font-size: 1.1rem;
  font-weight: 600;
}

/* ---------- Kurse ---------- */

.hm-kurse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.hm-kurs {
  display: flex;
  flex-direction: column;
  background: var(--hm-weiss);
  border-radius: var(--hm-radius);
  overflow: hidden;
}

.hm-kurs-bild {
  aspect-ratio: 4 / 3;
  background: var(--hm-beige);
}

.hm-kurs-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-kurs-inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 0.9rem;
}

.hm-kurs-name {
  margin: 0;
  color: var(--hm-gruen);
  font-family: var(--hm-schrift);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hm-kurs-tage {
  margin: 0.2rem 0 0.75rem;
  font-size: 1.05rem;
}

.hm-kurs-fakten {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.hm-kurs-fakten li {
  margin: 0 0 0.5rem;
}

/* ---------- Knöpfe (weiß auf Grün: fett, ≥ 19 px) ---------- */

.hm-knopf {
  display: block;
  align-self: center;
  min-width: 70%;
  padding: 0.6rem 1.25rem;
  background: var(--hm-gruen);
  border: 2px solid var(--hm-gruen);
  border-radius: 4px;
  color: var(--hm-weiss);
  font-family: var(--hm-schrift);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.hm-knopf:hover,
.hm-knopf:focus-visible {
  background: var(--hm-weiss);
  color: var(--hm-gruen);
}

.hm-knopf:focus-visible {
  outline: 3px solid var(--hm-grau);
  outline-offset: 2px;
}

/* „Mehr Infos“: Umriss-Variante */
.hm-knopf-klein {
  min-width: 55%;
  padding: 0.4rem 1rem;
  background: var(--hm-weiss);
  color: var(--hm-gruen);
}

.hm-knopf-klein:hover,
.hm-knopf-klein:focus-visible {
  background: var(--hm-gruen);
  color: var(--hm-weiss);
}

/* ---------- Termine ---------- */

.hm-termine {
  flex: 1;
  margin: 1rem -0.4rem;
  padding: 0.8rem 0.75rem;
  background: var(--hm-beige);
  border-radius: var(--hm-radius);
}

.hm-termine-titel {
  margin: 0 0 0.75rem;
  color: var(--hm-grau);
  font-family: var(--hm-schrift);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.hm-termin-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-termin {
  margin: 0 0 0.6rem;
}

.hm-termin-datum {
  display: block;
  font-weight: 600;
}

.hm-termin-art {
  font-size: 0.9em;
}

/* Status: nur über Text/Schrift unterschieden (keine Signalfarben) */
.hm-status-frei { font-weight: 700; }
.hm-status-voll { font-style: italic; }
.hm-status-telefon { font-style: italic; }

.hm-termine-leer {
  margin: 2rem 0;
  text-align: center;
}

.hm-alle-termine {
  display: block;
  margin-top: 0.5rem;
  color: var(--hm-grau);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

/* ---------- Preis ---------- */

.hm-preis {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  text-align: center;
}

.hm-preis strong {
  font-size: 1.3rem;
}

.hm-widget-fehler {
  padding: 1rem;
  background: var(--hm-beige);
  border-radius: var(--hm-radius);
}

.hm-widget-fehler a {
  color: var(--hm-grau);
}

/* ---------- Handy ---------- */

@media (max-width: 600px) {
  .hm-standort,
  .hm-standort[class*="hm-anzahl-"] {
    flex: 1 1 100%;
  }
  .hm-standort-name {
    font-size: 1.5rem;
  }
}