/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
    margin: 0;
    padding: 0;
}

/* Definition des kompletten Bildschirmes*/
html, body {
    margin: 0;
	padding: 0;
    font-family: 'Roboto', sans-serif;
    background-image: url(bilder/ap-hintergrund.jpg);
    
    
/*
height:100%;
overflow:auto;
*/
}

/*Definition der 1. Überschrift*/
h1 {
    color: #656565;
    font-size: 2.5em;
    line-height: 1.4em;
    margin: 0.3em 0em 0em 0em;
}

/*Definition der 2. Überschrift*/
h2 {
    color: black;
    font-size: 1.5em;
    line-height: 1.5em;
}

/*Schreibschrift (in span), speziell bei Unterschrift*/
.schreibschrift {
    color: blue;
    font-size: 2em;
    line-height: 1.3em;
    font-family: 'Waiting for the Sunrise', cursive;
}


/*Definition der Seite mit div wrapper*/
#wrapper {
	display: flex;
	flex-direction: column; /*Grundsätzlich von unten nach oben dargestellt*/
}

header { 
    height: 8em;
}


/*Darstellung des Logos - Andreas Püschel*/
header img {
    position: absolute;
    left: 1em;
    top: 1em;
    border-radius: 10px 10px 10px 10px;
}

/*Kopfzeilenschrift definieren*/
header p {
    color: #e5d629;
    padding: 0em 0em 2em 3.5em;
    font-size: 5em;
    text-align: left;
    text-shadow: 2px 2px 10px black;
}

/*Definition nav, article und aside*/
#mehrspaltig { 
    flex: 1; /* Damit die ganze Seite ausgefüllt wird*/
    display: flex; 
    flex-direction: row; /*Grundsätzlich von links nach rechts dargestellt*/
/*margin-bottom:40px;*/
}

nav {
    flex: 1.5;
}

nav ul {
    font-size: 1em;
    line-height: 1.5em;
    list-style-type: none;
    background-color: gray;
}

nav a {
    padding: 0 0 0 1em;
    color: #e5d629;
    text-decoration: none;
    text-shadow: 1px 1px 1px black;
    width: 100%;
    display:inline-block;
}

nav a:hover {
    color: white;
    background-image: url(bilder/dreieck.png);
    background-repeat: no-repeat;
    background-position: left center;
    border: 2px solid #e5d629;
}

nav a:visited { 
    color:#f0f0f0;
}


article { 
    background:rgba(255,255,255,0.95);
/*    background-color: #f0f0f0;*/
	flex: 6; 
    padding-left: 1em;
    box-shadow: -4px -4px 5px #f0f0f0;
   }


article p {
    padding: 0.5em 1em 0 0;
}


article ul {
    margin: 1em 1em 1em 1em;
    line-height: 1.5em;
    list-style-type:disc;
}

figure, .bild-links {
    float: left;
    margin: 1em 3em 1em 0em;
}

figcaption {
    font-size: 0.5em;
    text-align: center;
}

.bild-rechts {
    float: right;
    margin: 0.7em 1em 0em 0.5em;
}

aside {
    margin:0em; /* wegen linker oberer Ecke, bei Einsatz aside prüfen */
    flex: 1;
    box-shadow: -4px 0 10px grey;
}

aside ul {
    list-style-type: none;
}

footer { 
	position: fixed;
    background-color: lightgrey;
    padding-left: 1em;
    bottom: 0;
    width: 100%;
    height: 4em;
}

footer p {
    font-size: 0.8em;
    color: black;
    
}

footer div {
    position: absolute;
    color: darkblue;
    line-height: 0.9em;
 }

footer b {
    color: darkblue;
    text-decoration-line: underline;
   }

footer b:hover {
    cursor: pointer;
    color: black;
}

#anschriftanzeigen {
    width: 200px;
    float:left;
}

#anschrift {
    margin-top: 1.1em;
    left: 20px;
    display: none;
}

#kontaktanzeigen {
    width: 200px;
    float:left;  
}

#kontakt  {
    margin-top: 1.1em;
    left: 220px;
    display: none;
}

footer p {
    font-size: 0.8em;
    color: black;
}

footer a {
    color: darkblue;
    cursor: pointer;
}

footer #einsterneinberg {
    position: absolute;
    font-size: 0.8em;
    right: 5em;
    bottom: 0.5em;
}

.menue-button {
        display: none;
 }


/*Definition der Aktion bei verkleinertem Bildschirm HIER bis 76.5em 
- Schriftgröße der Überschrift wird kleiner
*/
@media only screen and (max-width: 76.5em) {
    
        header p {
        padding: 0.1em 0em 0em 4.5em;
        font-size: 4em;
    }
    
}

/*Definition der Aktion bei verkleinertem Bildschirm HIER bis 76.5em 
- Schriftgröße der Überschrift wird kleiner
*/
@media only screen and (max-width: 66em) {
    
        header p {
        padding: 0.3em 0em 0em 5.5em;
        font-size: 3.3em;
        line-height: 1em;
    }
    
}


/*Definition der Aktion bei verkleinertem Bildschirm HIER bis 45em 
- Menuebutton anstatt Menüleiste + grau hinterlegt
- Größe und Position Überschrift verändert sich
- Schriftgrößen werden kleiner
*/
@media only screen and (max-width: 45em) {

    footer #einsterneinberg, #anschriftanzeigen, #anschrift, nav ul, aside, header img {
    display: none;
    }
    
     #mehrspaltig { 
       flex-direction:column; 
    }
     
     .menue-button {
        width: 45em;
        font-size: 1.25em;
        display: block;
        background-color: gray;
        color: white;
        position: absolute;
        padding-left: 1em;
        top: 0em;
        cursor: pointer;
        text-decoration: none;
        }
    
    .menue-button:hover {
            font-weight: bold;
            background-image: url(bilder/dreieck.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-transform: uppercase;
    }
    
    #nav-menue:target ul {
                display: block;
                float: none;
                margin: 0 0;
                padding: 0.5em 0 0 0.5em;
    }

    #nav-menue:target .menue-button-beschreibung-open {
        display: none;
    }
       
    header p {
        padding: 1em 0em 0em 0.5em;
        font-size: 2.5em;
    }
        
    nav ul {
        font-size: 1em;
        line-height: 1.5em;
    }
    
    /*Definition der 1. Überschrift*/
    h1 {
        font-size: 1.6em;
    }

    /*Definition der 2. Überschrift*/
    h2 {
        font-size: 1.2em;
    }
    
    article p {
        font-size: 0.8em;
    }
    
    #kontakt  {
        left: 1em;
    }

}