/*
 Theme Name: Kadence fireboard
 Template: kadence
*/

/* ============================================================
   0. CSS VARIABLES — Brand-Palette, Tokens, Layout
   ============================================================ */
:root {
    /* === Akzent-Palette === */
    --fb-color-accent:            #ed6b25;
    --fb-color-accent-deep:       #1D294A;
    --fb-color-accent-deep-hover: #263D7E;

    /* === Text === */
    --fb-color-text:              #3B3B3B;
    --fb-color-text-muted:        #757575;

    /* === Borders === */
    --fb-color-border-soft:       #F1F3F3;   /* Sidebar-Dividers, Filter-Liste */
    --fb-color-border-strong:     #B1AFAF;   /* Inputs, Pagination */

    /* === Surfaces === */
    --fb-color-bg-card:           #ffffff;
    --fb-color-bg-soft:           #F4F2EB;
    --fb-color-bg-soft-hover:     #f5f5f5;

    /* === Buttons === */
    --fb-btn-radius:              8px;

    /* === Layout === */
    --fb-container-max:           1360px;

    /* === Cards ===
       Style-Definition laut Brand-Card-Spec (Maximal-Card):
       Drop Shadow: X/Y 0/0, Blur 4, Spread 0, #000000 @ 25 %
       Rahmen: 1px Grey/100 #F5F5F5 | Radius 8px */
    --fb-card-radius:             8px;
    --fb-card-padding:            1.25rem;
    --fb-card-border:             #F5F5F5;                       /* Grey/100 */
    --fb-card-shadow:             0 0 4px 0 rgba(0, 0, 0, 0.25); /* Drop Shadow */
    --fb-card-shadow-hover:       0 0 4px 0 rgba(0, 0, 0, 0.25); /* identisch — kein Hover-Wechsel */
    --fb-card-title-line-height:  1.4;
    --fb-card-title-min-height:   4.2em;     /* 3 Zeilen × line-height 1.4 */
    --fb-card-meta-size:          0.9375rem; /* 15px — Datum, Ort, Land, Link einheitlich */
}

/* ============================================================
   HINWEIS:
   Die Sektionen 1–4 (Helpers, Kadence Query Card,
   Fluent Forms, Fireboard Trainings Cards) liegen aktuell im
   Customizer → Zusätzliches CSS, NICHT in dieser Datei.
   Eine sukzessive Migration ist möglich, aber nicht zwingend.
   ============================================================ */


/* ============================================================
   5. FIREBOARD ARCHIVE — Page-Template /ressourcen/
   ============================================================ */

/* --- 5.1 Layout & Container -------------------------------- */
.fb-archive-wrap {
    padding: 3rem 1.5rem var(--global-kb-spacing-3xl, 120px);
}
.fb-archive-container {
    max-width: var(--fb-container-max);
    margin: 0 auto;
}
.fb-archive-header {
    margin-bottom: 2.5rem;
}
.fb-archive-header h1 {
    margin-bottom: 0.5rem;
}
.fb-archive-intro {
    color: var(--fb-color-text-muted);
    max-width: 720px;
}
.fb-archive-wrap .fb-archive-layout {
    display: grid !important;
    grid-template-columns: 3fr 1fr !important;
    gap: 2.5rem;
}

/* --- 5.2 Card-Grid -----------------------------------------
   Basis-Grid (entkoppelt): responsiv, greift überall wo .fb-card-grid
   steht — also auch in Element-Templates (related-Block, Menü) ohne
   .fb-archive-wrap. auto-fit + minmax(280px,1fr) bricht selbst um
   (kein Mobile-Media-Query nötig). justify-content/max-width verhindern,
   dass eine einzelne Card die volle Breite einnimmt. */
.fb-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    justify-content: start;
}
.fb-card-grid > .fb-card {
    max-width: 420px;
}

/* Archiv behält bewusst feste 3 Spalten (höhere Spezifität gewinnt hier).
   Die Mobile-Breakpoints dafür stehen in Sektion 5.7. */
.fb-archive-wrap .fb-card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    justify-content: stretch;
}
.fb-archive-wrap .fb-card-grid > .fb-card {
    max-width: none;
}

/* Überschrift der Related-Sektion (vom Shortcode gerendert) */
/* Überschrift der Related-Sektion (vom Shortcode gerendert).
   Doppelte Klasse erhöht Spezifität gegen Theme-h3-Margins,
   unabhängig vom umgebenden Wrapper. */
.fb-related__title.fb-related__title {
    margin: 0 0 3rem;
}

