/* ==========================================================================
   A1 Seniorenakademie – Startseite (Entwurf)
   Vanilla CSS, CSS-Variablen aus dem bestehenden A1-CI (siehe PROJECT.md Abschnitt 6).
   Kein Inline-Style/Script auf dieser Seite – CSP ohne 'unsafe-inline' bleibt scharf.
   ========================================================================== */

:root {
  --a1-red-1: #FDC9C4;
  --a1-red-2: #FA8A80;
  --a1-red-3: #FF372D;
  --a1-red-4: #EB140A;
  --a1-red-5: #B90A05;
  --a1-red-6: #820000;
  --a1-red-7: #460000;
  --a1-white: #FFFFFF;
  --a1-light: #F2F2F2;
  --a1-gray:  #BCBCBC;
  --a1-gray-2:#999999;
  --a1-dark:  #333333;
  --a1-dark-2:#4F4F4F;
  --a1-black: #000000;

  /* Namen bewusst identisch zu kurs.css/site.css/admin.css (--a1-font-serif/
     --a1-font-sans, statt der zuvor hier abweichenden --font-serif/--font-sans) –
     ein Vokabular für alle CSS-Dateien des Projekts, siehe PROJECT_A1Sa.md
     Abschnitt 6 "CSS-Variablen-Inkonsistenz". */
  --a1-font-serif: "A1 Serif", Georgia, "Iowan Old Style", serif;
  --a1-font-sans:  "A1 Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1000px;
  --scale: 1;
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--a1-font-sans);
  color: var(--a1-dark);
  background: var(--a1-white);
  font-size: 1.5rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* ohne das wirkt dieselbe Schrift bei gleichem
                                           font-weight spürbar dünner (macOS/WebKit) –
                                           gleicher Fix wie in kurs.css */
}

h1, h2, h3 { font-family: var(--a1-font-serif); font-weight: 700; margin: 0 0 0.6em; color: var(--a1-black); }
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* Nur die Startseite breiter (1440px statt 1000px) – home.css ist die gemeinsame
   Basis-CSS-Datei für mehrere Seiten (Feedback, Veranstalter, /a1-webinare/,
   siehe PROJECT_A1Sa.md), --container also NICHT global in :root ändern, sonst
   würden alle diese Seiten mitbetroffen. Kopf-/Fußzeile bleiben unverändert:
   .site-head .wrap/footer.site-foot .wrap setzen in site-chrome.css bereits
   ihr eigenes, fest verdrahtetes max-width:1440px (höhere Spezifität als .wrap),
   --container betrifft sie also ohnehin nicht. */
body.page-home {
  --container: 1440px;
  /* Korrektur 21.08.2026: Fließtext-Blöcke (Einleitung, "Persönlich vor Ort",
     "Webinare entdecken", "Webinartermine", "Aktuelles"), ihre Überschriften/
     CTA-Zeilen sowie Vertrauens-Zeile, "So geht's" und "Auszeichnung" bekommen
     einen FESTEN Pixel-Deckel (kein Zeichenmaß wie z.B. 60ch – bei dieser
     Zielgruppe 60+ ist ein zu breiter Absatz schlecht lesbar) und werden als
     BLOCK zentriert (margin:0 auto); der Text selbst bleibt dabei linksbündig
     (kein text-align:center). Dadurch fluchten alle diese Blöcke automatisch
     miteinander (identische Breite + identische Zentrierung ergibt identische
     linke Kante), inklusive Titel/Tagline im Hero. Unterhalb dieser Breite ist
     die Regel ein No-Op (der .wrap ist dort ohnehin schmäler). Karten in
     "Persönlich vor Ort" (.angebote-grid weiter unten) bleiben davon unberührt
     – eigene, weiterhin mitwachsende Drittel-Verteilungs-Logik.

     --content-cap ist EINE zentrale Stelle für diesen Wert (vorher an 9
     Stellen einzeln als Literal "1100px" dupliziert – jede Breitenänderung
     musste dadurch an 9 Stellen einzeln nachgezogen werden). Angewendet wird
     er gesammelt in EINER Regel (Selektorliste ".content-cap-Sammelregel",
     siehe Ende des Abschnitts "Kurskategorien" weiter unten) statt verstreut
     einzeln – Details und die Platzierungs-Begründung dort. */
  --content-cap: 1100px;
}

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border-radius: 0;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--a1-red-4);
  color: var(--a1-white);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn::after { content: "\203A"; font-weight: 700; }
.btn:hover, .btn:focus-visible { background: var(--a1-red-3); }
.btn-small { font-size: 1.05rem; padding: 0.5rem 0.9rem; }

:focus-visible { outline: 3px solid var(--a1-dark); outline-offset: 3px; }

/* -------------------- Hero -------------------- */
.hero-media { position: relative; }
.hero-photo { display: block; width: 100%; height: 500px; object-fit: cover; object-position: top; }
.hero-logo { position: absolute; top: 1.5rem; left: 1.5rem; height: 144px; width: auto; }

