body 
{
  max-width: 75em;
  margin: 0 auto; 
  padding: 1em;

}



h1 
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 2.5em; 
    font-weight: 500; 
    color: #0070C0;  
    background-color:#D1DCFF; 
    margin-bottom: 0.2em; 
}

@media (max-width: 55em) {
    h1 {
    font-size: 2em;
    }
}


h2 
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 1.5em; 
    font-weight: 800; 
    color: #0070C0;  
}

h3 
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 1.2em; 
    font-weight: 800; 
    color: #0070C0;  
}


#T7 
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 1.2em;   
    font-weight: 500; 
    color: #7A0082;
}


#T8 
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 1em;   
    font-weight: 500; 
    color: #999999;
}

#T9 
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 0.8em; 
    font-weight: 500; 
    color: #999999;  
}

p, #T1
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 1em;
    font-weight: 500;
    color: #222222;  
}




a  
{ 
    font-family: Arial; 
    font-style: regular; 
    font-size: 1.0em; 
}



a:link { text-decoration:none; font-weight:bold; color:#999999; }
a:visited { text-decoration:none; font-weight:bold; color:#999999; }
a:hover { text-decoration:shadow; font-weight:bold; color:#0070C0; }
a:active { text-decoration:none; font-weight:bold; color:#0070C0; }




#box_red 
{ 
    padding: 0.5em;
    margin: 1em;
    background-color: lightpink;
    border: 0.2em solid red; 
}

#box_green
{ 
    padding: 0.5em;
    margin: 1em;
    background-color: lightgreen;
    border: 0.2em solid green; 
}





#gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 1em;
    margin: 10px;
}


#gallery > figcaption {
    grid-column: 1 / -1;
}
    
figure {
    position: relative;
    margin: 0;
    padding: 0;
    border: thin solid lightgrey;
    background: white;
    width: 100%;
}

@media (min-width: 25em) {
    figure {
    width: 15em;
    float: right;
    }
}

figcaption {
    padding: 0;
    text-align: right;
}
 
    
#gallery figure {
    position: relative;
}

figure img {
    width: 100%;
    display: block;
} 

#gallery > figure > figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 3em;
    color: white;
    background: rgba(0,0,0,0);
} 
  








nav ul {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, 15em);

}

nav li {
	list-style: none;
	margin: 0.5em;
	padding: 0;
	font-size: 1em;
}

@media (min-width: 60em) {
	nav ul {
		flex-direction: row;
	}
	nav li {
		flex: 1;
		font-size: 1em;
	}
}



nav a {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	border: 1px solid #0070C0;
	border-radius: 2px;
	box-shadow: 0 5px 10px white inset;
	transition: all .25s ease-in;
}
nav a:link { text-decoration:none; font-weight:bold; color:#0070C0; background-color: #FFFFFF;}
nav a:visited { text-decoration:none; font-weight:bold; color:#0070C0; background-color: #FFFFFF;}
nav a:hover { text-decoration:shadow; font-weight:bold; color:#0070C0; 	background-color: #D1DCFF;}
nav a:focus { text-decoration:shadow; font-weight:bold; color:#0070C0; 	background-color: #D1DCFF;}
nav a:active { text-decoration:none; font-weight:bold; color:#0070C0; background-color: #D1DCFF;}




hr { display: block; height: 0px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }


.Imagebild {
height: 10em;    
margin-left: 15px;
}

@media (max-width: 55em) {
.Imagebild {
   height: 5em;
    }
}