@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: local('Fira Sans Italic'), local('FiraSans-Italic'),
		url('/shared/fonts/fira-sans-v9-latin-italic.woff2') format('woff2'),
		url('/shared/fonts/fira-sans-v9-latin-italic.woff') format('woff');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Fira Sans Regular'), local('FiraSans-Regular'),
		url('/shared/fonts/fira-sans-v9-latin-regular.woff2') format('woff2'),
		url('/shared/fonts/fira-sans-v9-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: local('Fira Sans Medium'), local('FiraSans-Medium'),
		url('/shared/fonts/fira-sans-v9-latin-500.woff2') format('woff2'),
		url('/shared/fonts/fira-sans-v9-latin-500.woff') format('woff');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Fira Sans Bold'), local('FiraSans-Bold'),
		url('/shared/fonts/fira-sans-v9-latin-700.woff2') format('woff2'),
		url('/shared/fonts/fira-sans-v9-latin-700.woff') format('woff');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: local('Fira Sans Bold Italic'), local('FiraSans-BoldItalic'),
		url('/shared/fonts/fira-sans-v9-latin-700italic.woff2') format('woff2'),
		url('/shared/fonts/fira-sans-v9-latin-700italic.woff') format('woff');
}
@font-face {
	font-family: 'Fira Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Fira Mono Regular'), local('FiraMono-Regular'),
		url('/shared/fonts/fira-mono-v7-latin-regular.woff2') format('woff2'),
		url('/shared/fonts/fira-mono-v7-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Fira Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: local('Fira Mono Medium'), local('FiraMono-Medium'),
		url('/shared/fonts/fira-mono-v7-latin-500.woff2') format('woff2'),
		url('/shared/fonts/fira-mono-v7-latin-500.woff') format('woff');
}
@font-face {
	font-family: 'Fira Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Fira Mono Bold'), local('FiraMono-Bold'),
		url('/shared/fonts/fira-mono-v7-latin-700.woff2') format('woff2'),
		url('/shared/fonts/fira-mono-v7-latin-700.woff') format('woff');
}

html,
body {
	width: 100%;
	height: 100%;
	font-family: 'Fira Sans', sans-serif;
	text-decoration: none;
	color: #3a3a39;
	line-height:1.65;
}

#body-startseite {
	overflow: hidden;
}

.white-popup {
	position: relative;
	background: #fff;
	padding: 40px;
	width: auto;
	max-width: 850px;
	margin: 20px auto;
}
.mfp-wrap {
	overflow: auto !important;
}


/*p,
a,
h2,
h3,
h4,
h5,
h6,
li {
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
color: #3a3a39;
}*/
p {
	margin-bottom:1.5rem;
}
p.lead {
	font-weight:400;
	margin-bottom:2.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6{
	color: #90224f;
}

h1,
.mono-font{
	font-family: 'Fira Mono', monospace;
}

h1,.h1{
	font-weight: 700;
	font-size: 2rem;
	margin-bottom: 2rem;
}
h2,.h2{
	font-weight: 500;
	font-size: 1.25rem;
	padding-top: 1.25rem;
	margin-bottom: 0.75rem;
}
h3,.h3{
	font-weight: 500;
	font-size: 1.25rem;
}
h4,.h4{
	font-weight: 500;
	font-size: 1.1rem;
}
h5,.h5{
	font-weight: 500;
	font-size: 1.1rem;
}
.text-hervorgehoben{
	color: #90224f;
	margin: 0.5rem 0 0.75rem 0;
}
hr {
	border-color:#90224f;
	margin:3rem 0;
}
a,
a:hover,
a:focus,
a::after,
a::before {
	color: #90224f;
	text-decoration: none;
}
a,
a::after,
a::before {
	transition-duration: 0.5s;
}

main p a,
#popup p a,
main li a {
	border-bottom:1px solid #90224f;
	transition:border .2s;
}
main p a:hover,
main p a:focus,
#popup p a:hover,
#popup p a:focus,
main li a:hover,
main li a:focus {
	border-color:transparent;
}
main img {
	margin-bottom:1.5rem;
}
figure {
	text-align:center;
}
.unstyled-list {
	list-style:none;
}

#open-source-projects h3 {
	font-size:1.75rem;
}
#open-source-projects h4 {
	margin-bottom:0;
	font-weight:700;
	font-size:1.25rem;
	line-height:1.5;
}
#open-source-projects img {
	border:2px solid #932854;
	padding:6px;
}

ul{
	padding-left: 0;
}
ul li{
	margin-left: 19px;
	margin-bottom:.75rem;
}
ul li::before {
	/*content: "-";*/
	font-family: 'Fira Sans', sans-serif;
	padding-right: 5px;
	font-weight: bold;
	margin-left: -19px;
}
ul.unstyled-list li::before {
	content: "";
	padding-right: 0;
}
.schwarz{
	color: #3a3a39;
}
.rot {
	color: #90224f;
}
.weiss {
	color: #efe1d2;
}
svg .rot {
	fill: #90224f;
}
svg .weiss {
	fill: #efe1d2;
}

#content {
	background-image: url("/media/startseite/hintergrund.jpg");
	/* margin: auto; */
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	font-size: 16px;
	width: 2560px;
	height: 1440px;
}

#erweiterung {
	background-image: url(/media/startseite/hintergrund-erweiterung.jpg);
	background-position: left;
	background-size: cover;
	background-repeat: repeat-x;
	display: block;
	height: 100vh;
}

.img-arrangement {
	position: absolute;
	transform-origin: top left;
}
.hover-underline{
	transition-duration: 0.5s;
	border-bottom: 1px solid transparent;
}
.hover-underline:hover{
	border-bottom: 1px solid #90224f;
}

/*-------------NAVIGATION--------------*/
header#startseite,
#nav-unterseiten{
	position: fixed;
	z-index: 200;
	right: 0px;
}

#open-sidenav {
	position: absolute;
	z-index: 1;
	right: 0px;
	width: 50px;
	height: 30px;
	margin: 5px;
	transform: scale(0.6)
}

#open-sidenav button {
	position: absolute;
	opacity: 0;
	width: 90px;
	height: 70px;
	top: -20px;
	left: -20px;
	z-index: 2;
}

#open-sidenav button:hover {
	cursor: pointer;
}

#open-sidenav button.checked~.top,
#open-sidenav button.checked~.bottom {
	top: 50%;
}

#open-sidenav button.checked~.top {
	transform: rotate(45deg);
}

#open-sidenav button.checked~.bottom {
	transform: rotate(-45deg);
}

#open-sidenav button.checked~.middle {
	filter: alpha(opacity=0);
	opacity: 0;
}

#open-sidenav span {
	position: absolute;
	display: block;
	width: 50px;
	height: 5px;
	background-color: #90224f;
	transition: all 0.5s;
}

