/*-------------------------------------------------------------------------------------

  Copyright (c) 2014 Pixelzauber GmbH, Switzerland
  CSS definition for main stylesheet

-------------------------------------------------------------------------------------*/
/* should merge all css to one due google speed
@import url("style.layout.css");
@import url("style.text.css");
@import url("style.navigation.css");
@import url("style.module.css");
@import url("style.responsive.css");
*/
@import url('https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,700&display=swap');
/*-------------------------------------------------------------------------------------

  Copyright (c) 2014 Pixelzauber GmbH, Switzerland
  CSS definition for basic layout

-------------------------------------------------------------------------------------*/
/* Start CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
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,
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, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
select,
input,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
html {
	height: 100%;
	font-size: 16px;
  	line-height: 23px;
}
body {
	height: 100%;
    line-height: 1;
}
body ol,body ul {
    list-style: none;
    margin-bottom: 0;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
ul,
ol {
    padding: 0;
    margin-left: 25px;
}
a, a:active, a:focus,
button, button:focus, button:active {
    outline: none;
    outline: 0;
}
::-moz-focus-inner {
    border: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
	margin-bottom: 8px;
}


/*-------------------------------------------------------------------------------------
  CSS Layout
-------------------------------------------------------------------------------------*/

header,
nav,
main,
section,
footer,
#slider
#map {
	position: relative;
	float:left;
	width:100%;
	height:auto;
	z-index: 10;
}
.inner {
	position: relative;
    margin: 0 auto;
    width: calc(100% - 60px);
	max-width: 1178px;
	height:auto;
}
.mobile { display:none; }
.desktop { display:block; }
.print { display:none; }
.center { text-align:center; }
.right { text-align: right; }
.white { background-color:rgb(255,255,255); }
.grey { background-color:rgb(241,241,241); }
.red { background-color:rgb(218,41,28); }
.content { max-width: 778px; }
.contentBlock { padding-bottom: 44px; }
.contentBlock p { max-width: 778px; }
.spalte-links { float: left; width: calc(100% - 450px); }
.spalte-rechts { float: right; width: 378px; }
.block,
.block_05,
.block_10,
.block_15,
.block_20,
.block_25,
.block_30,
.block_33,
.block_35,
.block_40,
.block_45,
.block_50,
.block_55,
.block_60,
.block_65,
.block_66,
.block_70,
.block_75,
.block_80,
.block_85,
.block_90,
.block_95,
.block_100 {
	float: left;
	height:auto;
}
.block {
	display: flex;
	flex-wrap: wrap;
	float: left;
	margin:0 -11px;
	width: calc(100% + 22px);
}
.block img {
	float: left;
	width: 100%;
}
.block > .block {
	margin: 0 11px;
	display: block;
}
.block.border {
	margin: 11px;
}
.block.half {
	margin:0 11px;
	width:calc(50% - 22px);
}
.block.third {
	margin:0 11px;
	width:calc(33.3333% - 22px);
}
.block.quarter {
	margin:0 11px;
	width:calc(25% - 22px);
}
.block.two-third {
	margin:0 11px;
	width:calc(66.6666% - 22px);
}
.block.three-quarter {
	margin:0 11px;
	width:calc(75% - 22px);
}
.block.full {
	margin:0 11px;
	width:calc(100% - 22px);
}
.block_05 { width:5%; }
.block_10 { width:10%; }
.block_15 { width:15%; }
.block_20 { width:20%; }
.block_25 { width:25%; }
.block_30 { width:30%; }
.block_33 { width:33.3333%; }
.block_35 { width:35%; }
.block_40 { width:40%; }
.block_45 { width:45%; }
.block_50 { width:50%; }
.block_55 { width:55%; }
.block_60 { width:60%; }
.block_65 { width:65%; }
.block_66 { width:66.6666%; }
.block_70 { width:70%; }
.block_75 { width:75%; }
.block_80 { width:80%; }
.block_85 { width:85%; }
.block_90 { width:90%; }
.block_95 { width:95%; }
.block_100 { width:100%; }

body {
	background-color: rgb(255,255,255);
}
header {
	position:fixed;
	float:left;
	top:0;
	left:0;
	padding:0;
	z-index:100;
	height: 200px;
	background: rgb(0,0,0);
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
}
header.view {
	background: rgb(127,131,134);
	height: 120px;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}
.logo {
	float: left;
	margin: 20px 0 0 65px;
	width: 400px;
}
.logo img {
	float: left;
	width: 100%;
}
nav {
	float: right;
	width: auto;
}
#nav-lang {
	margin-top : 45px;
	margin-right: 53px;
}

#nav-main {
	margin-top  : 45px;
	margin-right: 30px;
}

#navMobile {
	position:fixed;
	right: -100%;
	top:90px;
	width:100%;
	height:calc(100% - 90px);
	min-height:calc(100% - 90px);
	background:rgb(255,255,255);
	z-index:90;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	overflow: none;
	overflow-x: hidden;
	overflow-y: auto;
}
#navMobile.open {
    right:0;
}


#header-image,
#header-image-overlay {
	width: 100%;
	max-height: 600px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#header-image {
	position: fixed;
	top:0;
	left: 0;
    background-color: rgb(241,241,241);
}
#header-image::before,
#header-image-overlay::before {
	content: "";
	display: block;
	padding-top: 61.8vh;
}

#slider {
	height: 100%;
}
#slide-show {
	float: left;
	width: 100%;
	height: 100%;
}
#slide-show .teaser {
	position: absolute;
	bottom: 0;
	padding-top: 30px;
	width: 100%;
	height: 150px;
	background-color: rgba(0,0,0,0.35);
	z-index: 10;
}

#map,
#mediadirGoogleMap {
	width: 100%;
	height: 61.8vh;
	margin-bottom: 30px;
}

main {
	padding: 55px 0 55px 0;
	min-height: calc(100vh - 750px);
	background-color: rgb(255,255,255);
}
main.home {
	padding: 0;
}
main section {
	padding: 70px 0;
}
main section:nth-child(2n+0) {
	background-color:rgb(241,241,241);
}

