@font-face {
    font-family: "Quicksand";
    src: url("../fonts/Quicksand-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "NotoSans";
    src: url("../fonts/NotoSans-Regular.woff2") format("woff2");
}


html {
    scroll-behavior: smooth;
}

body {
    font-family: "NotoSans", sans-serif;
    margin: 0;
    color: #292929;
    /* wegen Kontrast und Lesbarkeit */
    background-color: #f3f3f3;
}


nav {
    background-color: #1437cb;
    font-family: "Quicksand";
    font-size: 12px;
    margin:0;

    position: sticky;
    z-index: 999;
    top: 0;
    text-tran sform: uppercase;

}

nav .nav-mobil {
    list-style-type: none;
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
}

nav .nav-mobil .nav-logo {
    width: 92px;
    padding: 20px;
}

nav .nav-mobil .menu {
    position: absolute;
    top: 44px;
    right: 30px;
    z-index: 1;
}

nav .nav {
    display: none;
}

body nav ul li a.current {
    text-decoration: underline;
}

footer .current {
    text-decoration: underline;
}

nav ul {
    padding: 0;
}

.nav_open {
    transform: translateY(-130%);
}

nav ul.nav_open {
    display: block;
    position: absolute;
    width: 20%;
    right: 0px;
    top: 60px;
    background-color: #1437cb;
    padding: 25px;
    padding-left:0px;
    
}

nav ul.nav_open li {
    list-style-type: none;
    text-align: left;
    padding: 20px;
}

nav ul.nav_open li a {
    text-decoration:none;
    color: orange;
    align-items: flex-end;
}

nav ul.nav_open li img {
    width: 92px;
}

.nav_openA {
    transform: translateY(0%);
    transition: all 1s ease-in-out;
}

.slider-container {
    display: none;
}

[class|="grid"] {
    display: grid;
}

.grid-2 {
    grid-template-columns: repeat(1, 1fr);
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-all {
    grid-column: 1/-1;
}

.row-2 {
    grid-row: span 2;
}

img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  
    /**Entfernen des weißen Bereiches am unteren Rand des Bildes.*/
}

h3,
h2,
h1 {
    font-family: "Quicksand";
    color: #100107;
    text-transform: uppercase;
}

h1 {
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
    padding: 0;
}

h2 {
    font-size: 17px;
    margin: 20px;
    text-align: left;
}

h3 {
    font-size: 16px;
    margin: 20px;
}

h4 {
    font-size: 20px;
    padding: 20px;
    margin: 0;
}

p {
    font-family: "NotoSans";
    color: #100107;
    font-size: 16px;
    text-align: left;
    padding: 20px 20px 25px 20px;
    margin: 0;
    max-width: 60ch;
    overflow: hidden;
}

footer {
    background-color: #1437cb;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  
}

footer h3 {
    color: orange;
    margin-bottom: 5px;

}

footer p {
    text-align: center;
    padding-top: 0;
    padding-bottom: 10px;
    max-width: 100%;
}

footer a {
    text-decoration: none;
    color: #f3f3f3;
    text-tra nsform: uppercase;
    font-size: 16px;
    display: block;
}

footer a img {
    max-width:26px;
    margin-bottom: 10px;
}

footer .padd {
    padding: 0 15px;
}

footer div a {
    display: inline-block;
    padding-top: 15px;
}

footer hr {
    height: 1px;
    width: 60%;
    background-color: orange;
    border: 0
}

body footer div a.current {
    text-decoration: underline;
}

footer .footer-distance {
    padding-top: 5px;
    padding: 5px;
}

.schwarzfont {
    color: #100107;
}


.beigefont {
    color: #eae2dd;
}

.outer {
    align-items: center;
    padding-bottom: 20px;
}

.outer-beige{
    background-color: #eae2dd;
    color: #100107;
    padding: 20px 0px;
}

.inner-beige{
    background-color:#eae2dd ;
    padding: 20px 0px;
}


.btn {
    display: inline-block;
    position: fixed;
    width: 20px;
    bottom: 20px;
    right: 20px;
    padding: 10px 10px;
    border-radius: 5px;
    /*Ecken abrunden*/
    background-color: #1437cb;
}
.height{
        height: 282px;
    }
/*INDEX SEITE*/
#index .inner h2 {
    margin-bottom: 0px;
}

