/********   GENERAL     **********/

:root {
    --header-height: 5rem;
    --footer-height: 5rem;
    --fs-xl: clamp(2.5rem, 4vw, 5rem);
    --fs-l: clamp(1.75rem, 3vw, 3rem);
    --fs-m: clamp(1.5rem, 2.5vw, 2.75rem);
    --fs-s: clamp(0.75rem, 1vw, 2rem);
    --filter-shadow: drop-shadow(0rem clamp(0.3rem, 0.5vw, 1.5rem) clamp(0.1rem, 0.5vw, 0.5rem) rgba(0, 0, 0, 0.3));
    --filter-shadow-reverse: drop-shadow(0rem calc(clamp(0.3rem, 0.5vw, 1.5rem) * -1) clamp(0.1rem, 0.5vw, 0.5rem) rgba(0, 0, 0, 0.3));
    --text-shadow: 0 clamp(0.3rem, 0.5vw, 1.5rem) clamp(0.1rem, 1vw, 2rem) rgba(0, 0, 0, 0.3);
    --border-radius: clamp(5px, 0.5vw, 60px);

    --color-bright: #fff;
    --color-bright2: #f0f0f0;
    --color-dark: #101010;
    --color-dark2: #181818;
    --color-grey: #494949;
    --color-accent: #007878;
    --color-background-bright: rgba(232, 232, 232, 0.5);
    --color-background-dark: rgba(50, 50, 50, 0.8);

    color-scheme: light dark;
}


html, body {scroll-behavior: smooth; margin: 0; padding: 0; height: 100%; text-align: center; hyphens: auto;}
*{box-sizing: border-box;}

.section {height: auto; min-height: 100%; background: var(--color-bright)}
.section p a:hover {opacity: 0.7; transition: 300ms;}
.content {width: 80%; margin: 0 auto 0 auto; padding: clamp(2rem, 10vh, 60rem) 0 clamp(2rem, 10vh, 60rem) 0; float: inherit;}
.relative {position: relative;}

li {list-style-type: none;}
h1, h2, h3, h4, header a {font-family: 'Roboto', sans-serif; font-weight: 500; color: var(--color-grey); text-transform: uppercase;}
p, .section a, span {font-family: 'Roboto Slab', serif; color: var(--color-grey);}
.section a, .cookie-banner a {color: var(--color-accent);}
h1 {font-size: var(--fs-xl); line-height: 150%; letter-spacing: 1px; word-spacing: 1px;}
h2, .wrap {font-size: var(--fs-l); line-height: 150%; letter-spacing: 1px; word-spacing: 1px; color: var(--color-accent);}
h3 {font-size: var(--fs-m); line-height: 150%; letter-spacing: 1px; word-spacing: 1px; padding: 0; margin: 0;}
h4 {font-size: var(--fs-s); line-height: 150%; letter-spacing: 1px; word-spacing: 1px; padding: clamp(1rem, 2vh, 6rem) 0 clamp(0.5rem, 0.5vw, 2rem) 0; text-align: left;}
p, span {font-size: var(--fs-s); line-height: 150%; letter-spacing: 1px; word-spacing: 1px; margin: 0; text-align: justify;}
a {text-decoration: none; font-size: var(--fs-s);}
hr {width: clamp(3rem, 3vw, 20rem); height: clamp(0.1rem, 0.2vh, 0.7rem); background: #494949; border: 0; border-radius: 100vmax; margin: clamp(0.3rem, 1vh, 2rem) auto clamp(2rem, 4vh, 15rem) auto;}

#about, #logos, li, img, .Menü, span {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; transform: all 300ms; -webkit-transform: all 300ms; -moz-transform: all 300ms; -o-transform: all 300ms;}
.Menü {display: none;}

.text-align-left {text-align: left;}






/******  OVERLAY    *********************************************/

/* #overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0, 0.9);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    -moz-backdrop-filter: blur(1rem);
    -o-backdrop-filter: blur(1rem);
    z-index: 2;
}

#overlay-text {
    font-family: 'Roboto Slab', serif;
    font-size: var(--fs-s);
    text-align: justify;
    min-width: 30%;
    position: absolute;
    top: 40%;
    left: 50%;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

#overlay-button {
    font-family: 'Roboto';
    font-size: var(--fs-s);
    background-color: white;
    border: solid #fff;
    border-radius: 100vmax;
    color: #494949;
    min-width: 10%;
    min-height: clamp(1rem, 6vw, 4rem);
    margin-top: 50vh;
}

#overlay-button:hover {
    background-color: #494949;
    color: white;
    transition: 300ms;
    cursor: pointer;
}  */





/*******  HEADER    *********************************************/

header {
    position: fixed;
    min-width: 100%;
    height: var(--header-height);
    background: var(--color-bright);
    box-shadow: 0rem clamp(0.1rem, 0.3vh, 2rem) clamp(0.1rem, 0.3vh, 2rem) rgba(0, 0, 0, 0.3);
    z-index: 1;
}

#header-container {
    /* border: solid red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    height: var(--header-height);
    margin: 0 auto 0 auto;
}

#header-link {
    /* border: solid blue; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 70%;
    height: var(--header-height);
}

.header-logo {
    /* border: dotted red; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding: 0 0 0 1.5rem;
}

.header-logo img {
    /* border: solid yellow; */
    width: 100%;
    max-height: clamp(1.8rem, 1.7vw, 20rem);
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    filter: var(--filter-shadow);
}

