/**
 * Block: Stimmen der Branche
 *
 * Zitat-Slider mit rundem Porträt, Zitatgeber, Zitat, Button
 * und vertikaler Paginierung mit animierter Indikator-Linie.
 *
 * Modifier:
 *   .block--pad-{none|normal|lg}
 *   .block--bg-{beige|white|dunkelbeige|navy|transparent}
 *   .block--autoplay
 *   .block--pause-on-hover
 */

.block--stimmen {
    position: relative;
}

/* Linien-Override: SVG vollflächig, Y kommt direkt in den Polyline-
 * Punkten (siehe assets/js/modules/stimmen-line.js). Strich-Animation
 * läuft ruhig in 4500 ms — analog Hero-Home / News. */
.block--stimmen > .block__line-svg {
    top: 0;
    height: 100%;
}

.block--stimmen .block__line-path {
    transition-duration: 4500ms;
}

/* z-index 3 hebt Inhalt (Avatar + Body + Dots + Eyebrow) ÜBER die Linie
 * im SVG (z-index 2 aus scroll-line.css). Die Linie schimmert zwischen
 * den Elementen durch, Text/Buttons sind aber leserlich. */
.block--stimmen .stimmen__inner {
    position: relative;
    z-index: 3;
}

.block--stimmen.block--pad-none   { padding-block: 0; }
.block--stimmen.block--pad-normal { padding-block: var(--space-16); }
.block--stimmen.block--pad-lg     { padding-block: var(--space-24); }

.block--stimmen.block--bg-beige       { background-color: var(--color-beige); }
.block--stimmen.block--bg-dunkelbeige { background-color: var(--color-bg-alt); }
.block--stimmen.block--bg-white       { background-color: var(--color-white); }
.block--stimmen.block--bg-navy {
    background-color: var(--color-bg-premium);
    color: var(--color-text-on-navy);
}
.block--stimmen.block--bg-transparent { background-color: transparent; }

/* ── Inner-Container ──────────────────────────── */

.stimmen__inner {
    position: relative;
    z-index: var(--z-raised);
}

.stimmen__eyebrow {
    margin: 0 0 var(--space-16);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.block--bg-navy .stimmen__eyebrow { color: var(--color-text-on-navy); }

.stimmen__placeholder {
    padding: var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    background-color: var(--color-white);
    border: 1px dashed var(--color-steingrau);
}

/* ── Stage: Slides + Dots ─────────────────────── */

.stimmen__stage {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: start;
}

.stimmen__slides {
    display: grid;
    position: relative;
    min-height: 0;
}

/* Alle Slides stapeln sich in derselben Grid-Zelle. */
.stimmen__slide {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: var(--space-8);
    align-items: start;

    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;

    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

/* Ohne Avatar nimmt der Body-Content die volle Breite ein und die
 * Autoren-Zeile (Name + Position) wandert unter das Zitat. */
.stimmen__slide--no-avatar {
    grid-template-columns: 1fr;
}

.stimmen__slide--no-avatar .stimmen__body {
    max-width: none;
}

.stimmen__slide--no-avatar .stimmen__quote   { order: 1; }
.stimmen__slide--no-avatar .stimmen__meta    { order: 2; }
.stimmen__slide--no-avatar .stimmen__cta-wrap { order: 3; }

/* Nur ein Zitat: Avatar bleibt links (Default-Grid 3fr 7fr), aber
 * der Body läuft über die volle Breite (max-width aufgehoben) und
 * das Quote sitzt oben mit Name/Position darunter. */
.block--stimmen--single .stimmen__body {
    max-width: none;
}

.block--stimmen--single .stimmen__quote    { order: 1; }
.block--stimmen--single .stimmen__meta     { order: 2; }
.block--stimmen--single .stimmen__cta-wrap { order: 3; }

.stimmen__slide.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Bild rechts statt links (Modifier am Block).
 * Greift nur in 2-Spalten-Layout (mit Avatar). */
.block--stimmen--image-right .stimmen__slide:not(.stimmen__slide--no-avatar) {
    grid-template-columns: 7fr 3fr;
}

.block--stimmen--image-right .stimmen__slide:not(.stimmen__slide--no-avatar) .stimmen__body {
    grid-column: 1;
    grid-row: 1;
}

.block--stimmen--image-right .stimmen__slide:not(.stimmen__slide--no-avatar) .stimmen__avatar {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* ── Avatar (rund) ────────────────────────────── */

.stimmen__avatar {
    width: clamp(140px, 100%, 210px);
    justify-self: start;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-dunkelbeige);
    flex-shrink: 0;
}

/* Desktop: Bild rechts in seiner Spalte, 64 px Abstand zur Spaltenkante.
 * Nur Default-Layout (image-position = links) — image-right behält
 * seine eigene Ausrichtung (justify-self: end ohne Margin). */
@media (min-width: 1025px) {
    .block--stimmen:not(.block--stimmen--image-right)
        .stimmen__slide:not(.stimmen__slide--no-avatar)
        .stimmen__avatar {
        justify-self: end;
        margin-right: 64px;
    }
}

.stimmen__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Body (Meta, Zitat, Button) ───────────────── */

.stimmen__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 60ch;
}

.stimmen__meta {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--lh-snug);
}

