@font-face {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 400;

    src: url('../fonts/montserrat-v25-latin-regular.eot');

    src: local(''),

         url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'),

         url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'),

         url('../fonts/montserrat-v25-latin-regular.woff') format('woff'),

         url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'),

         url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg');

}



@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 500;

src: url('../fonts/montserrat-v25-latin-500.eot');

src: local(''),

        url('../fonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'),

        url('../fonts/montserrat-v25-latin-500.woff2') format('woff2'),

        url('../fonts/montserrat-v25-latin-500.woff') format('woff'),

        url('../fonts/montserrat-v25-latin-500.ttf') format('truetype'),

        url('../fonts/montserrat-v25-latin-500.svg#Montserrat') format('svg');

}



@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 600;

src: url('../fonts/montserrat-v25-latin-600.eot');

src: local(''),

        url('../fonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'),

        url('../fonts/montserrat-v25-latin-600.woff2') format('woff2'),

        url('../fonts/montserrat-v25-latin-600.woff') format('woff'),

        url('../fonts/montserrat-v25-latin-600.ttf') format('truetype'),

        url('../fonts/montserrat-v25-latin-600.svg#Montserrat') format('svg');

}



@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 700;

src: url('../fonts/montserrat-v25-latin-700.eot');

src: local(''),

        url('../fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'),

        url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'),

        url('../fonts/montserrat-v25-latin-700.woff') format('woff'),

        url('../fonts/montserrat-v25-latin-700.ttf') format('truetype'),

        url('../fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg');

}



@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 800;

src: url('../fonts/montserrat-v25-latin-800.eot');

src: local(''),

        url('../fonts/montserrat-v25-latin-800.eot?#iefix') format('embedded-opentype'),

        url('../fonts/montserrat-v25-latin-800.woff2') format('woff2'),

        url('../fonts/montserrat-v25-latin-800.woff') format('woff'),

        url('../fonts/montserrat-v25-latin-800.ttf') format('truetype'),

        url('../fonts/montserrat-v25-latin-800.svg#Montserrat') format('svg');

}



@font-face {

font-family: 'Montserrat';

font-style: normal;

font-weight: 900;

src: url('../fonts/montserrat-v25-latin-900.eot');

src: local(''),

        url('../fonts/montserrat-v25-latin-900.eot?#iefix') format('embedded-opentype'),

        url('../fonts/montserrat-v25-latin-900.woff2') format('woff2'),

        url('../fonts/montserrat-v25-latin-900.woff') format('woff'),

        url('../fonts/montserrat-v25-latin-900.ttf') format('truetype'),

        url('../fonts/montserrat-v25-latin-900.svg#Montserrat') format('svg');

}



* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}



:root{

    --pink-shadow: 4px 8px 20px rgba(255, 125, 140, 0.4);

    --pink: #FF6678;

    --purple: #7E6ABA;

    --lightpurple: #DECCFA;

    --purple-shadow: 4px 8px 15px rgba(131, 111, 191, 0.4);

    --lightgrey: #9B9EA6;

    --darkblue: #2C3649;

    --white: #FFFFFF;

    --glass: rgba(255,255,255, 0.6);

    --glassnav: rgba(255,255,255, 0.9);

    --green: #36B2A4;

}



html, body{

    overflow: hidden;

    overflow-y: auto;

    position: relative;

}



html{

    scroll-behavior: smooth; 

}



body{

    margin: 0;

    padding: 0;

    font-family: 'Montserrat', sans-serif;

    font-style: normal;

    color: var(--darkblue);

    background-color: #ededed;

}



.scrollfix{

   overflow: hidden;

}



section{

    margin: 0 auto; 

    width: 100%;

    min-height: 100vh;

    position: relative;

    display: flex; 

    align-items: center;

    justify-content: center;

}



section > div{

    max-width: 1440px;

    padding: 0 15px;

    margin-top: 150px;

    margin-bottom: 150px;

}



.max-w{

    max-width: 1440px;

    padding: 0 15px;

    margin: 0 auto;

}



#scene3d{

    height: 100vh;

    width: 100%;

    position: fixed;

    top: 0;

    z-index: -10;

    display: block;

}



/* STANDARD-TAGS --------------------------------------- */



h1{

    color: var(--lightgrey);

    font-size: 16px;

    font-weight: 700;

    margin: 0;

    margin-bottom: 9px;

    text-align: center;

}



h2, h4{

    font-size: 60px;

    font-weight: 900;

    margin: 0;  

    color: var(--purple); 

}



h2 > span{

    color: var(--darkblue);

}



h3{

    font-size: 34px;

    font-weight: 800;

    margin: 0;

    margin-bottom: 40px;

    text-align: center;

}



h4{

    hyphens: auto;

    -webkit-hyphens: auto;

    -moz-hyphens: auto;

    -o-hyphens: auto;

    -ms-hyphens: auto;

    line-height: 62px;

    margin-bottom: 20px;

    margin-top: 10px;

}



h5{

    font-size: 6.625rem;

    font-weight: 900;

    color: var(--white);

    text-transform: uppercase;

    margin: 0;

    margin-bottom: -20px;

    text-shadow: 0px 0px 100px rgb(44 54 73 / 20%);

}



h6{

    font-size: 16px;

    font-weight: 700;

    color: var(--lightgrey);

    margin-bottom: 0;

}



img{

    height: auto;

}



a{

    text-decoration: none;  

}



p{

    font-size: 16px;

    font-weight: 500;

    line-height: 28px;

    margin-top: 8px;

    margin-bottom: 10px;

}



ul{

    padding: 0;

    list-style-type: none;

}



button{

    border: none;

    font-family: 'Montserrat', sans-serif;

    font-style: normal;

}



/* NAVIGATION ----------------------------------------- */

nav{

    position: fixed;

    top: 0;

    z-index: 50;

    width: 100%;

    transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

}



nav #nav-wrapper{

    margin-bottom: 8px;

}



nav #mainnav-wrapper{

    display: flex;

    justify-content: space-between;

    margin-top: 20px;

    transition: margin 0.2s ease-in-out;

}



#logo img{

    min-width: 100%;

    transition: width 0.2s ease-in-out;

}



nav ul{

    margin: 0;

    padding: 0;

    font-size: 16px;

    font-family: 'Montserrat';

}



nav li{

    display: inline-block;

}



nav a{

    color: var(--darkblue);

    transition: color 0.2s ease-in-out;

}



nav #mobile-subnav a{

    color: var(--white);

}



