/* termine.css — Komponenten fuer Termin-/Kursort-/Kursleiter-Ansicht.
   Nur auf diesen Seiten geladen; styles.css bleibt unberuehrt.
   Palette: Text #2a3e20 / Fliesstext #3a4532 / Akzent #4a6b3a /
   dekorativ #7a9050 / creme #f5f2ea. border-radius 0, Hairlines. */

/* ---- Spacing: Hero naeher an den Inhalt (Kundenwunsch) ---- */
.seite-termine .page-hero { padding-bottom: 20px; }
.seite-termine section.section { padding-top: 36px; }
.seite-termine .termine-sektion:first-child { margin-top: 0; }

.termine-intro { color: #3a4532; }
.termine-sektion { margin-top: 3rem; }
.termine-sektion > h2 { margin-top: 0; }
.termine-leer { color: #5a6b4a; font-style: italic; }

/* ---- Uebersichts-Tabelle (Desktop) ---- */
.termin-tabelle { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.termin-tabelle caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.termin-tabelle th[scope="col"] {
  font-family: 'Dessau Bold', Georgia, serif; color: #4a6b3a;
  text-align: left; font-weight: normal;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .55rem .85rem; border-bottom: 2px solid rgba(42,62,32,.14);
}
.termin-tabelle td,
.termin-tabelle th[scope="row"] {
  padding: 1rem .85rem; border-bottom: 1px solid rgba(42,62,32,.08);
  vertical-align: top; text-align: left;
}
.termin-tabelle th[scope="row"] { font-family: 'Dessau Bold', Georgia, serif; font-weight: normal; font-size: 1.02rem; }
.termin-tabelle th[scope="row"] a { text-decoration: none; }
.termin-tabelle th[scope="row"] a:hover { text-decoration: underline; }
.termin-tabelle tr:hover td,
.termin-tabelle tr:hover th[scope="row"] { background: rgba(122,144,80,.06); }
.termin-datum-zelle { line-height: 1.45; }
.td-label { display: none; }

/* ---- Status-Badges ---- */
.badge {
  display: inline-block; font-family: 'Dessau Bold', Georgia, serif; font-weight: normal;
  font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .14em .6em; border: 1px solid; white-space: nowrap;
}
.badge.frei       { color: #3a5a2a; border-color: #a8c088; background: #eef3e6; }
.badge.abgesagt   { color: #7a2020; border-color: #c98a8a; background: #f7ecec; }
.badge.ausgebucht { color: #4a5a3a; border-color: #b8c9a3; background: #eef2e6; }
.badge.geschlossen{ color: #6a6558; border-color: #cbc7b8; background: #f1efe8; }

/* ---- Hinweisbox (gelb) ---- */
.alert { padding: 1rem 1.2rem; margin: 1.5rem 0; border: 1px solid; }
.alert.notice { border-color: #d8bf72; background: #f8f0d8; color: #6a5518; }
.alert p:last-child { margin-bottom: 0; }

/* ---- Detail: Faktenliste ---- */
.termin-fakten { margin: 1.75rem 0; }
.termin-fakten > div {
  display: flex; gap: 1rem; padding: .7rem 0;
  border-bottom: 1px solid rgba(42,62,32,.08);
}
.termin-fakten dt {
  flex: 0 0 9em; margin: 0;
  font-family: 'Dessau Bold', Georgia, serif; color: #4a6b3a;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; padding-top: .1em;
}
.termin-fakten dd { margin: 0; color: #2a3e20; }
.termin-zeit p { margin: 0; }
/* Datum und Zeit dürfen umbrechen — aber nie mitten in der Uhrzeit. */
.tz-block { display: block; }
/* Datum und Zeit bleiben je für sich zusammen, dürfen aber gegeneinander
   umbrechen — nie mitten in einer Uhrzeit. */
.tz-datum, .tz-zeit { white-space: nowrap; }
.tz-block + .tz-block { margin-top: .15rem; }
/* Der etwas größere Abstand macht sichtbar, dass die Zeit für alle Tage gilt. */
.tz-gemeinsam { margin-top: .4rem !important; }
.tz-tage { margin-top: .25rem !important; font-size: .85rem; color: #5a6b4a; }
.preis-hinweis { display: inline-block; font-size: .85rem; color: #5a6b4a; }
.storno-verweis { margin-top: 1.5rem; font-size: .92rem; }

/* ---- Storno am Seitenfuss ---- */
.storno-fuss { border-top: 2px solid rgba(42,62,32,.1); padding-top: 1.5rem; }
.storno-fuss ul { margin: .6rem 0 0; }

/* ---- Kursleiter-/Kursort-Listen ---- */
.ort-liste, .kursleiter-liste { list-style: none; padding: 0; }
.ort-liste > li { border-top: 1px solid rgba(42,62,32,.1); padding-top: 1.2rem; margin-top: 1.2rem; }
.ort-liste > li:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.kursleiter-karte { display: flex; gap: 1.2rem; align-items: flex-start; border-top: 1px solid rgba(42,62,32,.1); padding-top: 1.4rem; margin-top: 1.4rem; }
.kursleiter-karte img { width: 96px; height: 96px; object-fit: cover; flex: 0 0 auto; }

.mehr-details { margin-top: 1rem; }
.mehr-details summary { cursor: pointer; color: #4a6b3a; }

/* ---- Fokus sichtbar ---- */
.seite-termine a:focus-visible,
.seite-termine button:focus-visible,
.seite-termine summary:focus-visible { outline: 3px solid #4a6b3a; outline-offset: 2px; }

/* ---- Mobil (<860px): Tabelle -> Karten ---- */
@media (max-width: 860px) {
  .termin-tabelle thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .termin-tabelle, .termin-tabelle tbody, .termin-tabelle tr,
  .termin-tabelle td, .termin-tabelle th[scope="row"] { display: block; }

  .termin-tabelle tr {
    border: 1px solid rgba(42,62,32,.14); background: #fff;
    margin-bottom: 1.25rem; padding: 1.1rem 1.2rem;
  }
  .termin-tabelle tr:hover td,
  .termin-tabelle tr:hover th[scope="row"] { background: transparent; }

  /* Titel prominent oben, mit Trennlinie */
  .termin-tabelle th[scope="row"] {
    font-size: 1.2rem; padding: 0 0 .7rem; margin-bottom: .3rem;
    border-bottom: 1px solid rgba(42,62,32,.1);
  }

  /* Jede Zelle: Label links (feste Breite), Wert rechts, klare Zeilenabstaende */
  .termin-tabelle td {
    display: flex; gap: .85rem; align-items: baseline;
    padding: .55rem 0; border-bottom: 1px solid rgba(42,62,32,.05);
  }
  .termin-tabelle td:last-child { border-bottom: 0; padding-bottom: 0; }
  .td-label {
    display: block; flex: 0 0 6.5em;
    font-family: 'Dessau Bold', Georgia, serif; font-weight: normal;
    color: #4a6b3a; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  }
  .termin-datum-zelle { line-height: 1.5; }

  .termin-fakten > div { gap: .85rem; }
  .termin-fakten dt { flex-basis: 6.5em; }
  .kursleiter-karte img { width: 72px; height: 72px; }
}

/* Wochentagskürzel als leise Zusatzinformation hinter dem Datum. */
.wochentag {
  font-size: .82em;
  color: #6c645c;
  font-weight: 400;
  margin-left: .15em;
}

/* --- Seminarreihen --------------------------------------------------------- */
.termine-sektion--reihe { margin-bottom: 3rem; }
.reihe-untertitel {
  margin: -.4rem 0 1rem; color: #6c645c; font-size: 1.02rem;
}
.reihe-einleitung { margin-bottom: 1.5rem; }
.reihe-einleitung p:last-child { margin-bottom: 0; }
.reihe-mehr { margin-top: 1rem; }

/* Referentenblock: Bild rechts, Text umfließt es; auf schmalen Geräten oben. */
.referent::after { content: ""; display: block; clear: both; }
.referent__bild { float: right; margin: 0 0 1.2rem 1.8rem; max-width: 220px; }
.referent__bild img { border-radius: 10px; }
.referent__rolle { color: #6c645c; margin-top: -.6rem; }

@media (max-width: 640px) {
  .referent__bild { float: none; margin: 0 auto 1.2rem; }
  .referent__bild img { margin: 0 auto; }
}

/* Datum und Wochentag gehören zusammen und dürfen nicht getrennt umbrechen. */
.datum-teil { white-space: nowrap; }


/* --- Faktenliste auf schmalen Geräten ------------------------------------
   Bei knapp 390 Pixeln bleibt neben dem Label zu wenig Platz: Der Wert wird
   dann in eine eigene Zeile darunter gesetzt. */
@media (max-width: 560px) {
  .termin-fakten > div { flex-direction: column; gap: .2rem; }
  .termin-fakten dt { flex-basis: auto; }
  .tz-block { column-gap: .3rem; }
}

.kursleiter-rolle { display: block; font-size: .88rem; color: #5a6b4a; margin-top: .15rem; }