main .grid {
	display: -ms-grid;
	display: grid;
	margin: 30px -11px;
	width: calc(100% + 22px);
	-ms-grid-columns: 33.3333% 33.3333% 33.3333%;
	grid-template-columns: 33.3333% 33.3333% 33.3333%;
}
main .grid-1 {
	grid-template-areas: "cell-3 cell-4 cell-1"
						 "cell-5 cell-2 cell-2"
						 "cell-6 cell-2 cell-2";
}
main .grid-2 {
	grid-template-areas: "cell-3 cell-4 cell-1"
						 "cell-2 cell-2 cell-5"
						 "cell-2 cell-2 cell-6";
}
main .grid-3 {
	grid-template-areas: "cell-3 cell-4 cell-5"
						 "cell-2 cell-2 cell-6"
						 "cell-2 cell-2 cell-1";
}
main .grid-4 {
	grid-template-areas: "cell-3 cell-4 cell-1"
						 "cell-5 cell-2 cell-7";
}

main .grid .item {
	margin: 11px;
}
main .grid .item-1 {
	grid-area: cell-1;
}
main .grid .item-2 {
	grid-area: cell-2;
}
main .grid .item-3 {
	grid-area: cell-3;
}
main .grid .item-4 {
	grid-area: cell-4;
}
main .grid .item-5 {
	grid-area: cell-5;
}
main .grid .item-6 {
	grid-area: cell-6;
}