@media (hover: hover){

    nav a:hover{color: var(--pink);}

}



nav .btn-primary{

    margin-top: 0;

    transition-property: padding, background-image, background-color, color;

    transition-timing-function: ease-in-out;

    transition-duration: 0.2s;

}



@media (hover: hover){

    nav .btn-primary:hover{color: var(--white);}

}



#mainnav li{

    display: inline-block;

    margin-left: 75px;

    transition: margin 0.2s ease-in-out;

    cursor: pointer;

}



#mainnav li svg{

    display: inline-block;

    position: relative;

    width: 10px;

    height: 6px;

    top: -2px;

    stroke: var(--darkblue);

    transition: stroke 0.2s;

}



#mainnav > ul > li a.active,

.kontaktseite nav li.active .btn-primary {

    color: var(--purple);

}



#mainnav > ul > li a.active svg{

    stroke: var(--purple);

}



@media (hover: hover){

    #mainnav a:hover svg{

        stroke: var(--pink);

    }

}



#subnav{   

    height: 0;

    overflow: hidden;

    display: flex;

    justify-content: center;

    transition: margin-top 0.2s ease-in-out;

}



#subnav-wrapper{

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    max-width: 1096px;

    gap: 15px;

}



#subnav a{

    display: flex;

    max-width: 355px;

    gap: 10px;

    align-items: flex-start;

    border-radius: 5px;

    padding: 14px 15px 15px;

    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

}



@media (hover: hover){

    #subnav a:hover{

       background-color: #EDEDED;

    }

}



#subnav img{

    width: 19px;

    margin-top: 2px;

}



#subnav h6,

#subnav p{

    font-size: 15px;

    color: var(--darkblue);

    margin: 0;

    line-height: 24px;

}



nav.subnav-active #subnav{

    height: auto;

    margin-top: 15px;

    margin-bottom: 15px;

}



nav #subnav-trigger svg{

    transition: transform 0.2s ease-in-out, stroke 0.2s ease-in-out;

}



nav.subnav-active #subnav-trigger svg,

nav.subnav-mobile-active #subnav-trigger svg{

    transform: rotate(-180deg);

}



#mobilenav{

    display: none;

    position: fixed;

    top: 15px;

    right: 15px;

    z-index: 100;

    min-width: 42px;

    height: 42px;

    background-color: #FFAA99;

    background-image: linear-gradient(20deg, rgba(255,102,120, 1.0) 20%, rgba(255,170,153, 1.0) 80%);

    box-shadow: var(--pink-shadow);

    border-radius: 5px;

    cursor: pointer;

}



#mobilenav > div{

    width: 18px;

    left: 12px;

    top: 12px;

    display: block;

    position: relative;

    margin-bottom: 5px;

    border-bottom: 2px solid var(--white);

    transform-origin: 0;

    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, left 0.2s ease-in-out;

}



#mobilenav.active > div:first-child{

    transform: rotate(45deg) translateX(1px);

    left: 14px;

}



#mobilenav.active > div:nth-child(2){

    transform: translateX(-8px);

    opacity: 0;

}



#mobilenav.active > div:last-child{

    transform: rotate(-45deg) translateX(1px);

    left: 14px;

}



/* Sticky-Navigation */

nav.sticky,

nav.subnav-active,

nav.sticky.subnav-active{

    background-color: var(--white);

    border-width: 0px 0px 1px 0px;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.9);

    box-shadow: 0px 8px 40px rgba(131, 111, 191, 0.1);

}



nav.sticky{

    background-color: var(--glassnav); 

}



nav.sticky #mainnav-wrapper{

    margin-top: 16px;

}



nav.sticky .btn-primary,

.kontaktseite nav .btn-primary{

    background-image: none;

    background-color: transparent;

    color: var(--darkblue);

    box-shadow: none;

    font-weight: 400;

    padding: 0;

    letter-spacing: 0;

}



@media (hover: hover){

    nav.sticky .btn-primary:hover,

    .kontaktseite nav .btn-primary:hover{

        color: var(--pink);

    }

}



nav.sticky #logo img{

    width: 80%;

}



nav.sticky #mainnav li{

    margin-left: 70px;

}



nav #mainnav li.mobileonly{

    display: none;

}



/* Mobile-Navigation */

    nav.mobile{

        width: 100%;

        height: 100%;

        background-color: var(--white);

        padding-bottom: 20px;

        display: block;

        position: fixed;

        overflow-y: scroll;

        -ms-overflow-style: none;

        scrollbar-width: none;

    }



    nav.mobile::-webkit-scrollbar{

        display: none;

    }



    nav.mobile #mainnav,

    nav.mobile #mainnav-wrapper{

        display: block;

    }



    nav.mobile #logo{

        display: inline-block;

    }



    nav.mobile #mainnav{

        margin-top: 80px;

    }



    nav.mobile #mainnav li{

        display: block;

        font-size: 16px;

        margin-left: 24px;

        font-weight: 500;

        margin-bottom: 32px;

    }



    nav.mobile #mainnav li:last-child{

        margin-bottom: 12px;

    }



    nav.mobile #mobile-subnav{

        background-color: var(--purple);

        color: var(--white);

        margin: -15px 0 25px -15px;

        padding: 22px 0 12px 20px;        

        width: calc(100% + 30px);

    }



    nav #mobile-subnav{

        display: none;

    }



    nav.mobile.subnav-mobile-active #mobile-subnav{

        display: block;

    }

    



    nav.mobile #mobile-subnav img{

        margin-bottom: -3px;

        margin-right: 10px;

    }



    nav.mobile #mobile-subnav li{

        font-weight: 400;

        margin-left: 34px;

    }



    nav.mobile .btn-primary{

        background: none;

        padding: 0 0 8px;

        border-radius: 0;

        color: var(--darkblue);

        display: inline-block;

        box-shadow: none;

        font-weight: 500;

        font-size: 16px;

        border-bottom: 1px solid var(--darkblue);

        min-width: auto;

    }



    @media (hover: hover){

        nav.mobile .btn-primary:hover{color: var(--pink);}



        nav.mobile .btn-primary:hover::before{opacity: 0;}

    }



/* BUTTONS ----------------------------------------- */



.btn-primary, .btn-secondary, .btn-inactive{

    text-decoration: none;

    font-size: 1rem;

    border-radius: 5px;

    display: inline-block; 

    cursor: pointer;  

    transition-timing-function: ease-in-out;

    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, padding 0.2s;

}



.btn-primary, .btn-secondary{

    font-weight: 700;  

}



