@charset "utf-8";

:root {
		
	--ci-color-orange: #FF5E30;
	--ci-color-orange-rgb: 255,94,48;
	
	--ci-color-red: #C60713;
	--ci-color-red-rgb: 198,7,19;
		
	--ci-color-blue: #265EA8;
	--ci-color-blue-rgb: 38,94,168;
	
	--ci-color-yellow:#FFBD59;
	--ci-color-yellow-rgb: 255,189,89;
	
	--ci-color-dark: #282D37;
	--ci-color-dark-rgb :40,45,55;
	
	--ci-color-lightgrey: #D7DCE2;
	--ci-color-lightgrey-rgb :215,220,226;
	
	--ci-color-headlines: #1C222B;
	--ci-color-headlines-rgb: 28,34,43;
	
	--ci-color-text: #000000;
	--ci-color-text-rgb: 0,0,0;
		
}


/* ##### FORMULAR START ##### */


#content .kontaktinfos {
	margin-top:36px;
}

#content .kontaktinfos .kontaktdaten p {
	text-align:center;
	font-size:200%;
	line-height:130%;
	margin-bottom:16px !important;
}

#content .kontaktinfos .kontaktdaten p.big {
	font-size:260%;
}

#content .kontaktinfos p.icon {
	text-align:center;
	margin-bottom:8px !important;
}

#content .kontaktinfos p.icon svg.icon-tabler {
	stroke: var(--ci-color-orange);
	stroke-width: 2;
	width: 64px;
	height: 64px;
}


#content .parkschild {
	display:inline-block;
	vertical-align:-8px;
}

#content .parkschild svg.icon-tabler {
	stroke: var(--ci-color-blue);
	stroke-width: 2;	
	width: 32px;
	height: 32px;
}


#content section .formular .box_r {
	margin:0;	
}

article.formular {
	margin:0;
}

#content .formular form {
	font-size:100%;
}

#content section form {
	width:100%;
	margin:0 0 30px 0;
}

#content .formular form fieldset {
	padding:12px;
	margin:0 0 20px 0;
	border:1px solid #E6E6E6;
	font-size:100%;
	clear:none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#content .formular form fieldset legend {
	font-size:200%;
	line-height:140%;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color:#E6E6E6;
	padding:4px 6px;
	color:var(--ci-color-text);
	font-weight:500;
}

#content .formular form p.r {
	text-align:right;
}

#content .formular form span.fl {
	float:left;
}

#content .formular form span.fr {
	float:right;
}

#content .formular form fieldset p {
	display:block;
	margin:0 0 4px 0;
	font-size:100%;
	width:auto;
}

#content .formular form fieldset p.txt {
	font-size:160%;
	line-height:140%;
}

#content .formular form fieldset label {
	display:inline-block;
	width:150px;
	margin:0;
	font-size:160%;
	line-height:140%;
}

#content .formular form fieldset label.ib_var {
	display:inline-block;
	width:auto;
	margin:0 10px 0 0;
	font-size:160%;
	line-height:140%;
}

#content .formular form fieldset label.ort {
	width:40px;
	margin-left:16px;
}

#content .formular form fieldset label.fl {
	float:left;
	display:inline-block;
	width:150px;
	margin:0 12px 0 0;
	word-wrap: break-word;
}

#content .formular form fieldset.border label.fl_textarea {
	margin:0;
}

#content .formular form fieldset label.captcha {
	width:170px;
}

#content .formular form fieldset label.radio_label {
	width:auto;
	margin-left:6px;
}

#content .formular form fieldset label.checkbox_label {
	width:auto;
	margin-left:6px;
	margin-right:16px;
	vertical-align:2px;
}

#content .formular form fieldset label.checkbox_label_breit {
	width:150px;
	margin-left:6px;
	margin-right:16px;
	vertical-align:2px;
}

#content .formular form fieldset span.txt {
	font-size:160%;
	line-height:140%;
}

#content .formular form fieldset input.txt, 
#content .formular form fieldset textarea {
	display:inline-block;
	width:calc(100% - 192px);
	margin:0 0 0 24px;
	padding:6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border:1px solid rgba(128,128,128,1);
	font-size:150%;
	line-height:140%;
}