main .grid-1 .item-1 {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}
main .grid-1 .item-2 {
	-ms-grid-column: 2;
	-ms-grid-row: 2;
	-ms-grid-column-span: 3;
	-ms-grid-row-span: 2;
}
main .grid-1 .item-3 {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
main .grid-1 .item-4 {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
main .grid-1 .item-5 {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
}
main .grid-1 .item-6 {
	-ms-grid-column: 1;
	-ms-grid-row: 3;
}

main .grid-2 .item-1 {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}
main .grid-2 .item-2 {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
	-ms-grid-column-span: 2;
	-ms-grid-row-span: 2;
}
main .grid-2 .item-3 {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
main .grid-2 .item-4 {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
main .grid-2 .item-5 {
	-ms-grid-column: 3;
	-ms-grid-row: 2;
}
main .grid-2 .item-6 {
	-ms-grid-column: 3;
	-ms-grid-row: 3;
}

main .grid-3 .item-1 {
	-ms-grid-column: 3;
	-ms-grid-row: 3;
}
main .grid-3 .item-2 {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
	-ms-grid-column-span: 2;
	-ms-grid-row-span: 3;
}
main .grid-3 .item-3 {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
main .grid-3 .item-4 {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
main .grid-3 .item-5 {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}
main .grid-3 .item-6 {
	-ms-grid-column: 3;
	-ms-grid-row: 2;
}

main .grid-4 .item-1 {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}
main .grid-4 .item-2 {
	-ms-grid-column: 3;
	-ms-grid-row: 2;
}
main .grid-4 .item-3 {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
main .grid-4 .item-4 {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
main .grid-4 .item-5 {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
}
main .grid-4 .item-7 {
	-ms-grid-column: 2;
	-ms-grid-row: 2;
}



main .grid .item-2 {
	background: rgb(127,131,134) url(../images/muster_2.jpg) center no-repeat;
	background-size: cover;
}
main .grid .item-3 {
	background: rgb(127,131,134) url(../images/muster_3.jpg) center no-repeat;
	background-size: cover;
}
main .grid .item-4 {
	background: rgb(127,131,134) url(../images/muster_4.jpg) center no-repeat;
	background-size: cover;
}
main .grid .item-5 {
	background: rgb(127,131,134) url(../images/muster_5.jpg) center no-repeat;
	background-size: cover;
}
main .grid .item-6 {
	background: rgb(127,131,134) url(../images/muster_6.jpg) center no-repeat;
	background-size: cover;
}

main .grid .item-2:before,
main .grid .item-3:before,
main .grid .item-4:before,
main .grid .item-5:before,
main .grid .item-6:before {
	content: "";
	display: block;
	padding-top: 56.1%;
}

footer {
	padding: 22px 0 66px 0;
	background-color: rgb(127,131,134);
}

#goUp {
	position:fixed;
	width: 50px;
	height: 50px;
	bottom:80px;
	right:0;
	overflow: hidden;
	z-index:9999;
	cursor:pointer;
	background: rgb(51,51,51) url("../images/icon_up.svg") center no-repeat;
	background-size: 38px 38px;
}

#service {
	position:fixed;
	top:50%;
	transform: translateY(-50%);
	right:-210px;
	z-index: 9999;
}

#overlay {
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(255,255,255,0.8);
	z-index:100000;
}



.imageFrame {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	float: left;
	background-color:rgba(127,131,134,1);
	background-position:center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.imageFrame:before {
	content: "";
	display: block;
	padding-top: 57%;
}


.responsive-iframe {
	position: relative;
	margin-top:0px;
	margin-bottom:20px;
	padding-bottom: 56.25%;
	padding-top: 0px;
	width:100%;
	height: 0;
	overflow: hidden;
}
.responsive-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.triage .block.half {
	padding: 33px;
	margin-bottom: 22px;
	border: 1px solid rgb(127,131,134);
	width: calc(50% - 90px);
}
.triage .block.half:hover {
	background-color: rgb(241,241,241);
}
/*-------------------------------------------------------------------------------------

  Copyright (c) 2014 Pixelzauber GmbH, Switzerland
  CSS definition for text

-------------------------------------------------------------------------------------*/

body {
	font-family: 'Muli', Arial, Helvetica, sans-serif;
	color: rgb(51,51,51);
	font-size: 18px;
	font-weight:300;
	text-align: left;
	-webkit-text-size-adjust:none;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: 'Muli', Arial, Helvetica, sans-serif;
	margin: 20px 0 20px 0;
	font-weight: 300;
	line-height: 1.2em;
}
h1, .h1 {
	font-size: 50px;
	margin-bottom: 22px;
}
h2, .h2 {
	font-size: 30px;
	margin-bottom: 12px;
}
.home h2 {
	font-size: 40px;
	margin-bottom: 22px;
}
h3, .h3 {
	font-size: 26px;
	margin-bottom: 10px;
}
h4, .h4 {
	font-size: 22px;
	margin-bottom: 10px;
}
h5, .h5 {
	font-size: 18px;
	margin-bottom: 10px;
}
h6, .h6 {
	font-weight: 400;
	font-size: 18px;
}
.first {
	margin-top: 0;
}
.center {
	text-align:center;
}


p {
	line-height: 1.3em;
	margin-bottom: 8px;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

a {
	font-weight: 400;
	color: rgb(0,0,0);
	text-decoration: none;
}
a:hover {
	color: rgb(127,131,134);
	text-decoration: none;
}
a.active {
}
a[name], a[name]:hover {
	color: rgb(51,51,51);
	text-decoration: none;
}

em {
	font-style: italic;
}

pre {
	padding: 10px 19px;
	margin: 18px 0 12px 0;
	line-height: 20px;
	width: auto;
	color: rgb(0,0,160);

	border: 1px solid rgb(200,200,200);
	background-color: rgb(240,240,240);

	overflow: auto;
	overflow-Y:hidden;
}

sup {
	line-height: 1.0em;
}

blockquote {
	padding: 15px 30px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight:400;
	font-style:italic;
	color: rgb(110,110,110);
}
blockquote:before {
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
	content: "\201C";
	font-size: 4em;
}
blockquote p {
	display: inline;
}
blockquote cite {
	margin-left: 40px;
	display: block;
	font-size: 1em;
	color: rgb(179,179,179);
}
blockquote cite:before {
	content: "\2014 \2009";
}
ol, ul {
	margin:0;
	padding: 0 0 15px 0;
	width:100%;
}
ul ul, ol ol {
	margin:0;
	padding: 0;
	width:100%;
}
ul li {
	list-style:none;
	text-align:left;
	line-height: 1.5em;
    margin: 0 0 0 20px;
}
ul li::before {
	float:left;
	content: "\25CF";
	color: rgb(0,0,0);
	margin:0 0 -10px -15px;
	display:block;
	font-size:0.7em;
}
ol li {
	margin-left: 30px;
	line-height: 1.5em;
    list-style: decimal;
}
ul.invert li a {
	color: rgb(51,51,51);
}
ul.invert li a:hover {
	color: rgb(190,30,60);
}
ul.none li {
	margin-left: 2px;
}
ul.none li::before {
	content: none;
	margin-left: 0;
}
@media print {
	ol {
		margin: 0 0 0 24px;
		padding:0;
		list-style: decimal;
	}
	ul {
		margin: 0 0 0 17px;
		padding:0;
		list-style: disc;
	}
	ol li,
	ul li {
		margin: 0;
		padding:0;
		background:none;
	}
}

b, strong {
	font-weight:900;
}

hr {
	padding:0 0 20px 0;
	margin: 20px 0 0 0;
    height: 0;
    border: 0;
	border-top: 1px dotted rgb(51,51,51);
}

table {
	margin-bottom: 10px;
	font-family: 'Muli', Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}
table th {
	border-bottom: 1px dotted rgb(0,0,0);
	font-weight: 400;
	padding: 2px 0 5px 0;
	text-align:left;
}
table td {
	padding: 6px 0 3px 0;
}
table.none, table.none td {
	padding: 0px;
	margin-bottom: 0px;
}
table.zebra thead tr {
	background-color: rgb(233,233,233);
}
table.zebra tbody tr:nth-child(even) {
	background-color: rgb(243,243,243);
}


.column {
	column-count: 2;
	column-gap: 30px;
}


/*-------------------------------------------------------------------------------------
  CSS Customising
-------------------------------------------------------------------------------------*/
.kursiv { font-style: italic; }


/*
.content a.link,
#content a.link {
	background: transparent url('../images/icon_system.png') 100% 0 no-repeat;
	padding-right: 22px;
}
.content a:hover.link,
#content a:hover.link {
	background: transparent url('../images/icon_system.png') 100% -100px no-repeat;
	padding-right: 22px;
}
*/

main a.pdf,
main a:hover.pdf {
	background: transparent url('../images/icon_system.png') 0 -197px no-repeat;
	padding-left: 20px;
	padding-right: 0;
}

main a.doc,
main a:hover.doc,
main a.docx,
main a:hover.docx {
	background: transparent url('../images/icon_system.png') 0 -297px no-repeat;
	padding-left: 20px;
	padding-right: 0;
}
main a.xls,
main a:hover.xls,
main a.xlsx,
main a:hover.xlsx {
	background: transparent url('../images/icon_system.png') 0 -397px no-repeat;
	padding-left: 20px;
	padding-right: 0;
}
main a.ppt,
main a:hover.ppt,
main a.pptx,
main a:hover.pptx {
	background: transparent url('../images/icon_system.png') 0 -497px no-repeat;
	padding-left: 20px;
	padding-right: 0;
}
main a.jpg,
main a:hover.jpg {
	background: transparent url('../images/icon_system.png') 0 -597px no-repeat;
	padding-left: 20px;
	padding-right: 0;
}
main a.zip,
main a:hover.zip {
	background: transparent url('../images/icon_system.png') 0 -697px no-repeat;
	padding-left: 20px;
	padding-right: 0;
}
main a.none,
main a:hover.none {
	background: none;
	padding-right: 0px;
	padding-left: 0px
}


p.button {
	padding:12px 0;
	margin: 0;
}
p.button a {
	display: block;
	margin: 0;
	padding:0 15px;
	width: calc(100% - 30px);

	color: rgb(255,255,255);
	font-weight: 900;
	line-height: 44px;

	background: rgb(218,41,28) url("../images/icon_forward.svg") center right no-repeat;
	background-size: 44px 44px;
}
p.button a:hover {
	color: rgb(255,255,255);
	background-color: rgb(0,0,0);
}
p.button a.icon_1::before,
p.button a.icon_2::before,
p.button a.icon_3::before {
	float: left;
	content: "";
	margin: 0 11px 0 -15px;
	padding: 0;
	width: 44px;
	height: 44px;
}

.button-kalkulator {
	float: left;
	margin-bottom: 40px;
	width: 100%;
}
.button-kalkulator a {
	display: block;
	padding: 100px 0 15px 0;
	text-align: center;
	color: rgb(255,255,255);
	background: rgb(127,131,134) url("../images/icon_rechner.svg") center 5px no-repeat;
	background: rgb(51,51,51) url("../images/icon_rechner.svg") center 5px no-repeat;
	background-size: 90px;
}
.button-kalkulator a:hover {
	background-color: rgb(0,0,0);
}




.headlines {
	float: left;
	margin: 25px 0;
	width: 100%;
}
.headlines .box {
	float: left;
	display: flex;
	flex-wrap: wrap;
	margin:25px 0;
	width:100%;
	height:auto;
	background-color: rgb(255,255,255);
}
.headlines .box .image,
.headlines .box .content {
	padding: 0;
	margin: 0;
	width: 50%;
	min-height: 100px;
}
.headlines .box .content {
	position: relative;
	padding: 30px;
	width: calc(50% - 60px);
}
.headlines .box .content .link {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.headlines .box .content .link a {
	display: block;
	height: 100%;
	background-image: url("../images/icon_plus.svg"), url("../images/icon_rectangle_gray.svg");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 44px;
	overflow: hidden;
	text-indent: -100px;
}
.headlines .box .image {
	float: right;
	background-color: rgb(204,204,204);
	background-position: center;
	background-size: cover;
}
.headlines .box .image:before {
	content: "";
	display: block;
	padding-top: 56%;
}
.headlines .box:nth-child(even) {
	flex-direction: row-reverse;
}

.home a,
.triage a,
section a {
	color: rgb(218,41,28);
}
.home a:hover,
.triage a:hover,
section a:hover {
	color: rgb(0,0,0);
}



footer {
	font-size: 0.9rem;
}
footer,
footer p,
footer h1,
footer h2,
footer h3,
footer h4,
footer a {
	color: rgba(255,255,255,1);
}
footer p {
	line-height: 1.5rem;
}
footer h4 {
	font-size: 20px;
	margin: 30px 0 12px 0;
}

footer a:hover {
	color: rgb(0,0,0);
}
footer img {
	margin: 0;
	width: 100%;
}

footer .foo1 ul {
	float: left;
	margin: 0 0 30px 0;
	width: 100%;
}
footer .foo1 ul li {
	display: none;
	float: left;
	margin: 0 11px;
	width: calc(25% - 22px);
}
footer .foo1 ul li.footerView {
	display: block;
}
/*
footer .foo1 > ul > li:last-child {
	display: none;
}
*/
footer .foo1 ul li::before {
	content: none;
}
footer .foo1 ul li ul {
	margin: 0;
	width: 100%;
}
footer .foo1 ul li ul li {
	margin: 0;
	width: 100%;
	display: block;
}
footer .foo1 ul li ul li a {
	float: left;
	line-height: 1.5rem;
}




#react-cookie-banner {
	font-size: 1.1em;
	font-weight: 400;
	color: rgb(255,255,255);
}
#react-cookie-banner a {
	color: rgb(255,255,255);
	text-decoration: underline;
}
#react-cookie-banner a:hover {
	color: rgb(200,200,200);
}
#react-cookie-banner .button {
	float: right;
	margin: 0;
	margin-top: -20px;
}
#react-cookie-banner .button a {
	text-decoration: none;
}


div#cookie-note a {
	color: rgb(255,255,255);
}
div#cookie-note a:hover {
	color: rgb(0,0,0);
}
div#cookie-note button {
	margin-top: 5px;
	font-family: 'Muli', Arial, Helvetica, sans-serif;
	color: rgb(51,51,51);
	font-size: 1.25rem;
	border: none;
	border-radius: 8px;
	padding:10px 30px;
	cursor: pointer;
	background-color: rgb(255,255,255);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
}
div#cookie-note button:hover {
	background-color: rgb(51,51,51);
	color: rgb(255,255,255);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0);
	box-shadow: 0px 0px 8px rgba(0,0,0,0);
}



