/* CSS Document */


/* ========== Thank you for looking at this code ========== */
/* ========== WARNUNG! COPYRIGHT BY haller.id | SWITZERLAND ========== */

:root {

	
	--oneColor: #F1F1F1;
	--twoColor:#AFC789;
	--twoColor2:/*#AFC789*/ #789747;
	--threeColor:#D8E3C3;
	--inputColor:#87B0D4;
	--buttonColor:#D4AB87;
	--hover1Color:#F5F5F5;
	--hover2Color:rgba(175,199,137,0.57);
	
	--successColor: #28a745;
    --infoColor: #17a2b8;
    --warningColor: #ffc107;
	--dangerColor: #dc3545;
    --lightColor: #f8f9fa;
    --darkColor: #343a40;
	--grayColor: #6c757d;
	--lightgrayColor: rgba(227,228,230,1.00);
	--whiteColor: #fff;
	
	--black: #000000;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont, "Helvetica","Verdana","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: "Helvetica", "Verdana","SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;

	--p: 16px;
	--psmall: 14px;
	--h1:100px;
	--h1small:35px;
	--h2:30px;
    --h2small:23.6px;
    --h3: 28px;
    --h3small: 25px;
	--h4:24px;
	--h4small:24px;
  	--h5: 24px;
    --h5small: 24px;
	--h6:27px;
	--h6small: 20px;
		
    --oneFont: 'web_font_regular';   
	--twoFont: 'web_font_regular_bold'; 

	--borderRadi4:4px;
	--borderRadi10:10px;
    --borderRadi20:20px;
	--borderRadi50:50%;

	--randAbstand1:1rem;
		
	--bewegung:all 0.3s ease-in-out;
	--bewegung6:all 0.4s ease-in-out;
}
	@font-face {
		font-family:'Helvetica_font_h1';
		src:url("../assets/Helvetica-Bold-Font.ttf");
	}
	@font-face {
		font-family:'Helvetica_font_h1_index';
		src:url("../assets/Amsterdam.ttf");
	}
	@font-face {
		font-family:'Helvetica_font_h2';
		src:url("../assets/Helvetica Neue LT Std 33 Thin Extended.otf");
		/*font-weight: bolder;*/
	}
	@font-face {
		font-family:'Helvetica_font_h3';
		src:url("../assets/Helvetica Neue LT Std 47 Light Condensed.otf");
		/*font-weight: bolder;*/
	}

/* Hiermit können Safari >=1.1, Opera >=9.5, IE9 was anfangen*/
::selection {
    background:var(--twoColor);
    /*color: #336699;*/
	color:var(--whiteColor);
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
    background:var(--twoColor);
    /*color: #336699;*/
	color:var(--whiteColor);
}


/* ========== ========== DESIGN BODY - HEADQUARTER ========== ========== */
* {
    padding: 0;
    margin: 0;
	font-family:var(--font-family-sans-serif);
    color: var(--whiteColor);
    font: var(--p);
    box-sizing: border-box;
}
html {
	font-size: var(--p);
	margin:0;	
	padding:0;
}
body {
	font-family:sans-serif;
	text-decoration:none;
	margin:0rem 0 0 0 ;
	padding:0;
}
header {
	position: relative;
	width: 100%;
}
main {
	min-height: 800px;
	
}
footer {
	position: absolute; 		
	width:  100%;
}
p {
	font-size: var(--p);
	color: var(--darkColor);
}
h1 {
	font-size:var(--h1);
	letter-spacing: 2px;
	/*font-weight: bold;*/
	font-family:'Helvetica_font_h2', Arial, "sans-serif";
	color: var(--darkColor);
	text-transform:lowercase;
}
#h1{
	font-size:60px;
	font-family:'Helvetica_font_h1_index', Arial, "sans-serif"!important;
}
h2 {
	font-size:var(--h2);
	color: var(--darkColor);
	letter-spacing: 2px;
	text-transform: uppercase;
   	font-family:'Helvetica_font_h2', Arial, "sans-serif";
	font-weight: bold;
}

