@import url('aktuelles.css');

#header-grafik-mobil {
	margin-top: calc(55vw * -1);
	padding-block: 0 calc(var(--font-size) * 2);
}
#header-grafik {
	display: none;
	position: relative;
	margin-top: calc(53vw * -1);
	padding-block: 0 calc(var(--font-size) * 3);
}
@media (min-width: 400px) {
	#header-grafik-mobil {
		margin-top: calc(60vw * -1);
		padding-bottom: calc(var(--font-size) * 5);
	}
}
@media (min-width: 600px) {
	#header-grafik {
		display: block;
	}
	#header-grafik-mobil {
		display: none;
	}
}
@media (min-width: 1200px) {
	#header-grafik {
		margin-top: -625px;
	}
}
:is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) {
	overflow: visible;
}
:is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) a path {
	transition: 0.5s ease-in-out;
}
:is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) a:hover path {
	opacity: 1;
}
:is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) #webentwicklung path, :is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) #programmierung path, :is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) #it path {
	animation-name: slide-right;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
}
@keyframes slide-right {
	0% {
		transform: translateX(80px);
	}
	100% {
		transform: translateX(0);
	}
}
:is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) #design path, :is(#header-grafik #grafik, #header-grafik-mobil #grafik-mobil) #marketing path {
	animation-name: slide-left;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
}
@keyframes slide-left {
	0% {
		transform: translateX(-80px);
	}
	100% {
		transform: translateX(0);
	}
}

#hand .inner {
	position: relative;
}
#hand .liste ul li::marker {
	color: var(--color-accent);
}
#hand h1 {
	color: var(--color-accent);
	font-weight: 400;
	margin-bottom: 0;
}
#hand h2 {
	color: var(--color-accent);
	font-weight: 400;
	font-size: 2.8rem;
	line-height: 3.4rem;
	margin-top: 0;
}
#hand #flieger {
	position: absolute;
	bottom: calc(((var(--font-size) * 3) * -1) - 46px);
	right: 48px;
	width: 200px;
	line-height: 0;
	z-index: 8;
}

#aktuelles h4 {
	font-size: calc(var(--font-size) * 1.3);
	line-height: calc(var(--font-size) * 2);
	font-weight: 200;
}
#aktuelles .handmade {
	margin: 0 auto;
}
#aktuelles .handmade img {
	width: 150px;
	height: auto;
}
#aktuelles .aktuelles {
	padding: 0;
}
#aktuelles .aktuelles .grid > div:first-child {
	order: 2 !important;
}
#aktuelles .aktuelles .grid > div:last-child {
	order: 1 !important;
}

#siegel {
	padding-bottom: calc((var(--font-size) * 3) + 3vw);
}
#siegel .inner .grid div:not(.text-right) span {
	font-style: italic;
	font-weight: bold;
}
#siegel #siegelBadge {
	overflow: hidden;
}
#siegel #siegelBadge #siegelbild {
	max-width: 350px;
	transform: rotate(15deg);
}
#siegel ul li::marker{
	color: var(--color-accent);
}

#referenzen {
	position: relative;
	padding-top: calc((var(--font-size) * 3) + 45px);
	background-color: var(--color-accent);
	background-image: url("/img/content/farbkarten.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-blend-mode: soft-light;
	color: #fff;
}
#referenzen h3 {
	color: #fff;
}
#referenzen .space {
	padding: 0 0 78px 0;
}
#referenzen::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(32, 158, 152, 0.8);
	z-index: 0;
}
#referenzen::after {
	content: "";
	display: block;
	position: absolute;
	top: -24px;
	left: 0;
	width: 100%;
	aspect-ratio: 75 / 8;
	background-image: url("/img/content/transp-streifen.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	z-index: 1;
}
#referenzen .inner {
	position: relative;
	z-index: 2;
}
#referenzen h2 {
	color: var(--color-primary200);
}
#referenzen .moreInfoTooltip {
	cursor: help;
}

#projekte {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 97%);
}
#projekte h3 {
	font-size: calc(var(--font-size) * 1.5);
	line-height: calc(var(--font-size) * 2);
	font-weight: 200;
}
#projekte .biene {
	position: relative;
}
#projekte .biene img {
	position: absolute;
	right: 100px;
	top: -71px;
	width: 160px;
}

#team p {
	margin-bottom: 48px;
}
#team img {
	aspect-ratio: 1;
	width: 100%;
	border-radius: 50%;
	object-fit: cover;
}
#team h3 {
	font-size: calc(var(--font-size) * 1.5);
	line-height: calc(var(--font-size) * 2);
	font-weight: 200;
}

@media (min-width: 600px) {
	#hand {
		padding-top: calc((var(--font-size) * 3) + 3vw);
	}
	#hand #flieger {
		right: 100px;
	}
	#aktuelles .aktuelles .aktuellesText {
		position: relative;
		max-height: 200px;
		overflow: hidden;
		transition: height .25s;
	}
	#aktuelles .aktuelles .aktuellesText.more {
		cursor: pointer;
	}
	#aktuelles .aktuelles .aktuellesText.more::before {
		content: "keyboard_arrow_down";
		position: absolute;
		bottom: 8px;
		left: 50%;
		transform: translateX(-50%);
		padding: 4px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: var(--color-accent);
		color: #fff;
		box-shadow: 0 0 4px grey;
		font-family: "Material Symbols Rounded";
		font-size: 1.6rem;
		line-height: 1.6rem;
		text-align: center;
		cursor: pointer;
		z-index: 2;
	}
	#aktuelles .aktuelles .aktuellesText.more::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 48px;
		background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-grey));
		z-index: 1;
	}
	#referenzen::after {
		top: -44px;
	}
}
@media (min-width: 900px) {
	#hand #flieger {
		bottom: calc(((var(--font-size) * 3) * -1) - 70px);
		width: 300px;
	}
	#hand .liste {
		padding-left: 100px;
	}
	#siegel {
		padding-bottom: calc((var(--font-size) * 3) + 10vw);
	}
	#projekte {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
	}
	#referenzen::after {
		top: -95px;
	}
	#referenzen .abstand {
		padding: 24px 0;
	}
}
@media (min-width: 1300px) {
	#referenzen::after {
		top: -110px;
	}
}
@media (min-width: 1800px) {
	#referenzen::after {
		top: -140px;
	}
}
@media (min-width: 2000px) {
	#referenzen::after {
		top: -200px;
	}
}
@media (min-width: 2400px) {
	#referenzen::after {
		top: -220px;
	}
}