@import url('https://fonts.googleapis.com/css2?family=Rubik+Lines&display=swap');    /*importiert eine Schriftart von Google Fonts*/





/*Setzt erst mal alle Elemente auf 0*/

* {

    margin: 0;

    padding: 0;

    top: 0;

    box-sizing: border-box;

}



/*styling des gesamten bodys der Website */

body {

    background-color:#DBFFFF;/*setzt die Hintergrundfarbe*/

    margin: 0;

}



/*styling für den header*/

header {

    height: 90vh; /*setzt eine flexible Höhe für den header fest */

    display: flex;

    position: relative;

    overflow: hidden;

}



/*styling für die Überschrift im header*/

header h1 {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;   /*"display:flex, justify-content:center und align items:center" positioniert die Überschrift in der Mitte*/

    color: rgb(255, 255, 255);/*Schriftfarbe*/

    font-size: clamp(4rem, 15vw, 12rem); /*responsive Schriftgröße*/

    font-weight: bolder;

    font-family: Rubik+Lines; /*Verwendung der importierten Schriftart*/

}



/*styling der section, in der der button liegt*/

section {

    position: relative;

    margin-top: 0px;

    margin-bottom: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color:#0DBFFF; /* Hintergrundfarbe des Abschnitts */

}



/*styling des buttons*/

button  {

    position: relative;

    width: 100%;

    padding: 10px;

    background-color: #264672;

    color: white;

    border: none;

    cursor: pointer;

    font-size: 30px;

    border-radius: 30px;

}



/* styling des formulares, in dem der button liegt*/

.section{

    position: relative;

    width: clamp(200px, 25vw, 300px);

    background-color: #264672;

    color: white;

    border: none;

    cursor: pointer;

    font-size: 30px;

    border-radius: 30px;



    display: flex;

    justify-content: center;

    align-items: center;

}



/*beim hover verändert sich die farbe*/

button:hover{

   background-color: #2d3fca; 

}



/*styling für den bereich in dem die kurve liegt*/

.curve {

    position: relative;

    width: 100%;

    overflow: hidden;

    height: 50px; /* Anpassung der Höhe für die Wellenform */

}



/*styling für die 1.welle*/

.wave-bg {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%; 

    height: 100%;

    background-image: url('Bilder/wave.png'); /* Die in Paint erstellte Welle wird als Hintergrund eingesetzt */

    background-size: 100% 100%; /* Anpassung der Größe des Hintergrundes,sodass er den gesamten bereich einnimmt */

}



/*styling für die 2.Welle (2 wellen,da die zweite gedreht ist)*/

.wave-bg2 {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('Bilder/wave2.png'); /* 2.Welle wird eingesetzt */

    background-size: 100% 100%; /* Anpassung der Größe */

}



/*styling footer*/

.footer {

    margin-top: 0px;

    background-color:#DBFFFF;/*hintergrund weiß*/

    color: rgb(0, 0, 0);/*schriftfarbe schwarz*/

    text-align: center;

    padding: 20px;/*innerer abstand*/

    position: relative;

}



/*styling des video bereiches-->position und größe*/

.video-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: -1;/*setzt das video in den hintergrund*/

}



/*styling des videos-->Größe*/

.video-background video {

    min-width: 100%;

    min-height: 100%;

    object-fit: cover;/*video deckt ganzen bereich ab*/

    height: 500px;

    width: auto;

}





/* Das Hintergrund-Overlay */
.modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px); /* Macht den Hintergrund unscharf */
}

/* Das Fenster selbst */
.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 30px;
    border-radius: 20px; /* Abgerundet wie deine Kurven */
    width: 300px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* Die Links als Buttons stylen */
.modal-btn {
    text-decoration: none;
    background-color: #446f9c; /* Dein Blau-Ton */
    color: white;
    padding: 12px;
    border-radius: 10px;
    transition: 0.3s;
}



.modal-btn:hover {
    text-decoration: underline;
}
.close-text {
    background: none;
    border: none;
    color: #666;
    margin-top: 15px;
    cursor: pointer;
    font-size: 14px;
}
.close-text:hover {
    text-decoration: underline;
    background-color: white;
}