:root {
	--marginSides: 50px;
	--backgroundColor1: #000;
	--backgroundColor2: #fff;
	--backgroundColor3: #edeae5;
	--backgroundColor4: #014d54;
	--fontColor1: #fff;
	--fontColor2: rgb(162,162,162);
	--fontColor3: rgb(100,100,100);
	--fontColor4: #000;
	--fontColor5: #026670;
	--fontColor6: #00a5b5;
	--fontSizeLogo: 1.0vw;
	--fontSizeSmall: 1.1vw;
	--fontSizeBasis: 1.2vw;
	--fontSizeLarge2: 2.8vw;
	--fontSizeLarge3: 6vw;
	--fontSizeLarge4: 2vw;
	--lineHeight0: 1em;
	--lineHeight3: 1.25em;
	--lineHeight1: 1.5em;
	--lineHeight2: 1.8em;
	--gridGap: 2vw;
	--casesGap: 8vw;
}

.overlay {
	--fontSizeBasis: 1.5vw;
}

@font-face {
	font-family: soehne_leicht;
	src: url(../fonts/soehne/soehne-leicht.woff2);
}

@font-face {
	font-family: soehne_buch;
	src: url(../fonts/soehne/soehne-buch.woff2);
}

@font-face {
	font-family: soehne_kraeftig;
	src: url(../fonts/soehne/soehne-kraftig.woff2);
}

body {
	background-color: var(--backgroundColor1);
	color: var(--fontColor1);
	font-weight: 400;
	font-size: 24px;
	font-family: "soehne_leicht", sans-serif;
	line-height: 1em;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

a {
	color: var(--fontColor1);
	text-decoration: none;
}

a:hover {
	color: var(--fontColor1);
}

.anchor {
	margin-top: -150px;
}

/* main menu */

.main-menu-button-wrapper {
	position: relative;
	display: none;
}

.main-menu-button,
.overlay-close {
	margin-top: 0.3em;
	width: 20px;
	height: 15px;
	position: absolute;
	right: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.main-menu-button span,
.overlay-close span {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: white;
	border-radius: 2px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.main-menu-button span:nth-child(1) {
	top: 0px;
}

.main-menu-button span:nth-child(2),
.main-menu-button span:nth-child(3) {
	top: 6px;
}

.main-menu-button span:nth-child(4) {
	top: 12px;
}

.main-menu-button.open span:nth-child(1),
.overlay-close span:nth-child(1) {
	top: 6px;
	width: 0%;
	left: 50%;
}

.main-menu-button.open span:nth-child(2),
.overlay-close span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.main-menu-button.open span:nth-child(3),
.overlay-close span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.main-menu-button.open span:nth-child(4),
.overlay-close span:nth-child(4) {
	top: 6px;
	width: 0%;
	left: 50%;
}

.main-menu {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 9;
	top: 0;
	right: -30vw;
	background-color: rgba(0,0,0,0.9);
	overflow-x: hidden;
	padding-top: 8rem;
	width: 30vw;
}

.main-menu.open {
	right: 0;
}

.main-menu a {
	display: block;
	padding: 0.75rem 2rem 0.75rem 2rem;
	text-align: center;
}

/* grid layout */

.basegrid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gridGap);
	row-gap: var(--gridGap);
	position: relative;
	padding: 0 var(--marginSides);
}

.subgrid {
	grid-column: span 12;
	padding: 0;
	grid-row-gap: 0;
}

/* top bar */

.topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--backgroundColor1);
	height: calc(var(--fontSizeBasis) * 2);
	z-index: 10;
	padding-top: 1rem;
	grid-template-areas:
		"logo logo menu menu menu menu menu menu menu menu . language";
}

.topbar > .logo {
	grid-area: logo;
}

.topbar > .main-menu-bar {
	grid-area: menu;
}

.topbar > .main-menu-bar > a {
	margin-right: 1.5em;
}

.topbar > .language {
	grid-area: language;
	text-align: right;
}

/* background video */

.background-video-wrapper {
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	overflow: hidden;
}

.background-video {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: -1;
}

/* home */

.welcome-image {
	position: relative;
	height: 25vh;
}

