/**
 * Theme "Agentur Bulling" -- nachgebaut nach agentur-bulling.de (SIGNAL
 * IDUNA Generalagentur Bulling). Farben/Header/Karten hier bewusst nah am
 * echten Referenzdesign: klarer weisser Header mit blauer Akzentlinie,
 * dezente Kartenschatten in Markenblau, warme Akzentfarben (Orange/Gruen)
 * fuer Handlungsaufforderungen.
 */

:root {
    --ab-blue-light: rgba(0, 51, 153, 0.05);
    --ab-card-shadow: 0 10px 30px rgba(0, 51, 153, 0.06);
    --ab-card-shadow-hover: 0 15px 35px rgba(0, 51, 153, 0.16);
    /* Dreh-Captcha (App\Core\RotateCaptcha): Standard-Mint/Lavendel durch
       die Markenfarben ersetzen (siehe Kommentar dort). */
    --wl-captcha-color-1: var(--color-primary);
    --wl-captcha-color-2: #4d79c9;
    --wl-captcha-bg: rgba(0, 51, 153, 0.06);
}

.wl-rotate-captcha input[type="range"] {
    accent-color: var(--color-primary);
}

/* --- Header (site-nav): sauberer weisser Kopfbereich wie im Original,
   statt der schlichten Standard-Leiste -- 3px Akzentlinie, sanfter
   Schatten, kurze Einblendanimation beim ersten Laden. --- */
.site-nav {
    background: #ffffff;
    border-bottom: 3px solid var(--color-primary);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
    animation: ab-fade-in-down 0.6s ease forwards;
}

.site-nav__inner {
    padding: 1.1rem 1.5rem;
}

.site-nav__logo {
    height: 2.75rem;
    transition: transform 0.3s ease;
}

.site-nav__logo:hover {
    transform: scale(1.04);
}

