/*
vz_min.css 2026-06-09
*/


html{
	color:#000;
	font-family:"Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
div,dl,dt,dd,ul,ol,li,h1,h2{margin:0;padding:0;}
img{border:0;}
ul{margin-left:30px;}
@media screen{
html,body{background-repeat:repeat;text-align:center;font-size:12px;font-family:"Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
#content {margin-left:auto;margin-right:auto;display:block;position:relative;width:auto;height:auto;text-align:left;margin-top:0px;padding:0;}
#header {position:relative;/*left:10px*/;top:0px;display:block;margin:0;}

.result_white{background:none repeat scroll 0 0 #fff;border-radius:20px 20px 20px 20px;margin:40px 20px;}
.result_daten_white {position:relative;top:20px;width:100%;font-size:16px;color:#111; /*margin:10px;*/}
input.search_white[type="text"] {
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background:none repeat scroll 0 0 #fff;
	font-weight:normal;outline: 0 none;
	line-height:32px;
	padding: 0 6% 0 3%;
	width: 68%;
	vertical-align: middle;
	border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;
	border: 1px solid black;
	text-align: left;
	color: #333333;
	font-size: 1.4rem;
	box-sizing: border-box;
	height: 100%;
}
input.search_white[type="text"]:focus {
	border: 2px solid black;
}
#search-button{
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;;
	width: 32%;
    text-align: center;
	background-color: #dc020e;
	color: white;
	font-size: 1.4rem;
	font-weight:bold;outline: 0 none;
	line-height:32px;
	border: 2px solid #dc020e;
	height: 100%;
}
#loading {
    display: inline-flex;      /* garantiert Platz */
    align-items: center;       /* vertikal sauber */
}

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

.spinner {
	width: 25px;
    height: 25px;
    border: 10px solid #ccc;
    border-top-color: #000;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}
.spinner2 {
	width: 50px;
    height: 50px;
    border: 10px solid #ccc;
    border-top-color: #000;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}


div.flex { 
	display: flex;
	height: 4rem;
	padding: 0 4rem 0 4rem;
}

.form-submit{
	cursor:pointer;
}
#flag{
	display:inline-block;
	padding-top:10px;
}
#conclusion{
	font-size:20px;
	font-weight:900;
	text-align:center;
	margin: 25px 0 15px 0;
}
#wait{
	font-size:20px;
	font-weight:normal;
	text-align:center;
	padding-top:40px;
}
#output{
	font-size:17px;
	font-weight:normal;
	text-align:center;
}
#subtext{
	font-size:17px;
	font-weight:normal;
	text-align:center;
	padding-top:10px;
}
.heading{
	font-size:16px;
	display:block;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:2px;
}

#survey{
	float:left;
	margin-top:30px;
}

.survey_mainheading{
	font-size:24px;
	text-align:center;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:2px;
	padding-left:40px;
	padding-right:40px;
}

.survey_heading{
	font-size:16px;
	text-align:center;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:2px;
	padding-left:40px;
	padding-right:40px;
}

.hidden {
		display: none;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family:  "Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: inherit;
    line-height: inherit;
}
	
#submitButton{
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	width: 32%;
	text-align: center;
	vertical-align: middle;
	background-color: #dc020e;
	color: white;
	font-size: 1.4rem;
	font-weight:bold;outline: 0 none;
	line-height:32px;
	border: 2px solid #dc020e;
	padding:.375rem .75rem;
	border-radius: .25rem;
	height: 100%;
}
	
select.form-group {
input:unset;
width: 100%;
height: 40px;
border-color:rgb(118,118,118);
background:white;
border-style:solid;
border-radius:0;
box-sizing:border-box;
text-rendering:auto;
letter-spacing:normal;
text-shadow:none;
}

input.iban[type=text] {
padding: 10px;
margin-bottom:10px;
input:unset;
width: 100%;
height: 40px;
border-color:rgb(118,118,118);
background:white;
color:black;
font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
border-style:inset;
border-radius:0;
box-sizing:border-box;
}

#ibanInfo {
    margin-top: 5px;
    font-size: 0.9em;
}

.iban-info {
    min-height: 3em; /* Anpassen je nach Bedarf */
    margin-top: 5px;
    font-size: 0.9em;
    line-height: 1.2;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.iban-info.hidden {
    opacity: 0;
    pointer-events: none;
}

.subpoints{
	padding-left:30px;
	padding-bottom:2px;
}
.info_text{
	float: left;
	padding-left:4rem;
	padding-right:4rem;
}
.outer {
	grid-area: auto;
	padding-top:6px;
}
.inner {
	grid-area:1/2/2/3;
}
#ampel{
	/*display: flex;
	flex-direction: row;
	justify-content: center;
	grid-template-areas: "outer inner outer";
	text-align:center;*/
	display: grid;
	grid-template-columns: 1fr 180px 1fr;
	grid-template-rows: 37px;
	place-content: center;
	text-align:center;
	padding: 0 4rem 0 4rem;
}

