@charset 'utf-8';

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,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,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;box-sizing:border-box}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}html{overflow-y:scroll}body{background-color:#fff}b,strong{font-weight:700}em,i{font-style:italic}h1,h2,h3,h4,h5,h6{font-weight:400}.ie7 address{font-style:normal}.hideme{position:absolute;left:-999em;top:-999em}button,input[type=button],input[type=submit],label{cursor:pointer}q:lang(de){quotes:'„' '“' '‚' '‘'}q:lang(en){quotes:'“' '”' "‘" "’"}abbr[title]{border-bottom:1px dotted #888!important;cursor:help}a abbr{cursor:pointer!important}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}* html .clearfix{height:1%}.clearfix{display:block}img{-ms-interpolation-mode:bicubic}

@font-face {
font-family: 'DINWeb';
src: url("../fonts/DINWeb.woff") format("woff");
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: 'DINWeb';
src: url("../fonts/DINWeb-Bold.woff") format("woff");
font-style: normal;
font-weight: bold;
}

@font-face {
font-family: 'DINWeb';
src: url("../fonts/DINWeb-Ita.woff") format("woff");
font-style: italic;
font-weight: normal;
}


a,
ul.galerie a.stoerer svg {
-webkit-transition: all 250ms ease-in;
   -moz-transition: all 250ms ease-in;
    -ms-transition: all 250ms ease-in;
     -o-transition: all 250ms ease-in;
        transition: all 250ms ease-in;
}

::selection {
background: black;
color: white;
}

img {
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

.klar {
clear: both;
}

body {
font-family: 'DINWeb', 'Helvetiva', 'Arial';
font-size: 18px;
line-height: 24px;
color: rgb(102,102,102);
}

header,
footer {
background: rgb(217,217,217);
text-align: center;
}

h1 {
display: inline-block;
width: 288px;
height: 34px;
background-image: url('../img/christoplan.svg');
color: transparent;
font-size: 0;
line-height: 0;
}

header h1,
footer h1 {
margin: 48px 16px 44px 16px;
}

div.kontakt section h1 {
margin: 0 0 32px 0;
}

div.investieren {
background: rgb(170,20,40);
text-align: center;
}

div.investieren h2 {
color: white;
display: inline-block;
font-size: 24px;
line-height: 28px;
margin: 24px 16px 22px 16px;
}

ul.galerie {
width: 100%;
max-width: 1280px;
margin: 0 auto;
background: rgb(102,102,102);
}

ul.galerie.flickity-enabled.is-fullscreen {
max-width: 100%;
}

ul.galerie li {
line-height: 0;
width: 100%;
}

ul.galerie.flickity-enabled.is-fullscreen li {
display: flex;
text-align: center;
width: 100%;
height: 100%;
}

ul.galerie li img {
width: 100%;
z-index: 99;
}

ul.galerie.flickity-enabled.is-fullscreen li img {
display: inline-block;
display: inline-flex;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}

ul.galerie li div {
position: absolute;
bottom: 0;
left: 0;
margin: 32px 64px 32px 32px;
}

ul.galerie li h3,
ul.galerie li h4,
div.aktuell section h3 {
font-size: 48px;
line-height: 56px;
color: white;
text-shadow: 0px 0px 48px black;
}

ul.galerie li h3 {
font-weight: bold;
}

ul.galerie.flickity-enabled.is-fullscreen li h3,
ul.galerie.flickity-enabled.is-fullscreen li h4 {
display: none;
}

section {
width: 944px;
margin: 0 auto;
padding: 64px 0 48px 0;
}

div.kontakt {
background: rgb(242,242,242);
}

div.kontakt section {
padding: 48px 0 48px 0;
}

section > div,
section > div {
display: inline-block;
vertical-align: top;
width: 456px;
}

section > div + div {
margin-left: 32px;
}

section > div h3,
section > div h4 {
font-size: 24px;
line-height: 32px;
font-weight: bold;
}

section > div h3 {
color: black;
}

section > div h4 {
color: rgb(170,20,40);
margin: 0 0 16px 0;
}

div.kontakt section > div h2 {
font-size: 36px;
line-height: 36px;
color: rgb(170,20,40);
font-weight: bold;
margin: 14px 0 33px 0;
}

section > div h5 {
font-weight: bold;
color: black;
margin: 16px 0 4px 0;
}

section > div p,
section ul {
margin: 0 0 12px 0;
}

section > div p.gross {
font-size: 24px;
line-height: 32px;
}

section > div p.gross span {
color: rgb(170,20,40);
font-weight: bold;
}

section > div:first-child ul {
background: rgb(240,240,240);
padding: 16px 16px 12px 16px;
margin: 0 0 22px 0;
}

section > div:first-child ul li {
font-size: 24px;
line-height: 32px;
color: black;
margin: 0;
}

section > div + div {
padding: 58px 0 0 0;
}

section#p2014 > div + div {
width: 418px;
padding: 12px 16px 2px 16px;
background: rgb(240,240,240);
}

section#p2014 > div h5 {
margin-top: 4px;
}

