/* 2-spalten-layout gekürzt rwd 7.11.2017 */
/* History 2017: 08.10.17 / 12.11.17 */
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #5da7fe;
    text-align: center;
    font-family: arial, sans-serif;
    background-image: url(bilder/IMG_W_0131_AK70.JPG);
    background-attachment: fixed;
/*    background-size: 2736px 1824px;   */
    background-repeat: no-repeat;   
    /* für alte IE-Versionen zwecks Zentrierung */
    text-align: center;    
}

 /* für alte Browser-Versionen  */
header, nav, footer, article {
    display: block;
}

#wrapper {
/*    background-color: darkgrey;   */
    text-align: left;
    width: 900px;
    margin: 0 auto;
    background-image: url(bilder/hintergrund-inhalt-1.png);
     /* für alte IE-Versionen zwecks Zentrierung */
    text-align: left;  
}

      /* mit Verlaufsgrafik über dem Hintergrundbild rechtsbündig */
header {
  /*   background-color: yellow;   */
    width: 900px;
    height: 150px;
    margin: 0 auto;
    background-image:
        url(bilder/IMG_4485_K_900_300_80_So.JPG);   
                    /*  url(bilder/hintergrund-kopf.png);   */
    background-repeat: no-repeat; 
    background-position: left, center;
    }

header p {
 /*    background-color: yellowgreen;   */
    text-align: left;
    color: white;
    padding-right: 20px;
    text-shadow: 1px 1px 4px black;
    font-size: 1.8em;
    font-style: italic;
}

header a{
    color: white;
    text-decoration: none;
}

header a:hover {
     text-decoration: underline;
}

#logotext {
    padding-top: 35px;
    font-size: 2.8em;
    font-weight: bold;
    font-style: normal;
}

#navoben {
    height: 1.8em;
  /*  background-image: url(bilder/durchsichtiges-grau.png);   */
    background-color: #5da7fe;
}

#navoben ul {
    list-style-type: none;
}

#navoben li {
    display: inline-block;
}

#navoben a {
    display: inline-block;
    width: 186.5px;
    font-weight: bold;
    line-height: 1.8em;
    color: white;
    background-color: blue;
    text-decoration: none;
    padding-left: 35px;
}

#navoben a:hover {
    color: lightblue;
}

#navoben li.aktiv a {
    background-color: deepskyblue;
    color: white;
    cursor: none;
}

h1 {
    font-size: 1.4em;
    font-style: italic;
    color: darkblue;
    padding-bottom: 0.2em;
}

h2 {
    font-size: 1.2em;
 /*  color: #880032;   bordeauxrot  */
 /*  color: #835431;   ursprünglich */
    color: darkblue;
    padding-bottom: 0.2em;
    padding-top: 0.6em;
}

article {
/*    background-color: lightblue;  */
    width: 800px;
    float: left;
    margin-left: 40px;
    margin-top: 20px;
    margin-bottom: 20px;    
}

article p {
/*  background-color: yellow;   */
    line-height: 1.4em;
    padding-bottom: 0.5em;
}

article ul, article ol {
    padding-bottom: 1em;
    padding-left: 2em;
}

article li {
    line-height: 1.4em;
}

article a {
    text-decoration: none;
    color: mediumblue;
    font-weight: bold;
}

article a:hover {
    color: blue;
    text-decoration: underline;
}

aside {
 /*  background-color: coral;   */
    width: 5px;
    float: right;
    margin-top: 20px;
}

aside p {
 /*   background-color: yellowgreen;  */
    color: white;
    padding-right: 2px;
    padding-bottom: 10px;
    text-shadow: 1px 1px 4px black;
    font-size: 1.4em;
    font-weight: bold;
    font-style: italic;
}

aside li {
    padding-bottom: 20px;
    list-style-type: none;
}

aside a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}
aside a:hover {
    color: lightblue;
}

aside img {
    border: 1px silver solid;
    box-shadow: 5px 5px 5px silver;
    width: 175px;
    height: 65px;
}

aside a img:hover {
    border: 5px deepskyblue solid;
}

/* 
aside a img.belegung:hover {
    border: 5px blue solid;
}
*/

footer {
    color: white;
    clear: both;
    line-height: 1.8em;
    height: 1.8em;
    font-size: 0.9em;
  /*  background-image: url(bilder/durchsichtiges-grau.png);   */
    background-color: blue;
    text-align: center; 
}

footer a{
    text-decoration: none;
    color: white;
}

footer a:hover {
    color: lightblue;
}

 /* für Nutzung über 900px Menu-Button ausblenden */

.menu-button {
    display: none;
}

.schriftklein {
    font-size: 0.9em;
}
   
.slicknav_menu {
    display: none;
}       

.italic {
    font-style: italic;
}

.brown  {
    color: darkblue;
}

.italicbrown {
    font-style: italic;
    color: darkblue;
}

.lightbrown {
    color: lightblue;
}

#umbruch {
    display: none;
}

#galerie {
    width: 800px;
}

.doku img {
    border: 1px silver solid;
    box-shadow: 5px 5px 5px silver;
/*    width: 167px;
    height: 197px;    */
    width: 210px;
    height: 285px;
}

