* {
	--f_maindunkel: #006cb5;
/*	--f_maindunkel: #5995da;*/
	--f_mainhell: #d6e9fe;
	--f_hintergrund: #fff;
	--f_gruen: #33a93d;
	--f_header_back: var(--f_hintergrund);
	--f_header: var(--f_maindunkel);
	
	
  margin: 2;
  padding: 2;
  box-sizing: border-box;
  flex-direction: row;
  justify-content: center;
  align-items: center;
	font:Verdana, Geneva, sans-serif;
	font-family: Verdana, Geneva, sans-serif;
}

p {
	font:Verdana, Geneva, sans-serif;
	font-family: Verdana, Geneva, sans-serif;
	font-size:14px;
	font-weight:600;
	color: var(--f_maindunkel);
}
h1{
	font:Verdana, Geneva, sans-serif;
	font-family: Verdana, Geneva, sans-serif;
	font-size:18px;
    font-weight:bold;
	color: var(--f_maindunkel);
}
td li {
	font:Verdana, Geneva, sans-serif;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:600;
	color: var(--f_maindunkel);
}

.links {
  border: 1px solid #fff;  /* For debugging */
  display: flex;
  justify-content: flex-end;
}

.login {
  margin-left: 50px;	
}

.date{
  border: 1px solid #fff;  /* For debugging */
}
.header-container {
  display: flex;
  color: var(--f_header);
  background-color: var(--f_header_back);
  display: flex;
  justify-content: center;
}

.header {
  display: flex;
  width: 1300px;
  height: 100px;
/*  align-items: center;*/
/*  align-items: stretch;*/
  justify-content: space-between;
}

.social,
.subscribe {
  display: flex;
  margin: 20px auto;
  width: 250px;
  color: var(--f_maindunkel);
  border-radius: 5px;
  border: solid 3px var(--f_maindunkel);
  background: var(--f_hintergrund);
  
}
.slogan{
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  width: 250px;
  color: var(--f_hintergrund);
  border-radius: 5px;
  border: solid 3px var(--f_gruen);
  background: var(--f_gruen);
  font-style:italic;
  font-weight:bold;
  
}

.logo{
  display: flex;
  margin: 20px auto;
  color: var(--f_maindunkel);
  background: var(--f_hintergrund);

}

.intro-grid-container {
  display: flex;
  justify-content: center;
/*  border: 1px solid var(--f_maindunkel);*/
/*  width: 1000px;*/
/*  align-items: stretch;*/
  background: var(--f_hintergrund);
}

.intro-grid {
  width: 1100px;
  display: flex;
/*  justify-content: center;*/
  flex-wrap: wrap;
/*  border: 5px solid #0FC;*/
/*  flex-direction: column;*/
/*  align-item: flex-start;*/
  align-items: stretch;
  justify-content: center;
  background: var(--f_hintergrund);
  
}


.block-grid-container {
  display: flex;
  justify-content: center;
/*  border: 1px solid var(--f_maindunkel);*/
/*  width: 1000px;*/
/*  align-items: stretch;*/
  background: var(--f_hintergrund);
}

.block-grid {
  width: 1100px;
  display: flex;
/*  justify-content: center;*/
  flex-wrap: wrap;
/*  border: 5px solid #0FC;*/
/*  flex-direction: column;*/
/*  align-item: flex-start;*/
  align-items: stretch;
  justify-content: center;
  background: var(--f_hintergrund);
  
}

.block-grid-item {
  border: 2px solid var(--f_maindunkel);
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  width: 320px;
  flex-direction: column;
  background: #fff;
  color: var(--f_maindunkel);
  
  
/*  height: 350px;*/
/*  align-item: center;*/
/*  justify-content: center;*/
/*  flex-direction: column;*/
/*  align-item: flex-start;*/
  /*align-items: stretch;*/
}

