/* CLAUDE: Themenfilter ueber dem Kartenraster der Wissens-Sektion. */
/* CLAUDE: Warum eigene Datei: pages/blog.css liegt bereits bei ~200 Zeilen (Projektregel). */
/* CLAUDE: Anpassen: Alle Werte kommen aus den Tokens in base.css - keine festen Farben. */

/* CLAUDE: Aussenabstand - trennt Filter von Einleitung und Raster, ohne beide zu verschieben */
.lhi-themen {
    margin-block-end: var(--lhi-space-lg);
}

/* CLAUDE: Umbrechende Chip-Reihe. Warum flex-wrap statt Scrollleiste: Bei sieben kurzen
   CLAUDE: Namen passt alles in zwei Zeilen, und eine waagerechte Scrollleiste versteckt
   CLAUDE: auf Mobil regelmaessig die hinteren Eintraege. */
.lhi-themen__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lhi-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lhi-themen__eintrag {
    margin: 0;
}

/* CLAUDE: Ein Filterknopf. min-height 44px erfuellt die WCAG-Mindestgroesse fuer
   CLAUDE: Beruehrungsziele - darunter treffen Daumen die kleineren Chips nicht zuverlaessig. */
.lhi-themen__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lhi-space-3xs, 0.375rem);
    min-height: 44px;
    padding-inline: var(--lhi-space-sm);
    border: 1px solid var(--lhi-color-border);
    border-radius: 999px;
    background: var(--lhi-color-white);
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-sm);
    line-height: 1.2;
    color: var(--lhi-color-text);
    text-decoration: none;
    transition: border-color var(--lhi-transition-fast),
                background-color var(--lhi-transition-fast),
                color var(--lhi-transition-fast);
}

.lhi-themen__chip:hover {
    border-color: var(--lhi-color-accent);
    color: var(--lhi-color-accent);
}

/* CLAUDE: Tastatur-Fokus sichtbar halten - Pflicht nach WCAG 2.4.7 */
.lhi-themen__chip:focus-visible {
    outline: 2px solid var(--lhi-color-accent);
    outline-offset: 2px;
}

/* CLAUDE: Aktiver Filter - gefuellt statt nur umrandet, damit er sich ohne Farbsehen
   CLAUDE: allein durch den Kontrast vom Rest abhebt. */
.lhi-themen__chip.is-aktiv {
    background: var(--lhi-color-accent);
    border-color: var(--lhi-color-accent);
    color: var(--lhi-color-white);
}

.lhi-themen__chip.is-aktiv:hover {
    color: var(--lhi-color-white);
}

/* CLAUDE: Trefferzahl - zurueckhaltend, aber lesbar */
.lhi-themen__zahl {
    font-size: var(--lhi-font-size-xs);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* CLAUDE: Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
    .lhi-themen__chip {
        transition: none;
    }
}

/* CLAUDE: Auf schmalen Geraeten eine scrollbare Reihe statt vier Umbruchzeilen.
   CLAUDE: Warum: Gemessen am 04.08.2026 belegten die acht Chips bei 390px Breite
   CLAUDE: vier Zeilen und 200px Hoehe - fast ein Viertel des Bildschirms, bevor der
   CLAUDE: erste Beitrag beginnt. Als eine scrollbare Reihe sind es 44px.
   CLAUDE: scroll-snap laesst die Chips sauber einrasten, -webkit-overflow-scrolling
   CLAUDE: sorgt auf iOS fuer den gewohnten Schwung.
   CLAUDE: Anpassen: Grenze 640px an den uebrigen Breakpoints des Themes ausrichten. */
@media (max-width: 640px) {
    .lhi-themen__liste {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* CLAUDE: Platz fuer die Bildlaufleiste, damit sie die Chips nicht ueberdeckt */
        padding-block-end: var(--lhi-space-3xs, 0.375rem);
        /* CLAUDE: Randausgleich - die Reihe darf bis an den Bildschirmrand scrollen,
           CLAUDE: sonst wirkt der letzte Chip abgeschnitten statt fortsetzbar. */
        margin-inline: calc(-1 * var(--lhi-container-padding));
        padding-inline: var(--lhi-container-padding);
        scrollbar-width: thin;
    }

    .lhi-themen__eintrag {
        scroll-snap-align: start;
    }

    /* CLAUDE: Chips duerfen nicht schrumpfen, sonst bricht der Text um und die
       CLAUDE: Reihe wird wieder hoch. */
    .lhi-themen__chip {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}