/* Browser-Defaults zurücksetzen mit Universalselektor */
* {margin: 0px; padding: 0px; border: 0px;}

/* Richard's Trick */
html { height: 100.5%; font-size: 62.5%;}
/* html { height: 100.5%; font-size: 100.5%;} */

/* */
body{ 
/*     width:960px; */
    background:  lightgray;
    color:       black; 
    font-family: Arial, sans-serif;
/*     font-size:   1.0em;} */
    font-size:   1.4em;
/*     overflow: hidden; */
}
    
div{
    margin: 1px; 
    padding: 1px 1px;
/*    font-size: 1em;*/
}

div.title {
    width:99%;
    border:solid 1px #804000;}
    

h1, h2, h3 {padding: 0.0em 0.5em; font-size: 1.0em;}

p {margin-top: 0.2em; margin-bottom: 0.5em; font-size: 1.0em}

img             {margin: 5px 10px;}

h1 img, h2 img, h3 img {margin: 5px 10px 0px 0px;}
.subinhalt1 img {margin: auto;}

img.main {
 width: 45%;
}
img.lk {
 width: 95%;
}
img.bl {
 width: 75%;
}

table  {width: 98%; border-collapse: collapse; border: 0px solid #000;
        margin: 0.5em 0em; text-align: right; table-layout: fixed;
        background-color:#eeeeFF; 
} 
table#altersgruppen {width: 33%; float:left;}
table#altersgruppen col.a {width: 40%;}
table#altersgruppen td {padding: 0.1em 0.5em;}

/*CSS - Bild vergrößern mit dem „Checkbox Hack”*/
input {margin: auto;}
input[type="checkbox"].zoom {
 display: None;
 margin: auto;
}
input[type="checkbox"].zoom ~ img {
 border: Solid 1px #000000;
/*  cursor: Pointer; */
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transition: transform 0.7s;
 max-width: 100%;
 height: auto;
 margin: auto;
}
input[type="checkbox"].zoom:checked ~ img {
 transform: scale(1.5);
/*  transform-origin:top left;
  height: 100vw;
  width: 100vh; */
 cursor: zoom-out;
 cursor: -moz-zoom-out;
 cursor: -webkit-zoom-out;
 margin: auto;
}


ol{
    list-style-position: inside; margin-top: 0.2em; margin-bottom: 0.5em;
}
ul{
    list-style-type: square;
    list-style-position: inside;
    margin-top: 0.2em; margin-bottom: 0.5em;
/*   list-style-image: url("bilder/dummy.jpg"); */
}
li {}

.w10  {width: 10%;}
.w25  {width: 25%;}
.w33  {width: 33%;}
.w40  {width: 40%;}
.w50  {width: 50%;}
.w67  {width: 67%;}
.w75  {width: 75%;}
.w90  {width: 90%;}
.w100 {width: 100%;}
.mw100 {width: 100%; height:auto;}
.mh100 {height:100%;width: auto;}

.left   {text-align: left;}
.center {text-align: center;}
.right  {text-align: right;}

.marginauto {width: 90%; margin: auto;}

a           { text-decoration: none;      color:#000080;}
/* a:link	 	{ text-decoration: underline;   color:#0000AA; } */
a:hover	 	{ text-decoration: underline; color:blue; opacity: 0.7;}
/* a:visited	{ text-decoration: none; 		color:purple; } */
a:focus	    { text-decoration: underline; color:blue; }
/* a:active	{ text-decoration: underline; color:black; } */

h2 a       {text-decoration: none; color: white;}
h2 a:hover {text-decoration: none; color: yellow; opacity: 1.0;}
h2 a:focus {text-decoration: none; color: yellow;}


             
	           
div.zitat { 
    width:50%; 
    text-align:center; 
    font-size:16px; 
    background-color:#FFFFFF; 
    border:solid 2px green; 
    padding:5px; 
    margin: 5px auto 3px auto;
}
div.zitat2 { background-color:#FFFFFF; border:solid 1px blue; padding:5px; margin:6px}



.menupkt2 { 
    width: 270px;
/*     min-height: 2em; */
    background-color:#0000FF; 
    padding: 0.3em 0.1em; /*5px 1px; */
    margin:1px; 
/*     margin-left:5px; */
    font-family:Arial; 
    font-size:1.6em; 
    text-align:center; 
    color:#FFFFFF; 
}
.menupkt2 a       {color: #FFFFFF; text-decoration: none;}
.menupkt2 a:hover {color: yellow!important;  text-decoration: none;}
	
.menupkt3 { 
    width: 270px; 
/*     min-height: 2em; */
    background-color:#008800; 
    padding: 0.3em 0.1em; /*5px 1px; */
    margin:1px;
    font-family:Arial; 
    font-size:1.6em; 
    text-align:center 
}
.menupkt3 a       {color: #FFFFFF; text-decoration: none;}
.menupkt3 a:hover {color: yellow;  text-decoration: none;}
.menupkt3 a:active {color: orange; text-decoration: none;}



#menu3, #menu_est {
    display: flex;
    flex-direction: row;
}
.subinhalt2 #menu3, .subinhalt2 #menu_est {
    display: flex;
    flex-direction: column;
}

#content #menu_est .menupkt2, #content #menu_est .menupkt3 {min-height: 2.4em; width: 180px; font-size:1.0em; }
/* #content #menu3 .menupkt2:hover {width: 180px; font-size:1.0em;} */

#content #menu3 .menupkt3       {width: 180px; font-size:1.0em; }
/* #content #menu3 .menupkt3:hover {width: 180px; font-size:1.0em;} */

#mp1:target,#mp2:target,#mp2a:target,#mp3:target,#mp4:target {opacity: 0.7;}

#mp1:target  a {color: orange;}
#mp2:target  a {color: orange;}
#mp2a:target a {color: orange;}
#mp3:target  a {color: orange;}
#mp4:target  a {color: orange;}

.menupkt1:hover,
.menupkt2:hover,
.menupkt3:hover {opacity: 0.7;}



/*      #archiv:not(:target) .inhalt,
        #archiv:not(:target) .hide,
        #archiv:target .show   {display: none;}
        #archiv:target .inhalt {display: flex;}*/


	           
.inhalt {
    display: flex;
    flex-direction: row;
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
    padding: 5px;
    margin:  2px;
    background-color:#FFFFDD;
    max-height: 800px;
    overflow-y: auto;
/*     overflow-style: move; */
/*     z-index: 1; */
}

.subinhalt1 {
    display: flex;
    flex-direction: column;
    width: 66%;
/*     overflow: hidden; */
}
.subinhalt1 div.zitat {width:80%;}

.subinhalt2 {
    display: flex;
    flex-direction: column;
    width: 32%;
/*     overflow: hidden; */
    text-align: center;
}
.subinhalt2 h2, 
.subinhalt2 h3 {padding: 20px;}


.show,
.hide {
padding:0px 15px;
background: rgb(254, 164, 0);
box-shadow:none!important;
color:#fff;
/* font-size: 1em; */
font-weight:bold;
text-decoration: none;
}
.show:hover,
.hide:hover {
background: rgb(255, 214, 118);
color: #fff!important;
transition: 0.2s all ease-in-out!important;
text-decoration: none;
}

#wrapper { 
    display: flex;
    flex-direction: column;
    position: relative; 
    width:960px;
    margin:auto; 
    border:  solid 0px #000000;
    padding: 0px;
    background: #FFFFDD;}
    
#banner {
    height:89px;
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
    opacity: 0.7;
    overflow:hidden;
}
#banner a, #banner img {padding:0px;margin:0px;}
#banner a:hover {opacity: 0.85;}

#logo{
    position: absolute; 
    top: 34px; left: 8px;
    height: 110px;
    border: solid 2px #FFFFDD;
    border-radius: 55px;
    margin: 0px;
    padding: 0px;
    opacity: 1.0;
}
#subbanner{
    position: absolute; 
    top: 8px; right: 8px;
    border:solid 2px #804000;  
    padding: 1.8px;
    background-color:#FFFFDD;
    opacity: 0.8;
    color: gray;
    font-size: 2em;
    text-align:center; 
}
#subbanner a       {text-decoration: none;}
#subbanner a:hover {text-decoration: none; opacity: 0.5;}

