/*
Theme Name:  GfP Theme
Theme URI:   https://gfp.de
Description: GfP – Gesellschaft für Personalentwicklung. Superheroes, wie wir.
Version:     1.0.0
Author:      GfP
Text Domain: gfp
*/

/* ─── Design-System: CSS-Variablen ──────────────────────────────────────────── */

:root {
  /* Farben */
  --lime:         #CAD55A;
  --green:        #6B9C2F;
  --green-dark:   #2a4a10;
  --blue:         #0073BC;
  --sky:          #50C1E0;
  --teal:         #23B0A5;
  --orange:       #F18712;
  --yellow:       #FFCC00;
  --purple:       #9E4493;
  --black:        #111111;
  --white:        #ffffff;

  /* Fachbereich-Farben (werden auch als data-farbe-Wert genutzt) */
  --farbe-blue:   #0073BC;
  --farbe-teal:   #23B0A5;
  --farbe-orange: #F18712;
  --farbe-purple: #9E4493;
  --farbe-sky:    #50C1E0;

  /* Typografie */
  --font-headline: 'League Gothic', 'Arial Narrow', sans-serif;
  --font-body:     'Host Grotesk', system-ui, sans-serif;

  /* Type Scale — Perfect Fourth (×1.333), Basis 17px
     WCAG 1.4.4: rem-Werte sind user-skalierbar (200% ohne Inhaltsverlust)
     ──────────────────────────────────────────────────────────────────────
     --fs-display  Hero / Statistiken         85px – 221px
     --fs-h1       Section-Headlines          43px –  94px
     --fs-h2       Karten- / Komponent-Heads  26px –  43px
     --fs-h3       Sub-Headlines              ~23px (fest)
     --fs-label    League Gothic Minimum      ~20px (fest)  NUR font-headline
     --fs-body-lg  Lead- / Intro-Text         ~19px (fest)
     --fs-body     Fließtext                  17px  (Basis)
     --fs-small    Sekundärtext               ~15px (fest)  WCAG-Minimum für Lesetext
     --fs-xs       Dekor-Labels               ~14px (fest)  NUR Host Grotesk + uppercase
     ────────────────────────────────────────────────────────────────────── */
  --fs-display: clamp(5rem,  10vw, 13rem);
  --fs-h1:      clamp(2.5rem, 5.5vw, 5.5rem);
  --fs-h2:      clamp(1.5rem, 3vw,   2.5rem);
  --fs-h3:      1.33rem;
  --fs-label:   calc(1.2rem + 3px);
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.825rem;
  --fs-infocard-wert:  15px;   /* Fallback, wird von .gfp_kurse_bind_textformate() aus Lay-Format "InfocardWert" überschrieben */
  --fs-infocard-notiz: 13px;   /* Fallback, wird von .gfp_kurse_bind_textformate() aus Lay-Format "InfocardNotiz" überschrieben */

  /* Spacing */
  --max-width: 1600px;       /* Content-Schiene — gilt global (Startseite + Unterseiten) */
  --section-px: 2%;          /* Randabstand links/rechts — passend zu Lays Gridder-Frame-Margin (2%) */
}

/* ─── Reset & Basis ──────────────────────────────────────────────────────────── */

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

/* Margin/Padding-Reset — mit einer Ausnahme: Lay setzt das Icon seiner Buttons
   als ::before/::after und gibt ihm den in Lay Options → Buttons eingestellten
   Abstand zur Beschriftung als margin. Lays Regel (.laybuttonN::after) ist
   genauso spezifisch wie diese hier, unsere Datei lädt aber später — ohne die
   :not()-Ausnahme schluckt der Reset den Abstand, und der Pfeil klebt am Text
   (aufgefallen am 22.9.2026, als die Pfeile dazukamen). Nicht mit einem festen
   Wert „zurückgeben": der Abstand gehört dem User in Lay. */
.gfp-programm, .gfp-programm *,
.gfp-programm *:not(.laybutton1):not(.laybutton2):not(.laybutton3)::before,
.gfp-programm *:not(.laybutton1):not(.laybutton2):not(.laybutton3)::after { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
.gfp-programm { font-size: 17px; padding-top: 2rem; } /* Basis 17px auf den Kurs-Content beschränkt */

.gfp-programm {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body, 1.65);
  letter-spacing: var(--ls-body, 0);
  font-weight: var(--fw-body, 400);
  font-variation-settings: var(--fvs-body, normal);
  -webkit-font-smoothing: antialiased;
}

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

.gfp-programm a { color: inherit; text-decoration: none; }

/* ─── Typografie ─────────────────────────────────────────────────────────────── */

/* Jede Überschriften-Ebene vollständig aus ihrem Lay-Format (h1→H1, h2/h3→H2,
   h4→H3 — passend zur Größen-Zuordnung): Schriftart, Größe, Zeilenabstand,
   Sperrung, Schriftschnitt, Versalien, Kursiv. */
.gfp-programm h1 { font-family: var(--font-h1, var(--font-headline)); font-size: var(--fs-h1); line-height: var(--lh-h1, 1.0); letter-spacing: var(--ls-h1, 0.01em); font-weight: var(--fw-h1, 400); text-transform: var(--tt-h1, uppercase); font-style: var(--fsty-h1, normal); font-variation-settings: var(--fvs-h1, normal); }
.gfp-programm h2 { font-family: var(--font-h2, var(--font-headline)); font-size: var(--fs-h2); line-height: var(--lh-h2, 1.0); letter-spacing: var(--ls-h2, 0.01em); font-weight: var(--fw-h2, 400); text-transform: var(--tt-h2, uppercase); font-style: var(--fsty-h2, normal); font-variation-settings: var(--fvs-h2, normal); }
.gfp-programm h3 { font-family: var(--font-h2, var(--font-headline)); font-size: var(--fs-h2); line-height: var(--lh-h2, 1.0); letter-spacing: var(--ls-h2, 0.01em); font-weight: var(--fw-h2, 400); text-transform: var(--tt-h2, uppercase); font-style: var(--fsty-h2, normal); font-variation-settings: var(--fvs-h2, normal); }
.gfp-programm h4 { font-family: var(--font-h3, var(--font-headline)); font-size: var(--fs-h3); line-height: var(--lh-h3, 1.0); letter-spacing: var(--ls-h3, 0.01em); font-weight: var(--fw-h3, 400); text-transform: var(--tt-h3, uppercase); font-style: var(--fsty-h3, normal); font-variation-settings: var(--fvs-h3, normal); }
/* ── Type Scale Assignments ─────────────────────────────────────────────────────
   Alle Schriftgrößen zentral — in Komponenten nur noch echte Overrides.
   League Gothic (--font-headline) ausschließlich ab --fs-label (≥20px).        */

.hero-sub, .alfred-left h2,
.trainers-header h2, .manifest-top h2, .news-header h2,
.problem-headline, blockquote, .ft-brand-logo,
.kontakt-hero__title, .kontakt-form-heading,
.nav-mobile .nav-link                                                      { font-size: var(--fs-h1); }

.nav-logo, .kurs-card__title, .kurs-section__title, .kurs-block__title,
.trainer-item__initials, .rule-t, .alfred-badge-inner                     { font-family: var(--font-h2, var(--font-headline)); font-size: var(--fs-h2); line-height: var(--lh-h2, 1.0); letter-spacing: var(--ls-h2, 0.01em); font-weight: var(--fw-h2, 400); text-transform: var(--tt-h2, uppercase); font-style: var(--fsty-h2, normal); font-variation-settings: var(--fvs-h2, normal); }

.nav-link,
.trainer-name, .trainer-item__name                                        { font-size: var(--fs-h3); line-height: var(--lh-h3, 1.0); letter-spacing: var(--ls-h3, 0.01em); }

/* Untertitel im Kurs-Hero (der Auszug): eigenes Lay-Format „Subline"
   (--*-subline), damit er sich unabhängig von H3 einstellen lässt — User-Vorgabe
   2026-09-17. Fällt jede Eigenschaft einzeln auf die bisherigen H3-Werte zurück,
   falls das Format in Lay (noch) nicht existiert. */
.kurs-hero__sub { font-size: var(--fs-subline, var(--fs-h3)); line-height: var(--lh-subline, var(--lh-h3, 1.6)); letter-spacing: var(--ls-subline, var(--ls-h3, 0.01em)); font-family: var(--font-subline, var(--font-h3, var(--font-headline))); font-weight: var(--fw-subline, var(--fw-h3, 400)); text-transform: var(--tt-subline, none); font-style: var(--fsty-subline, var(--fsty-h3, normal)); font-variation-settings: var(--fvs-subline, var(--fvs-h3, normal)); }
.trainer-name, .trainer-item__name                                        { font-family: var(--font-h3, var(--font-headline)); font-weight: var(--fw-h3, 400); font-style: var(--fsty-h3, normal); font-variation-settings: var(--fvs-h3, normal); }

/* Fachbereich-Filter-Buttons: eigenes Lay-Format „FilterBtn" (--*-filter),
   damit ihre Größe unabhängig von „Label" einstellbar ist. Fallback-Kette auf
   Label, falls das Format mal fehlt. */
.kurs-filter__btn { font-size: var(--fs-filter, var(--fs-label)); line-height: var(--lh-filter, var(--lh-label, 1.0)); letter-spacing: var(--ls-filter, var(--ls-label, 0.08em)); font-family: var(--font-filter, var(--font-label, var(--font-headline))); font-weight: var(--fw-filter, var(--fw-label, 400)); text-transform: var(--tt-filter, var(--tt-label, uppercase)); font-style: var(--fsty-filter, var(--fsty-label, normal)); font-variation-settings: var(--fvs-filter, var(--fvs-label, normal)); }