.section-intro {
	position: relative;
	height: 100vh;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.section-intro > .text-container {
	grid-column: 3 / span 8;
	grid-row: 2 / span 1;
	position: relative;
}

.section-intro > .text-container > h2 {
	position: absolute;
	left: 0;
	bottom: 6rem;
}

.section-intro.basegrid {
	grid-template-rows: calc(var(--fontSizeBasis) * 2) 1fr calc(var(--fontSizeBasis) * 2);
}

/* sections */

.section-consultancy,
.section-ai,
.section-contact {
	padding-top: var(--casesGap);
	padding-bottom: var(--casesGap);
	grid-template-rows: 2em 1fr;
}

.overlay-content .article-wrapper .image-container,
.section-gallery > .image-container,
.section-cases > .case > .image-container {
	grid-column: span 3;
	position: relative;
}

.overlay-content .article-wrapper .image-container > .image,
.section-gallery > .image-container > .image,
.section-cases > .case > .image-container > .image {
	background-color: #666;
	background-size: cover;
	background-position: center center;
	width: 100%;
	padding-top: 70%;
}

.overlay-content .article-wrapper .image-container > video,
.section-gallery > .image-container > video,
.section-cases > .case > .image-container > video {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.overlay-content > h4,
.overlay-content > p {
	grid-column: 3 / span 9;
}

.section-cases-intro > h2,
.section-consultancy > h2,
.section-ai > h2,
.section-contact > h2 {
	grid-column: 3 / span 8;
}

.section-gallery > h2,
.section-imprint > h3 {
	grid-column: 3 / span 9;
	margin-bottom: 2em;
}

.section-cases-intro > .text-container,
.section-consultancy > .text-container,
.section-ai > .text-container,
.section-contact > .text-container {
	grid-column: 4 / span 7;
}

/* sample cases */

.section-cases-intro {
	padding-top: var(--casesGap);
}

.section-cases {
	display: grid;
	grid-template-columns: 1fr;
}

.section-cases > .case {
	padding-top: var(--casesGap);
	padding-bottom: var(--casesGap);
}

.section-cases > .case:first-child {
	padding-top: calc(var(--casesGap) / 2);
}

.section-cases > .case.white {
	background-color: var(--backgroundColor2);
}

.section-cases > .case-a {
	grid-template-areas:
		".  a1 a1 a1 a1 a1 a1 a2 a2 a2 a2 . "
		".  . a3 a3 a3 a3 a4 a4 a4 a4 a4 . ";
}

.section-cases > .case > .a1 {
	grid-area: a2;
}

.section-cases > .case > .a1 > .image {
	padding-top: 70%;
}

.section-cases > .case > .a2 {
	grid-area: a1;
	overflow: hidden;
}

.section-cases > .case > .a2 > .image {
	background-position: left center;
}

.section-cases > .case > .a2 > .split-reveal {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 0%;
	height: 100%;
	overflow: hidden;
}

.section-cases > .case > .a2 > .split-reveal.animated {
	border-right: 1px solid #999;
}

.section-cases > .case > .a2 > .split-reveal > .image {
	width: 100%;
	height: 100%;
	background-position: left center;
	background-size: cover;
	background-repeat: no-repeat;
}

.section-cases > .case > .a3 {
	grid-area: a3;
}

.section-cases > .case > .a3 > .image {
	padding-top: 88.5%;
}

.section-cases > .case > .a4 {
	grid-area: a4;
}

.section-cases > .case > .a3 > .aspectratio-helper {
	padding-top: 70%;
}

.section-cases > .case-b {
	grid-template-areas:
		".  b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 . "
		".  .  b3 b3 b3 b3 b4 b4 b4 b4 .  . ";
}

.section-cases > .case > .b1 {
	grid-area: b1;
	position: relative;
}

.section-cases > .case > .b1 > .aspectratio-helper {
	padding-top: 70%;
}

.section-cases > .case > .b1 > video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}

.section-cases > .case > .b2 {
	grid-area: b2;
}

.section-cases > .case > .b3 {
	grid-area: b3;
}

.section-cases > .case > .b3 > .image {
	padding-top: 100%;
}

.section-cases > .case > .b4 {
	grid-area: b4;
}

.section-cases > .case > .b4 > .image {
	padding-top: 70%;
}

.section-cases > .case-c {
	grid-template-areas:
		".  c1 c1 c1 c1 c1 c1 c2 c2 c2 c2 . "
		".  c3 c3 c3 c3 c4 c4 c4 c4 c4 c4 . ";
}

.section-cases > .case > .c1 {
	grid-area: c1;
}

.section-cases > .case > .c1 > .image {
	padding-top: 85%;
}

.section-cases > .case > .c2 {
	grid-area: c2;
}

.section-cases > .case > .c3 {
	grid-area: c3;
}

.section-cases > .case > .c3 > .aspectratio-helper {
	padding-top: 56.25%;
}

.section-cases > .case > .c4 {
	grid-area: c4;
}

.section-cases > .case > .c4 > .image {
	padding-top: 60%;
}

.section-cases > .case > .c4 > .split-reveal {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.section-cases > .case > .c4 > .split-reveal > .image {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.section-cases > .case-d {
	grid-template-areas:
		".  d1 d1 d1 d1 d2 d2 d2 d2 d2 d2 . "
		".  .  d3 d3 d3 d3 d4 d4 d4 d4 .  . ";
}

.section-cases > .case > .d1 {
	grid-area: d1;
}

.section-cases > .case > .d2 {
	grid-area: d2;
}

.section-cases > .case > .d2 > .image {
	padding-top: 80%;
}

.section-cases > .case > .d3 {
	grid-area: d3;
}

.section-cases > .case > .d3 > .image {
	padding-top: 150%;
}

.section-cases > .case > .d4 {
	grid-area: d4;
}

.section-cases > .case > .d4 > .aspectratio-helper {
	padding-top: 100%;
}

.section-cases > .case > .d4 > canvas {
	top: 0;
}

.section-cases > .case-e {
	grid-template-areas:
		".  e1 e1 e1 e1 e2 e2 e2 e2 e2 e2 . "
		".  .  e3 e3 e3 e3 e4 e4 e4 e4 .  . "
		".  .  .  e5 e5 e5 e5 e5 e5 e5 .  . ";
}

.section-cases > .case > .e1 {
	grid-area: e2;
}

.section-cases > .case > .e1 > .image {
	padding-top: 70%;
}

.section-cases > .case > .e2 {
	grid-area: e1;
}

.section-cases > .case > .e3 {
	grid-area: e3;
}

.section-cases > .case > .e3 > .image {
	padding-top: 80%;
}

.section-cases > .case > .e4 {
	grid-area: e4;
}

.section-cases > .case > .e4 > .image {
	padding-top: 80%;
}

.section-cases > .case > .e5 {
	grid-area: e5;
}

.section-cases > .case > .e5 > .image {
	padding-top: 50%;
}

.section-cases > .case-f {
	grid-template-areas:
		"f2 f2 f2 f2 f2 f2 f2 f2 f1 f1 f1 f1"
		".  f3 f3 f3 f3 f3 f3 f4 f4 f4 f4 . ";
}

.section-cases > .case > .f1 {
	grid-area: f1;
}

.section-cases > .case > .f2 {
	grid-area: f2;
}

.section-cases > .case > .f3 {
	grid-area: f3;
}

.section-cases > .case > .f3 > .image {
	padding-top: 54%;
}

.section-cases > .case > .f4 {
	grid-area: f4;
}

.section-cases > .case > .f4 > .image {
	padding-top: 97.3%;
}

.section-cases > .case > .image-container > canvas {
	width: 100%;
	height: auto;
	position: absolute;
	object-fit: cover;
}

.section-cases > .case .text-container.a1,
.section-cases > .case .text-container.c2,
.section-cases > .case .text-container.b2,
.section-cases > .case .text-container.f1 {
	padding-left: var(--gridGap);
}

.section-cases > .case .text-container.d1,
.section-cases > .case .text-container.e2 {
	padding-right: var(--gridGap);
}


/* image gallery */

.section-gallery {
	padding-top: var(--casesGap);
	padding-bottom: var(--casesGap);
	grid-template-areas:
		".   .   tit tit tit tit tit tit tit tit tit tit"
		".   i02 i02 i02 i03 i03 i03 i03 i03 i03 .   .  "
		"i04 i04 i04 i04 i04 i05 i05 i05 i05 i05 i05 i05"
		".   .   i06 i06 i06 i06 i06 i06 i06 i06 .   .  "
		"i07 i07 i07 i07 i07 i07 i08 i08 i08 i08 i08 i08"
		".   .   i09 i09 i09 i09 i09 i09 .   .   .   .  ";
}

.section-gallery > .image-container video {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-gallery > h2 {
	grid-area: tit;
	margin-bottom: 2em;
}

.section-gallery > .image-02 {
	grid-area: i02;
}

.section-gallery > .image-02 > .image {
	padding-top: 97.8%;
}

.section-gallery > .image-03 {
	grid-area: i03;
}

.section-gallery > .image-03 > .image {
	padding-top: 48%;
}

.section-gallery > .image-04 {
	grid-area: i04;
}

.section-gallery > .image-04 > .image {
	padding-top: 105%;
}

.section-gallery > .image-05 {
	grid-area: i05;
}

.section-gallery > .image-05 > .image {
	padding-top: 60%;
}

.section-gallery > .image-06 {
	grid-area: i06;
}

.section-gallery > .image-06 > .image {
	padding-top: 60%;
}

.section-gallery > .image-07 {
	grid-area: i07;
}

.section-gallery > .image-08 {
	grid-area: i08;
}

.section-gallery > .image-08 > .aspectratio-helper {
	padding-top: 85%;
	position: relative;
}

.section-gallery > .image-09 {
	grid-area: i09;
}

/* article overlay slideshow */

.overlay-content .artificial_intelligence .image-container > .slideshow {
    position: relative;
    width: 100%;
	padding-top: 70%;
}

.overlay-content .artificial_intelligence .image-container > .slideshow > .image {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 108;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.overlay-content .artificial_intelligence .image-container > .slideshow > .image.active {
    z-index: 110;
}

.overlay-content .artificial_intelligence .image-container > .slideshow > .image.last-active {
    z-index: 109;
}

/* article overlay */

.overlay-content .article-wrapper .article-intro {
	background-color: var(--backgroundColor4);
	height: 100vh;
	position: relative;
}

.overlay-content .article-wrapper .article-intro .article-intro-image,
.overlay-content .article-wrapper .article-intro .article-intro-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
}

.overlay-content .article-wrapper .article-intro .article-intro-image {
	width: 100%;
}

.overlay-content .article-wrapper .article-intro .article-intro-image {
	background-image: url('../media/lcgi_ai_intro.webp');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: transparent;
}

.overlay-content .article-wrapper .article-intro .article-intro-content {
	grid-template-rows: 6fr 2fr 1fr;
}

.overlay-content .article-wrapper .article-text .article-intro-caption {
	grid-column: 3 / span 8;
	
}

.overlay-content .article-wrapper .article-text {
	padding-top: 0;
	padding-bottom: 6em;
}

.overlay-content .article-wrapper .article-intro .text-container {
	grid-column: 2 / span 10;
	grid-row: 2 / span 1;
}

.overlay-content .article-wrapper .article-intro h3,
.overlay-content .article-wrapper .article-intro .h3-subline,
.overlay-content .article-wrapper .article-intro .article-info {
	grid-column: auto;
}

.overlay-content .article-wrapper h3,
.overlay-content .article-wrapper .h3-subline {
	grid-column: 2 / span 10;
}

.overlay-content .article-wrapper h4 {
	grid-column: 2 / span 6;
}

.overlay-content .article-wrapper .text-container {
	grid-column: 3 / span 8;
}

.overlay-content .article-wrapper .article-text .text-container.first {
	margin-top: 4em;
}

.overlay-content .image-container-wrapper {
	margin-top: 1em;
	margin-bottom: 1em;
}

.overlay-content .article-wrapper .text-container.legal {
	margin-top: 8em;
}

.overlay-content .artificial_intelligence .image-a1 {
	grid-column: 2 / span 9;
}

.overlay-content .artificial_intelligence .image-a1 > video {
	width: 100%;
	height: auto;
	position: static;
}

.overlay-content .artificial_intelligence .image-a1-caption {
	grid-column: 2 / span 5;
	margin-top: var(--gridGap);
}

.overlay-content .image-container-wrapper-b {
	grid-template-rows: auto auto;
}

.overlay-content .artificial_intelligence .image-b1 {
	grid-column: 3 / span 5;
}

.overlay-content .artificial_intelligence .image-b1 > .image {
	padding-top: 100%;
}

.overlay-content .artificial_intelligence .image-b2 {
	grid-column: span 3;
	grid-row: span 2;
}

.overlay-content .artificial_intelligence .image-b2 > .aspectratio-helper {
	padding-top: 170%;
}

.overlay-content .artificial_intelligence .image-b1-caption {
	grid-column: 2 / span 4;
	margin-top: var(--gridGap);
}

.overlay-content .artificial_intelligence .image-c1 {
	grid-column: 2 / span 7;
}

.overlay-content .artificial_intelligence .image-c1 > .slideshow {
	padding-top: 70%;
}

.overlay-content .artificial_intelligence .image-c1-caption {
	grid-column: span 4;
	margin-left: var(--gridGap);
}

.overlay-content .artificial_intelligence .image-d1 {
	grid-column: 2 / span 6;
}

.overlay-content .artificial_intelligence .image-d1 > .slideshow {
	padding-top: 100%;
}

.overlay-content .artificial_intelligence .image-d1-caption {
    grid-column: span 4;
	margin-top: 0 !important;
	margin-left: var(--gridGap);
}

/* imprint */

.overlay-content .article-wrapper.imprint {
	padding-bottom: 4em;
}

.overlay-content .imprint > .text-container ul {
	margin-left: 3em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.overlay-content .imprint > .text-container ul li {
	list-style-type: square;
	margin-bottom: 0.5em;
}

/* contact */


.section-contact {
	min-height: 60vh;
	position: relative;
	overflow: hidden;
}

.section-contact > h3 {
	grid-column: 4 / span 7;
	margin-bottom: 0;
}

.section-contact > .text-container {
	grid-column: 4 / span 7;
}

/* bottom line */

.footer {
	padding-top: 2em;
	padding-bottom: 2em;
	grid-template-areas:
		". . . cr cr cr cr im im im im im";
}

.footer > .copyright {
	grid-area: cr;
}

.footer > .imprint {
	grid-area: im;
}

/* overlay */

body.overlay-open {
	overflow: hidden;
}

.overlay > .overlay-content {
	height: 100%;
	overflow: scroll;
}

.overlay > .overlay-close {
	position: absolute;
	top: 1.25rem;
	right: 50px;
	z-index: 200;
}

.overlay > .overlay-close span {
	background: black;
}

body.overlay-content-artificial_intelligence .overlay > .overlay-close span,
body.overlay-content-kuenstliche_intelligenz .overlay > .overlay-close span {
	background: var(--fontColor6);
}

.background-content {
	height: 100%;
	overflow: auto;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.925);
	z-index: 100;
    -webkit-transition: left .8s cubic-bezier(.25, .8, .25, 1);
    transition: left .8s cubic-bezier(.25, .8, .25, 1);
}

body:not(.overlay-open) .overlay {
    left: 100%;
}

/* typographic styles */

.main-menu a {
	text-decoration: none;
	font-size: var(--fontSizeLarge2);
	line-height: var(--lineHeight1);
	color: var(--fontColor2);
}

.main-menu a:hover {
	color: var(--fontColor1);
}

.main-menu a.active {
	color: var(--fontColor1);
}

.topbar .logo,
.topbar .main-menu-bar,
.topbar .language,
.topbar .main-menu-button {
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight1);
	color: var(--fontColor1);
}

.topbar > .logo,
.topbar .language {
	margin-top: 0.2em;
	font-size: var(--fontSizeLogo);
	letter-spacing: 0.03em;
	font-family: "soehne_buch", sans-serif;
}

.topbar > .logo span {
	margin-right: 0.2em;
}

.topbar > .main-menu-bar > a {
	color: var(--fontColor3);
}

.topbar > .main-menu-bar > a.active {
	color: var(--fontColor1);
}

.topbar .language {
	letter-spacing: auto;
	color: var(--fontColor2);
}

.topbar > .language .language-active {
	color: var(--fontColor1);
}

.topbar > .language a,
.topbar > .language a:hover {
	color: var(--fontColor2);
}

h3 {
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight3);
}

.welcome-image .info-box {
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight1);
}

.welcome-image .info-box a {
	text-decoration: underline;
}

.section-cases > .case .text-container {
	font-size: var(--fontSizeBasis);
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.section-cases > .case .text-container a {
	
}

.section-cases > .case .text-container a.duisburg-video-open {
	background-color: var(--backgroundColor1);
	color: var(--fontColor1);
	text-decoration: none;
	display: inline-flex;
	align-items: flex-start;
	white-space: nowrap;
}

.section-cases > .case .text-container a.duisburg-video-open::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	margin-top: 0.3em;
	background-image: url('../img/link_arrow.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.section-cases > .case .text-container a.duisburg-video-open > span {
	display: inline;
}

.section-cases > .case .text-container a.duisburg-video-open:hover {
	text-decoration: underline;
}

.section-cases > .case.white {
	color: var(--fontColor4);
}

.section-cases > .case .headline,
.section-cases-intro > h2,
.section-gallery > h2,
.section-consultancy > h2,
.section-ai > h2,
.section-contact > h2 {
	display: block;
	margin-bottom: 1em;
	margin-top: -0.75em;
	font-family: "soehne_kraeftig", sans-serif;
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight1);
}

.section-cases-intro > h2,
.section-consultancy > h2,
.section-ai > h2,
.section-contact > h2 {
	margin-bottom: 2em;
}

.section-intro > .text-container h2 {
	font-size: var(--fontSizeLarge4);
	line-height: var(--lineHeight3);
}

.section-intro > .text-container,
.section-cases-intro > .text-container,
.section-cases > .case .text-container,
.section-consultancy > .text-container,
.section-ai > .text-container,
.section-imprint > .text-container,
.section-contact > .text-container {
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight1);
}

