/* BASIC 2023.06.20 */   
/* zu nutzen mit var(--hover-color) */   

/* Schriften und Farben werden im Theme gesetzt */
:root {    
    /*
    --bs-secondary: #195073;
    */
}  

/* Buttonfarben */
.btn-primary { background-color: var(--bs-primary) ; border-color: var(--bs-primary) ;  }   
.btn-secondary { background-color: var(--bs-secondary) ; border-color: var(--bs-secondary) ;  }   
.btn-info { background-color: var(--bs-info) ; border-color: var(--bs-info) ;  }   
.btn-light { background-color: var(--bs-light) ; border-color: var(--bs-light) ;  }   
.btn-dark { background-color: var(--bs-dark) ; border-color: var(--bs-dark) ;  }   
.btn-outline-primary { color: var(--bs-primary) ; border-color: var(--bs-primary) ;  }   
.btn-outline-secondary { color: var(--bs-secondary) ; border-color: var(--bs-secondary) ;  }   
.btn-outline-info { color: var(--bs-info) ; border-color: var(--bs-info) ;  }   
.btn-outline-light { color: var(--bs-light) ; border-color: var(--bs-light) ;  }   
.btn-outline-dark { color: var(--bs-dark) ; border-color: var(--bs-dark) ;  }   

.btn-primary:hover { background-color: rgba(var(--bs-primary-rgb), 0.8) ; border-color: rgba(var(--bs-primary-rgb), 0.8) ;  }   
.btn-secondary:hover { background-color: rgba(var(--bs-secondary-rgb), 0.8) ; border-color: rgba(var(--bs-secondary-rgb), 0.8) ;  }   
.btn-info:hover { background-color: rgba(var(--bs-info-rgb), 0.8) ; border-color: rgba(var(--bs-info-rgb), 0.8) ;  }   
.btn-light:hover { background-color: rgba(var(--bs-light-rgb), 0.8) ; border-color: rgba(var(--bs-light-rgb), 0.8) ;  }   
.btn-dark:hover { background-color: rgba( var(--bs-dark-rgb), 0.8) ; border-color: rgba(var(--bs-dark-rgb), 0.8) ;  }   
.btn-outline-primary:hover { background-color: var(--bs-primary) ; border-color: var(--bs-primary) ;  }   
.btn-outline-secondary:hover { background-color: var(--bs-secondary) ; border-color: var(--bs-secondary) ;  }   
.btn-outline-info:hover { background-color: var(--bs-info) ; border-color: var(--bs-info) ;  }   
.btn-outline-light:hover { background-color: var(--bs-light) ; border-color: var(--bs-light) ;  }   
.btn-outline-dark:hover { background-color: var(--bs-dark) ; border-color: var(--bs-dark) ;  }   

/* Fixes */           
.container { width: 100%; max-width: 1380px; }
button:focus { outline: none; box-shadow: none; }
.btn:focus { outline: none; box-shadow: none; }
.btn-close:focus { outline: none; box-shadow: none; }

.tooltip { z-index: 1500; }
.offcanvas { z-index: 1300; }
.mx-n4 { margin-left: -1.5rem; margin-right: -1.5rem; }
.mt-n4 { margin-top: -1.5rem; }

