@charset "utf-8";
/* CSS Document */


body {
	min-height: 100%;
	margin: 0px;
	left: 0px;
	top: 0px;
	padding: 0px;
	font-family: Arial;	
	z-index: 1;
	background: linear-gradient(90deg,#666,#FFF,#FFF,#FFF,#666);
}



#wrapper {
	display: flex;
	position: relative;
	flex-direction:column;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
/*    justify-content:center; */
}






#Navigationsbereich {
	font-family: Arial;	
	padding: 0px 0 0px 0;
	margin: 0px 0 0px 0;
	height: 3.3vw;
	width: 100vw;
	display: block;
	position: fixed;
	  top: 0;
    left: 0;
		align-items: center;
	background:linear-gradient(10deg,#000,#383838,#000);
	z-index: 9999;

}





.leistungen_container {
	position: absolute;
 	height:600px;
	width:600px;
	white-space: nowrap;
	top:10%;
	right: 3%;
	font-family: Arial;	
	text-align:right;
	border: medium none #F30;
}

.bild_container01   {
   display:block;
   position:relative;
   margin-top:3.3vw;
   background-color:#FF6;
   width:100vw;
   height:25vw;
   text-align: left;
   background: url("../BILDER/BaustelleHintergrund03.jpg") center/cover no-repeat;
 
	
	
}









.container_01_infoleiste01 {    /* Haupt Balken inter mitte*/

	display: Flex;
	position: relative;
	padding: 0px 1% 0 1%;
    width:100vw;
    height:4vw;
	box-sizing: border-box;
	flex-direction: row;
    justify-content: space-between;
	z-index: 1;
	text-align: center;
    background:linear-gradient(10deg,#000,#383838,#000); 
      /* zentrieren */

}

.container_01_infoleiste02 {  /* 4 unterteilungen jeweilige katagorie */ 
	display: Flex;
	flex-direction: row;
	position: relative;
    padding: 0 1% 0 1%;
    width:25%;   /* (31 32 33)  gruppen haben eine breite von X%  */
    height:4vw;
      /* feste grösse bei verkleinern der Browserfenster*/

	justify-content: center;
	z-index: 10;
}


.container_01_infoleiste02::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 2px;
    background: #d0d0d0;
}

.container_01_infoleiste02:last-child::after { 
    display: none;    
}






.container_01_infoleiste031 {   /* 3 unterteilungen der katagorie   -symbol -Zahl -beschreibung */
	margin: 0 0 0 0;
	Padding: 0px 0px 0px 0px;
	display: Flex;
	position: relative;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex: 0.2; /* feste grösse bei verkleinern der Browserfenster*/
	z-index: 100;
	font-family: Arial;	
	font-size: 0.25px;
	font-weight: normal;
	color:#FFF;
}

.container_01_infoleiste031 img {
  width:70%;
  height:auto;
  
}


.container_01_infoleiste032 {   /* 3 unterteilungen der katagorie   -symbol -Zahl -beschreibung */
	margin: 0 0 0 0;
	Padding: 0px 0px 0px 0px;
	display: Flex;
	position: relative;
	flex-direction: row;
	justify-content:Center;
	align-items:center;
	text-align:center;
	flex: 0.40; /* feste grösse bei verkleinern der Browserfenster*/
	z-index: 100;
	font-family: Arial;	
	font-size: 1.5cqw;
	font-weight: normal;
	color:#FFF;
}

.container_01_infoleiste033 {   /* 3 unterteilungen der katagorie   -symbol -Zahl -beschreibung */
	margin: 0 0 0 0;
	Padding: 0px 0px 0px 0px;
	display: Flex;
	position: relative;
	flex-direction: row;
	justify-content:left;
	align-items: center;
	text-align: left;
	flex: 0.45; /* feste grösse bei verkleinern der Browserfenster*/
	z-index: 100;
	font-family: Arial;
	font-size: 1cqw;
	font-weight: normal;
	color:#FFF;
	font-variant: small-caps;
}



.counter {
    font-size: 2cqw;      /* Schriftgröße */
 	transform: scaleY(2); 	

    font-weight: bold;
    color: #FFF;
	z-index:10;
}





.stat {
    font-size: 2cqw;
	transform: scaleY(2);

    font-weight: bold;
	color: #FFF;
}










.o_box01 {
	display: Flex;
	position: relative;
	margin: 15px auto 0px auto;
	Padding: 0px 0px 0px 0px;
	justify-content: center;
	width: 100vw;
	z-index: 1;
	text-align: center;
    flex-wrap: wrap;
    gap: 15px;
	overflow: hidden;
}


.o_box02 {
	margin: 50px 0 0 0;
	display: flex;
	position: relative;
	flex-direction:row;
	justify-content: center;
	width:clamp(1200px,40%,3840px);
	gap: 20px;
	z-index: 1;
	text-align: center;

}



