/* ============================================================
   A1 Seniorenakademie – Kurs-/Webinarseiten
   Breakpoints: 1024px Tablet, 768px Handy (identisch zu site.css).
   Nur CSS-Variablen, keine Inline-Styles -> CSP-konform.

   "Text größer": html{font-size} skaliert über calc(16px * var(--scale,1))
   (site-chrome.js setzt --scale). Werte mit Textbezug (Schriftgrößen,
   live gemessene Boxen wie .t-date, allgemeine Abstände) sind in rem
   angegeben und wachsen automatisch mit. Bewusst in px (skalieren nicht):
   Hero-Bild-Höhen, Logo-/Bildbreiten, rein viewport-gebundene
   Container-Breiten, border-radius/-width.
   ============================================================ */

/* Variablennamen identisch zu site.css/admin.css (ein Vokabular für
   beide Bereiche, Dateien bleiben getrennt). */
:root {
  --a1-red-3: #FF372D;   /* Hover */
  --a1-red-4: #EB140A;   /* Primärfarbe, CTA */
  --a1-dark:  #333333;
  --a1-gray-2:#999999;
  --a1-white: #FFFFFF;
  --a1-black: #000000;

  /* Bewusst NICHT --a1-*: keine offiziellen CI-Farben, Klärung mit
     Marketing/Grafik offen. */
  --kurs-light:        #F0F0F0;   /* Checkliste, Zebra-Streifen */
  --kurs-light-footer: #F8F8F8;
  --a1-gray:           #BCBCBC;

  /* Namen MÜSSEN exakt zu @font-face in fonts.css passen ("A1 Sans"/
     "A1 Serif" MIT Leerzeichen) – bei Font-Wechsel gegenprüfen. */
  --a1-font-serif: "A1 Serif", Georgia, serif;
  --a1-font-sans:  "A1 Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --content-width: 900px;   /* Viewport-gebunden, skaliert nicht */
  --side-pad: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(16px * var(--scale, 1));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--a1-font-sans);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--a1-dark);
  background: var(--a1-white);
  -webkit-font-smoothing: antialiased;  /* sonst wirkt die Schrift auf macOS dünner */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--a1-red-4); }

.kurs-wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}
/* Breiter als .kurs-wrap: CTA-Zeile "Wir sind von Montag..." bricht sonst um. */
.kurs-wrap-wide {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

/* ---------- Hero (full-bleed) ---------- */
.kurs-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 0 2rem;
}
.kurs-hero-img {
  display: block;
  width: 100%;
  height: 500px;             /* Desktop – fester Bildzuschnitt, px */
  object-fit: cover;         /* 3 Zuschnitte (Desktop/Tablet/Mobil) */
  object-position: top;      /* bei schmalerem Viewport wird unten beschnitten, nicht oben */
  border-radius: 0;
}

/* ---------- Obere Aktionslinks ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
  margin: 0 0 1.5rem;
}
.actions a {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--a1-red-4);
  text-decoration: none;
}
.actions a:hover { text-decoration: underline; }
.actions .action-back::before { content: "‹ "; font-size: 1.2em; font-weight: 700; }
.actions .action-next::after  { content: " ›"; font-size: 1.2em; font-weight: 700; }

/* ---------- Überschriften ---------- */
h1 {
  font-family: var(--a1-font-serif);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.3;
  color: var(--a1-dark);
  margin: 0 0 3.125rem;
}
h2 {
  font-family: var(--a1-font-serif);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.15;
  color: var(--a1-dark);
  margin: 2rem 0 1rem;
}

p { margin: 0 0 0.9rem; }
strong, b { font-weight: 700; }

.content a { text-decoration: underline; }
.content a:hover, .content a:focus-visible { color: var(--a1-red-3); }
/* Ausnahmen von der generellen Textlink-Formatierung (Vereinheitlichung August 2026):
   Pfeil-Links (.actions, eigener Block oben) und Telefonnummern/Buttons bleiben unverändert. */
.content a.btn-red,
.content a.tel-link { text-decoration: none; }
/* Ohne dieses Override gewinnt bei gleicher Spezifität die frühere
   ".content a:hover"-Regel oben (setzt color: --a1-red-3) gegen das spätere
   "a.btn-red:hover" (nur background, siehe .btn-red-Block weiter unten) –
   der Button-Text wurde beim Hovern rot statt weiß zu bleiben. */
.content a.btn-red:hover,
.content a.btn-red:focus-visible { color: var(--a1-white); }
.content a.tel-link:hover { text-decoration: underline; color: var(--a1-red-4); }

