@charset "UTF-8";

/* CSS Bomnueter
*********************************************/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, 
h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, 
ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td {border:0; font-size:100%; margin:0; 
	padding:0;}
a {outline:none;}
table {
	border-collapse:collapse;
	border-spacing:0;
	vertical-align: top;
}
fieldset, img {border:0;}
del, ins {text-decoration:none;}
caption, th {text-align:left;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}
q:before, q:after {content:'';}
abbr, acronym {border:0; font-variant:normal;}
sup, sub {vertical-align:baseline;}
legend {color:#000;}
input, button, textarea, select, optgroup, option 
	{font-family:inherit; font-size:inherit; 
	font-style:inherit; font-weight:inherit;}
input, button, textarea, select {font-size:100%;}



/* start */

html, body{
	height: 100%;
	background-color: #fff;
}
body{
	font-family: 'Raleway-Regular', sans-serif;
	font-size: 100%;
	line-height: 132%;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
  	 -o-hyphens: auto; 	
   	-ms-hyphens: auto;
   	hyphens: auto;
	-webkit-hyphenate-limit-before: 3; /* For Safari */
	-webkit-hyphenate-limit-after: 4; /* For Safari */
	-ms-hyphenate-limit-chars: 10 3 4;
	hyphenate-limit-chars: 10 3 4;
	margin: 0;
	padding: 0;
	border: 0;
}

@font-face {
    font-family: 'Figtree-SemiBoldItalic';
    src: url('../eppeal-fonts/Figtree-SemiBoldItalic.eot');
    src: url('../eppeal-fonts/Figtree-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../eppeal-fonts/Figtree-SemiBoldItalic.woff') format('woff'),
         url('../eppeal-fonts/Figtree-SemiBoldItalic.ttf') format('truetype'),
         url('../eppeal-fonts/Figtree-SemiBoldItalic.svg#Figtree-SemiBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Figtree-ExtraBoldItalic';
    src: url('../eppeal-fonts/Figtree-ExtraBoldItalic.eot');
    src: url('../eppeal-fonts/Figtree-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../eppeal-fonts/Figtree-ExtraBoldItalic.woff') format('woff'),
         url('../eppeal-fonts/Figtree-ExtraBoldItalic.ttf') format('truetype'),
         url('../eppeal-fonts/Figtree-ExtraBoldItalic.svg#Figtree-ExtraBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Raleway-Regular';
    src: url('../eppeal-fonts/Raleway-Regular.eot');
    src: url('../eppeal-fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
         url('../eppeal-fonts/Raleway-Regular.woff') format('woff'),
         url('../eppeal-fonts/Raleway-Regular.ttf') format('truetype'),
         url('../eppeal-fonts/Raleway-Regular.svg#Raleway-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Raleway-SemiBold';
    src: url('../eppeal-fonts/Raleway-SemiBold.eot');
    src: url('../eppeal-fonts/Raleway-SemiBold.eot?#iefix') format('embedded-opentype'),
         url('../eppeal-fonts/Raleway-SemiBold.woff') format('woff'),
         url('../eppeal-fonts/Raleway-SemiBold.ttf') format('truetype'),
         url('../eppeal-fonts/Raleway-SemiBold.svg#Raleway-SemiBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Raleway-Bold';
    src: url('../eppeal-fonts/Raleway-Bold.eot');
    src: url('../eppeal-fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
         url('../eppeal-fonts/Raleway-Bold.woff') format('woff'),
         url('../eppeal-fonts/Raleway-Bold.ttf') format('truetype'),
         url('../eppeal-fonts/Raleway-Bold.svg#Raleway-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ionicons';
    src: url('../eppeal-fonts/ionicons.eot');
    src: url('../eppeal-fonts/ionicons.eot?#iefix') format('embedded-opentype'),
         url('../eppeal-fonts/ionicons.woff') format('woff'),
         url('../eppeal-fonts/ionicons.ttf') format('truetype'),
         url('../eppeal-fonts/ionicons.svg#ionicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1.h-sig{
	width: 0;
	height: 1px;
	font-family: Arial, Geneva, Helvetica, sans-serif;
	font-size: 0;
	line-height: 0;
	color:#FFFFFF;
	text-indent: -9999px;
}
h2{
	font-family: 'Figtree-ExtraBoldItalic', sans-serif;
	font-size: 3rem;
	font-weight: normal;
	color: #333;
	line-height: 114%;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-o-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	margin: 0 0 0.6em;
	padding: 0;
	transition: 0.4s ease;
}
h3{
	font-family: 'Raleway-Bold', sans-serif;
	font-size: 2.1rem;
	font-weight: normal;
	line-height: 135%;
	color: #333;
	margin: 1em 0 0.75em;
	padding: 0;
}
h4{
	font-family: 'Raleway-Bold', sans-serif;
	font-size: 1.65rem;
	font-weight: normal;
	line-height: 135%;
	color: #333;
	padding: 0;
	margin-bottom: 0.6em;
}
.head-center{
	text-align: center;
}
p{
	padding: 0 0 12px 0;
	margin: 0;
}
img{
	width: 100%;
	height: auto;
}
p.clear-fix{
	padding-bottom: 0;
}
.nobr{
	white-space: nowrap;
}
strong{
	font-family: 'Raleway-SemiBold', sans-serif;
}
.clearfix{
	clear: both;
}
.clearzero{
	line-height: 0;
	padding: 0;
	clear: both;
}
 
/*links
**************************************************/
a:link{
	text-decoration: none;
	color: #3a3a3c;
	transition: 0.6s ease;
}
a:visited{
	text-decoration: none;
	color: #333;
}
a:hover{
	text-decoration: none;
	color: #969799;
	transition: 0.6s ease;
}
a:active{
	text-decoration: none;
	color: #969799;
	transition: 0.6s ease;
}

/* Navigation 
**********************************************/

.use-hover li:hover ul{ 
	display: block;     /* Javascript Fallback jQuery Navigation */
}
.nav_m:hover{
	opacity: .45;
	transition: 0.4s ease;
}
.nav1{
	position: absolute;
	top: 90px;
	right: -36px;
	width: auto;
	height: auto;
	font-size: 1.2rem;
	line-height: auto;
	margin: 0;
	padding: 0.6rem 0.3rem 0.48rem;
	transition: 0.6s ease;
}
.sticky{
	top: 30px;
	background: #fff;
	-webkit-border-radius: 22.5px;
	-moz-border-radius: 22.5px;
	-o-border-radius: 22.5px;
	-ms-border-radius: 22.5px;
	border-radius: 22.5px;	
}
.nav1 ul.nav{
	position: relative;
	list-style: none;
	float: right;
}
.nav1 ul.nav li{
	position: relative;
	white-space: nowrap;
	padding: 0 30px;
	float: left;
	transition: 0.4s ease;
}
.nav-mobil ul{
	position: absolute;
	top: 90px;
	left: 0;
	width: 372px;
	height: auto;
	font-size: 1.8rem;
	text-align: left;
	line-height: 1.2rem;
	margin: 0;
	padding: 48px 0 0 48px;
	background: rgba(255,255,255,0.3);
	display: none;
}
.nav-imp{
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 24px;
}
.nav1-mobil ul.nav,
.nav-imp ul.nav{
	list-style: none;
  	color: #fff;
}
.nav-imp ul.nav{
	margin-right: 0;
}
.nav-mobil ul.nav li{
	width: 150px;
	height: 60px;
	font-size: 1.25em;
	white-space: nowrap;
}
.nav-mobil ul.nav li a,
.nav-imp ul.nav li a{
	display: block;
	list-style: none;
	font-weight: normal;
  	color:#fff;
}
.nav-mobil ul.nav li a{
	color: #000;
	transition: 0.4s ease-in-out;
}
.nav-imp ul.nav li a{
	text-align: right;
	color: #fff;
	padding-right: 0;
	transition: 0.4s ease;
}
.nav1 ul.nav li.current a:link,
.nav1 ul.nav li.current a:visited,
.nav1 ul.nav li.current.active a:visited,
.nav1 ul.nav li.current.active a:link,
.nav1 ul.nav li.current.active a:visited,
.nav1 ul.nav li.parent.active a:link,
.nav1 ul.nav li.parent.active a:visited,
.nav-imp ul.nav li.current a:visited{
	color: #000;
	text-decoration: none;
	transition: 0.6s ease;
}
.nav1 ul.nav li a:hover,
.nav-imp ul.nav li a:hover{
	text-decoration: none;
	transition: 0.4s ease-in-out;
}
/*.nav1 ul.nav li a:hover{color: #969799;}*/
.nav1 ul.nav li a:hover{color: #000;}
.nav-imp ul.nav li a:hover{color: #969799}

.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after{
	background: url(../../../images/bilder-global/Navi-Unterstrich-kurz_200.png) center center no-repeat;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after{
    width: 60px;
}
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
    background: url(../../../images/bilder-global/Navi-Unterstrich-lang_200.png) center center no-repeat;
}
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
    width: 105px;
}
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after{
    width: 120px;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
	position: absolute;
	content: "";
	top: 1.65rem;
	left: 10%;
	height: 12px;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-ms-background-size: contain;	
	background-size: contain;
	transform: rotate(-3.3deg);
	transition: 0.4s ease;
	-webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.5s; /* Firefox < 16 */
        -ms-animation: fadein 1.5s; /* Internet Explorer */
         -o-animation: fadein 1.5s; /* Opera < 12.1 */
            animation: fadein 1.5s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.start-footer{
	position: absolute;
	bottom: 42px;
	left: 50%;
	width: 60px;
	height: 30px;	
	margin-left: -30px;
}
#start{
	position: relative;
	height: 0;
	padding: 0;
	margin: 0;
}

/* Hamburger Button
**********************************************/
.nav_m{
	display: none;
}
.nav_m .line{
	display: block;
  	width: 30px;
  	height: 4px;
	border-radius: 2px;
  	background-color: #3a3a3c;
	margin: 6px auto;
  	-webkit-transition: all 0.4s ease-in-out;
  	-o-transition: all 0.4s ease-in-out;
  	transition: all 0.4s ease-in-out;
}
.nav_m:hover{
  cursor: pointer;
}
.is-active .line:nth-child(2){
  opacity: 0;
}
.is-active .line:nth-child(1){
  -webkit-transform: translateY(10px) rotate(45deg);
  -ms-transform: translateY(10px) rotate(45deg);
  -o-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}
.is-active .line:nth-child(3){
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  -o-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}


/*Layout
**********************************************/

#buehne{
	position: relative;
	top: 0;
	width: 100%;
	height: auto !important;
	min-height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.header-gradient{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 12vw;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,.9) 15%, rgba(255,255,255,0) 100%); 
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,.9) 15%, rgba(255,255,255,0) 100%); 
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.9) 15%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
	transition: 0.4s ease;
	z-index: 30;
}
.header-gradient#hg_hi,
.header-gradient#hg_kontakt,
.header-gradient#hg_impressum,
.header-gradient#hg_datenschutz{
	display: none;
}
.kopf{
	position: fixed;
	right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
	width: 72%;
	max-width: 1650px;
}
.navigation{ 
	position: absolute;
	width: 100%;
}
.kopf,
.navigation{
	top: 0;	
	height: 90px;	
	transition: 0.4s ease;
	z-index: 1200;
}
.logo{
	position: absolute;
	top: 36px;
	left: 0;
	width: 12%;
	max-width: 420px;
	min-width: 75px;
	height: auto;
	padding-bottom: 12px;
	transition: 0.4s ease;
}
.logo img{
	pointer-events: auto;
}
.banner{
	position: relative;
	width: 100%;
	height: 84vh;
	transition: 0.4s ease;
}
.head{
	position: absolute;
	left: 15vw;
	bottom: 6%;
	width: auto;
	height: auto;
	transition: 0.4s ease;
	z-index: 1000;	
}
.head h2{
	font-size: 3.3vw;
	transition: 0.4s ease;
}
.subhead{
	font-size: 100% !important;
}

.inhalt{
	position: relative;
	display: block;
	left: 0;
	width: 100%;
	height: auto;
	padding-top: 90px;
	margin: 0;
	background-color: #FFF;
	z-index: 1;	
	transition: 0.4s ease;
}
.wrapper-content,
article{
	position: relative;
	width: 72%;
	max-width: 1650px;
	margin: 0 auto;
	clear: both;
	transition: 0.4s ease;
}
article{
	padding: 60px 0 60px;
}
#in_hi .leading-3 article,
#in_projekte .leading-2 article,
#in_projekte .leading-4 article{
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	clear: both;
}
#in_hi .leading-0 article{
	padding-bottom: 0;
}
ul,
ul.chevron,
.akkordeon ul{
	list-style: none;
	margin-left: 0;
}
ul.chevron li,
.akkordeon ul li{
	position: relative;
	padding-left: 0.3rem;
    text-indent: -0.9rem;
}
ul.chevron li:before{
	position: relative;
	font-family: 'ionicons';
	top: 0;
	content:"\0203A";
	font-size: 1.5rem;
	color: #999;
	padding-right: 0.6rem;
	margin-left: -0.4rem;
}
.items-leading{
	position: relative;
	width: 100%;
}
.items-leading [itemprop="blogPost"]{
	position: relative;
	/*padding: 0 0 3rem 0;
	/*border-bottom: 15px solid #F4D9B7;*/
	clear: both;
}
.items-leading [itemprop="blogPost"]:last-of-type{
	border-bottom: none;
}
.accent-top,
.accent-bottom{
	font-size: max(2.4vw, 1.8rem);
	line-height: 126%;
	text-align: center;
	margin: 4.5rem 0 2.4rem;
	transition: 0.4s ease;
}
.accent-top{
	margin: 1.5rem 0 3.6rem;
}
.accent-bottom{
	margin: 4.5rem 0 2.4rem;
}
.statement-bottom{
	position: relative;
	width: 66%;
	font-size: 125%;
	line-height: 135%;
	text-align: center;
	margin: 6rem auto 3rem;
	transition: 0.4s ease;
}
.col50-wrapper{
	position: relative;
	left: -60px;
	width: calc(100% + 120px);
	padding-top: 1.5rem;
}
.col50{
	position: relative;
	width: 50%;
	text-align: left;
	border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
	float: left;
	transition: 0.4s ease;
}
.col50:first-of-type{
	border-left: none;
}
.col50:nth-of-type(2n){
	border-right: none;
}
.accent-icon{
	position: relative;
	width: 100%;
	display: inline-block;
	font-family: 'Figtree-ExtraBoldItalic';
	font-size: 9rem;
	color: #f2f2f2;
	text-align: center;
	margin-top: 18%;
}
.social-links {
	position: relative;
	text-align: center;
	padding-top: 1.5rem;
	margin: 0 auto 6rem 60px;
	transition: 0.4s ease;
}

/* #Footer
**********************************************/

.fuss{
	position: relative;
	width: 100%;
	height: 180px;
	clear: both;
	background-color: #000;
	margin-top: 0;
	overflow: hidden;
	transition: 0.4s ease;
}
.fuss .wrapper-content{
	margin-top: 1.5rem;
}
.fuss h3{
	margin-bottom: 0.3em;
}
.fuss ul{
	position: relative;
	width: auto;
	height: auto;
	margin-right: 2em;
	float: left;
}
.fuss ul li{
	font-size: 1rem;
	list-style: none;
	white-space: nowrap;
	color: #fff;
}
.fuss ul li a{
	color: #fff;
	transition: 0.6s ease;
}
.fuss ul li a:hover{
	color: #beec27;
	transition: 0.6s ease;
}
.confetti-smile{
	position: absolute;
	margin-top: 3.9%;
	left: 50%;
	width: 2.1rem;
	height: 0; 
	padding-bottom: 60%;
	background-image:url(../bilder/smile-white_150.png);
  	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
  	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);	
	transform: translateY(-50%);
	margin-left: -1.05rem;
	cursor: pointer;
	transition: 0.4s ease;
}
.confetti-smile:hover{
	opacity: .45;
	transition: 0.4s ease;
}

/* #Button
**********************************************/
.button-frei{
	position: relative;
	left: 0;
	height: auto;
	margin-top: 2rem;
}
.button-frei h3,
.color-button h3{
	font-size: 1.5rem;
}
.button-frei h3{
	display: inline-block;
	white-space: nowrap;
	color: #000;
	padding: 0.6rem 1.5rem 0.6rem 0;
	margin: 0;
	transition: 0.4s ease;
}
.button-frei h3 a{
	color: #3a3a3c;
	transition: 0.6s ease;
} 

.button-frei h3 a:hover{
	opacity: .3;
	transition: 0.6s ease;
}
.button-marker{
	position: absolute;
	top: -1.8rem;
	left: -2.4rem;
	width: 13.5rem;
	height: auto;
	z-index: -1;
	transition: .4s ease;
}
.color-button{
	position: relative;	
	max-width: fit-content;
	height: auto;
	margin: 3% auto 0;
}
.inhalt .color-button h3{
	display: inline-block;
	white-space: nowrap;
	color: #fff;
	padding: 0.6rem 1.5rem 0.6rem 3.3rem;
	background-image: linear-gradient(120deg, #f0dc16, #beec27, #20a44c, #2a49c9);
	margin: 0;
}
.inhalt .color-button h3 a{
	color: #fff;
	transition: 0.6s ease;
}
.inhalt .color-button h3 a:hover{
	opacity: .45;
	transition: 0.6s ease;
}
.colorbutton:hover{
	opacity: .7;
}
.b-smile_white,
.b-smile_black{
	position: absolute;
	top: 46.5%;
	width: 1.8rem;
	height: 0;
	padding-bottom: 60%; 
  	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
  	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);	
	transform: translateY(-50%);
	margin: 0;
	float: left;
	z-index: 2;
}
.b-smile_white{left: 6%; background-image:url(../bilder/smile-white_150.png);}
.b-smile_black{left: 0; background-image:url(../bilder/smile-black_150.png);}

/* Start-image 
**********************************************/
.start-window{
	position: relative;
	background-color: #fff;
	overflow: hidden !important
}
.start-window,
.banner#ba_projekte,
.banner#ba_ueber-mich{
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
}
.start-window,
.banner#ba_ueber-mich{
	-webkit-background-position: center center;
	-moz-background-position: center center;
	-o-background-position: center center;
	-ms-background-position: center center;
	background-position: center center;
}
#st_kontakt,
#st_impressum,
#st_datenschutz{
	height: 21vh;
	transition: 0.4s ease;
}