/*FAQ SEITE*/
#FAQ.grid-2{
    justify-items: center;
}
#FAQ p,
#FAQ h4 {
    padding: 10px 40px 20px 40px;
    max-width: 65ch;
    overflow: hidden;
}

#FAQ ul {
    padding: 0px 58px;

}

#FAQ ul li {
    padding-bottom: 10px;
    max-width: 65ch;
}

/*Expertise*/
#expertise.outer-orange {
    padding: 20px 20px;
}

#expertise hr {
    height: 1px;
    width: 100%;
    background-color: #f3f3f3;
    border: 0;
    margin: 20px 0px 25px 0px;
}

#expertise h2 {
    margin: 20px 0;
}

#expertise ol {
    margin: 20px;
    padding: 20px;
}

#expertise ol li {
    color: #eae2dd;
    text-transform: uppercase
}

#expertise p {
    padding: 0;
}

#expertise p:nth-last-of-type(1) {
    padding-bottom: 20px;
}

#expertise .N {
    list-style-type: upper-alpha;
}


/* Kontakt Seite */
#header-kontakt {
    background: url("../images/dan-nelson-ah-HeguOe9k-unsplash2kl.jpg") center no-repeat;
    height: 282px;
    overflow: hidden;
    align-items: center;
}

#header-kontakt div {
    display: none;
}

#kontakt .grid-2 p {
    padding: 0 20px;
    color: #100107;
}

#kontakt .grid-2 p:nth-last-of-type(4) {
    padding: 20px;
}

#kontakt .grid-2 p:nth-last-of-type(1) {
    padding-bottom: 10px;
}

#kontakt .grid-2 p span {
    text-transform: uppercase;
    font-weight: bold;
}

#kontakt form input,
textarea {
    font-family: "NotoSans";
    font-size: 15px;
    margin: 30px 20px;
    width: 85%;
    background-color: #ffffff;
    height: 25px;
    border-radius: 3px;
    padding: 15px 0 15px 15px;
    border: 1px;
    color: #100107;
}

input::-webkit-input-placeholder {
    color: #100107;
}

textarea::-webkit-input-placeholder {
    color: #100107;
}

#kontakt form textarea {
    height: 240px;
}

#kontakt input.checkbox {
    background-color: #f3f3f3;
    width: 5%;
}

#kontakt form div {
    display: flex;
    align-items: center;
}

#kontakt form a {
    color: orange;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}


.btn-send {
    font-family: "NotoSans";
    border: 0;
    letter-spacing: 0.1em;
    font-size: 16px;
    display: block;
    width: 88%;
    padding: 15px 0;
    margin: 30px 20px;
    border-radius: 3px;
    /*Ecken abrunden*/
    color: #100107;
    text-transform: uppercase;
    background-color: #ffffff;
}


/*TEAM SEITE*/



/* IMPRESSUM SEITE*/
.h4-impressum {
    font-size: 14px;
    padding: 20px;
    padding-bottom: 0px;
    margin: 0;
    padding-bottom: 10px;
}

#impressum p {
    padding-top: 0px;
    max-width: 65ch;
}

.einzug-impressum {
    padding-left: 40px;
    padding-top: 40px;
}

.impressumfont {
    color: #100107;
    text-transform: none;
    text-align: center;
    padding: 20px;
    padding-bottom: 10px;
    padding-top: 30px;
    font-size: 22px;
}

#impressum .grid-2 {
    justify-items: center;
    align-items: center;
}

#impressum .grid-2 img {
    margin: 20px;
    width: 373px;
    display: block;
}

.impressum-header-mobil {
    display: block;
}