.header-logo img:hover {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    filter: none;
    cursor: pointer;
}

/* .darkmode-toggle {
    background: none;
    border: solid orange;
    border-radius: 100vmax;
}

.darkmode-toggle img {
    text-align: center;
    width: auto;
    height: clamp(1.5rem, 1.7vw, 20rem);
} */

.progress-container {
    height: 0.15em;
    width: 100%;
}

#myBar {
	height: inherit;
    width: 0%;
	background: var(--color-accent);
}




/**********   MOBILE NAV   ***********************/

.main-nav {
    /* border: solid coral; */
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    flex-direction: column;
    padding: min(30vh, 10rem) 4em;
    margin: 0;
    background: rgba(232, 232, 232, 0.5);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    -moz-backdrop-filter: blur(1rem);
    -o-backdrop-filter: blur(1rem);

    transform: translateX(100%);
    transition: transform 350ms ease-out;
}

.main-nav[data-visible="true"] {
    transform: translateX(0%);
    box-shadow: clamp(-0.1rem, -1.5vw, -2rem) 0rem clamp(0.1rem, 1.5vw, 2rem)  rgba(0, 0, 0, 0.3);
}

.main-nav li a {
    margin: 2em 0;
    display: inline-block;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    text-align: center;
    text-shadow: var(--text-shadow);
}

.main-nav li a:hover, .main-nav li a.active {
    transition: 300ms;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    text-shadow: none;
}

.mobile-nav-toggle {
    display: block;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 9999;
    padding: 0;
    width: 4rem;
    height: 4rem;
    scale: 0.6;
    border: none;
    background: none;
    stroke: var(--color-grey);
    fill: none;
}

.hamburger {
    width: 4rem;
    height: 4rem;
}

.line-cross {
    stroke-width: 0.4rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: var(--filter-shadow);
}

.line-middle {
    stroke-width: 0.4rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: var(--filter-shadow);
}

.mobile-nav-toggle .line-cross {
    transition: 1s;
    stroke-dasharray: 40 80;
}

.mobile-nav-toggle[aria-expanded="true"] .line-cross {
    stroke-dasharray: 80 40;
    stroke-dashoffset: 80;
    stroke: var(--color-accent);
}

.mobile-nav-toggle .line-middle {
    transition: 1s;
    stroke-dasharray: 40 80;
}

.mobile-nav-toggle[aria-expanded="true"] .line-middle {
    stroke-dasharray: -30 0;
    stroke-dashoffset: -30;
    stroke: var(--color-accent);
}




/*  VERTICAL NAV     *********************************************/

