/*COLORS*/

:root{
    --blue: rgb(180, 222, 227);
    --black_t: rgba(0, 0, 0, 0.258);
    --turqoise: rgb(234, 255, 248);
    --turqoise_t: rgba(234, 255, 248, 0.7);
    --grey: rgb(81, 81, 81);
    --grey_dark: rgb(45, 45, 45);
    --grey_mid: rgb(200, 200, 200);
    --grey_low: rgb(240, 240, 240);
    --orange: rgb(246, 198, 96);
    --pink: rgb(244, 182, 168);
    --pink_low: rgba(244, 182, 168, 0.);
    --darkred: #612c2c;

}


/*MAIN STUFF*/

@import url(https://use.typekit.net/hdc5mif.css);

img{
    max-width: 100% !important;
}

body{
    font-family: "agenda-one-condensed";
    font-weight: 400;
    color: var(--grey);
    font-size: 20px;
    background-color: white;
}

a {
    text-decoration: none;
    color: var(--grey)
}

.font_logo{
    z-index: 9999;
}

.logo{
    position: relative;
    flex: 1;
    z-index: 9999;
    max-width: 80px;
}

.logo-img{
    max-width: 80px;
    height: auto;
}

@media(min-width: 1024px){
    .font-logo{
        max-width: 300px;
        min-width: 300px;
        width: 20vw;
        height: auto;
        margin-top: 10px; margin-left: 10px; margin-bottom: -135px;
    }
}

.login{
    flex:1;
}


/*NAV MENU*/ 

@media(min-width: 1024px){
    .top-bar{
        min-height: 140px;
        background-color: var(--grey_low);
        margin-bottom: -10px; 
        margin-left: 20px; margin-right: 20px;
        border-radius: 25px;
    }

    .menu_icons{     /* search & login icons*/
        float: right;
        padding: 20px;
        display: flex;
    }

    .menu_icons img {
        height: 50px;
        margin: 10px;
        transform: translate(170px, 15px);

        transform-origin: top right;
        transition: transform 0.3s ease;
    }

    .menu_icons img:hover{
        transform: translate(173px, 10px) scale(1.15);
    }

    .top-bar-form{
        opacity: 70%;
        float: right;
        transform: translate(-20px, 30px);
        height: 80px;
    }
}

.nav_links{ /*nav menu tabs*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    
    list-style: none;

    padding-bottom: 20px;

    font-size: 25px;
    transform: translate(0px, 3px);

}

@media(min-width: 1024px){
    .nav_links{
        margin-left: 30px;
        margin-right: 30px;
    }
}   

.nav_links li a{
    position: relative;
    display: inline-block;
    color: var(--grey);
    padding: 10px 15px;
}

.nav_links li a:hover::before, .aktiver_menulink::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 20px;
    background-color: var(--grey_low);
    z-index: -1;
    border-radius: 8px;
    padding: 10px;
}

html, body {
    height: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
}

header, nav, main, footer {
    width: 100%;
}



@media(max-width: 1024px){       /*NAV MENU for mobile*/

    .font-logo{
        max-width: 250px;
        min-width: 250px;
        width: 20vw;
        height: auto;
        margin-top: 0px; margin-left: 10px; margin-bottom: -112px;
    }

    .top-bar{
        min-height: 110px;
        background-color: var(--grey_low);
        margin-bottom: -10px; 
        margin-left: 20px; margin-right: 20px;
        border-radius: 25px;
    }

    .nav_links{ 
        display: none;
        flex-direction: column;
        position: absolute;
        top: 50px;
        right: 0px;
        width: 100%;
        padding: 0;
        list-style: none;
        z-index: 100000000;

       }

    .nav_links li {
        text-align: center;
    }

    .nav_links li a{
        display: block;
        padding: 15px;
        font-size: 40px;
        margin:0;
        line-height: 0.9;
    }

    .nav_toggle{
        display: none;
    }

    .nav_toggle_label{ /*burger menu icon*/
        position: fixed;
        top: 35px;
        right: 21px;
        cursor: pointer;
  
        display: flex;
        justify-content: center;
        align-items: center;

        z-index: 9999;

        background-color: var(--grey_low);
        border-radius: 25px;

    }

    .nav_toggle:checked ~ .nav_links{
        display: flex;
    }

    .nav_links li a:hover::before, .aktiver_menulink::before {

        height: 25px;
        background-color: var(--grey_mid);
        z-index: -1;
        border-radius: 8px;
        padding: 18px;
    }

    .dropdown_menu{
        position: fixed;
        top: 90px;
        left: 20px;
        width: calc(100% - 40px);
        padding-top: 40px;
        padding-bottom: 20px;

        background-color: var(--grey_low);
        border-radius: 15px;

        transform: translate(0, -5px);

        z-index: 1000;
    }

    .smooth_line{
        width: 50px;
        height: 5px;
        background-color: var(--grey_mid);
        border-radius: 10px;
        margin: 0 auto;
        margin-top: 10px; margin-bottom: 10px;
    }

    .nav_extras{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        margin-top: 30px;
        font-size: 30px;
        line-height: 0.5;

    }

    .nav_extras img {
        transform: translate(-20px, 10px);
    }

    .grey_bg{
        background-color: var(--grey_mid);
        border-radius: 15px;
        padding-left: 40px; padding-right: 40px;
        padding-bottom: 25px;
    }

    .menu_icons{
        display: none;
    }

    .top-bar-form{
        display: none;
    }
}

@media (min-width: 1024px){ /*das macht, dass dropdownmenu bei breiteren bildschirmen nicht sichtbar ist*/
    .nav_toggle_label{
        display:none;
    }

    .nav_toggle{
        display:none;
    }

    .nav_extras{
        display:none;
    }
}

main {
    flex: 1;
}



@media(max-width: 1024px){           /*footer für mobile*/
    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        background-color: var(--grey_low);
        color: rgb(0, 0, 0);
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 20px;


        font-size: 25px;
        font-weight: 200;
    }

    .footer_links{
        font-size: 28px;
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        margin-top: 20px;
    }

    .quokka_social{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .quokka_social img {
        height: 5em;
        padding: 15px;
    }

    .social_icons{
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin-top: -120px;
        padding-bottom: 0.5em;
    }

    .social_icons img {
        height: 1.6em;
        width: auto;
        transition: transform 0.3s ease;
        padding: 15px;
    }

    .social_icons img:hover{
        transform: scale(1.15);
    }

    .line_footer{
        width: 90px;
        height: 5px;
        background-color: var(--grey_mid);
        border-radius: 10px;
        margin: 0 auto;
        margin-top: 10px; margin-bottom: 10px;
    }

   .footer_links img{
        width: 20px;
        margin-right: 8px;
   }
}


@media(min-width: 1024px){           /*footer für desktop*/
    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        background-color: var(--grey_low);
        color: rgb(0, 0, 0);
        text-align: center;
        padding-top: 10px;


        font-size: 25px;
        font-weight: 200;
    }

    .footer_links{
        font-size: 27px;
        display: flex;
        flex-direction: column;
        margin-right: 20px;
    }

    .quokka_social{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .quokka_social img {
        height: 5em;
        padding: 20px;
    }

    .social_icons{
        display: flex;
        flex-direction: row;
        margin-top: -110px;
        margin-left: 5px;
        padding-bottom: 2em;
    }

    .social_icons img {
        height: 1.8em;
        width: auto;
        margin: 0 15px;
        transition: transform 0.3s ease;
    }

    .social_icons img:hover{
        transform: scale(1.15);
    }

    .line_footer{
        width: 90px;
        height: 5px;
        background-color: var(--grey_mid);
        border-radius: 10px;
        margin: 0 auto;
        margin-top: 10px; 
    }

    .footer_container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 100px;
    }

    .footer_links img{
        width: 20px;
        margin-right: 8px;
   }
}

