/*
	Theme Name: Bianca Hill
	Version: 1.0
	Author: STEFAN FRIEDRICH EITEL
	Author URI: https://stefanfriedricheitel.eu
	Description: Bianca and Jeremy Hill
*/
@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0.3;}
    100% {opacity: 1;}
}
  #LoginButton {
    animation: blink 4s infinite !important;
}
@media (max-width:319px) and (min-height:801px) and (max-height:1746px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    header{
        background-color: white;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.3s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 215vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 180vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 175vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 2%;
        position: absolute;
        top: 195vh;
        z-index: 2;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1{
    	font-size: 5.2vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 2vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 66vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1, #p2{
        margin: 0%;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 101vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 57vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 28vw;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #hamburger{
        width: 25vw;
        height: 60vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.5s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
    }
    #hamburg:checked + .hamburg  + nav.topmenu { 
        height: 100%;
        overflow: visible;
    }
    .hamburg { 

        background: white; width: 35%; height: 10%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 40%; 
        height: 15%; 
     }
     input#hamburg {display:none}

     .line:hover{
        height: 13%;
        width: 28vw;
        margin: 5%;
        transition: 0.1s; 
     }
     .line {
        height: 10%; width: 25vw; 
        background: black; border-radius: 5%;
        display: flex;
        transition: 0.5s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(0px, -100px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 90vh;
    }
    h6{
        font-size: 3vh;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #880000;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: #d4af37;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 1vh;
        z-index: 4000;
    }
}
@media (min-width:1027px) and (max-width:1726px) and (max-height:1746px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 215vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 180vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 175vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 5%;
        position: absolute;
        top: 195vh;
        z-index: 2;
    }
    #Formular{
        background-color: white;
        width: 100%;
        height: 100%;
        margin: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1{
    	font-size: 5.2vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 2vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 66vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1, #p2{
        margin: 0%;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 101vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 57vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        top: 5vh;
        transition: height 0.5s ease;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #hamburger{
        width: 25vw;
        height: 60vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    nav.topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.5s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    #hamburg:checked + .hamburg  + nav.topmenu { 
        max-height: 20vh;
        overflow: visible;
    }
    .hamburg { 

        background: white; width: 35%; height: 10%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 40%; 
        height: 15%; 
     }
     input#hamburg {display:none}

     .line:hover{
        height: 13%;
        width: 28vw;
        margin: 5%;
        transition: 0.1s; 
     }
     .line {
        height: 10%; width: 25vw; 
        background: black; border-radius: 5%;
        display: flex;
        transition: 0.5s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-30px, 30px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(0px, 0px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 90vh;
    }
    h6{
        font-size: 3vh;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #880000;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: #d4af37;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 1vh;
        z-index: 4000;
    }
}
@media (max-width:376px) and (max-height:1746px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 123vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
        background-color: #FFE4E1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 100vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 7%;
        width: 100%;
        position: absolute;
        top: 120vh;
        font-size: 3vh;
        color: white;
        background-color: grey;
        z-index: 2;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 63vh;
        background-color: grey;
        z-index: 2;
        color: white;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;


    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100vw;
        overflow: hidden;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1{
    	font-size: 2.5vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 2vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 66vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1, #p2{
        margin: 0%;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 101vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 57vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh;
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 28vw;
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 75%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(-10px, -24.5px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(30px, -40px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 90vh;
    }
    h6{
        font-size: 2vh;
        position: absolute;
        font-weight: 900;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2vh;
        z-index: 4000;
        color: black;
    }
}
@media (max-width:400px) and (max-height:480px) {
        html{
            display: flex;
            max-width: 100vw;
            max-height: 100vh;
        }
        #LOGO {
            width: 25vw;
            height: 20vh;
            object-fit: contain;
            display: flex;
            align-items: center;
            justify-content: center;
        }    
        #LoginButton {
            background-image: url('/bilder/LoginButton.webp');
            width: 40%;
            height: auto;
            border: none;
            cursor: pointer;
        }
        .g_id_signin{
            width: 70%;
            height: 10%;
            z-index: 4;
            position: absolute;
            top: 6%;
    
        }
        #msal-login{
            width: 70%;
            height: 5vh;
            position: absolute;
            top: 30%;
            z-index: 4;
        }
        header{
            background-color: #FFE4E1;
            overflow: visible;
            box-sizing: border-box;
            padding-bottom: 0;
            width: 100vw;
            height: 20vh;
            margin: 0;
            position: fixed;
            top: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            transition: height 0.1s ease;
            z-index: 4;
        }
        body{
            text-align: center;
            font-weight: bolder;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            width: 100vw;
            height: 200vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1;
            overflow-x: hidden;
            background-color: #FFE4E1;
        }
        main{
            padding: 0;
            width: 100vw;
            height: 160vh;
            margin: 0;
            display: flex;
            align-items: start;
            justify-content: center;
            position: absolute;
            top: 20vh;
            background-color: grey;
    
        }
        #hintergrundbild{
            display: flex;
            align-items: start;
            justify-content: center;
            background-image: url('/bilder/surrounded.webp');
            background-size: contain;
            background-position: top;
            background-repeat: no-repeat;
            width: 100vw;
            height: 130vh;
            position: absolute;
            z-index: 1;
        }
        input[type="checkbox"] {
            transform: scale(1.5);
        }
        div{
            display: flex;
            flex-direction: row;
            text-align: center;
            justify-content: center;
            align-items: center;
    
        }
        footer{
            display: flex;
            flex-direction: column;
            margin: 5%;
            height: 45%;
            width: 100%;
            position: absolute;
            top: 160vh;
            font-size: 6vh;
            z-index: 2;
        }
        #Formular{
            background-color: #FFE4E1;
            width: 100%;
            height: 100%;
            margin: 0;
            border-radius: 15%;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0%;
            z-index: 3;
        }
        #name{
            width: 86.5%;
            height: 10%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #email{
            width: 86.5%;
            height: 10%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #mobilfunknummer{
            width: 86.5%;
            height: 10%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #nachricht{
            width: 86.5%;
            height: 15%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #agb{
            width: 4.5%;
            height: 50%;
            margin-left: 0%;
            cursor: pointer;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #process{
            padding: 0;
            width: 100%;
            height: 60vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            top: 77vh;
            background-color: grey;
            z-index: 3;
        }
        #eXp{
            display: flex;
            width: 100%;
            height: 100%;
            object-fit: contain;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 1000;
    
        }
        .phonenumber{
            font-size: 7vh;
    
        }
        #bianca{
            font-size: 7vh;
    
        }
        #a1{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 30%;
            height: 30%;
       }
        #div4{
            position: absolute;
            top: 0vh;
            z-index: 10000;
            visibility: hidden;
            width: 100vw;
            overflow: hidden;
        }
        #button{
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 900;
            margin: 3%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 80%;
        }
        h1{
            font-size: 3vh;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 900;
            text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
            margin: 0;
            top: 0%;
            height: 15%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: absolute;
            z-index: 4;
            margin-block-start: 0;
            margin-block-end: 0;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        
        }
        #label{
            font-size: 2.5vh;
        }
        .line-with-shadow {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #buttons{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            top: 75%;
            width: 86.5%;
            margin-top: 0%;
            padding: 1%;
            z-index: 4;
        }
        #checkboxbrother{
            display: flex;
            justify-content: start;
            width: 100%;
            margin: 5%;    
        }
        #kontaktdaten{
            height: 15%;
            width: 40vw;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 62vh;
            z-index: 2;
            margin-top: 1%;
        }
        #kontaktdaten2{
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            padding: 1%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 40vw;
    
        }
        #p1, #p2{
            margin: 0%;
        }
        .p3{
            text-align: justify;
            position: absolute;
            z-index: 2;
            width: 72vw;
            top: 105vh;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            margin-bottom: 10%;
        }
        li{
            display: list-item;
        }
        a{
            color: #880000;
            text-decoration: none
        }
        #div3{
            display: flex;
            position: absolute;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: center;
            z-index: 3;
            width: 50vw;
            height: 70vh;
            top: 5vh;
        }
        #button:hover{
            background-color: #d4af37;
        }
        #div1{
            display: flex;
            width: 100%;
        }
        #div2{
            display: flex;
            width: 100%;
        }
        #div31{
            display: flex;
            flex-grow: 1;
            width: 50vw;
            height: 50vh;
            position: absolute;
            z-index: 2;
            background-color: white;
            top: 70vh;
        }
        #div11{
            display: flex;
            width: 100%;
        }
        #div21{
            display: flex;
            width: 100%;
        }
        header.scrolled:hover{
            height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
            transition: height 0.3s ease;
            cursor: pointer;
        }
        header.scrolled  #LoginButton:hover{
            width: 10vh;
            transition: height 0.5s ease; 
            cursor: pointer;
        }
        #LoginButton:hover{
            width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
            transition: height 0.5s ease; 
            cursor: pointer;
        }
        header.scrolled #LOGO {
            width: 8vh; /* oder eine andere gewünschte Breite */
            height: auto;
            transition: width 0.5s ease, height 0.5s ease;
        }
        header.scrolled {
            height: 12vh; /* Neue Höhe des Headers */
            transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
            /* Weitere Stile für den gescrollten Header hier */
        }
        header.scrolled #LOGO:hover {
            width: 12vh;
            transition: width 0.5s ease;
            cursor: pointer;
        }
        #LOGO:hover {
            width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
            transition: width 0.5s ease;
            cursor: pointer;
        }
        header.scrolled .row{
            height: 12vh;
        }
        form{
            display: flex;
            align-items: center;
            margin: 0;
            justify-content: center;
            width: 253.33px;
        }
        input[type="submit"]{
            display: flex;
            background-color: black;
            color: white;
            cursor: pointer;
        }
        .row{
            width: 25vw;
            height: 20vh;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        #hamburger{
            width: 25vw;
            height: 12vh;
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            overflow: visible;
            background-color: #FFE4E1;
        }
        .topmenu { 
            height: auto; 
            max-height: 0;
            overflow: hidden; 
            transition: all 0.1s;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 110%;
            background-color: #FFE4E1;
        }
        #topmenu1{
            background-color: #FFE4E1;
            z-index: 5100;
        }
        #hamburg:checked + .hamburg  + .topmenu { 
            height: 100%;
            overflow: visible;
            background-color: #FFE4E1;
        }
        label.hamburg { 
    
            background: #FFE4E1; width: 100%; height: 100%; 
            flex-wrap: wrap;
            margin-left: auto; margin-right: auto;
            border-radius: 4px; 
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;
            overflow: visible;
         }
         .hamburg:hover{
            width: 100%; 
            height: 100%; 
         }
    
         input#hamburg {display:none}
    
        .line:nth-child(1):hover {
            background-color: grey;
        }
        .line:nth-child(2):hover {
            background-color: grey;
        }
        .line:nth-child(3):hover {
            background-color: grey;
        }
         .line:hover{
            height: 7%;
            width: 40%;
            padding: 2%;
            margin: 3%;
            transition: 0.1s;
            transform-origin: center;
         }
         .line {
            height: 5%; width: 35%; 
            background: black;
            border-radius: 5%;
            display: flex;
            transition: 0.1s; 
            transform-origin: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            padding: 1%;
            margin: 2%;
         }
    
         .line:nth-child(1) { top: 5%; }
         .line:nth-child(2) { top: 5%; }
         .line:nth-child(3) { top: 5%; }
    
         .line-with-shadow {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
         
        #hamburg:checked + .hamburg .line:nth-child(1) {
            transform: rotate(-45deg) translate(-30px, 30px);
        }
        
        #hamburg:checked + .hamburg .line:nth-child(2) {
            opacity: 0;
        }
        
        #hamburg:checked + .hamburg .line:nth-child(3) {
            transform: rotate(45deg) translate(-10px, -10px);
        }
         #LogoutButton {
            background-image: url('/bilder/LogoutButton.webp');
            width: 10%; /* Set the width as per your image dimensions */
            border: none;
            cursor: pointer;
         }
    
        .timeline {
            list-style: none;
            padding: 0;
        }
        .grecaptcha-badge { 
            visibility: hidden;
            z-index: 0;
        }
        element.style{
            width: 0;
            height: 0;
        }
        .event {
            display: flex;
            margin-bottom: 20px;
        }
        .event img {
            max-width: 100px;
            margin-right: 20px;
        }
        .event-content {
            flex: 1;
        }
        h2
        {
            position: absolute;
            font-size: 4vh;
            background-color: black;
            color: white;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            top: 58vh;
            border-radius: 10px;
        }
        h3{
            position: absolute;
            font-size: 4vh;
            background-color: black;
            border-radius: 10px;
            color: white;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            top: 90vh;
        }
        h6{
            font-size: 2.5vh;
            position: absolute;
            top: 11%;
            z-index: 5;
            margin: 0;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        .overlay {
            display: none;
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
    
            z-index: 9998;
        }
        #form1{
            width: 100%;
            height: 100%;
            flex-direction: column;
            position: absolute;
            top: 20%;
        }
        #username{
            width: 65%;
            height: 14%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #password{
            width: 65%;
            height: 14%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #forgot{
            margin: 2%;
            margin-bottom: 0;
        }
        #register{
            margin: 7%;
            margin-top: 3%;
            margin-bottom: 5%;
        }
        #loginPopup{
            display: none;
            width: 60vw;
            height: 40vh;
            top: 50%;
            left: 50%;
            align-items: center;
            justify-content: center;
            z-index: 100000;
            transform: translate(-50%, -50%);
            background-color: white;
            position: fixed;
            padding: 20px;
            border: 1px solid #ccc;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        #uploadPopup{
            display: none;
            flex-direction: column;
            height: 20%;
    
        }
        .list{
            list-style-type: none;
            font-size: 3em;
            padding: 3em;
            margin: 5%;
        }
        #list3{
            padding-bottom: 0;
        }
        a{
            color: #d4af37;
            text-decoration: none;
            justify-self: center;
        }
        a:hover{
            color: white;
        }
        ul{
            padding-inline-start: 0px;
            list-style: none;
        }
        
        
        label{
            cursor: pointer;
        }
    
        
        input {
            padding: 5%; /* Innenabstand des Eingabefelds */
            border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
            border-radius: 5px; /* Abrundung der Ecken */
        }
        #stefan{
            font-size: 4vh;
            z-index: 4000;
        }
}
@media (min-width:377px) and (max-width:1026px) and (max-height:1746px) {
        html{
            display: flex;
            max-width: 100%;
            max-height: 100%;
        }
        #LOGO {
            width: 25vw;
            height: 20vh;
            object-fit: contain;
            display: flex;
            align-items: center;
            justify-content: center;  
        }    
        #LoginButton {
            background-image: url('/bilder/LoginButton.webp');
            width: 30%;
            height: auto;
            border: none;
            cursor: pointer;
        }
        .g-signin2{
            width: 100vw;
            height: auto;
        }
        header{
            background-color: #FFE4E1;
            overflow: visible;
            box-sizing: border-box;
            padding-bottom: 0;
            width: 100vw;
            height: 20vh;
            margin: 0;
            position: fixed;
            top: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            transition: height 0.1s ease;
            z-index: 6;
        }
        body{
            text-align: center;
            font-weight: bolder;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            width: 100vw;
            height: 165vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #FFE4E1;
            justify-content: center;
            z-index: 1;
            overflow-x: hidden;
    
        }
        main{
            padding: 0;
            width: 100vw;
            height: 140vh;
            margin: 0;
            display: flex;
            align-items: start;
            justify-content: center;
            position: absolute;
            top: 20vh;
        }
        #process{
            padding: 0;
            width: 100%;
            height: 45vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            top: 72vh;
            background-color: grey;
            z-index: 1;
        }
        #eXp{
            display: flex;
            width: 100%;
            height: 100%;
            object-fit: contain;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 1000;
    
        }
        .phonenumber{
            font-size: 4vh;
    
        }
        #bianca{
            font-size: 4vh;
            color: white;
    
        }
        #a1{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 30%;
            height: 30%;
       }
        #div4{
            position: absolute;
            top: 0vh;
            z-index: 10000;
            visibility: hidden;
            width: 100%;
        }
        #hintergrundbild{
            display: flex;
            align-items: start;
            justify-content: center;
            background-image: url('/bilder/surrounded.webp');
            background-size: cover;
            background-position: top;
            background-repeat: no-repeat;
            width: 100%;
            height: 100vh;
            position: absolute;
            z-index: -1;
        }
        div{
            display: none;
            flex-direction: row;
            text-align: center;
            justify-content: center;
            align-items: center;
    
        }
        footer{
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            margin: 0%;
            position: absolute;
            width: 100vw;
            height: 33%;
            top: 135vh;
            background-color: grey;
            z-index: 2;
        }
        h5{
            color: white;
            font-size: 3.5vh;
        }
        #Formular{
            background-color: #FFE4E1;
            width: 100%;
            height: 100%;
            margin: 0;
            border-radius: 15%;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0%;
            z-index: 2;
            box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        }
        #name{
            width: 86.5%;
            height: 10%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 6;
            font-size: 3vh;
        }
        #email{
            width: 86.5%;
            height: 10%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            font-size: 3vh;
        }
        #mobilfunknummer{
            width: 86.5%;
            height: 10%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            font-size: 3vh;
        }
        #nachricht{
            width: 86.5%;
            height: 20%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            font-size: 3vh;
        }
        #agb{
            width: 4.5%;
            height: 50%;
            margin-left: 0%;
            cursor: pointer;
        }
        #button{
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 900;
            margin: 0;
            box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
            text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
            width: 20%;
            height: 3vh;
            font-size: 2vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h1{
            font-size: 5vh;
            font-weight: 900;
            margin: 0;
            top: 0%;
            text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
            height: 10%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: absolute;
            z-index: 3;
            margin-block-start: 0;
            margin-block-end: 0;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        
        }
        .line-with-shadow {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #buttons{
            display: flex;
            align-items: row;
            position: absolute;
            top: 82%;
            width: 86.5%;
            margin-top: 0%;
            padding: 1%;
            z-index: 4;
        }
        #checkboxbrother{
            display: flex;
            justify-content: start;
            width: 100%;
            height: 5%;
            font-size: 2vh;
    
        }
        input[type="checkbox"] {
            transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
        }
        #kontaktdaten{
    
            height: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 90vh;
            z-index: 2;
        }
        #kontaktdaten2{
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            padding: 1%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 12vw;
    
        }
        .p3{
            text-align: justify;
            position: absolute;
            z-index: 2;
            width: 72vw;
            top: 155vh;
        }
        li{
            display: list-item;
        }
        a{
            color: #880000;
            text-decoration: none
        }
        #div3{
            display: flex;
            position: absolute;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: center;
            z-index: 2;
            width: 70%;
            height: 65vh;
            top: 5vh;
        }
        #button:hover{
            background-color: #d4af37;
        }
        #button1:hover{
            background-color: #d4af37;
        }
        #div1{
            display: flex;
            width: 100%;
        }
        #div2{
            display: flex;
            width: 100%;
        }
        #div31{
            display: flex;
            flex-grow: 1;
            width: 50vw;
            height: 50vh;
            position: absolute;
            z-index: 2;
            background-color: white;
            top: 70vh;
        }
        #div11{
            display: flex;
            width: 100%;
        }
        #div21{
            display: flex;
            width: 100%;
        }
        header.scrolled:hover{
            height: 20vh;
            transition: height 0.1s ease;
            cursor: pointer;
        }
        header.scrolled  #LoginButton:hover{
            width: 20%;
            transition: height 0.1s ease; 
            cursor: pointer;
        }
        #LoginButton:hover{
            width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
            transition: height 0.1s ease; 
            cursor: pointer;
        }
        #LogoutButton:hover{
            width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
            transition: height 0.1s ease; 
            cursor: pointer;
        }
        header.scrolled #LOGO {
            width: auto; /* oder eine andere gewünschte Breite */
            height: 14vh;
            transition: width 0.1s ease, height 0.1s ease;
        }
        header.scrolled {
            height: 14vh; /* Neue Höhe des Headers */
            transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
            /* Weitere Stile für den gescrollten Header hier */
        }
        header.scrolled #LOGO:hover {
            width: auto;
            height: 20vh;
            transition: width 0.1s ease;
            cursor: pointer;
        }
        #LOGO:hover {
            width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
            transition: width 0.5s ease;
            cursor: pointer;
        }
        form{
            display: flex;
            align-items: center;
            margin: 0;
            justify-content: center;
            width: 253.33px;
        }
        input[type="submit" i]{
            display: flex;
            background-color: black;
            color: white;
            cursor: pointer;
        }
        header.scrolled .row{
            height: 14vh;
            width: 25vw;
            transition: height 0.1s ease and width 0.1s ease;
        }
        .row{
            width: 25vw;
            height: auto;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        #hamburger{
            width: 25vw;
            height: 14vh;
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            overflow: visible;
            background-color: #FFE4E1;
        }
        .topmenu { 
            height: auto; 
            max-height: 0;
            overflow: hidden; 
            transition: all 0.1s;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;
            position: absolute;
        }
        #hamburg:checked + .hamburg  + .topmenu { 
            height: 100%;
            overflow: visible;
        }
        label.hamburg { 
    
            background: #FFE4E1; width: 100%; height: 100%; 
            flex-wrap: wrap;
            margin-left: auto; margin-right: auto;
            border-radius: 4px; 
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;
            overflow: visible;
         }
         .hamburg:hover{
            width: 100%; 
            height: 100%; 
         }
    
         input#hamburg {display:none}
    
        .line:nth-child(1):hover {
            background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
        }
        .line:nth-child(2):hover {
            background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
        }
        .line:nth-child(3):hover {
            background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
        }
         .line:hover{
            height: 7%;
            width: 20%;
            padding: 2%;
            margin: 2%;
            transition: 0.1s;
            transform-origin: center;
         }
         .line {
            height: 1%; width: 15%; 
            background: black;
            border-radius: 5%;
            display: flex;
            transition: 0.1s; 
            transform-origin: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            padding: 1%;
            margin: 1%;
         }
         
         .line:nth-child(1) { top: 5%; }
         .line:nth-child(2) { top: 5%; }
         .line:nth-child(3) { top: 5%; }
         
     
         #hamburg:checked + .hamburg .line:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 9px);
        }
        
        #hamburg:checked + .hamburg .line:nth-child(2) {
            opacity: 0;
        }
        
        #hamburg:checked + .hamburg .line:nth-child(3) {
            transform: rotate(45deg) translate(-20px, -20px);
        }
         #LogoutButton {
            background-image: url('/bilder/LogoutButton.webp');
            width: 10%; /* Set the width as per your image dimensions */
            border: none;
            cursor: pointer;
         }
    
        .timeline {
            list-style: none;
            padding: 0;
        }
        .grecaptcha-badge { 
            visibility: hidden;
            z-index: 0;
        }
        element.style{
            width: 0;
            height: 0;
        }
        .event {
            display: flex;
            margin-bottom: 20px;
        }
        .event img {
            max-width: 100px;
            margin-right: 20px;
        }
        .event-content {
            flex: 1;
        }
        h2
        {
            position: absolute;
            font-size: 7vh;
            background-color: black;
            color: white;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            top: 70vh;
            border-radius: 10px;
        }
        h3{
            position: absolute;
            font-size: 7vh;
            background-color: grey;
            border-radius: 10px;
            color: white;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            top: 137vh;
            text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        }
        h6{
            font-size: 4vh;
            position: absolute;
            top: 10%;
            z-index: 5;
            text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
            margin: 0;
        }
        .overlay {
            display: none;
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
    
            z-index: 500;
        }
        #loginPopup{
            display: none;
            width: 20vw;
            height: 25vh;
            top: 50%;
            left: 50%;
            align-items: center;
            justify-content: center;
            z-index: 100000;
            transform: translate(-50%, -50%);
            background-color: white;
            position: fixed;
            padding: 20px;
            border: 1px solid #ccc;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 1000;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            border-radius: 5%;
        }
        #form1{
            width: 100%;
            height: 100%;
            flex-direction: column;
        }
        #username{
            width: 65%;
            height: 14%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #password{
            width: 65%;
            height: 14%;
            margin: 1%;
            padding: 1%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #forgot{
            margin: 2%;
            margin-bottom: 0;
        }
        #register{
            margin: 7%;
            margin-top: 3%;
            margin-bottom: 5%;
        }
        #uploadPopup{
            display: none;
            height: 25%;
            margin-bottom: 7.5%;
        }
        .list{
            list-style-type: none;
            font-size: 3em;
            padding: 3em;
            margin: 5%;
        }
        #list3{
            padding-bottom: 0;
        }
        a{
            color: #d4af37;
            text-decoration: none;
            justify-self: center;
        }
        a:hover{
            color: white;
        }
        ul{
            padding-inline-start: 0px;
            list-style: none;
        }
        
        
        label{
            cursor: pointer;
        }
    
        
        input {
            padding: 5%; /* Innenabstand des Eingabefelds */
            border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
            border-radius: 5px; /* Abrundung der Ecken */
        }
        #stefan{
            font-size: 2.5vh;
            z-index: 4000;
        }
}
@media (min-width:377px) and (max-width:1026px) and (max-height:561px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 20%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 77vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 142vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 3.5vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 85%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(1.5); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 30%;
        height: 85vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit" i]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 2.5vh;
        position: absolute;
        font-weight: 900;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:377px) and (max-width:1026px) and (max-height:279px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 20%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 55vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 120vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 7vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 190vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 9vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 85%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(1.5); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 30%;
        height: 115vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit" i]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 7vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (max-width:400px) and (min-height:481px) and (max-height:600px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 130vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 120vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 25%;
        width: 100%;
        position: absolute;
        top: 120vh;
        background-color: grey;
        color: white;
        font-size: 3.5vh;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 67%;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 60vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    h1{
    	font-size: 3vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 1.5vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 62vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1, #p2{
        margin: 0%;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 105vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 50vh;
        top: 5vh;
        color: black;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 25vh;
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 8vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh;
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh;
        transition: width 0.3s ease, height 0.3s ease;
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-30px, 25px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-10px, -10px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 58vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 90vh;
    }
    h6{
        font-size: 2vh;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (max-width:360px) and (min-height:640px) and (max-height: 699px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 130vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 60vh;
        background-color: grey;
        z-index: 3;
        color: white;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;
    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
    }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 25%;
        width: 100%;
        position: absolute;
        top: 117vh;
        background-color: grey;
        color: white;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
        border-radius: 15%;
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 77%;
    }
    h1{
    	font-size: 3vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 62vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1, #p2{
        margin: 0%;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 105vh;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 55vh;
        top: 2vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 8vh;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 75%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;

     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }
     #topmenu1{
        background-color: #FFE4E1;
     }
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, -20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(21px, -31px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 59vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 90vh;
    }
    h6{
        font-size: 2.5vh;
        position: absolute;
        font-weight: 900;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h5{
        font-size: 3vh;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
        background-color: white;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (max-width:360px) and (min-height:700px) and (max-height:740px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 120vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
        background-color: #FFE4E1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 100vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 25%;
        position: absolute;
        top: 110vh;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    input[type="checkbox"] {
        transform: scale(2);
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 52vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100vw;
        overflow: hidden;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 14.5%;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1{
    	font-size: 3vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 2%;
        height: 9%;
        width: 100%;
        display: flex;
        align-items: end;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 2vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 70.5%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 60vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1{
        margin: 0;
    }
    #p2{
        margin: 0;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 96vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 45vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 10%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 8vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-30px, 30px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-3px, -3px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 58.4vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 85vh;
    }
    h6{
        font-size: 2vh;
        position: absolute;
        top: 8%;
        z-index: 4;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2vh;
        z-index: 4000;
    }
}
@media (min-width:321px) and (max-width:360px) and (min-height:641px) and (max-height: 699px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: white;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.3s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 210vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 180vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 175vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 5%;
        position: absolute;
        top: 190vh;
        z-index: 2;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 14.5%;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1{
    	font-size: 5vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	    margin: 0;
        top: 2%;
        height: 9%;
        width: 100%;
        display: flex;
        align-items: end;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 2vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 69%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 61.5vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;
        height: 16vh;

    }
    #p1{
        margin: 0;
    }
    #p2{
        margin: 0;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 100vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 50vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 10%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #hamburger{
        width: 25vw;
        height: 60vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    nav.topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.5s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    #hamburg:checked + .hamburg  + nav.topmenu { 
        max-height: 20vh;
        overflow: visible;
    }
    .hamburg { 

        background: white; width: 35%; height: 10%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 40%; 
        height: 15%; 
     }
     input#hamburg {display:none}

     .line:hover{
        height: 13%;
        width: 28vw;
        margin: 5%;
        transition: 0.1s; 
     }
     .line {
        height: 10%; width: 25vw; 
        background: black; border-radius: 5%;
        display: flex;
        transition: 0.5s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-27px, 23px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-3px, -3px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 58.5vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 88vh;
    }
    h6{
        font-size: 3vh;
        position: absolute;
        top: 8%;
        z-index: 4;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #880000;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: #d4af37;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 1vh;
        z-index: 4000;
    }
}
@media (min-width:321px) and (max-width:360px) and (min-height:642px) and (max-height: 800px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 137vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 117vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 25%;
        width: 100%;
        position: absolute;
        top: 110vh;
        background-color: grey;
        color: white;
        font-size: 3.5vh;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
        border-radius: 15%;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 53vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 18%;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 31%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 57%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1{
    	font-size: 4vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 4%;
        height: 9%;
        width: 100%;
        display: flex;
        align-items: end;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 2vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #p1{
        margin: 0;
    }
    #p2{
        margin: 0;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 100vh;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 47vh;
        top: 5vh;
        color: black;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 10%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-27px, 23px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-3px, -3px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 58.5vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 88vh;
    }
    h6{
        font-size: 3vh;
        position: absolute;
        top: 12%;
        z-index: 4;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
        background-color: white;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (min-width:321px) and (max-width:360px) and (min-height:801px) and (max-height: 1000px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 50%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 155vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
        background-color: #FFE4E1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 110vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 35%;
        width: 100%;
        position: absolute;
        top: 120vh;
        background-color: grey;
        font-size: 3.5vh;
        color: white;
        background-color: grey;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 4;
        border-radius: 15%;
        background-color: #FFE4E1;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 14.5%;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #process{
        padding: 0;
        width: 100%;
        height: 40vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 62vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    h1{
    	font-size: 3vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 2%;
        height: 9%;
        width: 100%;
        display: flex;
        align-items: end;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 5;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #label{
        font-size: 2vh;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 71%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #p1{
        margin: 0;
    }
    #p2{
        margin: 0;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 100vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 55vh;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.5);
        color: black; 
        top: 5vh;
        border-radius: 15%;
        background-color: #FFE4E1;

    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 10%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-27px, 25px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-3px, -3px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 58.5vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 88vh;
    }
    h6{
        font-size: 2vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (min-width:361px) and (max-width:416px) and (max-height:800px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 40%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 150vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #FFE4E1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 130vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 61vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100vw;
        overflow: hidden;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 25%;
        width: 100%;
        position: absolute;
        background-color: grey;
        color: white;
        top: 115vh;
        z-index: 2;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        width: 25%;
        height: 45%;
        position: absolute;
        top: 80%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    h1{
    	font-size: 4.17vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        color: black;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 50%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 61vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1, #p2{
        margin: 0;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 103vh;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 54vh;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        top: 5vh;
        color: black;
        background-color: #FFE4E1;
        border-radius: 35%;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 45%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 45%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 25vw;
        height: 10vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 12vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LOGO:hover {
        width: 25vw;
        height: 12vh;
        transition: width 0.1s ease, height 0.1 ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw;
        height: 20vh;
        transition: width 0.5s ease, height 0.5 ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 70%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }


     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, -20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(20px, -33px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 57vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 88vh;
    }
    h6{
        font-size: 3vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        color: black;
    }
    h5{
        font-size: 3.5vh;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: #FFE4E1;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
        background-color: white;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (min-width:361px) and (max-width:416px) and (min-height:801px) and (max-height: 823px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 35%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: white;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.3s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 205vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 180vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 175vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 5%;
        position: absolute;
        top: 190vh;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 5%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1{
    	font-size: 6.94vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 78%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 73vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 130vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 50vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        top: 5vh;
        transition: height 0.5s ease;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #hamburger{
        width: 25vw;
        height: 60vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    nav.topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.5s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    #hamburg:checked + .hamburg  + nav.topmenu { 
        max-height: 20vh;
        overflow: visible;
    }
    .hamburg { 

        background: white; width: 35%; height: 10%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 40%; 
        height: 15%; 
     }
     input#hamburg {display:none}

     .line:hover{
        height: 13%;
        width: 28vw;
        margin: 5%;
        transition: 0.1s; 
     }
     .line {
        height: 10%; width: 25vw; 
        background: black; border-radius: 5%;
        display: flex;
        transition: 0.5s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-23px, 20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-27px, -22px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 5vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 5vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 105vh;
    }
    h6{
        font-size: 3vh;
        font-weight: 900;
        position: absolute;
        top: 14%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #880000;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: #d4af37;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 1vh;
        z-index: 4000;
    }
}
@media (min-width:361px) and (max-width:500px) and (min-height:801px) and (max-height: 915px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 35%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 135vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(2.0);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 25%;
        width: 100%;
        position: absolute;
        top: 120vh;
        color: white;
        background-color: grey;
        font-size: 3.5vh;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
        border-radius: 15%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        background-color: #FFE4E1;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        margin-right: 1%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 80%;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 61vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    h1{
    	font-size: 3vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #p1{
        margin: 0;
    }
    #p2{
        margin: 0;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 105vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 53vh;
        top: 5vh;
        color: black;
        border-radius: 15%;
    }        
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled:hover #LOGO{
        width: 25vw;
        transition: width 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 8vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 12vw; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 20vw;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 80%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(0px, 0px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 3vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 58vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 3vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 90vh;
    }
    h6{
        font-size: 2.5vh;
        font-weight: 900;
        position: absolute;
        top: 14%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (min-width:417px) and (max-width:599px) and (min-height:700px) and (max-height:800px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 35%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 150vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
        background-color: #FFE4E1;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 110vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 35%;
        width: 100%;
        position: absolute;
        top: 115vh;
        z-index: 5;
        background-color: grey;
        color: white;
        z-index: 2;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 74%;
    }
    h1{
    	font-size: 5vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: 0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 61vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 78%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 67vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1{
        margin: 0;
    }
    #p2{
        margin: 0;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 130vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 60vw;
        height: 50vh;
        top: 5vh;
        color: black;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled:hover #LOGO{
        width: 12vw;
        transition: width 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 8vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 20vw;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-25px, 25px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-27px, -35px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 5vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 5vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 90vh;
    }
    h6{
        font-size: 3.5vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (min-width:417px) and (max-width:599px) and (min-height:801px) and (max-height:940px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 35%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 130vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 56vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 5%;
        position: absolute;
        top: 127vh;
        color: white;
        z-index: 2;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 70%;
    }
    h1{
    	font-size: 4vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
	    margin: 0;
        top: -0%;
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 78%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 73vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 130vh;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 70vw;
        height: 50vh;
        top: 5vh;
        color: black;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 25vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 8vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110%;
        background-color: #FFE4E1;
    }
    #topmenu1{
        background-color: #FFE4E1;
        z-index: 5100;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
        background-color: #FFE4E1;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }


     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-20px, 20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-29px, -35px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%;
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 105vh;
    }
    h6{
        font-size: 2.9vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h5{
        font-size: 3.5vh;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (min-width:600px) and (max-width:1024px) and (min-height:360px) and (max-height:1023px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 18vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 25%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #FFE4E1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 120vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 60vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(2);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 50%;
        width: 100%;
        position: absolute;
        top: 173vh;
        background-color: grey;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
        background-color: #FFE4E1;

    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        width: 25%;
        height: 55%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 70%;
    }
    h1{
    	font-size: 8vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
	    margin: 0;
        top: -0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        color: black;
        height: 15%;
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #process{
        padding: 0;
        width: 100%;
		height: 80vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 85vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 70%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 7vh;

    }
    #bianca{
        font-size: 7vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        margin: 5%;
        color: black;
        font-size: 3vh;

    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 40vw;
        height: 80vh;
        top: 1vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 30%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 30%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 12vw;
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LoginButton {
        width: 20%;
        transition: width 0.1s ease;
    }
    header.scrolled {
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LOGO:hover {
        width: 25vw;
        height: 20vh;

        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-20px, 20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-29px, -35px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 25%;
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 3vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 3vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 95vh;
    }
    h6{
        font-size: 6vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        color: black;
    }
    h5{
        font-size: 6vh;
        color: white;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 4vh;
        z-index: 4000;
    }
}
@media (min-width:600px) and (max-width:1219px) and (min-height:370px) and (max-height:424px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 18vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 25%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #FFE4E1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 120vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 60vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(2);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 50%;
        width: 100%;
        position: absolute;
        top: 173vh;
        background-color: grey;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
        background-color: #FFE4E1;

    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        width: 25%;
        height: 55%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 70%;
    }
    h1{
    	font-size: 8vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
	    margin: 0;
        top: -0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        color: black;
        height: 15%;
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #process{
        padding: 0;
        width: 100%;
		height: 80vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 85vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 70%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 7vh;

    }
    #bianca{
        font-size: 7vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        margin: 5%;
        color: black;
        font-size: 3vh;

    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 40vw;
        height: 80vh;
        top: 1vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 30%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 30%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 12vw;
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LoginButton {
        width: 20%;
        transition: width 0.1s ease;
    }
    header.scrolled {
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LOGO:hover {
        width: 25vw;
        height: 20vh;

        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-20px, 20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-29px, -35px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 25%;
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 3vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 3vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 95vh;
    }
    h6{
        font-size: 5vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        color: black;
    }
    h5{
        font-size: 6vh;
        color: white;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 4vh;
        z-index: 4000;
    }
}
@media (min-width:600px) and (max-width:1024px) and (min-height:425px) and (max-height:1023px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 18vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 25%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #FFE4E1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 120vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 60vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(2);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 50%;
        width: 100%;
        position: absolute;
        top: 173vh;
        background-color: grey;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
        background-color: #FFE4E1;

    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        width: 25%;
        height: 55%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 70%;
    }
    h1{
    	font-size: 6.5vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
	    margin: 0;
        top: -0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        color: black;
        height: 15%;
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #process{
        padding: 0;
        width: 100%;
		height: 80vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 85vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 70%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 7vh;

    }
    #bianca{
        font-size: 7vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        margin: 5%;
        color: black;
        font-size: 3vh;

    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 40vw;
        height: 80vh;
        top: 1vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 30%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 30%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 12vw;
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LoginButton {
        width: 20%;
        transition: width 0.1s ease;
    }
    header.scrolled {
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LOGO:hover {
        width: 25vw;
        height: 20vh;

        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-20px, 20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-29px, -35px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 25%;
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 3vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 3vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 95vh;
    }
    h6{
        font-size: 5vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        color: black;
    }
    h5{
        font-size: 6vh;
        color: white;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 4vh;
        z-index: 4000;
    }
}
@media (min-width:600px) and (max-width:1024px) and (min-height:513px) and (max-height:1023px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 18vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 25%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #FFE4E1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 120vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 60vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(2);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 50%;
        width: 100%;
        position: absolute;
        top: 173vh;
        background-color: grey;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
        background-color: #FFE4E1;

    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        width: 25%;
        height: 55%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 80%;
    }
    h1{
    	font-size: 4.5vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
	    margin: 0;
        top: 3%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        color: black;
        height: 15%;
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #process{
        padding: 0;
        width: 100%;
		height: 80vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 85vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 70%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 7vh;

    }
    #bianca{
        font-size: 7vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        margin: 5%;
        color: black;
        font-size: 2.5vh;

    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 60vw;
        height: 80vh;
        top: 1vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 30%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 30%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 12vw;
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LoginButton {
        width: 20%;
        transition: width 0.1s ease;
    }
    header.scrolled {
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LOGO:hover {
        width: 25vw;
        height: 20vh;

        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-20px, 20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-29px, -35px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 25%;
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 3vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 3vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 95vh;
    }
    h6{
        font-size: 3vh;
        font-weight: 900;
        position: absolute;
        top: 15%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        color: black;
    }
    h5{
        font-size: 6vh;
        color: white;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 4vh;
        z-index: 4000;
    }
}
@media (min-width:769px) and (max-width:1160px) and (min-height:473px) and (max-height:641px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 18vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 25%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    #msal-login{
        width: 70%;
        height: 5vh;
        position: absolute;
        top: 30%;
        z-index: 4;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #FFE4E1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 120vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 60vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(2);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 50%;
        width: 100%;
        position: absolute;
        top: 173vh;
        background-color: grey;
        z-index: 2;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
        background-color: #FFE4E1;

    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        width: 25%;
        height: 55%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 70%;
    }
    h1{
    	font-size: 6vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
	    margin: 0;
        top: -0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        color: black;
        height: 15%;
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #process{
        padding: 0;
        width: 100%;
		height: 80vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 85vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 70%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 7vh;

    }
    #bianca{
        font-size: 7vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        margin: 5%;
        color: black;
        font-size: 3vh;

    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 40vw;
        height: 80vh;
        top: 1vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 30%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 30%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 12vw;
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LoginButton {
        width: 20%;
        transition: width 0.1s ease;
    }
    header.scrolled {
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LOGO:hover {
        width: 25vw;
        height: 20vh;

        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-20px, 20px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-29px, -35px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 25%;
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 3vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 3vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 95vh;
    }
    h6{
        font-size: 4.5vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        color: black;
    }
    h5{
        font-size: 6vh;
        color: white;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 4vh;
        z-index: 4000;
    }
}
@media (min-width:769px) and (max-width:1160px) and (min-height:642px) and (max-height:1023px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 18vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 25%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g_id_signin{
        width: 70%;
        height: 10%;
        z-index: 4;
        position: absolute;
        top: 6%;

    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 140vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #FFE4E1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 120vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 60vh;
        position: absolute;
        z-index: 1;
    }
    input[type="checkbox"] {
        transform: scale(2);
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 50%;
        width: 100%;
        position: absolute;
        top: 173vh;
        background-color: grey;
        z-index: 2;
    }
    #menupoint{
        font-size: 2vh;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 3;
        background-color: #FFE4E1;

    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #nachricht{
        width: 86.5%;
        height: 15%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        width: 25%;
        height: 55%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 70%;
    }
    h1{
    	font-size: 6vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
	    margin: 0;
        top: -0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        color: black;
        height: 15%;
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    #process{
        padding: 0;
        width: 100%;
		height: 80vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 85vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 70%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 7vh;

    }
    #bianca{
        font-size: 7vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        margin: 5%;
        color: black;
        font-size: 3vh;

    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 60vw;
        height: 80vh;
        top: 1vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 30%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 30%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 12vw;
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LoginButton {
        width: 20%;
        transition: width 0.1s ease;
    }
    header.scrolled {
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled #LOGO:hover {
        width: 25vw;
        height: 20vh;

        cursor: pointer;
    }
    #LOGO:hover {
        width: 25vw;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }

     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }

     .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
     
    #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(0px, 0px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 25%;
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 3vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 65vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 3vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 95vh;
    }
    h6{
        font-size: 4.5vh;
        font-weight: 900;
        position: absolute;
        top: 12%;
        z-index: 5;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        color: black;
    }
    h5{
        font-size: 6vh;
        color: white;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
        position: absolute;
        top: 20%;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #loginPopup{
        display: none;
        width: 60vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 4vh;
        z-index: 4000;
    }
}
@media (min-width:600px) and (max-width:1024px) and (min-height:1024px) and (max-height:1280px) {
    html{
        display: flex;
        max-width: 100vw;
        max-height: 100vh;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 4;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 130vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;
    }
    main{
		padding: 0;
        width: 100vw;
		height: 126vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
        background-color: grey;
        color: white;

	}
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        width: 100vw;
        height: 80vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        margin: 5%;
        height: 25%;
        width: 100%;
        position: absolute;
        top: 120vh;
        background-color: grey;
        color: white;
        z-index: 2;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 60vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #Formular{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2%;
        z-index: 3;
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 3%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 65%;

    }
    h1{
    	font-size: 4vh;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
	    margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 15%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 4;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    h6{
        font-size: 3vh;
        position: absolute;
        top: 12%;
        z-index: 5;
        font-weight: 900;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 80%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        margin: 5%;

    }
    #kontaktdaten{
        height: 15%;
        width: 40vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 54vh;
        z-index: 2;
        margin-top: 1%;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 40vw;

    }
    #p1, #p2{
        margin: 2%;
    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 86vh;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        margin-bottom: 10%;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 3;
        width: 65vw;
        height: 50vh;
        color: black;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: silver;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.3s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 10vh;
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 10vh; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.5s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: 8vh; /* oder eine andere gewünschte Breite */
        height: auto;
        transition: width 0.5s ease, height 0.5s ease;
    }
    header.scrolled {
        height: 12vh; /* Neue Höhe des Headers */
        transition: width 0.3s ease, height 0.3s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: 12vh;
        transition: width 0.5s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 12vh;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    .row{
        width: 25vw;
        height: 20vh;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 12vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 110%;
    }
    #topmenu1{
        background-color: #FFE4E1;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey;
    }
    .line:nth-child(2):hover {
        background-color: grey;
    }
    .line:nth-child(3):hover {
        background-color: grey;
    }
     .line:hover{
        height: 7%;
        width: 40%;
        padding: 2%;
        margin: 3%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 5%; width: 35%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 2%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-40px, 45px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 4vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 50vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 4vh;
        background-color: black;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 73vh;
    }
    h5{
        font-size: 3vh;
        color: white;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 9998;
    }
    #form1{
        flex-direction: column;
    }
    #loginPopup{
        display: none;
        width: 25vw;
        height: 35vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #uploadPopup{
        display: none;
        flex-direction: column;
        height: 20%;

    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
        color: black;
    }
}
@media (min-width:1025px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #topmenu1{
        font-size: 3vh;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 4vh;
        position: absolute;
        top: 23%;
    }
    #email{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 4vh;
        position: absolute;
        top: 35%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 47%;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 59%;
    }
    #agb{
        width: 10%;
        height: 100%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    input[type="checkbox"] {
        transform: scale(2.0);
    }
    h1{
    	font-size: 8.5vh;
        font-weight: 900;
	    margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 88%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 25%;
        font-size: 2vh;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 35vw;
        height: 65vh;
        top: 4vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 25%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        height: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: calc(100% - 14vh);
        overflow: visible;
        top: 14vh;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        transform: rotate(0deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        background-size: cover; /* Ensure the image covers the button */
        width: 10%; /* Set the width as per your image dimensions */
        height: auto; /* Set the height to auto to maintain the aspect ratio of the image */
        border: none;
        cursor: pointer;
        display: none; /* Initially hide the LogoutButton */
    }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 6vh;
        position: absolute;
        top: 13%;
        font-weight: 900;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1025px) and (max-width:1726px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 26%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 40%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 54%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 68%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 36%;
        left: 85%;
    }
    h1{
    	font-size: 9.5vh;
        font-weight: 900;
	    margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        flex-direction: row;
        top: 88%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 6.5vh;
        position: absolute;
        top: 14%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1041px) and (max-width:1467px) and (min-height:1232px) and (max-height:3000px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 135vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 5vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 82%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 90%;
        height: 65vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 4vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1025px) and (max-width:1655px) and (min-height:684px) and (max-height:1746px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 40%;
        top: 145vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 38%;
    }
    h1{
    	font-size: 5.5vh;
        font-weight: 900;
	    margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 4vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1025px) and (max-width:1040px) and (min-height:684px) and (max-height:1746px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 5.6vh;
        font-weight: 900;
	    margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 4.4vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1025px) and (max-width:1040px) and (min-height:861px) and (max-height:924px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
        font-size: 3vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 5.5vh;
        font-weight: 900;
	    margin: 0;
        top: 1%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 4vh;
        position: absolute;
        top: 12%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1025px) and (max-width:1040px) and (min-height:925px) and (max-height:1746px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
    }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
        font-size: 3vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 4vh;
        font-weight: 900;
	    margin: 0;
        top: 1%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 60vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 3vh;
        position: absolute;
        top: 12%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1025px) and (max-width:1025px) and (min-height:541px) and (max-height:683px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: 1%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 5.5vh;
        position: absolute;
        top: 12%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1026px) and (max-width:1162px) and (min-height:613px) and (max-height:683px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 8vh;
        font-weight: 900;
	    margin: 0;
        top: -2%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 6vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1026px) and (max-width:1160px) and (min-height:542px) and (max-height:612px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: -2%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 6vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1026px) and (max-width:1109px) and (min-height:633px) and (max-height:683px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: -2%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 5vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1163px) and (max-width:1289px) and (min-height:680px) and (max-height:683px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: -2%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 6vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:3232px) and (max-width:3232px) and (min-height:1741px) and (max-height:1746px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: -2%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 5.5vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:3224px) and (max-width:3803px) and (min-height:1736px) and (max-height:2048px)  {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 75vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        position: absolute;
        top: 20%;
    }
    #email{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 32%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 9%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 44%;
    }
    #nachricht{
        width: 86.5%;
        height: 19%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 56%;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        position: absolute;
        top: 110%;
        left: 44%;
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: -2%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: start;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        flex-direction: column;
        top: 78%;
        width: 86.5%;
        height: 10%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 20%;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 30vw;
        height: 65vh;
        top: 5vh;
    }
    input[type="checkbox"] {
        transform: scale(1.5);
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 5vh;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 100000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1041px) and (max-width: 1655px) and (min-height: 902px){
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #topmenu1{
        font-size: 3vh;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 4vh;
        position: absolute;
        top: 23%;
    }
    #email{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 4vh;
        position: absolute;
        top: 35%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 47%;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 59%;
    }
    #agb{
        width: 10%;
        height: 100%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    input[type="checkbox"] {
        transform: scale(2.0);
    }
    h1{
    	font-size: 5vh;
        font-weight: 900;
	    margin: 0;
        top: 3%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 80%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 25%;
        font-size: 2vh;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 50vw;
        height: 65vh;
        top: 4vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 25%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        height: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: calc(100% - 14vh);
        overflow: visible;
        top: 14vh;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        transform: rotate(0deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        background-size: cover; /* Ensure the image covers the button */
        width: 10%; /* Set the width as per your image dimensions */
        height: auto; /* Set the height to auto to maintain the aspect ratio of the image */
        border: none;
        cursor: pointer;
        display: none; /* Initially hide the LogoutButton */
    }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 3.5vh;
        position: absolute;
        top: 13%;
        font-weight: 900;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1041px) and (max-width: 1325px) and (min-height: 1690px){
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #topmenu1{
        font-size: 3vh;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 4vh;
        position: absolute;
        top: 23%;
    }
    #email{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 4vh;
        position: absolute;
        top: 35%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 47%;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 59%;
    }
    #agb{
        width: 10%;
        height: 100%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    input[type="checkbox"] {
        transform: scale(2.0);
    }
    h1{
    	font-size: 4.5vh;
        font-weight: 900;
	    margin: 0;
        top: 3%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 80%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 25%;
        font-size: 2vh;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 60vw;
        height: 65vh;
        top: 4vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 25%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        height: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: calc(100% - 14vh);
        overflow: visible;
        top: 14vh;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        transform: rotate(0deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        background-size: cover; /* Ensure the image covers the button */
        width: 10%; /* Set the width as per your image dimensions */
        height: auto; /* Set the height to auto to maintain the aspect ratio of the image */
        border: none;
        cursor: pointer;
        display: none; /* Initially hide the LogoutButton */
    }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 3vh;
        position: absolute;
        top: 13%;
        font-weight: 900;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1656px) and (max-width: 3300px) and (min-height: 890px){
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #topmenu1{
        font-size: 3vh;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 4vh;
        position: absolute;
        top: 23%;
    }
    #email{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 4vh;
        position: absolute;
        top: 35%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 47%;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 59%;
    }
    #agb{
        width: 10%;
        height: 100%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    input[type="checkbox"] {
        transform: scale(2.0);
    }
    h1{
    	font-size: 5vh;
        font-weight: 900;
	    margin: 0;
        top: 3%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 80%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 25%;
        font-size: 2vh;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 50vw;
        height: 65vh;
        top: 4vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 25%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        height: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: calc(100% - 14vh);
        overflow: visible;
        top: 14vh;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        transform: rotate(0deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        background-size: cover; /* Ensure the image covers the button */
        width: 10%; /* Set the width as per your image dimensions */
        height: auto; /* Set the height to auto to maintain the aspect ratio of the image */
        border: none;
        cursor: pointer;
        display: none; /* Initially hide the LogoutButton */
    }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 3.5vh;
        position: absolute;
        top: 13%;
        font-weight: 900;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1812px) and (max-width: 3300px) and (min-height: 890px){
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #topmenu1{
        font-size: 3vh;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 4vh;
        position: absolute;
        top: 23%;
    }
    #email{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 4vh;
        position: absolute;
        top: 35%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 47%;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 59%;
    }
    #agb{
        width: 10%;
        height: 100%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    input[type="checkbox"] {
        transform: scale(2.0);
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: 1%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 80%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 25%;
        font-size: 2vh;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 30vw;
        height: 65vh;
        top: 4vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 25%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        height: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: calc(100% - 14vh);
        overflow: visible;
        top: 14vh;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        transform: rotate(0deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        background-size: cover; /* Ensure the image covers the button */
        width: 10%; /* Set the width as per your image dimensions */
        height: auto; /* Set the height to auto to maintain the aspect ratio of the image */
        border: none;
        cursor: pointer;
        display: none; /* Initially hide the LogoutButton */
    }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 5vh;
        position: absolute;
        top: 13%;
        font-weight: 900;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1812px) and (max-width: 3152px) and (min-height: 1746px){
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 10vw;
        height: 30vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 15%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 30vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 169vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
		padding: 0;
        width: 100vw;
		height: 140vh;
		margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 30vh;
	}
    #topmenu1{
        font-size: 3vh;
    }
    #process{
        padding: 0;
        width: 100%;
		height: 40vh;
		margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 3;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }
    div{
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 30%;
        top: 141vh;
        background-color: grey;
        z-index: 2;
        font-size: 3vh;
    }
    h5{
        color: white;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 4vh;
        position: absolute;
        top: 23%;
    }
    #email{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 4vh;
        position: absolute;
        top: 35%;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 8%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 47%;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        font-size: 4vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 59%;
    }
    #agb{
        width: 10%;
        height: 100%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    input[type="checkbox"] {
        transform: scale(2.0);
    }
    h1{
    	font-size: 7vh;
        font-weight: 900;
	    margin: 0;
        top: 1%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 20%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 80%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 25%;
        font-size: 2vh;

    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 30vw;
        height: 65vh;
        top: 4vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 25%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        height: 25%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 23%
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: calc(100% - 14vh);
        overflow: visible;
        top: 14vh;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        transform: rotate(0deg) translate(0px, 0px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(-45deg) translate(0px, 0px);
    }
    #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        background-size: cover; /* Ensure the image covers the button */
        width: 10%; /* Set the width as per your image dimensions */
        height: auto; /* Set the height to auto to maintain the aspect ratio of the image */
        border: none;
        cursor: pointer;
        display: none; /* Initially hide the LogoutButton */
    }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 4.5vh;
        position: absolute;
        top: 13%;
        font-weight: 900;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:377px) and (max-width:1024px) and (min-height:1646px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 135vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 4.5vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 82%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 70%;
        height: 65vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit" i]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 3.5vh;
        font-weight: 900;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:377px) and (max-width:936px) and (min-height:1728px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 135vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 4vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 82%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 70%;
        height: 65vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit" i]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 3vh;
        font-weight: 900;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:377px) and (max-width:824px) and (min-height:1335px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 135vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 3.5vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 82%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 70%;
        height: 65vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit" i]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 2.5vh;
        font-weight: 900;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:377px) and (max-width:651px) and (min-height:1510px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 135vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 2.5vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 82%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 70%;
        height: 65vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit" i]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 2vh;
        font-weight: 900;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:377px) and (max-width:742px) and (min-height:1331px) and (max-height:1334px) {
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 135vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 4.5vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 82%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 70%;
        height: 65vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit"]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 3.5vh;
        font-weight: 900;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}