/* Prefix-Label in Meta-Zeilen (fb_acf_field mit prefix-bold="1").
   Klassen-Spezifität schlägt die globale body{font-weight:300}-Regel. */
.fb-acf-prefix {
    font-weight: 500;
}

/* Related-Block (Element-Templates): Spaltenzahl flexibel.
   Drei Betriebsarten (gesteuert vom Shortcode fb_related_cards):
   1) columns="N" gesetzt -> Inline-Property --fb-related-columns => feste N Spalten.
   2) columns leer + Klasse --auto -> auto-fit (bricht nach Breite um, min 280px).
   3) Fallback ohne beides -> feste 4 Spalten (bisheriges Verhalten).
   Bei wenigen Cards bleiben leere Spalten -> Cards behalten normale Breite,
   werden nicht gedehnt. Mobile/Tablet brechen sauber um.
   Überschreibt das responsive Basis-Grid via höherer Spezifität. */
.fb-card-grid.fb-card-grid--related {
    grid-template-columns: repeat(var(--fb-related-columns, 4), 1fr);
    justify-content: stretch;
}
/* auto-fit-Variante: greift, wenn columns leer gelassen wurde */
.fb-card-grid.fb-card-grid--related.fb-card-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.fb-card-grid.fb-card-grid--related > .fb-card {
    max-width: none;
}
/* Tablet: feste-Spalten-Variante auf max. 2 begrenzen.
   Hinweis: repeat() braucht einen festen Integer -> kein min()/var() hier,
   sonst Browser-Inkonsistenzen. Wir setzen daher explizit 2 Spalten und
   nutzen minmax(0,1fr) gegen Overflow bei schmalen Cards.
   Die auto-fit-Variante ist ausgenommen (regelt sich selbst). */
@media (max-width: 1024px) {
    .fb-card-grid.fb-card-grid--related:not(.fb-card-grid--auto) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .fb-card-grid.fb-card-grid--related:not(.fb-card-grid--auto) {
        grid-template-columns: 1fr;
    }
}

/* --- 5.3 Einzelne Card ------------------------------------- */
.fb-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Equal Height über Grid-Reihe */
    background: var(--fb-color-bg-card);
    border: 1px solid var(--fb-card-border);
    border-radius: var(--fb-card-radius);
    box-shadow: var(--fb-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.fb-card:hover {
    box-shadow: var(--fb-card-shadow-hover);
    transform: translateY(-2px);
}

/* Card-Bild — 16:9 Aspect Ratio */
.fb-card__image-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.fb-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card-Body */
.fb-card__body {
    padding: var(--fb-card-padding);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1; /* füllt verbleibende Card-Höhe */
}
/* Eyebrow — kanonisch für alle CPTs. .fb-card__category (Events/News)
   und .fb-card__eyebrow (Schulungen) teilen sich EINEN Stil.
   Entkoppelt von .fb-archive-wrap: greift überall, wo eine .fb-card steht. */
.fb-card__category,
.fb-card__eyebrow {
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fb-color-accent);
    font-weight: 400;
    margin: 0;
}

/* Card-Titel: max. 3 Zeilen, gleiche Höhe über alle Cards.
   Größe/Gewicht wie das Query-Card-h5 (Soll), fluid via clamp.
   .fb-card-Prefix erhöht Spezifität gegen Theme-Heading-Margins
   (z.B. .single-content h3 { margin: 1.5em 0 .5em }). */
.fb-card .fb-card__title {
    font-size: clamp(20px, 1.2083rem + 0.1852vw, 22px);
    line-height: var(--fb-card-title-line-height);
    margin: 0;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: var(--fb-card-title-min-height);
}
.fb-card__title a {
    color: var(--fb-color-text);
    text-decoration: none;
}
.fb-card__title a:hover {
    color: var(--fb-color-text);     /* konstant, kein Orange-Wechsel */
}

/* Card-Meta: Datum + Ort/Land untereinander */
.fb-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.fb-card__date {
    font-size: inherit;
    color: var(--fb-color-text);
    text-align: left;
}
/* Ort | Land — eigene Zeile unter dem Datum, gleiche Farbe & Größe wie Datum */
.fb-card__location {
    display: block;
    font-size: inherit;
    color: var(--fb-color-text);
}

/* Card-CTA (am Card-Ende verankert) — Body-Font-Größe wie Meta */
.fb-card__link {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--fb-color-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: inherit;
}
.fb-card__link:hover {
    text-decoration: none;
    opacity: 0.7;
}

