:root {
	--FSmain: #137390;
	--FSbackgr: #f1efed;
	--FSmenu: #1a1a1a;
}

html {
	margin: 0;
	padding: 0;
	background-color: var(--FSbackgr);
}

body {
	margin: 0px auto 0;
	padding: 0;
	max-width: 1000px;
	font-size: 12pt;
	/* border: solid #e6e6e6; */
	/* border: solid white; */
	/* border-width: 0px 0px 0px 0px; */
	background-color: white;
	/* box-shadow: 0 0 10px #555; */
	/* automatische umbrueche */
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* wat hier rein muss:
 * menüleiste oben
 * ränder responsive
 * bild oben
 * tbc
 * alles hier drüber muss nochmal überarbeitetet werden, alles drunter ist selbst gemacht
 */

/* alle normalen Inhalte */
.banner {
	/* skaliere titelbild dynamisch */
	max-width: 100%;
	height: auto;
}

.content {
	padding: 20px;
	/*margin-top:30px; */
	background-color: white;
	/*height:1500px; */
}

h1,
h2,
h3 {
	padding-left: 5px;
	color: var(--FSmain);
	font-weight: bold;
}

h1 {
	font-size: 16pt;
	border-bottom: solid 1px var(--FSmain);
}

h2 {
	font-size: 14pt;
	border-bottom: solid 1px var(--FSmain);
}

h3 {
	font-size: 12pt;
	margin: 13pt 0px 0px 0px;
}

p {
	padding-left: 20px;
	margin: 8pt 0px 0px 0px;
}

/* Ausrichtung in Bildern */
img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

img.right {
	float: right;
	margin: 4pt 0 8pt 12pt;
	max-width: 300px;
}

img.left {
	float: left;
	margin: 4pt 12pt 8pt 0;
	max-width: 300px;
}

/* datum in news */
.datetag {
	/* font-weight: bold; */
	font-style: italic;
	font-size: 10pt;
	text-align: right;
}


/* footer */
footer {
	padding-top: 13pt;
	padding-bottom: 13pt;
	clear: both;
}

footer>p {
	text-align: center;
	color: var(--FSmain);
}

/* punkte einer Auflistung */
ul {
	list-style-image: url('../img/list_element.png');
}

/* hyperlinks */
a {
	text-decoration: none;
	color: var(--FSmain);
}

a:hover {
	text-decoration: underline;
}

/* TODO Tabellen */
table {
	margin: 8pt 0 0 20px;
	border-collapse: collapse;
}

table td,
#main table th {
	padding: 2px 7px;
	border: 1px solid #ccc;
	text-align: left;
	vertical-align: baseline;
}

table th {
	font-weight: normal;
	border: 1px solid #ccc;
	font-style: italic;
}

/* top main-navigation menu */
.main-navigation {
	/* make nav stick to the top */
	position: sticky;
	position: -webkit-sticky;
	/* Safari */
	top: 0
}

.menu {
	background-color: var(--FSmenu);
	display: flex;
	flex-flow: row wrap;
	list-style: none;

	/* remove margins and padding introduced
		by the ul tag and flex display */
	margin: 0;
	padding: 0;
}

.menu-item a {
	font-size: 16px;
	color: white;
	text-decoration: none;
	padding: 12px 16px;
	position: relative;
	display: inline-block;
}

.menu-item a.hamburger-menu-item {
	/* default: hamburger menu is invisible */
	display: none;
}

.sub-menu {
	/* default: sub-menu is invisible */
	display: none;
	/* places the sub-menu under the right menu-item */
	position: absolute;
	background-color: var(--FSbackgr);
	z-index: 1;
	/* removes ul default styling */
	padding: 0;
	list-style: none;
	min-width: 160px;
}

.sub-menu a {
	/* black text color in sub-menu */
	color: black;
}

.menu-item:hover .menu-item-text {
	color: var(--FSmain);
}

.sub-menu-item:hover a,
.sub-menu-item:hover {
	background-color: var(--FSmain);
	color: white;
}

.menu-item:hover .sub-menu {
	/* display sub-menu when hovering over the menu-item */
	display: block;
}


@media screen and (max-width: 600px) {
	.menu {
		/* alignment */
		align-items: stretch;
		justify-content: stretch;
	}

	.menu .menu-item:not(:first-child) {
		/* only display the first menu element in mobile view */
		display: none;
	}

	#ham,
	.menu-item a.hamburger-menu-item {
		display: block;
		/* position hamburger icon on the right side */
		position: absolute;
		right: 0;
	}

	.menu.responsive .menu-item {
		display: block;
		width: 100%;
	}

	.menu.responsive .sub-menu {
		/* so the menu items get properly moved under opened sub-menus */
		position: relative;
	}

	.menu.responsive .sub-menu-item a {
		width: 100%;
		float: none;
	}
}