@font-face {
    font-family: "Verdana";
    src: url("/fonts/verdana.ttf");
    font-style: normal;
}
@font-face {
    font-family: "Poppins";
    src: url("/fonts/verdanab.ttf");
    font-weight: bold;
}


:root {
    /*Farben*/
    --schwarz:#161615;
    --blau: #291973;

    /*Abstände*/
    --rand: 200px;

    /*Textgrößen*/
    --nav: 20px;
    --normal-text: 18px;
}




/*Allgemeines*/
body{
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial;
    font-size: var(--normal-text);

}
html{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
h1{
    font-family: Verdana, Arial;
    font-weight: bold;
    font-size: 55px;
    color: var(--blau);
    text-align: center;
    display: block;
    height: 100%;
  /*  border: 2px solid yellow;*/
    width: max-content;
    margin-left: var(--rand);
}
h2{
    font-family: Verdana, Arial;
    color: var(--blau);
    font-weight: bold;
    font-size: 40px;
    /*border: 2px solid pink;*/
    margin-bottom: 0;
}
h3{
    font-family: Verdana, Arial;
    color: var(--blau);
    font-weight: bold;
    font-size: 25px;
}
h4{
    font-family: Verdana, Arial;
    color: var(--blau);
    font-size: 18px;
    font-weight: bold;
}

.strich-h2{
    max-width: 100%;
}

.section-inhalt{
    padding-left: var(--rand);
    padding-right: var(--rand);
}

.bilderreihe-auto{
    margin: auto;
    display: block;
    margin-bottom: 170px;
    margin-top: 170px;
    height: auto;
    max-width: 100%;
}
.bilderreihe-auto-erstes{
    margin: auto;
    display: block;
    margin-bottom: 100px;
    margin-top: 250px;
    height: auto;
    max-width: 100%;
}
.auto-desktop{
    display: block;
}
.auto-mobile{
    display: none;
}




/* Header */
header{
    background-image: url("images/header-bild-auto-neu.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    margin-top: 0;
    padding-top: 0;
    position: relative;
    /*border: 2px solid red;*/
}
.overlay{
    position: absolute;
    /*border: 2px solid green;*/
    display: flex;
    align-items: center;
    gap: 9em;
    z-index: 2;
    width: 100%;
}

.img-2{
   /* border: 2px solid red;*/
    top: 50%;
}
.img-1{
    position: absolute;
   /* border: 2px solid brown;*/
    z-index: 1;
    width: 100%;
}
.banner-container{
    align-items: center;
    display: flex;
    /*border: 2px solid orange;*/
    height: 100%;
}

.kontakt-header img{
    margin-right: 0;
    /*border: 2px solid red;*/
}
.kontakt-header a{
    text-decoration: none;
    color: var(--blau);
    padding-right: 2em;
    font-size: var(--nav);
}
.kontakt-header{
    /*border: 2px solid yellow;*/
    width: max-content;
    margin-right: 0;
    margin-left: auto;

}
.k-daten-header{
    /*border: 2px solid pink ;*/
    width: max-content;
    margin-left: 10%;
    padding-bottom: 10px;
    padding-top: 5px;
}
/* Mobile Kontaktleiste */
.kontakt-mobile {
    display: none; /* Standard Desktop */
    position: absolute; /* Position relativ zur nav-leiste */
    top: 100%;       /* direkt unterhalb der nav-leiste */
    left: 0;
    width: 100%;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
    background-color: white;
    border-bottom: 1px solid #ccc;
    z-index: 1002; /* über dem restlichen Inhalt, unter Burger Menü (1000+) */
}

.kontakt-mobile a img {
    width: 40px;
    height: 40px;
}







/*Navigation*/
.haupt-nav {
    /*border: 2px solid yellow;*/
    height: max-content;
}
.haupt-nav ol{
    list-style: none;
    display: flex;
}
.haupt-nav li{
    display: inline-flex;
    align-items: center;
    vertical-align: center;
    padding-left: 1em;
    padding-right: 1em;
}
.haupt-nav a{
    list-style: none;
    text-underline: none;
    color: var(--blau);
    font-size: var(--nav);
    text-decoration: none;
}
.nav-strich{
    width: 100%;
    margin-top: -12em;
    z-index: 1;
}
.nav-logo{
    width: 7%;
    z-index: 2;
}
.nav-holder{
    display: flex;
    padding-left: var(--rand);
    /*border: 2px solid green;*/
    align-items: center;
}
.nav-leiste{
    /*border: 2px solid red;*/
    margin-top: -60px;
}

/* Burger Menü Styles */
.burger {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--blau);
    cursor: pointer;
    margin-left: auto;
    z-index: 1061;
}





/*Überschriften h2 unterstrichen */
.h2-anhang{
    color: var(--blau);
    font-size: 20px;
    font-weight: bold;
   /* border: 2px solid orange;*/
    padding-left: 2em;
    margin-top: auto;
    margin-bottom: 0;

}
.headline{
   /* border: 2px solid red;*/
    width: 100%;
}
.headline-text{
    /*border: 2px solid yellow;*/
    width: max-content;
    display: flex;
    flex-wrap: wrap;
    margin-left: var(--rand);
}
.headline img{
    /*border: 2px solid green;*/
    padding-top: 1em;
    padding-bottom: 4em;
}




/*Zwei Spalten*/
.two-column { /*für ausschließlich Texte*/
    column-count: 2;
    column-gap: 2em;
    column-fill: balance;
    margin-top: 0;
}
.two-column p{
    margin: 0;
    padding: 0;
}
.two-column-container{
    display: flex;
    /* border: 2px solid green;*/
    padding-top: 5em;
}
.two-column-left{
    width: 48%;
    margin-right: 2%;
    /*border: 2px solid red;*/
}
.two-column-right{
    width: 62%;
    /*border: 2px solid blue ;*/
    margin-right: calc(var(--rand)* -1);
    margin-left: auto;
}
.two-column-container-img{
    max-width: 100%;
}






/*Icon Banner Merkmale*/
.icon-banner{
    display: flex;
   /*border: 2px solid yellow;*/
    margin-top: 80px;
    margin-bottom: 80px;
}
.icon-banner ol{
    list-style: none;
    margin-right: auto;
    margin-left: auto;
    display: flex;
   /* align-items: center;*/
   /* border: 2px solid green;*/
}
.icon-banner li{
    display: inline-block;
    margin-left: 3em;
    margin-right: 3em;
    align-items: center;
   /* border: 2px solid red;*/
}
.icon-banner p{
    text-align: center;
}
.icon-banner img{
    margin: auto;
    /*border: 2px solid brown;*/
    display: block;
}

/*Icon Banner Kontaktdaten*/
.icon-banner-kontakt{
    display: flex;
    /*border: 2px solid yellow;*/
    margin-top: 80px;
    margin-bottom: 80px;
}
.icon-banner-kontakt ol{
    list-style: none;
    margin-right: auto;
    margin-left: auto;
    display: flex;
  /*  align-items: center;*/
    /* border: 2px solid green;*/
}
.icon-banner-kontakt li{
    display: inline-block;
    margin-left: 4em;
    margin-right: 4em;
    align-items: center;
    /* border: 2px solid red;*/
}
.icon-banner-kontakt p{
    text-align: center;
}
.icon-banner-kontakt img{
    margin: auto;
    /*border: 2px solid brown;*/
    display: block;
}

.kontakt-link{
    text-decoration: underline;
    color: var(--schwarz);
}






/* Liste mit Haken statt Nummern */
.liste{
    list-style: none;

   /* border: 2px solid green;*/
}
.liste li img{
   /* border: 2px solid red;*/
    margin-left: -30px;
}
.liste-icon{
    margin-right: 2em;
    vertical-align: middle;
    flex-shrink: 0;
}
.liste li {
    display: flex;
    padding-top: 1em;
    flex-wrap: wrap;
}
.liste li p {
    margin: 0;
    flex: 1; /* Text darf den restlichen Platz nehmen */
    min-width: 0; /* verhindert, dass flex den Text über die Breite hinausschiebt */
    white-space: normal;
    overflow-wrap: break-word;
}




/*Footer */
footer{
    background-color: var(--blau);
  /*  border: 2px solid red;*/
    height: 60vh;
    padding-top: 4em;
}
.banner-container-footer{
    align-items: center;
    display: flex;
    /*border: 2px solid orange;*/
    height: 100%;
   /* border: 2px solid yellow;*/
    padding-top: -40px;
}
.banner-text{
    font-family: Verdana, Arial;
    font-weight: bold;
    font-size: 55px;
    color: var(--blau);
    text-align: center;
    display: block;
    height: 100%;
    /*  border: 2px solid yellow;*/
    width: max-content;
    margin-left: var(--rand);
}
.footer-nav{
    /*border: 2px solid green;*/
    width: max-content;
}
.footer-nav ol{
    list-style: none;
    width: 100%;
    padding-top: 16em;
    padding-left: 0;
}
.footer-nav li{
    padding-top: 2em;
    padding-left: 0;
    margin-left: 0;
    text-align: center;
   /* border: 2px solid pink;*/
}
.footer-nav a{
    color: white;
    text-decoration: none;
    font-size: 20px;
}
footer p{
    color: white;
    font-size: 20px;
}
.footer-text-container{
    /*border: 2px solid yellow;*/
    display: flex;
    justify-content: center;
}
.copyight{
    text-align: center;
    width: 100%;
    margin-top: 4em;
}




/* Pfeil nach oben */
.scroll-top {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 30px;
    height: 40px;
    font-size: 2rem;
    background-color: var(--blau);
    color: white;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(225,225,225,1);
    z-index: 999;
    cursor: pointer;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.scroll-top:hover {
    background-color: white;
    color: var(--blau);
    box-shadow: 0 7px 12px rgba(0,0,0,0.3);
}
.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}




/*Tablet version*/

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

    .img-2{
        width: 20%;
        height: auto;
    }


    /*Icon Banner MErkmale */
    .icon-banner ol{
        padding-left: 0;
    }


    /*Icon Banner Kontakt */
    .icon-banner-kontakt ol{
        padding-left: 0;
    }
    .icon-banner-kontakt li{
        margin-left: 3em;
        margin-right: 3em;

    }


    .copyight{
        margin-top: 2em;
    }

}