/*stuff für angebote*/
.angebot img {
    max-width: 100%;  /* Bild nimmt maximal 100% der Breite des Containers ein */
    height: auto;     /* Höhe bleibt im Verhältnis zur Breite */
    display: block;   /* Verhindert zusätzliche Abstände um das Bild */
}
.angebot_container{
    display: grid;
    justify-content: center;
    margin: auto;
    gap: 10px;
    max-width: 1300px;
    position: relative;
    margin-bottom: 30px;
}

.angebot{
    display: block;
    padding: 2em;
    border-radius: 10px;
    font-weight:600;
    background-image: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    transition: height 0.7s cubic-bezier(.87, -0.2, .05, 1), filter .3s linear;
    height: 200px;
}

.angebot:hover {
    height: 300px;
    transition: height 0.7s cubic-bezier(.87, -0.2, .05, 1);
}

@media (max-width: 1024px){
    .angebot_container{
        max-width: 750px;
    }

    .angebot{
        margin-left: 20px; margin-right: 20px;
    }
    
   .angebote_title{
        margin-top: 50px;
   }
}

@media(max-width: 650px){
    .angebote-intro-text{
        max-width: 450px !important;
    }

    .button-container{
        flex-direction: column;
        max-width: 200px;
        gap: 0px !important;
    }

    .filter-btn, .action-btn{
        margin-top: 0px;
    }

}

/*text auf angebot buttons*/

.marker, .mini_marker{
    display: inline-block;
    background-color: var(--turqoise_t);
    color: var(--grey_dark);
    padding: 3px 10px;
    border-radius: 4px;
    position: relative;
    line-height: 0.5;
}

.marker{
    line-height: 150%;
    top: -20px;
    left: -20px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
}

.mini_marker{
    line-height: 50%;
    top: -8px;
    left: 0px;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 400;
    line-height: 0.9;
}



/* Bild zentrieren */
.angebote_title {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren (falls nötig) */
    width: 100%;             /* Stellen wir sicher, dass der Container die ganze Breite einnimmt */
    max-width: 300px;        /* Maximalbreite für das Bild */
    margin-left: auto;       /* Auto-Margin für Zentrierung */
    margin-right: auto;      /* Auto-Margin für Zentrierung */
}

/* Intro-Text zentrieren und vergrößern */
.angebote-intro-text {
    font-size: 30px; 
    margin: 0 auto 10px; /* Abstand nach unten */
    line-height: 1.2; /* Angenehmer Zeilenabstand */
    text-align: center;
    max-width: 650px;
}
/* Buttons */
.button-container {
    display: flex;          /* Wir nutzen Flexbox für die Zentrierung */
    justify-content: center; /* Horizontale Zentrierung der Buttons */
    gap: 20px;              /* Abstand zwischen den Buttons */
    margin-top: 20px;        /* Abstand oben */
    width: 600px;
    margin: auto;
}

button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: var(--darkred);
}

.filter-btn {
    background-color: var(--grey);
    color: #fff;
    font-weight: 600;
    font-size: 23px;
}

.action-btn {
    background-color:var(--darkred);
    color: #fff;
    font-weight: 600;
    font-size: 23px;
}


/* Hauptbereich für den Kurs */
.kurs-info {
    text-align: center;
    padding: 20px;
    font-family: "Kanit", sans-serif;
    color: var(--grey_dark);
    position: relative;
}


/* Optimierung des Kursbilds */
.kurs-info img {
    object-fit: cover;
    max-height: 300px; /* Verhindert Verzerrungen */
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
    display: block;
    margin: 0 auto; /* Zentrierung */
    margin-top: 30px;
}

/* Titel auf dem Bild */
.kurs-info .title-overlay {
    position: absolute;
    top: 50%; /* Vertikale Zentrierung */
    left: 50%; /* Horizontale Zentrierung */
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em; /* Angepasste Schriftgröße */
    font-family: "agenda-one-condensed", sans-serif;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Leichter Schatten für bessere Lesbarkeit */
    text-align: center;
    margin-top: auto;

}

/* Textbox für den restlichen Inhalt */
.text-container {
    background-color:var(--blue); /* Transparente Hintergrundfarbe */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
    margin: 20px auto; /* Zentriert die Box */
    max-width: 600px; /* Begrenzung der Breite */
    text-align: left; /* Text linksbündig */
    color: var(--grey);

    font-family: "agenda-one-condensed", sans-serif;
}

/* Beschreibungstext */
.text-container p {
    font-size: 24px; /* Leicht kleinere Schriftgröße */
    line-height: 1.2; /* Angenehmer Zeilenabstand */
    margin: 15px 0;
    
}


