/*Definition Farben und Schriften / Standards*/

:root {
	--color_blue:0,116,190;
	--color_red:192,3,3;
	--color_green:205,204,0;
	--color_grey_dark:70,70,70;
	--color_grey_light:100,100,100;
}

@font-face {
    font-family: 'LiberationNarrow';
    src: url('../fonts/Liberation/LiberationSansNarrow-Regular.eot');
    src: url('../fonts/Liberation/LiberationSansNarrow-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Liberation/LiberationSansNarrow-Regular.woff2') format('woff2'),
         url('../fonts/Liberation/LiberationSansNarrow-Regular.woff') format('woff'),
         url('../fonts/Liberation/LiberationSansNarrow-Regular.ttf')  format('truetype'),
         url('../fonts/Liberation/LiberationSansNarrow-Regular.svg#ITC Berkeley Oldstyle Std') format('svg');
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans/open-sans-latin-500-normal.woff2') format('woff2'),
         url('../fonts/OpenSans/open-sans-latin-500-normal.woff') format('woff');
}


body{
	font-family:"OpenSans",Arial,sans-serif;
	color:rgb(var(--color_grey_dark));
}

a {
	position:relative;
	text-decoration:none;
	color:rgb(var(--color_blue));

}


a:hover {
	color:rgb(var(--color_blue));

}

section a:hover{
		font-weight:bold;
}

a::after { 
	content: ""; 
	position: absolute; 
	left: 0; 
	bottom: -2px; 
	width: 0%; 
	height: 2px;
	background-color: currentColor; 
	transition: width 0.3s ease; } 

a:hover::after, a:focus-visible::after { width: 100%; }


a.inverse, h1.inverse {
	color:white;
}

 a:focus-visible {

	outline:3px solid rgba(var(--color_red));
	 border-radius:4px;	
 }
 
 h1 {
	
color:rgb(var(--color_green));
font-size:1.5rem;



 }
 
 h2{
	 	font-family:"LiberationNarrow",Arial,sans-serif;
		color:rgb(var(--color_grey_light));
		font-size:2.5rem;
		font-weight:bold;
		padding-bottom:1.5rem;
		
 }
 
 h3{
	font-family:"LiberationNarrow",Arial,sans-serif;
	color:rgb(var(--color_grey_light));
	font-size:1.5rem;
	padding-top:1.5rem;
	padding-bottom:1rem;
	
 }
 
 h3.impressum {
	 border-bottom:2px solid rgb(var(--color_grey_light));
	 padding:1.5rem 0 0rem 0;
	 margin-left:1.5rem;
	 margin-bottom:1.5rem;
 }
 
 p.impressum {
	 padding-left:3rem;
 }
 
 img.impressum {
	 width:400px;
	 height:auto;
	 padding-left:3rem;
	 padding-bottom:1.5rem;
 }
 

 
 .impressum_list{
	 margin-left:3rem;
 }
 
 h4 {
	 font-size:1.25rem;
 }
 
 
 
 .source_nom {
	 font-size:0.8em;
	 padding-top:0.8rem;
	 margin-bottom:0rem;
 }
 
 

 
 .big {
	 font-size:1.3em;
 }
 


/*-----------------Bild positionieren-----------------------------------*/


.image-wrapper{
	position:relative;



	
}

.image-wrapper img{
	border:5px solid white;
	box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
	
}

.image-wrapper_red::after { 
	content: ""; 
	position:absolute; 
	left: 2rem; 
	top: 0; 
	width: 90%; 
	height: 90%;
	background-color:rgba(var(--color_red),0.2);

	transform: rotate(-5deg); 
	z-index: -1; 
	border-radius: 6px; 
	}
	
.image-wrapper_green::after { 
	content: ""; 
	position:absolute; 
	left: 2rem; 
	top: 0; 
	width: 90%; 
	height: 90%;
	background-color:rgba(var(--color_green),0.3);

	transform: rotate(-5deg); 
	z-index: -1; 
	border-radius: 6px; 
	}
	
