html {
	font-size: 10px;
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll
}
img {
	display: block;
	max-width: 100%;
	max-height: 100%
}
.inkompatibel {
	margin: 10px 0 10px 0;
	font-size: 1.6em;
	text-align: center;
	color: red
}
@supports (display: grid) {
.inkompatibel {
display:none
}
}
body {
	min-height: 100vh;
	background: #E9E9E9
}
.wrapper {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	min-height: 100vh;
	max-width: 1300px;
	margin: 0 auto;
	background: #fff
}
header {
	flex-grow: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 10px;
	width: 100%;
	background: #0865A2;
	box-shadow: 0 -10px 0 0 #333 inset
}
@media screen and (min-width: 670px) {
header {
	display: grid;
	grid-template-columns: 1fr 100px auto 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: ".   logo  h1  ."  ".   logo  h2  ."  "nav nav   nav nav"
}
}
header .header__logo {
	flex-basis: 40%;
	float: right;
	grid-area: logo;
	max-height: 9.4em;
	margin-bottom: 0.6em
}
header .header__logo img {
	padding-right: 20px
}
@media screen and (min-width: 670px) {
@supports (display: grid) {
header .header__logo {
max-height:12em;
margin-bottom:0
}
}
}
header .header__title__h1 {
	flex-basis: 60%;
	grid-area: h1;
	font-size: 4.8em;
	font-family: 'Rubik Mono One', sans-serif;
	color: #d76d1c;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white
}
header .header__title__h2 {
	flex-basis: 100%;
	grid-area: h2;
	text-align: center;
	font-size: 2.6em;
	font-family: 'Roboto', sans-serif;
	color: #E9E9E9
}
@media screen and (min-width: 670px) {
@supports (display: grid) {
header .header__title__h2 {
text-align:left
}
}
}
header .header__nav {
	flex-basis: 100%;
	grid-area: nav;
	width: 100%
}
header .header__nav ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 10px;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
	background-color: #333
}
header .header__nav li a {
	padding: 14px 16px;
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 1.6em;
	font-family: 'Roboto', sans-serif
}
header .header__nav li a:hover {
	background-color: #111
}
header .header__nav--active {
	background-color: #4CAF50
}
main {
	flex-basis: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	align-self: stretch;
	padding: 10px 10px 10px 10px;
	width: calc(100% - 20px);
	height: 100%;
	font-size: 1.6em;
	background: #fff
}
footer {
	flex-grow: 0;
	justify-self: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 7px 10px 7px 10px;
	width: calc(100% - 20px);
	font-size: 1.6em;
	background: #333;
	border-bottom: 2px solid #333;
	color: #b9b5b5
}
.footer__zeiten {
	flex-basis: 100%;
	color: #b9b5b5;
	text-decoration: none;
	text-align: center
}
@media screen and (min-width: 860px) {
.footer__zeiten {
	flex-basis: auto
}
}
.footer__impressum {
	flex-basis: 40%;
	color: #b9b5b5;
	text-decoration: none;
	margin-right: 30px;
	text-align: center
}
@media screen and (min-width: 860px) {
.footer__impressum {
	flex-basis: auto;
	margin-left: 80px
}
}
.footer__copyright {
	flex-basis: 40%;
	text-align: center
}
@media screen and (min-width: 860px) {
.footer__copyright {
	flex-basis: auto;
	margin-left: 80px
}
}
.social, .info {
	position: absolute;
	left: 0;
	top: 3px
}
.social a, .info a {
	position: relative;
	height: 50px;
	line-height: 50px;
	width: 50px;
	color: #fff;
	display: block;
	font: 16px "Open Sans", sans-serif;
	text-align: center
}
.social a span, .info a span {
	position: absolute;
	line-height: 50px;
	width: 120px;
	text-align: center;
	display: none
}
.social a:hover span, .info a:hover span {
	display: inline
}
.social a[class*="facebook"], .info a[class*="facebook"], .social a[class*="facebook"]:hover, .info a[class*="facebook"]:hover, .social a[class*="facebook"] span, .info a[class*="facebook"] span {
	background: #3b5998
}
.social a[class*="facebook"]::before, .info a[class*="facebook"]::before {
	content: url("../img/facebook.svg");
	color: white
}
.social a[class*="maps"], .info a[class*="maps"], .social a[class*="maps"]:hover, .info a[class*="maps"]:hover, .social a[class*="maps"] span, .info a[class*="maps"] span {
	background: #189c45
}
.social a[class*="maps"]::before, .info a[class*="maps"]::before {
	content: url("../img/globe.svg");
	color: white
}
.info {
	left: auto;
	right: -300px;
	position: fixed;
	overflow: visible;
	height: 350px;
	line-height: 350px;
	width: 350px
}
.info a span {
	left: -120px
}
.social a p, .info a p {
	position: absolute;
	margin: 0;
	width: 300px;
	right: 0;
	border: 2px solid black;
	display: none
}
.social a:hover p, .info a:hover p {
	display: block
}
.info a[class*="info"], .info a[class*="info"]:hover, .info a[class*="info"] span {
	background: #babd12
}
.info a[class*="info"]::before {
	content: url("../img/info.svg");
	color: white
}