@media (min-width:1812px) and (max-width:3076px) and (min-height:1704px){
    html{
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }
    #LOGO {
        width: 25vw;
        height: 20vh;
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;  
    }    
    #LoginButton {
        background-image: url('/bilder/LoginButton.webp');
        width: 30%;
        height: auto;
        border: none;
        cursor: pointer;
    }
    .g-signin2{
        width: 100vw;
        height: auto;
    }
    header{
        background-color: #FFE4E1;
        overflow: visible;
        box-sizing: border-box;
        padding-bottom: 0;
        width: 100vw;
        height: 20vh;
        margin: 0;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: height 0.1s ease;
        z-index: 6;
    }
    body{
        text-align: center;
        font-weight: bolder;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        width: 100vw;
        height: 165vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FFE4E1;
        justify-content: center;
        z-index: 1;
        overflow-x: hidden;

    }
    main{
        padding: 0;
        width: 100vw;
        height: 140vh;
        margin: 0;
        display: flex;
        align-items: start;
        justify-content: center;
        position: absolute;
        top: 20vh;
    }
    #process{
        padding: 0;
        width: 100%;
        height: 45vh;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 72vh;
        background-color: grey;
        z-index: 1;
    }
    #eXp{
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;

    }
    .phonenumber{
        font-size: 4vh;

    }
    #bianca{
        font-size: 4vh;
        color: white;

    }
    #a1{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 30%;
   }
    #div4{
        position: absolute;
        top: 0vh;
        z-index: 10000;
        visibility: hidden;
        width: 100%;
    }
    #hintergrundbild{
        display: flex;
        align-items: start;
        justify-content: center;
        background-image: url('/bilder/surrounded.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -1;
    }
    div{
        display: none;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        align-items: center;

    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0%;
        position: absolute;
        width: 100vw;
        height: 33%;
        top: 135vh;
        background-color: grey;
        z-index: 2;
    }
    h5{
        color: white;
        font-size: 3.5vh;
    }
    #Formular{
        background-color: #FFE4E1;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 15%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
    }
    #name{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        z-index: 6;
        font-size: 3vh;
    }
    #email{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #mobilfunknummer{
        width: 86.5%;
        height: 10%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #nachricht{
        width: 86.5%;
        height: 20%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        font-size: 3vh;
    }
    #agb{
        width: 4.5%;
        height: 50%;
        margin-left: 0%;
        cursor: pointer;
    }
    #button{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        width: 20%;
        height: 3vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    h1{
        font-size: 6vh;
        font-weight: 900;
        margin: 0;
        top: 0%;
        text-shadow: 0 0 15px rgba(0, 0, 0, 1.0);
        height: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        z-index: 3;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    
    }
    .line-with-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #buttons{
        display: flex;
        align-items: row;
        position: absolute;
        top: 82%;
        width: 86.5%;
        margin-top: 0%;
        padding: 1%;
        z-index: 4;
    }
    #checkboxbrother{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 5%;
        font-size: 2vh;

    }
    input[type="checkbox"] {
        transform: scale(3); /* Ersetzen Sie 2 durch den gewünschten Skalierungsfaktor */
    }
    #kontaktdaten{

        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 90vh;
        z-index: 2;
    }
    #kontaktdaten2{
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12vw;

    }
    .p3{
        text-align: justify;
        position: absolute;
        z-index: 2;
        width: 72vw;
        top: 155vh;
    }
    li{
        display: list-item;
    }
    a{
        color: #880000;
        text-decoration: none
    }
    #div3{
        display: flex;
        position: absolute;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 50vw;
        height: 65vh;
        top: 5vh;
    }
    #button:hover{
        background-color: #d4af37;
    }
    #button1:hover{
        background-color: #d4af37;
    }
    #div1{
        display: flex;
        width: 100%;
    }
    #div2{
        display: flex;
        width: 100%;
    }
    #div31{
        display: flex;
        flex-grow: 1;
        width: 50vw;
        height: 50vh;
        position: absolute;
        z-index: 2;
        background-color: white;
        top: 70vh;
    }
    #div11{
        display: flex;
        width: 100%;
    }
    #div21{
        display: flex;
        width: 100%;
    }
    header.scrolled:hover{
        height: 20vh;
        transition: height 0.1s ease;
        cursor: pointer;
    }
    header.scrolled  #LoginButton:hover{
        width: 20%;
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LoginButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    #LogoutButton:hover{
        width: 20%; /* Ändere die Höhe des Headers beim Hover-Effekt */
        transition: height 0.1s ease; 
        cursor: pointer;
    }
    header.scrolled #LOGO {
        width: auto; /* oder eine andere gewünschte Breite */
        height: 14vh;
        transition: width 0.1s ease, height 0.1s ease;
    }
    header.scrolled {
        height: 14vh; /* Neue Höhe des Headers */
        transition: width 0.1s ease, height 0.1s ease; /* Animiere die Höhenänderung mit einer Transition */
        /* Weitere Stile für den gescrollten Header hier */
    }
    header.scrolled #LOGO:hover {
        width: auto;
        height: 20vh;
        transition: width 0.1s ease;
        cursor: pointer;
    }
    #LOGO:hover {
        width: 12vw; /* Ändere die Breite des Elements beim Hover-Effekt */
        transition: width 0.5s ease;
        cursor: pointer;
    }
    form{
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        width: 253.33px;
    }
    input[type="submit" i]{
        display: flex;
        background-color: black;
        color: white;
        cursor: pointer;
    }
    header.scrolled .row{
        height: 14vh;
        width: 25vw;
        transition: height 0.1s ease and width 0.1s ease;
    }
    .row{
        width: 25vw;
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hamburger{
        width: 25vw;
        height: 14vh;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: visible;
        background-color: #FFE4E1;
    }
    .topmenu { 
        height: auto; 
        max-height: 0;
        overflow: hidden; 
        transition: all 0.1s;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    #hamburg:checked + .hamburg  + .topmenu { 
        height: 100%;
        overflow: visible;
    }
    label.hamburg { 

        background: #FFE4E1; width: 100%; height: 100%; 
        flex-wrap: wrap;
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        overflow: visible;
     }
     .hamburg:hover{
        width: 100%; 
        height: 100%; 
     }

     input#hamburg {display:none}

    .line:nth-child(1):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(2):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
    .line:nth-child(3):hover {
        background-color: grey; /* Ändert die Hintergrundfarbe in Rot */
    }
     .line:hover{
        height: 7%;
        width: 20%;
        padding: 2%;
        margin: 2%;
        transition: 0.1s;
        transform-origin: center;
     }
     .line {
        height: 1%; width: 15%; 
        background: black;
        border-radius: 5%;
        display: flex;
        transition: 0.1s; 
        transform-origin: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 1%;
        margin: 1%;
     }
     
     .line:nth-child(1) { top: 5%; }
     .line:nth-child(2) { top: 5%; }
     .line:nth-child(3) { top: 5%; }
     
 
     #hamburg:checked + .hamburg .line:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 9px);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2) {
        opacity: 0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3) {
        transform: rotate(45deg) translate(-20px, -20px);
    }
     #LogoutButton {
        background-image: url('/bilder/LogoutButton.webp');
        width: 10%; /* Set the width as per your image dimensions */
        border: none;
        cursor: pointer;
     }

    .timeline {
        list-style: none;
        padding: 0;
    }
    .grecaptcha-badge { 
        visibility: hidden;
        z-index: 0;
    }
    element.style{
        width: 0;
        height: 0;
    }
    .event {
        display: flex;
        margin-bottom: 20px;
    }
    .event img {
        max-width: 100px;
        margin-right: 20px;
    }
    .event-content {
        flex: 1;
    }
    h2
    {
        position: absolute;
        font-size: 7vh;
        background-color: black;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 70vh;
        border-radius: 10px;
    }
    h3{
        position: absolute;
        font-size: 7vh;
        background-color: grey;
        border-radius: 10px;
        color: white;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        top: 137vh;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    }
    h6{
        font-size: 4.5vh;
        font-weight: 900;
        position: absolute;
        top: 10%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
        margin: 0;
    }
    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;

        z-index: 500;
    }
    #loginPopup{
        display: none;
        width: 20vw;
        height: 25vh;
        top: 50%;
        left: 50%;
        align-items: center;
        justify-content: center;
        z-index: 100000;
        transform: translate(-50%, -50%);
        background-color: white;
        position: fixed;
        padding: 20px;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
    }
    #form1{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #username{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #password{
        width: 65%;
        height: 14%;
        margin: 1%;
        padding: 1%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    #forgot{
        margin: 2%;
        margin-bottom: 0;
    }
    #register{
        margin: 7%;
        margin-top: 3%;
        margin-bottom: 5%;
    }
    #uploadPopup{
        display: none;
        height: 25%;
        margin-bottom: 7.5%;
    }
    .list{
        list-style-type: none;
        font-size: 3em;
        padding: 3em;
        margin: 5%;
    }
    #list3{
        padding-bottom: 0;
    }
    a{
        color: #d4af37;
        text-decoration: none;
        justify-self: center;
    }
    a:hover{
        color: white;
    }
    ul{
        padding-inline-start: 0px;
        list-style: none;
    }
    
    
    label{
        cursor: pointer;
    }

    
    input {
        padding: 5%; /* Innenabstand des Eingabefelds */
        border: 0.1rem solid #ccc; /* Rahmen um das Eingabefeld */
        border-radius: 5px; /* Abrundung der Ecken */
    }
    #stefan{
        font-size: 2.5vh;
        z-index: 4000;
    }
}