/* --- 5.4 Sidebar ------------------------------------------- */
.fb-archive-sidebar {
    position: sticky;
    top: 6rem; /* unter dem Kadence-Header */
    align-self: start;
}

/* Suche */
.fb-sidebar__search {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fb-sidebar__search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--fb-color-border-strong);
    border-radius: 8px;
    font-size: 0.9375rem;
}
.fb-sidebar__search button {
    padding: 0.5rem 1rem;
    background: var(--fb-color-accent-deep);
    color: #fff;
    border: none;
    border-radius: var(--fb-btn-radius);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s ease;
}
.fb-sidebar__search button:hover {
    background: var(--fb-color-accent-deep-hover);
}

/* Filter-Title */
body .fb-archive-wrap .fb-sidebar__title,
body .fb-archive-wrap h5.fb-sidebar__title {
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--fb-color-text) !important;
    margin: 0 0 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Filter-Liste: keine Bullets — maximale Spezifität gegen Theme-Defaults */
body .fb-archive-wrap aside.fb-archive-sidebar ul,
body .fb-archive-wrap aside.fb-archive-sidebar ul li,
body .fb-archive-wrap aside.fb-archive-sidebar ul ul,
body .fb-archive-wrap aside.fb-archive-sidebar ul ul li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
}
body .fb-archive-wrap aside.fb-archive-sidebar > ul.fb-sidebar__filter {
    padding: 0 !important;
    margin: 0 !important;
}
.fb-archive-wrap .fb-sidebar__filter ul li {
    list-style: none !important;
    margin: 0;
}
.fb-sidebar__filter li {
    border-bottom: 1px solid var(--fb-color-border-strong);
}
.fb-sidebar__filter li:last-child {
    border-bottom: none;
}
.fb-sidebar__filter li a {
    display: block;
    padding: 0.6rem 0;
    color: var(--fb-color-text);
    text-decoration: none;
    font-size: 0.9375rem;
}
.fb-sidebar__filter li a:hover {
    color: var(--fb-color-accent);
}
.fb-sidebar__filter li.is-active a {
    color: var(--fb-color-accent);
    font-weight: 600;
}

/* Reset-Link */
.fb-sidebar__reset {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fb-color-border-strong);
}
.fb-sidebar__reset a {
    color: var(--fb-color-text);
    font-size: 0.9375rem;
    text-decoration: none;
}
.fb-sidebar__reset a:hover {
    color: var(--fb-color-accent);
}

/* --- 5.5 Paginierung --------------------------------------- */
.fb-pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}
.fb-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 0.25rem;
}
.fb-pagination li a,
.fb-pagination li span {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--fb-color-border-strong);
    border-radius: 4px;
    color: var(--fb-color-text);
    text-decoration: none;
    font-size: 0.9375rem;
}
.fb-pagination li a:hover {
    background: var(--fb-color-bg-soft-hover);
}
.fb-pagination li span.current {
    background: var(--fb-color-accent);
    color: #fff;
    border-color: var(--fb-color-accent);
}

/* --- 5.6 Screen-Reader-Hilfen ------------------------------ */
.fb-archive-wrap .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* --- 5.7 Responsive (FIX: Spezifität + !important, sonst
       überschreiben die Desktop-Regeln in Zeile 79-88 die
       Mobile-Overrides auch innerhalb der Media-Query) -------- */
@media (max-width: 1024px) {
    /* Tablet Portrait & kleiner: Sidebar wandert nach OBEN */
    body .fb-archive-wrap .fb-archive-layout {
        grid-template-columns: 1fr !important;
    }
    /* Sidebar mit Such- und Filterbereich zuerst (Mobile-UX:
       User soll erst filtern, dann durch die Liste scrollen) */
    body .fb-archive-wrap .fb-archive-sidebar {
        position: static !important;
        order: 1;
        margin-top: 0 !important;
        margin-bottom: 2.5rem;
    }
    /* Content-Bereich (mit Cards) nach unten */
    body .fb-archive-wrap .fb-archive-main {
        order: 2;
    }
    /* Cards 2-spaltig */
    body .fb-archive-wrap .fb-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 768px) {
    /* Smartphone: Cards 1-spaltig */
    body .fb-archive-wrap .fb-card-grid {
        grid-template-columns: 1fr !important;
    }
    /* H1 fluid skalieren statt fix Riesen-Größe */
    body .fb-archive-wrap .fb-archive-header h1 {
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
        line-height: 1.15;
    }
    /* Container-Padding reduzieren */
    body .fb-archive-wrap {
        padding: 2rem 1rem var(--global-kb-spacing-2xl, 80px) !important;
    }
}


