/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 4, 2020 */



@font-face {
    font-family: 'montserratbold';
    src: url('../fonts/montserrat-bold-webfont.eot');
    src: url('../fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-bold-webfont.woff') format('woff'),
         url('../fonts/montserrat-bold-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;
font-display: fallback;
}




@font-face {
    font-family: 'montserrathairline';
    src: url('../fonts/montserrat-hairline-webfont.eot');
    src: url('../fonts/montserrat-hairline-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-hairline-webfont.woff') format('woff'),
         url('../fonts/montserrat-hairline-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-hairline-webfont.svg#montserrathairline') format('svg');
    font-weight: normal;
    font-style: normal;
font-display: fallback;
}




@font-face {
    font-family: 'montserratlight';
    src: url('../fonts/montserrat-light-webfont.eot');
    src: url('../fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-light-webfont.woff') format('woff'),
         url('../fonts/montserrat-light-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-light-webfont.svg#montserratlight') format('svg');
    font-weight: normal;
    font-style: normal;
font-display: fallback;
}
:root {
  /*--bg_color1:#d16a42;*/
  --bg_color1:#373636;
 /* --bg_color1:#c84928;*/
  --bg_color2: #5d6f47;
  --bg_color3:#c3b0a5;
  --bg_color4:#39121b;
  --text_light:#f0f0f0;
  /*--text_dark:#212121;*/
  --text_dark:#b55c5c;

}

* {
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}


.clearfix:after{
	content:"";
	display:block;
	clear:both;
}

img {
		max-width: 100%;/*  alle img responsive;max. die Breite, die des Fotos selbst hat --- */
		height: auto;
	}

header, footer, nav, article, main {
	display: block;
}

body{
    font-size:1rem;
    font-family: 'montserratlight', Arial, sans-serif;
    color:var(--text_dark);
}

h1,h2,h3,p, summary{
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;

}

h1,h2,h3, .fakehead{
    font-family: 'montserratbold';
    font-size:30px;
    text-transform:uppercase;
    font-weight:normal;
    margin-bottom:20px;
    color:#fff;
    padding:10px;
    background-color:#212121;
    background-color:var(--text_dark);
    letter-spacing: 3px;
}

.klein_h{
    font-size:16px;
    margin-bottom:0;
    display:inline-block;
    font-family: 'montserratbold';
    background-color:transparent;
    color:inherit;
    padding-left:0;
    letter-spacing:0;
}

summary {
    background: #fff;
    color: #000;
    margin-bottom:15px;
   letter-spacing:1px;
    font-family: 'montserratbold';
font-size: 30px;
text-transform: uppercase;
}


summary::marker{
    color:var(--bg_color1);
}
.fakehead{
    font-size:24px;
    color:inherit;
    background-color:inherit;
    border-bottom:1px solid;
}

.noborder{
   border-bottom:0;
   margin-bottom:0;
}


p,li, a{
    font-size:16px;
    line-height: 30px;
}

em{
    font-family: 'montserratbold';
    font-style:normal;
}

/*strong{
    font-weight: normal;
}*/
summary{
    border:0;
    outline:0;
}
main a{
    color:inherit;
    text-decoration:none;
    word-break: break-all;
}

.unterstrichen{
    text-decoration: underline;
}
header{
    background:url("../img/header_400px.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:top left;
    height:100vh;
    padding-top:80px;
    -webkit-animation-name: schrumpfen;
            animation-name: schrumpfen;
    -webkit-animation-duration:3s;
            animation-duration:3s;
    -webkit-animation-delay:2s;
            animation-delay: 2s;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.sub{
    height:250px;
    padding-top:0;
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-animation-duration:0s;
            animation-duration:0s;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;

}

#leistungsangebot{
    background:url("../img/header_leistung.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;
}

#portfolio{
    background:url("../img/header_portfolio.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;
}

#kontakt{
    margin-bottom:250px;
}
.wellcome{
    width:35vw;
    height: auto;
    max-width:450px;
    max-height:450px;
    margin:0 auto;
    text-align:center;
    background-color:rgba(255,255,255,0.5);
    padding:70px 10px;
    -webkit-animation-name: ausblenden;
            animation-name: ausblenden;
    -webkit-animation-duration:2s;
            animation-duration:2s;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.wellcome p{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing: 1px;
    color:var(--bg_color1);
}
.contentwrapper{
    max-width:1240px;
    margin:0 auto;
    padding:20px;
}

.geflext{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.geflext div,.geflext div.desktop{
    -ms-flex-preferred-size:100%;
    flex-basis:100%;
    margin-bottom: 30px;
}

.colored div{
    background-color:var(--bg_color1);
    padding:15px;
    color:#fff;
}

.bottom{
    -ms-flex-item-align:end;
    align-self:flex-end;
}

.full{
    -ms-flex-preferred-size:100%;
    flex-basis:100%;
}

.center{
    text-align: center;
}
.rigth{
    float:right;
}


.farbe{
    padding:70px 0;
}
.first{
    background-color:var(--bg_color1);
    color:var(--text_light);
}

.second{
    background-color:var(--bg_color2);
    color:var(--text_light);
}

.third{
    background-color:var(--bg_color3);
}

.fourth{
    background-color:var(--bg_color4);
    color:var(--text_light);
}

.text-dark{
    background-color:var(--text_dark);
    color:var(--text_light);
}


.farbe.text-dark h2 {
  padding-left: 0;
}
.button{
    padding:10px 20px;
    text-transform:uppercase;
    background-color:var(--text_dark);
    color:var(--text_light);
    text-decoration:none;
    margin:20px 10px 0 0;
    display:inline-block;
    border:1px solid var(--text_dark);
    text-align:center;
    font-weight:normal;
}

.button:hover, .button:focus,  .button:active{
    background-color:#fff;
    color:var(--text_dark);
    border-color:var(--bg_color1);
    -webkit-user-select: none; 
    -webkit-touch-callout: none;
}

.invers{
    background-color:#fff;
    color:var(--text_dark);
}
section ul {
    list-style:none;
    width:100%;
}

section li{
    padding:10px 0;
    text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,0.5);
}
section li:last-of-type{
    border-bottom:0;
}
section li:hover{
    padding-left:15px;
    background-image:url("../img/list_icon.png");
    background-position: left center;
    background-repeat:no-repeat;
    -webkit-user-select: none; 
    -webkit-touch-callout: none;
}

section ul.nostyle li{
    padding:0;
    text-transform:none;
}

section ul.nostyle li:hover{
    background-image:none;
    padding:0;
    -webkit-user-select: none; 
    -webkit-touch-callout: none;
}
#leistung img{
    position:relative;
    float:right;
    width:300px;
    height:auto;
}

#validierung{
    padding-top:20px;
}
/*slidein boxen*/


.module {
  position: relative;
  float: left;
  padding: 15px;
  color:var(--highlight); 
    padding-top:0;
}
.module h3{
    margin-bottom:0;
    padding-bottom:20px
}
.module h3, .module p.modultext{
    background-color:var(--backcolor3);
}

.module p.modultext{
    margin-bottom:0;
    padding-bottom:10px;
}
.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}


