/* 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;}

#Einstiegsprojekte, #Netzteil_einfach, #Netzteil_komplex, #Ramped_phantom, #Relais {background: url(../bilder/bg_netzteil.jpg); background-position: center center; background-size:cover; background-attachment: scroll;}

#Einstiegsprojekte h2, #Einstiegsprojekte h3, #Einstiegsprojekte p, #Netzteil_einfach h3, #Netzteil_einfach p, #Netzteil_komplex h3, #Netzteil_komplex p, #Ramped_phantom h3, #Ramped_phantom p, #Relais h3, #Relais p, #main {color: #fff;}
 
p, header nav ul li a, header nav ul li
{color: #999;}

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

p
{font-family: "Barlow", arial, helvetica; letter-spacing: 3px; word-spacing: 5px; font-size: 18px;line-height: 25px;}

h2, h3, h4, #main
{font-family:"DIN Condensed", arial, helvetica;}

h5
{font-family: "Barlow", arial, helvetica; color: #fff; text-decoration: underline; font-size:18px; letter-spacing: 3px; word-spacing: 5px;}

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 300ms; -webkit-transition: all 300ms;}

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

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

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

.sb_unterstrich {display: flex; justify-content: center; align-items: center; padding-bottom: 50px;}

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

.sb_linkbutton {letter-spacing: 1px; font-weight: bolder;}

.bluebox 
{position: relative; z-index: 900;text-align: left; background-color: #353553; border: none; margin: 30px 5px 5px 5px; line-height: 20px; padding: 5px 5px 5px 5px;}

.sprung {display: block; position: relative; top: 100px; visibility: hidden;}
.bildbox {background-color: #ffffff; padding: 50px;}
.bildbox_randlos {background-color: #ffffff; padding: 5px; margin: 0px; border: 0px; }

.zweispalten {width: 100%; column-count: 2; -moz-column-count:2; -webkit-column-count: 2; column-gap: 30px;}
.rechtsbuendig {float: right;}
.farberot {color: red; font-family: "Barlow", arial, helvetica; word-spacing: 3px; font-weight: 800;}

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

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

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

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

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

/* ********************************************************************* */
/* Side-Navigation/
/* ********************************************************************* */

.sidenav {
      height: 30%;
      width: 0;
      position: fixed;
      z-index: 999;
      top: 160;
      left: 0;
      background-color: #371412;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 20px;
    }
    
    .sidenav a {
      padding: 8px 5px 8px 12px;
      text-decoration: none;
      font-size: 16px;
      font-family:"Barlow", arial, helvetica;
      color: #ffffff;
      display: block;
      transition: 0.3s;
    }
    
    .sidenav a:hover {
      color: red;
    }
    
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 5px;
      font-size: 16px;
      margin-left: 10px;
    }
    
    #main {
      transition: margin-left .5s;
      padding: 10px;
      text-transform: uppercase; 
      letter-spacing: 3px;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }


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


#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 h3, #Netzteil_einfach h3, #Netzteil_komplex h3, #Ramped_phantom h3, #Relais h3 {text-align: left; font-size:20px; font-weight: bold; text-transform: uppercase; letter-spacing: 5px;}

a {color: #ffffff;}
a.textlink:link {font-family: "Barlow"; font-weight: 800; text-decoration: underline;}
a.textlink:hover {color: red; text-decoration: none;} 

footer {position: bottom; bottom: 0; left: 0; width: 100%; height: 200px; text-align: center; padding: 50px 0 50px 0; font-size: 12px;font-family:"lato", arial, helvetica; }

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