/* Modell für Empfangsseiten der Rubriken: r-a.php, r-t.php, r-vp.php, r-vq.php, r-c.php, */


/* ALLGEMEINES ************************************************************************/
/**************************************************************************************/

* {
    margin: 0;
    padding: 0;
}

html {
    background-color: rgb(204,227,255);
    background-image: url("../hg/hg0.png");
    background-size: auto 100%;
    background-attachment: fixed;
}

body {
    min-height: 100vh;
    position: relative;
}

header {
    position: relative;
}

 #DAlogo {
    padding-right: 2rem;
}

.divDAtext {
    position: relative; 
    top: 5.5rem;  
    margin-bottom: 5rem;
}

#DAtext {
    max-width: 50vw;
    margin-bottom: 1rem;
}

        /* Zentrieren eines Elements: in div.divMitte stecken */
.divMitte {
    display: block; 
    margin: 0 auto;
    max-width: 70rem; /* wichtig wegen footer */
}

.divInlineBlock {
    display: inline-block;
}

.flexboxFooter {
    display: flex;
    flex-direction: row;
}

.flexboxFooter > div {
    margin-top: 1rem;
}

#E1 > div, #E2 > div, #E3 > div, #E4 > div, #E5 > div, #E6 > div, #E7 > div, #E8 > div, #E9 > div, #E10 > div, #E11 > div, #E12 > div {
    height: calc(100% - 2rem);
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1px inset;
}

#inhalt > div {
    padding: 0.5rem 5vw;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1px inset;
}
    
#E1 img, #E2 img, #E3 img, #E4 img, #E5 img, #E6 img, #E7 img, #E8 img, #E9 img, #E10 img, #E11 img, #E12 img {
    width: 200px;
    max-height: 200px;
    display: block;
    margin: 1rem auto;
    border-radius: 0.25rem;
    box-shadow: 0 0 1px;
}
#E1 > a > div, #E2 > a > div, #E3 > a > div, #E4 > a > div, #E5 > a > div, #E6 > a > div, #E7 > a > div, #E8 > a > div, #E9 > a > div, #E10 > a > div, #E11 > a > div, #E12 > a > div, #inhalt > div {
    display: block;
}

#E1 a, #E2 a, #E3 a, #E4 a, #E5 a, #E6 a, #E7 a, #E8 a, #E9 a, #E10 a, #E11 a, #E12 a, #inhalt a {
    color: #333;
    text-decoration-line: none;
}


/* SCHRIFTEN ********************************************************/
/********************************************************************/
        

h1 {
    font-family: Paprika, "Open Sans Condensed", "Noto Sans Cond", "Roboto Condensed", "Open Sans", "Noto Sans", sans-serif;
    font-size: 2rem;
    font-weight: bold;
}
        
h2, h3, h4, h5 {
    font-family: "Open Sans Condensed", "Noto Sans Cond", "Roboto Condensed", "Open Sans", "Noto Sans", sans-serif;
}

h6, p, li, summary {
    font-family: "Open Sans", "Noto Sans", "Roboto", sans-serif;
}

h2 {
    font-size: 1.7rem;
    font-weight: bold;
}

h3 {
    font-size: 1.5rem;
    font-weight: bold;
}

h4 {
    font-size: 1.3rem;
    font-weight: bold;
}

h5 {
    font-size: 1.1rem;
    font-weight: bold;
}

h6 {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
    line-height: 1.5rem;
    margin: 1rem;
    padding: 0rem;
}

p, li {
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
}

p.nullachtREM, li.nullachtREM {
    font-size: 0.8rem;
    font-weight: normal;
    font-style: normal;
}

p.nullneunREM, li.nullneunREM {
    font-size: 0.9rem;
    font-weight: normal;
    font-style: normal;
}

p.einseinsREM, li.einseinsREM {
    font-size: 1.1rem;
    font-weight: normal;
    font-style: normal;
}

p.einszweiREM, li.einszweiREM {
    font-size: 1.2rem;
    font-weight: normal;
    font-style: normal;
}

p.einsdreiREM, li.einsdreiREM {
    font-size: 1.3rem;
    font-weight: normal;
    font-style: normal;
}


/*************************************************************************************/
/* MEDIA REQUEST *********************************************************************/
/*************************************************************************************/


/* SMARTPHONE ************************************************************************/

    header, nav, nav > ul > li, #seite1a, main, #seite1b, #mitte, #inhalt, #ende, footer {
        display: block;
    }

    #monuments {
        display: none;
    }

    #seite1, main, #seite2, footer {
        padding: 0.5rem;
        border-radius: 0.25rem;
    }

    #hvz > ul > li, #seite1, main, #seite2 {
        padding: 0.5rem;
        box-shadow: 0 0 1px black inset;
    }

    #hvz > ul > li > ul > li {
        border-radius: 0.25rem;
        padding: 0.25rem;
        box-shadow: 0 0 1px black inset;
        list-style-type: none;
    }
    
    #mitte, #ende {
        text-align: center;
    }

    footer {
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 1);
    }

    footer {
        margin-bottom: 0;
    }

    #hvz > ul > li, #seite1, main, #seite2 {
        padding: 0.5rem;
        box-shadow: 0 0 1px black inset;
    }


