/* @import url(https://fonts.googleapis.com/css?family=Dosis:300,400);

/* wcag-contrast.css */
/* Unsichtbar, aber im DOM renderbar */
.wcag-contrast {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
/* -------------------------------------------------------------------------------------------------------------------- */
.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.bd-gutter {
  --bs-gutter-x: 3rem;
}

.mode {
  justify-content: space-between;
  flex-direction: row-reverse;
}




/* -------------------------------------------------------------------------------------------------------------------- */
/* Barierefreiheit ---------------------------------------------------------------------------------------------------- */
.navbar-nav .nav-link:focus {
  outline:          2px solid #0d6efd; /* Bootstrap Primary */
  outline-offset: -2px ;
  background-color: rgba(13,110,253,0.1);
  border-radius: 0.25rem;
}

/* Skip-Link: Standard unsichtbar */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;	
  width: auto;
  height: auto;
  overflow: hidden;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 0.5rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  background-color: #0d6efd;
  color: white;
  border-radius: 0.25rem;
  z-index: 2000;
  text-decoration: none;
}

/* Wenn der Navbar über Anker #navbar angesprungen wird, Fokus sichtbar machen -------------------------------------- */
#navbar:target {
  outline: none;
}

#navbar:target a:first-child {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* -- bs5-allgemein_neu.css ------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */
/* Browser Scroll-Leiste Chrome / Safari ------------------------------------------------------------------------------ */
::-webkit-scrollbar { width: 0px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); border-radius: 10px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); border-radius: 10px;}
::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); }

/* CSS-Klassen für die GLOBALE Einstellung des Templates -------------------------------------------------------------- */
.ms-auto .nav-pfeil .nav-link{
	width: 44px;
	text-align: center;
}

* {margin: 0;padding: 0;}
:focus {outline: medium none;}
.link-top{visibility:hidden;} 

/* Clearfix -----------------------------------------------------------------------------------*/
.clearfix:before, .clearfix:after 	{ content:""; display:table; }
.clearfix:after 					{ clear:both; }
.clearfix 							{ *zoom: 1; clear: both;}
.hide {display: none;}

/* -- bs5-allgemein_neu.css ------------------------------------------------------------------------------------------- */
/*-- verhindert Animaton wenn Mobilgerät -- */
@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, .fadeInLeft, .fadeInRight, .fadeInDown, .fadeInUp  {
		opacity: 1 !important;
		transform: translate(0) scale(1) !important;
	}
}

/* Google Schriftarten -----------------------------------------------------------------------------------------------
font-family: 'Poiret One', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Hind', sans-serif;
*/
/* -Einstellungen der Website global ----------------------------------------------------------------------------------*/

html {	
    font-size: 14px; /* kleinere Basis für deinen Bedarf */
    background-color: var(--body-bg-color); 
	display: block;
	height: 100%;
	width: 100%;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	overflow-x: hidden;  /* Verhindert horizontales Scrollen */
    -webkit-overflow-scrolling: touch; 
/*	-webkit-overflow-scrolling: touchmove ; */
}

body {	
	font-family: 'montserratregular', 'montserratmedium' , 'montserratbold' , sans-serif;
/*	f/ont-family: 'open_sansregular', 'open_sansbold' , 'open_sansextrabold' , sans-serif; */
    color:  var(--font-color); 
	height: 100%;
	margin: 0;
	padding: 0;
	u/ser-select: none;
	background-color: transparent;
}

/* fester Hintergrund ohne scroll auch bei Mobilgeräten -------------------------------------------------------------- */

body:after{
	content:"";
	position:fixed; /* stretch a fixed position to the whole screen */
	height:100vh;   /* fix for mobile browser address bar appearing disappearing */
	z-index:-1;     /* needed to keep in the background */
	top:0;
	left:0;
	right:0;
	b/ackground-image: var(--body-bg);  /*  ist im Template festgelegt   */
	background-position: 100% 100%;
	background-size: cover;	
}

/* Abstände der Spalten & Breakpoint Spalten ------------------------------------------------------------------------- */
/* https://www.mediaevent.de/css/display-flex.html ------------------------------------------------------------------- */

.container-fluid {padding: 0;}

.container {
	width: 100%;
	max-width: var(--container-breite);  /* -- Breite Content -- */
}

