/*
	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;
	}
}

/* --- NAVBAR Brand (Logo) weiter unten -------------------------------------------------------------------------------*/
/* CSS in bs5-navbar.css

/* -------------------------------------------------------------------------------------------------------------------- */
/* -- bs5-template_neu.css -------------------------------------------------------------------------------------------- */

#slider_full_width {
   margin-top: var(--slider-abstand-oben);
   c/lip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* - root variablen --------------------------------------------------------------------------------------------------- */
:root {
    --scroll-schwelle-navbar: 50;
	
	--body-bg-color: black;
	--body-bg: ;
	--body-bg-mobile: ;
 /* BREITE CONTAINER ------------------ */
	--container-breite: 1440px;
	--slider-abstand-oben: 0px;

	--slider-drop-shadow-offset-x: 2px;
	--slider-drop-shadow-offset-y: 3px;
	--slider-drop-shadow-blur: 8px;
	--slider-drop-shadow-color: #000000;
	
	--wrapper-abstand: 83px;
	--wrapper-overlay: rgba(207, 233, 250, 0.9);
	--w/rapper-background-image: repeating-linear-gradient(-27deg ,  rgba(69,96,118,0.3) 49%, rgba(12,28,42,0.3));
    --artikel-bg: rgba(0,0,0,0.04);
	--artikel-bg-hover: rgba(255, 255, 255, 0.3);
	--btn-hover-bg:     rgba(255, 255, 255, 0.3);	
	--btn-font-color:   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-acc-h2: white;  
	--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.15);
	--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-color-top-nav-collapse: white;
	--navbar-font-size: 1.00rem;

	--nav-brand-text: "Phpwcms BS-5 Sandbox";
	--navbar-brand: url(../images/logos/logo.png);
	
    --navbar-zeige-logo: inline-block;
    --navbar-zeige-text: none;
	
	--navbar-brand-color: skyblue;
	--footer-brand-font-size: 1.1rem;
	--navbar-brand-hover-color: white;
	--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);

	--navbar-color: #000000;
	--navbar-bg-position: 0 0px;
	--na/vbar-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:  #02004430; 
	--navbar-bg-color-collapse: #020044;
	
	--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);
	--navbar-footer-image-opacity: 0.89;
	
	/* Bild in navbar-after und footer-before */
	--n/avbar-bg-image-after: url(../images/page/ripped-paper-base-01.webp); /* unter Navbar */
	--f/ooter-bg-image-before: url(../images/page/ripped-paper-base.webp);   /* über footer */
	
	/* Footer Hintergrund */
	--f/ooter-bg-image:  linear-gradient(-25deg, hsl(207,26%,37%, 0.8)  24.6%, hsl(208,56%,11%, 0.8)   24.7% );
	--f/ooter-bg-image:  linear-gradient(-25deg, hsl(204, 81%, 90%) 24.6%, hsl(208, 92%, 95%) 24.7%);
	--footer-bg-image:   linear-gradient(-25deg, hsl(207,26%,37%, 0.8)  24.6%, hsl(208,56%,11%, 0.8)   24.7% );
	    
	--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);
}

.btn-outline-secondary {
	 --bs-btn-color: #00000050;
}
/* Body  -------------------------------------------------------------------------------------------------------------- */
/* fester Hintergrund ohne scroll auch bei Mobilgeräten ------*/
/* Rest in bs5-allgemein.css */
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); 
	-w/ebkit-backdrop-filter: blur(6px);
    b/ackdrop-filter: 		 blur(6px);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter:         blur(var(--blur-effekt, 5px));
  }
}


/* -- Content Bereich ------------------------------------------------------------------------------------------------- */
.full-width { /* bestimmt höhe full-width */
	padding: 50px; 
}

.my/container{
	max-width: 1400px;
    padding: 0;
	margin: 0 auto;
} 
.jumbotron {
	padding: 90px 50px 80px 50px;
}

