@font-face {
font-family: 'Starter-Regular';
src: url(font/Starter-Regular.woff2) format('woff2'),
url(font/Starter-Regular.woff) format('woff');
font-weight: normal;
font-style: normal; }

@font-face {
font-family: 'Starter-Medium';
src: url(font/Starter-Medium.woff2) format('woff2'),
url(font/Starter-Medium.woff) format('woff');
font-weight: normal;
font-style: normal; }

@font-face {
font-family: 'Starter-Light';
src: url(font/Starter-Light.woff2) format('woff2'),
url(font/Starter-Light.woff) format('woff');
font-weight: normal;
font-style: normal; }

*
{ margin: 0 auto;
padding: 0; }


/*** BASIS ***/

#schalter {
position: fixed;
z-index: 1000;
bottom: 15px;
right: 15px; }

body 
{ font-family: "Starter-Regular", Helvetica, Arial,  sans-serif;
color: #000;
font-feature-settings: "ss01";
font-variant-ligatures: no-common-ligatures;
background: #f2f2f2;
font-size: 15px;
text-align: left;
overflow-x: hidden;
margin: 0 auto;
hyphens: auto;
cursor: url('cursor/cursor.svg'), auto;
cursor: -webkit-image-set(
url('cursor/cursor.svg') 1x,
url('cursor/cursor_high.svg') 2x), auto;
-webkit-touch-callout: none; 
-webkit-user-select: none;
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
hyphens: auto; }


/* S I D E B A R */

#header_mobile
{ display: none; }

#logo_d
{ height: auto;
width: 150px;
position: fixed;
top: 20px;
left: 20px;
z-index: 10000;
display: block; }


.sidebar {
height: 100%;
width: 18%;
position: fixed;
z-index: 1;
border-right: 0px solid #000;
background: #f2f2f2;
overflow-x: hidden; 
padding-top: 90px; 
left: 0px;}

#kontakt
{ bottom: 0px;
padding: 20px 20px;
z-index: 20000;
position: absolute;
height: auto; }


a.navi
{ font-size: 24px;
display: inline-block;
background: transparent;
padding: 0px 10px 3px 10px;
-webkit-border-radius: 35px;
border-radius: 35px;
margin-bottom: 0px;
margin-left: 10px;
border: 0;
-webkit-transition: .2s;
transition: .2s; }
a.navi:hover
{ text-decoration: none;
background: #fff;
color: #000;
-webkit-transition: .2s;
transition: .2s; }

/*-----------------------------------------*/


p
{ 
line-height: 120%;
font-weight: 400; }

.bold
{ font-family: "Starter-Medium";
display: inline-block; }

a
{ color: #000;
text-decoration: none; }

a:hover
{ cursor: url('cursor/cursor_hover.svg'), auto;
cursor: -webkit-image-set(
url('cursor/cursor_hover.svg') 1x,
url('cursor/cursor_hover_high.svg') 2x), auto;
color: #000;
text-decoration: none; }


.space
{ min-height: 30px;
width: 100%;
display: block;
background: transparent; }



/* INHALT DIVS */

#start
{ width: 82vW;
left: 18vW;
height: 100%;
margin: 0px;
padding: 0px;
z-index: 1;
position: absolute; }

p.start
{ font-size: 42px;
line-height: 115%;
padding: 20px;  }

#content
{ width: 82vW;
left: 18vW;
margin: 0px;
padding: 0px;
z-index: 100;
position: absolute;
top: 100vH; }

#impressum
{ width: 82vW;
left: 18vW;
margin: 0px;
padding: 0px;
z-index: 100;
position: absolute;}

#unternehmen
{ height: calc(100vH - 30px); }

/* TYPO */

h1
{ font-size: 32px;
font-weight: 400;
color: #000;
background: #fff;
text-decoration: none;
text-align: left;
margin-bottom: 20px;
border: 0px solid #000;
padding: 0px 17px 3px 17px;
border-radius: 35px;
display: inline-block; }