#line1,#line2{
    display:inline-block;
	width:100%;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 1em 0;
    padding: 0;
}
#spacer {
    display:inline-block;
	width:auto;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}
.vertical_spacer {
	height: 2rem;
	margin: 0rem;
}
.vertical_endspacer {
	height: 50px;
	margin: 0rem;
}
.ampel_rot1
{
	background-color: #dc020e; 
	border: 2px solid #dc020e;
	border-radius: 50%;
	width : 34px;
	height : 34px;
	display:inline-block;
	margin:0 5px 0 5px;
}

.ampel_orange1
{
	background-color: #D2A026;
	border: 2px Solid #D2A026;
	width : 34px;
	height : 34px;
	border-radius: 50%;
	display: inline-block;
	margin:0 5px 0 5px;
}

.ampel_grun1
{
	background-color: #80af5e;
	border: 2px Solid #80af5e;
	width : 34px;
	height : 34px;
	border-radius: 50%;
	display:inline-block;
	margin: 0 5px 0 5px;
}
.ampel_rot0
{
	background-color: #fff;
	border: 2px Solid #dc020e; /* war C83F3F */
	width : 34px;
	height : 34px;
	border-radius: 50%;
	display:inline-block;
	margin: 0 5px 0 5px;
}
.ampel_orange0
{
	background-color: #fff;
	border: 2px Solid #D2A026;
	width : 34px;
	height : 34px;
	border-radius: 50%;
	display:inline-block;
	margin: 0 5px 0 5px;
}
.ampel_grun0
{
	background-color: #fff;
	border: 2px Solid #80af5e;
	width : 34px;
	height : 34px;
	border-radius: 50%;
	display:inline-block;
	margin: 0 5px 0 5px;
}

.traffic_light{
	float: left;
	margin: 0 20px 0 0;
	background: white;
	width: 30%;
	max-width:300px;
}
.traffic_light img{
	float: left;
	width: 45%;
	min-width: 100px;
}
.traffic_text{
	font-weight:bold;
	margin: 30% 0;
	text-align: center;
}

.disclaimer{
	float: left;
	font-weight:300;
	padding-top:40px;
	color:#333;
	font-size:12px;
	padding-left:4rem;
	padding-right:4rem;
}
.clearfloat{
	clear:both;
}

.verb{background-color:lightyellow; margin:10px;}

/* h1{font-size:14px;font-weight:bold;margin-bottom:5px;color:black} */
/* h2{font-size:14px;margin-top:8px;margin-bottom:2px;} */
ul,ol{margin-left:30px;margin-bottom:10px;}
.text-indent{text-indent:-18px;} /* for own markers */
.text-indent2{text-indent:-18px;padding-left:18px;} /* for own markers that shall stay in line */
table{border-spacing:10px;}

input[type="text"] {background:none repeat scroll 0 0 rgb(252,101,6);font-weight:normal;outline: 0 none;padding: 5px 10px 5px 15px;border:1px solid #000000;border-top-left-radius:10px;border-bottom-left-radius:10px;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-topleft:10px;-moz-border-radius-bottomleft:10px;color: white;font-family:"Nunito Sans", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;;font-size:18px;height: 29px;line-height:30px;margin: 0;width: 246px;vertical-align: middle;}
input[type="text"]:focus {font-weight:normal;outline: 0 none;}

@media screen and (max-width: 667px), screen and (min-device-width:375px) and (max-device-width: 812px)    {
	#ampel{

	padding: 0 0rem 0 0rem;
}
	/*evtl wechsel zu horizontaler ampel*/
	.traffic_light{
		width: 25%;
	}
	.traffic_light img{
		float: none;
		width: 100%;
		min-width:0;
	}
	.traffic_text{
		margin: 0;
	}


div.flex { 
	display: block;
	padding: 0 0rem 4rem 0rem;
}

input.search_white[type="text"] {
	padding: 0% 6% 0 3%;
	height: 100%;
	width:100%;
	margin-top:-20px;
}
#search-button{
	margin-top:20px;
    text-align: center;
	background-color: #dc020e; /* old #c72e2e */
	color: white;
	font-size: 1.4rem;
	font-weight:bold;outline: 5 none;
	line-height:32px;
	width: 100%;
	height: 100%;
}
.info_text{
	float: left;
	padding-left:0rem;
	padding-right:0rem;
}
.result_daten_white {font-size:14px;}
.subpoints{
	padding-left:0px;
	padding-bottom:2px;
}

.disclaimer{
	padding-left:0rem;
	padding-right:0rem;
}

}