/* Reset
-----------------------------------------------------------*/
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;vertical-align:baseline;background:0 0;font-weight:normal;font-style:normal;}ins,mark{background-color:#ff9;color:#000}body{line-height:1}ul, ol{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

/* Schriften
-----------------------------------------------------------*/
/* scada-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Scada';
  font-style: normal;
  font-weight: 400;
  src: url('webfonts/scada-v15-latin-regular.woff2') format('woff2'); 
}
/* scada-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Scada';
  font-style: normal;
  font-weight: 700;
  src: url('webfonts/scada-v15-latin-700.woff2') format('woff2');
}

/* Grundgerüst
-----------------------------------------------------------*/
html {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: 'Scada', sans-serif;
	color: #807d7a;
	font-size: 1em;
	min-height: 100.1vh;
	display: flex;
	flex-direction: column;
	font-size: 18px;
	font-weight: 300;
	background-image: url(../img/bg-grundriss.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.body-immobilien {
	background-image: none;
}

.frame {
	position: relative;
	margin: 0 auto;
	width: 90%;
	max-width: 1300px;
}

.mainContent {
	margin: 5em 0 5em 0;
}


/* Allgemeine Formatierungen
-----------------------------------------------------------*/
img {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

p, .mainContent ul {
	line-height: 1.25em;
	margin-bottom: .625em;
	max-width: 60em;
}

.mainContent ul {
	list-style-type: disc;
	margin: 0 0 0 1em;
}

p:last-child, .mainContent ul:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 700;
}

h1, h2 {
	font-size: 1.333333333em;
	font-weight: 700;
	margin-bottom: 1em;
}

h2 {
	margin-bottom: .625em;
}

h3 {
	line-height: 1.25em;
	color: #009dde;
	margin-bottom: .625em;
}

h4 {
	line-height: 1.25em;
	font-weight: 700;
}



/* Struktur
-----------------------------------------------------------*/
.grid2, .grid3, .grid4, .grid5, .grid6 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 1fr;
	grid-column-gap: 5%;
	grid-row-gap: 0px;
}

.grid3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-row-gap: 2.5em;
}

.grid4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid_1_2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 5%;
	grid-row-gap: 0px;
}

.grid_1_2_div1 { grid-area: 1 / 1 / 2 / 2; }
.grid_1_2_div2 { grid-area: 1 / 2 / 2 / 4; }

.half-content {
	width: 68.5%;
}

.half-content .grid3 {
	grid-column-gap: 15%;
}


.blueBox {
	background: #009dde;
	color: #fff;
	padding: 1em 0.75em;
	display: inline-block;
	margin-left: 7%;
	width: 75%;
	margin-bottom: 2.5em;
}

.grayBox {
	background: #807d7a;
	color: #fff;
	display: inline-block;
	padding: 0.75em;
	margin-bottom: 2.5em;
}

.text3 {
	padding: 1em 0.75em;
	margin-left: 4%;
	width: auto;
}

.text4 {
	padding: 1em 0.75em;
	width: auto;
	display: block;
	margin-left: 0;
}

.panoramaImg {
	position: relative;
}

.mainImg {
	width: 100%;
	max-width: none;
}

.overlayIcon {
	position: absolute;
	height: 115%;
	right: 4%;
	opacity: 0.6;
}

.immobilie img {
	border: 2px solid #807d7a;
}

.abstandRechts {
	padding-right: 1.2em;
}

.abstandOben {
	padding-top: 2.5em;
}

.imoveraLogo {
	padding-top: 1.2em;
	max-width: 200px;
}

.infobox {
	position: absolute;
	top: 20%;
	left: 52%;
	background: #009dde;
	color: #fff;
	padding: 1em 1em;
}

/* Header
-----------------------------------------------------------*/
.siteHeader {
	position: relative;
	background: #ececec;
	border-bottom: 3px solid #fff;
}

.siteHeader .frame {
	height: 130px;
}

.logo {
	display: block;
	position: absolute;
	width: 300px;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}


/* Footer
-----------------------------------------------------------*/
.siteFooter {
	margin-top: auto;
	background: #ececec;
	padding: 2.5em 0;
}


/* Spezifische Formatierungen
-----------------------------------------------------------*/
.vorstand {
	padding: 3.75em 0;
}

.btn {
	display: block;
	background: #807d7a;
	color: #fff;
	max-width: 400px;
	padding: 0.75em;
	margin-bottom: 1.25em;
}


/* Formular
---------------------------------*/
label {
	display: none;
}

label.visibleLabel {
	display: inline-block;
	border: none;
	font-family: inherit;
	font-size: .75em;
	padding: 0.25em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	color: #807d7a;
	font-size: inherit;
}

input[type="text"], input[type="tel"], input[type="number"], input[type="email"], textarea {
	border: none;
	font-family: inherit;
	font-size: 1em;
	padding: 0.5em;
	margin: 0 0 1em 0;
	box-sizing: border-box;
	background: #f2f2f2;
	display: block;
	width: 100%;
	border-bottom: 2px solid #f2f2f2;
}

::placeholder {
	color: #807d7a;
	font-size: inherit;
	padding-left: 0em;
}

textarea {
	display: block;
	width: 100%;
	height: 10em;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: none;
	border: none;
	font-size: inherit;
}