.o_box03 {
	margin: 20px 0px 50px 0px;
	Padding: 10px 0px 20px 0px;
	display: flex;
	position: relative;
	flex-direction:row;
	justify-content: center;
	width: clamp(600px, 100%, 3840px);
	z-index: 1;
	background:linear-gradient(90deg,#000,#585858,#000);
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
	 gap: 0px;
}


.o_box04 {
    margin: 40px 0 50px;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;      /* <-- Zeilenumbruch erlauben */
    justify-content: center;
    width: clamp(900px, 81%, 3840px);
    gap: 20px;            /* optional Abstand zwischen den Boxen */
    position: relative;
    z-index: 1;
    box-shadow: 3px 3px 4px rgba(0,0,0,1);
    border-radius: 20px;
    background-color: #FFF;
}





.box02 {
	Display:inline-Block;
	position:relative;
	Padding:0px;
	width: 20vw;
	height: auto;
	z-index: 1;
	border-radius:20px;
	overflow: hidden;
	text-align: left;
	color:#747474;
	font-family: Arial;
	font-weight: bolder;
}

.balken {
	margin: 0 0 0 0;
	Padding: 0px 0px 0px 20px;
	display: inline-block;
	position: relative;
	width:100%;
	max-height: 100px;
	background:linear-gradient(10deg,#000,#383838,#000);
	vertical-align: middle;

}




.box02:hover {
	border: 1px solid #C00;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);	
}


.box03 {
	display: flex;
	position:relative;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
	Margin: 0px;
	Padding:0px;
	flex: 1;
	min-height: 500px;
	z-index: 1;
	overflow: hidden;
	text-decoration: none;

}




.box04 {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 30px 0 25px;
    flex: 1;
    min-width: 300px;
    min-height: 400px;
    z-index: 1;
    color: #333;
    font-family: Arial;
    font-weight: bolder;
}

.box04::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 2px;
    background: #CCC;
}



.box04:last-child::after { 
    display: none;    
}


.box04:first-of-type {
    justify-content: flex-start; /* horizontal links */
    align-items: flex-start;     /* vertikal oben */
    text-align: left;
	padding: 30px 0 0 50px;
}


.inhalt01 {
	padding:20px 0 0px 20px;
	border: thin solid #C30;
}


.container03 {
	display: flex;
	position: relative;   /* <-- wichtig */
	justify-content: center;
	text-align: left;
	width:16vw;
	min-width:270px;
	margin: 0;
	padding: 20px 0 0 0;
	min-height: 100px;
	font-family: Arial;
	text-align: left;
	font-weight: bolder;
	color: #FFF;
}


.container03::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 2px;
    background: #CCC;
}



.container03:last-child::after { 
    display: none;    
}








/* Handy */
@media screen and (max-width: 768px) {



#Navigationsbereich {
	width: 100%;
	height: 50px;
	z-index:10;
	font-family: Arial;	

}


.bild_container01   {

   margin-top:50px;
 
}

.o_box01 {
	margin: 0px;
	padding: 0px;
	width: 100%;
	width: clamp(300px, 100%, 768px);

	z-index: 1;
	text-align: center;

}

.o_box02 {

	flex-direction:column;
	justify-content: center;
	width: clamp(300px,100%,768px);
	gap: 0px;

}

.o_box03 {
	margin: 20px 0px 50px 0px;

	flex-direction:column;
	justify-content: center;
	width: clamp(300px, 100%,768px);
}

.o_box04 {
	width:100%;
    gap: 0px;            /* optional Abstand zwischen den Boxen */

    flex-direction: column;
/*	background: linear-gradient(90deg,#E2E2E2,#FFF,#FFF,#FFF,#666); */

}



.box02 {
	
	width: 90%;
	height:auto;
}

.box03 {
	Margin: 0px;
	Padding:0px 10px 0px 10px;
	flex: 1;
	min-height: auto;
	z-index: 1;
	overflow: hidden;
	color:#747474;
	text-decoration: none;

}


.box04 {
	padding:0px 30px 0px  10px;
	margin :0px;
	width: 90%;
	height:auto;
	min-height: auto;
}

.box04::after { 
    display: none;    
}

.box04:first-of-type {
    justify-content: flex-start; /* horizontal links */
    align-items: flex-start;     /* vertikal oben */
    text-align: left;
	padding: 20px 0 0 10px;
	height:auto;
}



.balken {
	Padding: 0px 0px 0px 10px;
	max-height: 50px;
	font-family: Arial;
	font-weight: bold;
}


	
.container03 {
    width: 100%;
	margin: 0;
	padding: 20px 0 0 0;
    justify-content: flex-start;

}


.container03::after {
    display: none;
}





}