#open-sidenav .top {
	top: 0%;
}

#open-sidenav .middle {
	top: 40%;
}

#open-sidenav .bottom {
	top: 80%;
}

#main-nav {
	height: 100vh;
	width: 0px;
	background-color: rgba(0, 0, 0, 0.8);
	padding-top: 90px;
	transition: width 0.5s ease-in-out;
	transform-origin: right center;
}

#main-nav a {
	display: block;
	padding: 8px 8px 8px 32px;
	white-space: nowrap;
	transition: 0.5s;
	font-family: 'Fira Mono', monospace;

	width: auto;
	width: -moz-fit-content;
	width: fit-content;

	text-decoration: none;
	text-align: left;
	font-size: 1rem;
	line-height: 2;
	color: #fff;
}

#main-nav a.active,
#main-nav a:hover,
#main-nav a:focus{
	color: #90224f;
}

.nav-open {
	width: 100vw !important;
}

#language-switch{
	position: absolute;
	padding-left: 32px;
	margin-top: 20px;
}

#language-switch a{
	color: #efe1d2;
	text-transform:uppercase;
}
#language-switch a:first-of-type::after{
	content: "|";
	display: inline;
	color: #efe1d2;
}

#language-switch a.active,
#language-switch a:hover,
#language-switch a:focus{
	color: #90224f;
}

/*----------------------STARTSEITE---------------------*/
/*------------LINKS INKL. STRICHE--------------*/
.link-schrift p.link-text {
	font-size: 1.4em;
	font-weight: 500;
	line-height: 1;
	transition: 0.5s;
	position: absolute;
	margin: 0px;
	font-family: 'Fira Mono', monospace;
}
.link-schrift p.link-text.rot {
	font-weight: 500;
}

.link-schrift a:hover .link-text,
.link-schrift a:focus .link-text {
	transform: scale(1.25);
	transform-origin: bottom center;
	transition-duration: 0.5s;
}

.link-schrift svg.underline {
	height: auto;
	width: auto;
}

.link-schrift svg.underline line {
	fill: none;
	stroke-width: 2;
	stroke-miterlimit: 10;
	transition: 0.5s;
}


#logo-startseite {
	width: 450px;
	height: 235px;
	/*height:203px;*/
	top: 62.5px;
	left: 62.5px;
}

.link-schrift {
	height: 50px;
	z-index: 10;
}

.link-schrift svg {
	stroke: #efe1d2;
}
a:hover svg line.animate,
a:focus svg line.animate {
	transform: scaleX(0);
}
#blog-schrift{
	width: 126px;
	height: 50px;
	top: 1089px;
	left: 438px;
}
#blog-schrift svg {
	stroke: #90224f;
}
#blog-schrift p {
	top: 36%;
	right: 0px;
}
#blog-schrift svg line {
	transform-origin: 30% 3%;
}

#openSource-schrift{
	width: 209px;
	height: 50px;
	top: 343px;
	left: 835px;
}
#openSource-schrift p {
	top: -57.5%;
	right: 0px;
}
#openSource-schrift svg line {
	transform-origin: 18% 100%;
}

#werWirSind-schrift{
	width: 309px;
	height: 50px;
	top: 393px;
	left: 1065px; 
}
#werWirSind-schrift p {
	top: -104.5%;
	right: 0px;
}
#werWirSind-schrift svg line {
	transform-origin: 13% 100%;
}

#wearehiring-schrift{
	width: 260px;
	height: 50px;
	top: 172px;
	left: 1500px;
}
#wearehiring-schrift p {
	top: 36%;
	right: 0px;
}
#wearehiring-schrift svg line{
	transform-origin: 15% 100%;
}

#unsereProdukte-schrift{
	width: 271px;
	height: 87px;
	top: 506px;
	left: 1527px;
}
#unsereProdukte-schrift p {
	top: -57.5%;
	left: 0px;
}
#unsereProdukte-schrift svg line {
	transform-origin: 86% 100%;
}

#wofurWirStehen-schrift{
	width: 277px;
	height: 50px;
	top: 150px;
	left: 2105px;
}
#wofurWirStehen-schrift svg{
	max-height: 57px;
}
#wofurWirStehen-schrift svg line{
	transform-origin: 12.3% 100%;
}
#wofurWirStehen-schrift p {
	top: -104.5%;
	right: 0px;
}

#iot-schrift{
	width: 365px;
	height: 50px;
	top: 870px;
	left: 2097px;
}
#iot-schrift svg line {
	transform-origin: 10.5% 100%;
	stroke: #90224f;
}
#iot-schrift p {
	top: -57.5%;
	right: 0px;
}

#atlassian-schrift{
	width: 250px;
	height: 50px;
	top: 710px;
	left: 940px;
}
#atlassian-schrift p {
	top: -57.5%;
	left: 17.5%;
}
#atlassian-schrift svg line{
	transform-origin: 15% 100%;
}
.neon {
	transform: perspective(700px) rotateY(-40deg) skewY(12.5deg);
	transform: perspective(700px) rotateY(-40deg) skewY(-17deg) scale(.85);
	text-transform: uppercase;
	color: #cbe4fe;
	text-shadow: 0 0 5px #cbe4fe;
	animation: flicker 7s ease-in-out infinite alternate;
	position: absolute;
	left: 35.125%;
	left: 78.6%;
	top: 60.5%;
	top: 82.25%;
}
@keyframes flicker {
	0% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
	}
	5% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}
	10% {
		color: white;
		filter: saturate(200%) hue-rotate(20deg);
		text-shadow: 0 0 5px #cbe4fe, 0 0 10px #cbe4fe, 0 0 15px white;
	}
	15% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}

	30% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}
	30,5% {
		color: white;
		filter: saturate(200%) hue-rotate(20deg);
		text-shadow: 0 0 5px #cbe4fe, 0 0 10px #cbe4fe, 0 0 15px white;
	}
	31% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}

	45% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
	}
	47% {
		color: #deeeff;
		filter: saturate(200%) hue-rotate(10deg);
	}
	49% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
	}

	52% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}
	53% {
		color: white;
		filter: saturate(200%) hue-rotate(20deg);
		text-shadow: 0 0 5px #cbe4fe, 0 0 10px #cbe4fe, 0 0 15px white;
	}
	54% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}

	65% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}
	68% {
		color: white;
		filter: saturate(200%) hue-rotate(20deg);
		text-shadow: 0 0 5px #cbe4fe, 0 0 10px #cbe4fe, 0 0 15px white;
	}
	70% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}

	72% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}
	73% {
		color: white;
		filter: saturate(200%) hue-rotate(20deg);
		text-shadow: 0 0 5px #cbe4fe, 0 0 10px #cbe4fe, 0 0 15px white;
	}
	74% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
		text-shadow: 0 0 5px #cbe4fe;
	}

	90% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
	}
	91% {
		color: #deeeff;
		filter: saturate(200%) hue-rotate(20deg);
	}
	92% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
	}

	95% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
	}
	96% {
		color: #deeeff;
		filter: saturate(200%) hue-rotate(20deg);
	}
	97% {
		color: #cbe4fe;
		filter: saturate(200%) hue-rotate(0deg);
	}
}