/* League Gothic Minimum — alle font-headline-Elemente ≥ --fs-label (~20px) */
.nav-cta, .hero-eyebrow, .kurse-hero__label,
.kurs-hero__badge, .kurs-infocard__label,
.kurs-infocard__title, .trainer-bio strong, .news-card h3,
.akc-title, .ih-caption, .news-header a, .skip-link,
.btn-dark, .btn-lime, .btn-outline, .btn-sky, .btn-white, .kurs-cta-btn,
.marquee-item, .marquee-label, .trainer-tag,
.stats-label, .news-card-tag, .ft-col h4, .ft-brand-claim, .ft-bottom-claim,
.alfred-intro-right, .chat-av, .chat-topbar-meta, .tag-label,
.chat-name, .alfred-step-dot, .alfred-step-label strong, .kontakt-submit,
.kontakt-detail-label, .kontakt-field label, .fb-card-tag                 { font-size: var(--fs-label); line-height: var(--lh-label, 1.0); letter-spacing: var(--ls-label, 0.08em); font-family: var(--font-label, var(--font-headline)); font-weight: var(--fw-label, 400); text-transform: var(--tt-label, uppercase); font-style: var(--fsty-label, normal); font-variation-settings: var(--fvs-label, normal); }

/* Lead-Text der Kursübersicht. GRÖSSE aus dem Format „Subline", alles andere
   (Schriftart, Zeilenabstand, Sperrung, Schnitt) weiter aus „BodyLg":
   Der Text ist das Gegenstück zur Kurzbeschreibung im Kurs-Hero
   (.kurs-hero__sub, s. o.) und soll genauso groß sein — auch wenn der User die
   Größe später in Lay ändert (User-Vorgabe 22.9.2026). Nur die Größe, weil
   Subline eine Headline-Schrift mitbringen kann und der Lead hier Fließtext
   bleibt. Fehlt das Format in Lay, greift wie bisher BodyLg. */
.kurse-hero__sub                                                           { font-size: var(--fs-subline, var(--fs-body-lg)); line-height: var(--lh-body-lg, 1.5); letter-spacing: var(--ls-body-lg, 0); font-family: var(--font-body-lg, var(--font-body)); font-weight: var(--fw-body-lg, 400); font-style: var(--fsty-body-lg, normal); font-variation-settings: var(--fvs-body-lg, normal); }

.kurs-card__desc, .kurs-hero__breadcrumb,
.kurs-sidebar__empty, .kurs-back__link, .termin-item__datum,
.trainer-item__role, .trainer-item__bio, .trainer-bio, .trainer-role,
.alfred-intro-text p, .alfred-step-label span, .chat-status,
.creset, .msg .bbl, .akc-desc,
.trainers-header p, .stat-d, .testi-author, .rule-b,
.news-card p, .ft-brand-p, .ft-col a, .site-footer                       { font-size: var(--fs-small); line-height: var(--lh-small, 1.5); letter-spacing: var(--ls-small, 0); font-family: var(--font-small, var(--font-body)); font-weight: var(--fw-small, 400); font-style: var(--fsty-small, normal); font-variation-settings: var(--fvs-small, normal); }

.nav-logo .claim, .kurs-card__format, .kurs-hero__format,
.kurs-card__termin-text, .kurs-sidebar__fallback,
.termin-item__ort, .termin-item__zeit, .termin-item__ausgebucht-label,
.msg .av, .akc-fb, .marquee-item .sep, .fsoc, .ft-bottom p               { font-size: var(--fs-xs); line-height: var(--lh-xs, 1.4); letter-spacing: var(--ls-xs, 0.02em); font-family: var(--font-xs, var(--font-body)); font-weight: var(--fw-xs, 400); text-transform: var(--tt-xs, uppercase); font-style: var(--fsty-xs, normal); font-variation-settings: var(--fvs-xs, normal); }

.gfp-programm p  { max-width: 68ch; }                          /* Optimale Zeilenlänge: 60–75 Zeichen */

/* ─── Utilities ─────────────────────────────────────────────────────────────── */

.gfp-programm .container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.gfp-programm .text-lime   { color: var(--lime); }
.gfp-programm .text-muted  { color: rgba(255,255,255,0.5); }
.gfp-programm .text-dimmed { color: rgba(255,255,255,0.7); }

.gfp-programm .uppercase   { text-transform: uppercase; }
.gfp-programm .tracking-wide { letter-spacing: 0.1em; }

/* ─── Navigation ─────────────────────────────────────────────────────────────── */

.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(17,17,17,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    height: 64px;
    display: flex; align-items: center;
    padding: 0 var(--section-px);
}

/* Logo */

/* Desktop-Links */

/* CTA-Button */

/* Burger-Button (mobil) */

/* Mobile-Overlay */
.nav-mobile.is-open { display: flex; }

/* ─── Kurs-Übersicht ─────────────────────────────────────────────────────────── */

.kurse-hero {
  padding: 7rem var(--section-px) 4rem;
}
.kurse-hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
}

.kurse-hero__label {
  font-family: var(--font-label, var(--font-headline));
  color: var(--lime);
  text-transform: var(--tt-label, uppercase);
  letter-spacing: var(--ls-label, 0.2em);
  margin-bottom: 0.75rem;
}

.kurse-hero__title {
  margin-bottom: 1.5rem;
}

.kurse-hero__sub {
  color: rgba(255,255,255,0.6);
  max-width: 42ch;
}

/* Filter-Leiste */
.kurs-filter {
  padding: 0 var(--section-px) 3rem;
  max-width: calc(var(--max-width) + 2 * var(--section-px));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kurs-filter__btn {
  padding: 8px 18px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: rgba(255,255,255,0.6);
  /* Schrift/Versalien/Sperrung kommen aus dem Format „FilterBtn" (Regel oben) */
  cursor: pointer;
  transition: all 0.2s;
}

.kurs-filter__btn:hover {
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}

.kurs-filter__btn.is-active {
  color: var(--white);
  border-color: transparent;
}

/* Farbpunkt je Fachbereich — der Filter ist zugleich die Legende der
   Kachelrahmen. Im aktiven Knopf (Fläche in der Fachbereichsfarbe) weiß. */
.kurs-filter__punkt {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--fb-farbe, currentColor);
  vertical-align: 0.05em;
}

.kurs-filter__btn.is-active .kurs-filter__punkt {
  background: var(--white);
}

/* ── Mitlaufende Filterleiste ──
   Gesetzt von assets/js/kurs-filter.js, sobald man am Filter vorbeiscrollt;
   `top` (= Unterkante von Lays Menü) setzt das Skript inline. Kompakt: eine
   Zeile, kleinere Knöpfe, ohne Kursanzahl. Passt die Zeile nicht in die Breite
   (Handy), wird sie seitlich wischbar statt umzubrechen — sonst deckte die
   Leiste ein Drittel des Bildschirms zu. Der Ausrichtungsabstand links folgt
   der Content-Schiene der Kacheln darunter. */
.kurs-filter.is-mitlaufend {
  position: fixed;
  left: 0;
  right: 0;
  /* Unter Lays Menü (Seitentitel z-index 20): fährt das Menü wieder ein,
     liegt es über der Leiste, während diese nach unten gleitet. */
  z-index: 19;
  /* Gleitet mit, wenn Lay das Menü weg- bzw. zurückschiebt. */
  transition: top 0.3s ease;
  max-width: none;
  margin: 0;
  padding: 0.6rem max(var(--section-px), calc((100vw - var(--max-width)) / 2));
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.kurs-filter.is-mitlaufend::-webkit-scrollbar { display: none; }

.kurs-filter.is-mitlaufend .kurs-filter__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 5px 12px 4px;
  font-size: calc(var(--fs-filter, var(--fs-label)) * 0.85);
  white-space: nowrap;
}

.kurs-filter.is-mitlaufend .kurs-filter__anzahl { display: none; }

/* Grid */
.kurse-grid {
  padding: 0 var(--section-px) 6rem;
  max-width: calc(var(--max-width) + 2 * var(--section-px));
  margin-inline: auto;
  display: grid;
  /* Max. 4 Spalten, auch auf sehr breiten Bildschirmen (reines
     minmax(300px,1fr) ließ auf breiten Screens 5 Spalten zu) — die
     Mindestbreite pro Spalte wird auf 1/4 der Containerbreite (abzüglich der
     3 Gaps dazwischen) hochgesetzt, sobald der Platz für eine 5. Spalte
     reichen würde; darunter greift weiterhin die 300px-Mindestbreite
     (Tablet/Mobil wie gehabt). Bewusst auto-fill (nicht auto-fit): Ein
     Fachbereich-Filter kann die sichtbare Kartenzahl jederzeit auf 1-2
     senken — die Karten sollen dann ihre reguläre Größe behalten statt auf
     die volle Breite gestreckt zu werden, rechts bleibt dann Leerraum. */
  grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 3 * 1.5rem) / 4)), 1fr));
  /* grid-auto-rows: 1fr — ALLE Kacheln des Rasters sind gleich hoch, nicht nur
     die einer Reihe: die höchste Kachel gibt die Höhe für das ganze Gitter vor.
     Bewusst so, obwohl das bei ungleich langen Texten Weißraum erzeugt (am
     2026-09-08 kurz auf `auto` umgestellt und auf User-Vorgabe zurückgedreht):
     unterschiedlich hohe Kacheln lesen sich als Rangfolge — ein längeres
     Programm sähe wichtiger aus als ein kürzeres. Wer hier ansetzt, um Höhe zu
     sparen, muss bei den Auszugstexten anfangen (die längste Kachel bestimmt
     alle anderen), nicht am Raster. */
  grid-auto-rows: 1fr;
  gap: 1.5rem;
}

