/* #region Fonts */

@font-face {
	font-family: "inter-regular";
	src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "inter-semibold";
	src: url("../fonts/inter-v20-latin-600.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "inter-bold";
	src: url("../fonts/inter-v20-latin-800.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "jetbrains-regular";
	src: url("../fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "jetbrains-bold";
	src: url("../fonts/jetbrains-mono-v24-latin-800.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

/* #endregion Fonts */

/* #region Variables */

:root {
    --fontface-primary-regular: inter-regular;
    --fontface-primary-bold: inter-semibold;
    --fontface-secondary-regular: jetbrains-regular;
    --fontface-secondary-bold: jetbrains-bold;

	--font-h1-big: clamp(2.5rem, 1.509rem + 4.955vw, 9.375rem); /* 40-150px */
	--font-h1: clamp(1.875rem, 1.6047rem + 1.3514vw, 3.75rem); /* 30-60 */
	--font-h2: clamp(1.5625rem, 1.3373rem + 1.1261vw, 3.125rem); /* 25-50 */
	--font-p: clamp(1.125rem, 0.9268rem + 0.991vw, 2.5rem); /* 18-40 */
	--font-p-small: clamp(0.875rem, 0.839rem + 0.1802vw, 1.125rem); /* 14-18 */
	--font-p-med: clamp(1.125rem, 1.0709rem + 0.2703vw, 1.5rem); /* 18-24 */
	--font-p-stoerer: clamp(0.6875rem, 0.6064rem + 0.4054vw, 1.25rem); /* 11 - 20 */

    --clr-primary: #000000;
	--clr-secondary: #ffffff;
	--clr-secondary-off: #E0E0E0;
    --clr-accent: #FF6500;

	--padder: clamp(1.25rem, 0.5293rem + 3.6036vw, 6.25rem);


}

/* #endregion Variables */

/* #region resets */


/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

video {
	max-width: 100%;
}

/* #endregion resets */

/* #region defaults */

body {
    font-family: var(--fontface-primary-regular);
    background-color: var(--clr-secondary);
    color: var(--clr-primary);
	line-height: 1.2;
}

a {
    color: var(--clr-primary);
}

strong {
	font-family: var(--fontface-primary-bold);
	font-weight: normal;
}

.btn {
	display: grid;
	max-width: fit-content;
	text-decoration: none;
	font-size: var(--font-p-small);
	background-color: var(--clr-primary);
	color: var(--clr-secondary-off);
	padding-inline: 1em;
	padding-block: .75em;
	border-radius: 70px;
	border: 1px solid var(--clr-primary);
	transition: .3s;
}

.btn:hover {
	background-color: var(--clr-secondary);
	color:var(--clr-primary);
}

.btn.contact {
	position: fixed;
	top: calc(.5*var(--padder));
	right: var(--padder);
	translate: 0vw;
	transition: .3s;
	z-index: 2;
}

.btn.contact {
    position: fixed;
    top: calc(.5*var(--padder));
    right: var(--padder);
    translate: 0vw;
    transition: .3s;
    z-index: 3;
    border-radius: 70px;
    background: var(--clr-secondary);
    color: var(--clr-primary);
	border: 1px solid var(--clr-primary);

}

.btn.contact:hover {
	background: var(--clr-accent);
	color: var(--clr-secondary);
	border-color: var(--clr-accent);
}

.btn.contact.come-in {
	translate: 0vw;
}

/* #endregion defaults */

/* #region fontsizes */

h1, h2, h3, h4 {
	margin-bottom: .5em;
}

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

h2 {
	font-size: var(--font-h2);
	font-family: var(--fontface-secondary-regular);
}

p {
	font-size: var(--font-p);
	padding-bottom: 1em;
}

p + .btn {
    margin-top: 1em;
}

/* Scroll indicator */
.scroll-indicator {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 8px;
	background: var(--clr-accent);
	animation: fill;
	animation-timeline: scroll();
	z-index: 1;
}

@keyframes fill {
	to {
		width: 100%;
	}
}

.scroll-to-action {
    position: fixed;
    inset: 0;
    z-index: 1;
    margin: auto;
    width: fit-content;
    height: fit-content;
    margin-bottom: 0;
    color: var(--clr-secondary);
    font-family: var(--fontface-secondary-regular);
    font-size: 14px;
	transition: opacity .3s;
	@media (max-width: 900px) {
		margin-bottom: calc(4*var(--padder));
	}
}

.down .scroll-to-action, .up .scroll-to-action {
	opacity: 0;
}

.scroll-to-action.fixed {
	color: var(--clr-primary);
	position: fixed;
	z-index: 0;
	margin-bottom: 0;
	transition: opacity .3s;
	transition-delay: 0s;
	.scroll-anim {
		background: var(--clr-primary);
		animation-iteration-count: infinite;
		animation: grow 1s infinite alternate-reverse;
		animation-play-state: paused;
	}
}

.up .scroll-to-action.fixed {
	opacity: 0;
}

body.is-scrolling .scroll-to-action.fixed .scroll-anim {
	animation-play-state: running;
}

.down .scroll-to-action.fixed {
	opacity: 1;
	transition-delay: .3s;
}


.scroll-anim {
	width: 2px;
	background: var(--clr-secondary);
	height: 50px;
	margin: auto;
	animation: grow;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

@keyframes grow {
	from {
		height:10px;
	}
	to {
		height: 50px;
	}
}

/* region header */

header {
	padding: calc(.75 * var(--padder)) var(--padder);
	position: fixed;
	width: 100%;
	z-index: 2;
	mix-blend-mode: difference;
}

/* #endregion header */

/* #region Logo */

.logowrapper {
	max-width: 170px;
	@media (max-width: 900px) {
		max-width: 120px;
	}
}

/* #endregion Logo */

/* #region Menue */

/* #endregion Menue */

/* #region main */



/* #endregion main */

/* #region hero */

.container.full.hero {
	position: relative;
	padding-block: 0;
	margin-bottom: var(--padder);
	z-index: 1;
	height: 100svh;
}

.hero h1 {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	color: var(--clr-secondary);
	font-size: var(--font-h1);
	text-align: center;
	background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0% / 0.8));
	background-size: cover;
	background-position: center;
	align-content: center;
	animation: fade-out both 1s;
	animation-delay: 3s;
}

.hero h1 span {
	padding-inline: var(--padder);
	max-width: min-content;
	display: block;
	margin: auto;
}

@keyframes fade-out {
	from { opacity: 1; }
	to { opacity: 0};
	
}

.hero video {
	width: 100%;
	object-fit: cover;
	height: 100svh;
}

/* .stoerer {
background-image: url('../images/stoerer-bg.svg');
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  max-width: max-content;
  position: absolute;
  bottom: 0px;
  right: 0;
  padding-inline: var(--padder);
  padding-left: calc(1.5*var(--padder));
  padding-block: calc(.25*var(--padder));
  
	@media (max-width: 900px) {
		padding-block: calc(.75*var(--padder));
		padding-left: calc(3*var(--padder));
	}
} */

.stoerer {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 966.8 100'%3E%3Cpath d='M966.8,100V0H97.1c-6.18,0-12.02,2.86-15.81,7.75L15.81,92.25c-3.79,4.89-9.63,7.75-15.81,7.75h966.8Z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat no-repeat;
	background-position: left center;
	background-size: cover;
	position: absolute;
	max-width: max-content;
	bottom: 0px;
	right: 0;
	padding-inline: var(--padder);
	padding-left: calc(1.5*var(--padder));
	padding-block: calc(.25*var(--padder));
	@media (max-width: 900px) {
		padding-block: calc(.75*var(--padder));
		padding-left: calc(3*var(--padder));
	}
}

.stoerer p strong {
	color: var(--clr-primary);
}

.stoerer p {
	color: var(--clr-accent);	
	padding-bottom: 0;
	font-size: var(--font-p-stoerer);	
}

/* #endregion hero */

/* #region container */

.container.full {
	padding-block: var(--padder);
	padding-inline: 0;
}

.container {
	padding-inline: var(--padder);
}

.container.teaser {
	display: grid;
	gap: var(--padder);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

/* #endregion container */

/* #region product story */

.product-story {
	/* Konstanter Abstand zwischen aktivem Teasertext und Bildsequenz. */
	--teaser-sequence-gap: clamp(1.5rem, 4vw, 3rem);
	/* Fallback, bevor JavaScript die exakte mobile Position berechnet. */
	--mobile-sequence-top: 45svh;
}

/*
 * Der gemeinsame Sticky-Teaser erzeugt weiterhin über seine View-Timeline
 * das boolesche --in-view. Die Aufbauanimation wird aber nur auf die
 * Elemente des ERSTEN Teasertexts angewendet.
 */
.teasertext {
	--in-view: false;
	display: grid;
	animation: teasertext-item-in-view both;
	animation-timeline: view();
	animation-range: entry 0% entry 200%;
}

@keyframes teasertext-item-in-view {
	from {
		--in-view: false;
	}
	to {
		--in-view: true;
	}
}

/* Alle Teasertexte liegen auf derselben Grid-Fläche. */
.teaser-copy {
	grid-area: 1 / 1;
	/* Wichtig für die Höhenmessung: nicht auf die Höhe der Grid-Zeile strecken. */
	align-self: start;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .4s ease,
		visibility 0s linear .4s;
}

.teaser-copy.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 1s ease,
		visibility 0s;
}

.teaser-copy p span {
	color: var(--clr-accent);
}

/*
 * Nur der erste Teaser bekommt die einmalige Aufbauanimation.
 * sibling-index() bestimmt die Position des Elements,
 * sibling-count() verteilt die Staffelung automatisch über .4s.
 * Dadurch bleibt das Timing auch bei 4, 5 ... Elementen stimmig.
 */
.teaser-copy:first-child > * {
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			--sibling-index: sibling-index();
			--sibling-count: sibling-count();

			animation: slide-in both 1s;
			animation-play-state: paused;
			animation-delay: calc((var(--sibling-index) - 1) * .4s / var(--sibling-count));

			@container style(--in-view: true) {
				animation-play-state: running;
			}
		}
	}
}

@keyframes slide-in {
	0%   { opacity: 0; translate: -10vw 0; }
	100% { opacity: 1; translate: 0 0; }
}

.sequence-list {
	min-width: 0;
	z-index: -1;
}

.teaservideo,
.scroll-container {
	translate: var(--padder);
}

.teaservideo img,
.scroll-container img {
	scale: 1.35;
	transform-origin: right;
	object-fit: contain;
	width: 100%;
}

.teasertext.sticky {
	top: 25svh;
	position: sticky;
	height: fit-content;
}

.scroll-container {
	height: calc(var(--count, 1) * 100svh);
	position: relative;
	width: 100%;
	z-index: -1;
}

.sequence-img {
	position: sticky;
	top: 35svh;
	width: 100%;
	opacity: 1;
	will-change: opacity;
}

@media (max-width: 900px) {
	/*
	 * Mobil darf der Teaser nicht in einer eigenen Grid-Zeile liegen.
	 * Als normaler Block-Container ist .container.teaser über die gesamte
	 * Höhe von Teaser + Sequenzen der Containing Block für position: sticky.
	 */
	.container.teaser {
		display: block;
	}

	.teaser-copy {
	min-height: 18lh;
}

	.teasertext.sticky {
		position: sticky;
		top: calc(5*var(--padder));
		z-index: 2;
	}

	.teaservideo img,
	.scroll-container img {
		scale: 1;
	}

	.sequence-list {
		/* Dieser Wert dient zugleich als exakt messbarer Abstand in JS. */
		margin-top: var(--teaser-sequence-gap);
	}

	.scroll-container {
		translate: 0;
	}

	/*
	 * Mobil sitzt die Bildsequenz etwas tiefer unter dem Sticky-Teaser.
	 * Das beeinflusst gleichzeitig automatisch den Punkt, an dem die
	 * Ausblendung im JavaScript beginnt.
	 */

	.sequence-img {
		top: var(--mobile-sequence-top);
		transition:
			top .45s ease,
			opacity .25s linear;
	}

}

/* #endregion product story */

/* #region footer */

footer {
	display: grid;
	background-color: var(--clr-primary);
	color: var(--clr-secondary);
	padding-top: calc(2*var(--padder));
	position: relative;
	min-height: 100dvh;
	z-index: 2;
	@media (max-width: 580px) {
		padding-top: calc(3*var(--padder));
	}	
}

.footer-logo {
	width: 100%;
	/* padding-block: var(--padder); */
	padding-top: var(--padder);
	/* padding-bottom: calc(2*var(--padder)); */
	@media (max-width: 580px) {
		/* padding-bottom: calc(6lh + 1*var(--padder)); */
	}
}

.footer-contact {
	padding: var(--padder);
	padding-top: 0;
	margin-bottom: var(--padder);
}

footer p {
	font-size: var(--font-p-med);
}

.grid.g-3 {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	padding-right: var(--padder);
	justify-content: end;
}

	@media (max-width: 580px) {
		.grid.g-3 {
			display: grid;
			gap: 0;
			justify-content: start;
			padding-inline: var(--padder);
		}		
	}

.footer-nav {
	position: absolute;
	bottom: calc(.5*var(--padder));
	left: var(--padder);
	@media (max-width: 900px) {
		position: relative;
		left: 0;
		padding-inline: var(--padder);
	}
}

nav ul {
	list-style: none;
	display: flex;
	gap: 1rem;
	padding-left: 0;
	@media (max-width: 900px) {
		display: grid;
	}
}

nav ul a {
	text-wrap: balance;
	display: block;
}

a:hover {
	color: var(--clr-accent);
}

/* #endregion footer */