/*
	https://codepen.io/andyadams/pen/NQrrJv    (backdrop)
	https://codepen.io/gutugaluppo/pen/MWjjWPx (blur)
*/
.a-delay {
  animation-delay: 0.5s;
}
@media only screen and (max-width:1125px) {
	.aos_flip_up_bottom, .aos_fade_up_bottom, .aos_zoom_in_bottom, aos_zoom_in_bottom_delay, .aos_zoom_in_center,
    .aos_fade-right, .aos_fade-left, .aos_fade_down, .aos_fade_up, .aos_fade-left-offset, .aos_flip-delay {
		opacity: 1 !important;
		transform: translate(0) scale(1) !important;
	}
}
/* -------------------------------------------------------------------------------------------------------------------- */
/* -- bs5-template_neu.css -------------------------------------------------------------------------------------------- */

/* - root variablen --------------------------------------------------------------------------------------------------- */
:root {
	--body-bg-color: white;
	--body-bg: url(../images/page/bg-01.webp);
	--body-bg-mobile: url(../images/page/bg-01-mobile.webp);
 /* BREITE CONTAINER ------------------ */
	--container-breite: 1400px;
	--wrapper-overlay: rgba(255,255,255,0.6);
    --artikel-bg: rgba(0,0,180,0.04);
/* Abstand zwischen den col-x --------------------*/
	--spalten-abstand: 0.2%;

/* Farben Schriften ------------------------------*/
	--font-color:    #333;
	--font-color-h1: black;   
	--font-color-h2: rgba(0, 67, 127, 1.0);  
	--font-color-h3: rgba(0, 67, 127, 1.0);  
	--font-color-h4: #333;    
	--font-color-a:  #0d6efd; 

	--border-radius: 5px;
	--border-radius-images: 5px;
	--blur-effekt: 7px;
/* Farben Navbar --------------------------------- */
	--topbar-navbar-font-color: #333;
	--topbar-bg-color:  rgba(128, 128, 128, 0.05);

	--navbar-font-color:          #337ab7;
	--navbar-font-color-dropdown: #333;
	--navbar-font-color-hover:    blue;
	--navbar-font-color-active:   #474747;
	--navbar-font-size: 1.00rem;

	--navbar-brand: url(../images/logos/logo.png);
	--navbar-brand-color: white;
	--navbar-brand-hover-color: yellow;
	--navbar-brand-mobile: url(../images/logos/logo310x60.png);

/* Farben Navbar Strich bei hover ------------------------------------------------------------------------------------ */
	--navbar-bg-color-hover:  rgba(0,0,0, 0.05);
	--border-top-color-hover:  blue;
	--border-top-color-active: orange;
	
/* Farben Navbar HG bei hover ---------------------------------------------------------------------------------------- */

	--navbar-bg-color-active:  rgba( 0, 0, 255, 0.05);

	--navbar-color: #ffffff;
	--navbar-bg-position: 0 0px;
	--n/avbar-bg:   linear-gradient( 25deg, hsl(207,26%,37%, 0.8) 37.5%, hsl(208,56%,11%, 0.8) 4%); 
	--n/avbar-bg:   repeating-linear-gradient(-25deg , rgba(12, 28, 42, 0.8) 24%, rgba(69, 96, 118, 0.8));;  

	--navbar-bg-color:  rgba(255, 255, 255, 0.80); 
	--navbar-burger-color: blue;
	--navbar-brand: url(../images/logos/logo.png);
	--navbar-brand-mobile: url(../images/logos/logo310x60.png);

	--navbar-dropdown-width: 0px;
	--n/avbar-dropdown-bg:  url(../images/page/bg-03.jpg);
	--n/avbar-dropdown-bg:  linear-gradient( 25deg, hsl(207,26%,37%) 27.5%, hsl(208,56%,11%) 4%);    
	--navbar-bg-dropdown-color:  rgba(255, 255, 255, 0.80); 
	--navbar-blur: blur(8px);

	--footer-bg-image: repeating-linear-gradient(-25deg , rgba(6,7,50, 0.6) 24%, rgba(6,7,50, 0.6));
	--footer-image-blur:	blur(6px);
    --footer-widgets-h3-color: whitesmoke;
    --footer-font-size: 	1.0rem;
	--footer-font-color: #a9afb5;
	--bs-navbar-nav-link-padding-x: 10px;
	--share-button: block; /* Share Button anzeigen oder eben nicht */
}