/*animation*/

@-webkit-keyframes einblenden{
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes einblenden{
  from {opacity: 0;}
  to {opacity: 1;}
}


@-webkit-keyframes ausblenden{
  from {opacity: 1;}
  to {opacity: 0;}
}

@keyframes ausblenden{
  from {opacity: 1;}
  to {opacity: 0;}
}

@-webkit-keyframes schrumpfen{
  0%{height: 850px;}
  65%{ height: 250px;
       opacity: 0.6}
  100%{ height: 250px;
      background:url("../img/header2_400px.jpg");
      background-position:bottom right;
      background-repeat:no-repeat;
      background-size:cover;
    opacity:1}
}

@keyframes schrumpfen{
  0%{height: 850px;}
  65%{ height: 250px;
       opacity: 0.6}
  100%{ height: 250px;
      background:url("../img/header2_400px.jpg");
      background-position:bottom right;
      background-repeat:no-repeat;
      background-size:cover;
    opacity:1}
}


video{
    max-width: 100%;
    height: auto;
}


/*navigation*/
#topnav{
    background-color:#fff;
    position:fixed;
    z-index: 500;
    width:100%;
    top:0;
    left:0;
    -webkit-animation-name: einblenden;
            animation-name: einblenden;
    -webkit-animation-duration:1s;
            animation-duration:1s;
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0;
}
#topnav.fixed{
    -webkit-animation-name: einblenden;
            animation-name: einblenden;
    -webkit-animation-duration:0s;
            animation-duration:0s;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

#topmenue{
   max-width:1200px;
   margin:0 auto;
   height: 70px;
}