.doku img:hover {
    border: 5px silver solid;
    box-shadow: none; 
}

/* Optimierung für Desktops und Co > 2736px bzw 1824px */
 
@media only screen and (min-width: 2736px)     {
        
    body {
    background-size: 100% 100%;
    }

}
@media only screen and (min-height: 1824px)     {
        
    body {
    background-size: 100% 100%;
    }
}

/* Optimierung für Tablets und Co  900px = 56.25em */
/*                  und mindestens 720px = 45em    */

/* @media only screen and (min-width: 45em) and (max-width: 56.25em) */ 
@media only screen and (max-width: 900px) {

    
    article {
    /*    background-color: orange;   */
        width: 95%;    

    }
    
    #galerie {
        width: 100%;
    }
    
    #wrapper,
    header {
        width: 100%;  
    }
       
    header {
        background-image:
        url(bilder/IMG_4485_K_900_200_80_So.JPG);   
        height: 200px;
    }
    
    #navoben {
        display: none;   
        
        float: none;
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-bottom: 0;
    }
    
    #navoben a {
    display: block;    
    width: 100%;
    font-weight: bold;
    line-height: 1.7em;
    color: white;
    background-color: blue;
    text-decoration: none;
    padding-left: 40px;
    }

  /*    #steuerung {    */
    #nav-menu:target #navoben {
        display: block;
    }

    #nav-menu:target .menu-button-open {
        display: none;
    }

    #navoben li {
        width: 100%;
        border-top: 2px lightblue solid;
        margin-top: 0;
    }

    #navoben ul ul {
        margin-bottom: 0;
    }

    #navoben a {
        padding: 0.5em;
        text-decoration: none;
    }

     #navoben a:hover {
        color: black;
        background-color: blueviolet;
        background-image:  none;
    }

    #navoben li.aktiv a {
        background-color: deepskyblue;
        color: white;
    }

     .menu-button {
        display: block;
     /*      background-color: white;     */
        background-color: lightblue;     
        background-image: url(bilder/menu-i32-transp.png);
        background-repeat: no-repeat;
        height: 14px;
        width: 14px;
        position: absolute;
        right: 1.2em;
        top: 80px;
        padding: 0.5em;
        color: white;
        cursor: pointer;
        text-decoration: none;
    }

    .menu-button:hover {
        color: black;
        background-color: deepskyblue;
    }
    
    h1 {
          padding-top: 20px;
    }
    
    aside {
    /*    background-color: orchid;   */
        float: none;
        clear: both; 
        width: 90%;
        margin-left: 2em;
        margin-bottom: 1em;
    }
    
    aside img {
        width: 100%;
        height: auto;
    }
     
    aside img.belegung {
        width: 175px;
    } 
    
    aside li {
        display: inline-block;
        padding-right: 15px;
    }
    
    aside li.belegung {
        display: inline-block;
    }

    #umbruch {
    display: none;
    }
}

/* Optimierung für Handies und Co 720px = 45em */

@media only screen and (max-width: 720px) {
        
    body {
        background-image: none;
    }
    
    article {
     /*   background-color: hsla(0, 50%, 100%, 0.7);   */
        width: 90%;     
        float: none;
        margin: 0 auto;
    }
  
    #navoben {
        display: none;
    }    
    
    header {
        background-image:
        url(bilder/IMG_4485_K_720_150_80_So.JPG); 
        width: 100%;
        height: 150px;  
        font-style: italic;
    }
    
    #logotext {
        padding-top: 14px;
        font-style: normal;
    }
    
        #wrapper,
    header {
        width: 100%;
    }
    
    #wrapper {
        background-image: none;
        background-color: hsla(0, 50%, 100%, 0.7);
    }
        
    h1 {
          padding-top: 20px;
    }
  
    #navoben a {
    line-height: 1.6em;
    }

     .menu-button {
        right: 0.9em; 
        top: 80px;
    }
     
    aside {
    /*    background-color: orchid;  */
        float: none;
        clear: both; 
        width: 95%;
        margin-bottom: 1em;
        margin-left: 1.4em;
    }
    
    aside img {
        width: 90%;
    }
      
    aside p {
        color: darkblue;
        text-shadow: 1px 1px 4px silver;
    }
     
    aside li {
        display: inline-block;
    }

    aside a {
    	color: darkcyan;
	}    

    #umbruch {
    display: none;
    }
    
}

/* Optimierung für Handies und Co 400px = 25em */

@media only screen and (max-width: 400px) {
        
    header {
        background-image:
        url(bilder/IMG_4485_K_500_150_80_So.JPG);   
        height: 150px;  
        width: 100%;  
    }
    
    article img {
    width: 100%;  
	height: auto;
    }
    
    #normal {
        display: none;
    }
    
    #umbruch {
        display: block; 
     /*   text-align: right;   */
        color: white;
        padding-right: 20px;
        text-shadow: 1px 1px 4px black;
        font-size: 1.1em;
    }
    .doku img {
    width: 140px;
    height: 190px;
    }
}