/* =========================================================
   BUSINESS HEADER
========================================================= */


.business-left__head {

    text-align:center;

    padding:25px 0 0 0;
}


.business-left__logo {

    width:min(400px,80%);

    height:auto;

    display:block;

    margin:0 auto 18px;

}



.business-left__subtitle {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    transform:translateY(8px);

    position:relative;
    z-index:5;


    font-family:"Lausitz Sans", sans-serif;

    font-size:16px;

    font-weight:600;

    letter-spacing:.22em;

    color:#ffffff;

}



.business-left__arrow {

    width:31.5%;

    height:auto;

    padding: 0 25px;

}

/* =====================================================
   HERO FAHRZEUGVEREDELUNG
===================================================== */


.business-left__hero {

    position:relative;

    width:100%;

    overflow:hidden;

}



.business-left__hero-image {

    display:block;

    width:100%;

    height:auto;

}



/* weicher Übergang nach unten */

.business-left__hero::after {

    content:"";

    position:absolute;

    left:0;
    right:0;
    
    bottom:0;

    height:45%;

    pointer-events:none;

}



/* Kalam Claim */

.business-left__claim {

    position:absolute;

    z-index:2;

    top:80px;
    right:18%;

    display:flex;
    flex-direction:column;

    font-family:"Kalam", cursive;

    font-size:clamp(28px,2.5vw,42px);

    line-height:1.05;

    text-align:center;

    transform:rotate(-8deg);

    text-shadow:
        0 0 8px rgba(0,142,240,.6),
        0 0 18px rgba(0,142,240,.25);

}


/* Text */

.business-left__claim span {

    display:block;

    background:
        linear-gradient(
            90deg,
            #8bddff 0%,
            #00A8F3 55%,
            #008ef0 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

}


/* =====================================================
   LICHTLINIE UNTER DEM CLAIM
===================================================== */

.business-left__claim::after {

    content:"";

    display:block;

    width:150px;

    height:2px;

    margin:10px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #008ef0 25%,
            #8bddff 60%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(0,142,240,.5),
        0 0 14px rgba(0,142,240,.2);

    transform:rotate(-3deg);

}

/* =====================================================
   INTRO
===================================================== */


.business-left__intro {

    position:absolute;
    
    margin-top:-95px;

    padding:0 0 50px 80px;

    z-index:5;

}



.business-left__intro h2 {

    margin:0;


    font-family:"Lausitz Sans", sans-serif;

    font-size:clamp(18px,2vw,28px);

    line-height:1.05;

    letter-spacing:.06em;

    color:#f4f6f8;


    text-shadow:

        0 3px 5px rgba(0,0,0,.9),
        0 8px 18px rgba(0,0,0,.7);

}



.business-left__intro h2 span {

    display:block;

}



.business-left__intro p {

    margin:18px 0 0;


    font-family:"Lausitz Sans", sans-serif;

    font-size:16px;

    letter-spacing:.20em;

    color:#00A8F3;


}

/* =====================================================
   SERVICE BEREICH
===================================================== */


.business-left__services {

    margin-top:25px;
    margin-left: 6.2%;

}


.business-service {

    position:relative;

    display:flex;

    align-items:center;

    gap:25px;

    padding:20px 0 20px 30px;


}


.business-service__icon {

    flex:0 0 55px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.business-service__icon img {

    width:55px;

    height:55px;

}

.business-service__content {

    padding-top:2px;

}


.business-service__content h3 {

    margin:0;

    font-family:"Lausitz Sans", sans-serif;

    font-size:20px;

    color:#ffffff;

}


.business-service__content p {

    margin:6px 0 0;

    font-family:"Lausitz Sans", sans-serif;

    font-size:15px;

    color:#c5d0da;

}

/* Linie nur unter Textbereich */

.business-service:not(:last-child)::after {

    content:"";

    position:absolute;

    left:110px;
    right:0;

    bottom:-12px;

    height:1px;

    background:
        linear-gradient(
            to right,
            rgba(0,142,240,.55),
            rgba(0,142,240,0)
        );

}

/* =====================================================
   FINALE FAHRZEUGVEREDELUNG
===================================================== */


.business-left__finale {

    position:relative;

    min-height:280px;

    margin-top:10px;

    margin-left: 10%;

    overflow:visible;
}



/* =====================================================
   CLAIM GRUNDAUFBAU
===================================================== */


.business-left__final-claim {

    position:relative;

    margin-left:80px;

    font-family:"Kalam", cursive;

    font-size:46px;

    line-height:0.9;

}



/* =====================================================
   TOP / BOTTOM BEREICHE
===================================================== */


.final-claim__top,
.final-claim__bottom {

    position:relative;

    width:max-content;

}



.final-claim__top p,
.final-claim__bottom p {

    margin:0;

    background:
        linear-gradient(
            90deg,
            #8bddff 0%,
            #008ef0 55%,
            #0068b8 100%
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* obere Zeile */

.final-claim__top {

    margin-left:0;
    transform:rotate(-12deg);

}



/* untere Zeile */

.final-claim__bottom {

    margin-left:120px;

    margin-top:40px;
    transform:rotate(-12deg);


}



/* =====================================================
   LICHTLINIEN AM CLAIM
===================================================== */


.final-claim__line {

    display:block;

    position:relative;

    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            #008ef0 35%,
            #8bddff 65%,
            transparent 100%
        );


    box-shadow:

        0 0 8px rgba(0,142,240,.45);

}



/* Linie unter TOP */

.final-claim__top .final-claim__line {

    width:280px;

    margin-left:110px;

    margin-top:8px;

}



/* Linie unter BOTTOM */

.final-claim__bottom .final-claim__line {

    width:340px;

    margin-left:-35px;

    margin-top:8px;

}



/* =====================================================
   MOBILE LEFT
===================================================== */

@media(max-width:900px){


    .business-left__claim {

        top:45px;

        right:10%;

        font-size:30px;

    }


    .business-left__intro {

        margin-top:-40px;

        padding:0 20px 40px;

    }


    .business-left__intro h2 {

        font-size:22px;

    }


    .business-service {

        padding-left:20px;

    }


    .business-left__finale {

        overflow:hidden;

    }


    .business-left__final-claim {

        margin-left:20px;

        font-size:36px;

    }


    .final-claim__bottom {

        margin-left:50px;

    }

}

/* =====================================================
   MOBILE INTRO / SERVICE ABSTAND
===================================================== */

@media(max-width:900px){

    .business-left__intro {

        position:relative;

        margin-top:-35px !important;

        padding:0 20px 70px;

    }

    .business-left__services {

    margin-top:-50px !important;

    }


}

/* =====================================================
   MOBILE FINALE ABSTAND
===================================================== 

@media(max-width:900px){

    .business-left__finale {

        min-height:10px;

        margin-top:20px;

    }


    .business-left__final-claim {

        margin-left:20px;

    }


}

*/

/* =====================================================
   MOBILE FINALE ABSTAND
===================================================== */

@media(max-width:900px){

    .business-left__finale {

        min-height:10px;

        margin-top:20px;

        overflow:hidden;

    }


    .business-left__final-claim {

        margin-left:20px;

        transform:scale(0.75);

        transform-origin:left center; 
        
        padding-bottom: 20px;

    }

}