.container .container {padding-left: 0; padding-right: 0;}
#content .container {padding-bottom: 20px;} /* -- Abstand Seitenende -- */

#content .row {
    padding-left: 10px;
    padding-right: 10px;   
}

.row .row{
	margin-left: -20px;
	margin-right: -20px;
	}

#content .content-container .row {
   display: flex;  
   align-items: flex-start;
}

/* -- Flex-Container für Euqual High von DIV -- */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 10px;
}

/* -- Wyswyg Flip Karte -----------------------------------------------------------------------------------------------*/

.flex-container-cards {
	display: flex;
	margin: 0;
	list-style: none;
/* 	-webkit-flex-flow: row wrap; */
	flex-flow: wrap;
	justify-content: space-between;
}

.flex-container-cards [class*="col-"] {
	padding-left: 0.1%;
	padding-right: 0.1%;
	padding-bottom: 5px;
}

/* -- vesteckt Spalten rechts / links wenn nicht da -- */
.col-hide{display: none; width: 0%;padding: 0; margin:0;} 

/* -- Breakpoint der Spalten -- Dieter */
@media (max-width: 991px) {
    .content-container .row {
        f/lex-direction: column; 
    }
}

/* Abstand zwischen den Spalten -------------------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .content-container .container [class*="col"] {
        --abstand-zwischen-spalten: 0.3%;
        margin-left:  var(--spalten-abstand);
        margin-right: var(--spalten-abstand);
    }
}

.px-custom { /* Custom Abstand */
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.p-custom-10 {
  padding-top:    3.25rem;
  padding-bottom: 3.25rem;
}

/* Globale Schrift-Arten und evtl. Hintergründe ---------------------------------------------------------------------- */
.h1, .h2, .h3, h1, h2, h3 { margin-top: 5px; }
/*
h1 {
	background-image:  url(../images/schriften/h1_hg.png);
	background-repeat:   no-repeat;
	background-position: 5px 5px;
}
*/

#content h4:before { /* Zeichen vor der Überschrift */
   font-family: FontAwesome;
   content: "\f1ce";
   display: inline-block;
   padding-right: 5px;
   color: blue;
}

#content ul  {
	list-style: circle;
}
.nav-tabs .nav-item{
	list-style: none;
}

a  {
	color: var(--font-color-a);	
}
a  {
	color: var(--font-color-a-hover);	
}

/* Globale Schrift-Grössen und Abstände ------------------------------------------------------------------------------ */
/* Skaliert größer für Überschriften */
h1 {font-size: clamp(1.5rem, 4vw, 2.0rem);} 
h2 {font-size: clamp(1.25rem, 3vw, 1.7rem);} 
h3 {font-size: clamp(1.2rem, 3vw, 1.5rem);} 
h4 {font-size: clamp(1.2rem, 2.5vw, 1.4rem);}


strong {
	font-family: 'montserratsemibold';
	font-weight: 600;
}


.right-container , .left-container {
	margin-top: 10px;
}
@media (min-width: 992px){ 
	.right-container , .left-container {
		margin-top: 46px;
	}
}

.right-container h3, .left-container h3{
	font-size: clamp(1.3rem, 2.8vw, 1.5rem);
}

.right-container h4, .left-container h4{
	font-size: clamp(1.2rem, 2.4vw, 1.3rem);
}

.right-container .carousel h3, .left-container .carousel h3 {
	font-size: clamp(1.2rem, 2.5vw, 1.3rem);
}

p { font-size: 1.1rem; }

.right-container p, .left-container p {
	font-size: 1.0rem;
}
/* Globale Schrift-Farben -------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------*/	
/* Seitenaufteilung  --------------------------------------------------------------------------------------------------*/	
/* -- Seite Struktur --------------------------------------------------------------------------------------------------*/

#wrapper, .wrapper{ /* mindesthöhe der Seite */ 
	height: auto !important; 	
	min-height: 96.9% !important; 
    padding-top: 60px; /*  wegen der Höhe der Navbar auf Mobilgeräten */
	background: transparent;
	background-color: var(--wrapper-overlay) ;
	background-image: var(--wrapper-background-image);
	overflow-x: hidden;
}