.block-grid-bigitem {
  border: 2px solid var(--f_maindunkel);
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  flex-basis: 640px;
  width: 320px;
  flex-direction: column;
  
/*  height: 350px;*/
/*  align-item: center;*/
/*  justify-content: center;*/
/*  flex-direction: column;*/
/*  align-item: flex-start;*/
  /*align-items: stretch;*/
}
.block-grid-introitem {
  margin: 5px;
  padding: 5px;
  flex-direction: column;
  flex-basis: 900px;
}
.block-grid-tableitem {
  margin: 5px;
  padding: 5px;
  flex-direction: column;
  flex-basis: 900px;
}

.footer-container {
  display: flex;
  color: var(--f_header);
  background-color: var(--f_mainhell);
/*  background-color: var(--f_hintergrund);*/
  display: flex;
  justify-content: center;
}

.footer {
  width: 1100px;
  display: flex;
/*  border-radius: 5px;*/
/*  border: solid 3px var(--f_maindunkel);*/
  flex-direction: row;
 
}

.footer-item {
  display: flex;
  background-color: var(--f_maindhell);
/*  height: 100px;*/
  flex: 1;
  align-items: center;
  justify-content: center;
}

.footer-one,
.footer-three {
  background-color: var(--f_mainhell);
  flex: initial;
  width: 300px;
}


.wrapper-container {
  display: flex;
  justify-content: center;
/*  border: 1px solid var(--f_maindunkel);*/
/*  width: 1000px;*/
/*  align-items: stretch;*/
  background: var(--f_mainhell	);
}

.wrapper {
  display: flex;
/*  width: 620px;*/
/*  margin: 20px auto;
  border-radius: 10px;
  border: solid 3px var(--f_maindunkel);*/
/*  background: var(--f_hintergrund);*/
  background: var(--f_mainhell);
/*  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);*/
  width: 960px;
  align-items: center;
  justify-content: center;

}

.navigation {
  list-style: none;
  padding: 0;
  margin: 0;	
  background: var(--f_mainhell);
  /*border-top: solid 3px var(--f_maindunkel);
  border-bottom: solid 3px var(--f_maindunkel)*/;
  /*
  box-shadow:  0px -2px 3px -1px rgba(0, 0, 0, 1);
  */
}

.navigation li {
  float: left;
}

.navigation li:hover {
  background: var(--f_hintergrund);
}

/*
.navigation li:first-child {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 0 0 5px;
}
*/

.navigation li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  line-height: 30px;
  color: var(--f_maindunkel);
}

.navigation ul {
  display: none;
  position: absolute;
/*  position: relative;*/
  list-style: none;
  /*float: left;*/
  margin-left: -3px;
  padding: 0;
/*  overflow: hidden;*/
}

.navigation ul li {
/*  float: none;*/
  float: none;
  position: relative;
}

.navigation li:hover > ul {
  display: block;
  background: var(--f_mainhell);
  border: solid 3px var(--f_maindunkel);
  border-top: 0;
  
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  
  -webkit-box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.navigation li:hover > ul li:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.navigation li li a:hover {
  background: var(--f_hintergrund);
}

.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
.navigation ul ul
{
  display: none;
  position: absolute;
  list-style: none;
  margin-left: -3px;
  padding: 0;
  left: 100%;
  top: 0;
/*  width: auto;*/
}
.navigation ul ul li {
  float: none;
/*  position: relative;*/
}
.navigation ul a {
  display: block;
}
.navigation ul ul a {
  display: block;
}
.unten
{
	<div class='footer-container'>
        <div class='footer'>
          <div class='footer-item footer-one'>
	          <a href="flexbox_01.html"><img src="images/gutgesell__200px.jpg" width="200" height="38" alt="logo"></a>
          </div>
          <div class='footer-item footer-two'><p>GUTGESELL GmbH - Arenskule 9 - 21339 L&uuml;neburg<br>info@gutgesell.com - Fax (+49)04131 75318-99</p></div>
          <div class='footer-item footer-three'><p>Servicetelefon<br>04131 75318-0</p></div>
        </div>
	</div>
	
}