@media only screen and (min-width:1125px) {
	.jumbotron {
		padding: 140px 50px;
		
	}
	.jumbotron h2{
		
		font-size: clamp(1.25rem, 3vw, 2.2rem);
	}
}
/* Rahmen und Hintergründe für DIV */
.rahmen{
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
	padding: 15px 15px 5px 15px;
	border-radius:    var(--border-radius, 4px);
	border: 1px solid var(--border-color, #00000010);
}

.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);
	object-fit: cover
	z-index: 2;
}

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

.artikel-rahmen-02{
	position: relative;
	display: inline-block;
    margin-bottom: 15px;
	padding: 15px 15px 5px 15px;
	border-radius: 40px 2px 40px 2px ;
    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;
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.1);
}

.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));
}

/* Animierte HG -------------------- */
    .snk-bg {
      position: relative;
      width: 100%;
      height: auto;
      /* Beispiel-Farbverlauf passend zu einem professionellen B2B-Stil */
      background: linear-gradient(135deg, #0f1f47, #405076);
      overflow: hidden;
    }

    /* Pseudo-Element für ein leicht animiertes, halbtransparentes Muster */
    .snk-bg::before {
      content: "";
      position: absolute;
      top: -20%;
      left: -20%;
      width: 140%;
      height: 140%;
      background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
      animation: rotateBg 30s linear infinite;
      transform-origin: center;
    }

    @keyframes rotateBg {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

.snk-bg h1, .snk-bg h2, .snk-bg h3, .snk-bg h4, .snk-bg h5, .snk-bg h6 {
      position: relative;
      color: white;
      text-align: center;
    }
/* 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;
	background-image: var(--footer-bg-image);
	-webkit-backdrop-filter: var(--footer-image-blur);
    backdrop-filter: 		 var(--footer-image-blur);
}

/* Bild direkt über Footer nregelmäßige abrisskante */
#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: var(--footer-bg-image-before);  
    background-size: cover;
	opacity: var(--navbar-footer-image-opacity);
}

/*  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(69, 63, 63, 0.9);
  --bs-tooltip-color: var(--bs-white);
	border-radius: 4px;
}

.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 ---------------------------------------------------------------------------------- */
.kontakt-button {
    position: relative;
    margin: 20px 6% 40px;
    opacity: 1;
}
.btn-swiper {
    border-color: lightgrey;
    background-color: #00000040;
    color: white;
}	


.carousel-caption  h3{
	text-shadow: #000000 0px 0px 3px;
}


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

.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);
    }
}

/* Animierter Cursor / Cursor-Grunddesign */
.cursor-01-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-color: rgba(255, 255, 255, 1.0); /* voll sichtbar */
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}

.cursor-01-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 25px;
	height: 25px;
	border: 2px solid rgba(0, 0, 255, 0.3);  
	background-color: rgba(0, 0, 255, 0.1);  
	border-radius: 50%; /* rund */
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, border-radius 0.2s ease;
}

/* Hover-Effekt bei interaktiven Elementen */
body.cursor-hover .cursor-01-ring {
	transform: translate(-50%, -50%) scale(1.3); /* kleineres Viereck */
	border-color: #00ffff; 
	background-color: rgba(0, 255, 255, 0.25);
	border-radius: 4px; /* Viereck bei Hover */
	animation: pulse 1s infinite ease-in-out, hueShift 3s infinite alternate;
}

/* Punkt halbtransparent bei Hover */
body.cursor-hover .cursor-01-dot {
	background-color: rgba(255, 255, 255, 0.5); /* 50% transparent */
}

/* Puls-Animation */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0.9;
  }
}

/* Farbwechsel-Animation (jetzt gelb intensiver) */
@keyframes hueShift {
  0% {
    border-color: #00ffff;
  }
  50% {
    border-color: rgba(255, 210, 0, 0.8); /* intensives Gelb */
  }
  100% {
    border-color: #00ffff;
  }
}