.widget-trust-bar { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

.trust-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    background: #fff;
    border: 1px solid rgba(27, 29, 45, 0.08);
    border-radius: var(--wl-radius, 1rem);
    box-shadow: var(--wl-shadow, 0 8px 30px rgba(27, 29, 45, 0.05));
    overflow: hidden;
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem 1.75rem;
    border-right: 1px solid rgba(27, 29, 45, 0.07);
}

.trust-bar__item:last-child { border-right: none; }

.trust-bar__icon { font-size: 1.5rem; line-height: 1; }
.trust-bar__body { display: flex; flex-direction: column; }
.trust-bar__value { font-weight: 700; font-size: 1rem; }
.trust-bar__label { font-size: 0.8rem; opacity: 0.6; }

@media (max-width: 700px) {
    .trust-bar__item { border-right: none; border-bottom: 1px solid rgba(27,29,45,0.07); }
    .trust-bar__item:last-child { border-bottom: none; }
}

/* "Verbunden": nach mehreren Anlaeufen mit einer eigenen (halb-)
   durchsichtigen Flaeche/Karte -- die vom Nutzer wiederholt als "sieht man
   ja doch, weisser Hintergrund" zurueckgewiesen wurden -- jetzt ein
   grundsaetzlich anderer Ansatz: die Leiste bekommt UEBERHAUPT KEINEN
   eigenen Hintergrund mehr (komplett unsichtbar als Flaeche) und wird per
   kraeftigem negativem margin-top ueber den unteren Rand des Widgets
   darueber (Hero-Studio) gezogen, sodass sie zur Haelfte optisch INNERHALB
   von dessen Hintergrund "schwebt", statt als eigener Abschnitt danach zu
   wirken. Text/Icons bekommen dafuer einen weichen Schlagschatten, damit
   sie unabhaengig davon lesbar bleiben, was gerade im Hero als Hintergrund
   liegt (Verlauf, Bild oder Video). */
.widget-trust-bar--connected {
    max-width: none;
    padding: 0 1.5rem 2rem;
    margin-top: clamp(-3.5rem, -8vw, -2rem);
    position: relative;
    z-index: 2;
    background: none;
}

.widget-trust-bar--connected .trust-bar {
    max-width: 1120px;
    margin: 0 auto;
}

/* Der negative margin-top oben ist dafuer da, die Leiste in das Widget
   DARUEBER (Hero) hineinragen zu lassen. Steht direkt davor aber eine
   Trennlinie, zog er die Leiste ueber genau diese Linie drueber -- sie lag
   dann optisch mitten zwischen den Kaestchen statt darueber (Bugreport
   "schau mal wo die Trennlinie ist"). In dem Fall kein Hochziehen.
   Zwei Selektoren, weil angemeldete Benutzer jedes Widget zusaetzlich in
   einem ".wl-widget-frame" sehen (Direktbearbeitung), Besucher nicht. */
.widget-divider + .widget-trust-bar--connected,
.wl-widget-frame:has(.widget-divider) + .wl-widget-frame .widget-trust-bar--connected {
    margin-top: 0;
}

.trust-bar--connected {
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 1rem;
    overflow: visible;
}

.trust-bar--connected .trust-bar__item {
    background: none;
    border: none;
    /* Dunkler Text statt hell: die Leiste ueberlappt sowohl den (hellen)
       Verlauf am unteren Hero-Rand als auch die normale, weisse Seite
       darunter -- heller Text waere auf beiden kaum lesbar. Ein leichter
       heller Schlagschatten reicht als Kontrast-Reserve gegen dunklere
       Bild-/Video-Hintergruende. */
    color: var(--color-text, #1b1d2d);
    justify-content: center;
    text-align: center;
}

.trust-bar--connected .trust-bar__value,
.trust-bar--connected .trust-bar__label {
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}

.trust-bar--connected .trust-bar__label {
    opacity: 0.75;
}