h1:hover
{ color: #fff;
background: #000;}

h2, h3
{ font-size: 32px;
line-height: 120%;
font-weight: 400;
display: block;}

h3
{ margin-bottom: 8px; }

h4
{ font-size: 22px;
line-height: 115%;
font-weight: 400;
display: block; 
margin-bottom: 8px; }



p.highlight
{ font-size: 20px;
border: 1px solid #000;
padding: 0px 10px 2px 10px;
border-radius: 35px;
display: inline-block;
vertical-align: 2px;}

p.highlighth4
{ font-size: 30px;
border: 1px solid #000;
padding: 0px 10px 2px 10px;
border-radius: 35px;
display: inline-block;
vertical-align: 0px; }




/* HOVER SHOW PICTURE */

.imghover {
border-bottom: 1px solid #111;
display: inline-block;
line-height: 1;
text-shadow: 2px 2px #f2f2f2, 2px -2px #f2f2f2, -2px 2px #f2f2f2, -2px -2px #f2f2f2;
-webkit-transition: 0.1s;
transition: 0.1s;  }

.imghover:hover {
border-bottom: 0px solid #111;
display: inline-block;
line-height: 1;
text-shadow: 2px 2px #f2f2f2, 2px -2px #f2f2f2, -2px 2px #f2f2f2, -2px -2px #f2f2f2;
-webkit-transition: 0.1s;
transition: 0.1s;  }



a img 
{ display: none; }

a:hover img 
{ display: block;
z-index: 1;
height: auto;
width: auto\9; /* ie8 */
text-align: center;  }


.s 
{ max-height: 50%;
max-width: 50%; 
left: 0%; /* left: 18% um das bild mittig auf den content zu ziehen */
right: 0px;
margin: auto;
top: 0;
bottom: 0;
position: fixed;
z-index: 1;
box-shadow: 0 0px 15px 0 rgba(0, 0, 0, 0.6);  }








/* AUFKLAPP MENÜS */

.mehr_mittig
{ width: 100%;
text-align: left;
margin-top: 4px;
margin-left: 12px; } 

a.mehr
{ text-decoration: none;
border: 1px solid #000;
background: #f2f2f2;
padding: 0px 10px 2px 10px;
border-radius: 35px;
-webkit-transition: .2s;
transition: .2s; }

a.mehr:hover
{ background: #fff;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
border-radius: 35px;
cursor: url('cursor/cursor_hover.svg'), auto;
cursor: -webkit-image-set(
url('cursor/cursor_hover.svg') 1x,
url('cursor/cursor_hover_high.svg') 2x), auto; }

.toggle_container
{ margin: 5px -12px;
text-align: left; }






ul { 
list-style: none;
margin: 0px;
padding-left: 25px; }

ul li::before {
content: "\25CF";
display: inline-block; 
width: 25px;
margin-left: -25px;}

ul.referenzen { list-style: none;
margin: 0px;
padding-left: 15px; }

ul.referenzen li::before {
content: "–";
display: inline-block; 
width: 15px;
margin-left: -15px;}

ul.none li::before {
content: "";
display: inline-block; 
width: 15px;
margin-left: -15px; }










.switch {
position: relative;
display: inline-block;
width: 38px;
height: 20px;}

.switch input { 
opacity: 0;
width: 0;
height: 0; }

.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #000;
background: #f2f2f2;
-webkit-transition: .2s;
transition: .2s; }
 
.slider:hover {
cursor: url('cursor/cursor_hover.svg'), auto;
cursor: -webkit-image-set(
url('cursor/cursor_hover.svg') 1x,
url('cursor/cursor_hover_high.svg') 2x), auto; }

.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 2px;
bottom: 2px;
border: 1px solid #000;
background: #f2f2f2;
-webkit-transition: .2s;
transition: .2s; }

input:checked + .slider {
background-color: #9bb835; }

input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px); }

/* Rounded sliders */
.slider.round {
border-radius: 34px; }

.slider.round:before {
border-radius: 50%;}