/*------------ANIMATIONEN--------------*/

#swipe-icon{
	animation: swipe-icon 2s linear infinite;
	transform-origin: bottom center;
	position: absolute;
	z-index: 200;
	top: calc(80vh - 128px);
	left: calc(50vw - 75px);
}
#swipe-icon > img {
	height: auto;
	width: 100px;
}
#swipe-icon img.ausblenden {
	animation: ausblenden 1s linear 1;
}
@keyframes ausblenden{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
#swipe-icon img.ausgeblendet {
	display:none;
}

#ufo{
	top: 75px;
	left: 1358px;
}
#ufo img{
	animation: Ufo 3s linear 1s infinite;
}

#bildschirm img{
	animation: Bildschirm 4s linear 1s infinite;
}
#bildschirmtext{
	transform: rotate(-6deg);
	animation: Bildschirmtext 4s linear 1s infinite;
	position: absolute;
	left: 70px;
	top: 130px;
	width: 250px;
	height: 120px;
}
#bildschirmtextlaenge{
	display: -webkit-box;
	max-width: 250px;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#satellitenschussel{
	top: 720px;
	left: 300px;
}
#satellitenschussel img {
	transform-origin: 42% 100%;
	animation: satellitenschussel 3s linear 1s infinite;
}

#atom {
	width: 250px;
	height: 250px;
	top: 628px;
	left: 1692px;
}
#atom-huelle {
	position: absolute;
	left: -78px;
	top: -31px;
	z-index: 2;
}
#atom-huelle svg{
	width: 250px;
	height: 250px
}
#atom-center{
	position: absolute;
	left: 38px;
	top: 80px;
	z-index: 1;
}
#atom-center > svg{
	width: 23px;
	height: 26px
}
.atom-animation{
	position: relative;
	z-index: 1;
}

.atom-animation > svg{
	animation: spin 4s infinite linear;
	position: absolute;
	width: 100px;
	height:186px;
}
.atom-animation .atom-punkt{
	fill: #90224f;
	animation: atom-punkt-X 4s infinite ease-in;
	transform: translateX(87%);
	width: 20px;
	height: 20px;
}
.atom-animation .punkt-container {
	animation: atom-punkt-Y 4s infinite cubic-bezier(0.86, 0, 1, 1);
	transform: translateY(92%);
}
#atom-animation-2>svg,
#atom-animation-2 .atom-punkt,
#atom-animation-2 .punkt-container {
	animation-delay: 0.5s;
}
#atom-animation-3>svg,
#atom-animation-3 .atom-punkt,
#atom-animation-3 .punkt-container {
	animation-delay: 1s;
}
#atom-animation-4>svg,
#atom-animation-4 .atom-punkt,
#atom-animation-4 .punkt-container {
	animation-delay: 1.5s;
}

#blitze{
	top: 270px;
	left: 814px;
}
#blitze svg#blitz-1,
#blitze svg#blitz-2 {
	width: 16px;
	transform-origin: bottom center;
	animation: blitz-animation 2s infinite;
}
#blitze svg#blitz-2 {
	width: 15px;
	animation-delay: 0.75s;
}
#blitze #blitz-2-container {
	transform-origin: bottom center;
	transform: rotate(-45deg);
	position: absolute;
	top: 21px;
	left: -29px;
}

#bahnhof-licht {
	width: 295px;
	height: 440px;
	top: 351px;
	left: 1298px;
}
#bahnhof-licht-schein {
	animation: bahnhof-lichter 10s infinite;
	top: -27px;
	left: -31px;
}
#bahnhof-licht-symbol {
	animation: bahnhof-lichter 10s infinite;
	animation-delay: 5s;
	top: 47px;
	left: 41px;
}

#fahrstuhl{
	width: 3px;
	height: 390px;
	top: 356px;
	left: 2038px;
}
#fahrstuhl-hintergrund{
	width: 19px;
	height: 390px;
	top: 85px;
	left: 2px;
	background-color: #bbbbfc;
	position: absolute;
	z-index: 1;
}
#fahrstuhl svg {
	position: absolute;
	transform-origin: top;
	z-index: 2;
	width: 6px;
	top: 70px;
	right: -18px;
	animation: fahrstuhl-fahrt 8s infinite;
}
#fahrstuhl img{
	position: absolute;
	width: 23px;
	height: 546px;
	z-index: 3;
}
#fahrstuhl rect {
	fill: #4c4c66;
}

#sterne{
	top: 473px;
	left: 271px;
	width: 45px;
	height: 66.5px;
}
#sterne_2{
	top: 177px;
	left: 2320px;
	width: 90px;
	height: 123px;
}
.sterne{
	position: absolute;
}
.sterne svg{
	animation: pulse 5s infinite;
}
#sterne svg{
	animation-delay: 2.3s;
}
.sterne svg polygon,
.sterne svg circle,
.sterne svg path{
	fill: #F7ECDC;
}

.sternschnuppen svg{
	width: 445px;
	height: 180px;
}
#sternschnuppe,
#sternschnuppe_2{
	top: 64px;
	left: 687px; 
}
#sternschnuppe_2 .schnuppen-container{
	animation-delay: 1.5s;
}
.schnuppen-container{
	animation: schnuppe 10s infinite;
	transform: translate3d(-1000px, -404px, 0);
}

#wlan{
	width: 33px;
	height: 44px;
	top: 814px;
	left: 784px;
}
#wlan svg path:nth-child(2){
	animation: blink 2s infinite;
}
#wlan svg path:nth-child(3){
	animation: blink2 2s infinite;
}

#planet{
	width: 139px;
	height: 70px;
	top: 426px;
	left: 2294px;
}
#planet svg{
	animation: planet 100s linear infinite;
}

#iss{
	width: 143px;
	height: 143px;
	top: 325px;
	left: 430px;
}
#iss #iss-container svg {
	animation: iss-X 30s infinite cubic-bezier(0, 0, 1, 1);
}
#iss #iss-container {
	animation: iss-Y 30s infinite cubic-bezier(0.57, -0.01, 0.87, 0.59);
}


/*---------Footer-NAV------------*/

nav#footer-nav {
	position: absolute;
	bottom: 1.5rem;
	width: 100vw;
}

