@font-face {
    font-family: 'Helvetica Neue';
    src: url('media/files/fonts/HelveticaNeueThin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('media/files/fonts/HelveticaNeueLight.woff') format('woff'),
	url('media/files/fonts/HelveticaNeueLight.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('media/files/fonts/HelveticaNeueHeavy.woff') format('woff'),
	url('media/files/fonts/HelveticaNeueHeavy.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('media/files/fonts/HelveticaNeueBlack.woff') format('woff'),
	url('media/files/fonts/HelveticaNeueBlack.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IKEA Sans';
    src: url('media/files/fonts/IKEASans-Regular.woff2') format('woff2'),
        url('media/files/fonts/IKEASans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IKEA Sans';
    src: url('media/files/fonts/IKEASans-Heavy.woff2') format('woff2'),
        url('media/files/fonts/IKEASans-Heavy.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Cursor */
@media (hover: hover) {
	body * {cursor: none;}
	#cursor {
		display: initial;
		position: fixed;
		top: -100px;
		left: -100px;
		z-index: 9999999;
		width: 20px;
		height: 20px;
		background-color: transparent;
		border-radius: 50%;
/*		mix-blend-mode: difference;*/
		pointer-events: none;
	}
    #cursor:after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        left: 10px;
        top: 10px;
        border-radius: 50%;
        font-family: 'IKEA Sans';
        color: #fff;
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        background-color: #F03333;
        transition: left .3s ease-in-out, top .3s ease-in-out, font-size .3s ease-in-out, line-height .3s ease-in-out, width .3s ease-in-out, height .3s ease-in-out, transform .3s ease-in-out, background .3s ease-in-out;
        will-change: transform, background;
    }	
	#cursor.default:after {
		content: ''!important;
		width: 20px!important;
		height: 20px!important;
		left: 10px!important;
		top: 10px!important;
		background-color: #F03333!important;
	}	
	#cursor.form:after {
		background-color: #F03333!important;
	}	

	#cursor.back:not(.hover):not(.form):after {
		content: 'back';
		background: rgba(0,0,0,0.5);	
		color: #fff;
		width: 120px;
		height: 120px;
		left: -40px;
		top: -40px;
		font-size: 20px;
		line-height: 120px;
	}		

	#cursor.hover.back-link:after {
		content: 'back'!important;
		background: rgba(0,0,0,0.5)!important;	
		color: #fff;
		width: 120px;
		height: 120px;
		left: -40px;
		top: -40px;
		font-size: 20px;
		line-height: 120px;
	}		
	.subpage #cursor.back:not(.hover):after {
		background: rgba(0,0,0,0.5);
	}		
	
	#cursor.hover:after {
		content: 'view'!important;
		background: #F03333;	
		width: 120px;
		height: 120px;
		left: -40px;
		top: -40px;
		font-size: 20px;
		line-height: 120px;
	}		
	
	#cursor.submit:after {
		content: 'senden'!important;
		background: #F03333;	
		width: 120px;
		height: 120px;
		left: -40px;
		top: -40px;
		font-size: 20px;
		line-height: 120px;
	}

	#cursor.hover.home:after {
		content: 'home'!important;
		background: #F03333;
	}
	#cursor.hover.open:after {
		content: 'open'!important;
		background: #F03333;
	}
	#cursor.hover.close:after {
		content: 'close'!important;
		background: #F03333;
	}
	
	#cursor.hover.ic:after {
		content: 'HP IC'!important;
	}	
	#cursor.hover.pe:after {
		content: 'HP PE'!important;
	}	
	#cursor.hover.iv:after {
		content: 'HP IV'!important;
	}	
	#cursor.hover.team:after {
		content: 'TEAM'!important;
	}	
	#cursor.hover.projekte:after {
		content: 'PROJEKTE'!important;
	}	
	#cursor.hover.kontakt:after {
		content: 'KONTAKT'!important;
	}
	
	#cursor.hover.newsletter:after {
		content: 'abonnieren'!important;
	}	
	#cursor.hover.mail:after {
		content: 'E-Mail'!important;
	}	
	#cursor.send:after {
		content: 'senden'!important;
	}	
	#cursor.view:after {
		content: 'view'!important;
	}	
	#cursor.hover.back:after {
		content: 'back';
	}
	
	
	#cursor.initial {
		cursor: pointer;
	}	
	#cursor.initial:after {
		content: '';
		width: 0;
		height: 0;
		display: none;
	}
}


/* Allgemein */
.mobile {
		display: none!important;
	}
body {
	margin: 0;
	padding: 0;
    font-family: 'Helvetica Neue'; 
    font-weight: 100;
    font-size: 2.3vw;
    line-height: 1.35;
    text-align: center;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;
	letter-spacing: 0.02vw;
}
img {
	max-width: 100%;
	border: 0;
	height: auto;	
	
}
p, a {
    margin-bottom: 2vw;
    margin-top: 3vw;
}
h2 {
	font-family: 'IKEA Sans';
    font-size: 4vw;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: bold;
}
.content h3 {
    font-size: 2.3vw;
    margin-top: 6vw;
    font-weight: bold;
}
a {
    text-decoration: none;
    color: #000;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
a:hover {
    text-decoration: none;
}

a.underline, a .underline, a.hoverline, .hoverline a {
    position: relative;
}
a.hoverline:after, .hoverline a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0.1vw;
    left: 0px;
    display: inline-block;
    background-color: #000;
    transform: rotateY(90deg);
    transition: transform 0.8s ease-out;
    will-change: transform;
}

a.underline:after, a .underline:after, a.hoverline:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0.0vw;
    left: 0px;
    display: inline-block;
    background-color: #000;
    transition: transform 0.8s ease-out;
    will-change: transform;
}
a.underline:hover:after, a:hover .underline:after, a.hoverline:hover:after, .hoverline a:hover:after, #kontakt a:hover:after {
	transform: rotateY(180deg);
}

a.noline:hover {
    text-decoration: none;
}
a img {
    transition: transform .6s ease;
}
a:hover img {
    transform: scale(1.05);
}

strong, b {
    font-weight: 600;
    letter-spacing: -0.04vw;
}
.titel .space-k {
	letter-spacing: -0.7vw;
}
.sm-space {
	letter-spacing: -0.1vw;
}
.newstitle .sm-space {
	letter-spacing: -0.5vw;
}
.trenner {
    width: 1px;
    background: #000;
    height: 10vh;
    margin-left: 50%;
    display: block;
    clear: both;
	transform: scaleY(0);
	transform-origin: top;
    transition: transform 1s ease-out .5s;
	will-change: transform;
}
.trenner.animate {
	transform: scaleY(1);
}
.vh15 {
	height: 15vh;
}
.vh20 {
	height: 20vh;
}
.vh25 {
	height: 25vh;
}
.vh30 {
	height: 30vh;
}
.vh35 {
	height: 35vh;
}
.vh40 {
	height: 40vh;
}
.vh50 {
	height: 50vh;
}
.m4 {
    margin: 4vh auto;
}
.m6 {
    margin: 6vh auto;
}
.m8 {
    margin: 8vh auto;
}
.m10 {
    margin: 10vh auto;
}
.m12 {
    margin: 12vh auto;
}
.mt4 {
    margin-top: 4vh;
}
.mt6 {
    margin-top: 6vh;
}
.mt8 {
    margin-top: 8vh;
}
.mt1 {
    margin-top: 1vh;
}
.mt2 {
    margin-top: 2vh;
}
.mt3 {
    margin-top: 3vh;
}
.mt12 {
    margin-top: 12vh;
}
.mt14 {
    margin-top: 14vh;
}
.mb1 {
    margin-bottom: 1vh;
}
.mb2 {
    margin-bottom: 2vh;
}
.mb4 {
    margin-bottom: 4vh;
}
.mb6 {
    margin-bottom: 6vh;
}
.mb8 {
    margin-bottom: 8vh;
}
.mb10 {
    margin-bottom: 10vh;
}
.mb12 {
    margin-bottom: 12vh;
}
.mb16 {
    margin-bottom: 16vh;
}

.content {
    background-color: #fff;
    position: relative;
	overflow-X: hidden;
}
/*
@keyframes jump {
   0%   { transform:translateY(0);}
   50%   { transform:translateY(2vh);}
   100%   { transform:translateY(0);}
}	
.down-link {
    position: absolute;
    left: 48%;
    bottom: 4vh;
    width: 4%;
    height: 2vw;
    opacity: 1;
    z-index: 1;
    text-align: center;
    background: url(media/images/layout/pfeil-weiss.png) 50% 50% no-repeat;
    background-size: 50%;
    -moz-transition: all ease-out 0.3s;
    -webkit-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
    animation: jump 3s infinite ease;
}
*/

/* Textseiten Impressum etc. */
.pagecontent {
    width: 70%;
    margin: 8% auto 10%;
}
.textpage .titel {
    font-size: 7vw;
    line-height: 1.4;
    margin-bottom: 5vw;
    opacity: 1;
}
.pagecontent p, .pagecontent a {
    font-size: 1.5vw;
    margin: 1.5vw 0;
}
.pagecontent h2 {
    font-size: 2.5vw;
    margin: 5vw 0 2vw 0;
    font-family: 'Helvetica Neue';
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: -0.1vw;
}

