/*
	Theme Name: DIS-TEC 2026
	Theme URI: https://www.dis-tec.de/
	Description: DIS-TEC 2026 Theme
	Version: 1.0
	Author: Christoph Karnebogen, Mirco Hueneke
	Author URI: http://www.diewildengestalten.de
*/

/* ------------------- WEBFONT IMPORT (via GOOGLE FONTS) ------------------- */

/* google-sans-flex-100 - THIN */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/google-sans-flex-v21-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* google-sans-flex-300 - LIGHT */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/google-sans-flex-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* google-sans-flex-regular - REGULAR */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/google-sans-flex-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* google-sans-flex-700 - BOLD */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/google-sans-flex-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* google-sans-flex-900 - BLACK */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/google-sans-flex-v21-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}





/* ------------------- VARIABLES ------------------- */
/* fuer IE extra script css-vars.js laden */
:root {
	--dt-blue: #004287;
	--dt-darkblue: #21304f;
	--dt-lightblue: #e6ecf2;
	
	--dt-yellow: #b6ff00;
	
	--container-size: 1140px;
	
	--stroke-width: 2px;
}



/* ------------------- BASIC ------------------- */

body{
	font-family: 'Google Sans Flex';
	font-style: normal;
	font-weight: 300;
	line-height: 1.5;
	position: relative;
}

::focus {
    outline: 0 !important;
}

.effect, a, :after, :before{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


p {
    margin-bottom: 30px;
	line-height: 1.65;
}

p:last-child{
	margin-bottom: 0;
}

a {
	color: inherit;
}

a:hover {
	color: inherit;
}

b, strong {
    font-weight: 700;
}

.container{
	position: relative;
}





/* --------------- HEADINGS AND TXT --------------- */

h1{
	font-size: 42px;
	line-height: 1; 
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: 30px;
}

h2{
	font-size: 20px;
	line-height: 1.2; 
	text-transform: uppercase;
	font-weight: 900;
}

h3{
	font-size: 20px;
	line-height: 1.2; 
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: 40px;
}





/* -------------------- COLORS -------------------- */

.bg-darkblue{ background-color: var(--dt-darkblue); color: white; }
.blue{ color: var(--dt-blue); }




/* ------------------- NAVIGATION ------------------- */

.bun, .patty{
	background-color: white;
	height: 3px;
	width: 30px;
	display: block;
	margin-bottom: 6px;
	transform: rotate(0deg);
	
	-webkit-transition: all 0.3s ease-in-out !important;
	-moz-transition: all 0.3s ease-in-out !important;
	-ms-transition: all 0.3s ease-in-out !important;
	-o-transition: all 0.3s ease-in-out !important;
	transition: all 0.3s ease-in-out !important;
}

body:not(.home) .bun, body:not(.home) .patty{
	background-color: var(--dt-blue);	
}

.bun-bottom{
	margin-bottom: 0;
	width: 30px;
}

.fake-patty{
	position: absolute;
	margin-top: -9px;
	transform: rotate(0deg);
	
	-webkit-transition: transform 0.3s ease-in-out;
	-moz-transition: transform 0.3s ease-in-out;
	-ms-transition: transform 0.3s ease-in-out;
	-o-transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.navbar.active .patty{
	transform: rotate(-45deg);
}

.navbar.active .fake-patty{
	transform: rotate(45deg) !important;

	-webkit-transition: transform 0.3s ease-in-out;
	-moz-transition: transform 0.3s ease-in-out;
	-ms-transition: transform 0.3s ease-in-out;
	-o-transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.navbar.active .bun{
	opacity: 0;
}

.navbar-toggler {
    position: absolute;
	top: 58px;
    right: 65px;
    z-index: 5;
    padding: 0;
    border: 0;
    margin-left: 30px;
	z-index: 1200;
}

.navbar-toggler:hover .bun-bottom{
	width: 17px;
}

.navbar-toggler:focus {
	outline: none;
}

.navbar {
    position: absolute;
    z-index: 5;
    width: 100%;
    color: white;
	padding: 50px 50px 0 80px;
}

.navbar-brand {
	padding: 0;
    margin-right: 0;
}

.navbar-brand img{
	width: 165px;
}

.nav-link {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    margin-right: 65px;
}

.nav-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 29px;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
    margin-left: 8px;
}

.nav-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 28px);
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}

.nav-link:hover::after {
    left: calc(100% - 8px);	
}

.nav-link:hover::before {
    left: calc(100% + 20px);
}

body:not(.home) .nav-link{
	color: var(--dt-blue);
}

body:not(.home) .nav-link::after{
	background: var(--dt-blue);
}

body:not(.home) .nav-link::before{
    border-top: 2px solid var(--dt-blue);
    border-right: 2px solid var(--dt-blue);
}

#BurgerNavbar .lang-item {
    display: flex;
    align-items: center;
}