/* Inhalt Bilder
**********************************************/

figure{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	pointer-events: none;
}
figure.image50{
	display: block;
	width: 50%;
	height: auto;
	margin: 2rem 0 0;
	float: left;
}
#in_hi figure.frei{
	position: relative;
	width: 21vw;
	bottom: 0;
	margin-bottom: -9px;
	transition: 0.4s ease;
}
.akkordeon figure{
	top: 3rem;
	transition: 0.4s ease;
}
.bg-img-circle{
	position: relative;
	top: 0;
	left: 17%;
	width: 66%;
	height: 0;
	padding-bottom: 66%;
	border-radius: 50%;
	background-size: cover;	
	background-position: center;
	transition: 0.4s ease;
}



/* Icons
**********************************************/

.ion-phone,
.ion-mail,
.ion-pin,
.ion-download,
.ion-chevron-left,
.ion-chevron-down,
.ion-chevron-up,
.ion-play{
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ion-phone,
.ion-mail,
.ion-pin,
.ion-chevron-left,
.ion-chevron-down,
.ion-chevron-up,
.ion-play{
	font-family: ionicons;
	line-height: 0.6em;
	text-align: center;
	color: #fff;
}
#in_impressum .ion-phone,
#in_datenschutz .ion-phone,
#in_impressum .ion-mail,
#in_datenschutz .ion-mail,
#in_impressum .ion-pin,
#in_datenschutz .ion-pin{
	color: #3a3a3c;
}
.ion-download{
	font-family: ionicons;
	line-height: 1.825em;
}
.ion-phone:before{
	position: relative;
	content: "\f2d2";	
	top: 0.2rem;
	font-size: 1.2rem;
	padding-right: 7px;
}
.ion-mail:before{
	position: relative;
	content: "\f132";	
	top: 0.1rem;
	font-size: 1.2rem;
	padding-right: 6px;
}
.ion-pin:before{
	position: relative;
	content: "\f456";	
	top: 0.1rem;
	font-size: 1.2rem;
	padding-right: 9px;
}
.ion-download:before{
	position: relative;
	content: "\f41f";
	top: -6px;
	font-size: 1.24em;
	color: #336699;
	float: left;
}
.ion-chevron-left:before{
	position: relative;
	content: "\f124";
	top: 0.1rem;
	font-size: 1.24em;
	color: #ffb037;
}
.ion-chevron-up{
	display: block;
	padding-top: 60px;
}
.ion-chevron-up.between{
	display: block;
	padding-top: 150px;
}
.ion-chevron-up:before{
	position: relative;
	content: "\f126";
	top: 0.1rem;
	font-size: 3rem;
	color: #969799;
	transition: 0.4s ease;
}
.ion-chevron-down{
	position: relative;
	display: block;
}
.ion-chevron-down:before{
	position: relative;
	content: "\f123";
	top: 0.1rem;
	font-size: 3rem;
	color: #fff;
	transition: 0.4s ease;
}
.ion-chevron-up:hover:before{
	color: #20a44c;
	transition: 0.6s ease;
}
.ion-chevron-down:hover:before{
	opacity: 0.6;
	transition: 0.4s ease;
}
.ion-play:before{
	position: relative;
	content: "\f215";
	font-size: 2.4rem;
	line-height: 3.72rem;
	color: #fff;
	padding-left: 3px;
	transition: 0.4s ease;
}
.ion-play:hover:before{
	color: #ccc;
	transition: 0.4s ease;
}
.accordion-arrow{
	position: absolute;
	top: 36%;	
	width: 180px;
	height: 75px;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-ms-background-size: contain;
	background-size: contain;
	-webkit-background-repeat: no-repeat;
	-moz-background-repeat: no-repeat;
	-o-background-repeat: no-repeat;
	-ms-background-repeat: no-repeat;
	background-repeat: no-repeat;
	transition: 0.2s ease;
}
.acco-arrow-left{
	left: 0;
}
.acco-arrow-right{
	right: 0;
}
.icon-brand-new,
.icon-brand-fresh,
.icon-brand-intense,
.icon-brand-assets{
	position: absolute;
	top: 45%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);	
	transform: translateY(-50%);
	transition: 0.4s ease;
}
.icon-brand-new,
.icon-brand-intense,
.icon-brand-assets{
	right: 12%;
}
.icon-brand-fresh{
	right: 0;
}
.icon-brand-new{
	width: 240px;
}
.icon-brand-fresh,
.icon-brand-assets{
	width: 300px;
}
.icon-brand-intense{
	width: 180px;
}
/*.smile_black{
	position: absolute;
	top: 0;
	left: 0;
	width: 6rem;
	height: 10%; 
	background-image:url(../bilder/smile-black_150.png);
  	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
  	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);	
	transform: translateY(-50%);
	margin-right: 1rem;
	transition: 0.4s ease;
}*/
h3.smile-black{
	position: relative;
	margin-left: 3.6rem;
}
h3.smile-black:before{
	position: absolute;
	top: 0.6rem;
	left: 0;
	width: 6rem;
	height: 54%;
	content: "";
	background-image: url(../bilder/smile-black_150.png);
	background-position: left;
  	background-repeat: no-repeat;
  	background-size: contain;
	margin-left: -3.6rem;
}
ul.social-contact li{
	position: relative;
	margin: 1.2rem 0 2.4rem 4.2rem;
}
.social-links ul.social-contact{
	position: relative;
	display: inline-block;
	text-align: justify;
	margin: 0 auto;
}
.social-links ul.social-contact li{
	margin: 1.2rem 3rem 2.4rem;
	transition: 0.4s ease;
	float: left;
}
.social-mail:before{
	position: absolute;
	top: -0.6rem;
	left: 0;
	width: 3rem;
	height: 3rem;
	content: "";
	background-image: url(../../../images/bilder-kontakt/Icon-Social-Mail.png);
	background-position: left;
  	background-repeat: no-repeat;
  	background-size: contain;
	margin-left: -4.2rem;
}
.social-phone:before{
	position: absolute;
	top: -0.6rem;
	left: 0;
	width: 3rem;
	height: 3rem;
	content: "";
	background-image: url(../../../images/bilder-kontakt/Icon-Social-Phone.png);
	background-position: left;
  	background-repeat: no-repeat;
  	background-size: contain;
	margin-left: -4.2rem;
}
.social-insta,
.social-linkedin{
	position: absolute;
	top: -0.6rem;
	left: 0;
	width: 3rem;
	height: 3rem;
	margin-left: -1.5rem;
	transition: 0.6s ease;
}
.social-insta img,
.social-linkedin img{
	pointer-events: auto;
}
.social-insta:hover,
.social-linkedin:hover{
	opacity: 0.4;
	transition: 0.6s ease;
}