.block--bg-navy .stimmen__meta { color: var(--color-text-on-navy); }

.stimmen__name {
    display: block;
    font-weight: var(--fw-semibold);
}

.stimmen__role {
    display: block;
    font-weight: var(--fw-regular);
    color: var(--color-text);
}

.block--bg-navy .stimmen__role { color: var(--color-text-on-navy); }

.stimmen__quote {
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-style: italic;
    /* Default-Zitatgröße — eine Stufe kleiner (war xl→3xl / 2.2vw). Greift nur
     * auf Zitate OHNE per-Zitat-Größenoverride: gesetzte Größen kommen inline
     * via gfu_typography_attr() und gewinnen gegen diese Regel. */
    font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    color: var(--color-navy);
}

.block--bg-navy .stimmen__quote { color: var(--color-text-on-navy); }

.stimmen__quote > *:first-child { margin-top: 0; }
.stimmen__quote > *:last-child  { margin-bottom: 0; }

.stimmen__cta-wrap {
    margin-top: var(--space-2);
}

/* ── Dots (vertikale Paginierung) ─────────────── */

.stimmen__dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-end;
    align-self: center;
}

.stimmen__dot-item { margin: 0; }

.stimmen__dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    transition: color var(--duration-normal) var(--ease-default);
}

.stimmen__dot:hover,
.stimmen__dot:focus-visible {
    color: var(--color-text);
    outline: none;
}

.stimmen__dot:focus-visible .stimmen__dot-line {
    outline: 2px solid var(--color-line);
    outline-offset: 3px;
}

.stimmen__dot-num {
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.stimmen__dot-line {
    display: block;
    height: 2px;
    width: 24px;
    background-color: currentColor;
    transition:
        width var(--duration-normal) var(--ease-out),
        background-color var(--duration-normal) var(--ease-default);
}

.stimmen__dot.is-active {
    color: var(--color-line);
    font-weight: var(--fw-semibold);
}

.stimmen__dot.is-active .stimmen__dot-line {
    width: 64px;
    background-color: var(--color-line);
}

.block--bg-navy .stimmen__dot { color: var(--color-text-on-navy-muted); }
.block--bg-navy .stimmen__dot:hover,
.block--bg-navy .stimmen__dot:focus-visible { color: var(--color-text-on-navy); }
.block--bg-navy .stimmen__dot.is-active { color: var(--color-line); }

/* ── Responsive ───────────────────────────────── */

@media (max-width: 768px) {
    .stimmen__stage {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .stimmen__slide {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--space-4);
        /* Inhalt aus der linken Linie holen (sitzt 20 px vom Block-Rand,
         * stimmen-line.js MOBILE_LEFT_INSET_PX). Symmetrisch, damit der
         * zentrierte Text mittig bleibt. */
        padding-inline: var(--space-6);
    }

    /* Bild zentrieren (überschreibt das Default justify-self: start). */
    .stimmen__avatar {
        justify-self: center;
        margin: 0;
    }

    .stimmen__body {
        align-items: center;
    }

    .stimmen__dots {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-self: center;
        gap: var(--space-6);
    }

    .stimmen__dot {
        flex-direction: column;
        gap: var(--space-2);
    }

    .stimmen__dot-line {
        width: 16px;
    }

    .stimmen__dot.is-active .stimmen__dot-line {
        width: 40px;
    }
}

/* Reduced Motion — Crossfade ohne Y-Shift */
@media (prefers-reduced-motion: reduce) {
    .stimmen__slide {
        transform: none;
        transition: opacity var(--duration-fast) linear;
    }

    .stimmen__dot-line {
        transition: width var(--duration-fast) linear;
    }
}