/*fonts-end*/

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-MediumItalic.woff2') format('woff2'),
        url('fonts/Ubuntu-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-LightItalic.woff2') format('woff2'),
        url('Ubuntu-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Medium.woff2') format('woff2'),
        url('fonts/Ubuntu-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Italic.woff2') format('woff2'),
        url('fonts/Ubuntu-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Light.woff2') format('woff2'),
        url('fonts/Ubuntu-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Bold.woff2') format('woff2'),
        url('fonts/Ubuntu-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-BoldItalic.woff2') format('woff2'),
        url('fonts/Ubuntu-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Regular.woff2') format('woff2'),
        url('fonts/Ubuntu-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Patrick Hand';
    src: url('fonts/PatrickHand-Regular.woff2') format('woff2'),
        url('fonts/PatrickHand-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/*fonts-end*/

#popup-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0, 0.4); 
  z-index: 99;
  display: none; 
  }
#popup-status {
  width: 36%;
  height: auto;
  text-align:left;
   position: absolute;z-index: 999999;
  left: 50%;
  top: 50%;
  margin: -14% 0 0 -20%;
  background:#efefef;
  padding:2% 2%;
  border:10px solid #aecb00;display: none; 
  }
  
 @media screen and (max-width:1380px) {
#popup-status {
  width: 80%;
  height: auto;
  text-align:left;
  position: absolute;z-index: 999999;
  left: 10%;
  top: 0%;
  margin: 5% 0 0 -5%;
  background:#efefef;
  padding:20px 2%;
  border:10px solid #aecb00;display: none; 
  }	
}
  
@media screen and (max-width:720px) {
#popup-status {
  width: 80%;
  height: 100%;
  text-align:left;
  position: absolute;z-index: 99999999;
  left: 10%;
  top: 2%;
  margin: 0% 0 0 -5%;
  background:#efefef;
  padding:15% 2%;
  border:10px solid #aecb00;display: none; 
  }	
}
 
 #close-icon-box-3 { position: absolute; z-index:9999;width:25px; height:auto;right:20px;top:20px;margin:0px 0px 0% 0%; padding:0px;opacity:1;transition:all 1s ease; cursor:pointer}
 
 #popup-status h2 {font-weight:700; padding:0 0 2% 0; margin:0;}
/*######## popup END###################*/

.noneDisplay {visibility: hidden; display: none}
.hidden-mobile {visibility: hidden; display: none}
.hidden-mobile-2{visibility: hidden; display: none}
.hidden-temp {visibility: hidden; display: block}
.hidden {visibility: hidden; display: none}
.hidden-main {visibility: visible; display: block}
.spacer-left {padding-left:0px;}
.spacer-right {padding-right:0px;}
.spacer-top {padding-top:40px;}


/*######## FONTS END###################*/
html, body, div, applet, object, spyn, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,iframe,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio {
  margin: 0;
  padding: 0;
 
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  background-color:#ffF;
  font-family: 'Ubuntu';
  -webkit-font-smoothing: antialiased;
  color: #666;font-weight:300;
  line-height: 24px; font-size:18px;
}

ol, ul {
  list-style: square;
  margin: 0 0 0.5em;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

p {
  margin: 0 ;
  }


a {
  color:#000;
  text-decoration: none; font-weight:normal;
}


table {
  border-collapse: collapse;
  border-spacing: 0;
}

img{
  max-width:100%;
  
  height:auto;
  border:0;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
b{font-weight:700}
strong {font-weight:700}
/*############## CONTENT BEGINN ###########################################*/
/*content elemente beginn*/
/* TYPO3 Anpassung für Responsive */
DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
        float: none; 
}

/*FORMULAR*/

#meinplatz{
	position:absolute;
	display:block; cursor:pointer;
	width:6em; height:auto;
	z-index:120;
	right:2%;
	bottom:-4em;
}