.btn-primary{

    position: relative;

    letter-spacing: 0.5px;

    background-color: #FFAA99;

    background-image: linear-gradient(20deg, rgba(255,102,120, 1.0) 20%, rgba(255,170,153, 1.0) 80%);

    box-shadow: var(--pink-shadow);

    color: var(--white);

    margin-top: 26px;

    padding: 10px 26px 12px;

    z-index: 1;

    max-width: 100%;

}



.btn-primary::before{

    position: absolute;

    content: "";

    inset: 0;

    background-color: rgba(255,102,120, 1.0);

    z-index: -1;

    border-radius: 5px;

    transition: opacity 0.2s ease-in-out;

    opacity: 0;

}



@media (hover: hover){

    .btn-primary:hover::before{opacity: 1;}

    .btn-primary:hover{background-color: var(--pink);}



    nav.sticky .btn-primary:hover::before,

    .kontaktseite nav .btn-primary:hover::before{opacity: 0;}

}



.btn-secondary{

    color: var(--purple);

    border: 2px solid var(--purple);

    box-shadow: none;

    padding: 12px 26px 14px;

}



@media (hover: hover){

    .btn-secondary:hover{

        color: var(--white);

        background-color: var(--purple);

        box-shadow: var(--purple-shadow);

    }



    #leistungen-auswahl .btn-secondary:hover{

        color: var(--purple);

        background-color: transparent;

        box-shadow: none;

    }

}



.btn-inactive{

    color: var(--lightgrey);

    font-weight: 600;

    text-align: right;

    border: none;

    padding: 9px 0 14px 26px;

}



#leistungen #textlink{

    color: var(--purple);

    font-weight: 700;

    transition: color 0.2s ease-in-out;

}



@media (hover: hover){

    .btn-inactive:hover{

        color: var(--purple);

        font-weight: 600;

    }



    #leistungen #textlink:hover{

        color: var(--pink);

    }

}



#leistungen-auswahl .btn-secondary{

    text-align: right;

}



#header-startseite .btn-secondary:after{

    margin-left: 12px;

}



#header-startseite .btn-secondary:after,

#leistungen #leistungen-auswahl .btn-secondary:before{

    content: '';

    display: inline-block;

    width: 30px;

    height: 15px;

    background-image: url('../assets/arrow-right-purple.svg');

    background-repeat: no-repeat;

    background-size: 30px 15px;

    position: relative;

    top: 2px;

    transition: background-image 0.2s ease-in-out;

}



#leistungen #leistungen-auswahl .btn-secondary:before{

    margin-right: 10px;

}



@media (hover: hover){

    #header-startseite .btn-secondary:hover:after{

        background-image: url('../assets/arrow-right-white.svg');

    }

}



#testimonials #btn-previous,

#testimonials #btn-next{

    display: block;

    padding: 0;

    background-position: center center;

    min-width: 40px;

    height: 40px;

    background-repeat: no-repeat;

    transition: background-image 0.2s ease-in-out;

    margin-bottom: 80px;

    z-index: 10;

}



#testimonials #btn-previous{

    background-image: url('../assets/arrow-previous-purple.svg');

}



#testimonials #btn-next{

    background-image: url('../assets/arrow-next-purple.svg');

}



@media (hover: hover){

    #testimonials #btn-previous:hover{

        background-image: url('../assets/arrow-previous-white.svg');

    }



    #testimonials #btn-next:hover{

        background-image: url('../assets/arrow-next-white.svg');

    }

}



/* SECTIONS ----------------------------------------- */

#userdesire{

    text-align: center;

}



#header-startseite-wrapper{

    margin-left: 120px;

    margin-top: calc(150px + 2vh);

    transition: margin 0.2s;

    width: 100%;

}



#header-startseite h1{

    text-align: left;

    margin-bottom: 5px;

}



#header-startseite h2{

    margin-bottom: 0;

    line-height: 64px;

}



#header-startseite #headline{

    margin-bottom: -2px;

}



#header-startseite p{

    max-width: 540px;

}



#leistungen p{

    max-width: 600px;

}



#header-startseite .btn-secondary{

    margin-top: 20px;

}



#userdesire #cta-buttons{

    width: 100%;

    display: flex;

    gap: 20px;

    justify-content: center;

}



/* Leistungsauswahl */



#leistungen ul{

    margin-top: 15px;

}



#leistungen li{

    margin-bottom: 18px;

}



#leistungen #leistungen-wrapper{

    width: 100%;

}



#leistungen #leistungen-auswahl-wrapper{

    display: flex;

    align-items: flex-start;

    gap: 60px;   

}



#leistungen #leistungen-auswahl-wrapper #leistungen-auswahl{

    text-align: right;

    flex: 0 0 287px;

}





/* SCROLLING LOGO BANNER ----------------------------------- */



#technologien > div{

    max-width: 100%;

    width: 100%;

    padding: 0;

}



#technologien h1,

#technologien h3,

#bedarf h1,

#bedarf h3{

    max-width: 1440px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 15px;

    padding-right: 15px;

}



#technologien #logobanner,

#kundenbanner{

    overflow: hidden;

    display: flex;

    height: 80px;

    max-width: 100%;

}



#kundenbanner{

    height: 60px;

}



#technologien #logobanner .logobanner-wrapper,

#kundenbanner .kundenbanner-wrapper{

    display: flex;

    justify-content: space-around;

    align-items: center;



    animation: slide 40s linear infinite;

    -webkit-animation: slide 40s linear infinite;

    -moz-animation: slide 40s linear infinite;

    -o-animation: slide 40s linear infinite;

    -ms-animation: slide 40s linear infinite;

}



@keyframes slide {

    0% {transform: translateX(0%);}

    100% {transform: translateX(-100%);}

}



@-webkit-keyframes slide {

    0% {-webkit-transform: translateX(0%);}

    100% {-webkit-transform: translateX(-100%);}

}



@-moz-keyframes slide {

    0% {-moz-transform: translateX(0%);}

    100% {-moz-transform: translateX(-100%);}

}



@-o-keyframes slide {

    0% {-moz-transform: translateX(0%);}

    100% {-moz-transform: translateX(-100%);}

}



@-ms-keyframes slide {

    0% {-moz-transform: translateX(0%);}

    100% {-moz-transform: translateX(-100%);}

}



#technologien img{

    margin: 0 65px;

}



#testimonials #testimonial-wrapper{

    max-width: 1170px;

    display: flex;

    gap: 45px;

}