.impressum-header-tablet {
    display: none;
}

/* FORMULAR SEITE */


/**TABLET UND DESKTOP*/
@media(min-width:600px) {

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
    }

    nav .nav-mobil {
       display: none;
       
    }
nav ul.nav_open {
       display: none;
       
    }
    nav .nav {
        display:  flex;
        margin: 0;
        justify-content: space-around;
        align-items: center;
        list-style-type: none;
        color: orange;
        font-size: 17px;
        padding: 25px;
    }

    nav .nav a {
        display: inline-block;
        text-decoration: none;
        color: orange
    }

    nav .nav img {
        width: 100px;
    }

    nav ul a:hover {
        color: #f3f3f3;
    }
.height{
        height: 350px;
    }
    /* INDEX SEITE */
    #header-index {
        display: none;
    }

    .slider-container {
        display: block;
        overflow: hidden;
        position: relative;
        aspect-ratio: 15/10;
        align-items: center;
    }

    .slider-container ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        display: flex;
        width: 500%;
        height: 150%;
        position: absolute;
        animation: slider 20s;
        animation-iteration-count: infinite;
        animation-direction: normal;
    }

    .slider-container ul li {
        width: 100%;
        height:50%;
        position: relative;
        background-color: #100107;
    }

    @keyframes slider {
        0% {
            left: 0;
        }

        50% {
            left: -100%;
        }

        100% {
            left: -200%;
        }
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
        margin: 5px 20px;
    }

    p {
        font-size: 16px;
        max-width: 65ch;
    }

    

    footer {
        display: grid;
        padding: 25px 10px;
        justify-items: center;
        
    }

    footer h3 {
        font-size: 15px;
        margin: 0;
        padding-top: 5px;
        padding-bottom: 20px;
    }

    footer p {
        font-size: 15px;
        margin: 0;
    }

    footer a {
        font-size: 15px;
    }

    footer a:hover {
        color: orange;
    }

    footer hr {
        width: 90%;
        margin-bottom: 20px;
    }

    .smartphone-einblenden {
        display: none;
    }

    section .tablet-einblenden {
        display: block;
    }

    .Bilder {
        align-items: stretch;
    }

    .Bilder img {
        height:100%;
        width:100%;
        object-fit: cover;
    }

    #index .grid-2 {
        grid-template-columns: repeat(2, 1fr)
    }

    
    /*KONTAKT SEITE*/
    #header-kontakt {
        background: url("../images/dan-nelson-ah-HeguOe9k-unsplash2kl.jpg") center no-repeat;
        height: 350px;
        align-items: center;
    }

    #kontakt .grid-2 {
        grid-template-columns: 1fr;
    }

    #kontakt .grid-2 p {
        padding: 0 20px;
        color: #100107;
    }

    #kontakt .grid-2 p:nth-last-of-type(4) {
        padding: 20px;
    }

    #kontakt .grid-2 p:nth-last-of-type(1) {
        padding-bottom: 0px;
    }

    #kontakt form input,
    textarea {
        font-size: 15px;
        margin: 30px 20px;
        width: 85%;
        height: 25px;
        padding: 15px 0 15px 15px;
    }

    #kontakt form textarea {
        height: 240px;
    }

    #kontakt input.checkbox {
        cursor: pointer;
        background-color: #f3f3f3;
        width: 5%;
    }

    #kontakt form a {
        font-size: 16px;
    }

    

    /* Erstanfrage-Formular SEITE */
  #erstanfrage-formular form input,
textarea { background-color: #ffffff; 
}
    /* FAQ SEITE */
    #FAQ.grid-2 {
        grid-template-columns: repeat(1, 1fr)
    }

    #FAQ p,
    #FAQ h4 {
        max-width: 65ch;
        overflow: hidden;
    }

}

