/**
 * glattt Reviews — Aussehen von Karussell und Trust-Leiste.
 *
 * Grundsatz: Das Plugin legt WEDER Schriftart NOCH Farben fest — mit zwei
 * bewussten Ausnahmen, die beide abschaltbar sind:
 * 1. Die Bewertungskarten laufen in Roboto, der Schrift, in der Google seine
 *    Rezensionen setzt. Ohne sie wirkt die Karte nachgebaut. Sie liegt lokal
 *    im Plugin (assets/fonts) — kein Aufruf bei Google, also nichts, was
 *    Borlabs freigeben müsste. Abschaltbar über die Einstellungen.
 * 2. Die Farbe der Sterne, falls das Theme keine Akzentfarbe vorgibt; sie
 *    wird im Backend gepflegt und kommt als --grev-akzent ins style-Attribut.
 *
 * Alles Übrige gilt unverändert:
 * - Schrift: durchgehend `font-family: inherit` — es gilt die Theme-Schrift.
 * - Farben: alles leitet sich aus der geerbten Textfarbe ab (currentColor +
 *   color-mix). Der Akzent (Sterne) kommt aus der Theme-Variable, sonst aus
 *   der Textfarbe. Wer etwas anderes will, setzt im Theme eine der
 *   --grev-*-Variablen auf dem Wrapper.
 * Ausnahme: das mehrfarbige Google-„G“ im Markup — Markenzeichen, kein Design.
 */

/* -------------------------------------------------------------------------
   Roboto — die Schrift der Google-Rezensionen, lokal ausgeliefert.
   Variabler Schnitt, deckt 100–900 ab. local() zuerst: Auf Android und
   ChromeOS ist Roboto installiert, dort wird gar nichts geladen.
   ---------------------------------------------------------------------- */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('Roboto'), url('../fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('Roboto'), url('../fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.glattt-rev,
.glattt-rev-leiste {
    /* Akzent: erst Theme-Variablen, sonst die geerbte Textfarbe */
    --grev-akzent: var(--glattt-gold, var(--nectar-accent-color, currentColor));
    --grev-stern: var(--grev-akzent);
    --grev-linie: color-mix(in srgb, currentColor 15%, transparent);
    --grev-leise: color-mix(in srgb, currentColor 60%, transparent);
    --grev-flaeche: color-mix(in srgb, currentColor 4%, transparent);
    --grev-flaeche-stark: color-mix(in srgb, currentColor 8%, transparent);
    --grev-radius: 12px;
    --grev-abstand: 1rem;
    --grev-ring: Canvas;

    font-family: inherit;
    color: inherit;
    box-sizing: border-box;
}

.glattt-rev *,
.glattt-rev *::before,
.glattt-rev *::after,
.glattt-rev-leiste *,
.glattt-rev-leiste *::before,
.glattt-rev-leiste *::after {
    box-sizing: inherit;
}

/* Themes stylen Buttons und Links kräftig — hier zurücksetzen, ohne Farben zu setzen. */
.glattt-rev button,
.glattt-rev-leiste button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
}

.glattt-rev a,
.glattt-rev-leiste a {
    color: inherit;
}

/* -------------------------------------------------------------------------
   Sterne
   ---------------------------------------------------------------------- */

