/* 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_eb.css übernommen und angepasst 27.3.2019 nur für eb.htm bzw index.htm */
/* für style_ebas.css übernommen und angepasst 15.6.2020 eb mit aside, style_eb ohne aside */
/* History 2020 +: 26.11.2020 23.12.2020 (table) 22.10.2021 */
* {
    margin: 0;
    padding: 0;
}

body {
 /*   background-color: silver;  */
    text-align: center;
    font-family: arial, sans-serif;
    background-image: url(eb_bilder/IMG_2782_3MO_60_gauche.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: darkgrey;   */
    text-align: left;
    width: 900px;                                                             /*   900  wrapper  */
    margin: 0 auto;
    background-image: url(eb_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(eb_bilder/ebhead_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: 10px;
    text-shadow: 3px 3px 6px 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;
    text-shadow: 1px 1px 4px black;
}

#logotext2 {
    font-size: 1.5em;
    font-weight: bold;
    font-style: italic;
    text-shadow: 1px 1px 4px black;
}

#navoben {
    color: white;          /* alles wie footer    */
    clear: both;
    line-height: 1.8em;
    height: 1.8em;
    font-size: 0.9em;
  /*  background-image: url(bilder/durchsichtiges-grau.png);   */
    background-color: #B21120;
    text-align: center;     /* evtl left oder center  ***  */
    
}

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

#navoben li {
    display: inline-block;
}

#navoben a {
    display: inline-block;
    width: 112px;               /* bei 5 links 140.5px, jetzt sind es 6   */
    font-weight: bold;
    line-height: 1.8em;
    color: white;
    background-color: #B21120;
    text-decoration: none;
    padding-left: 14px;
    padding-right: 20px;
}

#navoben a:hover {
    color: black;
    text-decoration: underline;
    background-color: #F4B582;      /*   #883032;    */
}

#navoben li.aktiv a {
    background-color: #660033;   /*   #883032;   */
    color: white;                     /*   lightgray   */
    cursor: none;
    text-decoration: none;
}

#section ul {
    list-style-type: none;   
    margin-bottom: 1em;
}

#section li {
    padding-top: 0.7em;
}


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

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

h3 {
    font-size: 1.0em;
 /*  color: #880032;  /* bordeauxrot  */
 /*  color: #835431;   ursprünglich */
    font-style: italic;
    color: #A5282E;
    padding-bottom: 0.2em;
    padding-top: 0.6em;
}

href {
    text-decoration: underline;     
    }

article {
/*    background-color: lightblue;  */
    width: 850px;                                                         /*  400  article  */
    float: left;                  
    margin-left: 40px;
    margin-right: 10px;
    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: underline;
    color: #B21120;
    font-weight: normal;
}

article a:hover {
    color: #880032;
    text-decoration: underline;
    font-weight: bold;
}

table {
    margin: 0 ;
    text-align: left;
}

td, th {
       padding-right: 1.5em;
       font-weight: normal;
}

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

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: #B21120;
    font-weight: bold;
}
aside a:hover {    
    color: #880032;
    text-decoration: underline;
}

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

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

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

footer a:hover {
    color: black;
    text-decoration: underline;
    background-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;
}

.bordeaux  {
    color: #B21120;
}

.italicbordeaux {
    font-style: italic;
    color: #B21120;
}

.italicbordeauxbold {
    font-style: italic;
    font-weight: bolder;
    color: #B21120;
}

.bordeauxbold {                                 /*  21.11.2020  */
    font-weight: bolder;
    color: #B21120;
}


.lightbordeaux {
    color: #A3737F;
}


.lightbordeaux {
    color: #A3737F;
}

.rubinrotbold {                  /* Rubinrot fett  RAL 3003 */
    color: #861A22;
    font-weight: bolder;
}

.purpurrotbold {                  /* Purpurrot fett RAL 3004 */
    color: #6B1C23;
    font-weight: bolder;
}

.rubinrotbgc {                    /* Backgroundcolor Rubinrot RAL 3003 */
    background-color: #861A22;
    font-weight: bolder;
    color: white; 
    text-align: center;
}

.purpurrotbgc {                   /* Backgroundcolor Purpurrot RAL 3004 */
    background-color: #6B1C23;
    font-weight: bolder;
    color: white;
    text-align: center;
}
 
#umbruch {
    display: none;
}
 
.bildu {
    float: left;
    width: 354px;
    height: 118px; 
    margin-right: 20px;
    border: 1px #B21120 solid;
}
    
.bilduh {
    float: left;
    width: 354px;
    height: 285px; 
    margin-right: 20px;
    border: 1px #B21120 solid;
}

.bildc {
    float: none;
    height: 118px; 
    border: 1px #B21120 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%;
    }

}
@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: 100%;    

    }
    
 
    #wrapper,
    header {
        width: 100%;  
    }
       
    header {
        background-image:
        url(eb_bilder/ebhead_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: #880032;
    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: #C06467;
        background-image:  none;
        text-decoration: underline; 
    }

    #navoben li.aktiv a {
        background-color: #B21120;
        color: white;
        text-decoration: none;
    }

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

    .menu-button:hover {
        color: black;
        background-color: #A3737F;
    }
    
   
    h1 {
          padding-top: 20px;
    }
    /*    aside {
    /*    background-color: orchid;   * /
        float: none;
        clear: both; 
        width: 90%;
        margin-left: 2em;
        margin-bottom: 1em;
        margin-top: 20px;
    }
    
    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(eb_bilder/ebhead_720_150_80.jpg); 
        width: 100%;
        height: 150px;  
    }
    
    #logotext {
        padding-top: 14px;
    }
    
        #wrapper,
    header {
        width: 100%;
    }
    
     .menu-button {
        left: 0.8em; 
        top: 100px;
    }
         
    #wrapper {
        background-image: none;
        background-color: hsla(0, 50%, 100%, 0.7);
    }
        
    h1 {
          padding-top: 20px;
    }
  
    #navoben a {
    line-height: 1.6em;
    }
 /*
    
    aside {
    /*    background-color: orchid;  * /
        float: none;
        clear: both; 
        width: 95%;
        margin-bottom: 1em;
        margin-left: 1.4em;
    }
    
    aside img {
        width: 90%;
    }
      
    aside p {
        color: #A5252E;
        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) {
        
    header {
        background-image:
        url(eb_bilder/ebhead_500_150_80.jpg);   
        height: 150px;  
        width: 100%;  
    }
    
    article img {
    width: 100%;  
	height: auto;
    }
    
     #umbruch {
        display: block; 
        text-align: right;
        color: white;
        padding-right: 10px;
        text-shadow: 1px 1px 4px black;
        font-size: 1.1em;
    }
    #logotext2 {
        display: none;
    }
    /*
      #umbruch {
    display: none;
    }
*/
    .doku img {
    width: 140px;
    height: 190px;
    }
    
  
}