.site-nav__link {
    font-weight: 600;
    color: var(--text-main, #2c3e50) !important;
}

.site-nav__link:hover {
    border-bottom-color: var(--color-primary);
}

@keyframes ab-fade-in-down {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Grosser Seiten-Hintergrund (siehe ThemeManager::heroBackgroundHtml):
   Markenblauer Verlauf statt der neutralen Standardabtoenung, damit das
   Hintergrundvideo/-bild zur Farbwelt der Agentur passt. --- */
.wl-hero-bg__scrim {
    background: linear-gradient(to bottom, rgba(0, 51, 153, 0.45) 0%, rgba(0, 51, 153, 0.18) 55%, var(--color-bg) 100%);
}

/* --- Karten allgemein (Team, Testimonials, Trust-Bar, Services): weicher,
   blau getoenter Schatten wie im Original statt des neutralen Standard-
   schattens, plus deutlicherer Hover-Effekt. --- */
.team-card,
.testimonial-card,
.trust-bar__item,
.service-card {
    border-radius: 16px;
    box-shadow: var(--ab-card-shadow);
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.team-card:hover,
.testimonial-card:hover,
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ab-card-shadow-hover);
    border-color: var(--color-primary);
}

/* --- Team-Kacheln: Foto ohne Rahmen/Karte drumherum, stattdessen ein
   schwebendes weisses Namensschild, das ueber den unteren Fotorand ragt
   (Referenz-Wunsch: "freigestellter" wirken statt normaler Karte). Echte
   Freisteller (transparente PNG-Fotos ohne Hintergrund) sind ohne
   Bildbearbeitungs-Tool nicht moeglich -- diese Annaeherung nutzt die
   vorhandenen echten Fotos. --- */
/* WICHTIG: .team-card__body ist absolut positioniert (siehe unten) und
   traegt dadurch NICHT zur Hoehe der Kachel bei -- die Kachel-Hoehe kommt
   nur noch vom Foto (festes Seitenverhaeltnis). So sind alle 4 Kacheln
   IMMER exakt gleich gross, unabhaengig davon, wie lang Text/Rolle bei
   der jeweiligen Person sind und ob die Info-Box gerade per Hover
   aufgeklappt ist (Feedback: "Format soll ueberall gleich gross sein").
   Alles hier ist auf ".team-card--modern" beschraenkt -- die klassische
   Darstellung (waehlbar im Widget selbst, siehe admin.php "Darstellung")
   bleibt unveraendert bei der urspruenglichen Karte mit Rahmen. */
.team-card--modern {
    position: relative;
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
}

.team-card--modern:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.team-card--modern .team-card__photo {
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    border: none;
    box-shadow: var(--ab-card-shadow);
    transition: box-shadow 0.2s ease;
}

.team-card--modern:hover .team-card__photo {
    box-shadow: var(--ab-card-shadow-hover);
}

.team-card--modern .team-card__body {
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    top: 100%;
    margin-top: -2.75rem;
    z-index: 3;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(0, 51, 153, 0.16);
    padding: 0.55rem 1.1rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: gap 0.3s ease, padding-bottom 0.3s ease;
}

.team-card--modern:hover .team-card__body {
    gap: 0.4rem;
    padding-bottom: 1.1rem;
}

/* Solange die Box eingeklappt ist (nur Foto + Name, siehe unten), wirkt
   sie wie eine schmale Pille -- der Name darin wirkt dort zentriert
   ausgewogener als linksbuendig. Rolle/Text bleiben beim Aufklappen
   trotzdem linksbuendig (Feedback von vorher), nur der Name-Chip selbst
   wird zentriert. */
.team-card--modern .team-card__name {
    margin: 0;
    text-align: center;
}

/* Standardmaessig nur Foto + Name sichtbar -- Rolle, Kurztext (als
   Aufzaehlung, siehe render.php) und der Kontakt-Link klappen erst beim
   Ueberfahren des Fotos (bzw. der ganzen Kachel) nach unten auf ("Kasten
   geht mit Mouseover auf"), statt permanent sichtbar zu sein. Padding/
   Rand werden im eingeklappten Zustand ebenfalls auf 0 gesetzt (nicht nur
   max-height) -- sonst bleibt als Flex-Kind sichtbarer Rest-Platz durch
   das eigene Padding uebrig, und der Button wirkt "nicht ganz im Kasten". */
.team-card--modern .team-card__role,
.team-card--modern .team-card__text,
.team-card--modern .team-card__list,
.team-card--modern .team-card__button {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    border-width: 0 !important;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease, padding 0.35s ease;
}

.team-card--modern:hover .team-card__role {
    max-height: 2rem;
    opacity: 1;
    margin-top: 0.2rem !important;
}

.team-card--modern:hover .team-card__text,
.team-card--modern:hover .team-card__list {
    max-height: 12rem;
    opacity: 1;
}

.team-card--modern:hover .team-card__button {
    max-height: 3rem;
    opacity: 1;
    margin-top: 0.5rem !important;
}

/* Da die Info-Box absolut ueber das Kachelende hinausragt (siehe oben),
   braucht das Raster zusaetzlichen Reihenabstand, damit sie beim
   Aufklappen nicht die naechste Zeile ueberlappt (z.B. bei schmaleren
   Bildschirmen mit 2 Kacheln pro Zeile). */
.widget-team-cards__grid {
    row-gap: 5rem;
}

.team-card--modern .team-card__role {
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}

.team-card--modern .team-card__list {
    padding-left: 1.05rem;
}

/* Kontakt-Aktion als schlichter Text-Link statt grossem Button (Feedback:
   "ohne Button, evtl. nur als Text") -- data-vcard-trigger/-Attribute
   bleiben unveraendert (siehe render.php/script.js), nur die Optik aendert
   sich hier. */
.team-card--modern .team-card__button {
    display: inline-block;
    background: none;
    color: var(--color-primary) !important;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    align-self: flex-start;
}

/* --- Services-Kacheln: dienen hier als die drei Handlungs-Buttons
   ("Kostenloser KFZ-Vergleich" etc.) direkt unter dem Header -- im echten
   agentur-bulling.de sind das kompakte, abgerundete Buttons (Icon + Kurz-
   text), keine grossen Content-Karten mit Fliesstext. Grossflaechige,
   voll eingefaerbte Rechtecke nebeneinander wirkten dagegen verspielt/
   unprofessionell (Feedback: "Farben nicht gut gewaehlt") -- deshalb hier
   auf echte, kompakte Pill-Buttons umgestellt: Text/Pfeil-Link raus,
   Icon direkt neben dem Titel statt in einer eigenen Box. */
.widget-service-cards .service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Vorher: drei voll eingefaerbte Pillen in kraeftigem Blau/Gruen/Orange --
   direkt unter dem edlen Video-Header wirkte das zu "bunt"/spielzeughaft
   (Feedback: "komische Farben", signifikante Aenderung gewuenscht). Dann:
   weisse Pillen mit farbiger Umrandung/Schrift. Jetzt (Feedback: "noch
   anspruchsvoller/moderner, wie ein Glasdesign"): echtes Frosted-Glass --
   die Pillen sitzen direkt auf dem Video/Verlauf und lassen ihn durch
   Transparenz + Weichzeichner hindurchschimmern, mit einem hellen
   Glanzrand oben fuer den 3D-Glas-Effekt. Beim Hover fuellt sich die
   Pille satt mit der Akzentfarbe (die Farbe kommt aus dem Textfeld
   "background" der Kachel, hier aber nur als Akzent verwendet). */
.widget-service-cards .service-card {
    position: relative;
    flex: 0 1 auto;
    max-width: none;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.7rem;
    border-radius: 999px;
    /* Glasflaeche etwas deckender als zuvor: die Schrift ist jetzt schwarz
       (Wunsch), und dafuer muss die Pille hell genug bleiben -- auch dort,
       wo sie ueber dem dunklen Video-Header liegt. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.66)) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    color: #000 !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(0, 20, 60, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 6px rgba(0, 20, 60, 0.08);
    /* Heller statt dunkler Schein: stuetzt schwarze Schrift, falls die Pille
       ueber einem dunklen Videoausschnitt sitzt. */
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.75);
    transition: background 0.25s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.widget-service-cards .service-card:nth-child(1) { --ab-pill-color: #003399; }
.widget-service-cards .service-card:nth-child(2) { --ab-pill-color: #1e9e63; }
.widget-service-cards .service-card:nth-child(3) { --ab-pill-color: #c9740f; }

.widget-service-cards .service-card__icon {
    width: auto;
    height: auto;
    margin: 0;
    background: none !important;
    font-size: 1.35rem;
}

.widget-service-cards .service-card__title {
    font-size: 1.02rem;
    white-space: nowrap;
    color: inherit !important;
}

.widget-service-cards .service-card__text {
    display: none;
}

/* Der Link bleibt die ganze Pille hindurch klickbar (sonst kein Klickziel
   mehr vorhanden, siehe Bugreport "Buttons oben gehen nicht") -- Text
   bleibt aber unsichtbar, da Icon+Titel die Pille bereits beschriften. */
.widget-service-cards .service-card__link {
    position: absolute;
    inset: 0;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

.widget-service-cards .service-card:hover {
    transform: translateY(-3px) scale(1.02);
    background: var(--ab-pill-color, var(--color-primary)) !important;
    color: #fff !important;
    text-shadow: none;
    border-color: var(--ab-pill-color, var(--color-primary));
    box-shadow: 0 10px 26px rgba(0, 20, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* --- Ueberschrift-Hervorhebung: eigene Signal-Iduna-blaue Verlaufsfarbe
   statt des fils.studio-Mint/Lavendel-Verlaufs -- dieses Theme soll nicht
   an fils.studio erinnern, sondern ein eigenstaendiges Kundendesign sein. --- */
.widget-heading__highlight {
    background: linear-gradient(100deg, var(--color-primary), #4d79c9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Video-Header: das Hintergrundvideo ist hier nicht nur Dekoration
   zwischen Nav und Inhalt, sondern der eigentliche "Kopfbereich" -- auf
   breiten Bildschirmen ziehen wir Ueberschrift, Trennlinie (ausgeblendet)
   und Aktions-Kacheln sichtbar ueber das Video (per negativem margin-top
   auf <main>, siehe unten). Auf schmalen Bildschirmen bleibt die einfache
   gestapelte Variante (Video-Banner, danach normaler heller Inhalt), weil
   sich Kartenzahl/Textmenge dort nicht zuverlaessig vorhersagen laesst. */
.wl-hero-bg {
    overflow: visible;
}

.wl-hero-bg__media,
.wl-hero-bg__scrim {
    z-index: 0;
}

.wl-hero-bg__scrim {
    z-index: 1;
}

/* Dekorative, weich verschwommene Kreise im Video -- "eigenes individuelles
   modernes Design" statt reinem Rechteck-Video. */
.wl-hero-bg::before,
.wl-hero-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

.wl-hero-bg::before {
    width: 22rem;
    height: 22rem;
    top: -6rem;
    right: -4rem;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%);
}

.wl-hero-bg::after {
    width: 14rem;
    height: 14rem;
    bottom: 4rem;
    left: -3rem;
    background: radial-gradient(circle at 30% 30%, rgba(0, 51, 153, 0.35), rgba(0, 51, 153, 0) 70%);
}

@media (min-width: 900px) {
    .wl-hero-bg {
        min-height: 800px;
    }

    main {
        position: relative;
        z-index: 3;
        margin-top: -640px;
    }

    /* Auf kurzen Seiten (z.B. Fehlerseite) reicht der negative margin-top
       von <main> weit genug nach oben, dass auch Footer/Credit-Leiste noch
       im Hoehenbereich des Hero-Videos liegen. Ohne "position: relative"
       ist ein Element aber NICHT Teil der Stapelreihenfolge positionierter
       Elemente und rendert dadurch IMMER unter dem (positionierten)
       ".wl-hero-bg" -- unabhaengig von der Dokumentreihenfolge. Das liess
       Footer-Text auf kurzen Seiten durchscheinend/unlesbar wirken
       (Bugreport: "Footer schlecht formatiert"). */
    .site-footer,
    .footer-credit-bar {
        position: relative;
        z-index: 3;
    }

    /* WICHTIG -- warum hier jeweils ZWEI Selektoren stehen:
       Nur ANGEMELDETE Benutzer sehen jedes Widget zusaetzlich in einem
       ".wl-widget-frame" verpackt (Direktbearbeitung, siehe
       PageController::renderWidgets()). Fuer normale Besucher liegen die
       Widget-Sections direkt in <main>. Frueher war hier ausschliesslich die
       Variante MIT Rahmen notiert -- dadurch griffen saemtliche Regeln fuer
       den Video-Kopfbereich (helle Schrift, Glaskasten) ausgerechnet bei den
       echten Besuchern NICHT, und die Ueberschrift stand dort in dunkler
       Standardfarbe auf dem Video (Bugreport "Text immer noch schwer
       lesbar" -- im angemeldeten Zustand war der Fehler unsichtbar).
       Beide Faelle muessen deshalb immer zusammen gepflegt werden. */
    /* Glaskasten hinter der Ueberschrift: reines Weiss+Textschatten reichte
       bei helleren Videoausschnitten nicht fuer sichere Lesbarkeit. Ein
       halbtransparenter, weichgezeichneter Kasten funktioniert unabhaengig
       von der Video-Helligkeit im jeweiligen Frame -- nutzt den ohnehin
       vorhandenen Innenabstand von .widget-heading als Kasten-Polsterung,
       veraendert also nichts am Seitenfluss/Abstand, nur das Aussehen. */
    main > .widget-heading:first-child,
    main > .wl-widget-frame:first-child .widget-heading {
        color: #fff;
        margin-top: 3.5rem;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
        background: linear-gradient(160deg, rgba(4, 14, 38, 0.55), rgba(0, 51, 153, 0.4));
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 1.5rem;
        box-shadow: 0 25px 55px rgba(0, 10, 40, 0.3);
    }

    main > .widget-heading:first-child .widget-heading__eyebrow,
    main > .wl-widget-frame:first-child .widget-heading__eyebrow {
        color: #dbe6ff;
        opacity: 0.85;
    }

    main > .widget-heading:first-child .widget-heading__subtext,
    main > .wl-widget-frame:first-child .widget-heading__subtext {
        color: #eef3ff;
        opacity: 0.95;
        text-shadow: 0 1px 12px rgba(0, 20, 60, 0.35);
    }

    main > .widget-heading:first-child .widget-heading__subtext li::marker,
    main > .wl-widget-frame:first-child .widget-heading__subtext li::marker {
        color: #9fc0ff;
    }

    main > .widget-heading:first-child .widget-heading__title,
    main > .wl-widget-frame:first-child .widget-heading__title {
        text-shadow: 0 2px 18px rgba(0, 20, 60, 0.4);
    }

    /* Auf dem Video braucht die Hervorhebung einen HELLEN statt dunkelblauen
       Verlauf, da der dunkelblaue Standard-Verlauf (fuer helle Seiten
       gedacht) auf dem dunklen Video kaum lesbar waere. */
    main > .widget-heading:first-child .widget-heading__highlight,
    main > .wl-widget-frame:first-child .widget-heading__highlight {
        background: linear-gradient(100deg, #ffffff, #a9c6ff);
        -webkit-background-clip: text;
        background-clip: text;
    }

    /* Die Trennlinie DIREKT NACH der Ueberschrift auf dem Video wirkt dort
       unruhig -- hier bewusst ausgeblendet, der Abstand uebernimmt die
       gleiche Wirkung. Selektor bewusst eng (nur der erste Kasten NACH der
       Ueberschrift), nicht "main .widget-divider" -- das haette JEDE
       Trennlinie auf der ganzen Seite ausgeblendet, auch an Stellen, wo sie
       gewuenscht war (Bugreport "Trennlinie geht nicht"). */
    main > .widget-heading:first-child + .widget-divider,
    main > .wl-widget-frame:first-child + .wl-widget-frame .widget-divider {
        display: none;
    }

    main > *:nth-child(2) .widget-service-cards,
    main > .widget-service-cards:nth-child(2) {
        margin-top: 1.5rem;
    }

    main > *:nth-child(2) .service-cards__eyebrow,
    main > *:nth-child(2) .widget-service-cards__title,
    main > *:nth-child(2) .service-cards__subtitle,
    main > .widget-service-cards:nth-child(2) .service-cards__eyebrow,
    main > .widget-service-cards:nth-child(2) .widget-service-cards__title,
    main > .widget-service-cards:nth-child(2) .service-cards__subtitle {
        color: #fff;
    }

    /* Fehlerseite (siehe Response::notFoundPage()) haengt am selben
       "main { margin-top: -640px }" und sitzt damit ebenfalls vor dem
       Video -- ohne eigenen ".wl-widget-frame"-Wrapper (kein normales
       Seiten-Widget), daher reicht hier "main >" direkt. Gleiche
       Weiss+Schatten-Behandlung wie die Haupt-Ueberschrift, sonst
       unlesbar (Bugreport "Fehlerseite nicht lesbar"). */
    main > .widget-error-404 {
        padding-top: 6rem;
    }

    main > .widget-error-404 .error-404__title {
        color: #fff;
        text-shadow: 0 2px 18px rgba(0, 20, 60, 0.4);
    }

    main > .widget-error-404 .error-404__message {
        color: #eef3ff;
        opacity: 0.95;
        text-shadow: 0 1px 12px rgba(0, 20, 60, 0.35);
    }
}

/* --- Unter 900px liegt die Ueberschrift NICHT mehr auf dem Video (siehe
   Kommentar oben bei .wl-hero-bg) -- die Basis-Videohoehe von
   shared-chrome.css (62vh, bis zu 720px) ist dafuer aber ausgelegt, das
   Video als grossflaechigen Hintergrund UNTER der Ueberschrift zu tragen,
   nicht als eigenstaendiges Element davor. Auf dem Handy fuehrte das dazu,
   dass man erst durch ein sehr hohes, leeres wirkendes Video scrollen
   musste, bevor ueberhaupt Text zu sehen war (Bugreport "Text schwer
   lesbar" bezog sich auf genau dieses Verschwinden, nicht auf Kontrast).
   Niedrigere Video-Bannerhoehe, damit die Ueberschrift ohne grosses Scrollen
   sichtbar wird. --- */
@media (max-width: 899px) {
    .wl-hero-bg {
        height: 42vh;
        min-height: 240px;
        max-height: 380px;
    }

    /* Die Service-Pillen sind fuer den dunklen Video-Header entworfen
       (Frosted-Glass, weisse Schrift) -- ab 900px liegen sie ja darauf.
       Darunter stehen sie aber auf dem hellen Seitenhintergrund, wo weisse
       Schrift auf hellem Glas praktisch unlesbar war. Hier deshalb satt
       gefuellte Buttons in der Markenfarbe: gleiche Form, gleicher
       Charakter, aber tragfaehiger Kontrast. */
    /* Nur Layout, keine eigenen Farben mehr: die Pillen sind seit der
       Umstellung auf schwarze Schrift hell genug gefuellt, um auch auf dem
       hellen Seitenhintergrund lesbar zu sein -- die frueher noetige
       Voll-Einfaerbung in der Markenfarbe entfaellt damit und das Glas-
       Aussehen bleibt auf allen Geraeten gleich.
       Volle Breite je Pille: nebeneinander brachen sie auf Handy-Breite
       auf zwei bis drei Zeilen um und wurden unterschiedlich gross --
       untereinander sind sie gleich gross und sicher treffbar. */
    .widget-service-cards .service-card {
        width: 100%;
        justify-content: center;
        min-height: 3rem;
    }
}

/* --- Vertrauensleiste: kein gemeinsamer Rahmen um alle 4 zusammen -- jedes
   der 4 Kaestchen ist eine eigene, einzelne Karte (Feedback: "soll keinen
   Rahmen haben, nur die 4 Kaestchen einzeln"). Die runden Icon-Badges
   nutzen alle dieselbe Markenfarbe (siehe render.php: monochrome SVGs
   statt bunter Emoji). */
.widget-trust-bar .trust-bar {
    background: none;
    border: none;
    box-shadow: none;
    gap: 1rem;
}

.widget-trust-bar .trust-bar__item {
    background: #fff;
    padding: 1.5rem 1.25rem;
    border-right: none;
}

@media (max-width: 700px) {
    .widget-trust-bar .trust-bar__item {
        border-bottom: none;
    }
}

.trust-bar__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 8px 18px rgba(0, 51, 153, 0.25);
}

/* Footer-Link-Hover nutzt standardmaessig einen Mint/Lavendel-Verlauf
   (fils.studio-Markenfarben) als Textfarbe -- hier auf einen reinen
   Blauton umgestellt, damit auch dieses Detail nicht an fils.studio
   erinnert. */
.site-footer__links a:hover,
.site-footer__column a:hover {
    background: linear-gradient(90deg, var(--color-primary), #4d79c9);
    -webkit-background-clip: text;
    background-clip: text;
}

/* --- Back-to-top: eigenes Logo statt generischem Strich, dazu ein echter
   Scroll-Fortschrittsring (siehe js/back-to-top-ring.js). --- */
.wl-back-to-top--ab {
    background: #ffffff;
    animation: none;
    box-shadow: 0 8px 22px rgba(0, 51, 153, 0.3);
    padding: 4px;
}

.wl-back-to-top__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wl-back-to-top__ring-track {
    fill: none;
    stroke: rgba(0, 51, 153, 0.15);
    stroke-width: 3;
}

.wl-back-to-top__ring-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.wl-back-to-top__logo {
    position: relative;
    width: 56%;
    height: 56%;
    object-fit: contain;
    animation: ab-btt-bounce 1.8s ease-in-out infinite;
}

@keyframes ab-btt-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .wl-back-to-top__logo { animation: none; }
}

/* --- "Das sagen unsere Kunden" als Karussell: horizontale, scrollbare
   Reihe statt starrem Raster -- Karten stehen etwas verkleinert/gedimmt
   nebeneinander und werden erst beim Ueberfahren mit der Maus gross und
   klar, alle anderen bleiben klein (Referenz-Wunsch). */
.widget-testimonials .testimonials-grid {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    /* Seitlicher Puffer, damit die erste/letzte Karte beim Vergroessern
       (scale 1.08, siehe .testimonial-card:hover) noch vollstaendig in den
       sichtbaren Bereich passt -- sonst schneidet "overflow-x: auto" den
       herausragenden Rand ab (Bugreport "Format nicht mehr passend im
       Rahmen"). */
    padding: 0.75rem 1.75rem 2.5rem;
}

.widget-testimonials .testimonial-card {
    flex: 0 0 280px;
    scroll-snap-align: center;
    transform: scale(0.9);
    opacity: 0.7;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.widget-testimonials .testimonial-card:hover,
.widget-testimonials .testimonial-card:focus-within {
    transform: scale(1.08);
    opacity: 1;
    box-shadow: var(--ab-card-shadow-hover);
    z-index: 2;
    position: relative;
}

/* Dezenter Hinweis, dass sich die Reihe horizontal scrollen laesst. */
.widget-testimonials .testimonials-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}