/* ---------- Akkordeon "Sie haben Interesse?" ----------
   Gleiche Klassen/Verhalten (org-page.js) wie auf den Veranstalter-Detailseiten,
   optisch aber bewusst ANDERS: kein Kasten (Rahmen/Hintergrund), sondern normaler
   Fließtext auf weißem Grund wie der Rest der Seite (a1-premium, August 2026) –
   nur der Klapp-Mechanismus wird wiederverwendet, nicht die Box-Optik von
   home.css. Toggle in H2-Größe, damit er wie eine normale Zwischenüberschrift
   wirkt statt wie ein eigenständiges UI-Element. */
.accordion { margin: 2rem 0; }
.accordion-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; padding: 0; margin: 0 0 1rem;
  font-family: var(--a1-font-serif); font-weight: 600; font-size: 1.625rem; color: var(--a1-dark);
  cursor: pointer; text-align: left;
}
.accordion-icon { color: var(--a1-red-4); font-size: 1.5rem; font-weight: 700; line-height: 1; width: 1em; text-align: center; flex-shrink: 0; }
.accordion-panel { display: none; padding: 0; }
.accordion-panel.is-open { display: block; }

/* ---------- Checkliste (vollbreite graue Fläche) ---------- */
.checklist-band {
  background: var(--kurs-light);
  padding: 0.9375rem 0 1.25rem;
  margin: 6.25rem 0 1.875rem;
}
.checklist-band li::marker { color: var(--a1-red-4); }
.content ol { margin: 0 0 0.9rem; padding-left: 2.5rem; }
.content ol ol { list-style: lower-alpha; margin: 0.375rem 0; }
.content li { margin: 0; }

/* ---------- Termine: Überschrift links, Liste rechts ---------- */
.termine {
  display: grid;
  grid-template-columns: 19.5625rem 1fr;  /* 313px, live gemessen */
  align-items: start;
  margin: 3.5rem 0;
}
.termine h2 { margin: 0; }
.termin-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0;
}
/* Hintergrund auf den Spans (nicht der Zeile): width:fit-content am
   Zeilen-Container ist browserübergreifend unzuverlässig (Safari/Firefox
   brechen um, Chrome nicht) – nicht darauf umstellen. */
.termin-row:nth-of-type(odd) .t-date,
.termin-row:nth-of-type(odd) .t-time { background: var(--kurs-light); }
.termin-row .t-date {
  flex: 0 0 21.25rem;  /* 340px: Platz für "Teil 1: 22. September 2026", live gemessen */
  padding: 0.625rem 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
}
.termin-row .t-time {
  padding: 0.625rem 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
}
/* Mehrteilige Termine: jeder Teil eine eigene Zeile statt gemeinsamer
   Mehrzeilen-Spalte (Details siehe PROJECT_A1Sa.md, "Technische Lehren"). */