/* --------------------------------------- */
/* Service / Direct Links                  */
/* --------------------------------------- */
#service ul {
	float: left;
	width: 260px;
}
#service ul li {
	float: left;
	margin: 1px 0;
	width: 260px;
	height: 50px;
	background: rgb(51,51,51);
	cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	background: rgb(51,51,51) url("../images/icon_next.svg") center right no-repeat;
	background-size: 38px 38px;
}
#service ul li:hover {
	background-color: rgb(0,0,0);
}
#service ul li.open {
	margin-left: -210px;
}
#service ul li::before {
	float: left;
	content: "";
	margin: 0;
	width: 50px;
	height: 50px;
}
#service ul li.icon_1::before {
	background: transparent url("../images/icon_rechner.svg") center no-repeat;
	background-size: 44px 44px;
}
#service ul li a {
	display: block;
	height: 100%;
	width: 100%;
	color: rgb(255,255,255);
	font-weight: 900;
	line-height: 50px;
}


/*-------------------------------------------------------------------------------------
  CSS DEFINITIONS FOR jcarousel
-------------------------------------------------------------------------------------*/
#slide-show .teaser p,
#slide-show .teaser h1,
#slide-show .teaser h2,
#slide-show .teaser h3,
#slide-show .teaser h4 {
	margin-top: 0;
	margin-bottom: 12px;
	color: rgb(255,255,255);
}

/* SLIDER */
ul.slides-container {
	display: none;
    position: relative;
	float: left;
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}
ul.slides-container li {
    position: relative;
	float: left;
	margin: 0;
	padding: 0;
	width:100%;
	height: 100%;
	z-index: 0;
	background-color: rgb(240,240,240);
	background-position: center;
	background-size: cover;
}
.slides-pagination {
  	position: absolute;
	margin: 0;
	padding: 0;
	bottom:20px;
	width: 100%;
	height: 16px;
	text-align: center;
	z-index: 3;
}
.slides-pagination a {
	padding: 0;
	margin: 0 4px 0 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgb(255,255,255);
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	text-indent: -100px;
}
.slides-pagination a.current {
	background-color: rgb(51,51,51);
}
.slides-navigation {
  	position: absolute;
	margin: 0;
	padding: 0;
	bottom:0px;
	left: calc(50% + 485px);
	width: 104px;
	height: 50px;
	text-align: center;
	z-index: 4;

}
.slides-navigation a {
	float: right;
	display: block;
	padding: 0;
	margin: 0 0 0 2px;
	width: 50px;
	height: 50px;
	overflow: hidden;
	text-indent: -500px;
}
.slides-navigation a.prev {
	float: left;
	background: rgb(51,51,51) url("../images/icon_prev.svg") center no-repeat;
	background-size: 38px 38px;
}
.slides-navigation a.next {
	float: left;
	background: rgb(51,51,51) url("../images/icon_next.svg") center no-repeat;
	background-size: 38px 38px;
}
.slides-navigation a:hover.prev,
.slides-navigation a:hover.next {
	background-color: rgb(0,0,0);
}

