:root {
	--weiss:        #FFFFFF;
	--schwarz: 	    rgb(66, 66, 66);
	--hellgrau:     rgb(231, 231, 231);
	--blau:         rgb(0, 105, 163);
	--hellgruen:	rgb(0, 142, 72);
	--hellblau: 	rgb(176, 229, 255);
	--rot:       	rgb(226, 28, 44);
	--dunkelgruen:  rgb(255, 153, 0);
	--gruen:        rgb(0, 142, 72);
	--hellgruen:    rgb(170, 209, 19);
}

@font-face {
	font-family: 'open_sans';
	src: url('OpenSans.woff2') format('woff2'),
	url('OpenSans.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'open_sans_italic';
	src: url('OpenSansLight-Italic.woff2') format('woff2'),
		url('OpenSansLight-Italic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
    font-family: 'open_sans_bold_italic';
    src: url('/css/webfonts/OpenSans-BoldItalic.woff2') format('woff2'),
        url('/css/webfonts/OpenSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'open_sans_bold';
    src: url('/css/webfonts/OpenSans-Extrabold.woff2') format('woff2'),
        url('/css/webfonts/OpenSans-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'open_sans_condensed_bold';
    src: url('/css/webfonts/OpenSans-CondensedBold.woff2') format('woff2'),
        url('/css/webfonts/OpenSans-CondensedBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html { 
	height: 100%; 
	width: 100%;
}

body {
	color: var(--schwarz);
	background-color: #f3f3f3;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: "open_sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
  	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas: 
	"header"
	"main"
	"footer";
}

header {
	grid-area: header;
}

#main {
	grid-area: main;
}

footer {
	grid-area: footer;
}

header {
	display: block;
	box-sizing: border-box;
	min-width: 100%;
	max-width: 100%;
	height: auto;
	position: relative;
	padding-top: 3px;
	padding-bottom: 20px;
	margin: 0 auto;
	color: var(--weiss);
	background-color: var(--blau);
}

header #topnavi {
	color: var(--weiss);
	box-sizing: border-box;
	text-align: center;
	text-transform: uppercase;
}

header #logo {
	position: relative;
	margin: 0 auto;
}

header p {
	margin: 0;
	color: var(--weiss);
}

header #slogan {
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	color: var(--weiss);
	margin-top: 10px;
	padding-bottom: 10px;
}

#mobilswitch {
	position: absolute;
	right: 10px;
	top: 30px;
	width: 60px;
	height: 60px;
	padding: 0;
	text-align: center;
	color: #FFF;
	background-color: var(--dunkelblau);
	background-image: url("/img/menu.png");
	background-size: contain;
	background-position: center top;
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	z-index: 2000;
	border-radius: 8px;
}

#logo {
	display: block;
	width: 250px;
	height: auto;
	margin: 0 0 10px 20px;
}

#logo img {
	width: 100%;
	height: auto;
}

#logo_facebook {
	position: absolute;
	top: 30px;
	left: 5px;
	width: 50px;
	height: auto;
}

#logo_instagram {
	position: absolute;
	top: 90px;
	left: 5px;
	width: 50px;
	height: auto;
}

#scrolltop {
	display: none;
}

#suchtext {
	box-sizing: border-box;
	display: block;
	position: relative;
	background-image: url('/img/lupe.png');
	background-size: auto 80%;
	background-position: right center;
	background-repeat: no-repeat;
	padding: 5px;
	margin: 5px 10px 0 10px;
	width: calc(100% - 20px);
	font-size: 120%;
	color: var(--blau);
}