section p a {
color: rgb(170,20,40);
border-bottom: 1px solid white;
}

section#p2014 p a {
border-bottom-color: rgb(240,240,240);
}

section p a:hover,
section#p2014 p a:hover {
color: black;
border-bottom-color: rgb(170,20,40);
}

div.kontakt section > div + div {
padding: 0 0 0 0;
}

div.aktuell {
background: rgb(170,20,40);
color: white;
}

div.aktuell section h3 {
margin: 0 0 16px 0;
text-shadow: none;
}

div.aktuell section h4 {
font-weight: bold;
margin: 16px 0 0 0;
}

section ul li {
padding-left: 12px;
text-indent: -12px;
}

section ul li:before {
content: '· ';
display: block;
float: left;
width: 12px;
color: black;
}

div.aktuell section ul li:before  {
content: '› ';
color: white;
}

div.kontakt section > div + div h3,
div.kontakt section > div + div h4 {
font-size: 18px;
line-height: 24px;
}

div.kontakt section > div + div h3 {
margin: 0 0 16px 0;
}

div.kontakt section > div + div h4 {
margin: 0;
color: rgb(102,102,102);
}

div.kontakt section > div + div a {
color: rgb(102,102,102);
}

div.kontakt section > div + div a span,
div.kontakt section > div + div a:hover {
color: rgb(170,20,40);
}

#datenschutz {
margin: 24px 0 0 0;
}

#datenschutz,
#datenschutz h4 {
font-size: 14px;
line-height: 18px;
}

/* Störer */
ul.galerie .stoerer,
ul.galerie .stoerer svg {
width: 128px;
height: 128px;
}

ul.galerie .stoerer {
display: flex;
position: absolute;
align-items: center;
top: 32px;
right: 32px;
z-index: 999;
}

ul.galerie.flickity-enabled.is-fullscreen .stoerer {
display: none;
}

ul.galerie .stoerer svg {
position: absolute;
top: 0;
left: 0;
}

ul.galerie .stoerer.rot svg {
fill: rgb(170,20,40);
}

ul.galerie .stoerer.gruen svg {
fill: rgb(0,210,0);
}

ul.galerie a.stoerer:hover svg {
fill: black;
transform: rotate(345deg);
}

ul.galerie .stoerer span {
flex: 1;
margin: auto;
padding: 0 12px;
width: 128px;
text-align: center;
color: white;
font-weight: bold;
z-index: 9999;
transform: rotate(-15deg);
}

svg#luftbild {
width: 100%;
z-index: 99;
}

svg#luftbild g.gruen polygon,
svg#luftbild g#legende rect#gruen {
fill: rgba(0,210,0,0.8);
}

svg#luftbild g.gruen:hover polygon {
fill: rgba(0,210,0,0.2);
}

svg#luftbild g.gelb polygon,
svg#luftbild g#legende rect#gelb {
fill: rgba(230,200,20,0.8);
}

svg#luftbild g.gelb:hover polygon {
fill: rgba(230,200,20,0.2);
}

svg#luftbild g.rot polygon,
svg#luftbild g#legende rect#rot {
fill: rgba(170,20,40,0.8);
}

svg#luftbild g.rot:hover polygon {
fill: rgba(170,20,40,0.2);
}

svg#luftbild g.gruen text,
svg#luftbild g.rot text,
svg#luftbild g.gelb text {
font-family: 'DINWeb', 'Helvetiva', 'Arial';
font-size: 18px;
line-height: 24px;
fill: white;
text-anchor: middle;
z-index: 9999;
}

svg#luftbild g polygon + text {
display: none;
}

svg#luftbild g:hover polygon + text {
display: block;
}

svg#luftbild g#legende rect#hg {
fill: rgba(0,0,0,0.25);
}

svg#luftbild g#legende text {
font-family: 'DINWeb', 'Helvetiva', 'Arial';
font-size: 20px;
line-height: 24px;
fill: white;
text-anchor: left;
}

