@font-face {
  font-family: 'Swiss 721';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/Swiss721BT-Roman.woff2') format('woff2');
}

@font-face {
  font-family: 'Swiss 721';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/Swiss721Bold.woff') format('woff');
}

@font-face {
  font-family: 'Swiss 721 Outline';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/Swiss721BT-BoldOutline.woff2') format('woff');
}

/* @group ROOT */

:root {
	
	--color-primary: 	#009966;
	--color-black: 		#333333;
	--color-white:			#ffffff;
	
	--color-base: var(--color-black);
	--color-background:	var(--color-white);
	
	--font-family:	 					'Swiss 721', Helvetica, Arial, sans-serif;
	--font-family-outline:	 	'Swiss 721 Outline', Helvetica, Arial, sans-serif;
	
	--font-size: 		clamp(18px, 2vw, 20px);

	--font-xs-bold: 	700 .75rem/1.4em var(--font-family); 
	--font-sm: 			400 .85rem/1.4em var(--font-family);
	--font-sm-bold: 	700 .8925rem/1.4em var(--font-family);
	--font: 				400 var(--font-size)/1.4em var(--font-family);
	--font-lg: 			700 1.5rem/1.25em var(--font-family);
	
	--letter-spacing-bold: .02em;
	
	--width-container-sm: 48rem;
	--width-container:		66rem;
	
	--spacing-inline: clamp(1rem, 3vw, 1.5rem);
	--spacing-columns: clamp(1rem, 6vw, 3rem);
	
	--spacing-block-sm: .7rem;
	--spacing-block: 		1.4rem;
	--spacing-block-lg:	clamp(2.1rem, 5.6vw, 2.8rem);
	--spacing-block-xl: clamp(2.8rem, 8.4vw, 4.2rem);
	
	--header-height: 9rem;
	
}

/* @end */

/* @group BASE */

html,
body {
	font: var(--font);
}

h1 {
	font: var(--font-lg);
}

h1:has(+ *) {
	margin-bottom: 1.4rem;
}

h2 {
	padding-top: 1em;
	color: var(--color-primary);
	border-top: 2px solid currentColor;
	font-weight: 700;
}

* + h2 {
	margin-top: 2.8rem;
}

h2:has(+ *) {
	margin-bottom: 1.4rem;
}

h3 {
	font-weight: 700;
}

* + h3 {
	margin-top: 2.1rem;
}

h3:has(+ *) {
	margin-bottom: 1.4rem;
}

p:has(+ *) {
	margin-bottom: 1.4em;
}

strong {
	font-weight: 700;
}

/* @group Links */

.menu a,
.blocks a,
.news a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: .09em;
	text-underline-offset: .15em;
}

.menu a {
	transition: text-decoration .15s ease-in-out 0s;
}

.blocks a {
	text-decoration-color: var(--color-primary);
	transition: color .15s ease-in-out 0s;
}

.news a {
	text-decoration-color: currentColor;
}

.menu a:hover,
.menu a.active {
	text-decoration-color: currentColor;
}

.blocks a:hover {
	color: var(--color-primary);
}

/* @end */

/* @group Lists */

.blocks ul:not([class]):has(+ *) {
    margin-bottom: 1.4em;
}

	.blocks ul:not([class]) li {
	   display: flex;
	}
	
		.blocks ul:not([class]) li::before {
	    content: "•";
	    flex: 0 0 1.4em;
			padding-right: .25em;
			text-align: center;
		}
	
	.blocks ul:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}
	
.blocks ol:not([class]) {
  counter-reset: counter;
}

.blocks ol:not([class]):has(+ *) {
	margin-bottom: 1.4em;
}

	.blocks ol:not([class]) li {
		display: table;
	  counter-increment: counter;
	}
	
	.blocks ol:not([class]) li:has(+ li) {
	   margin-bottom: .7em;
	}
	
		.blocks ol:not([class]) li::before {
		  content: counter(counter, numeric) ".";
	    display: table-cell;
	    width: 2.1em;
			padding-right: .4em;
			text-align: right;
		}

/* @end */

/* @end */

/* @group Vivus.js */

svg {
	vertical-align: top;
}

	svg * {
	  fill: none;
	  stroke: currentColor;
	}

/* @end */

/* @group Body */

body {
	background: transparent;
	transition: background 1s ease-in-out 0s;
}

.body--projects {
	background-color: var(--color-primary);
}

/* @end */

/* @group Header */

.header {
	--color-header: var(--color-primary);
}

.header--home,
.header--projects {
	--color-header: var(--color-white);
}

.header--home {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}

/* @group Banner */