nav {
	position: relative;
	box-sizing: border-box;
	display: none;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav ul li,
nav ul ul li {
	box-sizing: border-box;
	display: block;
	float: none;
	width: 100%;
	padding-left: 0px;
	list-style: none;
	border-top: solid 2px #FFF;
}

nav ul li {
	margin-left: 20px;
}

nav ul li ul li {
	margin-left: 20px;
}

nav a {
    margin: 0 3px;
    text-transform: uppercase;
    font-family: 'open_sans_condensed_bold';
    font-size: 20px;
	color: var(--schwarz);
}

nav a:hover {
	background-color: var(--dunkelblau);
}

nav ul li:first-child,
nav ul ul li: first-child {
	border-top: none;
}

nav ul li:first-child {
	border-top: none;
}

nav ul li a,
nav ul li a:visited {
	display: block;
	box-sizing: border-box;
	padding: 10px 0;
	width: 100%;
	color: var(--weiss);
	text-decoration: none !important;
}


nav ul ul li a {
	padding-left: 20px;
}

th {
	text-align: left;
}

small {
	font-size: 70%;
}

.symbol_web {
	display: inline-block;
	width: 13px;
	height: 13px;
	background-image: url("/img/internet.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
}
	
input[type='button'],
input[type='submit'],
button {
	padding: 6px 10px;
	min-width: 170px;
	box-sizing: border-box;
	transition: all 0.3s ease-in-out;
	color: var(--weiss);
	background-color: var(--blau);
	border-radius: 4px;
	border: 1px solid #bbbbbb;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
	cursor: pointer;
}

input[type='hover']:hover,
input[type='button']:hover,
button {
	cursor: pointer;
	background-color: var(--hellgruen);
}

input[type='button'].passive,
input[type='submit'].passive,
button.passive {
	background-color: #F3F3F3;
	color: var(--schwarz);
}

#btn_new {
	position: absolute;
	right: 0;
	padding: 5px 10px;
	color: var(--weiss);
	background-color: var(--gruen);
	border-radius: 3px;
}

textarea {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	line-height: 160%;	
	color: var(--schwarz);
}

#HyphenatorToggleBox {
	display: none;
}

#cookiezustimmung {
	position: fixed;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 30px;
	margin: 0;
	background-color: var(--schwarz);
	color: #FFF;
	z-index: 4000;
	transition: all 0.5s ease-in-out;
}

#cookiezustimmung.show {
	bottom: 0;
	right: 0;
}

#cookiezustimmung p {
	color: #FFF;
}

input#allowcookies {
	float: right;
	margin: 10px 0 10px 10px;
}

.clearfix {
	clear:both;
	width: 100%;
	height: 0;
	overflow: hidden;
	position: relative;
	padding: 0;
	margin: 0;
}

.haslink {
	cursor: pointer;
}

#main .container {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

#main .container.flex {
	max-width: 1200px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 30px;
}

article {
	max-width: 100%;
}

/* -- BILDER -- */

.bildlinks {
	float: left;
	margin: 0 20px 20px 0;
}

.bildrechts {
	float: right;
	margin: 0 0 20px 20px;
}

.bildtop {
	float: none;
	margin: 0;
}

figcaption {
	font-size: 90%;
	font-style: italic;
	color:var(--hellgruen);
	text-align: center;
}

figure {
	min-width: 100%;
}

figure img {
	width: 100%;
}

p {
	color: var(--schwarz);
	margin:10px 0;
	padding: 0;
}

.clear {clear: both;}

a {
	color:var(--dunkelblau);
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color:var(--hellblau);
	text-decoration: underline;
}


#main > h1 {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 0;
}

#main article h2 {

}

#main #breadbrumb {
	display: none;
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main p,
#main ul,
h1,
h2
 {
	margin-left: 10px;
	margin-right: 10px;
}

#main h1,
#main h2,
#main h3, {
	font-family: 'open_sans_condensed_bold';
}

#main h1 {
	font-size: 180%;
	margin-bottom: 5px;
	line-height: 100%; 
	font-weight: bold;
	color: var(--blau);
}

#main h2 {
	font-size: 140%;
	line-height: 100%;
	font-size: 140%;
	font-weight: bold;
	color: var(--blau);
	margin-top: 0;
	margin-bottom: 10px;
}

#main article.boxnavi {
	position: relative;
	background-color: var(--hellgruen);
	width: 100%;
	padding: 10px 0;
	cursor: pointer;
	margin: 0 0 5px;
}

#main article.boxnavi h1 {
	font-size: 140%;
	color: var(--weiss);
	text-align: center;
	margin-top: 5px;
}


h3 {
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 22px;
    line-height: 28px;
    color: var(--blau);
    font-family: "open_sans", Helvetica, Arial, sans-serif;
}

