/* DATEI: responsive.css */
/* www.esskultur-balance.de*/
/* Kleine Monitore */
body {    margin: 0; padding: 0; color: hsl(0,0%,48%); font-size: 1.2em; font-family: Helvetica, sans-serif; background-color:#e7f7c8;
}



p  { margin-top:0;line-height:125%;
}

h1 {
color:#000000;
font-size: 1.05em;
line-height:95%;
padding-top:0;
margin-top:0.7%;
margin-bottom:0.5%;
}

h5 {
font-size: 0.1em;
line-height:95%;
text-align:left;
}


h4 {
font-size: 0.55em;
line-height:95%;
text-align:right;
}


h2 {
font-size: 1.4em;
line-height:95%;
padding-top:0;
margin-top:1%;
margin-bottom:1%;
}


h3 {
color:#E06000;
font-size: 1.3em;
line-height:99%;
padding-top:0;
margin-top:2%;
margin-bottom:2%;
}

img { width: 98%; height: auto; text-align:center; margin-top:0%}
.reframe { max-width: 96%; margin: 0 auto; vertical-align:top; }
#topline { background: black; color: white; }
#topline p { margin: 0; padding:0 0 20px 0; font-size: 1.6em; text-align: center; line-height: 100%; }

#topline p { margin: 0; padding:0 0 0px 0; font-size: 0em; text-align: center; line-height: 0%; }
/* topline Festlegungen werden bei Bedarf überschrieben */


ul#mainmenu {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack:justify;
        justify-content: space-between;
        margin-left: 0;
        padding-left: 0;
        list-style-type: none}

ul#mainmenu li {

   position: relative;
   width: 48%;
   font-size:0.92em;
   background: #FC8D00;
   margin-right: 1px;
   margin-bottom:1ex;
}

ul#mainmenu li a {
   display:block; padding: 10px; text-decoration: none; color: white;  }

ul#mainmenu ul li {
   background: none; margin-top: 0; display: block; margin-bottom: 1px; }

ul#mainmenu li:hover ul {
   display: block; }

ul#mainmenu ul {
   background: rgba(0,0,0,0.8);
   background: #FC8D00;
   position: absolute; right:0; padding-left: 0; width: 100%;
   display: none;
   z-index:100; }

#sidebar ul { list-style-type:none; padding-left: 1ex }
#sidebar ul ul { margin-top: 1em }
#sidebar li { margin-bottom: 1ex; border-bottom: 1px dotted gainsboro}
#sidebar li li { border-bottom:none}
#sidebar { width: 70% }

#home { background: salmon; color:white; padding: 10px; text-align: center;
/*border-color:black;border-style:dotted;  */
font-weight: bold; cursor: pointer}
footer { background: #FC8D00; height: 40px; color: white; padding-top:10px }

/* Tabletts */
@media only screen and (min-width: 760px) {
        #topline { background: plum; height: 0px; }
/* height muss 0 sein damit topline nicht angezeigt wird oder 30 damit man was sieht*/

        .reframe { max-width: 760px; }

        ul#mainmenu {
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        }

        ul#mainmenu li {
        width: 24%
        }

        #main {
                display:-webkit-flex;
                display:-ms-flexbox;
                display:flex;
                -webkit-justify-content: space-between;
                -ms-flex-pack:justify;
                justify-content: space-between;



        }

        #sidebar { width: 40% }
        #content { width: 100% }

        #content article { width: 48%; float:left; padding: 0.45%;
             /*   border-color:blue;border-style:dotted; */
}
}

/* Mittlere Größe */
@media only screen and (min-width: 980px)  {
        #topline { background: orangered; }
        .reframe { max-width: 980px; }
        #content{ width: 100% }
        #sidebar { width: 30% }

        #content {
                display:-webkit-flex;
                display:-ms-flexbox;
                display:flex;
                -webkit-justify-content: space-between;
                -ms-flex-pack:justify;
                justify-content: space-between;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        }

        #content article {
                width: 32%; float: left;
        }

        #content header {
                height:2.8em;
        }
}

/* Große Monitore */
@media only screen and (min-width: 1280px)  {
        #topline { background: gold; }
        .reframe { max-width: 1280px;    }
        #content{ width: 100%; padding-top:0;padding:1px;}
        /*border-color:black;border-style:dotted;}*/
        #sidebar { width: 26%
        /*border-color:red;border-style:dotted;}*/
        }
        #content article {width: 32%; float:left; padding-top:0;
                /*border-color:black;border-style:dashed;*/
        }

        #content header {height:2.8em;
        }
}