/* #Kompendium
**********************************************/

.kompendium{
	position: relative;
	height: auto;
	padding: 75px 0 180px;
	clear: both;
}
.kompendium:first-of-type{
	padding-top: 30px;
}


/* Akkordeon
**********************************************/
.com-content-article h1{
	display: none;
}
.akkordeon{
	position: relative;	
	margin: 1rem 0 2rem;
	clear: both;
}
.akkordeon ul{
	width: 50%;
}
#page-bottom{
	margin-bottom: 0;
}
.bar{
	position: relative;
	color: #fff;
	margin: 0;
	padding: 1.5rem 0 1.65rem;
	background-color: #3a3a3c;
	border-bottom: 2px solid #fff;
	cursor: pointer; 
}
.bar:first-of-type{
	margin-top: 0;
}
.bar .wrapper-content{
	width: 570px;
	clear: both;
}
.bar h3{
	font-family: 'Raleway-Regular';
	font-size: 3rem;
	color: #fff;
	margin: 0 0 0.6rem 0;
	transition: 0.4s ease;
}
.bar h3.subhead{
	width: 60%;
}
.bar .bar-header{
	transition: 0.4s ease;
}
.bar .bar-header:hover{
	opacity: .45;
	transition: 0.4s ease;
}
.bar .header-right{
	position: relative;
	left: 50%;
}
.bar .header:hover{
	opacity: .45;
	transition: 0.4s ease;
}
/*#in_projekte .akkordeon#referenzen .bar .bar-header h3{
	text-align: center;
}*/
#in_projekte .akkordeon#referenzen .accordion-arrow{
	top: 30%;
	transition: 0.2s ease;
}
.content{
	position: relative;
	top: 0;
	color: #fff;
	text-decoration: none;
	background-color: #3a3a3c;
	padding-bottom: 4.5rem;
	border-bottom: 2px solid #fff;
}	
.content h3{
	margin-top: 0;
	padding-top: 2.4rem;
	color: #fff;
}
.content ul{
	padding: 12px 0 1.5rem 1.5rem;
	list-style-type: none;
}
.content ul li{
	position: relative;
	text-indent: -1.5rem;
	white-space: normal !important;
	-webkit-hyphens: auto !important;
	-moz-hyphens: auto !important;
	-ms-hyphens: auto !important;
	hyphens: auto !important;
}
.content ul li:before{
	position: relative;
	top: 0;
	content:"\002b";
	font-size: 1.5rem;
	color: #fff;
	padding-right: 0.6rem;
	margin-left: 0.27rem;
}
.current {
	color: #969799;
}
.current .wrapper-content .accordion-arrow{
	top: 0;
	transform: scaleY(-1);
	transition: 0.2s ease;
	
}
#in_projekte .akkordeon#referenzen .current .wrapper-content .accordion-arrow{
	top: -21%;
	transform: scaleY(-1);
	transition: 0.2s ease;
}

