/* =============================================================================
   Google-Rezensionen — Trust-Section der zahn-direkt.de-Startseite
   Eingebunden nach Abschnitt 2 (Anbieter im Vergleich).
   Vorlage: LagerRent trust-reviews (links Bewertung, rechts Schieber).

   FARBEN UND SCHRIFT kommen von DIESER Seite, nicht von privadent.de: die
   --comparison-*-Variablen aus comparison-style.css und die Systemschrift.
   Der Aufbau (Anordnung, Karten, Schieber, Bedienung) ist derselbe wie im
   abgenommenen Entwurf — nur eingefaerbt wie das Haus, in dem es steht.

   KEIN .pa-site-Scoping: das ist der privadent.de-Namensraum und greift hier
   nicht. Die Klassen `google-revs__*` sind fuer sich eindeutig.

   KEINE Icon-Schriftart: zahn-direkt laedt die Phosphor-Icons nicht (die haengen
   im privadent-Block von head-with-css-tracking.ejs). Alle Zeichen sind deshalb
   eingebettetes SVG.

   SCHIEBER-MECHANIK: natives Scroll-Snapping, kein transform-Rechnen. Die Karten
   liegen in einem waagerecht scrollbaren Streifen und rasten ein. Folge: Wischen
   auf dem Handy und Zwei-Finger-Wischen am Trackpad funktionieren ohne eine
   Zeile JavaScript; Pfeile und Punkte sind Zugabe. Faellt das Skript aus, bleibt
   die Sektion vollstaendig benutzbar.
   ============================================================================= */

/* --- Flaeche --------------------------------------------------------------- */

/*
 * BOX-SIZING FUER DIESEN BAUSTEIN.
 *
 * Diese Seite setzt `box-sizing` NICHT global auf `border-box` (gemessen am
 * laufenden Stand: body, Bestandssektionen und dieser Baustein standen alle auf
 * `content-box`). Folge ohne diese Regel: Innenabstand und Rahmen kommen auf jede
 * Breitenangabe obendrauf. Die Zitatkarten waren dadurch 351 statt 305 px breit,
 * und die dritte Karte ragte um 134 px aus dem Streifen — auf einer Seite, wo
 * drei nebeneinander passen sollen.
 *
 * Bewusst nur innerhalb dieses Bausteins, nicht global: Der Bestand rechnet seit
 * jeher mit `content-box`, eine seitenweite Umstellung waere ein Eingriff in
 * fremde Sektionen.
 */
.google-revs-section,
.google-revs-section *,
.google-revs-section *::before,
.google-revs-section *::after {
    box-sizing: border-box;
}

/*
 * GRAUER STREIFEN VON RAND ZU RAND.
 *
 * Der Block sitzt in .tariff-comparison-section (max-width 1200 px, zentriert).
 * `width: 100vw` plus der Seitenrand `calc(50% - 50vw)` hebt genau diese
 * Begrenzung auf: Der Rand zieht die linke Kante um die halbe Differenz zwischen
 * Elternbreite und Fensterbreite nach aussen, die Breite fuellt den Rest.
 *
 * Warum das hier gefahrlos ist: `body` und `html` tragen `overflow-x: hidden`
 * (head-with-css-tracking.ejs, kritisches CSS). Ohne das wuerde `100vw` die
 * Breite des Rollbalkens mitzaehlen und die Seite waagerecht scrollbar machen.
 * Faellt diese Regel jemals weg, ist das hier die erste Stelle, die es merkt.
 */