.banner {
	padding-block: 1.5rem 4.5rem;
	padding-inline: var(--spacing-inline);
	color: var(--color-header);
	text-align: left;
	perspective: 500px; /* Verstärkt den 3D-Effekt */
}

.header:not(.header--home) .banner {
	display: flex;
}

.header--home .banner {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	right: 0;
	transition: all 1s ease-in-out 0s;
}

.header--full .banner {
	top: 50%;
	padding-inline: 10vw;
	text-align: center;
	transform: translateY(-50%);
}

.header--full .banner--dingethal {
	padding-inline: 5vw;
}

/* @end */

/* @group Title */

.title-wrapper {
	transition: all 1s ease-in-out 0s;
}
	
.title {
	font-family: var(--font-family-outline);
	font-size: clamp(1.5rem, 3.3vw, 1.65rem);
	line-height: 1.1em;
}

.header--full .title {
	display: none;
}

.header .title-image {
	display: none;
}

.header--full .title-image {
	display: block;
}

	.title-image svg {
		width: 100%;
		height: auto;
	}
	
/* @end */

/* @group Subtitle */

.subtitle {
	position: relative;
	margin-block-start: .1em;
	font-weight: 700;
	line-height: 1.25em;
	transition: all 1s ease-in-out 0s;
}

.header--full .subtitle {
	margin-block-start: .4em;
	color: var(--color-white);
	font-size: 6vw;
	line-height: 1em;
	transform-origin: bottom;
  animation: put-up 2s ease-out forwards 4s;
	animation-fill-mode: backwards;
}

.header--full .subtitle--dingethal {
	font-size: clamp(var(--font-size), 3.5vw, 3.5vw);
}

.header--full .subtitle--baulog {
	font-size: clamp(var(--font-size), 4vw, 4vw);
}

@keyframes put-up {

  0% {
    transform: rotateX(90deg) translateY(50px);
    opacity: 0;
  }
  40% {
    transform: rotateX(0deg) translateY(0);
    opacity: 1;
  }
  50% {
     transform: rotateX(-15deg);
  }
  60% {
     transform: rotateX(10deg);
  }
  70% {
     transform: rotateX(-7deg);
  }
  80% {
     transform: rotateX(5deg);
  }
  90% {
     transform: rotateX(-2deg);
  }
  100% {
     transform: rotateX(0deg);
  }
  
}

/* @end */

/* @group Menu */

.menu {
	position: fixed;
	z-index: 30;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	row-gap: .5em;
	width: max-content;
	max-width: 100%;
	height: 100vh;
	padding-block: calc(1em + 4.4rem) 2em;
	padding-inline: 1.5em calc(1.5em + 4.4rem);
	color: var(--color-white);
	background-color: var(--color-primary);
	font: var(--font-lg);
	transform: translateX(100%);
	transition: transform .5s ease-in-out 0s;
}

.menu.open {
	box-shadow: 0 0.1em 1em rgba(0,0,0,.2);
	transform: translateX(0);
}

/* @end */

/* @group Menu-toggle */

.menu-toggle {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 50;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	color: var(--color-header);
	background-color: var(--color-primary-light);
	border-bottom-left-radius: 1.2rem;
	text-align: center;
}

.menu-toggle:hover {
	cursor: pointer;
}

.menu-toggle.open {
	color: var(--color-white);
}

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
}

	.hamburger > * {
		display: block;
		position: absolute;
		top: 50%;
		left: 10%;
		height: 2px;
		width: 80%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .4em));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .4em));
	}
	
	.hamburger--open > *:nth-child(1),
	.hamburger--open > *:nth-child(3) {
		margin-inline: auto;
	}
	
	.hamburger--open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger--open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger--open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @end */

/* @group Indicators & Indicator */

.indicators-wrapper {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0%;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	opacity: 1;
	transition: opacity 1s ease-in-out 0s;
}

.indicators-wrapper.hidden {
	opacity: 0;
}

.indicators {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--spacing-columns);
	row-gap: 2rem;
	width: 100%;
	max-width: var(--width-container);
	margin-inline: auto;
	color: var(--color-white);
}

.indicator {
	flex: 1 1 auto;
	font-weight: 700;
	text-align: center;
}

	.indicator__number {
		font-family: var(--font-family-outline);
		font-size: clamp(7rem, 24vw, 12rem);
		line-height: .7em;
		transition: transform .15s ease-in-out 0s;
	}
	
	.indicator__number:hover {
		transform: scale(1.1);
	}
	
	.indicator__text {
		
	}

/* @end */

/* @group Slider */

