/* Slides -------------------------------------------------------------------------------*/
:root {
	--header-h: 88px;
}

body.block-scroll {
	overflow: hidden;
}

.mask-wrapper {
	position: fixed;
	inset: 0;
	z-index: 10;
	pointer-events: none;
}

.inverted-mask {
	width: 100%;
	height: 100%;
	display: block;
}

.point {
	width: 20px;
	height: 20px;
	background: var(--theim-black);
	border-radius: 50%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 0;
	will-change: transform;
}
#skills-replay {
	position: absolute;
	left: calc(55px + env(safe-area-inset-left, 0px) - ((100vw - 100%) / 2));
	bottom: calc(58px + env(safe-area-inset-bottom, 0px));
	z-index: 1000;
	width: 80px;
	height: 80px;
	display: inline-grid;
	place-items: center;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	appearance: none;
	line-height: 0;
	cursor: pointer;
	/* weich ein-/ausblenden; Hover-Scale kommt auf .is-visible */
	opacity: 0;
	pointer-events: none;
	transform: translateZ(0);
	transition: opacity .25s ease, transform .2s ease;
}

	/* Sichtbar, wenn JS .is-visible setzt */
	#skills-replay.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

/* Hover-Effekt (nur Desktop sinnvoll) */
@media (hover: hover) and (pointer: fine) {
	#skills-replay.is-visible:hover {
		transform: scale(1.06);
	}
}

/* Bild auf die Fläche spannen */
#skills-replay img {
	width: 100%;
	height: auto;
	display: block;
}

/* Fokus sichtbar machen (Tastatur) */
#skills-replay:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
	border-radius: 9999px;
}

.scene {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	z-index: 30;
	opacity: 0;
}

.scene-inner {
	display: flex;
	align-items: center;
	gap: 5rem;
}

.step-text {
	max-width: 400px;
	opacity: 0;
	transform: translateY(50px);
}

.step-icon {
	width: auto;
	height: clamp(270px, 30vw, 380px);
	opacity: 0;
	transform: translateY(50px);
	display: block;
}

.icon-container-l {
	position: relative;
	line-height: 0;
}

.icon-container-r {
	position: relative;
	line-height: 0;
	order: 2;
}

.target-point {
	position: absolute;
	width: 1px;
	height: 1px;
	transform: translate(-50%, -50%);
}

#zielpunkt-beratung {
	top: 34.2%;
	left: 49.7%;
}

#zielpunkt-workshop {
	top: 36.6%;
	left: 49%;
}

#zielpunkt-strategie {
	top: 15.8%;
	left: 28.5%;
}

#zielpunkt-konzept {
	top: 49.8%;
	left: 50.2%;
}

#zielpunkt-realisation {
	top: 24.4%;
	left: 30%;
}

#zielpunkt-produktion {
	top: 64.2%;
	left: 17%;
}

#skills-start {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - var(--header-h));
	transform: translateY(-2%);
	padding-block: 4rem;
	overflow: visible;
}

	#skills-start .flow {
		max-width: var(--measure, 72ch);
		margin-inline: auto;
	}

[id$="-icon"], [id$="-text"] {
	transform: translateY(200px);
	opacity: 0;
}

#produktion-scene .icon-container-r {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center; /* Hint zentriert unter/über dem Icon */
	gap: 0; /* Abstand steuern wir am Hint */
}

	/* Baseline-Fix, damit kein Inline-Gap vom <picture>/<img> dazwischenfunkt */
	#produktion-scene .icon-container-r picture,
	#produktion-scene .icon-container-r img {
		display: block;
	}

/* Hint in Flow (NICHT absolut), kompakt halten */
#produktion-scene .swipe-hint--near-icon {
	position: static; /* überschreibt absolute */
	left: auto;
	bottom: auto; /* sicherheitshalber reset */
	transform: none;
	padding: .4rem .8rem; /* kein großes vertikales Padding */
	margin: 0;
	white-space: nowrap;
}

	/* Variante: knapp UNTER dem Icon */
	#produktion-scene .swipe-hint--near-icon.is-below {
		margin-top: 0; /* keine zusätzliche Lücke */
		transform: translateY(clamp(-14px, -2.2svh, -6px)); /* stabil über Geräte */
		will-change: transform;
	}


/* Carousel ----------------------------------------------------------------------------------*/