@media (min-width: 992px){ /* min-width abhänging von anzahl der Menüpunkte in der Navigation */ 
	#wrapper, .wrapper{ /* Abstand des Inhalts nach oben wegen Navigation */ 
		padding-top: var(--wrapper-abstand, 82px);	
	}
}

/* Mobilgeräte ------------------------------------------------------------------------------------------------------- */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { /* IPAD2 */
	body{ overflow-y:scroll;}
	#wrapper, .wrapper{ /* Abstand des Inhalts nach oben wegen Navigation */ 
		padding-top: 50px;	
	}
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { /* IPAD2 */
	body{ overflow-y:scroll;}
	#wrapper, .wrapper{ /* Abstand des Inhalts nach oben wegen Navigation */ 
		padding-top: 50px;	
	}
}


/* Einstellungen Seite ----------------------------------------------------------------------------------------------- */

#s/lider_full_width {
	position: relative;
	height: auto;
	margin-bottom: calc(var(--slider-border-abstand) + 35px);
	filter: drop-shadow(1px var(--slider-border-abstand) 0 var(--slider-border-color));
}

#slider_full_width {
	position: relative;
	height: auto;
	
	m/argin-bottom: calc(var(--slider-border-abstand) + 35px);
	filter: drop-shadow(1px var(--slider-border-abstand) 0 var(--slider-border-color));
}

#slider_full_width .swiper-wrapper, #slider_full_width .carousel, #slider_full_width .camera_wrap{
    position: relative;
    clip-path: polygon(0% 0%, 100% 0%, 100% var(--clip-height), 50% 100%, 0% var(--clip-height));
    z-index: 1;
}

/* ------------------------------------------- */
#content-top {  /* Abstand des Kontent von der Navbar */
    margin-top: 15px;
}

#content { /* Abstand des Kontent von der Navbar */
    margin-top: 35px;
}

#content-top-full, #content-bottom-full{
	overflow: hidden;
}

#co/ntent-top-full .row, #content-bottom-full .row{
	margin-left: -30px;
	margin-right: -30px;
}

.mx-0-5{
	margin-left:  1px;
	margin-right: 1px;
}

#filter{
	margin-left: 10px;
}

/* FOOTER ------------------------------------------------------------------------------------------------------------ */
/* -- Footer Hintergrund & Farben im Tamplate -- */
#footer{ position:relative; background: #00000080;}

@media (min-width: 992px) {
	#footer-widgets .strich {
		position: relative;
	}
	#footer-widgets .strich::after {
		--strich-farbe: rgba(137, 139, 141, 0.42);
		--strich-breite: 2px;
		content: "";
		display: block;
		width:  var(--strich-breite, 2px);
		background: var(--strich-farbe);
		position: absolute;
		right: var(--strich-breite);
		top: 7%;     /* zentriert */
		bottom: 5%;  /* zentriert */
		a/nimation: strich-color 3s infinite alternate ease-in-out;
		animation: zoom-in 1s  ease-in-out;
		animation-delay: 1.5s;
	}
}
@keyframes strich-color {
    0% {
        background: rgba(137, 139, 141, 0.42);
    }
    100% {
        background: rgba(255, 120, 0, 0.8); /* Ziel-Farbe */
    }
}
/* Footer Widgets ---------------------------------------------------------------------------------------------------- */

#footer-widgets .container{
	display: flex;
	padding: 10px 0 10px 0;
	flex-wrap: wrap;
}

#footer-widgets [class*="col-"]  {
	margin-bottom: 5px;
	padding: 0 15px;
}

/* -- Breadcrumb --------------------------------*/
#breadcrumb{
	align-content: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 0;
}

/*  #footer > #breadcrumb { } ist im Tamplate geregelt */

#breadcrumb .fa-circle-o 		  {font-size: 0.80em;}
#breadcrumb a.active    		  {color: var(--navbar-font-color-active);}
.breadcrumb a, .breadcrumb-spacer {font-size: 0.90rem; color: #a9afb5;text-decoration:none;}

.breadcrumb {
    list-style: none;
    background-color: transparent;
    border-radius: 0;
}

.breadcrumb-spacer:before { /* -- Symbol zwischen den Breadcrumb Links -- */
    content: '\f10c'; /* fa-envelope-o */
    font: 400 10px "FontAwesome";
	padding-left: 4px;
	padding-right: 4px;
}

/* ------------------------------------------------------------------------------------------------------------------- */
#footer-widgets .container > div{
	b/order: 1px solid yellow;
}

