@charset "UTF-8";
/* CSS Document */
@import "max-600.css"screen and (max-width: 600px);
@import "min-600.css"screen and (min-width: 600px);
@import "min-768.css"screen and (min-width: 768px);
@import "min-992.css"screen and (min-width: 992px);
@import "min-1200.css"screen and (min-width: 1200px);
@import "min-1500.css"screen and (min-width: 1500px);
@import "animationen.css";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  text-align: left;
}
/*	
	|| L I N K S
*/
a:link {
  color: black;
}
a:visited {
  color: black;
}
a:hover {
  color: darkred;
}
a:active {
  color: darkred;
}
/*	
	|| H E A D E R 
	|| Logo und Navigationsleiste
*/
header {
  box-sizing: border-box;
  position: relative;
  background: darkred;
  margin: auto;
}
header img {
  display: block;
  float: left;
  margin-left: 1vw;
}
header nav {
  display: inline;
  float: right;
  position: relative;
  width: 50%;
  margin-right: 1vw;
}
header nav img {
  display: block;
  float: right;
}
/*	
	|| H E R O
	|| font-size immer in "vw" angeben, damit Text responsiv ist)	
*/
.hero {
  width: 100%;
  height: auto;
}
.hero img {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  animation-name: opacity;
  animation-delay: 3s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}
/*	
	|| I N T R O
	|| font-size immer in "vw" angeben, damit Text responsiv ist)	
*/
.intro {
  width: 100%;
  color: darkred;
  font-weight: 600;
  text-align: center;
  position: relative;
  animation-name: hero;
  animation-duration: 4s;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
/* 
	|| A R T I K E L	

*/
.artikel {
  color: black;
  width: 100%;
  height: auto;
  position: relative;
  background-color: rgba(0, 0, 0, 0.10);
  opacity: 0;
  /*  Text  */
  text-align: left;
  /*  Animation */
  animation-name: opacity;
  animation-delay: 3s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}
.artikel img {
  display: block;
  height: auto;
}
.artikel p {
  display: block;
  width: 70%;
  padding: 0 1em 0 1em;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* 
	|| F O O T E R	

*/
footer {
  height: auto;
  width: 100%;
  background-color: darkgrey;
  opacity: 0;
  color: white;
  /*  Animation */
  animation-name: opacity;
  animation-delay: 3s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}
footer div {
  width: 25%;
  margin: 1vw;
  padding: 1vw;
  background-color: transparent;
}
footer nav li {
  display: block
}
footer nav li a {
  color: white;
  text-decoration: none;
}
/* 
	|| L E G A L Zeile	

*/
.legal {
  display: block;
  align-items: center;
  width: 100%;
  margin: 0.1em 0em 0em 0.51em;
}
.legal img {
  display: block;
  float: left;
  margin-right: 0.51em;
}