#sitemap li.sitemap_level_1 {
	padding-top: 22px;
}
#sitemap li.sitemap_level_1 a {
	font-weight: 700;
	font-size: 20px;
}
#sitemap li.sitemap_level_2 a {
	font-size: 18px;
}
#sitemap li.sitemap_level_2::before {
	content: none;
}
/*-------------------------------------------------------------------------------------

  CSS definition for navigation

-------------------------------------------------------------------------------------*/
nav ul {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
}
nav ul li {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
    list-style: none;
	display: inline;
}
nav ul li::before {
	content: none;
}
nav a {
	padding: 10px 20px;
	color: rgb(255,255,255);
	line-height: 1rem;
}
nav a.starter_active {
	font-weight: 700;
}

/* Lang Navigation */
#nav-lang a {
	position: relative;
	float   : left;
	padding: 7px;
	font-size: 20px;
	line-height: 1rem;
	font-weight: 300;
	color: rgba(255,255,255,0.8);
}
#nav-lang a:hover {
	color: rgba(255, 255, 255, 1);
}
#nav-lang a.active {
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}

/* Main Navigation */
#nav-main ul {
	font-size: 20px;
}

#nav-main ul li a {
	color: rgb(255,255,255);
}
#nav-main ul li:hover a {
	background-color: rgb(127,131,134);
}

#nav-main ul li ul {
	display: none;
	position: absolute;
	float: left;
	padding: 15px 0 0 0;
	margin: 0;
	left:0;
	top:20px;
	width: auto;
	height: auto;
}
#nav-main ul li ul li {
	margin: 0;
	padding: 0;
	left:0;
	height: auto;
	white-space: nowrap;
    width: 100%;
	clear:both;
	background-color: rgb(127,131,134);
}



#nav-main ul li ul li:first-child {
	padding-top: 10px;
}
#nav-main ul li ul li:last-child {
	padding-bottom: 15px;
}
#nav-main ul li ul li a {
	float: left;
	display: block;
	padding: 10px 20px;
    margin: 0;
	height: auto;
	width: auto;
	min-width:170px;
	background: none;
	text-align:left;
	font-size: 1rem;
	color: rgb(255,255,255);
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}
#nav-main ul li ul li a:hover {
	color:rgb(0,0,0);
}
#nav-main ul li ul li.active a {
	font-weight: 600;
}


.navIconX {
	position:absolute;
	overflow: hidden;
	margin: 0;
	padding: 0;
	top:10px;
	right:0px;
	width: 30px;
	height: 30px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;

	-webkit-transition: background 300ms;
	-moz-transition: background 300ms;
	-o-transition: background 300ms;
	transition: background 300ms;

	background-color:transparent;
}
.navIconX:hover,
.navIconX:focus {
	background-color:transparent;
	outline: none;
}
.navIconX span {
	display: block;
	position: absolute;
	top:14px;
	left:0;
	right:0;
	height: 2px;
	background:none;
}
.navIconX span:before,
.navIconX span:after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height:2px;
	background: rgb(255,255,255);
	content: "";
}
.navIconX span:before { top: 0; transform: rotate(45deg);}
.navIconX span:after { bottom: 0; transform: rotate(-45deg);}



/* --------------------------------------- */
/* Mobile Navigation                       */
/* --------------------------------------- */
.navMobileIcon {
	display:none;
	position:absolute;
	overflow: hidden;
	margin: 0;
	padding: 0;
	top:24px;
	right:20px;
	width: 40px;
	height: 40px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	-webkit-transition: background 300ms;
	-moz-transition: background 300ms;
	-o-transition: background 300ms;
	transition: background 300ms;
	background-color:transparent;
    outline: none;
    outline: 0;
}
.navMobileIcon:hover,
.navMobileIcon:focus {
	background-color:transparent;
    outline: none;
    outline: 0;
}
.navMobileIcon span {
	display: block;
	position: absolute;
	top:19px;
	left:0;
	right:0;
	height: 2px;
	background: rgb(255,255,255);
}
.navMobileIcon span:before,
.navMobileIcon span:after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height:2px;
	background: rgb(255,255,255);
	content: "";
}
.navMobileIcon span:before {
	top: -8px;
}
.navMobileIcon span:after {
	bottom: -8px;
}
.navMobileIconX span { transition: background 0s 0.3s;}
.navMobileIconX span:before, .navMobileIconX span:after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s;}
.navMobileIconX span:before { transition-property: top, transform;}
.navMobileIconX span:after { transition-property: bottom, transform;}
.navMobileIconX.is-active span { background: none;}
.navMobileIconX.is-active span:before { top: 0; transform: rotate(45deg);}
.navMobileIconX.is-active span:after { bottom: 0; transform: rotate(-45deg);}
.navMobileIconX.is-active span:before, .navMobileIconX.is-active span:after { transition-delay: 0s, 0.3s;}



#navMobile ul {
    position: relative;
    float: left;
	margin: 40px 0 0 0;
	padding:0;
	width:100%;
}
#navMobile ul li {
    position: relative;
    float: left;
	margin:0 5px;
	padding:0;
	width:100%;
    list-style: none;
	background-image:none;
}
#navMobile ul li::before {
	content: none;
}
#navMobile ul li a {
    position: relative;
    float: left;
	margin:0;
	padding: 15px 22px;
	width:calc(100% - 60px);
	display:block;
	font-size: 1.3em;
	text-decoration:none;
	color: rgb(51,51,51);
	font-weight:400;
}

/* Level 2 */
#navMobile ul li ul {
	padding:0;
	margin:0 0 20px 0;
	width:100%;
	border:none;
	display:none;
}
#navMobile ul li ul li {
	padding:0;
}
#navMobile ul li ul li a {
    position: relative;
    float: left;
	margin:0;
	padding: 5px 30px;
	width:calc(100% - 60px);
	display:block;
	font-size: 1.0em;
	font-weight:300;
	color: rgb(51,51,51);
	line-height: 1.2em;
}