/* Hi 
**********************************************/

.claim-marker{
	position: absolute;
	top: -1.5%;
	left: 31.5%;
	width: 60%;
	height: auto;
}
.start-window#st_hi .head{
	position: fixed;
	z-index: 0;
}
#in_hi{
	padding-top: 0;
}
#in_hi .leading-0 .col50:nth-of-type(2n){
	margin-top: 12%;
	transition: 0.4s ease;
}
#in_hi .leading-1,
#in_ueber-mich .leading-3{
	height: 15rem;
	background-color: #3a3a3c;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	z-index: 3;
}

#in_hi .leading-1 article,
#in_ueber-mich .leading-3 article{
	padding: 51px 0 0;
	transition: 0.4s ease;
}
#in_hi .leading-1 h2,
#in_ueber-mich .leading-3 h2{
	color: #fff;
}
#in_hi .leading-1 .color-button,
#in_ueber-mich .leading-3 .color-button{
	margin: 1.8rem auto 0;
}
#in_hi .leading-2 article{
	padding: 60px 0 0;
}
#in_hi .leading-1 .kompendium,
#in_ueber-mich .leading-3 .kompendium{
	height: 33.33%;
	scroll-snap-align: end;
}
#in_hi .leading-2 .kompendium:nth-of-type(3n) .col50:first-child p {
	width: 21rem;
}
.pfeile{
	position: absolute;
	left: 18%;
	width: 30%;
	height: auto;
}
.pfeil01{
	top: 2.4rem;
}
.pfeil02{
	top: 4.5rem;
	rotate: 6deg;
}
.pfeil03{
	top: 4.5rem;
	rotate: -6deg;
}

/* Projekte 
**********************************************/

#in_projekte .leading-0 article{
	width: 50%;
	text-align: center;
	margin: 0 auto;
}
#in_projekte .leading-0 p{
	font-size: 120%;
	line-height: 135%;
}
#in_projekte figure.icon-frei{
	position: relative;
	width: 21vw;
	margin-left: 0;
	transition: 0.4s ease;
}