.vertical-nav {
    --nav-gap: clamp(1rem, 1vw, 2rem);
    margin: 0 var(--nav-gap) 0 var(--nav-gap);
    padding: var(--nav-gap) 0 var(--nav-gap) 0;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.nav-item {
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: var(--nav-gap);
}

.nav-link:hover ~ .nav-label {
    opacity: 0.5;
}

.nav-link {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    height: var(--nav-gap);
    transition: transform 0.3s;
    width: var(--nav-gap);
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
}

.nav-link-selected {
    background: var(--color-grey);
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
}





/*  HOME     *********************************************/

#home-container {
    padding: 25vh 0 5% 0;
}

#home {
    background: var(--color-bright2);
}

#home h1 {
    margin: 0 auto 0 auto;
}

#home h2 {
    margin: 0 auto 0 auto;
}

.sk-geovisual_Logo {
    margin-top: clamp(2rem, 5vh, 20rem);
    max-height: clamp(3rem, 30vw, 20rem);
}




@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(0.9);}
    100% {transform: scale(1);}
}

.pfeil {
    margin-top: clamp(2rem, 3vh, 20rem);
    max-width: clamp(3rem, 6vw, 6rem);
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    filter: var(--filter-shadow);

    animation-name: pulse;
    animation: pulse 2s infinite;
}

.pfeil:hover {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    filter: none;
}




/*  ABOUT     *********************************************/

#about h4 {
    margin: 0;
    text-align: left;
}

#about p {
    margin: 0;
    padding: 0;
    text-align: justify;
}

#about-container {
    /* border: solid red; */
    display: block;
}

#portrait {
    max-width: auto;
    max-height: clamp(3rem, 30vw, 20rem);
    margin: clamp(1rem, 3vw, 20rem) 0 clamp(1rem, 3vw, 20rem) 0;
    border-radius: 100vmax;
}

.about-container-item2-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.about-container-item2-logos:last-child {
    padding: 0;
}

.content-logos {
    padding: 0 clamp(0.3rem, 1vw, 3rem) 0 0;
}

.content-logos img {
    border: solid clamp(0.1rem, 0.2vw, 0.2rem) var(--color-grey);
    border-radius: var(--border-radius);
    padding: clamp(0.2rem, 0.1vw, 0.3rem);
    width: clamp(2rem, 2vw, 20rem);
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    filter: var(--filter-shadow);
}

.content-logos img:hover {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    filter: none;
    cursor: pointer;
}




/*  PROJECTS     *********************************************/


#projects {
    background-color: var(--color-bright2);
    margin: 0 auto 0 auto;
}

#projects h4 {
    margin: 0;
    text-align: left;
}

#favorite h4 {
    padding: 0 0 clamp(0.5rem, 0.5vw, 2rem) 0;
    margin: 0;
}

#favorite {
    /* border: solid red; */
    padding: 0 0 0 0;
    margin: 0 auto 0 auto;
}

#favorite video {
    border-radius: var(--border-radius);
    width: 100%;
}

#gallery {
    display: grid;
    grid-template-columns: auto auto;
    gap: clamp(0.5rem, 0.75vw, 2rem);
    margin: 0 auto 0 auto;
}

#gallery img {
    width: 100%;
    aspect-ratio: 2/3;
    /* height: clamp(15rem, 20vh, 100rem); */
    border-radius: var(--border-radius);
    object-fit: cover;
    filter: grayscale(90%);
    -webkit-filter: grayscale(90%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

#gallery img:hover {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -o-transform: scale(0.95);
    box-shadow: none;
    cursor: pointer;
    filter: none;
}


/* MODAL     ************************************************/

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: var(--color-background-bright);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    -moz-backdrop-filter: blur(1rem);
    -o-backdrop-filter: blur(1rem);
}

/* Modal Content */
.modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    margin: auto;
    padding: 0;
    width: 80%;
    height: 100%;
}

.modal-img {
    max-width: 100%;
    max-height: 70vh;
}

.modal-caption {
    width: 100%;
    text-align: center;
    padding: 0.5em 0 0 0;
    /* border: blue solid 1px; */
}