/* Level 3 */
#navMobile ul li ul li ul li a {
	padding: 5px 0;
	font-size: 1.0em;
}

#navMobile a.starter_active,
#navMobile a.active {
	color: rgb(0,0,0);
	font-weight:700;
}


#navMobile ul li .openSubmenu {
    position:absolute;
    top:0;
    right:10px;
	margin:0;
    padding:0;
	width:80px;
	height:50px;
    text-align : center;
    cursor: pointer;
}

#navMobile ul li.level-1 > ul.menu {
    display : none;
}
#navMobile ul li.level-1.starter_active > ul.menu,
#navMobile ul li.level-2 > ul.menu {
    display : block;
}
#navMobile ul li.level-1 .plus {
	background: transparent url('../images/plus.png') right top no-repeat;
}
#navMobile ul li.level-1 .minus {
	background: transparent url('../images/minus.png') right top no-repeat;
}

/*-------------------------------------------------------------------------------------

  Copyright (c) 2014 Pixelzauber GmbH, Switzerland
  CSS definition for modules

-------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
  Formulare
-------------------------------------------------------------------------------------*/
form,
fieldset {
	float:left;
	margin: 20px 0;
	padding: 0;
	width: 100%;
}
fieldset {
	margin: 0 0 10px 0;
	width: 100%;
}
legend {
	float: left;
	margin: 0;
	padding: 22px 0;
	width: 100%;
	font-size: 30px;
	display: none;
}
label {
	float: left;
	margin: 0 11px;
	padding-top: 14px;
	width: calc(30% - 22px);
}
.form-group {
	float: left;
	margin: 0 -11px;
	width: calc(100% + 22px);

}
.group {
	float: left;
	margin: 0;
	padding: 10px 0;
	width: 70%;
}
.required {
	color: rgb(190,0,0);
}
.contactFormClass_label {
	float: left;
	padding: 11px 0;
	margin: 0 11px 5px calc(30% + 11px);
	width: calc(70% - 22px);
	line-height: 1.3em;
}
.contactFormGroup {
	float: left;
	margin: 0;
	padding: 0 0 10px 0;
	width: 70%;

}
.contactFormGroup.error {
	outline: none !important;
}
.checkbox {
	float: left;
	margin: 0;
	padding: 10px 0;
	width: 70%;
}
.radio {
	float: left;
	margin: 0;
	padding: 10px 0 0 0;
	width: 100%;

}
.contactFormGroup .checkbox {
	width: 100%;
	padding-bottom: 0;
}
.is_required {
	color: rgb(190,30,60);
}
select,
input,
textarea {
	float:left;
	margin: 0 11px 5px 11px;
	padding: 10px 15px;
	width: calc(70% - 22px);
	height:46px;
	border: 1px solid rgb(241,241,241);
	background-color: rgb(241,241,241);
	outline: none;

	font-family: 'Muli', Arial, Helvetica, sans-serif;
	font-weight:400;
	font-size: 1.1em;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
select {
	padding-right: 4px;
	background-image: url('../images/bg_select.png');
	background-position: right center;
	background-repeat: no-repeat;
}
select::-ms-expand {
    display: none;
}
select:required:invalid {
	color: rgb(179,179,179);
}
select option[value=""][disabled] {
 display: none;
}
select option,
select:required:invalid option {
 color: rgb(51,51,51);
}
textarea {
	padding-top:8px;
	height:124px;
}
input[type=text],
input[type=number],
input[type=url],
input[type=tel],
input[type=email],
input[type=password],
select,
textarea {
	-webkit-padding-before: 2px;
	-webkit-padding-after: 2px;
}

::-webkit-input-placeholder {
   color: rgb(242,242,242);
}
:-moz-placeholder {
   color: rgb(242,242,242);
   opacity:  1;
}
::-moz-placeholder {
   color: rgb(242,242,242);
   opacity:  1;
}
:-ms-input-placeholder {
   color: rgb(242,242,242) !important;
}
::-ms-input-placeholder {
   color: rgb(242,242,242);
}
::placeholder {
   color: rgb(242,242,242);
}
select.placeholder {
   color: rgb(242,242,242);
}


input.error,
textarea.error {
	border-color: rgb(190,30,60) !important;
}


input[type=submit],
input[type=button],
input[type=reset] {
	float: left;
	padding: 10px 0;
	margin-top: 22px;
	cursor: pointer;
	color: rgb(255,255,255);
	border: 1px solid rgb(51,51,51);
	background-color: rgb(51,51,51);
	width: calc(35% - 22px);
	height: 46px;
}
input[type=submit] {
	margin-left: calc(30% + 11px);
}
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover {
	border: 1px solid rgb(0,0,0);
	background-color: rgb(0,0,0);
}
input[type=reset] {
	display: none;
}

.container {
	display: block;
	position: relative;
	margin: 0 11px 5px 11px;
	padding: 4px 0 0 40px;
	width: calc(100% - 22px);
	height: 24px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.container input {
	position: absolute;
	opacity: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	border: none;
	width: 0;
	height: 0;
}
.checkmark,
.radiomark {
	position: absolute;
	top: -1px;
	left: 0;
	height: 26px;
	width: 26px;
	border: 1px solid rgb(242,242,242);
	background-color: rgb(242,242,242);
}
.error + .checkmark,
.error .checkmark,
.error .radiomark {
	border: 1px solid rgb(190,30,60) !important;
}
.radiomark {
	border-radius: 50%;
}
.checkmark:after,
.radiomark:after {
	content: "";
	position: absolute;
	display: none;
}
.container:hover input ~ .checkmark:after,
.container input:checked ~ .checkmark:after,
.container:hover input ~ .radiomark:after,
.container input:checked ~ .radiomark:after {
 	display: block;
}
.container:hover .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid rgb(222,222,222);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.container .checkmark:after,
.container:hover input:checked ~ .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid rgb(0,0,0);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.container:hover .radiomark:after {
	top: 6px;
	left: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgb(230,230,230);
}
.container .radiomark:after,
.container:hover input:checked ~ .radiomark:after {
	top: 6px;
	left: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgb(0,0,0);
}

form p {
	/* Pflichtfeld */
	float: left;
	margin: 15px;
	margin-left: calc(30% + 15px);
	width: calc(70% - 30px);
}


/*-------------------------------------------------------------------------------------
  CSS DEFINITIONS FOR CONTACT MODULE
-------------------------------------------------------------------------------------*/
#contactFormError {
    display: none;
    width: 100%;
    padding: 14px 0 0 0;
    color: rgb(190,30,60);
	font-weight: 400;
}


#contactFormFieldId_96 legend {
	display: block;
}



