* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

:root{
    --background-color_1: white;
    --background-color_2: rgb(29 135 51);
    --background-color_3: #f5f5f5;
    --background-color_4: rgba(29,135,51,0.5);
    --background-color_5: #6d6d6d; 
    --schriftfarbe_1: white;
    --schriftfarbe_2: rgb(29 135 51);
    --schriftfarbe_3: black;
    --schriftart: Arial;
    --breite_nav_link: 150px;
    --linke-spalte: 400px; /* Breite linke Spalte für Inhalt und Navigation */
    --rechte-spalte: 890px; /* Breite rechte Spalte für Inhalt und Navigation Desktopnavigation (5*Breite Navigation+Abstand dazwischen durch Padding+5px zwischen zwei Links) */
    
}


h1{
    font-family: var(--schriftart);
    font-weight: bold;
    font-size: 22px;
    line-height: 150%;
    padding-bottom: 5px;
    color: var(--schriftfarbe_2)
}

h2{
    font-family: var(--schriftart);
    font-weight: bold;
    font-size: 16px;
    line-height: 150%;
    padding-bottom: 5px;
    color: var(--schriftfarbe_3);
}

h3{ /* Schrift in der Fußzeile */
    font-family: var(--schriftart);
    font-weight: normal;
    font-size: 12px;
    line-height: 150%;
    color: var(--schriftfarbe_1);
}

p{  /*Texte*/
    font-family: var(--schriftart);
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    color: var(--schriftfarbe_3);
}

.verweis{ /* Quellenangabe/Verweise auf Basis von p*/
    font-size: 10px;   
}

.black{ /* Zwischenüberschrift wie h1 nur schwarz und etwas kleiner*/
    font-size: 20px;
    color: var(--schriftfarbe_3);
}

/*gesamten Inhalt zentrieren*/
html {
    width: 1290px; 
    margin: 0 auto;
}

body{ 
    /* damit der Footer immer unten bleibt */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    
}

header{
    position: fixed;
    top: 0;
    height: 100px;
    background-color: var(--background-color_1);
    z-index: 2;
    border-bottom-color: rgba(0,0,0,0.2);
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    
}


/* linke Spalte im header */
.spalte_header_links {   
    float: left;
    width: var(--linke-spalte);
    padding-left: 20px;
    height: 100px;
}

/* rechte Spalte im header */
.spalte_header_rechts {   
    float: left;
    width: var(--rechte-spalte);
}

#wappen{
    width: auto; 
    height: 99px;
    margin-top: 0px;
}


/* Aussehen von Links */

.textlink{ /* Link im Fliestext */
    padding-bottom: 9.5px; /* Klickbereich unterhalb vergrößern */
    padding-top: 9.5px;/* Klickbereich oberhalb vergrößern */
    position: relative;
    color: var(--schriftfarbe_2);
    text-decoration: underline;
}    

/* Gestaltung Hintergrund navigation */
.dropdown{
    position: absolute;
    width: 100%;
    padding-top: 26px;

}

.dropbtn {/* Gestaltung ausklappbare Navigation oberstes ELement, welches das ausklappen bewirkt*/
    display: inline-block; position: relative; /* Navigation erscheint nebeneinander*/
    margin: 0px 30px 0px 0px;
    width: var(--breite_nav_link);
    
    
} 

.navlink1{
    /* Schrift definieren*/
    padding-bottom: 15px;
    padding-top: 15px;
    font-family: var(--schriftart);
    font-weight: normal;
    font-size: 16px;
    line-height: 100%;
    color: var(--schriftfarbe_2);
    float: left;
    width: var(--breite_nav_link);
    text-align: center;
    border-bottom-style: solid;
    border-bottom-color: var(--background-color_2);
    border-bottom-width: 2px;
    cursor: pointer;
    list-style-type: none;
}

.close1{  /* Schließsymbol Navigation nach ausklappen des Untermenues */
    width: 30px;
    height: 3px;
    background: var(--background-color_2);
    transform: rotate(45deg);
    margin-top: -9px;
    margin-left: 100px;
    position: absolute;
    display: none;
    border-radius: 4px;
}

.close2{ /* Schließsymbol Navigation nach ausklappen des Untermenues */
    width: 30px;
    height: 3px;
    background: var(--background-color_2);
    transform: rotate(-45deg);
    margin-top: -9px;
    margin-left: 100px;
    position: absolute;
    display: none;
    border-radius: 4px;
}


/* Dropdown Content */
.dropdown-content{
    display: none;
    position: absolute;
    width: var(--breite_nav_link);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-top: 48px;
    background-color: var(--background-color_3);
}

