/* --- Zwei Bereiche (epi/zwei-bereiche) -------------------------------------
   Zwei gleichwertige Bereiche nebeneinander. Je Bereich ein grosses Foto,
   darauf liegt mittig ein weisses Blatt mit Name, Text, Produktlogos und
   Textlink (Papiermotiv, nicht gedreht). Die ganze Flaeche ist klickbar (der
   Link spannt sie auf). Hover und Fokus: Foto zoomt leicht, der Name bekommt
   einen gelben Textmarker. Bewusst ohne farbige Kanten, Pillen und Schraeglage.
   Mobil stehen die Bereiche untereinander. */

.epi-bereiche__kopf {
    display: grid;
    gap: var(--wp--preset--spacing--md);
}

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

.epi-bereiche {
    display: grid;
    gap: clamp(3rem, 5vw, 4.5rem);
    padding-block-start: var(--wp--preset--spacing--sm);
}

@media screen and (min-width: 900px) {
    .epi-bereiche {
        /* minmax(0, …): Ein langes Titelwort darf eine Spalte nicht verbreitern. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.epi-bereich {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.epi-bereich .epi-bereich__bild {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}

.epi-bereich__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: scale 400ms var(--motion-entrance-easing);
}

.epi-bereich:is(:hover, :focus-within) .epi-bereich__bild img {
    scale: 1.04;
}

/* Das Blatt liegt auf der Unterkante des Fotos. */
.epi-bereich__blatt {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-block-start: clamp(-5rem, -6vw, -3rem);
    margin-inline: clamp(1rem, 3vw, 2.5rem); /* mittig, Foto steht beidseitig gleich ueber */
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background-color: var(--color-base);
    border-radius: 2px;
    box-shadow: 0 10px 30px -12px rgb(120 92 40 / 0.28), 0 1px 2px 0 rgb(120 92 40 / 0.14);
    container-type: inline-size;
}

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

.epi-bereich .epi-bereich__titel {
    color: var(--color-text);
    /* Ohne automatische Trennung: Die Groesse folgt der Blattbreite, damit
       „Informationsmanagement“ in jeder Spalte in eine Zeile passt und beide
       Bereiche gleich gross gesetzt sind. */
    font-size: clamp(1.125rem, 8cqi, 2.25rem);
    line-height: 1.15;
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: break-word;
}

/* Gelber Textmarker unter dem Namen bei Hover und Fokus. Als Unterstreichung
   umgesetzt, damit er jeder Zeile folgt (das H3 ist ein Flex-Element). */
.epi-bereich__titel {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.3em;
    text-underline-offset: -0.12em;
    text-decoration-skip-ink: none;
    transition: text-decoration-color 250ms var(--motion-state-easing);
}

.epi-bereich:is(:hover, :focus-within) .epi-bereich__titel {
    text-decoration-color: var(--color-primary);
}

.epi-bereich__text {
    display: grid;
    gap: var(--wp--preset--spacing--sm);
}

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

/* Produktlogos in Grau (DESIGN.md 6): die schwarzen Dateien auf gut 70 %.
   Gleiche Breite statt gleicher Hoehe gleicht die Wortmarken optisch aus. */
.epi-bereich__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-block-start: auto !important;
    padding-block-start: 0.5rem;
}

.epi-bereich__logos figure {
    margin: 0;
}

.epi-bereich__logos img {
    display: block;
    inline-size: 112px;
    block-size: auto;
    max-block-size: 40px;
    object-fit: contain;
    opacity: 0.68;
}

.epi-bereich__link {
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--color-secondary-20);
}

.epi-bereich__link a {
    display: inline-block;
    color: var(--color-accent-dark-wcag);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

/* Der Link spannt den ganzen Bereich auf. */
.epi-bereich__link a::before {
    content: "";
    position: absolute;
    inset: 0;
}

.epi-bereich__link a::after {
    content: "→" / "";
    display: inline-block; /* traegt die Unterstreichung des Links nicht mit */
    margin-inline-start: 0.5em;
    transition: translate var(--motion-state-duration) var(--motion-state-easing);
}

/* \FE0E erzwingt das Textzeichen statt eines farbigen Emojis. */
.epi-bereich__link a[target="_blank"]::after {
    content: "↗\FE0E" / "(externe Website, öffnet in neuem Tab)";
}

.epi-bereich:hover .epi-bereich__link a {
    text-decoration-thickness: 2px;
}

.epi-bereich:hover .epi-bereich__link a::after {
    translate: 4px 0;
}

/* Fokus: Ring um den ganzen Bereich statt nur um den Linktext. */
.epi-bereich__link a:focus-visible {
    outline: none;
}

.epi-bereich:has(.epi-bereich__link a:focus-visible) {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .epi-bereich__bild img,
    .epi-bereich__titel,
    .epi-bereich__link a::after {
        transition: none;
    }
}