.section-consultancy > .text-container .options-wrapper,
.section-ai > .text-container .options-wrapper,
.section-intro > .text-container .options-wrapper {
	margin-top: 3em;
}

.section-consultancy > .text-container .options-wrapper a,
.section-ai > .text-container .options-wrapper a,
.section-intro > .text-container .options-wrapper a {
	display: block;
	float: left;
	text-decoration: underline;
}

.section-consultancy > .text-container .options-wrapper a:first-of-type,
.section-ai > .text-container .options-wrapper a:first-of-type,
.section-intro > .text-container .options-wrapper a:first-of-type {
	margin-right: 3em;
}

.section-cases > .case > .text-container > .credits {
	margin-top: 1em;
	color: var(--fontColor2);
}

.section-gallery > .image-container .label {
	font-size: var(--fontSizeBasis);
	margin-top: 0.5em;
	margin-bottom: 1em;
	color: var(--fontColor2);
}

.section-contact > .content {
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight1);
}

.footer {
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight1);
	color: var(--fontColor2);
}

.footer > .imprint a {
	color: var(--fontColor2);
}

.footer > .imprint a.active,
.footer > .imprint a:hover {
	color: var(--fontColor1);
}

.overlay-content {
	color: var(--fontColor4);
}

.overlay-content .article-wrapper h3 {
	font-family: "soehne_kraeftig", sans-serif;
	margin-top: 4em;
	margin-bottom: 2em;
	font-size: var(--fontSizeLarge2);
	line-height: var(--lineHeight1);
}