.glattt-rev-sterne {
    position: relative;
    display: inline-flex;
    line-height: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.glattt-rev-sterne-spur {
    display: inline-flex;
    color: var(--grev-linie);
}

.glattt-rev-sterne-fuellung {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: inline-flex;
    overflow: hidden;
    width: var(--grev-fuellung, 100%);
    color: var(--grev-stern);
}

.glattt-rev-stern {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* -------------------------------------------------------------------------
   Karussell
   ---------------------------------------------------------------------- */

.glattt-rev {
    display: block;
    width: 100%;
}

/* Kopfzeile: links die Standorte, rechts die Pfeile.
   Bewusst über den Karten statt darauf — Pfeile mitten im Kartenbereich
   liegen zwangsläufig auf dem Bewertungstext. */
.glattt-rev-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: var(--grev-abstand);
}

.glattt-rev-steuerung {
    display: flex;
    gap: .5rem;
    margin-inline-start: auto;
}

/* Passt alles nebeneinander, wird die Steuerung vom JS ausgeblendet. */
.glattt-rev-steuerung.is-versteckt {
    display: none;
}

/* Standort-Umschalter */
.glattt-rev-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.glattt-rev .glattt-rev-chip {
    padding: .4em 1em;
    border: 1px solid var(--grev-linie);
    border-radius: 999px;
    font-size: .875em;
    transition: background-color .18s ease, border-color .18s ease;
}

.glattt-rev .glattt-rev-chip:hover,
.glattt-rev .glattt-rev-chip:focus-visible {
    background: var(--grev-flaeche);
}

.glattt-rev .glattt-rev-chip.is-aktiv {
    background: var(--grev-flaeche-stark);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    font-weight: 600;
}

/* Bühne mit Pfeilen.
   inline-size macht sie zum Container: Wie viele Karten nebeneinander passen,
   richtet sich nach der Breite der Bühne, nicht nach der des Fensters —
   sonst quetscht eine halbbreite Spalte trotzdem drei Karten hinein. */
.glattt-rev-buehne {
    position: relative;
    container-type: inline-size;
}

.glattt-rev-spur {
    display: flex;
    gap: var(--grev-abstand);
    margin: 0;
    padding: 0 0 .25rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.glattt-rev-spur::-webkit-scrollbar {
    display: none;
}

.glattt-rev-spur:focus-visible {
    outline: 2px solid var(--grev-akzent);
    outline-offset: 4px;
}

.glattt-rev-spur.is-greifend {
    cursor: grabbing;
    scroll-snap-type: none;
}

.glattt-rev-eintrag {
    flex: 0 0 min(85%, 22rem);
    display: flex;
    scroll-snap-align: start;
}

.glattt-rev-eintrag[hidden] {
    display: none;
}

/* Ohne Container-Query-Unterstützung bleibt es bei der Grundbreite oben. */
@container (min-width: 600px) {
    .glattt-rev-eintrag {
        flex-basis: calc((100% - var(--grev-abstand)) / 2);
    }
}

@container (min-width: 1000px) {
    .glattt-rev-eintrag {
        flex-basis: calc((100% - 2 * var(--grev-abstand)) / 3);
    }
}

/* Die Pfeile stehen in der Kopfzeile, nicht über den Karten. Ihre Fläche
   leitet sich wie alles andere aus der geerbten Textfarbe ab, damit sie auf
   hellem wie auf dunklem Grund sichtbar bleiben. */
.glattt-rev .glattt-rev-pfeil {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--grev-linie);
    border-radius: 50%;
    background: transparent;
    transition: opacity .18s ease, background-color .18s ease, border-color .18s ease;
}

.glattt-rev .glattt-rev-pfeil svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.glattt-rev .glattt-rev-pfeil:hover,
.glattt-rev .glattt-rev-pfeil:focus-visible {
    background: var(--grev-flaeche-stark);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* Am Anfang bzw. Ende bleibt der Pfeil stehen, nur blass — verschwindet er,
   springt die Kopfzeile bei jedem Blättern. */
.glattt-rev .glattt-rev-pfeil[disabled] {
    opacity: .3;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Bewertungskarte
   ---------------------------------------------------------------------- */

/* Die Karte ist ein Zitat aus Google und wird deshalb in Googles Schrift
   gesetzt. Roboto trägt deutlich mehr Höhe als die meisten Theme-Schriften,
   die leichte Verkleinerung gleicht das optisch aus. Mit der Klasse
   .glattt-rev-schrift-theme am Wrapper gilt wieder die Theme-Schrift. */
.glattt-rev-karte {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.25rem;
    border: 1px solid var(--grev-linie);
    border-radius: var(--grev-radius);
    background: var(--grev-flaeche);
    font-family: 'Roboto', Arial, sans-serif;
    font-size: .92em;
    line-height: 1.5;
    letter-spacing: normal;
}

.glattt-rev-schrift-theme .glattt-rev-karte {
    font-family: inherit;
    font-size: 1em;
}

.glattt-rev-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.glattt-rev-avatar {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.glattt-rev-avatar-initiale {
    display: grid;
    place-items: center;
    background: var(--grev-akzent);
    color: var(--grev-ring);
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1;
}

.glattt-rev-person {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

/* 500 ist der Schnitt, in dem Google den Namen setzt — bei Theme-Schriften
   wirkt das oft zu leicht, dort bleibt es bei 600. */
.glattt-rev-name {
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.glattt-rev-schrift-theme .glattt-rev-name {
    font-weight: 600;
}

.glattt-rev-unterzeile {
    font-size: .8em;
    color: var(--grev-leise);
    line-height: 1.4;
}

.glattt-rev-quelle {
    flex: 0 0 auto;
    display: inline-flex;
    align-self: flex-start;
}

.glattt-rev-google {
    width: 1.15rem;
    height: 1.15rem;
}

.glattt-rev-bewertung {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.glattt-rev-bewertung .glattt-rev-sterne {
    font-size: 1.05em;
}

.glattt-rev-datum {
    font-size: .8em;
    color: var(--grev-leise);
}

/* Fünf Zeilen wie bei Google, der Rest kommt über „Mehr“.
   Bewusst nur -webkit-line-clamp und KEIN standardisiertes line-clamp: Das
   neue line-clamp macht aus dem Kasten einen Block, der den Rest verwirft —
   dann meldet scrollHeight keinen Überlauf und „Mehr“ bliebe verborgen.
   Ebenso ohne flex-grow, ein gestreckter Kasten hätte denselben Effekt. */
.glattt-rev-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--grev-zeilen, 5);
    overflow: hidden;
    font-size: .95em;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.glattt-rev-text.is-offen {
    display: block;
    -webkit-line-clamp: unset;
}

.glattt-rev .glattt-rev-mehr {
    align-self: flex-start;
    margin-top: .35rem;
    font-size: .85em;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Die Antwort steht am Fuß der Karte: `order` schiebt sie hinter Herz und
   Link, `margin-top: auto` an den unteren Rand. Dadurch stehen die Antworten
   nebeneinander liegender Karten auf einer Linie. */
.glattt-rev-antwort {
    order: 9;
    margin-top: auto;
    /* Ein durchsichtiger Rand hält auch dann Abstand, wenn die Karte randvoll
       ist und `margin-top: auto` keinen Platz mehr zu verteilen hat.
       background-clip sorgt dafür, dass die Fläche erst darunter beginnt. */
    border-top: .9rem solid transparent;
    padding: .7rem .85rem;
    border-radius: calc(var(--grev-radius) - 4px);
    background: var(--grev-flaeche-stark);
    background-clip: padding-box; /* muss NACH background stehen, sonst setzt die Kurzform es zurück */
    font-size: .85em;
    line-height: 1.55;
}

.glattt-rev-antwort-kopf {
    display: block;
    margin-bottom: .2rem;
    font-weight: 600;
}

.glattt-rev-reaktionen {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .9rem 0 0;
    font-size: .85em;
    color: var(--grev-leise);
}

.glattt-rev-herz {
    font-size: 1.15em;
    line-height: 1;
}

.glattt-rev-karte-link {
    margin-top: .75rem;
    font-size: .85em;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.glattt-rev-leer {
    margin: var(--grev-abstand) 0 0;
    font-size: .9em;
    color: var(--grev-leise);
}

.glattt-rev-fuss {
    margin: var(--grev-abstand) 0 0;
    text-align: center;
    font-size: .9em;
}

.glattt-rev-fuss-link {
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Hinweis, den nur eingeloggte Redakteure sehen */
.glattt-rev-hinweis {
    padding: .75rem 1rem;
    border: 1px dashed currentColor;
    border-radius: 8px;
    font-size: .9em;
    opacity: .7;
}

/* -------------------------------------------------------------------------
   Trust-Leiste
   ---------------------------------------------------------------------- */

.glattt-rev-leiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75em;
    font-size: 1em;
    line-height: 1.3;
}

.glattt-rev-leiste-s { font-size: .85em; }
.glattt-rev-leiste-l { font-size: 1.25em; }

.glattt-rev-leiste .glattt-rev-sterne {
    font-size: 1.6em;
}

.glattt-rev-leiste-fotos {
    display: inline-flex;
    align-items: center;
}

.glattt-rev-leiste-fotos img {
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--grev-ring);
}

.glattt-rev-leiste-fotos img + img {
    margin-inline-start: -.55em;
}

.glattt-rev-leiste-text {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: 1.05em;
}

/* Die Leiste ist eine Aussage, kein Menüpunkt — Unterstreichung erst beim Zeigen. */
.glattt-rev-leiste a {
    text-decoration: none;
}

.glattt-rev-leiste a:hover,
.glattt-rev-leiste a:focus-visible {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.glattt-rev-leiste-text .glattt-rev-google {
    width: 1.1em;
    height: 1.1em;
}

/* Für dunkle Hintergründe (Hero-Video, Bild): Ring aus, Text erbt die helle Farbe */
.glattt-rev-leiste-hell {
    --grev-ring: transparent;
    --grev-linie: color-mix(in srgb, currentColor 35%, transparent);
    --grev-leise: color-mix(in srgb, currentColor 80%, transparent);
}

.glattt-rev-leiste-hell .glattt-rev-leiste-fotos img {
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   Schutz gegen Theme-Regeln auf Bildern

   Themes greifen gern allen Bildern im Inhalt ins Layout. Salient setzt auf
   glattt.com `.row .col img:not([srcset]) { width: auto }` und
   `.main-content img { height: auto }` — beides spezifischer als eine einzelne
   Klasse. Folge: Die Profilbilder standen in Originalgröße in der Karte
   (150 px statt 40). Deshalb hier, und nur für unsere eigenen Bilder, die
   Maße festnageln. `!important` ist an dieser Stelle Absicht: Gegen fremde
   Bild-Regeln hilft höhere Spezifität nur so lange, bis das Theme nachlegt.
   ---------------------------------------------------------------------- */

.glattt-rev img.glattt-rev-avatar {
    width: 2.5rem !important;
    height: 2.5rem !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.glattt-rev-leiste .glattt-rev-leiste-fotos img {
    width: 1.9em !important;
    height: 1.9em !important;
    max-width: none !important;
    min-width: 0 !important;
    /* Salient hängt allen Bildern 15 px Abstand nach unten an. Dadurch wurde
       die Bilderreihe höher als die Bilder und rutschte nach oben, statt
       mittig zu sitzen. */
    margin: 0 !important;
}

.glattt-rev-leiste .glattt-rev-leiste-fotos img + img {
    margin-inline-start: -.55em !important;
}

@media (prefers-reduced-motion: reduce) {
    .glattt-rev * {
        transition: none !important;
    }
}