/* Helper */
.h-min-100vh { min-height: 100vH; }
.bg-image-cover-center { background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* Navi */
header nav li a.nav-link { color: var(--bs-primary); }
header nav li a.nav-link:hover { color: var(--bs-info); }

#menutoggle { font-size: 3rem; }

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

header nav ul ul, 
header nav ul ul * { margin:0;padding:0;list-style:none;}   
header nav ul ul {box-shadow:2px 2px 6px rgba(0,0,0,.2); text-transform: none; border-top: 0; min-width: 100%; width: auto; background: var(--bs-secondary) ; margin-left: 0; margin-top: 0;}                                                            
header nav ul ul li.nav-item { background: var(--bs-secondary); white-space:nowrap; margin: 0; padding: 0; }                                                                                                               
header nav ul ul li.nav-item a.nav-link {border-left: 0; border-bottom: 1px solid #fff; margin: 0; text-decoration:none; zoom:1; background: var(--bs-secondary) ; display: block; text-align: left; min-height: 0;  }   
header nav ul ul li.nav-item:hover a.nav-link {background: var(--bs-dark);-webkit-transition:none;transition:none; color: #fff !important; }   
header nav ul ul li.nav-item a.nav-link.active{background: var(--bs-dark);-webkit-transition:none;transition:none; color: #fff !important; }    
header nav ul ul li.nav-item:hover li.nav-item a.nav-link {background: var(--bs-dark); color: #fff !important; border-bottom: 0; border-top: 1px solid #fff; }     
header nav ul ul li.nav-item li:hover a.nav-link, 
header nav ul ul li.nav-item li:focus a.nav-link {background: var(--dark-color); color: #fff !important; }  
header nav ul ul li.nav-item:last-child a.nav-link {border-bottom: 0;  }   

.offcanvas-body ul { list-style: none; }
.offcanvas-body li { list-style: none; }                                                        
.offcanvas-body li.nav-item a { border-bottom: 1px solid var(--bs-light); color:  var(--bs-primary) !important; }          
.offcanvas-body ul li.nav-item a:hover { background: var(--bs-light); color:  var(--bs-primary) !important; }       
.offcanvas-body >div > ul > li.nav-item > a { background: var(--bs-secondary); color:  var(--bs-primary) !important; margin-bottom: 2px; }                                                                                    

/* Specials */
.ls-social > a {
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 20px;
	text-align: center;
	margin: 0 2px 2px 0;
	background: rgba(255,255,255,0.2);
	border-radius: 3px;
}
footer ul.list-group li , footer ul.list-group li a {
	background: transparent !important;
  border: 0 !important;
  list-style: none;
}
footer ul.list-group li a:hover  {
	background: rgba(255,255,255,0.2) !important;
}

footer a { text-decoration: none !important; color: #fff !important; }

/* Seitenkommentare */

.ls-circle-btn .badge-pill {
	position: absolute;
	top: -8px;
	right: -7px;
}
.badge-dark {
	color: #fff;
	background-color: var(--bs-dark);
}

.ls-circle-btn, .ls-circle-btn:focus {
	min-width: 2rem;
	height: 2rem;
	border-radius: 360px;
	background: rgba(0, 97, 156, 0.2);
	text-align: center;
	position: relative;
	outline: none !important;
	box-shadow: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.ls-circle-btn.choosen {
	box-shadow: 0 0 4px 4px rgba(0,0,0,0.3);
}

.blogitem {
	position: relative;
	background: var(--bs-light);
	border-radius: .4em;  
  margin: 1rem 20px 1rem 20px;  
  padding: 15px; 
}

 .blogitem:after {
	content: '';
	position: absolute;
	left: 0;
	top: 30px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: var(--bs-light);
	border-left: 0;
	margin-top: -20px;
	margin-left: -20px;
}
                     
 .blogitem.ownone { background: #b8d8ce;}    
 .blogitem.ownone:after { border-right-color: #b8d8ce;}
                
 .blogitem.answerto { background: #80a5b3; margin: 1rem 20px 1rem 80px;  }    

 .blogitem.answerto:after {
	content: '';
	position: absolute;
	left: auto;
	right: 0;
	top: 30px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #80a5b3;
	border-right: 0;
	margin-top: -20px;
	margin-left: 0;
	margin-right: -20px;
}
 .blogitem.answerto:after { }
 .blogitem.bg-danger:after {border-left-color: var(--bs-danger);  --bs-bg-opacity: 0.75; border-left-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity)) !important; }
 .blogitem.bg-danger.answerto:after {border-right-color: transparent; border-left-color: var(--bs-danger);  --bs-bg-opacity: 0.75; border-left-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity)) !important; }
 
 .blogautor { font-weight: bold; font-size: 0.8rem; }    
 .blogitem p { margin-bottom: 12px; }         
                                                                      
 .blogitem .row { } 
 .blogitem .row .col {  white-space: nowrap;  } 
 .blogitem .row .col .badge { margin-left: 5px; }
 .blogitem i { font-size: 1.1rem;}
                                         
 #marker-rating .row .col { position: relative; padding: 0.3rem 0.5rem 0 0; } 
 .ls-circle-btn i { color: #fff; }
 .ls-circle-btn.ls-positiv  { background: #28a745; }       
 .ls-circle-btn.ls-neutral  { background: #fff; }      
 .ls-circle-btn.ls-neutral  i { font-size: 2rem; color: #ffc107; }
 .ls-circle-btn.ls-negativ  { background: #dc3545; }
 
 #mapformcover fieldset { border-bottom: 0px solid #00619c; } 
 #mapformcover fieldset legend { color: #00619c; font-size: 0.9rem; text-transform: uppercase; padding: 1rem 0; border-top: 3px solid #00619c; }          
 #mapformcover input, #mapformcover textarea, #mapformcover select { background: rgba(0, 97, 156, 0.09); }  
 #mapformcover .form-text { font-size: 0.9rem; line-height: 1.3; }      
 #mapformcover .form-check-label { font-size: 0.9rem; line-height: 1.3; } 
 
 .ratinginfo { text-align: right; }
 
 .progress { background: rgba(255,255,255,0.7); height: 1.1rem; }                                      
 .badge-primary { background: var(--bs-primary); font-weight: normal; font-size: 1rem; margin: 0.2rem 0;  }
 .badge-secondary { background: var(--bs-secondary); font-weight: normal; font-size: 1rem; margin: 0.2rem 0;  }

 #seiten-newcomment.answertype {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: var(--bs-light);
	padding-left: 30px;
	padding-right: 30px;

	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

	#seiten-newcomment.answertype form {
		max-width: 800px;
 }