/*######################################################*/
/* Smooth Scroll */
html {scroll-behavior: smooth;}

/* Hinweisschild: Zum Inhalt springen. abstellen - trotzdem barrierefrei bleiben */
.skip-link {
    position: absolute!important;
    left: -9999px!important;
    top: auto!important;
    width: 1px!important;
    height: 1px!important;
    overflow: hidden!important;
    z-index: -999!important;
}



/*######################################################*/
/*Schriftart Style*/
/* montserrat-regular */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserratbold';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserratlight';
    src: url('../fonts/Montserrat-Light.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserratthin';
    src: url('../fonts/Montserrat-Thin.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

body {
    font-family: Montserratlight, arial, Helvetica, Sans-Serif;
}

/*
 * Clamp Infos:
 * Minimum: 1.5rem (nie kleiner) // Ideal: 5vw (skaliert mit Fensterbreite) // Maximum: 4rem (nicht größer als das
 */

h2, h3, h4, h5, h6 {color: #ffffff;font-family: Montserratlight, arial, Helvetica, Sans-Serif;margin: 0;line-height: normal;}
h1 {color: #ffffff;font-size: clamp(2.5rem, 7vw, 6.5rem);font-family: Montserratbold, arial, Helvetica, Sans-Serif!important;text-transform: uppercase;margin: 0;line-height: 1.1;white-space: nowrap; }
h2 {font-size: clamp(1.5rem, 5vw, 3rem);}
h3 {font-size: clamp(1.25rem, 4vw, 2.25rem);}
h4 {font-size: clamp(1.125rem, 3.5vw, 1.75rem);}
h5 {font-size: clamp(1rem, 3vw, 1.5rem);}
h6 {font-size: clamp(0.875rem, 2.5vw, 1.25rem);}


/*######################################################*/
/* Homepage Scrollbar ausschalten */
/* WebKit-Browser (Chrome, Safari, Edge Chromium) */
/* WebKit (Chrome, Safari, Edge Chromium) */
/* Firefox */
body {scrollbar-width: none;}
/* IE / Edge Legacy */
body {-ms-overflow-style: none;}
/* WebKit-Browser: Chrome, Safari, Edge (Chromium) */
::-webkit-scrollbar {display: none;}




/*######################################################*/
/* Blauen Hintergrund bei Touch auf Link unterbinden */
*, img, a {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}



/*######################################################*/
/* allgemeines */
html {
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
body {
    color: #ffffff !important;
    background-color: #18121B!important;
    padding: 0;
    overflow-y: visible;
    position: relative;
    height: unset;
}
html, body {
    overflow-x: hidden;
    margin: 0;
}


a {transition: all 0.6s ease;}
a:hover {color: #F26161!important;transition: all 0.6s;}



/*Seiten Fade in*/
body {opacity: 0;transition: opacity 0.5s ease;}
body.loaded {opacity: 1;}


/*Impressum und Datenschutzseite verstecken*/
#section7, #section8 {display: none;}


/*######################################################*/
/* Backgroundscroll Mechanismus */
.container {
    width: 400%;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    background-color: #18121B!important;
}

/* horizontal */
.panel {
    flex: 0 0 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: -0.5px;
}


/* vertical */
.vertical {
    flex: 0 0 100vw;
    flex-direction: column;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Section  6 */
.verticalsection6 {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.kontakt {
    height: 75%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.footer {
    height: 25%;
    background-color: #1F1723;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}





/*######################################################*/
/* Gemeinsamer Fortschrittsleisten-Style weiss oder #F26161*/

#progress-horizontal {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 3px;
z-index: 9999;
opacity: 1;
box-sizing: border-box;
transition: opacity 0.3s ease;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: #ffffff;
    transition: width 0.2s ease-out;
}