h3 {
	font-size:var(--h3);
	color: var(--darkColor);
	text-transform: uppercase;
	font-family:'Helvetica_font_h2', Arial, "sans-serif";
}
h4 {
	font-size:var(--h4);
	color: var(--darkColor);
	text-transform: uppercase;
	/*text-align:center;*/
	letter-spacing: 2px;
    font-weight: bold;
	font-family:'Helvetica_font_h3', Arial, "sans-serif";
}
h5 {
	letter-spacing: 2px;
	font-size:var(--h5);
	color: var(--darkColor);
	font-family:'Helvetica_font_h3', Arial, "sans-serif";
    /*font-weight: bold;*/
}
h6 {
	/*font-family:'web_font_regular_bold'!important;*/
	/*font-family:'web_font_regular_bold'!important;*/
	font-size:var(--h6);
	color: var(--darkColor);
	/*text-transform: uppercase;*/
	text-align:center;
    font-weight: bold;
}
a {
	color: var(--darkColor);
	font-size: var(--p);
	text-decoration:none; 
	cursor: pointer;
	font-family:'Helvetica_font_h1', Arial, "sans-serif";
}
li {
	text-decoration: none;
    color:var(--twoColor2);
    transition: var(--bewegung6);
	font-family:'Helvetica_font_h2', Arial, "sans-serif";
	font-size:var(--h4);
	padding: 0rem 0rem 0rem 2.5rem;
	margin: 0.5rem 0;
	text-decoration: none; 
    background: url('../bilder/design/icon/image1.png') no-repeat; 
    background-size:10px; 
	background-position: top 5px left 15px;
    display: inline-block;
	width: 100%;
    /*line-height: auto; */
}

li:hover {
    /*color:var(--threeColor);
	text-decoration: underline;*/
}
strong {
	font-weight: bold;
	color: var(--darkColor);
}
.hoverbox:hover{
    box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px;
	transition: var(--bewegung6);
}

.fadein{
	opacity: 0;
    transform: translateY(50px); /* Element um 30px nach unten verschieben */
	transition: opacity 1.5s ease-in, transform 2s ease-in;
}
 .fadein.in-view {
    opacity: 1;
    transform: translateY(0);
	transition: var(--bewegung6);
}

/* ========== ========== Header ========== ========== */
.header_001{
	position: relative;
	z-index: 50;
	width: 100%;
	height: auto;
	justify-content: flex-end;
	display: flex;
	flex-wrap: wrap;
	border-bottom: solid 0.5px var(--twoColor);
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	padding: 0.5rem 0 0 0;
	border-top: solid 10px var(--twoColor);
	background-color: var(--whiteColor);
}	
.header_001_left{
	position: relative;
	width:auto;
	height: auto;
	text-align: right;
	justify-content: flex-end;
	padding-top: 0.2rem ;
}
.header_001_left img{
	height: 60px;
}
.header_001_right{
	position: relative;
	width:auto;
	text-align: right;
	justify-content: flex-end;
	display: flex;
	flex-wrap: wrap;
	padding: 0 4rem 0 0;
}
.header_001_right a{
	padding: 1.5rem 1rem 1rem 1.5rem;
	margin:0 0.2rem;
	transition: var(--bewegung6);
}
.header_001_right a:hover{
	text-decoration: underline;
	transition: var(--bewegung6);
}
	
.header_002{
	position: relative;
	display: flex;
	width: 100%;
	height: auto;
	text-align: left;
	justify-content: space-around;
}
.header_002_text{
	display: block;
	width: 50%;
	position: relative;
}

.header_002 h1{
	padding: 4rem 10% 0.5rem 10%;
	width: 100%;
}
.header_002 h2{
	padding: 0rem 10% 0.5rem 10%;
	width: 100%;
}