/*-------------------------------------------------------------------------------------
  captcha
-------------------------------------------------------------------------------------*/
#captcha {
	float: left;
	margin: 0;
	padding: 0;
	width: 35%;
	min-width: 420px;
}
#contactFormCaptchaError {
	float: left;
	margin: 0 11px;
	padding: 14px 0 0 0;
	width: calc(100% - 22px);
    color: rgb(190,30,60);
	font-weight: 400;
}
#coreCaptchaLabel {
	float: left;
	padding-bottom: 10px;
	width: calc(100% - 22px);
}
#coreCaptchaCode {
	width: calc(50% - 22px);
	height: 62px;

	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 1.5rem;
	text-align: center;
	letter-spacing: 3px;
}
#coreCaptchaImage {
	margin: 0 11px;
	width: calc(50% - 22px);
}




/*-------------------------------------------------------------------------------------
  loader
-------------------------------------------------------------------------------------*/
/*
<div class="loader">
	<div class="rect1"></div>
	<div class="rect2"></div>
	<div class="rect3"></div>
	<div class="rect4"></div>
	<div class="rect5"></div>
</div>
*/
.loader {
	position: relative;
	margin: 0 auto;
	top: 35%;
	width: 60px;
	height: 70px;
	text-align: center;
}
.loader > div {
	background-color: rgb(200,0,0);
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: loader 1.2s infinite ease-in-out;
	animation: loader 1.2s infinite ease-in-out;
}
.loader .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.loader .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
.loader .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
.loader .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}
@-webkit-keyframes loader {
	0%, 60%, 100% { -webkit-transform: scaleY(0.4) }
	30% { -webkit-transform: scaleY(1.0) }
}
@keyframes loader {
	0%, 60%, 100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}  30% {
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}




/*-------------------------------------------------------------------------------------
  News
-------------------------------------------------------------------------------------*/
.news {
	float: left;
	padding: 33px 0;
	margin: 0 -11px;
	width: calc(100% + 22px);
}
.news-content {
	float: left;
	margin: 0 11px;
	width: calc(50% - 22px);
}
.news-image {
	float: left;
	margin: 0 11px;
	width: calc(50% - 22px);
}
.news-image .image {
	float: right;
	padding: 0;
	margin: 0;
	width: 100%;
	background-color: rgb(241,241,241);
	background-position: center;
	background-size: cover;
}
.news-image .image:before {
	content: "";
	display: block;
	padding-top: 58%;
}




/*-------------------------------------------------------------------------------------
  Referenzen
-------------------------------------------------------------------------------------*/
.references {
	float: left;
	padding: 0;
	margin: 0 -11px;
	width: calc(100% + 22px);
}
.references .item {
	position: relative;
	float: left;
	margin: 11px;
	width: calc(33.33333% - 22px);
	background-color: rgb(241,241,241);
	background-position: center;
	background-size: cover;
}
.references .item:before {
	content: "";
	display: block;
	padding-top: 58%;
}
.references .item .overviewContent {
	position: absolute;
	display: block;
	padding: 33px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: rgb(255,255,255);
	background-color: rgba(0,0,0,0.5);
	opacity: 0;
	transition: all 0.3s ease-in-out;
}
.references .item:hover .overviewContent {
	opacity: 1;
}
.references .item .moreContent {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	background: rgb(51,51,51) url('../images/icon_plus.svg') center no-repeat;
	background-size: 44px 44px;
}
.references .item .moreContent:hover {
	background-color: rgb(0,0,0);
}
.references .item .moreContent a {
	display: block;
	height: 100%;
	width: 100%;
}


/*-------------------------------------------------------------------------------------
  MediaDir
-------------------------------------------------------------------------------------*/
.mediadir-filter select {
	width: calc(50% - 22px);
}

.mediadir-filter input {
	width: calc(50% - 22px);
	margin: 0 11px 5px 11px;
}

#mediadir .block.half,
#mediadir .block.quarter {
	margin: 11px;
}

