/*
	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, .aos-fade-left-image,
	.aos-fade-right-image{
		opacity: 1 !important;
		transform: translate(0) scale(1) !important;
	}
}
/* -------------------------------------------------------------------------------------------------------------------- */
/* -- bs5-template_neu.css -------------------------------------------------------------------------------------------- */



/* - root variablen --------------------------------------------------------------------------------------------------- */
:root {

	--body-bg-color: black;
	--body-bg: url(../images/page/bg-03.webp);
	--body-bg-mobile: url(../images/page/bg-03-mobile.webp);
 /* BREITE CONTAINER ---------------------------------------- */
	--container-breite: 1440px;
	--wrapper-overlay: rgba(255,255,255,0.6);
    --artikel-bg: rgba(0,0,0,0.04);
	--artikel-bg-hover: rgba(255, 255, 255, 0.3);
	
/* Abstand zwischen den col-x ------------------------------- */
	--spalten-abstand: 0.2%;

/* Farben Schriften ----------------------------------------- */
	--font-color:    #333;
	--font-color-h1: black;   
	--font-color-h2: black;  
	--font-color-h3: rgba(0,67,127,1.0);   
	--font-color-h4: #333;    
	--font-color-a:  #0d6efd; 
	--font-color-a-hover:  blue; 
	--border-radius: 5px;
	--border-radius-images: 5px;
	--border-color: rgba(0,0,0,0.40);
	--border-color-images: rgba(0,0,0,0.15);
	--blur-effekt: 6px;
/* Farben Navbar --------------------------------- */
	--topbar-navbar-font-color: #c3c3c3 ;
	--topbar-bg-color:  rgba(128, 128, 128, 0.25);

	--navbar-font-color:          white;
	--navbar-font-color-dropdown: white;
	--navbar-font-color-hover:    skyblue;
	--navbar-font-color-active:   lightgreen;
	--navbar-font-size: 1.00rem;

    --navbar-zeige-logo: inline-block;
    --navbar-zeige-text: none;
	--nav-brand-text: 'PHPWCMS - Sandbox - BS5';
	--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(255,255,255, 0.2);
	--border-top-color-hover:  blue;
	--border-top-color-active: #e8b87e;
	
/* Farben Navbar HG bei hover ---------------------------------------------------------------------------------------- */
	--navbar-bg-color-active:  rgba(144, 238, 144, 0.1);  
	--navbar-bg-color-active:  rgba( 0, 0, 0, 0.1);

	--n/avbar-color: #000000;
	--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%); 
	--navbar-bg:    repeating-linear-gradient(-25deg , rgba(12, 28, 42, 0.8) 24%, rgba(69, 96, 118, 0.8));;  
	--n/avbar-bg:  url(../images/page/bg-03.jpg);
	--n/avbar-bg-color:  #00000070; 
	--navbar-burger-color: lightgrey;
	--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:  #00000070; 
	--navbar-blur: blur(8px);

	--footer-bg-image: repeating-linear-gradient(-25deg , rgba(12, 28, 42, 0.8) 24%, rgba(69, 96, 118, 0.8));
	--footer-image-blur:	blur(6px);
    --footer-widgets-h3-color: whitesmoke;
    --footer-font-size: 	1.00rem;
	--footer-font-color: #a9afb5;
	--footer-font-color-hover: white;
	--bs-navbar-nav-link-padding-x: 10px;
	
	--slider-border-abstand: 0px;
	--clip-height: 100.0%;
	--slider-border-color: rgba(0, 0, 255, 0.0);
	
	--share-button: flex; /* Share Button anzeigen oder eben nicht flex oder none */
    --news-detail-bilder: inline-block; /* none oder inline-block - Bild in News Details anzeigen ?? */
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    --bs-btn-active-bg: rgba(0, 0, 255, 0.28);
}

.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);
}
.btn-outline-secondary {
	 --bs-btn-color: #00000050;
}
/* 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);
  }
}


/* -- 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 var(--border-color, #00000020);
}

.artikel-rahmen{
	position: relative;
	display: inline-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;
	background:  var(--artikel-bg);
	z-index: 2;
}

.artikel-rahmen-02{

}

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

.box{
    margin-bottom: 10px;
	padding: 15px 25px 5px 25px;
	border-radius: var(--border-radius, 4px);
	-w/ebkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	b/ackdrop-filter: blur(var(--blur-effekt, 5px));
}
/* Schrift Farben ----------------------------------------------------------------------------------------------------- */
.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{
	position: relative;
	b/ackground-image: var(--footer-bg-image);
	background-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);
    bckdrop-filter: 		 var(--footer-image-blur);
	o/verflow: hidden;
}