/* SCHMALER BILDSCHIRM ****************************************************************/


    @media only screen and (min-device-width: 40rem) {
            
    header {
        margin: 0;
     }
        
    #DAtext {
        max-width: 60vw;
        margin-bottom: 0rem;
    }
        
    #DAlogo {
        margin-top: 1rem;;
    }

    #DAtext {
        max-width: 60vw;
        margin-bottom: 0rem;
    }
        
    #monuments {
        display: inline-block;
        margin-left: 1rem;
    }
        
        /* Navigationsleiste */
        /*********************/
  
    #hvz {
        text-align: center;
        margin-top: 0; 
        margin-bottom: 1.5rem;
        margin-right: 4rem;
        margin-left: 4rem;
     }  
       
    #hvz > ul > li {
        margin-top: 0.25rem; 
        margin-right: 0.5rem;
        margin-bottom: 0.25rem;
        margin-left: 0.5rem;
        display: inline-block;
        vertical-align: text-top;
        padding: 0.75rem;
        border-radius: 50%;
    }
           
    #hvz > ul > li > ul {
        display: none;
        position: absolute;
        z-index: 333; /* notwendig? */
        right: -6rem;
    }
        
    #hvz > ul > li > ul > li {
        text-align: left;
        padding-left: 1rem;
    }
        
    #hvz > ul > li:hover, #hvz > ul > li:focus {
        position: relative;
    }
        
    #hvz > ul > li:hover > ul, #hvz > ul > li:focus > ul {
        display: block;
    }
        
    #hvz > ul > li:hover > ul > a, #hvz > ul > li:focus > ul > a {
        display: block;
    }
               
    
        /* Ende der Navigationsleiste */
        /******************************/
   
        
    .element, footer, #inhalt {
        padding: 1rem;
        margin: 0.5rem;
    }
                
    #mitte, #ende{
        align-self: center;
     }  
        
    footer {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
     }
        
    body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "header header"
                             "nav    nav"
                             "eins   zwei"
                             "drei   vier"
                             "fuenf  sechs"
                             "sieben acht"
                             "neun   zehn"
                             "elf    zwoelf"
                             "mitte  mitte"
                             "inhalt inhalt"
                             "ende   ende"
                             "footer footer";
    }

    header {
        grid-area: header;
    }

    #hvz {
        grid-area: nav;
    }

    #E1 {
        grid-area: eins;
    }

    #E2 {
        grid-area: zwei;
    }

    #E3 {
        grid-area: drei;
    }

    #E4 {
        grid-area: vier;
    }

    #E5 {
        grid-area: fuenf;
    }

    #E6 {
        grid-area: sechs;
    }

    #E7 {
        grid-area: sieben;
    }

    #E8 {
        grid-area: acht;
    }

    #E9 {
        grid-area: neun;
    }

    #E10 {
        grid-area: zehn;
    }

    #E11 {
        grid-area: elf;
    }

    #E12 {
        grid-area: zwoelf;
    }

    #mitte {
        grid-area: mitte;
    }
        
    #inhalt {
        grid-area: inhalt;
    }
        
    #ende {
        grid-area: ende;
    }

    footer {
        grid-area: footer;
    }
}

/* MITTLERER BILDSCHIRM ****************************************************************/

@media only screen and (min-device-width: 50rem) {
                 
    #seite1 {
        margin-top: 0.5rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        margin-left: 1rem;
     }
    
    main {
        margin-top: 0.5rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        margin-left: 0.5rem;
     }
    
    #seite2 {
        margin-top: 0.5rem;
        margin-right: 1rem;
        margin-bottom: 0.5rem;
        margin-left: 0.5rem;
     } 
    
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "header header header"
                             "nav    nav    nav"
                             "eins   zwei   drei"
                             "vier   fuenf  sechs"
                             "sieben acht   neun"
                             "zehn   elf    zwoelf"
                             "mitte  mitte  mitte"
                             "inhalt inhalt inhalt"
                             "ende   ende   ende"
                             "footer footer footer";
    }  


/* BREITER BILDSCHIRM ****************************************************************/

@media only screen and (min-device-width: 70rem) {
           
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas: "header header header header"
                             "nav    nav    nav    nav"
                             "eins   zwei   drei   vier"
                             "fuenf  sechs  sieben acht"
                             "neun   zehn   elf    zwoelf"
                             "mitte  mitte  mitte  mitte"
                             "inhalt inhalt inhalt inhalt"
                             "ende   ende   ende   ende"
                             "footer footer footer footer";
    }                        
}
    

/* BREITER BILDSCHIRM ****************************************************************/

@media only screen and (min-width: 75rem) {
           
    body {
        display: grid;
        grid-template-columns: 1fr 16fr 16fr 16fr 16fr 1fr;
        grid-template-areas: "header header header header header header"
                             "nav    nav    nav    nav    nav    nav"
                             "frei1  eins   zwei   drei   vier   frei2"
                             "frei1  fuenf  sechs  sieben acht   frei2"
                             "frei1  neun   zehn   elf    zwoelf frei2"
                             "mitte  mitte  mitte  mitte  mitte  mitte"
                             "inhalt inhalt inhalt inhalt inhalt inhalt"
                             "ende   ende   ende   ende   ende   ende"
                             "footer footer footer footer footer footer";
    }                        
            
    #frei1 {
        grid-area: frei1;
    }

    #frei2 {
        grid-area: frei2;
    }
        
}