#BurgerNavbar .pll-switcher-flag{
	aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    width: 20px !important;
}

#BurgerNavbar .lang-item a {
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
}

#BurgerNavbar .lang-item img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}














/* ----------------- FOOTER ----------------- */

footer{
	background-color: var(--dt-lightblue);
	padding: 130px 70px 130px 70px;
	
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 80px),
		calc(100% - 80px) 100%,
		0 100%
	);
}

.footer-content {
    position: relative;
    text-align: center;
    font-size: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footer-overlay {
    position: absolute;
    width: 100%;
    font-size: 16px;
    color: var(--dt-blue);
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}

#footer-name{
	width: 100%;
}

.footer-middle {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
}

.dwg{
	opacity: 0.6;
	margin-top: 50px;
	font-size: 13px;
}

.dwg:hover{
	opacity: 1;
	text-decoration: none;
}

.footer-logo{
	
}

.footer-logo img{
	width: 160px;
	margin-right: 65px;
}

.law{
	margin-left: auto;
	align-content: center;
}













/* ----------------- ELEMENTS ----------------- */

.ds-im h1 {
    color: var(--dt-blue);
}

.ds-im h2 {
    margin-top: 50px;
    text-align: left;
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--dt-blue);
}

.ds-im h3 {
    margin-bottom: 10px;
    margin-top: 40px;
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    color: var(--dt-blue);
}

.ds-im h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 30px;
}

.ds-im ul {
    padding-left: 15px;
}

.ds-im a {
    color: var(--dt-blue);
	word-break: break-all;
}

#lay-video-intro {
    padding: 280px 150px 260px 150px;
	position: relative;
	overflow: visible;
	color: white;
	overflow-x: clip;
}

#lay-intro{
    background-color: var(--dt-darkblue);	
	color: white;
	padding-top: 215px;
	position: relative;
    margin-bottom: 280px;
}

#lay-info{
	padding-top: 120px;
	overflow-x: clip;
}

#lay-info-second{
	margin-bottom: 120px;
	position: relative;	
    padding-bottom: 100px;
	overflow-x: clip;
}

#lay-services{
	padding-top: 120px;
	padding-bottom: 120px;
	position: relative;
}

#lay-products{
	margin-top: 120px;
	margin-bottom: 120px;
	padding-top: 240px;
	padding-bottom: 240px;
	position: relative;
    background-color: var(--dt-darkblue);	
	color: white;
}

#lay-quality{
	padding-top: 120px;
	padding-bottom: 120px;
	position: relative;
	overflow-x: clip;
}

#lay-contact{
	padding-top: 120px;
	padding-bottom: 120px;
	position: relative;
	overflow-x: clip;
}

#lay-jobs{
	padding-top: 120px;
	padding-bottom: 120px;
	position: relative;
}

#lay-social{
	padding-top: 120px;
	overflow-x: clip;
}

#lay-dsim {
    padding-top: 300px;
    padding-bottom: 250px;
}

#lay-single-jobs{
	padding-top: 250px;
	padding-bottom: 200px;
}

.video-section__media{
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

.video-section__bg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-section-overlay{
	position: absolute;
	inset: 0;
	/* background: rgba(0, 0, 0, 0.35); */
	z-index: 2;
	pointer-events: none;
}

.video-section-content-wrap{
	position: relative;
	display: inline-block;
	z-index: auto;
}

.video-section-content{
	--cut: 95px;
	--border-width: 1px;
	--border-color: #fff;

	position: relative;
	z-index: 4;
	border: var(--border-width) solid var(--border-color);
	padding: 50px;
	display: inline-block;

	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--cut)),
		calc(100% - var(--cut)) 100%,
		0 100%
	);
}

.video-section-content::after{
	content: "";
	position: absolute;
	right: -10px;
	bottom: 97.5px;
	width: 200px;
	height: 6px;
	background: var(--border-color);
	transform: rotate(-45deg);
	transform-origin: right center;
	pointer-events: none;
}

.video-section-content h2{
	max-width: 730px;
	margin-bottom: 0px;
}

.fake-diagonal-background{
	position: absolute;
	height: 5000px;
	width: 5000px;
	bottom: 0;
	right: -1370px;
	z-index: 3;
	transform: rotate(45deg);
	pointer-events: none;

	background: linear-gradient(
		to bottom,
		rgb(33 48 79 / 100%) 0%,
		rgb(33 48 79 / 100%) 65%,
		rgb(33 48 79 / 0%) 90%
	);

	mix-blend-mode: multiply;
}

.headline-box{
	display: inline-block;
	padding: 30px;
	padding-right: 50px;
	position: relative;
	z-index: 10;
	margin-bottom: 60px;
	
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 47px),
		calc(100% - 47px) 100%,
		0 100%
	);
}

.headline-box-white{
	background-color: white;
	color: var(--dt-blue);	
}

.headline-box-blue{
	background-color: var(--dt-blue);
	color: white;	
}