#testimonials #testimonial-wrapper{

    align-items: center;

}



#testimonials .testimonial-content{

    display: flex;

    gap: 45px;

    align-items: flex-start;

}



#testimonials .testimonial-content.invisible{

    display: none;

}



#testimonials #testimonial-text{

    align-self: flex-start;

    margin-top: 10px;

}



#testimonials #testimonial-image{

    max-width: 100%;

    filter: drop-shadow(0px 0px 30px rgba(44, 54, 73, 0.25));

}



#testimonials #testimonial-logo{

    margin-bottom: 4px;

}



#testimonials p{

    font-size: 18px;

    line-height: 30px;

}



#testimonials p span{

    font-weight: 700;

    margin-bottom: 0;

}



#testimonials #testimonial-signature{

    margin-top: 32px;    

}



#testimonials #testimonial-signature p{

    font-size: 16px;

    margin: 0;    

}



#testimonials #testimonial-signature img{

    margin-bottom: 3px;

}



#testimonials p#unternehmen{

    color: var(--lightgrey);

    font-weight: 700;

    margin-top: -3px;

}



/* LÖSCHEN */

#marc #marc-wrapper{

    width: 1170px;

    margin-left: 120px;

    transition: margin 0.2s;

}



#marc #text-marc{

    max-width: 525px;

}



/* LÖSCHEN ENDE */



/*

#marc #marc-wrapper{

    max-width: 1170px; /* Alten Wert löschen*//*

    display: grid;

    grid-template-columns: auto 1fr;

    column-gap: 45px;    

    justify-content: flex-start; 

}



#marc #fotos-marc{

    grid-row-end: span 2;

    margin-top: -10px;

} */



#marc h1, 

#marc h3{

    text-align: left;

}



#marc h3{

    margin-bottom: 20px;

}





/* #marc img{

    border-radius: 5px;

    filter: drop-shadow(4px 8px 20px rgba(131, 116, 178, 0.2));

}



#marc #foto-marc-1{

    position: relative;

    top: 110px;

    z-index: 5;

}



#marc #foto-marc-2{

    margin-left: -50px;

} */



#marc a img{

    height: 23px;

    border-radius: 0;

    filter: none;

}



#marc .btn-primary{

    display: inline-flex;

    gap: 10px;

    align-items: center;

}



#about-section h1{

    margin-top: 250px;

}



#about-section-wrapper{

    display: flex;

    flex-direction: column;

    align-items: center;

}



#about-section #about-icons,

#header-icons{

    display: flex;

    gap: 20px;

}



#about-section #about-icons{

    max-width: 1170px;

    width: 100%;

}



#header-icons{

    width: 100%;

    margin-top: calc(25vh);

}



#about-section #about-icons img{

    filter: drop-shadow(0px 20px 30px rgba(255, 255, 255, 0.5));

    width: 170px;

}



#header-icons img{

    max-height: 100%;

}



#about-section .icon{

    display: flex;

    flex-direction: column;

    align-items: center;

    flex-grow: 1;

    padding: 15px;

}



#header-leistungen .icon{

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8px 15px;

}



#about-section #about-icons p,

#header-icons p{

    text-align: center;

    font-size: 17px;

    font-weight: 700;

    color: var(--purple)

}



#about-section #about-icons p{

    margin-bottom: 0;

}





#header-icons p{

    margin-bottom: 15px;

}



#header-leistungen .icon p{

    text-align: left;

    margin: 0 0 0 15px;

    font-weight: 600;

    line-height: 24px;

}



#about-section #about-wrapper{

    display: flex;

    gap: 50px;

    margin-top: 100px;

}





#about-section #about-short,

#about-section #about-long{

    width: 100%;

    flex-grow: 1;

}



#about-section #about-short{

    text-align: right;

}



#about-section #about-short h4{

    line-height: 68px;

    margin-top: 0;

}



#about-section #about-long{

    margin-top: 200px;

}



#about-section #about{

    scroll-margin-top: 130px;

}



#gratischeck #diagramm-wrapper{

    display: flex;

    gap: 30px;

}



#gratischeck #diagramm-wrapper > div{

    width: 100%;

}



#gratischeck #diagramm{

    display: grid;

    grid-template-columns: auto 1fr;

    align-content: start;

    align-items: center;

    column-gap: 12px;

    min-width: 380px;

}



#gratischeck #diagramm > div{

    display: flex;

}



#gratischeck #diagramm p{

    font-size: 17px;

    font-weight: 700;

    color: var(--purple);

    text-align: right;

    margin-bottom: 12px;

}



#gratischeck #diagramm .diagramm-balken p{

    color: var(--white);

    margin: 0 0 0 10px;

    font-weight: 600;

    text-align: left;

    margin-bottom: 5px;

}



#gratischeck #balken30,

#gratischeck #balken40,

#gratischeck #balken20{

    background-color: var(--purple);

    height: 32px;

    border-radius: 5px 0px 0px 5px;

    border-width: 0px 0px 2px;

    border-style: solid;

    border-color: #C1B7DF;

}



#gratischeck .diagramm-balken{

    display: flex;

    box-shadow: 4px 8px 40px rgba(131, 111, 191, 0.15);

    width: 100%;

}



#gratischeck #balken30{min-width: 30%;}

#gratischeck #balken40{min-width: 40%;}

#gratischeck #balken20{min-width: 20%;}



#gratischeck .balken-rest{

    width: 100%;

    height: 32px;

    background-color: var(--glass);

    border-radius: 0px 5px 5px 0px;

    border-width: 0px 2px 2px 0px;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.9);

}



#cta-section #cta-section-wrapper,

#faq #faq-wrapper{

    display: flex;

    flex-direction: column;

    align-items: center;

}



#cta-section::before,

#kontaktangebot::before{

    position: absolute;

    content: "";

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: var(--purple);

    z-index: -5;

    opacity: 0.6;

}



#cta-section h1{

    color: var(--lightpurple);

}



#cta-section h3,

#cta-section p{

    color: var(--white);

    text-align: center;

    max-width: 1060px;

}



/* FORM ---------------------------------------------- */

#formular form{

    padding: 20px;

}



form label{

    font-size: 14px;

    font-weight: 600;

    color: #797D86;

    margin-bottom: 3px;

}



form label,

form input[type="text"],

form input[type="email"],

form textarea{

    display: block;

    width: 100%;

}



form input[type="text"],

form input[type="email"],

form textarea{

    border: none;

    border-bottom: 2px solid var(--pink);

    background-color: transparent;

    padding: 8px 0;

    margin-bottom: 34px;

}



