/* Govote Master mit CIMA, angepasst für Tüttendorf
*/  

/* zu nutzen mit var(--hover-color) */   
:root {
	--primary-color: #376FB1;       
	--secondary-color: #D81316;
	--light-color: rgba(21,88,165,0.1);         
	--hover-color: #30649C;
}
                              
/* Schriften */     
body, header { font-family: "Roboto",Arial,sans-serif; }
.ls-font-secondary, .badge-secondary { font-family: "Roboto Condensed",Arial,sans-serif !important;}  
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6  { font-family: "Roboto Condensed",Arial,sans-serif !important;}  
.ls-font-primary { font-family: "Roboto",Arial,sans-serif !important; }    
.ls-font-weight-light { font-weight: 100 !important; }      
.ls-font-size-secondary { font-weight: 100 !important; }    
.ls-font-size-primary { font-weight: bold; }    

h1, h2, h3, .h1, .h2, .h3 { color: var(--primary-color); }
h1 span, h2 span, h3 span { display: block; }     
h1, h2, h3, .h1, .h2, .h3 { margin: 2rem 0 1rem; }
.card-body h3, .card-body .h3 { margin-top: 0.5rem; }

a, a:link, a:active, a:visited { color: var(--primary-color); }           
a.btn-warning { color: #000 !important; }
a.btn-success { color: #fff !important; }

.card-body .textitem { font-size: 0.9rem; }

.ls-innercontainer { margin-left: -15px; margin-right: -15px; padding: 15px;}
.ls-headerspacing { padding-top: 71px; }

.ls-icon-primary { background-color: var(--secondary-color); border-color: var(--secondary-color); }
.ls-icon-md { font-size: 1.4rem; }

    
@media only screen and (max-width: 575.98px) {    
/* XS */  
.h1, h1 { font-size: 1.8rem; }   
.h2, h2 { font-size: 1.6rem; }
.h3, h3 { font-size: 1.3rem; }
.badge.ls-wrap { white-space: normal; }
}

/* Button */
.btn-primary, .btn-primary:visited, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { background: var(--primary-color); border-color: var(--primary-color); color: #fff !important; text-transform: none;  }
.btn-secondary, .btn-secondary:visited, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff !important; text-transform: none;  }
.btn-primary:hover { background: var(--hover-color); border-color: var(--hover-color); color: #fff; }
.btn-secondary { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }

.badge-primary  { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }

.ls-border-top-primary { border-top: 3px solid var(--primary-color); }

/* Hintergründe */             
.ls-bg-primary  { background: var(--primary-color) !important; }    
.ls-bg-secondary  { background: var(--secondary-color) !important; } 
.ls-bg-gradient-color { background: var(--primary-color); background-image: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 100%); }    
.ls-bg-gradient-primary  { background-image: linear-gradient(170deg, var(--primary-color) 0%, rgba(0,112,132,0.5) 100%); }     
.ls-bg-gradient-secondary  { background-image: linear-gradient(170deg, var(--primary-color) 0%, var(--primary-color) 80%); } 
.ls-bg-light  { background-color: var(--light-color) !important; }
.ls-bg-dark  { background-color: #00515F !important; }

/* Bereiche  */
.ls-nav-bg { }
#top { height: auto; width: auto; background: #fff; background: rgba(255,255,255,1); border-radius: 0px 0px 30px 30px; padding: 15px 20px 20px 20px;}   
a#top { color: #000 !important; font-size: 1.5rem; line-height: 1.8rem; }
a#top span { color: #000 !important; display: block; font-size: 1rem; line-height: 1.0rem; text-transform: none; border: 0; font-weight: 300; }
#top img {}
main { margin-top: 0; }
#footer ul.list-group-transparent li a { line-height: 1; font-weight: normal; color: #fff; padding: 0.2rem; }

#navtoggle { background: #fff !important; color: var(--secondary-color) !important; }   
#mainheader .nav-link.active { background: transparent; color: #fff; font-weight: bold; }     

.textitem ul li:before { color: var(--primary-color); }
                         
.seitenliste .card .card-header { background: var(--primary-color); }
.seitenliste .card h3 button, .seitenliste .card h3 button:active { background: var(--primary-color); color: #fff; }    
.seitenliste .card h3 button { background: var(--primary-color); color: #fff;  }          
.seitenliste .card h3 button.collapsed { background: var(--primary-color); color: #fff;}          
.seitenliste .card h3 button.collapsed:hover { background: var(--secondary-color); color: #fff; }      


@media only screen and (max-width:991.98px){ 
                 
#mobil-navi { left: 0; right: auto; }
#mobil-navi .navhead { left: 0; right: auto; padding: 20px 20px 10px 60px; }
#mobil-navi .navhead {}
#mobil-navi .navhead span.navitoggle { right: auto; left: 0;  }
#mobil-navi .navbody ul li a { text-align: left; font-size: 1.3rem; }
#mobil-navi .navfooter { border: 0; }
#mobil-navi .navhead span.navitoggle { color: var(--secondary-color); }
#mobil-navi .navbody ul li a { color: var(--primary-color); border-bottom: 1px solid var(--primary-color); margin: 0 1rem; padding: 10px 5px; font-weight: normal; }
#mobil-navi .navbody ul li.active > a  { color: var(--primary-color); font-weight: bold; }        
#mobil-navi .navbody ul > li:last-child > a  { border-bottom: 0; }
                 
#mobil-navi.ls-mobnav-pos-right { left: auto; right: 0; }
#mobil-navi.ls-mobnav-pos-right .navhead { left: auto; right: 0; padding: 20px 60px 10px 20px; }
#mobil-navi.ls-mobnav-pos-right .navhead span.navitoggle { right: 0; left: auto;  }
#mobil-navi.ls-mobnav-pos-right .navbody ul li a { text-align: right; }

h3, .h3 { font-size: 1.3rem; }
            
}

    
@media only screen and (max-width: 575.98px) {    
/* XS */   
#top { border-radius: 0px 0px 20px 20px; padding: 10px 15px 15px 10px;}   
a#top { font-size: 1.3rem; line-height: 1.4rem; }
a#top span { font-size: 0.9rem; line-height: 1.0rem; }
}

/* Cards */
                                                     
.ls-card-v1 .card-header { background: var(--primary-color); color: #fff !important; border-bottom: 0; }    
.ls-card-v1 .card-footer { background: var(--primary-color); }    
.ls-card-v1 .card-footer:hover { background: var(--hover-color); }          
.ls-card-v1 .card-footer .text-muted { font-size: 1.1rem; color: #fff !important; }
.ls-card-v1 .card-footer i.fas { color: #fff !important; }

/* Geomap */
#newcomment legend, #marker-allcomments h4, h2.ls-fragebogen-titel { font-size: 0.8rem; color: var(--primary-color); text-transform: uppercase; } 
#newcomment label { font-size: 1rem; font-weight: bold; }       
#newcomment .form-text, #newcomment label.form-check-label { font-size: 0.8rem; line-height: 1.3; font-weight: normal; } 

/* Header Varianten 02 */
header#mainheader.ls-header-v2 {}    
section.ls-topmargin-header { margin-top: 68px; }
header#mainheader.ls-header-v2 { box-shadow: 0 0 1px 1px rgba(0,0,0,0.1); }   
header#mainheader.ls-header-v2 #top { border-radius: 0; color: #000 !important; font-size: 18px; font-weight: bold; line-height: 64px; padding: 0 15px 0 15px; white-space: nowrap; text-transform: uppercase; border-right: 0px solid rgba(0,0,0,0.1); border-bottom: 0; border-top: 3px solid var(--secondary-color); }
header#mainheader.ls-header-v2 .nav-link { border-radius: 0; color: #000 !important; line-height: 67px; border-bottom: 3px solid #fff; }      
header#mainheader.ls-header-v2 .nav-link:hover { color: var(--secondary-color) !important; border-color: var(--secondary-color);  }     
header#mainheader.ls-header-v2 .nav-link.active { background: transparent; color: var(--primary-color); font-weight: bold; border-color: var(--primary-color); }    
header#mainheader.ls-header-v2 .btn-menusize { height: 70px; }  
header#mainheader.ls-header-v2 #navtoggle { width: 70px; }     

/* Header Varianten 03 */
header#mainheader.ls-header-v3 {}    
section.ls-topmargin-header { margin-top: 68px; }
header#mainheader.ls-header-v3 { box-shadow: 0 0 1px 1px rgba(0,0,0,0.1); }   
header#mainheader.ls-header-v3 #top { background: var(--primary-color); border-radius: 0; color: #fff !important; font-size: 18px; font-weight: bold; line-height: 64px; padding: 0 15px 0 15px; white-space: nowrap; text-transform: none; border-right: 0px solid rgba(0,0,0,0.1); border-bottom: 0; border-top: 3px solid var(--secondary-color); }
header#mainheader.ls-header-v3 .nav-link { border-radius: 0; color: #fff !important; line-height: 67px; border-bottom: 3px solid var(--light-color); text-transform: none; }      
header#mainheader.ls-header-v3 .nav-link:hover { color: #fff !important; border-color: #000; background: var(--hover-color); }     
header#mainheader.ls-header-v3 .nav-link.active { background: transparent; color: #fff; font-weight: bold; border-color: var(--secondary-color); }    
header#mainheader.ls-header-v3 .btn-menusize { height: 70px; }
header#mainheader.ls-header-v3 #navtoggle { width: 70px; }   



/* Ausklapp-Navi */
header#mainheader nav li {position:relative; }
header#mainheader nav ul ul {position:absolute;display:none;top:100%;left: 0; z-index:99;}                       
header#mainheader nav li:hover > ul {display:block;}   
header#mainheader nav ul ul ul {top:0;left:100%;}                                        

header#mainheader nav ul ul, 
header#mainheader nav ul ul * { margin:0;padding:0;list-style:none;}   
header#mainheader nav ul ul {box-shadow:2px 2px 6px rgba(0,0,0,.2); text-transform: none; font-size: 15px; border-top: 0; min-width: 100%; width: auto; background: var(--primary-color) ; margin-left: 0; margin-top: 2px;}                                                            
header#mainheader nav ul ul li.nav-item { background: var(--primary-color); white-space:nowrap; margin: 0; padding: 0; }                                                                                                               
header#mainheader nav ul ul li.nav-item a.nav-link {border-left: 0; border-bottom: 1px solid #fff; margin: 0; padding: 0.5rem 1rem; text-decoration:none; zoom:1; color: #fff; background: var(--primary-color) ; display: block; text-align: left; font-size: 0.9rem; line-height: 1.2; min-height: 0;  }   
header#mainheader nav ul ul li.nav-item:hover a.nav-link {background: var(--dark-color);-webkit-transition:none;transition:none; color: #fff; }   
header#mainheader nav ul ul li.nav-item a.nav-link.active{background: var(--dark-color);-webkit-transition:none;transition:none; color: #fff; }    
header#mainheader nav ul ul li.nav-item:hover li.nav-item a.nav-link {background: var(--dark-color); color: #fff; border-bottom: 0; border-top: 1px solid #fff; }     
header#mainheader nav ul ul li.nav-item li:hover a.nav-link, 
header#mainheader nav ul ul li.nav-item li:focus a.nav-link {background: var(--dark-color); color: #fff; }  
 
@media only screen and (min-width:992px) and (max-width:1139px) { 

header#mainheader.ls-header-v3 .nav-link { font-size: 16px; padding: 0 0.7rem; }
            
}

/* Ergänzungen 12/2020 */
.container { width: 100%; max-width: 1140px; }   
.ls-zeitleiste-content { overflow: hidden; max-width: 100%; }
.transition-off .ls-zeitleiste-content .media-body { opacity: 0.01; position: relative; left: 120%; }      
.transition-on .ls-zeitleiste-content .media-body { /*transition: opacity 3.5s; */ animation-name: lsbouncefromright; animation-duration: 2.0s; }   

figure { position: relative; }
.figure-copyright { position: absolute; top: 0; right: 0; left: 0; padding: 6px 10px 18px 10px; font-size: 8px; color: rgba(255,255,255,0.8); text-align: right; background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.5) 100% ); }

@keyframes lsbouncefromright {
    0%   { left: 120%; opacity: 0.01; }     
    100% { left: 0; width: auto !important; opacity: 1; }
} 
    
@media only screen and (max-width: 575.98px) {    
/* XS */                                                         
.ls-zeitleiste-content .media { margin-left: 3rem; }
.ls-zeitleiste .ls-icon-md { width: 2rem; height: 2rem; font-size: 0.9rem; }   
.ls-zeitleiste-info.icon-md::before, .ls-zeitleiste-content.icon-md::before { left: 1.9rem; }   
}