.slider {
  position: relative;
  width: 100%;
  height: 100vh;
	overflow: hidden;
}

	.slider img {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
		transition: opacity 2s ease-in-out;
	}
	
	.transition-opacity {
	  transition-property: opacity;
	}
	
	.slider-duration {
	  transition-duration: 7s;
	}
	
	.opacity-0 {
	  opacity: 0;
	}
	
	.opacity-100 {
	  opacity: 1;
	}

/* @end */

/* @group Main */

.main {
	
}

.main:not(.main--home) {
	padding-block-end: 5rem;
}

.main--projects {
	--color-base: var(--color-white);
	color: var(--color-base);
	--color-background: var(--color-black);
}

/* @end */

/* @group Container */

.container {
	max-width: var(--width-container);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

/* @end */

/* @group Blocks */

.blocks {
	max-width: var(--width-container-sm);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

/* @group Text */

.text {
	
}

/* @end */

/* @group Cards */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr));
	gap: var(--spacing-columns);
}

.cards:has(+ *) {
	margin-bottom: 2em;
}

	.cards > * {
		padding: 1.5em;
		border: 2px solid var(--color-primary);
	}

/* @end */

/* @group Video */

.video:has(+ *) {
	margin-bottom: 1em;
}

	.video video {
		width: 100%;
		height: auto;
	}

/* @end */

/* @end */

/* @group Tags */

.tags {
	display: flex;
	flex-wrap: wrap;
	padding-right: 2px;
	padding-bottom: 2px;
	--color-base: var(--color-primary);
	--color-background: var(--color-white);
}

.tags--inverse {
	--color-base: var(--color-white);
	--color-background: var(--color-black);
}

.tags:has(+ *) {
	margin-bottom: 2rem;
}

	.tags > * {
		padding: .6em .75em .3em;
		margin-right: -2px;
		margin-bottom: -2px;
		color: var(--color-base);
		border: 2px solid var(--color-base);
		font: var(--font-xs-bold);
		letter-spacing: var(--letter-spacing-bold);
		text-transform: uppercase;
		transition: all .15s ease-in-out 0s;
	}
	
	.tags--inverse > * {
		background-color: rgba(0,0,0,.2);
	}
	
	.tags > *:hover,
	.tags > *.active {
		color: var(--color-background);
		background-color: var(--color-base);
	}

/* @end */

/* @group Projects & Project */

.projects-container {
  min-height: 100vh;
}

.project-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

	.project-background::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 100%);
	}

.project-background__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
	transition: opacity 1s ease-in-out;
}

.projects {
  position: relative;
  z-index: 1;
	display: flex;
	flex-direction: column;
	row-gap: .5em;
	color: var(--color-white);
}

.project {
  display: flex;
}

.project.active {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: .09em;
	text-underline-offset: .15em;
	text-decoration-color: currentColor;
}

	.project__date {
		flex: 0 0 max-content;
	}

/* @end */

/* @group Clients */

.clients {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20em), 1fr));
	column-gap: var(--spacing-columns);
	row-gap: .5em;
}

/* @end */

/* @group Footer */

.footer {
	padding-block-end: 1rem;
	padding-inline: var(--spacing-inline);
	background-color: var(--color-white);
	font: var(--font-sm-bold);
}

/* @group Colophon */

.colophon {
	position: relative;
	container-type: inline-size;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: var(--spacing-columns);
	row-gap: .5em;
	margin-block-end: 2rem;
	padding-block: .75em;
	border-block-start: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-weight: bold;
	line-height: 1.25em;
}

.footer--home .colophon,
.footer--projects .colophon {
	border: unset;
}

	.colophon .copyright {
		align-self: flex-start;
	}
	
	@container (max-width: 39.999999999rem) {
		
			.colophon .news {
				position: relative;
				z-index: 1;
				order: -1;
				margin-block	: -9rem 1rem;
				margin-inline-start: auto;
			}
			
			.colophon .copyright,
			.colophon .footer-menu {
				width: 100%;
			}	
			
	}
	
	@container (min-width: 40rem) {
		
			.colophon .news {
				position: absolute;
				z-index: 1;
				top: -8rem;
				right: 15rem;
			}
			
	}

/* @end */

/* @group News */

.news {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12rem;
	aspect-ratio: 1;
	border-radius: 50%;
	color: var(--color-white);
	background-color: var(--color-primary);
	font: var(--font-sm-bold);
	text-align: center;
}

	.news p:has(+ *) {
		margin-bottom: .5em;
	}

/* @end */

/* @group Footer-menu */

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: clamp(1em, 2vw, 1.5em);
	row-gap: .5em;
}

/* @end */

/* @group Siblings */

.siblings {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: .75rem;
	font-weight: bold;
}
	
	.sibling__title {
		font-family: var(--font-family-outline);
		font-size: 1.1rem;
		line-height: 1.2em;
	}

/* @end */

/* @end */