.image-wrapper_blue::after { 
	content: ""; 
	position:absolute; 
	left: 2rem; 
	top: 0; 
	width: 90%; 
	height: 90%;
	background-color:rgba(var(--color_blue),0.3);

	transform: rotate(-5deg); 
	z-index: -1; 
	border-radius: 6px; 
	}


/*------------------------Bild Positionierung unterschiedliche Screen*/


 


@media only screen and (min-width : 1200px){
	
.image-wrapper_red::after { 
	content: ""; 
	position: absolute; 
	left: 3rem; 
	top: -0.5rem; 
	width: 90%; 
	height: 100%;
	background-color:rgba(var(--color_red),0.2);

	transform: rotate(-5deg); 
	z-index: -1; 
	border-radius: 6px; }
	
	
 


.image-wrapper_green::after { 
	content: ""; 
	position: absolute; 
	left: 3rem; 
	top: -0.5rem; 
	width: 90%; 
	height: 100%;
	background-color:rgba(var(--color_green),0.3);

	transform: rotate(-5deg); 
	z-index: -1; 
	border-radius: 6px; }
	
.image-wrapper_blue::after { 
	content: ""; 
	position: absolute; 
	left: 3rem; 
	top: -0.5rem; 
	width: 90%; 
	height: 100%;
	background-color:rgba(var(--color_blue),0.3);

	transform: rotate(-5deg); 
	z-index: -1; 
	border-radius: 6px; }
	
	
 
}
	

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


/*-------------------------Einblend-Effekt--------------------*/

.fade-up { 
opacity: 0; 
transform: translateY(100px); 
transition: opacity 0.7s ease-out, transform 0.7s ease-out; 
}

.fade-up.visible { 
opacity: 1; 
transform: translateY(0); 
}

#Top_Section {
	margin-top:3rem;
}
	
/*----------------------------------------------------------*/


/*----------------------------card -------------------------------*/

.card {
	border:5px solid white;
	background-color:rgba(var(--color_blue),0.7);
	box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.1);
}

.card_green  {
	background-color:rgba(var(--color_green),0.5);
}

.card_green a{
	color:rgb(var(--color_grey_dark));
}



.card a:focus-visible{
	border:none;
	outline:none;
}


.card:has(a:hover){
	background-color:rgb(var(--color_blue));
	border:5px solid rgba(var(--color_grey_light),0.5);
	box-shadow: 5px 5px 0.5rem 0px rgba(0,0,0,0.3);

}

.card_green:has(a:hover){
	background-color:rgb(var(--color_green));
	border:5px solid rgba(var(--color_grey_light),0.5);
	box-shadow: 5px 5px 0.5rem 0px rgba(0,0,0,0.3);

}

.card a:hover {
		font-weight:normal;
}