@media(min-width:900px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    
    /*FAQ SEITE*/
    #FAQ.grid-2 {
        grid-template-columns: repeat(2, 1fr)
    }

    #FAQ p,
    #FAQ h4 {
        padding: 10px 40px 20px 40px;
        max-width: 65ch;
        overflow: hidden;
    }

    #FAQ ul {
        padding: 0px 58px;
    }

    #FAQ ul li {
        padding-bottom: 10px;
        max-width: 65ch;
    }

    /*KONTAKT SEITE*/
    #header-kontakt {
        justify-items: center;
    }

    #header-kontakt div {
        display: block;

    }

    #header-kontakt div h1 {
        text-transform: uppercase;
        text-align: left;
        font-size: 30px;
        padding: 0;
        margin: 0;
    }

    #header-kontakt div p {
        text-transform: uppercase;
        font-size: 30px;
        padding: 0;
    }

    #kontakt .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-items: center;
    }

    /* IMPRESSUM SEITE */
.impressumfont {
    font-size: 28px;
}
    .impressum-header-mobil {
        display: none;
    }

    .impressum-header-tablet {
        display: block;
    }

/**DESKTOP*/
@media(min-width:1440px) {
    h1 {
        font-size: 40px;
        margin: 30px;
    }

    h2 {
        font-size: 34px;
    }

    h3 {
        font-size: 24px;
        margin: 5px 20px;
    }

    p {
        font-size: 18px;
        max-width: 60ch;
        overflow: hidden;
    }

    nav .nav {
        padding: 20px;
        font-size: 19px;
    }

    nav .nav img {
        width: 142px;
    }
    .height{
        height: 500px;
    }
    header.slider-container {
        aspect-ratio: 22/10;
    }

    #index .grid-2 .inner {
        margin: 50px;
    }

    #index .grid-2 {
        align-items: center;
    }
    
    /* EXPERTISE SEITE */
    #shops .grid-2 {
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        grid-gap: 20px;
    }
#header-kontakt {
    height: 500px;
   
}
}
 /*Test*/
 

.grid,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
    display: grid;
    grid-gap: 20px;
    margin: 0 20px;
}


.grid-4 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-5 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-6 {
    grid-template-columns: repeat(2, 1fr);
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-all {
    grid-column: 1/-1;
}

.row-2 {
    grid-row: span 2;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display:block;
    /* Entfernt den weißen Bereich am unteren Rand des Images */
}

.btn{
    display: inline-block;
    padding:10px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 1em;
    text-decoration: none;
    
    color:#292929;
    background-color:#1437cb;
    /* Hier Farbe zum Btn eintragen */
}


/* CSS SLIDER */

#slider{
      max-width: 1200px;
    margin: 0 auto;
}

#slider h2{
    padding:0 20px;
}

#slider div.slider-container{
    overflow: hidden;
    position: relative;
  
}

#slider ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
    display: flex;
    width:600%;
    animation: slider 20s;
    animation-iteration-count: infinite;
    animation-direction:normal; 
}

#slider ul li{
    width:100%;
    position: relative;
    background-color: bisque;
}

#slider ul li img{
    width:100%;

}

#slider ul li div.text{
    padding: 10px;
    margin:0;   
    box-sizing: border-box;
    width: 100%;
}



@keyframes slider{ /* 5 Bild-Slider */
    
    0%{
        left:0;
    }
    
    10%{
        left:0;
    }
    
    20%{
        left:-100%;
    }
    
    35%{
        left:-100%;
    }
    
    40%{
        left:-200%;
    }
    
    55%{
        left:-200%;
    }
    
    60%{
        left:-300%;
    }
    
    75%{
        left:-300%;
    }
    
    80%{
        left:-400%;
    }
    
    95%{
        left:-400%;
    }
    
    
    100%{
        left:-500%;
    }
   
}

/* CSS SLIDER */


/* Tablet + Desktop */
@media(min-width:600px) {
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    
    
    /* CSS SLIDER */
    
    #slider .slide{
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: center;
    }
    
    
    
   


/* Desktop */
@media(min-width:1300px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6 {
        max-width: 1280px;
        margin: 0 auto;
    }


    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}