.services-carousel {
	--tile-min: 200px;
	--tile-max: 480px;
	--tiles-visible: 3;
	--gap: clamp(16px, 3vw, 32px);
	--side-pad: clamp(24px, 6vw, 72px);
	--tile-ratio: 569/712;
	--tile-inv-ratio: calc(712/569);
	--tile-w: clamp( var(--tile-min), calc((100vw - 2 * var(--side-pad) - (var(--tiles-visible) - 1) * var(--gap)) / var(--tiles-visible)), var(--tile-max) );
	background: var(--theim-black);
	color: white;
	padding: 0;
	isolation: isolate;
	--section-pad: clamp(48px, 8vw, 160px);
	padding-block: var(--section-pad);
	min-height: max( calc( (var(--tile-w) / var(--tile-ratio)) + (2 * var(--section-pad)) ), 100svh );
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: clip;
}

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

.services-carousel .tile > svg {
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	position: absolute;
	inset: -2px;
	z-index: 1;
}

.services-carousel .tile svg,
.services-carousel .tile svg * {
	transform-box: fill-box;
}

.services-carousel h1.label {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 2;
	transition: opacity .3s ease;
}

#printLabel {
	--x: 71%;
	--y: 71%;
}

#webLabel {
	--x: 32%;
	--y: 74%;
}

#socialLabel {
	--x: 29%;
	--y: 35%;
}

#appsLabel {
	--x: 35%;
	--y: 60%;
}

#filmLabel {
	--x: 24%;
	--y: 88%;
}

#dreiDLabel {
	--x: 59%;
	--y: 68%;
}

#fotoLabel {
	--x: 50.00%;
	--y: 50.00%;
}

#messeLabel {
	--x: 75%;
	--y: 49%;
}

#eventLabel {
	--x: 46%;
	--y: 88%;
}

#campaignLabel {
	--x: 40%;
	--y: 9%;
}

.services-carousel p.description {
	margin: 0;
	opacity: 0;
	z-index: 2;
	transition: opacity 0.3s ease;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	max-width: 80%;
	padding: 0;
}

.services-carousel .carousel {
  display: grid;
  grid-template-columns:
    var(--side-pad)
    minmax(0, calc(var(--tile-w) * var(--tiles-visible) + var(--gap) * (var(--tiles-visible) - 1)))
    var(--side-pad);
  align-items: center;
  width: 100%;
  margin: 0 auto;
}


.services-carousel .carousel__viewport {
	grid-column: 2;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	touch-action: pan-x;
	overscroll-behavior-x: contain;
	scrollbar-gutter: stable;
	padding-inline: 0;
	scroll-padding-inline: 0;
	scrollbar-gutter: stable both-edges;
}

@media (prefers-reduced-motion: reduce) {
	.services-carousel .carousel__viewport {
		scroll-behavior: auto;
	}
}

.services-carousel .carousel__viewport::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.services-carousel .carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gap);
	padding-bottom: 8px;
}

.services-carousel .tile {
	flex: 0 0 var(--tile-w);
	min-width: var(--tile-min);
	aspect-ratio: var(--tile-ratio);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	background: var(--theim-black);
	border: 2px solid white;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	pointer-events: auto;
}
.services-carousel .tile * {
	pointer-events: none;
}

.services-carousel .carousel__btn--prev {
	grid-column: 1;
	justify-self: end;
	margin-right: 16px;
}

.services-carousel .carousel__btn--next {
	grid-column: 3;
	justify-self: start;
	margin-left: 16px;
}

.section-pad-xl {
	padding-block: clamp(96px, 12vw, 240px);
}

/* Breakpoint 0: riesen Desktops */
@media (max-width: 1700px) {
	.services-carousel {
		--side-pad: clamp(60px, 10vw, 160px);
	}
}

/* Breakpoint 1: grosse Desktops */
@media (max-width: 1400px) {
	.scene {
		margin-top: 3em;
	}

	.scene-inner {
		gap: 3rem;
	}
}

/* Breakpoint 2: kleinere Desktops / große Tablets (≤1200px) */
@media (max-width: 1200px) {
	#skills-replay {
		left: calc(45px + env(safe-area-inset-left, 0px) - ((100vw - 100%) / 2));
		bottom: calc(54px + env(safe-area-inset-bottom, 0px));
		width: 70px;
		height: 70px;
	}
}

@media (max-width: 1050px) {
	.services-carousel {
		--tiles-visible: 2;
	}

	.services-carousel {
		--side-pad: clamp(96px, 12vw, 240px);
	}
}

/* Breakpoint 3: Tablets quer (≤992px) */
@media (max-width: 992px) {
	#skills-replay {
		bottom: calc(54px + env(safe-area-inset-bottom, 0px));
		width: 60px;
		height: 60px;
	}
}

@media (min-width: 769px) {
	.swipe-hint {
		display: none !important;
	}
}

