/* --- Produktkarte (506:456) -----------------------------------------------
   Startseite Sektion 8 „Vier Produkte für unterschiedliche Aufgaben". Die
   Produktfarbe ist die einzige Fläche der Karte, nie Schriftfarbe (wie beim
   Hero, siehe Komponenten-Register) — deshalb eigene Klasse statt .epi-card
   (dessen weisse Grundflaeche hier nicht passt), aber mit demselben Link-
   und Fokusring-Mechanismus wie die uebrigen Karten. Figma zeigt hier flache,
   unrotierte Farbkarten; Rotation, waermerer Schatten (Design-Tokens
   elevation.papier) und die angedeutete umgeknickte Ecke (echte Haftnotiz
   statt Standard-Kartenschatten) sind eine bewusste Weiterentwicklung über
   Figma hinaus. Rotation folgt derselben Schraeglage-Regel wie das
   Kundenlogo-Band (DESIGN.md §6 Logo-Band: alternierend, hoechstens 2,5°) —
   ein gemeinsames „hingelegtes Papier"-Merkmal, kein eigener Wert je
   Komponente. Auf Hover/Fokus richtet sich die Karte gerade auf, damit
   Lesbarkeit und Fokusring nicht unter der Drehung leiden. */

.epi-produktkarte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 1.25 statt 1.5rem: bei vier Notizen passt „Lebensmittelindustrie“
       sonst nur getrennt in die Zeile. */
    padding: 1.25rem;
    border-radius: var(--standard-border-radius);
    box-shadow: 0 6px 14px 0 rgb(120 92 40 / 0.22), 0 1px 2px 0 rgb(120 92 40 / 0.18);
    overflow: clip;
    transition: rotate 0.15s ease, box-shadow 0.15s ease;
}

/* Haftnotizen liegen immer in einer Reihe nebeneinander, nie im Raster
   (Linus 28.10.2026). Das umgebende epi-grid wird dafuer zur Reihe. Unter
   1280 px laeuft sie waagerecht wie die Zeitleiste (bei 1024 waeren vier
   Notizen zu schmal fuer Woerter wie „Abweichungsmanagement“); die angeschnittene
   naechste Notiz zeigt, dass es weitergeht. Innenabstand und Gegenrand
   lassen Schatten und Drehung Luft. Spalten statt Flex: mit Flex
   wuerde die gestreckte Hoehe ueber das Seitenverhaeltnis die Breite
   treiben. */
.epi-grid:has(> .epi-produktkarte) {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(17.5rem, 78%);
    padding: 1rem 0.75rem 1.5rem;
    margin-inline: -0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary-20) transparent;
}

/* Quadratisch; mehr Text darf die Notiz nach unten verlaengern
   (aspect-ratio ist nur das Mindestmass, daher oben clip statt hidden).
   min-width: 0 haelt die Hoehe davon ab, die Spalte zu verbreitern;
   stretch macht Notizen einer Reihe gleich hoch. */
.epi-produktkarte {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    aspect-ratio: 1;
    scroll-snap-align: start;
    /* Getrennt werden nur sehr lange Woerter („Verbesserungsmass-nahmen“),
       nicht schon „qualitaetsre-levanter“; Rest bricht notfalls um statt
       abgeschnitten zu werden (overflow: clip). */
    hyphens: auto;
    hyphenate-limit-chars: 20 9 9;
    overflow-wrap: break-word;
}

/* Ab 1280 px steht die Reihe ohne Scrollen. Jede Notiz ist so breit wie in
   der Viererreihe, egal wie viele es sind: drei Notizen werden nicht
   groesser, die Reihe endet frueher (linksbuendig wie Titel und Text der
   Sektion; im Ausblick mittig, siehe dort). */
@media screen and (min-width: 1280px) {
    .epi-grid:has(> .epi-produktkarte) {
        grid-auto-columns: calc((100% - 3 * var(--epi-grid-gap)) / 4);
        overflow: visible;
    }
}

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

/* Angedeutete umgeknickte Ecke unten rechts (klassisches Post-it-Merkmal,
   das "Ablösen" vom Stapel). Reine CSS-Dreiecksform, keine Bild-Textur. */
.epi-produktkarte::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 22px 22px;
    border-color: transparent transparent rgb(0 0 0 / 0.16) transparent;
}

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

.epi-produktkarte__title {
    color: var(--color-text);
    font-family: var(--font-secondary);
    /* 1.3125rem: „Lebensmittelindustrie“ passt bei vier Notizen ungetrennt */
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.3;
}

.epi-produktkarte--teleform { background-color: var(--color-product-teleform); }
.epi-produktkarte--liquidoffice { background-color: var(--color-product-liquidoffice); }
.epi-produktkarte--mfiles { background-color: var(--color-product-mfiles); }
.epi-produktkarte--mfiles-qms { background-color: var(--color-product-mfiles-qms); }

/* Schraeglage nach Position, nicht nach Produktfarbe: drei Karten derselben
   Farbe (z. B. drei TeleForm-Themen) laegen sonst alle gleich schief. */
.epi-produktkarte:nth-child(4n+1) { rotate: -2.5deg; }
.epi-produktkarte:nth-child(4n+2) { rotate: 2deg; }
.epi-produktkarte:nth-child(4n+3) { rotate: -1.5deg; }
.epi-produktkarte:nth-child(4n+4) { rotate: 2.5deg; }

/* Jede Notiz richtet sich beim Zeigen auf, auch ohne Link: die Bewegung
   gehoert zum Papiermotiv, nicht zur Klickbarkeit. Steht nach der
   Schraeglage, weil :hover sonst gegen :nth-child verliert. */
.epi-produktkarte:hover,
.epi-produktkarte:focus-within {
    rotate: 0deg;
    box-shadow: 0 10px 20px 0 rgb(120 92 40 / 0.28), 0 2px 4px 0 rgb(120 92 40 / 0.2);
}