* {
    margin: 0;
    padding: 0;
    }
html {
    box-sizing: border-box;
    /*Boxgröße einschl. padding und border*/
    }
*, *::before, *::after {
    box-sizing: inherit;
    /*Boxgröße einschl. padding und border an alle vererben*/
    }
body {
    max-width: 60rem;
    /*Referenz für widths - jedes child mit % benötigt ein parent mit width angabe*//*variabel je nach gewünschtem Erscheinungsbild*//*passt sich versch devices an*/
    margin: 0 auto; 
    /*nicht nötig wenn html flexbox, evtl. lassen als kleines fallback, falls flexbox nicht unterstützt wird*/
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    }
a {
    display: inline-block;
    text-decoration: none;
    }
html, body, header, figure, main, section, article, footer{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:left;
    }
header h1, header p {
    text-align: center;
    }
/* --- LAYOUT WIDTH AND HEIGHT (INDIVIDUAL?)      --- */
/*                                             */
/*width und Reihenfolge im html beeinflussen Reihenfolge und Aufteilung im fe, bei gewünschter Zentrierung und den selben Farben für Hintergrund und Element, bei flexbox column kein width angeben, sortiert sich dann selbst*/
main{
    min-height: 150rem;/*wenn groß genug und flexbox space around kein margin für Abstände nötig*/
    }
header, header h1, header p, section, footer{
    width: 100%;
    }
article, ul, p{
    width: 66%; 
    /* variabel je nach gewünschtem Erscheinungsbild, kann auch breiter oder schmaler sein, z.b Hintergrundfoto oder nicht..*/
    }
article ul, article p, article address{
    width: 80%; 
    /* variabel je nach gewünschtem Erscheinungsbild, kann auch breiter oder schmaler sein, z.b Hintergrundfoto oder nicht..*/
    }
@media (max-width: 44rem) {
    article{
        width: 98%;
        }/* mobile widths*/
}
/* --- LAYOUT PADDINGS MARGINS --------------- */
/*                                             */
@media (max-width: 55rem) {
    header {
        padding:0.5rem;
        }
}
header h1 {
    margin-top: 1rem;
    }
figure, article, div a, h2, article p, ul, dl, article address, footer nav, footer p{
    padding:  2rem;
    }
section h2 {
    padding: 0.5rem;
    margin: 1rem;
    }
article{
    padding-top:3rem;
    margin-bottom: 15rem;
    }
dd{
    padding-left: 1rem;
    }
