/*allgemein*/

/* inter-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('../Schriftarten/inter-v20-latin-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../Schriftarten/inter-v20-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../Schriftarten/inter-v20-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../Schriftarten/inter-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../Schriftarten/inter-v20-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../Schriftarten/inter-v20-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../Schriftarten/inter-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../Schriftarten/inter-v20-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../Schriftarten/inter-v20-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Schriftarten/inter-v20-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* Arial Black */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Arial Black';
  font-style: normal;
  font-weight: 900;
  src: url('../Schriftarten/5633-font.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

:root{
    --yellow: #ffcc00;
    --nearlyBlack: #000000;
}

p{
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 160%;
    color: var(--nearlyBlack);
}

h1{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    text-transform: capitalize;
    color: #FFFFFF;
}

h2{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    text-transform: capitalize;
    color: var(--nearlyBlack);
}

h3{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    text-transform: capitalize;
    color: #FFFFFF;
}

h4{
    font-family: 'Arial Black';
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    line-height: 45px;
    text-align: center;
    text-transform: uppercase;
    color: var(--nearlyBlack);
}

h5{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
    color: var(--nearlyBlack);
}

h6{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
}

nav{
    background-color: var(--nearlyBlack);
    margin-top: 90px;
}

nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 43px 3vw;
}

nav ul li a {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
}

nav ul li a img{
    width: 24px;
    height: 24px;
}

.colorWhite{
    color: #FFFFFF;
}

a {
    transition: transform 0.2s ease;
    display: inline-block;
}

a:hover {
    transform: scale(1.05);
}

a:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

header{
    background-color: var(--yellow);
}

.topBar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94vw;
    padding-left: 3vw;
    padding-right: 3vw;
    height: 90px;
    background-color: var(--yellow);
    position: fixed;
    top: 0;
    z-index: 100;
}

.topBar .topbar-logo{
    height: auto;
    width: auto;
    max-height: 70px;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

footer{
    background-color: var(--nearlyBlack);
}

.footer-logo{
    height: auto;
    width: auto;
    max-height: 70px;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.footer-content-wrap{
    width: 90vw;
    margin-left: 5vw;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

.footer-columns{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 5vw;
    margin-top: 5vw;
}

.bottom{
    align-self: flex-end;
}

.footer-bottom-label{
    background-color: var(--yellow);
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-banner{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 20px auto 30px auto;
}

.standard-wrapper{
    width: 90vw;
    margin-left: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.standard-wrapper h5, .standard-wrapper h2{
    text-align: center;
}

.top-margin-small{
    margin-top: 5vw;
}

.top-margin-medium{
    margin-top: 10vw;
}

.bottom-margin-small{
    margin-bottom: 5vw;
}

.bottom-margin-medium{
    margin-bottom: 10vw;
}

.anruf-button{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
    color: #000000;
    display: flex;
    align-items: center;
    width: 237px;
    background-color: var(--yellow);
    border-radius: 10px;
    height: 50px;
    justify-content: center;
    margin-top: 5vw;
}

.slider {
    position: relative;
    width: 95%;
    margin-left: 5%;
    overflow: hidden;
    margin-bottom: 5vh;
}

.slider-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.slide {
    min-width: 45%;
    box-sizing: border-box;
    margin-right: 3vw;
}

.slide img {
    width: 100%;
    border-radius: 16px;
    display: block;
    height: 400px;
    object-fit: cover;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.arrow.left {
    left: 10px;
}

.arrow.right {
    right: 10px;
}

/*PC*/

@media only screen and (min-width: 1001px){
    .topBar .topbar-icon{
        width: 24px;
        height: 24px;
        margin-right: 15px;
    }

    .topBar h4{
        align-items: center;
        display: flex;
    }

    .mobile-phone {
        display: none;
    }

    .burger-menu {
        display: none;
    }
}

/*mobile */
@media only screen and (max-width: 1000px){
    .desktop{
        display: none;
    }

    p{
        font-size: 14px;
    }

    h1{
        font-size: 20px;
        line-height: 110%;
    }

    h2{
        font-size: 20px;
        line-height: 110%;
    }

    h3{
        font-size: 20px;
        line-height: 150%;
    }

    h4{
        font-size: 20px;
        line-height: 32px;
    }

    h5{
        font-size: 18px;
        line-height: 110%;
    }

    h6{
        font-size: 14px;
        line-height: 110%;
    }

    .topBar {
        justify-content: center;
    }

    /* Burger Menu Styles */
    nav {
        position: relative;
        min-height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5vw;
        margin-top: 90px;
    }
    
    .mobile-phone {
        color: white;
        font-family: 'Inter';
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .mobile-phone img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        filter: brightness(0) invert(1);
    }

    .burger-menu {
        display: block;
        position: relative;
        z-index: 10;
    }

    .burger-icon {
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .burger-icon span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: white;
        border-radius: 3px;
        transition: 0.25s ease-in-out;
    }

    .burger-icon span:nth-child(1) { top: 0px; }
    .burger-icon span:nth-child(2) { top: 8px; }
    .burger-icon span:nth-child(3) { top: 16px; }

    /* Burger Animation */
    .burger-menu.active .burger-icon span:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }

    .burger-menu.active .burger-icon span:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.active .burger-icon span:nth-child(3) {
        top: 8px;
        transform: rotate(-45deg);
    }
    
    body.menu-open {
        overflow: hidden;
    }

    nav ul.nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 100%;
        background: var(--nearlyBlack);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.3s ease-in-out;
        z-index: 2;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    nav ul.nav-links.active {
        right: 0;
    }

    nav ul.nav-links li {
        margin: 20px 0;
        opacity: 0;
        transform: translateX(50px);
        transition: 0.3s ease-in-out;
    }

    nav ul.nav-links.active li {
        opacity: 1;
        transform: translateX(0);
    }

    .footer-content-wrap{
        padding-top: 10vw;
        padding-bottom: 10vw;
    }

    .footer-columns{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 0.5fr 0.5fr;
        gap: 40px;
        margin-top: 10vw;
    }

    #footer-label-text{
        width: 90vw;
        margin-left: 5vw;
        text-align: center;
    }


    .anruf-button{
        font-size: 18px;
        width: 200px;
        height: 45px;
        margin-top: 10vw;
    }

    .slider {
        width: 92.5%;
        margin-left: 7.5%;
    }
    
    .slide {
        min-width: 85%;
    }
    
    .slide img {
        height: 270px;
    }
}