#footer::before {
	--before-height: 15px;
    content: "";
    position: absolute;
	top: calc(var(--before-height) * -1);
    left: 0;
    right: 0;
    display: block;
    height: var(--before-height);
    overflow: hidden;
    background-image: url("../images/page/ripped-paper-base.webp");
    background-size: cover;
	opacity: 0.89;
}

.n/avbar-custom::after {
	--before-height: 15px;
    content: "";
    position: absolute;
	bottom: -15px;
    left: 0;
    right: 0;
    display: block;
    height: 15px;
    overflow: hidden;
    background-image: url("../images/page/ripped-paper-base.webp");
    background-size: cover;
	o/pacity: 0.52;
	transform: rotate(180deg);
	z-index: -1;
}
/*  Breadcrumb -------------------------------------------------------------------*/
#footer > #breadcrumb{
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Glossery Glossar ------------------------------------------------------------------------------ */
.glossary_list_entry > h2 {
 	font-size: clamp(1.3rem, 2vw, 1.3rem);
	letter-spacing: 1px;
	margin-bottom: 2px;
} 

/* Tooltip --------------------------------------------------------------------------------------- */
.tooltip {
  --bs-tooltip-bg: rgba(0, 0, 0, 0.9);
  --bs-tooltip-color: var(--bs-white);
}

.tooltip-inner {
	border: 0; /* Rahmenfarbe des Tooltips */
	font-size: 1.0rem;
	padding-bottom: 5px;
	text-align: start;
}

.tooltip {
  --bs-tooltip-bg: rgba(69, 63, 63, 0.9);
  --bs-tooltip-color: var(--bs-white);
	border-radius: 4px;
	b/order: 2px solid rgba(69, 63, 63, 0.9);
}

.tooltip-inner {
	border: 0; /* Rahmenfarbe des Tooltips */
	font-size: 0.90rem;
	padding: 6px 10px 6px 10px;
	text-align: start;
}

/* Tooltip breiter machen */
.tooltip-inner {
  max-width: 400px; /* gewünschte Breite */
  white-space: normal; /* Zeilenumbruch aktivieren */
}
/* Button, Icons ---------------------------------------------------------------------------------- */

@media only screen and (min-width:769px) {
	#st/artslider{
		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;
	}
}










/* Button Animation */
.btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	z-index: 1;
}

.b/tn:hover {
  color: white;
}
.btn-close {
  filter: invert(1) grayscale(100%) brightness(150%);
}

.btn.btn--animated:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 180, 224);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  z-index: -1;
}
.btn.btn--animated:hover {
  b/order-color: white;
	 
}
.btn.btn--animated:hover:before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

.pulse-button-phone, .pulse-button-mail, .pulse-button-contact {
  position: relative;
  float: left;
  display: block;
  aspect-ratio: 1 / 1;
  width: 60px;
  height: auto;
  font-size: 2.1em;
  margin: 5px;
  text-align: center;
  line-height: 60px;

  color: white;
  border: none;
  border-radius: 50%;
  background: #5a99d4;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
  animation: btn-pulse 1.5s infinite;
}

.pulse-button-phone:before { /*  */
   font-family: FontAwesome;
   content: "\f095";
   display: inline-block;
   padding-left: 8px;
   padding-right: 8px;
   color: white;
}

.pulse-button-mail:before { /*  */
   font-family: FontAwesome;
   content: "\f003";
   display: inline-block;
   padding-left: 8px;
   padding-right: 8px;
   color: white;
}
.pulse-button-contact:before { /*  */
   font-family: FontAwesome;
   content: "\f2bc";
   display: inline-block;
   padding-left: 8px;
   padding-right: 8px;
   color: white;
}



@keyframes btn-pulse {
    0% {
       transform: scale(0.9, 0.9);
    }
    70% {
		transform: scale(1);
		box-shadow: 0 0 0 50px rgba(black, 0);
    }
    100% {
		transform: scale(0.9, 0.9);
		box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
    }
}