body {background: #39f; background: linear-gradient(#5f5, #39f); background-attachment: fixed;}
html, body {height: calc(100% - 66px)}/*Footer platzreservation*/
main {min-height: calc(100% - 270px);}/*Footer nach unten ausrichten*/
a {text-decoration: none;}
a:hover {text-decoration: underline;}
main, nav, header, footer {font-family: sans-serif; font-style: normal;}
h1, h2 {column-span: all; text-align: center;}
h3 {margin-top: 6px;}
h4 {font-size: 1em; margin-bottom: 0}
h5 {font-size: 1em; margin: 6px 0 0; font-weight: normal;}
/*svg {line-height: 1; width: 1em; height: 1em; margin-right: 6px;}*/

/*Navigation*/
nav {
	background-image: linear-gradient(180deg, rgba(240, 255, 255, 0.75) 60px, rgba(240, 255, 255, 0.0) 80px);
	/*background-color: rgba(180, 180, 180, 0.8);*/
	position: fixed;
	top: 0;
	left: 0;
	height: 80px;
	width:100%;
	z-index:1;
}
nav ul, footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
}
nav ul li {
	flex-basis:100%;
}
nav ul li a {
	text-align: center;
	display: block;	/* Vertikal Zentriert, ganzes Feld Klickbar (flex, inline-block, block)*/
	font-weight: bold;
	color: #000;
	text-decoration: none !important;
	padding: 24px 0;/*24px 0*/
}
nav ul li a:hover, nav ul li a:focus{background-color: grey}
nav ul li:first-child {width: 33%; width: calc(100% / 3); min-width: 390px;}
nav ul li:first-child a {padding: 0}

@media screen and (max-width: 700px) {
nav ul {display: initial;}
nav ul li {min-width: calc(100% - 390px); float: left;}
nav ul li a {padding: 7.5px;}
}
@media screen and (max-width: 480px) {
/*nav {height: 48px}*/
nav ul li {width: calc(100% - 280px); min-width: calc(100% - 280px)}
nav ul li:first-child {width: 33%; min-width: 280px;}
nav ul li a {padding: 3px}
nav ul li:first-child a img, nav ul li:first-child {width: 280px}
}

/*Parallax*/
header {
	background-image: url("/files/header.jpg")/*, url("/files/header.webp")*/;
	top: 0;
	height: 360px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: -8px -8px 0;
}
header h1 {
	position: absolute;
	left: 0;
	top: 80px;
	width: 100%;
	font-size: 2.2em;
}
@media screen and (max-device-width: 950px) {
	header {background-attachment: scroll;}
	header h1 {font-size: 1.5em; top: 20%;}
}

/* Main */
main section {
	margin: 8px 0;	/* Aussen: Oben, Seitlich*/
	border-radius: 22px;
	padding: 6px 12px;
	background-color: rgba(255, 255, 255, 0.6);
}
section.artikel {	
	columns: 400px 2;
	column-fill: balanced;
}
article {
	margin: 0 0 16px;
	box-shadow: 4px 6px 6px 4px rgba(0,0,0,0.5);
	/*transition: 0.5s;*/
	padding: 2px 8px;
	break-inside: avoid;	/*Vermeidet Spalentenumbruch innerhalb von der Box*/
}
@media screen and (max-width: 650px) {
article {max-width: 100%; margin: 6px 0;}
}

/* Flexbox Vorstand */
section.flexbox {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: center;*/
}
section.flexbox div {
	min-width: 450px;
	align-self: 100%;
	margin: 8px 0;
}
@media screen and (max-width: 650px) {
section.flexbox div {min-width: 100%}
}
/*Footer*/
footer ul {}
footer ul li {
	flex-basis:100%;
	min-width: 150px;
	position: relative;
}
footer ul li:first-child {min-width: 270px;}
footer ul li a {
	text-align: center;
	display: block;
	font-weight: bold;
	color: #ddd;
	text-decoration: none !important;
	padding: 8px 5px;
}
footer ul li a:hover {color: #fff;}
@media screen and (max-width: 877px) {
footer ul {flex-wrap: wrap;}
}
/*Modal Images*/
#myImg {/* Style the Image Used to Trigger the Modal */
	border-radius: 5px;
	cursor: pointer;
}
#myImg:hover {opacity: 0.7;}
.modal {/* Modal Background */
	display: none;
	position: fixed;
	padding-top: 100px;
	left: 0;
	top: 66px;
	width: 100%;
	height: 100%;
	z-index: 150;
	background-color: #000;
}
@media screen and (max-width: 480px) {
.modal {top: 48px;}
}
.modal-content {/* Modal Image */
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	max-height: calc(95% - 66px); 
}
#caption {/*Image Text*/
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
}
.modal-content, #caption {
	animation: zoom 0.7s;
	animation-delay: 0.4s;
}
@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}
.close {/* Close Button */
	position: absolute;
	top: 15px;
	right: 35px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}
.close:hover, .close:focus {color: #bbb; text-decoration: none; cursor: pointer;}

@media only screen and (max-width: 700px){
	.modal-content {width: 100%;}
}
@media only print {
	body {background: initial;}
	nav {display: none;}
	header {height: 2.4em; background: linear-gradient(rgba(85, 255, 85, 0.5), rgba(51, 153, 255, 0.5));}
	header h1 {position: initial;}
	section.artikel {columns: initial;}
	article {break-inside: initial;}
	footer {display: none;}
}
ul.ico {list-style: none; padding-left: 0;}
ul.ico li {position: relative; padding-left: 1.4em;}
ul.ico li:before {
	content: '';
	width: 1.1em;
	height: 1em;
	position: absolute;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>') no-repeat center;
	left: 0;
}
ul.ico li.calendar:before {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>') no-repeat center;}
ul.ico li.clock:before {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>') no-repeat center;}
ul.ico li.map:before {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"/></svg>') no-repeat center;}
ul.ico li.compass:before {background: url('/files/compass.svg') no-repeat center;}
ul.ico li.info:before {background: url('/files/info.svg') no-repeat center;}
ul.ico li.user:before {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>') no-repeat center;}
/*ul.ico li.users:before {background: url('/files/user-friends.svg') no-repeat center;}*/
.clearfix::after, section::after, article::after {content: ""; clear: both; display: table;}


p.list {
	padding-left: 1.4em; text-indent: -1.4em; margin-bottom: 0; margin-top: 0;
	}
/* Icon Font */
@font-face {
	font-family: 'Material Icons';
	src: local('Material Icons'), url(/files/materialIconsO.woff2) format('woff2');
}

.icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: -0.15em;
	white-space: nowrap;
	word-wrap: normal;
	margin-right: 6px;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

a.link {
	padding: 5px;
	margin: 1em 0;
	display: block;
	min-width: 100%;
	background-color: #CFC;
	color: #000;
	border-left: 6px solid #0F0;
	border-radius: 5px;
}