svg#luftbild g#titel text {
font-family: 'DINWeb', 'Helvetiva', 'Arial';
font-size: 48px;
line-height: 75px;
fill: white;
text-anchor: left;
}

svg#luftbild g#titel text.fett {
font-weight: bold;
}

/*! Flickity v2.1.2
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: transparent;
  border: none;
}

.flickity-button:hover {
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: white;
}

.flickity-button:hover .flickity-button-icon {
  fill: rgb(170,20,40);
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: black;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
  background: rgb(170,20,40);
}

/* Flickity fullscreen v1.0.1
------------------------- */

.flickity-enabled.is-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(10,0,0,.9);
  padding: 0;
  z-index: 10000;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
  display: none;
}

/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
  overflow: hidden;
}

/* ---- flickity-fullscreen-button ---- */

.flickity-fullscreen-button {
  display: block;
  left: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
}

/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
  right: auto;
  left: 10px;
}

.flickity-fullscreen-button-exit { display: none; }

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }

.flickity-fullscreen-button .flickity-button-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
}




/* ############# Screens über 1024px ############# */
@media only screen and (min-width: 1024px) {

  .stoerer {
  transform: scale(1.5);
  transform-origin: top right;
  }

}


/* ############# Screens bis 1008px ############# */
@media only screen and (max-width: 1008px) {

  section,
  div.kontakt section {
  width: auto;
  margin: auto;
  padding: 64px 32px;
  }
  
  section > div,
  div.kontakt section,
  section#p2014 > div + div {
  width: auto;
  max-width: 456px;
  }
  
  section > div + div {
  margin: 0 48px 0 0;
  padding: 0;
  }

}


/* ############# Screens bis 660px ############# */
@media only screen and (max-width: 660px) {

  .stoerer {
  transform: translate(-48px, 0px);
  }

}


/* ############# Screens bis 720px ############# */
@media only screen and (max-width: 720px) {

  ul.galerie li h3,
  ul.galerie li h4,
  div.aktuell section h3 {
  font-size: 32px;
  line-height: 36px;
  }
  
  section > div + div {
  margin: 0;
  }

  svg#luftbild g.gruen text,
  svg#luftbild g.gelb text,
  svg#luftbild g.rot text {
  font-family: 'DINWeb', 'Helvetiva', 'Arial';
  font-size: 32px;
  line-height: 40px;
  }
  
  section#p2014 > div + div {
	width: 100%;
	margin-top: 16px;
	}

}


/* ############# Screens bis 480px ############# */
@media only screen and (max-width: 480px) {

  svg#luftbild g.gruen text,
  svg#luftbild g.gelb text,
  svg#luftbild g.rot text {
  font-family: 'DINWeb', 'Helvetiva', 'Arial';
  font-size: 40px;
  line-height: 48px;
  }

  header h1,
  footer h1 {
  margin: 16px 16px 14px 16px;
  }

  ul.galerie li div {
  margin: 16px 64px 16px 16px;
  }
  
  div.investieren h2 {
  font-size: 18px;
	line-height: 24px;
	margin: 12px;
	}
  
  section, div.kontakt section {
	padding: 16px;
	}
	
	section > div:first-child ul {
	margin: 0 -16px 22px -16px;
	}
	
	section > div:first-child ul li {
	font-size: 18px;
	line-height: 24px;
	}
	
	section > div p.gross {
	font-size: 20px;
	line-height: 28px;
	}
	
	ul.galerie li h3, ul.galerie li h4, div.aktuell section h3 {
	font-size: 16px;
	line-height: 22px;
	}
	
	.js ul.galerie.flickity-enabled.is-fullscreen {
	overflow: hidden;
	margin: 0;
	}
	
	ul.galerie {
	margin: 24px 0;
	}
	
	ul.galerie .stoerer {
	transform: scale(0.75) translate(0,0);
	top: -24px !important;
	left: auto !important;
	right: auto !important;
	padding: 0;
	height: auto;
	width: 100%;
	}
		
  ul.galerie .stoerer span {
  color: rgb(170,20,40);
	width: 100%;
	text-align: center;
	transform: rotate(0deg);
	padding: 0;
	}
	
	ul.galerie .stoerer span br {
	display: none;
	}
  
  .stoerer svg {
  display: none;
  }
  
  .flickity-page-dots {
	bottom: -18px;
	}
  
  .flickity-page-dots .dot {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  }

}