section {
    width: 100%;
    clear: both;
    display: inline-block;
    display: table;
    clear: both;
}
.clear {
	clear: both;
}
.fade {
	display: block;
}
.fade , p.fade {
    /* display: inline-block; */
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
    opacity: 0;
    transform: translateY(5vh);
    will-change: transform;
}
.fade.animate {	
	opacity: 1;
    transform: translateY(0);	
}

.fade .delay {
	opacity: 0;
    transition: opacity 1.5s ease-in-out .5s;
}
.fade .delay.delay-2 {
    transition: opacity 1.5s ease-in-out 1s;
}
.fade .delay.delay-3 {
    transition: opacity 1.5s ease-in-out 1.5s;
}
.fade .delay.delay-4 {
    transition: opacity 1.5s ease-in-out 2s;
}
.fade.animate .delay {
	opacity: 1;
}

.col3 {
    width: 33.3333%;
    float: left;
}
/* ENDE Allgemein */

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 1111;
    left: 2vw;
    top: 1.4vw;
    border-radius: 50%;
    margin: 0;
    width: 3.8vw;
    height: 3.8vw;
    background: #fff;
    transition: transform 0.8s ease-in-out, background 0.8s ease-in-out, filter 0.8s ease-in-out;
    justify-content: center;
}
/*
.has-hero .site-logo {
	transform: scale(0);	 
}
.has-hero .site-logo.show {
	transform: scale(1);	
}
*/
.site-logo:hover {
	text-decoration: none;
	transform: scale(1.1);
}
.site-logo.transp {
    background: transparent;
	filter: invert(1);
}
.site-logo img {
    width: 55%;
    height: auto;
    margin-left: 5%;
}


/* Menu */
.hamburger {
    display: block;
    position: fixed;
    width: 2.8vw;
    height: 2.4vw;
    right: 2.2vw;
    top: 1.2vw;
    padding: 0;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 999999;
    /* border-radius: 50%; */
    opacity: 1;
    transition: transform .6s ease-out 6s, top 0.6s ease-out, background .6s;
    padding: 1.6vw 0.8vw 0 0.5vw;
    filter: grayscale(1);
    border-radius: 50%;
    background: transparent;
}
.hamburger.white {
    background: #fff;
}
.active .hamburger {
    background: transparent;
}
.hamb_line {
    height: 3px;
    width: 2.6vw;
    border-radius: 0px;
    background: #000;
    margin-bottom: 0.6vw;
    float: right;
    transition: transform .3s ease-out, width .3s, background .6s;
}
.hamburger.white .hamb_line {
    background: #000 !important;
}
.active .hamb_line, .hamburger.white.active .hamb_line {
    background: #fff !important;
}

#home .hamburger {
    background: transparent;
    transition: transform .3s ease-out;
}
#home .hamb_line {
    background: #fff;
}
#home .hamburger.white {
    background: #b8c3c2;
    background: transparent;
    transform: scale(1);
}

#home .hamburger.white .hamb_line {
    background: #000;
}

.hamb_line:last-child {
    width: 1.5vw;
}
.active .hamb_line:first-child {
    transform: translateY(0.7vw) rotate(225deg);
}
.active .hamb_line:last-child {
    transform: translateY(0vw) rotate(-225deg);
    width: 2.6vw;
}

@media (hover: hover) {	
	.hamburger:hover .hamb_line:last-child {
		width: 2.6vw;
	}
}

.hamburger:before {
    content: "";
    width: 100vw!important;
    height: 100vw!important;
    overflow: visible;
    display: block !important;
    position: absolute;
    background: rgba(255,255,255,1);
    right: -48vw;
    top: -48vw;
    border-radius: 50%;
    transform: scale(0);
    -moz-transition: transform .6s .2s;
    -webkit-transition: transform .6s .2s;
    transition: transform .6s .2s;
	will-change: transform;
}
.active .hamburger:before {
    transform: scale(2.5);
    -moz-transition: transform .6s;
    -webkit-transition: transform .6s;
    transition: transform .6s;
}

/* Navigation */
#navigation {
    width: 0;
    height: 0;
    overflow: hidden;
    display: block !important;
    position: fixed;
    background: #b8c3c2;
    z-index: -1;
    right: -80vw;
    top: -80.8vw;
    border-radius: 50%;
    transition: all 0.9s 0.3s;
}
#navigation.active {
    width: 200vw;
    height: 200vw;
    z-index: 999;
    transform: none;
    transition: all 0.9s ease-out;
}
#navigation .links {
    position: fixed;
    right: 11vw;
    transform: translateY(-50%);
    width: 0;
    overflow: visible;
    top: 47%;
    display: flex;
    flex-direction: row;
    gap: 5%;
    transition: all 0.9s ease-out;
}
#navigation.active .links {
    width: 78vw;
}
#navigation ul {
    list-style: none;
    padding: 0;
    width: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 5%;
}
#navigation ul.left.desktop {
    width: 40%;
    margin-right: 10%;
}
#navigation ul.right {
    width: 25%;
    margin-left: 25%;
}
#navigation li {
    height: 20vh;
    margin-top: 5vh;
}
#navigation .links A {
    color: #fff;
    display: block;
    line-height: 1;
    font-size: 1.6vw;
    transform: translateX(5vw);
    opacity: 0;
    transition: transform 0.3s 0.1s, opacity 0.3s, filter 0.6s;
    font-weight: normal;
    letter-spacing: 0.07vw;
    font-family: 'Helvetica Neue';
    margin: 0;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
#navigation .links .left A {
    justify-content: flex-start;
    background: url(media/images/layout/hp-icon-w.png);
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: left 85%;
    padding-left: 28%;
}
#navigation .links .right A {
    justify-content: flex-end;
}
#navigation .links a:hover {
    filter: invert(1);
}

#navigation.active li:first-child a {
    transition: color 0.4s, transform 0.6s 0.5s, opacity 0.6s 0.5s;
}
#navigation.active li:nth-child(2) a {
    transition: color 0.4s, transform 0.6s 0.6s, opacity 0.6s 0.6s;
}
#navigation.active li:nth-child(3) a {
    transition: color 0.4s, transform 0.6s 0.7s, opacity 0.6s 0.7s;
}
#navigation.active li:nth-child(4) a {
    transition: color 0.4s, transform 0.6s 0.8s, opacity 0.6s 0.8s;	
}
#navigation.active li:nth-child(5) a {
    transition: color 0.4s, transform 0.6s 0.8s, opacity 0.6s 0.9s;	
}
#navigation.active li:nth-child(6) a {
    transition: color 0.4s, transform 0.6s 0.8s, opacity 0.6s 1s;	
}
#navigation.active A {
    transform: translateX(0);
    opacity: 1;
}

#navigation.active .links:hover a {
    transition: opacity 0.6s ease-out 0s, filter 0.6s;
}

@media only screen and (min-width:768px) {
	#navigation .links div {
		color: #000;
		float: left;
		opacity: 0;
		transition: opacity 1.0s ease-in 0s;
		margin-top: 5.2vw;
		font-size: 3.4vh;
		font-weight: 300;
	}
	#navigation .links li:hover div {
		opacity: 1;
	}
}

/* ENDE Menu */



/* Home */
@keyframes turner{
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
}
@keyframes preloader{	
    0%  {transform:rotateY(0deg) scale(.6)}
    100%  {transform:rotateY(360deg) scale(1)}
}
#preloader {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    -moz-transition: opacity 0.8s, height 0.8s;
    -webkit-transition: opacity 0.8s, height 0.8s;
    transition: opacity 0.8s, height 0.8s;
    -moz-transition-delay: 0s, 2s;
    -webkit-transition-delay: 0s, 2s;
	transition-delay: 0s, 2s;
}
#preloader img.logo {
    width: 6%;
    display: block;
    position: absolute;
    left: 47%;
    top: 47%;
    z-index: 9;
    animation: turner 4s infinite linear;
}
#preloader.loaded {
    opacity: 0;
	height: 0;
}


/* Intro */
@keyframes fadeIn {
    0%  {opacity: 0;}
    100%  {opacity: 1;}
}
@keyframes fadeSlide {
    0%  {transform:scale(1)}
    50%  {transform:scale(1.1)}
    100%  {transform:scale(1)}
}
body {
    opacity: 0;
    animation: fadeIn ease-out;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-delay: .5s;
}