nav.footer-nav a {
	color: #efe1d2;
	font-size: 0.75rem;
	padding-right:0;
}

nav.footer-nav a::after {
	content: '';
	width: 50%;
	height: 4px;
	background: #efe1d2;
	position: absolute;
	bottom: -6px;
	left: 15px;
	transition:all .5s;
}

nav#footer-nav a:hover,
nav#footer-nav a:focus {
	color: #efe1d2;
}
nav#footer-nav a:hover::after,
nav#footer-nav a:focus::after {
	opacity:0;
}


nav#footer-nav a:hover::after,
nav#footer-nav #sitemap a:hover,
nav#footer-nav a:focus::after,
nav#footer-nav #sitemap a:focus {
	background: #efe1d2;
}

nav.footer-nav #sitemap{
	display: none;
}

/*-----------KEYFRAMES-------------*/

@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes pulse{40%{transform:scale(1)}50%{transform:scale(0)}60%{transform:scale(1)}}@keyframes blink{0%{opacity:0}39%{opacity:0}40%{opacity:1}100%{opacity:1}}@keyframes blink2{0%{opacity:0}59%{opacity:0}60%{opacity:1}100%{opacity:1}}@keyframes Ufo{0%{margin-top:0}50%{margin-top:10px}100%{margin-top:0}}@keyframes swipe-icon{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}100%{transform:rotate(0deg)}} @keyframes Bildschirm{0%{margin-top:0}50%{margin-top:10px}100%{margin-top:0}} @keyframes Bildschirmtext{0%{margin-top:0}50%{margin-top:10px}100%{margin-top:0}} @keyframes satellitenschussel{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}100%{transform:rotate(0deg)}}@keyframes atom-punkt-X{0%{transform:translateX(87%)}50%{transform:translateX(0)}100%{transform:translateX(87%)}}@keyframes atom-punkt-Y{0%{transform:translateY(92%)}50%{transform:translateY(0)}100%{transform:translateY(92%)}}@keyframes blitz-animation{50%{transform:scale3D(1.4, 1.20, 0)}}@keyframes bahnhof-lichter{00%{opacity:1}15%{opacity:1}17%{opacity:0}20%{opacity:0}22%{opacity:1}30%{opacity:1}32%{opacity:0}34%{opacity:0}36%{opacity:1}41%{opacity:1}42%{opacity:0}43%{opacity:0}44%{opacity:1}80%{opacity:1}83%{opacity:0}87%{opacity:0}100%{opacity:1}}@keyframes fahrstuhl-fahrt{10%{top:70px}50%{top:433px}60%{top:433px}90%{top:70px}100%{top:70px}}@keyframes schnuppe{0%{transform:translate3d(-687px, -404px, 0);opacity:1}100%{transform:translate3d(1425px, 506px, 0);opacity:0}}@keyframes planet{50%{transform:translate3d(-100px, 150px, 0)}}@keyframes iss-X{0%{transform:translateX(-600px)}20%{transform:translateX(-600px)}100%{transform:translateX(350px)}}@keyframes iss-Y{0%{transform:translateY(120px)}20%{transform:translateY(120px)}100%{transform:translateY(-480px)}}@keyframes ufo-man{0%{transform:scale(0);opacity:0}10%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}80%{transform:scale(0)}81%{opacity:0}100%{opacity:0;transform:scale(0)}}@keyframes ufo-man-container{0%{bottom:-15%;left:62%;transform:rotate(0deg)}80%{bottom:38%;left:37%;transform:rotate(720deg)}81%{bottom:0;left:57%;transform:rotate(0deg)}}@keyframes fahrstuhl-blog-fahrt{10%{top:95px}50%{top:490px}60%{top:490px}90%{top:95px}100%{top:95px}}

/*----------------------STARTSEITE ENDE---------------------*/
/*----------------------UNTERSEITEN---------------------*/
#header-unterseite{
	overflow: hidden;
}
#body-unterseite{
	background-image: url("/media/unterseiten/hintergrund.jpg");
	background-repeat: repeat;
	background-size: auto;
	overflow-x: hidden;

	max-width: 2560px;
}
#logo-unterseite-container{
	position: absolute;
	margin-top: -3px;
	z-index: 1;
	transform: scale(0.4);
	transform-origin: left top;
}
#logo-unterseite-container > a{
	width: 400px;
	height: 240px;
	position: absolute;
	z-index: 100;
}
#logo-unterseite{
	width: 500px;
	/*width:498px;*/
	height: auto;
}
#head-unterseiten{
	position: relative;
	width: 576px;
	transform-origin: top left;
	height: 394px;
}

#head-unterseiten img#header-bg{
	width: 100%;
	height: auto;
	z-index: 0;
}
#main-unterseiten{
	position: relative;
	z-index: 100;
}

/*------------FOOTER-------------*/
#footer-unterseiten{
	height: 560px;
	margin-top: -280px;
	width: 100%;
	max-width: 2560px;
	overflow: hidden;
}

#footer-unterseiten ul{
	line-height: 1.5;
}
#footer-unterseiten-bild{
	position: absolute;
	width: 576px;
	height: 280px;
	bottom: 0;
}

#footer-unterseiten-container{
	position: relative;
	width: 2560px;
	height: 560px;
	transform-origin: left bottom;
}

#footer-unterseiten-text-container{
	position: absolute;
	left: 1%;
	top: 57%;
	margin-top: 3px;
	z-index: 101;
	transform: skewY(-3deg);
}
#footer-unterseiten-text-container nav a,
#footer-unterseiten-text-container {
	font-size: 0.65rem;
	font-family: 'Fira Mono', monospace;

}

#footer-unterseiten-nav a {
	color: #565655;
	margin-bottom: 10px;
	transition-property: color;
}

#footer-unterseiten-nav a:first-child::after {
	left:0;
}

#footer-unterseiten-container a:hover,
#footer-unterseiten-container a:focus {
	color: #90224f;
}

#footer-unterseiten-nav a:hover::after,
#footer-unterseiten-nav #sitemap a:hover,
#footer-unterseiten-nav a:focus::after,
#footer-unterseiten-nav #sitemap a:focus {
	background: #90224f;
}

#footer-unterseiten-text-container li,
#footer-unterseiten-text-container a{
	color: white;
	transition-property: color;
	margin-bottom:0;
}
#footer-unterseiten-nav a::after {
	background: white;
}
/*------------------------------------ANIMATIONEN---------------------------------------*/
.animationen-unterseiten{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	width: 2560px;
	transform-origin: top left;
	height: 861px;
}

/*-----------------------------------JOBS---------------------------------------*/
#wearehiring-container{
	transform: matrix(0.4,0,0,0.4,-290,0);
}
#wearehiring-animation{
	position: relative;
	width: 100%;
	height: 100%;
}
#wearehiring-animation #man{
	animation: ufo-man 8s infinite;
}
#wearehiring-animation #man-container{
	animation: ufo-man-container 8s infinite;
	position: absolute;
	bottom: 0%;
	left: 57%;
}