hr {
	border: 0; 
	height: 10px; 
	background:var(--grau3); 
	margin: 20px auto;
}

label {
	display: inline-block;
	width: 150px;
}

th {
	text-align: links;
	background-color: var(--hellgruen);
}

table {
	width: 100%;
}

.sortauf,
.sortab,
.eintragkopieren,
.edit,
.del {
	width: 30px;
	height: 30px;
	background-size: 28px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition: filter 0.3s ease-in-out;
	padding: 0;
}

.hide {
	display: none;
}

.sortauf:hover,
.sortab:hover,
.eintragkopieren:hover,
.edit:hover,
.del:hover {
	filter: saturate(10) invert(100);
}

.sortauf {

	background-image: url("/img/aufwaerts.png");

}

.sortab {
	background-image: url("/img/abwaerts.png");
}

.eintragkopieren {
	background-image: url("/img/kopieren.png");
}

.edit {
	background-image: url("/img/bearbeiten.png");
}

.del {
	background-image: url("/img/loeschen.png");
}

#neu {
	position: absolute;
	right: 0;
	top: 20px;
	padding: 5px;
	color: var(--weiss);
	background-color: var(--blau);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

#neu:hover {
	background-color: var(--rot);
}

.adminbtn {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 200px;
	height: 100px;
	padding: 40px 10px;
	margin: 0 20px 20px 0;
	float: left;
	text-align: center;
	background-color: var(--hellblau);
	transition: all 0.5s ease-in-out;
	border-radius: 10px;

}

.adminbtn:hover {
	background-color: var(--blau);
	color: var(--weiss);
}

#main {
	box-sizing: border-box;
	max-width: 1200px;
	width: 100%;
	max-width: 100%;
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
}

#main article {
	box-sizing: border-box;
	overflow-x: hidden;
}

#zurlistenansicht {
	display: block;
	box-sizing: border-box;
	position: absolute;
	height: 30px;
	right: 0;
	top: -15px;
	padding: 5px 10px;
	color: var(--weiss);
	background-color: var(--hellgruen);
	transition: all 0.3s ease-in-out;
}

#zurlistenansicht:hover {
	cursor: pointer;
	text-decoration: none;
	background-color: var(--gruen);
}

#zurlistenansicht::before {
	content: "";
	position: absolute;
	margin-left: -30px;
	margin-top: -5px;
	width: 20px;
	height: 30px;
	box-sizing: border-box;
	border-right: solid 20px var(--rot);
	border-top: solid 15px transparent;
	border-bottom: solid 15px transparent;
}

.hslider_container {
	width: 100vw;
	max-width: 100vw;
	height: auto;
	box-sizing: border-box;
	position: relative;
	display: block;
}

.hslider {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-snap-align: start;
	-webkit-overflow-scrolling: touch;
	position: relative;
	background-color: var(--weiss);
	box-sizing: border-box;
}

.hslider::-webkit-scrollbar {
    display: none!important;
    height: 0;
    width: 0;
    background-color: transparent;
}

.hslider_container .hslider_button {
	top: 0px;
	padding-top: 200px;
	width: 25%;
	height: calc(100% - 20px);
	z-index: 100;
	font-size: 120px;
	color: var(--hellgruen);
	transition: all 0.3s ease-in-out;
	z-index: 30;
	box-sizing: border-box;
	position: absolute;
	display: none;
}

.hslider_container .hslider_button:hover {
	cursor: pointer;
	color: var(--gruen);
}

.hslider_container .hslider_button.hide {
	display: none;
}

.hslider_container #hslider_left {
	left: 0;
	text-align: left;
	padding-left: 20px;
}
.hslider_container #hslider_right {
	right: 0;
	text-align: right;
	padding-right: 20px;
}

#main article.hslide {
	min-width: 95vw;
	max-width: 95vw;
	flex: 1;
	margin: 0;
	padding-top: 70vw;
	overflow-y: hidden;
	scroll-snap-type: x mandatory; 
	height: auto;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	text-align: center;
	color: var(--schwarz);
	background-color: var(--weiss);
}

#main article.hslide h1 {
	font-size: 30px;
	font-weight: bold;
}

#main article.hslide h2 {
	font-size: 25px;
	font-weight: bold;
}

