/* Statements: Karussell auf der Startseite, Raster auf der Unterseite.

   Die Datei verwendet ausschliesslich die globalen JF-Design-Tokens
   aus site-base.css. Dadurch bleibt der Abschnitt von den drei
   Homepage- und Aktivitaetsvarianten unabhaengig kombinierbar. */

.jf-statements,
.jf-statements *,
.jf-stimmen-alle,
.jf-stimmen-alle * {
    box-sizing: border-box;
}

/* WordPress legt Shortcode-Bloecke und ihre umgebenden Gruppen auf
   die globale Inhaltsbreite fest. Fuer diesen Abschnitt werden nur
   genau die Wrapper geloest, die unmittelbar das Karussell enthalten.
   Ohne diese Regeln bleiben fuer drei Karten je nach Template nur rund
   670px uebrig und die Spalten werden unlesbar schmal. */
:root .wp-site-blocks .wp-block-shortcode:has(> .jf-statements),
:root .wp-site-blocks .wp-block-group:has(> .wp-block-shortcode > .jf-statements),
:root .wp-site-blocks .wp-block-shortcode:has(> .jf-stimmen-alle),
:root .wp-site-blocks .wp-block-group:has(> .wp-block-shortcode > .jf-stimmen-alle) {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible;
}

:root .wp-site-blocks .jf-statements,
.jf-statements {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: clamp(28px, 3.2vw, 46px) clamp(22px, 3vw, 58px);
    color: var(--jf-blau-nacht);
    font-family: var(--jf-schrift);
    background: var(--jf-hintergrund-2);
}

.jf-statements::before {
    display: none;
}

.jf-statements-inner {
    width: min(100%, 1480px);
    margin-inline: auto;
}

.jf-statements-kopf {
    max-width: 720px;
    margin: 0 auto clamp(1.85rem, 2.7vw, 2.6rem);
    text-align: center;
}

.jf-statements-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--jf-gold-tief);
    font-family: var(--jf-schrift-marke);
    font-size: var(--jf-schriftgroesse-label);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

:root .jf-statements-kopf h2 {
    margin: 0;
    color: var(--jf-blau-nacht);
    font-size: var(--jf-schriftgroesse-abschnitt-ruhig);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.jf-statements-untertitel {
    max-width: 500px;
    margin: .75rem auto 0;
    color: var(--jf-text-leise);
    font-size: clamp(1rem, .95rem + .2vw, 1.12rem);
    line-height: 1.4;
}

.jf-statements-buehne {
    position: relative;
    padding: 18px clamp(48px, 4vw, 64px);
}

.jf-statements-liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(20px, 2.6vw, 44px);
    grid-auto-rows: clamp(500px, 36vw, 610px);
}

.jf-statement-karte {
    display: none;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    padding: clamp(15px, 1.4vw, 20px) clamp(18px, 1.8vw, 26px);
    text-align: center;
    opacity: 0;
    transform: none;
    background: rgb(255 255 255 / 52%);
    border: 1px solid rgb(91 129 143 / 14%);
    border-radius: 24px;
    box-shadow: 0 12px 32px rgb(18 35 42 / 5%);
    transition:
        opacity 520ms var(--jf-ease),
        transform 620ms var(--jf-ease),
        box-shadow 520ms var(--jf-ease),
        background-color 520ms var(--jf-ease);
}

.jf-statement-karte.ist-links,
.jf-statement-karte.ist-mitte,
.jf-statement-karte.ist-rechts {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.jf-statement-karte.ist-links {
    grid-column: 1;
}

.jf-statement-karte.ist-mitte {
    grid-column: 2;
}

.jf-statement-karte.ist-rechts {
    grid-column: 3;
}

.jf-statement-karte.ist-links,
.jf-statement-karte.ist-rechts {
    width: min(100%, 350px);
    justify-self: center;
    padding-inline: clamp(15px, 1.3vw, 20px);
    opacity: 0.88;
}

.jf-statement-karte.ist-mitte {
    z-index: 2;
    width: 100%;
    height: calc(100% + 36px);
    padding-inline: clamp(22px, 2vw, 30px);
    opacity: 1;
    transform: translateY(-18px);
    background: var(--jf-hintergrund-1);
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 26px;
    box-shadow:
        0 22px 54px rgb(18 35 42 / 18%),
        0 7px 20px rgb(18 35 42 / 10%),
        inset 0 1px rgb(255 255 255 / 18%);
}

.jf-statement-portraet {
    position: relative;
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgb(219 197 143 / 78%);
    border-radius: 50%;
    background: var(--jf-hell);
    box-shadow: 0 14px 30px rgb(18 35 42 / 13%);
    transition:
        width 620ms var(--jf-ease),
        box-shadow 520ms var(--jf-ease),
        filter 520ms var(--jf-ease);
}

.jf-statement-karte.ist-links .jf-statement-portraet,
.jf-statement-karte.ist-rechts .jf-statement-portraet {
    filter: saturate(0.94);
}

.jf-statement-karte.ist-mitte .jf-statement-portraet {
    width: 195px;
    height: 195px;
    box-shadow:
        0 16px 34px rgb(18 35 42 / 16%),
        0 0 0 6px rgb(255 255 255 / 76%);
}

.jf-statement-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--jf-ease);
}