button {
	display: inline-block;
	background: #807d7a;
	color: #fff;
	max-width: 400px;
	padding: 0.75em 2.5em;
	margin-bottom: 1.25em;
	font-family: inherit;
}

.formError, .formOk {
	clear: both;
}

input[type="text"].errEmpty, input[type="tel"].errEmpty, input[type="number"].errEmpty, input[type="email"].errEmpty, .errEmpty {
	border-bottom: 2px solid #e63027;
}

.zusatzFeld {
	display: none;
}

.formError {
	margin-bottom: 1.25em;
	color: #e63027;
}

.radioContainer {
	display: block;
	position: relative;
	margin: 0.5em 0 0.5em 0;
/*
  padding-left: 35px;
  margin-bottom: 12px;
*/
	cursor: pointer;
	user-select: none;
}

.radioContainer span {
	padding-left: 1.75em;
}

.radioContainer input[type="radio"] {
	position: absolute;
	cursor: pointer;
}

/* Main Navigation
-----------------------------------------------------------*/
.mainNav {
	position: absolute;
	bottom: 1em;
	right: 0;
	width: 65%;
}

.mainNav ul {
	display: flex;
	align-items: stretch; /* Default */
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
}

.mainNav ul li {
	display: block;
	flex: 0 1 auto; /* Default */
}

.mainNav a {
	display: block;
	color: #807d7a;
	font-size: 1.083333333em;
	text-transform: uppercase;
}

.mainNav a:hover {
	color: #009dde;
}

.body-home .mainNav li#btn01 a,
.body-immobilien .mainNav li#btn02 a,
.body-angebote .mainNav li#btn03 a,
.body-genossenschaft .mainNav li#btn04 a,
.body-kontakt .mainNav li#btn05 a
{
	color: #009dde;
}



/*-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
MediaQueries
-------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------*/
@media screen and (max-width: 1100px) {

.grid5,
.half-content .grid3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-row-gap: 2.5em;
	grid-column-gap: 5%;
}

/* Navigation
-----------------------------------------------------------*/
.mainNav {
	position: absolute;
	display: block;
	z-index: 1100;
	width: 50%;
	top: 3.5em;
}

.mainNav ul {
	padding: 2.5em 0 1.5em 0;
	display: block;
	display: none;
}

.mainNav ul li {
	text-align: right;
	display: block;
	margin: 0;
	line-height: 1.5em;
	flex: none;
	float: none;
	background: #009dde;
}

.mainNav ul li a {
	color: #fff;
	display: block;
	padding: 0.25em 0.5em;
}

.mainNav ul li:first-child {
	padding-top: 0.5em;
}

.mainNav ul li:last-child {
	padding-bottom: 0.5em;
}

.mainNav ul li a:hover {
	color: #89c5de;
}

nav.mainNav label {
	display: block;
	line-height: 34px;
	padding: 0 0.25em 0 2.5em;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.1em;
}

.mainNav label span {
	line-height: 1.5em;
	font-weight: 500;
}

.mainNav label:before {
	position: absolute;
	left: 15px;
	top: -0.1em;
	content: "\2261";
	font-size: 2.5em;
	color: #009dde;
}

.mainNav input[type=checkbox]:checked ~ ul {
	display: block;
	position: static;
}

.body-home .mainNav li#btn01 a,
.body-immobilien .mainNav li#btn02 a,
.body-angebote .mainNav li#btn03 a,
.body-genossenschaft .mainNav li#btn04 a,
.body-kontakt .mainNav li#btn05 a
{
	color: #89c5de;
}

} /* Ende 1100 */


@media screen and (max-width: 1000px) {

body {
	font-size: 17px;
}

.half-content {
	width: 100%;
}

.grid3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-row-gap: 2.5em;
}


/* Header
-----------------------------------------------------------*/
.siteHeader .frame {
	height: 110px;
}

.logo {
	width: 270px;
}

} /* Ende 1000 */



@media screen and (max-width: 750px) {

body {
	font-size: 16px;
}

.grid3, .grid4 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
	grid-row-gap: 2.5em;
}

.grid5,
.half-content .grid3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-row-gap: 2.5em;
}

/* Header
-----------------------------------------------------------*/
.siteHeader .frame {
	height: 100px;
}

.logo {
	width: 240px;
}

/* Spezifische Formatierungen
-----------------------------------------------------------*/

.infobox {
	position: relative;
	padding: 1em 5%;
	left: 0;
	top: auto;
	right: 0;
}


} /* Ende 800 */

@media screen and (max-width: 600px) {

.grid_1_2 {
	display: block;
}

.grid_1_2_div1 { margin-bottom: 2.5em; }
.grid_1_2_div2 { margin-bottom: 2.5em; }


/* Header
-----------------------------------------------------------*/
.siteHeader .frame {
	height: 90px;
}

.logo {
	width: 200px;
}

.mainNav {
	top: 3em;
}



} /* Ende 600 */


/* Advanced Checkbox Hack Navigation
-----------------------------------------------------------*/
body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
	padding: 0;
  }
  to {
	padding: 0;
  }
}

.mainNav input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.mainNav label {
	display: none;
	cursor: pointer;
	user-select: none;
}



/* Clearfix
-----------------------------------------------------------*/
.group:after {
  content: "";
  display: table;
  clear: both;
 }