/* ----------------------------------------------------------------------------- *
 *                       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:-1em;}
.container {max-width:1100px; margin:0 auto; }

.padding-t {padding-top: 7rem;}
.padding-v {padding-top: 3rem; padding-bottom: 3rem;}
.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;}
.push {float:right;}
.border {padding: 10px; border:1px gray solid; margin-right: 20px; margin-bottom:10px; border-radius:5px;}
.border-grey {border:1px gray solid;}
.border-left {padding-left: 20px; border-left:1px gray solid;  }
.equal-height {display:flex; flex-wrap:wrap;}
.wrap {flex-wrap:wrap;}
.nowrap {flex-wrap:nowrap;}
.align-center {  display:flex; flex-wrap: wrap; align-content:center; }
.align-bottom {  display:flex; flex-wrap: wrap; align-content:flex-end;}
.top {margin:0;}
hr {width: 60%; align:center; border:none; border-top: 2px red dotted;}
.center {text-align:center;}
.right {text-align:right;}
.flex-container {  display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-item {  display: -webkit-flex; display: -ms-flex; display: flex; }


.zentriert-v {position: relative; top:50%; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}

.fuchsia {border:thin fuchsia solid;}


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

	.small-050 {width:50%;}
	.small-100 {width:100%;}
	
	small-offset-010 {margin-left:10%;}

	
	.small-margin-v	{margin-top: 1.0em; margin-bottom: 1.0em;}
	.small-display {	display:none;}

}

/* 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-033 {width:33.333333%;}
	.medium-050 {width:50%;}
	.medium-066 {width:66.66667%;}
	.medium-083 {width:83.333333%;}
	.medium-100 {width:100%;}

	.medium-offset-016 {margin-left:16.66667%;}
	.medium-offset-033 {margin-left:33.333333%;}
	.medium-offset-050 {margin-left:50%;}
	.medium-offset-066 {margin-left:66.66667%;}
	.medium-offset-083 {margin-left:83.333333%;}	
	
	.medium-display {	display:none;}
	.medium-margin-v	{margin-top: 1.0em; margin-bottom: 1.0em;}

}

/* 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%;}
		
	.large-offset-005 {margin-left:5%;}
	.large-offset-010 {margin-left:10%;}
	.large-offset-015 {margin-left:15%;}
	.large-offset-020 {margin-left:20%;}

	.large-offset-033 {margin-left:33.333333%;}
	.large-offset-066 {margin-left:66.666666%;}	
	
	.large-display {display:none;}
}


/* ----------------------------------------------------------------------------- *
 *                       Aufbau                                                  *
 * ----------------------------------------------------------------------------- */


/* Footer */     
.bogen {background: #AABE3C url('../images/bogen_bottom.png') no-repeat left top; min-width: 100%; min-height:200px;}



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

.img {width:100%; height:auto;}
.img-050 {width:50%; height:auto;}
.img-025 {width:25%; height:auto;}
.img-040 {width:40%; height:auto;}



.img-small  {width:48%; height:auto;}
.img-smaller  {width:40%; height:auto;}
.img-smaller-r  {width:40%; margin-right:10%; height:auto;}
.left {float:left; margin-right:1.5em;}


.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 #C2D2E5;}
legend {color: #AABE3C;  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 #2E3640; padding: 0.4em; color: #fff; background: #AABE3C; 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;}

/* ----------------------------------------------------------------------------- *
 *                              Tabelle Box                         *
 * ----------------------------------------------------------------------------- */
th.box {font-size: 1rem; font-weight:normal;}
tr.box:hover {font-weight:normal;}
tr {border-bottom: thin gray dotted;}
td.box {padding-left:10%; padding-right:10%}





/* ----------------------------------------------------------------------------- *
 *                              Portfolio mit Filter                        *
 * ----------------------------------------------------------------------------- */

/* Center website */
.main {max-width: 1000px;   margin: auto;}

.row-p {   margin: 8px -16px;}

/* Add padding BETWEEN each column (if you want) */
.row-p,
.row-p > .column-p {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column-p {float: left;  width: 33.33%; display: none; /* Hide columns by default */}

/* Clear floats after rows */
.row:after {content: ""; display: table;  clear: both;}

/* Content */
.content {    background-color: white;    padding: 4px;}

/* The "show" class is added to the filtered elements */
.show {    display: block;}

/* Style the buttons */
.subnavRaeume { border:none; border-right: 1px #939E49 solid;  outline: none;  padding: 5px 16px;  display: inline-block;  cursor: pointer;  background: transparent;}
.subnavRaeume a:nth-child(6) {	border-right:none;}


/* Add a grey background color on mouse-over */
.subnavRaeume:hover {  background-color: #ddd;}

/* Add a dark background color to the active button */
.subnavRaeume.active {    color: white; font-weight:bold; }





/* ----------------------------------------------------------------------------- *
 *                              Image Grid                        *
 * ----------------------------------------------------------------------------- */


.row-g { display: flex;  flex-wrap: wrap;  padding: 0 4px;}

/* Create four equal columns that sits next to each other */
.column-g {  flex: 25%;  max-width: 25%;  padding: 0 4px;}

.column-g img {  margin-top: 8px;  vertical-align: middle;  }

.bgandtext {position: relative;  text-align: center;   color: white;}
  
.textcentered {  position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

p.raum {font-size: 4.5rem; line-height: 4.7rem;}
p.slogan {font-size: 2.5rem; line-height: 3.7rem;}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1200px) {
  .column-g {    flex: 50%;    max-width: 50%;  }
  p.raum {font-size: 4.5rem; line-height: 4.7rem; margin:0;}
p.slogan {font-size: 2.0rem; line-height: 2.6rem;}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-g {    flex: 100%;    max-width: 100%;  }
  p.raum {font-size: 4.5rem; line-height: 4.7rem; }
p.slogan {font-size: 2.0rem; line-height: 2.6rem;}

}