body {
  font-family:sans-serif;
  color: #b0b0b0;
  font-size:1em;
background-image:url(../logos/hhhi_4zu3.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
background-size:cover;
}

div#wrapper {
  margin: 10px auto;
  max-width: 50em;
  display: flex;
  flex-flow: row wrap;
}

/*   Links   */
.sw {color:#000000;font-family:"verdana",sans-serif;font-weight:normal;text-align:center;}
a.var:link {color:#b22222;border-color:#fe3939;font-family:"verdana",sans-serif;font-weight:bold;} 
a.var:visited {color:#b22222;font-family:"verdana",sans-serif;font-weight:bold;}
a.var:hover {color:#ffffff;text-decoration:none;font-family:"verdana",sans-serif;background-color:#101010;font-weight:bold;}
a.var:active {color:#ffffff;font-family:"verdana",sans-serif;font-weight:bold;}

a:link {color:#fe3939;border-color:#fe3939;font-family:"verdana",sans-serif;}
a:visited {color:#fe3939;font-family:"verdana",sans-serif;}
a:hover {color:#ffffff;text-decoration:none;font-family:"verdana",sans-serif;background-color:#101010;}
a:active {color:#fe3939;font-family:"verdana",sans-serif;}

/*  Linien   */
.eins  {margin-left:auto;margin-right:auto;text-align:center;background-color:#b0b0b0;height:1px; border:0px;}
.zwei  {margin-left:auto;margin-right:auto;text-align:center;background-color:#b0b0b0;height:2px; border:0px;}
.drei  {margin-left:auto;margin-right:auto;text-align:center;background-color:#b0b0b0;height:3px; border:0px;}
.fuenf {margin-left:auto;margin-right:auto;text-align:center;background-color:#b0b0b0;height:5px; border:0px;}
.kurz {margin-left:0;margin-right:auto;text-align:left;background-color:#b0b0b0;width:8em;height:1px; border:0px;}

/*   Seite lebenslauf   */
.einzug {margin-left: 15%;}

/*  Überschriften   */

h2,h3,h4 { font-family:"arial", sans-serif;}
h1 {border: 0px solid;margin: 0px;font-family:"tahoma","arial", sans-serif;font-size:3.5em;color: #f0f0f0;font-weight:800;}
h2 {border: 0px solid;margin: 0px;font-size:1.3em;font-weight:400;line-height:1.6em;}
h3 { font-size:1em; font-weight:200;line-height:1.25em;color:#ffa500;}
h4 { font-size:1em; font-weight:200;line-height:1.25em;color:#b0b0b0;text-decoration:underline;}
.h2 {border: 0px solid;margin: 0px;font-family:"tahoma","arial", sans-serif;font-size:1.2em;color: #f0f0f0;font-weight:bold;}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  

header {
  border: 0px solid;
  padding:1.9em;
  margin: 0px;  
  flex: 1 100%;
  align-items:center;
  justify-content: center;
}

header.menue {padding-top:0px;padding-left:2em;padding-bottom:0px;padding-right:2em;background-color:#e0e0e0;border-top: 3px solid #303030;}

.sticky {
  position: sticky;
  top: 0; /* Element bleibt oben im Viewport */
}

img, iframe {max-width:100%;text-align:center;}
.center {text-align:center;}

main, article, footer {
  border: 0px solid;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 2em;
  padding-bottom: 2em;
  margin: 0px;  
  flex: 1 100%;
}

nav, nav a {
  border: 0px solid;
  padding: 0px;
  margin: 3px;  
  flex: 1 100%;
}

header {
  background: #FE3939;
  border-color: black;
  display: flex;
  flex-flow: row wrap;  
  }
  
header * {
  flex: 1 1 0;
  }

header img {
  flex: 0 0 100px;
  height: 100px;
  border: 0px solid;
  padding: 10px;
  }  

header nav {
  flex: 1 1 100%;
  }
  
nav, nav ul, nav li {
  margin: 0;
  padding:0;
  border:none;
}

nav ul {
  display: flex;  
  flex-direction:row;
  flex-flow: row wrap;
}

nav li {
  list-style-type:none;
  margin: 0px 0;
  padding-left:1.5em;
  padding-right:1.5em;
  padding-top:2px;
  padding-bottom:3px;
}

nav a {
  display:inline-block;
  width:100%;
  background: #e0e0e0;
  border: 0px solid #c0c0c0;
  margin: 0;
  text-decoration: none;
  text-align: center;

  }

article {
  background: #101010;
  border-color: #fe3939;
  text-align:justify;
  }

footer {
  background: #101010;
  border-color: #fe3939;
  display: flex;
  flex-flow: row wrap;
  }
footer * {
  flex: 1 1 0;
  justify-content: space-between;
}
footer p {
  text-align:right;
}


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

@media all and (min-width: 600px) {
	
header img {
  flex: 0 0 100px;
  height: 100px;
  }

nav ul {
  flex-direction: row;
}

nav li {
  margin: 0 10px;
}	

}


/* Large screens */
@media all and (min-width: 800px) {
}