#main article.hslide p {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

#main article.hslide .imgbox {
	width: 95vw;
	max-width: 600px;
	height: 70vw;
	max-height: 400px;
	display: block;
	position: absolute;
	margin-left: 0;
	top: 0;
	background-size: cover;
	background-position: center;
	border-left: solid 5px var(--weiss);
}

.hslider > article:first-child imgbox {
	border-left: none;
}

@media only screen and (min-width: 601px) {

	#main article.hslide {
		min-width: 100%;
		max-width: 100%;
		padding-top: 450px;
	}

	#main article.hslide .imgbox {
		width: 600px;
		height: 400px;
		margin-left: calc(50% - 300px);
	}

}

.boxinfo {
	background-color: var(--gruen);
	margin-bottom: 10px;
}

.boxinfo p {
	color: var(--weiss);
}

.boxinfo::before {
	content: "i";
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	background-color: var(--hellgruen);
	border-radius: 0 0 0 50px;
	color: var(--weiss);
	font-size: 30px;
	font-weight: bold;
	position: absolute;
	right: 0;
	top: 0;
	padding-top: 10px;
	padding-left: 25px;
}

#main article.boxinfo h1,
#main article.boxinfo h2,
#main article.boxinfo h3 {
	color: var(--weiss);
}

.red {
	color: var(--rot) !important;
}

.meldung {
	font-weight: bold;
	font-size: 18px;
}

.rechts {
	text-align: right;
}

#del {
	background-color: var(--rot);
}

#map {
	width: 100%;
	height: 600px;
	position: relative;
}

#main .betrieb {
	flex: 1;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-width: 100%;
	border: solid 3px var(--hellgruen);
	border-radius: 30px;
	background-color: var(--hellblau);
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

@media only screen and (min-width: 620px) {
	#main .betrieb {
		min-width: calc(50% - 30px);
		max-width: calc(50% - 30px);
	}
}

@media only screen and (min-width: 940px) {
	#main .betrieb {
		min-width: calc((100% - 60px) / 3);
		max-width: calc((100% - 60px) / 3);
	}
}

#main .betrieb:hover {
	border-color: var(--gruen);
}

#main .betrieb h2 {
	box-sizing: border-box;
	width: calc(100% + 4px);
	font-size: 130%;
	font-weight: 200;
	color: var(--schwarz);
	background-color: var(--hellgruen);
	padding: 5px 0;
	margin: -2px 0 0 -2px;
	line-height: 100%;
	text-align: center;
	border-radius: 30px 30px 0 0;
}

#main .betrieb:hover h2 {
	background-color: var(--gruen);
}

#main .betrieb h3 {
	font-size: 110%;
	font-weight: bold;
	color: var(--schwarz);
	padding-left: 10px;
	padding-right: 10px;
}

#main .betrieb p {
	font-size: 100%;
	font-weight: normal;
	color: var(--schwarz);
	padding-left: 10px;
	padding-right: 10px;
}


#main article.suchtreffer {
	border: solid 3px var(--blau);
	margin-bottom: 20px;
}


#main article.suchtreffer {
	cursor: pointer;
}

#main article.suchtreffer:hover {
	border-color: var(--rot);
}

.highlight {
	background-color: #FFFF00;
	color: var(--schwarz);
}

footer {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 100%;
	background-color: var(--blau);
	color: var(--weiss);
	margin: 0;
	padding: 0 0 30px 10px;
	z-index: 1000;
}

#login,
#logout {
	position: absolute;
	bottom: 20px;
	right: 10px;
	padding: 5px; 
	color: var(--weiss);
	cursor: pointer;
	border-radius: 3px;
}

#login {
	background-color: var(--gruen);
}

#logout {
	background-color: var(--rot);
}

footer h2 {
	color: var(--weiss);
}

footer p {
	color: #FFF;
	margin: 5px 0 0 0;
	line-height: 110%;
}

footer a,
footer a:visited {
	color: var(--hellgruen);
	font-size: 90%;
}

footer article {
	box-sizing: border-box;
	padding: 0;
	padding: 20px 0 0 10px;
}

footer article p {
	text-align: left;
}

.galeriecontainer {
	clear: both;
}