.hero-media-text { position: absolute; left: 0; right: 0; bottom: 2rem; }
.hero-media-text .wrap { padding: 0 1.5rem; }
.hero-media-text h1, .hero-media-text h2 {
  color: var(--a1-white); font-size: 3.4rem; line-height: 1.1; margin-bottom: 0.4rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85), 0 6px 18px rgba(0,0,0,0.6);
}
.hero-tagline {
  color: var(--a1-white); font-size: 1.35rem; opacity: 0.97; margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 4px 12px rgba(0,0,0,0.55);
}
/* Breiten-Deckel + Zentrierung: siehe .content-cap-Sammelregel am Ende des
   Abschnitts "Kurskategorien" weiter unten (fasst alle Vorkommen zusammen). */

.hero-below { background: var(--a1-white); padding: 2.5rem 0; }
.hero-below h1 { font-size: 2.4rem; font-weight: 400; margin-bottom: 0.6em; }
.org-section h1, .org-section h2 { font-size: 2.4rem; font-weight: 400; margin-bottom: 0.6em; }

/* Letzter Abschnitt "Interesse? So geht's weiter" auf /veranstalter/pr-va/org/: zentriert,
   Überschrift in A1-Rot (einzige Ausnahme von der sonst einheitlichen dunklen
   Überschriftenfarbe auf dieser Seite). Der Sprunglink im Übersicht-Akkordeon verweist
   weiterhin unverändert auf #interesse. */
#interesse { text-align: center; }
#interesse h2 { color: var(--a1-red-4); }
.hero-below .intro { font-size: 1.5rem; color: var(--a1-dark-2); margin-bottom: 1em; }
.hero-ctas-lead { color: var(--a1-dark-2); margin-bottom: 0.75em; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-below .intro, .org-section .intro, .hero-ctas-lead, .webinare-intro, .vor-ort-intro, .auszeichnung-text, .formate-liste a, .back-link, .checkliste li, .note-box p, .stimmen-link a { font-size: 1.5rem; }

@media (max-width: 1024px) {
  .hero-photo { height: 333px; }
  .hero-logo { height: 120px; }
  .hero-below h1 { font-size: 2rem; }
  .org-section h1, .org-section h2 { font-size: 2rem; }
  /* Referenz: .hero-below .intro (Einleitungstext) – alle gleichrangigen Fließtexte
     folgen derselben Größe, ab Tablet-Breite abwärts (nicht erst ab Mobil-Breite,
     sonst bleibt Tablet fälschlich auf Desktop-Größe hängen). .stimmen-link a
     ("Sagen Sie uns Ihre Meinung") gehört hier bewusst mit dazu, siehe
     PROJECT_A1Sa.md – vorher blieb der Link auf schmalen Displays überdimensioniert
     stehen, weil er an keiner Fließtext-Sammelregel hing. */
  .hero-below .intro, .org-section .intro, .hero-ctas-lead, .webinare-intro, .vor-ort-intro, .auszeichnung-text, .formate-liste a, .back-link, .checkliste li, .note-box p, .stimmen-link a { font-size: 1.25rem; }
}
@media (max-width: 767px) {
  .hero-photo { height: 250px; }
  .hero-logo { height: 96px; top: 1rem; left: 1rem; }
  .hero-media-text { bottom: 1rem; }
  .hero-media-text h1, .hero-media-text h2 { font-size: 1.7rem; }
  .hero-tagline { font-size: 1.05rem; }
  .hero-below h1 { font-size: 1.6rem; }
  .org-section h1, .org-section h2 { font-size: 1.6rem; }
  /* "Kurse online"/"Kurse vor Ort" auf Mobil zentriert statt linksbündig. */
  .hero-ctas { justify-content: center; }
}

/* -------------------- Vertrauens-Zeile -------------------- */
.trust-row { background: var(--a1-light); padding: 2rem 0; }
/* .trust-row-inner (NICHT .trust-row .wrap selbst) trägt das Grid – Lehre: .wrap
   trägt eigenes Padding, ein max-width darauf würde den Inhalt zusätzlich um
   dieses Padding verschmälern und falsch zentrieren. Der .wrap bleibt deshalb
   unverändert (voll, gepolstert), .trust-row-inner ist ein normales Kind-
   Element darin und nutzt einfach die volle verfügbare Breite (auto-fit). */
/* Breiten-Deckel + Zentrierung: siehe .content-cap-Sammelregel am Ende des
   Abschnitts "Kurskategorien" weiter unten – verhindert, dass die drei
   Icon-Punkte auf der breiten Startseite zu weit auseinanderreißen. */
.trust-row-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; justify-items: center;
}
.trust-item { display: flex; align-items: center; gap: 0.85rem; font-weight: 600; font-size: 1.15rem; }
.trust-item svg { width: 2rem; height: 2rem; flex-shrink: 0; color: var(--a1-red-4); }

/* -------------------- So geht's -------------------- */
.steps-section { padding: 4rem 0 3rem; }
.steps-section h2 { text-align: center; font-size: 2rem; margin-bottom: 1.5rem; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
/* Breiten-Deckel + Zentrierung (h2 und .steps): siehe .content-cap-Sammelregel
   am Ende des Abschnitts "Kurskategorien" weiter unten. */
.steps::before { content: ""; position: absolute; top: 1.6rem; left: 12%; right: 12%; height: 0; border-top: 3px dashed var(--a1-red-4); z-index: 0; }
.step { position: relative; z-index: 1; text-align: center; padding: 0 0.5rem; }
.step-num {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--a1-red-4); color: var(--a1-white);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem;
  margin: 0 auto 1rem; border: 4px solid var(--a1-white);
}
.step h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.step p { font-size: 1.15rem; color: var(--a1-dark-2); }