/* Variante für den Fachbereich-Shortcode (inc/shortcode-fachbereich.php): der
   läuft innerhalb einer bereits von Lays Gridder eingefassten Zeile — deren
   eigener Randabstand kommt dort schon vom Gridder, der Rand/die Max-Breite
   der vollen Kursübersicht würde sonst ein zweites Mal einrücken (User-Vorgabe
   2026-08-19). Nur horizontal zurückgesetzt, der Abstand nach unten bleibt. */
.kurse-grid--embed {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  margin-inline: 0;
}

/* ─── Kurs-Karte ─────────────────────────────────────────────────────────────── */

.kurs-card {
  /* Rahmen: oben die Farben aller Fachbereiche (--fb-verlauf), links, rechts
     und unten der Hauptfachbereich (--fb-haupt) — beide gesetzt in
     templates/kurs-card.php. Ein border kann weder Verlauf noch zwei Farben mit
     runden Ecken, deshalb liegen drei Hintergrundebenen übereinander, sichtbar
     nur im transparenten Rand: die Kachelfläche (padding-box), darunter oben
     ein Band in Eckenhöhe mit den Fachbereichsfarben, ganz unten die
     Hauptfarbe. Das Band ist so hoch wie der Eckradius, damit beide oberen
     Rundungen zur Linie oben gehören und der Farbwechsel erst auf der geraden
     Seitenkante liegt. */
  --kachel-bg: var(--black);
  --kachel-radius: 1rem;
  background:
    linear-gradient(var(--kachel-bg), var(--kachel-bg)) padding-box,
    var(--fb-verlauf, var(--blue)) top / 100% var(--kachel-radius) no-repeat border-box,
    linear-gradient(var(--fb-haupt, var(--blue)), var(--fb-haupt, var(--blue))) border-box;
  border-radius: var(--kachel-radius);
  border: 2px solid transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: var(--white);
}

.kurs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

.kurs-card__stripe {
  height: 4px;
  width: 100%;
  background: var(--fb-verlauf, var(--blue));
}

.kurs-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  border-radius: 10px;
}

.kurs-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Fachbereichsnamen nur für Screenreader — sichtbar sind sie als Rahmenfarbe. */
.kurs-card__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.kurs-card__format {
  color: rgba(255,255,255,0.35);
  text-transform: var(--tt-xs, uppercase);
  letter-spacing: var(--ls-xs, 0.1em);
}

.kurs-card__title {
  font-family: var(--font-h2, var(--font-headline));
  text-transform: var(--tt-h2, uppercase);
  line-height: var(--lh-h2, 1.1);
  transition: color 0.2s;
}

.kurs-card:hover .kurs-card__title {
  color: var(--lime);
}

/* Kein flex: 1 auf dem Kurztext. Mit flex: 1 wuchs die Box auf die gesamte
   Resthöhe der Kachel (gemessen 2026-09-08: 195 px = 8,9 Zeilen für einen
   3-Zeilen-Text), wodurch die Zeilenbegrenzung ins Leere lief und bei langen
   Texten statt des „…" eine halb abgeschnittene vierte Zeile stehenblieb. Die
   Box behält jetzt ihre echte Höhe; den Restplatz nimmt die Terminzeile per
   margin-top: auto, die dadurch unten in der Kachel steht und über alle
   Kacheln einer Reihe fluchtet. */
.kurs-card__desc {
  color: rgba(255,255,255,0.65);
  line-height: var(--lh-small, 1.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kurs-card__termin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.kurs-card__termin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kurs-card__termin-text {
  color: rgba(255,255,255,0.5);
}

/* ─── Kurs-Detailseite ───────────────────────────────────────────────────────── */

.kurs-hero {
  position: relative;
  padding: 7rem var(--section-px) 4rem;
  border-bottom: 3px solid;
  overflow: hidden;
}

.kurs-hero__bg-glow {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
}

.kurs-hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  position: relative;
}

.kurs-hero__badge {
  display: inline-block;
  font-family: var(--font-label, var(--font-headline));
  text-transform: var(--tt-label, uppercase);
  letter-spacing: var(--ls-label, 0.15em);
  color: var(--white);
  margin-bottom: 1rem;
}

/* Trennpunkt zwischen mehreren Fachbereichen — neutral, damit keine der
   Fachbereichsfarben ihn „besitzt". */
.kurs-hero__badge-sep {
  margin: 0 0.5em;
  color: var(--black);
  opacity: 0.35;
}

/* Weitere Fachbereiche neben dem Hauptfachbereich: grau, im Ton der
   Format-Zeile darunter (.kurs-hero__format). */
.kurs-hero__badge-weitere {
  color: rgba(0, 0, 0, 0.4);
}

.kurs-hero__title {
  margin-bottom: 1.5rem;
}

.kurs-hero__sub {
  color: rgba(255,255,255,0.65);
  max-width: 56ch;
  margin-bottom: 2rem;
}

.kurs-hero__format {
  color: rgba(255,255,255,0.35);
  text-transform: var(--tt-xs, uppercase);
  letter-spacing: var(--ls-xs, 0.1em);
}

/* Hauptinhalt 2-Spalten */
/* ── Kurs-Layout: Inhalt + Sidebar ── */
.kurs-layout {
  max-width: calc(var(--max-width) + 2 * var(--section-px));
  margin-inline: auto;
  padding: 4rem var(--section-px) 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .kurs-layout {
    grid-template-columns: 3fr 1fr;
    gap: 3rem;
  }
}

.kurs-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 5rem;
}

/* ── Kurs-Infocard (Termine, Teilnehmer, Investition …) ── */
/* ── Infokästchen Sidebar ── */
.kurs-infocard {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 3px solid;   /* Farbe per inline-style gesetzt */
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

/* Titel im ersten Kästchen (Nächste Termine) */
.kurs-infocard__title {
  font-family: var(--font-label, var(--font-headline));
  letter-spacing: var(--ls-label, .08em);
  text-transform: var(--tt-label, uppercase);
  margin-bottom: 1rem;
}

/* Label = kleine Überschrift */

/* Inhalt */
.kurs-infocard__wert {
  color: rgba(255,255,255,0.85);
  line-height: var(--lh-infocard-wert, 1.6);
  letter-spacing: var(--ls-infocard-wert, 0);
  font-size: var(--fs-infocard-wert);
}

/* Fallback-Text — gleiche Optik wie __wert */
.kurs-infocard__empty {
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-infocard-wert);
  line-height: var(--lh-infocard-wert, 1.6);
  letter-spacing: var(--ls-infocard-wert, 0);
}

/* Terminnotiz unterhalb der Terminliste */
.kurs-infocard__notiz {
  color: rgba(255,255,255,0.85); /* gleiche Farbe wie __wert */
  font-size: var(--fs-infocard-notiz);
  line-height: var(--lh-infocard-notiz, 1.5);
  letter-spacing: var(--ls-infocard-notiz, 0);
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Keine Bullet-Points in den Kästchen */
.kurs-infocard ul { list-style: none; padding: 0; }

/* ── Tageszeiten im Kästchen „Dauer" ──
   Zwei Spalten: Bezeichnung („Tag 1") links, Uhrzeit rechts. Bei sehr schmaler
   Sidebar bricht die Uhrzeit in die zweite Zeile, statt die Spalte zu sprengen.
   Gepflegt im Kurs-Editor, Tab „Basisinfos" (Repeater unter dem Feld „Dauer"). */
/* <dl> als zweispaltiges Raster: dt (Tag) und dd (Uhrzeit) sind direkte Kinder
   und damit selbst Zellen — dadurch stehen die Uhrzeiten ALLER Zeilen in
   derselben Spalte, auch bei unterschiedlich langen Bezeichnungen („Freitag" /
   „Nachtreffen"). Das Template gibt die dd immer aus, auch leer; fehlte sie in
   einer Zeile, rutschte die nächste Bezeichnung in die Uhrzeit-Spalte. */
.kurs-dauer-tage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.75rem;
  align-items: baseline;
}

/* nowrap auf beiden Spalten: „Tag 1" brach in der schmalen Sidebar sonst
   zwischen „Tag" und „1" um (live gesehen, User-Rückmeldung 2026-08-25), und
   die Uhrzeit mitten in der Spanne. Lieber ein Hauch enger als so ein Umbruch. */
.kurs-dauer-tage__tag {
  color: rgba(255,255,255,0.5);
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-infocard-wert, 1.6);
  white-space: nowrap;
}

.kurs-dauer-tage__zeit {
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-infocard-wert);
  line-height: var(--lh-infocard-wert, 1.6);
  letter-spacing: var(--ls-infocard-wert, 0);
  white-space: nowrap;
}

/* Steht darüber die Freitext-Dauer („2 Tage"), bekommen die Zeiten eine
   Trennlinie — ohne Freitext sitzen sie direkt unter der Überschrift. */
