/* ----------------------------------------------------------------------------- *
 *                       Styles                       *
 * ----------------------------------------------------------------------------- */

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */


/* Raster */

.row {width:auto; }
.row:before, .row:after {content:''; display:table;}
.row:after {clear:both;}
.row .row {margin-left:-1em; margin-right:0em;}
.container {max-width:1100px; margin:0 auto; }

.padding-t {padding-top: 7rem;}
.padding-v {padding-top: 3rem; padding-bottom: 3rem;}
.padding-b {padding-bottom: 7rem;}

.margin-v {margin-top: 1.5em; margin-bottom: 1.5em;}
.columns {float:left; padding-left: 1.5em; padding-right: 1.5em; }
.columns-basic {float:left;}
.border {padding: 10px; border:1px gray solid; margin-right: 20px; margin-bottom:10px; border-radius:5px;}
.radius {border-radius: 25px;}
.trenner {clear:both; border-top: 1px silver solid; margin: 0 50px;}
.vkarte {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}
.5px {height:50px;}
	


/* Small */
@media screen and (max-width:600px) {
	.small-040 {width:40%;}
	.small-050 {width:50%;}
	.small-100 {width:100%;}
}

/* Medium */
@media screen and (min-width:600px) /*and (max-width:1000px)*/ {
	.medium-010 {width:10%;}
	.medium-015 {width:15%;}
	.medium-016 {width:16.66667%;}
	.medium-025 {width:25%;}
	.medium-030 {width:30%;}
	.medium-040 {width:40%;}

	.medium-033 {width:33.333333%;}
	.medium-050 {width:50%;}
	.medium-060 {width:60%;}

	.medium-066 {width:66.66667%;}
	.medium-070 {width:70%;}
	.medium-083 {width:83.333333%;}
	.medium-100 {width:100%;}
}



/* Large */
@media screen and (min-width:1000px) {
	.large-010 {width:10%;	}
	.large-015 {width:15%;	}
	.large-016 {width:16.66%;	}
	.large-020 {width:20%;	}
	.large-020-m {width:18.1%;	}
	.large-025 {width:25%;	}
	.large-030 {width:30%;	}
	.large-030-m	{width:30%; margin-left:5%;	margin-right:5%;}
	.large-033 {width:33.333333%;	}
	.large-040 {width:40%;	}
	.large-050 {width:50%;	}
	.large-060 {width:60%;	}
	.large-066 {width:66.666666%;	}
	.large-070 {width:70%;	}
	.large-090 {width:90%;	}
	.large-100 {width:100%;}
}



/* ----------------------------------------------------------------------------- *
 *                             Bildauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
.logo {	width: 10%;	height: auto; float:left;}
@media screen and (max-width:600px) {	.logo {	width: 20%;	height: auto;}    }
@media screen and (min-width:600px) and (max-width:1000px) {   .logo { width: 30%; height: auto;}    }

.img {width:100%; height:auto; margin:0}
.top200 {margin-top: -120px;}
@media screen and (max-width:1000px) {	.top200 {margin-top: 0;}
    }


.teaser {width:100%; height:auto;}
@media screen and (max-width:600px) {	.teaser {width:130%; margin-left:-15%}    }
@media screen and (min-width:600px) and (max-width:1000px) {  {width:100%; height:auto;}    }


/* ----------------------------------------------------------------------------- * 
 *                          Styles für Formulare                                 *
 * ----------------------------------------------------------------------------- */

fieldset {border: 1px solid #005376;}
legend {color: #005376;  font-size: 1.375em;  padding: 0 0.5em;}
.formset { margin: 0.5em 0;}
.formset label, .formset input, .formset textarea { display: inline-block;}
.formset label {width: 100%; padding-right: 2%;}
.formset input, .formset textarea {width: 100%;  border: 1px solid #DADADA; padding: 0.2em;}
.submit-btn {float: right; border: 1px solid #005376; padding: 0.4em; color: #fff; background: #005376; margin-right: 2.5%;}
input:required { padding-right: 3%; background: url("../gfx/char_asterisk.svg") no-repeat scroll right top / 4% auto transparent;}
input[type=number]:out-of-range {border-color: red;}

/* Positionierung der Required * in em */
em{ left: 98%;}

/* ----------------------------------------------------------------------------- *
 *                              480px / 16px/em = 30em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 30em) {
    .formset label { width: 34%;  text-align: right;  }
    .formset input, .formset textarea { width: 62%;   }
    em{ left: 32.5%;  }
}


/* ----------------------------------------------------------------------------- *
 *                              Akkordeon                          *
 * ----------------------------------------------------------------------------- */


#akkordeon {width: 100%; margin: 0;}

#akkordeon h2 {
font-size: 14px;
line-height: 14px;
font-weight: bold;
color: #fff;
background: url('../images/arrow-right.png') no-repeat right 50%;
}

#akkordeon .title {
width: 100%;
cursor: pointer;
height: 44px;
padding: 10px 10px 10px 10px;
margin-bottom: 1px;
background: #c0c0c0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

#akkordeon .akkordeon-content {display: none; background: #fff; padding: 0 12px 16px 0; margin-bottom: 2px;}

/*   wenn Akkordeon offen    */
#akkordeon .open {border-top: 1px solid #A6A6A6;background: #c0c0c0;}
#akkordeon .open h2 {background: url('../images/arrow-down.png') no-repeat right 50%;color: #962832;}