/* ANCHOR Variablen
    _____________________________________________________________
*/
:root {
    --text-color:#333;
    --text-color-2:white;
    --text-color-3:rgb(115, 0, 140);
}


/* ANCHOR Allgemein 
    _____________________________________________________________
*/
.mainpage {
    font-size:24px;
    color:var(--text-color);
}

.mainpage:before {
    display:block;
    position:fixed;
    left:0;
    top:0;
    content:"";
    width:100vw;
    height:100vh;
    z-index:-1;
    background-image:url("../img/herzbaum.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    filter:blur(5px);
}

a {
    text-decoration:none;
}

.flex-space-between {
    display:flex;
    justify-content:space-evenly;
    align-items: top;
    gap:2rem;
    /* flex-wrap:wrap; */
}


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



/* ANCHOR Mainpage
    _____________________________________________________________
*/
.characteristics-box {
    padding:25px 25px;
    width:40%;
    background-color:rgba(255,255,255,.7);
    flex-grow:1;
}

.link-button {
    margin-top:25px;
    padding:10px 20px;
    background-color: grey;
    border-radius:10px;
    color:var(--text-color-2);
    cursor:pinter;
}

.link-button:hover {
    background-color:blueviolet;
}

.font-black {
    color:var(--text-color-3);
}

.underlined {
    border-bottom:1px solid black;
}

.mb-50 {
    margin-bottom:50px;
}

.start-bg-img {
    width:100%;
    height:auto;
    background-image: url("img/merle.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ANCHOR Schlaftipps
    _____________________________________________________________
*/
.schlaftipps {
    font-size:24px;
    color:var(--text-color-2);
    padding-left:25px;
}

.schlaftipps:before {
    display:block;
    position:fixed;
    left:0;
    top:0;
    content:"";
    width:100vw;
    height:100vh;
    z-index:-1;
    background-image:url("../img/mond.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    filter:blur(5px);    
}

li {
    margin-bottom:25px;
}

.st--good-night--img {
    border-radius:1rem;
    height:auto;
    max-height:30rem;
    max-width:50rem;
    width:100%;
}

.st-link-button {
    color:var(--text-color-2);
    padding:10px 25px;
    margin-top:25px;
}

.st-link-button:hover {
    background-color:blueviolet;
    border-radius:5px;
}

.st-link-button a {
    color:var(--text-color-2);
}

#st-schlaftipps-form input {
   font-size:1rem; 
   border-radius:5px;
   padding:5px 10px;

}

#st-schlaftipps-form button {
    border-radius:5px;
    background-color:rebeccapurple;
    padding:5px 10px;
    color:var(--text-color-2);
    font-size:24px;
    border:1px solid rebeccapurple;
}

#st-schlaftipps-form button:hover {
    cursor:pointer;
}

.ciao {
    padding-left:150px;
}

/* faq Seite */
#accordionFaqs .faq-div-info {
    background-color: rebeccapurple;
    border-color:rebeccapurple;
    box-shadow:none;
    color:white;
}

.faq-div-wrapper {
    padding:0 25px;
}

/* ANCHOR 600px - Mobile Version 
    _____________________________________________________________
*/

@media (max-width:600px) {
    .mainpage {
        font-size:16px;
        color:var(--text-color);
        /* padding-left:25px; */
    }

    .schlaftipps {
        font-size:8px;
        color:var(--text-color-2);
        padding-left:25px;
    }
    
    #ix-headline-1 {
        font-size:1.3rem;
    }

    .flex-space-between {
        flex-direction:column;
        gap:2rem;
    }

    .characteristics-box {
        width:90%;
    }

    #st-schlaftipps-form input {
        font-size:8px; 
        border-radius:5px;
        padding:5px 10px;
    }   

    #st-schlaftipps-form button {
        font-size:8px;
    }

    .ciao {
        padding-left:50px;
    }
} /* ENDE @media */



/* ANCHOR 900px - Mobile Version 
    _____________________________________________________________
*/
/* @media (max-width:900px) {

}  ENDE @media */