.kurs-infocard__wert + .kurs-dauer-tage {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ══ „Auch maßgeschneidert" — der negative Kasten oben in der Sidebar ═════════
   Inhalt aus Kurse → Einstellungen (global), pro Kurs überschreibbar im Tab
   „Buchung" (gfp_kurs_massgeschneidert() in inc/helpers.php).

   Bewusst NICHT .kurs-infocard mit Farbumkehr: die Infokästchen sind hell,
   umrandet und alle gleich — dieser hier soll aus der Reihe fallen (User-Vorgabe
   2026-09-17: „einen der negativ ist … einfach sichtbarer"). Deshalb vollflächig
   farbig, kein Rahmen und ein größerer Text als in den Kästchen darunter.
   Zuerst war die Fläche schwarz; auf Wunsch des Users trägt sie jetzt die
   Fachbereichsfarbe (die Kästchen darunter zeigen davon nur die Oberkante).

   Steht nur EINMAL im Stylesheet und fehlt im späten hellen Block (Fallstrick 4):
   der Kasten ist von Haus aus dunkel und funktioniert auf beiden Hintergründen —
   dieselbe Ausnahme wie bei .kurs-zitat-kachel, nur andersherum.             */
.kurs-mg {
  /* --mg-bg / --mg-text setzt das Template je Kurs: Fläche = Fachbereichsfarbe,
     Schrift = die daraus berechnete Kontrastfarbe (gfp_farbe_kontrastfarbe()
     in helpers.php). Die Fallbacks greifen nur, wenn die Variablen fehlen —
     dann bleibt es beim ursprünglichen schwarzen Kasten. */
  background: var(--mg-bg, var(--black));
  color: var(--mg-text, var(--white));
  border-radius: 10px;
  padding: 1.5rem;
}

.kurs-mg__title {
  color: inherit;
  font-family: var(--font-label, var(--font-headline));
  font-size: var(--fs-label);
  line-height: var(--lh-label, 1.0);
  letter-spacing: var(--ls-label, .08em);
  text-transform: var(--tt-label, uppercase);
  font-weight: var(--fw-label, 400);
  font-variation-settings: var(--fvs-label, normal);
  margin-bottom: .75rem;
}

/* Dieselbe Schriftgröße wie in den Infokästchen darunter (User-Vorgabe
   17.9.2026) — der Kasten fällt schon durch die farbige Fläche auf, eine
   zweite Textgröße in derselben Spalte war zu viel. */
.kurs-mg__text {
  font-size: var(--fs-infocard-wert);
  line-height: var(--lh-infocard-wert, 1.6);
  letter-spacing: var(--ls-infocard-wert, 0);
  /* Keine abgeschwächte Schrift: auf einer farbigen Fläche kostet jede
     Transparenz Kontrast, und der ist je nach Fachbereich schon knapp. */
  color: inherit;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  text-wrap: pretty;
}

/* Weißer Button auf schwarzer Fläche (Farben kommen per --cta-farbe/--cta-text
   aus dem Template). Die übrige Optik liefert wie beim Haupt-CTA Lays
   laybutton2 — der Selektor .kurs-cta-btn steht am Element mit dran. */
.kurs-mg__btn {
  margin-top: 1.25rem;
}

/* ── Kurs-Sektion Titel (Inhalt links) ── */
.kurs-section__title {
  font-family: var(--font-h2, var(--font-headline));
  margin-bottom: 1.25rem;
}

/* ── Fließtext aus dem Editor ── */
.kurs-body {
  color: rgba(255,255,255,0.75);
  line-height: var(--lh-body, 1.75);
}

.kurs-body p  { margin-bottom: 1.25rem; }
.kurs-body li { margin-bottom: 0.6rem; }

/* Fett im Fließtext. font-weight allein reicht nicht: Der Absatz erbt aus Lays
   Format „Body" font-variation-settings mit festem "wght" (Variable Font, s.
   gfp_kurse_bind_textformate()), und das schlägt font-weight — <strong> sah
   dadurch aus wie normaler Text (gemeldet 14.10.2026). Die Achse muss mit. */
.gfp-programm .kurs-body strong,
.gfp-programm .kurs-body b {
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

/* ── Aufzählungen: Marker müssen INNERHALB der Textspalte bleiben ──
   Ursache des früheren Überlaufs: der Reset am Anfang dieser Datei
   (.gfp-programm *) nimmt ALLEN Elementen padding/margin — nachgesetzt war es
   danach nur für ul. Bei nummerierten Listen (ol) stand die Einrückung deshalb
   auf 0, und weil Marker per Voreinstellung "outside" sitzen, rutschten die
   Ziffern links aus dem Textbereich heraus (mobil bis über den Bildschirmrand).
   Marker bleiben bewusst "outside", damit mehrzeilige Punkte am Text ausgerichtet
   bleiben statt unter den Marker zu laufen — die Einrückung deckt sie ab.
   2.25rem statt 1.5rem: reicht auch für zweistellige Ziffern ("10.").         */
.kurs-body ul,
.kurs-body ol {
  margin-bottom: 1.25rem;
  padding-left: 2.25rem;
  list-style-position: outside;
}
.kurs-body ul { list-style-type: disc; }
.kurs-body ol { list-style-type: decimal; }

/* Verschachtelte Listen: eigene Einrückung, aber kein doppelter Abstand nach
   unten (der kommt vom umgebenden li). */
.kurs-body li > ul,
.kurs-body li > ol {
  margin-top: 0.6rem;
  margin-bottom: 0;
}

/* ── Lead-in: Einstiegsabsatz, größer als der Fließtext ──
   Im Editor über das Dropdown → „Lead-in" zu setzen (Klasse .lead, konfiguriert
   in inc/meta-kurs.php) — NICHT automatisch auf den ersten Absatz, weil nicht
   jede Kursbeschreibung mit einem Lead beginnt (User-Vorgabe 2026-09-17: „das
   müsste ich dann in WordPress auswählen können").

   Gebunden an Lays eigenes Format „BodyLg_2" (--*-body-lg-2), auf ausdrücklichen
   Wunsch ein EIGENES Format und nicht „BodyLg": Letzteres benutzt schon der
   Lead-Text der Kursübersicht (.kurse-hero__sub) — mit einem gemeinsamen Format
   ließe sich die Größe hier nicht ändern, ohne dort mitzuziehen. (Seit
   22.9.2026 holt sich jener Lead seine GRÖSSE aus „Subline"; Schriftart und
   Zeilenabstand kommen dort weiter aus BodyLg, die Trennung bleibt also nötig.)
   Fallback-Kette je Eigenschaft: BodyLg_2 → BodyLg → CSS-Default. Fehlt das
   Format in Lay noch, sieht der Lead-in also aus wie bisher, statt auf
   Fließtextgröße zurückzufallen. */
.kurs-body p.lead {
  font-size: var(--fs-body-lg-2, var(--fs-body-lg));
  line-height: var(--lh-body-lg-2, var(--lh-body-lg, 1.5));
  letter-spacing: var(--ls-body-lg-2, var(--ls-body-lg, 0));
  font-family: var(--font-body-lg-2, var(--font-body-lg, var(--font-body)));
  font-weight: var(--fw-body-lg-2, var(--fw-body-lg, 400));
  text-transform: var(--tt-body-lg-2, none);
  font-style: var(--fsty-body-lg-2, var(--fsty-body-lg, normal));
  font-variation-settings: var(--fvs-body-lg-2, var(--fvs-body-lg, normal));
  margin-bottom: 1.6rem;
}

/* Lange Wörter, URLs und aus Word kopierte Ketten sollen umbrechen statt die
   Spalte zu sprengen. */
.kurs-body { overflow-wrap: break-word; }

/* ── Silbentrennung nach deutschen Regeln ──
   Für die erklärenden Texte der Programme: Fließtext, Lernziele und die
   Infokästchen der Sidebar (die sind schmal, dort reißen Wörter wie
   „Voraussetzungen" die größten Löcher).
   BEWUSST NICHT für Überschriften und Kurstitel: die stehen in League Gothic
   in Versalien, eine Trennung mitten im Titel sieht dort schlecht aus — für
   Titel gibt es das Feld „Titel mit Trennhilfen" (| im Kurs-Editor).
   Voraussetzung ist lang="de" am Wrapper .gfp-programm (setzen die beiden
   Templates fest, s. PROJECT.md Fallstrick 10 — ohne das trennt der Browser
   nach seiner Standardsprache).
   hyphenate-limit-chars: erst ab 8 Zeichen trennen, mind. 4 davor und 3 danach.
   text-wrap: pretty glättet die letzten Zeilen; Browser ohne Unterstützung
   ignorieren beide Angaben. */
.kurs-body,
.lernziele__item,
.kurs-infocard__wert,
.kurs-infocard__notiz {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  text-wrap: pretty;
}

/* Leere Absätze, die der Editor um Shortcodes/Bilder herum erzeugt, würden als
   Lücke im Text erscheinen. */
.kurs-body p:empty { display: none; }

/* Ab Desktop-Breakpoint (zweispaltiges Layout, siehe .kurs-layout) den
   gesamten Fließtext-Container auf Lesebreite (68ch, Basis-Schriftgröße)
   begrenzen — nicht pro Element, weil "ch" von der jeweiligen Schriftgröße
   abhängt (Überschriften sind viel größer als der Fließtext und würden bei
   eigenem "68ch" trotzdem breiter werden). Über den Container erben Titel,
   Absätze und Listen dieselbe Boxbreite. Auf kleinen Screens (einspaltig)
   bleibt die volle Breite erhalten. */
@media (min-width: 1024px) {
  .kurs-body { max-width: 68ch; }
}

/* Einzelne Zeilenumbrüche (<br>, z. B. aus Word-Einfügungen mit nur einem Enter
   statt einer Leerzeile) bekommen ebenfalls sichtbaren Abstand, statt gedrängt
   direkt an der nächsten Zeile zu kleben. */
.kurs-body br { content: ""; display: block; margin-bottom: 0.9rem; }

/* Mehr Luft vor Überschriften im Fließtext */
.kurs-body h2,
.kurs-body h3,
.kurs-body h4 {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  color: var(--white);
}

/* ── Bilder im Fließtext: volle Spaltenbreite, eigenes Seitenverhältnis ──
   Bis 16.10.2026 wurden alle Bilder auf 1:1 zugeschnitten (object-fit: cover);
   dabei fiel weg, was sichtbar bleiben sollte (Kundenwunsch: Proportionen nie
   verändern). Danach galt kurz die beim Einfügen gewählte WordPress-Größe —
   ein als „Mittel" (300 px) eingefügtes Schaubild war dadurch winzig
   (gemeldet 16.10.2026). Jetzt: immer so breit wie die Textspalte, Höhe folgt.
   Damit das nicht unscharf hochskaliert, gibt template-loader.php den Bildern
   ein passendes `sizes` (Filter wp_calculate_image_sizes) — der Browser lädt
   dann aus dem srcset eine Datei in Spaltenbreite statt der kleinen.
   Die frühere Ausnahmeklasse `bild-original` steht noch in älteren Texten und
   ist wirkungslos — kein Aufräumen nötig. */
.kurs-body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
}

/* WordPress schreibt Bildunterschrift-Container mit inline width (= gewählte
   Bildgröße) — die würde das Bild wieder auf die kleine Breite einsperren. */
.kurs-body .wp-caption {
  width: auto !important;
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.kurs-body .wp-caption-text {
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.4);
  opacity: 0.7;
  margin-top: 0.5rem;
}

/* ══ Zitate im Fließtext ══════════════════════════════════════════════════════
   Gesetzt wird im Editor über die Dropdowns (keine Shortcodes):
     „Absatz → Zitat"                     → <blockquote>
     „Formate → Zitat: Name"              → <p class="zitat-name">
     „Formate → Zitat: Funktion / Firma"  → <p class="zitat-funktion">
     „Formate → Zitat mit farbiger Fläche"→ <blockquote class="zitat--karte">
   (Konfiguration der Dropdowns: inc/meta-kurs.php, Editor-Vorschau:
   assets/css/gfp-editor.css.)

   Die Akzentfarbe ist die Fachbereichsfarbe: templates/single-kurs.php setzt
   --farbe am Wrapper .kurs-page, hier wird sie nur gelesen. Ohne diese Regeln
   würde .gfp-programm blockquote greifen (alter Startseiten-Stil: League Gothic,
   Versalien, --fs-h1) — als Zitat im Fließtext ein riesiger Schriftblock.

   Name/Funktion sind bewusst so gebaut, dass sie INNERHALB des Zitats (Enter im
   blockquote) und direkt DANACH (eigener Absatz) gleich aussehen — im Editor
   entsteht je nach Klickreihenfolge beides.                                   */

.gfp-programm .kurs-body blockquote {
  --zitat-farbe: var(--farbe, var(--blue));
  font-family: var(--font-body-lg, var(--font-body));
  font-size: var(--fs-body-lg, 1.125rem);
  line-height: var(--lh-body-lg, 1.5);
  letter-spacing: var(--ls-body-lg, 0);
  font-weight: var(--fw-body-lg, 400);
  text-transform: none;
  font-style: normal;
  border-left: 3px solid var(--zitat-farbe);
  padding-left: 1.5rem;
  margin: 2.5rem 0;
  max-width: 60ch;
}

/* Öffnendes Anführungszeichen als grafisches Element (::before hat keinen
   DOM-Textinhalt, Screenreader lesen es nicht mit). */
.gfp-programm .kurs-body blockquote::before {
  content: "„";
  display: block;
  font-family: var(--font-h2, var(--font-headline));
  font-size: 3.25rem;
  line-height: 0.6;
  color: var(--zitat-farbe);
  margin-bottom: 0.35rem;
}

.gfp-programm .kurs-body blockquote p:last-child { margin-bottom: 0; }

/* Variante mit getönter Fläche. Basis ist ein neutrales Grau, damit auch
   Browser ohne color-mix() eine Fläche zeigen. */
.gfp-programm .kurs-body blockquote.zitat--karte {
  background: #f5f5f3;
  padding: 1.5rem 1.75rem;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .gfp-programm .kurs-body blockquote.zitat--karte {
    background: color-mix(in srgb, var(--zitat-farbe) 8%, transparent);
  }
}

/* Name unter dem Zitat — Label-Optik in der Fachbereichsfarbe, mit kurzer
   Trennlinie darüber. */
.gfp-programm .kurs-body .zitat-name {
  font-family: var(--font-label, var(--font-headline));
  font-size: var(--fs-label, 1.35rem);
  line-height: var(--lh-label, 1.1);
  letter-spacing: var(--ls-label, 0.04em);
  font-weight: var(--fw-label, 400);
  text-transform: var(--tt-label, uppercase);
  font-variation-settings: var(--fvs-label, normal);
  color: var(--farbe, var(--blue)) !important;   /* schlägt die .kurs-body-Textfarbe */
  border-top: 2px solid var(--farbe, var(--blue));
  padding-top: 0.6rem;
  margin-bottom: 0.15rem;
  max-width: 32ch;
}

/* Funktion/Firma — kleine Sekundärzeile */
.gfp-programm .kurs-body .zitat-funktion {
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.4);
  opacity: 0.7;
  margin-bottom: 2.5rem;
}

/* Steht der Name als eigener Absatz NACH dem Zitat, würde der Abstand des
   blockquote (2.5rem) ihn abhängen — hier wieder heranziehen. Bei negativem
   margin-top gilt: kollabierter Abstand = 2.5rem − 1.9rem. */
.gfp-programm .kurs-body blockquote + .zitat-name { margin-top: -1.9rem; }

/* Innerhalb des Zitats braucht der Name dagegen Luft nach oben. */
.gfp-programm .kurs-body blockquote .zitat-name { margin-top: 1.25rem; }

/* Ein Zitat ohne Namenszeile behält seinen eigenen Abstand nach unten. */
.gfp-programm .kurs-body .zitat-name:last-child,
.gfp-programm .kurs-body .zitat-funktion:last-child { margin-bottom: 0; }

/* ══ Zitat-Kacheln — letztes Element der Kursseite ════════════════════════
   Gepflegt im Kurs-Editor, Tab „💬 Zitate" (Zitat, Name, Funktion, Foto, Logo je
   Eintrag), ausgegeben von templates/single-kurs.php nach .kurs-blocks.

   Aufbau nach einer Vorlage des Users (2026-09-03): jede Kachel HOCHKANT —
   Firmenlogo oben, darunter das Zitat, unten Foto + Name + Funktion nebeneinander.
   Mehrere Kacheln stehen nebeneinander (Deckel: drei, danach neue Reihe).

   Damit ersetzt diese Fassung die frühere breite Zweispalter-Kachel (Zitat links,
   Person rechts), die ihr Raster mit .kurs-blocks teilte, um bündig unter den
   Infokästchen zu beginnen. Diese Kopplung gibt es nicht mehr: hochkante Kacheln
   füllen die Content-Schiene, eine Spaltengrenze zum Raster darüber existiert
   nicht. Wer .kurs-blocks ändert, muss hier also nichts nachziehen.

   Farbigkeit wie zuvor: heller und leiser als die News-Karten — die Kacheln sind
   der Nachsatz der Seite und sollen den Inhalt darüber nicht überstimmen
   (User-Vorgabe 2026-08-25). Sehr helle Fläche, 1 px Rand, kein Schatten, kein
   Fachbereichs-Ton. Farbiger Akzent bleibt allein der Name.

   Deshalb steht diese Komponente nur EINMAL hier und nicht zusätzlich im Block
   „KURS-SEITEN: WEISSER HINTERGRUND" (Fallstrick 4): sie ist von Haus aus hell und
   funktioniert auf hellem wie dunklem Grund.

   Wichtig: Die Kacheln liegen nicht in .kurs-body, deshalb greifen auf ihr
   blockquote die globalen Regeln `.gfp-programm blockquote` (League Gothic,
   Versalien, --fs-h1) und `blockquote { font-size: var(--fs-h1) }` aus dem
   Type-Scale-Block. Die Typografie wird darum unten vollständig gesetzt.      */

/* Breitenschiene wie .kurs-layout/.kurs-blocks. Oben viel Luft + Titel trennen den
   Block von den Lernzielen/Trainer·innen darüber ab (User-Vorgabe 2026-09-03). */
.kurs-zitat-bereich {
  max-width: calc(var(--max-width) + 2 * var(--section-px));
  margin-inline: auto;
  padding: 5rem var(--section-px) 4rem;
}

/* Überschrift des Zitat-Blocks — Optik wie „Was du mitnimmst" (League Gothic,
   Versalien), aber bewusst SCHWARZ statt Fachbereichsfarbe (User-Vorgabe
   2026-09-03). Etwas mehr Abstand nach unten als dort, weil darunter Kacheln
   statt Fließtext folgen. */
.kurs-zitat-titel {
  color: var(--black, #111);
  margin-bottom: 2rem;
}

/* Kacheln in einem Raster, das sich REIHENWEISE füllt und oben bündig ist
   (User-Vorgabe 2026-09-03: „die Reihe soll sich erst auffüllen, bevor es
   umspringt; sie sollen oben alle bündig sein"). Das ersetzt die kurzzeitige
   Masonry-Fassung (columns), die eine 3. Kachel unter die 1. gesetzt hat.

   Dieselbe auto-fill-Technik wie .kurse-grid / .gfp-news__grid: die Spaltenzahl
   ergibt sich aus dem Platz, gedeckelt auf DREI Spalten (auf breiten Schirmen wird
   die Mindestbreite auf 1/3 der Container­breite hochgesetzt, sobald eine 4. Spalte
   hineinpasste); darunter greift die 340-px-Mindestbreite (Tablet zwei, Handy
   eine). Das Raster füllt von Natur aus links→rechts, dann die nächste Reihe.
   Bewusst auto-fill (nicht auto-fit): eine einzelne Kachel wird NIE auf die volle
   Breite gestreckt, sondern bleibt in Spaltenbreite links (s. Fallstrick 6).

   align-items: start (statt grid-auto-rows: 1fr): die Kacheln stehen oben bündig
   in ihrer Inhaltshöhe — NICHT auf eine Einheitshöhe gestreckt. */
.kurs-zitat-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(340px, calc((100% - 2 * 1.5rem) / 3)), 1fr));
  align-items: start;
  gap: 1.5rem;
  --zitat-foto: 60px;
}

