/* styles Desktop 1280 px
======================== */
html {
	width:100%;
	background-color:#f2f2f2;
	scroll-behavior: smooth;
}
body {
	display:grid;
	min-width:1212px;
	max-width:100%;
	min-height: 100.1vh;
	margin:auto;
	grid: "hborder1 header hborder2" 168px
	      "navborder1 nav navborder2" 30px
	      "border1 content border2" auto
	      / 1fr 1212px 1fr;
	grid-gap:0;
	background-color:#fff;
	font-family: 'Fira Sans Condensed', sans-serif;
	font-weight:300;
	font-size:16px;
	color:#000;
	line-height:24px;
}
header {
	background-color:#fff;
	position:fixed;
	z-index:10;
	width:100%;
	min-width:1212px;
	height:198px;
}
#contentside {
	grid-column:1 / 4;
	grid-row:3;
	background-color:#f4f4f5;
}
nav {
	grid-area:nav;
	position:fixed;
	background-color:#e8e9ea;
	top:168px;
	width:100%;
	height:30px;
	z-index:11;
}
#logo {
	display:block;
	position:absolute;
	width:250px;
	height:113px;
	left:calc(50% - 556px);
	top:26px;
	background:url('/images/mainpvz_logo.png') top left no-repeat;
	background-size:cover;
}
#toplinks {
	display:inline-block;
	position:absolute;
	right:calc(50% - 600px);
	font-size:14px;
	text-transform:uppercase;
	text-align:right;
	width:auto;
}
#toplinks a {
	display:inline-block;
	color:#4c9f95;
	margin:12px 0 0 12px;
}
#toplinks a:hover,
#toplinks a.selected {
	color:#000;
}
#content #footerlinks {
	display:none;
}

#content {
	grid-area:content;
	position:relative;
}
/* Menü
=======*/
#showmenu {
	display:none;
}
nav {
	margin:0;
	line-height:30px;
	min-width:1212px;
}

/*Ebene 1 Hauptmenü*/
nav ul {
  display: inline-block;
  width:1212px;
  margin:0 0 0 calc(50% - 567px);
  padding:0;
  position:relative;
}

nav li {
  display:inline-block;
  position:relative;
  padding:0 0 8px 0;
  width:auto;
}

nav ul li a {
  	display:inline-block;
  	margin-top:6px;
  	padding:0 8px 0 8px;
  	border-left:1px solid #fff;
  	font-family:'Fira Sans Condensed';
  	font-weight:400;
	font-size:18px;
	line-height:100%;
	text-decoration: none;
	color: #000;
	-webkit-transition: color .1s ease-in;
	transition: color .1s ease-in;
}
nav ul li:last-child a {
	border-right:1px solid #fff;
}
nav ul li a:hover {
	color:#4c9f95;
}

nav li.selected a.ebene0,
nav li.open a.ebene0 {
  color:#4c9f95;
}

nav ul li.has-child:hover a.ebene0,
nav ul li.has-child:focus a.ebene0,
nav ul li.has-child:active a.ebene0
 {
  color:#4c9f95;
  -webkit-transition: color 0.01s;
  transition: color 0.01s;
}
  
/*Ebene 2 Untermenü */
nav ul ul {
  visibility:hidden;
  display:inline-block;
  position:absolute;
  border-radius:0;
  top:30px;
  left:0;
  margin:0;
  padding:4px 0 4px 0;
  width:auto;
  min-width:250px;
  opacity:0;
  background-color:#f4f4f5;
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.4);
  line-height:0;
}
nav ul li:hover ul,
nav ul li.hover ul  {
  visibility:visible;
  opacity:1;
  z-index:1001;
  -webkit-transition: all 0.2s 0.1s;
  transition: all 0.2s 0.1s;
}
nav ul ul li {
  display:block; 
  height:auto;
  padding:4px 8px 8px 8px;
  
}

nav ul ul li:last-child, nav ul ul li a:last-child {
  border:0;
}

nav ul ul li a {
	font-family:'Fira Sans Condensed', sans-serif;
	font-weight:500;
	line-height:135%;
	text-transform:none;
	color:#4c9f95;
	border:0;
}
nav ul ul li:hover a,
nav ul ul li.selected a,
nav ul ul li.open a {
	color:#000;
}
nav a.hidden {
	font-style:italic;
}
/* Ebenen 3ff */
nav ul ul ul {
  visibility:hidden;
  display:block;
  top:70%;
  left:40%;
  border-top:0;
  background-color:#fef7eb;
}

nav ul ul ul ul {
  visibility:hidden;
  display:block;
  background-color:#b0becc;
}

nav ul li:hover ul ul,
nav ul li:hover ul ul ul {
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.2s 0.2s;
  transition: all 0.2s 0.2s;
}
nav ul ul li:hover ul,
nav ul ul ul li:hover ul {
  visibility:visible;
  z-index:1002;
  opacity:1;
  -webkit-transition: all 0.2s 0.1s;
  transition: all 0.2s 0.1s;
}