.navlink2{ /* Schrift in der Navigation - mehrzeiliges Untermenue */
    font-family: var(--schriftart);
    font-weight: normal;
    font-size: 12px;
    line-height: 130%;
    padding-bottom: 8px; /* Klickbereich in der Navigation unterhalb vergrößern */
    padding-top: 8px;/* Klickbereich in der Navigation oberhalb vergrößern */
    padding-left: 10px;
    color: var(--schriftfarbe_2);
    border-bottom: none;
    float: left;
    width: var(--breite_nav_link);
    background-color: var(--background-color_3);
}

/* aktuelle aufgerufener Link einfärben u. Schliessymbol*/
#aktiv1{background-color: var(--schriftfarbe_2); color: var(--schriftfarbe_1)}
#aktiv1 .close1{background: var(--background-color_1)}
#aktiv1 .close2{background: var(--background-color_1)}

#aktiv2{
    background-color: var(--background-color_4);
    color: var(--schriftfarbe_1);
}

/* blendet die Checkboxen aus (erforderlich für Klickbefehle) */
#clickham {display: none}
#clicknav1{display: none}

/* blendet Untermenüs der Navigation bei Klick ein + Kreuz zum Schließen erscheint */

#clicknav1:checked ~ .dropdown-content {display: block}
#clicknav1:checked ~ label .close1 {display: block}
#clicknav1:checked ~ label .close2 {display: block}
#clicknav1:checked ~ label .navlink1 {text-align: left; padding-left:10px;}


article {
    background-color: var(--background-color_1);
    z-index: 1;
    margin-top: 100px;  /* entspricht der Höhe vom header */
    flex: 1; /* damit der Footer immer unten bleibt */
}

/* Listen im Inhalt */
article ul{ /* Listen im Inhalt */
    padding-left: 40px;
}

article li{ /* Listen im Inhalt */
    list-style-type: circle;
    list-style-position: outside;
    font-family: var(--schriftart);
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    padding-left: 10px;
}

/* linke Spalte im Inhalt */
.spalte_inhalt_links {   
    width: var(--linke-spalte);
    padding-left: 20px;
    padding-right: 50px;
    }

/* rechte Spalte im inhalt */
.spalte_inhalt_rechts {  
    width: var(--rechte-spalte);
    }

.sortieren{float: left; display: flex; flex-flow: row;}
.sortieren_sonder{float: left; display: flex; flex-flow: row;}

/* Inhaltskarten */
.card {
    position: relative;
    background-color: var(--background-color_3);
    padding: 15px;
    }

/* Freiraum */
.frei {
    position: relative;
    height: 20px;
}
.frei_footer{
    position: relative;
    height: 10px;}

/* Footer */       
footer {
    float: left;
    position: relative;
    text-align: left;
    background: var(--background-color_5);
    width: 100%;
    z-index: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px; 
    padding-right: 20px
    }