@media only screen and (max-width: 1300px) {
    h1{
        font-size: 40px;

    }

    .banner-text{
        font-size: 40px;
    }

    .footer-nav ol{
        padding-top: 10em;
    }
    .copyight{
        margin-top: 4em;
    }

}


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

    .icon-banner li {
        margin-left: 2em;
        margin-right: 2em;
    }
}


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

    :root {
        --rand:70px
    }

    h1{
        font-size: 30px;
        padding-left: 3em;
    }

    .banner-text{
        font-size: 30px;
        padding-left: 3em;

    }
}


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

    .burger {
        display: block;
    }
    .haupt-nav {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: white;
        width: 100%;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        padding: 8em 0;
        z-index: 1060;
    }

    .haupt-nav.show {
        display: block;
    }

    .haupt-nav ol {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }
    .nav-logo{
        width: 10%;
        padding-top: 1em;
        z-index: 2000;
    }
    .nav-strich{
        z-index: 1030;
        width: 100%;
    }

    .haupt-nav li {
        padding: 1em 0;
        padding-left: var(--rand);
    }

    .nav-holder {
        padding-left: var(--rand);
        padding-right: var(--rand);
        align-items: center;
    }
    .nav-leiste {
        position: absolute;
        top: 3em;
        /*border: 2px solid red;*/
        width: 100%;
        z-index: 1010; /* über dem Headerbild */
    }

    .kontakt-header {
        display: none;
    }

    .kontakt-mobile {
        display: flex;
    }

    .headline-text {
        width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }



    .bilderreihe-auto-erstes{
        margin-top: 150px;

    }



    .icon-banner li {
        margin-left: 1em;
        margin-right: 1em;
    }


}




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


    .img-2{
        width: 10%;
        height: auto;
    }


    .burger {
        display: block;
    }
    .haupt-nav {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: white;
        width: 100%;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        padding: 8em 0;
        z-index: 1060;
    }

    .haupt-nav.show {
        display: block;
    }

    .haupt-nav ol {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }
    .nav-logo{
        width: 10%;
        padding-top: 1em;
        z-index: 2000;
    }
    .nav-strich{
        z-index: 1030;
        width: 100%;
    }

    .haupt-nav li {
        padding: 1em 0;
        padding-left: var(--rand);
    }

    .nav-holder {
        padding-left: var(--rand);
        padding-right: var(--rand);
        align-items: center;
    }
    .nav-leiste {
        position: absolute;
        top: 3em;
        /*border: 2px solid red;*/
        width: 100%;
        z-index: 1010; /* über dem Headerbild */
    }

    .kontakt-header {
        display: none;
    }

    .kontakt-mobile {
        display: flex;
    }

    .headline-text {
        width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }



    .bilderreihe-auto-erstes{
        margin-top: 150px;

    }


    .headline-text{
        flex-direction: column;
    }
    .h2-anhang{
        padding-left: 0;
        padding-top: 1em;
    }


    .icon-banner-kontakt li{
        margin-left: 1em;
        margin-right: 1em;

    }


}

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

    /*Zwei Spalten*/
    .two-column { /*für ausschließlich Texte*/
        column-count: 1;

    }

    .two-column-container{
        flex-direction: column;
    }
    .two-column-left{
        width: 100%;
        margin-right: 0;
        /*border: 2px solid red;*/
    }
    .two-column-right{
        width: 100vw;
        /*border: 2px solid blue ;*/
        margin-left: calc(-1 * var(--rand, 50px));
        margin-right: calc(-1 * var(--rand, 50px));

    }
    .two-column-container-img{
        padding-top: 4em;
    }

}