/* -------------------- Persönlich vor Ort -------------------- */
.vor-ort-section { padding: 4rem 0; background: var(--a1-light); }
/* Gleiches Vorgehen wie bei "Webinare entdecken"/"Die nächsten Termine": nur diese
   Überschrift normal statt fett, nicht global auf .section-head h2. */
.vor-ort-head h2 { font-weight: 400; }
/* Breiten-Deckel + Zentrierung (Überschrift und Absatz, fluchten dadurch
   miteinander): siehe .content-cap-Sammelregel am Ende des Abschnitts
   "Kurskategorien" weiter unten. */
/* Größe zentral geregelt in der .hero-below .intro-Sammelregel weiter oben (Desktop 1.5rem,
   ab 1024px 1.25rem) – hier bewusst nicht erneut gesetzt, sonst gewinnt diese spätere,
   unbedingte Regel gegen die frühere Media-Query-Regel (gleiche Spezifität, siehe
   PROJECT_A1Sa.md Abschnitt 5b "Rückkopplungsfehler"/CSS-Spezifitäts-Lehre). */
.vor-ort-intro { color: var(--a1-dark-2); margin-bottom: 2rem; }
/* Mobil/Tablet (Container < 1000px, d.h. Inhaltsbreite < 952px): unverändert
   auto-fit/1fr wie bisher – Karten strecken sich, brechen bei Bedarf um.
   Ab 1000px Containerbreite (Media Query unten) gilt stattdessen ein fixes
   Karten-Layout: Kartenbreite bleibt für immer beim heutigen Wert eingefroren
   (Vorgabe: Karten dürfen mit der neuen, breiteren Startseite nicht mitwachsen –
   "wirkt sonst nicht schön"), zusätzlicher Platz verteilt sich zu je einem
   Drittel auf linken Rand, Kartenabstand und rechten Rand (CSS-Grid-fr-Einheiten
   erledigen die Drittelung automatisch, kein JS nötig). Bei genau 1000px
   Containerbreite ergibt das rechnerisch exakt den heutigen Ist-Zustand (0px
   Zusatzrand, 1,5rem Kartenabstand) – siehe PROJECT_A1Sa.md für die Herleitung. */
