/* 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.  */
/* als style_adasm.css Style ada Schrittmacher text-align: center 19.12.2022 17.09.24 */
/* als style_adasm22.css Style ada Schrittmacher für 2022-Version  18.03.2026 */ 
* {
    margin: 0;
    padding: 0;
}

body {
/*    background-color: lightblue;  /*     */
    text-align: center;
    font-family: arial, sans-serif;
    background-image: url(ada_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 */
}

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

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

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

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: gainsboro;
}

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

#navoben li {
    display: inline-block;
}

#navoben a {
    display: inline-block;
    width: 165.5px;                             /* 140.5 px */
    font-weight: bold;
    line-height: 1.8em;
    color: white;
    background-color: #744726;
    text-decoration: none;
    padding-left: 10px;                         /* 35 px   ***** */
}

#navoben a:hover {
    color: #F4B582;
}

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

h1 {
    font-size: 1.5em;
    font-style: italic;
    color: #754032;
    padding-bottom: 0.2em;
}

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

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

article {
/*    background-color: lightblue;  */
    width: 750px;
    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 {
   /*   background-color: yellowgreen;    */
    text-decoration: underline;
    color: #A36840;
    font-weight: bold;
    font-size: 1em;
}

article a:hover {
    color: #744726;
    text-decoration: underline;
    font-size: 1em;
}

/*    ***********************************************

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

aside p {
 /*   background-color: yellowgreen;  **
    color: white;
    padding-right: 20px;
    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: #F4B582;
}

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

aside a img:hover {
    border: 5px #A36840 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: #744726;
    text-align: center; 
}

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

footer a:hover {
    color: #F4B582;
}

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

.boldbrown  {
    font-weight: bold;
    color: #754032;
}

.italicbrown {
    font-style: italic;
    color: #754032;
}

.italicboldbrown {
    font-style: italic;
    font-weight: bold;
    color: #754032;
}   

.lightbrown {
    color: #F4B582;
}

#umbruch {
    display: none;
}

#galerie {
    width: 800px;
}

.bildu {
    float: left;
    width: 354;
    height: 118; 
    margin-right: 20px;
    border: 1px silver solid;
}
    
.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%;
/*    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%;  
    }
       
    header {
        background-image:
        url(ada_bilder/IMG_0774_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: #744726;
    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 #F4B582 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: #BF6F3A;
        background-image:  none;
    }

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

     .menu-button {
        display: block;
           background-color: white;     
     /*   background-color: #F4B582;   */  
        background-image: url(ada_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: black;
        background-color: #A36840;
    }
    
    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;
   /*      background-color: orange; /*      */
    }
    
    
    
    article {
     /*   background-color: hsla(0, 50%, 100%, 0.7);   */
        width: 90%;     
        float: none;
        margin: 0 auto;
    }
  
    #navoben {
        display: none;
    }    
    
    header {
        background-image:
        url(ada_bilder/IMG_0774_720_150_80.jpg); 
        width: 100%;
        height: 150px;  
    }
    
        #logotext {
        padding-top: 14px;
    }
    
        #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 {
        left: 0.8em; 
        top: 100px;
    }
     

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

    aside a {
    	color: #754032;
	}    

    #umbruch {
    display: none;
    }
    
}

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

@media only screen and (max-width: 400px) {
    
    body  {
  /*      background-color: cyan; /*      */
    }
    
    header {
        background-image:
        url(ada_bilder/IMG_0774_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;
    }
    */
    
      #umbruch {
    display: none;
    }
           
    .doku img {
    width: 140px;
    height: 190px;
    }
    
    
}