/* Notizen
* = Universalselektor
header, html = mehrere html-tags
h1 li = html-tag innerhalb eines tags
.menue = class
#logo = id
::before, ::after = Pseudoelemente
:focus, :hover, :active = (dynamische) Pseudoklassen
> ~ * 0 Kombinatoren

Box-Modell von aussen nach innen
margin: Aussenabstände
border: Begrenzung
padding: Innenabstände
width/heigt: Inhalt

    Eine Angabe: für alle 4 Abstände gilt derselbe Wert
    Zwei Angaben: 1. Wert für margin-top und margin-bottom, 2. Wert für margin-left und margin-right
    Drei Angaben: 1. Wert für margin-top, 2. Wert für margin-left und margin-right, 3. Wert für margin-bottom
    Vier Angaben: 1. Wert für margin-top, 2. Wert für margin-right, 3. Wert für margin-bottom, 4. Wert für margin-left 
 
 */
html {
}

body {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row;
	flex-flow: row;
	font-family: Arial, Helvetica, sans-serif;
	max-width: 1100px;
	margin: auto;
	background-image: url("grafik/notenschluessel.png");
	background-position: center;
	background-size: 30vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

main {								/* main ist ja zunächst ein flex-Element unter body*/
    display: table;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	width: calc(100% - 3em);
	min-height: 0;					/*Mist, hier fehlt wieder mal ein Kommentar, ich weiss nicht mehr, warum ich diese Zeile eingefügt habe...*/
}

header {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	justify-content: center; 
	border-radius: 0px 0px 0.5em 0px ;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
}
header picture{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	justify-content: center; 
}

article {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	justify-content: center;
	min-height: 0;
	border-radius: 0px 0px 0.5em 0px ;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
}
article p {
	font-size: 1.2em;
	text-align: center;
	font-family: sans-serif;
}

aside {
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	justify-content: center;
	min-height: 0;
	box-sizing:border-box;
	box-align: center;
	border-radius: 0px 0px 0.5em 0px ;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
}
aside p {
	font-size: 1.2em;
	text-align: center;
	font-family: sans-serif;
}

#fbook {
	width: 300px;
	height: 400px;
	border-width: 0;
}

#termine {
    height: 50vh;
    width: 100%;
	border-width: 0;
}

footer {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	border-radius: 0px 0px 0.5em 0px ;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
}
footer p{
	font-size: 0.7em;
	font-family: sans-serif;
}

img {
	width: 70%;
}
.imgHamburger {
	width: 0px;	
}
.imgInstrument {
	width: 80px;
	padding: 10px;
	margin: 10px;
	background-color: #FFF; 
	border: 1px solid #000;	
}
.imgWochentag {
	width: 40px;	
}
.imgSponsoren {
	width: 70%;
	min-width: 200px;
}

nav {											/*Allgemeine Einstellungen für das Menü*/
	-webkit-flex: 0 0 content;
	flex: 0 0 content;
	-ms-flex: 0 0 content;
	background-color: #0B3CA3;
}
nav input[type="checkbox"]+label{				/* Checkbox-Label für das Menü ausblenden, "+" = Label als Nachbar von input  */
	font: 0/0 serif;
	z-index: -1;
}
nav input[type="checkbox"] {					/* Die checkbox kann sowieso weg, wir brauchen nur das label */
    position: absolute;
    z-index: -1;
}
nav ul {
    margin: 0;
	padding: 0;
	width: auto;
	background-color: #0B3CA3;					/*Damit auch das ausklappende Menue einen blauen Hintergrund hat, besonders bei 700er Breite (siehe unten)*/
	border-radius: 0px 0px 0.5em 0px ;			/*Damit auch das ausklappende Menue unten rechts einen Radius hat, dito*/
}
nav li {
    margin: 0.3em 0.2em;
	padding: 0;
	list-style: none;							/*Damit keine Auflistungs-Punkte angezeigt werden*/
}
nav p {											/*Vorgaben für die p-Elemente (aktueller Menü-Punkt)*/
	display: block;
	width: auto;
	margin: 0;
	padding: 0.4em;
	text-decoration: none;
	font-weight: normal;
	border-radius: 0px;
	color: grey;
}
nav a {											/*Vorgaben für die a-Elemente (Menü-Punkte)*/
	display: block;
	width: 7em;
	margin: 0;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	border-radius: 0px 0px 0.5em 0px ;
	color: white;
}
nav a:focus,									/*Vorgaben für die a-Elementebeim Überfahren*/
nav a:hover {
	color: #0B3CA3;
	background-color: white;
}
nav ul ul ul {
	margin: 0 1em;
}
nav ul ul ul a {								/*Vorgaben für die a-Elemente (Menü-Punkte)*/
	padding: 0.2em;
	font-weight: normal;
}

@media screen and (max-width:700px){
img {
	width: 80%;
}
.imgHamburger {
	width: 70%;	
}

nav ul {
	width: 3em;									/*Das oberste Menü mit dem Menü-Button schmal machen*/
}
nav input[type="checkbox"]+label{				/* Menü-Button einblenden, "+" = Label als Nachbar von input */
	font: inherit;
	font-size: 2em;
	color: white;
	z-index: 10;	
}
input:not(:checked) ~ul {						/* Navigation ausblenden, "~" = Geschwisterelemente, weil die ul nicht von input eingeschlossen sind*/
	font: 0/0 serif;
	z-index: -1;
	transition: font 0.5s;
}
nav input:checked ~ul {							/*  Navigation einblenden */
	width: 9em;
	position: absolute;
	font: inherit;
	z-index: 1;
	transition: font 0.5s;
}
} /*@media*/