/* -------------------------------------- */
/*                Imports                 */
/* -------------------------------------- */


@import url("flex.css");
@import url("sidenav.css");
@import url("index.css");
@import url("head.css");

/* Schriftarten */
@font-face {
    font-family: 'Lovelo';
    src: url('../font/Lovelo_Black.otf') format("opentype");
}



/* -------------------------------------- */
/*                Variables               */
/* -------------------------------------- */


:root {
    --primary-color: #2E3347;
    --primary-text-color: #fff;
    --secondary-color: #25283a;
    background-color: var(--primary-color);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;

    --fs-xl: clamp(2.5rem,7vw, 5.5rem );
    --fs-xl-lower: clamp(1.8rem,5vw, 2.7rem );
    --fs-headline: clamp(2.5rem,5vw, 3rem );
    --fs-button: clamp(1.5rem,4.5vw, 2rem );
    --fs-l: clamp(1.5rem,5vw, 2rem);
    --fs-m: clamp(0.9rem,4vw, 1.1rem );
    --fs-s: clamp(0.5rem,3vw, 0.8rem );

}


/* -------------------------------------- */
/*       General Elements & Settings      */
/* -------------------------------------- */

.font_sec {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

* {
    margin: 0;
    font-family: "Lovelo", sans-serif;
    box-sizing: border-box;
    color: white;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    margin: 0;
    background-image: url("../images/background.png");
    background-repeat: repeat;
}

h1 {
    text-transform: uppercase;
    font-size: var(--fs-xl);
    margin-bottom: 1rem;
    font-weight: lighter;
    line-height: 1;
}

h2 {
    text-transform: uppercase;
    font-size: var(--fs-headline);
    margin: 2rem 0 1rem;
    font-weight: lighter;
}

h3{
    font-size: var(--fs-l);
}

h4 {
    margin-bottom: 1rem;
    font-size: var(--fs-m);
}

h5{
    font-size: var(--fs-m);
    font-weight: 500;
}

p {
    font-size: var(--fs-m);
    line-height: 150%;
    font-weight: lighter;
}

a {
    text-decoration: none;
    color: white;
}

ul li{
    font-family: "FreightSansPro", sans-serif;
}


/* -------------------------------------- */
/*         global custom Elements         */
/* -------------------------------------- */


.one_pager_section {
    margin: 0 10rem 10rem 10rem;
}

.button_prim{
    background-color: white;
    color: #2E3345;
    margin: 2rem 3rem 0 0;
    font-size: var(--fs-button);
    border: solid 3px white;
    transition: all ease 0.2s;
    text-align: center;
}

    .button_prim:hover, .button_prim:focus{
        color: white;
        background-color: transparent;
    }

.button_sec{
    border: solid 3px white;
    color: white;
    margin: 2rem 3rem 0 0;
    font-size: var(--fs-button);
    transition: all ease 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.button_sec:hover, .button_sec:focus{
    background-color: white;
    color: #2E3345 !important;
    
}

.button_sec:hover p, .button_sec:focus p{
    color: #2E3345 !important;
}

.button_sec p, .button_prim p{
    text-align: center!important;
    white-space: nowrap;
    margin: 0.25rem 2rem;
    display: inline;
    width: 100%;
}

/* -------------------------------------- */
/*                 Footer                 */
/* -------------------------------------- */


footer {
    width: 100%;
    background-color: var(--secondary-color);
}

footer div {
    padding-right: 5rem;
}

footer a{
    margin-right: 1rem;
}

.impress_content *{
    font-family: "FreightSansPro", sans-serif;
}

.datenschutz{
    margin: 0 6.5rem 0 6.5rem;
    padding-top: 15rem;
}

.datenschutz h2{
    font-size: 2rem;
    margin: 2rem 0;
}

.datenschutz h4{
    font-size: 1.2rem;
    margin: 1rem 0;
}

.datenschutz h5{
    font-size: 1rem;
    margin: 1rem 0;
}

.datenschutz p{
    font-family: "FreightSansPro", sans-serif;
    line-height: 100%;
}
.datenschutz a{
    display: block;
    margin: 1rem 0;
    font-family: "FreightSansPro", sans-serif;
}

.datenschutz li{
    font-family: "FreightSansPro", sans-serif;
}

.subtext{
    font-family: "FreightSansPro", sans-serif;
    font-weight: 300;
    font-size: var(--fs-l);
}

.more-vids{
    margin-top: 10vh;
    width: 100%;
}

.more-vids h4{
    font-size: 2rem;
}



.mV-wrapper{
	  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem; /* Optional: Abstand zwischen den Zellen */
}

@media (max-width: 1100px) {
  .mV-wrapper {
    grid-template-columns: 1fr; /* Bei schmalem Platz: 1 Spalte */
  }
}