@font-face {
    font-family: 'NotoSans';
    src: url('NotoSans-Regular.ttf') format('truetype');
}
html {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
body {
    margin: 0;
    padding: 0;
    padding-bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: #222;
    color: #ddd;
    font-family: 'NotoSans';
    display: flex;
    flex-direction: column;
    text-align: justify;
}
p { margin-bottom: 0.3rem 0.3rem 1rem 0.3rem; }
b {
    font-weight: bold;
    color: #aaa;
}
a {
    text-decoration: underline overline #aaf;
    color: #ddd;
}
ul { padding-left: 1rem; }
hr {    /* blaue Linie mit Farbverlauf */
    margin: 0;
    height: 1px;
    border: 0;
    background: linear-gradient(
        90deg,
        rgb(0 0 255 /0) 0%,
        rgb(0 0 255 /0.1) 2%,
        rgb(0 0 255 /0.2) 4%,
        rgb(0 0 255 /0.3) 6%,
        rgb(0 0 255 /0.4) 8%,
        rgb(0 0 255 /0.5) 10%,
        rgb(0 0 255 /0.6) 12%,
        rgb(0 0 255 /0.7) 14%,
        rgb(0 0 255 /0.8) 16%,
        rgb(0 0 255 /0.9) 18%,
        rgb(0 0 255 /1) 20%,
        rgb(0 0 255 /1) 80%,
        rgb(0 0 255 /0.9) 82%,
        rgb(0 0 255 /0.8) 84%,
        rgb(0 0 255 /0.7) 86%,
        rgb(0 0 255 /0.6) 88%,
        rgb(0 0 255 /0.5) 90%,
        rgb(0 0 255 /0.4) 92%,
        rgb(0 0 255 /0.3) 94%,
        rgb(0 0 255 /0.2) 96%,
        rgb(0 0 255 /0.1) 98%,
        rgb(0 0 255 /0) 100%);
}
h2 {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(
        90deg,
        rgb(34 34 34 /0) 0%,
        rgb(34 34 34 /0.1) 2%,
        rgb(34 34 34 /0.2) 4%,
        rgb(34 34 34 /0.3) 6%,
        rgb(34 34 34 /0.4) 8%,
        rgb(34 34 34 /0.5) 10%,
        rgb(34 34 34 /0.6) 12%,
        rgb(34 34 34 /0.7) 14%,
        rgb(34 34 34 /0.8) 16%,
        rgb(34 34 34 /0.9) 18%,
        rgb(34 34 34 /1) 20%,
        rgb(34 34 34 /1) 80%,
        rgb(34 34 34 /0.9) 82%,
        rgb(34 34 34 /0.8) 84%,
        rgb(34 34 34 /0.7) 86%,
        rgb(34 34 34 /0.6) 88%,
        rgb(34 34 34 /0.5) 90%,
        rgb(34 34 34 /0.4) 92%,
        rgb(34 34 34 /0.3) 94%,
        rgb(34 34 34 /0.2) 96%,
        rgb(34 34 34 /0.1) 98%,
        rgb(34 34 34 /0) 100%);
}
.warning {
    padding: 0.3rem 0;
    background-color: rgb(255 0 0 /.5);
    color: white;
    border: 1px solid darkorange;
}



header,
footer {
    position: fixed;
    width: 90vw;
    height: 50px;
    margin: 0;
    padding: 0 5vw;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
}
header a,
footer a { text-decoration: none; }
header {
    border-bottom: 1px solid rgb(0 0 0 /.3);
}
    #slogo {
        flex: 1;
        display: flex;
    }
        #logo {
            flex: 0 1;
            margin: 3px;
            padding: 0;
        }
            #logo p {
                margin: auto;
            }
        #slogan {
            flex: 0 1;
            display: flex;
        }
        #slogan p {
            margin: auto;
            font-size: 0.7rem;
            line-height: 1;
        }
    #mainNav {
        flex: 3;
        display: flex;
        justify-content: flex-end;
    }
        #mainNav div {
            flex: 0 0 7rem;
            margin-left: 1rem;
            display: flex;
            border-bottom: 1px solid #ddd;
        }
        #mainNav div:hover { border-bottom: 1px solid #aaf; }
        #mainNav div.active {
            border-top: 1px solid #aaf;
            border-bottom: 1px solid #aaf;
            background-color: #333;
        }
        #mainNav div.active p { color: #aaf; }
        #mainNav div p {
            margin: auto;
            text-align: center;
        }
        #mainNav a:hover { color: #aaf; }



main {
    flex: 1;
    margin: 51px 0;
    padding: 20px 5vw;
    background-color: #333;
    display: flex;
    flex-direction: column;
}
    main.homepage p {
        text-align: center;
    }
    section {
        flex: 0;
        margin-bottom: 2rem;
        padding: 0;
        box-shadow: 0 2px 5px rgb(0 0 0 /.3);
        display: flex;
        flex-direction: column;
    }
    article {
        flex: 1;
        margin: 0 10px;
        padding: 0;
        display: flex;
    }
        div.figures {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
        }
        div.figures figure { flex: 1; }
        div.description { flex: 3; }
        p#logoBgGradient {
            margin: 0;
            padding: 10px 0;
        background: linear-gradient(
            90deg,
            rgb(34 34 34 /0) 0%,
            rgb(34 34 34 /0.1) 2%,
            rgb(34 34 34 /0.2) 4%,
            rgb(34 34 34 /0.3) 6%,
            rgb(34 34 34 /0.4) 8%,
            rgb(34 34 34 /0.5) 10%,
            rgb(34 34 34 /0.6) 12%,
            rgb(34 34 34 /0.7) 14%,
            rgb(34 34 34 /0.8) 16%,
            rgb(34 34 34 /0.9) 18%,
            rgb(34 34 34 /1) 20%,
            rgb(34 34 34 /1) 80%,
            rgb(34 34 34 /0.9) 82%,
            rgb(34 34 34 /0.8) 84%,
            rgb(34 34 34 /0.7) 86%,
            rgb(34 34 34 /0.6) 88%,
            rgb(34 34 34 /0.5) 90%,
            rgb(34 34 34 /0.4) 92%,
            rgb(34 34 34 /0.3) 94%,
            rgb(34 34 34 /0.2) 96%,
            rgb(34 34 34 /0.1) 98%,
            rgb(34 34 34 /0) 100%);
        }




footer {
    bottom: 0;
    border-top: 1px solid rgb(0 0 0 /.3);
}
footer p { margin: auto }
footer a:hover { text-decoration: underline overline #aaf; }