.location-nav {
    position: absolute;
    left: 0;
    top: 215px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 20px;
    width: calc((100vw - var(--container-size)) / 2 + (var(--container-size) / 12) );
    pointer-events: none;
    writing-mode: vertical-lr;
	transform: rotate(180deg);
    display: flex;
    align-items: center;
}

#lay-products .location-nav {
	color: #FFFFFF;
}

#lines-first {
    overflow: visible;
    width: 283px;
    position: absolute;
    top: -130px;
    right: 0;
    z-index: 5;
}

#lines-first * {
	stroke: var(--dt-yellow);
	stroke-width: var(--stroke-width);
}

.fact-box-spacer{
	height: 175px;
}

.fact-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px 15px;
	font-size: 20px;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: -150px;
	
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 40px),
		calc(100% - 40px) 100%,
		0 100%
	);
	
	background: #21304f;
	background: -webkit-linear-gradient(315deg, #21304f 4.091%, #004287 100%);
	background: -moz-linear-gradient(315deg, #21304f 4.091%, #004287 100%);
	background: -o-linear-gradient(315deg, #21304f 4.091%, #004287 100%);
	background: linear-gradient(315deg, #21304f 4.091%, #004287 100%);
}

.extra-margin {
	margin-top: 60px;
}

.box-number {
    font-weight: 100;
    font-size: 80px;
    display: block;
    line-height: 0.8;
	margin-bottom: 40px;
}

.word-break-lines {
	display: inline-block;
	width: min-content;
}

.center-headline-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

.center-headline-wrap > div {
	flex: 1;
	height: var(--stroke-width);
	background: var(--dt-yellow);
	position: relative;
}

.center-headline-wrap > h2 {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	white-space: nowrap;
	padding: 0 100px;
	text-align: center;
	color: var(--dt-blue);
}

.center-headline-wrap > div span {
    width: 42px;
    height: 42px;
    border: var(--stroke-width) solid var(--dt-yellow);
    background-color: white;
    display: block;
    position: absolute;
    border-radius: 100px;
    top: 50%;
    transform: translateY(-50%);
}

.circle-right span{
    right: 0;	
}

.social-wrap {
    padding: 0 70px 0 70px;
    position: relative;
}

.fake-social-bg{
	background-color: var(--dt-lightblue);
	width: 100%;
	height: 50%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}

.social-link-bar{
	padding-top: 85px;
	padding-bottom: 40px;
	text-align: center;
}

.social-link-bar a{
	padding: 10px 45px;
	color: var(--dt-blue);
}

.social-link-bar a img{
	width: 30px;
	margin-right: 15px;
}

.location-nav.location-nav-default {
    position: absolute;
    right: 100%;
    left: unset;
    top: 0;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 20px;
    width: calc((100vw - var(--container-size)) / 2 );
    pointer-events: none;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    color: var(--dt-blue);
}

.edge-right-img {
	position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 85px), calc(100% - 85px) 100%, 0 100%);
	width: calc( 100% + (100vw - var(--container-size)) / 2 + 15px );
}

.edge-right-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edge-left-img {
	position: relative;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 85px), calc(100% - 85px) 100%, 0 100%);
	width: calc(100% + (100vw - var(--container-size)) / 2 + 15px);
	margin-left: calc((100vw - var(--container-size)) / 2 * -1 - 15px);
}

.edge-left-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-gradient::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		var(--dt-blue) 0%,
		transparent 50%
	);
	pointer-events: none;
	z-index: 1;
}

.img-deko {
    top: 20px !important;
    left: -117px;
}

.spacer-infos{
	height: 350px;
}

.spacer-infos-2{
	height: 230px;
}

.info-box{
	background-color: var(--dt-lightblue);
	color: var(--dt-blue);
	padding: 50px;
	padding-top: 55px;
	padding-bottom: 100px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%);
	position: relative;
	z-index: 1;
}

.infobox-number {
    font-size: 129px;
    position: absolute;
    font-weight: 100;
    top: -46px;
    right: 50px;
    display: block;
    line-height: 0.8;
    color: var(--dt-blue);
    z-index: 50;
}

.info-center-headline{
	padding-top: 230px;
	padding-bottom: 150px;
}

.info-box-2-spacer{
	height: 170px;
}

.infobox-number-2{
    top: calc(-46px + 170px);	
}

.fake-bg-info {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 275px;
    top: 0;
    left: 0;
    z-index: 0;
}

#lines-box-1 {
    overflow: visible;
    width: 283px;
    z-index: 5;
    stroke-width: var(--stroke-width);
    stroke: var(--dt-yellow);
    margin-left: auto;
    display: block;
    transform: translate(40px, -40px);
}

#lines-box-2 {
	width: 283px;
    z-index: 1;
    stroke-width: var(--stroke-width);
    stroke: var(--dt-yellow);
    transform: translate(0px, 0px) scaleY(-1);
    position: absolute;
    right: -25px;
    top: 0;
}