@media only screen and (max-width: 800px) {
    h1{
        font-size: 25px;
        padding-left: 0;
    }
    .banner-text{
        font-size: 25px;
    }


    /*Icon Banner MErkmale */
    .icon-banner ol{
        flex-direction: column;
    }
    .icon-banner li{
        margin-top: 2em;
        margin-left: 0;
        margin-right: 0;

    }

    /*Icon Banner Kontakt */
    .icon-banner-kontakt ol{
        flex-direction: column;
    }
    .icon-banner-kontakt li{
        margin-top: 2em;
        margin-left: 0;
        margin-right: 0;

    }

}





/*mobile version*/

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

    :root {
        /*Abstände*/
        --rand: 50px;

        /*Textgrößen*/
        --nav: 20px;
        --normal-text: 16px;
    }
    h1{
        margin-left: 0;
        font-size: 23px;
        padding-left: 0;
    }
    h2{
        font-size: 30px;
    }

    h4{
        font-size: 20px;
    }
    .auto-mobile{
        display: block;
    }
    .auto-desktop{
        display: none;
    }





    /* Header */
    header{
        height: 60vh;
        /*border: 2px solid red;*/
    }
    .overlay{
        flex-direction: column;
       /* border: 2px solid red;*/
        justify-content: center;
    }
    .order-h1-1{
        order: 2;
       /* border: 2px solid green;*/
    }
    .order-h1-2{
        order: 1;
    }
    .img-1{
        display: block;        /* sicherstellen, dass es sichtbar ist */
        width: 100%;           /* füllt die Breite */
        height: 50%;           /* gewünschte Höhe */
        object-fit: cover;     /* skaliert das Bild und schneidet überschüssige Teile ab */
        object-position: center; /* Bild bleibt zentriert */
    }
    .img-2{
        display: none;

    }
    .headline-text{
        flex-direction: column;
    }
    .h2-anhang{
        padding-left: 0;
        padding-top: 1em;
        font-size: 18px;
    }
    .burger {
        display: block;
    }
    .haupt-nav {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: white;
        width: 100%;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        padding: 8em 0;
        z-index: 1060;
    }

    .haupt-nav.show {
        display: block;
    }

    .haupt-nav ol {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }
    .nav-logo{
        width: 20%;
        padding-top: 1em;
        z-index: 2000;
    }
    .nav-strich{
        z-index: 1030;
        width: 100%;
    }

    .haupt-nav li {
        padding: 1em 0;
        padding-left: var(--rand);
    }

    .nav-holder {
        padding-left: var(--rand);
        padding-right: var(--rand);
        align-items: center;
    }
    .nav-leiste {
        position: absolute;
        top: 3em;
        /*border: 2px solid red;*/
        width: 100%;
        z-index: 1010; /* über dem Headerbild */
    }

    .kontakt-header {
       display: none;
    }

    .kontakt-mobile {
        display: flex;
    }

    .headline-text {
        width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }



    .bilderreihe-auto-erstes{
        margin-top: 150px;

    }






    /*Zwei Spalten*/
    .two-column { /*für ausschließlich Texte*/
        column-count: 1;

    }

    .two-column-container{
        flex-direction: column;
    }
    .two-column-left{
        width: 100%;
        margin-right: 0;
        /*border: 2px solid red;*/
    }
    .two-column-right{
        width: 100vw;
        /*border: 2px solid blue ;*/
        margin-left: calc(-1 * var(--rand, 50px));
        margin-right: calc(-1 * var(--rand, 50px));

    }
    .two-column-container-img{
        padding-top: 4em;
    }

    /*Icon Banner MErkmale */
   .icon-banner{
       display: inline;
   }
    .icon-banner ol{
        flex-direction: column;
        margin-left: 0;
    }
    .icon-banner li{
      margin-top: 2em;
        margin-left: 0;
        margin-right: 0;

    }

    /*Icon Banner Kontakt */
    .icon-banner-kontakt ol{
        flex-direction: column;
    }
    .icon-banner-kontakt li{
        margin-top: 2em;
        margin-left: 0;
        margin-right: 0;

    }



    /*Footer */
    .banner-text{
        font-size: 23px;
        margin-left: 0;
        padding-left: 0;
    }
    .footer-nav ol{
        padding-top: 10em;
        width: auto;
        padding-left: 0 ;
    }

    .copyight{
        font-size: 12px;
    }



    /* Pfeil nach oben */
    .scroll-top {
        bottom: 30px;
        right: 70px;

    }

}