#kontakt h2{display: none;}
#spenden h2{display: none;}
#freie-Stellen h2{display: none;}
#anmeldeformularfrBewohner h2{display: none;}
#anmeldeformularfrBewohner .clearfix h2{display:block;}

	
	label{ float: left; width: 90%; text-align: left;}
	.form-control { border: solid 1px #000; width:90%; background: transparent; color:#000;font-size:14px; padding:5px;}
	.form-control {margin:5px;}
	.xxlarge  {border: solid 1px #000; width:90%; height:6em;background:transparent; color:#000;font-size: 0.9vw; line-height:1.3vw;padding:0% 0% 1% 0%;}
	

/*###########################*/
.nav-box {float: right; padding:30px 20px 0 0}
.mail-box {float: right; padding:30px 30px 0 0}
.logo-mobile-box {float:left; padding:10px 10px 0 5% }
#logo-mobile {width: auto; height:70px}
#nav-icon {width: auto; height:20px}
#mail-icon {width: auto; height:20px}

.header-mobile
{
  -webkit-box-shadow: 0px 2px 5px 0px rgba(51,50,51,0.3);
  -moz-box-shadow: 0px 2px 2px 0px rgba(51,50,51,0.3);
	box-shadow: 0px 2px 5px 0px rgba(51,50,51,0.3);

}
.header-mobile
{
	background: #FFF;
	font-size: 18px;	
	color: #fff;
	line-height: 40px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	height: 90px;
	padding: 0 0px;
}
.header-mobile
{
	position: fixed;
	top: 0;
	 right: 0;
	z-index:999;
}

p {
    margin: 0;
    padding: 0;
}

/*content elemente beginn*/

.black-1 {background-color:#fff; }
.black-2 {background-color:#4c4c4c}

#loading-panel{position: fixed; z-index:55; top:0; width:100%; height:100%; background-color:#FFF}
.loader{position: relative; top:50%; left:50%;margin-left:-60px; margin-top:-60px; width:120px; height:120px; }
#loader {width:120px; height:120px;}

#menu-panel{position: fixed; z-index:55; top:0; width:100%; height:100%; background-color: rgba(51, 51, 51, 0.9); display: none}

/*SECTIONS*/
.section{float:left;margin:0px;height: auto;padding-bottom:0px;width:100%;text-align:center;}
.section-2{float:left;margin:0px;height: auto;padding-bottom:0px; margin-bottom:60px;width:100%;text-align:center;}
.section ul{list-style:none;margin: auto;}

/*GRID*/
.grid-box {position: absolute; z-index:4;  top:0;width:100%;padding:100px 0 0px 0; margin:0px 0 0% 0; text-align:center; background-color:#FFF}

.grid { position:relative;  z-index:4;width:100%;padding:0; margin:0px 0 900px 0; text-align:center;background-color:#FFF }

/*SLOTS*/
.slot-1-1{ position:relative;width:90%;padding:0px 0 0px 0; text-align:center; margin:1% auto 0 auto}


.slot-1-2{ position:relative; float:left;width:100%;margin:0%;padding:10px 0 0px 0; text-align:left;}

.slot-1-3{ position:relative; float:left;width:100%;margin:0%;padding:10px 0 0px 0; text-align:left;}
.slot-1-3{ padding:0 3% 200px 3%}

.slot-1-4{ position:relative; float:left;width:98%;margin:-1% 1%;padding:0 0 40px 0; text-align:left;}
.slot-1-5{ position:relative; float:left;width:96%;margin:-1% 2%;padding:0 0 40px 0; text-align:left;}

/*SLOTS 2*/
.slot-2-0{ position:relative; float:left;width:98%;padding:40px 0px; margin: 0 1%;text-align: left;}
.slot-2-0-detail {background-color:#ededed; padding:4%} .slot-2-0-detail img{padding:40px 0 0 0}.slot-2-0-detail a{ color:#696969}

/*SLOTS 2 footer*/
.slot-2-1{white-space: nowrap;width:auto; display:inline;padding:40px 0 0px 0;}
.slot-2-1 a{display:inline}
.slot-2-2{ position:relative; width: auto;margin: auto 5% 0 auto;padding:40px 0 0px 0;}


/*SLOTS 3*/
.slot-3-1{ position:relative; float:left;width:100%;padding:0;margin:0; text-align:left;}
.slot-3-2{ position:relative; float:left;width:100%;margin:0;padding:0; text-align:left;}

.slider-box{ position: relative;width:98%;top:0px; display:block;padding:0px 1% 0px 1%;margin:0px auto 0px auto; }

/*.slider img{width:1440px; padding:0 100px; margin:0}*/
.slider-main{position: relative;width:97%;top:0px; display:block;padding:4% 2% 0px 1%;margin:0px auto 0px auto; }
.slider-news{position: relative;width:97%;top:0px; display:block;padding:0px 2% 0px 1%;margin:0px auto 0px auto; }
#map_canvas {position: relative;width:97%; height:450px;top:0px; display:block;padding:0px 2% 0px 1%;margin:0px auto 0px auto; }

.map_canvas {position: relative;width:97%; height:450px;top:0px; display:block;padding:0px 2% 0px 1%;margin:0px auto 0px auto; }

.flex-caption { color: #fff;text-align: right;width: auto; display:none}

/*headlines-intro*/
.intro h1 {padding:0px 0 0px 0;  width:auto; margin:1% 1% 1% 1%;text-transform: none; }
.intro h1 {background-image: url(../images/bg-headline.png);background-repeat: repeat-x; background-position: 0px 5px; }
.intro h1 b{background-color:#FFF; padding:0px 20px;font-weight:300;font-size:20px;}


h1 {padding:0px 0 0px 0;  width:auto; margin:20px 1% 20px 1%;text-transform: none;}
h1 {background-image: url(../images/bg-headline.png);background-repeat: repeat-x; background-position: 0px 5px; }
h1 b{background-color:#FFF; padding:0px 20px;font-weight:300;font-size:20px;}

h2{
	line-height: 32px;
  	font-weight: 300;
  	font-size: 22px;
	margin:0; padding:3% 0 30px 0;
	color:#666;
  }
.footer h2{
	line-height: 32px;
  	font-weight: 300;
  	font-size: 22px;
	margin:0; padding:30px 0 30px 0;
	color:#FFF;
  }
.artikel h1{
	line-height: 54px;
  	font-weight: 300;
  	font-size: 40px;
	margin:0; padding:0;
	color:#666; background-image:none; text-transform:none;
  }
.artikel h2{
	line-height: 30px;
  	font-weight: 300;
  	font-size: 20px;
	margin:0; padding:2% 0 30px 0;
	color:#666;
  }
.artikel-main h2{
	line-height: 34px;
  	font-weight: 300;
  	font-size: 40px;
	margin:0 0 0 0; padding:0 0 20px 0;
	color:#666; background-image:none; text-transform:none;
  }
.artikel-main b{
	line-height: 30px;
  	font-weight: 300;
  	font-size: 20px;
	margin:0; padding:2% 0 30px 0;
	color:#666;
  }

/*footer*/
#footer {position: fixed;z-index:3; bottom:0;}
.footer {padding:40px 0 80px 0;font-size:22px; font-weight:300;color:#fff;}
.footer .bodytext{color:#fff;line-height:28px;}
.footer a{color:#9ec417; text-transform:uppercase; padding: 0 10px; line-height:30px}
.footer a:hover{color:#43a8d6}

.social a{color:#666; font-weight:300}
.social { padding:2% 0 4% 0}
.social-box {float: inherit;padding:0px 0 0px 0;}
.social-box img{width:10%; height:auto; padding:10px 0}
.social-box img:hover{opacity:0.6;filter: alpha(opacity=60);}
.social-box img{opacity:0.3;filter: alpha(opacity=30);}
.mail-box img{opacity:0.3;filter: alpha(opacity=30);}

.share-text { text-align: left; font-weight:700}

/*SOCIAL-ICONS NEW*/
.social-box-new {padding: 1.2em 0em 1.0em 0; margin: 0 0 0 0.0em; width:100%; float:right; text-align: right;}
.social-box-new li{ list-style:none; display: inline-block;margin:0; padding: 0.0em 0.0em 0.4em 0.0em; text-align: right;}
.social-box-new img{width: 1.5em;height: auto;padding:0 0.2em;}
.social-box-new .border img{ border-left:#FFF solid 1px; }
@media screen and (max-width:480px) {      
    .social-box-new {padding: 2.0em 0em 0.4em 0; margin: 0; width:100%; float:inherit;text-align:center; }
    .social-box-new li{ list-style:none; display: inline-block;margin:0; padding: 0.0em 0.4em 0.4em 0; text-align: left;}
    .social-box-new img{width: 2.5em;height: auto;}
}





.footer {background-image:url("../images/bg-footer-2.jpg"); background-position:  no-repeat center center fixed; }
.footer  {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }


.content-main ul
{
list-style:none; 
padding: 0px 0 20px 0;
margin: 0px 0 5px 0;
}
.content-main  li
{
background-image: url(../images/squer.png); list-style:none;
background-repeat: no-repeat;
background-position: 6px 20px; 
padding:5px 0 0 20px; 
}

.internal-link{
background-image: url(../images/internal-link.png); 
background-repeat: no-repeat;
background-position: 5px 7px; 
padding:5px 0 0 40px; font-weight:300;
}
.internal-link:hover { color:#008dd5 }

.download {
background-image: url(../images/pdf-icon.png); 
background-repeat: no-repeat;
background-position: 5px 7px; 
padding:5px 0 0 40px; font-weight:300; 
}

/*############### PROJEKTANFRAGE OVERLAY #######################*/


/*CLOSE*/
#close-icon-box {position:absolute;z-index:999;cursor:pointer;right:13%; top:3.5em;}



/*POWERMAIL*/ 
.powermail_label{font-weight: 300;}
.tx-powermail li{list-style: none; color:#5c5c61; padding: 1em 0 0.5em 0; margin: 0; text-align: left; display: block;}
.tx-powermail ul {padding: 0; margin: 0;}

.tx-powermail {float: left; width:100%;padding:0% 0% 4em 0% ; border: none;}
.powermail_fieldset {border:0px; padding: 0 5% 0 0%; }
.powermail_fieldset ul li {list-style: none;}


.tx-powermail h3 {display: none; visibility: hidden;}
.tx-powermail h2 {}

.powermail_legend {display: none; visibility: hidden;}
.powermail_label { float: left;width: 100%; text-align: left;padding:0.5em 0 0.5em 0; display:block;}

.powermail_field {float: left; display: block;width: 100%;}

.powermail_input {width: 100%; }
.powermail_fieldwrap_type_submit {width: 100%;}

.powermail_submit {
    float: left;
  background:#9ec417;
  border: solid 1px #9ec417;
  color:#FFF;
  padding:0.5em 2.0em;margin:2.0em auto 0% auto;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: .5s ease-in-out;
  font-size: 1.2vw; line-height:1.2vw;
  font-weight: 300;
    -webkit-border-radius:0; -webkit-appearance: none;
}


.powermail_fieldwrap_type_input{float: left; width: 96%; padding:1% 0%;}
.powermail_fieldwrap_type_textarea {float: left; width: 96%; padding:1% 0%;}

.powermail_input {
  float: left;
  display: block;
  width: 100%;
  margin: 0%;
  border: 1px solid #5c5c61;
  padding: 0.2em 0.2em;
  background-color:transparent;
  color: #5c5c61;
  font-size: 1.0vw; line-height:1.4vw;
 
    -webkit-border-radius:0; -webkit-appearance: none;
}
.powermail_textarea {
  float: left;
  display: block;
  width: 100%;
  border: 1px solid #5c5c61;
  padding: 0.2em 0.2em;
  background-color:transparent;
  color: #5c5c61;
  font-size: 1.0vw; line-height:1.4vw;
 
    -webkit-border-radius:0; -webkit-appearance: none;
}


@media screen and (max-width:480px) {
	
	.tx-powermail {float: left; width:100%;padding:0% 0% 4em 0% ; text-align: center;}
	
	.powermail_input {font-size: 5.2vw; line-height:6.8vw;-webkit-border-radius:0; -webkit-appearance: none;}
    .powermail_textarea {font-size: 5.2vw; line-height:6.8vw;-webkit-border-radius:0; -webkit-appearance: none;}
	
	.powermail_label {width: 90%; text-align: left;padding:0.3em 0;}
	.powermail_field { width: 90%;  text-align: center;padding:0.3em 0;}
    
    .powermail_fieldwrap_type_input{ width: 98%; padding:1% 1%;}
    .powermail_fieldwrap_type_textarea {float: left; width: 98%; padding:1% 1%;}
    
    .powermail_submit {
      background:none;
      padding:0.5em 2.0em;margin:2.0em auto 0% 10%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      transition: .5s ease-in-out;
      font-size: 5.2vw; line-height:6.8vw;
      font-weight: 300;
    }
	
}


/*temp*/

/*DATENSCHUTZ*/

/* Cookie notice main container bg-cookie-box.png */
.cookie-box {
  position: fixed;
  z-index: 99999;
  left: 0;
  right: 0;
  bottom: -12em;
  text-align: center;
  padding: 2em 1em;
  background: #444444;
  transition : all 1.5s ease;
}
.slot-cookie-box{ position:relative;width: 82%;padding: 0 9%; margin: 0 0 0 0%; text-align:left;}
.cookie-box-left { float: left; width: 68%; padding: 0 2% 0 0%; text-align: left; color:#FFF;font-size: 1.0vw; line-height:1.4vw;}
.cookie-box-left a{color: #FFF; font-weight: 700;}
.cookie-box-right { float: left; width: 30%; text-align: right;}

.cookie-box--hide {
  opacity: 0;
  display: none;
  bottom: -100%;
}

.cookie-button {
  display: inline-block;
  cursor: pointer;
  padding:0.5em 1em;
  text-align: center;
  border: solid 1px #9ec417;
  color: #FFF;
  background:#9ec417;
  font-weight: 400;
}


@media screen and (max-width:480px) {	
	
	.cookie-box {width:90%;padding: 2em 5% 4em 5%;bottom: -32em;}
	.slot-cookie-box{ position:relative;width:90%;padding:0 5% 0% 5%; margin: 0 0 0 0%; text-align:left;}
	.cookie-box-left { float: left; width: 100%; padding: 0 0% 2em 0%; text-align: left;font-size: 4.8vw; line-height:6.4vw;}
	.cookie-box-right { float: left; width: 100%; text-align: left;}	
	
}