*{
    box-sizing: border-box;
}
body{
	margin: 0;
				padding-top: 30px;
				padding-bottom: 40px;
				padding-right:20px;
        padding-left:20px;
				background-color: #FFFFFF;
				font-size: 17px;
				font-family: Arial, sans-serif;		
				}


.kontaktformular  {
	width: 555px;
				max-width: 100%;
				margin:auto;
				padding: 2.1rem;	
				padding-top: 15px;
				padding-left: 15px;
				padding-bottom: 24px;
				padding-right: 15px;	
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        border-radius: 10px;	
}



/* style submit-button  */

.kontaktformular .row .senden {
        font-family: Arial, sans-serif;
        letter-spacing: 0.3px;
        display: flex;
        justify-content: center; 
        align-items: center;
				width: 100%;
				font-size: 15.5px;
        height: 2.90rem;
				margin-top: calc(1rem/16*5);
				color: white;
				background-color: #337ab7;
				transition: background 0.3s ease;
				border: none;
				border-radius: 5px;
}


body.safari .kontaktformular .row .senden {
        padding-top: 3px;
}


.kontaktformular .row .senden:hover {
				background-color: #286090;
				cursor: pointer;
}



input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.2); /* IE */
  -moz-transform: scale(1.2); /* FF */
  -webkit-transform: scale(1.2); /* Safari and Chrome */
  -o-transform: scale(1.2); /* Opera */
  
}

a:link, a:visited, a:active{color:#000000;text-decoration:none;}
a:hover{text-decoration: underline;}


.kontaktformular .row{
	padding: 0px 10px;
}
	.kontaktformular label{
		display: inline-block;
		width: 30%;
		vertical-align: top;
		padding-top: 11.5px;
	}
	
	
	
	
	.kontaktformular .select-label{
		padding-top: 13px;
	}
	.kontaktformular .upload-label{
		padding-top: 13px;
	}
	
	.kontaktformular .field{
		display: inline-block;
		width: 68%;
	}
			  
	.kontaktformular input, .kontaktformular textarea, .kontaktformular select {
		width:100%;
		padding: 8px 3px;
		margin: 2px 0;
		font-size: 16px;
				font-family: Arial, sans-serif;	
				border: 1px solid #8F8F9D;
    border-radius: 2px; /* Optional, für abgerundete Ecken */
	}
	
	.kontaktformular select {
		width:50%;
	}
	
	/* Stil für select-Boxen */
        .form-group {
            display: flex;
            gap: 10px; /* Abstand zwischen den Select-Boxen */
            align-items: center;
        }

        .custom-select {
            position: relative;
            width: 200px;
            font-size: 16px;
        }

        .custom-select select {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #8F8F9D;
            border-radius: 2px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: white;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="black" d="M0 0 L5 6 L10 0 Z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 10px;
            cursor: pointer;
            box-sizing: border-box;
        }

        .custom-select::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 10px;
            width: 0;
            height: 0;
            pointer-events: none;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid black;
            transform: translateY(-50%);
        }
        
        .custom-select select:focus, .custom-select select:active {
            border-color: #0066cc;
            box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
            outline: none; /* Entfernt den standardmäßigen Fokus-Ring */
        }
        
        

.kontaktformular .errormsg,
.kontaktformular .errormsg *{
	color: #cc3333;
	padding-bottom: 3px;
	display: inline-block;
	font-size: .85rem;
}


.errormsg-spamprotection{
				font-size: 17px;
				line-height:1.5;
				color: #db0007; /* Textfarbe */
        text-align: center; /* Textausrichtung zentriert */
        border: 1px solid #db0007; /* Rand des Kästchens */
        padding: 20px; /* Innenabstand des Kästchens */
        width: 100%; /* Breite des Kästchens */
 
}


.errormsg-emailerror{
				font-size: 17px;
				color: #db0007; /* Textfarbe */
        text-align: center; /* Textausrichtung zentriert */
        border: 1px solid #db0007; /* Rand des Kästchens */
        padding: 20px; /* Innenabstand des Kästchens */
        width: 100%; /* Breite des Kästchens */
 
}


.errormsg-upload{
				font-size: 15px;
				line-height:1.5;
				color: #db0007; /* Textfarbe */
        text-align: center; /* Textausrichtung zentriert */
        border: 1px solid #db0007; /* Rand des Kästchens */
        padding: 20px; /* Innenabstand des Kästchens */
        width: 100%; /* Breite des Kästchens */

}



input.errordesignfields, textarea.errordesignfields { 

}

.captchareload { padding-left:10px;}

#checkid {
  width: auto;
}
#checkid2 {
  width: auto;
}

.pflichtfeld {
	 color: #ff0000;
}
.neuercode {
	 color: #0066FF;
}

	 
.upload_font_size {
font-size:16px;
}

#field_top_bottom{
margin-top:25px;
}





.kontaktformular input[type="checkbox"] {
				height: calc(0.65rem/16*34);
				width: calc(0.65rem/16*34);
				border: 1px solid #ccc;
				border-radius: .25rem;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
				transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;	
				display: block;
				float: left;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				cursor: pointer;
				margin-left: 0px;
}
.kontaktformular input:checked {
				background: url(../img/check-solid.svg) no-repeat center center;
				background-size: 75%;
}
.form{display:flex; flex-direction:column;}