.header_002_img{
	display: flex;
	width: 50%;
	text-align: right;
	justify-content: flex-end;
	position: relative;
	width: auto;
	padding: 0rem  0rem 0 4rem;
	margin: 4rem 0 0 0;
}
.header_002_img a{
	display: flex;
}
.header_002_img img.header_002_img_logo{
	margin: auto 0;
	height: 100%;
	max-height: 200px;
	width: auto;
}
.header_002_img img.header_002_img_portrait{
	height: 100%;
	max-height: 300px;
	width: auto;
}
/* ========== ========== CSS für das Mobile Menü ========== ========== */
.menu-button {
	display:none;
}
.bar {
  width: 100%;
  height: 5px;
  background-color: var(--twoColor);
  transition: 0.4s;
}
/* Stil für das geöffnete Menü (sichtbare Balken) */
.menu-button.active .bar:nth-child(1) { 
	opacity: 0;
}
.menu-button.active .bar:nth-child(2) {
  	transform: rotate(-45deg) translate(-5px, 6px);
}
.menu-button.active .bar:nth-child(3) {
  	transform: rotate(45deg) translate(-5px, -6px);
}
	
		
/* ========== ========== main trio ========== ========== */
.main_001{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 4rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.main_001_inside{
	position: relative;
	width: 31%;
	height: auto;
	overflow: hidden;
	margin: 0 0.5rem;
	transition: var(--bewegung6);
	padding-bottom: -0.2rem;
	height: 500px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	border-radius: var(--borderRadi4);
	background-color: var(--whiteColor);
}
.main_001_inside:hover{
	box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
	transition: var(--bewegung6);
}
.main_001_inside img{	
	height: auto;
	width: auto;
	min-width: 100%;
}
.main_001_inside_textbox{
	position: absolute;
	bottom:0;
	left:0;
	height: auto;
	width: 100%;
	padding: 1rem 2rem 2rem 2rem;
	background-color:var(--twoColor);
}
.main_001_inside_textbox h4{
	padding: 0.2rem 0;
}
.main_001_inside_textbox p{
	padding: 0.2rem 0;
}
/**.main_001_inside_textbox a.main_001_inside_textbox_link{
	padding: 0.2rem 0;
	text-decoration: underline;
	transition: var(--bewegung6);
}
**/
img.uebermich_index_bild{
	width: 100%;
}
/* ========== ========== main über mich ========== ========== */
.main_002{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 3rem 5.5rem 1rem 5.5rem;
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0 4rem 0;
	justify-content:flex-end;
}
.main_002_inside{
	position: absolute;
	z-index: 2;
	width: 31%;
	max-width: 450px;
	left:15%;
	top:5rem;
	height: auto;
	max-height: 625px;
	overflow: hidden;
	margin: 0 0.5rem;
	transition: var(--bewegung6);
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	border-radius: var(--borderRadi4);
}
.main_002_inside:hover{
	box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
	transition: var(--bewegung6);
}
.main_002_inside img{	
	height: 100%;
	width:100%;
	border-radius: var(--borderRadi4);	
}

.main_002_inside2{
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: 600px;
	height: 100%;
	margin: 0 0.5rem;
	transition: var(--bewegung6);
	padding: 1rem 2rem 2rem 50%;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	border-radius: var(--borderRadi4);
	/*background-color:var(--twoColor);	*/
	background-image: url('../bilder/design/content/header_001.png'); /* Pfad zum Hintergrundbild */
    background-size: cover; /* Das Bild wird so skaliert, dass es den gesamten Bildschirm bedeckt */
    background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
    background-attachment: fixed; /* Das Bild bleibt beim Scrollen fixiert */
    background-position: center center; /* Das Bild wird horizontal und vertikal zentriert */
}

.main_002_inside2 h4{
	padding: 0.2rem 0;
	margin: 2rem 0 0 0;
}
.main_002_inside2 p{
	padding: 0.2rem 0;
}


/* ========== ========== einige Referenzen ========== ========== */
.main_100{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
	/*background-color: var(--hover2Color);*/
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	padding: 4rem 1rem 8rem 1rem;
}
.main_100_titel{
	position: relative;
	padding: 2rem 10% 0rem 10%;
}
.main_100 a{
	display: flex;
	flex-wrap: wrap;
	width: auto;
	height: auto;
	margin: 0 2rem;
}
.main_100 img{
	width: auto;
	height:70px;
	/* -webkit-filter: grayscale(80%); Safari 6.0 - 9.0 
    filter: grayscale(80%);*/
	transition: var(--bewegung6);
}
/*.main_100 img:hover{
	width: 100%;
	height: auto;
	-webkit-filter: grayscale(0%); 
    filter: grayscale(0%);
	transition: var(--bewegung6);
	box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px;
}*/



/* ========== ========== kompetenzen ========== ========== */
.service_000{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 4rem 6rem;
	
}
.service_000_background_bild{
	background-image: url('../bilder/design/content/header_001.png'); /* Pfad zum Hintergrundbild */
    background-size: cover; /* Das Bild wird so skaliert, dass es den gesamten Bildschirm bedeckt */
    background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
    background-attachment: fixed; /* Das Bild bleibt beim Scrollen fixiert */
    background-position: center center; /* Das Bild wird horizontal und vertikal zentriert */
}

.service_100 {
	position: relative;
	width: 100%;
	height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
	transition: var(--bewegung6);
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	padding: 0rem 0rem 0rem 1rem;
	border-radius: var(--borderRadi4);
	z-index: 2;
	background-color: var(--whiteColor);
}

.service_100:hover{
	box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
	transition: var(--bewegung6);
}
.service_100_textbox{
	padding: 0rem 10%;
	display: block;
	box-shadow:none!important;
}

.service_100_textbox h3{
	padding-bottom: 2rem;
}
.service_100_kontaktbox{
	padding: 4rem 10%;
	display: block;
}
.service_100_kontaktbox h5{
	padding-bottom: 1rem;
}
.service_100_kontaktbox h3{
	position: absolute;
	top:5rem;
	right: 5rem;
	color:var(--twoColor2);
	font-size:var(--h1);
}
.service_100_kontaktbox li:hover {
    /*color:var(--threeColor);*/
	text-decoration: none;
}
.service_101{
    width: 50%;
	height: auto;
	padding: 4rem 2rem;
	justify-content: center;
	text-decoration: center;
	overflow: hidden;
}
.service_101 img {
    width: 100%;
    height: auto;
	margin: 0 auto;
	border-radius: 500%;
}
.service_102 {
    width: 50%;
    display: flex;
	padding: 4rem 2rem;
    flex-direction: column;
}
.service_102 h3{
    margin: 2rem 0;
}
.service_102_link {
    color:var(--twoColor2);
    transition: var(--bewegung6);
	font-family:'Helvetica_font_h2', Arial, "sans-serif";
	font-size:var(--h4);
	margin: 0.5rem 0;
	padding: 0rem 0rem 0rem 2rem;
	text-decoration: none; 
	background: url('../bilder/design/icon/image1.png') no-repeat;
    background-size: 10px; 
	background-position: top 5px left 5px;
    display: inline-block;

}

.service_102 a::before {
    content: " "; /* Required for pseudo-elements */
    display: inline-block;
    width: 10px; /* Adjust the spacing width as needed */
}
.service_102_link:hover {
    /*color:var(--threeColor);*/
	text-decoration: underline;
}


/* ========== ========== Referenzen ========== ========== */
.referenzen_001{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 4rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.referenzen_001_inside{
	position: relative;
	width: 23%;
	overflow: hidden;
	margin:  2rem 0.5rem;
	padding: 1rem;
}

.referenzen_001_inside img{	
	height: auto;
	width: 100%;
	border-radius: var(--borderRadi4);
}

.referenzen_001_inside_textbox{
	position: relative;
	bottom:0;
	left:0;
	height: auto;
	width: 100%;
	padding: 1rem 2rem 1rem 2rem;
	background-color:var(--twoColor);
}
.referenzen_001_inside_textbox h4{
	padding: 0.2rem 0;
}
.referenzen_001_inside_textbox p{
	padding: 0.2rem 0;
}
.referenzen_001_kontaktbox{
	position: relative;
	display: block!important;
	padding: 4rem 10%;

}
.referenzen_001_kontaktbox h3{
	position: relative;
	color:var(--threeColor);
	font-size:var(--h3);
	padding-bottom: 2rem;
}
.referenzen_001_kontaktbox h5{
	padding-bottom: 1rem;
}
/* ========== ========== Download  ========== ==========*/
.download_main{
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	padding: 2rem 0 0 0;
}
.download_001{
	width: 20%;
	background-color: var(--lightgrayColor);
	padding: 2rem 0.5rem 1rem 1rem;
}
.download_001 h4{
	padding: 1rem 0;
}

.download_002{
	padding: 1rem 2rem;
	width: 80%;
	display: block;
	justify-content: center;
	background-color: var(--whiteColor);
    gap: 10px;
	
	}
.image-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
	}
.image-container {
	width: 300px;
	height: 300px;
	overflow: hidden;
	  /*border: 1px solid #ccc;*/
	margin: 2px;
	position: relative;
}

.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-container p {
	z-index: 3;
	position: absolute;
	bottom: 1rem;
	left:0.5rem;
	width: 100%;text-align: center;
	color: var(--whiteColor);
}
.download-img_button{
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;

}
.download-img_button_icon{	
	min-width: 28px;
	width: 50px;
	height: 50px;
	margin: 0rem;
	background-repeat:no-repeat;
	background-size:cover;
    background-attachment: inherit;
	background-position: center center;
    object-fit: contain;
	background-size: 45px 45px;
	cursor: pointer;
	background-image: url("../bilder/design/icon/icon_dwl.png");
}

.download-img_button_icon:hover{
	background-size: 50px 50px;
}

.download-form {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.download-form input[type="submit"] {
	margin: 5px;
}
/* Keyframe-Animation */
@keyframes animation1 {
    0% {
        padding: 0.5rem 8rem 0 4rem;
		transition:var(--bewegung);
    }
    100% {
        padding: 0.5rem 0 0 0;
		transition:var(--bewegung);
    }
}


 
.main-right_left_titel button{
	display: flex;
	margin: 4rem 0 4rem 0;
	padding: 1rem 1rem 0.5rem 1rem;
	background-color:var(--twoColor2);
	color:var(--whiteColor);
	border:none;
	cursor: pointer;
	transition:var(--bewegung);
}
.main-right_left_titel button:hover{
	padding: 1rem 2rem 0.5rem 2rem;
	transition:var(--bewegung);
}

.main-right_left_titel_icon{	
	min-width: 28px;
	width: 28px;
	height: 28px;
	margin: 0rem 1rem 0 0;
	padding: 0 1rem 0 0;
	background-repeat:no-repeat;
	background-size:cover;
    background-attachment: inherit;
	background-position: center center;
    object-fit: contain;
	background-size: 28px 28px;
	cursor: pointer;
	background-image: url("../bilder/design/icon/icon_dwl.png");
	transition:var(--bewegung);
}



/* ========== ========== impressum_main  ========== ==========*/
.impressum_main{
	position: relative;
	width: 100%;
	height: auto;
	display: block;
	padding: 2rem 0 2rem 0;
	justify-content: center;
}
.impressum_main_in{
	position: relative;
	width: 80%;
	max-width: 1400px;
	background-color: var(--lightgrayColor);
	padding: 2rem 0.5rem 1rem 1rem;
	margin: 0 auto;
}
.impressum_main h4{
	padding: 1rem 0;
}
.impressum_main h5{
	padding: 3rem 0 0 0 ;
}








/* ========== ========== Footer  ========== ==========*/
.footer_200{
	position: relative;
	display: flex;
	width: 100%;
	height: auto;
	background-color: var(--threeColor);
	padding: 2rem 8rem;
	justify-content:flex-start;
	overflow: hidden;
}
.footer_200_inside1{
	width: 20%;
	padding: 2rem 2rem;
}
.footer_200_inside2{
	width: 20%;
	padding: 2rem 2rem;
}
.footer_200_inside{
	position: relative;
	display:block;
	height: auto;
}
.footer_200_inside h5{
	padding-bottom: 0.5rem;
}
.footer_200_inside a{
	display: flex;
	width: 100%;
	padding: 0.2rem 0;
	font-family:'Helvetica_font_h2', Arial, "sans-serif";
	letter-spacing: 2px;
	transition: var(--bewegung6);
}
.footer_200_inside a:hover{
	transition: var(--bewegung6);
	text-decoration: underline;
}

.background_logo{
	position: absolute;
	bottom:-4rem;
	right: -2rem;
	transform: rotate(6deg);
}
.background_logo img{
	height: 300px;
	filter: grayscale(0);
	z-index: 1;
	/*filter: blur(0.4rem);*/
	border-radius:100%;
	opacity: 0.8;
}
.footer_300{
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5rem 1rem 0.5rem 2rem;
	justify-content: space-between;
}
.footer_300_inside1{
	width: 50%;
}
.footer_300_inside2{
	width: 50%;
	text-align: end;
}
.footer_300 a{
	transition: var(--bewegung6);
	font-family:'Helvetica_font_h3', Arial, "sans-serif";
	margin-right: 2rem;
}
.footer_300 a:hover{
	transition: var(--bewegung6);
	text-decoration: underline;
}



/* ========== ========== Footer hallerid - icon & copyright ========== ==========*/
	
.flo_copy_div {
	position: relative;
	padding:1rem 0rem;
	width: var(--HundertProz);	
	background-color:var(--twoColor);
	text-align: center;
	bottom: 0rem;
	transition:var(--bewegung);
}	
.flo_copy_div a:hover {
	color: var(--HauptFarbe);
	transition:var(--bewegung);
	text-decoration: underline;
}
.mobilefoot2{
	display:none;
}
.mobilefoot4{
	display:none;
}
.fva_footer_icon_member img{
	z-index: 2;
	position: absolute;
	width: 40px;
	top: -1rem;
	right: 2rem;
	transition: var(--bewegung6);
	transform: scale(1) rotate(0deg);
}
.fva_footer_icon_member img:hover{
	transition: var(--bewegung6);
	transform: scale(1.3) rotate(6deg);
}


/* ========== ========== COOKIE DATENSCHUTZ ========== ========== */
		
.cookie-banner {
	position: fixed; /*bezogen auf bildschirm fixiert*/
	bottom:-800px;
	left:0;
	right: 0;
	transition:bottom 2s ease-in-out;
	z-index: 400;
}		
.sichtbarr {
	bottom:0;		
}		
        

/* ========== MEDIA SCREEN  1580px ========== */
/* ========== APPLE NOTEBOOK 16und13zoll ========== */
	@media screen and (min-width:1581px) 
	{
body {
	/*background-color:rgba(151,185,231,1.00); ZUM ARBEITEN */
}  
.service_100 {
	max-width: 1500px;
	margin: 0 auto;
}
.main_001{
	margin: 0 auto;
	max-width: 1500px;
}	
.main_100_titel{
	position: relative;
	text-align: center;
	padding: 2rem 10% 0rem 10%;
}
.main_002{
	margin: 1rem auto 4rem auto;
	max-width: 1500px;
}		
.referenzen_001{
	margin: 0 auto;
	max-width: 1500px;
}		
}

/* ========== MEDIA SCREEN  1580px ========== */
/* ========== APPLE NOTEBOOK 16und13zoll ========== */
	@media screen and (max-width:1580px) 
	{
body {
	/*background-color:lightcoral; ZUM ARBEITEN */
}

}

/* ========== MEDIA SCREEN  992px ========== */
	@media screen and (max-width:1300px) 
	{		
body {
	/*background-color: rgba(190,124,223,1.00);ZUM ARBEITEN*/
}
.header_001{
	position: fixed;
	width: 100%;
	height: auto;
	justify-content: flex-end;
	display: flex;
	flex-wrap: wrap;
	border-bottom: solid 0.5px var(--twoColor);
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	padding: 0.5rem 0 0 0;
	border-top: solid 10px var(--twoColor);
}
.menu-button {
	position: relative;
  	cursor: pointer;
  	display: flex;
  	flex-direction: column;
  	justify-content: space-between;
	margin: 0.6rem 3rem 0.6rem 1rem;
  	width: 50px;
  	height: 45px; 	
}		
.navbar{
	display:none;
}	
.header_001_right_mobile{
	position: absolute;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	width:100%;
	height: auto;
	text-align: left;
	margin-top: 4.1rem;
	padding: 2rem 4rem 5rem 0;
	background-color:  var(--twoColor);
}
.header_001_right_mobile a{
	display: block;
	width:100%;
	height: 100%;
	padding: 1.5rem 1rem 1rem 3rem;
	margin:0rem 0.2rem;
	transition: var(--bewegung6);
	font-size:var(--h2);
}	
		
.header_002{
	padding: 5rem 0 0 0;
}
.header_002 h1{
	padding: 4rem 10% 0.5rem 10%;
}
.header_002 h2{
	padding: 0rem 10% 0.5rem 10%;
}
.header_002_text{
	width: 100%;
}
.header_002_img a{
	display: flex;
}
.header_002_img{
	padding: 0rem  2rem 0 0rem;
}
.header_002_img img{
	max-height: 150px;
}
h1 {
	font-size:var(--h1small);
	letter-spacing: 2px;
}
#h1{
	font-size:var(--h4small);	
}
h2 {
	font-size:var(--h2small);
	letter-spacing: 2px;
}
h3 {
	font-size:var(--h3small);
}
h4 {
	font-size:var(--h4small);
}
h5 {
	font-size:var(--h5small);
}
h6 {
	font-size:var(--h6small);
}		

/* ========== ========== kompetenzen ========== ========== */
.service_000{
	padding: 2rem 1rem;
}

.service_101{
    width: 50%;
	padding: 4rem 2rem 4rem 1rem;
	justify-content: center;
	text-decoration: center;
}

.service_102 {
    width: 50%;
    display: flex;
	padding: 4rem 0.5rem 4rem 0rem;
}
.service_102 h3{
    margin: 1.5rem 0;
}
		
/* ========== ========== main trio ========== ========== */
.main_001{
	padding: 4rem 0;
	display: flex;
	justify-content: center;
}
.main_001_inside{
	width: 31%;
	margin: 0 0.5rem;
	padding-bottom: -0.2rem;
	height: 500px;
}

/* ========== ========== einige Referenzen ========== ========== */
.main_100_titel{
	position: relative;
	padding: 2rem 10% 0rem 10%;
}
.main_100{
	padding: 1rem 1rem 6rem 1rem;
}
.main_100 img{
	width: 95%;
	height:auto;
	/* -webkit-filter: grayscale(80%); Safari 6.0 - 9.0 
    filter: grayscale(80%);*/
	transition: var(--bewegung6);
}
.main_100 a{
	display: flex;
	flex-wrap: wrap;
	width: auto;
	height: auto;
	margin:1rem 2rem;
}
/* ========== ========== main über mich ========== ========== */
.main_002{
	padding: 0rem 0.5rem 1rem 0.5rem;
	display: flex;
	margin: 1rem 0 4rem 0;
}
		
.main_002_inside{
	position: relative;
	width: auto;
	max-width: 20%;
	left:0;
	top:0;
	max-height: auto;
	height: auto;
	margin: 0rem auto 1rem auto;
	box-shadow:none;
	border-radius: var(--borderRadi4);
}
.main_002_inside:hover{
	box-shadow:none;
}
.main_002_inside img{	
	height: auto;
	width:100%;
}
.main_002_inside2{
	width: 70%;
	min-height: 600px;
	height: 100%;
	margin: 0 0.5rem;
	padding: 1rem 2rem 2rem 4rem;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	background-image: url('../bilder/design/content/header_001.png'); /* Pfad zum */
}
.main_002_inside2 h4{
	padding: 0.2rem 0;
	margin: 2rem 0 0 0;
}
.main_002_inside2 p{
	padding: 0.2rem 0;
}
		
/* ========== ========== Kontakt Box ========== ========== */

.service_100_textbox{
	padding: 0rem 10%;
	display: block;
}
.service_100_textbox h3{
	padding-bottom: 2rem;
}
.service_100_kontaktbox{
	padding: 2rem 10%;
	display: block;
}
.service_100_kontaktbox h5{
	padding-bottom: 1rem;
}
.service_100_kontaktbox h3{
	position: relative;
	top:0;
	right: 0;
	font-size:55px;
}
/* ========== ========== Download  ========== ==========*/
.download_main{
	width: 100%;
	height: auto;
	display: block;
	padding: 2rem 0 0 0;
}
.download_001{
	width: 100%;
	padding: 2rem 0.5rem 2rem 1rem;	
}
.download_002{
	padding: 1rem 2rem;
	width: 100%;
	display: block;
	justify-content: center;
    gap: 10px;	
	margin: 3rem 0 0 0;
}

.image-container {
	width: 100px;
	height: 100px;
	margin: 2px;
}
.image-container p {
	bottom: 0.1rem;
	left:0.2rem;
	text-align: left;
}
.download-img_button{
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
}
.download-img_button_icon{	
	min-width: auto;
	width: 24px;
	height: 24px;
	margin: 0rem;
	background-size: 20px 20px;
}

.download-img_button_icon:hover{
	background-size: 24px 24px;
}
.main-right_left_titel_icon{	
	min-width:auto;
	width: 20px;
	height: 20px;
	margin: 0rem 1rem 0 0;
	padding: 0 1rem 0 0;
	background-size: 20px 20px;
}


/* ========== ========== Footer hallerid - icon & copyright ========== ==========*/	
.mobilefoot{
	display:none;
}	
.mobilefoot2{
	display:flex
}
.mobilefoot4{
	display:flex;
}
		
/* ========== ========== Footer  ========== ==========*/

.footer_200_inside1{
	width: 30%;
}
.footer_200_inside2{
	width: 60%;
}

.footer_200_inside a{
	padding: 0rem 0;
}
.background_logo{
	bottom:0rem;
	right: -2rem;
}
.background_logo img{
	height: 150px;
}


/* ========== ========== Referenzen ========== ========== */
.referenzen_001{
	padding: 4rem 0.5rem;
}
.referenzen_001_inside{
	width: 30%;
	margin:  1rem 0.5rem;
	padding: 1rem;
}
.referenzen_001_inside_textbox{
	position: relative;
	bottom:0;
	left:0;
	height: auto;
	width: 100%;
	padding: 0.5rem;
}
.referenzen_001_inside_textbox h4{
	padding: 0.2rem 0;
}
.referenzen_001_inside_textbox p{
	padding: 0.2rem 0;
}
.referenzen_001_kontaktbox{
	position: relative;
	display: block!important;
	padding: 4rem 10%;

}
.referenzen_001_kontaktbox h3{
	font-size:var(--h6);
	padding-bottom: 2rem;
}
.referenzen_001_kontaktbox h5{
	padding-bottom: 1rem;
}
		
}	
	
/* ========== MEDIA SCREEN  768px ========== */
/* ========== APPLE tablet (kleineres) ========== */
	@media screen and (max-width:768px) 
	{	
body {
	/*background-color:rgba(240,206,164,1.00); ZUM ARBEITEN */
}
		
.header_002 h1{
	padding: 2rem 10% 0.5rem 10%;
}
.header_002 h2{
	padding: 0rem 10% 0.5rem 10%;
}
.header_002{
	display: block;
}
.header_002_img a{
	display: block;
}
.header_002_img{
	display: flex;
	width: 50%;
	width: auto;
	padding: 0rem  2rem 0 0rem;
	margin: 0rem 0 0 0;
}
.header_002_img img{
	height:auto;
	width: 100%
}	
/* ========== ========== Main Index ========== ========== */
.service_100 {
	display: block;
	padding: 1rem;
}
/*.service_101{
    width: 40%;
	height: auto;
	padding: 4rem 2rem 4rem 1rem;
	justify-content: center;
	text-decoration: center;
}
.service_102 {
    width: 60%;
    display: flex;
	padding: 4rem 0.5rem 4rem 0rem;
}
**/
.service_101{
    width: 100%;
	height: auto;
	padding: 0.5rem 2rem;
	justify-content: flex-end;
	overflow: hidden;
	display: flex;
}
.service_101 img {
    width: 80%;
    height: auto;
	margin: 0 auto;
	border-radius: 500%;	
}
.service_102 {
    width: 100%;
    display: flex;
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	border-radius: var(--borderRadi4);
	background-color: rgba(255,255,255,0.60);
}

/* ========== ========== main trio ========== ========== */
.main_001{
	padding: 4rem 0;
	display: flex;	
}
.main_001_inside{
	width: 40%;
	margin: 1rem auto;
	padding-bottom: -0.2rem;
	height:100%;
	max-height: 500px;
	min-height: 300px;
}
.main_001_inside img{	
	height: 100%;
	width: 100%;
	min-width: 100%;
}
.main_001_inside_textbox{
	position: absolute;
	padding: 0.5rem 2rem 1rem 2rem;
}

/* ========== ========== main über mich ========== ========== */
.main_002{
	padding: 0rem 0.5rem 1rem 0.5rem;
	display: flex;
	margin: 1rem 0 4rem 0;
}
.main_002_inside{
	position: relative;
	width: 100%;
	max-width: 350px;
	left:0;
	top:0;
	max-height: auto;
	margin: 0rem auto 1rem auto;
}
.main_002_inside img{	
	height: 100%;
	width:100%;
}
.main_002_inside2{
	width: 100%;
	min-height: 600px;
	height: 100%;
	margin: 0 0.5rem;
	padding: 1rem 2rem 2rem 4rem;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	background-image: url('../bilder/design/content/header_002.png'); /* Pfad zum */
}
.main_002_inside2 h4{
	padding: 0.2rem 0;
	margin: 2rem 0 0 0;
}
.main_002_inside2 p{
	padding: 0.2rem 0;
}
	
/* ========== ========== Kontakt Box ========== ========== */

.service_100_kontaktbox h5{
	padding-bottom: 1rem;
	font-size:var(--h2small);
}
.service_100_kontaktbox h3{
	position: relative;
	top:0;
	right: 0;
	padding: 0 0 1rem 0;
	font-size:var(--h2small);
}

/* ========== ========== Referenzen ========== ========== */
.referenzen_001{
	padding: 4rem 0rem;
}
.referenzen_001_inside{
	width: 45%;
	margin:  0.5rem;
	padding: 0.5rem;
}
.referenzen_001_inside_textbox{
	position: relative;
	bottom:0;
	left:0;
	height: auto;
	width: 100%;
	padding: 0.5rem;
}
.referenzen_001_inside_textbox h4{
	padding: 0.2rem 0;
	font-size:var(--h6small)
}
.referenzen_001_inside_textbox p{
	padding: 0.2rem 0;
}

	
/* ========== ========== Footer  ========== ==========*/
.footer_200{
	display: block;
	padding: 2rem 3rem;
}
.footer_200_inside1{
	width: 100%;
}
.footer_200_inside2{
	width: 100%;
}
.footer_200_inside{
	padding:1.5rem 0;
	display:block;
}
.footer_200_inside h5{
	padding-bottom: 0.5rem;
}
.background_logo{
	top:2rem;
	right: -2rem;
}
.background_logo img{
	height: 200px;
}
		

	}

	
/* ========== MEDIA SCREEN  600px ========== */
	@media screen and (max-width:600px) 
	{
body {
	/*background-color:rgba(195,245,245,1.00); ZUM BEARBEITEN */
}
.header_001_right_mobile a{
	font-size:var(--h2small);
}
	
		
/* ========== ========== main trio ========== ========== */
.main_001{
	padding: 4rem 0;
	display: block;	
}
.main_001_inside{
	width: 95%;
	margin: 1rem auto;
	padding-bottom: -0.2rem;
	
}

/* ========== ========== Referenzen ========== ========== */

.referenzen_001_inside{
	width: 95%;
	margin:  0.5rem;
	padding: 0.5rem;
}

		
		
	}