/* Über mich
**********************************************/
#in_ueber-mich .leading-1 article{
	text-align: center;
}
#in_ueber-mich .leading-2 article{
	padding: 4.5rem 0 6rem;
}
.project-step{
	position: relative;
	clear: both;
}
.project-step.right{
	display: inline-block;
	margin-top: 6.6%;
	width: 45%;
	float: right;
}
.project-step h2{
	font-family: 'Figtree-SemiBoldItalic';
	font-size: 1.8rem;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
  	 -o-hyphens: auto; 	
   	-ms-hyphens: auto;
   	hyphens: auto;
}
.step-arrow{
	position: relative;
	display: inline-block;
	margin-bottom: 12px;
} 
.step-arrow img{
	top: 0;
	left: 0;
	width: auto;
	height: 13.5%;
	transition: 0.4s ease;
}
.step-arrow figure{
	position: relative;
	left: 4.5vw;
	
}

/* Kontakt
**********************************************/
body.kontakt #buehne{
	min-height: calc(100% - 138px);
}
#ba_kontakt,
#ba_impressum,
#ba_datenschutz{
	display: none;
}
#in_kontakt article{
	padding: 0;
}
#in_kontakt .col50.col-right{
	float: right;
}
#in_kontakt .leading-0 article h2{
	width: 90%;
}
#in_kontakt article .col50.col-image{
	margin-bottom: 1.5rem;
}

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

#in_impressum h2,
#in_datenschutz h2{
	font-family: 'Figtree-SemiBoldItalic';
	margin-bottom: 2.7rem;
}
#in_impressum h3,
#in_datenschutz h3{
	font-family: 'Raleway-Regular';
	margin: 2.4rem 0 1.2rem;
}
#in_impressum h4,
#in_datenschutz h4{
	font-family: 'Raleway-Regular';
	margin: 1.5rem 0 0.9rem;
}
#in_impressum article:last-of-type{
	padding-top: 1.5rem;
}
#in_datenschutz ul.plus{
	padding: 0 0 1.2rem 0;
	list-style-type: none;
	margin-left: 1.5rem;
}
#in_datenschutz ul.plus li{
	position: relative;
	text-indent: -1.2rem;
	white-space: normal !important;
	-moz-hyphens: auto !important;
	-ms-hyphens: auto !important;
	hyphens: auto !important;
}
#in_datenschutz ul.plus li:before{
	position: relative;
	top: 0.42rem;
	font-size: 2.4rem;
	content:"\002b";
	color: #969799;
	padding-right: 0.6rem;
	margin-left: -0.4rem;
}



@media only screen and (min-width: 2400px) {
	
body{
	font-size: 130%;
}

/*Willkommen
**********************************************/


}


@media only screen and (max-width: 2400px) {
	
body{
	font-size: 125%;
}

/*Navigation
**********************************************/


}


@media only screen and (max-width: 2100px) {
	
/* Buttons
**********************************************/
#in_hi .leading-1 article, 
#in_ueber-mich .leading-3 article {
	padding: 30px 0 0;
}

/* Hi
**********************************************/
.pfeile {
	left: 21%;
}



}

@media only screen and (max-width: 1800px) {
	
body{
	font-size: 115%;
}
h2{
	font-size: 2.85rem;
}

/* Navigation 
**********************************************/


/*Layout
**********************************************/
#buehne{
	margin-bottom: 0;
}

/* Fuss
**********************************************/
.fuss{
	height: 156px;
}
.confetti-smile {
	width: 2.4rem;
	height: 12%;
	margin-left: -1.2rem;
}

/* Hi
**********************************************/
#in_hi .leading-0 .col50:nth-of-type(2n) {
	margin-top: 9%;
}
#in_hi .leading-2 .kompendium:nth-of-type(3n) .col50:first-child p {
	width: 18rem;
}
.statement-bottom{
	width: 72%;
}

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

}

@media only screen and (max-width: 1650px) {

/* Navigation 
**********************************************/
.nav1{
	top: 60px;
}

/*Layout
**********************************************/


/*Fuss
**********************************************/
.fuss{
	height: 138px;
}

/* Buttons
**********************************************/
#in_hi .leading-1 article, 
#in_ueber-mich .leading-3 article {
	padding: 30px 0 15px;
}
.bg-img-circle {
	left: 9%;
	width: 75%;
	padding-bottom: 75%;
}
#in_kontakt .bg-img-circle {
	left: 12.5%;
	width: 75%;
	padding-bottom: 75%;
}



/*kontakt
**********************************************/

}


@media only screen and (max-width: 1500px) {
	
body{
	font-size: 100%;
}
h3{
	font-size: 1.8rem;
}
/*Navigation
**********************************************/

.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
	top: 1.35rem;
}

/*Layout
**********************************************/
.header-gradient{
	height: 13.5vw;
}
.col50 {
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
}
.ion-chevron-up.between {
	padding-top: 90px;
 }

/* Hi
**********************************************/
#in_hi .leading-0 article{
	padding-top: 30px;
}
#in_hi .leading-2 .kompendium:nth-of-type(3n) .col50:first-child p {
	width: 16.5rem;
  }
.pfeile {
	left: 22.5%;
}
.statement-bottom{
	width: 79%;
}

/*Projekte
**********************************************/
#in_projekte figure.icon-frei {
	width: 66%; 
  }

/*kontakt
**********************************************/
#st_kontakt, #st_impressum, #st_datenschutz {
	height: 15vh;
}
.social-links {
	margin: 0 auto 6rem 45px;
}


/* Akkordeon
**********************************************/
.icon-brand-new,
.icon-brand-intense,
.icon-brand-assets{
	right: 12%;
}
.icon-brand-fresh{
	right: 0;
}
.icon-brand-new{
	width: 180px;
}
.icon-brand-fresh,
.icon-brand-assets{
	width: 240px;
}
.icon-brand-intense{
	width: 120px;
}


}

@media only screen and (max-width: 1350px) {

/* Navigation 
**********************************************/


/*Layout
**********************************************/

.banner{
	height: 75vh;
}
.col50 {
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}

/* Hi
**********************************************/
#in_hi .leading-0 article{
	padding-top: 0;
}
#in_hi .leading-0 .col50:nth-of-type(2n){
	margin-top: 6%;
}
#in_hi .leading-1, 
#in_ueber-mich .leading-3 {
	height: 12rem;
}
#in_hi .leading-1 article .kompendium, 
#in_ueber-mich .leading-3 article .kompendium{
	padding: 60px 0 144px;
}
#in_hi .leading-1 article .kompendium h2, 
#in_ueber-mich .leading-3 article .kompendium h2{
	font-size: 2.4rem;
}
#in_hi .leading-1 article .kompendium .col50:first-of-type, 
#in_ueber-mich .leading-3 article .kompendium .col50:nth-of-type(1n){
	border-left: none;
	border-right: none;
}

.pfeile {
	left: 21%;
}

/*kontakt
**********************************************/
.social-links {
	margin: 0 auto 6rem 30px;
}


}