#topmenue img{
 margin-right: 10px;
 padding-left:10px;
 padding-top:10px
}

 footer nav li{
  float:left;
}

#topmenue ul {
    text-align: right;
    position:relative;
    float:right;
}

nav ul{
  list-style: none;
}

#topmenue  li{
    display: none;
}

#topmenue  li#mobile{
    display:inline;
}

#topmenue  li#mobile a#close{
    display:none;
}
#topmenue  li a, footer li a{
    color:inherit;
    text-decoration:none;
    text-transform:uppercase;
    font-size:14px;
    line-height: 70px;
    padding:0 20px;
    display: block;
}

footer li a{
    font-size:12px;
    line-height: 70px;
}

#topmenue li a:hover, #topmenue li a:focus, #topmenue li a:active, footer li a:hover, footer li a:focus, footer li a:active{
    background-color:var(--bg_color1);
    color:var(--text_light);
    -webkit-user-select: none; 
    -webkit-touch-callout: none;
}

#topnav:target #topmenue li{
    display:block;
    background-color:#ffff;
}
#topnav:target li#mobile a#open{
     display:none;
}

#topnav:target li#mobile a#close{
    display:block;

}


footer nav{
   max-width:1200px;
    margin:0 auto;
}
/*coockie und back to top*/

#back-top {
	position: fixed;
	bottom:5px;
	right:0px; 
	display:none;

}
#back-top a, #back-top a:link, #back-top a:visited {
    font-size: 10px;
    background-color: #221f1f;
    color: #fff;
    padding: 5px;
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 20px;
}

#back-top a:hover,#back-top a:focus ,#back-top a:active{
	background-color:#fff;
	color:#221f1f;
    -webkit-user-select: none; 
    -webkit-touch-callout: none;
} 

#cookiedingsbums {
	font-size:12px;
	color:#fff;
	text-align:center;
	background-color:var(--text_dark);
	position:fixed;
	bottom:0;
	width:100%;
	z-index:500;
    padding:10px;
}
#cookiedingsbumsCloser{
	padding:10px;
	cursor: pointer;
}

/*
#cookiedingsbumsCloser:hover, 
#cookiedingsbumsCloser:focus,
#cookiedingsbumsCloser:active{
	background-color:#d4d855;
}*/



#coockielink {
    color: #fff;
    font-size: 12px;
}

 /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/ /*-----------------tablet ------------------------------------*/
@media screen and (min-width:400px) and (orientation:landscape){
header{

    padding-top:40px;

} 
    summary{
    font-size: 20px;
   letter-spacing:3px;
}

}

@media screen and (min-width:600px) {
    
header{

    padding-top:160px;

}    
     summary {
    font-size: 20px;
   letter-spacing:3px;
}
   
.geflext div{
    -ms-flex-preferred-size:49%;
        flex-basis:49%;
}

    
.noflex{
    -ms-flex-preferred-size:100%;
    flex-basis: 100%;
    margin-top: 40px;
}
 
}
/* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*//* ------------------desktop --------------*/
@media screen and (min-width:800px){
    
header{
    background:url("../img/header.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:top left;
    height:100vh;
    padding-top:80px;
}    
 

@-webkit-keyframes schrumpfen{
  0%{height: 850px;}
  65%{ height: 250px;
       opacity: 0.6}
  100%{ height: 250px;
      background:url("../img/header2.jpg");
      background-position:bottom right;
      background-repeat:no-repeat;
      background-size:cover;
    opacity:1;}
}

@keyframes schrumpfen{
  0%{height: 850px;}
  65%{ height: 250px;
       opacity: 0.6}
  100%{ height: 250px;
      background:url("../img/header2.jpg");
      background-position:bottom right;
      background-repeat:no-repeat;
      background-size:cover;
    opacity:1}
}    
    
.geflext div.desktop{
    -ms-flex-preferred-size:49%;
    flex-basis:49%;
}
    
#leistung img{
    top:-50px;
} 
    
/*navigation*/    
    


#topmenue li#mobile{
        display:none;
    }    
    
#topmenue ul, footer ul{
    display: block;
    height:70px;

}
#topmenue ul{
        top:0
    }
    
#topmenue ul, footer ul{
   list-style: none;
}

#topmenue ul,#topmenue li, #topmenue img, footer nav li{
  float:left;
}
#topmenue  li{
    display: block;
}



}