#intro {
    height: 100vh;
    width: 100%;
    background: transparent;
    margin: 0;
    position: relative;
    overflow: hidden;
    z-index: 99;
}
#intro .logo {
    width: 54vh;
    height: 54vh;
    margin: auto;
    margin-top: 23vh;
    position: relative;
    background: rgba(157, 180, 200, .8);
    border-radius: 50%;
	transform: rotateY(-90deg);
    transition: transform 3s ease-out .5s;
 /*   animation: preloader 6s linear;*/
}
.ic #intro .logo {
    background: rgba(223, 209, 218, .8);
}
.pe #intro .logo {
    background: rgba(223, 209, 218, .8);
}
.iv #intro .logo {
    background: rgba(196, 207, 206, .8);
}
.was #intro .logo {
    background: rgba(236, 230, 195, .8);
}
.show #intro .logo {
	transform: rotateY(0);
}
#intro .logo .logo-icon {
    position: absolute;
    left: 52%;
    top: 23%;
    width: 54%;
    transform: translate(-50%, 0);
}
#intro .logo .logo-text {
    position: absolute;
    left: 24.8%;
    top: 71%;
    width: 54%;
    font-weight: normal;
    font-size: 2.6vh;
    font-family: 'IKEA Sans';
    margin-top: 0;
    letter-spacing: 0;
    margin-bottom: 0;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    text-align: left;
}

@keyframes change {
   0%   { opacity:0;transform: translate(-50%, 5vh);}
   22%   { opacity:1;transform: translate(-50%, 0vh);}
   35%   { opacity:1;transform: translate(-50%, 0vh);}
   45%   { opacity:0;transform: translate(-50%, 5vh);}
   100%   { opacity:0;transform: translate(-50%, 5vh);}
}
#intro.animate #logo1 {
    animation: change 12s infinite ease-in-out;
	animation-delay: 0s;
}	
#intro.animate #logo2 {
    animation: change 12s infinite ease-in-out;
	animation-delay: 4s;
}	
#intro.animate #logo3 {
    animation: change 12s infinite ease-in-out;
	animation-delay: 8s;
}

@keyframes grow {
   0%   { transform: scaleY(0);transform-origin: bottom;}
   10%   { transform: scaleY(0);transform-origin: top;}
   50%   { transform: scaleY(1);transform-origin: top;}
   93%   { transform: scaleY(1);transform-origin: bottom;}
   100%   { transform: scaleY(0);transform-origin: bottom;}
}
#intro .line, #team-detail .line {
    width: 1px;
    background: #fff;
    position: absolute;
    bottom: 0;
    height: 20vh;
    left: 50%;
    margin-left: 0;
    transform: scaleY(0);
    transform-origin: top;
}
#intro.animate .line, #team-detail .line {
    animation: grow 4s infinite ease-in-out;
    animation-delay: 2.5s;
}
/* Intro ENDE */

.video-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    background: #fff;
    position: relative;
}
.video-wrapper.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
}
.video-wrapper video, .video-wrapper .banner {
    min-width: 100vw;
    min-height: 100vh;
    position: absolute;
    left: 50%;
    top: 50%;
    /* filter: brightness(0.7) saturate(1) contrast(1);*/
    left: 0%;
    top: 0%;
	/*
    animation: fadeSlide ease;
    animation-fill-mode: forwards;
    animation-duration: 20s;
    animation-delay: 3s;
    animation-iteration-count: infinite;
*/	
    width: 100%;
    object-fit: cover;
}

.full {
    max-width: 100vw!important;
    margin: 2vw auto;
    width: 100vw!important;
}

.titel {
    width: 100%;
    text-align: center;
    color: #000;
    line-height: 1.0;
    font-size: 10vw;
    z-index: 99;
    margin: 0;
    font-family: 'Helvetica Neue';
    font-weight: bold;
    letter-spacing: -0.4vw;
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
    opacity: 0;
    transform: translateY(5vh);
    will-change: transform;
    text-transform: lowercase;
}
.titel.left {
    text-align: left;
}
.titel sup {
    margin-left: 1.2vw;
    display: inline-block;
    font-size: 70%;
    transform: translateY(-1.65vw);
    font-weight: 900;
}
.pagecontent .titel, .titel.no-fade {	
	opacity: 1;
    transform: translateY(0);	
}
.titel.animate, .animate .titel {	
	opacity: 1;
    transform: translateY(0);	
}
.parallax-section, .content-section {
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
}
.parallax-section {
    height: 100vh;
}
.section-content {
    margin: 1vh auto;
    width: 76%;
    position: relative;
}
.section-content.wide {
    width: 84%;
}

/* Firmen */
.kreise {
    width: 66%;
    padding: 1% 17% 0 17%;
    float: left;
    position: relative;
    margin-top: 0;
}
.kreis-box {
    width: 33.3333%;
    height: 0;
    float: left;
    position: relative;
    perspective: 1000px;
    padding-bottom: 33.3333%;
    mix-blend-mode: multiply;
	opacity: 0;
	transition: transform 2.5s ease .4s, opacity 1.2s;
}
.kreis-box:first-child {
    transform: translateX(100%);
}
.kreis-box:nth-child(3) {
    transform: translateX(-100%);
}
.animate .kreis-box {
    opacity: 1;
}
.animate .kreis-box:first-child {
    transform: translateX(0);
}
.animate .kreis-box:nth-child(3) {
    transform: translateX(0);
}
.kreis {
    border-radius: 50%;
    width: 111%;
    height: 111%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    -webkit-transform: translate(-50%, -50%) rotateY(0deg);
    transform: translate(-50%, -50%) rotateY(0deg);
    text-align: center;
    background-repeat: no-repeat;
    background-position: center 55%;
    background-size: auto 40%;
    transition: transform .8s ease-out;
    will-change: transform;
}
.ic, .iv {
	z-index: 2;
}
.pe {
	z-index: 1;
}

.ic .kreis {
    background-color: rgb(223, 209, 218);
    background-image: url(media/images/layout/hp-icon-w.png);
}
.pe .kreis {
    background-color: rgb(182, 196, 201);
    background-image: url(media/images/layout/hp-icon-w.png);
}
.iv .kreis {
    background-color: rgb(196, 207, 206);
    background-image: url(media/images/layout/hp-icon-w.png);
}
a.kreis:hover {
    transform: translate(-50%, -50%) rotateY(0deg) scale(1.1);
}

.hide .kreis {
	transform: translate(-50%, -50%) rotateY(60deg);
    will-change: transform;
}
.kreise .col3 p {
    font-size: 1.4vw;
    margin-top: 3vw;
    text-transform: uppercase;
    font-weight: normal;
}
#Firmen {
    margin-top: 3vw;
    margin-bottom: 1vw;
}
#Projekte {
    margin-top: 4vw;
}


/* About */
#About .titel {
    margin-bottom: 4vw;
}
#kompetent-content {
    overflow: hidden;
    transition: height .8s ease-in-out;
}
div#kompetent-content p {
    display: block;
    margin: 0;
	padding: 2vw 0 0 0;
}
span#open-more {
    padding-top: 3vw;
    display: inline-block;
    font-style: italic;
    font-weight: 100;
    text-decoration-thickness: 1px;
    text-decoration-color: #000;
    text-decoration-style: solid;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4vw;
    font-size: 80%;
}

/* Team */
#Team {
    width: 100%;
    height: 100vh;
    /* background-image: url(media/images/inhalt/hp-team.webp); */
    margin-top: 4vw;
    background-size: cover;
    background-position: center top;
    position: relative;
    margin-bottom: 20vw;
}
.pe #Team {
    height: 16vw;
}
#Team .kreisbutton {
    border-radius: 50%;
    width: 34vw;
    height: 34vw;
    position: absolute;
    left: 33vw;
    bottom: -17vw;
    margin: 0;
    text-align: center;
    font-size: 1.8vw;
    transform: rotateX(90deg);
    transition: transform 1.5s ease-in-out .1s;
    will-change: transform;
    display: inline-block;
    letter-spacing: 0.1vw;
}
#Team .kreisbutton {
    background: rgba(206, 182, 197, .87);
}
.ic #Team .kreisbutton {
    background: rgba(182, 191, 206, .87);
}
.iv #Team .kreisbutton {
    background: rgba(206, 182, 206, .87);
}
.pe #Team .kreisbutton {
    background: rgba(206, 182, 197, .87);
}
.kreisbutton .titel {
    font-size: 10vw;
    margin-top: 8.4vw;
    margin-bottom: 1.5vw;
}
#Team .kreisbutton span {
    margin-left: 0.5vw;
}
#Team .kreisbutton.animate {
	transform: rotateX(0deg);	
}

#Team a.kreisbutton:hover {
 /*   transform: scale(1.1);*/
}


/* Was wir tun */
#Was .was-bg {
    width: 46vw;
    height: 34vw;
    background-image: url(media/images/inhalt/kompetenzen.webp);
    background-size: cover;
}
#Was .titel {
    position: absolute;
    left: 15%;
    top: 30%;
    text-align: left;
    font-size: 9.66vw;
}
#Was .titel .white {
    color: #fff;
}
#Was .more-link {
    position: absolute;
    top: 53%;
    left: 72%;
    font-size: 2.0vw;
    line-height: 1.1;
    letter-spacing: 0.1vw;
}

.parallax-section .section-content {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: 12%;
    margin: 0;
}
.parallax-section .titel, .parallax-section a {
    color: #fff;
}