#content form input, 
#content form textarea {
	font-weight:400;	
}

#content form fieldset textarea,
#content form fieldset textarea:hover {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	border:1px solid rgba(128,128,128,1);
}

#content .formular form fieldset textarea.fl {
	float:left;	
	margin-left:14px;
}

#content .formular form fieldset input.nolabel, 
#content .formular form fieldset textarea.nolabel {
	margin-left:0;
	width:98%;
}

#content .formular form fieldset input.plz {
	width:60px;
}

#content .formular form fieldset input.ort {
	width:calc(100% - 278px);
	margin-left:0;
}

#content .formular form fieldset input.captcha  {
	width:110px;
}

#content .formular form fieldset input.radio, 
#content .formular form fieldset input.checkbox  {
	display:inline-block;
	width:16px;
	margin-left:25px;
}

#content .formular form fieldset select {
	margin-bottom:4px;
	margin-right:16px;

	border:1px solid rgba(128,128,128,1);
	background-color:#fff;
	
	
	padding:6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border:1px solid rgba(128,128,128,1);
	font-size:140%;
	line-height:140%;
	
}

#content .formular form fieldset select option {
	padding:0 4px;
}

#content .formular form fieldset select.ohne {
	margin-left:6px;
}

#content .formular form fieldset .no_space_left  {
	margin-left:2px !important;
}

#content section .formular form .buttons {
	display:block;
	margin:4px 0 32px 0;		
}

#content section .formular form button,
#content section .formular form input[type="submit"],
#content section .formular form input[type="reset"] {
	width:auto;
	height:auto;
	display:inline-block;
	text-align:center;
	cursor:pointer;
	font-size:110%;	
	padding:6px;

	color:rgba(var(--ci-color-blue-rgb),1);
	background-color:#fff;
	border:2px solid rgba(var(--ci-color-blue-rgb),1);
	
	-webkit-transition: color 400ms ease-out, background-color 200ms ease-in;
    transition: color 400ms ease-out, background-color 200ms ease-in;

	font-weight:500 !important;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
}

#content section .formular form button:hover,
#content section .formular form input[type="submit"]:hover,
#content section .formular form input[type="reset"]:hover {
	text-decoration:none;
	color:#fff !important;
	
	background-color: rgba(var(--ci-color-blue-rgb),1);
	border:2px solid rgba(var(--ci-color-blue-rgb),1);
	padding:6px;
	
}

#content section .formular form button *,
#content section .formular form input[type="submit"] *,
#content section .formular form input[type="reset"] * {
	text-decoration:none;
	color:#fff !important;
}

#content section .formular form input[type="reset"] {
	width:auto;
	height:auto;
	display:inline-block;
	text-align:center;
	cursor:pointer;
	font-size:90%;	
	padding:6px;
	color:rgba(244,73,73,1);
	border:2px solid rgba(244,73,73,1);	
	background-color:#fff;
	-webkit-transition: color 400ms ease-out, background-color 200ms ease-in;
    transition: color 400ms ease-out, background-color 200ms ease-in;
	font-weight:400 !important;
}

#content section .formular form input[type="reset"]:hover {
	text-decoration:none;
	color:#fff !important;
	background-color:rgba(244,73,73,1);
	padding:6px;
	
}



#content section .formular form button.rechner {
	width:auto;
	height:auto;
	display:inline-block;
	text-align:center;
	cursor:pointer;
	font-size:150%;	
	padding:10px;
	margin:0 0 10px 10px;
		
	color:rgba(var(--ci-color-blue-rgb),1);
	background-color:#fff;
	border:2px solid rgba(var(--ci-color-blue-rgb),1);
	
	-webkit-transition: color 400ms ease-out, background-color 200ms ease-in;
    transition: color 400ms ease-out, background-color 200ms ease-in;
	
	font-weight:500 !important;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
}

#content section .formular form button.rechner:hover,
#content section .formular form button.rechner:active,
#content section .formular form button.rechner:focus,
#content section .formular form button.rechner.aktiv {
	text-decoration:none;
	color:#fff !important;
	
	background-color: rgba(var(--ci-color-blue-rgb),1);
	border:2px solid rgba(var(--ci-color-blue-rgb),1);
	
}