#header {
    display: flex;
    flex-direction: row;
    margin-left: 110px;
    border: 0px;
    padding: 1px;
    max-height: 150px;
    overflow: hidden;
}
#spruch {
    width: 35%;
    font-size: 1.2em;
    text-align:center;  
    background-color: #FFFFFF; 
    border: solid 2px green;
    padding:5px; 
    margin:1px 2px 1px 15px;
}
.aktuell{
    width:18%;
    text-align: center;
}

#container {
    width: 100%;
    display: flex;
    flex-direction: row;
}
#sidebar{
    display: flex;
    flex-direction: column;
    width:9%;
    margin: 0px auto;
    overflow: hidden;
    background-color: #e4c5a8;
}
#sidebar a, #sidebar img {max-width:100%;margin:0px 0px 0px 0px;padding:0px; background: #e4c5a8;}

#menubar{
    display: flex;
    flex-direction: column;
    width: 90%;
    justify-content: flex-start;
    overflow:hidden;
    text-align: center;
}

#footer{
/*     height:30px; */
    height:60px;
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 10px 0px;
    overflow:hidden;
    text-align: right;
    background: #e4c5a8;
    opacity: 0.6;
/*     z-index: -10; */
}
#footer a {margin: 0px 10px;}

#wrappercontent {
    position:relative; 
    width: 960px; 
    margin:auto; 
    padding: 0px; 
    background: #e4c5a8;
}
#content {
    display: flex;
    flex-direction: column; 