/* Home - Projekte */
.projekte-overlay {
    width: 55vw;
    left: 50%;
    display: inline-block;
    top: 50%;
    position: absolute;
    background: rgba(236, 235, 192, .85);
    padding: 4vw 0;
    transform: translate(-50%, -50%) perspective(100vw) rotateX(-90deg);
    transition: transform 1.5s ease-in-out .1s;
}
#Projekte .titel {
    font-size: 9.5vw;
}
#Projekte .more-link {
    margin: 2vw auto 1vw;
    font-size: 1.8vw;
    display: inline-block;
    letter-spacing: 0.1vw;
}

.projekte-overlay.animate {
    transform: translate(-50%, -50%) perspective(100vw) rotateX(0deg);
}


/* Projektliste */
section#Projektliste {
    background: #fff;
    margin-top: 6vw;
}
#Projektliste h2.titel {
    margin-top: 0;
}
.newslist {
    margin: 0 0 15vh 0;
    position: relative;
}
span.number {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 7px;
    font-size: 1.2vw;
    font-weight: normal;
    font-family: 'Helvetica Neue';
}
#Projektliste .newstitle {
    border-bottom: 1px solid #000;
    position: relative;
    height: 162px;
    overflow: hidden;
}
#Projektliste .newstitle > a {
    font-size: 60px;
    font-size: 3.3vw;
    font-weight: bold;
    margin: 0;
    padding: 0 0 0 9%;
    display: block;
    position: relative;
    transition: opacity .5s ease-in-out;
    line-height: 1.3;
    font-family: 'Helvetica Neue';
    display: flex;
    height: 160px;
    text-transform: lowercase;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    letter-spacing: -0.1vw;
}
#Projektliste .newstitle a .ort {
    font-weight: 100;
}
span.hovertext {
    position: relative;
    z-index: 99;
    transform: translateY(-100%);
    display: block;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    background: rgba(255,255,255,0.5);
}
span.ort {
    letter-spacing: -0.03vw;
}
@media (hover: hover) {
	.newstitle:hover span.hovertext {
		opacity: .5;
	}
}

#mehr_laden {
    text-align: right;
    margin-top: 7%;
    font-size: 23px;
    font-weight: 300;
	display: inline-block;
	float: right;
}
#news_follower {
    position: absolute;
    top: 0;
    left: 0;
    width: 40vw;
    height: 27vw;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease-in-out;
    max-width: 600px;
    mix-blend-mode: difference;
    filter: invert(1);
}
@media (hover: hover) {
	.newslist:hover #news_follower {
		opacity: 1!important;
	}
}
#news_follower img {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
	transform: rotateY(-180deg);
    transition: opacity .5s ease-in-out, transform .3s ease-in-out;
    width: 100%;
    height: auto;
}
#news_follower img.active {
    opacity: 1;
	transform: rotateY(0);
}

/* Projekt Detail */
.projekt .section-content {
    margin: 1vh auto;
    width: 84%;
    position: relative;
}
.baudenkmal-eimsbuettel #About .section-content {
    width: 76%;
}
.projekt h1.titel {
    margin-bottom: 4vw;
    font-size: 8.5vw;
}

/* Slider */

@keyframes moveSlideshow {
		0% { 
			transform: translate(0, 0);
			visibility: visible;  
		}
		100% { 
			transform: translate(-50%, 0); 
			visibility: hidden;  
		}
}

.slideshow, .slideshow .slides, .slideshow a, .slides div, .slideshow img, .slideshow video {
    height: 21.897vw;
}
.slideshow {
    position: relative;
    transition: transform .3s ease-out;
}
@media (hover: hover) {
	.slideshow:hover {
		transform: translateX(-6%);
	}
}
.slideshow .slides {
    display: flex;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;	
	visibility: hidden;  
    width: 739vw; /* (33.6vw * Anzahl * 2) */
    width: 756.8vw; /* (33.6vw * Anzahl * 2) + 1x half 16.8 */
    transform: translate3d(0%, 0%, 0px);
    animation: moveSlideshow 16s linear infinite;
	will-change: transform;
}
.slideshow a {
    margin: 0;
    display: inline-block;
}
.slideshow video {
    width: 102%;
    margin-left: -1%;
    object-fit: cover;
}
.slideshow:hover .slides {
	animation-play-state: paused!important;
}
.slideshow span {
    display: block;
    text-align: center;
    font-size: 1.3vw;
    text-transform: lowercase;
    opacity: 0;
    transition: opacity .6s ease-in-out;
}
.slideshow a:hover span, .slideshow p:hover span {
	opacity: 1;
}

#Projekt .full.slider {
    margin: 4vw auto 6vw auto;
}
.slideshow .slides:hover {
	z-index: 9999;
}
.slides div {
    transition: transform .4s ease;
}
.slides div:hover {
    transform: scale(1.5);
	z-index: 9999;
}

.slideshow.pics3 .slides {
	width: 201vw; /* Anzahl Bilder x 67.2vw Breite */
	animation: moveSlideshow 4.5s linear infinite;  /* 1 bis 1.5s pro Bild */
}
.slideshow.pics4 .slides {
    width: 269vw;
	animation: moveSlideshow 6s linear infinite; 
}
.slideshow.pics5 .slides {
    width: 336vw;
	animation: moveSlideshow 7.5s linear infinite; 
}
.half .slideshow.pics5 .slides {
    width: 302.62vw;
	animation: moveSlideshow 9s linear infinite; 
}
.slideshow.pics6 .slides {
    width: 403vw;
	animation: moveSlideshow 9s linear infinite; 
}
.half .slideshow.pics6 .slides {
    width: 386.2vw;
	animation: moveSlideshow 9s linear infinite; 
}
.slideshow.pics7 .slides {
    width: 470vw;
	animation: moveSlideshow 10.5s linear infinite; 
}
.slideshow.pics8 .slides {
    width: 538vw;
	animation: moveSlideshow 12s linear infinite;
}
.slideshow.pics9 .slides {
    width: 605vw;
	animation: moveSlideshow 13.5s linear infinite; 
}
.slideshow.pics10 .slides {
    width: 672vw;
	animation: moveSlideshow 15s linear infinite; 
}
.slideshow.pics11 .slides {
    width: 739vw;
	animation: moveSlideshow 16s linear infinite; 
}
.slideshow.pics12 .slides {
    width: 806vw;
	animation: moveSlideshow 17s linear infinite; 
}
.slideshow.pics13 .slides {
    width: 874vw;
	animation: moveSlideshow 18s linear infinite; 
}
.slideshow.pics14 .slides {
    width: 941vw;
	animation: moveSlideshow 19s linear infinite; 
}
.slideshow.pics15 .slides {
    width: 1008vw;
	animation: moveSlideshow 20s linear infinite; 
}

.videobox {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transform: scale(0);
    transition: transform .4s ease-in-out;
    background: rgba(0,0,0,1);
    z-index: 9999;
}
.videobox.show {
	transform: scale(1);
}
.videobox video {
    object-fit: contain;
    width: 92%;
    max-width: 92%;
    max-height: 100vh;
    margin-left: 4%;
    height: auto;
    transform: translateY(-50%);
    position: relative;
    top: 50%;
    left: 0;
}
img.closevideo {
    position: absolute;
    right: 1.5vw;
    top: 1.5vw;
    width: 2vw;
    transition: transform .4s ease-in-out;
    max-width: 29px;
    z-index: 999999;
	cursor: pointer!important;
}
img.closevideo:hover {
    transform: rotate(180deg);
	cursor: pointer!important;
}


/* Kontakt */
#kontakt {
    text-align: center;
    background-image: url(media/images/inhalt/kontakt-ic-bg.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left bottom;
}
.home #kontakt, .team #kontakt {
    background-image: url(media/images/inhalt/kontakt-home-bg.webp);
    background-size: 82% auto;
    background-position: 0 120%;
}
#kontakt .kontakt-content {
    background-color: rgba(245, 222, 225, .87);
    width: 35vw;
    margin: auto;
    padding: 2.5vw 0;
    font-weight: normal;
    font-size: 1.5vw;
    letter-spacing: 0.04vw;
    /* transform: scale(.7); */
}
.ic #kontakt .kontakt-content {
    background-color: rgba(245, 232, 222, .87);
}
.pe #kontakt .kontakt-content {
    background-color: rgba(245, 232, 222, .87);
}
.iv #kontakt .kontakt-content {
    background-color: rgba(222, 231, 245, .87);
}
.was #kontakt .kontakt-content {
    background-color: rgba(245, 232, 222, .87);
}
#kontakt .kontakt-content p, #kontakt .kontakt-content a {
    margin-bottom: 1.4vw;
    margin-top: 1.4vw;
}
#kontakt .logo-icon {
    width: 8vw;
    margin-left: 2.5vw;
    margin-top: 1.5vw;
}
#kontakt .logo-text {
    font-weight: normal;
    font-size: 1.6vw;
    font-family: 'IKEA Sans';
    margin-top: 0.5vw;
    letter-spacing: 0;
    margin-bottom: 2.7vw;
}

