/* css document */

/* ********************************************************************* */
/* HTML STANDARD TAG */
/* ********************************************************************* */

body, html {margin:0; padding:0; width:100%; height:100%;}

a {text-decoration:none;}

@font-face {        
	font-family: "DIN Condensed";
	font-display: swap; 
	src: url("/fonts/din_condensed/din_condensed_bold-webfont.woff2") format ("woff2"),
		 url("/fonts/din_condensed/din_condensed_bold-webfont.woff") format ("woff");
	 }

@font-face {
	  font-family: "Barlow";
	  font-display: swap;
	  src: url("/fonts/barlow_condensed/barlowcondensed-light-webfont.woff2") format("woff2"),
		   url("/fonts/barlow_condensed/barlowcondensed-light-webfont.woff") format("woff");
	}

/* ********************************************************************* */
/* Zusammengefasste Klassen */
/* ********************************************************************* */

header, footer
{background:#fff;}

.sb_page
{background:#444444;}

#Kontakt h2, #Startseite h2, #Startseite p, #Einstiegsprojekte h2, #Einstiegsprojekte p, #Racking h2, #Racking p, #Preamp h2, #Preamp p, #EQ h2, #EQ p, #Compressoren h2, #Compressoren p, #Tests h2, #Tests p, #EListe h2, #EListe p, #Kontakt p, #Impressum h2, #Impressum h3, #Impressum p, #Impressum li, #Impressum a, #Datenschutz h2, #Datenschutz h3, #Datenschutz p, #Datenschutz li, #Datenschutz a, #Haftungsausschluss h2, #Haftungsausschluss p, #Links h2, #Links p {color: #fff;}

p, a, header nav ul li a, header nav ul li
{color: #999;}

p, li, header nav ul li
{font-family: arial, helvetica;}

h2, h3, h4, h5
{font-family:"DIN Condensed"}

span
{font-family:"DIN Condensed"; color: #ffbc00; text-transform: uppercase; line-height: 20px; letter-spacing: 3px;}

header, header nav ul li a, header nav ul, header #sb_logo
{transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300 ms; -webkit-transition: all 300ms;}

/* ********************************************************************* */
/* Umfassende Objekte & Klassen */
/* ********************************************************************* */

.sb_page 
{width:100%; min-height:100%; overflow:hidden; float: left;}

.sb_strich 
{display: flex; justify-content: center; align-items: center;}

.flexbox 
{background: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width: 90%; margin: auto; align-items: stretch; padding: 30px 0 30px 0;}

.flexelement 
{background: #353553; color: #ffffff; text-align: center; margin: 0 0 3% 0; padding: 10px 0px 20px 0px; width: 300px; border: 2px solid white; opacity: 0.8; border-radius: 20px;}

.sb_button
{font-family:"DIN Condensed", arial, helvetica; color: white; text-transform: uppercase; letter-spacing: 3px;}

.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -100px;}

/* ********************************************************************* */
/* Header */
/* ********************************************************************* */

header {position:fixed; z-index: 99; top: 0; left: 0; right: 0; width: 100%; height: 40px; }

header #sb_logo {float:left; width: 80px; margin:7px 0 0 15px;}
header #sb_logo img {width: 100%; height: auto;}

header nav {float: right; height: 40px; margin: 0; padding: 0;}
header nav ul {margin: 12px 8px 0 0; padding: 0;}
header nav ul li {margin: 0 10px 0 0; padding: 0; list-style: none; float: left;}
header nav ul li a {text-transform: uppercase; font-size: 12px;}

/*header:hover {height: 100px;}
header:hover #sb_logo {width: 260px; margin: 5px 0 0 5px;} */



/* ********************************************************************* */
/* STARTSEITE */
/* ********************************************************************* */

#Startseite {background: url(../bilder/bg_start.jpg); background-position: center center; background-size:cover; background-attachment: scroll;}
#Startseite h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Startseite article {text-align: center; margin: 20px 50px 20px 50px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}

/* ********************************************************************* */
/* Projekte für den Einstieg */
/* ********************************************************************* */

#Einstiegsprojekte {background: url(../bilder/bg_netzteil.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#Einstiegsprojekte h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Einstiegsprojekte article {text-align: center; margin: 20px 50px 20px 50px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}

/* ********************************************************************* */
/* Racking und Modul-Restauration */
/* ********************************************************************* */

#Racking {background: url(../bilder/bg_racking.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#Racking h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Racking article {text-align: center; margin: 20px 50px 20px 50px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}

/* ********************************************************************* */
/* Vorverstärker */
/* ********************************************************************* */

#Preamp {background: url(../bilder/bg_preamp.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#Preamp h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Preamp article {text-align: center; margin: 20px 50px 20px 50px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}

/* ********************************************************************* */
/* Equalizer */
/* ********************************************************************* */

#EQ {background: url(../bilder/bg_eq.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#EQ h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#EQ article {text-align: center; margin: 20px 50px 20px 50px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}

/* ********************************************************************* */
/* Compressoren */
/* ********************************************************************* */

#Compressoren {background: url(../bilder/bg_compressoren.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#Compressoren h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Compressoren article {text-align: center; margin: 20px 50px 20px 50px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}

/* ********************************************************************* */
/* Sonstige Projekte und Tests */
/* ********************************************************************* */

#Tests {background: url(../bilder/bg_tests.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#Tests h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Tests article {text-align: center; margin: 20px 50px 20px 50px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}

/* ********************************************************************* */
/* Equipmentliste */
/* ********************************************************************* */

#EListe {background: url(../bilder/bg_tests.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#EListe h2 {text-align: center; margin: 140px 0px 30px 0px; font-size:40px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#EListe h3 {text-align: left; margin: 0 0 40px 5px; font-size:20px; font-weight: bold; line-height: 20px; text-transform: uppercase; letter-spacing: 3px;}
#EListe article {text-align: center; margin: 20px 100px 20px 100px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px;}
#EListe h4 {text-align: left; margin: 0 0 10px 0px; font-size:16px; font-weight: bold; line-height: 20px; text-transform: uppercase; letter-spacing: 3px;}
#EListe p {font-family: Arial; text-align: left; margin: 20px 0px 30px 15px; font-size:14px; font-weight:  lighter; line-height: 25px; letter-spacing: 1px;}

.listbox 
{background: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width: 95%; margin: auto; align-items: stretch; padding: 40px 0 60px 0;}

.listelement 
{background: #353553; color: #ffffff; text-align: left; margin: 0 0 1% 0; padding: 10px 0px 10px 0px; width: 75%; border: 2px solid white; opacity: 0.8; border-radius: 5px;}


/* ********************************************************************* */
/* Linksammlung */
/* ********************************************************************* */

#Links {background: url(../bilder/bg_wegweiser.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}
#Links h2 {text-align: center; margin: 80px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Links article {text-align: center; margin: 20px 100px 20px 100px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; font-size: 14px;}
#Links h4 {text-align: left; margin: 0 0 10px 10px; font-size:20px; font-weight: bold; line-height: 20px; text-transform: uppercase; letter-spacing: 3px;}

.sb_linkbutton {font-family: Arial, sans-serif; color: white; text-align: left; margin: 10px 0px 10px 30px; font-size:15px; font-weight:  lighter; line-height: 24px; letter-spacing: 1px;}

.linkbox 
{background: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width: 60%; margin: auto; align-items: stretch; padding: 30px 0 60px 0;}

.linkelement 
{background: #353553; color: #ffffff; text-align: left; margin: 0 0 5% 0; padding: 20px 0px 15px 0px; width: 300px; border: 2px solid white; opacity: 0.8; border-radius: 5px;}

/* ********************************************************************* */
/* Kontakt */
/* ********************************************************************* */

#Kontakt {position: relative; background: url(../bilder/bg_start.jpg); background-position: center center; background-size: cover; background-attachment: scroll;}

#Kontakt h2 {text-align: center; margin: 140px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}

#Kontakt article {text-align: center; margin: 20px 100px 20px 100px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px;}

#Kontakt footer {position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; text-align: center; padding: 50px 0 50px 0; font-size: 12px;font-family: arial; }

#Kontakt footer .logo_unten {width: 100%;}
#Kontakt footer .logo_unten img {width: 300px; height: auto;}
#Kontakt footer #sb_meta_nav {margin: 50px 0 0 0;}
#Kontakt footer #sb_meta_nav ul {margin: 20px; padding: 0;letter-spacing: 2px;}
#Kontakt footer #sb_meta_nav ul li {margin: 0; padding: 0 6px 0 2px; list-style: none; display: inline; border-right: 1px solid #999;}
#Kontakt footer #sb_meta_nav ul li:last-child {border:none;}
#Kontakt footer p {color: #999; font-size: 10px; font-family: arial;}

/* ********************************************************************* */
/* Impressum / Datenschutz / Haftungsausschluss*/
/* ********************************************************************* */

#Impressum h2 {text-align: center; margin: 140px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Impressum h3 {text-align: center; margin: 40px 0px 10px 0px; font-size:18px; font-weight: bold; line-height: 18px; text-transform: uppercase; letter-spacing: 4px;}
#Impressum article {text-align: center; margin: 20px 100px 20px 100px; text-transform: uppercase; line-height: 20px; letter-spacing: 1px;}
#Impressum li {text-align: justify; margin: 10px 20px 10px 20px; text-transform: uppercase; line-height: 17px; letter-spacing: 1px; font-size: 13px; list-style: none}


#Datenschutz h2 {text-align: center; margin: 140px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Datenschutz h3 {text-align: center; margin: 40px 0px 10px 0px; font-size:20px; font-weight: bold; line-height: 20px; text-transform: uppercase; letter-spacing: 4px;}
#Datenschutz article {text-align: center; margin: 20px 100px 20px 100px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px;}
#Datenschutz li {text-align: justify; margin: 10px 20px 10px 20px; text-transform: uppercase; line-height: 17px; letter-spacing: 1px; font-size: 13px; list-style: none}


#Haftungsausschluss h2 {text-align: center; margin: 140px 0px 30px 0px; font-size:30px; font-weight: bold; line-height: 40px; text-transform: uppercase; letter-spacing: 15px;}
#Haftungsausschluss article {text-align: center; margin: 20px 100px 20px 100px; text-transform: uppercase; line-height: 20px; letter-spacing: 3px;}

/* ********************************************************************* */
/* Projekte für den Einstieg/
/* ********************************************************************* */
.whitebox {text-align: left; background-color: blue; margin: 50px 100px 50px 100px; line-height: 20px; letter-spacing: 1px;}
.sb_unterstrich {display: flex; justify-content: center; align-items: center; padding-bottom: 100px;}