.overlay-content .article-wrapper.artificial_intelligence h3 {
	font-size: var(--fontSizeLarge3);
	line-height: var(--lineHeight0);
	color: var(--fontColor1);
	margin-top: 0;
}

.overlay-content .article-wrapper.artificial_intelligence .h3-subline {
	color: var(--fontColor1);
	line-height: var(--lineHeight3);
}

.overlay-content .article-wrapper h3.has-subline {
	margin-bottom: 0;
}

.overlay-content .article-wrapper .h3-subline {
	font-family: "soehne_buch", sans-serif;
	margin-bottom: 2em;
	font-size: var(--fontSizeLarge2);
	line-height: var(--lineHeight0);
}

.overlay-content .article-wrapper h4 {
	font-family: "soehne_kraeftig", sans-serif;
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-size: var(--fontSizeLarge2);
	line-height: 1.15em;
}

.overlay-content .article-wrapper .text-container .article-info {
	color: var(--fontColor4);
	margin-bottom: 2em;
}

.overlay-content .article-wrapper.artificial_intelligence h3,
.overlay-content .article-wrapper.artificial_intelligence .h3-subline {
	text-shadow: 0 0 30px black;
	
}

.overlay-content .article-wrapper.artificial_intelligence h3 {
	margin-bottom: 0.5em;
}