#content section .formular form button.aktiv {
	text-decoration:none;
	color:#fff !important;
	
	background-color: rgba(var(--ci-color-blue-rgb),1);
	border:10px solid rgba(var(--ci-color-blue-rgb),1);
	
}





#form fieldset label.checkbox_label,
#content .formular form fieldset label.checkbox_label {
	width:auto;
	margin-left:6px;
	margin-right:16px;
	vertical-align:2px;
}

#form fieldset label.checkbox_txt_label,
#content .formular form fieldset label.checkbox_txt_label {
	width:90% !important;
	float:left;
	margin-left:0px;
	margin-right:16px;
	vertical-align:2px;
	font-weight:normal;
	display:inline-block;
}

#form fieldset input.checkbox_txt_label,
#content .formular form fieldset input.checkbox_txt_label {
	float:left;
	width:16px;
	margin:2px 6px 0 6px;
	display:inline-block;
}


#content .formular div.error {
	border:1px solid red;
	margin:4px 0 10px 0;
	padding:6px;
}

#content .formular div.error h3 {
	margin-top:0;
	color:red;
}

#content .formular div.error ul,
#content .formular div.error li:last-child {
	margin-bottom:0;
}

#content .formular  div.success {
	border:2px solid rgba(0,128,0,1);
	background-color:rgba(0,128,0,.125);
	margin:12px 0 18px 0;
	padding:6px;
}

#content .formular div.success h2 {
	color:#008000;
	margin:0 0 2px 0;
}


form#routenplaner {
	display:block;
	width:100%;
	max-width:50%;
	margin:30px 0 !important;
}

form#routenplaner fieldset {
	display:block;
	width:calc(100% - 14px);
}

div#karte {
display:block;
	min-height:480px;
	width:100%;
}

@media only screen and (max-width: 960px) {
	
	form#routenplaner {
		display:block;
		width:100%;
		max-width:100%;
	}
	
	form#routenplaner fieldset {
		display:block;
		float:none;
		width:calc(100% - 14px);		
	}
	
	#content .formular form fieldset p {
		clear:both;
	}
	
	#content .formular form fieldset label,
	#content .formular form fieldset label.fl,
	#content .formular form fieldset label.ort	{
		display:block;
		width:auto;		
		float:none;
	}
	
	#content .formular form fieldset label.radio_label {
		display:inline-block;
		width:auto;
		margin-left:6px;
		margin-right:24px;
	}

	#content .formular form fieldset input.txt, 
	#content .formular form fieldset textarea,
	#content .formular form fieldset input.plz,
	#content .formular form fieldset input.ort {
		display:block;
		width:97%;
		margin:0;
	}

	#content .formular form fieldset textarea.fl {
		display:block;
		margin-left:0;	
	}
	
	#content .formular form fieldset input.radio {
		width:16px;
		display:inline-block;
	}

	#content .formular form fieldset input.captcha  {
		width:100px;
	}
	
	#content .formular form fieldset input.captcha,
	#content .formular form fieldset span.frage {
		display:inline-block !important;
		margin-right:6px;
	}
	
	#content .formular form fieldset.border label.fl_textarea {
		margin:0;
	}

	#content .formular form fieldset label.captcha {
		width:170px;
	}

	#content .formular form fieldset label.radio_label {
		width:auto;
		margin-left:6px;
	}

	#content .formular form fieldset label.checkbox_label {
		width:auto;
		margin-left:6px;
		margin-right:16px;
		vertical-align:2px;
	}
	
	#content .formular form fieldset p.checkboxen input.checkbox,
	#content .formular form fieldset p.checkboxen label.checkbox {
		display:inline-block !important;
	}
	
	#content .formular form fieldset p.checkboxen label.checkbox {
		margin-right:12px !important;
	}
	
}

#content form fieldset label.txt.url,
#content form fieldset input.txt.url,
#content form fieldset label.url,
#content form fieldset input.url {
	display:none !important;
}

#content form fieldset input:focus,
#content form fieldset select:focus,
#content form fieldset textarea:focus {	
	background:rgba(236,236,236,.5);
}

/* ##### FORMULAR ENDE ##### */