body{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

/* globale Schriftarten festlegen */
body {
    font-family:Verdana,Arial,Helvetica,sans-serif;
    line-height: 1.5;
}
/* Default-Schriftgröße*/
    /* Gilt für alle Kinder-Elemente des html-Elements; Zugriff über die Einheit rem: 1rem = 16px (in diesem Fall) | Hugo*/
html{
    font-size: 16px;
    background-color: white;
}
/* globale Text- und Hintergrundfarbe definieren */
body {
    color:#000000;
    background-color:#fafafa;
}
/* Bilder per default ohne Rand; sonst gäbe es dicken Rand in Linkfarbe wenn Bild gleichzeitig ein Link ist */
img {
    border-style:none;
}
/* Schrfitgrößen und Abstände */
p{
    margin: 0;
    font-size: 1rem;
}
figure{
    font-size: .9rem;
}
h1 {
    font-size: 2.1rem;
    padding-top: 1rem;
    text-align: center;
}
h2 {
    font-size:1.8rem;
    margin: 0 0 1rem;
}
h3 {
    font-size:1.4rem;
    margin: 0;
}
h3.small{
    font-size: 1.1rem;
}
h4 {
    font-size:1.3rem;
    margin-bottom:3px;
}
h5 {
    font-size:1.1rem;
}
/* Globale Linkfarben und -auszeichnungen definieren */
a:link {
    color:#0000BF;
    text-decoration:none;
}
a:visited {
    color:#7000C0;
    text-decoration:none;
}
a:hover {
    color:#0060FF;
    text-decoration:underline;
}
a:active {
    color:#0060FF;
    text-decoration:none;
}
a:focus {
    color:#0060FF;
    text-decoration:none;
}
/* Layout */
    body{
        max-width: 1700px;
        margin: 0 auto;
        overflow-x: hidden;
    }
    #firstLine,main, footer, nav{
        margin:0;
        padding: 0 1.5rem;
    }
/* Header */
header{
    height: max-content;
}
    #firstLine{
        position: sticky;
        z-index: 2;
        /* Layout Header */
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start ;
        gap: 5%;
        /* Coloring */
        color: #EEE5E5;
        background-color: #242222;
    }  
    /* NavIcon Dreh Animation */
    header>#firstLine>img.rotateDown{
        transform: rotate(90deg); /*mit Klasse rotateDown dreht es sich beim anklicken (js) nach unten*/
    }
    /* Menu Hover States */
    header>#firstLine>img:hover, 
    header>#firstLine>img:focus{
        transform:scale(1.2);
    }
    header>#firstLine>img.rotateDown:hover,
    header>#firstLine>img.rotateDown:focus{
        transform:scale(1.25);
        transform:rotate(90deg);
    }
 
/* Nav */
    nav{
        z-index: 1; /* Damit es hinter der Überschrift verschwinden kann*/
        /* Nav ist am Anfang nicht im Bild */
        position: relative;
        top: -150px;
        margin: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #7BABD8;
    }
    nav>ul{
        padding: 0;
        margin: 0;
        list-style-type: none;
        /* Flex-Container */
        display: flex;
        flex-direction: row;
        gap: .5rem 2rem;
        flex-wrap: wrap;
    }
    /* Link Farben in Ordnung bringen */
    nav a:link{
        color: #1a1a1a;
        font-size: 1rem;
    }
    nav a:visited{
        color: #1a1a1a;
    }
    /* Navigation kommt ins Bild */
    nav.in{
        transform: translate(0, 150px);
    }

/* Main */
    main{
        width: 90%;
        margin: 0 auto;
    }
    main>article, main>section{
        margin-top: 4rem;
    }
    /* Bildergallerie */
    #gallery{
        margin: 4rem auto 0;
    }
    #gallery>figure{
        position: relative;
        width: 70%;
        margin: 3rem auto;
    }
    #gallery>figure>img{
        width: 100%;
        border-radius: 8px;
    }
    #gallery>figure>figcaption{
        text-align: center;
    }
    #gallery .caret{
        position: absolute;
        width: 7%;
        bottom: 50%;
    }
    #gallery .caret.left{
        left: -8%;
    }
    #gallery .caret.right{
        right: -8%;
    }
    /* Aktuelles Bereich */
    #aktuell>h2{
        margin-bottom: 0;
    }
    main>#aktuell h3{
        margin-top: 1rem;
    }
    main ul{
        margin: .5rem;
    }
    main>article#aktuell{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    main>article#aktuell>h2, main>article#aktuell>p{
        grid-column: 1/-1;
    }

/* Footer */
    footer{
        padding:2rem 1rem 0 ;
        margin-top: 3.5rem;
        background-color: #f0ecec;
    }
    footer>p{
        text-align: center;
        padding-bottom: 1.5rem;
    }
/* Reduced Motion Query abfragen für die Animationen */
    @media screen and (prefers-reduced-motion: no-preference) {
        header>#firstLine>img{
            transition: .3s linear;
        }
        nav.js{
            transition: .3s linear;
        }
    }

/* Anpassung für kleinere Geräte */
@media screen and (max-width: 1100px) {
    main>article.text{
        gap: 2rem;
    }
}
@media screen and (max-width: 800px) {
    main>article#aktuell{
        display: block;
    }
}
@media screen and (max-width: 700px) {
    html{
        font-size: 14px;
    }
    main>section#Danksagung{
        display: block;
    }
    header>h3{
        font-size: 1.8rem;
    }
    nav li{
        font-size: 1.1rem;
    }
    figure{
        font-size: 1rem;
    }
}
@media screen and (max-width: 400px) {
    html{
        font-size: 12px;
    }
}