/* Unter 380 px (sehr schmale Handys) darf die Kachel schmaler als 340 px werden,
   sonst liefe das Raster seitlich aus dem Bildschirm. */
@media (max-width: 379px) {
  .kurs-zitat-liste { grid-template-columns: 1fr; }
}

.kurs-zitat-kachel {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 2.25rem 2rem 2rem;
  background: #fafaf9;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 1rem;
}

@media (max-width: 599px) {
  .kurs-zitat-kachel { padding: 1.75rem 1.5rem 1.5rem; }
}

/* Logo oben in der Kachel. Feste Box + object-fit statt max-height: ein SVG ohne
   intrinsische Maße wurde mit `max-height` + `height: auto` live als winziger
   Streifen gezeichnet. */
.gfp-programm .kurs-zitat-kachel__logo {
  width: 100%;
  max-width: 200px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.75rem;
}

.gfp-programm .kurs-zitat-kachel__zitat {
  /* Normale Body-Schrift (User-Vorgabe 2026-09-03: die große Lead-Schrift war zu
     groß). Dieselben Tokens wie der Fließtext auf der Kursseite — Host Grotesk,
     --fs-body (~17px), --lh-body. */
  font-family: var(--font-body);
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body, 1.65);
  letter-spacing: var(--ls-body, 0);
  font-weight: var(--fw-body, 400);
  text-transform: none;
  font-style: normal;
  color: rgba(0,0,0,0.75);
  margin: 0;
  hyphens: auto;
  text-wrap: pretty;
}