/* effect-shine */
#footer-widgets .container > div:hover {

  animation: shine-box 2s easy-in;
}

#footer-widgets h3{
	font-size: clamp(1.1rem, 2.5vw, 1.4rem);
	font-weight: 200;
    line-height: 1.1em;
	padding: 0;
	margin-bottom: 5px;
	color: var(--footer-widgets-h3-color);
}

/* Ausgangszustand: normaler Text */
#f/ooter-widgets .container div > h3 {
    color: #fff;
    background: none;

}

/* Hover: animierter Farbverlauf nur im Text */
#footer-widgets .container div:hover > h3 {
  background: linear-gradient( -75deg, gray 0%,  white 25%,  yellow 60%,  white 55%, gray 90% );
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

@-webkit-keyframes shine {
  from {
    background-position: 200%;
  }
  to {
    background-position: -200%;
  }
}


/* Optional: sanfter Übergang beim Hover */
#f/ooter-widgets .container div > h3 {
    transition: all 1.3s ease;
}

#footer-widgets h4{
	font-size: 1.0rem;
	padding: 0;
}

/* Firmenname */
#footer-widgets address, dl {
    margin-bottom: 5px;
}

#footer-widgets address > a > span, #footer-widgets address > span > a,
#footer-widgets address, #footer-widgets address a {
	color:     var(--navbar-brand-color);
	font-size: var(--footer-brand-font-size);
	text-decoration: none;
	font-weight: bold;
	padding: 0 2px 0 2px;
	transform: scaleY(1.2);
}

#footer-widgets address > a > span:hover, #footer-widgets address > span  a:hover{
	color: var(--navbar-brand-hover-color);
		
}

#footer-widgets a {font-size: var(--footer-font-size);}

#footer-widgets p {
    font-size: var(--footer-font-size);
    padding: 0 0 0 5px;
    margin: 0;
    color:  var(--footer-font-color); 	
}

#footer-widgets .linklist { list-style:none; padding-left: 2px;  margin-bottom: 10px;}
#footer-widgets a 		  { text-decoration:none; color:  var(--footer-font-color); }
#footer-widgets  a:hover  {color:  white; }

/* Zeichen vor Links im Footer ----------------------------------------------------------------------------------------*/
#content .email:before {
    content: '\f003'; /* fa-envelope-o */	
    font: 100 1.2em/24px "FontAwesome";
    color:  var(--font-color);
	padding-right: 12px;
text-decoration: none;
}
.phone:before, a.phone:before {
    content: '\f095'; /* fa-envelope-o */	
    font: 100 1.2em/24px "FontAwesome";
    color:  var(--font-color);
	padding-right: 17px;
	text-decoration: none;
}
#footer-widgets .email:before {
    content: '\f003'; /* fa-envelope-o */	
    font: 100 1.2em/24px "FontAwesome";
    color:  var(--footer-font-color);
	padding-right: 12px;
}

#footer-widgets .phone:before {
    content: '\f095'; /* fa-envelope-o */	
    font: 100 1.2em/24px "FontAwesome";
    color:  var(--footer-font-color);
	padding-right: 17px;
}

#footer-widgets .fax:before {
    content: '\f1ac'; /* fa-envelope-o */	
    font: 100 1.2em/24px "FontAwesome";
	color:  var(--footer-font-color);
	padding-right: 10px;
}

#footer-widgets .mobile:before {
    content: '\f10b'; /* fa-envelope-o */	
    font: 100 1.3em/24px "FontAwesome";
    color:  var(--footer-font-color);
	padding-right: 19px;
}

