body {
            font-family: Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #403a3a;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
			position: relative;
        }
		
        header {
            position: static;
            height: 100vh; /* Vollständige Höhe des Viewports */
			top: 0px;
            overflow: hidden;
        }
		
		header img {
            width: 100%;
            height: 100%; /* Vollständige Höhe des Viewports */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.0;
            transition: opacity 1s ease-in-out;
            object-fit: cover;
        }

		
		
		header img.active {
            opacity: 1.2;
        }
		
		.header-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            color:  #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }

		
        .header-content {
            position: absolute;
			top: 60%;
			left: 15%;
            z-index: 5;
			font-size: 28px;
        }

        .header-content h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }

		.logo-container {
            position: sticky;
			display: block;
			text-align: center;
			margin-top: 0;
            z-index: 5;
            opacity: 0.9;
			margin-top: -75px;
        }

		.logo-container img {
            height: 100%; /* Höhe des Logos anpassen */
			width: auto;
        }

        nav {
            position: sticky;
            top: 0;
            right: 0;
			height: 100px;
            width: 100%; /* Vollständige Breite des Viewports */
            background-color: transparent;
            padding: 10px 20px;
            border-radius: 1px;
            box-sizing: border-box;
            z-index: 5;
        }
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: flex-end; /* Navigation rechtsbündig ausrichten */
        }
        nav ul li {
            margin-left: 20px;
			padding-top: 25px;
        }
		
        nav ul li:first-child {
            margin-left: auto; /* Automatischer Abstand für das erste Element, um die Navigation nach rechts zu verschieben */
        }
		
        nav ul li a {
            color:  #f5f5f5;
            text-decoration: none;
            font-size: 20px;
            padding: 5px 10px;
            border-right: 1px solid #ccc; /* Hellgrauer vertikaler Strich */
        }
		
        nav ul li a:last-child {
            border-right: none;
        }

		.NavHeaderMobile{
			display: none;
		}

		.buttonbox{
			display: flex;
			flex-direction: column;
			position: sticky;
			margin-bottom: 10px;
			top: 75%;
			margin-right: 2em;
			margin-left: 90%;
			align-items: end;
			z-index: 3;
		}

		.buttonbox .button button{
			width: 60px;
			height: 60px;
			cursor: pointer;
			border: 0px;
			background-color: transparent;
			padding: 5px;
		}

		.buttonbox .button button:hover{
			transform: scale(1.1);
		}

		.button img{
			width: 75px;
		}
		
		.headline {
			margin-top: -100px;
            text-align: center;
			font-size:	1.8em;
		}
		
		.headline hr{
			margin:0;
			padding:0;
			border:none;
			height:2px;
			color: #403a3a;
			background:linear-gradient(to right, transparent 0%,rgb(25,30,35) 30%,rgb(25,30,35) 70%, transparent 100%);
		}

        section {
            padding: 0px 0px 40px;
            
        }
		
		section h1{
			font-size: 3em;
		}
		
        section h2 {
            font-size: 1.8em;
            text-align: center;	
        }

        section p {
            font-size: 1.1em;
            line-height: 1.6;
        }
		
		section hr {
			margin:0;
			padding:0;
			border:none;
			height:2px;
			color: #403a3a;
			background:linear-gradient(to right, transparent 0%,rgb(25,30,35) 30%,rgb(25,30,35) 70%, transparent 100%);
		}
		
        .feature {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            gap: 0px; /* Verringerte Abstände zwischen den Leistungen */
        }
		
        .feature-item {
            width: 300px;
			height: auto;
            margin: 20px;
            padding: 10px;
			position: relative;
			text-align: center;
			cursor: pointer;
			z-index: 2;
        }
		
        .feature-item img {
            max-width: 100%;
            width: 100%;
            margin-bottom: 10px;
            margin-top: 10px;
			border-radius: 8px;
        }

		.DetailFeatureActive{
			text-align: left;
			display: none;
		}

		.DetailFeatureActive ul li{
			font-family: Helvetica, sans-serif;
			font-size: 1.1em;
			text-align: left;
			display: flexbox;
			padding: 7px;
		}


		.prevDetail, .nextDetail {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			width: 40px;
			height: 35px;
			border-radius: 8px;
			margin: 0 5px;
			border: 1px solid #000;
			transition: 0.3s;
			background-color: #9e4e45;
			z-index: 2;
		}

		.SlideFeature button img{
			width: 100%;
			height: auto;
		}

		.nextDetail {
			right: 0;
		}
		  

		.highlight {
            font-weight: bold;
        }
        .tab {
            display: inline-block;
            width: 1em;
        }

		.SlideFeature {
			position: relative;
    		width: 100%;
    		height: 70vh;
			max-height: 1000px;
			margin: 50px auto;
		}

		.itemFeatureItem {
			position: relative;
			display: flex;
			width: 100%;
			height: 100%;
			border-radius: 8px;
			box-shadow: 0 30px 50px #505050;
			background-position: 50% 50%;
			background-size: cover;
			align-self: center;
		}

		.img-comp-container{
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
			position: relative;
			border: solid 2px red;
			width: 100%;
			height: 100%;
			/*position: relative;
			display: flex;
			width: 900px;
			height: 600px;*/
		  }
		  
			.img-comp-img {
				position: absolute;
				width: 100%;
				height: 100%;
				object-fit: contain;
				overflow: hidden;
				border-radius: 8px;
				box-shadow: 0 30px 50px #505050;
			}
		  
				.img-comp-img img {
					display: block;
				}
		  
		.img-comp-slider {
			position: absolute;
			z-index: 2;
			cursor: ew-resize;
			width: 40px;
			height: 40px;
			background-color: #9e4e45;
			border: solid 10px #fff;
			border-radius: 8px;
		}

		.slideshow-container {
			max-width: 1000px;
			width: 550px;
			height: auto;
			position: relative;
			margin: auto;
		}
		
		.containerSlider{
			position: relative;
			width: 90%;
			height: 80vh;
			max-height: 1000px;
			margin: 50px auto;
		}

		.containerSlider .slide {
			position: relative;
			display: flex;
			width: 100%;
			height: 100%;
		}

		.containerSlider .slide .item{
		    width: 200px;
			height: 300px;
			position: relative;
			border-radius: 8px;
			box-shadow: 0 30px 50px #505050;
			background-position: 50% 50%;
			background-size: cover;
			display: inline-block;
			transition: 0.5s;
			margin: 0 10px;
			align-self: center;
		}

		.slide .item:nth-child(2){
			border-radius: 8px;
			width: 100%;
			height: 100%;
			/* transform: scale(1.4, 1.3); */
		}

		.slide .item:nth-child(1) {
			transform: matrix(1.5, 0, 0, 1.5, 50, 0);
		}

		.slide .item:nth-child(3) {
			transform: matrix(1.5, 0, 0, 1.5, -25, 0);
		}

		.slide .item:nth-child(4) {
			transform: matrix(1.2, 0, 0, 1.2, 25, 0);
		}

		/* here n = 0, 1, 2, 3, ... */
		.slide .item:nth-child(n + 5) {
			opacity: 0;
			display: none;
		}

		.item .content {
			position: relative;
			top: 50%;
			left: 100px;
			width: 300px;
			text-align: left;
			color: #f5f5f5;
			transform: translateY(-50%);
			font-family: system-ui;
			display: none;
		}
		
		.slide .item:nth-child(2) .content {
			display: block;
		}
		
		.content .name {
			font-size: 40px;
			text-transform: uppercase;
			font-weight: bold;
			opacity: 0;
			animation: animate 1s ease-in-out 1 forwards;
		}
		
		.content .des {
			margin-top: 10px;
			margin-bottom: 20px;
			opacity: 0;
			animation: animate 1s ease-in-out 0.3s 1 forwards;
		}
		
		.content button {
			padding: 10px 20px;
			border: none;
			cursor: pointer;
			opacity: 0;
			animation: animate 1s ease-in-out 0.6s 1 forwards;
		}
		
		@keyframes animate {
			from {
				opacity: 0;
				transform: translateY(100px);
				filter: blur(33px)
			}
			to {
				opacity: 1;
				transform: translateY(0);
				filter: blur(0)
			}
		}
		
		.containerSlider .button {
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 20px;
			z-index: 5;
		}
		
		.containerSlider .button button {
			width: 40px;
			height: 35px;
			border-radius: 8px;
			border: none;
			cursor: pointer;
			margin: 0 5px;
			border: 1px solid #000;
			transition: 0.3s;
			background-color: #9e4e45;
		}

		.containerSlider .button button img{
			width: 100%;
			height: auto;
		}
		
		.containerSlider .button button:hover {
			background: #ababab;
			color:  #f5f5f5;
		}
		
		input[type="email"],
		input[type="tel"],
		input[type=text], 
		text, 
		tel, 
		textarea {
			width: 100%;
			padding: 12px;
			border: 0px solid #ccc;
			border-radius: 8px;
			resize: vertical;
		}
		
		input[type=select], select {
			width: 102.5%;
			padding: 12px;
			border: 0px solid #ccc;
			border-radius: 8px;
			resize: vertical;
		}

		label {
			padding: 12px 12px 12px 0;
			display: inline-block;
		}

		input[type=submit] {
			position: relative;
			background-color: #9e4e45;
			color:  #f5f5f5;
			padding: 12px 20px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			float: right;
			margin-right: 1.5%;
			width: 25%;
		}

		input[type=submit]:hover {
			background-color: #9e4e45c4;
		}

		.col-25 {
			float: left;
			width: 25%;
			margin-top: 6px;
			margin-left: 1.5%;
		}

		.col-75 {
			float: left;
			width: 70%;
			margin-top: 6px;
		}

		.row{
			width: 100%;
			display: block;
			position: relative;
		}
		
		/* Clear floats after the columns */
		.row:after {
			content: "";
			display: table;
			clear: both;
		}

        .contact {
            background-color: #403a3a;
            color:  #f5f5f5;
            padding: 40px 0;
        }
        .contact p {
            font-size: 18px;
            margin-bottom: 20px;
        }
        .contact ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .contact ul li {
            margin-bottom: 10px;
        }
		
		.contact hr {
			margin:0px 0px 50px 0px;
			padding:0px;
			border:none;
			height:2px;
			background:linear-gradient(to right, transparent 0%,rgb(245,245, 245) 30%,rgb(245,245, 245) 70%, transparent 100%);
		}
		
		.footer {
			display: flex;
			justify-content: space-evenly;
			background-color: #403a3a;
            color:  #f5f5f5;
		} 

		.footer .logoFooter{
			max-width: auto;
			height: auto;
		}

		.footer .logoFooter img{
			max-width: 100%;
            width: auto;
			max-height: 250px;
            height: 100%;
            margin-bottom: 10px;
            margin-top: 10px;
		}

		.SubmitRow{
			display: flex;
			justify-content: end;
		}

		.socialmedia p{
			font-size: 0.9em;
			margin-left: 1%;
		}

		.socialmedia h3 {
			font-size: 1em;
			text-align: center;
		}

		.socialmedia button{
			background-color: transparent;
			border: 0;
		}

		.socialmedia button img{
			width: auto;
			height: 25px;
		}

		.socialmedia p{
			font-family: Helvetica, sans-serif;
			margin: 0;
			padding: 0;
			text-align: center;
		}

		.socialmedia{
			margin-top: 10px;
		}

		.impressum{
			font-size: 0.9em;
			
		}

		.DetailImpressumSection{
			display: none;
		}

		.impressum a{
			text-decoration: none;
			color:  #f5f5f5;
		}

		.ImpressumDetail{
			/*EADFD4*/
			background-color: transparent ;
			text-align: left;
			position: relative;
			padding: 10px;
			display: none;
			
		}

		.ImpressumDetail p{
			margin-left: 3em;
			margin-bottom: 2em;
		}

		.DatenschutzDetail{
			background-color: transparent;
			text-align: left;
			position: relative;
			padding: 10px;
			display: none;
		}

		.DatenschutzDetail p{
			margin-left: 3em;
			margin-bottom: 1em;
			font-size: 1em;
		}

		.DatenschutzDetail h4{
			font-size: 1.1em;
		}

		.DatenschutzDetail ul{
			font-size: 1em;
			margin-left: 3em;
		}

		/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
		@media screen and (max-width: 800px) {
			body{
				display: contents;
			}
			nav {
				position: sticky;
				top: 0;
				right: 0;
				height: 100px;
				width: 100%; /* Vollständige Breite des Viewports */
				background-color: transparent;
				padding: 10px 20px;
				border-radius: 1px;
				box-sizing: border-box;
				z-index: 3;
				display: none;
			}
			nav ul {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				justify-content: flex-end; /* Navigation rechtsbündig ausrichten */
			}
			nav ul li {
				margin-left: 20px;
				padding-top: 25px;
			}
			
			nav ul li:first-child {
				margin-left: auto; /* Automatischer Abstand für das erste Element, um die Navigation nach rechts zu verschieben */
			}
			
			nav ul li a {
				color:  #f5f5f5;
				text-decoration: none;
				font-size: 20px;
				padding: 5px 10px;
				border-right: 1px solid #ccc; /* Hellgrauer vertikaler Strich */
			}
			
			nav ul li a:last-child {
				border-right: none;
			}
	
			.NavHeaderMobile{
				display: block;
				position: sticky;
				top: 0;
				height: 0;
				width: 100%; /* Vollständige Breite des Viewports */
				background-color: transparent;
				z-index: 5;
			}

			#Close{
				display: none;
			}

			.NavHeaderMobile .Logo{
				text-align: left;
				height: 50px;
				width: 50px;
			}
			  
			.NavHeaderMobile #MobileLinks{
				display: none;
				background-color: #403a3a;
				font-size: 0.75em;
			}
			  
			.NavHeaderMobile a {
				color:  #f5f5f5;
				padding: 14px 16px 14px 0px;
				text-decoration: none;
				font-size: 2em;
				display: block;
				width: 100%;
				padding-left: 20px;
			}
			  
			.NavHeaderMobile a.icon {
				background: #403a3a;
				display: block;
				position: absolute;
				right: 0;
				top: 1%;
				text-align: right;
			}

			.buttonbox{
				display: flex;
				flex-direction: column;
				position: sticky;
				top: 82%;
				margin-right: 1.5em;
				margin-left: 90%;
				align-items: end;
				z-index: 3;
			}
	
			.buttonbox .button button{
				cursor: pointer;
				border: 0px;
				background-color: transparent;
				padding-bottom: 5px;
			}
	
			.button img{
				width: 55px;
			}


			#NavLogoMobile{
				height: 37px;
				width: auto;
			}

			
			#NavLogoMobileImg {
				height: 100%;
				z-index: 6;
				position:relative; 
			}
	

			.logo-container{
				position: absolute;
				width: 100%;
				text-align: center;
				margin-top: 0;
				z-index: 4;
				opacity: 0.9;
				top: 30vh;
			}

			.logo-container img{
				width: 100%;
				height: 100%;
			}

			.headline h1{
				font-size: 1.5em;
			}

			.footer{
				display: flex;
				flex-direction: column;
				text-align: center;
				min-height: 90vh;
			}

			/* here n = 0, 1, 2, 3, ... */
			.slide .item:nth-child(n + 3) {
				opacity: 0;
				display: none;
			}

			.slide .item:nth-child(1) {
				opacity: 0;
				display: none;
			}

			.containerSlider .button {
				width: 100%;
				text-align: center;
				position: absolute;
				bottom: 0px;
				z-index: 2;
			}

			.containerSlider .button button {
				width: 60px;
				height: 50px;
				border-radius: 8px;
				border: none;
				cursor: pointer;
				margin: 0 50px;
				border: 1px solid #000;
				transition: 0.3s;
				background-color: #9e4e45;
				z-index: 2;
			}

			.item .content,
			.slide .item:nth-child(2) .content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				left: 0;
				width: 100%;
			}
			.item .content div {
				width: 100%;
				text-align: center;
			}

			.SubmitRow{
				display: flex;
				justify-content: end;
				flex-direction: column-reverse;
			}

		@media screen and (max-width: 800px) {
			.col-25, .col-75, input[type=submit] {
				width: 92%;
				margin-top: 0;
			}
			.col-75{
				text-align: center;
			}

			input[type=submit][type=submit]{
				width: 97%;
				/* margin-right: 15px; */
			}

		}

		
	}