@media only screen and (max-width: 1200px) {

/* Navigation 
**********************************************/
.nav1 {
	top: 54px;
}
.sticky{
	top: 24px;
}

/*Layout
**********************************************/
.header-gradient{
	height: 15vw;
}
.logo{
	top: 27px;
	width: 13.5%;
}
.kopf,
.wrapper-content,
article {
	width: 78%;
}
article{
	padding: 45px 0 45px;
}
.inhalt{
	padding-top: 60px;
}
.color-button h3 {
	font-size: 1.2rem;
	}
.inhalt .color-button h3 {
	padding: 0.45rem 0.9rem 0.45rem 2.7rem;
}
.b-smile_white, .b-smile_black {
	width: 1.5rem;
}

/* Akkordeon
**********************************************/

.bar {
	padding: 1.5rem 0 1.5rem;
}
.bar .wrapper-content {
	width: 405px;
}
.bar h3 {
	font-size: 2.4rem;
	margin: 0 0 0.3rem 0;
}
.accordion-arrow{
	position: absolute;
	top: 36%;	
	width: 120px;
	height: 48px;
}
.icon-brand-assets{
	width: 180px;
}
.content h3{
	margin-bottom: 0.6rem;
}

/*Hi
**********************************************/
#in_hi figure.frei {
	width: 24vw;
}
#in_hi .leading-1 article .kompendium:nth-of-type(3n), 
#in_ueber-mich .leading-3 article .kompendium:nth-of-type(3n){
	padding: 60px 0 159px;
}
.statement-bottom{
	width: 100%;
	margin: 2.4rem auto 2.4rem;
}
.accent-bottom {
	margin: 3rem 0 1.5rem;
  }

/*Projekte
**********************************************/
#in_projekte .leading-0 article {
	width: 60%;
}
#in_projekte figure.icon-frei {
	width: 72%; 
}

/*Über mich
**********************************************/
.project-step h2{
	font-size: 2.4rem;
}



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

.banner{
	position: relative;
	left: 0;
	width: 100%;
	height: 450px;
}


}

@media only screen and (max-width: 1080px) {

.banner{
	position: relative;
	width: 100%;
	height: 420px;
}


}


@media only screen and (max-width: 960px) {
	
body{
    -webkit-text-size-adjust: none;
}	
	
h2{
	font-size: 2.4rem;
}
h3{
	font-size: 1.95rem;
}
h4{
	font-size: 1.5rem;
}

/* Navigation 
**********************************************/
.nav1 {
	top: 45px;
}
.nav1 ul.nav li {
	padding: 0 24px;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after{
    width: 48px;
}
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
    width: 96px;
}
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after{
    width: 114px;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
	top: 1.38rem;
}

/*Layout
**********************************************/

.kopf,
.wrapper-content, 
article {
	width: 84%;
}
.start-footer {
	bottom: 24px;
	width: 36px;
	height: 24px;
	margin-left: -18px;
}
.ion-chevron-down:before {
	font-size: 2.4rem;
}
.kompendium {
	padding: 60px 0 150px;
}
.confetti-smile {
	width: 1.8rem;
	height: 12%;
	margin-left: -0.9rem;
}
.ion-chevron-up:before{
	font-size: 2.4rem;
}
.accent-icon {
	margin-top: 30%;
}
#in_projekte .leading-0 article,
#in_ueber-mich .leading-0 article {
	padding: 24px 0 45px;
}

/*Hi
**********************************************/

#in_hi .leading-1, 
#in_ueber-mich .leading-3 {
	height: 9rem;
}
#in_hi .leading-1 article .kompendium, 
#in_ueber-mich .leading-3 article .kompendium{
	padding: 60px 0 114px;
}
#in_hi .leading-1 article .kompendium h2, 
#in_ueber-mich .leading-3 article .kompendium h2{
	font-size: 2.1rem;
}
#in_hi .leading-1 article .kompendium:nth-of-type(3n), 
#in_ueber-mich .leading-3 article .kompendium:nth-of-type(3n) {
	padding: 60px 0 129px;
}
#in_hi .leading-2 .kompendium:first-of-type .col50:first-child{
	padding-right: 15%;
} 
.pfeile {
	left: 24%;
	width: 27%;
}
.pfeil03 {
	top: 6rem;
	left: 28.5%;
	width: 24%;
}

/*Über mich
**********************************************/

.bg-img-circle {
	left: 4%;
	width: 90%;
	padding-bottom: 90%;
}
.project-step h2 {
	font-size: 1.8rem;
 }
.step-arrow.arrow-01 img{height: 120px;} 
.step-arrow.arrow-02 img{height: 240px;}
.step-arrow.arrow-03 img{height: 240px;}

/*kontakt
**********************************************/

.banner{
	position: relative;
	width: 100%;
	height: 390px;
}

}

@media only screen and (max-width: 900px) {


/* Navigation 
**********************************************/


/*Layout
**********************************************/
.header-gradient{
	height: 18vw;
}
#in_hi figure.frei {
	width: 30vw;
}

/*Akkordeon
**********************************************/

.icon-brand-new{
	width: 150px;
}
.icon-brand-fresh{
	width: 180px;
}
.icon-brand-intense{
	width: 90px;
}


/*Projekte
**********************************************/
#in_projekte .leading-0 article {
	width: 66%;
}

/*Über mich
**********************************************/

#in_ueber-mich .leading-2 article {
	padding: 4.5rem 0 3rem;
}

/*kontakt
**********************************************/

.banner{
	position: relative;
	width: 100%;
	height: 360px;
}

}

@media only screen and (max-width: 840px) {

/* Layout 
**********************************************/


}

@media only screen and (max-width: 780px) {

/* Navigation 
**********************************************/
.nav1{
	right: -12px;
}
.sticky{
	top: 18px;
}
.nav1 ul.nav li {
	padding: 0 18px;
}

/*Layout
**********************************************/
.header-gradient{
	height: 30vw;
}
.head h2{
	font-size: 4.5vw;
}
.logo{
	width: 105px;
}
.kopf,
.wrapper-content, 
article {
	width: 90%;
}

/*Hi
**********************************************/
#in_hi .leading-0 article .col50:first-of-type {
	position: absolute;
	top: 0;
	width: 33%;
	height: 100%;
	border: none;
}
#in_hi .leading-0 article figure.frei {
	position: absolute;
	height: 0;
	padding-bottom: 159%;
  	bottom: 0;
}
#in_hi .leading-0 article .col50:nth-of-type(2n){
	left: 50%;
}
#in_hi .leading-0 article .col50:nth-of-type(2n) .color-button{
	margin: 3% auto 1.5rem;
}

/*Projekte
**********************************************/
#in_projekte figure.icon-frei {
	width: 84%; 
}
.accent-icon {
	margin-top: 42%;
}

/*kontakt
**********************************************/

.banner{
	height: 330px;
}


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


}

@media only screen and (max-width: 720px) {

/*Layout
**********************************************/	
.col50 {
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
}

/*Hi
**********************************************/
#in_hi .leading-0 article .col50{
	border: none;
}
#in_hi .leading-1 article .kompendium h2, 
#in_ueber-mich .leading-3 article .kompendium h2 {
	font-size: 1.8rem;
}
#in_hi .leading-2 .kompendium:nth-of-type(3n) .col50:first-child p {
	width: 10.5rem;
 }

/*Projekte
**********************************************/
#in_projekte .leading-0 article {
	width: 75%;
}

/*Kontakt
**********************************************/
.social-links {
	margin: 0 auto 6rem 15px;
}

}


@media only screen and (max-width: 690px) {	

/* Navigation 
**********************************************/


/*kontakt
**********************************************/

.banner{
	position: relative;
	width: 100%;
	height: 300px;
}

}