/* ============================================================
   6. FIREBOARD ARCHIVE — Archive-Template /trainings/
   (Ergänzungen zur Sektion 5, training-spezifische Klassen)
   ============================================================ */

/* ---------- Archive-Title ---------- */
.fb-archive-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--fb-color-text);
    margin: 0 0 2.5rem 0;
    line-height: 1.2;
}

/* ---------- Card-Eyebrow ---------- 
   Kanonische Eyebrow-Regel steht jetzt in Sektion 5.3
   (.fb-card__category, .fb-card__eyebrow gemeinsam, entkoppelt). */

/* ---------- Card-Meta — Training (nur Datum, linksbündig) ----------
   Entkoppelt von .fb-archive-wrap: greift überall (Archiv, Detailseite, Menü). */
.fb-card__meta--training {
    display: block;
    text-align: left;
    color: var(--fb-color-text);
    /* font-size bewusst NICHT gesetzt: das Datum soll — wie im
       Ressourcen-Bereich (.fb-card__meta) — die Body-Größe erben und
       damit exakt so groß sein wie der "Mehr erfahren"-Link.
       Siehe Sektion 7.1. */
    margin-bottom: 0.75rem;
}
.fb-card__format {
    font-weight: 600;
    letter-spacing: 0.02em;
}
.fb-card__sep {
    color: var(--fb-color-text-muted);
}

/* ---------- Sidebar-Filter: verschachtelt (Parent + Child) ---------- */
.fb-sidebar__filter--tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Parent-Ebene: fett, Trennlinie unter jedem Parent-Block */
.fb-sidebar__filter--tree > .fb-sidebar__filter-parent {
    border-bottom: 1px solid var(--fb-color-border-strong);
}
.fb-sidebar__filter--tree > .fb-sidebar__filter-parent:last-child {
    border-bottom: none;
}
.fb-archive-wrap aside.fb-archive-sidebar ul.fb-sidebar__filter--tree > li.fb-sidebar__filter-parent > a {
    display: block;
    padding: 0.6rem 0;
    color: var(--fb-color-text);
    font-weight: 700 !important;
    text-decoration: none;
    font-size: 0.9375rem;
}
.fb-sidebar__filter--tree > .fb-sidebar__filter-parent > a:hover {
    color: var(--fb-color-accent);
}
.fb-sidebar__filter--tree > .fb-sidebar__filter-parent.is-active > a {
    color: var(--fb-color-accent);
}

/* Child-Ebene: eingerückt, normale Gewichtung, kleinere Schrift */
.fb-sidebar__filter-children {
    list-style: none;
    padding: 0 0 0.5rem 0.875rem;
    margin: 0 0 0 0;
    border-left: 1px solid var(--fb-color-border-soft);
    margin-left: 0.125rem;
}
.fb-sidebar__filter-children li a {
    display: block;
    padding: 0.25rem 0;
    color: var(--fb-color-text);
    font-weight: 400;
    font-size: 0.875rem;
    text-decoration: none;
}
.fb-sidebar__filter-children li a:hover {
    color: var(--fb-color-accent);
}
.fb-sidebar__filter-children li.is-active a {
    color: var(--fb-color-accent);
    font-weight: 600;
}

/* ---------- Keine-Treffer-Hinweis ---------- */
.fb-no-results {
    color: var(--fb-color-text-muted);
    font-size: 1rem;
    padding: 2rem 0;
}

/* ============================================================
   fb_video: responsives Video-Embed (16:9)
   Überschreibt die festen width/height-Attribute des oEmbed-iframes,
   sodass das Video die volle Breite seiner Spalte einnimmt.
   ============================================================ */
.fb-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.fb-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================================
   .fb-card im Mega-Menü (Werbe-Box "Demnächst", [fb_next_event_card])
   Die globalen Menü-Link-Regeln (li.menu-item.kadence-menu-mega-enabled
   .fb-mega-menu a:hover -> bold + orange) überschreiben sonst Titel und Link
   der Card. Selektoren tragen denselben Menü-Präfix, um die Spezifität der
   Menü-Regeln sicher zu übertreffen. Body kompakter.
   ============================================================ */

/* Titel: neutral wie Archiv-Card (konstante Textfarbe, kein Bold/Orange-Hover) */
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card {
    align-self: flex-start;   /* nicht auf Spaltenhöhe strecken */
    height: auto;
}