a#social {
    display: inline-flex;
    margin: 1.5vw 0 1vw 0;
}
.sm-icon {
    width: 4vw;
    margin: 0;
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform .6s ease;
    border-radius: 50%;
}
.sm-icon:hover {
	transform:scale(1.2);
}
.legal-links, .legal-links a {
    font-size: 1.4vw;
    font-weight: normal;
    letter-spacing: 0.05vw;
	
    text-align: center;
    color: #fff;
    margin: 3vw 0 5vw 0;
}
.home .legal-links, .teampage .legal-links {
    text-align: right;
    color: #000;
    margin: 5vw 3vw 3vw 0;
}
.home .legal-links a, .teampage .legal-links a {
    color: #000;
}

/* Unterseiten */

/* Kompetenzen */
#Kompetenzen {
    text-align: center;
}
#Kompetenzen .section-content.wide {
    width: 90%;
}
#Kompetenzen .headline_light {
    font-style: italic;
    font-weight: 100;
    font-family: 'Helvetica Neue';
    text-decoration: underline;
    text-decoration-thickness: 0.05vw;
    text-underline-offset: 25%;
    font-size: 4.2vw;
    letter-spacing: 0.05vw;
}
.space-lr {
    /* letter-spacing: 0.7vw; */
    padding: 0 0.7vw 0 1vw;
}

#Kompetenzen .accordion {
    height: 7vw;
    overflow: hidden;
    position: relative;
    transition: height .6s ease-in-out, transform .6s ease-in-out;
}
#Kompetenzen .accordion.open {
    height: auto;
}
#Kompetenzen .accordion .bezeichnung {
    transition: transform .6s ease-in-out;
}

@media (hover: hover) {
#Kompetenzen .accordion:not(.open) .bezeichnung:hover {
    transform: translateX(2vw);
}
}

#Kompetenzen .accordion .bezeichnung > span {
    position: relative;
    display: inline-block;
}
#Kompetenzen .bold {
    font-style: italic;
    font-weight: bold;
    font-size: 5.7vw;
    letter-spacing: -0.2vw;
    line-height: 1.3;
    text-transform: lowercase;
}

/* 2-zeilig */
.ic #Kompetenzen .accordion {
    height: 10.5vw;
    margin-bottom: 2vw;
}
.ic #Kompetenzen .bold {
    font-size: 5vw;
    letter-spacing: -0.2vw;
    height: 12vw;
    line-height: 1;
}
/* ENDE 2-zeilig */

#Kompetenzen .description {
    width: 90%;
    margin: auto;
}
#Kompetenzen .description ul {
    margin: 0;
    padding: 1vw 0 4vw;
    list-style-type: none;
}
#Kompetenzen .description ul li {
    line-height: 1.2;
    padding: 0.5vw 0;
    font-size: 90%;
}



#Team img {
    border-radius: 50%;
}

.iv #Team {
    background-image: url(media/images/inhalt/iv-team.webp);
}
/* Was wir tun */
.was .banner{
    background-image: url(media/images/inhalt/was-hero.webp);
}

/*fancybox */
#fancybox-overlay {
    background-color: #fff !important;
}
#fancybox-overlay.active {	
	-webkit-animation:fadeIn ease-out;
    -moz-animation:fadeIn ease-out;
    animation:fadeIn ease-out;
	
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
	
    -webkit-animation-duration:500ms;
    -moz-animation-duration:500ms;
    animation-duration:500ms;
}
.fancybox-bg {
    background-image: none !important;
}
#fancybox-outer {
    background: transparent !important;
}
#fancybox-content {
    border: 0 !important;
    padding: 10px !important;
}
#fancybox-title {
    font-size: 2.5vw !important;
    margin-left: 0px !important;
    text-align: center !important;
    transform: translateY(6vw) !important;
    color: #000 !important;
    width: 100%!important;
    bottom: 1vw !important;
}
#fancybox-title-over {
    padding: 3px 5px 3px 5px !important;
    margin-right: 0px !important;
    background-image: none!important;
}
#fancybox-close {
    position: fixed !important;
    top: 3.5vw !important;
    right: 4vw !important;
    width: 29px !important;
    height: 29px !important;
    background: transparent url(media/images/layout/close.png) 0 0 !important;
    margin-top: 0;
    filter: invert(1);
}
#fancybox-right-ico {
    background-image: url(media/images/layout/right.png) !important;
    background-position: 0px 0px !important;
    background-size: 100%;
    display: block !important;
    right: 0 !important;
    left: auto !important;
    filter: invert(1);
    background-repeat: no-repeat;
}
#fancybox-right {
    right: 3vw !important;
    visibility: visible !important;
    display: block !important;
    position: fixed !important;
}
#fancybox-left-ico {
    background-image: url(media/images/layout/left.png) !important;
    background-position: 0px 0px !important;
    background-size: 100%;
	display: block !important;
	left: 0 !important;
    filter: invert(1);
}
#fancybox-left {
    left: 3vw !important;
    visibility: visible !important;
    display: block !important;
    position: fixed !important;
}
#fancybox-left-ico, #fancybox-right-ico {
    width: 4vw !important;
    height: 10vw !important;
    margin-top: 1.5vw !important;
    background-repeat: no-repeat;
}


/* Page Team */
@keyframes move-in-right {
/*   0%   { transform: translateX(10vw); opacity: 0}
   100% { transform: translateX(0); opacity: 1}*/
   0%   { opacity: 0}
   100% { opacity: 1}
}
.teampage .section-content {
    margin-top: 4vh;
}
#team {
    margin-top: 6vw;
}
#team .titel {
    text-align: left;
}
.team-nav {
    position: absolute;
    top: 8.5vw;
    right: 25%;
    display: inline-block;
    background: rgba(255, 255, 255, 0.0);
    padding: 0 3% 1.5% 2%;
    z-index: 999;
    transform: translateX(50%);
    font-size: 1.8vw;
    line-height: 1.4;
    text-align: left;
}
.team-nav a {
    display: table;
    opacity: 0;
    /* transform: translateX(10vw); */
    animation: move-in-right 1.2s forwards 0.4s;
    animation-timing-function: cubic-bezier(0.1,0,0.1,1);
    margin-bottom: 0.5%;
    margin-top: .5vh;
}
.team-nav a:nth-child(1) {
    animation-delay: 0.05s;
}
.team-nav a:nth-child(2) {
    animation-delay: 0.1s;
}
.team-nav a:nth-child(3) {
    animation-delay: 0.15s;
}
.team-nav a:nth-child(4) {
    animation-delay: 0.2s;
}
.team-nav a:nth-child(5) {
    animation-delay: 0.25s;
}
.team-nav a:nth-child(6) {
    animation-delay: 0.3s;
}
.team-nav a:nth-child(7) {
    animation-delay: 0.35s;
}
.team-nav a:nth-child(8) {
    animation-delay: 0.4s;
}
.team-nav a:nth-child(9) {
    animation-delay: 0.45s;
}
.team-nav a:nth-child(10) {
    animation-delay: 0.5s;
}
.team-nav a:nth-child(11) {
    animation-delay: 0.55s;
}
.team-nav a:nth-child(12) {
    animation-delay: 0.6s;
}
.team-nav a:nth-child(12) {
    animation-delay: 0.65s;
}
.team-nav a:nth-child(13) {
    animation-delay: 0.7s;
}
.team-nav a:nth-child(14) {
    animation-delay: 0.75s;
}
.team-nav a:nth-child(15) {
    animation-delay: 0.8s;
}
.team-nav a:nth-child(16) {
    animation-delay: 0.85s;
}
.team-nav a:nth-child(17) {
    animation-delay: 0.9s;
}
.team-nav a:nth-child(18) {
    animation-delay: 0.95s;
}
.team-nav a:nth-child(19) {
    animation-delay: 1.0s;
}
.team-nav a:nth-child(20) {
    animation-delay: 1.05s;
}
.team-nav a:nth-child(21) {
    animation-delay: 1.1s;
}
.team-nav a:nth-child(22) {
    animation-delay: 1.15s;
}
.team-nav a:nth-child(23) {
    animation-delay: 1.2s;
}
.team-nav a:nth-child(24) {
    animation-delay: 1.25s;
}
.team-nav a:nth-child(25) {
    animation-delay: 1.3s;
}
.team-nav a:nth-child(26) {
    animation-delay: 1.35s;
}
.team-nav a:nth-child(27) {
    animation-delay: 1.4s;
}
.team-nav a:nth-child(28) {
    animation-delay: 1.45s;
}
.team-nav a:nth-child(29) {
    animation-delay: 1.5s;
}
.team-nav a:nth-child(30) {
    animation-delay: 1.55s;
}
.float-right-subtitle {
    float: right;
    margin-top: -5.3vw;
    text-transform: uppercase;
}
.team-boxes {
    margin-top: 8vw;
}
.team-boxes > div:nth-child(2n-1) {
    width: 47%;
    height: 0;
    padding-bottom: 47%;
    position: relative;
    top: 0;
    margin-top: -6vw;
    overflow: hidden;
	-webkit-transition: transform 1.5s ease-in-out;
	-moz-transition: transform 1.5 ease-in-out;
	transition: transform 1.5 ease-in-out;
}
.team-boxes .first {
    margin-top: 0!important;
}
.team-boxes > div:nth-child(2n) {
    width: 71%;
    height: 0;
    padding-bottom: 47%;
    position: relative;	
    top: 0;
    margin-top: -6vw;
	left: 29%;
    overflow: hidden;
	-webkit-transition: transform 1.5s ease-in-out;
	-moz-transition: transform 1.5 ease-in-out;
	transition: transform 1.5 ease-in-out;
}