/* Button für Anmeldung */
.text-container a {
    display: block;
    justify-content: center;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--darkred);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    text-align: center;
    margin: auto;
    width: 200px;
}

.text-container a:hover {
    background-color: #e05f2d; 
}

@media(min-width: 1024px){
    .kurs-info img{
        width: 85%;
    }
}

@media(max-width: 1024px){
    .kurs-info img{
        margin-top: 50px;
        width: 660px;
    }
}

.anb_anmelden{          /*anbieter werden unter den angeboten*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    margin-top: 10px; margin-bottom: 10px;
    height: 300px;

    background-image: url(/img/formen/form_blau_2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 550px;
    overflow: hidden;
    
}

.anb_text {
    text-align: center;
    margin-left: 30px; margin-right: 30px;
}


/*stuff für merch*/

@media (min-width: 621px) {     /*merch desktop*/

    .merch_title{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        position: relative;
        width: 100%;
        min-height: 200px;
        max-width: 1000px;
        max-height: 1000px;

        background-image: url(/img/formen/form-gelb-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 200px;
        overflow: hidden;

        font-size: 50px;
        font-weight: 600;
    }

    .merch{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
        }

        .merch_item{
            box-sizing: border-box;
            width: 49%;
            height: 35vh;
            width: 35vh;
            margin-bottom: 10px;
            position: relative;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: white;
            border-radius: 10px;
        
        }

        .merch_item img{
            display: block;
            margin: 0 auto;
            width: 70%;
        }

    .merch_background{
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(/img/formen/form-blau-5.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center;
        max-width: 1250px;
        margin: auto;
    }
}

@media (max-width: 621px) {             /*merch mobile*/

    .merch_title{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        position: relative;
        width: 100%;
        min-height: 200px;
        max-width: 1000px;
        max-height: 1000px;

        background-image: url(/img/formen/form-gelb-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 200px;
        overflow: hidden;

        font-size: 50px;
        font-weight: 600;
    }

    .merch{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
        }

    .merch_item{
        box-sizing: border-box;
        width: 49%;
        height: 35vh;
        width: 35vh;
        margin-bottom: 10px;
        position: relative;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: white;
        border-radius: 10px;
        padding: 10px;

    }

    .merch_item img{
        display: block;
        margin: 0 auto;
        width: 70%;
    }

    .merch_background{
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(/img/formen/form-blau-6.png), url(/img/formen/form-pink-5.png), url(/img/formen/form-gelb-4.png);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 100% auto, 100% auto, 100% auto;
        background-position: 10% 10%, 50% 50%, 60% 90%;

        margin-top: 30px;

    }
}

.merch_background{
    margin-bottom: 50px;

    position: relative;
    width: 100%;
    height: auto;

    pointer-events: none;
}

.merch {
    position: relative;
    z-index: 100;
}

.merch_item {
    pointer-events: auto;
    margin: 0;
}

.merch_text{
    display: inline-block;
    color: black;
    padding: 3px 10px;
    border-radius: 4px;
    position: relative;
    line-height: 150%;
    font-size: 20px;
    text-align: center;
}

@media (min-width: 1024px) {        /*einzelne store page desktop*/
    .store_page{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        height: auto;
        padding: 50px;
        margin-top: -100px;

        background-image: url(/img/formen/form-pink-4.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1100px;
        overflow: hidden;
        }

    .store_item{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
        width: 100%;
        margin: auto;
        margin-top: 170px;
        min-width: 400px;
    }
        
    .store_item img {
        width: 400px;
        height: auto;
    }
    
    .store_content{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1;
        max-width: 770px;

    }
    
    .store_title{
        font-size: 24px;
        font-weight: bold;
        margin: 0 0 10px 0;
        text-align: left;
    }
    
    .store_text{
        font-size: 25px;
        margin: 0;
        text-align: left;
        font-weight: 300;
    }

}

/*styling für store elemente drop-down und button*/

.store_interact{
    display: flex;
    flex-direction: row;
}

.store_dropdown{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 18px;
    margin: 20px 0;
}

.store_dropdown label{
    font-weight: 600;
    font-size: 25px;
}

.store_dropdown select{
    padding: 10px;
    border: 2px solid var(--grey_mid);
    border-radius: 5px;
    font-size: 16px;
    background-color: var(--grey_low);
    color: var(--grey);
    outline: none;
    cursor: pointer;
}

.store_dropdown select:hover{
    border-color: var(--darkred);
    background-color: white;
}

.store_button{
    display: block;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 10px;
    width: 200px;
    margin: 30px 0px 0px 50px;
    height: 80px;
}

@media (max-width: 1024px) {        /*für mobile*/

    .store_page{
        background-image: url(/img/formen/rosa-hintergrund.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 800px;
        overflow: hidden;
        margin-top: -70px;
    }

    .store_item{
        transform: translateY(100px);
    }

    .store_content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: auto;
        padding: 30px;
    }

    .store_item img{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-top: 50px;
        width: auto;
        height: auto;
        width: 400px;
    }

    .store_text{
        max-width: 600px;
    }
}

.store_content{
    margin-bottom: 300px;
}

/*stuff für Login*/
/* Hintergrund und Hauptcontainer */
.login-container {
    position: relative; /* Ermöglicht die Platzierung des Hintergrundbildes */
    display: flex; /* Zentriert den Inhalt */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    min-height: 100%; /* Nimmt 100% von gesamte Bildschirmhöhe ein */
    background-color: #fdfdfd; /* Neutraler Hintergrund */
    overflow: hidden; /* Verhindert das Überlaufen von Inhalten */
    margin: 50px 0px; /* Abstand von Rosa Fläche zu Header*/
}

/* Hintergrundbild (rosa Form) */
.background-image {
    position: absolute; /* Fixiert das Bild im Container */
    top: 0;
    left: 0;
    width: 110%; /* Füllt den gesamten Container aus */
    height: 100%;
    z-index: 0; /* Liegt hinter dem Formular */
    display: flex; /* Ermöglicht die Zentrierung des Inhalts */
    justify-content: center; /* Zentriert das Bild horizontal */
    align-items: center; /* Zentriert das Bild vertikal */
}

.background-image img {
    width: 100%; /* Bild passt sich der Breite an */
    height: 100%; /* Bild passt sich der Höhe an */
    object-fit: cover; /* Schneidet das Bild korrekt zu */
}

/* Einstellungen für breitere Bildschirme (z. B. Laptops oder größere Displays) */
@media screen and (min-width: 1024px) {
    .background-image {
        width: 100vw; /* Nimmt die gesamte Breite des Bildschirms */
        height: 100vh; /* Nimmt die gesamte Höhe des Bildschirms */
        display: flex; /* Ermöglicht das Zentrieren von Inhalten */
        justify-content: center; /* Zentriert den Hintergrund horizontal */
        align-items: center; /* Zentriert den Hintergrund vertikal */
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .background-image img {
        width: auto; /* Bild behält seine Proportionen */
        height: 100%; /* Passt die Höhe des Bildes an die Bildschirmhöhe an */
        object-fit: contain; /* Bild bleibt vollständig sichtbar */
    }
}



/* Login-Formular */
.login-form {
    position: relative; /* Formular liegt über dem Hintergrund */
    padding: 30px; /* Innenabstand */
    padding-bottom: 50px; /* Abstand von Passwort vergessen? zu rosa form*/
    padding-top: 50px; /* Abstand von Login Titel auf Rosa Rand*/
    width: 90%; /* Anpassbare Breite */
    max-width: 400px; /* Maximale Breite */
    z-index: 1; /* Vordergrund-Ebene */
    text-align: center; /* Zentriert den Text */
    margin-top: 150px;
    margin-bottom: 250px;
}

/* Titelbild für Login */
.login-title-image {
    width: 60%; /* Passt sich der Breite des Formulars an */
    max-width: 300px; /* Maximale Breite */
    margin-bottom: 20px; /* Abstand nach unten */
}

/* Beschreibungstext */
.login-description {
    font-size: 20px; /* Standard-Schriftgröße */
    margin-bottom: 20px; /* Abstand nach unten */
    line-height: 1.5; /* Angenehmer Zeilenabstand */
}

/* Eingabefelder */
form label {
    display: block; /* Text oberhalb des Eingabefelds */
    text-align: left; /* Links ausgerichtet */
    margin: 10px 0 5px; /* Abstand zum Eingabefeld */
    font-size: 0.9rem; /* Kleinere Schriftgröße */
    color: var(--grey); /* Dunkelgraue Farbe */
}

form input[type="text"],
form input[type="password"] {
    width: 94%; /* Eingabefelder füllen die Breite */
    padding: 10px; /* Innenabstand */
    border: 1px solid #ccc; /* Grauer Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 1rem; /* Standard-Schriftgröße */
}

/* Anmeldebutton */
form button {
    width: 100%; /* Button nimmt gesamte Breite */
    padding: 10px; /* Innenabstand */
    background-color: var(--darkred); /* Dunkelrot */
    color: white; /* Weiße Schriftfarbe */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 1rem; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    cursor: pointer; /* Mauszeiger wird zur Hand */
    margin: 20px 0; /* Abstand nach oben und unten */
    transition: background-color 0.3s; /* Weicher Übergang bei Hover */
}

form button:hover {
    background-color: #7d3c3c; /* Helleres Rot bei Hover */
}

/* Optionen: Checkbox und Link */
.options {
    display: flex; /* Elemente nebeneinander */
    justify-content: space-between; /* Abstand dazwischen */
    align-items: center; /* Vertikale Zentrierung */
    font-size: 0.9rem; /* Kleinere Schriftgröße */
}

.options a {
    color: #612c2c; /* Dunkelrote Links */
    text-decoration: none; /* Keine Unterstreichung */
}

.options a:hover {
    text-decoration: underline; /* Unterstreichung bei Hover */
}


/* Stuff für Über Quokka*/
.ueberquokka-container{
    width: 100%;
    margin: 0 auto 30px;
}

.title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    margin-bottom: 10px;
    width: 100%; /* Anpassbare Breite */
    max-width: 600px; /* Maximale Breite */
    text-align: center; /* Zentriert den Text */
}

.ueberquokka-title-image img {
    width: 60%; /* Passt sich der Breite des Formulars an */
    max-width: 500px; /* Maximale Breite */
    margin-bottom: 20px; /* Abstand nach unten */
    justify-content: center;
}

.ueberquokka-intro-text{
    font-size: 1.8rem; /* Standard-Schriftgröße */
    margin: auto;
    margin-bottom: 30px;
    margin-right: 20px; margin-left: 20px;
    line-height: 1.2; /* Angenehmer Zeilenabstand */
    text-align: center;
}

.team-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin: 20px;
}

.team-member {
    margin: auto;

    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;

    max-width: 700px;
}

.team-member img {
    width: 100%;
    position: relative; /* Ermöglicht die Überlagerung durch die Icons */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
}

.icons, .icons-left {
    position: absolute;
    width: 20%;
    height: auto;
    gap: 10px;
}

.icons {
    transform: translate(270%, -600%);
}

.icons-left {
    transform: translate(180%, -600%);
}

.ammar_icons_fix {
    margin-left: -10%;
}

.icons img, .icons-left img {
    transition: transform 0.2s; /* Animation beim Hover */
}


.icons img:hover, .icons-left img:hover {
    transform: scale(1.1);
}



/* Zitat-Sektion Über Quokka*/
.quote-section-ueberquokka {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 40px;
}

.quote-ueberquokka {
    position: relative;
    text-align: center;
    max-width: 1000px;
    width: 100%;
    margin: 20px auto;
}

.quote-background {
    position: relative;
    max-width: 800px;
    margin: auto;
}

.quote-background img {
    width: 100%;
    display: block;
}

.quote-title {
    font-size: clamp(3.5rem, 2vw, 4rem); /* Dynamische Schriftgröße */
    font-weight: bolder;
    font-style: normal;
    color: #333;
    text-align: center;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -250%);
    line-height: 1.4rem;
    width: 80%;
}

.quote-text-ueberquokka {
    font-size: 35px; 
    font-weight: lighter;
    color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    line-height: 1.2; 
    text-align: center;
    max-width: 400px;
}


/* Mobile Optimierungen */
@media (max-width: 600px) {
    .quote-title {
        font-size: 2.5rem;
        top: 80px;
    }

    .quote-text-ueberquokka {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .icons, .icons-left{
        display: flex;    
    }
}

.quokka-title-image img {
    width: 60%; /* Passt sich der Breite des Formulars an */
    max-width: 500px; /* Maximale Breite */
    margin-bottom: 20px; /* Abstand nach unten */
    justify-content: center;
}

@media (max-width: 500px) {

    .icons, .icons-left {
        width: 30%;
    }

    .icons{
        transform: translate(180%, -450%);
    }

    .icons-left{
        transform: translate(100%, -400%);
    }

    .ueberquokka-intro-text {
        font-size: 25px;
    }

    .quote-text-ueberquokka{
        font-size: 30px;
        max-width: 300px;
        margin-top: 10px;

    }
}

@media (max-width: 440px) {

    .ueberquokka-intro-text {
font-size: 22px;
    }

    .quote-text-ueberquokka {
        font-size: 25px; 
        max-width: 300px;
        margin-top: 10px;
    }

    .quote-title {
        font-size: 35px;
        margin-top: 10px;
    }
}

@media (max-width: 1500px) {        /*für breietere screens*/
    .team-section {
        flex-direction: column;
    }

    .team-member {
        width: 100%;
        margin-bottom: 20px;
    }

    .icons, .icons-left {
        display: flex;
    }

}

@media (min-width: 1500px) {

    .quote-section-ueberquokka {
        min-width: 1500px;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .icons, .icons-left {
        width: 25%;
        display: flex;
        flex-direction: row;
    }

    .icons {
        transform: translate(220%, -500%);
    }

    .icons-left {
        transform: translate(120%, -500%);
    }

}



/*stuff für community*/

    .community-intro-text{
        font-size: 30px; 
        margin: 0 auto 40px; /* Abstand nach unten */
        padding: 0 20px;
        line-height: 1.2; /* Angenehmer Zeilenabstand */
        text-align: center;
        max-width: 800px;
    }

    .quotes-section {
        padding: 20px 0;
      }

      .quote-container {
        text-align: center;
        max-width: 600px;
        line-height: 1.4;
        margin: auto;
        padding: 50px 10px;
        background-size: 100%; 
        background-position: center; /* Zentriert die Form */
        background-repeat: no-repeat;
        position: relative;
        min-height: 250px;

        }


      .quote-container:first-child {
        margin-top: 10px; /* Weniger Abstand zum vorherigen Inhalt */
    }
      
      .quote {
        font-size: 24px;
        font-style: italic;
        position: relative;
        z-index: 2; /* Text liegt über dem Hintergrundbild */

        transform: translate(0px, 40px);
      }
      
      .author {
        margin-top: 10px;
        font-size: 18px;
        position: relative;
        z-index: 2; /* Text liegt über dem Hintergrundbild */

        transform: translate(0px, 40px);
    }

      .quote-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1; /* Hintergrund bleibt hinter dem Text */
    }

    /* Für Bildschirme kleiner als 768px (Tablets) */
    @media (max-width: 768px) {
        .quote-container {
            background-size: 200px; /* Mindestgröße für kleine Bildschirme */
        }
    }

    /* Für sehr kleine Bildschirme (Smartphones) */
    @media (max-width: 480px) {
        .quote-container {
            background-size: 150px; /* Noch kleinere Mindestgröße für sehr kleine Bildschirme */
        }

    }

      .quote-container:nth-child(odd) {
        background-image: url('../img/formen/form_blau_2.png'); /* Roter Hintergrund */
        background-size: 600px; /* Vergrößert die Form auf 60% ihrer Originalgröße */
    }
    
    .quote-container:nth-child(even) {
        background-image: url('../img/formen/form-gelb-3.png'); /* Blauer Hintergrund */
        background-size: 600px; /* Vergrößert die Form auf 60% ihrer Originalgröße */

    }

    .friendlist-btn-container {
        text-align: center;
        margin: 40px 0; /* Abstand zum oberen und unteren Inhalt */
    }
    
    .friendlist-btn {
        display: inline-block;
        padding: 15px 30px;
        background-color: var(--grey);
        color: white;
        font-size: 1.2rem;
        text-decoration: none;
        border-radius: 5px; /* Abgerundete Ecken */
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    
    .friendlist-btn:hover {
        background-color: #333; /* Etwas dunkler beim Hover */
        transform: scale(1.05); /* Leichtes Vergrößern beim Hover */
    }
    
    .friendlist-btn:active {
        background-color: #333; /* Noch dunkler bei Klick */
    }

    /* Gesamtcontainer für die Kacheln */
.friendlist-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Kacheln pro Reihe */
    grid-gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Jede Freundes-Kachel */
.friend-card {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Profilbild links oben */
.friend-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
}

/* Bereich für die Informationen des Freundes */
.friend-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Name, Beruf und Kurse */
.friend-details p {
    margin: 5px 0;
}

.name {
    font-size: 1.1rem;
    font-weight: bold;
}

.job {
    font-size: 1rem;
    color: #555;
}

.courses {
    font-size: 0.9rem;
    color: #777;
}

/* Responsives Layout für kleinere Bildschirme */
@media (max-width: 768px) {
    .friendlist-container {
        grid-template-columns: repeat(2, 1fr); /* 2 Kacheln pro Reihe auf kleineren Bildschirmen */
    }
}

@media (max-width: 480px) {
    .friendlist-container {
        grid-template-columns: 1fr; /* 1 Kachel pro Reihe auf sehr kleinen Bildschirmen */
    }
}
  
    
 /* Container für den "Zurück"-Button */
.zurück-button-container {
    display: flex;                /* Flexbox für die Buttons */
    justify-content: center;      /* Horizontal zentrieren */
    align-items: center;          /* Vertikal zentrieren */
    gap: 15px;                    /* Abstand zwischen den Buttons */
    margin-top: 50px;             /* Abstand nach oben, anpassen, um ihn unter den Kacheln zu platzieren */
    margin-bottom: 80px;          /* Mehr Abstand nach unten */
    width: 100%;                  /* Container nimmt die volle Breite ein */
    position: relative;           /* Relative Positionierung für bessere Platzierung */
    top: 0;                       /* Kein Offset erforderlich */
}

/* Container für die Buttons "Anfragen" & "Chat" */
.action-button-container {
    display: flex;                /* Flexbox für die Anordnung der Buttons */
    justify-content: center;      /* Buttons horizontal zentrieren */
    gap: 15px;                    /* Abstand zwischen den Buttons */
    position: relative;           /* Position relativ zum übergeordneten Element */
    margin: 10px auto;            /* Abstand nach oben und zentriert durch auto */
    width: fit-content;           /* Breite an den Inhalt (Buttons) anpassen */
    z-index: 10;                  /* Buttons sicher über Kacheln anzeigen */
}

/* Styling für die einzelnen Buttons */
.action-button {
    padding: 10px 20px;
    background-color: var(--grey);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    transition: background-color 0.3s ease;
    width: 150px;                /* Einheitliche Breite für alle Buttons */
    border: none;                /* Keine Ränder um die Buttons */
}

/* Beispiel für Hover-Effekt */
.action-button:hover {
    transform: scale(1.05); /* Leichtes Vergrößern beim Hover */
}

@media (max-width: 480px){
    .action-button-container{
        flex-direction: column;
    }
}


/*SEARCH PAGE*/

/*für desktop*/

@media(min-width: 1024px) {

    .search_container{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: auto;

        position: relative;
        height: 150px;
        width: 300px;
    }

    .search_form{
        position: absolute;
        width: 40%;
        object-fit: cover;
        margin-top: 45px;
    }

    .search_title{
        position: relative;
        text-align: center;
        font-size: 50px;
        font-weight: 600;
    }

    .line_search{
        position: absolute;
        margin-top: 130px;

        width: 90px;
        height: 8px;
        background-color: var(--grey_mid);
        border-radius: 10px;
    }

    .search_text{
        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;
        text-align: center;
        width: 700px;
        margin: 30px auto;
        font-size: 28px;
        font-weight: 300;
    }

    .search_bar_container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        margin-top: -20px;
        margin-bottom: 50px;
        position: relative;
        width: 100%;
        min-height: 550px;
        max-width: 1000px;
        max-height: 1000px;

        background-image: url(/img/formen/form-blau-4.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 800px;
        overflow: hidden;

    }

    .search_bar_text{

        font-size: 40px;
        font-weight: 300;

        margin-top: 30px;
    }
    .search_bar{
        border: 2px solid var(--grey_mid);
        border-radius: 10px;
        font-size: 18px;
        font-weight: 300;
        outline: none;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.8);
        color: var(--grey);

        max-width: 400px;
    }

    .search_button{

        max-width: 250px;
        width: 60%;

        font-size: 30px;
        font-weight: 600;
        background-color: var(--darkred);
        color: white !important; 
        border-radius: 10px;


    }

    .search_combine{
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;

        width: 70%;
        
        margin-top: 30px;
    }

    
}


/*search page für mobile*/

@media(max-width: 1024px) {         /*mobile*/

    .search_container{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: auto;

        position: relative;
        height: 150px;
        width: 100%;
        max-width: 300px;
    }

    .search_form{
        position: absolute;
        width: 70%;
        object-fit: cover;
        margin-top: 65px;
        opacity: 75%;
    }

    .search_title{
        position: relative;
        text-align: center;
        font-size: 80px;
        font-weight: 600;
    }

    .line_search{
        position: absolute;
        margin-top: 200px;

        width: 90px;
        height: 8px;
        background-color: var(--grey_mid);
        border-radius: 10px;
    }

    .search_text{
        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;
        text-align: center;
        min-width: 300px;
        max-width: 500px;
        margin: 80px auto;
        padding: 20px;
        font-size: 33px;
        font-weight: 300;
    }

    .search_bar_container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        margin-top: -100px;
        position: relative;
        width: 100%;
        min-height: 500px;
        max-width: 1000px;
        max-height: 1000px;

        background-image: url(/img/formen/form-blau-4.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 700px;
        overflow: hidden;

    }

    .search_bar_text{

        font-size: 40px;
        font-weight: 300;

    }

    .search_bar{
        border: 2px solid var(--grey_mid);
        border-radius: 10px;
        font-size: 18px;
        font-weight: 300;
        outline: none;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.8);
        color: var(--grey);

        width: 300px;
        max-width: 500px;
    }

    .search_button{
        
        width: 60%;

        font-size: 30px;
        font-weight: 600;
        background-color: var(--darkred);
        color: white !important; 
        border-radius: 10px;

        max-width: 200px;
    }

    .search_combine{
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;

        width: 70%;
        
        margin-top: 20px;
    }

}

/*STUFF FÜR HOME*/

/*für desktop*/

@media (min-width: 1024px){

    .welcome_container{             /*willkommen bei quokka - DESKTOP*/
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 170px auto;

        position: relative;
        height: 150px;
        width: 300px;
    }

    .home_form{
        position: absolute;
        width: 100%;
        object-fit: cover;
        margin-top: -140px;
    }

    .home_welcome{
        position: relative;
        text-align: center;
        font-size: 70px;
        font-weight: 800;
        margin-top: -80px;

    }

    .home_container_0{              /*work-life-balance - DESKTOP*/
        display: flex;
        justify-content: center;
        margin: auto;

        position: relative;
        max-width: 1500px;
        height: 250px;

        margin-top: -120px;
        margin-bottom: 50px;
    }

    .home_form_0{
        position: relative;
        width: 350px;
        height: 50%;
        opacity: 80%;

    }

    .home_title_0{
        position: absolute;
        text-align: center;
        font-size: 50px;
        font-weight: 600;
        margin-top: 35px;
    }

    .home_text_0{
        position: absolute;
        text-align: center;
        margin-top: 150px;
        width: 730px;

        font-size: 30px;
    }

    .home_container_1{              /*angebote - DESKTOP*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -80px;

        background-image: url(/img/formen/form-pink-3.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 500px;
        min-width: 500px;
        max-height: 500px;

        transform: translate(150px);
    }

    .home_title_1{
        text-align: center;
        font-size: 70px;
        font-weight: 600;
        transform: translate(-70px, -40px);
    }

    .home_subtitle_1{
        text-align: center;
        font-size: 50px;
        font-weight: 500;
        transform: translate(0px, -150px);
    }

    .home_text_1{
        text-align: center;
        transform: translate(0px, -200px);
        width: 400px;
        font-size: 35px;
    }

    .home_icon_1{
        position: relative;
        width: 100px;
        height: 100px;

        transform: translate(300px, 50px);
    }

    .home_container_2{              /*community - DESKTOP*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -80px;

        background-image: url(/img/formen/form-blau-4.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 600px;
        min-width: 500px;
        max-height: 500px;

        transform: translate(-150px);
    }

    .home_title_2{
        text-align: center;
        font-size: 70px;
        font-weight: 600;
        transform: translate(100px, 0px);
    }

    .home_subtitle_2{
        text-align: center;
        font-size: 50px;
        font-weight: 500;
        transform: translate(50px, -110px);
    }

    .home_text_2{
        text-align: center;
        font-size: 35px;
        max-width: 400px;
        transform: translate(200px, -180px);
    }

    .home_icon_2{
        position: relative;
        width: 100px;
        height: 100px;
        transform: translate(200px, 70px);
    }

    .home_container_3{              /*anbieter - DESKTOP*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -80px;

        background-image: url(/img/formen/form-gelb-2.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 500px;
        min-width: 500px;
        max-height: 500px;

        transform: translate(150px);
    }

    .home_title_3{
        text-align: center;
        font-size: 70px;
        font-weight: 600;
        transform: translate(-40px, -30px);
    }

    .home_subtitle_3{
        text-align: center;
        font-size: 50px;
        font-weight: 500;
        transform: translate(-20px, -150px);
    }

    .home_text_3{
        text-align: center;
        width: 480px;
        font-size: 35px;
        transform: translate(-30px, -210px);
    }

    .home_icon_3{
        position: relative;
        width: 100px;
        height: 100px;

        transform: translate(270px, 50px);
    }

    .home_container_4{              /*login - DESKTOP*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -110px;

        background-image: url(/img/formen/form-pink-4.png);
        background-size: 90%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 600px;
        min-width: 500px;
        max-height: 500px;

        transform: translate(-80px);
    }

    .home_title_4{
        text-align: center;
        font-size: 70px;
        font-weight: 600;
        transform: translate(50px, -100px);
    }

    .home_text_4{
        text-align: center;
        font-size: 35px;
        max-width: 400px;
        transform: translate(150px, -180px);
    }

    .home_icon_4{
        position: relative;
        width: 100px;
        height: 100px;
        transform: translate(150px, 0px);
    }

    .home_container_5{              /*über quokka - DESKTOP*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: 0px;

        background-image: url(/img/formen/form-blau-5.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 500px;
        min-width: 500px;
        max-height: 500px;

        transform: translate(150px);
    }

    .home_title_5{
        text-align: center;
        font-size: 70px;
        font-weight: 600;
        transform: translate(-80px, -40px);
    }

    .home_subtitle_5{
        text-align: center;
        font-size: 50px;
        font-weight: 500;
        transform: translate(-20px, -150px);
    }

    .home_text_5{
        text-align: center;
        width: 400px;
        font-size: 35px;
        transform: translate(20px, -200px);
    }

    .home_icon_5{
        position: relative;
        width: 100px;
        height: 100px;

        transform: translate(300px, 50px);
    }

}

/*für mobile*/

@media (max-width: 1024px){

    .welcome_container{             /*willkommen bei quokka - MOBILE*/
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 100px auto;

        position: relative;
        height: 150px;
        width: 200px;
    }

    .home_form{
        position: absolute;
        width: 100%;
        object-fit: cover;
    }

    .home_welcome{
        position: relative;
        text-align: center;
        font-size: 50px;
        font-weight: 800;

    }

    .home_container_0{              /*work-life-balance - MOBILE*/
        display: flex;
        justify-content: center;
        margin: auto;
        margin-bottom: 50px;

        position: relative;
        max-width: 1500px;
        height: 250px;
    }

    .home_form_0{
        position: relative;
        width: 250px;
        height: 30%;
        opacity: 80%;

    }

    .home_title_0{
        position: absolute;
        text-align: center;
        font-size: 40px;
        font-weight: 600;
        margin-top: 15px;
    }

    .home_text_0{
        position: absolute;
        text-align: center;
        margin-top: 100px;
        width: 330px;

        font-size: 24px;
    }

    .home_container_1{              /*angebote - MOBILE*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -150px;

        background-image: url(/img/formen/form-pink-3.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 330px;
        min-width: 330px;
        max-height: 500px;

    }

    .home_title_1{
        text-align: center;
        font-size: 50px;
        font-weight: 600;
        transform: translate(-40px, -80px);
    }

    .home_subtitle_1{
        text-align: center;
        font-size: 35px;
        font-weight: 500;
        transform: translate(30px, -160px);
    }

    .home_text_1{
        text-align: center;
        width: 300px;
        font-size: 24px;
        transform: translate(0px, -220px);
    }

    .home_icon_1{
        position: relative;
        width: 75px;
        height: 75px;

        transform: translate(220px, -5px);
    }

    .home_container_2{              /*community - MOBILE*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -200px;

        background-image: url(/img/formen/form-blau-4.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 330px;
        min-width: 330px;
        max-height: 500px;
    }

    .home_title_2{
        text-align: center;
        font-size: 50px;
        font-weight: 600;
        transform: translate(30px, -110px);
    }

    .home_subtitle_2{
        text-align: center;
        font-size: 35px;
        font-weight: 500;
        transform: translate(-30px, -190px);
    }

    .home_text_2{
        text-align: center;
        width: 300px;
        font-size: 24px;
        transform: translate(30px, -250px);
    }

    .home_icon_2{
        position: relative;
        width: 75px;
        height: 75px;

        transform: translate(0px, 0px);
    }

    .home_container_3{              /*anbieter - MOBILE*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -170px;

        background-image: url(/img/formen/form-gelb-2.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 330px;
        min-width: 330px;
        max-height: 500px;
    }

    .home_title_3{
        text-align: center;
        font-size: 50px;
        font-weight: 600;
        transform: translate(-10px, -80px);
    }

    .home_subtitle_3{
        text-align: center;
        font-size: 35px;
        font-weight: 500;
        transform: translate(0px, -170px);
    }

    .home_text_3{
        text-align: center;
        width: 300px;
        font-size: 24px;
        transform: translate(30px, -220px);
    }

    .home_icon_3{
        position: relative;
        width: 75px;
        height: 75px;

        transform: translate(190px, -25px);
    }

    .home_container_4{              /*login - MOBILE*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -130px;

        background-image: url(/img/formen/form-pink-4.png);
        background-size: 90%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 330px;
        min-width: 330px;
        max-height: 500px;
    }

    .home_title_4{
        text-align: center;
        font-size: 50px;
        font-weight: 600;
        transform: translate(0px, -120px);
    }

    .home_text_4{
        text-align: center;
        width: 300px;
        font-size: 24px;
        transform: translate(0px, -180px);
    }

    .home_icon_4{
        position: relative;
        width: 75px;
        height: 75px;

        transform: translate(0px, -30px);
    }

    .home_container_5{              /*über quokka - MOBILE*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: -230px;

        background-image: url(/img/formen/form-blau-5.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 330px;
        min-width: 330px;
        max-height: 500px;
    }

    .home_title_5{
        text-align: center;
        font-size: 50px;
        font-weight: 600;
        transform: translate(-30px, -85px);
    }

    .home_subtitle_5{
        text-align: center;
        font-size: 35px;
        font-weight: 500;
        transform: translate(0px, -170px);
    }

    .home_text_5{
        text-align: center;
        width: 300px;
        font-size: 24px;
        transform: translate(0px, -220px);
    }

    .home_icon_5{
        position: relative;
        width: 75px;
        height: 75px;

        transform: translate(200px, -40px);
    }

    .home_resize{           /*ganzes home für mobile bisschen kleiner*/
        transform: scale(0.8); 
        transform: translate(0px, -50px);
    }

}

@media (max-width: 400px) {
    .home_resize{
        transform: scale(0.9);   
        margin-top: -150px;
    }
}

/*anbieter werden page*/

@media(min-width: 1024px) {          /*anbieter DESKTOP*/

    .anbieter_container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        margin-top: 20px;
        margin-bottom: 50px;
        position: relative;
        width: 100%;
        min-height: 650px;
        max-width: 1000px;
        max-height: 1000px;

        background-image: url(/img/formen/form-gelb-5.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 800px;
        overflow: hidden;

    }

    .anbieter_title{

        font-size: 60px;
        font-weight: 600;

        margin-top: 30px;
    }

    .anbieter_text{

        font-size: 25px;
        text-align: center;

        max-width: 600px;
        min-width: 300px;

        margin-top: 30px;
    }

    .anbieter_button{

        max-width: 300px;
        width: 60%;

        font-size: 30px;
        font-weight: 600;
        background-color: var(--darkred);
        color: white !important; 
        border-radius: 10px;

        margin-top: -5px;
    }

    .anb_reason_container_1{              
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;

        background-image: url(/img/formen/form-blau-3.png);
        background-size: 100%;
        background-repeat: no-repeat;

        position: relative;
        max-width: 600px;
        min-width: 500px;
        height: 350px;
    }

    .anb_reason_container_2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;

        background-image: url(/img/formen/form-pink-4.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;

        position: relative;
        max-width: 700px;
        min-width: 500px;
        max-height: 500px;
    }

    .anb_reason_container_3{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
        margin-bottom: 30px;

        background-image: url(/img/formen/form-gelb-3.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;

        position: relative;
        max-width: 700px;
        min-width: 500px;
        max-height: 500px;
    }

    .anb_reason_title{
        text-align: center;
        font-size: 50px;
        font-weight: 600;
    }

    .anb_reason_text{
        text-align: center;
        font-size: 25px;
        font-weight: 300;
        max-width: 500px;

        margin: auto;
        margin-bottom: 30px;

        transform: translate(0px, -30px);
    }
}

@media(max-width: 1024px) {          /*anbieter MOBILE*/

    .anbieter_container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        margin-top: 20px;
        margin-bottom: 50px;
        position: relative;
        width: 100%;
        min-height: 900px;
        max-width: 1500px;
        max-height: 1500px;

        background-image: url(/img/formen/form-gelb-5.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1100px;
        overflow: hidden;

    }

    .anbieter_title{

        font-size: 45px;
        font-weight: 600;

        max-width: 370px;

        margin-top: 30px;
        text-align: center;
    }

    .anbieter_text{

        font-size: 25px;
        text-align: center;

        max-width: 450px;
        min-width: 300px;

        margin: 30px 20px 0px 20px;
    }

    .anbieter_button{

        width: 300px;

        font-size: 30px;
        font-weight: 600;
        background-color: var(--darkred);
        color: white !important; 
        border-radius: 10px;

        margin-top: -5px;
    }

    .anb_reason_container_1{              
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        position: relative;
        width: 100%;
        min-height: 530px;

        background-image: url(/img/formen/form-blau-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 950px;
        overflow: hidden;
    }

    .anb_reason_container_2{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        position: relative;
        width: 100%;
        min-height: 410px;

        background-image: url(/img/formen/form-pink-4.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 800px;
        overflow: hidden;
    }

    .anb_reason_container_3{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: auto;
        position: relative;
        width: 100%;
        min-height: 400px;

        background-image: url(/img/formen/form-gelb-3.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 800px;
        overflow: hidden;
    }

    .anb_reason_title{
        text-align: center;
        font-size: 50px;
        font-weight: 600;

        max-width: 300px;
    }

    .anb_reason_text{
        text-align: center;
        font-size: 25px;
        font-weight: 300;
        max-width: 300px;

        margin: auto;
        margin-bottom: 30px;

        transform: translate(0px, -30px);
    }
}

.line_grey{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 10px;     margin-bottom: 20px;

    width: 90px;
    height: 8px;
    background-color: var(--grey_mid);
    border-radius: 10px;
}


/*leere seite für alles was nicht wirklich existiert*/
.empty_page{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    margin-top: 20px;
    max-width: 700px;
    min-height: 500px;
    text-align: center;
    padding: 40px;

    background-image: url(/img/formen/form-gelb-5.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 700px;
    overflow: hidden;
}

.empty_text{
    font-size: 28px;
    max-width: 500px;
}

.empty_title{
    font-size: 60px;
}

.empty_button{
    padding: 15px;
}