/* Bildlose Card im Menü: Eckenradius 8px (kein Bild, das oben den Radius trägt) */
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card.fb-card--no-image {
    border-radius: 8px;
    overflow: hidden;
}
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__title a,
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__title a:hover,
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__title a:focus {
    color: var(--fb-color-text) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Link: orange wie Archiv-Card; Hover folgt Customizer-Link-Hover (#A44216) */
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__link {
    color: var(--fb-color-accent) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__link:hover,
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__link:focus {
    color: #A44216 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Eyebrow: Akzentfarbe gegen Menü-Heading-Regel absichern */
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__category {
    color: var(--fb-color-accent) !important;
}

/* Body kompakter im Menü-Kontext: nur so hoch wie der Inhalt
   (kein Equal-Height-Stretch wie in den Archiven). */
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__body {
    padding: 1rem;
    gap: 0.35rem;
    flex: 0 0 auto;
}

/* Link direkt unter die Meta-Daten ziehen (kein margin-top:auto-Abstand) */
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__link {
    margin-top: 0.25rem;
    padding-top: 0;
}

/* Meta-Zeilen eng */
li.menu-item.kadence-menu-mega-enabled .fb-mega-menu .fb-card .fb-card__meta {
    gap: 0.1rem;
}


/* ============================================================
   7. AUSGEBUCHT-BADGE — Status "ausgebucht" für termingebundene
      Schulungen (CAMPUS OFFEN / ONLINE).
      - Inline-Variante: in der Card-Meta-Zeile hinter dem Datum.
      - Block-Variante (--block): auf der Single-Detailseite, wo das
        Badge im Wrapper [fb_termine] den Calendar-Button ersetzt.
   ============================================================ */

/* Basis-Badge (gemeinsam für Card + Single) */
.fb-badge--ausgebucht {
    display: inline-flex;          /* zentriert den Versalien-Text vertikal sauber */
    align-items: center;
    /* Versalien (uppercase) sitzen nicht mittig in der Zeilenbox: oben bleibt
       mehr Luft als unten. line-height:1 entfernt die Zeilenabstand-Asymmetrie,
       das vertikale Padding gleicht den optischen Rest aus
       (oben minimal mehr als unten). */
    padding: 0.4em 0.6em 0.35em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 4px;
    background-color: var(--fb-color-accent-deep);   /* CI Deep #1D294A */
    color: #fff;
    vertical-align: middle;
}

/* --- 7.1 Card-Kontext --------------------------------------
   Datum + Badge in EINER Zeile, linksbündig.

   WICHTIG zur Spezifität: Im Customizer-CSS (Migrationssektionen 1–4,
   laut Datei-Header noch dort) liegt offenbar eine Regel, die das
   Training-Meta zentriert und die Datums-Größe fix setzt. Deshalb hier
   bewusst .fb-card-Präfix (zwei Klassen) + !important auf den kritischen
   Eigenschaften, damit diese Regeln sicher gewinnen — analog zur
   Härtungs-Praxis in Sektion 5/6. */
.fb-card .fb-card__meta--training {
    display: flex !important;
    flex-direction: row !important;   /* überschreibt evtl. column aus Customizer */
    align-items: center;              /* Datum + Badge-Kasten auf gemeinsamer vertikaler Mitte */
    flex-wrap: wrap;
    justify-content: flex-start !important;
    text-align: left !important;      /* gegen text-align:center aus Customizer */
    gap: 0;                           /* Abstand kommt gezielt vom Badge-margin */
}

/* Datum: linksbündig. Die Schriftgröße kommt jetzt natürlich von der
   Vererbung (Body-Größe) — exakt wie der "Mehr erfahren"-Link und wie
   im Ressourcen-Bereich. Der --training-Wrapper gibt keine font-size
   mehr vor (siehe Sektion 6). Kein font-size-Override nötig. */
.fb-card .fb-card__meta--training .fb-card__date {
    text-align: left !important;
}

/* Badge hinter dem Datum, gleiche Zeile, mit Abstand. */
.fb-card .fb-card__meta--training .fb-badge--ausgebucht {
    margin-left: 0.75rem;
}

/* --- 7.2 Single-Kontext (Wrapper [fb_termine]) --------------
   Badge ersetzt den Calendar-Button -> prominenter, eigenständig. */
.fb-termine {
    margin: 1.5rem 0;
}
.fb-badge--block {
    margin-left: 0;
    font-size: 0.9rem;
    /* gleiches Versalien-Padding-Prinzip wie Basis-Badge (oben minimal mehr) */
    padding: 0.7em 1.1em 0.6em;
    border-radius: var(--fb-btn-radius);   /* 8px, wie Buttons */
}