body{
	font-family: 'Nunito', sans-serif;
	/*font-size: 20px;*/
	font-weight: 400;
	margin: 0;
    padding: 0; 
	padding-left: 40px;
	padding-right: 40px;
font-size:20px;}


#fixed {
    position: fixed;
    bottom: 0;
    left: 25%;
    transform: translateX(-50%);
    z-index: 9999; /* Optional: Stellt sicher, dass der Button über anderen Inhalten liegt */
	margin-bottom:50px;
}

    #sender-email::after {
        /*content: "\00a0"; /* Fügt ein Leerzeichen ein */
   }



.persoenlich{
	
	display:flex;
	 flex-wrap: wrap; /* Erlaubt Zeilenumbruch bei Bedarf */
	        align-items: flex-start; /* Ausrichtung am Anfang der Linie */
	width:100%;
	/*background-color:palevioletred;*/
}

.persoenlich h3{width:100%;}
.vorstellung{
	font-size: 20px;
}

	.logo{
		
	height: 60px;}


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /*background-color: #f1f1f1;*/
}

.footer{
	height: 100px;
	background-color: #232D3F;
   	display: flex;
    justify-content: center;
    align-items: center;
	margin-left:-40px;
	margin-right:-40px;
	margin-top: 40px;}
	
.footer a{
	color: white;
	text-decoration: none;
	font-size:16px;

}

.navitems{
	display: flex;
	align-items: center;
}


.navbar {
    list-style-type: none;
    /*padding-right: 200px;*/
    text-align: right;
	font-size:24px;
}

.navbar li {
    display: inline-block;
    margin-left: 20px; /* Abstand zwischen den Listenpunkten */
}

.navbar li:first-child {
    margin-left: 0; /* Kein Abstand für das erste Element */
}

.navbar li a {
    text-decoration: none;
    color: #333;
    padding: 10px 20px; /* Horizontaler und vertikaler Abstand innerhalb der Zelle */
}

.navbar li a:hover {
    background-color: #ddd;
    color: #000;
}

.schlagwort h1{
	font-weight: 500;
	font-size: 34px;}

.gruender{
	
	height: 160px;
	
}

.vorstellung {
    display: flex;
	flex-wrap:wrap;
	width:100%;
    /*justify-content: space-between;*/
    align-items: center;
    /*padding: 10px 200px;*/
   /*background-color: #f1f1f1;*/
}

.vorstellung img{
	padding-left: 40px;
	padding-right: 40px;

}

.overlay{
	background-color:blue;
	height: 100px;
	opacity: 0.3;
}

#floatingFormular, .background-overlay {
	display: none;
	overflow: hidden;
}



.background-overlay{
	position: fixed;
	top:0;
	left:0;
 	opacity: 0.8;
    width: 100%; /* Festgelegte Breite des DIVs */
	height: 100%;
    background-color: white; /* Hintergrundfarbe mit Opazität */
    /*padding: 20px; /* Beispiel-Padding */
    z-index: 9997; /* Stellt sicher, dass der DIV über anderen Inhalten liegt */
}

#fixedFormular{
	position:relative;
}

#floatingFormular {
    position: fixed;
	top: 50%; /* Zentriert den DIV vertikal */
    left: 50%; /* Zentriert den DIV horizontal */
    transform: translate(-50%, -50%); /* Zentriert den DIV genau in der Mitte */
    width: 80%; /* Festgelegte Breite des DIVs */
    background-color: rgba(255, 255, 255, 0.8); /* Hintergrundfarbe mit Opazität */
    z-index: 9998; /* Stellt sicher, dass der DIV über anderen Inhalten liegt */
}


.kontakt-formular{
	width: 100%;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	/*padding:0 20px;*/
}

.anfrage{
	padding: 40px 40px;
}

	#closeButton {
		display:none;
		font-size: 30px;
		border-radius:10px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999; /* Stellt sicher, dass der Button über dem Inhalt liegt */
    padding: 10px 30px;
}

#closeButton:hover {
    background-color: lightgray; /* Hintergrundfarbe beim Hover */
}

.kontakt-formula{background-color:red;width: 50px; height: 50px;}


.feedback-message{
	position:absolute;
	height:100%;
	width: 100%;
    align-items: center; /* Zentrieren vertikal */
	border-radius: 10px;
}

#success-message{
	background-color: #99cc66;
	display:none;
}

#error-message{
	background-color: #cc6666;
	display: none;
}
.feedback-text{
	height: 70%;
	display: flex; /* Verwenden von Flexbox */
	flex-direction: column; /* Anordnen der Elemente in einer Spalte */
    justify-content: center; /* Zentrieren horizontal */
	padding-left: 50px;
	padding-top: 40px;
}
.feedback-text h3{
	width: 100%;
	margin-bottom: 20px;
}
.feedback-text h3 i{margin-left:20px;
font-size: 40px;}