#stern-unterseiten{
	width: 80px;
	height: 80px;
	left: 89.35%;
	top: 41%;
}
#stern-unterseiten-2{
	width: 40px;
	height: 40px;
	left: 9%;
	top: 69%;
}
#stern-unterseiten-2 svg{
	animation-delay: 2s;
}

#sternschnuppe-unterseite{
	top: 25%;
	left: -16%;
	position: absolute;
}
#sternschnuppe-unterseite-2{
	top: 30%;
	left: -16%;
	position: absolute;
}
#sternschnuppe-unterseite-2 > div{
	animation-delay: 1.5s;
}

#ufo-container{
	position: absolute;
	top: 29.5%;
	left: 34.4%;
	opacity: 0.5;
}
#ufo-color{
	width: 227px;
	height: 123px;
}
/*-----------------------------------------BLOG-ANIMATIONEN-----------------------------*/
#blog-container {
	transform: matrix(0.4, 0, 0, 0.4, -402, 49)
}

#stern-unterseiten-3 {
	width: 40px;
	height: 40px;
	left: 14%;
	top: 49%;
}

#blog-licht img {
	animation: bahnhof-lichter 10s infinite;
	position: absolute;
}

#blog-licht #symbol {
	width: 79px;
	height: 83px;
	left: 67.35%;
	top: 28.5%;
	animation-delay: 2s;
}

#blog-licht #beleuchtung {
	width: 134px;
	height: 204px;
	left: 66.3%;
	top: 24%;
}

#blog-animation #fahrstuhl {
	top: 28.2%;
	left: 24.5%;
	position: absolute;
	transform: scale(0.3);
	opacity: 0.4;
}

#blog-animation #fahrstuhl svg {
	right: -21px;
	animation: fahrstuhl-blog-fahrt 8s infinite;
}

#blog-animation #uhren {
	position: absolute;
	top: 51.2%;
	left: 61.25%;
}

#blog-animation #uhren img {
	width: 17px;
	height: 17px;
	position: absolute;
	animation: spin 1s linear infinite;
}

#blog-animation #uhren img:first-of-type {
	animation-delay: 3s;
	left: -49px;
	top: -6px;
}

#blog-animation #uhren img:nth-of-type(2) {
	animation-direction: reverse;
	left: -24px;
}

#blog-animation #uhren img:last-of-type {
	animation-delay: 2s;
	top: 5px;
}

#blog-animation #fahrstuhl img {
	position: absolute;
	width: auto;
	height: 546px;
	z-index: 3;
}

#blog-animation #fahrstuhl-hintergrund {
	width: 19px;
	height: 446px;
	top: 98px;
	left: 4px;
}

#blog-container #diagramm {
	display: flex;
	align-items: flex-end;
	top: 47.6%;
	left: 78.5%;
	transform: matrix(1, 0.7, -0.25, 1, 0, 0);
}

/*-----------------------------------------WER-WIR-SIND-ANIMATIONEN-------------------------*/

#lamda-animation img {
	width: 40px;
	opacity: 0;
	height: auto;
	animation: lamda 10s ease-in-out infinite;
}

#lamda-animation {
	position: absolute;
	top: 50%;
	left: 65%;
	animation: lamda-container linear 10s infinite;
}

#lamda-animation:nth-of-type(2),
#lamda-animation:nth-of-type(2) img {
	animation-delay: 2.5s;
}

#lamda-animation:nth-of-type(3),
#lamda-animation:nth-of-type(3) img {
	animation-delay: 5s;
}

#lamda-animation:nth-of-type(4),
#lamda-animation:nth-of-type(4) img {
	animation-delay: 7.5s;
}
@keyframes lamda{0%{transform:translateY(0px);width:40px;opacity:0}10%{opacity:1}25%{transform:translateY(-300px);width:50px}50%{transform:translateY(-150px);width:80px}75%{transform:translateY(-350px);width:80px;opacity:1}99%{transform:translateY(-550px);width:80px;opacity:0}100%{transform:translateY(0px);width:40px;opacity:0}}@keyframes lamda-container{0%{transform:translateX(0px)}25%{transform:translateX(-200px)}50%{transform:translateX(-500px)}75%{transform:translateX(-700px)}99%{transform:translateX(-900px)}100%{transform:translateX(0px)}}

#wer-wir-sind-animation #deckel {
	position: absolute;
	top: 18%;
	left: 67%;
	animation: Ufo 2s linear infinite;
}

#wer-wir-sind-container {
	transform: matrix(0.44, 0, 0, 0.44, -490, 33);
}


/*---------------------------------------------WOFÜR-WIR-STEHEN------------------------------------------------*/

#wofur-wir-stehen-container {
	transform: matrix(0.4, 0, 0, 0.4, -341, 49);
}
#wofur-wir-stehen-animation #licht{
	position: absolute;
	top: 19.7%;
	left: 39.1%;
	opacity: 0.2;
}
#wofur-wir-stehen-animation #licht img{
	animation: bahnhof-lichter 10s infinite;
}
#sternschnuppe-unterseite-3{
	animation: fenster-schnuppe 6s linear infinite;
}
.wofur-wir-stehen-schnuppe{
	width: 563px;
	height: 232px;
	top: 9.8%;
	left: 70%;
}
@keyframes fenster-schnuppe{0%{top:-160px;left:-463px;opacity:1}5%{top:-160px;left:-463px}30%{opacity:1}40%{top:210px;left:530px}41%{top:210px;left:530px;opacity:0}100%{top:210px;left:530px;opacity:0}}

