@charset "utf-8";
                       
UE {font-size:2.7em; color:dodgerblue;}
h1 {font-size:1.3em; color:firebrick ;}
h2 {font-size:1.3rem; color:dodgerblue;}
h3 {font-size:1.1em; color:firebrick ;}
h4 {font-size:1.1em; color:dodgerblue;}
h5 {font-size:1em; color:black;}
h6 {color:black;}

t150rb {font-size:1.1em; color:firebrick; font-weight: bold;}
t150bb {font-size:1.1em; color:dodgerblue; font-weight: bold;}
te {font-size:2.8rem; color:firebrick; font-style: italic;}
t75b {font-size:0.8em; color:black;}
tb {font-size: 1em; color:black; font-weight: bold;}
p {color:black;}
a {color:black; text-decoration: none;}
aa {color:firebrick;  font-weight: bold;}
bu {font-size:1.5em; color:firebrick; font-weight: bold; font-family: Arial, Helvetica, sans-serif;} /*Bildunterschrift*/

body {
	display: flex;
	flex-flow: row wrap;
    font-size: 100.1%;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    max-width: 73em;
    background: lightgray;
    background: url("18.jpeg"); 
}
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

header,
nav,
nav a,
article,
section,
aside,
footer {
	border-radius: 0.5em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
	flex: 1 100%;    
}

header {
	background: #d1ebf6;
	border-color: #d5d5d5;
	display: flex;
	flex-flow: row wrap;
}

header * {
	flex: 1 1 0%;
}

header img {
	flex: 0 0 0%;
	width: auto;                    
    padding:  0em 0em 0em 0em;
}

header nav {
	flex: 1 1 100%;
}

nav,
nav ul,
nav li {
	margin: 0;
	padding: 0;
	border: none;
}

nav ul {
	display: flex;
	flex-direction: column;
}

nav li {
	list-style-type: none;
	margin: 1.0em 0;
	flex: 1 1 100%;
}

nav a {
	display: inline-block;
	width: 95%;
	background: #fffbf0;
	border: 1px solid dodgerblue;
	margin: 0;
	text-decoration: none;
	
}

nav a:hover,
nav a:focus {
	background-color: firebrick;
    color: snow;  font-weight: bold;
}

section {
	background: #F1F3F4;
	border-color: dodgerblue;
}

article {
	background: transparent;
	border-color: #d5d5d5;
    text-align: left;
}

article img { border: 0;
    border-radius: 0.5em;
width: 100%;
display: flex;

}

aside {
	background: transparent;
	border-color: #d5d5d5;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	display: flex;
	flex-flow: row wrap;
}

footer * {
	flex: 1 1 0%;
	justify-content: space-between;
}

footer p {
	text-align: center;
}


/*  Smart Phones und Tablets mit mittlerer Auflösung */

 @media all and (min-width: 35em) {
	header img {
		margin-right: 1em;
	}
	nav ul {
		flex-direction: row;
	}
	nav li {
		margin: 0 0.8em;
		flex: 1 1 0%;
	}
	article {
		order: 2;
	}
	aside {
		order: 3;
	}
	/* / {
		/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		/* flex: 1 1 auto;
		order: 4;
	}*/
	footer {
		order: 4;
	}
}
/* Large screens */

@media all and (min-width: 50em) {
	article {
		/* Der Article wird 2.5x so breit wie die beiden asides! */
		
		order: 3;
		flex: 5 1 0%;
	}
	aside {
		flex: 1.5 1 0%;
	}
	
}



/*Schrift*/                        
achtung {
    width: 25rem;
    height: 25rem;
    font-size: 1.5em; color:black; font-weight: bold;   
    text-align: center;
        background-image: linear-gradient(yellow, orange, red);
        
        }       
/*
                         body{
                                                        
                        }
                        
                        nav {                                
                            position: fixed;    
                            float: left;
                                width: 11.5rem;
                                padding: 0.5rem;
                                /*background: rgb(219, 238, 250); /*  Hintergrundfarbe vom Navigationsfeld */
/*                                border-radius: 0.5rem 0rem 0.0rem 0.5rem;
                                height: auto                                
                        }

                        

                        nav ul {
                                padding:0.1em;
                                border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
                        }

                        nav li {
                                list-style: none;
                                margin: 0.1em;
                                padding: 0.1em;
                                
                        }

                        nav a {
                                display: block;
                                padding: 0.3em;
                                /*font-weight: bold;*/
/*                                text-decoration: none;
                                border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
                                border: 0em solid;
                                border-color: dodgerblue;
                                color: #000000;  /* Schrift im Button 
                        }*/
                        nav a[href="#"] {
                            color: snow;  font-weight: bold;
                            background: dodgerblue;
                            border-radius: 0.8rem;
                            box-shadow: 8px 5px 5px black;
                        }
                        
                        nav a[aria-current="page"] {
                        color: snow;  font-weight: bold;
                        background: firebrick;
                        border-radius: 0.8rem;
                        box-shadow: 5px 5px 5px black;
                        }

                        nav ul a:hover        {
                                color: gold; /* Schrift im Button wenn active */
                                background: dodgerblue; /* Hintergrund vom Button wenn active */
                                font-weight: bold;
                                margin-right: 0;
                                border-radius: 0.8rem;
                                border: black;
                                box-shadow: 10px 5px 5px black;
                                
                        }

/*Bildwechsel*/

.gallery {
        position: relative;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
    }
    
    .gallery figure {
        position: absolute;
        display: inline-block;
        align-items: center;
        justify-content: center;
        z-index: auto;
        animation: wechseln 15s infinite;
    }
    
    .gallery figure:last-of-type {
        position: relative;
    }
    
    .gallery > figure figcaption {
        position: absolute;
        left: 1em;
        font-size: 1.2em;
        font-weight: bold;
        bottom: 0.5em;
        z-index: auto;
        color: rgb(223, 210, 32);
        text-shadow: 0 0 5px black;
    }
    
    @keyframes wechseln {
        0% {
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        40% {
            opacity: 1;
        }
        60% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    
    .gallery figure:nth-of-type(2) {
        animation-delay: 5s;
        opacity: 0;
    }
    
    .gallery figure:nth-of-type(3) {
        animation-delay: 10s;
        opacity: 0;
    }
    
              
                       

/*                        main {

                                display: block;
                                white-space: normal;
                                hyphens: auto;
                                width: 57.4rem; 
                                /*background: rgb(219, 238, 250); /*  Hintergrundfarbe Hauptseite */
/*                                margin-left: 12rem;
                               
                                padding: 1rem;
                                border-radius: 0rem 0.5rem 0.5rem 0.0rem;
                             }

                        main img { border: 0;
                                border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
                        
                            
                        
                     } */
                             

                        table {
                                width: 23rem;
                                
                                height: auto;
                               
                                display: left;
                                padding: .2rem .2rem;
                                text-align: left;
                               
                                
                        }


                              tr {
                                 background-color: snow;
                        }

                              tr:nth-child(odd) {
                                 background-color: #ffffff;
                        }
                        
    
.bild {  /*erzeugt Bild mit eingeblendetem Text*/
    position: relative;
    margin: auto; /*höhenabstand seitenabstand*/
    background: none;
    border: none;        
}

.bild > figure figcaption {
    position: absolute;
    left: 8.6rem;
    font-size: 1.9rem;
    font-weight: bold; font-style: italic;
    top: 0.3rem;
    
    color: yellow;
    text-shadow: 0 0 5px black;
}