/* Kundenstimmen als Karussell (Block gts/stimmen-karussell), als einzelne Karte (Block gts/stimme-einzeln)
   und die Seite einer einzelnen Stimme (single-gts_stimme.php). Karussell und einzelne Karte nutzen dieselbe
   Karte ".stimme-folie". Ohne JavaScript und im Editor stehen die Stimmen untereinander. Das Skript des
   Blocks setzt "stimmen-karussell--aktiv": dann liegen alle Folien übereinander, nur die aktive ist zu sehen,
   und das Karussell ist so hoch wie die längste Stimme, damit beim Wechsel nichts springt. Eine Folie ist
   so breit wie der Inhalt der Seite. */

.stimmen-karussell-folien {
    display: grid;
    gap: 20px;
}

.stimme-folie {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    margin: 0;
    padding: 40px 44px 34px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: var(--mist);
}

.stimme-folie::before {
    content: "\f10d";
    font-family: FontAwesome;
    font-size: 30px;
    line-height: 1;
    color: var(--sprout);
}

.stimme-folie blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

/* ".gts-firma" davor, damit die Textfarbe der dunklen Bänder nicht in die helle Karte durchschlägt */
.gts-firma .stimmen-karussell .stimme-folie blockquote p,
.gts-firma .stimme-einzeln .stimme-folie blockquote p {
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: 1.6;
    color: var(--ink);
}

/* Ungekürzte Zitate haben mehrere Absätze */
.gts-firma .stimme-einzeln .stimme-folie blockquote p + p {
    margin-top: 14px;
}

.gts-firma .stimmen-karussell .stimme-folie .weiterlesen,
.gts-firma .stimme-einzeln .stimme-folie .weiterlesen {
    margin-left: 4px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    color: #3f7a12;
}

.gts-firma .stimmen-karussell .stimme-folie .weiterlesen:hover,
.gts-firma .stimmen-karussell .stimme-folie .weiterlesen:focus,
.gts-firma .stimme-einzeln .stimme-folie .weiterlesen:hover,
.gts-firma .stimme-einzeln .stimme-folie .weiterlesen:focus {
    text-decoration: underline;
    color: var(--forest);
}

.stimme-folie figcaption {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    font-size: 15px;
    line-height: 1.4;
    color: var(--muted);
}

/* "multiply" lässt den weißen Hintergrund mancher Logos in der hellen Kachel aufgehen */
.stimme-folie figcaption img {
    flex: none;
    width: auto;
    height: 84px;
    max-width: 255px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.stimme-folie figcaption strong {
    display: block;
    font-size: 16px;
    color: var(--ink);
}

/* Die Folien fliegen von der Seite herein und hinaus; was dabei über die Inhaltsbreite ragt, ist abgeschnitten */
.stimmen-karussell--aktiv .stimmen-karussell-folien {
    gap: 0;
    overflow: hidden;
}

.stimmen-karussell--aktiv .stimme-folie {
    grid-area: 1 / 1;
    visibility: hidden;
}

.stimmen-karussell--aktiv .stimme-folie.aktiv,
.stimmen-karussell--aktiv .stimme-folie.geht {
    visibility: visible;
}

/* Wechsel: die neue Stimme fliegt von rechts herein, die bisherige nach links hinaus. Beim Zurückblättern
   setzt das Skript "stimmen-karussell--rueckwaerts", dann läuft beides in die andere Richtung. */
.stimmen-karussell--aktiv .stimme-folie.kommt {
    animation: stimme-herein .7s cubic-bezier(.22, .8, .3, 1) both;
}

.stimmen-karussell--aktiv .stimme-folie.geht {
    animation: stimme-hinaus .7s cubic-bezier(.22, .8, .3, 1) both;
}

.stimmen-karussell--rueckwaerts .stimme-folie.kommt {
    animation-name: stimme-herein-von-links;
}

.stimmen-karussell--rueckwaerts .stimme-folie.geht {
    animation-name: stimme-hinaus-nach-rechts;
}

@keyframes stimme-herein {
    from { transform: translateX(104%); opacity: 0; }
    35% { opacity: 1; }
    to { transform: none; opacity: 1; }
}

@keyframes stimme-hinaus {
    from { transform: none; opacity: 1; }
    to { transform: translateX(-104%); opacity: 0; }
}

@keyframes stimme-herein-von-links {
    from { transform: translateX(-104%); opacity: 0; }
    35% { opacity: 1; }
    to { transform: none; opacity: 1; }
}

@keyframes stimme-hinaus-nach-rechts {
    from { transform: none; opacity: 1; }
    to { transform: translateX(104%); opacity: 0; }
}

/* Bedienleiste: zurück, ein Punkt je Stimme, weiter */
.stimmen-karussell-leiste {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.stimmen-karussell-leiste[hidden] {
    display: none;
}

.stimmen-karussell-leiste > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.stimmen-karussell-leiste > button:hover,
.stimmen-karussell-leiste > button:focus-visible {
    border-color: var(--sprout);
    color: #3f7a12;
}

.stimmen-karussell-leiste .punkte {
    display: flex;
    align-items: center;
}

/* Der durchsichtige Rand vergrößert die Fläche zum Antippen, ohne den Punkt größer zu zeichnen */
.stimmen-karussell-leiste .punkte button {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 7px solid transparent;
    border-radius: 999px;
    background: #c3d1b6;
    background-clip: padding-box;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.stimmen-karussell-leiste .punkte button[aria-current="true"] {
    width: 28px;
    background-color: var(--sprout);
}

.stimmen-karussell-leiste button:focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 2px;
}

/* Im dunklen Band: weiße Karte, helle Bedienleiste */
.band--dunkel .stimme-folie {
    border-color: transparent;
    background: #fff;
}

.band--dunkel .stimmen-karussell-leiste > button {
    border-color: rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
}

.band--dunkel .stimmen-karussell-leiste > button:hover,
.band--dunkel .stimmen-karussell-leiste > button:focus-visible {
    border-color: var(--sprout);
    color: var(--leaf);
}

.band--dunkel .stimmen-karussell-leiste .punkte button {
    background-color: rgba(255, 255, 255, .4);
}

.band--dunkel .stimmen-karussell-leiste .punkte button[aria-current="true"] {
    background-color: var(--sprout);
}

.band--dunkel .stimmen-karussell-leiste button:focus-visible {
    outline-color: #fff;
}

/* Die bisherigen Kundenstimmen-Karten (Block gts/stimmen) sind hell. Steht ihr Band dunkel, darf die helle
   Textfarbe der dunklen Bänder nicht in die Karten durchschlagen. */
.gts-firma.band--dunkel .abschnitt .stimme blockquote p {
    color: #3d4a37;
}

/* Seite einer einzelnen Kundenstimme */
.stimme-seite {
    max-width: 900px;
    margin: 0 auto;
}

.stimme-seite .stimme-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    padding: 40px 44px;
    border-radius: 30px;
    background: linear-gradient(180deg, var(--leaf), var(--mist));
}

.stimme-seite .stimme-kopf .text {
    flex: 1 1 320px;
    min-width: 0;
}

.stimme-seite .stimme-kopf .eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--forest);
}