#lines-box-3 {
    overflow: visible;
    width: 41px;
    z-index: 5;
    stroke-width: var(--stroke-width);
    stroke: var(--dt-yellow);
    margin-left: 50%;
    display: block;
    transform: translate(-50%, 0px);
}

#lines-info {
    overflow: visible;
    width: 283px;
    top: -117px !important;
    left: unset;
    right: -130px;
    position: absolute;
    stroke-width: var(--stroke-width);
    stroke: var(--dt-yellow);
    transform: rotate(180deg);
    z-index: 11;
}

#lines-shield {
    overflow: visible;
    width: 358px;
    top: -112px;
    right: -155px;
    z-index: 5;
    stroke-width: var(--stroke-width);
    stroke: var(--dt-yellow);
    position: absolute;
}

.service-entry{
	display: flex;
	align-items: center;
	margin-bottom: 25px;
    padding-left: 117px;
}

.service-entry:nth-child(2){
	margin-left: -80px;
}

.service-entry-text{
	border: var(--stroke-width) solid var(--dt-yellow);	
    text-transform: uppercase;
    font-weight: 900;
    font-size: 18px;
    color: var(--dt-blue);
	padding: 15px 25px;
}

.service-entry:nth-last-child(1 of .service-entry) {
	margin-bottom: 0;
}

.service-entry-line{
	height: var(--stroke-width);
	background-color: var(--dt-yellow);
	width: 50px;
	flex: 0 0 50px;
}

.service-entry:nth-child(2) .service-entry-line{
	width: 130px;
	flex: 0 0 130px;
}

.service-entry-circle{
	border: var(--stroke-width) solid var(--dt-yellow);	
	width: 42px;
	height: 42px;
	background-color: white;
	border-radius: 100px;
	flex: 0 0 42px;
}

.service-connector {
    height: calc(100% - 96px);
    width: var(--stroke-width);
    background-color: var(--dt-yellow);
    position: absolute;
    top: 48px;
    left: 152px;
    z-index: -1;
}

.triangle {
    position: absolute;
    overflow: hidden;
    height: 100px;
    width: 100px;
    bottom: 0;
    right: 0;
}

.triangle::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 90px 90px;
	border-color: transparent transparent #fff transparent;
}

.quality-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 200px;
	row-gap: 75px;
}

.quality-entry {
	flex: 0 0 calc(100% / 3);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: left;
}

.quality-entry a{
    display: flex;
    align-items: center;
}

.quality-entry a:hover{
    text-decoration: none;
	transform: scale(1.05);
}

.quality-icon {
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 110px;
	margin-bottom: 0;
}

.quality-icon img {
	max-height: 97px;
	max-width: 85px;
	width: auto;
	height: auto;
	display: block;
}

.quality-entry-text {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 20px;
    color: var(--dt-blue);
	padding-left: 30px;
}

.graph-wrapper {
    position: relative;
    z-index: 13;
}

.graph-wrapper svg {
	display: block;
	width: 100%;
	height: auto;
}

.year-anchor {
	position: absolute;
	width: 0;
	height: 0;
}

.year-rotator {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: rotate(-90deg);
	transform-origin: left bottom;
}

.year-label {
	display: block;
	/* color: yellow; */
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;

	/*
	 * Zentriert die Schrifthöhe über dem Ankerpunkt.
	 * Der untere Endpunkt bleibt dabei unverändert.
	 */
	transform: translateY(50%);
}

#year-2000 {
	left: 16.35%;
	top: 28.77%;
}

#year-2011 {
    left: 28.85%;
    top: 21.2%;
}

#year-2018 {
    left: 43.0%;
    top: 30.34%;
}

#year-2021 {
    left: 62.4%;
    top: 7.82%;
}

#year-2025 {
    left: 88.2%;
    top: 8.37%;
}

.graph-snake{
	stroke: var(--dt-yellow);
	stroke-width: var(--stroke-width);	
}

.graph-label {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	/* color: yellow; */
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.graph-label::before,
.graph-label::after {
	content: "";
	display: block;
	width: 35px;
	height: 1px;
	background: currentColor;
}

#chronologie-label {
	left: 23.5%;
	top: 90.2%;
}

.graph-label sup {
	margin-left: 3px;
}

.graph-hotspot {
	position: absolute;
	z-index: 5;
	width: 0;
	height: 0;
}

.graph-hotspot__button {
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.graph-hotspot__button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0);
	transform: translate(-50%, -50%);
	transition:
		background .3s ease,
		box-shadow .3s ease;
}

.graph-hotspot:hover .graph-hotspot__button::before,
.graph-hotspot:focus-within .graph-hotspot__button::before {
	background: rgba(255, 255, 255, .15);
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .08);
}