/*--------------------------------------------OPEN-SOURCE-----------------------------------------------*/
#open-source-container {
	transform: matrix(0.4, 0, 0, 0.4, 0, 70);
}
#blitz-1-klein-container {
	top: 46%;
	left: 34%;
	animation: blitzX 5s linear infinite;
}
#blitz-1-klein-container .rotate-container {
	animation: blitzR 5s 2s linear infinite;
}
#blitz-1-klein-container img {
	animation: blitzY 5s cubic-bezier(0.64, 0.16, 1, 1) infinite;
	opacity: 0;
}
@keyframes blitzX{0%{transform:translateX(0)}20%{transform:translateX(100px)}}@keyframes blitzY{0%{transform:matrix(1, 0, 0, 1, 0, 0);opacity:0}14%{opacity:1}20%{transform:matrix(0.9, 0, 0, 1, 0, 60);opacity:0}100%{opacity:0}}@keyframes blitzR{0%{transform:rotate(-15deg)}20%{transform:rotate(-25deg)}}
#blitz-2-klein-container {
	top: 24%;
	left: 25%;
	animation: blitz2X 5s 2s cubic-bezier(0.74, 0.32, 1, 1) infinite;
}
#blitz-2-klein-container .rotate-container {
	animation: blitz2R 5s 2s linear infinite;
}
#blitz-2-klein-container img {
	animation: blitz2Y 5s 2s linear infinite;
	opacity: 0;
}
@keyframes blitz2X{0%{transform:translateX(0)}20%{transform:translateX(-100px)}}@keyframes blitz2Y{0%{transform:matrix(1.05, 0, 0, 1.25, 0, 0);opacity:0}14%{opacity:1}20%{transform:matrix(1.25, 0, 0, 1.25, 0, -40);opacity:0}100%{opacity:0}}@keyframes blitz2R{0%{transform:rotate(-40deg)}20%{transform:rotate(-60deg)}}
#blitz-1-gross-container {
	top: 32%;
	left: 39%;
	animation: blitz3X 4s 1s linear infinite;
}
#blitz-1-gross-container .rotate-container {
	animation: blitz3R 4s 1s linear infinite;
}
#blitz-1-gross-container img {
	animation: blitz3Y 4s 1s linear infinite;
	opacity: 0;
}
@keyframes blitz3X{0%{transform:translateX(0)}30%{transform:translateX(150px)}}@keyframes blitz3Y{0%{transform:matrix(0.6, 0, 0, 0.8, 0, 0);opacity:0}10%{opacity:1}24%{opacity:1}30%{transform:matrix(0.8, 0, 0, 0.8, 0, 40);opacity:0}100%{opacity:0}}@keyframes blitz3R{0%{transform:rotate(0deg)}30%{transform:rotate(10deg)}}

#blitz-2-gross-container {
	top: 10%;
	left: 42%;
	animation: blitz4X 3s 1.5s linear infinite;
}
#blitz-2-gross-container .rotate-container {
	animation: blitz4R 3s 1.5s linear infinite;
}
#blitz-2-gross-container img {
	animation: blitz4Y 3s 1.5s linear infinite;
	opacity: 0;
}
@keyframes blitz4X{0%{transform:translateX(0)}40%{transform:translateX(200px)}}@keyframes blitz4Y{0%{transform:matrix(1, 0, 0, 0.8, 0, 0);opacity:0}10%{opacity:1}34%{opacity:1}40%{transform:matrix(1, 0, 0, 1, 0, -30);opacity:0}100%{opacity:0}}@keyframes blitz4R{0%{transform:rotate(-30deg)}40%{transform:rotate(-20deg)}}


/*-----------UNSERE-PRODUKTE--------------*/
.element-Y-container {
	animation: elemente-Y 3s  infinite;
	top: 27%;
	left: 46.65%;
}

.element-Y-container:nth-of-type(2),
.element-Y-container:nth-of-type(2) .element-Y-container,
.element-Y-container:nth-of-type(2) img {
	animation-delay: 1.5s;
}

.element-Y-container img {
	animation: elemente-img 3s linear infinite;
	opacity: 0;
}

@keyframes elemente-Y {
	0% {
		transform: translateY(-250px)
	}
	50% {
		transform: translateY(0px)
	}
	60% {
		transform: translateY(0px)
	}
	99% {
		transform: translateY(25px)
	}
	100% {
		transform: translate(0, -250px)
	}
}

@keyframes elemente-img {
	0% {
		transform: scale(0);
		opacity: 0
	}
	12% {
		transform: scale(0.25)
	}

	20% {
		opacity: 1
	}
	45% {
		transform: scale(0.25);
		opacity: 1
	}
	60% {
		transform: scale(0.25);
		opacity: 1
	}
	99% {
		transform: scale(0.1);
		opacity: 0
	}
	100% {
		opacity: 0;
		transform: scale(0.3)
	}
}

#quader{
	top: 58%;
	left: 42.5%;
	animation: shadow-drop-center 1.5s 0.75s infinite both; 
}
#quader svg{
	opacity: 0.6;
}
@keyframes shadow-drop-center {
	0% {filter: drop-shadow( 0px 0px 5px white);
	}
	60% {filter: drop-shadow( 0px 0px 25px white);
	}
	100% {filter: drop-shadow( 0px 0px 5px white);
	}
}
#atom-big {
	position: absolute;
	top: 17%;
	left: 63%;
	animation: Ufo 3s linear infinite;
}

#atom-big img {
	animation: spin 6s infinite linear;
}

#produkte-animation #atom {
	top: 78px;
	left: 148px;
}

#produkte-animation .atom-animation>svg {
	width: 150px;
	height: 279px;
}

#produkte-animation #atom-center {
	left: 64px;
	top: 126px;
}

#produkte-container {
	transform: matrix(0.4, 0, 0, 0.4, -450, 45)
}

/*--------IoT-Service-Management---------*/
#band-licht {
	left: 731px;
	top: 272px;
	opacity: 0.5;
}

#band-licht img {
	transform: skew(1deg, 0deg);
	opacity: 0.8;
	animation: bahnhof-lichter 10s infinite;
}

#diagramm {
	display: flex;
	align-items: flex-end;
	top: 66%;
	left: 70.7%;
	transform: matrix(1, -0.23, 0, 1, 0, 0);
}

#diagramm div {
	width: 7px;
	margin: 0 2px 0 2px;
	transform-origin: bottom;
	background-color: #f7ecdc;
}

#diagramm div:nth-child(1) {
	height: 40px;
	animation: diagramm 4s linear 0s infinite;
}

#diagramm div:nth-child(2) {
	height: 60px;
	animation: diagramm 4s linear 0.3s infinite reverse;
}

#diagramm div:nth-child(3) {
	height: 90px;
	animation: diagramm2 5s ease 1s infinite;
}

#diagramm div:nth-child(4) {
	height: 80px;
	animation: diagramm2 5s ease 1s infinite;
}

#diagramm div:nth-child(5) {
	height: 100px;
	animation: diagramm2 6s ease 1.6s infinite;
}

#diagramm div:nth-child(6) {
	height: 65px;
	animation: diagramm2 3s ease 1s infinite reverse;
}

@keyframes diagramm{0%{transform:scaleY(1)}40%{transform:scaleY(0.4)}80%{transform:scaleY(0.8)}90%{transform:scaleY(1.2)}100%{transform:scaleY(1)}}@keyframes diagramm2{0%{transform:scaleY(1)}20%{transform:scaleY(0.6)}50%{transform:scaleY(0.8)}80%{transform:scaleY(0.2)}100%{transform:scaleY(1)}}

#stern-unterseiten-4 {
	width: 50px;
	height: 50px;
	left: 20%;
	top: 45%;
}