#modal-logos {
    width: 100%;
    padding: 0;
    /* border: red solid 1px; */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

#modal-logos img {
    border: none;
    scale: 0.7;
    /* border: green solid 1px; */
}

.modal-logos-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1em 0;
    /* border: green solid 1px; */
}

.modal-logos-row:last-child {
    margin: 0;
}

.text-before-logos {
    margin-right: 0.7em;
    /* border: red solid 1px; */
}

/* The Close Button */
button.close {
    max-width: clamp(2rem, 20vw, 3.75rem);
    max-height: clamp(2rem, 20vw, 3.75rem);
    background: transparent;
}

.close {
    /* background: red; */
    position: absolute;
    border: none;
    top: 1rem;
    right: 1rem;
    z-index: 999;
    stroke: var(--color-accent);
    scale: 0.6;
}

.close:hover,
.close:focus {
    color: var(--color-grey);
    cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: clamp(3rem, 8vw, 8rem);
    transition: 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    filter: var(--filter-shadow);
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.25);
}

.prev {
    left: 0.6rem;
    padding: 1em 1em 0.7em 1em;
    transform: translate(0%, -50%) rotate(90deg) scale(0.6);
    -webkit-transform: translate(0%, -50%) rotate(90deg) scale(0.6);
    -moz-transform: translate(0%, -50%) rotate(90deg) scale(0.6);
    -o-transform: translate(0%, -50%) rotate(90deg) scale(0.6);
}

.prev:hover {
    filter: none;
    transform: translate(0%, -50%) rotate(90deg) scale(0.55);
    -webkit-transform: translate(0%, -50%) rotate(90deg) scale(0.55);
    -moz-transform: translate(0%, -50%) rotate(90deg) scale(0.55);
    -o-transform: translate(0%, -50%) rotate(90deg) scale(0.55);
}

/* Position the "next button" to the right */
.next {
    right: 0.6rem;
    padding: 1em 1em 0.7em 1em;
    transform:  translate(0%, -50%) rotate(-90deg) scale(0.6);
    -webkit-transform: translate(0%, -50%) rotate(-90deg) scale(0.6);
    -moz-transform: translate(0%, -50%) rotate(-90deg) scale(0.6);
    -o-transform: translate(0%, -50%) rotate(-90deg) scale(0.6);
}

.next:hover {
    filter: none;
    transform:  translate(0%, -50%) rotate(-90deg) scale(0.55);
    -webkit-transform:  translate(0%, -50%) rotate(-90deg) scale(0.55);
    -moz-transform:  translate(0%, -50%) rotate(-90deg) scale(0.55);
    -o-transform:  translate(0%, -50%) rotate(-90deg) scale(0.55);
}

/* Scrollen deaktivieren, wenn das Modal offen ist */
body.modal-open {
    overflow: hidden;
}




/**************  CONTACT     *********************************************/

#contact {
    min-height: 90%;
}

#contact h4 {
    margin-bottom: 0.2rem;
    padding-bottom: 0;
}

#contact p {
    margin-top: clamp(1rem, 2vh, 6rem);
}

#contact-logos {
    /* border: solid red; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#contact-logos .content-logos {
    padding: 0 clamp(0.3rem, 5vw, 10rem) clamp(1rem, 2vh, 5rem) 0;
}

#contact-logos .content-logos:last-child {
    padding: 0 0 clamp(1rem, 2vh, 5rem) 0;
}

#contact-logos .content-logos img {
    border: none;
    border-radius: none;
}

.contact-mail {
    /* border: solid #007878; */
    display: flex;
}

.contact-mail img {
    width: clamp(1.5rem, 2vw, 20rem);
    margin-right: 0.8rem;
}

.contact-mail img:hover {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
}

#contact-container .sk-geovisual_Logo {
    margin-top: clamp(2rem, 3vh, 10rem);
}

