*{
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

body{
background-color: #fff;
font-family: Verdana, Arial;
color: #333;
}

/*@font-face {
font-family: 'comicsansms3';
src: url('../fonts/comicsansms3.ttf') format('truetype');
}*/

/* ----------------------------------------- header ----------------------------------------- */
header{
max-height: 80px;
width: 100%;
background-color: #2c6a83;
}

.nav_logo {
margin-left: 150px;
padding: 5px;
font-size: 40px;
}

.nav_logo a{
color: #FFF;
text-decoration: none;
}

.colorblack {
color: #a8d3e6;
}

/* ----------------------------------------- nav ----------------------------------------- */
nav{
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #7aaec6;
}

nav ul{
display: flex;
}

nav ul li{
height: 100%;
padding: 5px 40px 5px 40px;
list-style-type: none;
color: #333;
}

nav ul li a{
color: #333;
text-decoration: none;
font-size: 25px;
}

nav ul li a:hover{
color: #a8d3e6;
}

nav ul li .aktiv {
color: #df0101;
}

.toggle-button{
position: absolute;
top: 20px;
right: 15px;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 23px;
}

.toggle-button .bar{
height: 4px;
width: 100%;
background-color: #fff;
border-radius: 100px;
}

/* ----------------------------------------- section ----------------------------------------- */
section{
width: 100%;
height: 300px;
background: url(../images/starthg.jpg) 50% 50% no-repeat;
}

.section_content {
margin: 0 auto;
width: 70%;
}

.section_content h1 {
color: rgba(255, 255, 255, 0.9);
font-size: 7vw;
font-weight: 100;
}

.section_content h3 {
color: rgba(255, 255, 255, 0.9);
font-size: 3vw;
font-weight: 100;
}

/* ----------------------------------------- article mit Boxen 1-3 ----------------------------------------- */
article {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
background-color: #7aaec6;
}

.box1 {
flex: 1;
min-width: 200px;
max-width: 400px;
background-color: #a8d3e6;
border: 5px solid #2c6a83;
border-radius: 10px;
margin: 20px;
padding: 20px;
color: #2c6a83;
}

.box1 h3 {color: #2c6a83; text-decoration: underline; margin-bottom: 0.750em;}
.box1 a {color: #333; text-decoration: none;}
.box1 a:hover {color: #e53d4c;}
.box1 li {padding: 2px; list-style: none;}

.box2 {
flex: 1;
min-width: 200px;
max-width: 400px;
background-color: #a8d3e6;
border: 5px solid #2c6a83;
border-radius: 10px;
margin: 20px;
padding: 20px;
color: #2c6a83;
}

.box2 h3 {color: #2c6a83; text-decoration: underline; margin-bottom: 0.750em;}
.box2 a {color: #333; text-decoration: none;}
.box2 a:hover {color: #e53d4c;}
.box2 li {padding: 2px; list-style: none;}

.box3 {
flex: 1;
min-width: 200px;
max-width: 400px;
background-color: #a8d3e6;
border: 5px solid #2c6a83;
border-radius: 10px;
margin: 20px;
padding: 20px;
color: #2c6a83;
}

.box3 h3 {color:#2c6a83; text-decoration: underline; margin-bottom: 0.750em;}
.box3 a {color: #333; text-decoration: none;}
.box3 a:hover {color: #e53d4c;}
.box3 li {padding: 2px; list-style: none;}

article ul li .aktiv {
color: #e53d4c;
}

/* ----------------------------------------- main ----------------------------------------- */
main { 
width: 100%;
margin-top: 50px;
min-height: 180px;    
}

.content {
width: 65%;
margin: 0 auto;
color: #333;
}

.content a {
color: #e53d4c;
text-decoration: none;    
}

.content a:hover {
color: #e53d4c;
text-decoration: underline;
}

/* ----------------------------------------- Ueberschriften ----------------------------------------- */
.content h1 {font-size: 2.500em; font-weight: 100; color: #333; margin-bottom: 2.0em;}
.content h2 {font-size: 2.000em; font-weight: 100; color: #e53d4c; margin-bottom: 1.5em;}
.content h3 {font-size: 1.500em; line-height: 1.8em; font-weight: 100; color: #333; margin-bottom: 0.25em; margin-top: 2em;}
.content h4 {font-size: 1.000em; font-weight: bold; color: #333; margin-bottom: 0.75em;}

/* ----------------------------------------- Absaetze, Fettschrifft ----------------------------------------- */
.content p {line-height: 1.500em; text-align: justify; margin-bottom: 3.000em;}

/* ----------------------------------------- Links ----------------------------------------- */
.content a {text-decoration: none;}

/* ----------------------------------------- Listen ----------------------------------------- */
.content ul {list-style-type: none; margin-bottom: 20px;}
.content li {padding: 3px;}

/* ----------------------------------------- Linien ----------------------------------------- */
.content hr {border: 0; width: 100%; height: 1px; background-color: #333; margin-bottom: 2.500em; margin-top: 2.500em;}

/* ----------------------------------------- Formular ----------------------------------------- */
.content input,textarea {color: #333 ; border: 1px solid #333; border-radius: 5px; padding: 10px;}

/* ----------------------------------------- Text Dekoration ----------------------------------------- */
.line-through {text-decoration: line-through;}
.underline {text-decoration: underline;}

/* ----------------------------------------- Footer ----------------------------------------- */
footer {
width: 100%;
background-color: #2c6a83;
height: 60px;
margin-top: 60px;
}

.footer {
color: #fff;
text-align: center;
padding-top: 15px;
}

.footer a {
color: #fff;
text-decoration: none;
}

.footer a:hover {
color: #fff;
text-decoration: underline;
}

/* ----------------------------------------- @media < 650px ----------------------------------------- */
@media(max-width:650px){
.list-container{
display: none;
width: 100%;
}

.toggle-button{
display: flex;
}

.section_content h1 {
font-size: 11vw;
}

.section_content h3 {
font-size: 7vw;
}

nav{
flex-direction: column;
align-items: flex-start;
}

.list-container ul{
flex-direction: column;
width: 100%;
}

.list-container li{
text-align: center;
}

.list-container.active{
display: flex;
}

.nav_logo {
margin-left: 0;
padding: 10px;
font-size: 35px;
color: #fff; 
}

.content {
width: 95%;
font-size: 95%;
}

.buttons {
text-align: center;
}
}