.jf-statement-karte.ist-mitte:hover .jf-statement-bild {
    transform: scale(1.035);
}

:root .jf-statement-karte blockquote {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 9px 0 0;
    padding: 18px clamp(12px, 1.5vw, 22px) 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #b9cbd0 transparent;
    scrollbar-width: thin;
    border: 0;
}

.jf-statement-karte blockquote::before {
    content: "“";
    position: static;
    flex: 0 0 auto;
    margin-top: auto;
    /* Georgia reserviert unter dem sichtbaren Anführungszeichen viel
       unsichtbaren Schrift-Raum. Der negative Abstand gleicht exakt
       diesen Font-Bereich aus; zwischen Zeichen und Text bleibt nur
       ungefähr eine normale Textzeile. */
    margin-bottom: -0.8rem;
    color: var(--jf-gold-tief);
    font-family: var(--jf-schrift-zitat);
    font-size: var(--jf-schriftgroesse-zitatzeichen);
    line-height: .55;
    transform: translateY(.3rem);
}

:root .jf-statement-karte blockquote p {
    width: 100%;
    max-width: 38ch;
    margin: 0 auto auto;
    color: var(--jf-blau-nacht);
    font-size: var(--jf-schriftgroesse-text);
    font-weight: 500;
    line-height: 1.58;
    text-wrap: balance;
}

:root .jf-statement-karte.ist-mitte blockquote p {
    color: #fff;
    font-size: var(--jf-schriftgroesse-text);
    font-weight: 600;
    line-height: 1.52;
}

.jf-statement-karte figcaption {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    color: var(--jf-text-leise);
    font-size: var(--jf-schriftgroesse-meta);
    line-height: 1.35;
}

.jf-statement-karte figcaption strong {
    color: var(--jf-blau-tief);
    font-size: var(--jf-schriftgroesse-text);
    font-weight: 700;
}

.jf-statement-karte.ist-mitte figcaption {
    color: #e1eef1;
}

.jf-statement-karte.ist-mitte figcaption strong {
    color: #fff;
}

.jf-statement-karte.ist-mitte blockquote {
    scrollbar-color: rgb(255 255 255 / 55%) transparent;
}

.jf-statements-pfeil {
    position: absolute;
    z-index: 5;
    top: 43%;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    color: var(--jf-blau-nacht);
    background: rgb(255 255 255 / 74%);
    border: 1px solid rgb(91 129 143 / 24%);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgb(18 35 42 / 12%);
    opacity: 0.2;
    cursor: pointer;
    transform: translateY(-50%) scale(0.92);
    transition:
        opacity 220ms ease,
        transform 320ms var(--jf-ease),
        color 220ms ease,
        background-color 220ms ease;
    backdrop-filter: blur(10px);
}

.jf-statements-buehne:hover .jf-statements-pfeil,
.jf-statements-pfeil:focus-visible {
    opacity: 0.92;
    transform: translateY(-50%) scale(1);
}

.jf-statements-pfeil:hover {
    color: var(--jf-weiss);
    background: var(--jf-blau-tief);
}

.jf-statements-pfeil:focus-visible {
    outline: 3px solid var(--jf-gold-tief);
    outline-offset: 4px;
}

.jf-statements-pfeil svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jf-statements-zurueck {
    left: 0;
}

.jf-statements-weiter {
    right: 0;
}

.jf-statements-punkte {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(10px, 1.3vw, 17px);
}

.jf-statements-punkte button {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    background: rgb(54 86 98 / 28%);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition:
        width 320ms var(--jf-ease),
        background-color 220ms ease,
        transform 220ms ease;
}

.jf-statements-punkte button:hover,
.jf-statements-punkte button:focus-visible {
    background: var(--jf-gold-hell);
    transform: scale(1.25);
}

.jf-statements-punkte button:focus-visible {
    outline: 2px solid var(--jf-gold-tief);
    outline-offset: 4px;
}

.jf-statements-punkte button.ist-aktiv {
    width: 28px;
    background: var(--jf-gold);
}

.jf-statements-hinweis {
    margin: 24px auto;
    padding: 14px 18px;
    max-width: 760px;
    color: #6a541d;
    background: #fff8e7;
    border: 1px solid var(--jf-gold);
    border-radius: 10px;
}

/* Auf kleinen Bildschirmen steht die hervorgehobene Stimme allein.
   Drei Portraets nebeneinander waeren dort zu klein, um Personen und
   kurze Zitate noch gut erfassen zu koennen. Wischen bleibt aktiv. */
@media (max-width: 820px) {
    .jf-statements {
        padding-inline: 18px;
    }

    .jf-statements-buehne {
        padding-inline: 42px;
    }

    .jf-statements-liste {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: clamp(460px, 118vw, 520px);
    }

    .jf-statement-karte.ist-links,
    .jf-statement-karte.ist-rechts {
        display: none;
    }

    .jf-statement-karte.ist-mitte {
        grid-column: 1;
        width: min(100%, 460px);
        height: 100%;
        margin-inline: auto;
        padding: clamp(16px, 4vw, 20px);
        transform: none;
    }

    :root .jf-statement-karte blockquote {
        padding-inline: clamp(24px, 7vw, 34px);
    }

    .jf-statements-pfeil {
        width: 44px;
        height: 44px;
        opacity: 0.62;
    }
}