#contact-container .pfeil {
    margin-top: clamp(2rem, 12vh, 50rem);
    transform: rotate(180deg) scale(1);
    -webkit-transform: rotate(180deg) scale(1);
    -moz-transform: rotate(180deg) scale(1);
    -o-transform: rotate(180deg) scale(1);
    filter: var(--filter-shadow-reverse);

    animation: none;
}

#contact-container .pfeil:hover {
    transform: rotate(180deg) scale(0.9);
    -webkit-transform: rotate(180deg) scale(0.9);
    -moz-transform: rotate(180deg) scale(0.9);
    -o-transform: rotate(180deg) scale(0.9);
    filter: none;
}



/* COOKIES      ********************************************/
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    background: var(--color-background-bright);
    color: #fff;
    padding: 1em 2em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 99999;
    font-size: var(--fs-s);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-banner button {
    margin-left: 1em;
    padding: 0.5em 1.2em;
    border: none;
    border-radius: 2em;
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    font-size: var(--fs-s);
}

.cookie-banner button#cookie-decline {
    background: var(--color-background-dark);
}



/*  FOOTER     *********************************************/

footer {
    height: var(--footer-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-grey);
}

footer p {
    font-size: var(--fs-s);
    color: var(--color-bright2);
    text-transform: uppercase;
}

footer a {
    font-size: var(--fs-s);
    font-family: 'Roboto Slab', serif;
    color: var(--color-bright2);
}

footer a:hover {
    opacity: 0.7;
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
}






/******  PRIVACY     ********************************************/

.privacy h3 {
    margin: 3rem 0 0 0;
}

.privacy h4 {
    margin: 2rem 0 0 0;
    padding: 0;
}

.privacy p {
    margin: 0.5rem 0 0 0;
}

.privacy a {
    color: var(--color-accent);
}

.privacy a:hover {
    opacity: 0.7;
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
}






/******  LEGAL      ********************************************/

#legal h3 {
    margin: 3rem 0 1rem 0;
}

#legal h4 {
    margin: 2rem 0 0 0;
    padding: 0;
}

#legal p {
    margin: 0.5rem 0 0 0;
}

#legal a {
    color: var(--color-accent);
}

#legal a:hover {
    opacity: 0.7;
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
}

















/******  MEDIA QUERIES     ********************************************/

@media (min-width: 550px) {

    :root {
        --header-height: clamp(5rem, 5vw, 10rem);
        --footer-height: clamp(5rem, 5vw, 10rem);
    }

    .content {
        width: 70%;
    }

    .mobile-nav-toggle {
        display: none;
    }

    #header-link {
        max-width: 40%;
    }

    .header-logo {
        padding: 0 0 0 clamp(1rem, 4vw, 20rem);
    }

    .header-logo img:first-child {
        padding: 0;
    }
    
    .main-nav {
        /* border: dotted #007878; */
        display: flex;
        flex-direction: row;
        justify-content: right;
        align-items: center;
        max-width: 50%;
        height: var(--header-height);
        margin: 0 0 0 auto;
        padding: 0;
        background-color: var(--color-bright);
        backdrop-filter: none;
        transform: translateX(0%);
    }

    .main-nav li {
        margin: 0 clamp(1rem, 4vw, 20rem) 0 0;
    }

    .main-nav li a {
        font-size: var(--fs-s);
    }

    #home-container {
        padding: 30vh 0 5% 0;
    }

    #gallery {
        grid-template-columns: auto auto auto;
    }

    .modal-content {
        width: 70%;
    }

}




@media (min-width: 1000px) {

    .content {
        width: 50%;
    }
    
    #about-container h4:first-child {
        Padding-top: 0;
    }
    
    #about-container-item2 {
        /* border: solid green; */
        margin: 0 0 0 0;
    }
    
    #gallery {
        grid-template-columns: auto auto auto auto;
    }

    #projects-container h4 {
        padding: clamp(2rem, 12vh, 40rem) 0 clamp(1rem, 2vh, 10rem) 0;
    }

    #favorite h4 {
        padding: clamp(2rem, 4vh, 20rem) 0 clamp(1rem, 2vh, 10rem) 0;
    }

    .modal-content {
        width: 50%;
    }

}