.button_footer{
    border-style: solid;
    border-color: white;
    text-align: center;
    border-width: 2px;
    width: 100px;
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.footer_inhalt{
    float: left;
    margin-right: 90px;
}

 /* Download-Link gestalten */
        .download1 {
            width: 4px;
            height: 30px;
            background: var(--background-color_2);
            left: 15px;
            position: absolute;
        }

        .download2 {
            width: 4px;
            height: 20px;
            background: var(--background-color_2);
            transform: rotate(45deg);
            position: absolute;
            left: 20.6px;
            top: 15px;
            }
        .download3 {
            width: 4px;
            height: 20px;
            background: var(--background-color_2);
            transform: rotate(-45deg);
            position: absolute;
            left: 9.1px;
            top: 15px;
            }

.download4{
        position: absolute;
        padding-left: 50px;
        font-family: var(--schriftart);
        font-weight: bold;
        font-size: 16px;
        line-height: 100%;
        padding-bottom: 9.5px; /* Klickbereich unterhalb vergrößern */
        padding-top: 9.5px;/* Klickbereich oberhalb vergrößern */
        color: var(--schriftfarbe_2);
        }

 .download_1 {
        cursor: pointer;
        position: relative; 
        width: 50px;
        height: 35px;
        }

 .download_2 {
        cursor: pointer;
        position: relative; 
        width: 260px;
        height: 35px;
        }

        
 

/* Tabelle im Inhalt */
td, th {
    text-align: left;
    font-family: var(--schriftart);
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    vertical-align: top;
    color: var(--schriftfarbe_3);
    
}

.tabelle{
    border-collapse: collapse;
    border-spacing: 0;
}

.tabelle td{
    border-bottom-style: solid; 
    border-bottom-color: var(--background-color_2);
    border-width: 1px;
    border-top-style: solid; 
    border-top-color: var(--background-color_2)
}


/* Navigation innerhalb einer Seiten*/


.zwischennavigation_oben{
    border-bottom-style: solid; 
    border-bottom-color: var(--background-color_2);
    border-width: 1px;
    border-top-style: solid; 
    border-top-color: var(--background-color_2);
    max-width: 470px;
}


.zwischennavigation_rest{
    border-bottom-style: solid; 
    border-bottom-color: var(--background-color_2);
    border-width: 1px;
    max-width: 470px;
}

.zwischennavigation a{
    color: var(--schriftfarbe_2);
    text-decoration: none;
    font-family: var(--schriftart);
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
}

.zwischennavtext{
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}




.anchor{
    position: absolute; 
    top: -100px; /* Anpassung Sprung an Höhe Header*/
}

/* Responsive layout */
@media screen and (max-width: 1350px)  {

        /* Hamburger Menue gestalten */

        .linie {
            width: 42px;
            height: 4.2px;
            background-color: rgb(29 135 51);
        border-radius: 4px;
        position: absolute;
        z-index: 3;
        }

        .einsham {
            top: 8.4px;
        }

        .zweiham {
            top: 21px;
        }

        .dreiham {
            top: 32.55px;
        }

        .rahmen {
            width: 56px;
            height: 46.2px;
            padding-right: 7px;
        padding-left: 7px;
        background: var(--background-color_1);
        cursor: pointer;
        border-radius: 4px;
        position: absolute;
        right: 25px;
        top: 26.9px;
        z-index: 3;
        }

            /* Verhalten Navigation beim Klicken gestalten */
               
            #clickham:checked ~ label .einsham {
                transform: rotate(-45deg);
                top: 21px;
                }

            #clickham:checked ~ label .zweiham {
                opacity: 0;
                }

            #clickham:checked ~ label .dreiham {
                transform: rotate(45deg);
                top: 21px;
                }

            .dropdown {display: none} /* Desktopnavigation verschwindet */

            #clickham:checked ~ .dropdown {
                display: block;  /* erforderlich, damit Navigation erscheinen kann*/
                                }
                              
            #clickham:checked ~ .spalte_header_rechts{ 
            width: 100vw;/* rechte Spalte geht über die ganze Seite*/
            
            }
    
            /* neue Gestaltung Navigation*/
            .dropdown   { 
                
                height: 100vh;
                background-color: var(--background-color_1);
                padding-top: 0px;
                        }
    
            .dropdown-content{
                position: relative; /* verschiebt die Links wenn eine Gliederungsebene ausgeklappt wird*/
                width: 100%;
                
                            }
    
            .dropbtn {
                width: 100%;
                text-align: left;
                display: block;
                
                        }
    
    .navlink1 {padding-left: 20px; text-align: left; width: 100%;} 
    .navlink2 {padding-left: 20px; width: 100%;}
    #clicknav1:checked ~ label .navlink1 {text-align: left;  padding-left: 20px;}
    
        /* Inhalt untereinander Sortieren*/
        .sortieren{flex-flow: column;}
        .sortieren .spalte_inhalt_links {width: 100vw; order:2}
        .sortieren .spalte_inhalt_rechts{width: 100vw; margin-left: 0px; order: 1}
        
        .sortieren_sonder{flex-flow: column;}
        .sortieren_sonder .spalte_inhalt_links {width: 100vw; order:1}
        .sortieren_sonder .spalte_inhalt_rechts{width: 100vw; margin-left: 0px; order: 2}
    
    
        /* einrückung*/
        .card{padding-left: 20px; padding-right:20px}
        .spalte_inhalt_links{padding-right:20px}    
    /*gesamten Inhalt nicht mehr zentrieren*/
    html {
    width: 100vw;
    }
    .spalte_header_rechts {   
    width: 100vw;
    height: 0px;
    }
     .spalte_header_links {   
    width: 390px;   /*Hamburger kann näher an Wappen rücken*/
    }
}

/* Responsive layout --> Header + Layout an Header anpassen*/
@media screen and (max-width: 390px)  {
    
    header{
        height: 75px;
        
    }
    #wappen {
        height: 74px;
        margin-top: 0px;
    }
    
    .spalte_header_links {   
    width: 310px;/*Hamburger kann näher an Wappen rücken*/
    height: 75px;
    }
    
    
    /* Hamburger Menue*/
        .rahmen {
        top:14.4px;
        }
    
    article {
    margin-top: 75px;  /* entspricht der Höhe vom header */
    }
    
    .anchor{
    top:-75px; /* Anpassung Sprung an Höhe Header*/
    }
}