#iot-sternschnuppen {
	width: 581px;
	height: 400px;
	left: 56.3%;
	top: -30px;
	transform: matrix(1, -0.14, 1, 1, 0, 0);
	overflow: hidden;
}

#sternschnuppe-unterseite-4 {
	transform: matrix(1, 0.14, -1, 1, 0, 0);
	animation: iot-schnuppe 6s linear infinite;
}
#sternschnuppe-unterseite-4 svg {
	transform: rotate(15deg);
}
@keyframes iot-schnuppe{0%{top:-220px;left:-180px}50%{top:470px;left:140px}100%{top:470px;left:140px}}

#iot-container {
	transform: matrix(0.4, 0, 0, 0.4, -450, 50)
}

/*-----------LOADER-------------*/

#loader{
	display: block;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 9998;
	left: 0;
	top: 0;
	background: #f7e9d8;
	display: flex;
	align-items: center;
	justify-content: center;
}

#loader:after {
	width: 100px;
	height: 100px;
	background: url(/shared/img/loader.png) center center / contain no-repeat;
	animation: spin 1s infinite;
	display: block;
	content: "";
	z-index: 9999;
}

/*----------------NO-JS-------------------*/
#body-startseite.no-js{
	overflow: scroll;
}
body.no-js #loader{
	display: none;
}
body.no-js #erweiterung{
	display: none;
}
#no-js{
	left: 0;
	top: 0;
	background: #90224f;
	z-index: 99999;
}
body.no-js #open-sidenav{
	display: none;
}
body.no-js .link-schrift svg{
	max-height: 50px;
}
body.no-js .punkt-container{
	display: none;
}
body.no-js nav#footer-nav{
	position: fixed;
}
body.no-js #sitemap{
	display: inline;
}
body.no-js #footer-unterseiten{
	margin-top: 0px;
}
body.no-js .webp-nojs{
	display: none;
}
body.no-js nav#footer-unterseiten-nav a{
	padding-right: 0px;
	font-size: 0.6rem;
}
body.no-js #swipe-icon{
	display: none;
}
/*-------------------------------------OUTDATED BROWSER---------------------------------------*/
#outdated {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 190px;
	text-align: center;
	text-transform: uppercase;
	z-index: 1500;
	background-color: #90224f !important;
	color: rgb(85, 85, 85);
}
* html #outdated {
	position: absolute;
}
#outdated h6 {
	font-size: 25px;
	line-height: 25px;
	margin: 30px 0 10px;
}
#outdated h6,
#outdated p {
	color: white;
}
#outdated #btnUpdateBrowser {
	background: white !important;
	color: #585858 !important;
	display:block;
	font-weight: 300;
	white-space: nowrap;
	vertical-align: middle;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid white;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin: 30px auto 0;
	width: 300px;
}
#outdated #btnUpdateBrowser:hover {
	color: white !important;
	background: #3a3a39 !important;
}
#outdated .last {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 20px;
	height: 20px;
}
#outdated .last[dir='rtl'] {
	right: auto !important;
	left: 25px !important;
}
#outdated #btnCloseUpdateBrowser {
	display: block;
	color: white !important;
	transform: scale(5);
	border: none;
}
#outdated #btnCloseUpdateBrowser:hover {
	color: #3a3a39 !important;
}


/*-----------------------------------------------------------------------------------------MEDIA QUARYS-----------------------------------------------------------------------------------------------*/
/*--------------------------------------------WIDTH--------------------------------------------*/
@media screen and (min-width: 577px) {
	h1,.h1{
		font-size: 2rem;
	}
	h2,.h2{
		font-size: 1.7rem;
	}
	h3,.h3{
		font-size: 1.6rem;
	}
	h4,.h4{
		font-size: 1.5rem;
	}
	h5,.h5{
		font-size: 1.3rem;
	}
	#main-nav a {
		font-size: 2rem;
	}
	#open-sidenav {
		transform: scale(0.7)
	}
	#logo-unterseite-container{
		transform: scale(0.5);
	}
	nav.footer-nav a {
		color: #efe1d2;
		font-size: 0.75rem;
		padding-right:15px;
	}
	#footer-unterseiten-container {
		left: 0px;
	} 
	#footer-unterseiten-bild{
		width: 768px;
		height: 287px;
	}
	#footer-unterseiten-text-container{
		left: 4.5%;
		top: 56%;
	}
	#swipe-icon {
		left: calc(50vw - 150px);
	}
	#swipe-icon > img {
		width: 200px;
	}
	#language-switch a{
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 769px) {
	#open-sidenav {
		margin: 10px;
		transform: scale(0.8)
	}
	#main-nav a {
		padding-left: 64px;
		padding-right: 80px
	}
	#language-switch{
		padding-left: 64px;
	}
	#logo-unterseite-container {
		transform: scale(0.6);
	}
	#footer-unterseiten {
		margin-top: -190px;
	}
	#footer-unterseiten-bild{
		width: 992px;
		height: 370px;
	}
	#footer-unterseiten-text-container nav a,
	#footer-unterseiten-text-container{
		font-size: .85rem;
	}
	#footer-unterseiten-text-container{
		left: 5.5%;
		top: 43%;
	}
	body.no-js nav#footer-unterseiten-nav a{
		font-size: 0.8rem;
	}
	main br.clear {
		clear:both;
	}
	main figcaption {
		font-size:80%;
		padding-top:.5rem;
	}
	main .floatLeft {
		max-width:48%;
		float:left;
		margin:.5rem 4% 2rem 0;
	}
	main .floatRight {
		max-width:48%;
		float:right;
		margin:.5rem 0 2rem 4%;
	}
	main .floatLeft + .floatLeft, main .floatLeft + .floatRight, main .floatRight + .floatRight, main .floatRight + .floatLeft {
		margin:.5rem 0 2rem 0;
	}
}

@media screen and (min-width: 993px) {
	h1,.h1{
		font-size: 3.5rem;
	}
	h2,.h2{
		font-size: 2.25rem;
	}
	h3,.h3{
		font-size: 1.75rem;
	}
	h4,.h4{
		font-size: 1.5rem;
	}
	h5,.h5{
		font-size: 1.25rem;
	}
	#open-sidenav {
		margin: 15px;
		transform: scale(0.9)
	}
	.nav-open {
		width: 600px !important;
	}
	nav#footer-nav a {
		font-size: 1.125rem;
	}
	nav#footer-nav a::after {
		height: 5px;
	}
	#logo-unterseite-container{
		transform: scale(0.8);
	}
	#footer-unterseiten {
		margin-top: -187px;
	}
	#footer-unterseiten-bild{
		width: 1200px;
		height: 373px;
	}
}
@media screen and (min-width: 1201px) {
	#open-sidenav {
		margin: 20px;
		transform: scale(1)
	}  
	#logo-unterseite-container{
		transform: scale(1);
	}
	#footer-unterseiten-text-container{
		left: 6%;
		top: 35%;
	}
	#footer-unterseiten {
		margin-top: -140px;
	}
	#footer-unterseiten-bild{
		width: 1920px;
		height: 420px;
	}
	#footer-unterseiten-text-container nav a,
	#footer-unterseiten-text-container{
		font-size: 1rem;
	}
	body.no-js nav#footer-unterseiten-nav a{
		font-size: 1rem;
	}
}