@media only screen and (max-width: 660px) {	

h2{
	font-size: 2.1rem;
}
h3{
	font-size: 1.65rem;
}
h4{
	font-size: 1.35rem;
}

/* Navigation 
**********************************************/
.nav1 ul.nav li {
	padding: 0 12px;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after{
    width: 36px;
}
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
    width: 84px;
}
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after{
    width: 102px;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
	top: 1.35rem;
}

/*Layout
**********************************************/
.start-footer {
	bottom: 6px;
	width: 36px;
	height: 24px;
	margin-left: -18px;
}
.ion-chevron-down:before {
	font-size: 1.8rem;
}
.head {
	bottom: 9%;
}
/*Hi
**********************************************/

#in_hi figure.frei {
	margin-left: 6%;
}
#in_hi .leading-1 article .kompendium, 
#in_ueber-mich .leading-3 article .kompendium {
	padding: 60px 0 108px;
}
#in_hi .leading-1 article .kompendium h2, 
#in_ueber-mich .leading-3 article .kompendium h2 {
	font-size: 1.65rem;
}
#in_hi .leading-1 article .kompendium:nth-of-type(3n), 
#in_ueber-mich .leading-3 article .kompendium:nth-of-type(3n) {
	padding: 60px 0 120px;
}
#in_hi .leading-1 .color-button, 
#in_ueber-mich .leading-3 .color-button {
	margin: 0.75rem auto 0;
}
#in_hi .leading-1 .kompendium:nth-of-type(3n) .color-button, 
#in_ueber-mich .leading-3 .kompendium:nth-of-type(3n) .color-button{
	margin: 1.62rem auto 0;
}
#in_hi .leading-2 .kompendium:nth-of-type(3n) .col50:first-child {
	padding-right: 18%;
}
.pfeile {
	left: 24%;
	width: 24%;
}
.pfeil01 {
	top: 3rem;
}	
.pfeil02 {
	top: 4.8rem;
}
.pfeil03 {
		top: 7.2rem;
}
.statement-bottom{
	width: 100%;
	margin: 3.6rem auto 2.4rem;
}

/*Akkordeon
**********************************************/
.bar{
	padding: 0.6rem 0 0.6rem;
}
.bar .wrapper-content{
	width: 360px;
}
.bar h3{
	font-size: 2.1rem;
	margin: 0 0 0.15rem 0;
}
.icon-brand-new,
.icon-brand-intense,
.icon-brand-assets{
	right: 0;
}
.icon-brand-new{
	width: 120px;
}
.icon-brand-fresh{
	width: 120px;
}
.icon-brand-intense{
	width: 60px;
}
.icon-brand-assets{
	width: 120px;
}
.akkordeon ul{
	width: 75%;
}


/*Über mich
**********************************************/

.bg-img-circle {
	left: 0;
	width: 100%;
	padding-bottom: 100%;
}
.project-step h2 {
	font-size: 1.5rem;
 }
.project-step.right {
	margin-top: 9%;
	width: 60%;
}

/*kontakt
**********************************************/

.banner{
	height: 270px;
}

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


}

@media only screen and (max-width: 600px) {

/* Navigation 
**********************************************/
.sticky{
	top: 12px;
}

/*Layout
**********************************************/
.header-gradient{
	height: 39vw;
}
.logo {
	top: 21px;
}
#in_projekte .leading-0 article,
#in_ueber-mich .leading-0 article {
	padding: 0 0 30px;
}

/* Hi
**********************************************/	

#in_hi .leading-0 article .col50:first-of-type{
	width: 210px;
}
#in_hi .leading-0 article figure.frei{
	width: 100%;
	padding-bottom: 156%;
}
#in_hi .leading-0 article .col50:nth-of-type(2n){
	left: 34%;
	width: 66%;
	border-left: 15px solid transparent;
	background-color: rgba(255,255,255,0.6)
}
#in_hi figure.frei{
	margin-left: 0;
}
.pfeile{
	left: 27%;
	width: 24%;
}
#in_hi .leading-2 .kompendium:nth-of-type(3n) {
	padding: 60px 0 180px;
}

/*Projekte
**********************************************/
#in_projekte .leading-1 article .col50:first-of-type{
	width: 34%;
}
#in_projekte .leading-1 article .col50:nth-of-type(2n) {
	width: 66%;
	border-left: 15px solid transparent;
}
#in_projekte figure.icon-frei {
	width: 100%; 
}
.accent-icon {
	margin-top: 60%;
}

/*Über mich
**********************************************/
#in_ueber-mich .leading-0 article .col50:first-of-type{
	width: 34%;
}
#in_ueber-mich .leading-0 article .col50:nth-of-type(2n) {
	width: 66%;
	border-left: 15px solid transparent;
}

.project-step.right {
	margin-top: 15%;
	width: 54%;
}

/*kontakt
**********************************************/
/*.social-links {
	margin: 0 auto 6rem auto;
}*/



}


@media only screen and (max-width: 540px) {

/* Navigation 
**********************************************/

.nav1{
	top: 42px;
	font-size: 1rem;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after{
    width: 30px;
}
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
    width: 75px;
}
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after{
    width: 90px;
}

/* Hi
**********************************************/	
#in_hi .leading-1, 
#in_ueber-mich .leading-3 {
	height: 7.5rem;
}
#in_hi .leading-1 article .kompendium h2, 
#in_ueber-mich .leading-3 article .kompendium h2 {
	font-size: 1.5rem;
}
#in_hi .leading-1 article .kompendium, 
#in_ueber-mich .leading-3 article .kompendium {
	padding: 60px 0 90px;
}
#in_hi .leading-1 article .kompendium:nth-of-type(3n), 
#in_ueber-mich .leading-3 article .kompendium:nth-of-type(3n) {
	padding: 60px 0 102px;
}
#in_hi .leading-1 .color-button, 
#in_ueber-mich .leading-3 .color-button {
	margin: 0.75rem auto 0;
}
#in_hi .leading-1 .kompendium:nth-of-type(3n) .color-button, 
#in_ueber-mich .leading-3 .kompendium:nth-of-type(3n) .color-button{
	margin: 1.62rem auto 0;
}
#in_hi .leading-2 article {
	padding: 30px 0 0;
}  
.accent-top {
	margin: 1.5rem 0 1.5rem;
  }


/*Akkordeon
**********************************************/

.icon-brand-new{
	top: 90%;
	width: 96px;
}
.icon-brand-fresh{
	top: 96%;
	width: 105px;
}
.icon-brand-intense{
	top: 90%;
	width: 66px;
}
.icon-brand-assets{
	top: 96%;
	width: 90px;
}
.akkordeon ul{
	width: 96%;
}

/*Kontakt
**********************************************/
.social-links ul.social-contact li{
	margin: 1.2rem 2.55rem 2.4rem;
}

}

@media only screen and (max-width: 480px) {
	
/* Navigation 
**********************************************/

/* Layout
**********************************************/
.head h2 {
	font-size: 7.5vw;
}
.fuss ul{
	margin-bottom: 1em;
	float: none;
}
.fuss .wrapper-content {
	margin-top: 1rem;
}
.fuss{
	height: 132px;
}
.confetti-smile {
	top: 12%;
}

/* Hi
**********************************************/	

#in_hi .leading-1 article .kompendium h2, 
#in_ueber-mich .leading-3 article .kompendium h2 {
	font-size: 1.35rem;
}
#in_hi .leading-1 .color-button, 
#in_ueber-mich .leading-3 .color-button {
	margin: 0.45rem auto 0;
}
#in_hi .leading-1 .kompendium:nth-of-type(3n) .color-button, 
#in_ueber-mich .leading-3 .kompendium:nth-of-type(3n) .color-button{
	margin: 1.05rem auto 0;
}
#in_hi .leading-2 article {
	padding: 30px 0 0;
}  
.accent-top {
	margin: 1.5rem 0 1.5rem;
  }
.pfeil03 {
	top: 8.1rem;
}
.accent-bottom {
	margin: 2.1rem 0 0rem;
  }