.b/tn-sm, .btn-group-sm > .btn {
	--bs-btn-padding-y: 0.25rem;
	--bs-btn-padding-x: 0.25rem;
	--bs-btn-font-size: 0.85rem;
	--bs-btn-border-radius: var(--bs-border-radius-sm, 4px);
}

/* Body  -------------------------------------------------------------------------------------------------------------- */
/* fester Hintergrund ohne scroll auch bei Mobilgeräten ------*/
body:after{
    background-image:  var(--body-bg); 
}

@media only screen and (max-width:768px) and (orientation:portrait) {
	body:after{
		background-image: var(--body-bg-mobile);
	}
}
/* -------------------------------------------------------------------------------------------------------------------- */

/* Unterstützung für backdrop-filter */
@supports (backdrop-filter: blur(1px)) {
  .backdrop-blur {
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
  }
}

/* Kein Support für backdrop-filter (z.B. ältere Safari-Versionen) Fallback */
@supports not (backdrop-filter: blur(1px)) {
  .backdrop-blur {
	background-color: rgba(0, 0, 0, 0.1); 
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

 .btn-default {
	border-radius: 5px;
	border: 1px solid #6c757d;
	color: #6c757d;
    padding:  0.25rem 0.5rem;
	 margin-bottom: 2px;
}
 .btn-default:hover {
	 background-color: #6c757d;
	 color: white;
}
/* -- Content Bereich ------------------------------------------------------------------------------------------------- */
.full-width { /* bestimmt höhe full-width */
	padding: 50px; 
}

.mycontainer{
	max-width: 1400px;
    padding: 0;
	margin: 0 auto;
} 

.rahmen{
	position: relative;
    margin-bottom: 10px;
	padding: 15px 15px 5px 15px;
	border-radius: var(--border-radius, 4px);
	border: 1px solid rgba(0,0,0,0.04);
}

.artikel-rahmen{
	position: relative;
	display: block;
    margin-bottom: 15px;
	padding: 15px 15px 5px 15px;
	border-radius: var(--border-radius, 4px);
    border: 1px solid rgba(0,0,0,0.05);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
	overflow: auto;
	b/ackground:  var(--artikel-bg);
	z-index: 2;
}

.artikel-rahmen > .carousel {
	margin-bottom: 10px;
}

.box{
    margin-bottom: 10px;
	padding: 15px 25px 5px 25px;
	border-radius: var(--border-radius, 4px);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
}
/* Schrift Farben ----------------------------------------------------------------------------------------------------- */
.content-container h2, .right-container h2, .content-bottom h2 {
    color: var(--font-color-h2)
}
.content-container h3, .right-container h3, .content-bottom h3 {
    color: var(--font-color-h3)
}

.left-container h3, .right-container h3, .content-bottom h3 {
    color: var(--font-color-h3)
}

/* FOOTER ------------------------------------------------------------------------------------------------------------ */
/* Footer HG / Optik */
#footer{
	background-image: var(--footer-bg-image);
	b/ackground-image:  linear-gradient(-25deg, hsl(207,26%,37%, 0.8)  24.6%, hsl(208,56%,11%, 0.8)   24.7% );

	-webkit-backdrop-filter: var(--footer-image-blur);
    backdrop-filter: 		 var(--footer-image-blur);
	overflow: hidden;
}
/*  Breadcrumb -------------------------------------------------------------------*/
#footer > #breadcrumb{
	border-bottom: 1px solid rgba(255,255,255,0.2);
}


@media only screen and (min-width:769px) {
	#startslider{
		margin-left: 20px;
		border: 0;
		border-radius:  0  0  0 80px;
		overflow: hidden;
		box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
		padding: 0;
	}
}

.tooltip {
  --bs-tooltip-bg: rgba(0, 0, 0, 0.8);
  --bs-tooltip-color: var(--bs-white);
}


#filter .active {
	border-color: var(--navbar-font-color-active); 
    background-color: var(--navbar-bg-color-active); 
    color: var(--navbar-font-color-active); 
}