#subMenu a
{
    color: rgba(226, 191, 214, 1.0);

    }    

#subMenu a:hover
{
    /*color: #212121;*/
    } 

#subMenu .activeItemKinderhaeuser 
{
    color: rgba(255, 255, 255, 1.0);
    }  
    
@media (max-width: 768px) { #subMenu .activeItemKinderhaeuser{color: #363636; }}    

.imageSection
{  
    background-image: url("../Pix/imageSectionL.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    width:100%;
    height:50%;
    position:absolute;
    top:0px;
    left:0px;    
    }
    
@media (max-width: 1024px) { .imageSection {background-image:url("../Pix/imageSectionM.jpg");}}        
@media (max-width: 360px) { .imageSection {background-image:url("../Pix/imageSectionS.jpg");background-position:-80px 0px;height:427px;}}    
@media (max-height:360px) and (min-width:280px) {.imageSection {background-image:none;} }

.display
{
    top:50%;
    } 
    
 @media (max-height:360px) and (min-width:280px) {.display {top:18%;} }   
    
.AnfahrtAnker
{
   }
    
@media (max-width: 360px) { .AnfahrtAnker {margin-top:0px;}}    

#panel
{   
    margin-top:25px;
     }
     
@media (max-width: 600px) { #panel {width:100%;}} 

#buttonLocation1
{
    width:272px;
    padding:4px 7px 4px 7px;
    font-size: 0.8em;    
    vertical-align:middle; 
    background-color:#b35065;
    color:#ffffff;  
    cursor:pointer;
    margin-bottom:5px;
    margin-right:7px;
    }  
  
@media (max-width:600px) { #buttonLocation1 {width:100%;padding:8px 14px 8px 14px;margin-bottom:15px;margin-right:0%;}}    
    
#buttonLocation2
{
    width:272px;
    padding:4px 7px 4px 7px;
    font-size: 0.8em;    
    vertical-align:middle; 
    background-color:#b35065;
    color:#ffffff;  
    cursor:pointer;
    margin-bottom:5px;
    margin-right:7px;
    } 

@media (max-width: 600px) { #buttonLocation2 {width:100%;padding:8px 14px 8px 14px;margin-bottom:15px;margin-right:0%;}}    
    
    
#buttonLocation3
{
    width:272px;
    padding:4px 7px 4px 7px;
    font-size: 0.8em;    
    vertical-align:middle; 
    background-color:#b35065;
    color:#ffffff;  
    cursor:pointer;
    margin-bottom:5px;
    }    

@media (max-width: 600px) { #buttonLocation3 {width:100%;padding:8px 14px 8px 14px;margin-bottom:0px;}}    
         

#map
{
    height:280px;
    width:100%;

    border:5px solid #ffffff;    
    float:left
    
    }
    
@media (max-width: 780px) { #map {width:560px;}}  
@media (max-width: 600px) { #map {width:100%;margin-right:0%;height:150px;}}  

#routePanel
{

    padding:0px;

    border:0px dotted red;
    } 
    
@media (max-width: 780px) { #routePanel {width:560px;}}  
@media (max-width: 600px) { #routePanel {width:100%;}}  
    
    
#addressPanel
{
    width:272px;
    margin-top:0px;
    float:left;  
    bordeR:0px solid green;           
    }       

@media (max-width: 780px) { #addressPanel {width:100%;float:right}}   


#addressPanel h1
{
    font-size:1em;
    margin:0px;
    }
    
#routePanel label
{
    font-size:0.6em;
    display:block;
    }    
    
#addressPanel input
{
    width:272px;
    height:26px;
    margin-right:10px;
    margin-bottom:8px;
    border:2px solid #b35065;  
    background-color:#ffffff;
    }
    
#addressPanel #sandglass
{
    position:absolute;
    top:150px; 
    left:230px;
    visibility:hidden;   
    }
    
@media (max-width: 600px) { #addressPanel #sandglass {top:40px;left:130px;}}    
  
    
 #butLocalize
{
    width:272px;
    padding:4px 7px 4px 7px;
    margin-bottom:10px;
    font-size: 0.8em;       
    vertical-align:middle; 
    background-color:#b35065;
    color:#ffffff;  
    cursor:pointer;
    } 
    
@media (max-width: 600px) { #butLocalize {width:100%;padding:8px 14px 8px 14px;margin-bottom:15px;margin-right:0%;}}    
    
    
#address     
{
    width:272px;
    padding:4px 7px 4px 7px;
    margin-bottom:0px;
    border:2px solid #b35065;
    }
    
@media (max-width: 600px) { #address {width:100%;padding:8px 14px 8px 14px;margin-bottom:15px;margin-right:0%;}}    
    
  
    
#addressPanel #butGeocode
{
    width:272px;
    padding:4px 7px 4px 7px;
    font-size: 0.8em;    
    vertical-align:middle; 
    background-color:#b35065;
    color:#ffffff;  
    cursor:pointer;
        }      


@media (max-width: 780px) { #addressPanel #butGeocode {margin-bottom:35px;}}    
@media (max-width: 600px) { #addressPanel #butGeocode {width:100%;padding:8px 14px 8px 14px;margin-bottom:35px;margin-right:0%;}}    
    
    
 #butPrint
{
    width:272px;
    padding:4px 7px 4px 7px;
    margin-top:25px;
    font-size: 0.8em;    
    visibility:hidden; 
    background-color:#b35065;
    color:#ffffff;  
    cursor:pointer;  
    }      
    
@media (max-width: 600px) { #routePanel #butPrint {width:100%;padding:8px 14px 8px 14px;margin-top:15px;margin-bottom:35px;margin-right:0%;display:none;}}    
    
    
#directionsPanel
{
    width:100%; 
    height:280px;
    overflow-y:scroll;           
    border:2px solid #b35065;   
    background-color:transparent; 
    font-size:0.7em;  
    margin-bottom: 8px;
    margin-top:0px;
    margin-right:20px;
    padding-left:5px;
    padding-right:5px; 
    float:left;
    
    }    

   

@media (max-width: 600px) { #directionsPanel {width:100%;height:200px;margin-right:0px;margin-top:-25px;}}
    
article
{  
    padding-top: 18px;
    padding-top: 0px; /* neu */
    padding-bottom: 23px; 
    margin-bottom: 0px;
    
    border-bottom:2px solid #e2bfd6;
    
    }  
    
.navigationBar
{        
    border-bottom:3px solid #e2bfd6;
    height: 34px;  
    margin-bottom: 8px; 
}

a.new.button
{
    background: rgba(226, 191, 214, 1.0); 
    background-image:url("../../Pix/Layout/Forward.png"), url("../../Pix/dot.png");
    background-repeat:no-repeat, repeat;
    background-position:right;
    }


/* Leaflet */
figure#mapContainer {
    width: 100%;
    aspect-ratio: 1;
    aspect-ratio: 2/1;
    aspect-ratio: 2.7/1;
    border: 2px solid #e2bfd6;
    background: rgba(226, 191, 214, 1.0);
    background-color: #14797c;
    background-color: #e3efef;
    background-color: #f9f2f7;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    figure#mapContainer {
        aspect-ratio: 1;
    }
}  

figure#mapContainer .leaflet-tile-pane img {
/*    filter: hue-rotate(90deg);
    filter: sepia(50%);
    filter: saturate(8);
    filter: invert(100%);
    filter: grayscale(50%);
    filter: hue-rotate(280deg);*/
}

figure#mapContainer .placeHolderImageOSM {
    display: block;
    
    height: 100%;
}

button#butConsentOSM {
    background-image: url(../Pix/Layout/Forward.png), url(../Pix/dot.png);
    background-repeat: no-repeat, repeat;
    
    background: rgba(226, 191, 214, 1.0);
    padding: 15px;
    font-family: openSans-Bold;
    font-size: 1.0em;
    color: #000000;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 15px;
}