nav ul ul ul li { 
  line-height:120%;
}
nav ul:first-child:before {
	display:block;
	position:absolute;
	top:10px;
	left:-228px;
	width:212px;
	height:80px;
	background:url('/images/bogen_weiss.png') left top no-repeat;
	background-size:100% auto;
	content:' ';
	z-index:20;
}
nav.start ul:before {
	display:none;
}

#slogan {
	display:block;
	position:absolute;
	right:calc(50% - 540px);
	bottom:0;
	width:222px;
	height:44px;
	padding:8px 12px 8px 12px;
	background-color:#f4f4f5;
	font-family:'Fira Sans';
	font-size:18px;
	font-weight:500;
	line-height:22px;
}

/* Content-Styles
================*/
h1 {
	font-family:'Fira Sans',sans-serif;
	font-size:20px;
	font-weight:800;
	line-height:120%;
	color:#8daeac;
	margin:0 0 16px 0;
}

h2 {
	font-family:'Fira Sans',sans-serif;
	font-size:20px;
	font-weight:normal;
	line-height:120%;
	color:#000;
	margin:0 0 16px 0;
}

h3 {
	font-family:'Fira Sans',sans-serif;
	font-size:18px;
	font-weight:800;
	line-height:120%;
	color:#000;
	margin:0 0 16px 0;
}

h4 {
	font-family:'Fira Sans Condensed',sans-serif;
	font-size:16px;
	font-weight:800;
	line-height:120%;
	color:#000;
	margin:0 0 4px 0;
}

#content {
	width:1212px;
	outline:0;
	background-color:#fff;
	display:grid;
	grid: "fliesstext spalte" auto
	      / 648px 516px;
	grid-gap:48px;
}
	
#content div {
	grid-area:fliesstext;
	padding:48px 0 24px 48px;
}

#content div.spalte {
	display:block;
	grid-area:spalte;
	padding:0;
	position:relative;
	background-color:#bbcecd;
}
#content div.spalte img.welle {
	margin-top:-136px;
}
#content div.spalte div {
	padding:48px;
	font-style:italic;
	font-weight:400;
	color:#fff;
}
#content div.spalte div h2 {
	font-family:'Fira Sans Condensed';
	font-size:32px;
	color:#fff;
	font-weight:300;
	font-style:italic;
}

#content.start div {
	padding:0;
}
#content.start article.start {
	position:relative;
	width:1212px;
	height:824px;
	padding:0;
	background:url('/images/main_pvz.jpg') top left no-repeat;
	background-size:cover;
	border-bottom:24px solid #e8e9ea;
	margin-bottom:64px;
}
#content.start article.starttext {
	padding:24px 200px 24px 200px;
	width:812px;
}

#content article.start:after {
	position:absolute;
	display:block;
	width:225px;
	height:65px;
	top:870px;
	left:-16px;
	background:url('/images/bogen.png') left top no-repeat;
	background-size:cover;
	content:' ';
}
	
#content p.teaser {
	font-size:18px;
	font-weight:500;
}	
#content p {
  margin:0 0 32px 0;
}

#content p.small {
  font-size:12px;
}
#content p + ul {
  margin-top: -2em;
}
#content p + ul.new {
  margin-top:0;
}

#content ul {
  list-style:disc outside none;
  padding:0 0 0 20px;
  margin:0;
}

#content ul.mit-head li {
	padding-top:16px;
	color:#2dad63;
	font-weight:bold;
}
#content ul ul {
  list-style:none;
  padding:0 0 0 20px;
  margin:0;
}
#content ul.mit-head ul li {
	padding-top:0;
	color:#000;
	font-weight:normal;
}
#content ul.mit-head ul li::before {
  content: "\2022";
  color: #9d9d95;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

#content img {
	width:100%;
}

#content figure {
	width:100%;
	margin:0 0 12px 0;
	padding:0;
}
#content figure img {
	width:100%;
	height:auto;
}
* a {
	text-decoration:none;
	color:#4c9f95;
	line-height:24px;
	cursor:pointer;
	text-decoration:none;
}
	
