/* Aline Ursprung 3-spalten-layout- rwd 06.04.2016              */ 
/* jetzt 2-spalten-layout rwd 11.04.2016  01.09.2016 13.12.2016 */
/* History 2017: 29.01.17 */
/* für style_ada.css übernommen und angepasst 6.3.2019 8.3. 2.4.  6.4. bgc  12.4.  */
/* für style_aud.css übernommen und angepasst 29.06.2021  13.07.2021  12.09.2021   */
/* 23.09.2021  */       
/* Verson gris 14.05.2022, 16.05., 18.05., 22.05.    style_aud_.css  */
* {
    margin: 0;
    padding: 0;
}

body {
/*     background-color: darkviolet;    /*     */
    background-color: #EEECEA; 
    text-align: center;
    font-family: arial, sans-serif;
    background-image: url(audenge_bilder/BG_030_IMG_8246_2763x2072.JPG);    /* background image */
    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: lightblue;  
    background-color: hsla(190,60%,70%,0.7);    
    background-color: lightgrey;    */
    background-color: #EEECEA;
   
    text-align: left;
    width: 900px;
    margin: 0 auto;
    background-image: url(audenge_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;
    margin: 0 auto;
    background-image:
        url(audenge_bilder/IMG_6279_720_150_80.jpg);   
                    /*  url(bilder/hintergrund-kopf.png);   */
    background-repeat: no-repeat; 
    background-position: right, center;
    height: 150px;
}

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

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

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

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

#logotext2 {
    font-size: 1.5em;
    font-weight: bold;
    font-style: italic;
}

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

#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: darkgrey;        /*     (braun #744726) */
    text-decoration: none;
    padding-left: 35px;      
/*	padding: center;   */
}

#navoben a:hover {
    color: black;
    text-decoration: underline;
    background-color: lightgray;             /*             (rötlicheres hellbrau #F4B582) */
}

#navoben li.aktiv a {
    background-color: #909090;        /* helleres grau (helleres braun #A36840) */
    color: black;                     /* darkslategrey */
    cursor: none;
    text-decoration: none;
}

#navoben li.passiv a {
    background-color: darkgray;        /* helleres grau (helleres braun #A36840) */ 
    color: white;                     /*     */ 
    cursor: none;
    text-decoration: none;   
}
  
h1 {
 /*     background-color: hotpink;      */ 
    width: 400px;
    font-size: 1.5em;
    font-style: italic;
    color: dimgrey;                       /* dunkelgrau (dunkelbraun ##754032) */
    padding-bottom: 0.2em;
}

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

h3 {
    font-size: 1.2em;
    color: dimgrey;
    padding-bottom: 0.2em;
    padding-top: 0.4em;
}

article {
    background-color: #EEECEA;       /* lightgrey;   */
    
    width: 430px;                    /* 430 21.05.22 */
    float: left;
    padding-left:   10px;
    padding-right:  10px;
    padding-top:    20px;
    padding-bottom: 20px;    
}


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

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

article li {
    line-height: 1.4em;
}

article a {
  /*   background-color: yellow;   /*    */
    text-decoration: underline;
    color: slategrey;
    font-weight: bold;
    font-size: 1em;
	
}

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

article img {
   border: 2px silver solid;
   width: 420px;	
 /*   box-shadow: 5px 5px 5px silver;     */
/*    width: 175px;
    height: 65px;    */
}

article a img:hover {
    border: 5px darkgrey solid;
}



aside {
    background-color: #EEECEA;    /* lightgrey   */
    width: 430px;
    float: right;    /* */
    padding-top:   20px;
    padding-left:  10px;
    padding-right: 10px;      
}

aside p {
 /*    background-color: yellowgreen;    /*   */
    color: dimgrey;
 /*   margin: 10px;    */
    font-size: 1em;
    font-weight: normal;
    width: 420px;
}

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

aside a {
   
    text-decoration: underline;
    color: slategrey;               /* Helleres braun */
    font-weight: bold;
    font-size: 1em;
}
aside a:hover {
    text-decoration: underline;
    color: darkgrey;                /* braun */
}

/* ************   */
aside img {
   border: 2px silver solid;
	width: 420px;
/*    box-shadow: 5px 5px 5px silver;    */
/*    width: 175px;
    height: 65px;    */
}

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


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

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

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