/* Kein Anführungszeichen in der Kachel (User-Vorgabe 17.9.2026). Bis dahin setzte
   ein ::before auf .kurs-zitat-kachel--ohne-logo ein großes „ als Auftakt, wenn
   kein Logo hinterlegt war; die Kachel beginnt jetzt in beiden Fällen direkt mit
   dem Zitattext, den margin-bottom des Logos gibt es weiterhin. Der Modifier
   --ohne-logo wird vom Template nicht mehr gesetzt. Das Anführungszeichen der
   Fließtext-Zitate (.kurs-body blockquote::before, Altbestand) bleibt davon
   unberührt. */

/* Person: rundes Foto links, Name und Funktion rechts daneben. Folgt dem Zitat
   mit festem Abstand (padding-top) — kein margin-top: auto mehr, weil die Kacheln
   in Inhaltshöhe stehen (Masonry) und es keine freie Resthöhe zu füllen gibt. */
.kurs-zitat-kachel__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
}

/* Rundes Foto im Format der Trainer·innen (.trainer-item__foto, 84 px, 1:1) —
   in mehrspaltigen Kacheln kleiner, sonst nimmt es neben dem Namen zu viel Raum. */
.gfp-programm .kurs-zitat-kachel__bild {
  width: var(--zitat-foto, 84px);
  flex: 0 0 var(--zitat-foto, 84px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/* min-width: 0, damit ein langer Firmenname umbricht statt die Flexbox zu weiten. */
.kurs-zitat-kachel__wer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.kurs-zitat-kachel__name {
  font-family: var(--font-label, var(--font-headline));
  font-size: var(--fs-label, 1.35rem);
  line-height: var(--lh-label, 1.1);
  letter-spacing: var(--ls-label, 0.04em);
  font-weight: var(--fw-label, 400);
  text-transform: var(--tt-label, uppercase);
  font-variation-settings: var(--fvs-label, normal);
  /* Farbe kommt per inline-style aus dem Fachbereich */
}

.kurs-zitat-kachel__funktion {
  font-size: var(--fs-small, 0.875rem);
  line-height: var(--lh-small, 1.4);
  color: rgba(0,0,0,0.55);
}

/* ── Lernziele + Trainer — volle Breite ── */
.kurs-blocks {
  max-width: calc(var(--max-width) + 2 * var(--section-px));
  margin-inline: auto;
  padding: 3rem var(--section-px) 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* Spaltenmaße bewusst IDENTISCH zu .kurs-layout (3fr 1fr, gap 3rem) und mit
   derselben max-width/padding: dadurch beginnt die rechte Spalte — die
   Trainer-Auflistung — exakt an der linken Kante der Infokästchen darüber
   („Termine & Ort", „Dauer", …). Vorher waren es zwei gleich breite Spalten
   ab 768px, wodurch die Trainer mitten unter dem Fließtext ansetzten. */
@media (min-width: 1024px) {
  .kurs-blocks {
    grid-template-columns: 3fr 1fr;
    gap: 3rem;
  }
  /* NICHT auf minmax(0, …) umstellen, so verlockend es aussieht: `1fr` heißt
     `minmax(auto, 1fr)`, die Trainer-Spalte wird also nie schmaler als ihr
     Inhalt — und ihr Inhalt kann nicht umbrechen, weil gfp_text_with_wbr() die
     Rollenzeile mit geschützten Leerzeichen verbindet (min-content ~341 px).
     Mit minmax(0, …) stünde die Spalte zwar sauber bündig unter den
     Infokästchen, die Rollenzeile ragte dafür sichtbar aus der Seite heraus
     (gemessen 2026-08-25). Solange die Rolle nicht umbrechen darf, steht die
     Trainer-Spalte unterhalb von ~1600 px etwas weiter links als die
     Infokästchen — siehe „Offene Punkte" in PROJECT.md. */
  /* Fest in der rechten Spalte — auch dann, wenn der Kurs keine Lernziele hat
     und die Trainer sonst als erstes Grid-Kind nach links rutschen würden. */
  .kurs-block--trainer { grid-column: 2; }

  /* Lernziele („Was du mitnimmst") auf dieselbe Lesebreite wie der Fließtext
     darüber begrenzen (.kurs-body: max-width 68ch, s. Zeile ~648). Ohne das
     lief die Aufzählung bis an die volle 3fr-Spaltenkante und endete sichtbar
     weiter rechts als der Text im Block darüber. Der Block erbt dieselbe
     Schriftgröße (17px) und -art (Host Grotesk) wie .kurs-body, deshalb fällt
     die rechte Kante exakt zusammen. Nur der Lernziele-Block — der Trainer-Block
     steht in der rechten Spalte (grid-column: 2) und bleibt unberührt. */
  .kurs-block:not(.kurs-block--trainer) { max-width: 68ch; }
}

.kurs-block__title {
  font-family: var(--font-headline);
  margin-bottom: 1.5rem;
}

/* Lernziele */
.lernziele { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }

.lernziele__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255,255,255,0.75);
}

.lernziele__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.45rem;
}

/* Trainer */
.trainer-list { display: flex; flex-direction: column; gap: 1.5rem; }

.trainer-item { display: flex; align-items: flex-start; gap: 1rem; }

/* Trainer·in verlinkt auf ihr Panel der Über-uns-Seite. <a> statt <div>, deshalb
   hier die Link-Grundoptik zurücksetzen — die Textfarben kommen aus den
   __name/__role-Regeln. */
a.trainer-item {
  text-decoration: none;
  color: inherit;
}

a.trainer-item--link .trainer-item__foto,
a.trainer-item--link .trainer-item__initials { transition: opacity .2s; }

a.trainer-item--link:hover .trainer-item__foto,
a.trainer-item--link:hover .trainer-item__initials { opacity: .8; }

a.trainer-item--link:hover .trainer-item__name { text-decoration: underline; }

a.trainer-item--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Einheitliches Bildformat 1:1 (Kreis, User-Vorgabe 2026-08-19): Fotos der
   Trainer·innen sind unterschiedlich beschnitten hochgeladen — feste Breite +
   aspect-ratio + object-fit sorgen dafür, dass alle gleich groß erscheinen.
   object-position oben, damit beim Zuschneiden der Kopf im Bild bleibt. Das
   Initialen-Kästchen direkt darunter nutzt dieselben Maße, damit Profile mit
   und ohne Foto in einer Liste identisch groß sind. Wird das Format geändert,
   BEIDE Regeln ändern.  */
.trainer-item__foto {
  width: 84px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}

.trainer-item__initials {
  width: 84px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #111;
  flex-shrink: 0;
}

.trainer-item__name {
  font-family: var(--font-h3, var(--font-headline));
}

.trainer-item__role {
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.5rem;
}

/* .kurs-sidebar → ersetzt durch .kurs-infocard (siehe oben) */

.termine-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }

.termin-item { display: flex; align-items: flex-start; gap: 0.75rem; }

.termin-item__datum {
  color: var(--white);
}

.termin-item__datum.is-ausgebucht {
  text-decoration: line-through;
  color: rgba(255,255,255,0.3);
}

.termin-item__ort {
  color: rgba(255,255,255,0.4);
}

.termin-item__zeit {
  color: rgba(255,255,255,0.55);
}

.termin-item__ausgebucht-label {
  color: rgba(255,255,255,0.3);
}

/* Kurzer Satz über dem CTA (Feld „Text über dem Button", Tab Buchung) */
.kurs-cta-intro {
  margin-top: 1.5rem;
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-infocard-notiz);
  line-height: var(--lh-infocard-notiz, 1.5);
  letter-spacing: var(--ls-infocard-notiz, 0);
}

/* Basis-Optik des CTA. Läuft Lay Theme, überschreibt gfp_kurse_cta_button_css()
   (inc/template-loader.php) Typografie, Rahmen, Radius und Padding mit denen von
   Lays Button-Stil 1; die Farben kommen in beiden Fällen aus --cta-farbe /
   --cta-text, die das Template je Fachbereich am Element setzt. */