@media screen and (min-width: 1921px) {
	#footer-unterseiten-bild{
		width: 2560px;
		height: 560px;
	}
	#footer-unterseiten {
		margin-top: 0px;
	}
	#footer-unterseiten-text-container{
		left: 9%;
		top: 17%;
	}
	#footer-unterseiten-text-container nav a,
	#footer-unterseiten-text-container{
		font-size: 1.2rem;
	}
	body.no-js nav#footer-unterseiten-nav a{
		padding-right: 15px;
		font-size: 1.2rem;
	}
}

/*----------------------------------------------HEIGHT---------------------------------------------------*/
@media screen and (max-height: 320px) {
	#main-nav a {
		display: inline-block;
		width: 49%;
	}
}
@media screen and (max-height: 450px) {
	#main-nav {
		padding-top: 15px;
	}
}
@media screen and (max-height: 800px) {
	#main-nav a {
		font-size: 18px;
	}
}

/*----------------------------------------- FÜR BANNER -----------------------------------*/
@media screen and (min-width: 577px) {
	#head-unterseiten{
		width: 768px;
		height: 311px;
	}
	img#header-bg {
		transform: translateY(-120px);
	}
	#wearehiring-container  {
		transform: matrix(0.44,0,0,0.44,-124,-141);
	}
	#blog-container {
		transform: matrix(0.44, 0, 0, 0.44, -313, -67);
	}
	#wer-wir-sind-container {
		transform: matrix(0.44, 0, 0, 0.44, -233, -47);
	}
	#wofur-wir-stehen-container {
		transform: matrix(0.44, 0, 0, 0.44, -238, -67);
	}
	#open-source-container {
		transform: matrix(0.44, 0, 0, 0.44, 0, -40);
	}
	#produkte-container {
		transform: matrix(0.44, 0, 0, 0.44, -358, -70)
	}
	#iot-container {
		transform: matrix(0.44, 0, 0, 0.44, -358, -67)
	}
}
@media screen and (min-width: 769px) {
	#wearehiring-container {
		transform: matrix(0.51, 0, 0, 0.51, -99, -141);
	}
	#head-unterseiten {
		width: 992px;
		height: 387px;
	}
	#blog-container {
		transform: matrix(0.52, 0, 0, 0.52, -249, -58);
	}
	#wer-wir-sind-container,
	#wofur-wir-stehen-container{
		transform: matrix(0.52, 0, 0, 0.52, -193, -58)
	}
	#open-source-container {
		transform: matrix(0.52, 0, 0, 0.52, 20, -40)
	}
	#produkte-container {
		transform: matrix(0.52, 0, 0, 0.52, -338, -60)
	}
	#iot-container {
		transform: matrix(0.52, 0, 0, 0.52, -338, -59)
	}
}
@media screen and (min-width: 993px) {
	#head-unterseiten {
		width: 1200px;
		height: 566px;
	}
	#wearehiring-container  {
		transform: matrix(0.7, 0, 0, 0.7, -204, -155)
	}
	#blog-container {
		transform: matrix(0.7, 0, 0, 0.7, -333, -38)
	}
	#wer-wir-sind-container {
		transform: matrix(0.7, 0, 0, 0.7, -403, -18)
	}
	#wofur-wir-stehen-container {
		transform: matrix(0.7, 0, 0, 0.7, -403, -35)
	}
	#open-source-container {
		transform: matrix(0.7, 0, 0, 0.7, 0, -10)
	}
	#produkte-container {
		transform: matrix(0.7, 0, 0, 0.7, -592, -40)
	}
	#iot-container {
		transform: matrix(0.7, 0, 0, 0.7, -591, -35)
	}
}
@media screen and (min-width: 1201px) {
	#head-unterseiten {
		width: 1600px;
		height: 664px;
	}
	#wearehiring-container  {
		transform: matrix(0.86, 0, 0, 0.86, -129, -184);
	}
	#blog-container {
		transform: matrix(0.8, 0, 0, 0.8, -382, -24)
	}
	#wer-wir-sind-container{
		transform: matrix(0.8, 0, 0, 0.8, -222, -24);
	}
	#wofur-wir-stehen-container{
		transform: matrix(0.8, 0, 0, 0.8, -232, -24);
	}
	#open-source-container {
		transform: matrix(0.8, 0, 0, 0.8,-0, 0);
	}
	#produkte-container {
		transform: matrix(0.8, 0, 0, 0.8,-449, -30)
	}
	#iot-container {
		transform: matrix(0.8, 0, 0, 0.8, -447, -23)
	}
}
@media screen and (min-width: 1601px) {
	#head-unterseiten {
		width: 1920px;
		height:790px;
	}
	#wearehiring-container  {
		transform: matrix(1, 0, 0, 1, -158,-190);
	}
	#blog-container {
		transform: matrix(1, 0, 0, 1, -476, -71)
	}
	#wer-wir-sind-container{
		transform: matrix(1, 0, 0, 1, -366, -71);
	}
	#wofur-wir-stehen-container{
		transform: matrix(1, 0, 0, 1, -369, -71);
	}
	#open-source-container {
		transform: matrix(1, 0, 0, 1, 0, -70);
	}
	#produkte-container {
		transform: matrix(1, 0, 0, 1, -642, -70);
	}
	#iot-container {
		transform: matrix(1, 0, 0, 1, -639, -69);
	}
}
@media screen and (min-width: 1921px) {
	#head-unterseiten {
		width: 2560px;
		height:861px;
	}
	#wearehiring-container  {
		transform: matrix(1, 0, 0, 1, 0,-120);
	}
	#blog-container {
		transform: matrix(1, 0, 0, 1, -173, 0);
	}
	#wer-wir-sind-container{
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
	#wofur-wir-stehen-container{
		transform: matrix(1, 0, 0, 1, 6, 0);
	}
	#open-source-container {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
	#produkte-container {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
	#iot-container {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
}

@media screen and (min-width: 2561px){
	/*.blog #head-unterseiten {
	width: 3219px;
	height: 861px;
}
	#blog-container {
	transform: matrix(1, 0, 0, 1,154, 0);
}*/
	#header-unterseite {
		overflow: unset;
	}
}