* a.morelink {
	position:absolute;
	display:block;
	bottom:0;
	width:100%;
	padding-bottom:8px;
	background-color:#fff;
	z-index:10;
}
* a.morelink::after {
	position:absolute;
	display:block;
	top:-24px;
	width:100%;
	height:24px;
	content:" ";
	background-color:transparent;
	background-image:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

* a.pdf {
  display:inline-block;
  padding:4px 0px 0px 36px;
  background:url("/images/icons/icon_dl_pdf.png") left center no-repeat;
  background-size: auto 100%;
}

* a.video {
  display:inline-block;
  height:30px;
  padding:4px 0px 0px 44px;
  background:url("/images/icons/video.png") left 2px no-repeat;
}
* a:hover {
	color:#000;
}

/* Allgemein
============*/
*.rechts {
  float:right;
  margin-left:10px;
}

*.links {
  float:left;
  margin-right:10px;
}

*.zentriert {
  display:block;
  width:100%;
  text-align:center;
}

*.small {
  font-size:60%;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

p {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

a {
  -moz-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

*.fehler {
  color:#C20000;
}

/* ==================================
   Tablets
===================================*/
@media only screen and (max-width:1211px) and (min-width:700px) {
	body {
		width:100%;
		min-width:640px;
		min-height:100vh;
		display:block;
	}
	header {
		min-width:100%;
		height:13.5vw;
	}
	#logo {
		top:3%;
		left:5.25%;
		width:25%;
		height:12.5vw;
		background-size:100% auto;
	}
	#toplinks {
		display:block;
		right:5%;
	}
	#slogan {
		display:none;
	}
	nav, nav.start {
		top:13.5vw;
		min-width:100%;
		width:100%;
		padding:0;
		position:relative;
	}
	nav #showmenu {
		display:none;
	}
	nav ul:first-child {
		display:block;
		margin:0;
		padding-left:4%;
		width:100%;
	}
	#contentside {
		display:none;
	}
	#content, #content.start {
		position:absolute;
		display:block;
		padding:14.5vw 0 0 0;
		width:100%;
	}
	#content.start article.start {
		width:100%;
		padding:65vw 0 0 0;
		height:auto;
		background:url('/images/main_pvz_mobile.jpg') top left no-repeat;
		background-size:100% auto;
		margin-bottom:24px;
	}
	#content.start article.start:after {
		display:none;
	}
	#content.start article.starttext {
		padding:0 5% 0 5%;
		width:90%;
	}
	#content div {
		display:block;
		position:relative;
		padding:5%;
		font-size:20px;
		line-height:150%;
	}
	#content div.spalte img.welle {
		margin-top:-27%;
	}
	h1 {
		font-size:24px;
		line-height:150%;
	}
	h2, h3 {
		font-size:22px;
		line-height:150%;
	}
	h4 {
		font-size:20px;
		line-height:150%;
	}	
	#content #footerlinks {
		display:none;
	}
	* a.pdf {
		padding:0 0 0 40px;
		background-size:32px auto;
		min-height:32px;
	}
}


/* ==================================
   Mobiles
===================================*/
@media only screen and (max-width:699px) {	
	body {
		width:100%;
		min-width:320px;
		min-height:100vh;
		display:block;
	}
	header {
		min-width:100%;
		height:29vw;
		position:absolute;
	}
	#logo {
		top:5%;
		left:5.5%;
		width:50%;
		height:25vw;
		background-size:100% auto;
	}
	#toplinks {
		display:none;
	}
	
	#slogan {
		display:none;
	}
	nav, nav.start {
		position:absolute;
		top:29vw;
		min-width:100%;
		width:100%;
		padding:0;
		position:relative;
		height:0;
		box-shadow: 1px 0px 1px 1px rgba(0,0,0,0.4);
	}
	nav #showmenu {
		display:block;
		position:absolute;
		top:-15vw;
		right:5vw;
	}
	nav #showmenu a {
		color:#babec2;
		font-size:48px;
	}
	nav #menu {
		display:none;
	}
	nav ul {
		width:100%;
		margin:0;
	}
	nav ul li {
		display:block;
		border-bottom:1px solid #fff;
		background-color:#e8e9ea;
		padding:0;
	}
	nav ul li a, nav ul li:last-child a {
		display:block;
		border:0;
		margin:0;
		font-size:20px;
		line-height:200%;
		padding:0 5% 0 5%;
	}
	nav ul li.has-child a:after {
		display:inline-block;
		float:right;
		content:'▽';
	}
	nav ul li.has-child ul li a:after {
		content:'';
	}
	nav ul:first-child {
		box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.4);
	}
	nav ul ul {
		position:absolute;
		padding:0;
		top:50%;
		left:20%;
	}
	nav ul ul li {
		padding:0;
	}
	nav ul ul li a,
	nav ul ul li:last-child a {
		line-height:125%;
		padding:10px 10px 8px 10px;
	}
	#contentside {
		display:none;
	}
	#content, #content.start {
		position:absolute;
		display:block;
		padding:29vw 0 0 0;
		width:100%;
	}
	#content.start article.start {
		width:100%;
		padding:65vw 0 0 0;
		height:auto;
		background:url('/images/main_pvz_mobile.jpg') top left no-repeat;
		background-size:100% auto;
		margin-bottom:24px;
	}
	#content.start article.start:after {
		display:none;
	}
	#content.start article.starttext {
		padding:0 5% 0 5%;
		width:90%;
	}
	#content div {
		display:block;
		position:relative;
		padding:5%;
		font-size:20px;
		line-height:150%;
	}
	#content div.spalte img.welle {
		margin-top:-27%;
	}
	h1 {
		font-size:24px;
		line-height:150%;
	}
	h2, h3 {
		font-size:22px;
		line-height:150%;
	}
	h4 {
		font-size:20px;
		line-height:150%;
	}
	#content #footerlinks {
		display:block;
		background-color:#bbcecd;
		line-height:100%;
	}
	#content.start #footerlinks {
		line-height:150%;
		padding:2.5% 5% 2.5% 5%;
	}
	#content #footerlinks a {
		color:#fff;
		margin-right:5%;
	}
	#content #footerlinks a:hover, #content #footerlinks a.selected {
		color:#000;
	}
	* a.pdf {
		padding:16px 0 0 64px;
		background-size:auto 48px;
		min-height:64px;
	}
}