* {
    box-sizing: border-box;
    padding: 0;
    /* margin-top: 20px; */
    word-wrap: break-word;
}
.vmail:after {
    content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);

  }
body {
    /* aus Wiki.selfhtml */
    /* Hintergrundfarbe der gesamten Seite */
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;

    /* Gesamtbreite */
    margin: 0 auto;
    max-width: 70em;
    

}
.container {
	/* display: flex; */
    max-width: 100%;
    margin: 1em;
    margin-left:0.66em;
    /* border: 2px dotted; */
    /* Hintergrundfarbe der einzelnen Container */
    background-color:#d8e7de;
    border-radius: 0.5em;
}
.flex-container {
	display: flex;
    max-width: 100%;
    margin: 1em;
    margin-left:0.66em;
    /* border: 2px dotted; */
    /* Hintergrundfarbe der einzelnen Container */
    background-color:#d8e7de;
    border-radius: 0.5em;
}
.container a:hover {
    color: blue;
}
.flex-container-nav {
    display: flex;
    max-width: 80em;
    margin: 0em;
    /* border: 2px dotted; */
    /* Hintergrundfarbe der einzelnen Container */
    background-color:#888894;
    border-radius: 0.2em;
}       

.flex-item .flex-list{
	/* border: 1px solid; */
	margin: .5em;
    padding: .5em;
    /* Hintergrundfarbe der Boxen */
    /* background-color: #88321d; */
   
}
 .flex-item.nav {
	/* border: 1px solid;
	margin: .5em;
    padding: .5em;*/
    /* Hintergrundfarbe Navleiste */
    background: #888894;
    width: 8em;
   
} 
.nav {
    /* background-color: rgb(148, 209, 17); */
    padding: .10em;
    border-radius: 0.2em;
    text-decoration: none;
    color: #d8e7e7;
 
    
}
.nav a {
    /* Schriftfarbe Navigation */
    color: rgb(22, 21, 21);
    text-decoration: none;
}

.box_100 a:hover {
    /* Schriftfarbe Navigation */
    color: rgb(164, 216, 23);
    text-decoration: none;
}
.box_100 a {
    /* Schriftfarbe Navigation */
    color: rgb(31, 216, 31);
}
.nav a:hover {
    /* Schriftfarbe on mouse over */
    color: #fff;

}
.no {
	flex-wrap: nowrap;
}

.wrap {
	flex-wrap: wrap;
}

.wrap-reverse {
	flex-wrap: wrap-reverse;
}

.flex-item .flex-list {
	/* font-weight: bold; */
	text-align: left;
    width: 100%;
    text-decoration: none;

}
p.flex-list {
	/* font-weight: bold; */
	text-align: left;
    width: 100%;
    text-decoration: none;

}

header {
    width: 100%;
    /* Hintergrundfarbe header */
    background-color:#d8e7e7;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    overflow: auto;
}

header img {
    /* float: right; */
       float: left;
    margin: 1%;
    border-radius: 5%;
}

header h1 {
    font-size: 2.2em;
    margin: 1em 1em 1em 30%;
}

header h2 {
    font-size: 1.3em;
    margin-left: 30%;
;
}
.box {
    width: 100%;
    border-radius:0.2em;
    border-width: 0px;
    border-style: solid;
    border-color: rgba(195, 31, 31, 0.3);
    -webkit-box-shadow:  3px 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow:  10px 10px 3px rgba(0, 0, 0, 0.2);
    color: #444;
    color: rgba(0, 0, 0, 0.8); 
    padding: 1em;
    margin: 0 0 1.5em 0;
    margin: 1em;
    /* Hintergrundfarbe boxen */
    background-color:rgb(216, 231, 222);
    /* float: left; */
}
.box_100 {
    width: 100%;
    color: white;
    border-radius: 0.3em;
    padding: 1.42857em;
    /* margin: 1em; */
    /* Hintergrundfarbe boxen */
    background-color:#33333f;
    /* float: left; */
    border-width: 2em;
}

#hauptbereich {
    width: 100%;
    /* Hintergrudfarbe Hauptbereich ohne header */
    background-image: linear-gradient(#006060, rgb(216, 231, 231));
    /* background-color:rgb(189, 189, 206); */
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
}
@media (min-width: 768px) {
.box {
    width: 50%;
}  
p.flex-list {
	/* font-weight: bold; */
	text-align: left;
    width: 20%;
    text-decoration: none;

}  
}