/*-------------------------------------------------------------------------------------

  CSS definition for responsive Designe

-------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1480px) {

	.logo {
		margin-left: 25px;
	}

	#nav-lang {
		margin-right: 30px;
	}

	#nav-main {
		margin-right: 20px;
	}

	nav a {
		padding: 10px;
	}

	#nav-lang a {
		padding: 7px 4px;
	}

}

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

	.logo {
		margin-top: 25px;
		width     : 300px;
	}

	#nav-main ul {
		font-size: 17px;
	}

	#nav-lang a {
		font-size: 17px;
	}

	nav a {
		padding: 8px;
	}

	#nav-lang a {
		padding: 4px;
	}

	.slides-navigation {
		left : inherit;
		right: 0;
	}


}

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

	.logo {
		margin-left: 12px;
	}

	.spalte-links,
	.column-left {
		width: calc(66.6666% - 22px);
	}

	.spalte-rechts,
	.column-right {
		width: calc(33.3333% - 22px);
	}

	#nav-main ul {
		font-size: 16px;
	}

	#nav-lang {
		margin-right: 15px;
	}

	#nav-lang a {
		font-size: 16px;
	}
}

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


	.desktop,
	#nav-main,
	footer .foo1 {
		display: none;
	}

	.mobile,
	.navMobileIcon {
		display: block;
	}

	.inner {
		width: calc(100% - 40px);
	}

	header,
	header.view {
		background        : rgb(127, 131, 134);
		height            : 90px;
		-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
		-moz-box-shadow   : 0px 0px 10px rgba(0, 0, 0, 0.8);
		box-shadow        : 0px 0px 10px rgba(0, 0, 0, 0.8);
	}

	.logo {
		margin-left: 12px;
		margin-top : 20px;
		width      : 260px;
	}

	#nav-main {
		margin-right: 20px;
	}

	#nav-lang {
		margin: 32px 100px 0 0;
	}

	#nav-lang a {
		font-size: 20px;
	}

	main .grid {
		margin               : 0 -11px;
		-ms-grid-columns     : 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}

	main .grid-1,
	main .grid-2,
	main .grid-3 {
		grid-template-areas: "cell-5 cell-6"
			"cell-1 cell-2";
	}

	main .grid-4 {
		grid-template-areas: "cell-5 cell-4"
			"cell-1 cell-2";
	}

	main .grid .item-3,
	main .grid .item-4,
	main .grid .item-7 {
		display: none;
	}

	main .grid-4 .item-4 {
		display: block;
	}

	main .grid-1 .item-1,
	main .grid-2 .item-1,
	main .grid-3 .item-1,
	main .grid-4 .item-1 {
		-ms-grid-column     : 1;
		-ms-grid-row        : 2;
		-ms-grid-row-span   : 1;
		-ms-grid-column-span: 1;
	}

	main .grid-1 .item-2,
	main .grid-2 .item-2,
	main .grid-3 .item-2,
	main .grid-4 .item-2 {
		-ms-grid-column     : 2;
		-ms-grid-row        : 2;
		-ms-grid-row-span   : 1;
		-ms-grid-column-span: 1;
	}

	main .grid-1 .item-5,
	main .grid-2 .item-5,
	main .grid-3 .item-5,
	main .grid-4 .item-5 {
		-ms-grid-column     : 1;
		-ms-grid-row        : 1;
		-ms-grid-row-span   : 1;
		-ms-grid-column-span: 1;
	}

	main .grid-1 .item-6,
	main .grid-2 .item-6,
	main .grid-3 .item-6,
	main .grid-4 .item-4 {
		-ms-grid-column     : 2;
		-ms-grid-row        : 1;
		-ms-grid-row-span   : 1;
		-ms-grid-column-span: 1;
	}

	footer .foo2 .block.quarter {
		width: calc(33.3333% - 22px);
	}

	footer .foo2 .block.quarter:last-child {
		display: none;
	}

}

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

	.spalte-links,
	.column-left {
		width: 100%;
	}

	.spalte-rechts,
	.column-right {
		float     : left;
		margin-top: 44px;
		width     : 100%;
	}

	.references .item {
		width: calc(50% - 22px);
	}

	.triage .block.half {
		width: calc(100% - 90px);
	}



}

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

	main .grid {
		margin               : 0 -11px;
		-ms-grid-columns     : 1fr;
		grid-template-columns: 1fr;
	}

	main .grid-1,
	main .grid-2,
	main .grid-3,
	main .grid-4 {
		grid-template-areas: "cell-2"
			"cell-1";
	}

	main .grid .item-4,
	main .grid .item-5,
	main .grid .item-6 {
		display: none;
	}

	main .grid-1 .item-1,
	main .grid-2 .item-1,
	main .grid-3 .item-1,
	main .grid-4 .item-1 {
		-ms-grid-column     : 1;
		-ms-grid-row        : 1;
		-ms-grid-row-span   : 1;
		-ms-grid-column-span: 1;
	}

	main .grid-1 .item-2,
	main .grid-2 .item-2,
	main .grid-3 .item-2,
	main .grid-4 .item-2 {
		-ms-grid-column     : 1;
		-ms-grid-row        : 2;
		-ms-grid-row-span   : 1;
		-ms-grid-column-span: 1;
	}

	.references .item {
		width: calc(100% - 22px);
	}

	footer {
		padding: 22px 0;
	}

	footer .foo2 .block.quarter {
		margin-bottom: 22px;
		width        : calc(100% - 22px);
	}

	.block_05,
	.block_10,
	.block_15,
	.block_20,
	.block_25,
	.block_30,
	.block_33,
	.block_35,
	.block_40,
	.block_45,
	.block_50,
	.block_55,
	.block_60,
	.block_65,
	.block_66,
	.block_70,
	.block_75,
	.block_80,
	.block_85,
	.block_90,
	.block_95,
	.block_100 {
		margin: 0;
		width : 100%;
	}

	.block,
	.block.half,
	.block.third,
	.block.two-third,
	.block.quarter,
	.block.three-quarter,
	.block.fifth,
	.block.two-fifth,
	.block.three-fifth,
	.block.four-fifth,
	.block.full,
	.block.addr,
	.block.form {
		margin: 0;
		width : 100%;
	}

	.triage .block.half {
		padding: 22px;
		margin : 0 0 22px 0;
		width  : 100%;
	}

	/* Formular */
	fieldset {
		margin-bottom: 40px;
	}

	.contactFormClass_label {
		margin: 0 11px;
		width : calc(100% - 22px);
	}

	label {
		padding-bottom: 4px;
		width         : calc(100% - 22px);
	}

	legend {
		margin-bottom: 20px;
		font-size    : 22px;
	}

	select,
	.mediadir-filter select,
	input,
	input[type=text],
	input[type=submit],
	input[type=button],
	input[type=reset],
	textarea {
		margin: 5px 11px;
		width : calc(100% - 22px);
	}

	input[type=submit] {
		margin-left: 11px;
	}

	#coreCaptchaImage {
		margin-top: 5px;
	}

	div#cookie-note {
		bottom: 0;
		right : 0;
		left  : 0;
		width : auto;
	}

	#slide-show .teaser {
		padding-top: 20px;
	}


	h1,
	.h1,
	#slide-show .teaser h1 {
		font-size: 30px;
	}

	h2,
	.h2 {
		font-size    : 26px;
		margin-bottom: 12px;
	}

	.home h2 {
		font-size    : 30px;
		margin-bottom: 15px;
	}

	h3,
	.h3 {
		font-size: 20px;
	}

	h4,
	.h4 {
		font-size: 20px;
	}

	h1,
	.h1,
	#slide-show .teaser h1,
	h2,
	.h2,
	.home h2,
	h3,
	.h3,
	h4,
	.h4 {
		-webkit-hyphens: auto;
		-moz-hyphens   : auto;
		hyphens        : auto;
	}

}

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

	.logo {
		margin-top: 22px;
		width     : 210px;
	}

	#nav-lang {
		margin: 32px 75px 0 0;
	}

	#nav-lang a {
		font-size: 18px;
	}

}