form input[type="text"]:focus-visible,

form input[type="email"]:focus-visible{

    outline: none;

}



form input::placeholder,

form input[type="text"],

form input[type="email"],

form textarea{

    color: var(--pink);

    font-size: 16px;

    font-weight: 700;

    font-family: 'Montserrat';

    font-style: normal;

}



form input::placeholder{

    opacity: 0.6;

}



form #checkbox{

    display: flex;

    align-items: flex-start;

    gap: 5px;

}



form #checkbox p{

    margin-top: -8px;

    font-size: 13px;

    line-height: 22px;

}



form input[type="checkbox"]{

    display: inline-block;

    width: auto;

    margin-top: -3px;

}



@media (hover: hover){

    form a[type="submit"]:hover::before{

        opacity: 1;

    }

}



/* FAQ - ACCORDION ----------------------------------- */

#accordions{

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 50px;

    align-items: flex-start;

}



#accordions h6{

    color: var(--darkblue);

    font-weight: 600;

    margin: 7px 20px 0 10px;

    line-height: 22px;

}



#accordions p{

    font-weight: 500;

    margin: 5px 20px 5px 10px;

}



.accordion{

    width: calc(50% - 20px);

    padding: 10px 10px;

}



.accordion .question{

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.accordion .answer{

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.5s ease-in-out;

}



.accordion .btn-secondary{

    background-position: center;

    padding: 0;

    min-width: 32px;

    height: 32px;

    background-repeat: no-repeat;

    transition: background-image 0.2s ease-in-out, box-shadow 0.2s ease-in-out;  

}



.accordion .btn-secondary:before{

    content: '';

    display: flex;

    position: relative;

    top: 9px;

    left: 7px;

    width: 100%;

    height: 100%;

    background-image: url('../assets/arrow-accordion-purple.svg');

    background-repeat: no-repeat;

    transform-origin: 7px 4px;

    transition: transform 0.2s ease-in-out, background-image 0.2s ease-in-out;

}



@media (hover: hover){

    .accordion .btn-secondary:hover:before{

        background-image: url('../assets/arrow-accordion-white.svg');

    }

}



.accordion .open .btn-secondary:before{

    transform: rotate(180deg);

}



/* tawk.to ------------------------------------------- */

.widget-visible>iframe{

    transform: scale(0.5) !important;

}





/* LEISTUNGEN Unterseite */

#header-leistungen{

    flex-direction: column;

    align-items: center;

    text-align: center;

}



#header-leistungen h2,

#header-kontakt h2{

    font-size: 50px;

    color: var(--darkblue);

    max-width: 920px;

}



#header-leistungen p{

    max-width: 800px;

    margin: 12px auto 0;

}



#header-leistungen-wrapper{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    margin-top: calc(30px + 20vh);

}



#ablauf-wrapper{

    display: flex;

    flex-direction: column;

    align-items: center;

}



#ablauf-schritte{

    display: flex;

    column-gap: 90px;

    row-gap: 10px;

    flex-wrap: wrap;

    justify-content: center;

    margin-bottom: 30px;

}



.ablauf-schritt{

    min-width: 330px;

    max-width: calc(33% - 60px);

    display: flex;

}



.ablauf-schritt h5{

  margin-right: -18px;

  margin-left: 10px;

}



.ablauf-schritt h6{

    color: var(--darkblue);

}



.ablauf-schritt p{

    margin-top: 4px;

}



.ablauf-schritt > div{

    margin-top: 45px;

}



#bedarf-wrapper{

    max-width: 100%;

    padding: 0 0;

}



#bedarf h3{

    margin-bottom: 22px;

}



#bedarf h6{

    color: var(--purple);

    font-size: 17px;

    display: inline-block;

    margin: 0 60px;

    min-width: max-content;

}



#bedarf #bedarf-text{

    

    max-width: 620px;

    margin: 30px auto;

    padding-left: 15px;

    padding-right: 15px;

}



#leistungen-diagramm{

    max-width: 1440px;

    padding: 0 15px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    flex-direction: column;

}



#leistungen-diagramm h3{

    font-weight: 700;

    font-size: 22px;

    line-height: 32px;

    margin-top: 100px;

    margin-bottom: 32px;

}



#seo-diagramm{

    margin: 0px auto 30px;

    padding-left: 15px;

    padding-right: 15px;

    display: block;

    max-width: 980px;

    width: 100%;

}



/* KONTAKT Unterseite */



.kontaktseite section{

    min-height: auto;

}



#header-kontakt-wrapper{

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    justify-content: center;

    width: 100%;

    max-width: 1170px;

    margin-top: calc(30px + 20vh);

    margin-bottom: 145px;

}



#header-kontakt h1,

#socialmedia h1,

#socialmedia h3{

    text-align: left;

}



#header-kontakt h3{

    font-size: 22px;

    font-weight: 700;

    text-align: left;

    margin-bottom: 3px;

}



#kontaktformular-headlines{

    max-width: calc(40% - 15px);

}



#kontaktformular{

    max-width: calc(60% - 15px);

}



#kontaktformular .quform-elements{

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    align-items: flex-start;

}



#kontaktformular .quform-elements > div{

    width: calc(50% - 10px);

    padding: 20px;

}



#header-kontakt form #checkbox-kontakt{

    display: flex;

    align-items: flex-start;

    gap: 5px;

}



form #kontaktformular2 label{

    font-weight: 500;

    font-size: 16px;

    color: var(--darkblue);

    display: inline;

}



#kontaktformular2 input[type="radio"]{

    margin-top: 27px;

    margin-bottom: 5px;

}



#kontaktformular1 textarea{

    margin-bottom: 0;

    line-height: 24px;

    padding: 0;

    max-width: 100%;

    max-height: 50vh;

    min-height: 50px;

    transition: min-height 0.2s ease-in-out;

}



#kontaktformular1 textarea:focus-visible{

    outline: none;

    min-height: 150px;

}



#header-kontakt form input[type="checkbox"] p{

    margin-top: -8px;

    margin-bottom: 0;

    font-size: 13px;

    line-height: 22px;

}



#kontaktangebot-wrapper,

#socialmedia-wrapper{

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    max-width: 1170px;

}



#kontaktangebot-wrapper{

    margin: 14px 0 18px;

    flex-wrap: wrap;

    column-gap: 20px;

    row-gap: 15px;

}