.overlay-content .article-wrapper .article-text .article-intro-caption {
	font-family: "soehne_buch", sans-serif;
	font-size: var(--fontSizeSmall);
	line-height: var(--lineHeight1);
	padding-top: 1em;
	color: var(--fontColor2);
}

.overlay-content .article-wrapper .text-container {
	font-family: "soehne_buch", sans-serif;
	font-size: var(--fontSizeBasis);
	line-height: var(--lineHeight1);
	text-indent: 0;
}

.overlay-content .article-wrapper .text-container > p + p {
	margin-bottom: 0;
}

.overlay-content .article-wrapper .text-container > p.paragraph {
	text-indent: 0;
	margin-top: 1em;
}

.overlay-content .article-wrapper .text-container > h5 {
	font-family: "soehne_kraeftig", sans-serif;
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-size: var(--fontSizeBasis);
}

.overlay-content .article-wrapper .text-container a,
.overlay-content .article-wrapper .text-container a:active,
.overlay-content .article-wrapper .text-container a:hover,
.overlay-content .article-wrapper .image-container a,
.overlay-content .article-wrapper .image-container a:active,
.overlay-content .article-wrapper .image-container a:hover {
	color: var(--fontColor4);
	text-decoration: underline;
}

.overlay-content .article-wrapper .text-container .smallcaps {
	text-transform: uppercase;
	font-size: 90%;
}

