/* ===========================================================================
   Beitraege, Anwenderberichte und Archive (Block-Templates single,
   single-case-studies, archive-case-studies, home, archive)

   Baut auf components.css und sections.css auf und wird danach geladen.
   Werte aus tokens.generated.css, keine freien Hexwerte.
   =========================================================================== */

/* --- Hero des Beitrags --------------------------------------------------
   Die H1 folgt der gemeinsamen Hero-Regel (components.css .epi-hero h1). */

/* Lead aus core/post-excerpt: der Kern setzt einen Wrapper (div.epi-lead) um
   den Absatz. Die Lesebreite traegt der Wrapper, der Absatz darf keinen
   eigenen Rand mitbringen. */
.epi-lead > .wp-block-post-excerpt__excerpt {
    margin: 0;
}

/* Beitragsbild im Hero: core/post-featured-image bringt ".wp-block-post-
   featured-image img { height: auto }" mit, bei gleicher Spezifitaet wie
   ".epi-hero__media img" haengt der Sieger an der Ladereihenfolge. Die
   hoehere Spezifitaet fuellt die Medienflaeche in jedem Fall. */
.epi-hero .epi-hero__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
}

/* Bildlage und Format des Beitragsbilds regelt der Hero (components.css):
   es haengt an der H1, auch ohne Eyebrow, und haelt sein Format ueber
   min/max-height statt ueber eine Mindesthoehe des Heros. */

/* --- Beitragskoerper: Text links, Spalte rechts -------------------------
   Die Spalte steht im Markup zuerst, damit sie mobil ueber dem Text liegt
   und der Beitrag ohne Layout in sinnvoller Reihenfolge lesbar bleibt. Auf
   dem Desktop setzt das Raster sie nach rechts. */

.epi-beitrag__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--lg);
}

.epi-beitrag__spalte {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    align-content: start;
    min-width: 0;
}

.epi-beitrag__spalte > * {
    margin: 0;
}