.termin-part {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;  /* NICHT auf wrap ändern ohne Safari/Firefox-Test (brach dort vorzeitig um) */
  gap: 0;
}
.termin-multi {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.termin-part .t-date,
.termin-part .t-time { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.teil-label { font-weight: 400; }

/* Ausgebucht-Kennzeichnung: Admin-Flag pro Terminserie (dates.json).
   Einteilig: Ribbon in .t-date verschachtelt, dadurch automatisch auf der
   Naht Datum/Uhrzeit positioniert. Mehrteilig: eigene Regeln weiter unten
   (.termin-multi .ausgebucht-badge), da dort nur eine Kennzeichnung für
   die ganze Serie erscheint, nicht je Teil. */
/* z-index nötig, nicht nur position:relative: .t-time bekommt bei
   .is-ausgebucht opacity < 1, das erzeugt einen eigenen Stacking-Context,
   der laut DOM-Reihenfolge sonst über .t-date (samt Badge) zu liegen kommt
   – unabhängig vom z-index des Badges selbst, das nur innerhalb von
   .t-date zählt. */
.t-date { position: relative; z-index: 1; }
/* .t-date-text/.t-time-text statt .t-date/.t-time wird gedimmt:
   1) .ausgebucht-badge liegt bei Einteiligen als Kind IN .t-date (wegen
      left:100% Positionierung) – würde die opacity-Regel .t-date treffen,
      wäre auch das Badge halbtransparent und der Datumstext schiene
      sichtbar durch ("zwei Kennzeichnungen übereinander").
   2) .t-date/.t-time tragen bei ungeraden Zeilen den Zebra-Hintergrund
      (Zeile 187f., var(--kurs-light)). Opacity auf dem Element selbst
      dimmt Hintergrund UND Text zusammen – bei .t-date blieb der
      Hintergrund unangetastet (nur .t-date-text gedimmt), bei .t-time
      wurde bisher auch der Hintergrund mitgedimmt: Uhrzeit wirkte heller
      als das Datum. Beide Spalten dimmen jetzt nur den Text. */
.ausgebucht-badge {
  position: absolute;
  top: 50%;
  left: 100%;
  /* Ankerpunkt bleibt die Naht Datum/Uhrzeit, aber das Badge hängt
     größtenteils nach links über die Jahreszahl – weniger Info-Verlust
     als über der Uhrzeit. */
  transform: translate(-85%, -50%) rotate(-8deg);
  background: var(--a1-gray-2);
  color: var(--a1-white);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
/* Termin-Text selbst leicht abschwächen, statt ihn zu verstecken – der
   Termin bleibt nachvollziehbar, wirkt aber sichtbar "nicht mehr aktuell". */
.termin-row.is-ausgebucht .t-date-text,
.termin-row.is-ausgebucht .t-time-text { opacity: 0.55; }

/* Mehrteilige Termine: EINE Kennzeichnung für die ganze Serie statt einer
   je Teil – getrennte Badges pro Zeile würden suggerieren, die Teile wären
   einzeln buchbar (sind sie nicht). Daher liegt .ausgebucht-badge hier als
   eigenes Element direkt in .termin-multi (nicht in einem einzelnen
   .t-date verschachtelt) und wird über .termin-multi vertikal zentriert –
   bei zwei Teilen exakt auf der Grenze zwischen Teil 1 und Teil 2.
   left bewusst als feste rem-Länge (21.25rem, siehe .termin-row .t-date
   oben) statt relativ zu einem .t-date: Ankerelement ist hier .termin-multi
   selbst, dessen .t-date-Spalten exakt diese Breite haben. */
.termin-multi { position: relative; z-index: 1; }
.termin-multi .ausgebucht-badge {
  top: 50%;
  left: 21.25rem;
  transform: translate(-85%, -50%) rotate(-8deg);
}
.termin-empty {
  font-weight: 600;
  margin: 0.625rem 0 0;
}

/* ---------- Dauer-Hinweis unter H1 (nur Stammtisch-Seite) ---------- */
/* 960px Innenbreite = Summe der 4 Tabellenspalten unten (220+300+210+230px),
   deshalb rem statt px: Container und Tabelle müssen im selben Verhältnis
   mitskalieren, sonst reißt die Tabelle bei "Text größer" aus dem Container. */
.page-stammtisch .kurs-wrap { max-width: 62.5rem; }

/* Breiter als der Standard-Kurstext (900px) – mehr Fließtext + Akkordeon-Inhalt,
   gleiche Technik wie bei .page-stammtisch (eigener, gescopeter Wert statt global). */
.page-premium .kurs-wrap { max-width: 62.5rem; }  /* 1000px, wie .page-stammtisch */
.page-stammtisch h1 { margin-bottom: 0.5rem; }
.dauer { font-weight: 600; margin: 0 0 2.5rem; }

/* ---------- Stammtisch-Termine: Tabelle statt Karten ---------- */
.stammtisch-termine { margin: 3.5rem 0; }
.stammtisch-sort-hint { margin: 0 0 0.75rem; font-weight: 600; }
.sort-btn-group { display: inline-flex; gap: 0.625rem; }
.sort-btn {
  background: var(--a1-white); border: 2px solid var(--a1-gray); color: var(--a1-dark);
  font-size: 1.125rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 4px;
  cursor: pointer; line-height: 1;
}
.sort-btn.is-active { border-color: var(--a1-red-4); color: var(--a1-red-4); }
.sort-btn:hover { border-color: var(--a1-red-3); color: var(--a1-red-3); }

.stammtisch-table-wrap { overflow-x: auto; margin: 1.5rem 0 0.5rem; }
.stammtisch-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Nur Desktop relevant (Mobil: display:block, siehe @media unten).
   Spaltenbreiten live gemessen (Chrome, A1 Sans): Termin für "22. September
   2026", Thema für "Tipps und Tricks für" (Standardthema-Anfang), Anmeldung
   für "A1 Seniorenakademie". Lokalität übernimmt die Restbreite. */
.col-w-termin      { width: 13.75rem; }   /* 220px */
.col-w-lokalitaet  { width: 18.75rem; }   /* 300px */
.col-w-thema       { width: 13.125rem; }  /* 210px */
.col-w-anmeldung   { width: 14.375rem; }  /* 230px */
.stammtisch-table td { padding: 0.875rem; border-bottom: 1px solid var(--kurs-light); vertical-align: top; font-size: 1.125rem; }
.stammtisch-table tbody tr:nth-child(odd) { background: var(--kurs-light); }
.stammtisch-table a { white-space: nowrap; }
/* Name darf umbrechen (bis 80 Zeichen in 230px), anders als Telefonnummern. */
.stammtisch-table a.anmeldung-link { color: var(--a1-red-4); white-space: normal; }
.stammtisch-table a.anmeldung-link:hover,
.stammtisch-table a.anmeldung-link:focus-visible { color: var(--a1-red-3); }
.stammtisch-table .datum-fett { font-weight: 700; }
.stammtisch-hinweis { margin-top: 3.5rem; }
.stammtisch-hinweis p:last-child { margin-bottom: 0; }

/* Anmeldung bei: Desktop Text, Mobil Klick-zum-Anrufen-Link, exklusiv. */
.stammtisch-table .tel-link { display: none; }

@media (max-width: 768px) {
  .stammtisch-table, .stammtisch-table tbody, .stammtisch-table tr, .stammtisch-table td { display: block; width: 100%; }
  .stammtisch-table tr {
    margin-bottom: 1rem; border: 1px solid var(--a1-gray); padding: 0.75rem;
    background: var(--a1-white) !important;
  }
  .stammtisch-table td { border: none; padding: 0.375rem 0; font-size: 1.125rem; }
  .stammtisch-table .tel-text { display: none; }
  .stammtisch-table .tel-link { display: inline; }
}

/* ---------- Anmelde-CTA ---------- */
.cta-band {
  background: var(--kurs-light);
  padding: 1.25rem 0;
  margin: 2.5rem 0;
}
.cta { text-align: center; margin: 2.5rem 0; }
.cta-band .cta { margin: 0; }
.cta-band .cta > *:first-child { margin-top: 0; }
.cta-band .cta > *:last-child { margin-bottom: 0; }
.cta h2 { text-align: center; }
/* Stammtisch: Fließtext statt Headline-Zeilen, deshalb linksbündig statt zentriert. */
.page-stammtisch .cta,
.page-stammtisch .cta h2 { text-align: left; }
.cta-number { color: var(--a1-red-4); }
.cta-buttons {
  display: none;   /* Desktop: nur Text-Nummer, ab Tablet umgekehrt (s.u.) */
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}
.btn-red {
  display: inline-block;
  font-family: var(--a1-font-sans);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--a1-white);
  background: var(--a1-red-4);
  padding: 0.75rem 1.25rem;   /* CI-Maß 12px/20px, identisch zu site.css */
  text-decoration: none;
  border: 0;
}
a.btn-red:hover { background: var(--a1-red-3); text-decoration: none; }

.cta-alt {
  font-family: var(--a1-font-serif);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--a1-dark);
  margin: 0 0 1rem;
}

/* Der echte Footer läuft projektweit über footer.site-foot (site-chrome.css/
   site-footer.php) – hier ist kein eigenes Footer-Markup mehr nötig. */

/* ============================================================
   Tablet (<= 1024 px)
   ============================================================ */
@media (max-width: 1024px) {
  h1 { font-size: 2.625rem; }
  .actions a { font-size: 1.25rem; }
  .kurs-hero-img { height: 333px; }

  .cta-number { display: none; }
  .cta-buttons { display: flex; }

  /* Textgrößen-Reduktion ab Tablet-Breite (nicht erst ab Mobil), analog home.css
     (dortige Referenz: .hero-below .intro, siehe dort @media max-width:1024px). */
  body { font-size: 1.25rem; }
  h2 { font-size: 1.375rem; line-height: 1.2; }
  .cta-alt { font-size: 1.375rem; line-height: 1.2; }
}

/* ============================================================
   Handy (<= 768 px)
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: 2rem; line-height: 1.2; }

  .kurs-hero-img { height: 250px; }

  .termine { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .termin-row .t-date { flex: 0 0 15.625rem; }  /* 250px */
  .termin-row .t-date,
  .termin-row .t-time { padding: 0.625rem 1rem; font-size: 1.25rem; }

  /* "Teil N: "-Label braucht mehr Platz als ein einzelnes Datum. */
  .termin-part .t-date { flex: 0 0 18.75rem; }  /* 300px */
  .termin-part { flex-wrap: wrap; }
  .termin-part .t-date,
  .termin-part .t-time { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  /* Einzug = Breite von "Teil N: " (live gemessen: 54,63px bei 20px/400,
     tabellarische Ziffern) – Uhrzeit steht dadurch bündig unter dem Datum. */
  .termin-part .t-time { flex: 0 0 18.75rem; padding-left: 4.6875rem; }

  /* Ankerbreite an die schmalere mobile .termin-part .t-date-Spalte anpassen
     (18.75rem statt 21.25rem), sonst landet das Badge zu weit rechts. */
  .termin-multi .ausgebucht-badge { left: 18.75rem; }
}