.galeriethumb {
	display: inline-block;
	width: 200px;
	height: 200px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#abdunkeln {
	display: block;
	width: 100vw;
	height: 100vh;
	position: fixed;
	background-color: rgba(0,0,0,0.7);
	z-index: 5000;
}

div.adresswrapper {
	width: 100%;
}

div.adresse {
	box-sizing: border-box;
	width: 100%;
	border-radius: 10px;
	border: solid 2px var(--blau);
	padding: 0 0 10px 0;
	margin-top: 20px;
	border-collapse: collapse;
	background-color: var(--weiss);
}

#main div.adresse h3 {
	box-sizing: border-box;
	background-color: var(--blau);
	color: var(--weiss);
	font-size: 90%;
	padding: 5px 10px 5px 10px;
	border-radius: 10px 10px 0 0;
	margin-left: -1px;
	margin-top: -2px;
	width: calc(100% + 2px);
}

#main div.adresse p {
	padding: 0 10px 0 10px;
	line-height: 130%;
}

span.suchwort {
	position: relative;
	display: inline-block;
	padding: 5px;
	background-color: var(--hellgruen);
	color: var(--schwarz);
	margin: 0 5px 5px 0;
}

@media only screen and (min-width: 1200px) {

	div.adresswrapper {
		position: absolute;
		z-index: 100;
		margin-top: 70px;
		margin-left: 10px;
		max-width: 300px;
	}

	header {
		padding-left: calc(50% - 585px);
		padding-right: calc(50% - 585px);
		height: auto;
		padding-bottom: 40px;
	}

	#mobilswitch {
		display: none;
	}

	#scrolltop {
		display: block;
		opacity: 0;
		position: fixed;
		bottom: 120px;
		right: 10px;
		width: 0px;
		height: 40px;
		border-bottom: solid 40px var(--hellgruen);
		border-left: solid 30px transparent;
		border-right: solid 30px transparent;
		cursor: pointer;
		z-index: 2000;
		transition: all 0.3s ease-in-out;
	}
	
	#scrolltop.show {
		opacity: 1;
	}

	#scrolltop:hover {
		border-bottom-color: var(--gruen);
	}

	header #topnavi {
		text-align: right;
		min-height: 20px;
	}
	
	header #logo {
		position: absolute;
		left: calc(50% - 585px);
		top: 20px;
	}

	#logo_facebook {
		position: absolute;
		top: 30px;
		right: calc(50% - 565px);
		left: auto;
		width: 50px;
		height: auto;
	}

	#logo_instagram {
		position: absolute;
		top: 90px;
		right: calc(50% - 565px);
		left: auto;
		width: 50px;
		height: auto;
	}

	#suchtext {
		position: absolute;
		top: 40px;
		left: calc(50% - 280px);
		margin: 0;
		margin-right: calc(50% - 565px);
		width: 400px;
	}

	#suchtext.fixed {
		position: fixed;
		z-index: 2000;
		top: 3px;
		right: 0;
		left: auto;
	}
	
	header p {
		margin: 0;
		padding-top: 10px;
	}

	
	#suche {
		position: absolute;
		display: block;
		width: 400px;
		margin: 0;
		left: calc(50% - 280px);
		top: 30px;
		text-align: left;
	}
	
	header #slogan {
		text-align: left;
		padding-left: 300px;
		font-size: 250%;
		margin-top: 60px;
		padding-bottom: 10px;
	}

	nav {
		position: absolute;
		display: block;
		box-sizing: border-box;
		display: table;
		z-index: 1000;
		min-height: 40px;
	}

	nav.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		padding-left: calc(50% - 585px);
		background-color: var(--blau);
	}

	nav.hidden {
		opacity: 0;
	}

	nav.hidden.fixed {
		opacity: 1;
	}

	nav a {
		font-size: 17px;
		color: var(--weiss);
	}

	nav ul li {
		float: left;
		width: auto;
		height: auto;
		border-top: none;
	}

	nav > ul > li:hover {
		border-bottom: solid 1px var(--hellgruen);
	}

	nav > ul > li > a {
		padding: 10px 15px 10px;
		margin: 0 3px;
		text-transform: uppercase;
		font-family: 'open_sans_condensed_bold';
		font-size: 17px;
		font-weight: normal;
	}

	nav > ul > li:first-child,
	nav > ul > li:first-child a {
		margin-left: 0;
		padding-left: 0;
	}

	nav ul li ul {
		display: none;
		position: absolute;
		border: solid 1px var(--schwarz);
		border-radius: 6px;
		box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
		margin: -4px 0 0 0;
		padding: 0;
		background-color: var(--weiss)
	}

	nav ul li ul li {
		float: none;
		padding: 0;
		margin: 0;
		border-radius: 6px;
	}

	nav ul li:hover ul {
		display: block;
	}

	nav ul li ul li a {
		color: var(--schwarz);
		padding: 5px;
		display: block;
	}

	nav ul li ul li:hover {
		background-color: var(--blau);
	}

	nav ul li ul li:hover a{
		color: var(--weiss) !important;
	}

	#main h1,
	#main h2,
	#main h3,
	#main h4,
	#main h5,
	#main p,
	#main ul,
	h1,
	h2
	{
		margin-left: 0px;
		margin-right: 0px;
	}

	#main article.boxnavi {
		position: relative;
		background-color: var(--hellgruen);
		width: 100%;
		padding: 10px 0;
		cursor: pointer;
		margin: 0 0 5px;
	}

	#main article.boxnavi h1 {
		font-size: 140%;
		color: var(--weiss);
		text-align: center;
	}

	.hslider_container {
		position: relative;
		box-sizing: content-box;
		display: flex;
		width: 1170px;
		max-width: 1170px;
		height: auto;
		margin-left: calc(50% - 585px);
		margin-top: 20px;
	}
	
	.hslider {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	
	.hslider_container .hslider_button {
		display: block;
	}
	
	.hslide {
		min-width: 100%;
		max-width: 100%;
		padding-top: 400px;
	}
	
	.hslider h1 {
		font-size: 30px;
	}
	
	.hslider h2 {
		font-size: 25px;
	}
	
	.hslider p {
		font-size: 16px;
	}
	
	.hslider .imgbox {
		width: 600px;
		height: 400px;
		margin-left: 285px;
		background-size: cover;
		background-position: center;
	}

	#main article {
		box-sizing: border-box;
		position: relative;
		padding: 8px 16px;
		transition: all 0.5s ease-in-out;
	}

	#main article.hidden {
		margin-top: 80px !important;
	}

	#main article.weiss {
		background-color: var(--weiss);
	}

	#main article,
	#main article.box100 {
		width: 100%;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	
	#main article.box25 {
		flex: 6;
		min-width: calc((100% - 90px) / 4);
		max-width: calc((100% - 90px) / 4);
	}

	#main article.box33 {
		flex: 8;
		min-width: calc((100% - 60px) / 3);
		max-width: calc((100% - 60px) / 3);
	}
	
	#main article.box50 {
		flex: 12;
		min-width: calc((100% - 30px) / 2);
		max-width: calc((100% - 30px) / 2);
	}

	#main article.box66 {
		flex: 16;
		min-width: calc((100% - 30px) / 3 * 2);
		max-width: calc((100% - 30px) / 3 * 2);
		box-sizing: border-box;
		float: right;
	}


	#main article.box33 h2 {
		margin: 5px 0 0 0;
		padding: 0 0 10px 0;
		font-size: 22px;
		line-height: 28px;
		font-family: 'open_sans_condensed_bold';
	}

	#main article.box33 h2::before {
		display: none;
	}

	#main article.boxnavi {
		flex: 1;
		position: relative;
		padding-top: 80px;
		margin-top: 0px;
		transition: all 0.5s ease-in-out;
	}

	#main article.boxnavi:hover {
		background-color: var(--gruen);
	}

	#main article.boxnavi::before {
		content: "";
		position: absolute;
		width: 100%;
		top: 10px;
		height: 30px;
		background-image: url("/img/pfeil_weiss.png");
		background-size: 100% 30px;
		background-repeat: no-repeat;
	}

	.boxblau {
		background-color: var(--blau);
		color: var(--weiss);
		padding: 10px;
		border-radius: 0 50px 0 50px;
	}

	.boxblau p {
		color: var(--weiss);
	}

	#main article.boxblau h1,
	#main article.boxblau h2,
	#main article.boxblau h3 {
		color: var(--weiss) !important;
	}

	#main article.boxblau h1 {
		font-size: 200%;
		margin-bottom: 0;
	}

	#main article.boxblau h2 {
		font-size: 200%;
		margin-top: 0;
		padding-top: 5px;
	}

	.boxblau a,
	.boxblau a:visited {

		width: 100%;
		padding: 10px 0;
		margin-top: 10px;
		color: var(--hellblau);
	}

	.box_hellblau {
		background-color: var(--hellgruen);
		background-image: url("/img/dreieck_blau.png");
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
		color: var(--dunkelblau);
		padding: 10px;
	}

	.box_hellblau h2,
	.box_hellblau h3 {
		color: var(--dunkelblau);
	}

	.box_hellblau p {
		color: var(--dunkelblau);
	}

	.box_parallax {
		background-attachment: fixed;
		background-size: auto 100vh;
		background-repeat: no-repeat;
		background-position: center;
	}

	.box_backgroundimage {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.box_borderblau {
		border: solid 4px var(--dunkelblau);
		padding: 10px;
	}

	figure {
		min-width: 0;
	}	
	footer {
		display: flex;
		padding-left: calc(50% - 585px);
		padding-right: calc(50% - 585px);
		column-gap: 20px;
		margin-top: 20px;
	}

	footer article {
		flex: 1;
	}

}