#kontaktangebot-wrapper .kontaktangebot-button{

    display: flex;

    max-width: 100%;

    align-items: center;

    gap: 12px;

    justify-content: center;

}



#kontaktangebot-wrapper .kontaktangebot-button img{

    height: 60px;

}



#kontaktangebot{

    margin-top: 0;

}



#socialmedia-wrapper{

    margin-top: 50px;

    margin-bottom: 100px;

}



#kontaktangebot a{

    color: var(--white);

    border-color: var(--white);

    letter-spacing: 0.3px;

    transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s, padding 0.2s;

}



@media (hover: hover){

    #kontaktangebot a:hover{

        border-color: var(--purple);

    }

}



.calendly-inline-widget{

    position: relative;

    min-width: 340px;

    max-width: 100%;

    height: 866px;

    border-radius: 5px;

    box-shadow: 4px 8px 40px rgba(131, 111, 191, 0.15);

}



.calendly-inline-widget iframe{

    border-radius: 5px;

}



#socialmedia-icons{

    display: flex;

    flex-direction: row;

    gap: 60px;

    flex-wrap: wrap;

}



#socialmedia-icons > div{

    display: flex;

    flex-direction: column;

    align-items: center;

}



#socialmedia .socialmedia-icon{

    position: relative;

    width: 60px;

    height: 60px;

    background-color: #A3C5CC;

    background-image: linear-gradient(26deg, rgba(131,116,179, 1.0) 48%, rgba(163,197,204, 1.0) 92%);

    box-shadow: 4px 8px 20px rgba(131,116,178, 0.3);

    border-radius: 5px;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: background-color 0.2s ease-in-out, background-image 0.2s ease-in-out;

}



#socialmedia .socialmedia-icon img{

    z-index: 2;

}



#socialmedia .socialmedia-icon::before{

    position: absolute;

    content: "";

    inset: 0;

    background-color: rgba(131,116,179, 1.0);

    z-index: 1;

    border-radius: 5px;

    transition: opacity 0.2s ease-in-out;

    opacity: 0;

}



@media (hover: hover){

    #socialmedia .socialmedia-icon:hover::before{opacity: 1;}

    #socialmedia .socialmedia-icon:hover{background-color: #8374B3;}

}



#socialmedia .socialmedia-icon img{

    height: auto;

}



#socialmedia img#kontakt-linkedin-icon{width: 32px; margin-top: 2px}

#socialmedia img#kontakt-instagram-icon{width: 33px;}

#socialmedia img#kontakt-facebook-icon{width: 16px;}

#socialmedia img#kontakt-twitter-icon{width: 32px;}



#socialmedia h6{

    color: var(--purple);

    margin-top: 12px;

    font-size: 16px;

    text-align: center;

}



/* Impressum, Datenschutzerklärung, AGB, 404 Unterseiten */



#page.informationsseite #inhalt{

    width: 100%;

    padding: 0 15px;

    max-width: 736px;

    margin: 20vh auto;

}



#page.informationsseite #inhalt h1,

#page.informationsseite #inhalt h2{

    hyphens: auto;

    -webkit-hyphens: auto;

    -moz-hyphens: auto;

    -o-hyphens: auto;

    -ms-hyphens: auto;

}



#page.informationsseite #inhalt h1{

    font-size: 50px;

    font-weight: 900;

    text-align: left;

    color: var(--purple);

    margin-bottom: 0px;

    margin-top: 60px;

}



#page.informationsseite #inhalt h2{

    font-size: 34px;

    font-weight: 800;

    color: var(--darkblue);

    margin-top: 40px;

}



#page.informationsseite #inhalt h3,

#page.informationsseite #inhalt h4{

    text-align: left;

    margin-top: 32px;

    font-weight: 700;

}



#page.informationsseite #inhalt h3{

    font-size: 24px;

    line-height: 32px;

    margin-bottom: 10px;

}



#page.informationsseite #inhalt h4{

    color: var(--darkblue);

    font-size: 20px;

    line-height: 28px;

    margin-bottom: 5px;

}



#page.informationsseite #inhalt p{

    margin-bottom: 10px;

}



#page.informationsseite #inhalt a{

    color: var(--purple);

    font-weight: 700;

}



#page.informationsseite #inhalt a.btn-primary{

    color: var(--white);

}



/* FOOTER -------------------------------------------- */

footer{

    background-color: var(--darkblue);

}



#footer-wrapper{

    display: flex;

    justify-content: space-between;

    gap: 0 20px;

}



footer a, footer p{

    color: #879CBD;

    transition: color 0.2s;

}



footer a span{

    color: #BBCFE7;

    font-weight: 600;

    transition: color 0.2s;

    display: block;

    margin-bottom: 12px;

}



@media (hover: hover){

    footer a:hover, footer a span:hover{

        color: var(--white);

    }

}



footer #adresse{

    margin-top: 16px;

}



footer h2{

    font-size: 1.1875rem;

    font-weight: 800;

    color: var(--purple);

    margin-top: 60px;

    margin-bottom: 20px;

}



footer li{

    margin-bottom: 1rem;

}



.sm-icon{

    width: 25px;

    height: 25px;

    transition: background-image 0.2s;

    background-position: center;

    background-repeat: no-repeat;

    display: inline-block;

    margin-right: 8px;

}



.sm-link{

    display: flex;

    align-items: center;

}



#linkedin-icon{background-image: url('../assets/icon-linkedin.svg');}

#instagram-icon{background-image: url('../assets/icon-instagram.svg');}

#facebook-icon{background-image: url('../assets/icon-facebook.svg');}

#twitter-icon{background-image: url('../assets/icon-twitter.svg');}



@media (hover: hover){

    .sm-link:hover #linkedin-icon{background-image: url('../assets/icon-linkedin-white.svg');}

    .sm-link:hover #instagram-icon{background-image: url('../assets/icon-instagram-white.svg');}

    .sm-link:hover #facebook-icon{background-image: url('../assets/icon-facebook-white.svg');}

    .sm-link:hover #twitter-icon{background-image: url('../assets/icon-twitter-white.svg');}

}

#cssdesignawards{
    display: flex;
    flex-direction: row;
}

#awards img{

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 128px;

    height: 128px;

    margin-top: 60px;

    margin-right: 20px;

    transition: all 0.2s;

}

#awards img:hover{

    transition: all 0.2s;

    transform-origin: center;

    transform: scale(110%);

}

#awards img::before{

    transition: all 0.2s;

    transform-origin: center;

    transform: scale(100%);

}



