/* --- Anwendungsfall-Karte (23:5) ----------------------------------------
   Klickziel ist die ganze Karte, der sichtbare Verweis ist die Affordanz und
   nicht das einzige Ziel (Bauauftrag N27). Der Fokusring liegt deshalb
   aussen an der Karte, nicht um die Verweiszeile. */

.epi-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--color-base);
    border: 1px solid var(--color-secondary-20);
    border-radius: var(--standard-border-radius);
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
}

.epi-card__media {
    --epi-card-media-size: 200px;
    margin: 0;
    block-size: var(--epi-card-media-size);
    background-color: var(--color-secondary-20);
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Feste Pixelhoehe statt Prozentwert: bei "sizes=auto" + "loading=lazy"
   berechnet der Browser eine Prozent-Blockgroesse vor dem Laden gegen das
   intrinsische Seitenverhaeltnis (Breite/Hoehe-Attribute) statt gegen die
   Grid-Flaeche, wenn "place-items" nicht auf stretch steht. Ergebnis: ein
   einzelnes Bild ragt ueber die 200 px hinaus, je nach Seitenverhaeltnis.
   Absicherung zugleich fuer WordPress-Cores ".wp-block-image img { height:
   auto }" (bei gleicher Spezifitaet ohne !important gewinnen koennte). */
.epi-card__media img {
    display: block;
    inline-size: 100% !important;
    block-size: var(--epi-card-media-size) !important;
    object-fit: cover;
}

/* Flex statt Grid, damit der Verweis am Ende sich per margin-top:auto an das
   Zeilenende schiebt (Korrektur 2026-09-15: mit Grid + align-content:start
   packt sich der durch die gleich hohe Grid-Zeile entstehende Leerraum
   ausserhalb aller Zeilen-Spuren, margin-top:auto haette dort nichts, wohin
   es wachsen kann — Nutzer-Befund, Verweis sass je nach Textlaenge auf
   unterschiedlicher Hoehe). Gilt fuer beide Karten, die .epi-card__body
   nutzen (Anwendungsfall-Karte auf Produktseiten, Referenz-Karte auf der
   Startseite) — bewusst hier an der Basis und nicht mehr je Karte einzeln,
   weil beide dieselbe Erwartung teilen: Verweis immer ganz unten, Karten in
   einer Zeile gleich hoch. */
.epi-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

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

/* Nur der Verweis rutscht nach unten; eine Karte ohne Verweis endet mit
   ihrem Text, der direkt unter dem Titel stehen bleibt. */
.epi-card__body > :last-child:has(.epi-card__link) {
    margin-block-start: auto;
}

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

/* Sichtbar wie der Secondary-Button (global.css), aber kein echtes <button>:
   die Karte selbst ist das Klickziel (Bauauftrag N27), der Verweis nur die
   Affordanz dafuer. Deshalb hier dieselben Werte statt der .secondary-Klasse,
   um die Doppelrolle "Button und Card-Link" nicht in einem Element zu mischen. */
.epi-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    inline-size: 100%;
    padding: var(--default-btn-padding);
    min-height: var(--touch-min);
    background-color: var(--color-base);
    border: 1px solid var(--color-accent-dark-wcag);
    border-radius: var(--standard-border-radius);
    font-weight: 700;
    text-decoration: none;
}

/* Die Flaeche des Verweises deckt die Karte ab. */
.epi-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.epi-card__link:focus-visible {
    outline: none;
}

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

/* Textkarte ohne Bildbereich (Startseite Sektion 6, „Lösungsweg-Karte",
   Figma 506:435): dieselbe Klickflaeche und derselbe Fokusring wie .epi-card,
   aber ein einziger Innenbereich statt Bild+Body, und ein reiner Textverweis
   statt der Sekundaer-Button-Optik von .epi-card__link. */
.epi-card--text {
    grid-template-rows: none;
    gap: 0.75rem;
    padding: 1.5rem;
}

.epi-card--text > * {
    margin: 0;
}

/* Ohne Verweis muss nichts ans Kartenende: Titel und Text bleiben
   beieinander. Sonst verteilt die auf Zeilenhoehe gestreckte Karte ihren
   Rest auf alle Zeilen, und zwischen Titel und Text klafft eine Luecke
   (Befund 2026-09-29, Aufgaben-Kasten mit Karten ohne Verweis). Karten mit
   Verweis behalten ihr bisheriges Verhalten. */
.epi-card--text:not(:has(.epi-card__link)) {
    align-content: start;
}

/* Dekoratives Icon vor dem Kartentitel (Aufgaben-Kasten): kommt aus der
   Kartenklasse epi-icon--… (inc/karten-icons.php) und steht beim Ausgeben im
   h3, per aria-hidden von der Aussage getrennt und per
   display:block auf eine eigene Zeile ueber dem Titel gestellt — dieselbe
   Rolle wie der Haken bei .epi-point (dekorativ, Tuerkis, siehe DESIGN.md §6),
   nur als echtes <i>-Element statt CSS-Pseudoelement, weil hier sechs
   unterschiedliche Icons statt eines einzigen Assets gebraucht werden. */
.epi-card--text .epi-card__icon {
    display: block;
    margin-block-end: 0.75rem;
    color: var(--color-accent-dark-wcag);
    font-size: 1.5rem;
}

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

/* Platzhalter fuer einen spaeteren Verweis (Karte ohne Zielseite). */
.epi-card--text > p:empty {
    display: none;
}

.epi-card__link--plain {
    display: inline;
    padding: 0;
    min-height: 0;
    background-color: transparent;
    border: 0;
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
}