.team-boxes > div.show, .team-boxes > div.show {
   transform:translate(20px, 20px);
}
.team-boxes > div.hide, .team-boxes > div.hide {
   transform:translate(-20px, -20px);
}

.team-boxes > div:nth-child(5n-4) .text-bg {
	background: rgb(157, 180, 200);	
}
.team-boxes > div:nth-child(5n-3) .text-bg {
	background: rgb(223, 209, 218);
}
.team-boxes > div:nth-child(5n-2) .text-bg {
	background: rgb(196, 207, 206);
}
.team-boxes > div:nth-child(5n-1) .text-bg {
	background: rgb(236, 230, 195);		
    background: rgb(182, 191, 206);	
}
.team-boxes > div:nth-child(5n) .text-bg {
	background: rgb(206, 182, 197);	
    background: rgb(206, 182, 206);
}

/* Colors
    background: rgb(157, 180, 200);	
    background: rgb(223, 209, 218);
    background: rgb(196, 207, 206);
    background: rgb(236, 230, 195);		
    background: rgb(206, 182, 197);	
    background: rgb(182, 191, 206);	
    background: rgb(206, 182, 206);
*/

.text-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    margin: 0;
}
.text-team {
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.text-team h2.name {
    font-size: 3vw;
    height: initial;
    margin: 0;
    line-height: 1.1;
    font-weight: bold;
    font-family: 'Helvetica Neue';
    text-transform: lowercase;
    letter-spacing: -0.09vw;
}
.text-team p {
    line-height: 1.3;
    color: #000;
    text-transform: none;
    font-size: 90%;
    margin: 1vw 0 0 0;
}
.team-boxes > div {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    background-color: rgba(182, 191, 206, .3);
}
/* hover */
/*@media (hover: hover) {*/
@media only screen and (min-width:769px) {		
	.team-boxes > div:hover {
		background-size: 150%;
		-webkit-transition: all 0.35s ease-in-out;
		-moz-transition: all 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
	}
	.team-boxes > div:hover .text-bg {
		opacity: 1;	
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
	}
}


/* team Detail */
#person {
	cursor: none;
}
@media (hover: hover) {
	/*
	#person #cursor {
		display: initial;
		position: fixed;
		top: -100px;
		left: -100px;
		z-index: 9999999;
		width: 26px;
		height: 26px;
		background-color: transparent;
		border-radius: 50%;
		mix-blend-mode: difference;
		pointer-events: none;
	}
	#person #cursor:after {
		content: '';
		position: absolute;
		left: 100%;
		top: 100%;
		transform: translate(-50%, -50%);
		width: 26px;
		height: 26px;
		border: 1px solid #ccc;
		border-radius: 50%;
		transition: width 0.3s ease, height 0.3s ease;
		font-weight: lighter;
		color: #fff;
		will-change: width, height;
	}
	#cursor.link:after, #cursor.back.link:after, #cursor.back.link:after {
		content: '';
		width: 84px;
		height: 84px;
	}
	#person #cursor.back {
		mix-blend-mode: unset;
	}
	#person #cursor.back:after {
		content: '';
		width: 100px;
		height: 100px;
		border-color: #000;
	}		
	
	#person #cursor #back {
		overflow: hidden;
		width: 0px;
		height: 0px;
		font-size: 0px;
		text-align: center;
		transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease, line-height 0.3s ease;
	}
	#person #cursor #back span {
		transform: translateY(1px);
		margin-right: 3px;
		font-size: 90%;
		display: inline-block;
	}
	#person #cursor.link #back, #person #cursor.back.link #back, #person #cursor.back.link #back {
		font-size: 0px;
	}
	#person #cursor.back #back {
		width: 100px;
		height: 100px;
		font-size: 21px;
		line-height: 98px;
		position: absolute;
		left: -24px;
		top: -24px;
	}
	*/
}
.banner {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: fixed;
}
#team-detail {
    font-size: 2.8vw;
}
p.titel.name {
    font-size: 8.5vw;
    letter-spacing: -0.3vw;
    margin: 12vh auto 0;
    font-family: 'IKEA Sans';
    font-family: 'Helvetica Neue';
}
h1.beruf {
    margin: 4vh auto 6vh;
    font-weight: 300;
    font-size: 2.8vw;
}
.portrait .text {
    line-height: 1.6;
}
/* ENDE Team */

/* Bildergalerien vorher - nachher */
#Referenz .section-content {
    width: 76%;
}
.galerie-buttons {
    margin: 3vw auto 6vw;
    padding-left: 3.9vw;
}
.projekt .galerie-buttons {
    margin: 2vw auto 10vw;
}
.galerie-button {
    font-family: 'Helvetica Neue';
    font-weight: bold;
    font-size: 6vw;
    letter-spacing: -0.2vw;	
	color: #bfc7d4;
	color: #000;
	transition: color .3s ;
}
span.button-trenner {
    width: .15vw;
    display: inline-block;
    background: #000;
    height: 5vw;
    margin: 0 2vw -.5vw 3vw;
}
.galerie-wrapper {
    position: relative;
    width: 100%;
    min-height: 35vw;
    margin: 5vw auto 4vw;
    overflow: hidden;
}
.vn-galerie {
    transition: opacity .6s ease-in-out;
    width: 80vw;
    margin-left: -2vw;
	z-index: 10;
}
.vn-galerie.hidden {
	opacity: 0;
	z-index: -1;
}
.vn-galerie.hidden img, .vn-galerie.hidden img:nth-child(1) {
	transform: rotate3d(0, 1, 0, 90deg) scale(.8) !important;
	transform: rotate(0deg) scale(1.3) !important;
}

.vn-galerie img {
    position: absolute;
    height: 30vw;
    width: auto;
    transition: opacity .8s ease, transform .8s ease;
    opacity: 1;
}

.vn-galerie img:nth-child(1) {
    left: 24%;
    top: 1vw;
    transform: rotate(6deg);
}
.vn-galerie img:nth-child(2) {
    left: 23%;
    top: 2vw;
    transform: rotate(-7deg) scale(.95);
}
.vn-galerie img:nth-child(3) {
    left: 43%;
    top: -1vw;
    transform: rotate(6deg);
}
.vn-galerie img:nth-child(4) {
    left: 29%;
    top: 1vw;
    transform: rotate(-5deg);
}
.vn-galerie img:nth-child(5) {
    left: 39%;
    top: 4vw;
    transform: rotate(0deg);
}

.galerie {
    position: absolute;
    opacity: 1;
    width: 80vw;
    overflow: hidden;
    margin-left: -2vw;
    z-index: 10;
/*	
	column-count: 2;
    column-gap: 0;
	*/
	display: flex;
    transition: all .8s ease;
}
.galerie.hidden {
    position: absolute;
	opacity: 0;
	z-index: -1;
}

.galerie img {
    position: relative;
    left: 0 !important;
    top: 0 !important;
    width: 39vw;
    height: auto;
    transform: none;
    margin-bottom: 1vw;
    margin-right: 1vw;
    display: flex!important;
    transition: all 1.2s ease;
}

.galerie.hidden img:nth-child(1) {
    transform: translateX(50%) scale(.7) rotateY(180deg);
}
.galerie.hidden img:nth-child(2) {
    transform: translateX(50%) scale(.7) rotateX(180deg);
}
.galerie.hidden img:nth-child(3) {
    transform: translateX(-50%) scale(.7) rotateY(180deg);
}
.galerie.hidden img:nth-child(4) {
    transform: translateX(-50%) scale(.7) rotateX(180deg);
}
.galerie.hidden img:nth-child(5) {
    transform: translateX(-50%) scale(.7) rotateY(180deg);
}
.galerie.hidden img:nth-child(6) {
    transform: translateX(-50%) scale(.7) rotateY(180deg);
}

.iv .galerie-wrapper {
    margin-top: 8vw;
}
.iv .vn-galerie.stapel {
    transform: translateX(-4%);
}

span.ref_headline {
    margin-bottom: 1.5vw;
    display: inline-block;
}


/* Responsive */

@media only screen and (max-width:1920px) {	
	#Was .was-bg {
		background-image: url(media/images/inhalt/kompetenzen-1920.webp);
	}
	.was .banner{
		background-image: url(media/images/inhalt/was-hero-1920.webp);
	}
	.iv #Team {
		background-image: url(media/images/inhalt/iv-team-1920.webp);
	}
	#kontakt {
		background-image: url(media/images/inhalt/kontakt-ic-bg-1920.webp);
	}
	.home #kontakt, .team #kontakt {
		background-image: url(media/images/inhalt/kontakt-home-bg-1920.webp);
	}
}	