#backtotop{

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    margin-top: 60px;

    border-radius: 46px;

    background-color: #A3C5CC;

    background-image: linear-gradient(30deg, rgba(131,116,178, 1.0) 40%, rgba(163,197,204, 1.0) 80%);

    box-shadow: 4px 8px 20px rgba(131, 116, 178, 0.3);

    transition: background-color 0.2s ease-in-out;

}



#backtotop img{

    margin-bottom: 2px;

    z-index: 2;

}



#backtotop::before{

    position: absolute;

    content: "";

    inset: 0;

    background-color: rgba(131,116,178, 1.0);

    z-index: 1;

    border-radius: 50px;

    transition: opacity 0.2s ease-in-out;

    opacity: 0;

}



@media (hover: hover){

    #backtotop:hover::before{

        opacity: 1;

    }

}



#copyright{

    text-align: center;

    color: #080B15;

    margin: 80px auto 0;

    padding-bottom: 15px;

    font-size: 14px;

    font-weight: 600;

}



/* STYLES -------------------------------------------- */

.glass{

    background-color: var(--glass);

    border-width: 0px 2px 2px 0px;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.9);

    box-shadow: 4px 8px 40px rgba(131, 111, 191, 0.15);

    border-radius: 5px;

}



/* CSS-ANIMATIONS ------------------------------------ */

.fade-in{

    animation: fadeIn 0.4s ease-in-out;

    -webkit-animation: fadeIn 0.4s ease-in-out;

    -moz-animation: fadeIn 0.4s ease-in-out;

    -o-animation: fadeIn 0.4s ease-in-out;

    -ms-animation: fadeIn 0.4s ease-in-out;

}



@keyframes fadeIn {

    0% { opacity: 0;}

    100% { opacity: 1;}

}

  

@-moz-keyframes fadeIn{

    0% {opacity: 0;}

    100% {opacity: 1;}

}



@-webkit-keyframes fadeIn{

    0% {opacity: 0;}

    100% {opacity: 1;}

}



@-o-keyframes fadeIn{

    0% {opacity: 0;}

    100% {opacity: 1;}

}



@-ms-keyframes fadeIn{

    0% {opacity: 0;}

    100% {opacity: 1;}

}



/* RESPONSIVE ----------------------------------------- */



.mobilebreak{

    display: none;

}



@media screen and (max-width: 1440px) {

    h5{

        font-size: 7.3vw;  

    }



    #about-section #about-icons p,

    #header-icons p {

        font-size: 16px;

        line-height: 24px;

    }

}



@media screen and (max-width: 1200px) {

    #mainnav li,

    nav.sticky #mainnav li{

        margin-left: 45px

    }



    h5{

        font-size: 120px;

        line-height: 120px;

        margin-bottom: 0;

        margin-top: 25px;  

    }



    #about-section #about-short h4{

        font-size: 5vw;

        line-height: 5.7vw;

    }



    #gratischeck #diagramm{

        display: block;

        min-width: 260px;

    }



    #gratischeck #diagramm p{

       text-align: left;

       margin-bottom: 2px;

    }

}



@media screen and (max-width: 1024px) {

    #subnav-wrapper{

        grid-template-columns: 1fr 1fr;

    }



    #footer-wrapper{

        flex-wrap: wrap;

        justify-content: flex-start;

    }



    .footer-block{

        min-width: calc(50% - 50px);      

    }



    #footer-kontakt{order: 1;}

    #footer-leistungen{order: 2;}

    #backtotop{order: 3;}

    #footer-uebersicht{order: 4;}

    #footer-social{order: 5;}

}



@media screen and (max-width: 992px) {

    nav ul{

        font-size: 15px;

    }



    nav .btn-primary{

        letter-spacing: 0;

        padding: 10px 22px 12px;

        font-size: 15px;

    }



    #header-startseite > div{

        margin-left: 0;

    }



    /* LÖSCHEN */

    #marc #marc-wrapper{

        margin-left: 0;

    }



    /* LÖSCHEN ENDE */



    #userdesire #cta-buttons {

        flex-direction: column;

        align-items: center;

        gap: 0 20px;  

    }



    #userdesire #cta-buttons .btn-primary{

        margin-top: 15px;

        min-width: 280px;

    }



    #userdesire h5 .mobilebreak{

        display: inherit;

    }



    #leistungen #leistungen-wrapper h3{

        margin-bottom: 20px;

    }



    #leistungen #leistungen-auswahl-wrapper{

        flex-direction: column;

        display: block;

        gap: 0;

    }



    #leistungen #leistungen-auswahl-wrapper ul#leistungen-auswahl{

        text-align: left;

        margin-top: 0;

        margin-bottom: 30px;

    }



    #leistungen #leistungen-auswahl-wrapper #leistungen-auswahl li{

        display: block;       

        margin-bottom: 12px;  

    }



    #leistungen #leistungen-auswahl-wrapper #leistungen-auswahl a{

        text-align: left;

    }



    #leistungen .btn-inactive{

        border: 2px solid var(--lightgrey);

        font-weight: 700;

    }

    

    #leistungen #leistungen-auswahl .btn-secondary,

    #leistungen #leistungen-auswahl .btn-inactive{

        padding: 11px 26px 12px;

        display: block;

    }



    #testimonials #testimonial-content{

        flex-direction: column;

        align-items: center;

    }



    #testimonials #testimonial-text{

        margin-left: -40px;

        width: calc(100% + 80px);

    }



    #testimonials #btn-next{

        right: 15px;

    }



    #testimonials .testimonial-content{

        gap: 30px; 

    }



    #testimonials #testimonial-wrapper{

        gap: 0px;

    }



    #testimonials #testimonial-image{

        padding-bottom: 15px;

        margin-bottom: -15px;

    }



    /* #marc #marc-wrapper{

        grid-template-columns: auto 1fr;

        column-gap: 30px;

    }



    #marc #foto-marc-1{

        display: none;

    }



    #marc #foto-marc-2{

        margin-left: 0;

    } */



    #about-section #about-icons,

    #header-icons{

        flex-wrap: wrap;

        justify-content: center;

    }



    #about-section #about-icons img{

        width: 100px;

    }



    #about-section #about-icons p{

        text-align: left;

    }



    #about-section .icon{

        gap: 10px;

        width: 340px;

        max-width: 340px;

        flex-direction: row;

        justify-content: flex-start;

        padding-top: 4px;

        padding-bottom: 6px;

    }



    #header-icons .icon{

        min-width: 321px;

    }



    #about-section #about-short h4{

        font-size: 50px;

        line-height: 57px;

    }



    #gratischeck #diagramm-wrapper {

        flex-wrap: wrap;

    }



    #gratischeck #diagramm{

        display: grid;

        row-gap: 10px;

        width: 100%;

    }



    #gratischeck #diagramm p{

        text-align: right;

    }



    #gratischeck #formular,

    #gratischeck #seocheck-text{

        max-width: calc(50% - 15px);

        margin-top: 20px;

    }



    #accordions {

        gap: 15px;

    }



    .accordion {

        width: 100%;

    }



    #kontaktformular-headlines{

        max-width: 100%;

        text-align: center;

    }



    #kontaktformular-headlines h1{

        text-align: center;

    }

    

    #kontaktformular{

        max-width: 690px;

    }



    #kontaktangebot-wrapper{

        justify-content: center;

    }



    #socialmedia-wrapper{

        flex-wrap: wrap;

        justify-content: center;

    }



    #socialmedia-wrapper > div,

    #socialmedia-icons{

        width: 100%;

        justify-content: center;

    }



    #socialmedia h3,

    #socialmedia h1{

        text-align: center;

        

    }

}