.google-revs-section {
    background-color: var(--comparison-gray-100, #f3f4f6);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 40px 0 36px;
    /*
     * KEIN Aussenabstand nach oben. Ein solcher Abstand liegt ausserhalb des
     * grauen Grundes und laesst die Kante ausgefranst wirken — besonders, weil
     * der Streifen seitlich aus dem Elternrahmen ausbricht. Der Abstand zum
     * Vorherigen haengt stattdessen UNTEN am vorangehenden Element
     * (`.age-note`, siehe weiter unten). So gehoert der Leerraum dem Element,
     * das ihn erzeugt, und nicht dem farbigen Streifen.
     */
    margin-top: 0;
    margin-bottom: 8px;
    text-align: left;
}

/*
 * Der Abstand zwischen dem Kopfbereich und dem grauen Streifen.
 *
 * `.age-note` („*Beitrag richtet sich nach Ihrem Alter") ist das letzte Element
 * vor diesem Baustein (tariff-comparison.ejs, Ende des tariff-boxes-wrapper).
 * Der Abstand sitzt hier statt als margin-top am Streifen, damit kein
 * ungefaerbter Streifen ueber dem grauen Grund entsteht.
 *
 * Eng gefasst auf genau die Stelle: nur eine `.age-note`, auf die direkt dieser
 * Baustein folgt. Andere Seiten mit `.age-note` bleiben unberuehrt.
 */
.age-note:has(+ .google-revs-section) {
    margin-bottom: 28px;
}

/* Holt die Inhaltsbreite zurueck, die der Streifen aufgegeben hat. Ohne diesen
   Rahmen liefen die Zitatkarten auf breiten Schirmen ueber die volle Flaeche.

   Die Masse spiegeln den Container der privadent-Leiste direkt darunter
   (.container: max-width 1400 + 32px Seitenabstand → .tariff-comparison-section:
   max-width 1200). Diese Box ist border-box, deshalb 1200 + 2×32 = 1264 als
   Aussenmass; der Inhalt landet so auf jeder Breite buendig mit der Leiste.
   Gemessen 2026-09-29 bei 1000/1280/1440 px. Vorher 1200/24px — 24 px schmaler
   pro Seite als die Leiste bei 1440, 8 px breiter bei 1000. */
.google-revs-inner {
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Same breakpoints as .container's side padding (comparison-style.css), measured
   2026-09-29: 32px down to 769, 15px from 768 to 481, 10px from 480. The old
   single 860px step left the cards 17px wider than the band at 800px and 5px
   narrower at 390px. */
@media (max-width: 768px) {
    .google-revs-inner {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .google-revs-inner {
        padding: 0 10px;
    }
}

/* Im Kopfbereich ist alles mittig gesetzt (.insurer-logos-section hat
   text-align:center, und das wirkt herein). Ueberschrift und Vorspann folgen dem;
   die Karten darunter brauchen linksbuendigen Text, sonst liest sich kein Zitat. */
.google-revs-headline {
    /* Dieselben 2 rem wie .comparison-section-title (comparison-style.css:220),
       damit der Block auf Augenhoehe mit den Abschnitts-Ueberschriften steht —
       aber ohne deren Unterstrich, der dort die Gliederung markiert. */
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--comparison-primary-navy, #1a365d);
    text-align: center;
    margin: 0 0 8px;
}

.google-revs-intro {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--comparison-gray-500, #6b7280);
    text-align: center;
    margin: 0;
}

/*
 * Zwei Spalten, ZWEI Zeilen: oben Bewertungsbox und Kartenstreifen, darunter die
 * Bedienleiste unter dem Streifen. Die Box ist ein Geschwister des Streifens (kein
 * gemeinsamer Wrapper) — nur so streckt `stretch` sie auf exakt die Hoehe der
 * Zitatkarten und nicht auf Karten PLUS Bedienleiste.
 *
 * `align-items` steht bewusst NICHT auf `start`: Vorher war die Box dadurch nur so
 * hoch wie ihr Inhalt (gemessen 261 px gegen 357 px der Karten) und sass ausserdem
 * 6 px zu hoch, weil der Streifen oben einen Innenabstand fuer den Kartenschatten
 * hat, den die Box nicht kannte. Der Abstand wird unten am Streifen ausgeglichen.
 */
.google-revs {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto auto;
    gap: 0 28px;
    margin-top: 1.75rem;
    text-align: left;
}

/* --- Links: Note, Sterne, Google --- */

/*
 * Gleiche Bauart wie eine Zitatkarte: gleicher Rahmen, gleiche Rundung, gleicher
 * Schatten, gleiche Hoehe. Sie sitzt in Zeile 1, Spalte 1 und wird vom Raster auf
 * die Hoehe des Kartenstreifens gestreckt; der Inhalt steht darin mittig.
 *
 * KEIN `position: sticky` mehr: Solange die Box so hoch ist wie die Karten, gibt
 * es nichts, woran sie kleben koennte — sticky haette sie nur wieder aus der Reihe
 * gehoben. Das war der Grund fuer den frueheren Versatz.
 *
 * Die 6 px oben und 14 px unten spiegeln den Innenabstand des Kartenstreifens
 * (dort Platz fuer den Schatten). Ohne sie stuende die Box 6 px hoeher als die
 * Karten daneben — genau der Versatz, der aufgefallen war.
 */
.google-revs__score {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    margin: 6px 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 28px 18px;
    background: #ffffff;
    border: 1px solid var(--comparison-gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.google-revs__note {
    font-size: 54px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--comparison-primary-navy, #1a365d);
}

.google-revs__stars {
    display: flex;
    gap: 3px;
}

.google-revs__star {
    width: 20px;
    height: 20px;
    fill: var(--comparison-yellow-400, #fbbf24);
}

.google-revs__count {
    font-size: 13px;
    line-height: 1.4;
    color: var(--comparison-gray-500, #6b7280);
}

.google-revs__glogo {
    width: 34px;
    height: 34px;
    margin-top: 2px;
}

.google-revs__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--comparison-primary-green, #24b2a5);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.google-revs__link:hover {
    border-bottom-color: var(--comparison-primary-green, #24b2a5);
}

.google-revs__link svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* --- Rechts: der Schieber -------------------------------------------------- */

.google-revs__viewport {
    grid-column: 2;
    grid-row: 1;
    min-width: 0; /* ohne dies sprengt der Streifen das Raster */
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Platz fuer den Kartenschatten, sonst schneidet der Ueberlauf ihn ab.
       Dieselben Werte stehen als Aussenabstand an der Bewertungsbox, damit beide
       Spalten auf derselben Linie beginnen und enden. */
    padding: 6px 2px 14px;
    /* Rollbalken aus — gescrollt wird ueber Wischen, Pfeile und Punkte */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.google-revs__viewport::-webkit-scrollbar {
    display: none;
}

/* --- Eine Karte --- */

.google-revs__card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 32px) / 3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 18px;
    background: #ffffff;
    border: 1px solid var(--comparison-gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Kopfzeile der Karte, wie bei Google: Bild links, rechts daneben der Name und
   darunter die Zeitangabe. */
.google-revs__person {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.google-revs__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    object-fit: cover;
    /* Googles Buchstabenkreise sind randlos; ein hauchduenner Ring trennt helle
       Bilder vom weissen Kartengrund. */
    border: 1px solid var(--comparison-gray-200, #e5e7eb);
    background: var(--comparison-gray-100, #f3f4f6);
}

.google-revs__person-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Sterne und die Zahl daneben („5 von 5") in einer Zeile. */
.google-revs__card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.google-revs__card-stars {
    display: flex;
    gap: 2px;
}

.google-revs__card-rating {
    font-size: 13px;
    font-weight: 700;
    color: var(--comparison-gray-500, #6b7280);
    font-variant-numeric: tabular-nums;
}

.google-revs__card-star {
    width: 15px;
    height: 15px;
    fill: var(--comparison-yellow-400, #fbbf24);
}

/*
 * Der Zitattext. `white-space: pre-line` haelt die Absatzumbrueche, die in den
 * Originalen stehen — bei Vyacheslav R., Maryna F., Claudia G. und Friedrich B.
 * gehoeren sie zum Zitat (ausgezaehlt im Datenblock der Vorlage).
 *
 * Die Zeilenbegrenzung ist noetig, weil die 15 Originale zwischen 56 und 1041
 * Zeichen lang sind. Ohne sie bestimmt die laengste Rezension die Hoehe aller
 * Karten einer Seite. Wer mehr lesen will, klappt die Karte auf (siehe
 * .google-revs__more) — abgeschnitten wird nichts, nur eingeklappt.
 */
.google-revs__text {
    font-size: 15px;
    line-height: 1.62;
    color: var(--comparison-gray-600, #4b5563);
    white-space: pre-line;
    margin: 0;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.google-revs__card.is-open .google-revs__text {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.google-revs__more {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--comparison-primary-green, #24b2a5);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.google-revs__more:hover {
    text-decoration: underline;
}

/* Name und Zeitangabe stehen seit dem Umbau auf das Google-Layout OBEN in der
   Kopfzeile, untereinander rechts neben dem Bild — nicht mehr als getrennte
   Zeile am Kartenfuss. */
.google-revs__author {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--comparison-primary-navy, #1a365d);
    /* Lange Namen kuerzen statt die Kopfzeile umbrechen zu lassen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.google-revs__date {
    font-size: 12px;
    line-height: 1.3;
    color: var(--comparison-gray-400, #9ca3af);
}

/* --- Bedienung: Pfeile, Punkte, Zaehler ------------------------------------ */

/* Zweite Zeile, nur unter dem Kartenstreifen — nicht unter der Bewertungsbox. */
.google-revs__nav {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
}

.google-revs__arrow {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9999px;
    border: 1px solid var(--comparison-gray-300, #d1d5db);
    background: #ffffff;
    color: var(--comparison-gray-600, #4b5563);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.google-revs__arrow svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.google-revs__arrow:hover:not(:disabled) {
    border-color: var(--comparison-primary-green, #24b2a5);
    color: var(--comparison-primary-green, #24b2a5);
}

.google-revs__arrow:disabled {
    opacity: 0.32;
    cursor: default;
}

.google-revs__dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.google-revs__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--comparison-gray-300, #d1d5db);
    cursor: pointer;
    transition: background-color 0.25s ease, width 0.25s ease;
}

.google-revs__dot.is-active {
    background: var(--comparison-primary-green, #24b2a5);
    width: 22px;
}

/* Tritt bei vielen Seiten an die Stelle der Punktreihe (siehe PUNKTE_HOECHSTENS
   in google-rezensionen.ejs) — 15 Punkte nebeneinander kann niemand abzaehlen.
   Feste Ziffernbreite, damit die Leiste beim Blaettern nicht zuckt. */
.google-revs__counter {
    font-size: 14px;
    font-weight: 600;
    color: var(--comparison-gray-500, #6b7280);
    font-variant-numeric: tabular-nums;
    min-width: 62px;
    text-align: center;
}

/* Ohne JavaScript gibt es nichts zu bedienen — dann bleibt gewischt. */
.google-revs:not(.is-ready) .google-revs__nav {
    display: none;
}

/* --- Schmalere Fenster ----------------------------------------------------- */

@media (max-width: 1080px) {
    .google-revs__card {
        flex: 0 0 calc((100% - 16px) / 2);
    }
}

@media (max-width: 860px) {
    .google-revs-section {
        padding: 28px 0 24px;
        margin-top: 28px;
    }

    .google-revs-headline {
        font-size: 1.5rem;
    }

    .google-revs-intro {
        font-size: 0.9rem;
    }

    /* Eine Spalte, drei Zeilen: Bewertung, Kartenstreifen, Bedienleiste.
       Die festen Raster-Plaetze aus der Desktop-Ansicht werden hier neu gesetzt. */
    .google-revs {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 0;
        margin-top: 1.25rem;
    }

    .google-revs__score {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 16px;
    }

    .google-revs__viewport {
        grid-column: 1;
        grid-row: 2;
        /*
         * Der Streifen bricht aus dem seitlichen Abstand des Inhalts aus und laeuft
         * bis an den Bildschirmrand. Der Innenabstand holt den Startpunkt der ersten
         * Karte wieder auf dieselbe Linie wie Ueberschrift und Text; nach rechts
         * bleibt er offen, damit die naechste Karte sichtbar hereinragt statt am
         * Rand abgeschnitten zu wirken.
         *
         * `scroll-padding-left` sorgt dafuer, dass eine eingerastete Karte an
         * dieser Linie stehenbleibt und nicht am nackten Rand klebt.
         */
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
    }

    .google-revs__nav {
        grid-column: 1;
        grid-row: 3;
        margin-top: 10px;
    }

    /* Quer statt hochkant: die Bewertung wird zur Kopfzeile ueber dem Schieber */
    .google-revs__score {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        text-align: left;
    }

    .google-revs__note {
        font-size: 38px;
    }

    .google-revs__glogo {
        width: 28px;
        height: 28px;
        margin-top: 0;
    }

    .google-revs__count {
        flex-basis: 100%;
        text-align: center;
    }

    /* Schmaler als der Streifen, damit die naechste Karte sichtbar hereinragt und
       zeigt, dass es weitergeht. Bei 390 px Bildschirm bleiben so rund 50 px der
       Folgekarte stehen — genug als Hinweis, zu wenig zum Mitlesen. */
    .google-revs__card {
        flex: 0 0 85%;
    }

    .google-revs__text {
        -webkit-line-clamp: 7;
    }
}

/* Wer Bewegung reduziert haben moechte, bekommt keine weichen Spruenge. */
@media (prefers-reduced-motion: reduce) {
    .google-revs__viewport {
        scroll-behavior: auto;
    }
}