.info:before {
    content: '\f05a'; /* fa-info-circle */	
    font: 100 1.2em/24px "FontAwesome";
    color: white;
	padding-right: 10px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa-4 {
	width: 80px;
	height: 80px;
    font-size: 5em;
    color: rgba(138, 43, 226, 0.8);

    b/order: 2px solid rgba(138, 43, 226, 1.0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(138, 43, 226, 0.0);
    z-index: 1060;


    pointer-events: none;

    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
    animation: color-change-background 4s linear infinite;
}
/* - Language Switch Bilder im Footer & Topbar ----------------------------------------------------------------------- */

#footer .lang-switch {
    display:block;
    float: left;
	width: 25px;
	height: 18px;
	margin-left: 5px;
    border: 1px solid grey;
}

#footer .lang-de, .topbar .lang-de, #footer .lang-en, .topbar .lang-en, 
#footer .lang-it, .topbar .lang-it, #footer .lang-fr, .topbar .lang-fr{
	top:0;
	left:0;
	right:0;
    padding: 0;
	background-position: 100% 100%;
	-webkit-background-size: cover; /* Für alte Webkit-basierte Browser */
	-moz-background-size: cover;    /* Für alte Firefox-Versionen */
	-o-background-size: cover;      /* Für alte Opera-Versionen */
	background-size: cover;         /* Standard-CSS */
}

#footer .lang-de, .topbar .lang-de{
	content:url("../images/sprache/icon_de.png");
}

#footer .lang-en, .topbar .lang-en {
	content:url("../images/sprache/icon_en.png");
}

#footer .lang-it, .topbar .lang-it{
	content:url("../images/sprache/icon_it.png");
}

#footer .lang-fr, .topbar .lang-fr{
	content:url("../images/sprache/icon_fr.png");
}

/* ------------------------------------------------------------------------------------------------------------------- */ 
/* Copyright --- */
/* -- Copyright Bereich -----------------------------------------------------------------------------------------------*/
/* -- Links Footer Widgets NAV PILLS (Menü ganz unten in der Seite -----------*/
#footer-copyright	  {border-top: 1px solid rgba(153,153,153,0.3);}

#footer-widgets .nav-pills li {list-style:none; color: yellow; padding-left: 5px;text-decoration:none;}
#footer-copyright p			  {font-size: clamp(0.8rem, 1.5vw, 1.0rem); margin: 0; padding: 10px 0 10px 0; color: var(--footer-font-color);  }
@media (max-width: 768px) { 
    #footer-copyright p	{text-align: center}
}
#footer-copyright a, .footer-menu a {color: var(--footer-font-color);text-decoration:none;}

/* Zeichen vor Link im Footer -------------------------------------------------------*/
#footer-widgets .linklist li:before, #footer-widgets .list-inline li:before {
    content: '\f105'; /* fa-envelope-o */
    font: 400 16px/24px "FontAwesome";
	color: whitesmoke;
	padding-right: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------- */ 
#footer-widgets .nav-pills li	{list-style:none; color: #a9afb5; padding-left: 5px;text-decoration:none;}
#footer-copyright .nav-pills >li>a:hover {
	color: var(--footer-font-color-hover);
	background-color: grey;
}
/* ------------------------------------------------------------------------------------------------------------------- */
/*- Fehler 404 ---wird bei mehrsprachig nicht mehr benötigt --------------------------------------- */

.fehler-404 {
    position: relative;
    width: 80%;
    height: auto; /* Höhe des Containers */
	margin: 11% auto 11% auto;
    overflow: hidden;
	border-radius: var(--border-radius, 4px);
	background-color: rgba(255, 255, 255, 0.1);
	padding: 60px 70px;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16), 0 2px 8px 0 rgba(0, 0, 0, .51);
}

.fehler-404::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/page/Fehler-404-03.png'); /* Ersetze durch dein Bild */
    background-size:cover;
	background-repeat: no-repeat;
    background-position: bottom;
	opacity: 0.3;
}

.fehler-404 > .image-text > h1 {
	font-size: clamp(1.5rem, 4vw, 2.0rem);
    color: red
}

 .fehler-404 > .image-text {
	padding: 30px 50px;
	border-radius: var(--border-radius, 4px);
	background-image: linear-gradient(
		to bottom right,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0.1)
  		);
    -webkit-backdrop-filter: var(--navbar-blur);  
    backdrop-filter: var(--navbar-blur);
}
@media (max-width: 768px) { 
	.fehler-404 {
    	width: 100%;	
		padding: 10px;
	}
	.fehler-404 > .image-text {
		padding: 10px;
		text-align: justify;
	}
}
/* --Button & Mehr ---------------------------------------------------------------------------------------------------- */
.sidebar {
    position: relative;
    margin-bottom: 20px;;

}
.list-group{
	border-radius: 0 0 var(--border-radius, 4px) var(--border-radius, 4px) ; 	
	border: 0;
	padding: 0;
}