.graph-tooltip {
	position: absolute;
	left: 0;
	bottom: 24px;
	width: 280px;
	padding: 28px;
	background:
		linear-gradient(
			145deg,
			#b7e900 0%,
			#5b9f33 32%,
			#0054a3 78%
		);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition:
		opacity .3s ease,
		visibility .3s ease,
		transform .3s ease;
	z-index: 5;
}

.graph-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: 10px solid transparent;
	border-top-color: #0054a3;
	transform: translateX(-50%);
}

.graph-tooltip__year {
	margin-bottom: 20px;
	font-size: 54px;
	font-weight: 300;
	line-height: 1;
}

.graph-tooltip h3 {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.25;
	text-transform: uppercase;
}

.graph-tooltip p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.graph-hotspot:hover .graph-tooltip,
.graph-hotspot:focus-within .graph-tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.graph-point-svg {
	fill: #fff;
	transition: fill .3s ease;
}

.graph-wrapper:has(#hotspot-2000:hover) #point-2000,
.graph-wrapper:has(#hotspot-2000:focus-within) #point-2000,

.graph-wrapper:has(#hotspot-2011:hover) #point-2011,
.graph-wrapper:has(#hotspot-2011:focus-within) #point-2011,

.graph-wrapper:has(#hotspot-2018:hover) #point-2018,
.graph-wrapper:has(#hotspot-2018:focus-within) #point-2018,

.graph-wrapper:has(#hotspot-2021:hover) #point-2021,
.graph-wrapper:has(#hotspot-2021:focus-within) #point-2021,

.graph-wrapper:has(#hotspot-2025:hover) #point-2025,
.graph-wrapper:has(#hotspot-2025:focus-within) #point-2025 {
	fill: var(--dt-yellow);
}

.graph-hotspot--right .graph-tooltip {
	right: 0;
	left: auto;
	margin-right: -18px;
	transform: translate(0, 12px);
}

.graph-hotspot--right:hover .graph-tooltip,
.graph-hotspot--right:focus-within .graph-tooltip {
	transform: translate(0, 0);
}

.graph-hotspot--right .graph-tooltip::after {
	right: 0;
	left: auto;
}

/* Tooltip links ausrichten */
.graph-hotspot--left .graph-tooltip {
    left: 0;
    right: auto;
    margin-left: -18px;
    transform: translate(0, 12px);
}

.graph-hotspot--left:hover .graph-tooltip,
.graph-hotspot--left:focus-within .graph-tooltip {
    transform: translate(0, 0);
}

/* Pfeil am Hotspot ausrichten */
.graph-hotspot--left .graph-tooltip::after {
    left: 18px;
    right: auto;
    transform: translateX(-50%);
}

#hotspot-2000 {
    left: 14.67%;
    top: 43.46%;
}

#hotspot-2011 {
	left: 27.51%;
	top: 33.47%;
}

#hotspot-2018 {
	left: 40.02%;
	top: 45.28%;
}

#hotspot-2021 {
	left: 59.80%;
	top: 31.04%;
}

#hotspot-2025 {
	left: 85.42%;
	top: 34.75%;
}

#materialkosten-label {
	left: 5.7%;
	top: 49%;
}

.graph-label--vertical {
	transform: translate(-50%, -50%) rotate(-90deg);
}

.graph-label::before,
.graph-label::after {
	content: "";
	display: block;
	width: 35px;
	height: 1px;
	background: currentColor;
}

#einstein {
    position: absolute;
    opacity: 0.1;
    width: calc(100% - 300px);
    left: 150px;
    transform: translateY(-65px);
}

.form-wrap{
	background-color: var(--dt-lightblue);
	padding: 70px;
}

#lay-contact h2{
	margin-bottom: 40px;
}

#lay-contact .edge-right-img{
	width: calc(100% + (100vw - var(--container-size)) / 2 + 15px + 70px);
	margin-bottom: 100px;
}

.contact-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 30px;
}

.contact-form-field--full {
	grid-column: 1 / -1;
}

.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 32px;
	border: 1px solid var(--dt-blue);
	border-radius: 0;
	outline: none;
	background: transparent;
	color: var(--dt-blue);
	font: inherit;
	box-sizing: border-box;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"] {
	height: 74px;
}

.wpcf7 textarea {
	height: 210px;
	min-height: 210px;
	padding-top: 24px;
	padding-bottom: 24px;
	resize: vertical;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--dt-blue);
	opacity: 1;
}

.contact-form-footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 30px;
	margin-top: 40px;
}

.contact-form-submit {
	position: relative;
	width: 100%;
	max-width: 605px;
	overflow: hidden;
}

.contact-form-submit::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 60px;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}

.contact-form-submit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 51px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	pointer-events: none;
	z-index: 2;
}

.wpcf7 .contact-form-submit input[type="submit"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 30px 15px 115px;
	border: 0;
	border-radius: 0;
	background-color: var(--dt-blue);
	background-image: linear-gradient(
		90deg,
		var(--dt-blue) 0%,
		var(--dt-blue) 50%,
		var(--dt-yellow) 100%
	);
	background-size: 200% 100%;
	background-position: right center;
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	transition: background-position 0.3s ease-in-out;
}