.overlay-content .article-wrapper .caption {
	font-family: "soehne_buch", sans-serif;
	font-size: var(--fontSizeSmall);
	line-height: var(--lineHeight1);
	color: var(--fontColor2);
}

.overlay-content .article-wrapper .caption a,
.overlay-content .article-wrapper .caption a:active,
.overlay-content .article-wrapper .caption a:hover {
	color: var(--fontColor2);
	text-decoration: underline;
}

.overlay-content .article-wrapper .text-container.legal {
	font-family: "soehne_buch", sans-serif;
	font-size: var(--fontSizeSmall);
	line-height: var(--lineHeight1);
	text-indent: 0;
	color: var(--fontColor2);
}

.overlay-content .article-wrapper .text-container.legal a {
	color: var(--fontColor2);
}

/* responsive */

@media screen and (min-width: 1000px) {
	
	.overlay {
		--fontSizeLogo: 1.4vw;
		--fontSizeBasis: 1.5vw;
		--fontSizeLarge2: 2.6vw;
		--fontSizeLarge3: 6vw;
		--fontSizeLarge4: 2.8vw;
		--fontSizeSmall: 1.2vw;
	}
	
	.topbar > .logo,
	.topbar .language {
		margin-top: 0.2em;
	}
	
	.section-cases > .case,
	.section-consultancy,
	.section-ai, .section-contact {
		padding-top: calc(1.25 * var(--casesGap));
		padding-bottom: calc(1.25 * var(--casesGap));
	}
	
}

@media screen and (max-width: 1000px) {
	
	:root {
		--fontSizeLogo: 1.3vw;
		--fontSizeBasis: 1.4vw;
		--fontSizeLarge2: 1.8vw;
		--fontSizeLarge4: 2.4vw;
	}
	
	.overlay {
		--fontSizeBasis: 1.8vw;
		--fontSizeLarge2: 2.6vw;
		--fontSizeLarge3: 7vw;
		--fontSizeSmall: 1.3vw;
	}
	
	.topbar > .logo,
	.topbar .language {
		margin-top: 0.11em;
	}
	
	.section-intro > .text-container {
		grid-column: 2 / span 10;
	}
	
	.overlay-content .article-wrapper h3,
	.overlay-content .article-wrapper .h3-subline,
	.overlay-content .article-wrapper .text-container,
	.overlay-content .article-wrapper .article-text .article-intro-caption {
		grid-column: 2 / span 10;
	}
	
	.overlay-content .article-wrapper h4 {
		margin-top: 3em;
	}
	
	.section-cases > .case-a > .a2 > .image {
		padding-top: 85%;
	}
	
	.section-cases > .case-a > .a2 > .image,
	.section-cases > .case-a > .a2 > .split-reveal > .image {
		background-position: -50px center;
	}
	
	.overlay-content .artificial_intelligence .image-a1 {
		grid-column: 2 / span 10;
	}
	
	.overlay-content .artificial_intelligence .image-b1 {
		grid-column: 2 / span 6;
	}
	
	.overlay-content .artificial_intelligence .image-b2 {
		grid-column: span 4;
	}
	
	.overlay-content .artificial_intelligence .image-c1 {
		grid-column: 2 / span 10;
	}
	
	.overlay-content .artificial_intelligence .image-d1 {
		grid-column: 2 / span 10;
		margin-bottom: auto;
	}
	
	.overlay-content .artificial_intelligence .image-container-wrapper-d,
	.overlay-content .artificial_intelligence .image-container-wrapper-c {
		margin-bottom: 0;
	}
	
	.overlay-content .artificial_intelligence .image-d1-caption,
	.overlay-content .artificial_intelligence .image-c1-caption {
		margin-top: var(--gridGap) !important;
		margin-left: 0;
		margin-bottom: 2em;
	}
	
	.overlay-content .artificial_intelligence .image-c1-caption {
		margin-bottom: 0;
	}
	
	.overlay-content .artificial_intelligence .image-b1-caption {
		grid-column: 2 / span 4;
	}
	
}