div.sidebar h3.list-group-item.active.scroll {
	padding-left: 15px;
    color: white !important;
}

.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus {
    z-index: 2;
    color: #fff;
	font-size: var(--font-size);
    background-color: #337ab7;
    border-color: #337ab7;
	padding: 10px 10px 8px 10px;
	border-radius: var(--border-radius, 4px) var(--border-radius, 4px) 0 0;
	margin: 0;
}

/* Entfernt :before nur für h4 mit der spezifischen Klasse */
h4.list-group-item.active.scroll:before {
    content: none;
    display: none;
}
h4.list-group-item.active.scroll:before {
    content: none !important; /* Entfernt den Inhalt */
    display: none !important; /* Verhindert die Anzeige */
}

.list-group-item:hover {
	color: white;
	background: rgba(234, 232, 232, 0.05);
}
.nav_list_sidebar li, .nav_list_artikel li {
    list-style: none;
	padding: 0;
}

.nav_list_sidebar {
    color: black;
    background-color: var(--bs-body-bg); 
	border-radius: 0 0 var(--border-radius, 4px) var(--border-radius, 4px) ; 	
	border-color: var(--bs-border-color);
	padding: 0;
	text-align: center;
}

.nav_list_sidebar .nav-item{
	border: 1px solid #00000010;
}

.nav_list_sidebar .nav-item:hover{
	background: #00000010;
}

.list-group-item {
	color:  var(--font-color);
	border-radius: 0;
}

.nav_list_artikel li {
	margin-right: 3px;
	margin-bottom: 3px;
	border-radius: 0;
}

.nav_list_artikel {
	padding: 0;
}

.nav_list_artikel .nav-item{
	float: left;
}

/* Glossery Glossar ------------------------------------------------------------------------------ */
/* Grundstil für das Glossar-Abkürzungs-Element */
abbr.glossary {
    position: relative;       			
    cursor: help;             			
    border-bottom: 1px solid #007BFF;	
    color: #007BFF;           			
    text-decoration: none;    			
    font-weight: bold;
}


.glossary_filter_top{
    margin-bottom: 15px;
}
.glossary_filter_bottom{
    margin-top: 15px;
}

.glossary_filter_top > a, .glossary_filter_bottom  > a{
		display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 1.3em;
    padding: 5px 12px 3px 12px;
    border: 1px solid #00000005;
	border-radius: 6px;
	background-color: rgba(69, 96, 118, 0.2);
	text-decoration: none;
	margin-bottom: 3px;
}

.glossary_list_entry {
	padding: 0px 15px 10px 15px;
	text-align: justify; 
}
.glossary_list_entry > h2 {
	letter-spacing: 1px;
} 

.glossary {
	font-weight: 500;
	font-style: normal;
    border-bottom: 1px solid red;
}

.cu/stom-tooltip-class {
    background-color: #333;
    color: #fff;
}

.red-tooltip {
    background-color: red;
    color: #fff;
}

.filter-button{
    max-width: 24.6%;
    margin:  0.1rem 0.15%  0.1rem 0;
}



/* --- Styles Bootstrap Buttons  -------------------------------------------------------------------------------------- */
.btn-xs {
	--bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.60rem;
    --bs-btn-font-size: 0.75rem !important;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
	
	color: white !important;
	text-transform: uppercase;
	f/ont-size: 0.75rem !important;
}

.btn-back {
	transform: translate(-30%, -10%);
    width: 34px;           
    height: 34px;
    border-radius: 50%;
    border: 2px solid white;

    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    outline: none;
    transition: background-color 0.2s ease;
    position: relative;     
}

.btn-back::before {
    content: "";
    position: absolute;     
    width: 11px;            
    height: 11px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    top: 50%;
    left: 57%;
    transform: translate(-50%, -50%) rotate(45deg); 
}

.btn-back:hover {
  	background-color: rgba(0, 0, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.5);
}

/*--------------------------------------------------------------------------------------------------------------------*/
.btn-news:before {
	font-family:FontAwesome;
	content:"\f1ea";
	display:inline-block;
	padding-left:7px;
	padding-right:8px;
	color: red
}