.angebote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
@media (min-width: 1000px) {
  .angebote-grid {
    grid-template-columns:
      minmax(0, 1fr)
      calc((952px - 1.5rem) / 2)
      minmax(1.5rem, 1fr)
      calc((952px - 1.5rem) / 2)
      minmax(0, 1fr);
    gap: 0; /* Kartenabstand jetzt die mittlere Grid-Spur, kein zusätzlicher gap mehr */
  }
  /* Ohne explizite grid-column-Zuweisung platziert Grid die beiden .angebot-card
     einfach nacheinander in Spur 1 und 2 (Rand- bzw. erste Kartenspur) – dadurch
     landete Karte 1 in der schmalen Randspur und Karte 2 überlappte die eigentliche
     erste Kartenspur (sichtbarer Layout-Fehler, live geprüft). Beide Karten müssen
     deshalb explizit auf die Kartenspuren (2 und 4) gesetzt werden; Spur 1/3/5
     bleiben dadurch bewusst leer und wirken als Rand/Abstand. */
  .angebot-card:nth-child(1) { grid-column: 2; }
  .angebot-card:nth-child(2) { grid-column: 4; }
}
.angebote-grid-3 { grid-template-columns: repeat(3, 1fr); }
.angebot-card {
  background: var(--a1-white); border: 1px solid var(--a1-gray); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: var(--a1-dark); display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.angebot-card:hover, .angebot-card:focus-visible { box-shadow: 0 10px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.angebot-photo {
  position: relative;
  width: 100%; aspect-ratio: 800 / 435; background: repeating-linear-gradient(135deg, var(--a1-light), var(--a1-light) 10px, var(--a1-gray) 10px, var(--a1-gray) 11px);
  display: flex; align-items: center; justify-content: center; color: var(--a1-dark-2);
}
.angebot-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.angebote-grid-3 .angebot-photo { width: 100%; height: 90px; }
.angebot-photo svg { width: 2.2rem; height: 2.2rem; }
.angebot-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.angebot-body .btn { margin-top: auto; align-self: flex-start; }
.angebot-body .pill {
  display: inline-block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--a1-red-5); margin-bottom: 0.6rem;
}
.angebot-body h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.angebot-body p { font-size: 1.2rem; font-weight: 400; color: var(--a1-dark-2); margin-bottom: 0.75rem; }

/* Spoiler-/Fade-Effekt: zeigt ca. 3–3,5 Zeilen, letzte sichtbare Zeile blendet zum Rand hin aus
   (mask-image statt exakter Zeilenerkennung – reagiert automatisch auf Fenstergröße und
   Text-größer-Skalierung, kein JS-Zeilen-Messen nötig, siehe Projektgespräch). */
.angebot-text-wrap { position: relative; }
.angebot-text {
  max-height: 6.4em; /* nachjustiert */
  overflow: hidden;
  transition: max-height 0.25s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}
.angebot-text.is-expanded {
  max-height: 40em; /* großzügiger Fixwert statt "none" – nur so bleibt die Höhen-Transition animierbar */
  -webkit-mask-image: none;
  mask-image: none;
}
.angebot-toggle {
  display: inline-block; background: none; border: none; padding: 0; margin: 0 0 1.5rem;
  color: var(--a1-red-4); font-weight: 600; font-size: 1.05rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.angebot-toggle:hover, .angebot-toggle:focus-visible { color: var(--a1-red-3); }
.termine-note .mehr { font-weight: 600; color: var(--a1-red-4); font-size: 1rem; text-decoration: none; }
.termine-note .mehr:hover, .termine-note .mehr:focus-visible { text-decoration: underline; }
.termine-note a { color: var(--a1-red-4); font-weight: 600; }

/* -------------------- Nächste Termine (online) -------------------- */
.termine-section { background: var(--a1-light); padding: 3.5rem 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.section-head h2 { margin: 0; font-size: 2.2rem; }
/* Nur diese eine Überschrift normal statt fett – nicht global auf .section-head h2,
   das würde auch Vor-Ort/Aktuelles-Überschriften mit entfetten (siehe gleiches
   Vorgehen oben bei "Webinare entdecken"). */
.termine-section .section-head h2 { font-weight: 400; }

.termine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.termin-card {
  display: block; background: var(--a1-white);
  border: 1px solid #E0E0E0;
  box-shadow: 0 2px 3px 1px #E0E0E0;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.termin-card:hover, .termin-card:focus-visible { box-shadow: 0 10px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.termin-datum { padding: 0.75rem 1rem; font-weight: 700; font-size: 1.05rem; color: var(--a1-red-5); }
.termin-foto-wrap { position: relative; }
.termin-foto { display: block; width: 100%; height: auto; }
.termin-kurs { padding: 1rem; font-weight: 700; font-size: 1.2rem; }
/* Stammtisch-Vorschau (Vor-Ort-Sektion): Karten ohne Foto, dafür Ort + Datum als Text. */
.termin-card .kurs { padding: 1rem 1rem 0.25rem; font-weight: 700; font-size: 1.1rem; }
.termin-card .datum { padding: 0 1rem 1rem; font-weight: 700; color: var(--a1-red-5); }
.termine-note { font-size: 1rem; color: var(--a1-dark-2); margin-top: 1.5rem; }
/* Button unterhalb der Karten, linksbündig wie der übrige Text. */
.termine-cta { text-align: left; margin: 1.5rem 0 0; }
/* Breiten-Deckel + Zentrierung (Überschrift, Karten-Grid, Hinweistext,
   Button): siehe .content-cap-Sammelregel am Ende dieses Abschnitts. */

/* -------------------- Kurskategorien -------------------- */
.kategorien-section { padding: 4rem 0; background: var(--a1-white); }
/* Nur diese eine Überschrift normal statt fett – nicht global auf .section-head h2,
   das würde auch Vor-Ort/Termine/Aktuelles-Überschriften mit entfetten. */
.kategorien-section .section-head h2 { font-weight: 400; }
/* Größe zentral geregelt in der .hero-below .intro-Sammelregel (siehe Kommentar bei
   .vor-ort-intro) – hier bewusst nicht erneut gesetzt. */
.webinare-intro { color: var(--a1-dark-2); margin: 0; }
.webinare-cta { text-align: left; margin: 1.25rem 0 0; }

/* Zentrale Sammelregel für den Breiten-Deckel (--content-cap, siehe
   body.page-home oben): fasst alle Vorkommen zusammen statt sie einzeln zu
   duplizieren (vorher 9x derselbe Dreizeiler verstreut über die Datei – jede
   Breitenänderung musste an jeder Stelle einzeln nachgezogen werden).
   max-width + margin:0 auto zentriert den BLOCK, der Text selbst bleibt
   linksbündig (kein text-align:center).

   Platzierung bewusst HIER (nach allen vier Basis-Regeln, die eine volle
   margin-Shorthand setzen und dadurch margin-left/-right auf 0 zurücksetzen
   würden, käme diese Regel VOR ihnen zu stehen – live geprüft, "Hier
   weiterlesen"/"Alle Termine" blieben dadurch linksbündig statt zentriert):
   .hero-tagline (margin:0), .termine-cta (margin:1.5rem 0 0), .webinare-intro
   (margin:0), .webinare-cta (margin:1.25rem 0 0). Alle vier stehen weiter
   oben im File, diese Regel also danach – für alle übrigen Selektoren unten
   ist die Reihenfolge irrelevant (keine widersprüchliche margin-Shorthand). */
.hero-media-text h1, .hero-media-text h2, .hero-tagline,
.hero-below .intro, .hero-ctas-lead, .hero-ctas,
.trust-row-inner,
.steps-section h2, .steps,
.vor-ort-head,
.vor-ort-intro,
.termine-section .section-head, .termine-grid, .termine-note, .termine-cta,
.kategorien-section .section-head, .webinare-intro, .webinare-cta,
.aktuelles-section .section-head, .aktuelles-track, .aktuelles-nav-row,
.stimmen-head,
.auszeichnung-grid {
  max-width: var(--content-cap);
  margin-left: auto;
  margin-right: auto;
}

/* -------------------- Aktuelles -------------------- */
/* Eigene Überschrift wie "Webinare entdecken" (.section-head h2, hier zusätzlich
   font-weight:400 wie bei den anderen schlanken Überschriften). Karten bleiben
   bewusst schmal/kompakt (Admin-Tool: anmeldungen/admin/aktuelles.php) – anders
   als die großen Grid-Sektionen oben (Vor-Ort, Webinare) aber trotzdem mit
   Section-Überschrift. Einzeilige Karten-Reihe statt Grid: .aktuelles-track ist
   ein horizontal scrollender Flex-Container (3 Karten gleichzeitig sichtbar ab
   1025px, weniger auf Tablet/Mobil, siehe Kartenbreite unten). Die Nav-Pfeile (.aktuelles-nav-row)
   sitzen unterhalb der Karten, nicht seitlich, und scrollen per JS (home.js) um
   eine Kartenbreite – werden serverseitig nur gerendert, wenn mehr als drei
   Meldungen aktiv sind (home-layout.php). Padding wie die übrigen Sektionen
   (siehe .stimmen-section/.auszeichnung-section), damit die Überschrift nicht am
   oberen Rand klebt. */
.aktuelles-section { padding: 4rem 0; }
.aktuelles-section .section-head h2 { font-weight: 400; }
/* Breiten-Deckel + Zentrierung (Überschrift, Karten-Reihe, Nav-Pfeile): siehe
   .content-cap-Sammelregel am Ende des Abschnitts "Kurskategorien" weiter
   oben. */
.aktuelles-track {
  display: flex; flex-wrap: nowrap; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.aktuelles-track::-webkit-scrollbar { display: none; }
/* Kartenbreite: mindestens 310px, maximal so breit, dass drei Karten beim
   --content-cap-Deckel nebeneinander passen (100% ist hier bereits durch
   diesen Deckel auf .aktuelles-track begrenzt, siehe oben). Reicht der Platz
   nicht für drei Karten mit mindestens 310px (Tablet/Mobil), wird über die
   Media Queries unten die ANZAHL der gleichzeitig sichtbaren Karten reduziert
   (3 → 2 → 1) statt die Karten schmäler als 310px zu quetschen oder eine
   Karte am Rand nur teilweise sichtbar zu lassen ("abgeschnitten") – bei drei
   Bildschirmbreiten 1024px/767px (gleiche Schwellwerte wie im Rest der Seite)
   ist rechnerisch immer noch genug Platz für die jeweils nächstkleinere
   Kartenzahl bei 310px Mindestbreite. */
.aktuelles-card {
  flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
  min-width: 310px;
  scroll-snap-align: start;
  background: var(--a1-white); border: 1px solid var(--a1-gray);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;
}
@media (max-width: 1024px) {
  .aktuelles-card { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 767px) {
  .aktuelles-card { flex-basis: 100%; }
}
/* Schrift wie bei den "Persönlich vor Ort"-Karten (.angebot-body h3/p): Titel
   in Schriftart/-größe/-gewicht der Überschriften (--a1-font-serif, 700,
   Schwarz), Text in --a1-dark-2 statt --a1-dark. Kein eigenes margin-bottom
   hier (anders als .angebot-body h3/p) – .aktuelles-card regelt den Abstand
   bereits per flex gap, ein zusätzliches margin würde ihn verdoppeln. */
.aktuelles-card .label {
  display: block;
  font-family: var(--a1-font-serif); font-weight: 700; font-size: 1.5rem; color: var(--a1-black);
}
/* Textgröße an .termin-kurs ("Webinartitel" auf den Webinartermin-Karten) angeglichen. */
.aktuelles-card p { margin: 0; flex: 1; font-size: 1.2rem; font-weight: 400; color: var(--a1-dark-2); }
/* Textlink statt Button – gleiches Muster wie .stimmen-link a/.formate-liste a (Pfeil als ::after),
   Schriftgröße bewusst wie der Kartentext (.aktuelles-card p), kein eigener Sprung. */
.aktuelles-link { align-self: flex-start; font-size: 1.2rem; color: var(--a1-red-4); font-weight: 600; text-decoration: none; }
.aktuelles-link::after { content: "\2192"; margin-left: 0.5rem; font-weight: 700; }
/* Unterstreichung nur auf dem Textteil (.aktuelles-link-text), nicht auf dem Pfeil
   (::after) – gleiches Prinzip wie .stimmen-link a/.stimmen-link-text. */
.aktuelles-link:hover .aktuelles-link-text, .aktuelles-link:focus-visible .aktuelles-link-text { text-decoration: underline; }
.aktuelles-nav-row { display: flex; justify-content: center; gap: 150px; margin-top: 1.5rem; }
.aktuelles-nav {
  flex: 0 0 auto; background: var(--a1-white); border: 2px solid var(--a1-gray); border-radius: 50%;
  width: 2.6rem; height: 2.6rem; font-size: 1.1rem; cursor: pointer; color: var(--a1-dark);
}
.aktuelles-nav:hover, .aktuelles-nav:focus-visible { border-color: var(--a1-red-4); color: var(--a1-red-4); }
.aktuelles-nav:disabled { opacity: 0.35; cursor: default; }
.aktuelles-nav:disabled:hover { border-color: var(--a1-gray); color: var(--a1-dark); }

/* -------------------- Stimmen -------------------- */
/* Weißer statt grauer Hintergrund, damit sich die Sektionen abwechseln:
   .termine-section (grau) → .stimmen-section (weiß) → .auszeichnung-section (grau)
   → .aktuelles-section (weiß, kein eigener Hintergrund, siehe unten). */
.stimmen-section { background: var(--a1-white); padding: 4rem 0; }
.stimmen-head h2 { font-weight: 400; }
/* Breiten-Deckel + Zentrierung: siehe .content-cap-Sammelregel am Ende des
   Abschnitts "Kurskategorien" weiter oben. .stimme-box (700px) und
   .stimmen-link sind bereits schmäler als der Deckel und bleiben unverändert,
   fluchten aber weiterhin über ihre eigene Zentrierung mit dieser
   Überschrift. */
/* Rahmen ergänzt, seit .stimmen-section weiß statt grau ist (siehe oben) –
   ohne Rahmen sonst Weiß auf Weiß, gleicher Rahmenton wie .aktuelles-card/
   .termin-card (var(--a1-gray)). */
.stimme-box { max-width: 700px; margin: 0 auto; background: var(--a1-white); border: 1px solid var(--a1-gray); border-radius: 14px; padding: 2.5rem; text-align: center; min-height: 220px; display: flex; flex-direction: column; justify-content: center; }
.stimme-text { font-size: 1.3rem; font-style: italic; margin-bottom: 1.25rem; }
.stimme-meta { margin-bottom: 0; }
/* Name+Wohnort und Thema jeweils in eigener Zeile, Thema unterhalb des Namens
   (vorher inline mit " – "-Trenner) – beide auf Größe des Feedbacktextes
   (.stimme-text) abgestimmt, damit auf schmalen Displays nichts mehr größer
   wirkt als der Fließtext des Zitats selbst. */
.stimme-author { display: block; font-size: 1.3rem; font-weight: 700; color: var(--a1-dark-2); }
.stimme-kurs { display: block; font-size: 1.3rem; color: var(--a1-gray-2); margin-top: 0.25rem; }
.stimme-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.stimme-controls button { background: var(--a1-white); border: 2px solid var(--a1-gray); border-radius: 50%; width: 2.6rem; height: 2.6rem; font-size: 1.1rem; cursor: pointer; color: var(--a1-dark); }
.stimme-controls button:hover, .stimme-controls button:focus-visible { border-color: var(--a1-red-4); color: var(--a1-red-4); }
.stimmen-link { text-align: center; margin-top: 1.75rem; }
.stimmen-link a { color: var(--a1-red-4); font-weight: 600; text-decoration: none; }
/* Pfeil als ::after statt Teil des Linktexts (gleiches Prinzip wie .formate-liste a) –
   dadurch bleibt er von der Hover-Unterstreichung ausgenommen, die nur noch auf
   .stimmen-link-text liegt. */
.stimmen-link a::after { content: "\2192"; margin-left: 0.5rem; font-weight: 700; }
.stimmen-link a:hover .stimmen-link-text, .stimmen-link a:focus-visible .stimmen-link-text { text-decoration: underline; }

/* -------------------- Auszeichnung / Gütesiegel -------------------- */
/* Grauer statt weißer Hintergrund – siehe Kommentar bei .stimmen-section zur
   abwechselnden Hintergrundfarbe der Sektionen. */
.auszeichnung-section { padding: 4rem 0; background: var(--a1-light); }
/* Nur diese eine Überschrift normal statt fett – gleiches Vorgehen wie bei
   "Webinare entdecken"/"Die nächsten Termine", nicht global auf .section-head h2. */
.auszeichnung-section .section-head h2 { font-weight: 400; }
/* Textgröße zentral in der .hero-below .intro-Sammelregel weiter oben geregelt
   (Desktop 1.5rem, ab 1024px 1.25rem) – hier bewusst nicht erneut gesetzt,
   sonst gewinnt diese spätere, unbedingte Regel gegen die frühere Media-Query-Regel
   (Kaskadenfalle, siehe PROJECT_A1Sa.md Abschnitt 7). */
.auszeichnung-text { color: var(--a1-dark-2); margin: 0; }
/* Spalte 2 bewusst nicht fix (z. B. 200px), sondern per minmax gedeckelt: die Bildhöhe
   soll sich nach der Höhe der Textspalte richten, nicht umgekehrt. Grid stretcht
   .auszeichnung-bild standardmäßig (align-items:stretch) auf die per Textinhalt
   bestimmte Zeilenhöhe; das <img> übernimmt diese Höhe (height:100%) und errechnet
   seine Breite selbst über aspect-ratio (bleibt quadratisch). minmax(0,220px) verhindert,
   dass die Spalte durch die HTML-Breiten-/Höhenangabe des <img> (400×400, nur Fallback
   vor dem Laden) unnötig aufgebläht wird. */
/* Breiten-Deckel + Zentrierung (Text- und Bildspalte zusammen): siehe
   .content-cap-Sammelregel am Ende des Abschnitts "Kurskategorien" weiter
   oben. */
.auszeichnung-grid {
  display: grid; grid-template-columns: 1fr minmax(0, 220px); align-items: stretch; gap: 2.5rem;
}
.auszeichnung-bild { display: block; text-align: right; }
.auszeichnung-bild img { display: inline-block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.auszeichnung-bild:hover img, .auszeichnung-bild:focus-visible img { opacity: 0.85; }
@media (max-width: 767px) {
  /* Ohne Grid-Zeile keine sinnvolle "Höhe der Textspalte" mehr – hier stattdessen
     feste, mobil angemessene Breite, Bild bleibt über die Bild-Attribute/aspect-ratio
     quadratisch. Bild folgt im Quellcode bereits nach dem Text
     (.auszeichnung-content zuerst im Markup), steht bei einer Spalte automatisch
     unterhalb, ohne zusätzliche order-Regel. */
  .auszeichnung-grid { grid-template-columns: 1fr; }
  .auszeichnung-bild { text-align: center; margin-top: 1.5rem; }
  .auszeichnung-bild img { height: auto; width: 160px; max-width: 160px; }
}

/* -------------------- Veranstalter: Kursformate (Textlinks im Fließtext, kein eigener Block) -------------------- */
.formate-liste {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.formate-liste a {
  display: inline-block;
  font-family: var(--a1-font-sans); font-weight: 400;
  color: var(--a1-red-4); text-decoration: none;
}
.formate-liste a::after { content: "\2192"; margin-left: 0.5rem; font-weight: 700; }
.formate-liste a:hover, .formate-liste a:focus-visible { color: var(--a1-red-3); }
.formate-liste a:hover .formate-liste-text, .formate-liste a:focus-visible .formate-liste-text { text-decoration: underline; }

/* -------------------- Veranstalter-Infoseiten (stt-va/pr-va/gw-va): Button + weitere Formate -------------------- */
.info-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; align-items: start; }
.info-cta-action .btn { white-space: nowrap; }
/* Kurzer Button-Text ab der Breite, ab der "Rahmenbedingungen und Ablauf" (389px, gemessen)
   nicht mehr ohne Umbruch in die .wrap-Innenbreite passt (Viewport minus 2x24px Seitenabstand
   muss mind. 389px betragen, also ab 437px aufwärts). 480px als runder Sicherheitswert gewählt. */
.info-cta-action .btn-text-short { display: none; }
@media (max-width: 480px) {
  .info-cta-action .btn-text-full { display: none; }
  .info-cta-action .btn-text-short { display: inline; }
}
.info-cta-links .formate-liste { margin-bottom: 0; }
@media (max-width: 767px) {
  .info-cta { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* -------------------- Veranstalter-Detailseiten (…/org/): Rahmenbedingungen & Ablauf -------------------- */

.intro a, .checkliste a, .auszeichnung-text a { color: var(--a1-red-4); font-weight: 400; text-decoration: underline; }
.intro a:hover, .intro a:focus-visible, .checkliste a:hover, .checkliste a:focus-visible, .auszeichnung-text a:hover, .auszeichnung-text a:focus-visible { color: var(--a1-red-3); }

/* Vollbreite-Bänder je Abschnitt (abwechselnd Weiß/Grau, wie auf der Referenzseite) –
   eigene .wrap-Innenbox pro Section, analog zu .vor-ort-section/.kategorien-section. */
.org-section { padding: 3rem 0; }
.org-section-grey { background: var(--a1-light); }

/* Überschriften-Format selbst steht bewusst VOR den Media-Queries (siehe dort bei
   .hero-below h1) – eine spätere unbedingte Regel an dieser Stelle würde die
   Media-Query-Verkleinerung sonst überschreiben (Kaskadenfalle, siehe PROJECT_A1Sa.md
   Abschnitt 7 "Media-Query-Regel vor späterer unbedingter Regel"). */

.back-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--a1-red-4); font-weight: 600; text-decoration: none;
}
.back-link::before { content: "\2039"; font-weight: 700; font-size: 1.6em; line-height: 1; }
.back-link-text { text-decoration: underline; text-underline-offset: 2px; }
.back-link:hover, .back-link:focus-visible { color: var(--a1-red-3); }

/* Org-Seiten (Veranstalter-Checkliste): Zurück-Link und KI-Hinweis auf
   gleicher Höhe nebeneinander, direkt unter dem Hero-Bild. Die Zeile selbst
   bleibt bewusst OHNE max-width/Zentrierung, volle Breite mit nur
   Seiten-Padding (wie das ursprüngliche alleinstehende .ki-hinweis an allen
   anderen Stellen im Projekt) – der KI-Hinweis soll auf breiten Bildschirmen
   an der echten Seitenkante stehen, NICHT an der schmaleren, zentrierten
   --container-Spalte des folgenden .wrap. Der Link dagegen soll bündig mit
   der Überschrift/dem Fließtext im .wrap sein – dafür bekommt NUR er einen
   berechneten linken Zusatzabstand (Differenz zwischen Seiten-Padding und
   dem tatsächlichen, breitenabhängigen Wrap-Außenabstand), max() verhindert
   einen negativen Wert unterhalb von --container. Der Abstand zur
   Überschrift kommt weiterhin über das bestehende .org-section-Padding
   (3rem), kein eigenes margin-bottom nötig. flex-wrap: wrap-reverse statt
   wrap: bei Platzmangel soll laut Vorgabe der KI-Hinweis oben stehen, der
   Link darunter – bei normalem wrap würde stattdessen der Link (erstes
   DOM-Element) oben landen. .ki-hinweis behält seine generische
   Text-Formatierung (Bildunterschrift an anderen Stellen im Projekt),
   eigenes Margin/Padding hier auf 0, margin-left:auto schiebt es an den
   rechten Rand der Zeile (funktioniert auch gestapelt auf Mobil, anders als
   justify-content:space-between mit nur einem Element pro Zeile). */
.org-back-ki-row {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0 1.5rem;
  margin: 0.5rem 0 0;
}
.org-back-ki-row .back-link {
  margin-left: max(0px, calc((100vw - var(--container)) / 2 - 1.5rem));
}
.org-back-ki-row .ki-hinweis { margin: 0 0 0 auto; padding: 0; }

/* Akkordeon: geschlossen per Voreinstellung (siehe org-page.js), Klick blendet .accordion-panel
   über classList um (nie über element.style.display, siehe PROJECT.md Abschnitt 12). Rahmen liegt
   auf dem gesamten .accordion-Container, damit der aufgeklappte Inhalt sichtbar INNERHALB der
   Box bleibt (nicht nur der Titel). Der geöffnete Inhalt besteht aus Sprunglinks zu den
   Abschnitten weiter unten (.formate-liste, gleiche Klasse wie auf /veranstalter/ und den
   -va-Seiten), NICHT aus eigenen Inhalten. */
.accordion { margin: 2rem 0; border: 1px solid var(--a1-red-4); background: var(--a1-light); }
.accordion-toggle {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  background: none; border: none; padding: 1.25rem 1.5rem;
  font-family: var(--a1-font-serif); font-weight: 700; font-size: 1.5rem; 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 1.5rem 1.5rem; }
.accordion-panel.is-open { display: block; }
.accordion-panel .formate-liste { margin-bottom: 0; }

/* Chevron-Checkliste, wie auf a1seniorenakademie.at verwendet. Der graue Hintergrund kommt bei
   Bedarf von der umgebenden .org-section-grey (Vollbreite), nicht von der Liste selbst. */
.checkliste { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.checkliste li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; color: var(--a1-dark-2); }
.checkliste li:last-child { margin-bottom: 0; }
.checkliste li::before { content: "\203A"; position: absolute; left: 0; color: var(--a1-red-4); font-weight: 700; }

.note-box { background: var(--a1-light); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.note-box p { margin: 0; color: var(--a1-dark-2); }
/* Variante für note-box auf grauem Abschnittshintergrund (z. B. #interesse mit org-section-grey) – Kasten dann weiß statt grau, sonst kein Kontrast. */
.note-box-on-grey { background: var(--a1-white); }
/* Kleinerer, unauffälligerer Hinweistext (z. B. Reader-Empfehlung unter Downloads) – bewusst kleiner als .intro, damit er nicht mit dem Wichtigeren (Downloads-Links) konkurriert. */
.text-hinweis { font-size: 1.05rem; color: var(--a1-dark-2); }

/* Kursplan-Karussell: Filmstreifen-Prinzip – .plan-carousel-slides ist das Sichtfenster
   (overflow: hidden), .plan-carousel-strip reiht alle Bilder nebeneinander und wird per
   transform verschoben (siehe org-page.js) – dadurch slidet das alte Bild sichtbar zur einen
   Seite raus, während das neue von der anderen Seite reinkommt (statt hartem Umschalten). Bild
   auf 600px begrenzt (Desktop), Pfeile links/rechts vertikal zentriert am Bild (wie auf
   a1seniorenakademie.at), Punkte-Navigation als eigene Zeile darunter. Auf Tablet/Mobil
   zusätzlich per Wischen bedienbar (Touch-Events). */
.plan-carousel { margin: 1.5rem 0; }
.plan-carousel-track { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.plan-carousel-slides { position: relative; width: 100%; max-width: 600px; overflow: hidden; touch-action: pan-y; }
.plan-carousel-strip { display: flex; transition: transform 0.4s ease; }
.plan-carousel-slide { flex: 0 0 100%; width: 100%; }
.plan-carousel-slide img { width: 100%; height: auto; display: block; border: 1px solid var(--a1-gray); }
.plan-carousel-btn {
  background: none; border: none; color: var(--a1-red-4); font-size: 3rem; line-height: 1;
  cursor: pointer; padding: 0.25rem 0.5rem; flex-shrink: 0;
}
.plan-carousel-btn:hover, .plan-carousel-btn:focus-visible { color: var(--a1-red-3); }
.plan-carousel-dots { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.plan-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--a1-gray); border: none; padding: 0; cursor: pointer; }
.plan-carousel-dot.is-active { background: var(--a1-red-4); }
@media (max-width: 767px) {
  .plan-carousel-btn { font-size: 2.25rem; }
}

/* -------------------- Platzhalterseiten (künftige Bereiche, noch nicht gebaut) -------------------- */
.platzhalter-seite {
  min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; text-align: center; padding: 2rem;
}
.platzhalter-seite p { font-size: 1.4rem; margin: 0; }

/* -------------------- Fehlerseiten der Formular-Endpunkte --------------------
   404-submit.php, feedback/feedback-submit.php (Abbruch-/Limit-Seiten ohne JS).
   Ersetzt frühere style="…"-Attribute, die von der CSP (style-src 'self') blockiert wurden –
   die Seiten erschienen dadurch ohne Abstand. Nur oben/unten, damit das seitliche
   Padding von .wrap erhalten bleibt. Zwei Klassen im Selektor: schlägt .wrap unabhängig
   von der Position im Stylesheet. */
.wrap.fehlerseite { padding-top: 3rem; padding-bottom: 3rem; }
.fehlerseite h1 { font-weight: 400; }

/* -------------------- Responsive -------------------- */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  nav.main-nav { order: 3; width: 100%; justify-content: space-between; }
}