.wpcf7 .contact-form-submit:hover input[type="submit"] {
	background-position: left center;
}

.contact-form-notice {
	color: var(--dt-blue);
	font-size: 14px;
	line-height: 1.45;
}

.contact-form-notice a {
	color: inherit;
	text-decoration: none;
}

.contact-form-notice a:hover {
	text-decoration: underline;
}

.wpcf7 .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 20px;
	margin: 0;
	transform: translateY(-50%);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.3;
}

.wpcf7 .wpcf7-response-output {
	margin: 25px 0 0;
	padding: 15px 20px;
	border-width: 1px;
	font-size: 14px;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus,
.wpcf7 input[type="text"]:not(:placeholder-shown),
.wpcf7 input[type="tel"]:not(:placeholder-shown),
.wpcf7 input[type="email"]:not(:placeholder-shown),
.wpcf7 textarea:not(:placeholder-shown) {
	background-color: #fff;
}

.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 textarea:hover,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus,
.wpcf7 input[type="text"]:not(:placeholder-shown),
.wpcf7 input[type="tel"]:not(:placeholder-shown),
.wpcf7 input[type="email"]:not(:placeholder-shown),
.wpcf7 textarea:not(:placeholder-shown) {
	background-color: #fff;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	transition: background-color 0.3s ease-in-out;
}

.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:hover,
.wpcf7 input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: var(--dt-blue);
}

.wpcf7 form.sent *:not(
    :has(.wpcf7-response-output),
    .wpcf7-response-output,
    .wpcf7-response-output *
) {
    display: none !important;
}

.wpcf7 form .wpcf7-response-output {
    padding: 20px 25px;
    text-align: center;
    font-weight: bold;
}


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

	.contact-form-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.contact-form-field--full {
		grid-column: auto;
	}

	.contact-form-footer {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.contact-form-submit {
		max-width: none;
	}

}

.job-list {
    position: relative;
    margin-top: 100px;
}

.job-list .service-entry {
    padding-left: 0px;
}

.job-list .service-entry:nth-child(2) {
    margin-left: 0px;
}

.job-list .service-entry .service-entry-text {
    background-color: white;
}

.job-list .service-entry:nth-child(2) .service-entry-line {
    width: 50px;
    flex: 0 0 50px;
}

.job-list .service-connector {
    left: 21px;
}

a.service-entry:hover{
	text-decoration: none;
}

a.service-entry:hover .service-entry-text{
    transform: translatex(30px);
}

.job-list .service-entry-text{
	background-color: transparent;
}

.job-list .fake-line{
	height: var(--stroke-width);
	background-color: var(--dt-yellow);
	width: 100px;
}

#lay-single-jobs :is(h1, h2, h3, h4, h5, h6) {
	color: var(--dt-blue);
}

#lay-single-jobs h1{
	margin-bottom: 30px;
}

#lay-single-jobs h2{
	margin-top: 50px;
	margin-bottom: 10px;
}

#lay-single-jobs .form-wrap h2{
	margin-top: 0px;
}

.job-outro{
	margin-top: 50px;
	margin-bottom: 150px;
}

.job-section ul {
    padding-left: 22px;
}

.job-section ul li {
    list-style: none;
    margin-bottom: 8px;
}

.job-section ul li:before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 100px;
    border: 3px solid var(--dt-yellow);
    display: inline-block;
    margin-right: 10px;
    margin-left: -23px;
    transform: translateY(1px);
}

.sideflag {
    z-index: 15;
    position: fixed;
    top: 250px;
    right: 0;
    padding: 15px 13px;
    background: var(--dt-blue);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
	text-transform: uppercase;
	font-weight: 900;
	font-size: 14px;
}

.sideflag:hover {
	color: white;
	padding: 15px 15px;
	text-decoration: none;
}





/* ------------------------------------------------ FAQ ------------------------------------------------ */

.card {
    border: 0;
    border-radius: 0;
	background-color: transparent;
	margin-bottom: 15px;
}

.card button{
    display: block;
	background-color: transparent;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #FFFFFF;
	border-top: 0;
	border-left: 0;
	border-right: 0;
    padding: 20px 60px 20px 0px;
    font-family: var(--font-primary);
    letter-spacing: var(--letter-spacing);
	font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
	color: #ffffff;
	position: relative;
}

.card button:after {
	content: '»';
	position: absolute;
	right: 20px;
	top: 50%;
	transition: transform .3s ease-in-out;
	font-style: normal !important;
}

/* geöffnet */

.card button[aria-expanded="true"] {
	color: var(--dt-yellow);
	border-bottom: 1px solid var(--dt-yellow);
}