/*Projekte
**********************************************/
#in_projekte .leading-0 article {
	width: 90%;
}
.kompendium.projects{
	display: flex;
	flex-direction: column;
	padding-bottom: 30px;
}
.kompendium.projects:first-of-type{
	padding-top: 60px;
}
.kompendium.projects .col50{
	width: 100%;
	border-left: none;
	border-right: none;
}
.kompendium.projects .col50.project-image{
	order: 1;
	margin-bottom: 2.4rem;
}
.kompendium.projects .col50.project-image figure{
	top: 0;
}
.kompendium.projects .col50.project-text{
	order: 2;
}

/*Über mich
**********************************************/
#in_ueber-mich .leading-0 article .col50:first-of-type,
#in_ueber-mich .leading-0 article .col50:nth-of-type(2n) {
	width: 100%;
}
#in_ueber-mich .leading-0 article .col50:first-of-type{
	border-right: none;
	margin-bottom: 3rem;
}
#in_ueber-mich .leading-0 article .col50 .bg-img-circle{
	left: 12.5%;
	width: 75%;
	padding-bottom: 75%;
}
#in_ueber-mich .leading-2 article {
	padding: 1.5rem 0 3rem;
}

/*kontakt
**********************************************/
body.kontakt #buehne{
	min-height: calc(100% - 132px);
}
#st_kontakt, #st_impressum, #st_datenschutz {
	height: 150px;
  }
#in_kontakt.inhalt,
#in_impressum.inhalt,
#in_datenschutz.inhalt{
	padding-top: 0;	
}
#in_kontakt .leading-0 article .item-content{
	display: flex;
	flex-direction: column;
}
#in_kontakt .leading-0 article .col50{
	border-left: none;
	border-right: none;
	margin-bottom: 3rem;
}
#in_kontakt .leading-0 article .col50.col-image{
	width: 100%;
	order: 1;
}
#in_kontakt .leading-0 article .col50.col-text{
	width: 100%;
	order: 2;
}
#in_kontakt .leading-0 article .col50.col-right{
	width: 100%;
	margin-bottom: 0;
	order: 3;
}
/*Kontakt
**********************************************/
.social-links ul.social-contact li{
	margin: 1.2rem 2.7rem 2.4rem;
}


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

}

@media only screen and (max-width: 450px) {
	
/* Navigation 
**********************************************/
.navigation{
	width: 100%;
}
.nav_m{
	position: fixed;
	display: block;
	top: 30px;
	right: 5%;
	width: 54px;
	height: 54px;
	padding-top: 9px;
	border-radius: 50%;
	background-color:rgba(255,255,255,0.6);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: 0.4s ease;
	z-index: 150;	
	cursor: pointer;
}
.nav_m:hover{
	opacity: .45;
	transition: 0.4s ease;
}
.nav1{
	position: fixed;
	display: block;
	top: 0;
	left: 60%;
	width: 40%;
	height: 100%;
	border-radius: 0;
	background-color: rgba(255,255,255,0.85); 
	-webkit-transform: none;
	-ms-transform:none;
	-o-transform: none;
	transform: none;
	transition: none;
	overflow-x: hidden;
	overflow-y: auto;
}

.nav1 ul.nav{
	position: relative;
	top: 18%;
	left: 12%;
	width: auto;
	height: auto;
	font-size: 1.2rem;
	line-height: 1.8rem;
	margin: 4.5% 0;
	padding: 0;
	transition: 0.4s ease;
	
	float: none;
}
.nav1 ul.nav li{
	position: relative;
	display: inline-block;
	width: auto;
	color: #000;
	text-align: left;
	padding: 0 0 1rem;
	border-right: none;
	margin: 0 auto;
	clear: both;
}
.nav1 ul.nav li a{
	position: relative;
	display: inline-block;
	color: #000;
	text-align: center;
	margin: 0 auto;
}
.nav1 ul ul{
	position: relative;
	top: 0.3rem;
	width: auto;
	height: auto;
	white-space: nowrap;
	margin: 0;
	list-style: none;
	background: none; 
	padding: 0;
	margin-left: 0;
	padding-bottom: 1rem;
	display: none;
}
.nav1 ul ul li {
	font-size: 1rem !important;
	padding: 0 0 0.3rem !important;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after{
    width: 36px;
}
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
    width: 84px;
}
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after{
    width: 102px;
}
.nav1 ul.nav li:nth-of-type(1n).current.active a:after,
.nav1 ul.nav li:nth-of-type(2n).current.active a:after,
.nav1 ul.nav li:nth-of-type(3n).current.active a:after,
.nav1 ul.nav li:nth-of-type(4n).current.active a:after,
.nav1 ul.nav li:nth-of-type(1n) a:hover:after,
.nav1 ul.nav li:nth-of-type(2n) a:hover:after,
.nav1 ul.nav li:nth-of-type(3n) a:hover:after,
.nav1 ul.nav li:nth-of-type(4n) a:hover:after{
	top: 1.5rem;
	left: 0;
}

/*Akkordeon
**********************************************/	
/*.icon-brand-new{
	top: 90%;
	width: 75px;
}
.icon-brand-fresh{
	top: 96%;
	width: 75px;
}
.icon-brand-intense{
	top: 90%;
	width: 54px;
}
.icon-brand-assets{
	top: 96%;
	width: 75px;
}*/

.icon-brand-new,
.icon-brand-fresh,
.icon-brand-intense,
.icon-brand-assets{
	top: 50%;
}
.icon-brand-new,
.icon-brand-fresh,
.icon-brand-intense,
.icon-brand-assets{
	right: 25%;
	width: 50%;
	opacity: .36;
}
.akkordeon ul{
	width: 90%;
}

/*Projekte
**********************************************/	

.project-step.right {
	margin-top: 15%;
	width: 50%;
}

/*Über mich
**********************************************/
#in_ueber-mich .leading-2 article {
	padding: 0.3rem 0 3rem;
}


}

@media only screen and (max-width: 420px) {

/*Layout
**********************************************/	

.kopf, 
.wrapper-content, 
article {
		width: 93%;
}
/* Akkordeon
**********************************************/	
.bar .wrapper-content {
	width: 300px;
}
.bar h3 {
	font-size: 1.8rem;
	margin: 0 0 0.1rem 0;
}
.bar .header-right {
	left: 45%;
}
.accordion-arrow{
	position: absolute;	
	width: 105px;
	height: 42px;
}
.content h3 {
	font-size: 1.5rem;
}

/* Hi
**********************************************/	
#in_hi .leading-0 article .col50:first-of-type {
	left:-6px;
}
#in_hi .leading-0 article figure.frei {
	width: 90%;
	padding-bottom: 142.5%;
}

}

@media only screen and (max-width: 393px) {

/* Hi 
**********************************************/	
#in_hi .leading-1 article .kompendium {
	padding: 60px 0 99px;
}
#in_ueber-mich .leading-3 article .kompendium {
	padding: 60px 0 90px;
}
#in_hi .leading-1 article .kompendium:nth-of-type(3n), 
#in_ueber-mich .leading-3 article .kompendium:nth-of-type(3n) {
	padding: 60px 0 111px;
}
#in_hi .leading-1 .color-button, 
#in_ueber-mich .leading-3 .color-button {
	margin: 0.75rem auto 0;
}
#in_hi .leading-1 .kompendium:nth-of-type(3n) .color-button, 
#in_ueber-mich .leading-3 .kompendium:nth-of-type(3n) .color-button{
	margin: 1.62rem auto 0;
}

/* Akkordeon
**********************************************/	
.content h3 {
	font-size: 6.3vw;
}


}

@media only screen and (max-width: 360px) {

/* Akkordeon
**********************************************/	
.bar .header-right {
	left: 42%;
}


}