/* Selektor MIT .gfp-programm: „.gfp-programm a { color: inherit }" weiter oben
   ist spezifischer als eine reine Klasse und hat die Schriftfarbe des Buttons
   überschrieben — auf schwarzem Grund wurde daraus weiß auf weiß. Live fällt das
   nicht auf, solange Lays laybutton2-CSS die Farbe mit !important nachschiebt
   (gfp_kurse_cta_button_css()); ohne Lay-Methode bleibt nur diese Regel. */
.gfp-programm .kurs-cta-btn {
  /* inline-FLEX, nicht inline-block: Lay hängt das Pfeil-Icon seiner Buttons als
     ::after an (Lay Options → Buttons → Button 2 → Icon) und schaltet den Button
     dafür selbst auf inline-flex + zentriert. Diese Regel ist spezifischer als
     Lays a.laybutton2 und würde sie überstimmen — Text und Pfeil säßen dann auf
     der Grundlinie statt mittig. Ohne Icon verhält sich inline-flex genau wie
     inline-block (die Buttons sind so breit wie ihr Inhalt). */
  display: inline-flex;
  align-items: center;
  text-align: left;
  /* Lays .laybutton2 bringt auch die Button-Ränder aus Lay Options mit; die
     Abstände hier bestimmt aber das Seitenlayout (margin-top unten). */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--cta-farbe, transparent);
  border-radius: 0;
  font-family: var(--font-label, var(--font-headline));
  text-transform: var(--tt-label, uppercase);
  letter-spacing: var(--ls-label, 0.08em);
  background-color: var(--cta-farbe, transparent);
  color: var(--cta-text, #fff);
  transition: opacity 0.2s;
  text-decoration: none;
  margin-top: 1rem;
}

.gfp-programm .kurs-cta-btn:hover { opacity: 0.88; }

/* Ohne Vortext behält der Button seinen bisherigen Abstand zur Terminliste. */
.kurs-infocard__notiz + .kurs-cta-btn,
.termine-list + .kurs-cta-btn,
.kurs-infocard__empty + .kurs-cta-btn { margin-top: 2rem; }

/* Back-Link */
.kurs-back {
  max-width: calc(var(--max-width) + 2 * var(--section-px));
  margin-inline: auto;
  padding: 0 var(--section-px) 4rem;
}

.kurs-back__link {
  color: rgba(255,255,255,0.35);
  transition: color 0.2s;
  text-decoration: none;
}

.kurs-back__link:hover { color: var(--white); }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════════
   HOMEPAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Grain-Overlay (subtile Textur auf der gesamten Seite) */

/* Scroll-fade Utility — startet kleiner mit abgerundeten Ecken, wächst beim Einblenden auf volle Breite */

/* Tag-Label */

/* Buttons */

/* ── 1. HERO ─────────────────────────────────────────────────────────────────── */
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes heroDrift {
  0%   { background-position: 70% 30%; }
  50%  { background-position: 52% 48%; }
  100% { background-position: 70% 30%; }
}
@keyframes heroPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}

