/*basic Styles*/
@import url("base/vars.css");
@import url("base/fonts.css");
@import url("base/reset.css");
@import url("base/glide.core.css");
/* Desktop styles*/
@import url("desktop/header.css");
@import url("desktop/employeeprofile.css");
@import url("desktop/footer.css");
@import url("desktop/short.css");
@import url("desktop/split.css");
@import url("desktop/image.css");
@import url("desktop/glider.css");
@import url("desktop/illustrated.css");
@import url("desktop/ticker.css");
@import url("desktop/colab.css");
@import url("desktop/jobs.css");
@import url("desktop/navi.css");
@import url("desktop/box.css");
@import url("desktop/banner.css");
@import url("desktop/customerquote.css");
@import url("desktop/flow.css");
@import url("desktop/contact.css");
@import url("desktop/smallimagetext.css");
@import url("desktop/threeimages.css");

/* Mobile styles*/
@import url("mobile/header_mobile.css");
@import url("mobile/footer_mobile.css");
@import url("mobile/short_mobile.css");
@import url("mobile/split_mobile.css");
@import url("mobile/image_mobile.css");
@import url("mobile/glider_mobile.css");
@import url("mobile/illustrated_mobile.css");
@import url("mobile/ticker_mobile.css");
@import url("mobile/colab_mobile.css");
@import url("mobile/jobs_mobile.css");
@import url("mobile/navi_mobile.css");
@import url("mobile/box_mobile.css");
@import url("mobile/banner_mobile.css");
@import url("mobile/customerquote_mobile.css");
@import url("mobile/flow_mobile.css");
@import url("mobile/contact_mobile.css");
@import url("mobile/smallimagetext_mobile.css");
@import url("mobile/threeimages_mobile.css");
main
 {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(var(--contentmaxwidth) * 1.9);
    margin:auto;
 }
strong {
    font-weight: bold;
}

h1
{
    font-weight:var(--font-weight-headline1);
    font-size: var(--font-size-headline1);
    line-height: var(--font-line-headline1);    
}

h2{
    font-weight:var(--font-weight-headline2);
    font-size: var(--font-size-headline2);
    line-height: var(--font-line-headline2);    
}

h3{
    font-weight:var(--font-weight-headline3);
    font-size: var(--font-size-headline3);
    line-height: var(--font-line-headline3);    
}
p {
margin-bottom: 2px;
}



/* Global Buttons */
.button {
    background-color: var(--white);
    border-radius: 10px;
    color: var(--graphite);
    text-decoration: none!important;
    position: relative;
    display: inline-block;
    padding: 12px 50px 12px 12px;
    margin: 10px;
    font-weight: var(--font-weight-button);
    font-size: var(--font-size-button);
    line-height: var(--font-line-button);
    text-align: left;
    transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
    font-weight: 600;
    min-height: 44px;
}

.button::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-image: url('../assets/ArrowRight.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.button:hover {
    background: var(--coral-gradient); 
    color: var(--white); 
}

.button.graphite {
    background:none;
    background-color: var(--neutral05); 
    color: var(--white);
    border: 1px solid var(--white);
}
.button.graphite:after {   
    filter: invert(100%) brightness(2);
}

.button.graphite:hover {
    background-color: var(--neutral04);
    color: var(--white);
    border-color: var(--white);
}



.button.buttonplain {
    text-align: center!important; 
    padding: 12px 20px 12px 20px!important;
    
}

.button.graphite.buttonplain {
    text-align: center!important; 
    padding: 12px 12px 12px 12px!important;
}

.buttonplain::after {
    content: none !important; 
}

.coral-font {
    background: var(--coral-gradient);
    -webkit-background-clip: text; /* Clippt den Hintergrund auf den Text */
    -webkit-text-fill-color: transparent; /* Macht den Text transparent */
}

.purple-font {
    background: var(--purple-gradient);
    -webkit-background-clip: text; /* Clippt den Hintergrund auf den Text */
    -webkit-text-fill-color: transparent; /* Macht den Text transparent */
}

@media (max-width: 768px) {
    .desktop {
        display: none!important;
    }    
    main
    {

    }
    strong {

    }

    h1
    {

    }

    h2{
    
    }

    h3{
    
    }
    p {

    }



    /* Global Buttons */
    .button {

    }

    .button::after {

    }

    .button:hover {

    }

    .button.graphite {

    }
    .button.graphite:after {   

    }

    .button.graphite:hover {

    }



    .button.buttonplain {

        
    }

    .button.graphite.buttonplain {

    }

    .buttonplain::after {

    }

    .coral-font {

    }

    .purple-font {

    }
}

/* Verstecke .mobile auf größeren Bildschirmen (z. B. ab 769px) */
@media (min-width: 769px) {
    .mobile {
        display: none!important;
    }
    
}