@media (max-width: 520px) {
    .jf-statements {
        padding: 28px 14px;
    }

    .jf-statements-kopf {
        margin-bottom: 20px;
        padding-inline: 10px;
    }

    .jf-statements-buehne {
        padding-inline: 10px;
    }

    .jf-statement-karte.ist-mitte {
        border-radius: 24px;
        box-shadow: 0 18px 44px rgb(18 35 42 / 14%);
    }

    .jf-statement-karte.ist-mitte .jf-statement-portraet {
        width: min(46vw, 195px);
        height: min(46vw, 195px);
    }

    .jf-statements-pfeil {
        top: 36%;
    }

    .jf-statements-zurueck {
        left: -2px;
    }

    .jf-statements-weiter {
        right: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jf-statement-karte,
    .jf-statement-portraet,
    .jf-statement-bild,
    .jf-statements-pfeil,
    .jf-statements-punkte button {
        transition-duration: 0.01ms;
    }
}

/* Deep-Dive: alle Stimmen gleichzeitig als gleich hohe Dreierreihe. */
:root .wp-site-blocks .jf-stimmen-alle,
.jf-stimmen-alle {
    position: relative;
    isolation: isolate;
    overflow: clip;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: clamp(60px, 5.7vw, 90px) 22px;
    color: var(--jf-text);
    background:
        radial-gradient(circle at 90% 18%, rgb(219 197 143 / 24%), transparent 27rem),
        radial-gradient(circle at 8% 88%, rgb(91 129 143 / 9%), transparent 30rem),
        linear-gradient(135deg, #fbf7ee, #f7f4ee 57%, #f5f8f7);
    font-family: var(--jf-schrift);
}

:root body:has(.jf-wer--statisch) .wp-site-blocks .jf-stimmen-alle {
    background: var(--jf-hintergrund-1) !important;
}
:root body:has(.jf-wer--statisch) .jf-stimmen-alle h2 {
    color: #fff;
}

.jf-stimmen-alle-inner {
    width: min(100%, 1160px);
    margin-inline: auto;
}

:root .jf-stimmen-alle h2 {
    margin: 0;
    color: var(--jf-blau-nacht);
    font-size: var(--jf-schriftgroesse-abschnitt-ruhig);
    font-weight: 600;
    text-align: center;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.jf-stimmen-alle-untertitel {
    margin: 12px auto clamp(34px, 3.5vw, 50px);
    color: #fff;
    text-align: center;
    font-size: var(--jf-schriftgroesse-text-betont);
}

.jf-stimmen-alle h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 18px auto 0;
    background: var(--jf-gold-tief);
    border-radius: 3px;
}

.jf-stimmen-alle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 56px);
    align-items: stretch;
}

.jf-stimmen-alle-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    height: auto;
    overflow: visible;
    margin: 0;
    padding: clamp(20px, 2.2vw, 28px);
    background: #fff;
    border: 1px solid rgb(91 129 143 / 18%);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgb(18 35 42 / 5%);
}

.jf-stimmen-alle-karte:nth-child(even) {
    background: #eaf4f8;
}

.jf-stimmen-alle-bild {
    flex: none;
    width: clamp(140px, 12vw, 170px);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgb(219 197 143 / 70%);
}

.jf-stimmen-alle-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:root .jf-stimmen-alle-karte blockquote {
    width: min(100%, 36ch);
    max-width: 100%;
    margin: 22px auto 0;
    padding: 0;
    border: 0;
    overflow: visible;
    text-align: center;
}
:root .jf-stimmen-alle-karte--kurz blockquote { width: min(100%, 25ch); }
:root .jf-stimmen-alle-karte--mittel blockquote { width: min(100%, 31ch); }
:root .jf-stimmen-alle-karte--lang blockquote { width: 100%; }

:root .jf-stimmen-alle-karte blockquote p {
    margin: 0;
    color: var(--jf-blau-nacht);
    font-size: var(--jf-schriftgroesse-text);
    font-weight: 500;
    line-height: 1.52;
}

.jf-stimmen-alle-karte figcaption {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 9px;
    margin-top: 18px;
    color: var(--jf-text-leise);
    font-size: var(--jf-schriftgroesse-meta);
    text-align: center;
}

.jf-stimmen-alle-karte figcaption strong {
    color: var(--jf-blau-tief);
    font-size: var(--jf-schriftgroesse-text);
}

@media (max-width: 980px) {
    .jf-stimmen-alle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .jf-stimmen-alle-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jf-stimmen-alle-karte {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .jf-stimmen-alle-bild {
        width: 140px;
    }

    :root .jf-stimmen-alle-karte blockquote {
        margin-top: 18px;
    }

    .jf-stimmen-alle-karte figcaption {
        margin-top: 10px;
    }
}