@media only screen and (min-width: 1240px) {

	#main {
		padding: 0;
	}

}

.anzeige {
	height: 30px;
	width: 30px;
	background-size: 30px 30px;
	background-position: center top;
	background-repeat: no-repeat;
	cursor: pointer;
}

.anzeige:hover {
	cursor:pointer;
}

.anzeige::before {
	content: "";
	position: absolute;
	margin-top: -12px;
	width: 25px;
	height: 25px;
	border-radius: 100%;

}

.anzeige.status_0::before {
	background-color: var(--hellgruen);
}

.anzeige.status_1::before {
	background-color: var(--gruen);
}

.anzeige.status_2::before {
	background-color: var(--rot);
}

#registernavi {
	position: relative;
	height: 40px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.registerswitch {
	flex: 1;
	color: #FFF;
	background-color: var(--schwarz);
	text-align: center;
	float: left;
	height: 25px;
	margin-right: 1px;
	padding-top: 5px;
	cursor: pointer;
}

.registerswitch:hover {
	background-color: var(--blau);
	color: #FFF;
}

.registerswitch.active {
	background-color: var(--hellgruen);
}

.register {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 100%;
	height: 0;
	margin-top: 120px;
	overflow: hidden;
	padding-top: 0px;
	padding-bottom: 10px;
	top: 0;
	z-index: 0;
}