.card button[aria-expanded="true"]:after {
    transform: translateY(calc(-50% - 3px)) translateX(-8px) rotate(-90deg);
	color: var(--dt-yellow);
}

/* geschlossen */
.card button[aria-expanded="false"]:after {
	transform: translateY(calc(-50% - -1px)) rotate(90deg);
}

.card-body {
    padding: 30px 0;
    line-height: 1.5;
	color: var(--dt-yellow);
}

.card-body strong {
	text-transform: uppercase;
	color: var(--dt-yellow);
}

.card-body ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.card-body ul li {
    padding: 10px 0;
    border-bottom: 1px solid var(--dt-yellow);
	color: var(--dt-yellow);
}

/* Mobil zweispaltig */
@media (max-width: 992px) {
    .card-body ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.caption {
    margin-top: 15px;
    font-size: 14px;
    width: calc(100% + (100vw - var(--container-size)) / 2 + 15px);
    padding-right: 50px;
	padding-left: 50px;
    font-style: italic;
    position: relative;
    z-index: 6;
}









/* ------------------------------------------------ MOBILE ------------------------------------------------ */

@media screen and (max-width: 767.98px) { 
	
	:root {
		--container-size: 100%;
	}
	
	.container{
		padding-left: 40px;
		padding-right: 40px;
	}
	
	.year-label {
		font-size: 13px;
	}
	
	.navbar {
		padding: 40px 40px 0 40px;
	}
	
	.navbar-collapse {
		position: absolute;
		top: calc(100% + 40px);
		left: 0;
		width: calc(100% - 80px);
		z-index: 1000;
		background-color: var(--dt-blue);
		margin: 0 40px;
	}

	.navbar-nav {
		padding: 30px;
	}
	
	#lay-video-intro {
		padding: 200px 40px 250px 40px;
	}
	
	h1 {
		font-size: 35px;
	}
	
	#lay-intro {
		padding-top: 200px;
	    margin-bottom: 150px;
	}
	
	.location-nav {
		top: 200px;
		font-size: 12px;
	}
	
	.location-nav.location-nav-default {
		right: unset;
		left: 0;
		font-size: 12px;
		width: 40px;
	}
	
	.fact-box {
		margin-bottom: -30px;
	}
	
	.box-number {
		font-size: 54px;
	}
	
	.fact-box-spacer {
		height: 100px;
	}
	
	.word-break-lines {
		hyphens: auto;
		hyphenate-limit-chars: 10 5 5;
	}
	
	#lay-intro .row .col-6:nth-last-child(2),
	#lay-intro .row .col-6:last-child {
		margin-bottom: -100px;
	}
	
    .edge-right-img {
        margin-top: 40px;
        width: calc(100% + 40px);
    }
	
	.img-deko {
        left: -136px;
        transform: scaleX(-1);
	}
	
	.info-center-headline {
		padding-top: 150px;
	}
	
	.center-headline-wrap {
		display: block;
	}
	
	#lay-contact .edge-right-img {
		width: calc(100% + (100vw - var(--container-size)) / 2 + 15px);
	}
	
	.center-headline-wrap .circle-right {
		margin-right: calc(50% - 21px);
		margin-bottom: 50px;
	}
	
    .center-headline-wrap .circle-left {
        margin-left: calc(50% - 21px);
        margin-top: 50px;
    }
	
	#lines-box-2, #lines-box-1{
		display: none;
	}
	
	.info-box-2-spacer {
		height: 0px;
	}
	
	.info-box {
		margin-bottom: 40px;
	}
	
	.infobox-number {
		font-size: 60px;
		top: 25px !important;
		right: 40px;
	}
	
	#lines-box-3 {
		margin-top: -40px;
	}
	
	.spacer-infos {
		height: 100px;
	}

	.spacer-infos-2 {
		height: 100px;
	}
	
	#lay-info-second .edge-left-img{
		margin-bottom: 40px;
	}
	
	#lay-info-second #lines-info {
		top: calc(100% - 225px) !important;
		left: -245px;
		right: unset;
	}
	
	#chronologie-label {
		left: 40px;
		top: 100%;
		font-size: 12px;
		transform: translate(0px, 0px);
	}
	
    #materialkosten-label {
        font-size: 12px;
        left: 20px;
    }
	
	#lay-info-second {
		margin-bottom: 75px;
	}
	
	#lay-services {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	
	.service-entry {
		padding-left: 0;
	}
	
	.service-connector {
		left: 35px;
	}
	
	.services-wrap{
		margin-top: 100px;
	}
	
	.service-entry:nth-child(2) .service-entry-line {
		width: 330px;
		flex: 0 0 330px;
	}
	
	.service-entry:nth-child(2) {
		margin-left: -280px;
	}
	
	#lay-products {
		margin-top: 75px;
		margin-bottom: 75px;
		padding-top: 150px;
		padding-bottom: 150px;
	}
	
	.social-link-bar a {
		display: block;
	}
	
	.center-headline-wrap > h2{
		white-space: normal;
	}
	
	#lay-quality {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	
	#lines-shield {
		width: 168px;
		top: -80px;
		right: -40px;
		stroke-width: 5;
	}
	
	#lay-quality .edge-left-img {
		margin-bottom: 40px;
	}
	
    .quality-wrap {
        margin-top: 100px;
        flex-direction: column;
        align-items: flex-start;
		row-gap: 40px;
    }
	
	#lay-contact {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	
	.quality-icon img {
		max-height: 77px;
		max-width: 65px;
	}
	
	.form-wrap {
		padding: 50px;
	}
	
	#lay-jobs {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	
	.job-list {
		position: relative;
		margin-top: 75px;
		margin-bottom: 75px;
	}
	
	.footer-logo {
		margin-bottom: 30px;
		margin-top: 30px;
		width: 100%;
	}
	
	.dwg {
		opacity: 0.6;
		margin-top: 40px;
		margin-bottom: 15px;
		text-align: left;
	}
	
	.law {
		margin: 0;
		align-content: flex-start;
	}
	
	body:not(.home) .nav-link::before{
		border-top: 2px solid white;
		border-right: 2px solid white;
	}
	
	body:not(.home) .nav-link {
		color: white;
	}
	
	body:not(.home) .nav-link::after {
		background: white;
	}
	
	.graph-wrapper {
		margin-top: 80px;
		margin-bottom: 30px;
	}
	
	#faqAccordion {
		margin-top: 80px;
	}
	
}
/* ------------------------------------------------ Extra small devices ------------------------------------------------ */

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

	
}