/*                                             */
/* -------------- LAYOUT LOOK AND FEEL ------- */
/*                                             */
/* --- FONTS                               --- */
/*                                             */
@font-face {
    font-family:EBGaramond-Regular;
    src: url("font/EBGaramond-Regular.woff2") format("woff2"), url("font/EBGaramond-Regular.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
    }
html {
    font-family: EBGaramond-Regular;
    font-size: 16px; 
    /*grundlage für rem*/
    color:black;
    }
/* why not use the default settings when they are there? change if needed*/
/* link animation, generell, kann im weiteren Verlauf überschrieben werden, mglst. wenig unterschiedlich für gutes Erscheinungsbild*/
a:link {
    color: black;
    }
a:visited {
    color: green;
    }
a:focus, footer p {
    border-top: 0.02rem solid black;
    }
a:hover {
    border-top: 0.02rem solid rgb(216, 149, 4);
    color: rgb(216, 149, 4);
    }
a:active {
    border-top: 0.02rem solid black;
    color: blue;
    }
article div a:focus, article div a:hover, article div a:active {
    border-top:none;
    }
h1, h2, div a:link{
    color:rgb(202, 251, 252);
    }
section h2{
    border-top: 0.02rem solid rgb(190, 242, 241);
    }
header h1 {
    font-size: 1.8rem;
    color: black;
    }
header p{
    font-size: 1.2rem;
    }
header a{
    font-weight: bold;
    }
sub, figcaption {
    font-size: 1rem;
    font-style: italic;
    }
dt{
    font-weight: bold;
    }
/* --- LAYOUT BACKGROUNDS                         --- */
/*                                             */
body, header h1, header p, header nav, article{
    background-color:snow;
    }
footer{
    background-color:snow;
    }
main{
    background-color: rgb(189, 226, 243);
    background-image: url(img/IMG_5659-2-SylviaAsmus-esplus.jpg);
    background-repeat: no-repeat;
    background-position:center top;
    background-attachment: fixed;
    }
/* --- INDEPENDENT ELEMENTS                    --- */
/*                                             */
/*HAUPTNAVIGATION HORIZONTAL-MOBILE VERTIKAL-KEIN HAMBURGER - mobile first*/
nav li, nav li a{
    display: block; 
    /*gesamtes Feld anklickbar*/
    }
header nav {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items:flex-start;
    justify-content:flex-start;
    width: 100%;
    /* mobile nav Menüpunkte untereinander*/
    }
header nav li, footer nav li, footer p{
    text-align: center;
    margin: 0.3rem 0.1rem 0 0;
    padding: 0.2rem 0 0.3rem 0;
    width: 100%;
    }
header nav li a{
    padding: 0.5rem;
    font-size: 1.2rem;
    border-top: 0.02rem solid rgb(190, 242, 241);
    }
@media (min-width: 45rem) {
    header nav{
        display: flex;
        flex-direction: row;
        flex-wrap: no-wrap;
        align-items:flex-start;
        justify-content:space-between;
        width: 35rem;
        }
    header nav li{
        flex: 6rem;
        text-align: center;
        margin: 0.6rem 0.1rem 0 0;
        padding: 0.2rem 0 0.3rem 0;
        }
}
@media (min-width: 55rem) {
    header nav{
        display: flex;
        flex-direction: row;
        flex-wrap: no-wrap;
        align-items:flex-start;
        justify-content:space-between;
        }
    header nav li{
        flex: 6rem;
        text-align: center;
        padding: 0.5rem 0 0.6rem 0;
        margin: 1rem 0.1rem 0.1rem 0;
        }
}
/*BILD KREIS IM HEADER - mobile first*/
header img{
    width:10rem;
    height: 10rem;
    border-radius: 8rem;
    position: absolute;
    margin-top: 22rem; 
    /*positionierung über margin statt über top etc, da direkt vom element ausgehend und nicht von viewportrand (evtl anpassungen auch über nächstfolgendes element*/
    margin-left: 0.3rem;
    background-color:rgb(212, 220, 200);
    border: 0.3rem solid snow;
    }
@media (min-width: 45rem) {
    header img{
        position: absolute;
        margin-top: -1.5rem; 
        /*positionierung über margin statt über top etc, da direkt vom element ausgehend und nicht von viewportrand (evtl anpassungen auch über nächstfolgendes element*/
        margin-left: 33rem;
        }
}
@media (min-width: 55rem) {
    header img{
        margin-top: 0rem; 
        /*positionierung über margin statt über top etc, da direkt vom element ausgehend und nicht von viewportrand (evtl anpassungen auch über nächstfolgendes element*/
        margin-left: 33rem;
        z-index: 10;
        }
}
/*ADDRESS KREIS IM HEADER - mobile first*/
header address{
    display: none;
    }
@media (min-width: 58rem) {
    header address {
        width: 14rem;
        height: 14rem;
        border-radius: 8rem;
        background-color:rgba(6, 246, 246);
        background-image: url(img/IMG_5659-3-SylviaAsmus-esplus.jpg);
        position: sticky;
        top: 0;
        margin-top: 1rem; 
        /*positionierung über margin statt über top etc, da direkt vom element ausgehend und nicht von viewportrand (evtl anpassungen auch über nächstfolgendes element*/
        margin-bottom: -14rem;
        margin-left: 80%;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content:space-around;
        z-index: 20;
        font-size: 1.1rem;
        }
}
/*BLOCKQUOTE -mobile first*/
blockquote{
    width: 98%;
    text-align:center;
    margin: 1rem;
    z-index: 20;
    padding-top: 8rem;
    padding-bottom: 15rem;
    margin-bottom: 15rem;
    font-size: 3rem;
    font-weight: bold;
    font-style: italic;
    color:rgb(211, 250, 250);
    }
@media (min-width: 44rem) {
    blockquote{
        width: 30rem;
        } 
}
/*NACH OBEN KREIS-mobile first*/
article div{
    width: 4rem;
    height: 4rem;
    border-radius: 3rem;
    background-color:rgb(16, 242, 227);
    background-image: url(img/IMG_5659-3-SylviaAsmus-esplus.jpg);
    position: sticky;
    top: 0;
    margin-left: 0.5rem;
    z-index: 20;
    /*writing-mode: vertical-lr;
    text-orientation:upright;*/
    }
article div a{
    margin-top: -1.5rem;
    margin-left:-1rem;
    }
@media (min-width: 50rem) {
    article div{
        width: 6rem;
        height: 6rem;
        margin-left: -40rem;
        }
    article div a{
        margin-top: -1.2rem;
        margin-left: 0rem;
        }

}