.register.active {
	position: relative;
	margin-top: 0;
	height: auto;
	z-index: 1;
	background-color: var(--weiss);
}

#eintragspeichern {
	flex: 1;
	height: 25px;
	margin-right: 1px;
	padding-top: 5px;
	background-color: var(--rot);
	color: #FFF;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	float: left;
	position: relative;
}

#eintragspeichern:hover {
	background-color: var(--hellgruen);
}

#eingabespeichern {
	width: 100%;
}

#neuereintrag {
	width: 200px;
	color: #FFF;
	background-color: #021C2D;
	background-image: url(../images/neuereintrag.png);
	background-repeat: no-repeat;
	background-position: left center;
	text-align: right;
}

#neuereintrag:hover {
	background-color: #F30;
}

#neuereintrag a {
	padding: 10px 20px 10px 0;
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

.neueintrag {
	width: 250px;
	padding: 10px 20px 10px 50px;
	margin-bottom: 10px;
	color: #FFF;
	background-color: var(--blau);
	background-image: url(../images/neuereintrag.png);
	background-repeat: no-repeat;
	background-position: left center;
	text-align: right;
	transition: all 0.3s ease-in-out;
}

.neueintrag:hover {
	background-color: #F30;
	cursor: pointer;
}

.symbollegende {
	width: auto;
	height: auto;	
	float: right;
	margin: 10px auto 30px auto;
}

