/* ===========================================================
   ruuhe Termine – Übersicht und Terminseite

   Übersicht: je Termin eine Zeile – Kalenderblatt (statt Beitragsbild),
   Datum und Uhrzeit, Titel, Ort, rechts „Zum Termin“. Getrennt durch
   die ruhige Kante, wie die Fragen auf der Startseite.
   Terminseite: Kalenderblatt neben Datum, Uhrzeit und Ort, darunter
   die Teilnahme (Button und Hinweis).

   Farben und Schriften kommen aus dem Theme (theme.json), mit
   Rückfallwerten, falls einmal ein anderes Theme aktiv ist.
   Rechte Winkel, kein Radius, kein Schatten – wie das ganze Design.
   =========================================================== */

.rt-termine,
.rt-termin {
  --rt-tinte: var(--wp--preset--color--tinte, #283D3B);
  --rt-petrol: var(--wp--preset--color--petrol, #197278);
  --rt-terra: var(--wp--preset--color--terrakotta, #C44536);
  --rt-weiss: var(--wp--preset--color--weiss, #FFFFFF);
  --rt-kante: var(--wp--custom--kante--ruhig, 2px solid rgba(40, 61, 59, 0.35));
  --rt-gedaempft: rgba(40, 61, 59, 0.78);
  --rt-display: var(--wp--preset--font-family--display, Georgia, serif);
  --rt-text: var(--wp--preset--font-family--text, system-ui, sans-serif);
  --rt-klein: var(--wp--preset--font-size--body-s, 0.9375rem);
}

/* ── Kalenderblatt: Monat auf Terrakotta, groß der Tag, darunter der Wochentag ── */
.rt-blatt {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 5.5rem;
  background: var(--rt-weiss);
  border: var(--rt-kante);
  border-top: 0;
  color: var(--rt-tinte);
  text-align: center;
  text-decoration: none;
  line-height: 1;
}
.rt-blatt-monat {
  margin: 0 -2px; /* der Streifen läuft über die Kanten links und rechts */
  padding: 0.5rem 0 0.45rem;
  background: var(--rt-terra);
  color: var(--rt-weiss);
  font-family: var(--rt-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rt-blatt-tag {
  padding: 0.55rem 0 0.25rem;
  font-family: var(--rt-display);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.rt-blatt-wtag {
  padding: 0 0 0.7rem;
  font-family: var(--rt-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gedaempft);
}
a.rt-blatt:hover { color: var(--rt-petrol); }

/* ── Übersicht ── */
.rt-liste { display: flex; flex-direction: column; }
.rt-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: 1.75rem 0;
  border-top: var(--rt-kante);
}
.rt-zeile:last-child { border-bottom: var(--rt-kante); }
.rt-zeile-text > * { margin: 0; }
.rt-zeile-zeit {
  font-family: var(--rt-text);
  font-size: var(--rt-klein);
  font-weight: 700;
  line-height: 1.4;
  color: var(--rt-petrol);
}
/* Datum und Uhrzeit brechen nur am Punkt dazwischen um, nie in „19:00–21:00 Uhr“. */
.rt-zeile-zeit > span { white-space: nowrap; }
.rt-zeile-text > .rt-zeile-titel {
  margin: 0.3rem 0 0.25rem;
  font-family: var(--rt-text);
  font-size: var(--wp--preset--font-size--title-s, 1.375rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
}
.rt-zeile-titel a { color: var(--rt-tinte); text-decoration: none; }
.rt-zeile-titel a:hover,
.rt-zeile-titel a:focus-visible { color: var(--rt-petrol); text-decoration: underline; }
.rt-zeile-ort {
  font-size: var(--rt-klein);
  line-height: 1.45;
  color: var(--rt-gedaempft);
}
/* height: auto – der Kern gibt Buttons height: 100 %, im Raster würde „Zum Termin“ so hoch wie die ganze Zeile. */
.rt-zeile-knopf { margin: 0; }
.rt-zeile-knopf .wp-block-button__link { height: auto; white-space: nowrap; }

/* Unter 782 px: Kalenderblatt und Text nebeneinander, der Button darunter über die ganze Breite. */
@media (max-width: 781px) {
  .rt-zeile { grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 0; }
  .rt-zeile-knopf { grid-column: 1 / -1; }
  .rt-zeile-knopf .wp-block-button__link { display: block; text-align: center; }
  .rt-blatt { width: 4.75rem; }
  .rt-blatt-tag { font-size: 2.125rem; }
}

.rt-leer {
  margin: 0;
  padding: 1.75rem 0;
  border-block: var(--rt-kante);
  color: var(--rt-gedaempft);
}

/* ── Terminseite: Kopfzeile, Daten, Teilnahme ── */
.rt-termin > .rt-kopf { margin: 0; }
.rt-daten-kopf { display: flex; align-items: flex-start; gap: 1.5rem; }
.rt-daten-liste { display: grid; gap: 0.85rem; margin: 0; }
.rt-daten-liste > div { display: grid; gap: 0.2rem; }
.rt-daten-liste dt {
  font-family: var(--rt-text);
  font-size: var(--wp--preset--font-size--meta, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gedaempft);
}
.rt-daten-liste dd {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rt-tinte);
}
.rt-teilnahme { margin-top: 2rem; }
.rt-teilnahme .rt-knoepfe { margin: 0; }
.rt-teilnahme .wp-block-button { width: 100%; max-width: 26rem; }
.rt-teilnahme .wp-block-button__link { display: block; height: auto; text-align: center; }
.rt-hinweis {
  max-width: 46ch;
  margin: 0.9rem 0 0;
  font-size: var(--rt-klein);
  line-height: 1.5;
  color: var(--rt-gedaempft);
}
.rt-teilnahme > .rt-hinweis:first-child { margin-top: 0; }
.rt-hinweis a { color: var(--rt-petrol); }
.rt-hinweis a:hover { color: var(--rt-terra); }

/* Nur für Screenreader: „Zum Termin: Männerrunde, Dienstag, 20. Oktober“. */
.rt-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Seminar-Gruppen (seit 1.1.0): Kaufbutton von FluentCart in der Zeile und auf der Gruppenseite nicht über die volle Breite */
.rt-kauf { display: flex; }
.rt-teilnahme .rt-kauf { max-width: 22rem; }
.rt-kauf :is(.wp-block-fluent-cart-buy-now-button, .fluent-cart-buy-now-button) { width: auto; }

/* ── Referent (seit 1.4.0): Bild, Bezeichnung, Name, Zeile, Kurzvorstellung, „Mehr über …“.
   Rahmen und Platz auf der Seite gibt das Theme vor (single-ruuhe_termin, .rs-termin-referent). ── */
.rt-referent { display: grid; gap: 1.5rem; }
.rt-referent-bild { margin: 0; }
.rt-referent-foto { display: block; width: 100%; height: auto; }
.rt-referent-kopf { margin: 0 0 0.6rem; }
.rt-referent-name {
  margin: 0;
  font-family: var(--rt-display);
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--rt-tinte);
}
.rt-referent-rolle { margin: 0.5rem 0 0; font-size: var(--rt-klein); font-weight: 700; line-height: 1.45; color: var(--rt-tinte); }
.rt-referent-vorstellung p { margin: 0.9rem 0 0; font-size: var(--rt-klein); line-height: 1.6; color: var(--rt-gedaempft); }
.rt-referent-link { margin: 1.1rem 0 0; font-size: var(--rt-klein); font-weight: 700; }
.rt-referent-link a { color: var(--rt-petrol); }
.rt-referent-link a:hover { color: var(--rt-terra); }

/* ── Anmeldung über FluentBooking (seit 1.5.0): Kopf, kurzer Text, darunter das Formular von FluentBooking.
   Das Formular bringt eigene Stile mit; hier nur Breite, Schrift und Abstände, damit es zur Seite passt. ── */
.rt-anmeldung { max-width: 56rem; }
.rt-anmeldung-kopf { margin: 0 0 1.25rem; }
.rt-anmeldung-titel {
  margin: 0 0 1rem;
  font-family: var(--rt-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--rt-tinte);
}
.rt-anmeldung-text { max-width: 60ch; margin: 0 0 2rem; line-height: 1.6; color: var(--rt-gedaempft); }
.rt-anmeldung-fertig .rt-anmeldung-text { margin-bottom: 0; color: var(--rt-tinte); font-weight: 700; }
.rt-anmeldung-formular { font-family: var(--rt-text); }
.rt-anmeldung-formular :is(.fcal_wrap, .fcal_slot_wrapper) { border-radius: 0 !important; box-shadow: none !important; }

.rt-anmeldung-formular .fcal_calendar_inner { margin-left: 0 !important; margin-right: auto !important; max-width: 44rem; border-radius: 0 !important; }
.rt-anmeldung-formular a { color: var(--rt-petrol); }
.rt-anmeldung-formular a:hover { color: var(--rt-terra); }
.rt-anmeldung-formular .fcal_terms_conditions,
.rt-anmeldung-formular .fcal_input_content:has(.fcal_terms_conditions) { font-weight: 400; line-height: 1.55; }
/* FluentBooking färbt Links und Knöpfe mit --fcal_primary_color (Farbe des Ereignisses): Links petrol, Absenden terrakotta
   wie alle Hauptknöpfe der Seite. */
.rt-anmeldung-formular .fcal_cal_wrap { --fcal_primary_color: var(--rt-petrol) !important; }
.rt-anmeldung-formular .fcal_btn_submit {
  background: var(--rt-terra) !important;
  border-color: var(--rt-terra) !important;
  border-radius: 0 !important;
  padding: 0.95rem 1.6rem !important;
  font-family: var(--rt-text);
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--rt-weiss) !important;
}
.rt-anmeldung-formular .fcal_btn_submit:hover { background: var(--wp--preset--color--terrakotta-dunkel, #A2382B) !important; }