/*
 * Förderprogramme — portable Grundgestaltung.
 *
 * ⭐ FALLBACK-MUSTER, KEINE VARIABLENDEFINITION AM WURZELELEMENT. Die Werte
 *    stehen als zweites Argument in var(); ein Projekt setzt die Variable und
 *    gewinnt damit unabhängig davon, in welcher Reihenfolge die Dateien
 *    geladen werden.
 *
 * ⚠ KEINE MARKENFARBEN HIER. Was das Projekt ausmacht, steht in
 *   Build/Default/src/scss/ContentBlocks/_Foerderprogramme.scss. Hier stehen
 *   nur Bootstrap-Variablen als Rückfallebene, damit der Block auch in einer
 *   fremden Installation brauchbar aussieht.
 */

/*
 * Raster: hoechstens drei Karten je Reihe, eine unvollstaendige Reihe mittig
 * (Vorgabe Axel, 20.10.2026, #141).
 *
 * ⚠ FLEX STATT GRID. Ein Grid fuellt die letzte Reihe von links; mittig
 *   stehen Karten nur, wenn die Reihe ihre Breite nicht ausfuellt — das kann
 *   Flex mit `justify-content: center` und fester Kartenbreite. Die Breite
 *   ist der Anteil an der Reihe abzueglich der Abstaende, damit eine Karte
 *   unten genauso breit ist wie oben und der Abstand dazwischen derselbe.
 *
 * ⚠ CONTAINER-ABFRAGE, KEIN FENSTER-BREAKPOINT. Der Block steht in
 *   verschieden breiten Spalten; ueber die Spaltenzahl entscheidet seine
 *   eigene Breite. Die Schwellen sind rund drei bzw. zwei Karten zu je
 *   19 rem plus Abstand. Eine Abfrage kann keine Custom Property lesen,
 *   deshalb stehen sie als Zahl hier.
 *   🛠 56 rem waren zu knapp: Bei 936 px Liste (Fenster 1081 px) haette eine
 *   Karte 299 px, der Titel „…Marktstrukturverbesserung“ braucht 307 px —
 *   die Karte waechst darueber hinaus und die Reihe bricht doch nach zwei
 *   um. Drei Spalten gibt es damit ab dem Bootstrap-Container fuer xl.
 */
.cb-foerderprogramme {
    container-type: inline-size;
}

.cb-foerderprogramme-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cb-foerderprogramme-gap, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-foerderprogramme-item {
    flex: 0 0 100%;
}

@container (min-width: 40rem) {
    .cb-foerderprogramme-item {
        flex-basis: calc((100% - var(--cb-foerderprogramme-gap, 1.25rem)) / 2);
    }
}

@container (min-width: 60rem) {
    .cb-foerderprogramme-item {
        flex-basis: calc((100% - 2 * var(--cb-foerderprogramme-gap, 1.25rem)) / 3);
    }
}

.cb-foerderprogramme-item {
    /* Bezugspunkt fuer das Zeichen oben rechts. */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--cb-foerderprogramme-padding, 1.5rem);
    background: var(--cb-foerderprogramme-bg, var(--bs-body-bg));
    border: 1px solid var(--cb-foerderprogramme-border, var(--bs-border-color));
    border-radius: var(--cb-foerderprogramme-radius, var(--bs-border-radius));
}

.cb-foerderprogramme-kicker {
    margin: 0 0 .35rem;
    font-family: var(--cb-foerderprogramme-kicker-font, var(--bs-font-monospace));
    font-size: var(--cb-foerderprogramme-kicker-size, .72rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cb-foerderprogramme-kicker-color, var(--bs-secondary-color));
}

.cb-foerderprogramme-title {
    margin: 0 0 .9rem;
    font-size: var(--cb-foerderprogramme-title-size, 1.15rem);
    line-height: 1.3;
}