.kontakt-formular h3{
	margin:0;
	padding:0;
}


.feedback-text > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px; /* Abstand zwischen Überschrift/Text und Button */
}

.redo-button {
margin-top: 20px; /* Optional: Abstand nach unten */
    margin-right: auto; /* Auto-Margin auf der rechten Seite, um den Button ganz links auszurichten */
    border: none;
    background-color: transparent;
    color: #333; /* Farbe des Textes */
    cursor: pointer;
    outline: none; /* Entfernt die Standard-Umrandung bei Fokus */
    padding: 0; /* Padding aufheben */
	font-size: 20px;
}
.redo-button i {
    margin-left: 5px; /* Abstand zwischen Icon und Text */
}


.nutzerdaten{
	width: 100%;
	/*background-color:yellow;*/
  	font-size:20px;}
.nutzerdaten p{font-size:10px;}

form {
	/*max-width: 600px; /* erhöht, damit die Paare nebeneinander passen */
    /*margin: 0 auto;
    padding: 20px;*/
    border-radius: 10px;
    /*background-color: #f9f9f9;*/
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);*/
        }



        input[type="text"], input[type="tel"], input[type="email"], select {
			width: calc(20% - 5px); /* Setzt die Breite auf 50% minus den gewünschten Abstand zwischen den Input-Elementen */
    		box-sizing: border-box;
    		padding: 10px; /* Fügen Sie einen Padding-Abstand hinzu, um den Abstand zwischen den Input-Elementen zu steuern */
    		margin: 0; /* Entfernen Sie den Standard-Außenabstand */
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
			margin:0;
            background-color: #fff;
            transition: border-color 0.3s ease;
            font-family: inherit;
            box-sizing: border-box; /* berücksichtigt die Padding-Breite in der Breite */
            display: inline-block; /* stellt die Elemente nebeneinander */
        }
		textarea {width: 50%;
			border: 1px solid #ccc;
            border-radius: 5px;
margin-top:15px;}

.nutzerdaten input, select, textarea{
	font-size:18px;
}

        input[type="submit"] {
            /*width: calc(20% - 100px);*/
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-family: inherit;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }


/*Hier sind Buttons und a-ref*/
.button {
	font-size:20px;
    display: inline-block;
    padding: 15px 25px;
    /*background-color:#232D3F;*/
	background-color:#BB1E10;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
	/*height: 20px;*/
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
	margin-right: 20px; /*Abstand zwischen den Buttons*/
	
}

.button:hover {
    background-color: #0056b3;
}

#buttonKombi{
	display: flex;
	justify-content: center;
}


.button
{
	
	
}





.kontakte{
	display: flex;
    flex-direction: column; /* Elemente vertikal untereinander anordnen */
    align-items: flex-start; /* Linksbündig ausrichten */
}


.kompetenzen {
 	display: flex;
    justify-content: space-around; /* Bilder gleichmäßig verteilen */
    align-items: center; /* Vertikal zentrieren */

}

.kompetenzbild {
    text-align: center;
    font-weight: 600;
    font-size: 25px;

}

.kompetenzbild img {
    width: 95%; /* Bild auf 100% der Containerbreite setzen */
	max-width: 400px;
    height: auto;
}

.partner img{
	width: 140px;
	height:auto;

}
.partnerlogo{
	display: flex;
    justify-content: space-around; /* Bilder gleichmäßig verteilen */
    align-items: center; /* Vertikal zentrieren */
	padding-top: 20px;
	flex-wrap:wrap;
}

.test{line-height:200%;}

.rechts, .links {
    display: flex;
    align-items: center;
	/*height: auto;*/
	padding-top: 20px;
}

.links .text{padding-left: 100px;}
.rechts .text{padding-right: 100px;}

.rechts img {
    height: 500px;
	margin-left: auto;
	}
.links img {
    height: 500px;
	margin-right: auto;
	order: -1;
}

.mobile-menu {
    display: none;
    /*position: fixed;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.9);*/
    z-index: 1000;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
}

.menu-icon.menu-open::before {
	/*X-Icon zum Schließen des Menüs*/
    content: '\f00d'; /* Unicode für das X-Mark-Icon von Font Awesome */
    font-family: 'Font Awesome 5 Free'; /* Font Awesome-Schriftart verwenden */
	font-size: 50px;
}