.stimme-seite .stimme-kopf h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
}

.stimme-seite .stimme-kopf .einrichtung {
    margin: 10px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--muted);
}

.stimme-seite .stimme-kopf .logo {
    flex: none;
    padding: 18px 22px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 40px -22px rgba(20, 40, 10, .45);
}

.stimme-seite .stimme-kopf .logo img {
    display: block;
    width: auto;
    height: 72px;
    max-width: 220px;
    object-fit: contain;
}

.stimme-seite .stimme-zitat {
    margin: 36px 0 0;
    padding: 0 44px;
    border: 0;
}

.stimme-seite .stimme-zitat::before {
    content: "\f10d";
    display: block;
    margin-bottom: 14px;
    font-family: FontAwesome;
    font-size: 30px;
    line-height: 1;
    color: var(--sprout);
}

.gts-firma.stimme-seite .stimme-zitat p {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.7;
    color: var(--ink);
}

.gts-firma.stimme-seite .stimme-zitat p:last-child {
    margin-bottom: 0;
}

.stimme-seite .stimme-weitere {
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

.stimme-seite .stimme-weitere h2 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
}

.stimme-seite .stimme-weitere ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stimme-seite .stimme-weitere a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    text-decoration: none;
    color: var(--muted);
    transition: border-color .2s, box-shadow .2s;
}

.stimme-seite .stimme-weitere a:hover,
.stimme-seite .stimme-weitere a:focus {
    border-color: var(--sprout);
    box-shadow: 0 18px 40px -26px rgba(20, 40, 10, .5);
}

.stimme-seite .stimme-weitere strong {
    font-size: 16px;
    color: var(--ink);
}

.stimme-seite .stimme-weitere .einrichtung {
    font-size: 14.5px;
}

.stimme-seite .stimme-weitere .mehr {
    margin-top: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: #3f7a12;
}

@media (max-width: 575px) {
    .stimme-folie {
        padding: 28px 22px 24px;
        border-radius: 22px;
    }

    .gts-firma .stimmen-karussell .stimme-folie blockquote p,
    .gts-firma .stimme-einzeln .stimme-folie blockquote p {
        font-size: 17px;
    }

    /* Neben dem größeren Logo bleibt auf dem Handy wenig Platz: Name und Einrichtung rutschen dann darunter */
    .stimme-folie figcaption {
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .stimme-folie figcaption img {
        height: 66px;
        max-width: 165px;
    }

    .stimme-folie figcaption span {
        flex: 1 1 150px;
    }

    .stimme-seite .stimme-kopf {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .stimme-seite .stimme-zitat {
        padding: 0 6px;
    }

    .gts-firma.stimme-seite .stimme-zitat p {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stimmen-karussell--aktiv .stimme-folie.kommt,
    .stimmen-karussell--aktiv .stimme-folie.geht {
        animation: none;
    }

    .stimmen-karussell-leiste .punkte button {
        transition: none;
    }
}