/*
 * Trustlocal-Bewertungs-Widgets (NS-B4-3). Eigene Datei, shop.css bleibt
 * unberuehrt. Das Aussehen der Widgets selbst bestimmt Trustlocal; hier nur
 * Abstaende, der Hinweis vor dem Laden und die Lage in der Fusszeile.
 */
.vs-trustlocal { margin: .6rem 0; }
.vs-trustlocal-hinweis { font-size: .85rem; color: #5b6b80; }
.vs-trustlocal-hinweis span { display: block; margin-top: .3rem; }
.vs-trustlocal-laden {
    background: #fff; color: #102a4d; border: 1px solid #c9d6e8; border-radius: 10px;
    padding: .5rem .9rem; font: inherit; font-weight: 600; cursor: pointer;
}
.vs-trustlocal-laden:hover { border-color: #102a4d; }
.vs-trustlocal-profil { display: inline-block; margin-top: .4rem; font-size: .85rem; }

/* Startseite: zwei Spalten, mobil einspaltig. */
.vs-bewertungen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
@media (max-width: 768px) { .vs-bewertungen-raster { grid-template-columns: 1fr; } }

/* Kontakt- und Leistungsseiten: etwas Luft zum Inhalt darueber. */
.vs-trustlocal--kontakt, .vs-trustlocal--leistungsseiten { margin-top: 1.2rem; }

/* Fusszeile: unter der ersten Spalte (Kontaktzeile), mobil ganz unten. */
.foot-grid > .vs-trustlocal--fusszeile { grid-column: 1; grid-row: 2; margin: 0; }
.foot-grid > .vs-trustlocal--fusszeile .vs-trustlocal-hinweis,
.foot-grid > .vs-trustlocal--fusszeile .vs-trustlocal-hinweis span { color: #aec3de; }
@media (max-width: 768px) {
    .foot-grid > .vs-trustlocal--fusszeile { grid-column: 1 / -1; grid-row: auto; order: 99; }
}

/*
 * Echte Bewertungen auf der Startseite (ND-BEW, E-9336): Durchschnitt je
 * Quelle, Karten im Stil der Leistungskarten (.scard, leistungen.css),
 * Raster 3/2/1, gleich hohe Karten, Text per CSS auf sechs Zeilen begrenzt.
 */
.vs-bw-schnitte { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: -.4rem 0 1.4rem; }
.vs-bw-schnitt { display: flex; align-items: center; gap: .55rem; background: var(--bg-2, #f6f9fd); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: .55rem .9rem; }
.vs-bw-zahl { font-size: 1.35rem; font-weight: 800; color: var(--navy, #102a4d); line-height: 1; }
.vs-bw-anzahl { color: var(--muted, #64748b); font-size: .9rem; }
.vs-bw-anzahl a { font-weight: 600; }

/* Sterne: graue Reihe, darueber die gelbe in der passenden Breite (auch halbe Sterne). */
.vs-bw-sterne { position: relative; display: inline-block; color: #d6dde8; font-size: 1.05rem; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.vs-bw-sterne-voll { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--accent, #f5a623); }

.vs-bw-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 1024px) { .vs-bw-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vs-bw-raster { grid-template-columns: 1fr; } }

.vs-bw-karte { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.vs-bw-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.vs-bw-quelle { font-size: .78rem; font-weight: 600; color: var(--muted, #64748b); background: var(--blue-50, #eff5fc); border-radius: 999px; padding: .2rem .6rem; text-decoration: none; white-space: nowrap; }
a.vs-bw-quelle:hover { color: var(--blue, #1e6fd9); }
.vs-bw-text { margin: 0; color: var(--fg, #102a4d); font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.vs-bw-fuss { margin: auto 0 0; display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; color: var(--muted, #64748b); }
.vs-bw-fuss b { color: var(--navy, #102a4d); font-weight: 600; }

.vs-bw-hinweis { margin: 1.1rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted-2, #758ca3); max-width: 80ch; }
.vs-bw-weitere { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; margin-top: .8rem; }
.vs-bw-weitere:empty { display: none; }
.vs-trustpilot { margin: .6rem 0; min-width: 220px; }
.vs-trustpilot-hinweis { font-size: .85rem; color: #5b6b80; }
.vs-trustpilot-hinweis span { display: block; margin-top: .3rem; }