html, body {
    margin: 0;
    padding: 0;
}

body{ 
	background-color: #eaf3f4;
    background-image: url(images/wasserzeichen2.webp);
    background-size: 50px 50px;
}

header {
    position: sticky;
    margin: 0;
    top: 0;
    background-color: #a0e5f2;
    padding: .5rem;
    background: linear-gradient(#a0e5f2, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    /* pointer-events: none; */

    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);

    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
        height: 5rem;
    }
}

ul {
    gap: 1rem;
    
    

    a {
        text-decoration: none;
        line-height: 2rem;
    }

    span {
        font-weight: bold;
        margin: 50rem .5rem;
        padding: .1rem 1rem;;
        border-radius: 15px;
        border: solid 2px black;
        
    }
}

h1{
    mix-blend-mode: normal;
    text-align: center;
    color: black;
}

h2{
    mix-blend-mode: normal;
    text-align: center;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #00a7d2;
    
}

p{
    max-width: 900px;
    margin: 10px auto;
    font-family: Arial, Helvetica, sans-serif;
}


ul{
    list-style-type: none;
    display: block;
    margin: Auto auto;
    max-width: 600px; /* optional, begrenzt die Breite */
    text-align: left; /* oder center, je nach Wunsch */
}


li{
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 0%;
    padding: 5px 0px;
    max-width: 980px;

}


#rand{
    display:grid;
    grid-gap: .5rem;
    margin: 1% 1%;
}

#huepfburgen {
    display: grid;
    grid-gap: 1rem;
    max-width: 900px;
    margin: auto;

    div {
        display: flex;
        gap: 2rem;
        align-items: start;
        justify-content: start;
        flex-direction: row;
        p {
            margin-left: 0;
            max-width: 50%;
        }

        img {
            margin: auto 8px;
            max-width: 200px;
            border-radius: 15%;
        }
    }
}

#slush {
    display: grid;
    grid-gap: 1rem;
    max-width: 900px;
    margin: auto;

    div {
        display: flex;
        gap: 2rem;
        align-items: start;
        justify-content: start;
        flex-direction: row;
        p {
            margin-left: 0;
            max-width: 50%;
        }

        img {
            margin: auto 8px;
            max-width: 200px;
            border-radius: 15%;
        }
    }
}

#willkommen{
    max-width: 900px;
    margin: 10px auto;
    font-family: Arial, Helvetica, sans-serif;
    scroll-margin: 200px;
    
}


#field2{
    clear: left; 
    max-width: 900px;
    margin: 10px auto;
    font-family: Arial, Helvetica, sans-serif;
}

#kontakt{
    max-width: 900px;
    margin: auto auto;
    font-family: Arial, Helvetica, sans-serif;
h2 {
    text-align: center;
}

img {
            display: block;
            margin: auto auto;
            max-width: 200px;
            border-radius: 50%;
           
        }

}


#impressum{
    max-width: 900px;
    margin: 10px auto;
    font-family: Arial, Helvetica, sans-serif;
}

/***BILDER***/
#bunte{
    float: left;
    border-bottom: 15%;
    img {
        border-radius: 15px;
        box-shadow: -2px 3px 8px 1px rgba(0,0,0,0.51);
        -webkit-box-shadow: -2px 3px 8px 1px rgba(0,0,0,0.51);
        -moz-box-shadow: -2px 3px 8px 1px rgba(0,0,0,0.51);
    }
}

#weiße{
    clear: left; margin-top: 10px;
    float: left;
}

footer {
    width: 100vw;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 25% 50% 25%;
    justify-content: center;
    align-items: center;
    background: linear-gradient(transparent, #a0e5f2);
    backdrop-filter: blur(5px);

    div {
        display: flex;
        justify-content: center;
        align-items: center;

        a {
            padding: 1rem;
        }
    }

    img {
        height: 5rem;
    }
}

@media (orientation: portrait) {
    #huepfburgen div {
        flex-direction: row;
    }
}