@media only screen and (max-width:1440px) {	
	#Was .was-bg {
		background-image: url(media/images/inhalt/kompetenzen-1440.webp);
	}
	.was .banner{
		background-image: url(media/images/inhalt/was-hero-1440.webp);
	}
	.iv #Team {
		background-image: url(media/images/inhalt/iv-team-1440.webp);
	}
	#kontakt {
		background-image: url(media/images/inhalt/kontakt-ic-bg-1440.webp);
	}
	.home #kontakt, .team #kontakt {
		background-image: url(media/images/inhalt/kontakt-home-bg-1440.webp);
	}
}	

@media only screen and (max-width:1024px) {
	.site-logo.ico {
		width: 6vw;
		height: 6vw;
	}
	.hamburger {
		height: 3.8vw;
		padding: 2.2vw 0.8vw 0 0.5vw;
		width: 4.7vw;
	}
	.hamb_line {
		height: 3px;
		width: 4.2vw;
		margin-bottom: 1vw;
	}
	.hamb_line:last-child {
		width: 2.7vw;
	}
}
/* Mobile */

@media only screen and (max-width:768px) {
	#Was .was-bg {
		background-image: url(media/images/inhalt/kompetenzen-768.webp);
	}
	.was .banner{
		background-image: url(media/images/inhalt/was-hero-768.webp);
	}
	.iv #Team {
		background-image: url(media/images/inhalt/iv-team-768.webp);
	}
	#kontakt {
		background-image: url(media/images/inhalt/kontakt-ic-bg-768.webp);
	}
	.home #kontakt, .team #kontakt {
		background-image: url(media/images/inhalt/kontakt-home-bg-768.webp);
	}
	
	.mobile {
		display: initial!important;
	}
	.desktop {
		display: none!important;
	}
    #intro .logo {
        width: 78vw;
        height: 78vw;
        position: absolute;
        left: 11vw;
        bottom: 35vh;
    }
	#intro .line {
		height: 30vh;
	}
	#intro .logo .logo-text {
		font-size: 4vw;
	}	
	#About .titel {
		margin-bottom: 4vh;
	}
    span#open-more {
        padding-top: 4vh;
        font-size: 100%;
        letter-spacing: 0.1vw;
    }
	div#kompetent-content p {
		padding: 4vw 0 0 0;
	}
	span.ref_headline {
		margin-bottom: 3vw;
		line-height: 1.2;
	}
	

/* Page Team */
	#team .section-content.slim {
		overflow: hidden;
		width: 100vw!important;
		margin: 6vh 0 2vh 0!important;
	}
	#team .team-nav {
		right: -100%;
		position: absolute;
	}
	
	#team .titel {
		text-align: center;
		margin-bottom: 6vh;
	}
	.teampage .titel {
		text-align: center;
	}
	.page-default #team h1.headline-1 {
		margin-left: 5%;
	}		
	
	@keyframes zoom-bg-out {
	   0%   { background-size: auto 150%;}
	   100% { background-size: auto 100%;}
	}			
	@keyframes slide-to-left {
	   0%   { left: 100%;}
	   100% { left: 80%;}
	}			
	@keyframes slide-to-right {
	   0%   { left: -120%;}
	   100% { left: -100%;}
	}	
	.team-boxes {
		margin-top: 0;
	}
	.team-boxes > div:nth-child(2n-1), .team-boxes > div:nth-child(2n) {
		transform: none;
		width: 50%;
		padding-bottom: 50%;
		margin-top: 0;
		overflow: visible;
		background-size: contain;
		background-position: 0%;
		background-size: auto 150%;
		animation: zoom-bg-out 1.5s forwards ease-out;
	}
	.team-boxes > div:nth-child(2n) {
		left: 50%;
		background-position: 100%;
	}
	p .slim {
		letter-spacing: -1px;
	}
	.team-boxes .text-bg {
		width: 120%;
		transform: none;
		opacity: 1;
		left: 100%;
	}
	.team-boxes > div:nth-child(2n-1) .text-bg {
		left: 80%;		
		animation: slide-to-left 1.5s forwards ease-out;
	}	
	.team-boxes > div:nth-child(2n) .text-bg {
		left: -125%;
		animation: slide-to-right 1.5s forwards ease-out;
	}
    .text-team h2.name {
        font-size: 6vw;
        margin-top: 12px;
    }
	.text-team {
		font-size: 4vw;
		padding: 2%;
		width: 96%;
	}
	.text-team p {
		font-size: 4vw;
	}	
/* ENDE Teampage */	

	.page-default .headline-3 {
		font-size: 20px;
		letter-spacing: 0;
		white-space: normal;
	}
	
/* Team detail */
	#intro .line, #team-detail .line {
		display: none;
	}
	.banner {
		height: 100vw;
		background-size: 100%;
	}
	p.titel.name {
		font-size: 13vw;
		letter-spacing: -0.4vw;
		margin: 0;
	}
    h1.beruf {
        margin: 2vh auto 4vh;
        font-size: 5vw;
    }
	#team-detail {
		font-size: 5vw;
	}	
	.kontaktdaten p {
		margin-top: 4vw;
		margin-bottom: 4vw;
	}
