#egert-hero-modern,
#egert-hero-modern *,
#egert-hero-modern *::before,
#egert-hero-modern *::after {
    box-sizing:border-box !important;
}

#egert-hero-modern {
    --eg-orange:#ed741b;
    --eg-orange-dark:#d86514;
    --eg-green:#758964;
    --eg-green-dark:#596b4e;
    --eg-dark:#182019;

    position:relative !important;

    width:100% !important;
    min-height:820px !important;

    display:grid !important;
    place-items:center !important;

    overflow:hidden !important;

    background:var(--eg-green) !important;

    color:#fff !important;

    font-family:"Inter",Arial,sans-serif !important;
}

#egert-hero-modern .egert-hero-video {
    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    transform:scale(1.06) !important;

    opacity:0 !important;

    transition:
        opacity 1.2s ease,
        transform 2.4s cubic-bezier(.2,.7,.2,1) !important;
}

#egert-hero-modern.egert-hero-ready
.egert-hero-video {
    opacity:1 !important;
    transform:scale(1.015) !important;
}

#egert-hero-modern .egert-hero-overlay {
    position:absolute !important;
    z-index:1 !important;
    inset:0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(17,23,18,.84) 0%,
            rgba(17,23,18,.68) 31%,
            rgba(17,23,18,.39) 59%,
            rgba(17,23,18,.12) 100%
        ) !important;

    pointer-events:none !important;
}

#egert-hero-modern .egert-hero-green {
    position:absolute !important;
    z-index:1 !important;

    width:680px !important;
    height:680px !important;

    right:-250px !important;
    top:-270px !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(170,185,158,.18),
            transparent 72%
        ) !important;
}

#egert-hero-modern .egert-hero-grid {
    position:absolute !important;
    z-index:1 !important;

    inset:0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.017) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.014) 1px,
            transparent 1px
        ) !important;

    background-size:95px 95px !important;
}

#egert-hero-modern .egert-hero-inner {
    position:relative !important;
    z-index:3 !important;

    width:100% !important;
    max-width:1350px !important;

    margin:0 auto !important;
    padding:52px 30px !important;
}

#egert-hero-modern .egert-hero-content {
    width:100% !important;
    max-width:800px !important;
}

#egert-hero-modern .egert-animate {
    opacity:0 !important;
    transform:translateY(24px) !important;

    transition:
        opacity .75s cubic-bezier(.2,.7,.2,1),
        transform .75s cubic-bezier(.2,.7,.2,1) !important;
}

#egert-hero-modern.egert-hero-ready
.egert-animate {
    opacity:1 !important;
    transform:translateY(0) !important;
}

#egert-hero-modern .egert-animate-1 { transition-delay:.16s !important; }
#egert-hero-modern .egert-animate-2 { transition-delay:.28s !important; }
#egert-hero-modern .egert-animate-3 { transition-delay:.40s !important; }
#egert-hero-modern .egert-animate-4 { transition-delay:.52s !important; }
#egert-hero-modern .egert-animate-5 { transition-delay:.64s !important; }

#egert-hero-modern .egert-hero-kicker {
    display:inline-flex !important;
    align-items:center !important;

    gap:10px !important;

    margin-bottom:17px !important;

    color:rgba(255,255,255,.69) !important;

    font-size:10px !important;
    font-weight:700 !important;

    letter-spacing:1.8px !important;

    text-transform:uppercase !important;
}

#egert-hero-modern .egert-hero-kicker::before {
    content:"" !important;

    width:32px !important;
    height:2px !important;

    background:var(--eg-orange) !important;
}

#egert-hero-modern h1 {
    max-width:770px !important;

    margin:0 !important;

    color:#fff !important;

    font-size:
        clamp(48px,4.7vw,70px) !important;

    line-height:.99 !important;

    letter-spacing:-3px !important;

    font-weight:650 !important;
}

#egert-hero-modern h1 span {
    color:#ef8a42 !important;
}

#egert-hero-modern .egert-hero-text {
    max-width:690px !important;

    margin-top:22px !important;

    color:rgba(255,255,255,.78) !important;

    font-size:16px !important;

    line-height:1.65 !important;
}

#egert-hero-modern .egert-hero-buttons {
    display:flex !important;
    flex-wrap:wrap !important;

    gap:10px !important;

    margin-top:27px !important;
}

#egert-hero-modern .egert-btn {
    min-height:52px !important;

    padding:0 22px !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:10px !important;

    color:#fff !important;

    text-decoration:none !important;

    font-size:13px !important;
    font-weight:650 !important;
}