.menu-icon, .fa-brands.fa-instagram{
	font-size:40px; /*font-size gekopelt mit .menu-icon.menu-open::before nur größer wegen Lesbarkeit*/
}



.mobile-menu.show-menu {
    display: block;
}

.mobile-menu ul {
    list-style-type: none;
    padding: 0;
	font-size: 30px;
}

.mobile-menu li {
    margin: 0;
}


#menu-list {
    list-style-type: none;
    /*padding-right: 200px;*/
}

.mobile-menu li a {
    text-decoration: none;
	color:black;
    padding: 10px 20px; /* Horizontaler und vertikaler Abstand innerhalb der Zelle */
	line-height: 3;
}

.mobile-menu li a:hover {
    background-color: #ddd;
    color: #000;
}

.impressum-container p{
	font-size: 16px;
	padding: 0 40px;
}

.impressum-container h2{
	font-size: 24px;
}
.impressum-container h3{
	font-size: 16px;}
.impressum-kontakt{
	margin-bottom: -14px;
}

.fa-solid.fa-mobile-retro, .fa-solid.fa-paper-plane{
padding-right: 20px;
}

.fa-solid.fa-paper-plane{
	font-size: 22px;
}
.fa-solid.fa-mobile-retro{
	font-size:30px;
}
.telefon{
	padding-bottom: 10px;
}



.hydraulic, .testflaechen{
	margin:100px 0;
}

.inhalt {
    flex: 1;
    padding-right: 20px;
}

.bild {
    flex: 1;
    text-align: right;
}



/*.hydraulic img{
	height: 200px;
}
.testflaechen img{height:300px;}*/



/* Extra Small Devices (Telefon, unter 576px) */
@media (max-width: 575.98px) {
    /* CSS-Regeln für extra kleine Geräte */
}

@media (max-width: 767.98px) {
    /* CSS-Regeln für kleine Geräte */



}

/* Small Devices (Tablets, 576px bis 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* CSS-Regeln für kleine Geräte */
}

/* Medium Devices (Laptops, 768px bis 991px) */
	@media (min-width: 768px) and (max-width: 991.98px) {
    /* CSS-Regeln für mittelgroße Geräte */
}

/* Medium Devices (Laptops, 768px bis 991px) */
	@media (min-width: 768px) {
    /* CSS-Regeln für mittelgroße Geräte */

}
@media (min-width: 992px){
		  body .menu-icon {
        display: none; /* Verberge das Hamburger-Icon für Bildschirmbreite größer oder gleich 1200px */
			  background-color: red;}
    }

@media (max-width: 991.98px){
	
		.navitems {
        display: none; /* Verberge die Navbar-Elemente */
    }
	

	
	.scrollToTop, #buttonKombi
{margin-bottom: 20px;}
	
		 .rechts, .links {
        flex-direction: column;
        align-items: flex-start;
    }
	.partner img{padding: 10px;}
	
	.rechts img, .links img {
    width: 100%; /* Das Bild nimmt die volle Breite des Containers ein */
    height: auto; /* Behalte das Seitenverhältnis des Bildes bei */
	}

	.links .text {
    order: -1; /* Ändere die Reihenfolge des Texts */
	padding-left: 0px;/* Linksbündige Ausrichtung des Texts */
	}
	
	.rechts .text{padding-right: 0px;}
}
#Hydraulikblock{width: 60%;}


/* Large Devices (Desktops, 992px bis 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* CSS-Regeln für große Geräte */
	.rechts img, .links img {
    height: 350px;
	}
}

@media (min-width: 1199.98px) and (max-width: 1599.98px) {
    /* CSS-Regeln für große Geräte */
	
	.rechts img, .link img {
    height: 400px;
	}
		.persoenlich{
		max-width:500px;
		min-width: 400px;}
	
.hydraulic img {
	height: 400px;
}


}
/*ehemals @media (max-width: 1199.98px){*/
	@media (max-width: 1199.98px){
		#buttonSingle{
	display: flex;
	justify-content: center;
}

	
	.kompetenzen img{
	max-width: 400px;}
		
	/*.hydraulic{
		
	  justify-content: center;
  align-items: center;
		}
		
		#Hydraulikblock{
			position: relative;
          width: 400px;
			display: flex;
	  justify-content: center;
  align-items: center;
		}*/
		
	.kompetenzen{
	flex-wrap: wrap;}
	
	.rechts, .links {
	height: 100%;}
	
}
@media (min-width: 1200px){
	/*.vorstellung img{
	padding-left: 100px;
	padding-right: 200px;}
	}*/

	.vorstellung{flex-wrap: nowrap}}

	@media (min-width: 1600px){
		.persoenlich{
		max-width:600px;
		}
}