/* ------------------------------------------------ TABLET ------------------------------------------------ */

@media (min-width: 768px) and (max-width: 991.98px) { 
	
	:root {
		--container-size: 720px;
	}
	
	.navbar {
		padding: 50px 50px 0 50px;
		display: block;
	}
	
	.navbar-collapse {
		position: absolute;
		top: calc(100% + 40px);
		left: 0;
		width: calc(100% - 80px);
		z-index: 1000;
		background-color: var(--dt-blue);
		margin: 0 40px;
	}

	.navbar-nav {
		padding: 30px;
		display: block;
		text-align: center;
	}
	
	#lay-video-intro {
		padding: 280px 100px 260px 100px;
	}
	
	.nav-item {
		display: inline-block;
	}
	
	.box-number {
		font-size: 50px;
	}
	
	.word-break-lines {
		hyphens: auto;
		hyphenate-limit-chars: 10 5 5;
	}
	
	.info-box {
		hyphens: auto;
		hyphenate-limit-chars: 10 5 5;
		padding: 30px;
	}
	
	.fact-box {
		font-size: 18px;
	}
	
	.service-entry {
		hyphens: auto;
		hyphenate-limit-chars: 10 5 5;
	}
	
	.location-nav.location-nav-default {
		right: calc(100% - 15px);
		width: calc((100vw - var(--container-size)) / 2 - -15px);
	}
	
	#lay-intro {
		margin-bottom: 200px;
	}
	
	.img-deko {
		top: -50px !important;
	}
	
	#lines-box-2 {
		right: -115px;
	}
	
	.infobox-number {
		font-size: 79px;
		top: -28px;
		right: 30px;
	}
	
	.infobox-number-2 {
		top: calc(-30px + 170px) !important;
	}
	
	.spacer-infos {
		height: 300px;
	}
	
	#lay-info-second #lines-info {
		right: -95px;
	}

	.graph-wrapper {
		margin-top: 100px;
	}
	
	#lay-services {
    	padding-top: 100px;
		padding-bottom: 100px;
	}
	
	#lay-products {
		margin-top: 100px;
		margin-bottom: 100px;
		padding-top: 200px;
		padding-bottom: 200px;
	}
	
	#lines-shield {
		width: 200px;
		stroke-width: 5px;
	    right: -85px;
	}
	
	.wpcf7{
		margin-top: 100px;
	}
	
	.law {
		margin-top: 30px;
	}
	
	body:not(.home) .nav-link::before{
		border-top: 2px solid white;
		border-right: 2px solid white;
	}
	
	body:not(.home) .nav-link {
		color: white;
	}
	
	body:not(.home) .nav-link::after {
		background: white;
	}
	
}






/* ------------------------------------------------ Small Computers ------------------------------------------------ */

@media (min-width: 992px) and (max-width: 1199.98px) { 
	
	:root {
		--container-size: 960px;
	}
	
	.nav-link {
        margin-right: 30px;
    }
	
	.nav-link::after {
		display: none;
	}
	
	.nav-link::before {
		left: 100%;
	}
	
	.navbar {
		padding: 50px 50px 0 50px;
	}
	
	.location-nav.location-nav-default {
		right: calc(100% - 15px);
		width: calc((100vw - var(--container-size)) / 2 - -15px);
	}
	
}