/* --- Referenz-Karte (520:5) ----------------------------------------------
   Startseite Sektion 7 „Aktuelle Anwenderberichte". Ist dieselbe Karte wie
   die Anwendungsfall-Karte auf den Produktseiten (echte .epi-card: Flaeche,
   Radius, Schatten, Medienzone .epi-card__media, Klickflaeche/Fokusring/
   Button ueber .epi-card__link) — keine eigene Komponente, nur um zwei
   Overlays auf dem Foto erweitert: Branche-Pille (Flaeche folgt dem
   echten Produkt des Anwenderberichts, Taxonomie "product", Korrektur
   2026-09-15 — vorher bedeutungslose Dekor-Rotation) und Kundenlogo-Badge.
   Verweis ganz unten/volle Kartenbreite/gleiche Kartenhoehe kommen seit
   demselben Datum von der Basisklasse (.epi-card__body, .epi-card__link),
   keine eigene Regel mehr hier. */

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

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

/* Logo-Badge unten mittig auf dem Foto, bündig mit der Fotokante (Korrektur
   2026-09-15, zweiter Anlauf: der erste Versuch — eckiges Badge, links oben —
   traf weder Form noch Position). Form und Rezeptur sind keine Neuerfindung,
   sondern aus der bestehenden Referenz-Karte im alten Blog-Loop uebernommen
   (blog.css, ".loop_client_logo"): sehr grosser Radius nur oben (fast ein
   Halbkreis), unten eckig — dadurch sitzt die Kante exakt auf der Fotokante,
   ohne in den Kartenkoerper hineinzuragen. Groesse dabei NICHT 1:1 uebernommen
   (Korrektur 2026-09-15, zweiter Befund): die alte 250x100px-Vorlage stammt
   aus einer 50%-Breite-Featured-Karte, wirkte auf unserer schmaleren
   Drittel-Grid-Karte (~400px) mit fast der halben Kartenbreite erdrueckend —
   hier stattdessen proportional auf die Kartenbreite verkleinert. Kind von
   .epi-referenz-karte__foto, bottom:0 reicht dafuer aus, keine negative
   Margin wie im alten Loop noetig (dort lag das Badge ausserhalb des Fotos in
   Flow-Position, hier ist es ohnehin absolut positioniert innerhalb des
   Fotos). */
.epi-referenz-karte__logo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 168px;
    block-size: 68px;
    padding: 16px 18px 4px;
    border-radius: 80px 80px 0 0;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* !important nicht Stil, sondern Zwang: das Logo-<img> ist jetzt ein
   Nachfahre von .epi-card__media (seit es in die Figure gewandert ist,
   Korrektur weiter oben), und ".epi-card__media img" erzwingt per !important
   block-size:var(--epi-card-media-size) (220px) — ohne eigenes !important
   hier haette diese Regel Vorrang und das Logo wuerde auf Fotohoehe
   gestreckt, weit ueber die kleine Badge-Flaeche hinaus (Nutzer-Befund
   2026-09-15: Logo lief oben und unten aus dem Kreis heraus). */
.epi-referenz-karte__logo img {
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: contain;
}

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

/* Lange Komposita („Produktentwicklungsakte“) liefen bei 1024 px in drei
   Spalten aus der Karte und wurden abgeschnitten (Befund 2026-10-30);
   getrennt wird wie bei den Haftnotizen nur, was wirklich zu lang ist. */
.epi-referenz-karte .epi-card__body {
    hyphens: auto;
    hyphenate-limit-chars: 20 9 9;
    overflow-wrap: break-word;
}

/* Verweis ganz unten und ueber volle Kartenbreite kommen jetzt von der
   Basisklasse (.epi-card__body, .epi-card__link) — dieselbe Erwartung wie
   bei der Anwendungsfall-Karte auf den Produktseiten, keine eigene Regel
   mehr noetig (Korrektur 2026-09-15, Nutzer-Befund: beide Karten nutzen
   dieselbe Klasse und sollten sich deshalb nicht unterschiedlich verhalten). */