.symbollegende p {
	line-height: 100%;
	margin: 5px 0 0 0;
}
.symbollegende p:last-child{
	font-size: 80%;
}

.symbol {
	display: inline-block;
	margin-right: 10px;
	width: 25px;
	height: 25px;
	margin-bottom: -5px;
	border-radius: 100%;
}

.symbol.status_0 {
	background-color: var(--hellgruen);
}

.symbol.status_1 {
	background-color: var(--gruen);
}

.symbol.status_2 {
	background-color: var(--rot);
}

#bildbearbeitung {
	height: 0;
	width: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #FFF;
	transition: all 0.5s ease-in-out;
	background-color: rgba(0,0,0,0.7);
	z-index: 1000;
}

#bildbearbeitung.visible {
	height: 100%;
}

#bildbearbeitungiframe {
	width: 800px;
	max-width: 100vw;
	height: 700px;
	max-height: 100vh;
	margin-top: 80px;
	margin-left: calc(50vw - 400px);
	background-color: #FFF;
}

.close {
	width: 40px;
	height: 40px;
	position: absolute;
	right: 10px;
	top: 10px;
	background-image: url('/images/exit.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.settings {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-top: -5px;
	background-image: url("/images/settings.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: invert(100%);
}

#infometadaten {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	display: none;
	background-color: #666666;
	color: #FFF;
	padding: 10px 30px;
}

#infometadaten p {
	color: #FFF;
}

#infometadateneinaus {
	position: absolute;
	right:10px;
	margin-top: -20px;
	width: 130px;
	padding: 6px;
	height: 20px;
	background-color: var(--hellgruen);;
	color: var(--weiss);
	text-align: center;
	cursor: pointer;
	z-index: 100;
	transition: all 0.3s ease-in-out;
	border-radius: 5px 5px 5px 0;
}

#infometadateneinaus:hover {
	background-color: var(--schwarz);
}

#infometadaten_slideup {
	background-color: var(--hellgruen);
	color: var(--weiss);
	width: 100%;
	padding: 10px 0;
	position: absoulte;
	bottom: 0;
	font-size: 30px;
	text-align: center;
}

#infometadaten_slideup:hover {
	cursor: pointer;
}

#metadaten {
	width: calc(100% - 20px);
	height: auto;
	position: relative;
	padding: 10px 10px;
	margin-bottom: 30px;
	background-color: var(--hellgrau);
}

#metadaten h2 {
	margin-top: 0;
}

#metadaten textarea,
#metadaten input[type=text] {
	width: 70%;
}

#meta_description {
	height: 50px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFF;
	font-size: 1em;
	border: 1px solid var(--mittelgrau);
	padding: 5px;
	color: var(--blau);
}

#metadaten input[type=text]#zeichenzaehler {
	width: 80px;
	background: none;
	border: none;
	padding: 3px 5px;
}

#metadaten input[type=text]#zeichenzaehler.zulang {
	background-color: var(--rot);
}

#metadaten label {
	display: inline-block;
	width: 120px;
}

.zurueck {
	position: absolute;
	right: 0;
	margin-top: -60px;
	box-sizing: border-box;
	height: 30px;
	width: 100px;
	padding: 5px 20px;
	background-color: var(--blau);
	color: var(--weiss);
	font-weight: bold;
	text-align: center;
	margin-left: 30px;
	cursor: pointer;
	z-index: 100;
}

.zurueck::before {
	content: "";
	position: absolute;
	margin-left: -37px;
	margin-top: -5px;
	border-right: solid 10px var(--blau);
	border-top: solid 15px transparent;
	border-bottom: solid 15px transparent;
}

input.h1 { 
	font-size: 20px;
	font-weight: bold;
	width: calc(100% - 160px);
}

input.h2 {
	font-size: 15px;
	font-weight: bold;
	width: calc(100% - 160px);
}

.aktivbox {
	width: 25px;
}

.aktivschalter {
	width: 25px;
	height: 25px;
	border-radius: 100%;
	display: inline-block;
	background-color: var(--rot);
	cursor: pointer;
}

.aktivschalter.aktiv {
	background-color: var(--gruen);
}