@media screen and (max-width: 800px) {
	
	:root {
		--fontSizeLogo: 1.5vw;
		--fontSizeBasis: 1.7vw;
		--fontSizeLarge2: 2.1vw;
	}
	
	.overlay {
		--fontSizeBasis: 2vw;
		--fontSizeLarge2: 3vw;
		--fontSizeLarge3: 6vw;
		--fontSizeSmall: 1.7vw;
	}
	
	.topbar {
		grid-template-areas:
			"logo logo menu menu menu menu menu menu menu menu language language";
	}
	
	.section-cases-intro > h2,
	.section-consultancy > h2,
	.section-ai > h2,
	.section-contact > h2 {
		grid-column: 2 / span 9;
	}
	
	.section-cases-intro > .text-container,
	.section-consultancy > .text-container,
	.section-ai > .text-container,
	.section-contact > .text-container {
		grid-column: 3 / span 9;
	}
	
	.section-cases > .case-a {
		grid-template-areas:
			"a1 a1 a1 a1 a1 a1 a1 a2 a2 a2 a2 a2"
			".  a3 a3 a3 a3 a3 a4 a4 a4 a4 a4 . ";
	}
	
	.section-cases > .case-b {
		grid-template-areas:
			"b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2"
			".  b3 b3 b3 b3 b3 b4 b4 b4 b4 b4 . ";
	}
	
	.section-cases > .case-c {
		grid-template-areas:
			"c1 c1 c1 c1 c1 c1 c1 c2 c2 c2 c2 c2"
			".  c3 c3 c3 c3 c4 c4 c4 c4 c4 c4 . ";
	}

	.section-cases > .case-d {
		grid-template-areas:
			"d1 d1 d1 d1 d1 d2 d2 d2 d2 d2 d2 d2"
			".  d3 d3 d3 d3 d3 d4 d4 d4 d4 d4 . ";
	}

	.section-cases > .case-e {
		grid-template-areas:
			"e1 e1 e1 e1 e1 e2 e2 e2 e2 e2 e2 e2"
			".  e3 e3 e3 e3 e3 e4 e4 e4 e4 e4 . "
			".  .  .  e5 e5 e5 e5 e5 e5 e5 e5 . ";
	}
	
	.section-cases > .case-f {
		grid-template-areas:
			"f2 f2 f2 f2 f2 f2 f2 f2 f1 f1 f1 f1"
			".  f3 f3 f3 f3 f3 f3 f4 f4 f4 f4 . ";
	}
	
	.footer {
		grid-template-areas:
			". . cr cr cr cr cr im im im im im";
	}
	
	.overlay-content .article-wrapper h4 {
		grid-column: 2 / span 8;
	}
	
}

@media screen and (max-width: 800px) and (orientation: landscape) {
	
	.section-intro > .text-container > h2 {
		bottom: 6rem;
	}
	
}

