body { margin: 0; padding: 0; font-size: 1.2em; font-family: verdana, helvetica, sans-serif; background-color: rgb(0,0,0)}
img { width: 100%; height: auto; }
img#pianomaeleon {
    width:auto; height:300px;
}
.reframe { max-width: 96%; margin: 0 auto; position: relative; background-color: rgb(0,0,0); } 

#specialMenu {
    display:none;
}

#home a {
    color: lightgrey; text-decoration:none;
}
#topmenuWrapper {
    padding: 2px 5px; box-sizing: border-box; height:36px;
}
#topmenuWrapper > a {
    cursor:pointer; font-size: 24px; font-weight: bold; color:white
}
#topmenuWrapper.open > a:before {
    content: '\2716';
}
#topmenuWrapper.closed > a:before {
    content: '\2630';
}


ul#mainmenu { margin-top: 0;  display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; 
    padding-left: 0; list-style-type: none; background-color: rgb(0,0,0); color: white; box-shadow:0px 2px 3px lightgrey; }

ul#mainmenu li { position: relative; width: 96%; font-size:14px; margin-right: 1px; white-space: nowrap}

ul#mainmenu li a { display:block; padding: 2px 5px; text-decoration: none; color: white; white-space: nowrap; }

ul#mainmenu li a:hover { color: white; background-color: rgb(64,64,64) }   
ul#mainmenu ul { list-style-type: none;}

ul#mainmenu ul li a:hover { color: white; background-color: rgba(255,255,255,0.6); }

#main {padding-top:5px; background-color: rgb(0,0,0)}
#content { padding:5px; box-sizing: border-box; }
#sidebar { padding:5px; box-sizing: border-box;}
#content article { width: 96%; float:none; border: solid 1px grey; margin-top:5px; }

.fotoStory {
    display:flex;
    background-color: #ffffcc; padding: 5px; border-radius: 10px; margin-bottom: 10px;
}
.fotoStory > div:nth-child(1) {
    
    flex:1;
    padding:5px; box-sizing: border-box;
}
.fotoStory > div:nth-child(2) {
    flex:1;
    padding:5px; box-sizing: border-box;
}
.fotoStory > div > img {
    border-radius: 8px;
}

.kachelwand {
    width: 96%;
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    
}

.infoMap {
    width: 99%;
    
}

.infoIcon {
        width:20px; border-radius: 10%;
        position:absolute; 
        cursor: pointer;
    }

.infoWand > div {
        display:block;
        /*border: solid 1px red;*/
    }
    .infoText {
        max-width: 96%; 
    }    
.galerie {
    text-align: center;
}
.kachel {
    width:25%; border-radius:5px; padding: 5px; border: solid 1px lightgrey; margin:5px;
}

.kachel > img {
    width:90%; height:auto; border-radius:4px;
}

.kachel.active {
    background-color: rgb(215,255,215);
}


    
@media only screen and (max-width: 760px) {
    ul#mainmenu li.open a, ul#mainmenu li.open a { cursor:pointer; }
    li.hasSubmenu > a:after { content: '\25B6\00a0'; position: absolute; right:5px;}
    /*ul#mainmenu li.closed > a:after { content: '\25B6\00a0'; position: absolute; right:5px;}
ul#mainmenu li.open > a:after { content: '\25B2\00a0'; position: absolute; right:5px;}*/
ul#mainmenu > li {
    width:200px; 
}
ul#mainmenu li.closed ul { display:none; list-style-type: none;}
ul#mainmenu li.open ul { 
    padding-left:5px; display:block; position:absolute; z-index:10; left:50%; top:10%; background-color:black; border: solid 1px white;}
    .kachel {
        width:25%;
    }
    .galerie {
        width:100%;
    }
    .infoWand > div {
        display:block;
    }
    .infoWand > div:nth-child(2) {
        width:480px;
    }

ul#mainmenu li.open ul:before {
        
        position: absolute;
     content:"";
     width: 12px;
     height: 12px;
     top: 5px;
     left: -6px;
     border: solid 1px white;
     
     border-top-style: none;
     border-right-style: none;
     background-color: black;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
    }
}    
@media only screen and (min-width: 760px) {
    .reframe { max-width: 760px }
    ul#mainmenu li { width: 48% }
    ul#mainmenu li ul li { width: 96% }
    #main {
        width: 760px;
        display:flex;
	justify-content: space-between;
        
    }
    #content { flex:1; }
    #sidebar { flex:1;}
    .fotoStory > div:nth-child(2) {
        flex:2;
        padding:5px; box-sizing: border-box;
    }
    .kachel {
        width:33%;
    }
    .galerie {
        max-width: 760px 
    }
    .kachelwand {
        width:480px;
    }
    .infoMap {
        width: 360px; position:relative;   
    }
    
    .infoIcon {
        width:25px; border-radius: 10%;
        position:absolute; 
    }
    
    .infoWand > div {
        float: left;
    }
    .infoText {
        width:360px;
    }
}

@media only screen and (min-width: 960px)  {
    .reframe { max-width: 960px }
    
    ul#mainmenu li { width: 32% }
    ul#mainmenu li ul li { width: 96% }
    #main {
        width: 960px;
        display:flex;
	justify-content: space-between;
        
    }
    #content { flex:2 }
    #sidebar { flex:1}
    .fotoStory > div:nth-child(2) {
        flex:3;
        padding:5px; box-sizing: border-box;
    }
    .kachel {
        width:25%;
    }
    .galerie {
        width:800px;
    }
    .kachelwand {
        width:640px;
    }
    
    .infoMap {
        width: 480px; position:relative;   
    }
    
    .infoIcon {
        width:35px; border-radius: 10%;
        position:absolute; 
    }
    
    .infoWand > div {
        display:inline-block;
    }
    .infoText {
        width:240px;
    }
} 

@media only screen and (min-width: 1280px)  {
    #specialMenu {
        display:block; color: white;
    }
    .reframe { max-width: 1280px }
    
    ul#mainmenu li { width: 24% }
    ul#mainmenu li ul li { width: 96% }
    #main {
        width: 1280px;
        display:flex;
	justify-content: space-between;
        
    }
    #content { flex:3 }
    #sidebar { flex:1}
    
    .galerie {
        width:800px;
    }
    
    .kachelwand {
        width:640px;
    }
    
    .infoMap {
        width: 640px; position:relative;   
    }
    
    .infoIcon {
        width:40px; border-radius: 10%;
        position:absolute; 
    }
    
    .infoWand > div {
        display:inline-block;
    }
    
    .infoText {
        width:480px;
    }
    
    img#pianomaeleon {
        float:right;
    }
}    


#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}

#fix {
   /* font-size: smaller; */
   font-family: verdana;
}

#fix a {
   font-size: 14px; 
   color: darkgrey;
   font-family: verdana;
   text-decoration: none;
   line-height: 24px;
}

#trace {
    padding:0px 5px; box-sizing: border-box; background-color:rgb(0,0,0);
    line-height: 18px;
}
#trace a {
    color:rgb(225,225,225); text-decoration: none;
    font-size: small;
}

#trace a:hover {
    color:rgb(225,225,225); text-decoration: underline;
}

#content {
    color: white;
}
#footer a {
    color:rgb(64,64,64); text-decoration: none;
    font-size: small;
}

#footer a:hover {
    color:rgb(225,225,225); text-decoration: underline;
}