/*--------------------------------------------------------------------------------------------------------------------*/
.btn-glossary:before {
	font-family:FontAwesome;
	content:"\f02d";
	display:inline-block;
	padding-left:7px;
	padding-right:8px;
	color:#fff
}

/* GO TO TOP Button unten rechts  ------------------------------------------------------------------------------------- */

#btn-back-to-top {
    position: fixed;
    bottom: 50px; 
    right: 10px;
    font-size: 0.9em;
    color: white;
    padding: 0.2em 0.85em 0.5em 0.85em;
    border: 2px solid #ffffff90;	
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(138, 43, 226, 0.8);
    z-index: 1060;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Start rechts außerhalb des Frames */
    transform: translateX(120%);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;  /* Animation hinein */
    animation: color-change-background 4s linear infinite;
}

/* sichtbar + ins Bild geschoben */
#btn-back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0); /* jetzt im Bild */
}

#btn-back-to-top:hover {
    background-color: rgba(0, 128, 0, 0.5);
}

/* Animation Button */
@k/eyframes color-change-background {
  0%,100%  { background-color: rgba(255, 255, 255, 0.2)}
	75%    { background-color:  rgba(138, 43, 226, 0.8)}
}

/* ENDE -GO TO TOP Button unten rechts  -------------------------------------------------------------------------------*/

/* --Farben -----------------------------------------------------------------------------------------------------------*/


.yellow{background: rgba(255,248,220,0.4);}

.black{background: rgba(0,0,0,0.2);}

.red{background: rgba(255,0,0,0.3);}
	
.green {background: rgba(0,255,0,0.2);}

.blue {background: rgba(0,0,255,0.3);}

.darkblue {background: rgba(50, 65, 103, 0.6);}
.linear-gradient {background-image: repeating-linear-gradient(-45deg , rgba(12,28,42,0.3) 34%, rgba(69,96,118,1.3) ); }

.abstand-box{padding: 15px;}


/* --- Styles Bootstrap Buttons  --------------------------------------------------------------------------------------*/
/* Share Button anzeigen oder nicht  */

@media (max-width: 768px) {
    .btn-group {
        flex-wrap: wrap !important; /* Lässt die Buttons umbrechen */
        j/ustify-content: center; /* Optional: Buttons zentrieren */
    }
}

.card .btn-outline-secondary {
	border-radius: 0;
}

.btn > a{
	text-decoration: none;
}
.btn-share {
	color: white;
    border: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    margin: 0 5px 10px 5px;
    min-width: 130px;
    padding: 0 15px;
    text-decoration: none;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
	}

.btn-facebook:before { /*  */
   font-family: FontAwesome;
   content: "\f09a";
   display: inline-block;
   padding-left: 3px;
   padding-right: 8px;
   color: #0763f7;
	
}

.btn-facebook:focus {
    color: #000
}

.btn-instagram:before {
    font-family: FontAwesome;
    content: "\f16d";
    display: inline-block;
    padding-left: 2px;
    padding-right: 7px;
    color: #0966ff
}

.btn-instagram:hover {
    color: rgba(16,112,180,1.0);
}

.btn-instagram:focus {
    color: #000
}

.btn-youtube:before {
    font-family: FontAwesome;
    content: "\f166";
    display: inline-block;
    padding-left: 2px;
    padding-right: 6px;
    color: #f03
}

.btn-youtube:hover {
    color: rgba(16,112,180,1.0)
}

.btn-youtube:focus {
    color: red;
}

.btn-x {
  color: white;
}

.btn-x:before { /*  */
	font-family: FontAwesome;
	content:"𝕏";
	
    display: inline-block;
    padding-left: 3px;
    padding-right: 8px;
	color: white;
}

.btn-x:focus {
	color: #fff;
}

.btn-x:hover {
	color: green;
}

.btn-pinterest {
    background: #bd081d;
}

.btn-pinterest:before { /*  */
   font-family: FontAwesome;
   content: "\f231";
   display: inline-block;
   padding-right: 5px;
   color: white;
}

.btn-pinterest:hover {
	color: #fff;
	background-color: rgba(255, 0, 0, 0.80);
}

.btn-pinterest:focus {
	color: #fff;
}

.btn-google {
    background: #d24130;
}

.btn-google:before { /*  */
   font-family: FontAwesome;
   content: "\f0d5";
   display: inline-block;
   padding-right: 5px;
   color: white;
}