.card:has(a:focus-visible){
	border:5px solid rgba(var(--color_red));
	 border-radius:6px;
	  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.card-img,
.card-img-top {
  border-top-left-radius: 0px;
  border-top-right-radius:0px;
}


.normal_list{
	list-style-type: disc;
}




.normal_list li{
	
	
	padding-bottom:10px;
	/*background-image: url("../img/Bullet_Point.svg");
	background-size:20px;
	background-repeat: no-repeat;*/
}




/*---------------------------infobox-------------------------------*/

.bg_hint_green {
	background: url("../img/Bildmarke.svg") rgba(var(--color_green),0.5) no-repeat;
}

.bg_hint_red{
	background: url("../img/Bildmarke.svg") rgba(var(--color_red),0.3) no-repeat;
	

	
}

.bg_hint_blue{
	background: url("../img/Bildmarke.svg") rgba(var(--color_blue),0.3) no-repeat;
	

	
}

.bg_hint{
	
	background-size: auto 30rem; 
	background-position:-21rem top; /* oder nach Wunsch */
	margin-bottom:2rem;
}



.card_red_cnt{
	background-color:rgba(var(--color_red),0.3);
		box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
}

.card_green_cnt{
	background-color:rgba(var(--color_green),0.5);
		box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
}

.card_blue_cnt{
	background-color:rgba(var(--color_blue),0.3);
		box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
}



/*Header*/


@keyframes LogoStart {
  0% {
    transform: rotate(-10deg) scale(1); /* Start: Keine Drehung, Originalgröße */
  }
  50% {
    transform: rotate(-10deg) scale(1.3); /* Mitte: Leicht gedreht & vergrößert */
  }
  100% {
    transform: rotate(-10deg) scale(1); /* Ende: Stärker gedreht & verkleinert */
  }
}


.navbar-color{
	background-color:rgba(var(--color_blue),0.1);
	border-bottom:3px solid rgba(var(--color_blue));
	box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
}

.hd{
	padding:0px;
	overflow:hidden;
	position:relative;
	z-index:-1;
}

.img_Logo {
	transform: rotate(10deg);
	transform-origin: center center; 
	-webkit-transform: rotate(10deg);
    -webkit-transform-origin: center center;

}

.Logo_small {
	position:absolute;
	width:200px;
	left:6rem;
	

}







.Logo {
	width:15rem;
	height:auto;
	padding:0.7rem;
	border-radius:50%;
	border:1px solid rgba(0,0,0,0.4);
	position:absolute;
	top:20px;
	left:3rem;
	background-color:white;
	transform: rotate(-10deg);
	transform-origin: center center; 
	-webkit-transform: rotate(-10deg);
    -webkit-transform-origin: center center;
	box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
transition: width 0.4s ease, height 0.4s ease;
	animation-name: LogoStart;
  animation-duration: 1.5s; /* Dauer der gesamten Animation */
  animation-iteration-count: 1; /* Läuft nur einmal ab */
  animation-timing-function: ease-in-out; /* Schöne Beschleunigung/Verzögerung */
  /* Optional: Verzögerung beim Laden */
  animation-delay: 0.5s; /* Startet nach 0.5 Sekunden */

}

.Logo:has(a:focus-visible){
	border:3px solid rgba(var(--color_red));
	
}

.Logo_link:focus-visible{
	outline-width: 0px;
}

.Logo_link:hover::after, .Logo_link:focus-visible::after, .Logo_small a:hover::after, .Logo_small a:focus-visible::after  {
	width:0%;
}



	

/*Header different Screen */

@media only screen and (min-width : 767px){
	
.hd {
	height:20rem;
}

.Logo {
	
	width:18rem;
} 

}

 
@media only screen and (min-width : 992px){
	
.Logo {
	width:20rem;
}
	
 
}
 

@media only screen and (min-width : 1200px){
	
.hd {
	height:25rem;	
}

.Logo {
	width:30rem;
}

}

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


/*Menue*/

.main_mn{
	margin-right:0px;
	margin-left:auto;
	border-radius:50%;
	background-color: rgba(255,255,255,0.6);
	box-sizing:border-box;
	
}

.main_mn:hover, .main_mn:focus{
	background-color: rgba(255,255,255,1);
	box-shadow: 3px 2px 0.2rem 0px rgba(0,0,0,0.4);
}

.main_mn:active,.navbar-toggler[aria-expanded=true]{
	background-color: rgba(var(--color_green),0.1);
	box-shadow:inset 2px 1px 0.2rem 0px rgba(0,0,0,0.4);
}


.main_mn:focus-visible{
	border:3px solid rgba(var(--color_red));
}
	
.container_mn{
	max-width:90%;
	
	
}
 

.line {

	height:3px;
   width: 24px; 
	display:block; 
   transition:0.5s; 
   transform-origin: center; 
   margin:6px;
   border-radius:2px;

}

.navbar-toggler[aria-expanded=true] > .icon-menu > .line:nth-child(1){
   transform: translateY(8.5px) rotate(-45deg);
}

.navbar-toggler[aria-expanded=true] >  .icon-menu > .line:nth-child(3){
  transform: translateY(-8.5px) rotate(45deg);
}

.navbar-toggler[aria-expanded=true] > .icon-menu > .line:nth-child(2){
   opacity:0;
}

.line:nth-child(1) { background:rgb(var(--color_blue)); }
.line:nth-child(2) { background:rgb(var(--color_green)); }
.line:nth-child(3) {background:rgb(var(--color_red));}

.navbar-collapse{
	font-family:"LiberationNarrow",Arial,sans-serif;
	
	 position:absolute;
	right:1rem;
	 top:70px;
	background-color:#f5f9fc;
	 width:170px;
	 border-radius:4px;
	 -webkit-box-shadow:3px 2px 0.5rem 0px rgba(0,0,0,0.4);
	 box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
	z-index:500;
	
	font-size:1.1rem;
 }
 
.nav-item.active{
	 background-color:#e3eddf;
	 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	border-radius:4px;
 }
 
 .nav-item.active:hover{
	 background-color:#dcecf5;
	 color:red;

 }
 
 .nav-item{
	 border-bottom:1px solid rgba(0,0,0,0.2);
 }
 
  .nav-item:hover{
	 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	border-radius:4px;
	background-color:#dcecf5;
	
 }
  
 
 
.nav-link:focus-visible{
	border:3px solid rgba(var(--color_red));
	border-radius:4px;
	outline:none;
	color:rgb(var(--color_blue));
	 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
			border-radius:4px;
			 background-color:#dcecf5;
}
	 
 

 .navbar-nav a{
	 color:rgb(var(--color_blue));
	 padding-left:2rem;
 }
 
  .navbar-nav a::after, .card a::after{
	 height:0px;
 }
 
  .navbar-nav a:hover{
 color:rgb(var(--color_blue));
}

/*------------Menue Different Screen---------*/

@media only screen and (min-width : 767px){

.navbar{
	height:5rem;
	padding-bottom:0px;
}


.container_mn{
	margin-left:20rem;
	height:100%;
}
	
	.navbar-collapse{
	
	 flex-direction:row;
	 position:relative;
	 top:0px;
	 box-shadow:none;
	 background-color:transparent;
	 border-bottom:0px;
	 font-size:1.1rem;
	 height:100%;

	
 }
 
 .navbar-nav{
	 align-items:center;
	 margin:auto auto 0px auto;
	 
	
 }
 
 .nav-item{
	 border-bottom:0px;
	 padding:0 0.6em 0 0.6em;
	
}

  .nav-item:hover{
	 -webkit-box-shadow: none;
	box-shadow: none;
	border-radius:4px;
	background-color:transparent;
	
	
 }
 
 .nav-txt{
	 padding-bottom:8px;
	 padding-top:10px;
 }
 
 .nav-item.active{
	 background-color:transparent;
	 -webkit-box-shadow: none;
	box-shadow:none;
	border-radius:0px;
	background-color:rgba(255,255,255,0.6);
	/*background-color: rgba(var(--color_green),0.1);*/
	border:1px solid rgba(0,0,0,0.1);
	border-bottom:transparent;	
	 border-radius:4px;
}

.nav-item.active:hover{
	background-color:white;
	-webkit-box-shadow:3px 2px 0.5rem 0px rgba(0,0,0,0.4);
	 box-shadow: 3px 2px 0.2rem 0px rgba(0,0,0,0.4);
	
}

.nav-item:has(a:focus-visible){
	border:3px solid rgba(var(--color_red));
	 border-radius:4px;
	  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.nav-link:focus-visible {
	border:none;
	color:rgb(var(--color_blue));
	 -webkit-box-shadow:none;
	box-shadow: none;
	background-color:transparent;
}
 
.nav-txt {
	width:100%;
	display:block;
}

.active .nav-link::after{
		content:"";
		display:block;
		position:absolute;
		left:0px;
		bottom:0px;
		height:5px;
		background-color: rgb(var(--color_blue));
		/*border-bottom:5px solid rgb(var(--color_blue));*/
		width:100%;
		
 } 
 
 .std .nav-link::after{
	 	content:"";
		display:block;
		position:absolute;
		left:0px;
		bottom:0px;
		height:5px;
		background-color: rgb(var(--color_blue));
		/*border-bottom:5px solid rgb(var(--color_blue));*/
		width:100%;
		transform: scaleY(0); 
		transform-origin: bottom;
		transition: transform 0.3s ease-out;
 } 
 
 .std .nav-link:hover::after{
	 transform: scaleY(1);
 }
 
 
  
 .nav-link{
	 padding:0px;
	  position:relative;
}
 
  .navbar-expand-lg .navbar-nav .nav-link{
	  padding:0px;
	  
	  }

	
}

@media (min-width: 992px){
	
	.container_mn{
	margin-left:22rem;
}

.navbar-collapse{
	 font-size:1.4rem;
	
 }

  .nav-item{
	
	 padding:0 0.9em 0 0.9em;
	
}

 
}

@media only screen and (min-width : 1200px){
	
	.container_mn{
	margin-left:30rem;
}

 .nav-item{
	  padding:0 1em 0 1em;
		
 }
 
	
}

@media only screen and (min-width : 1500px){
	

 .nav-item{
	  padding:0 2em 0 2em;
		
 }
 
	
}

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

/*-------Balken unter Header------------------*/

 .dark_blue{
	 background-color: rgba(var(--color_blue));
	display:block;
	 border-top:5px solid white;
	 box-shadow: 3px 2px 0.5rem 0px rgba(0,0,0,0.4);
	 color:white;
	 padding-bottom:1rem;
	
 }
 
 .dark_blue .row{
	 display:block;
 }
 
 .address-text{
	 font-size:0.9rem;
 }
 
 
.address-block { 
	line-height: 1.1; } 
	
.container_contact {
	margin-bottom:1em;
}

.image_contact {
	width:60%;
	margin-bottom:2em;
}

.address-icon { 
	font-size: 1.6rem; /* Höhe des Icons → anpassen bis es die 2 Zeilen füllt */ 
	display: flex; 
	align-items: center;
}



.position_content{
	display: inline-block;
	padding-left:1rem;
	padding-top:1rem;
}

.position_content:has(a:focus-visible){
	border:3px solid rgba(var(--color_red));
	 border-radius:4px;
	  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	background-color: rgba(255,255,255,0.3);
}
 
.position_content a:focus-visible {
	border:none;
	outline:none;
}

/*------------------Blauer Adressbalken andere Größen-----------*/

@media only screen and (min-width : 767px){
	

	
.dark_blue .row{
	 display:flex;
 }
 
 .dark_blue .third{
	 flex-basis:100%;
 }



}


@media only screen and (min-width : 1200px){
	
.address-text{
font-size: var(--bs-body-font-size);
}
	
.address-icon{
	font-size: 2.2rem;
}

.address-block { 
	line-height: 1.3; } 
 
 .dark_blue .third{
	 flex-basis:0%;
 }
 

 }
 
 /*-------------------Footer-------------*/
 
 .footer_last{
	 background-color:rgb(var(--color_grey_dark));
	 padding-bottom:1rem;
	 padding-top:1rem;
 }
 

  
  .footer_first {
	 background-color:rgb(var(--color_grey_light));

	 	 text-align:center;
  }
  
  .footer_first div {
	  display:block;
  }
  

	
	.footer_line::after{
	content:"";
	display:block;
	width:40%;
	border-bottom:1px dotted white;
	margin:1.5rem auto 1.5rem auto;

	}
	
	.footer_first img {
		width:70%;
		vertical-align:middle;
		
		
		
	}
	.footer_menue {
		padding-bottom:0.3rem;
		display:block !important;
	}
	
	
	.icon_inside{
	padding-right:0.5rem;
	}
	
	/* ----------Footer andere Größen-------------------'*/
  
  @media only screen and (min-width : 767px){
	.footer_last div{
	 display:flex; 
  }
  
  }
 

 @media (min-width: 992px){
  
    .footer_first {
	font-size:0.875rem;
	text-align:left;
  }
  
  	.footer_first img {
		width:90%;
		
	}
	
	.col_footer_menue{
		border-left:1px dotted white;
	}
  

  
  .footer_first .row {
	  display:flex;
  }
  
  	.footer_line::after{
	content:"";
	display:none;

	}
	  
 }
 
 
 @media (min-width: 1200px){
  
    .footer_first {
	font-size:1rem;

  }
  
  
 }