footer a:hover {
    color: black;
    text-decoration: underline;
    background-color: lightgrey;    
    
 /*   color: burlywood;        /* helles braun */
}

 /* 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: dimgrey;
}

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

.boldbrown {
    font-style: normal;
    font-weight: bold;
    color: dimgrey;
}
.italicboldbrown {
    font-style: italic;
    font-weight: bold;
    color: dimgrey;
}   

.lightbrown {
    color:  lightgrey;

}

.italboldred {
    font-style: italic;
    font-weight: bold;
                                 /* RAL 3000 = #a72920 or #6b1c23  Feuerrort */     
    color: slategrey;            /* RAL 3004 = #6b1c23 or #701F29  Purpurrot (Ennetbaden) */ 
                                 /* RAL 3003 = #861a22 or #8C393C  Rubinrot  */
}   
.italicboldredvar {
    font-style: italic;
    font-weight: bold;
    font-size: 1.5em;
    color: slategrey;
}
.italicboldred15 {
    font-style: italic;
    font-weight: bold;
    font-size: 1.5em;
    color: slategrey;
}
.italicboldred2 {
    font-style: italic;
    font-weight: bold;
    font-size: 2em;
    color: slategrey;
    
}   

#umbruch {
    display: none;
}
/*
#galerie {
    width: 800px;
}
            */
.bildu {
    float: left;
    width: 354px;
    height: 118px; 
    margin-right: 20px;
    border: 1px silver solid;
}
    
.doku img {
    border: 2px 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%;
/*    background-color: red;    */
    }

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

/* 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: 100%;    

    }
 /*   
    #galerie {
        width: 100%;
    }
    */
    #wrapper,
    header {
        width: 100%;  
    }
       
    #wrapper {
    /*    background-color: lightblue;    
        background-color: hsla(190,60%,70%,0.7);     */
        background-color: #EEECEA; 
       
    } 
    
    header {
        background-image:
        url(audenge_bilder/IMG_6279_900_200_80.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: slategrey;
    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 grey solid;
        margin-top: 0;
    }

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

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

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

    #navoben li.aktiv a {
        background-color: darkgrey;
        color: black;
    }

     .menu-button {
        display: block;
           background-color: #EEECEA;     
     /*   background-color: #F4B582;   */  
        background-image: url(audenge_bilder/menu-i32-transp.png);
        background-repeat: no-repeat;
        height: 14px;
        width: 16px;
        position: absolute;
        left: 1.2em;
        top: 140px;
        padding: 0.5em;
        color: white;
        cursor: pointer;
        text-decoration: none;
    }

    .menu-button:hover {
        color: dimgrey;
        background-color: grey;
    }
    
    h1 {
          padding-top: 20px;
    }
    
    aside {
    /*    background-color: orchid;   */
        float: none;
        clear: both; 
        width: 100%;
   /*    margin-left: 10px;     */
        margin-bottom: 1em;
    }
        /*
    aside img {
        width: 90%;     /* 100 * 
    }
        */
    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;
        background-color: lightblue;    
        background-color: lightgrey; 
        background-color: #EEECEA; 
    }
  
    #navoben {
        display: none;
    }    
    
    header {
        background-image:
        url(audenge_bilder/IMG_6279_720_150_80.jpg); 
        width: 100%;
        height: 150px;  
    }
    
        #logotext {
        padding-top: 14px;
    }
    
        #wrapper,
    header, footer {
        width: 100%;
    }
    
    #wrapper {
        background-image: url(audenge_bilder/hintergrund-inhalt-1.png);
     /*   background-color: lightblue;    
        background-color: hsla(190,60%,70%,0.7);  */
        background-color: #EEECEA; 
      
    }
        
    h1 {
          padding-top: 20px;
    }
  
    #navoben a {
    line-height: 1.6em;
    }

     .menu-button {
        left: 0.8em; 
        top: 100px;
    }
      
    article {
     /*   background-color: hsla(0, 50%, 100%, 0.7);   */
        width: 100%;     /* 90  */
        float: none;
        margin: 0 auto;
    }
    
     article img {
        width: 90%;
    }

    aside {
     /*     background-color: orchid;   */
        background-color: #EEECEA; 
        float: none;
        clear: both; 
        width: 100%;
        margin-bottom: 1em;
     /*   margin-left: 10px;    */
    }
    
    aside img {
        width: 90%;
    }
      
    aside p {
        color: dimgrey;
        text-shadow: 2px 1px 4px silver;
    }
     
    aside li {
        display: inline-block;
    }

    aside a {
    	color: dimgrey;
	}    

    #umbruch {
    display: none;
    }
    
}

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

@media only screen and (max-width: 400px) {
    
    body  {
      background-color: lightgrey;
    }
    
    header {
        background-image:
        url(audenge_bilder/IMG_6279_500_150_80.jpg);   
        height: 150px;  
        width: 100%;  
    }
    /*
    article img {
    width: auto;  
	height: auto;
    }        */
    
   
     #umbruch {
        display: block; 
        text-align: right;
        color: white;
        padding-right: 20px;
        text-shadow: 1px 1px 4px black;
        font-size: 1.1em;
    
    /*         padding-top: 35px;
    font-size: 1.8em;
    font-weight: bold;
    font-style: italic;     */
    }
       
     #umbruch {
    display: none;
    }                /*        */
           
    .doku img {
    width: 140px;
    height: 190px;
    }