/*
 * ⚠ DIE GANZE KARTE IST NICHT ANKLICKBAR, nur der Titel. Eine Karte, die als
 *   Ganzes verlinkt, verhindert das Markieren von Text — und genau das tut
 *   jemand, der sich einen Fördersatz herausschreibt.
 */
.cb-foerderprogramme-link {
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.cb-foerderprogramme-note {
    margin: 0 0 .9rem;
    padding: .55rem .75rem;
    font-size: .88rem;
    background: var(--cb-foerderprogramme-note-bg, var(--bs-warning-bg-subtle));
    border-inline-start: 3px solid var(--cb-foerderprogramme-note-border, var(--bs-warning-border-subtle));
    color: var(--cb-foerderprogramme-note-color, var(--bs-body-color));
}

.cb-foerderprogramme-facts {
    margin: 0;
    font-size: var(--cb-foerderprogramme-facts-size, .92rem);
}

.cb-foerderprogramme-fact + .cb-foerderprogramme-fact {
    margin-top: .7rem;
}

.cb-foerderprogramme-fact dt {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cb-foerderprogramme-label-color, var(--bs-secondary-color));
}

.cb-foerderprogramme-fact dd {
    margin: .1rem 0 0;
}

/* Anlaufstellen (#140): eine schlichte Liste innerhalb der Eckdaten. */
.cb-foerderprogramme-anlaufstellen {
    margin: 0;
    padding-inline-start: var(--cb-foerderprogramme-anlaufstellen-einzug, 1.1rem);
}

/* Schiebt das Prüfdatum an den unteren Rand — die Karten enden damit bündig. */
.cb-foerderprogramme-stand {
    margin: auto 0 0;
    padding-top: 1.1rem;
    font-size: .8rem;
    color: var(--cb-foerderprogramme-stand-color, var(--bs-secondary-color));
}

/*
 * Das Zeichen fuer „fuehrt aus dem Haus".
 *
 * ⚠ ES IST NUR FUER DAS AUGE. `aria-hidden` steht im Markup, und der
 *   Hinweis fuer Sprachausgaben steckt als „(neues Fenster)" im Linktext.
 *   Ein Zeichen allein waere fuer sie stumm.
 *
 * ⚠ DER TITEL BRAUCHT PLATZ DAFUER. Ohne die Aussparung laeuft eine lange
 *   Ueberschrift unter das Zeichen.
 */
.cb-foerderprogramme-aus-dem-haus {
    position: absolute;
    inset-block-start: var(--cb-foerderprogramme-zeichen-oben, 1.5rem);
    inset-inline-end: var(--cb-foerderprogramme-zeichen-rechts, 1.5rem);
    font-size: var(--cb-foerderprogramme-zeichen-groesse, .85rem);
    line-height: 1;
    color: var(--cb-foerderprogramme-zeichen-farbe, var(--bs-secondary-color));
    transition: color .2s ease, transform .2s ease;
}

.cb-foerderprogramme-title {
    padding-inline-end: 1.6rem;
}

.cb-foerderprogramme-item:hover .cb-foerderprogramme-aus-dem-haus,
.cb-foerderprogramme-item:focus-within .cb-foerderprogramme-aus-dem-haus {
    color: var(--cb-foerderprogramme-zeichen-farbe-aktiv, var(--bs-link-color));
    transform: translate(2px, -2px);
}

/*
 * ⚠ KEINE BEWEGUNG GEGEN DEN WUNSCH DES NUTZERS. Wer im Betriebssystem
 *   weniger Bewegung eingestellt hat, bekommt den Farbwechsel, aber keinen
 *   Versatz.
 */
@media (prefers-reduced-motion: reduce) {
    .cb-foerderprogramme-aus-dem-haus {
        transition: color .2s ease;
    }

    .cb-foerderprogramme-item:hover .cb-foerderprogramme-aus-dem-haus,
    .cb-foerderprogramme-item:focus-within .cb-foerderprogramme-aus-dem-haus {
        transform: none;
    }
}