.btn-google:hover {
	color: #fff;
	background-color: #aa0719;
}

.btn-google:focus {
	color: #fff;
}

/* ---MODAL für Share ------------------------------------------------------------------------------------------------ */
/* jetzt in bs5-modal.css */


/* Share Button */
.share_link{ /* für Anzeige des Links im Modal */
	margin-top: 15px;
	overflow: hidden;
	border-bottom: 1px solid #d7d7d7;
	text-align:left;
	padding: 0 0 0 5px;
	font-size: 0.9rem;
}

.modal .btn-share::before  {
	color: white;	
	padding: 5px;	
}

.share-button {
  display: var(--share-button);
  border: 1px solid #6c757d;
  background-color: transparent;
  color: var(--bs-secondary-color, #6c757d);
  border-radius: 0.25rem;
  padding: 0.246rem 0.1rem 0 0.1rem;
  font-size: 1.8rem;       /* Größe des Icons */
  line-height: 0.87;
  transition: all 0.15s ease-in-out;

  align-items: center;     /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
  margin-left: 0.4rem;
}

.share-button:hover{ 
	color: white;
	background-color:    var(--bs-btn-hover-border-color, #6c757d);
}

tag { /* Button im Artikel (für die Button ist Font Awesome nötig)  */
	position: absolute;
	top: 10px;
	right: 10px;
	border: 0;
	padding: 0;
}

tag img{ /* Button im Artikel (für die Button ist Font Awesome nötig)  */
	width: 28px;
	height: 28px;
	border-radius: 3px;
	padding: 0;
	margin: 0;
}

/* https://www.oidaisdes.org/de/native-dialog-element.de/ 
/* -----------------------------------------------------------------------------------------------*/
  .flip {
    transform: rotateY(90deg);  /* Start-Zustand: Rotiert */
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
  }

  .flip.is-visible {
    transform: rotateY(0);  /* End-Zustand: Aufrecht */
    opacity: 1;
  }

.c/ard-move.background  {
	position: relative;
	height: 300px;
	b/ackground: rgba(0, 0, 0, 0.2);
	background: linear-gradient(340deg, rgba(255,255,255,0.1) 0%, rgba(0,0,255,0.1) 100%);
	border-radius: 10px;
	padding: 15px 25px;
	b/order: 1px solid rgba(0, 0, 0, 0.1);
	b/ox-shadow: 0 2px 10px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
	backdrop-filter: blur( 5.5px );
	-webkit-backdrop-filter: blur( 5.5px );
}

.c/ard-move.background ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/page/bg-03.jpg'); /* Ersetze durch dein Bild */
    background-size: 150% 150%;
	background-repeat: no-repeat;
    background-position: 1px 1px;
	opacity: 0.1;
	animation: bg-animation 24s infinite;
}

@keyframes bg-animation {
  0% {
    background-position: top;
  }
  50% {
    background-position: bottom;
  }
  100% {
    background-position: top;
  }
}

/* ------------------------------------------------------------------------------------------------------------------- */

/* - COPY Button für Code Template ----------------------------------------------------------------------------------- */
.code-block {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: sans-serif;
  background-color: var(--bs-btn-bg) ;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background-color: #ababe8;
  border-color: #999;
}

.copy-btn:active {
  background-color: #dcdcdc;
}


/* - Preview von Webseiten-Links ------------------------------------------------------------------------------------- */

#preview a, a.preview {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  
}
.break {
  text-align: center;
}

.mini-preview-wrapper {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
  margin-top: -4px;
  border: solid 1px #000;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
  transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}

#preview a:hover .mini-preview-wrapper , a.preview:hover .mini-preview-wrapper{
  z-index: 2;
  opacity: 1;
  margin-top: 6px;
  transition: opacity .3s, margin-top .3s;
}

.mini-preview-loading, .mini-preview-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;  
}

.mini-preview-loading {
  display: table;
  height: 100%;
  width: 100%;
  font-size: 1.25rem;
  text-align: center;
  color: #f5ead4;
  background-color: #59513f;
}

.mini-preview-loading::before {
  content: 'Loading...';
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.mini-preview-cover {
  background-color: rgba(0, 0, 0, 0); /* IE fix */
}

.mini-preview-frame {
  border: none;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}