/* ENDE Team detail */	

	
	
	.vh15 {
		height: 7vh;
	}
	.vh20 {
		height: 10vh;
	}
	.vh25 {
		height: 13vh;
	}
	.vh30 {
		height: 15vh;
	}
	.vh35 {
		height: 18vh;
	}
	.vh40 {
		height: 22vh;
	}
	.vh50 {
		height: 25vh;
	}
	.m4 {
		margin: 2vh auto;
	}
	.m6 {
		margin: 3vh auto;
	}
	.m8 {
		margin: 4vh auto;
	}
	.m10 {
		margin: 5vh auto;
	}
	.m12 {
		margin: 6vh auto;
	}
	.mt4 {
		margin-top: 2vh;
	}
	.mt6 {
		margin-top: 3vh;
	}
	.mt8 {
		margin-top: 4vh;
	}
	.mt12 {
		margin-top: 6vh;
	}
	.mt14 {
		margin-top: 7vh;
	}
	.mb4 {
		margin-bottom: 2vh;
	}
	.mb6 {
		margin-bottom: 3vh;
	}
	.mb8 {
		margin-bottom: 4vh;
	}
	.mb12 {
		margin-bottom: 6vh;
	}
	.mb16 {
		margin-bottom: 8vh;
	}
	
	body {
		font-size: 5vw;
	}	
	p, a {
		margin-bottom: 6vw;
		margin-top: 6vw;
	}	
	header.mobile {
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 6vh;
		z-index: 9;
		transition: height .3s;
	}
	#home header.mobile {
		height: 0vh;
	}
	header.mobile.show, #home header.mobile.show {
		height: 6vh;
	}
	.site-logo {
		left: 3vw;
		top: 3vw;
		width: 12.49vw;
		height: 12.49vw;
		font-size: 9vw;
		line-height: 1.4;
	}
    .site-logo.ico {
        width: 10vw;
        height: 10vw;
        top: 3vw;
        left: 3vw;
    }	
	.site-logo img {
		margin-left: 7%;
	}
	a.site-logo.txt {
		font-size: 4vw;
	}
	.hamburger, .hamburger.white {
		width: 11.2vw;
		height: 10.6vw;
		padding: 1.9vw 0.8vw 0 0.5vw;
		top: 3vw;
		right: 3vw;
	}
	.hamb_line {
		width: 9vw;
		height: 2px;
		margin-bottom: 0;
		background: #000;
		margin-top: 2.5vw;
		margin-right: 1vw;
	}
	.hamb_line:last-child {
		width: 6vw;
	}
	.active .hamb_line:last-child {
		width: 8vw;
	}	
	.active .hamb_line:first-child {
		transform: translateY(2.7vw) rotate(225deg);
	}
	#navigation.active {
		width: 220vw;
		height: 400vw;
	}
	#navigation .links {
		right: 9vw;
		flex-direction: column;
		gap: 0;
		top: 50%;
	}
    #navigation ul {
        width: 100% !important;
        margin: 0 !important;
        text-align: center;
    }
    #navigation.active .links {
        width: 90vw;
        left: 5vw;
    }
    #navigation li, #navigation .right li {
        height: auto;
    margin-top: 2vh;
    }
	#navigation .links .right A {
		justify-content: center;
	}
    #navigation .links A {
        font-size: 6vw;
        letter-spacing: 0.2vw;
        padding-bottom: 6vh;
    }
    #navigation .links .left A {
        justify-content: center;
        background: none;
        padding-left: 0;
        padding-top: 0;
    }
	
	.video-wrapper video#startvideo {
		height: 100vh;
		width: auto;
		left: -140%;
	}
	.down-link {
		width: 14%;
		left: 43%;
	}
	div#fixednavi {
		bottom: 10vh;
		width: 19vw;
	}
	div#fixednavi a {
    transform: translateX(19vw);
		font-size: 6vw;
		letter-spacing: -0.6vw;
		width: 12vw;
	}
	div#fixednavi a:after {
		left: 13vw;
	}
	
	.titel {
		font-size: 13vw;
	}
	.parallax-section h2.titel {
		margin-top: 0;
	}		
	.section-content {
		margin: 4vh auto;
		width: 90%;
	}
	#About .section-content {
        width: 82%;
    }
	.section-content.full {
		width: 100%;
	}
	.parallax-section .section-content {
		left: 5%;
	}
    .kreise {
        width: 100%;
        padding: 4% 0% 6% 0%;
    }
	.kreis-box {
		float: none;
		width: 74%;
		padding-bottom: 74%;
		margin-left: 13%;
		transform: scale(0)!important;
		transition: transform 1.5s ease 0s, opacity 1s;
	}	
	.kreis-box.animate {
		transform: scale(1)!important;
		opacity: 1;
	}
	.kreis-box span.mobile {
		position: absolute;
        margin-top: 70%;
		left: 50%;
		transform: translateX(-50%);
		font-weight: normal;
		width: 100%;
        color: #fff;
	}	
	.kreise .col3 p {
		font-size: 3.7vw;
		margin-top: 6vw;
	}
	.kreise .col3 .mobile {
		display: inline-block;
	}
	.kreis {
		background-position: center 45%;
		background-size: auto 28vw;
	}
	
    #Team {
        height: 40vh;
        margin-bottom: 42vw;
        margin-top: 10vw;
    }	
	#Team .video-wrapper {
		height: 40vh;
	}	
	#Team .video-wrapper video {
		min-height: 40vh;
		height: 40vh;
		left: -15vw;
		width: 120vw;
	}
	.pe #Team {
		height: 32vw;
	}
	#Team .kreisbutton {
		width: 70vw;
		height: 70vw;
		left: 15vw;
		bottom: -35vw;
		font-size: 5vw;
	}
    #Team .kreisbutton .titel {
        font-size: 14vw;
        margin-top: 22.6vw;
        margin-bottom: 2.5vw;
    }
	.pe #Team .kreisbutton .titel {
		margin-bottom: 1vw;
	}
	
	#Projekte {
		margin-top: 4vh;
	}	
	#Projekte .projekte-overlay {
		width: 80vw;
		padding: 6vw 0;
	}
    #Projekte .titel {
        font-size: 14vw;
        margin: 0 0 1vw;
    }
	#Projekte .more-link {
		margin: 2vw auto 2vw;
		font-size: 5vw;
	}
	
	#Was {
        height: 84vw;
        margin: 0 auto 3vw auto;
    }
	#Was .delay-2 {
		margin-left: -1vw;
	}
	#Was .was-bg {
		width: 63vw;
		height: 60vw;
		background-image: url(media/images/inhalt/kompetenzen.webp);
		background-size: cover;
	}
    #Was .titel {
        font-size: 15vw;
        left: 8vw;
        top: initial;
        bottom: 4%;
    }
    #Was .more-link {
        font-size: 6vw;
        top: initial;
        left: initial;
        right: 27vw;
        bottom: -13vw;
        margin: 0;
    }
	
	a.open {
		font-size: 7vw;
	}
	h2.titel {
		margin: 4vh 0 3vh 0;
	}
	
	.home #kontakt, .team #kontakt {
		background-size: 130% auto;
	}	
    #kontakt h2.titel {
        margin: 0 0 0 0;
        font-size: 14vw;
        width: 100%;
    }
	#kontakt .kontakt-content {
        width: 80vw;
        padding: 8vw 0;
        font-size: 4.5vw;
        letter-spacing: 0.1vw;
    }	
	#kontakt .logo-icon {
		width: 24vw;
	}
	#kontakt .logo-text {
		font-size: 5vw;
		margin-bottom: 5vw;
	}
	#kontakt .kontakt-content p, #kontakt .kontakt-content a {
		margin-bottom: 3vw;
		margin-top: 3vw;
	}
    .sm-icon {
        width: 14vw;
    }
	
	.legal-links, .legal-links a {
		font-size: 4vw;
		letter-spacing: 0.1vw;
		text-align: center!important;
		color: #fff!important;
		margin: 4vw 0 8vw 0!important;
	}
	
/* Unterseiten */	
    #Kompetenzen .headline_light {
        font-size: 8vw;
        letter-spacing: 0.1vw;
    }
	
	#Kompetenzen .accordion {
		height: 20vw;
	}
    #Kompetenzen .bold {
        font-size: 8vw;
        letter-spacing: -0.3vw;
        height: 18vw;
        line-height: 1;
    }	
	#Kompetenzen .description ul li {
		padding: 2vw 0;
		font-size: 100%;
	}
    #Kompetenzen .accordion .description {
        transition: transform .6s ease-in-out;
    }
    #Kompetenzen .accordion.open .description {
        transform: translateY(-6vw);
    }
    .ic #Kompetenzen .accordion {
        height: 20vw;
    }
	.ic #Kompetenzen .bold {
		font-size: 5.8vw;
		letter-spacing: -0.2vw;
		height: 18vw;
		line-height: 1;
	}
    .ic #Kompetenzen .accordion.open .description {
        transform: translateY(-3vw);
    }
	
    #Kompetenzen .accordion .bezeichnung > span:before {
        content: "";
        width: 3vw;
        height: 3vw;
        display: inline-block;
        margin-right: 2vw;
        position: absolute;
        bottom: -5vw;
        left: calc(50% - 1.5vw);
        transition: opacity .6s ease-in-out, transform .6s ease;
        border-right: 3px solid #000;
        border-top: 3px solid #000;
        transform: rotate(135deg);
		transform-origin: center;
    }
    #Kompetenzen .accordion.open .bezeichnung > span:before {
/*        transform: rotate(-45deg) translateX(1vw);*/
		opacity: 0;
    }


	#about #intro, #about #intro .background, #referenzen #intro, #referenzen #intro .background {
		height: 100vw;
	}	
	.content h3 {
		font-size: 6.3vw;
		margin-top: 12vw;
		font-weight: 600;
	}
	section#ueberuns br {
		display: none;
	}
	#fancybox-title {
		font-size: 4vw !important;
		bottom: -3vw !important;
	}	
	#fancybox-content {
		border: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	
	#Referenz .section-content {
		width: 98vw;
	}
	#Referenz p {
		width: 80vw;
		margin: auto;
	}
	.galerie {
		width: 99vw;
		margin-left: 0;
	}
	.galerie img {
		width: 48.5vw;
	}
	.galerie-buttons {
		margin: 6vw auto 8vw;
	}
	.galerie-button {
		font-size: 8vw;
	}
	.galerie-wrapper {
		min-height: 55vw;
	}
	.vn-galerie.stapel {
		transform: translateX(0);
	}
	.pe .galerie-wrapper {
        padding-top: 5vw;
    }
	.pe .vn-galerie.stapel {
        transform: translateX(-8vw);
    }
	.iv .galerie-wrapper {
        padding-top: 5vw;
    }
	.iv .vn-galerie.stapel {
		transform: translateX(-8vw);
	}
	.vn-galerie img {
		height: 50vw;
	}
	span.button-trenner {
		height: 7vw;
		margin: 0 4vw -.5vw 4vw;
	}
/* Projekte */	
	section#Projektliste {
		margin-top: 12vw;
	}
	#Projektliste .newstitle {
		height: 30vw;
	}
	#Projektliste .newstitle > a {
		font-size: 7vw;
		letter-spacing: -0.2vw;
		padding: 0 0 0 12vw;
		height: 30vw;
	}
	span.number {
		font-size: 4vw;
	}
	div#news_follower {
		display: none;
	}
	#Projektliste .section-content {
        display: block;
    }
	.projekt .video-wrapper {
		height: 50vh;
	}
	.projekt .banner {
        height: 50vh;
        background-size: auto 50vh;
    }
	.projekt #intro {
		height: 50vh;
	}
	.projekt #intro .line {
        height: 15vh;
    }
    #About .section-content {
        width: 82% !important;
    }
	.baudenkmal-eimsbuettel .vn-galerie.stapel {
        transform: translateX(-8vw);
    }
    .slideshow, .slideshow .slides, .slideshow a, .slides div, .slideshow img, .slideshow video {
        height: calc(21.897vw * 2);
        max-width: initial;
    }
	.slideshow.pics6 .slides {
		width: calc(403vw * 2);
	}
	.half .slideshow.pics6 .slides {
		width: calc(386.2vw * 2);
	}
	
	
/* Impressum, Datenschutz */	
	.pagecontent {
		width: 90%;
		margin: 8vh auto 4vh auto;
	}	
    .textpage .titel {
        font-size: 10vw;
        margin-bottom: 7vw;
        margin-top: 12vh;
        line-height: 1;
    }
	.pagecontent .titel {
		text-align: left;
	}	
	.pagecontent h2 {
		font-size: 5.5vw;
		margin: 8vw 0 3vw 0;
		line-height: 1.1;
		text-align: left;
	}	
	.pagecontent p, .pagecontent a {
		font-size: 15px;
		margin: 1.5vw 0;
		text-align: left;
	}
}