#egert-hero-modern .egert-btn-primary {
    background:var(--eg-orange) !important;
}

#egert-hero-modern .egert-btn-shop {
    background:rgba(117,137,100,.82) !important;
}

#egert-hero-modern .egert-dealer-showcase {
    width:100% !important;
    max-width:800px !important;

    margin-top:24px !important;

    overflow:hidden !important;

    background:rgba(29,39,31,.74) !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    backdrop-filter:blur(12px) !important;
}

#egert-hero-modern .egert-dealer-top {
    min-height:60px !important;

    padding:0 18px !important;

    display:flex !important;

    align-items:center !important;

    border-bottom:
        1px solid rgba(255,255,255,.09) !important;
}

#egert-hero-modern .egert-dealer-heading {
    display:flex !important;
    align-items:center !important;

    gap:11px !important;
}

#egert-hero-modern .egert-dealer-icon {
    width:32px !important;
    height:32px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:var(--eg-orange) !important;

    font-size:10px !important;
}

#egert-hero-modern .egert-dealer-heading-text {
    display:flex !important;

    align-items:baseline !important;

    flex-wrap:wrap !important;

    gap:5px 8px !important;
}

#egert-hero-modern .egert-dealer-small {
    color:rgba(255,255,255,.46) !important;

    font-size:8px !important;
    font-weight:700 !important;

    letter-spacing:1.4px !important;

    text-transform:uppercase !important;
}

#egert-hero-modern .egert-dealer-main-title {
    font-size:17px !important;
    font-weight:650 !important;
}

#egert-hero-modern .egert-brand-strip {
    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;
}

#egert-hero-modern .egert-brand-item {
    min-height:105px !important;

    padding:14px 20px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    border-right:
        1px solid rgba(255,255,255,.09) !important;
}

#egert-hero-modern .egert-brand-item:last-child {
    border-right:0 !important;
}

#egert-hero-modern .egert-brand-logo {
    width:100% !important;
    height:68px !important;

    padding:8px 13px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:rgba(245,243,238,.94) !important;
}

#egert-hero-modern .egert-brand-logo img {
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:96% !important;
    max-height:53px !important;

    object-fit:contain !important;
}

#egert-hero-modern .egert-side-label {
    position:absolute !important;

    z-index:4 !important;

    right:25px !important;
    top:50% !important;

    transform:
        translateY(-50%)
        rotate(90deg) !important;

    color:rgba(255,255,255,.30) !important;

    font-size:8px !important;
    font-weight:600 !important;

    letter-spacing:2.7px !important;

    text-transform:uppercase !important;
}

@media(max-width:767px) {

    #egert-hero-modern {
        min-height:760px !important;
    }

    #egert-hero-modern .egert-hero-inner {
        padding:35px 17px !important;
    }

    #egert-hero-modern .egert-side-label {
        display:none !important;
    }

    #egert-hero-modern h1 {
        font-size:40px !important;
        letter-spacing:-1.9px !important;
    }

    #egert-hero-modern .egert-hero-text {
        margin-top:16px !important;
        font-size:14px !important;
    }

    #egert-hero-modern .egert-hero-buttons {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
    }

    #egert-hero-modern .egert-btn {
        width:100% !important;
    }

    #egert-hero-modern .egert-brand-strip {
        display:flex !important;

        overflow-x:auto !important;

        scrollbar-width:none !important;
    }

    #egert-hero-modern .egert-brand-item {
        flex:0 0 74% !important;
    }

}

@media(max-width:430px) {

    #egert-hero-modern h1 {
        font-size:36px !important;
    }

    #egert-hero-modern .egert-hero-buttons {
        grid-template-columns:1fr !important;
    }

    #egert-hero-modern .egert-brand-item {
        flex-basis:84% !important;
    }

}

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

    #egert-hero-modern * {
        transition:none !important;
    }

}


/* =========================================================
   EGERT DEALER MOBILE 2X2 V1
   Fachhändler im Hero: 2 Spalten / 2 Reihen auf Mobile
   ========================================================= */

@media (max-width: 767px) {

    #egert-hero-modern .egert-dealer-showcase {
        width: 100% !important;
        max-width: 100% !important;
    }

    #egert-hero-modern .egert-brand-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 10px 12px 14px !important;
        box-sizing: border-box !important;
    }

    #egert-hero-modern .egert-brand-logo {
        width: 100% !important;
        min-width: 0 !important;
        height: 92px !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #fff !important;
    }

    #egert-hero-modern .egert-brand-logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 62px !important;
        object-fit: contain !important;
    }

}