* { margin:0; padding:0; }


/* barlow-semi-condensed-300 - latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/barlow-semi-condensed-v6-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/barlow-semi-condensed-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/barlow-semi-condensed-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/barlow-semi-condensed-v6-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/barlow-semi-condensed-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/barlow-semi-condensed-v6-latin-300.svg#BarlowSemiCondensed') format('svg'); /* Legacy iOS */
}

/* barlow-semi-condensed-regular - latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/barlow-semi-condensed-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/barlow-semi-condensed-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/barlow-semi-condensed-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/barlow-semi-condensed-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/barlow-semi-condensed-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/barlow-semi-condensed-v6-latin-regular.svg#BarlowSemiCondensed') format('svg'); /* Legacy iOS */
}

/* barlow-semi-condensed-600 - latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/barlow-semi-condensed-v6-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/barlow-semi-condensed-v6-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/barlow-semi-condensed-v6-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/barlow-semi-condensed-v6-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/barlow-semi-condensed-v6-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/barlow-semi-condensed-v6-latin-600.svg#BarlowSemiCondensed') format('svg'); /* Legacy iOS */
}



html, body { background-image: url(pics/background_1920x1080.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% top; height: 100%; background-size: cover; } 
html { scroll-behavior: smooth; overflow-y: scroll; }

#flexcont { z-index: 2; display: -webkit-flex; display: -ms-flex; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0; }

h1 { color: #737373; font-size: 1.55em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 30px 40px -10px 40px; }

h2 { color: #004f9e; font-size: 1.15em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 40px 40px -10px 40px; }

h3 { color: #004f9e; font-size: 1.15em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 0px 0px -20px 40px; }

ul { text-align: left; color: #737373; font-size: 1.1em; font-family: "Barlow Semi Condensed", sans-serif; line-height: 1.6em; padding: 0px 40px 0px 60px; }
.inside { list-style-position: outside; list-style-type: square; padding-top: 30px; }
.insideft { list-style-position: outside; list-style-type: square; line-height: 1.35em; margin-top: -20px; }

p { color: #737373; font-size: 1.05em; font-family: "Barlow Semi Condensed", sans-serif; line-height: 1.35em; text-align: left; letter-spacing: 0; word-wrap: break-word; padding: 0; }

#content { width: 100%; margin: 60px 20px 20px 20px; background-color: none; display: flex; justify-content: center; align-items: center; }
#contentsub { width: 100%; margin: 50px 0px 30px 0px; height: 100%; background-color: none; }
#contentsub h1 { text-transform: uppercase; color: #fff; font-size: 2em; font-family: 'Barlow Semi Condensed', sans-serif; float: left; width: 100%; font-weight: 300; }
#contentsub h2 { text-transform: uppercase; color: #737373; font-size: 1.3em; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; padding: 0px 40px 0px 40px; text-align: left; }
#contentsubsub { width: 700px; background-color: rgb(255, 255, 255, 1); margin: 40px 0px 0px 0px; padding-bottom: 20px; }
#contentsubsub p { color: #737373; padding: 35px 40px 40px 40px; text-align: left; letter-spacing: 0; column-count: 1; }

.buttons { width: 730px; margin-top: 8px; }
.anim { width: 100%; }

.impressum { width: 100%; margin: 10px 0px 40px 0px; background-color: none; display: flex; justify-content: center; align-items: center; }
.impressum a { color: #737373; font-size: 0.9em; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; text-decoration: none; }

#header { width: 100%; background-color: #fff; height: 390px; }
#logo { width: 100%; height: 200px; background-color: none; }
#logo img { width: 700px; padding-top: 0px; }

#menuwrapper { width: 100%; display: flex; height: 40px; background-color: none; justify-content: center; align-items: center; position: absolute; }
#menu { z-index: 1; width: 700px; display: flex; height: 40px; background-color: #004f9e; justify-content: center; align-items: center; position: absolute; }

.subbtn .kategorie_innen { width: 140px; height: 40px; background-color: none; float: left; }
.subbtn .overlaytext { width: 140px; height: 40px; font-size: 1em; }
.subbtn .text { width: 140px; height: 40px; font-size: 1em; }

.kategorie { width: 180px; float: left; margin: 10px; padding: 0px; border: 2px solid #fff; border-radius: 0px; background-color: none; }
.kategorie_innen { width: 180px; padding: 0px; border: solid 0px; position: relative; }

.schrott { vertical-align: center; width: 80px; background-color: none; margin: -85px 0px 0px -95px; float: none; }

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
} 

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1; /* Für den IE6 und IE7 */
}



/* Overlay-Button ANFANG */

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlaytext {
  align-items: center;
  justify-content: center;
  display: flex;
  color: white;
  text-transform: uppercase; 
  font-family: 'Barlow Semi Condensed', sans-serif;
  width: 180px;
  height: 180px;
  background-color: #004f9e;
  text-decoration: none;
  font-weight: 600; 
  letter-spacing: 0px;
  font-size: 24px;
  center: 50%;
  border-radius: 0px;
}

.overlay {
  
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #588fc5;
  border-radius: 0px;
}

.kategorie_innen:hover .overlay {
  opacity: 1;
}

.text {
  align-items: center;
  justify-content: center;
  display: flex;
  color: white;
  position: absolute;
  top: 0;
  center: 50%;
  text-align: center;
  text-transform: uppercase; 
  font-family: 'Barlow Semi Condensed', sans-serif;
  width: 100%;
  height: 100%;
  background-color: none;
  text-decoration: none;
  font-weight: 600; 
  letter-spacing: 0px;
  font-size: 24px;
  background-color: none;
}

/* Overlay-Button ENDE */



/*    Ab nur noch 800 px Breite    */
@media screen and (max-width: 800px){

	
	#contentsubsub { width: 90%; background-color: rgb(255, 255, 255, 1); margin: 40px 0px 0px 0px; }
	
	.subbtn .kategorie_innen { width: 140px; height: 40px; background-color: none; float: left; }
	.subbtn .overlaytext { width: 140px; height: 40px; font-size: 1em; }
	.subbtn .text { width: 140px; height: 40px; font-size: 1em; }
	
	#header { width: 100%; height: auto; background-color: none; }
	.buttons { width: 90%; }
	#logo { width: 100%; height: auto; background-color: none; padding-bottom: 40px; }
	#menuwrapper { width: 100%; display: flex; height: 40px; background-color: none; justify-content: center; align-items: center; position: absolute; }
	#logo img { width: 90%; padding-top: 0px; }
	#menu { z-index: 1; width: 90%; display: flex; height: 40px; background-color: #004f9e; justify-content: center; align-items: center; position: absolute; }
	
	.schrott { margin: -85px 0px 0px -35px; }

	
	}




/*    Ab nur noch 650 px Breite    */
@media screen and (max-width: 650px){
	
	#contentsubsub { width: 90%; background-color: rgb(255, 255, 255, 1); margin: 30px 0px 0px 0px; }
	.subbtn .kategorie_innen { width: 98px; height: 40px; background-color: none; float: left; }
	.subbtn .overlaytext { width: 98px; height: 40px; font-size: 0.9em; }
	.subbtn .text { width: 98px; height: 40px; font-size: 0.9em; }
	
	p { font-size: 0.89em; line-height: 1.25em; }
	#header { width: 100%; height: auto; background-color: none; }
	.buttons { width: 90%; }
	#logo { width: 100%; height: auto; background-color: none; padding-bottom: 40px; }
	#menuwrapper { width: 100%; display: flex; height: 20px; background-color: none; justify-content: center; align-items: center; position: absolute; }
	#menu { z-index: 1; width: 100%; display: flex; height: 40px; background-color: #004f9e; justify-content: center; align-items: center; position: absolute; }
	.innung { width: 100%; }
	
	h1 { color: #737373; font-size: 1.40em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 30px 40px -10px 40px; }
	h2 { color: #004f9e; font-size: 1.05em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 40px 40px -10px 40px; }
	h3 { color: #004f9e; font-size: 1.05em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 0px 0px -20px 40px; }
	
	.schrott { margin: -75px 0px 0px 150px; }
	
	}


/*    Ab nur noch 400 px Breite    */
@media screen and (max-width: 400px){
	
	#contentsubsub { width: 90%; background-color: rgb(255, 255, 255, 1); margin: 0px 0px 0px 0px; }
	.subbtn .kategorie_innen { width: 88px; height: 40px; background-color: none; float: left; }
	.subbtn .overlaytext { width: 88px; height: 40px; font-size: 0.8em; }
	.subbtn .text { width: 88px; height: 40px; font-size: 0.8em; }
	
	#header { width: 100%; height: 200px; background-color: none; }
	.buttons { width: 90%; }
	#logo { width: 90%; height: auto; background-color: #fff; padding-bottom: 40px; }
	#logo img { width: 100%; padding-top: 0px; }
	p { font-size: 0.86em; line-height: 1.15em; }
	
	ul { text-align: left; color: #737373; font-size: 0.9em; font-family: "Barlow Semi Condensed", sans-serif; line-height: 1.4em; padding: 0px 40px 0px 60px; }
	.inside { list-style-position: outside; list-style-type: square; padding-top: 30px; }
	.insideft { list-style-position: outside; list-style-type: square; line-height: 1.15em; margin-top: -20px; }
	
	h1 { color: #737373; font-size: 1.35em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 30px 40px -10px 40px; }
	h2 { color: #004f9e; font-size: 0.95em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 40px 40px -10px 40px; }
	h3 { color: #004f9e; font-size: 0.95em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 0px 0px -20px 40px; }
	
	}
	
	/*    Ab nur noch 390 px Breite    */
@media screen and (max-width: 390px){
	
	#contentsubsub { width: 90%; background-color: rgb(255, 255, 255, 1); margin: 0px 0px 0px 0px; }
	.subbtn .kategorie_innen { width: 88px; height: 40px; background-color: none; float: left; }
	.subbtn .overlaytext { width: 88px; height: 40px; font-size: 0.8em; }
	.subbtn .text { width: 88px; height: 40px; font-size: 0.8em; }
	
	#header { width: 100%; height: 220px; background-color: none; }
	.buttons { width: 90%; }
	#logo { width: 90%; height: auto; background-color: #fff; padding-bottom: 40px; }
	#logo img { width: 100%; padding-top: 0px; }
	p { font-size: 0.84em; line-height: 1.12em; }
	
	ul { text-align: left; color: #737373; font-size: 0.84em; font-family: "Barlow Semi Condensed", sans-serif; line-height: 1.3em; padding: 0px 40px 0px 60px; }
	.inside { list-style-position: outside; list-style-type: square; padding-top: 30px; }
	.insideft { list-style-position: outside; list-style-type: square; line-height: 1.15em; margin-top: -20px; }
	
	h1 { color: #737373; font-size: 1.35em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 30px 40px -10px 40px; }
	h2 { color: #004f9e; font-size: 0.9em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 40px 40px -10px 40px; }
	h3 { color: #004f9e; font-size: 0.9em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 0px 0px -20px 40px; }
	
	}
	
		/*    Ab nur noch 376 px Breite    */
@media screen and (max-width: 376px){
	
	#contentsubsub { width: 90%; background-color: rgb(255, 255, 255, 1); margin: 0px 0px 0px 0px; }
	.subbtn .kategorie_innen { width: 82px; height: 40px; background-color: none; float: left; }
	.subbtn .overlaytext { width: 82px; height: 40px; font-size: 0.7em; }
	.subbtn .text { width: 82px; height: 40px; font-size: 0.7em; }
	
	#header { width: 100%; height: 220px; background-color: none; }
	.buttons { width: 90%; }
	#logo { width: 90%; height: auto; background-color: #fff; padding-bottom: 40px; }
	#logo img { width: 100%; padding-top: 0px; }
	p { font-size: 0.84em; line-height: 1.12em; }
	
	ul { text-align: left; color: #737373; font-size: 0.84em; font-family: "Barlow Semi Condensed", sans-serif; line-height: 1.3em; padding: 0px 40px 0px 60px; }
	.inside { list-style-position: outside; list-style-type: square; padding-top: 30px; }
	.insideft { list-style-position: outside; list-style-type: square; line-height: 1.15em; margin-top: -20px; }
	
	h1 { color: #737373; font-size: 1.35em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 30px 40px -10px 40px; }
	h2 { color: #004f9e; font-size: 0.9em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 40px 40px -10px 40px; }
	h3 { color: #004f9e; font-size: 0.9em; font-family: "Barlow Semi Condensed", sans-serif; text-align: left; margin: 0px 0px -20px 40px; }
	
	}