@media screen and (max-width: 600px) {
	
	:root {
		--fontSizeLogo: 3vw;
		--fontSizeBasis: 3vw;
		--fontSizeLarge2: 4.5vw;
		--fontSizeLarge4: 4.5vw;
		--marginSides: 20px;
		--casesGap: 4rem;
	}
	
	
	.overlay {
		--fontSizeBasis: 3vw;
		--fontSizeLarge2: 4.5vw;
		--fontSizeLarge3: 9vw;
		--fontSizeSmall: 2.4vw;
	}
	
	.main-menu {
		transition: 0.5s;
	}
	
	.main-menu.open {
		width: 100vw;
		background-color: rgba(0,0,0,1);
	}
	
	.main-menu a {
		transition: 0.3s;
	}
	
	.topbar {
		grid-template-areas:
			"logo logo . . language menu";
	}
	
	.topbar > .main-menu-bar {
		display: none;
	}
	
	.topbar > .main-menu-bar > a {
		-webkit-transition: .8s;
		transition: .8s;
	}

	.main-menu-button-wrapper {
		display: inline;
		grid-area: menu;
	}
	
	.anchor {
		margin-top: -70px;
	}
	
	.basegrid {
		grid-template-columns: repeat(6, 1fr);
		column-gap: 2.5vw;
		row-gap: 2.5vw;
	}
	
	.subgrid {
		grid-column: span 6;
	}
	
	.section-intro .text-container {
		grid-column: 1 / span 6;
	}
	
	.section-intro .text-container h2 > br {
		display: none;
	}
	
	.section-gallery > .title,
	.section-imprint > h3,
	.section-intro > .text-container,
	.section-cases-intro > .text-container,
	.section-consultancy > .text-container,
	.section-ai > .text-container,
	.section-contact > .text-container,
	.section-cases-intro > h2,
	.section-consultancy > h2,
	.section-ai > h2,
	.section-contact > h2,
	.overlay-content .article-wrapper .article-text .article-intro-caption,
	.overlay-content .article-wrapper .article-intro .text-container {
		grid-column: span 6;
	}
	
	.section-gallery > .image-container {
		grid-column: span 6;
	}
	
	.section-cases-intro > h2,
	.section-consultancy > h2,
	.section-ai > h2,
	.section-contact > h2 {
		margin-bottom: 1em;
	}
	
	.section-gallery > .title,
	.section-imprint > h3 {
		grid-column: span 6;
		margin-bottom: 1em;
	}
	
	.section-cases > .case > div {
		grid-column: span 6 !important;
	}
	
	.section-cases > .case .text-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.section-cases > .case-b {
		grid-template-areas:
			"b2 b2 b2 b2 b2 b2"
			"b1 b1 b1 b1 b1 b1"
			"b3 b3 b3 b3 b3 b3"
			"b4 b4 b4 b4 b4 b4";
	}
	
	.section-cases > .case-b > .b1 > .aspectratio-helper {
		padding-top: 75%;
	}
	
	.section-cases > .case-b > .b3 > .image {
		padding-top: 70%;
	}
	
	.section-cases > .case-a {
		grid-template-areas:
			"a2 a2 a2 a2 a2 a2"
			"a1 a1 a1 a1 a1 a1"
			"a3 a3 a3 a3 a3 a3"
			"a4 a4 a4 a4 a4 a4";
	} 
	
	.section-cases > .case-c {
		grid-template-areas:
			"c2 c2 c2 c2 c2 c2"
			"c1 c1 c1 c1 c1 c1"
			"c3 c3 c3 c3 c3 c3"
			"c4 c4 c4 c4 c4 c4";
	}

	.section-cases > .case-d {
		grid-template-areas:
			"d1 d1 d1 d1 d1 d1"
			"d2 d2 d2 d2 d2 d2"
			"d3 d3 d3 d3 d3 d3"
			"d4 d4 d4 d4 d4 d4";
	}
	
	.section-cases > .case-e {
		grid-template-areas:
			"e1 e1 e1 e1 e1 e1"
			"e2 e2 e2 e2 e2 e2"
			"e3 e3 e3 e3 e3 e3"
			"e4 e4 e4 e4 e4 e4";
	}
	
	.section-cases > .case-f {
		grid-template-areas:
			"f1 f1 f1 f1 f1 f1"
			"f2 f2 f2 f2 f2 f2"
			"f3 f3 f3 f3 f3 f3"
			"f4 f4 f4 f4 f4 f4";
	}
	
	.section-gallery {
		grid-template-areas:
			"tit tit tit tit tit tit"
			"i03 i03 i03 i03 i03 i03"
			"i04 i04 i04 i04 i04 i04"
			"i05 i05 i05 i05 i05 i05"
			"i06 i06 i06 i06 i06 i06"
			"i07 i07 i07 i07 i07 i07"
			"i08 i08 i08 i08 i08 i08"
			"i09 i09 i09 i09 i09 i09";
	}
	
	.section-gallery > .image-02 {
		display: none;
	}
	
	.section-gallery > .image-04 > .image {
		padding-top: 65%;
	}
	
	.section-contact {
		min-height: auto;
	}
	
	.footer {
		grid-template-areas:
			"cr cr cr cr cr cr"
			"im im im im im im";
	}
	
	.overlay > .overlay-close {
		right: 25px;
	}
	
	.overlay-content .article-wrapper h3 {
		margin-top: 3em;
		margin-bottom: 1em;
	}
	
	.overlay-content .article-wrapper h3,
	.overlay-content .article-wrapper .h3-subline,
	.overlay-content .article-wrapper h4,
	.overlay-content .article-wrapper .text-container,
	.overlay-content .artificial_intelligence .image-a1,
	.overlay-content .artificial_intelligence .image-c1,
	.overlay-content .artificial_intelligence .image-d1 {
		grid-column: 1 / span 6;
	}
	
	.overlay-content .image-container-wrapper {
		margin-bottom: 0;
	}
	
	.overlay-content .image-container-wrapper-a {
		margin-bottom: 1em;
	}
	
	.overlay-content .artificial_intelligence .image-b1 {
		grid-column: 1 / span 3;
	}
	
	.overlay-content .artificial_intelligence .image-b2 {
		grid-column: 4 / span 3;
	}
	
	.overlay-content .artificial_intelligence .image-d1 {
		margin-bottom: auto;
	}
	
	.overlay-content .artificial_intelligence .image-a1-caption,
	.overlay-content .artificial_intelligence .image-c1-caption {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.overlay-content .artificial_intelligence .image-b1-caption {
		grid-column: 1 / span 3;
		margin-top: 0;
	}
	
	.overlay-content .artificial_intelligence .image-d1-caption {
		margin-top: auto !important;
	}
	
	.overlay-content .article-wrapper .article-text {
  		padding-bottom: 2em;
	}
	
}

/* video overlay */

.overlay-content-duisburg_inside .overlay > .overlay-close span {
	background: white;
}

.overlay-content-duisburg_inside .overlay .duisburg-video-wrapper {
	width: 80%;
	aspect-ratio: 16/9;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #111;
}

.overlay-content-duisburg_inside .overlay .duisburg-video-wrapper .vimeo-link {
	position: absolute;
	bottom: -3em;
	left: 0;
	font-size: var(--fontSizeSmall);
}

/* imprint */

.overlay-content-imprint .overlay {
	background: white;
}

.overlay-content-imprint .overlay > .overlay-close span {
	background: black;
}