/* Desktop/Tablet quer: immer horizontal */
@media (min-width: 769px) {

	.services-carousel .carousel {
		grid-template-columns: var(--side-pad) minmax(0, calc(var(--tile-w) * var(--tiles-visible) + var(--gap) * (var(--tiles-visible) - 1))) var(--side-pad);
		/* natürliche Breite, dann zentrieren */
		width: max-content;
		margin-inline: auto;
	}

	.services-carousel .carousel__viewport {
		grid-column: 2;
		inline-size: 100%;
		block-size: auto !important;
		padding-inline: 0;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		touch-action: pan-x;
	}

	.services-carousel .carousel__track {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}
	.services-carousel .carousel__btn--prev {
		grid-column: 1;
		justify-self: end;
		margin-right: 16px;
	}

	.services-carousel .carousel__btn--next {
		grid-column: 3;
		justify-self: start;
		margin-left: 16px;
	}
}


/* Breakpoint 4: Tablets hoch / große Smartphones (≤768px) */
@media (max-width: 768px) {
	#skills-replay {
		left: calc(40px + env(safe-area-inset-left, 0px) - ((100vw - 100%) / 2));
		bottom: calc(68px + env(safe-area-inset-bottom, 0px));
		width: 50px;
		height: 50px;
	}
	.mask-wrapper, .inverted-mask, .point {
		display: none !important;
	}
	#skills-replay {
		display: none;
	}
	.slides-viewport {
		/* Hint-Abstand (Basiswert für ≤768px) */
		--hint-offset: clamp(16px, 4vh, 40px);
		position: relative;
		isolation: isolate;
		background: #fff;
		box-shadow: 0 0 0 100vmax #fff;
		clip-path: inset(0 -100vmax);
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y pinch-zoom;
	}

		.slides-viewport .swipe-hint {
			position: absolute;
			left: 50%;
			top: var(--hint-offset);
			bottom: auto; /* falls irgendwo bottom gesetzt ist */
			transform: translateX(-50%);
			z-index: 2;
			pointer-events: none;
			white-space: nowrap;
			font-weight: 700;
			font-size: 2.2rem;
			color: var(--theim-red);
			animation: fade-in-out 1.2s ease-in-out infinite;
		}

	.slides-track {
		display: flex;
		gap: clamp(60px, 7vw, 100px);
	}

		.slides-track .scene {
			position: relative !important;
			inset: auto !important;
			opacity: 1 !important;
			pointer-events: auto !important;
			min-width: 100%;
			scroll-snap-align: start;
			scroll-snap-stop: always;
			display: flex !important;
			flex-direction: column;
			justify-content: center;
			min-height: calc(100svh - var(--header-h));
			padding-block: clamp(32px, 8vh, 64px);
		}

	.scene-inner {
		display: grid !important;
		grid-template-rows: auto auto;
		gap: 1rem;
		justify-items: stretch !important;
	}

	.icon-container-l,
	.icon-container-r {
		order: 0;
		justify-self: center;
		width: auto;
		text-align: center;
	}

	.step-icon {
		display: block;
		margin-inline: auto;
	}

	.slides-viewport .step-text {
		justify-self: stretch;
		width: 100%;
		max-width: none;
		text-align: left;
		margin: 0;
	}

	.step-text {
		max-width: 100%;
	}

	[id$="-icon"], [id$="-text"] {
		opacity: 1 !important;
		transform: none !important;
	}

	.target-point {
		display: none !important;
	}

	#skills-start {
		min-height: auto !important;
		transform: none !important;
		padding-block: 15rem !important;
	}

	/* Bewegungs-Reduktion (nur für diesen Breakpoint) */
	@media (prefers-reduced-motion: reduce) {
		.slides-viewport .swipe-hint {
			animation: none;
		}
	}

	.services-carousel {
		--tiles-visible: 1;
		--side-pad: clamp(16px, 4vw, 40px);
		--mobile-tile-max: 500px;
	}

		.services-carousel .carousel {
			grid-template-columns: minmax(0,1fr);
			grid-template-rows: auto auto auto;
			align-items: stretch;
			width: 100%;
			max-width: 720px;
			margin: 0 auto;
			min-height: 0;
			padding-inline: var(--side-pad);
		}

		.services-carousel .carousel__btn {
			grid-column: 1;
			justify-self: center;
			margin: 0;
		}

		.services-carousel .carousel__btn--prev {
			grid-row: 1;
		}

		.services-carousel .carousel__btn--next {
			grid-row: 3;
		}

		.services-carousel .carousel__btn--prev .chevron {
			transform: rotate(-270deg);
		}

		.services-carousel .carousel__btn--next .chevron {
			transform: rotate(90deg);
		}

		/* Viewport: exakt 1 Kachel hoch, eigene lokale Variablen */
		.services-carousel .carousel__viewport {
			--tile-w-local: min(calc(100% - 2 * var(--side-pad)), var(--mobile-tile-max));
			--tile-h-local: calc(var(--tile-w-local) * var(--tile-inv-ratio));
			grid-column: 1;
			grid-row: 2;
			inline-size: var(--tile-w-local);
			block-size: calc(var(--tile-h-local) + var(--gap));
			min-block-size: calc(var(--tile-h-local) + var(--gap));
			max-block-size: calc(var(--tile-h-local) + var(--gap));
			padding-block-end: var(--gap);
			height: var(--tile-h-local);
			min-height: 0;
			padding-inline: var(--side-pad);
			overflow-x: hidden !important;
			overflow-y: auto !important;
			overscroll-behavior: contain;
			scroll-snap-type: y mandatory !important;
			touch-action: pan-y;
			margin-inline: auto;
		}

		.services-carousel .carousel__track {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			padding: 0;
		}

		.services-carousel .tile {
			inline-size: var(--tile-w-local);
			block-size: var(--tile-h-local);
			margin-inline: auto;
			min-width: 0;
			flex: 0 0 auto;
			scroll-snap-align: start;
			cursor: pointer;
			margin-block: 0;
		}

			.services-carousel .tile:not(:last-child) {
				margin-block-end: var(--gap);
			}

		.services-carousel .carousel {
			/* ist bereits Grid – nur die Zeilen anpassen */
			grid-template-rows: auto auto auto min-content;
		}

		/* Hint unter dem unteren Pfeil (grid-row: 4) */
		.services-carousel .swipe-hint--touch {
			/* Basis von .swipe-hint bleibt (Typo, Farbe, Animation etc.) */
			position: static; /* NICHT absolut → nimmt eigene Grid-Zeile ein */
			grid-column: 1;
			grid-row: 4; /* sitzt unter .carousel__btn--next (row 3) */
			justify-self: center;
			margin-top: -2em;
			/* sichtbar nur auf Mobile */
			opacity: 1;
			visibility: visible;
			/* zur Sicherheit, falls du vorher absolute Styles gesetzt hattest */
			left: auto;
			right: auto;
			top: auto;
			bottom: auto;
			transform: none;
			pointer-events: none; /* blockiert keine Taps auf die Kachel */
			white-space: nowrap;
		}

			/* Optional: Größe auf Mobile anpassen */
			.services-carousel .swipe-hint--touch span {
				font-size: 2.2rem;
				font-weight: 700;
				color: var(--theim-red);
			}

			.services-carousel .swipe-hint--touch.is-hidden {
				animation: none;
				opacity: 0;
				visibility: hidden;
			}

	/* Bewegungs-Reduktion respektieren */
	@media (prefers-reduced-motion: reduce) {
		.services-carousel .swipe-hint--touch {
			animation: none;
		}
	}
}