/*    justify-content: center;
    align-items: center;*/
    width: 940px; 
/*     margin: auto;  */
    padding: 5px 10px ; 
    background: #f0ffff; 
    font-size: 1.5em;
    z-index: 10;
}
#content div.mitte {margin: auto; width: 100%;}
#content label {margin: auto; }
#content img {margin: auto; }
#content h1 {padding: 0.6em 0em 0.4em; font-size: 1.8em;}
#content h2 {padding: 0.5em 0em 0.3em; font-size: 1.6em;}
#content h3 {padding: 0.4em 0em 0.2em; font-size: 1.4em;}
#content h4 {padding: 0.3em 0em 0.2em; font-size: 1.2em;}
#content .zitat {font-size: 1.0em;}


img.zoom {
 border: 2px solid #AAA;
/*  width: 33%; */
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(2.0, 2.0);
/*  transform-origin:top left; */
 -moz-transform: scale(2.0, 2.0);
 -webkit-transform: scale(2.0, 2.0);
 -o-transform: scale(2.0, 2.0);
 -ms-transform: scale(2.0, 2.0);
}

hr {
 background: #000080;
 border: none;
 color: #000080;
 height: 1px;
 width: 100%;
 margin: 5px 0px;
} 

@media only screen and (max-device-width: 768px) {
    #wrapper, #wrappercontent, #content {
        width:100%; 
    }
    #content div.mitte {width: 75%;}
    .mw100 {max-width:auto;max-height:100%;
    }
}
@media only screen and (max-device-width: 480px) {
    #wrapper, #wrappercontent, #content {
        width:100%; 
    }
    #content div.mitte {width: 75%;}
    #container {flex-direction: column;}
    #sidebar {display:none;}
    #menubar {flex-direction: column; width:100%;}
    .mw100 {max-width:auto;max-height:100%;
    }
}