/*
 * Kategorie-Raster und Kategorieseite.
 *
 * PLAIN CSS, KEIN SCSS UND KEIN BUILD. Das Projekt hat bewusst keinen
 * Node-/Vite-Schritt; yavi_core kompiliert sein eigenes SCSS server-seitig,
 * aber das ist die Kette des Themes. lea_events haengt sich nicht hinein — es
 * liefert Daten und eine funktionierende Vorlage, das Aussehen bestimmt am
 * Ende das Sitepackage.
 *
 * Die Farben kommen deshalb aus den Custom Properties, die bootstrap_package
 * ohnehin ausgibt, jeweils mit hartem Rueckfallwert: laeuft das Element einmal
 * ohne Theme, sieht es trotzdem aus wie gedacht.
 *
 * NICHT in yavi_lucerne ablegen — das wird beim naechsten yavi-Update
 * ueberschrieben.
 */

.lea-categories {
    --lea-cat-ink: var(--bs-primary, #0a1b3e);
    --lea-cat-accent: var(--bs-secondary, #b63032);
    --lea-cat-radius: var(--cardRadius, 12px);

    margin-block: clamp(2.5rem, 6vw, 5rem);
}

/* -------------------------------------------------------------- Einleitung */

/*
 * KOPF UND UEBERSCHRIFT STEHEN NICHT MEHR HIER.
 *
 * Eyebrow, Ueberschrift und Unterzeile kommen seit dem 2026-08-25 aus den
 * Backend-Feldern des Inhaltselements und werden vom Theme gerendert
 * (`.pre-heading`, `.frame-header`, `.headline-word-color`) — mitsamt seiner
 * Typografie und seinen Abstaenden. Eigene Regeln daneben waeren die zweite
 * Wahrheit ueber dasselbe Aussehen; die Kachel-Ueberschrift saehe dann anders
 * aus als jede andere Ueberschrift der Seite.
 *
 * Bleibt die Einleitung: reiner Fliesstext, der nur eine lesbare Zeilenlaenge
 * braucht.
 */
.lea-intro {
    max-width: 70ch;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.lea-categories .lea-intro {
    margin-top: 0;
}

/* ----------------------------------------------------------------- Raster */

/*
 * DAS RASTER GEHOERT BOOTSTRAP, NICHT UNS.
 *
 * `.card-group-element` ist Flexbox mit zwei Stellschrauben, die
 * bootstrap_package als Custom Properties ausgibt: `--cardgroup-columns` und
 * `--cardgroup-gap`. Ein eigenes `display: grid` daneben waere eine zweite
 * Rasterlogik auf derselben Seite — und die faellt erst auf, wenn Kategorien
 * und ein Karten-Element untereinander stehen und verschieden brechen.
 *
 * WARUM DIE SPALTENZAHL TROTZDEM HIER STEHT. `card-group-element-columns-4`
 * bricht von Haus aus schon ab sm (576px) auf zwei Spalten. Der Entwurf will
 * die zweite Spalte erst ab 760px — also ab dem Bootstrap-Punkt md (768px),
 * dem naechstgelegenen echten Breakpoint. Vier Spalten ab xl (1200px) ist
 * ohnehin die Vorgabe von bootstrap_package; die Zeile steht der Vollstaendig-
 * keit halber da, damit die Staffel an einer Stelle nachlesbar ist.
 */
.card-group-lea-categories {
    --cardgroup-gap: 24px;
    --cardgroup-columns: 1;
}

@media (min-width: 768px) {
    .card-group-lea-categories {
        --cardgroup-columns: 2;
    }
}

@media (min-width: 1200px) {
    .card-group-lea-categories {
        --cardgroup-columns: 4;
    }
}

/*
 * yavi_core setzt `overflow: hidden` auf jedes card-group-element-item. Fuer
 * Karten mit Bild ist das richtig, hier waere es fatal: die Kachel hebt sich
 * im Hover um 6px, und der abgeschnittene Rand samt Schatten sieht aus wie ein
 * Rendering-Fehler.
 */
.card-group-lea-categories .card-group-element-item {
    overflow: visible;
}

/*
 * Der Verlaufs-Baustein fuers Icon: im Dokument, aber ohne Platzbedarf.
 * `display: none` ginge NICHT — ein verstecktes SVG liefert keine Verlaeufe
 * mehr, auf die von aussen verwiesen werden kann.
 */
.lea-categories__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- Kachel */

/*
 * WARUM DIE SELEKTOREN SO LANG SIND.
 *
 * yavi_core faerbt jede Karte in einer Card-Group selbst:
 * `.card-group-element .card-group-element-item .card { background: none }`.
 * Das sind drei Klassen — ein schlichtes `.lea-kat-card` verliert dagegen,
 * egal wie spaet die Datei geladen wird, und die Kachel bliebe weiss. Die
 * eigenen Skins von yavi (`.card-group-simple .card`, `.card-group-team … `)
 * loesen es genauso: die Haut haengt am Gruppen-Namen, nicht am Element.
 *
 * Deshalb steht vor jeder Regel `.card-group-lea-categories`. Das ist zugleich
 * die Grenze: ausserhalb dieses Rasters faerbt lea_events keine einzige Karte
 * des Themes um.
 */
.card-group-lea-categories .card-group-element-item .card {
    /*
     * Was Bootstrap ueber Custom Properties anbietet — Rahmen, Radius,
     * Innenabstand —, wird auch darueber gesetzt. Zwei Regelsaetze, die um
     * dieselbe Eigenschaft kaempfen, sind sonst der naechste Fehler.
     */
    --bs-card-bg: transparent;
    --bs-card-color: #fff;
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(255, 255, 255, 0.08);
    --bs-card-border-radius: 18px;
    --bs-card-inner-border-radius: 18px;
    --bs-card-spacer-x: 28px;
    --bs-card-spacer-y: 32px;
    --bs-card-title-spacer-y: 0;
    --bs-card-title-color: #fff;

    position: relative;
    min-height: 200px;
    overflow: hidden;
    /*
     * Auch der Radius muss ausgeschrieben werden: yavi setzt an derselben
     * Stelle `border-radius: 0`. Die Custom Property allein bliebe wirkungslos
     * — sie beschreibt nur, was die Bootstrap-Grundregel einsetzen WUERDE.
     */
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(160deg, #24457f 0%, #16305f 55%, #0a1b3e 100%);
    box-shadow: 0 6px 24px rgba(10, 27, 62, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-group-lea-categories .card-group-element-item .card:hover,
.card-group-lea-categories .card-group-element-item .card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(10, 27, 62, 0.28);
}

/*
 * Titel und Zaehler sitzen am UNTEREN Rand, das Icon schwebt darueber. Der
 * card-body traegt den Innenabstand (Bootstrap: --bs-card-spacer-*), also
 * richtet er auch aus.
 */
.card-group-lea-categories .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.card-group-lea-categories .lea-kat-card__icon {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 78px;
    height: 78px;
    color: #fff;
    /*
     * Das Icon liegt ueber der Karte, und ueber der Karte liegt der
     * stretched-link. Ohne diese Zeile waere die rechte obere Ecke ein Loch,
     * in dem der Klick nicht ankommt.
     */
    pointer-events: none;
    transition: color 0.25s ease;
}

.card-group-lea-categories .lea-kat-card__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/*
 * Im Hover faerbt sich das Icon im Verlauf — der `<defs>`-Block steht einmal
 * im Raster. Greift nur bei inline gerendertem SVG; ein hochgeladenes PNG
 * behaelt seine Farben, das ist der Preis des freien Formats.
 */
.card-group-lea-categories .card:hover .lea-kat-card__icon svg path,
.card-group-lea-categories .card:focus-within .lea-kat-card__icon svg path {
    fill: url(#leaKatHover);
}

.card-group-lea-categories .lea-kat-card__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-group-lea-categories .lea-kat-card__title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

/*
 * Der Link traegt keine eigene Farbe: er ERBT die des Titels. Nur so wirkt der
 * Verlauf im Hover auch auf den Text — background-clip faerbt, was darunter
 * durchscheint, und ein eigenes color am <a> wuerde das wieder zudecken.
 */
.card-group-lea-categories .lea-kat-card__title a {
    color: inherit;
    -webkit-text-fill-color: inherit;
    text-decoration: none;
}

.card-group-lea-categories .card:hover .lea-kat-card__title,
.card-group-lea-categories .card:focus-within .lea-kat-card__title {
    background-image: linear-gradient(135deg, #ff7a5c, #e22225);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.card-group-lea-categories .lea-kat-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.card-group-lea-categories .lea-kat-card__count {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.card-group-lea-categories .lea-kat-card__arrow {
    font-size: 16px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.25s ease;
}

.card-group-lea-categories .card:hover .lea-kat-card__arrow,
.card-group-lea-categories .card:focus-within .lea-kat-card__arrow {
    transform: translateX(3px);
}

/*
 * Wer "Bewegung reduzieren" eingestellt hat, meint es auch bei Kacheln.
 */
@media (prefers-reduced-motion: reduce) {
    .card-group-lea-categories .card-group-element-item .card,
    .card-group-lea-categories .lea-kat-card__icon,
    .card-group-lea-categories .lea-kat-card__arrow {
        transition: none;
    }

    .card-group-lea-categories .card-group-element-item .card:hover,
    .card-group-lea-categories .card-group-element-item .card:focus-within,
    .card-group-lea-categories .card:hover .lea-kat-card__arrow,
    .card-group-lea-categories .card:focus-within .lea-kat-card__arrow {
        transform: none;
    }
}

.lea-categories__empty {
    text-align: center;
    color: var(--lea-cat-ink);
}

/* --------------------------------------------------------- Kategorieseite */

.lea-category {
    --lea-cat-ink: var(--bs-primary, #0a1b3e);
    --lea-cat-accent: var(--bs-secondary, #b63032);
    --lea-cat-radius: var(--cardRadius, 12px);

    margin-block: clamp(2rem, 5vw, 4rem);
}

.lea-category__image {
    margin: 0 0 1.5rem;
    border-radius: var(--lea-cat-radius);
    overflow: hidden;
}

.lea-category__image img {
    display: block;
    width: 100%;
    height: auto;
}

.lea-category__icon {
    display: inline-block;
    margin-bottom: 0.5rem;
    line-height: 0;
    color: var(--lea-cat-accent);
}

/*
 * WIE AUF DER KACHEL BESTIMMT DAS CSS DIE FARBE, NICHT DIE DATEI.
 *
 * Ein hochgeladenes Icon bringt oft ein festes `fill` mit — die Icons dieser
 * Installation tragen `fill="#FFFFFF"`. Auf der hellen Kategorieseite waere
 * das weiss auf weiss, also unsichtbar. `currentColor` gibt die Farbe wieder
 * dem Umfeld zurueck.
 */
.lea-category__icon svg {
    display: block;
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Ein hochgeladenes PNG/WEBP kommt als <img> statt inline — gleiche Groesse. */
.lea-category__icon img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.lea-category__title {
    margin: 0 0 0.5rem;
    color: var(--lea-cat-ink);
}

.lea-category__description {
    max-width: 60ch;
    margin: 0 0 0.5rem;
}

.lea-category__count {
    margin: 0 0 2rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--lea-cat-accent);
}

.lea-category__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
}

.lea-category__link {
    color: var(--lea-cat-accent);
    font-weight: 600;
}

/*
 * DIE GANZE KACHEL IST KLICKBAR — yavi hebt das sonst auf.
 *
 * Das Markup benutzt Bootstraps `stretched-link`: ein textloser Flaechenlink
 * ueber `::after`, damit die Vorlesesoftware den Kategorienamen vorliest und
 * nicht die ganze Kachel samt Zaehler. Bootstrap spannt dafuer
 * `top/right/bottom/left: 0`.
 *
 * `yavi_core/Structure/main.scss:68` setzt global
 * `.stretched-link::after { left: unset; bottom: unset }` — ohne Begruendung.
 * Damit faellt die Flaeche in die rechte obere Ecke zusammen, und klickbar
 * bleibt nur der Titeltext. Genau das war der Befund vom 2026-09-18.
 *
 * Zurueckgeholt wird es HIER und nicht dort: yavi_core wird in einem Projekt
 * nie editiert, beim naechsten Update waere die Aenderung weg. Drei Klassen
 * schlagen yavis eine, unabhaengig von der Ladereihenfolge.
 */
.card-group-lea-categories .lea-kat-card .stretched-link::after {
    left: 0;
    bottom: 0;
}