* { box-sizing: border-box; margin: 0; padding: 0;}

body {
    font-family: Arial, Helvetica, sans-serif;
    /* overflow: hidden; */
    /* background-image: url("nnnoise.svg"); */
    background-image: 
    url("nnnoise.svg"),
    url("nnnoise.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
}

@font-face {
    font-family: "headline";
    src:  url("PPNeueBit-Bold.woff2") format("woff2"),
          url("PPNeueBit-Bold.woff") format("woff");
}

::selection {
    background-color: var(--headline-color);
    color: var(--background-color); }

:root {
    --background-color: rgb(255, 255, 255);
    --background-color2: rgb(25, 132, 88);
    --text-color: black;
    --text-color2: rgb(233, 136, 191);
    --headline-color: rgb(43, 43, 43);
    --primary-color: #ff0000;
    --highlight-color:rgb(135, 179, 62); /* Hoher Kontrast für Barrierefreiheit */
    --stroke-color1: #61210f;
    --stroke-color2: #85cb33;
    --stroke-color3: #157a6e;
    --stroke-color4: #3772ff;
    --stroke-color5: #f4b393;
}s

#startseite 
{
    overflow: hidden;
}

a {
    color: var(--text-color);
}


.info {
    width: 60vw;
    font-size: 1.8em;
    padding-left: 60px;
    margin-top: 6vh;
}

.nav {
    padding-top: 2.5vh;
    padding-left: 60px;
    background-color: var(--background-color);
    /* padding-bottom: 5vh; */
    display: flex;
    flex-wrap: wrap;
    font-size: 2.7em;
    gap: 0px 10px  ;
    position: fixed;
    filter: invert(100%);
    mix-blend-mode: difference;
    z-index: 100;
}

.nav a {
    text-decoration: none;
}



#foresta {
    color: var(--stroke-color1);
}

#dayone-strich {
    background-color: var(--stroke-color1);
}

#ecosocial {
    color: var(--stroke-color2);
}

#ecosocial-strich {
    background-color: var(--stroke-color2);
}

#mailand {
    color: var(--stroke-color3);
}
#mailand-strich {
    background-color: var(--stroke-color3);
}

#terzo {
    color: var(--stroke-color4);
}
#terzo-strich {
    background-color: var(--stroke-color4);
}

#momente {
    color: var(--stroke-color5);
}
#momente-strich {
    background-color: var(--stroke-color5);
}


#homecolor {
    background-color: rgb(186, 186, 186);
}


.coverfoto {
    height: 50vh;
    background-color: red;
}

.coverfoto img {
    height: 100%;
    width: auto;
    object-fit: cover;
}



.home {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    align-content: start;
    padding-top: 3vh;
    /* background-color: red; */
}

.home2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    align-content: start;
    padding-top: 15vh;
    padding-bottom: 5vh;
    /* background-color: red; */
}

.home3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    align-content: start;
    padding-top: 5vh;
    /* background-color: red; */
}

.liste {
    padding-left: 60px;
    /* padding-top: 2.5vh; */
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    width: auto;
    flex-shrink: 0;
    padding-right: 60px;
    scrollbar-width: 0px;
}

#lie {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5vw;
    align-items: center;
}

.liste a {
    font-size: 2.7em;
}

.liste p {
    font-size: 1em;
    color: rgb(186, 186, 186);
}

/* Textbeiträge  */

.text-beitrag {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    padding-left: 60px;
    padding-right: 60px;
}

h1 {
    text-decoration: none;
    font-weight: normal;
    font-size: 2.7em;
}

h2 {
    text-decoration: none;
    font-weight: normal;
    font-size: 1.8em;
}

.titelbild {
    height: auto;
    max-width: 50vw;
}

.titelbild img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


#text-text{
    font-size: 1em;
    line-height: 120%;
    width: 50vw;
}

.titelbild p {
    font-size: 0.8em;
    line-height: 120%;
    width: 50vw;
}




/* CSS für die Dekoration am Rand */

.ringe {
    position: fixed;
    width: 59.136px;
    height: 665.28px;
    top: 13.3056px;
    display: flex;
    flex-wrap: wrap;
    gap: 13.3056px;
}

.black {
    color: var(--text-color);
    width: 11.8272px;
    height: 23.2848px;
    background-color: var(--text-color);
    margin-left: 11.8272px;
}

.silver {
    display: flex;
    flex-wrap: wrap;
    gap: 9.9792px;
}

.strich {
    width: 66.23232px;
    height: 2.66112px;
    margin-left: -59.136px;
    margin-top: 2.66112px;
    /* box-shadow: 2px 3px 3px 3px rgb(58, 58, 58, 0.5); */
}






@media only screen and (max-width: 600px) {
    .nav {
        font-size: 1.5em;
    }
    .info {
        font-size: 1.2em;
    }

    .liste a {
        font-size: 1.5em !important;
    }

    .liste p {
        font-size: 0.8em;
    }

    .nav {
        padding-top: 2.5vh;
    }

    .info {
        width: 80vw;
    }

    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.2em;
    }

    .titelbild {
        max-width: none;
    }

    #text-text {
        font-size: 1.2em;
        line-height: 120%;
        width: auto;
    }

    .titelbild p {
        font-size: 0.8em;
    }

    #lie2 span {
        font-size: 1.5em !important;
    }
}

#lie2{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 0.5vw;
    align-items: center;
}

#lie2 span {
    font-size: 2.7em;
    color: rgb(181, 181, 181);
}