/* Global (optional) */
@keyframes fade-in-out {
	0%,100% {
		opacity: .35
	}

	50% {
		opacity: 1
	}
}

@media (prefers-reduced-motion: reduce) {
	.swipe-hint {
		animation: none;
		opacity: .8;
	}
}

/* Breakpoint 5: Smartphones (≤576px) */
@media (max-width: 576px) {
	#skills-replay {
		left: calc(25px + env(safe-area-inset-left, 0px) - ((100vw - 100%) / 2));
		bottom: calc(53px + env(safe-area-inset-bottom, 0px));
		width: 44px;
		height: 44px;
	}
	.slides-viewport {
		--hint-offset: clamp(10px, 2vh, 20px);
	}
	.services-carousel {
		--mobile-tile-max: 440px;
		/* Weniger vertikales Padding */
		--section-pad: clamp(120px, 12vw, 160px);
		/* min-height nicht mehr an 100svh koppeln */
		min-height: auto;
	}
	.slides-viewport .swipe-hint {
		font-size: 2rem;
	}
	.services-carousel .swipe-hint--touch span {
		font-size: 2rem;
	}
}

/* Breakpoint 6: sehr schmale Smartphones */
@media (max-width: 420px) {
	.slides-viewport {
		--hint-offset: clamp(0px, 0.1vh, 1px);
	}

		.slides-viewport .swipe-hint {
			font-size: 1.7rem;
		}

	.step-icon {
		width: auto;
		height: clamp(200px, 20vw, 300px);
	}

	#skills-start {
		padding-block: 6rem !important;
	}
	.services-carousel .swipe-hint--touch span {
		font-size: 1.7rem;
	}
}