@media screen and (min-width: 1024px) {
    .epi-beitrag__raster {
        /* Die Spalte haelt die Aussenkante des Containers, der Text die
           Lesebreite; was dazwischen bleibt, ist die Gasse. */
        grid-template-columns: minmax(0, var(--prose-max-width)) 320px;
        justify-content: space-between;
        align-items: start;
        column-gap: var(--epi-col-gap);
    }

    .epi-beitrag__text {
        grid-column: 1;
        grid-row: 1;
    }

    .epi-beitrag__spalte {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Klebend erst ab 760 px Fensterhoehe. Ist die Spalte trotzdem hoeher
   (Logo, Verzeichnis und Fast Facts, Datenschutz mit 16 Abschnitten),
   scrollt sie in sich; der Innenabstand haelt den Fokusring frei
   (DESIGN.md 7). */
@media screen and (min-width: 1024px) and (min-height: 760px) {
    .epi-beitrag__spalte {
        position: sticky;
        top: calc(var(--header-height) + var(--wp--preset--spacing--md));
        max-block-size: calc(100vh - var(--header-height) - 2 * var(--wp--preset--spacing--md));
        overflow-y: auto;
        padding: 0.375rem;
        margin: -0.375rem;
    }
}

/* --- Beitragstext -------------------------------------------------------
   Typografie fuer Altinhalte: Absaetze, Ueberschriften, Listen, Bilder und
   Videos stammen aus dem Classic-Editor und tragen kaum eigene Klassen. Der
   Rhythmus steht deshalb hier und nicht im Inhalt. */

.epi-beitrag__text {
    min-width: 0;
    overflow-wrap: break-word;
}

.epi-beitrag__text .wp-block-post-content > * {
    margin-block: 0;
}

.epi-beitrag__text .wp-block-post-content > * + * {
    margin-block-start: var(--wp--preset--spacing--md);
}

/* Naehe zeigt Zugehoerigkeit: vor einer H2 48, vor H3/H4 40, Ueberschrift
   auf Ueberschrift 20, nach jeder Ueberschrift 8, zwischen Absaetzen 20.
   Gilt fuer Beitrag, Anwenderbericht und Textseite (tokens.json
   components.fliesstext). */
.epi-beitrag__text .wp-block-post-content > * + h2 {
    margin-block-start: var(--wp--preset--spacing--xl);
}

.epi-beitrag__text .wp-block-post-content > * + :is(h3, h4) {
    margin-block-start: var(--wp--preset--spacing--lg);
}

.epi-beitrag__text .wp-block-post-content > :is(h2, h3) + :is(h3, h4) {
    margin-block-start: var(--wp--preset--spacing--md);
}

.epi-beitrag__text .wp-block-post-content > :is(h2, h3, h4) + :not(h2, h3, h4) {
    margin-block-start: var(--wp--preset--spacing--sm);
}

/* Der Anker landet unter der Kopfzeile, nicht dahinter (DESIGN.md Fokus: nichts
   Verdecktes). Dieselbe Marke liest beitrag-inhalt.js. */
.epi-beitrag__text :is(h2, h3, h4)[id] {
    scroll-margin-top: calc(var(--header-height) + var(--wp--preset--spacing--md));
}

.epi-beitrag__text h2 {
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: var(--line-height-heading);
    text-wrap: balance;
}

.epi-beitrag__text h3 {
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.epi-beitrag__text h4 {
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Klein bleibt klein: ein Altinhalt kann h5/h6 enthalten, sie bleiben im
   Fliesstext lesbar (DESIGN.md 3.3: nie kleiner als der Text darunter). */
.epi-beitrag__text :is(h5, h6) {
    color: var(--color-text);
    font-size: 1.125rem;
}

/* Fliesstext im Beitrag folgt den Links im Fliesstext (DESIGN.md 6):
   unterstrichen, Farbe allein traegt keine Bedeutung. */
.epi-beitrag__text a:not(.wp-block-button__link) {
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-beitrag__text a:not(.wp-block-button__link):hover {
    color: var(--color-text);
}

.epi-beitrag__text :is(ul, ol) {
    padding-inline-start: 1.5em;
}

.epi-beitrag__text li + li {
    margin-block-start: var(--wp--preset--spacing--sm);
}

.epi-beitrag__text li::marker {
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
}

/* Bilder und Videos laufen ueber die volle Textbreite. Radius 16, weil sich
   5 px an einer grossen Flaeche als rechter Winkel liest (DESIGN.md 5). */
.epi-beitrag__text :is(figure, img) {
    max-inline-size: 100%;
}

.epi-beitrag__text img {
    block-size: auto;
    border-radius: var(--radius-lg);
}

.epi-beitrag__text figure {
    margin-inline: 0;
}

.epi-beitrag__text figcaption {
    margin-block-start: var(--wp--preset--spacing--sm);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

.epi-beitrag__text :is(.alignleft, .alignright, .aligncenter) {
    float: none;
    margin-inline: 0;
}

.epi-beitrag__text .wp-block-image :is(img, a) {
    display: block;
}

/* Videos (16:9, abgerundet) regelt components.css fuer alle Seiten. */

/* Abstandshalter aus dem Classic-Editor verdoppeln den Rhythmus: der Abstand
   kommt aus den Regeln oben, nicht aus festen Pixelhoehen im Inhalt. */
.epi-beitrag__text .wp-block-spacer {
    display: none;
}

.epi-beitrag__text .wp-block-table {
    overflow-x: auto;
}

/* Tabellen: Linien nur zwischen den Zeilen, Kopf linksbuendig, Zellen
   oben ausgerichtet. Mobil behaelt die Tabelle 30rem und scrollt
   waagerecht in ihrem Rahmen; die angeschnittene dritte Spalte zeigt, dass
   es weitergeht. */
.epi-beitrag__text .wp-block-table table {
    min-inline-size: 30rem;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.5;
}

.epi-beitrag__text .wp-block-table :is(th, td) {
    padding: 0.75rem var(--wp--preset--spacing--md) 0.75rem 0;
    border: 0;
    border-block-end: 1px solid var(--line-grey);
    text-align: start;
    vertical-align: top;
}

.epi-beitrag__text .wp-block-table thead {
    border: 0;
}

.epi-beitrag__text .wp-block-table th {
    border-block-end: 2px solid var(--color-text);
    font-weight: 700;
}

/* Mobil: H2 eine Stufe unter der H1 (beide sonst 28 px), deutsche
   Komposita und lange Adressen brechen mit Trennstrich statt zu ragen;
   erst ab zehn Zeichen, damit DSGVO und kurze Woerter ganz bleiben. */
@media screen and (max-width: 767px) {
    .epi-beitrag__text h2 {
        font-size: 1.5rem;
    }

    .epi-beitrag__text h3 {
        font-size: 1.25rem;
    }

    .epi-beitrag__text .wp-block-post-content :is(p, li, td) {
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
    }
}

/* Altzitat in den Anwenderberichten (Gruppe .awb_quote_wrapper mit
   p.awb_quote und p.awb_quote_author) im Erscheinungsbild von
   .epi-quote--card: Creme, Merriweather kursiv, Autor in der Sekundaerfarbe.
   Die Regeln stehen ohne .epi-beitrag__text-Rahmen, damit sie auch im
   Beitragseditor greifen; die zweite Klasse haelt die Spezifitaet auf der
   Hoehe der Textrhythmus-Regel oben. */
.wp-block-group.awb_quote_wrapper {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    margin-block-start: var(--wp--preset--spacing--lg);
    padding: var(--wp--preset--spacing--lg);
    background-color: var(--color-primary-light);
    border-radius: var(--radius-lg);
}

.awb_quote_wrapper > * {
    margin: 0;
}

.awb_quote_wrapper .awb_quote {
    color: var(--color-text);
    font-family: var(--font-quote);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
}

.awb_quote_wrapper .awb_quote_author {
    color: var(--color-secondary);
    font-size: 1rem;
    font-style: normal;
    line-height: 1.5;
}

@media screen and (max-width: 767px) {
    .wp-block-group.awb_quote_wrapper {
        padding: var(--wp--preset--spacing--md);
    }
}

/* --- Inhaltsverzeichnis (Sprungnavigation, vertikal) --------------------
   DESIGN.md 6: eine 3-px-Kante links markiert den aktuellen Abschnitt, Hover
   wechselt nur die Flaeche auf Creme. Die Kante bedeutet ausschliesslich
   "aktuell", deshalb ist sie sonst transparent. Der Titel ist kein Eyebrow
   und steht ohne Versalien. */

.epi-inhalt__titel {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
}

.epi-inhalt ol {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.epi-inhalt li {
    margin: 0;
}

/* 44 px samt Innenabstand: auch 16 Abschnitte passen in die Spalte. */
.epi-inhalt a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-block-size: var(--touch-min);
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
    border-inline-start: 3px solid transparent;
    border-radius: 0 var(--standard-border-radius) var(--standard-border-radius) 0;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: var(--line-height-ui);
    text-decoration: none;
}

.epi-inhalt a:hover {
    background-color: var(--color-primary-light);
}

.epi-inhalt a[aria-current] {
    border-inline-start-color: var(--color-accent-dark-wcag);
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
}

/* Der Titel ist der Schalter. Mobil zu, zwischen zwei Haarlinien vor dem
   Text; ab 1024 px oeffnet beitrag-inhalt.js die Liste in der Spalte. */
.epi-inhalt summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--md);
    min-block-size: var(--touch-min);
    cursor: pointer;
    list-style: none;
}

.epi-inhalt summary::-webkit-details-marker {
    display: none;
}

.epi-inhalt summary::after {
    content: "";
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-end: 0.25rem;
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
}

.epi-inhalt details[open] summary::after {
    transform: translateY(25%) rotate(-135deg);
}

.epi-inhalt details[open] summary {
    margin-block-end: var(--wp--preset--spacing--sm);
}

@media screen and (max-width: 1023px) {
    .epi-inhalt {
        border-block: 1px solid var(--line-grey);
    }

    .epi-inhalt details[open] {
        padding-block-end: var(--wp--preset--spacing--md);
    }
}

/* --- Fast Facts ---------------------------------------------------------
   Creme-Flaeche mit kompakter Feature-Liste. Der Haken ist dieselbe
   Feldmarke wie bei den Themenpunkten (DESIGN.md 6 Icons), nie in Orange. */

.epi-fast-facts {
    padding: var(--wp--preset--spacing--md);
    background-color: var(--color-primary-light);
    border-radius: var(--radius-lg);
}

.epi-fast-facts__titel {
    margin: 0 0 var(--wp--preset--spacing--md);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
}

.epi-fast-facts ul {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.epi-fast-facts li {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 0.75rem;
    align-items: start;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* Dekorativ, deshalb Pseudoelement; auf der ersten Zeile zentriert. */
.epi-fast-facts li::before {
    content: "";
    inline-size: 24px;
    block-size: 24px;
    margin-block-start: calc((1.5 * 1rem - 24px) / 2);
    background-image: url("../img/haken.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Kundenlogo ---------------------------------------------------------
   Weisse Flaeche mit Haarlinie: das Logo steht auf dem Rand der Seite und
   darf nicht von der Farbe der Sektion abhaengen. Datei unveraendert
   (DESIGN.md 6 Logo-Band), nur eingepasst. */

.epi-kundenlogo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--md);
    background-color: var(--color-base);
    border: 1px solid var(--color-secondary-20);
    border-radius: var(--radius-lg);
}

.epi-kundenlogo img {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 200px;
    max-block-size: 64px;
    object-fit: contain;
}

/* --- Beitrags-Karte ------------------------------------------------------
   Dieselbe Karte wie die Referenz-Karte (components.css): Foto, Pille links
   oben, Body, Verweis. Statt Branche steht das Thema (Anwendungsfall, sonst
   Produkt). Die Flaeche folgt wie bei der Referenz-Karte dem Produkt ueber die
   Paletten-Klasse has-product-*-background-color, der Text bleibt #333 ueber
   den Token. Kein Logo-Badge. */

.epi-beitrag-karte__foto {
    --epi-card-media-size: 220px;
    position: relative;
}

.epi-beitrag-karte__thema {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 700;
}

.epi-beitrag-karte .epi-card__title {
    font-family: var(--font-secondary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

/* --- Filter -------------------------------------------------------------
   Drei gleich breite Felder in einer Zeile ueber dem Raster (Blog-Uebersicht
   und Referenzen), darunter die Ergebniszeile mit Trefferzahl, den Pillen der
   gewaehlten Begriffe und dem Link zum Zuruecksetzen. Jedes Feld ist ein
   Label ueber einer Schreiblinie, kein Kasten (DESIGN.md Formulare: Label
   immer sichtbar); die Schreiblinien sind die einzige Linienstruktur.
   Grundmarkup sind native Mehrfach-Selects mit Button "Anzeigen"; mit Skript
   (.is-enhanced) werden sie versteckt und durch Feld-Button und Liste
   ersetzt, die Selects halten die Auswahl.

   Zustaende des Feld-Buttons (DESIGN.md Buttons: fuenf Zustaende):
   Default 1 px Linie --color-text; Hover und Aktiv/offen 2 px Linie
   accent-dark-wcag, die zweite Haelfte per box-shadow, damit nichts springt;
   Fokus der globale 3-px-Ring (:focus-visible, hier nicht ueberschrieben).
   Disabled entfaellt: ein Feld ist nie gesperrt, nur einzelne Zeilen der
   Liste ohne Treffer (aria-disabled). Eine Aktiv-Flaeche mit Innenschatten
   gibt es bei einer Schreiblinie nicht, Aktiv und offen sehen gleich aus. */

.epi-filter {
    /* Grau einer nicht waehlbaren Zeile (aria-disabled): ca. 3,5:1 auf Weiss.
       Gesperrte Bedienelemente sind von WCAG 1.4.3 ausgenommen, der Text
       bleibt trotzdem lesbar. Alle anderen Grautoene sind --color-secondary. */
    --epi-filter-grau-aus: #8a8983;

    /* Eigener Stapelkontext ueber dem Raster, damit die Liste ueber den
       Karten liegt und nicht darunter. */
    position: relative;
    z-index: 5;
    margin-block-end: var(--wp--preset--spacing--lg);
}

.epi-filter__felder {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}

.epi-filter__feld {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.epi-filter__feld label {
    color: var(--color-accent-dark-wcag);
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: var(--line-height-ui);
    text-transform: uppercase;
}

/* Native Auswahl (ohne Skript): dieselbe Schreiblinie wie der Feld-Button.
   Ueberschreibt die Select-Optik aus forms.css (Flaeche, Seitenstreifen). */
.epi-filter select {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 48px;
    padding: 0 calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xs)) 0 2px;
    border: 0;
    border-block-end: 1px solid var(--color-text);
    border-radius: 0;
    background-color: transparent;
    background-image: url("../img/chevron.svg");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 24px 24px;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: var(--line-height-ui);
    text-overflow: ellipsis;
}

.epi-filter select:hover,
.epi-filter select:focus {
    border-block-end-color: var(--color-accent-dark-wcag);
    box-shadow: 0 1px 0 var(--color-accent-dark-wcag);
}

.epi-filter select:focus-visible {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 2px;
}

/* Ohne Skript sind es Mehrfach-Selects (mehrere Begriffe je Feld): eine
   kleine Liste im Rahmen, ohne Chevron. */
.epi-filter select[multiple] {
    min-block-size: 0;
    padding: 4px;
    border: 1px solid var(--color-text);
    border-radius: var(--standard-border-radius);
    background-image: none;
    font-size: 1rem;
    font-weight: 500;
}

.epi-filter select[multiple] option {
    padding: 4px 8px;
}

/* Mit Skript: Select nur noch Wertspeicher, aus Anzeige und Lesefolge genommen. */
.epi-filter.is-enhanced select {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    min-block-size: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Feld-Button. Die globalen Button-Stile (Orange, Padding, Schatten, Breite)
   gelten hier nicht; die Zustaende stehen mit hoeherer Spezifitaet als
   button:hover und button:active aus global.css. */
.epi-filter .epi-filter__knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--sm);
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 48px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-block-end: 1px solid var(--color-text);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: var(--line-height-ui);
    text-align: start;
    cursor: pointer;
}

.epi-filter .epi-filter__knopf::after {
    content: "";
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    background: url("../img/chevron.svg") center / 24px 24px no-repeat;
    transition: transform var(--motion-state-duration) var(--motion-state-easing);
}

.epi-filter .epi-filter__knopf:hover,
.epi-filter .epi-filter__knopf:active,
.epi-filter .epi-filter__knopf[aria-expanded="true"] {
    border-block-end-color: var(--color-accent-dark-wcag);
    background: none;
    box-shadow: 0 1px 0 var(--color-accent-dark-wcag);
    color: var(--color-text);
}

.epi-filter .epi-filter__knopf[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Wert im Button: "Alle", ein Name oder bei mehreren Begriffen die Anzahl
   mit Mehrzahl des Feldnamens ("2 Produkte"). Die Ellipse ist nur Notbremse. */
.epi-filter__wert {
    min-inline-size: 0;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epi-filter__knopf.is-leer .epi-filter__wert {
    color: var(--color-secondary);
    font-weight: 500;
}

/* Sekundaere Handlung (DESIGN.md Buttons), nur ohne Skript: der Haupt-CTA
   gehoert dem Abschluss. */
.epi-filter__anwenden {
    box-sizing: border-box;
    min-block-size: var(--touch-min);
    margin-block-start: var(--wp--preset--spacing--md);
    padding: 0 var(--wp--preset--spacing--md);
    border: 1px solid var(--color-accent-dark-wcag);
    border-radius: var(--standard-border-radius);
    background-color: var(--color-base);
    color: var(--color-accent-dark-wcag);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    cursor: pointer;
}

.epi-filter__anwenden:hover,
.epi-filter__anwenden:active {
    background-color: var(--color-accent-dark-wcag);
    color: var(--color-base);
}

.epi-filter__anwenden:active {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.25);
}

.epi-filter.is-enhanced .epi-filter__anwenden {
    display: none;
}

/* Liste (Listbox): weisse Flaeche, Haarlinie, der eine Schatten des Systems.
   Breite wie das Feld, mindestens 260 px; bis neun Zeilen ohne Scrollbalken,
   darueber scrollt sie senkrecht (duenn), waagerecht nie. Oeffnen ohne
   Animation. Keine Feldmarke und keine Auswahlflaeche: die gewaehlte Zeile
   zeigt Name und Badge in accent-dark-wcag, die Zeile unter Maus und
   Pfeiltasten steht auf primary-light (deckend).

   Glasoptik (design/tokens.json components.glasoptik, DESIGN.md 5): die
   Liste ist schwebendes UI-Chrome ueber den Karten, das Rezept gilt
   unveraendert. Kontrast: die Flaeche ist mindestens zu 80 % Weiss, also
   bleibt --color-text (#333) auch ueber einem schwarzen Foto bei 7,9:1;
   accent-dark-wcag erreicht dort 4,2:1, ueber jedem helleren Grund (die
   Weichzeichnung mittelt Fotos nach oben) mindestens 4,5:1. */
.epi-filter__liste {
    position: absolute;
    z-index: 30;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 260px;
    /* 9 Zeilen a 44 px, 8 Fugen a 2 px, Padding 2 x 6 px, Rand 2 x 1 px */
    max-block-size: calc(9 * 44px + 8 * 2px + 12px + 2px);
    margin: 0;
    padding: 6px;
    overflow: hidden auto;
    scrollbar-width: thin;
    border: 1px solid var(--color-line);
    border-radius: var(--standard-border-radius);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--standard-box-shadow);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    list-style: none;
}

.epi-filter__liste[hidden] {
    display: none;
}

/* border-box, damit min-block-size die Zeile auf 44 px haelt, und alle
   geerbten Listen-Abstaende und -Punkte aus. */
.epi-filter .epi-filter__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--md);
    box-sizing: border-box;
    min-block-size: 44px;
    min-inline-size: 0;
    margin: 0;
    padding: 0 12px;
    border-radius: var(--standard-border-radius);
    list-style: none;
    cursor: pointer;
}

.epi-filter .epi-filter__option::before,
.epi-filter .epi-filter__option::marker {
    content: none;
}

.epi-filter__option.is-aktiv {
    background-color: var(--color-primary-light);
}

.epi-filter__option[aria-selected="true"] {
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
}

.epi-filter__name {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    min-inline-size: 0;
}

/* Produktfarbe als Punkt vor dem Namen (Flaeche aus
   has-product-*-background-color), in Liste und Pillen. In der Liste die
   einzige Ausnahme vom buendigen Text. */
.epi-filter__punkt {
    flex: none;
    inline-size: 10px;
    block-size: 10px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: 50%;
}

/* Zaehl-Badge, rechtsbuendig in einer Spalte; in der gewaehlten Zeile
   zugleich die Auswahlanzeige. */
.epi-filter__anzahl {
    flex: none;
    box-sizing: border-box;
    min-inline-size: 28px;
    block-size: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--color-secondary-20);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.epi-filter__option[aria-selected="true"] .epi-filter__anzahl {
    background-color: var(--color-accent-dark-wcag);
    color: var(--color-base);
}

.epi-filter__option[aria-disabled="true"] {
    color: var(--epi-filter-grau-aus);
    cursor: default;
}

.epi-filter__option[aria-disabled="true"] .epi-filter__anzahl {
    color: inherit;
}

/* Ergebniszeile unter den Feldern, immer da: Trefferzahl (aria-live), danach
   die Pillen der gewaehlten Begriffe, ganz rechts der Link zum Zuruecksetzen
   (nur wenn etwas gesetzt ist). Pillen und Link sind echte Links auf die
   Adresse ohne den Begriff und wirken auch ohne Skript. */
.epi-filter__ergebnis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-block-start: 20px;
}

.epi-filter__status {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-family: var(--font-primary);
    white-space: nowrap;
}

.epi-filter__zahl {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.2;
}

.epi-filter__wort {
    font-size: 1rem;
    font-weight: 600;
}

.epi-filter__pillen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.epi-filter__pillen li {
    margin: 0;
    padding: 0;
}

.epi-filter__pillen li::before {
    content: none;
}

.epi-filter .epi-filter__pille {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    box-sizing: border-box;
    min-block-size: 36px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background-color: var(--color-base);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: var(--line-height-ui);
    text-decoration: none;
}

/* Klickziel mindestens 44 px hoch, die Pille bleibt 36 px. */
.epi-filter__pille::after {
    content: "";
    position: absolute;
    inset: -4px 0;
}

.epi-filter__weg {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 999px;
    color: var(--color-text);
    transition: background-color var(--motion-state-duration) var(--motion-state-easing),
                color var(--motion-state-duration) var(--motion-state-easing);
}

.epi-filter__weg::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
}

/* Hover: Rand in accent-dark-wcag, ✕-Kreis gefuellt. */
.epi-filter .epi-filter__pille:hover,
.epi-filter .epi-filter__pille:active {
    border-color: var(--color-accent-dark-wcag);
    color: var(--color-text);
    text-decoration: none;
}

.epi-filter__pille:hover .epi-filter__weg,
.epi-filter__pille:active .epi-filter__weg {
    background-color: var(--color-text);
    color: var(--color-base);
}

.epi-filter__pille:active {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12);
}

/* Tertiaer-Stil (DESIGN.md Buttons): Textlink, unterstrichen, Hover --color-text. */
.epi-filter__reset,
.epi-beitragsraster__leer a {
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-filter__reset {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-min);
    margin-inline-start: auto;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
}

.epi-filter__reset:hover,
.epi-beitragsraster__leer a:hover {
    color: var(--color-text);
}

/* Mobil: Felder als kompakte Zeilen (Label links, Feld-Button rechts, durch
   Haarlinien getrennt), darunter die Ergebniszeile: Zahl mit Wort (nie
   umgebrochen) und rechts "Alle Filter zuruecksetzen", wenn Platz ist, sonst
   darunter; danach die Pillen ueber die ganze Breite. Die Liste nimmt die
   volle Breite der Zeile. */
@media screen and (max-width: 781px) {
    .epi-filter__felder {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        border-block-end: 1px solid var(--color-line);
    }

    .epi-filter__feld {
        display: grid;
        grid-template-columns: 144px minmax(0, 1fr);
        align-items: center;
        column-gap: var(--wp--preset--spacing--sm);
    }

    .epi-filter__feld + .epi-filter__feld {
        border-block-start: 1px solid var(--color-line);
    }

    /* Die Zeilenlinie ersetzt die Schreiblinie; Hover und offen zeigen sie wieder. */
    .epi-filter .epi-filter__knopf,
    .epi-filter select:not([multiple]) {
        border-block-end-color: transparent;
    }

    .epi-filter__liste {
        min-inline-size: 0;
    }

    .epi-filter__ergebnis {
        margin-block-start: var(--wp--preset--spacing--sm);
    }

    .epi-filter__reset {
        order: 2;
    }

    .epi-filter__pillen {
        flex: 1 1 100%;
        order: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .epi-filter .epi-filter__knopf::after {
        transition: none;
    }
}

/* Waehrend des Nachladens leicht abgeblendet, die Karten bleiben stehen. */
.epi-beitragsraster[aria-busy="true"],
.epi-beitragsraster__leer[aria-busy="true"] {
    opacity: 0.6;
}

/* --- Beitragsraster und Seitenliste -------------------------------------
   Seitenzahlen als Liste, zentriert unter dem Raster. Die aktuelle Seite
   traegt aria-current und, wie in der Sprungnavigation, zusaetzlich zur
   Farbe eine 3-px-Unterkante: Farbe ist nie das einzige Merkmal. Zurueck und
   Weiter sind Text, keine Pfeile. Ziele mindestens 44 px. */

.epi-beitragsraster__leer {
    max-inline-size: var(--prose-max-width);
}

.epi-seiten {
    margin-block-start: var(--wp--preset--spacing--xl);
}

.epi-seiten ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.epi-seiten li {
    margin: 0;
}

.epi-seiten li > .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
    padding-inline: var(--wp--preset--spacing--sm);
    border-block-end: 3px solid transparent;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    text-decoration: none;
}

.epi-seiten a.page-numbers:hover {
    background-color: var(--color-primary-light);
}

.epi-seiten .page-numbers.current {
    border-block-end-color: var(--color-accent-dark-wcag);
    color: var(--color-accent-dark-wcag);
}

.epi-seiten .page-numbers.dots {
    color: var(--color-secondary);
    font-weight: 400;
}

/* Zurueck und Weiter sind Handlungen, deshalb Textlinks mit Unterstreichung
   wie im Fliesstext. */
.epi-seiten :is(.prev, .next).page-numbers {
    padding-inline: var(--wp--preset--spacing--md);
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-seiten :is(.prev, .next).page-numbers:hover {
    color: var(--color-text);
}