:root {
    --primary-color: hsl(209, 29%, 26%); /* Bundesblau */
    --secondary-color: hsl(0, 100%, 50%); /* Schweizerrot */
    /* --medium-break-point: 1280px; */
}


a { text-decoration: none; }

html, body, main {height: 100%; }
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

body {
    margin: 0;
    padding: 0;

    display: grid;
    column-gap: 5px; row-gap: 5px;
    grid-template-columns: 0.15fr 0.85fr;
    grid-template-rows: auto 1fr auto;

    grid-template-areas:
        "header header"
        "aside article"
        "footer footer";

    background: white;
    color: BLACK;
}


header {
    background: var(--primary-color);
    color: white;
    padding: 1rem;
    display: flex;
    flex-flow: row nowrap;
    flex: flow;
    align-items: center;
    justify-content: space-between;
}

header > a {
    margin-right: 1.6rem;
}

header nav {
    display: flex;
    flex-flow: row nowrap;
    flex: auto;
    height: 100%;
    align-items: center;
    gap: 2px;
}
    
header nav a {
    
    color: white;
    text-decoration: none;
    font-weight: bolder;
    font-size: 1.3rem;
    height: 110%;
    align-content: center;
    text-align: center;
    padding: 0 10px;
    border-radius: 4px;
}

header div.header-titel {
    font-size: 1.6rem;
    font-weight: bold;
    flex: 1;
    text-align: right;
    margin-left: 4em;
}

header nav a:hover {
    background: hsl(from var(--primary-color) h s calc(l + 20));
    text-decoration: underline;
}

nav a.aktuelleSeite {
    text-decoration: underline;
}
 
       
@media screen and (max-width: 1280px) {
    body {
        grid-template-columns: 100%;
        grid-template-rows: auto max-content 100% auto;
        grid-template-areas:
            "header"
            "aside"
            "article"
            "footer";
                 
    }   
}


@media screen and (max-width: 782px) {
    body {
        grid-template-columns: 100%;
        grid-template-rows: auto max-content 100% auto;
        grid-template-areas:
            "header"
            "aside"
            "article"
            "footer";
    } 
    
    header > a {
        margin: 0 10px 0 0;
        height: auto;
    }

    header div.header-titel {
        text-align: left;
    }
}


main {
    display: contents;
    background: white;
}


header {  grid-area: header; }
aside {  grid-area: aside; }
main > article { grid-area: article; }
footer { grid-area: footer; }

aside {
    /* background: var(--primary-color); */
    /* color: white; */
    padding: 1rem;
}

main > article {
    padding: 1rem;
    /* background: #f0f0f0;     */
}

footer {
    background: var(--secondary-color);
    color: white;
    text-align: center;
    padding: 1rem;
}

h1 {
    font-size: 2.2em;
}


/* Legal Documents */

.legalDocument > h1 {
    margin: 10px 0 10px;
} 
    
.kurztitel {
    font-size: 1.7em;
    margin: 10px 0 15px;
    display: block;
}

.erlassDatum {
    font-style: italic;
    margin-bottom: 10px;
    display: block;
}

.präamble {
    line-height: 1.2em;
}

.titel > h2 {
    margin: 1em 0;
    font-size: 1.8em;
}

.kapitel h3 {
    margin: 1em 0;
    font-size: 1.6em;
}

.abschnitt h4 {
    font-size: 1.3em;
    margin: 1em 0;
}

/*
.unterabschnitt h5 {
    font-size: 1.1em;
} */
 
.blockList > ol {
    padding-left: 1.5em;
    margin-top: 0.5em;
}

ol.latinList {
    list-style-type: lower-alpha;
}

ol.numerical {
    list-style-type: decimal;
}

.artikelTitel {
    font-size: 1.2em;
    color: red;
    font-weight: bold;
    margin: 5px 0;
}

.paragraphNr {
    font-weight: bold;
    display: block;
    margin-bottom: 0.2em;
}

/* Anderes */

li {
    margin-bottom: 0.3em;
}

ul {
  padding-left: 1.5em;
}

aside > nav {
      word-break: break-word;
    }