/* styles.css */

body {
	display: flex; /* Use flexbox for layout */
	flex-direction: column; /* Align items in a column */
	font-family: Arial, sans-serif;
	margin-top: 0; /* Remove margin */
	margin-bottom : 100px;
	padding: 0 20px; /* Set top padding to 0 and side padding to 20px */
	background-color: #ececec;
}
header {
	text-align: center;
	margin-bottom: 20px;
}
header img {
	max-width: 200px;
	margin: 0; /* Remove margin from logo */
}
.container {
	background: white;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.row {
	display: block; /* Change to block to stack elements */
	margin-bottom: 15px;
}

.row label {
	margin-bottom: 5px; /* Add some space below the label */
	display: block; /* Ensure label takes full width */
	width: calc(60% - 10px); /* Full width minus margin */
}

.row input, .row select, .row textarea {
	margin-right: 10px; /* Space between input fields */
	min-height: 30px; /* Minimum height for inputs */
	width: calc(80% - 10px); /* Full width minus margin */
}

.address-part-1 {
	display: inline-block; /* Use inline-block for each part */
	width: 27.5%; /* Set width for each part (adjust as needed) */
	margin-right: 10px; /* Space between input fields */
}

/* Adjustments for other parts if necessary */
.address-part-2 {
	display: inline-block; /* Use inline-block for each part */
	width: 64%; /* Set width for this part */
	margin-right: 10px; /* Space between input fields */
}

.label-part-1 {
	display: inline-block; /* Use inline-block for each part */
	width: 30%; /* Set width for each part (adjust as needed) */
	margin-right: 10px; /* Space between input fields */
}

/* Adjustments for other parts if necessary */
.label-part-2 {
	display: inline-block; /* Use inline-block for each part */
	width: 50%; /* Set width for this part */
	margin-right: 10px; /* Space between input fields */
}

.remarks {
	font-size: 12px; /* Smaller font size */
	color: gray; /* Gray color for remarks */
	margin-top: 5px; /* Space above remarks */
}
.copyright {
	font-size: 11px; /* Smaller font size */
	color: gray; /* Gray color for remarks */
	margin-top: 5px; /* Space above remarks */
}
textarea {
	resize: none;
}
.appliance {
	margin-bottom: 20px; /* Adjust the value as needed */
}
.infoImage{
	width: 15px;
}
.required {
	color: red; /* Red color for the asterisk */
	margin-left: 5px; /* Space between label text and asterisk */
}

.tooltip {
	position: relative; /* Position relative for the tooltip */
	cursor: pointer; /* Change cursor to pointer */
}
.tooltiptext {
	visibility: hidden; /* Hidden by default */
	width: 200px; /* Set width of the tooltip */
	background-color: gray; /* Background color */
	color: #fff; /* Text color */
	border-radius: 5px; /* Rounded corners */
	padding: 5px; /* Padding */
	position: absolute; /* Absolute positioning */
	z-index: 1; /* Ensure tooltip is on top */
	bottom: 125%; /* Position above the tooltip */
	left: 50%; /* Center tooltip */
	margin-left: -100px; /* Adjust margin to center */
	opacity: 0; /* Hidden by default */
	transition: opacity 0.3s; /* Fade effect */
}

.tooltip:hover .tooltiptext {
	visibility: visible; /* Show tooltip on hover */
	opacity: 1; /* Fade in */
}

button {
	background-color: #f59b00; /* background color*/
	color: black; /* White text */
	border-color: #8c0014
	border: none; /* No border */
	padding: 10px 20px; /* Padding */
	text-align: center; /* Center text */
	text-decoration: none; /* No underline */
	display: inline-block; /* Inline block */
	font-size: 14px; /* Font size */
	cursor: pointer; /* Pointer cursor on hover */
	border-radius: 5px; /* Rounded corners */
	transition: background-color 0.3s; /* Transition effect */
	align-self: flex-end; /* Align button to the right */
}

button:hover {
	color: #000;
	background-color: #c27b00;
}

.error {
	color: red;
	font-size: 0.9em;
	margin-top: 10px;
	display: none; /* Initially hide the error message */
}
.wrapper-footer{
	margin-top:100px;
}
.wappen {
	width: 92px; /* Change width */
	height: auto; /* Maintain aspect ratio */
}