@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */


/* ==========================================
   GOOGLE TRUST BADGE - STANDARD
   ========================================== */

.google-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    max-width: 260px;
}

.google-trust-badge:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.badge-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-content {
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    line-height: 1.3;
}

.badge-headline {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
    white-space: nowrap;
}

.badge-stars-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-rating-number {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
}

.badge-stars {
    color: #fbbc05;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.badge-count-text {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}


/* ==========================================
   TRUSTPILOT BADGE - STANDARD
   ========================================== */

.trustpilot-diy-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    max-width: 260px;
}

.trustpilot-diy-badge:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.tp-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tp-content {
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    line-height: 1.3;
}

.tp-headline {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.3px;
    margin-bottom: 1px;
}

.tp-stars-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tp-rating-number {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
}

.tp-stars {
    color: #00b67a;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.tp-count-text {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}


/* ==========================================
   HERO FLOATING BADGES - STANDARD
   ========================================== */

/*
 * Normale Position für andere Seiten.
 * Der übergeordnete Bildcontainer muss
 * position: relative besitzen.
 */

.hero-floating-badges {
    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 20;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 8px;

    width: 215px;
    height: auto;

    pointer-events: auto;
}


/* ==========================================
   STANDARDANIMATION
   ========================================== */

.slide-in-right-hero {
    opacity: 0;

    transform: translateY(-60px);

    animation: slideDownIntoImage 0.9s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.3s forwards;
}

@keyframes slideDownIntoImage {

    from {
        opacity: 0;
        transform: translateY(-60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   SLIM BADGE STYLING
   ========================================== */

.slim-trust-badge {
    display: flex;
    align-items: center;

    gap: 10px;

    background-color: #ffffff;
    border-radius: 6px;

    padding: 6px 12px;

    text-decoration: none !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

    transition: transform 0.2s ease;

    box-sizing: border-box;

    width: 215px;
    height: 52px;

    min-height: 52px;
    max-height: 52px;

    flex: 0 0 52px;
}

/*
 * Gegen überschreibende CSS-Regeln
 * aus anderen Stylesheets absichern.
 */

.hero-floating-badges .slim-trust-badge {
    width: 215px !important;
    height: 52px !important;

    min-height: 52px !important;
    max-height: 52px !important;

    flex: 0 0 52px !important;

    box-sizing: border-box !important;

    overflow: hidden;
}


/* ==========================================
   HOVER EFFEKT
   ========================================== */

.slim-trust-badge:hover {
    transform: scale(1.03);
}


/* ==========================================
   FARBIGE LINKE RÄNDER
   ========================================== */

.slim-trust-badge.g-slim {
    border-left: 3px solid #fbbc05;
}

.slim-trust-badge.tp-slim {
    border-left: 3px solid #00b67a;
}


/* ==========================================
   BADGE LOGOS
   ========================================== */

.slim-badge-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    min-width: 22px;
    min-height: 22px;

    max-width: 22px;
    max-height: 22px;

    flex: 0 0 22px;
}

/*
 * Wichtig:
 * Google-Logo und Trustpilot-SVG
 * dürfen nicht durch allgemeine
 * img-Regeln vergrößert werden.
 */

.hero-floating-badges .slim-badge-logo > img,
.hero-floating-badges .slim-badge-logo > svg {

    display: block !important;

    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;
    min-height: 22px !important;

    max-width: 22px !important;
    max-height: 22px !important;

    object-fit: contain !important;
}


/* ==========================================
   BADGE TEXTE
   ========================================== */

.slim-badge-info {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
    min-width: 0;

    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;

    line-height: 1.1;
}

.slim-badge-title {
    font-size: 11px;
    font-weight: 600;

    color: #64748b;

    text-transform: uppercase;
    letter-spacing: 0.3px;

    margin-bottom: 2px;

    white-space: nowrap;
}


/* ==========================================
   STERNE UND BEWERTUNGEN
   ========================================== */

.slim-badge-stars-row {
    display: flex;
    align-items: center;

    flex-wrap: nowrap;

    gap: 4px;

    white-space: nowrap;
}

.slim-badge-stars-row strong {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    flex-shrink: 0;
}

.slim-stars {
    color: #fbbc05;
    font-size: 12px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.slim-stars.tp-green {
    color: #00b67a;
}

.slim-count {
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
}


/* ==========================================
   HERO COMPACT
   ========================================== */

.hero-compact {
    background: #fff;

    padding: 75px 0;
    padding-bottom: 0;
}


/* ==========================================
   ALTERNATIVE: BADGES IM STARTBILD
   ========================================== */

/*
 * Nur für Seiten mit der Klasse
 * hero-image-start.
 *
 * Die Section ist der Bezugspunkt
 * für die absolute Positionierung.
 */

.hero-image-start {
    position: relative;
    overflow: hidden;
}


/* ==========================================
   STARTBILD - DESKTOP
   ========================================== */

/*
 * Badges sitzen auf Desktop-Geräten
 * 85px unterhalb der oberen Bildkante.
 */

.hero-image-start > .hero-floating-badges {

    position: absolute;

    top: 85px;
    right: 20px;

    bottom: auto;
    left: auto;

    z-index: 20;
}


/* ==========================================
   STARTBILD - DESKTOP ANIMATION
   ========================================== */

.hero-image-start >
.hero-floating-badges.slide-in-right-hero {

    opacity: 0;

    animation: slideDownStartHero 1.2s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.3s both;
}

@keyframes slideDownStartHero {

    from {
        opacity: 0;
        transform: translateY(
            calc(-100% - 125px)
        );
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   STARTBILD - SMARTPHONE / TABLET
   ========================================== */

/*
 * Auf schmalen Bildschirmen stehen die
 * Badges RECHTS UNTEN im Hero-Bild.
 *
 * Dadurch überdecken sie die mittig
 * platzierte Überschrift nicht mehr.
 */

@media (max-width: 767.98px) {

    #hero.hero-image-start {
        position: relative;
        overflow: hidden;
    }

    /*
     * Endposition:
     * 20px oberhalb des unteren Bildrandes.
     */

    #hero.hero-image-start >
    .hero-floating-badges {

        position: absolute !important;

        top: auto !important;
        bottom: 20px !important;

        right: 12px !important;
        left: auto !important;

        z-index: 20;

        gap: 6px;

        width: 215px;
    }

    /*
     * Alternative Animation für
     * schmale Bildschirme.
     */

    #hero.hero-image-start >
    .hero-floating-badges.slide-in-right-hero {

        opacity: 0;

        animation: slideDownStartHeroMobile 1.2s
            cubic-bezier(0.16, 1, 0.3, 1)
            0.3s both !important;
    }

}


/* ==========================================
   MOBILE ANIMATION
   ========================================== */

/*
 * Start deutlich oberhalb der Bildkante.
 * Endposition kommt aus bottom: 20px.
 */

@keyframes slideDownStartHeroMobile {

    from {
        opacity: 0;
        transform: translateY(
            calc(-100vh - 100%)
        );
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {

    .slide-in-right-hero,
    .hero-image-start >
    .hero-floating-badges.slide-in-right-hero,
    #hero.hero-image-start >
    .hero-floating-badges.slide-in-right-hero {

        animation: none !important;

        opacity: 1 !important;
        transform: none !important;
    }

    .slim-trust-badge {
        transition: none;
    }
}