/* =========================================================
   GRUNDLAYOUT
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;

    color: #333;
    background: #fff;
}


/* =========================================================
   SEITENBEREICHE
   ========================================================= */

body > header,
body > nav,
main,
body > footer {
    width: 100%;
    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;
}


/* =========================================================
   SITE-HEADER
   ========================================================= */

body > header {
    padding-top: 30px;
}


/* =========================================================
   SITE-TITEL
   ========================================================= */

.site-title {
    margin: 0;

    /*
       Bewusst kleiner als der Artikel-Titel.
       Der Site-Titel gehört zum Layout,
       nicht zum eigentlichen Seiteninhalt.
    */

    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;

    color: #555;
}


/* =========================================================
   SITE-BESCHREIBUNG
   ========================================================= */

.site-description {
    max-width: 900px;

    margin: 4px 0 0;

    /*
       Zurückhaltender als site-title.
    */

    font-size: 0.9rem;
    line-height: 1.5;

    color: #888;
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

/*
   Die Navigation befindet sich außerhalb des
   Site-Headers und erhält denselben horizontalen
   Rahmen wie Header, Main und Footer.
*/

body > nav {
    display: flex;
    flex-wrap: wrap;

    /*
       8px zwischen Zeilen
       12px zwischen Buttons
    */

    gap: 8px 12px;

    margin-top: 24px;
    padding-top: 0;
    padding-bottom: 0;
}


/* =========================================================
   FOOTER-NAVIGATION
   ========================================================= */

body > footer nav {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 12px;

    margin: 0;
    padding: 0;
}


/* =========================================================
   NAVIGATIONS-BUTTONS
   ========================================================= */

body > nav a,
body > footer nav a {
    display: inline-block;

    padding: 7px 13px;

    color: #444;
    background-color: #f2f2f2;

    border: 1px solid #ccc;
    border-radius: 6px;

    text-decoration: none;
    line-height: 1.3;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


/* =========================================================
   NAVIGATIONS-BUTTONS – HOVER
   ========================================================= */

body > nav a:hover,
body > footer nav a:hover {
    color: #222;
    background-color: #e5e5e5;
    border-color: #aaa;
}


/* =========================================================
   NAVIGATIONS-BUTTONS – FOCUS
   ========================================================= */

body > nav a:focus-visible,
body > footer nav a:focus-visible {
    outline: 3px solid #8ab4f8;
    outline-offset: 2px;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    padding-top: 0;
    padding-bottom: 50px;
}


/* =========================================================
   ARTIKEL-HEADER
   ========================================================= */

/*
   Der innere Header gehört zum Inhalt der Seite.

   Er beginnt mit deutlichem Abstand zur Navigation.
*/

main > header {
    margin-top: 32px;

    padding: 0;
}


/* =========================================================
   ARTIKEL-SUMMARY
   ========================================================= */

.article-summary {
    max-width: 850px;

    margin: 0 0 20px;

    /*
       Die Summary ist eine Einleitung.
       Deshalb kleiner und blasser.
    */

    font-size: 0.9rem;
    line-height: 1.6;

    color: #777;
}


/* =========================================================
   ARTIKEL-TITEL
   ========================================================= */

/*
   Das ist der wichtigste sichtbare Titel
   des jeweiligen Inhalts.

   Er muss nicht zwingend ein h1 sein.
   Die Gestaltung wird unabhängig vom
   HTML-Element definiert.
*/

.article-title {
    max-width: 950px;

    margin: 0 0 8px;

    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;

    color: #222;
}


/* =========================================================
   ARTIKEL-BESCHREIBUNG
   ========================================================= */

.article-description {
    max-width: 850px;

    margin: 0;

    /*
       Zwischen Summary und Haupttitel
       deutlich markanter.
    */

    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.5;

    color: #555;
}


/* =========================================================
   EIGENTLICHER ARTIKEL
   ========================================================= */

/*
   Abstand zwischen Artikelkopf und
   dem eigentlichen Märchentext.
*/

main > article {
    margin-top: 40px;
}


/* =========================================================
   ARTIKEL-ABSCHNITTE
   ========================================================= */

main > article section {
    margin: 0 0 42px;
}


/* =========================================================
   ÜBERSCHRIFTEN DER ARTIKELABSCHNITTE
   ========================================================= */

main > article h1 {
    margin: 0 0 12px;

    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;

    color: #222;
}


/* =========================================================
   ARTIKELTEXT
   ========================================================= */

main > article p {
    margin: 0 0 1em;

    line-height: 1.7;
}


/* =========================================================
   ZITATE
   ========================================================= */

main > article blockquote {
    margin: 1.5em 0;
    padding: 10px 20px;

    color: #555;

    border-left: 4px solid #ccc;
    background-color: #f8f8f8;
}


/* =========================================================
   ARTIKEL-LINKS
   ========================================================= */

/*
   Die Texte auf der Startseite sind Links.
   Sie sollen aber nicht wie Navigation
   aussehen.
*/

main > article p a {
    color: inherit;
    text-decoration: none;
}

main > article p a:hover {
    text-decoration: underline;
}


/* =========================================================
   FOOTER
   ========================================================= */

body > footer {
    padding-top: 25px;
    padding-bottom: 30px;

    border-top: 1px solid #ddd;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    body > header,
    body > nav,
    main,
    body > footer {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* -----------------------------------------
       Site
       ----------------------------------------- */

    body > header {
        padding-top: 20px;
    }

    .site-title {
        font-size: 1.2rem;
    }

    .site-description {
        font-size: 0.85rem;
    }


    /* -----------------------------------------
       Navigation
       ----------------------------------------- */

    body > nav {
        margin-top: 20px;
    }

    body > nav,
    body > footer nav {
        gap: 7px 9px;
    }

    body > nav a,
    body > footer nav a {
        padding: 7px 10px;
    }


    /* -----------------------------------------
       Artikel-Header
       ----------------------------------------- */

    main > header {
        margin-top: 25px;
    }

    .article-summary {
        font-size: 0.88rem;
    }

    .article-title {
        font-size: 1.85rem;
    }

    .article-description {
        font-size: 1.05rem;
    }


    /* -----------------------------------------
       Artikel
       ----------------------------------------- */

    main > article {
        margin-top: 32px;
    }

    main > article h1 {
        font-size: 1.4rem;
    }
}