.checkbox-container{display:flex;}



/* style required_notice */

.required_notice{
margin-top:19px;
margin-bottom:30px;
}


button {
	outline: 0;
}


.kontaktformular .row .senden.loading .label{
	font-size: 15.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .row .senden.loading .label_failed{
	font-size: 15.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .row .senden.finished{
		display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 15.5px;
		height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		background-color: #28a745 !important;
		border: none;
		border-radius: 5px;
    pointer-events: none; 
    cursor: not-allowed;
}



.successfully_sent{
font-weight:bold;
font-size:19px;
vertical-align: middle;
}


.error_in_email_sending{
font-weight:bold;
font-size:15px;
vertical-align: middle;
}



.kontaktformular .row .senden.failed{
		display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 15.5px;
		height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		border: none;
		border-radius: 5px;
}


@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


.loading-spinner{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.senden.loading .loading-spinner{
	display: flex;
  justify-content: center; 
  align-items: center;
  
}


body.safari .senden.loading .loading-spinner{
	display: flex;
  justify-content: center; 
  align-items: center;
 
}


.senden.loading .loading-spinner_failed{
	display: flex;
  justify-content: center; 
  align-items: center;
  
}


body.safari .senden.loading .loading-spinner_failed{
	display: flex;
  justify-content: center; 
  align-items: center;
  
}


.senden .check{
	display: none;
}


.senden .failed{
	display: none;
}


.senden.finished .check{
	display: inline-block;
	animation: scale 0.5s linear;
}


.kontaktformular #submitMessage.failed {  
  color: #db0007; /* Rote Textfarbe */
  text-align: center; /* Textausrichtung zentriert */
  border: 2px solid #db0007; /* Roter Rand des Kästchens */
  padding-left:7px;
  padding-right:7px;
  padding: 15px;
  width: 100%; /* Breite des Kästchens */
  line-height: 1.5; /* Zeilenhöhe */
  margin-top: 10px; /* Abstand nach oben */
  margin-bottom: 38px; /* Abstand nach unten */
}


.kontaktformular #submitMessage.finished {
  color: #28a745; /* Grüne Textfarbe */
  text-align: center; /* Textausrichtung zentriert */
  border: 2px solid #28a745; /* Grüner Rand des Kästchens */
  padding-left:7px;
  padding-right:7px;
  padding: 15px;
  width: 100%; /* Breite des Kästchens */
  line-height: 1.3; /* Zeilenhöhe */
  margin-top: 10px; /* Abstand nach oben */
  margin-bottom: 38px; /* Abstand nach unten */
}




.kontaktformular .row .senden.loading{
	background-color: #A6A6A6;
	border-color: #A6A6A6;
}


.kontaktformular .row .senden.failed .failed{
	display: inline-block;
	animation: scale 0.5s linear;
}


#submitMessage.loading{
	text-align: center;
	color: transparent;
	opacity: 0;
}


.senden.finished .check i{
	transform-origin: center center;
}


.opacity-25{
	opacity: .25;
}


.opacity-75{
	opacity: .75;
}







@media screen and (max-width: 540px) {

.kontaktformular {
								padding-top:3px;
								padding-left:17px;
								padding-right:17px;
								padding-bottom:14px;
				}
				

.form-group { 
                flex-direction: column;
                gap: 5px; /* Kleinerer Abstand zwischen den Select-Boxen */
            }
            
            .custom-select {
                width: 100%; /* Volle Breite */
                min-width: unset; /* Deaktiviert die Mindestbreite */
            }

		
		
		.kontaktformular label{
			display: block;
			width: 100%;
			padding-bottom:2px;
			
		}
		.kontaktformular .field{
			display: block;
			width: 100%;
			margin-bottom:13px;
		}
		
		
			
		
/* style required_notice */

.required_notice{
margin-top:12px;
margin-bottom:35px;
}

.loading-spinner{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed{
	display: none;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.loading-spinner_failed:active{
	display: flex;
  justify-content: center; 
  align-items: center;
	width: 24px;
	animation: spin 1s linear infinite;	
	
}


.kontaktformular .row .senden.loading .label{
	font-size: 18.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .row .senden.loading .label_failed{
	font-size: 18.5px;
	display: flex;
  align-items: center;
  justify-content: center;
}


.kontaktformular .row .senden {
        display: flex;
        justify-content: center; 
        align-items: center;
				width: 100%;
				font-size: 18.5px;
        height: 2.90rem;
				margin-top: calc(1rem/16*5);
				color: white;
				background-color: #337ab7;
				transition: background 0.3s ease;
				border: none;
				border-radius: 5px;
}


.kontaktformular .row .senden:hover {
				background-color: #286090;
				cursor: pointer;
}


.kontaktformular .row .senden.finished{
	  display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 18.5px;
    height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		background-color: #28a745 !important;
		border: none;
		border-radius: 5px;
    pointer-events: none; 
    cursor: not-allowed;
}


.kontaktformular .row .senden.failed{
		display: flex;
    justify-content: center; 
    align-items: center;
	  font-size: 18.5px;
    height: 2.90rem;
		margin-top: calc(1rem/16*5);
		color: white;
		border: none;
		border-radius: 5px;
}




}