@media screen and (max-width: 860px){

    #mainnav li, nav.sticky #mainnav li {

        margin-left: 30px;

    }

}



@media screen and (max-width: 768px){

    #cssdesignawards{
        flex-direction: column;
        margin-left: 30px;
    }

    #awards img{
        margin-top: 30px;
    }

    nav #mainnav{

        display: none;

    }

    nav{

        position: absolute;

        transition: none;

    }



    #mobilenav{

        display: block;

    }



    #subnav{

        display: none;

    }



    nav #mainnav li.mobileonly{

        display: block;

    }



    .mobilebreak{

        display: inherit;

    }



    /* #marc h1,

    #marc h3{

        text-align: center;

    }



    #marc #marc-wrapper{

        grid-template-columns: 1fr;

    }



    #marc #headlines-marc{

        order: 1;

    }



    #marc #text-marc{

        order: 3;

    }



    #marc #fotos-marc{

        margin-top: 0;

        order: 2;

    }



    #marc #foto-marc-1{

        display: block;

        top: 0;

        max-width: 100%;

        margin: 0 auto 12px;

        grid-row-start: 3;

    }



    #marc #foto-marc-2{

        display: none;

    } */



    #about-section #about-wrapper{

        display: block;

    }



    #about-section #about-long{

        margin-top: 100px;

    }



    #about-section #about-icons{

        gap: 15px;

    }



    #about-section .icon{

        gap: 0;

        flex-direction: column;

        padding: 15px;

        max-width: 231px;

    }



    #about-section #about-icons img {

        width: 80%;

        margin-bottom: 0;

        margin-top: 5px;

    }



    #about-section #about-icons p {

        text-align: center;

    }



    #header-icons{

        margin-top: 120px;

    }



    #header-leistungen h2,

    #header-kontakt h2{

        font-size: 36px;

        line-height: 46px;

    }



    #header-kontakt h3 {

        font-size: 18px;

        font-weight: 700;

        text-align: left;

        margin-bottom: 4px;

        margin-top: 4px;

    }



    #kontaktformular .quform-elements{

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }



    #kontaktformular .quform-elements > div{

        min-width: 290px;

        max-width: 330px;

        width: 100%;

    }



    #kontaktangebot-wrapper{

        margin: 24px 0 28px;

    }



    #kontaktangebot a{

        min-width: 216px;

        text-align: center;

    }

}



@media screen and (max-width: 600px) {

    #header-startseite h2{

        font-size: 10vw;

        line-height: 10.5vw;

    }



    #header-startseite .btn-secondary {

        margin-top: 6px;

    }



    #testimonials #testimonial-wrapper {

        align-items: baseline;

    }



    #testimonials #testimonial-image{

        min-width: calc(100% + 80px);

    }



    .footer-block{

        width: calc(100% - 70px);      

    }



    #footer-kontakt{order: 1;}

    #backtotop{order: 2;}

    #footer-leistungen{order: 3;}



    #gratischeck #formular,

    #gratischeck #seocheck-text{

        max-width: 100%;

        margin-top: 0px;

    }



    #gratischeck #seocheck-text{

        text-align: left;

    }



    #header-leistungen h2,

    #header-kontakt h2{

        font-size: 34px;

        line-height: 40px;

    }



    #socialmedia-icons {

        margin-top: 8px;

        gap: 45px;

    }



    #socialmedia-icons h6{

        font-size: 15px;

    }

}



@media screen and (max-width: 480px){  

    h1{

        font-size: 13px;

        line-height: 20px;

    }



    #header-startseite h2{

        font-size: 11vw; 

        line-height: 11.5vw;

    }



    #header-startseite #headline{

        margin-bottom: 0;

    }



    h3{

        font-size: 28px;

        line-height: 38px;

        margin-bottom: 30px;

    }



    h4{

        font-size: 44px;

        line-height: 48px;

        margin-bottom: 12px;

    }



    p{

        font-size: 15px;

        line-height: 24px;

    }



    h5{

        font-size: 85px;

        line-height: 85px;

    }



    .btn-primary, .btn-secondary{

        font-size: 15px;

    }



    .btn-primary{

        display: flex;

        justify-content: center;

        min-width: 100%;

    }



    .btn-secondary{

        padding: 10px 20px 13px;

    }



    #testimonials p {

        font-size: 17px;

        line-height: 29px;

    }



    #gratischeck #diagramm{

        display: block;

    }



    #gratischeck #diagramm p{

        text-align: left;

        font-size: 16px;

    }



    #gratischeck #diagramm .diagramm-balken p {

        margin-top: 3px;

    }



    #leistungen-diagramm h3{

        font-size: 19px;

        line-height: 27px;

    }



    #socialmedia-icons{

        column-gap: 0;

    }



    #socialmedia-icons > div{

        min-width: calc(150px);

        justify-content: center;

    }



    #page.informationsseite #inhalt h1{

        font-size: 42px;

        line-height: 48px;

    }



    #page.informationsseite #inhalt h2{

        font-size: 32px;

        line-height: 38px;

        margin-top: 30px;

    }



    #page.informationsseite #inhalt h4{

        margin-top: 20px;

    }

}

.language-select{
    color: var(--purple);
    border: 2px solid var(--purple);
    box-shadow: none;
    padding: 5px 21px 4px;
    background: transparent;
    font-weight: 700;
    font-size: 12px;
}