/********   DARKMODE    *****************************************************************/

@media screen and (prefers-color-scheme: dark) {
    :root {
        --filter-shadow: drop-shadow(0rem clamp(0.3rem, 0.5vw, 1.5rem) clamp(0.1rem, 0.5vw, 0.5rem) rgba(255, 255, 255, 0.3));
        --filter-shadow-reverse: drop-shadow(0rem calc(clamp(0.3rem, 0.5vw, 1.5rem) * -1) clamp(0.1rem, 0.5vw, 0.5rem) rgba(255, 255, 255, 0.3));
        --text-shadow: 0 clamp(0.3rem, 0.5vw, 1.5rem) clamp(0.1rem, 1vw, 2rem) rgba(255, 255, 255, 0.3);
    }
    
    h1, h3, h4, p, span {
      color: var(--color-bright2);
    }

    h2 .wrap {
        color: var(--color-accent);
    }

    hr {
        background: var(--color-bright2);
    }

    #home, #projects, #privacy-policy, #general, #plugins-tools, #legal  {
        background: var(--color-dark);
    }

    header, #about, #contact, #hosting, #data-collection, footer {
        background: var(--color-dark2);
    }

    header {
        box-shadow: 0rem clamp(0.1rem, 0.3vh, 2rem) clamp(0.1rem, 0.3vh, 2rem) rgba(255, 255, 255, 0.2);
    }

    .header-logo .linkedIn, .header-logo .github, .header-logo .instagram, .header-logo .darkmode-toggle, .pfeil, .contact-mail img {
        filter: invert(100%) brightness(1.3) drop-shadow(0rem clamp(0.3rem, 0.5vw, 1.5rem) clamp(0.1rem, 0.5vw, 0.5rem) rgba(255, 255, 255, 0.3));
    }

    #contact .pfeil {
        filter: invert(100%) brightness(1.3) drop-shadow(0rem calc(clamp(0.3rem, 0.5vw, 1.5rem) * -1) clamp(0.1rem, 0.5vw, 0.5rem) rgba(255, 255, 255, 0.3));
    }

    .header-logo .linkedIn:hover, .header-logo .github:hover, .header-logo .instagram:hover, .pfeil:hover, #contact .pfeil:hover, .contact-mail img:hover {
        filter: invert(100%) brightness(1.3);
    }

    .content-logos img {
        filter: invert(100%) brightness(1.3) drop-shadow(0rem clamp(0.3rem, 0.5vw, 0.5rem) clamp(0.1rem, 0.5vw, 0.5rem) rgba(255, 255, 255, 0.3));;
    }

    .content-logos img:hover {
        filter: invert(100%) brightness(1.3);
    }

    .main-nav {
        background: none;
    }
    
    .main-nav[data-visible="true"] {
        background: var(--color-background-dark);
        box-shadow: clamp(-0.1rem, -1.5vw, -2rem) 0rem clamp(0.1rem, 1.5vw, 2rem)  rgba(255, 255, 255, 0.2);
    }

    .main-nav li a, .close:hover {
        color: var(--color-bright2);
    }

    .mobile-nav-toggle {
        stroke: var(--color-bright2);
    }

    .nav-link {
        background: rgba(255, 255, 255, 0.3);
    }

    .nav-link-selected {
        background: var(--color-bright2);
    }

    #gallery img {
        box-shadow: 0 5px 5px rgba(255, 255, 255, 0.3);
    }

    #gallery img:hover {
        box-shadow: none;
    }

    .modal {
        background: var(--color-background-dark);
    }

    footer {
        box-shadow: 0rem calc(clamp(0.1rem, 0.3vh, 2rem) * -1) clamp(0.1rem, 0.3vh, 2rem) rgba(255, 255, 255, 0.3);
    }

    .cookie-banner {
        background: var(--color-background-dark);
        box-shadow: 0 -2px 10px rgba(255, 255, 255, 0.484);
    }

    .cookie-banner button {
        background: var(--color-accent);
    }

    .cookie-banner button#cookie-decline {
        background: var(--color-background-bright);
    }

  }