body {
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    margin-top: 0em;
    background-color: whitesmoke
}
h1,h2,h3,h4,h5,h6,p {
    text-align: center;
    margin-bottom: 0em;
    margin-top: 0em;
    padding-bottom: 1em;
    padding-top: 1em;
    vertical-align: bottom
}
.menu {
    /*margin-left: 0em;
    margin-right: 0em;
    margin-top: 0.5em;
    min-height: 3.5em;*/
}
.hallo {
    z-index: 1;
    margin-left: 0em;
    margin-right: 0em;
    padding: 0.5em;
    background-image: url(pictures/stone-2929204.jpg);
    background-size: 100em;
    color: darkred
}
#logo {display: flex; 
       justify-content: center}
img {
    justify-content: center;
    
}
#wir {
    background-color: whitesmoke;
    margin-left: 0em;
    margin-right: 0em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 2em;
    padding-left: 2em;
    color: darkred;
    display: flex
}
.wirhl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
	background-color: 100%;
    margin: 0.5em
}
.wirtxt {
	margin: 0.5em
}
#ludi {
    border: 5px solid darkred;
    background-color: white;
	margin: 1em;
	padding: 1em;
	margin-left: 2em;
	flex: 1;
}
#libri {
    border: 5px solid darkred;
    background-color: white;
	padding: 1em;
	margin: 1em;
	flex: 1;
}
#notitia {
    border: 5px solid darkred;
    background-color: white;
	padding: 1em;
	margin: 1em;
	margin-right: 2em;
	flex: 1;
}
.bereiche {
    background-color: whitesmoke;
	width: 100%;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
#logo
/* Linkeinstellungen */
a {
    background-color: darkred;
    color: white
}
a:link {color: white}
a:visited {color: white}

/* Menüeinsellungen */
nav li {
	font-size: 1em;
	flex: 1 1 0%;
}
nav a {
	display: block;
	text-decoration: none;
	text-align: center;
	border: 2px double darkred;
	transition: all .1s ease-in;
    width: inherit;
    z-index: 2;
    padding-top: 0.5em;
	padding-bottom: 0.5em;
    background-color: darkred
}
nav a[aria-current] {
	display: block;
	text-decoration: none;
	text-align: center;
	border: 2px double darkred;
	transition: all .1s ease-in;
    width: inherit;
    color: white;
    z-index: 2;
    font-family: Calibri Bold;
}
nav li[aria-current] a {
	background-color: gold;
    z-index: 2
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	color: darkred;
	border-color: white;
	background-color: white;
    z-index: 2
}
nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}
nav .submenu li .subsubmenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}
nav .submenu li .subsubmenu li {
	display: block;
    width: auto;
    z-index: 2
}
nav .submenu li {
	display: block;
    width: auto;
    z-index: 2
}
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
    z-index: 2
}
nav li:hover .submenu li .subsubmenu,
nav li:active .submenu li .subsubmenu,
nav li:focus .submenu li .subsubmenu {
	visibility: visible;
	height: auto;
    z-index: 2;
    background-color: gold
}
nav li:focus-within .submenu{
	visibility: visible;
	height: auto;
    z-index: 2
}
nav li:focus-within .submenu li .subsubmenu {
	visibility: visible;
	height: auto;
    z-index: 2
}
nav > ul {
    list-style: none;
	margin: 0;
	padding: 0;
	flex-direction: column;
    display: flex;
    width: auto;
    z-index: 2
    }
.nav {
    padding-top: 0.75em;
    padding-bottom: 0.75em
}
@media (max-width: 50em) {
	nav > ul {
		flex-direction: row;
		height: 2em;
        width: auto;
        z-index: 2
	}
	nav li {
		flex: 1;
		font-size: 1em;
        z-index: 2
	}
    .menu {
    float: none
    }
    .hallo {
    float: none
    }
    .wirtxt {
    color: darkred;
    background-color: whitesmoke;
    }
    .wirhl {
    color: darkred;
    background-color: whitesmoke;
    }
}
@media (min-width: 50em) {
	nav > ul {
		flex-direction: row;
		height: 2em;
        width: auto;
        z-index: 2
	}
	nav li {
		flex: 1;
		font-size: 1em;
        z-index: 2
	}
    .menu {
    float: none
    }
    .hallo {
    float: none
    }
    .wirtxt {
    width: 75%;
    float: right;
    color: darkred;
    background-color: whitesmoke;
    }
    .wirhl {
    color: darkred;
    background-color: whitesmoke;
    width: 25%;
    float: left
    }
}
@media (max-width: 62em) {
	nav li {
		flex: 1;
		font-size: 0.9em;
        z-index: 2
	}
}
@media (max-width: 55em) {
	nav li {
		flex: 1;
		font-size: 0.8em;
        width: auto;
        z-index: 2
	}
    .menu {
    margin-left: 0em;
    margin-right: 0em
}
}

/* Schrift einbinden*/

@font-face {
font-family: Calibri Regular;
src: url(fonts/calibri/calibriregular.ttf) format('truetype');
}
@font-face {
font-family: Calibri Bold;
src: url(fonts/calibri/calibribold.ttf) format('truetype');
}
@font-face {
font-family: Calibri Light;
src: url(fonts/calibri/calibrilight.ttf) format('truetype');
}
@font-face {
font-family: Calibri Regular Italic;
src: url(fonts/calibri/calibriregularitalic.ttf) format('truetype');
}
@font-face {
font-family: Calibri Bold Italic;
src: url(fonts/calibri/calibribolditalic.ttf) format('truetype');
}
@font-face {
font-family: Calibri Light Italic;
src: url(fonts/calibri/calibrilightitalic.ttf) format('truetype');
}

p,a {
font-family: Calibri Regular, Hevetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
font-family: Calibri Light, Hevetica, Arial, sans-serif;
}