/* ── 3. PROBLEM ──────────────────────────────────────────────────────────────── */
.hl.lime { background: var(--lime); color: var(--black); }
.hl.blue { background: var(--blue); color: #fff; }

/* ── 4. CLIENTS ──────────────────────────────────────────────────────────────── */
@keyframes clientsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 5. FACHBEREICHE ─────────────────────────────────────────────────────────── */
#fachbereiche { background: var(--black); padding: 0; }

/* ── 5b. BILDSTREIFEN ────────────────────────────────────────────────────────── */
@keyframes ihScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 6. TRAINER ──────────────────────────────────────────────────────────────── */

/* ── 7. STATS ────────────────────────────────────────────────────────────────── */

/* ── 8. CTA HERO ─────────────────────────────────────────────────────────────── */

/* ── 9. TESTIMONIAL ──────────────────────────────────────────────────────────── */
.gfp-programm blockquote { font-family: var(--font-headline); color: var(--black); line-height: 1.25; letter-spacing: .02em; margin-bottom: 28px; text-transform: uppercase; }

/* ── 10. MANIFEST ────────────────────────────────────────────────────────────── */

/* ── 11. NEWS ────────────────────────────────────────────────────────────────── */
#news { background: #f4f4f0; padding: 80px var(--section-px); }
.news-card { background: #f4f4f0; border: 1px solid rgba(0,0,0,.08); border-radius: 1rem; padding: 28px 24px; cursor: pointer; transition: background .2s, transform .25s; }
.news-card:hover { background: #ebebea; transform: translateY(-4px); }
.news-card:nth-child(1) .ncc { background: var(--lime); }
.news-card:nth-child(2) .ncc { background: var(--orange); }
.news-card:nth-child(3) .ncc { background: var(--blue); }
.news-card:nth-child(4) .ncc { background: var(--teal); }
.news-card h3 { font-family: var(--font-headline); letter-spacing: .04em; text-transform: uppercase; color: var(--black); line-height: 1.2; margin-bottom: 8px; }
.news-card p { color: rgba(0,0,0,.5); line-height: 1.55; }

/* ── 12. FOOTER ──────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════════
   WCAG 2.1 AA — ACCESSIBILITY OVERRIDES
   Mindest-Kontrastverhältnis: 4.5:1 (normaler Text) / 3:1 (großer Text ≥ 24px)
   Mindest-Schriftgröße: 0.875rem (14px) für Lesetext, 0.75rem (12px) für Labels
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Zeilenabstand (WCAG 1.4.12: ≥ 1.5× font-size für Fließtext) ────────────── */

.kurs-body,
.kurs-body p            { line-height: var(--lh-body, 1.7); }

.lernziele__item        { line-height: var(--lh-body, 1.65); }

/* ── Kontraste: Texte auf dunklem Hintergrund (#111) ───────────────────────── */
/* WCAG AA: normaler Text mind. 4.5:1 → rgba(255,255,255,0.5) ≈ 4.6:1 */
/* Für Lesetext empfehlen wir mind. rgba(255,255,255,0.75) ≈ 9:1 */

/* Primäre Lesetexte: hoher Kontrast */
.hero-body,
.alfred-left p,
.problem-body-text,
.kurs-body,
.kurs-body p,
.trainer-bio,
.kurs-hero__sub,
.manifest-top p         { color: rgba(255,255,255,0.85) !important; }

/* Sekundäre Lesetexte: guter Kontrast */
.fb-card-body,
.trainer-item__bio,
.lernziele__item,
.rule-b,
.stat-d,
.news-card p,
.kurs-card__desc,
.kurs-sidebar__empty    { color: rgba(255,255,255,0.78) !important; }

/* Meta/Rollen/Labels: akzeptabler Kontrast für kleinere Elemente */
.trainer-role,
.trainer-item__role,
.termin-item__ort,
.kurs-hero__format,
.kurs-card__format,
.chat-topbar-meta,
.ft-col a               { color: rgba(255,255,255,0.65) !important; }

/* Kursseiten-Sidebar + infocard empty */

.kurs-infocard__empty     { color: rgba(255,255,255,0.85) !important; }

/* Footer-Text */

/* ── Kontraste: Texte auf hellem Hintergrund (#f4f4f0) ─────────────────────── */
/* News-Sektion */
.news-card p            { color: rgba(0,0,0,0.65) !important; }

/* ── Kontraste: Texte auf grünem Hintergrund (--green-dark, --green) ────────── */

/* ── Navigation: Links gut lesbar ───────────────────────────────────────────── */

/* ── Bewegungsreduktion (WCAG 2.3.3) ───────────────────────────────────────── */

/* ── Fokus-Styles für Tastatur-Navigation (WCAG 2.4.7) ─────────────────────── */
.gfp-programm :focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.gfp-programm button:focus-visible,
.gfp-programm a:focus-visible,
.gfp-programm input:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* ── Mindest-Touch-Target 44×44px (WCAG 2.5.5) ─────────────────────────────── */
.kurs-filter__btn,
.nav-cta,
.btn-dark,
.btn-lime,
.btn-sky,
.btn-outline,
.btn-white,
.csend {
  min-height: 44px;
}

/* ── Skip-to-Content Link (WCAG 2.4.1) ─────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════════
   KURS-SEITEN: WEISSER HINTERGRUND
   .gfp-programm       → /kurse/{slug}/
   .gfp-programm → /kurse/
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Basis ── */
.gfp-programm,
.gfp-programm {
    background-color: #ffffff;
    color: var(--black);
}

/* ── Detailseite: Hero ── */
.gfp-programm .kurs-hero {
    background: #f5f5f3;
}

.gfp-programm .kurs-hero__breadcrumb {
    color: rgba(0,0,0,0.4) !important;
}

.gfp-programm .kurs-hero__breadcrumb a:hover {
    color: var(--black) !important;
}

.gfp-programm .kurs-hero__title {
    color: var(--black) !important;
}

/* Schwarz, nicht abgedunkeltes Grau (User-Vorgabe 2026-09-17): die Subline ist
   der zweite Satz der Seite und soll genauso fest stehen wie der Titel.
   -webkit-text-fill-color zusätzlich, weil Lays „Force Mouseover Styles" eine
   color-Regel auch mit !important schlagen kann (Fallstrick 15). */
.gfp-programm .kurs-hero__sub {
    color: var(--black) !important;
    -webkit-text-fill-color: var(--black) !important;
}

.gfp-programm .kurs-hero__format {
    color: rgba(0,0,0,0.4) !important;
}

/* ── Detailseite: Fließtext ── */
.gfp-programm .kurs-section__title {
    /* Farbe via inline-style (Fachbereichsfarbe) — bleibt */
}

.gfp-programm .kurs-body,
.gfp-programm .kurs-body p {
    color: rgba(0,0,0,0.78) !important;
}

.gfp-programm .kurs-body h2,
.gfp-programm .kurs-body h3,
.gfp-programm .kurs-body h4 {
    color: var(--black) !important;
}

/* ── Detailseite: Infocard (Sidebar) ── */
.gfp-programm .kurs-infocard {
    background: #f5f5f3;
    border-color: rgba(0,0,0,0.08);
}

.gfp-programm .kurs-infocard__label {
    color: rgba(0,0,0,0.45) !important;
}

.gfp-programm .kurs-infocard__wert {
    color: rgba(0,0,0,0.85) !important;
    font-size: var(--fs-infocard-wert);
}

.gfp-programm .kurs-infocard__notiz {
    color: rgba(0,0,0,0.85) !important;
    font-size: var(--fs-infocard-notiz);
}

.gfp-programm .kurs-infocard__empty {
    color: rgba(0,0,0,0.65) !important;
}

/* Tageszeiten im Kästchen „Dauer" */
.gfp-programm .kurs-dauer-tage__tag {
    color: rgba(0,0,0,0.45) !important;
}

.gfp-programm .kurs-dauer-tage__zeit {
    color: rgba(0,0,0,0.85) !important;
}

.gfp-programm .kurs-infocard__wert + .kurs-dauer-tage {
    border-top-color: rgba(0,0,0,0.1);
}


/* ── Detailseite: Termine ── */
.gfp-programm .termin-item__datum {
    color: var(--black) !important;
}

.gfp-programm .termin-item__datum.is-ausgebucht {
    color: rgba(0,0,0,0.3) !important;
}

.gfp-programm .termin-item__ort {
    color: rgba(0,0,0,0.45) !important;
}

.gfp-programm .termin-item__zeit {
    color: rgba(0,0,0,0.6) !important;
}

.gfp-programm .kurs-cta-intro {
    color: rgba(0,0,0,0.85) !important;
}

.gfp-programm .termin-item__ausgebucht-label {
    color: rgba(0,0,0,0.35) !important;
}

.gfp-programm .kurs-card__termin {
    border-top-color: rgba(0,0,0,0.08);
}

.gfp-programm .kurs-sidebar__empty {
    color: rgba(0,0,0,0.5) !important;
}

.gfp-programm .kurs-sidebar__fallback,
.gfp-programm .kurs-sidebar__fallback a {
    color: rgba(0,0,0,0.45) !important;
}

/* ── Detailseite: Lernziele + Trainer ── */
.gfp-programm .kurs-blocks {
    border-top-color: rgba(0,0,0,0.08);
}

.gfp-programm .lernziele__item {
    color: rgba(0,0,0,0.78) !important;
}

.gfp-programm .trainer-item__name {
    color: var(--black) !important;
}

.gfp-programm .trainer-item__role {
    color: rgba(0,0,0,0.45) !important;
}

.gfp-programm .trainer-item__bio {
    color: rgba(0,0,0,0.65) !important;
}

/* ── Detailseite: Back-Link ── */
.gfp-programm .kurs-back__link {
    color: rgba(0,0,0,0.4) !important;
}

.gfp-programm .kurs-back__link:hover {
    color: var(--black) !important;
}

/* ── Übersicht: Hero ── */
.gfp-programm .kurse-hero__label {
    /* Lime-Farbe bleibt */
}

.gfp-programm .kurse-hero__title {
    color: var(--black) !important;
}

.gfp-programm .kurse-hero__sub {
    color: rgba(0,0,0,0.55) !important;
}

/* ── Übersicht: Filter ── */
.gfp-programm .kurs-filter__btn {
    border-color: rgba(0,0,0,0.2);
    color: rgba(0,0,0,0.6);
    background: transparent;
}

.gfp-programm .kurs-filter__btn:hover {
    border-color: rgba(0,0,0,0.5);
    color: var(--black);
}

/* is-active: JS setzt inline background/color/borderColor mit Fachbereich-Farbe —
   kein !important hier, damit die JS-inline-styles gewinnen. */
.gfp-programm .kurs-filter__btn.is-active {
    color: var(--white);
}

/* ── Übersicht: Kurs-Karten ── */
.gfp-programm .kurs-card {
    --kachel-bg: #f5f5f3;
    background:
        linear-gradient(var(--kachel-bg), var(--kachel-bg)) padding-box,
        var(--fb-verlauf, var(--blue)) top / 100% var(--kachel-radius) no-repeat border-box,
        linear-gradient(var(--fb-haupt, var(--blue)), var(--fb-haupt, var(--blue))) border-box !important;
    color: var(--black) !important;
    /* Ruheschatten identisch zu den Team-Kacheln (gfp-team.css,
       .gfp-team-card) und den News-Karten (gfp-news.css) — User-Vorgabe:
       gleiche Kachel-Anmutung auf allen Seiten. Hier im hellen Block, weil
       dieser per Kaskade den frühen dunklen Regelsatz schlägt (Fallstrick 4);
       !important wie beim Hover-Schatten direkt darunter. */
    box-shadow: 0 2px 14px rgba(0, 0, 0, .09) !important;
}

.gfp-programm .kurs-card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}

.gfp-programm .kurs-card__title {
    color: var(--black) !important;
}

.gfp-programm .kurs-card:hover .kurs-card__title {
    /* Fachbereichsfarbe über inline-style oder CSS var — bleibt sichtbar */
    color: var(--black) !important;
}

.gfp-programm .kurs-card__format {
    color: rgba(0,0,0,0.4) !important;
}

.gfp-programm .kurs-card__desc {
    color: rgba(0,0,0,0.65) !important;
}

.gfp-programm .kurs-card__termin {
    border-top-color: rgba(0,0,0,0.1) !important;
}

.gfp-programm .kurs-card__termin-text {
    color: rgba(0,0,0,0.5) !important;
}

/* ── Letzte Instanz: -webkit-text-fill-color ──
   Auf der eigenen /kurse/-Seite (custom Template, kein Lay-Gridder-Inhalt)
   gewinnen die color-!important-Regeln oben klaglos. Sitzt die Karte aber via
   [gfp_kurse_fachbereich] in einer echten Lay-Gridder-Zeile, greift dort Lays
   „Force Mouseover Styles" (Link Style 1, Mouseover-Textfarbe Lime) — deren
   Regel kann eine ID enthalten und die Kinder per `*` einschließen, dann
   verliert jede Klassenregel, auch mit !important (identischer Befund wie bei
   der Team-Abschluss-Kachel, s. gfp-team.css + PROJECT.md Fallstrick 15).
   -webkit-text-fill-color bestimmt die Füllfarbe beim Zeichnen und schlägt
   damit color — Lay setzt diese Eigenschaft nirgends. Deckt exakt dieselben
   Farbwerte wie oben ab. */
.gfp-programm .kurs-card__title,
.gfp-programm .kurs-card:hover .kurs-card__title {
    -webkit-text-fill-color: var(--black) !important;
}

.gfp-programm .kurs-card__format {
    -webkit-text-fill-color: rgba(0,0,0,0.4) !important;
}

.gfp-programm .kurs-card__desc {
    -webkit-text-fill-color: rgba(0,0,0,0.65) !important;
}

.gfp-programm .kurs-card__termin-text {
    -webkit-text-fill-color: rgba(0,0,0,0.5) !important;
}

.gfp-programm .text-muted {
    color: rgba(0,0,0,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVITÄT — STARTSEITE
   Breakpoint: max-width 768px
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Hero ── */

    /* ── Problem ── */

    /* ── Clients ── */

    /* ── Fachbereiche ── */

    /* ── Trainer — 2 Spalten (explizit gefordert) ── */

    /* ── Stats ── */

    /* ── CTA Hero ── */

    /* ── Testimonial ── */

    /* ── Manifest — 2 Spalten (explizit gefordert) ── */

    /* ── News ── */
    #news { padding: 56px 24px; }

    /* ── Footer ── */

    /* ── Kursübersicht mobil ── */
    /* margin-top zieht die Box unter das fixierte Mobil-Menü (schließt den Weißraum,
       den Lay dort für den Header reserviert); padding-top gleicht das exakt wieder aus,
       damit der Titel-Text an der bisherigen Stelle bleibt. */
    .kurs-filter { padding: 0 3% 2rem; gap: 0.5rem; }
    .kurse-hero  { margin-top: -120px; padding: calc(3rem + 120px) 3% 1.5rem; }
    .kurse-grid  { padding: 0 3% 4rem; grid-auto-rows: auto; align-items: start; }

    /* ── Kursdetailseite mobil ── */
    .kurs-hero   { margin-top: -120px; padding: calc(3rem + 120px) 3% 2rem; }
    .kurs-layout { padding: 4rem 3% 3rem; }
    .kurs-blocks { padding: 3rem 3% 4rem; }
    .kurs-back   { padding: 0 3% 4rem; }

}

/* ─── Kontaktseite ───────────────────────────────────────────────────────────── */

/* Info-Spalte (links) */

/* Formular-Spalte (rechts) */

/* ═══════════════════════════════════════════════════════════════════════════════
   KONTAKT-SEITE: WEISSER HINTERGRUND
   body.page-template-page-kontakt → /kontakt/
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   ÜBER UNS SEITE
   body.page-template-page-ueber-uns → /ueber-uns/
   Gleiche kurs-hero-Struktur wie single-kurs, weißer Hintergrund.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── kurs-hero auf weißem Hintergrund (identisch zu single-kurs) ── */
body.page-template-page-ueber-uns .kurs-hero {
    background: #f5f5f3;
}
body.page-template-page-ueber-uns .kurs-hero__title {
    color: var(--black) !important;
}
body.page-template-page-ueber-uns .kurs-hero__sub {
    color: rgba(0,0,0,.68) !important;
    max-width: 72ch;         /* etwas breiter als Kurs-Excerpt */
}

/* ── Gemeinsame Sektion ── */

/* ── Team ── */

/* Grid densities */

/* Base card */

/* Photos */

/* Text */

/* ── Partner ── */

/* ── Responsive ── */