@charset "utf-8";

@font-face
{
	font-family:TiemposText;
	src:url("/fonts/tiempos-text-regular.woff2") format("woff2");
}

@font-face
{
	font-family:TiemposTextBold;
	src:url("/fonts/tiempos-text-bold.woff2") format("woff2");
}

@font-face
{
	font-family:TiemposTextItalic;
	src:url("/fonts/tiempos-text-regular-italic.woff2") format("woff2");
}

@font-face
{
	font-family:"MDIO0.4";
	src:url("/fonts/MDIO0.4-Regular.woff2") format("woff2"),url("/fonts/MDIO0.4-Regular.woff") format("woff");
}

@font-face
{
	font-family:"MDIO0.4Bold";
	src:url("/fonts/MDIO0.4-Bold.woff2") format("woff2"),url("/fonts/MDIO0.4-Bold.woff") format("woff");
}

@font-face
{
	font-family:"MDIO0.4Italic";
	src:url("/fonts/MDIO0.4-Italic.woff2") format("woff2"),url("/fonts/MDIO0.4-Italic.woff") format("woff");
}
	
html, body
{
	margin:0;
	background-color:#fafdfd;
	font-family:TiemposText;
	font-size:24px;
	line-height:40px;
	color:#002629;
	font-variant-numeric:oldstyle-nums;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

#header
{
	position:relative;
}

#header, #main
{
	max-width:940px;
	padding:0 20px;
	margin:0 auto;
}

#breadcrumb
{
	font-family:"MDIO0.4";
	font-size:14px;	
	line-height:20px;
	margin:20px 0 60px;
}

#breadcrumb span
{
	color:#a83d72;
}

#signet
{
	margin:0 0 150px -41px;
}

#signet svg
{
	width:379px;
	max-width:calc(100% - 60px);
}

@media (max-width:1040px)
{
	#signet
	{
		margin-left:0;
		margin-bottom:100px;
	}

	#breadcrumb
	{
		margin:20px 0 40px;
	}
}

#mitmachen
{
	height:54px;
	width:54px;
	font-size:14px;
	font-family:"MDIO0.4";
	line-height:56px;
	position: absolute;
    top:67px;
    right:20px;
	border:1px solid #008089;
    transition: all 0.3s ease;
	white-space:nowrap;
}

@media (max-width:1040px)
{
	#mitmachen
	{
		top: -9px;
		width: 30px;
		height: 30px;
		line-height: 30px;
	}
	#mitmachen svg
	{
		left: 6px;
	}
}

#mitmachen a
{
	display:block;
	text-decoration:none;
}

#mitmachen span
{
	width:0;
	height:0;
	overflow:hidden;
	display:inline-block;
	margin-left:35px;
}

#mitmachen.active, #mitmachen.over
{
	width:146px;
}

#mitmachen.active
{
	color:white;
	background-color:#008089;
}

#mitmachen.over
{
	color:#008089;
}

#mitmachen.active span
{
	width:76px;
	height:32px;
}

#mitmachen.over span
{
	width:76px;
	height:32px;
	transition-delay:0.3s;
}

#mitmachen svg
{
	height:22px;
	width:16px;
	vertical-align:middle;
	left: 19px;
    position: relative;
}

#mitmachen svg .active
{
	display:none;
}

#mitmachen.active svg .active
{
	display:block;
}

#mitmachen.active svg .inactive
{
	display:none;
}

@media (max-width:1040px)
{
	#mitmachen
	{
		top: -8px;
		width: 30px;
		height: 30px;
		line-height: 30px;
	}
	#mitmachen svg
	{
		left: 6px;
	}

	#mitmachen span
	{
		margin-left:17px;
	}
	#mitmachen.active span, #mitmachen.over span
	{
		height:19px;
	}
	#mitmachen.active, #mitmachen.over
	{
		width:116px;
	}
}

form
{
	font-size:0;
}

input
{	
	margin:0;	
	font-family:"MDIO0.4";
	font-weight:normal;
	font-size:24px;
	line-height:59px;
	box-sizing:border-box;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
	border-radius:0;	
}

input:placeholder
{
	color:#008089;
}

input::-webkit-input-placeholder
{
	color:#008089;
}

input:-ms-input-placeholder
{
	color:#008089;
}

input::-moz-placeholder
{
	color:#008089;
	opacity:1;
}

input::-webkit-search-cancel-button
{
    -webkit-appearance:none;
}

input::-ms-clear
{
    width: 0;
    height: 0;
}

#honeypott
{
	display:none;
}

#mail
{
	padding:0 17px;
	border:solid 1px #e6e9e9;
	background-color:#fff;
	width:calc(100% - 140px);
	color:#002629;
	margin:15px 0 10px;
}

#submit
{
	color:white;
	background-color:#008089;
	border-style:none;
	width:140px;
	cursor:pointer;
	border:1px solid #e6e9e9;
	padding:0;
}

#submit.sent
{
	background-image:url(/img/eMail-gesendet.svg);
    color:transparent;
    background-repeat:no-repeat;
    background-position:center;
    background-size:36px 26px;
	cursor:not-allowed;
}

.small
{
	font-family:"MDIO0.4";
	font-size:14px;
	line-height:20px;
	margin-left:21px;
}

#contact
{
	width:620px;
	max-width:100%;
	display:inline-block;
	margin-top:125px;
	vertical-align:top;
}

#comingsoon
{
	display:inline-block;
	vertical-align:top;
	margin-top:125px;
}

#footer
{
	margin-bottom:80px;
}

#footer #logos
{
	background-color:white;
	margin:72px 0 20px;
	padding:30px 0 80px;
}

#footer #logos .inside
{
	width:940px;
	max-width:calc(100% - 40px);
	padding:0 20px;
	margin:0 auto;
}

#footer #logos svg
{
	width:210px;
	margin-right:110px;
	vertical-align:top;
}

#footer #logos a + a svg
{
	width:240px;
	margin-right:0;
	margin-top:3px;
}

@media (max-width:607px)
{
	#footer #logos svg
	{
		margin-right:0;
	}
	
	#footer #logos a + a svg
	{
		margin-top:25px;
	}
}

#footernav
{
	font-family:"MDIO0.4";
	font-size: 22px;
	line-height:40px;
	max-width:940px;
	padding:0 20px;
	margin:0 auto;
}

#footernav a, #footernav span
{
	margin-right:50px;	
}

h2, .registry h3
{
	margin:0;	
	font-family:"MDIO0.4Bold";
	font-weight:normal;
	font-size:24px;
	line-height:36px;
}

h2, h2 + p, .registry p + h2, .registry p
{
	display:inline;
}

#contact h2, #contact h2 + p, #comingsoon h2, #comingsoon h2 + p, .imp h2, .registry h2 + p
{
	display:block;
}

.ds h2
{
	margin-bottom:40px;
	display:block;
}

h3
{
	margin:0;	
	font-family:"MDIO0.4";
	font-weight:normal;
	font-size:24px;
	line-height:36px;	
}

p, ul, ol
{
	margin:0;
}

.ds p
{
	margin:40px 0;
}

.ds h3 + p
{
	margin-top:0;
}

a
{
	color:#008089;
	text-underline-offset:3px;
}

a:hover
{
	text-decoration:none;
}

strong
{
	font-family:TiemposTextBold;
	font-weight:normal;
}

@media (max-width:823px)
{
	#comingsoon
	{
		margin-top:60px;
	}
}

@media (max-width:780px)
{	
	html, body, h2, h3
	{
		font-size:18px;
		line-height:28px;
	}	
	
	h2, h3
	{
		line-height:22px;
	}

	input
	{
		font-size: 16px;
		line-height: 39px;
	}
	
	#mail
	{
		width:calc(100% - 100px);
	}
	
	#submit
	{
		width:100px;
	}

	#submit.sent
	{
		background-size:18px 13px;
	}

	.small
	{
		margin-left:0;
	}
	
	#footernav
	{
		font-family:"MDIO0.4";
		font-size: 16px;
		line-height:40px;
	}
	
	#footernav a, #footernav span
	{
		margin-right:25px;
	}
}

@media (max-width:620px)
{	
	#footer #logos svg
	{
		width: 105px;
		margin-right:30px;
	}
	
	#footer #logos a + a svg
	{
		width: 120px;
		margin-top:0;
	}
}

@media (max-width:350px)
{	
	
	#footernav a, #footernav span
	{
		margin-right:0;
		display:block;
	}
}