@charset "utf-8";
/************************************
 *   Styling des Chronik-Abschnitts    *
 ***********************************/

article#chronicle {
    /*padding: 80px 20px;*/
    max-width: 1400px;
    margin: auto;
}
article#chronicle section#chronik-vorschau{
    display: grid;
    grid-template-areas:
            "prolog"
            "kapitel1"
            "kapitel2"
            "kapitel3"
            "kapitel4";

    grid-template-rows: min-content;
    grid-auto-rows: min-content;
}

article#chronicle h2{
    grid-area: überschrift;
}

article#chronicle p.chronik-beschreibung{
    grid-area: text;
    font-size: 15px;
    text-align: center;
    margin: 50px auto;
    width: 90%;
}

article#chronicle p.chronik-beschreibung a{
    color: cadetblue;
    font-style: italic;
    font-weight: bold;
}

article#chronicle section#chronik-vorschau a{
    margin: auto;
}
div.chronik-kapitel{
    margin: 20px auto;
    width: 60vw;
    height: 80vw;
    text-align: center;
    padding-top: 7vh;
    /*color: whitesmoke;*/
    border-left: 30px solid grey;
    background-color: lightgrey;
    box-shadow: 2px 2px 25px 0 #888888;
}
div.chronik-kapitel p{
    margin-top: 0;
}

div.chronik-kapitel p.text-kapitel{
    text-transform: uppercase;
    font-size: 15px;
}
div.chronik-kapitel p.text-titel{
    color: whitesmoke;
    font-size: 20px;
    /*font-size: 30px;*/
    font-weight: bold;
    background-color: darkgray;
}

a#prolog{
    grid-area: prolog;
}
a#kapitel1{
    grid-area: kapitel1;
}
a#kapitel2{
    grid-area: kapitel2;
}
a#kapitel3{
    grid-area: kapitel3;
}
a#kapitel4{
    grid-area: kapitel4;
}

div.feather-lightbox-content.chronik-lightbox{
    font-family: Sanchez, serif;
    max-width: 900px;
}


.chronik-header {
    margin: 0;
    padding: 10px 2.5%;
}
h3.chronik-header-main, h3.chronik-header-sub{
    text-align: center;
}
h3.chronik-header-main {
    /*font-size: 30px;*/
    font-size: 20px;
}
h3.chronik-header-sub {
    /*font-size: 20px;*/
    margin-bottom: 2em;
    font-size: 15px;
}
img.chronik-bild {
    margin: 0;
    width: 100%;
    /*padding: 0 25%;*/
    padding: 0.5% 2.5%;
}
p.chronik-text {
    /*font-size: 15px;*/
    padding: 5px 2.5%;
    /*padding: 0.5% 2.5%;*/
    margin: 0;

    font-size: 12px;

}
p.chronik-text a {
    color: cadetblue;
    font-weight: bold;
}
p.chronik-text a:hover {
    color: black;
}
p.chronik-text.zitat {
    text-align: center;
}

div.chronik-zwei-bilder{
    justify-content: space-between;
    padding: 0 2.5%;
}
div.chronik-zwei-bilder img.chronik-bild {
    padding: 0.5% 0;
    width: 100%;
}

div.lightbox-steuerung{
    display: flex;
    padding: 30px 5%;
    justify-content: space-between;
}
div.lightbox-steuerung a{
    color: lightgrey;
    font-size: 20px;
}
div.lightbox-steuerung a:hover{
    color: darkgrey;
}

/* S (Tablet Quer, Netbooks, kleine Laptops) */
@media (min-width: 30.06em) {
    article#chronicle section#chronik-vorschau{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "prolog prolog"
                "kapitel1 kapitel2"
                "kapitel3 kapitel4";
    }
    article#chronicle p.chronik-beschreibung{
        font-size: 20px;
        width: 75%;
    }
    p.chronik-text {
        font-size: 12px;
        padding: 10px 2.5%;
    }
    div.chronik-kapitel {
        width: 30vw;
        height: 40vw;
    }
    div.chronik-kapitel p.text-titel {
        font-size: 30px;
    }
}

/*M (Tablet Quer, Netbooks, kleine Laptops):*/
@media (min-width: 50.01em) {
    article#chronicle section#chronik-vorschau{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "prolog prolog prolog prolog"
                "kapitel1 kapitel2 kapitel3 kapitel4";
    }
    div.chronik-kapitel {
        width: 15vw;
        height: 20vw;
    }
    div.chronik-kapitel p.text-titel {
        font-size: 20px;
    }
    div.feather-lightbox-content.chronik-lightbox{
        padding: 10px;
    }
    h3.chronik-header-main{
        /*font-size: 40px;*/
        font-size: 35px;
    }
    h3.chronik-header-sub{
        /*font-size: 1.17em;*/
        font-size: 20px;
    }
    p.chronik-text {
        font-size: 14px;
    }
    img.chronik-bild {
        padding: 0.5% 25%;
        margin: auto;
    }
    div.chronik-zwei-bilder{
        display: flex;
    }
    div.chronik-zwei-bilder img.chronik-bild {
        width: 49.5%;
    }
    img.chronik-bild.breit{
        padding: 0.5% 2.5%;
    }
    div.lightbox-steuerung{
        padding: 50px 5% 30px;
    }
}

/*L (Laptops und kleine Desktops):*/
@media (min-width: 64em){
    article#chronicle section#chronik-vorschau{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "prolog prolog prolog prolog"
                "kapitel1 kapitel2 kapitel3 kapitel4";
    }
    div.chronik-kapitel {
        width: 15vw;
        height: 20vw;
    }
    div.chronik-kapitel p.text-titel {
        font-size: 30px;
    }
    div.feather-lightbox-content.chronik-lightbox{
        padding: 30px;
    }
}