@import "bootstrap/css/bootstrap.css";
body{font-size:1.2em}
#wrapperser{
    width:95%;
    margin:2px auto;
}
div,form,p{
    border:none;
    padding:0;
    margin:0;
}
.formheader{
    background-image: url('bildzubehoer/BulleundBaerinGold.jpg'); 
	background-position: -90px 17px;
	background-repeat: no-repeat;
	position: relative;
	background-size: contain;
	margin-bottom: 45px;
}
.headline_form{
        margin: 0;
	padding:0;
	color: #FFBA2A;
	font-weight: 100;
	font-size: 2.3em;
	letter-spacing: 0.55px;
	text-align: left;
}
.formheader .rechte_seite{
	font-size: 0.9em;
	font-weight: 700;
	margin-left:50%;
	margin-bottom:30px;

}

p.haken{
	background: url('bildzubehoer/grauer_haken.png') no-repeat left center;
	padding-left:33px;
	text-align: left;
}
#form_rechts p:nth-child(2){
	margin-top:28px;
}

#schritttext{
	position:relative;
	z-index:1;
}
div#schritt2_activ.schritte{
	background-color: #313342;
;}
#schritt2Activ{
	background-color:#6D7A82;
}
input{
    padding:5px;    
}
.schritte{
	width: 100%;
	height: 30px;
	background-color: #6D7A82;
	position: absolute;
	bottom:-30px;
	overflow: hidden;
}
 .schritte .schrittVorn{
	margin-left:-20px;
	background-color: #313342;
	float: left;
	height: 100%;
	position: relative;
 }
 .schrittVorn span#pfeil{
	width: 30px;
	height: 30px;
	background-color: #313342;
	border-right: 3px solid white;
	border-bottom: 3px solid white;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	position: absolute;
	right:-15px;
	top:-4px;
 }
 div#schritt2Activ.schrittVorn span#pfeil{
	background-color: #6D7A82;
 }
.schrittVorn span, .schrittHinten span{
	color: white;
	margin-top:4px;
	font-size: 1.3em;
	padding-left:10px;

	display: inline-block;
}
.schrittHinten span {
	margin-left:20px;
}

.headertext {
	color:  #000000;
	margin-top:10px;
	margin-bottom: 10px;
	padding-bottom: 0px;
        padding-left:15px;
}
#form_footer{
    margin-top:20px;
}
.form_center{
    margin-top:20px;
}
#form_rechts p{
    margin-bottom:1px;
}
#form_rechts label{
    margin-bottom:4px;
}
input[type='submit']{
	background: none;
	border:none;
	color:white;
        display:block;
	border:1px solid #FCAE19;
	border-radius: 7px;
	padding:6px;
	font-size: 1.4em;
	position: relative;
	margin:20px auto;
	background: #88b8ce; /* Old browsers */
	background: -moz-linear-gradient(top,  #FCDB4F 22%, #FCAE19 87%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(22%,#FCDB4F), color-stop(87%,#FCAE19)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #FCDB4F 22%,#FCAE19 87%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #FCDB4F 22%,#FCAE19 87%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #FCDB4F 22%,#FCAE19 87%); /* IE10+ */
	background: linear-gradient(to bottom,  #FCDB4F 22%,#FCAE19 87%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCDB4F', endColorstr='#FCAE19',GradientType=0 ); /* IE6-9 */
	transition: background 0.3s ease-in;
	-webkit-transition: background 0.3s ease-in;
	-moz-transition: background 0.3s ease-in;
	-o-transition: background 0.3s ease-in;
	-ms-transition: background 0.3s ease-in;

}
input[type='submit']:hover{
	cursor: pointer;
	background: #0F709D; /* Old browsers */
	background: -moz-linear-gradient(top, #FCAE19  22%, #FCDB4F 87%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(22%,#FCAE19), color-stop(87%,#FCDB4F)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #FCAE19  22%, #FCDB4F 87%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #FCAE19  22%, #FCDB4F 87%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #FCAE19  22%, #FCDB4F 87%); /* IE10+ */
	background: linear-gradient(to bottom,  #FCAE19  22%, #FCDB4F 87%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCAE19', endColorstr='#FCDB4F',GradientType=0 ); /* IE6-9 */
}
span.pflichtfeld {
	font-size: 8px;
	color: #901913;
	margin-top:-3px;
	vertical-align: text-top;
  }
#form_rechts label{
    padding:0 !important;
}

.rbbuttons{
    font-weight: 700;
    font-size:1.15em;
}
.checkbox{
    font-weight:700;
    padding-left:1.5em;
}
.checkbox input[type="checkbox"]{
    width:2em;
    height:2em;
    display:block;
    margin-top:-4px;
}

.checkbox >span{
    display:block;
    margin-left:1em;
    margin-top:20px;
}

p#kleingedr{
    font-size:0.8em;
    padding:0;
}
div#form_footer img{
        width:150px;
        margin-top:-62px;
	float:right;
}


div#agb_container{
	width: 400px;
	position: absolute;
	left: 50%;
	margin-left:-200px;
	top:55%;
	margin-bottom: -300px;
	z-index: 1000;
	background-color: white;
	border:2px solid #0F709D;
	border-radius:7px;
	display:none;
	padding:20px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
	
}
div#agb_container a{
	position:absolute;
	bottom:4px;
	right:10px;
}
div#agb_container:target{
	display:block;
}

p.wichtig{
	position:absolute;
	top:-1000px;
	left:-1000px;
	display:none;
	
}
.erklbar{
	display:inline-block;
	width:15px;
	height:15px;
	text-decoration:none;
	color:white;
	background-image:url('bildzubehoer/info.png');
	border-radius: 3px;
	position:relative;
}
.erklbar>span{
	font-weight:500;
	display:none;
	position:absolute;
	padding:10px;
	color: #000;
	background-color:white;
	z-index: 100;
	top:-80px;
	left:25px;
	border:2px solid #0F709D;
	border-radius:7px;
	width: 300px;
}

#form_links .erklbar>span{
	left:25px;

}
#form_rechts .erklbar>span{
	left:-325px;

}
.erklbar:hover>span{
	display:block
}
.erklbar>span>b{
	position:absolute;
	top:-5px;
	right:-5px;
	width:14px;
	padding-left:6px;
	height:18px;
	padding-top:2px;
	color:#f00;
	display:block;
	border-radius:10px;
	border:1px solid #f00;
	background-color:#fff;
	cursor:pointer;
}
#verkw:target,#monwr:target,#tilgh:target,#zinsb:target,#auszzp:target,#darlh:target,#vorla:target{
	display:block;
}
.abgesendet label{
	width:250px;
	display:inline-block;
}
.abgesendet{
	padding:10px;
	border:1px solid #ccc;
}

.flinks, .frechts{
    width:48%;
    float:left;
}
.inp8{
    width:75%;
}
.inp2{
    width:20%;
}
.inp8 input{
    width:100%;
}



@media(max-device-width: 700px){
    #wrapperser{
        width:calc(100% - 30px);
    }
    .flinks, .frechts{
	width:100%;
	clear:both;
    }
    div#form_footer img{
        width:80px;
        margin-top:0px;
    }
    
    .checkbox{
        margin-bottom:50px;
    }
    .headline_form{
        margin-bottom:20px;
    }
    .formheader{
        background:none;
    }
    .rechte_seite{
	display:none;
    }
    .schrittHinten span{
        font-size:1em;
    }
    input[type="submit"]{
        font-size:inherit;
        margin-top:-20px;
    }
}