/* ============================================================
   1225 Digital Design — full page styles
   ============================================================ */

:root {
	--green:    #1B4136;
	--green-2:  #0f2a23;
	--gold:     #C19A48;
	--gold-2:   #a88336;
	--ink:      #131515;
	--light:    #F5F8F6;
	--white:    #FFFFFF;
	--burgundy: #561519;
	--cream:    #d0bba9;
	--brown:    #704632;
	--mute:     rgba(255,255,255,0.6);
	--radius:   24px;
	--radius-pill: 100px;
	--max-w:    1280px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--light); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 64px; }
.text-gold { color: var(--gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 36px;
	background: var(--gold);
	border: none;
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: 'Archivo Black', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s, background .2s;
}
.btn-cta:hover { background: var(--gold-2); transform: translateY(-2px); }
.btn-cta--gold { background: var(--gold); color: var(--ink); }

.btn-nav {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	background: transparent;
	border: 1.5px solid var(--gold);
	border-radius: var(--radius-pill);
	color: var(--gold);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.btn-nav:hover { background: var(--gold); color: var(--ink); }

/* ============================================================
   00 — SITE HEADER  ·  Pixel-perfect from Figma Dev-Mode
   Frame: 1280×104, bg #F5F8F6
   ============================================================ */
.one225-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100vw;
	background: #F5F8F6;
	height: 104px;
	overflow: visible;
}
/* Spacer so the content below header doesn't slide under it */
body.one225-home { padding-top: 104px; }
@media (max-width: 768px) {
	body.one225-home { padding-top: 64px; }
}
.one225-header__inner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: 100%;
	margin: 0 auto;
}

/* Logo at left:64px top:38px, 104×43 */
.one225-header__logo {
	position: absolute;
	left: 64px;
	top: 38px;
	width: 104px;
	height: 43px;
	display: block;
}
.one225-header__logo img {
	width: 104px;
	height: 43px;
	display: block;
}

/* Nav container at left:279px top:29px
   padding 16×75, gap 40 — no blur/bg, header stays uniform colour */
.one225-header__nav {
	position: absolute;
	left: 279px;
	top: 29px;
	padding: 16px 75px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	background: transparent;
}
.one225-header__nav a {
	color: #131515 !important;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 29px;
	text-decoration: none !important;
	text-align: center;
	white-space: nowrap;
}
.one225-header__nav a:hover { color: #C19A48 !important; }

/* CTA "Projekt besprechen" — gold, underline */
.one225-header__cta,
.one225-header a.one225-header__cta {
	position: absolute;
	left: 993px;
	top: 48px;
	color: #C19A48 !important;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 19.2px;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	white-space: nowrap;
}
.one225-header__cta:hover { color: #a88336 !important; }

/* Responsive: when viewport < 1280, scale down via simpler flex layout */
@media (max-width: 1279px) {
	.one225-header__inner {
		padding: 0 24px;
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 24px;
		align-items: center;
	}
	.one225-header__logo {
		position: static;
		grid-column: 1;
	}
	.one225-header__nav {
		position: static;
		grid-column: 2;
		padding: 12px 32px;
		gap: 28px;
		justify-self: center;
	}
	.one225-header__cta {
		position: static;
		grid-column: 3;
	}
}
@media (max-width: 768px) {
	.one225-header { height: 64px; }
	.one225-header__logo img { width: auto; height: 32px; }
	.one225-header__nav { display: none; }
	.one225-header__cta { font-size: 16px; }
}

/* ============================================================
   01 — HERO  ·  Pixel-perfect from Figma node 0:504 (1280×1232 — minus header 104)
   ============================================================ */
.hero--figma {
	background: #1B4136;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
}
.hero--figma .hero__frame {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	aspect-ratio: 1280 / 1232; /* 1336 - 104 header */
	container-type: inline-size;
	font-family: 'Manrope', 'Inter', system-ui, sans-serif;
	color: #F5F8F6;
}

/* Coordinates remapped: original Figma Y minus 104 (header height removed),
   divided by new height 1232. X coords stay the same (1280 width). */

/* Eyebrow "Alles greift ineinander." Figma x=897 y=201 → y_local=97 */
.hero--figma .hero__eyebrow {
	position: absolute;
	left: 70.08%;       /* 897/1280 */
	top: 7.87%;         /* 97/1232 */
	color: #F5F8F6;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-size: 1.875cqw;
	font-weight: 700;
	line-height: 1.115;
	letter-spacing: -0.005em;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Pillars glass-bar (Figma 0:541) — fully transparent, just a subtle blur layer */
.hero--figma .hero__pillars-bar {
	position: absolute;
	left: 4.84%;        /* 62/1280 */
	top: 10.71%;        /* 132/1232 */
	width: 89.92%;      /* 1151/1280 */
	height: 6%;         /* 74/1232 */
	background: transparent;
	border: 0;
	border-radius: 8px;
	backdrop-filter: blur(35px);
	-webkit-backdrop-filter: blur(35px);
	pointer-events: none;
	z-index: 0;
}

/* 5 PILLARS Figma y=273 (center-y) → local 169. Glass-bar 132–206, center 169 */
.hero--figma .hero__pillars {
	position: absolute;
	left: 0;
	top: 13.72%;        /* 169/1232 (text baseline center) */
	width: 100%;
	height: 4.7%;       /* 58/1232 */
	transform: translateY(-50%);
	z-index: 1;
}
.hero--figma .hero__pillars span {
	position: absolute;
	top: 0;
	font-family: 'Manrope', 'Cygre', sans-serif;
	font-weight: 500;
	font-size: 3.125cqw;
	line-height: 1;
	letter-spacing: -0.005em;
	color: #C19A48;
	white-space: nowrap;
}

/* H1 Figma x=62 y=350 → 246, w=1148 h=288 */
.hero--figma .hero__title {
	position: absolute;
	left: 4.84%;
	top: 19.97%;        /* 246/1232 */
	width: 89.69%;
	margin: 0;
	padding: 0;
	color: #F5F8F6 !important;
	-webkit-text-fill-color: #F5F8F6;
	background: none;
	font-family: 'Archivo Black', sans-serif;
	font-size: 12.5cqw;
	font-weight: 400;
	line-height: 90%;
	letter-spacing: -0.07em;
	text-transform: uppercase;
	word-wrap: break-word;
	z-index: 1;
}

/* Cube Figma x=654 y=536 611×611 → y_local=432
   Slight ZOOM: width 58% (was 52%) + slow float-rotate animation */
.hero--figma .hero__cube {
	position: absolute;
	left: 46%;
	top: 30%;
	width: 58%;
	height: auto;
	aspect-ratio: 1;
	z-index: 1;
	pointer-events: none;
	object-fit: contain;
	transform-origin: center center;
	filter: drop-shadow(0 32px 80px rgba(193, 154, 72, 0.22))
	        drop-shadow(0 0 48px rgba(245, 248, 246, 0.08));
	will-change: transform;
	/* Continuous slow spin around its own axis */
	animation: hero-cube-spin 18s linear infinite;
}
@keyframes hero-cube-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.hero--figma .hero__cube { animation: none; }
}

/* Subtitle Figma x=58 y=702 → 598, w=672 */
.hero--figma .hero__sub {
	position: absolute;
	left: 4.53%;
	top: 48.54%;        /* 598/1232 */
	width: 52.5%;
	margin: 0;
	color: #F5F8F6;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-size: 2.5cqw;
	font-weight: 700;
	line-height: 1.115;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	z-index: 2;
}

/* Button Figma x=58 y=913 → 809, 500×110, r=24, Cygre Bold 40 line-height 0.8 */
.hero--figma .hero__btn {
	position: absolute;
	left: 4.53%;
	top: 65.67%;        /* 809/1232 */
	width: 39.06%;
	height: 8.93%;      /* 110/1232 */
	background: #C19A48;
	color: #FFFFFF;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 3.125cqw;
	line-height: 0.8;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	transition: background .2s ease, transform .2s ease;
	text-decoration: none;
	z-index: 2;
}
.hero--figma .hero__btn:hover { background: #a88336; transform: translateY(-2px); }

/* Note italic Figma x=62 y=1032 → 928, right=calc(50%+82) → w=660 */
.hero--figma .hero__note {
	position: absolute;
	left: 4.84%;
	top: 75.32%;        /* 928/1232 */
	width: 51.56%;      /* (722-62)/1280 = 51.56% */
	margin: 0;
	color: #F5F8F6;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-style: italic;
	font-size: 1.875cqw;
	font-weight: 400;
	line-height: 1.115;
	letter-spacing: -0.005em;
	z-index: 2;
}

/* Tag Figma x=630 y=1194 → 1090, w=583, ALIGN-LEFT (Alexander) */
.hero--figma .hero__tag {
	position: absolute;
	left: 49.22%;       /* 630/1280 */
	top: 88.47%;        /* 1090/1232 */
	width: 45.55%;      /* 583/1280 */
	margin: 0;
	color: #C19A48;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-size: 2.5cqw;
	font-weight: 700;
	line-height: 1.115;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	text-align: left;
	z-index: 2;
}

/* MOBILE — drop pixel-perfect for narrow widths, stack normally */
@media (max-width: 768px) {
	.hero--figma .hero__frame {
		aspect-ratio: auto;
		min-height: 100vh;
		max-width: 100%;
	}
	.hero--figma .hero__pillars-bar { display: none; }
	.hero--figma .hero__header,
	.hero--figma .hero__logo,
	.hero--figma .hero__nav,
	.hero--figma .hero__nav-cta,
	.hero--figma .hero__eyebrow,
	.hero--figma .hero__pillars,
	.hero--figma .hero__title,
	.hero--figma .hero__cube,
	.hero--figma .hero__sub,
	.hero--figma .hero__btn,
	.hero--figma .hero__note,
	.hero--figma .hero__tag {
		position: static;
		width: auto;
		height: auto;
		left: auto;
		top: auto;
		transform: none;
		margin: 0;
	}
	.hero--figma .hero__frame {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 16px 20px 40px;
		background: #1B4136;
	}
	.hero--figma .hero__header {
		background: #F5F8F6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14px 20px;
		margin: -16px -20px 16px;
	}
	.hero--figma .hero__nav { display: none; }
	.hero--figma .hero__pillars { display: flex; flex-wrap: wrap; gap: 8px 16px; }
	.hero--figma .hero__pillars span { font-size: 18px; }
	.hero--figma .hero__title { font-size: 56px; }
	.hero--figma .hero__cube { width: 60%; align-self: center; margin: 16px auto; }
	.hero--figma .hero__sub { font-size: 16px; }
	.hero--figma .hero__btn { padding: 18px 32px; font-size: 16px; }
	.hero--figma .hero__tag { font-size: 16px; }
}

/* ============================================================
   01-old — TOPBAR (light, above hero)
   (kept harmless; new hero owns its own header)
   ============================================================ */
.topbar {
	background: var(--white);
	border-bottom: 1px solid rgba(19,21,21,0.08);
	position: sticky;
	top: 0;
	z-index: 100;
}
.topbar__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 18px 48px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 32px;
	align-items: center;
}
.brand {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	color: var(--ink);
}
.brand__img {
	height: 38px;
	width: auto;
	display: block;
}
@media (max-width: 768px) {
	.brand__img { height: 32px; }
}
.topbar__nav {
	display: flex;
	justify-content: center;
	gap: 36px;
}
.topbar__nav a {
	font-size: 14px;
	color: var(--ink);
	opacity: 0.85;
	transition: opacity .2s, color .2s;
}
.topbar__nav a:hover { opacity: 1; color: var(--gold); }
.topbar__cta {
	font-size: 14px;
	color: var(--gold);
	font-weight: 500;
	letter-spacing: 0.02em;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.topbar__cta:hover { border-bottom-color: var(--gold); }

/* ============================================================
   01b — HERO (dark green, Figma-pixel)
   ============================================================ */
.hero {
	background: var(--green);
	color: var(--light);
	position: relative;
	overflow: hidden;
}
.hero__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 64px 48px 80px;
	position: relative;
}

.hero__eyebrow {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ffffff;
	text-align: right;
	margin-bottom: 28px;
	font-weight: 500;
}

.hero__pillars {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin: 0 0 56px;
	padding: 0;
}
.hero__pillars li {
	font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(20px, 1.9vw, 28px);
	font-weight: 400;
	color: var(--gold);
	letter-spacing: -0.01em;
}

.hero__main {
	display: block;
	min-height: 460px;
	position: relative;
}
.hero__col {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	max-width: 1148px;
	position: relative;
	z-index: 1;
}
/* Defend against Hello Elementor heading defaults (dark colour) */
.hero .hero__title,
h1.hero__title {
	color: #F5F8F6 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(44px, 8.5vw, 128px);
	line-height: 0.9;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	background: none;
	-webkit-text-fill-color: #F5F8F6;
	display: block;
	position: relative;
	z-index: 1;
}
.hero .hero__title span,
h1.hero__title span {
	display: block;
	white-space: nowrap;
	color: #F5F8F6 !important;
	-webkit-text-fill-color: #F5F8F6;
}
@media (max-width: 640px) {
	.hero .hero__title span,
	h1.hero__title span { white-space: normal; }
}

.hero__sub {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #ffffff;
	max-width: 560px;
	margin: 0;
}

.btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 22px 56px;
	background: var(--gold);
	color: #ffffff;
	font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 500;
	border-radius: 16px;
	border: 0;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
	align-self: flex-start;
	text-decoration: none;
	letter-spacing: -0.005em;
}
.btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); color: #ffffff; }

.hero__note {
	font-family: 'Space Grotesk', sans-serif;
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
	color: #ffffff;
	opacity: 1;
	margin: 0;
	max-width: 360px;
}

.hero__art {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-40%);
	bottom: auto;
	width: 480px;
	max-width: 42%;
	aspect-ratio: 1 / 1;
	pointer-events: none;
	z-index: 3; /* cube ABOVE the title */
}
.hero__art-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 16px 48px rgba(0,0,0,0.25));
}
@media (max-width: 1024px) {
	.hero__main { grid-template-columns: 1fr; gap: 24px; }
	.hero__art { max-width: 320px; margin: 0 auto; justify-self: center; }
}

.hero__tag {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(14px, 1.4vw, 22px);
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--gold);
	text-align: right;
	margin: 80px 0 0;
}

/* --- Old .nav/.hero__body residue, kept harmless --- */
.nav { display: none; }
.hero__body, .hero__footer, .hero__chips, .chip, .hero__visual, .hero__photo, .hero__subtitle, .hero__text {
	/* deprecated old hero classes — neutralized */
}

/* RESPONSIVE HERO */
@media (max-width: 1024px) {
	.hero__main { grid-template-columns: 1fr; gap: 32px; }
	.hero__art { margin-top: 0; max-width: 360px; justify-self: center; }
	.hero__pillars { gap: 24px; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 768px) {
	.topbar__inner { padding: 14px 20px; gap: 16px; }
	.topbar__nav { display: none; }
	.hero__inner { padding: 40px 20px 56px; }
	.hero__eyebrow { text-align: left; }
	.hero__pillars { font-size: 18px; gap: 14px 18px; }
	.hero__title { font-size: clamp(48px, 14vw, 80px); }
	.hero__tag { text-align: left; }
	.btn-gold { padding: 18px 36px; font-size: 16px; }
}

/* unused — to satisfy original page selectors */
.hero__footer { display: none; }
.hero__footer p {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(24px, 3vw, 36px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--gold);
	text-transform: uppercase;
	max-width: 720px;
}

/* ============================================================
   02 — PAIN
   ============================================================ */
.pain,
.forma,
.cases,
.testimonials,
.cta-big,
.about,
.services,
.ablauf,
.faq,
.anfrage,
.finale {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* ============================================================
   02 — PAIN  ·  Pixel-perfect from Figma node 0:605 (1280×1786)
   ============================================================ */
.pain--figma {
	background: #F5F8F6;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
}
.pain--figma .pain__frame {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	aspect-ratio: 1280 / 1786;
	container-type: inline-size;
}

/* Title H2 — Figma x=64 y=61, w=1148 h=172
   Archivo Black 96 / 86.4lh / 400w / -6.72ls / #131515 */
.pain--figma .pain__title {
	position: absolute;
	left: 5%;            /* 64/1280 */
	top: 3.42%;          /* 61/1786 */
	width: 89.69%;       /* 1148/1280 */
	margin: 0;
	color: #131515 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 7.5cqw;   /* 96/1280 */
	line-height: 90%;    /* 86.4/96 */
	letter-spacing: -0.07em;  /* -6.72/96 */
	text-transform: uppercase;
}

/* Eyebrow "Kommt Ihnen das bekannt vor?" — x=65 y=333
   Cygre 48 / 43.2lh / 700w / -3.36ls / #C19A48 */
.pain--figma .pain__eyebrow {
	position: absolute;
	left: 5.08%;
	top: 18.65%;         /* 333/1786 */
	width: 56.64%;       /* 725/1280 */
	margin: 0;
	color: #C19A48;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 3.75cqw;  /* 48/1280 */
	line-height: 0.9;
	letter-spacing: -0.07em;
	text-transform: uppercase;
}

/* Cards container — y=426..1126 (700 height) */
.pain--figma .pain__cards {
	position: absolute;
	left: 0;
	top: 23.85%;         /* 426/1786 */
	width: 100%;
	height: 39.19%;      /* 700/1786 */
}

/* Card base — cream gradient like Figma 0:610 */
.pain--figma .pain__card {
	position: absolute;
	background: linear-gradient(251.4deg, #F5F5F3 4.33%, #EAE6DF 96.69%);
	box-shadow: 6px 8px 2.4px rgba(0,0,0,0.25);
	padding: 3.75cqw 1.95cqw;
	display: flex;
	flex-direction: column;
	gap: 1.1cqw;
	transition: opacity .7s cubic-bezier(.22,.61,.36,1),
	            transform .7s cubic-bezier(.22,.61,.36,1),
	            box-shadow .35s ease;
	will-change: transform, opacity;
}
.pain--figma .pain__card.is-reveal {
	opacity: 0;
	transform: translateY(28px);
}
.pain--figma .pain__card.is-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}
.pain--figma .pain__card:hover {
	box-shadow: 10px 14px 4px rgba(0,0,0,0.28),
	            0 0 0 1px rgba(193, 154, 72, 0.18);
}
.pain--figma .pain__card h3 {
	margin: 0;
	color: #131515;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 2.5cqw;       /* 32/1280 */
	line-height: 0.9;
	letter-spacing: -0.07em;
	text-transform: uppercase;
}
.pain--figma .pain__card p {
	margin: 0;
	color: #131515;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 2.5cqw;
	line-height: 1.15;
	letter-spacing: -0.005em;
}

/* Top-left card  x=65 y=426 w=566 h=220 — radius top-left 60 */
.pain--figma .pain__card--tl {
	left: 5.08%;
	top: 0;
	width: 44.22%;
	height: 31.43%;
	border-top-left-radius: 60px;
	transition-delay: .05s;
}
/* Top-right card x=651 y=426 w=566 h=220 — radius top-right 60 */
.pain--figma .pain__card--tr {
	left: 50.86%;
	top: 0;
	width: 44.22%;
	height: 31.43%;
	border-top-right-radius: 60px;
	transition-delay: .12s;
}
/* Bottom-left x=65 y=666 — no radius */
.pain--figma .pain__card--bl {
	left: 5.08%;
	top: 34.29%;
	width: 44.22%;
	height: 31.43%;
	transition-delay: .19s;
}
/* Bottom-right x=651 y=666 — no radius */
.pain--figma .pain__card--br {
	left: 50.86%;
	top: 34.29%;
	width: 44.22%;
	height: 31.43%;
	transition-delay: .26s;
}
/* Wide bottom x=64 y=906 w=1153 h=220 — radius bottom-left 60 + bottom-right 60 */
.pain--figma .pain__card--wide {
	left: 5%;
	top: 68.57%;
	width: 90.08%;
	height: 31.43%;
	align-items: center;
	text-align: center;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
	transition-delay: .33s;
}
.pain--figma .pain__card--wide h3 { font-size: 2.5cqw; }
.pain--figma .pain__card--wide p  { font-size: 2.5cqw; max-width: 65.1cqw; }

/* Statement "Das Problem ist selten..." — x=64 y=1206 w=809
   Cygre Bold 40 / 1.115 line / #131515 */
.pain--figma .pain__statement {
	position: absolute;
	left: 5%;
	top: 67.53%;             /* 1206/1786 */
	width: 63.2%;            /* 809/1280 */
	margin: 0;
	color: #131515;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 3.125cqw;     /* 40/1280 */
	line-height: 1.115;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

/* Hint block — text + arrow with offsets (text x=827, arrow x=789) */
.pain--figma .pain__hint {
	position: absolute;
	left: 61.64%;            /* 789/1280 */
	top: 79.56%;             /* 1421/1786 */
	width: 33.05%;
	height: 16.52%;
}
.pain--figma .pain__hint-text {
	position: absolute;
	left: 2.97cqw;           /* (827-789)/1280 = 38/1280 → relative offset */
	top: 0;
	width: 30.08cqw;         /* 385/1280 */
	margin: 0;
	color: #131515;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.8125cqw;    /* 36/1280 */
	line-height: 0.9;
	letter-spacing: -0.005em;
}
.pain--figma .pain__hint-arrow {
	position: absolute;
	left: 0;
	top: 10cqw;              /* arrow ~128px below text-top */
	display: block;
	width: 12.97cqw;         /* 166/1280 */
	height: 12.97cqw;
	animation: pain-arrow-bounce 2.6s ease-in-out infinite;
}
.pain--figma .pain__hint-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}
@keyframes pain-arrow-bounce {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-8px, 8px); }
}
@media (prefers-reduced-motion: reduce) {
	.pain--figma .pain__hint-arrow { animation: none; }
}

/* Mobile fallback: stack everything */
@media (max-width: 768px) {
	.pain--figma .pain__frame { aspect-ratio: auto; padding: 64px 20px; }
	.pain--figma .pain__title,
	.pain--figma .pain__eyebrow,
	.pain--figma .pain__cards,
	.pain--figma .pain__card,
	.pain--figma .pain__statement,
	.pain--figma .pain__hint {
		position: static; width: auto; height: auto;
		left: auto; top: auto;
	}
	.pain--figma .pain__title { font-size: 40px; margin-bottom: 16px; }
	.pain--figma .pain__eyebrow { font-size: 24px; margin: 0 0 40px; }
	.pain--figma .pain__cards { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
	.pain--figma .pain__card { padding: 24px; }
	.pain--figma .pain__card h3 { font-size: 22px; }
	.pain--figma .pain__card p { font-size: 16px; }
	.pain--figma .pain__statement { font-size: 22px; margin: 32px 0; }
	.pain--figma .pain__hint { flex-direction: column; gap: 16px; }
	.pain--figma .pain__hint-text { font-size: 18px; }
	.pain--figma .pain__hint-arrow { width: 80px; height: 80px; }
}

/* ============================================================
   03 — FORMA
   ============================================================ */
/* ============================================================
   03 — FORMA  ·  Pixel-perfect from Figma node 0:150 (1280×1997)
   Background: #1B4136 (dark green). All elements positioned absolutely.
   ============================================================ */
.forma--figma {
	background: #1B4136;
	color: #F5F8F6;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
	position: relative;
	overflow: hidden;
}
.forma--figma .forma__frame {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	aspect-ratio: 1280 / 1997;
	container-type: inline-size;
	overflow: hidden;
}

/* Title H2 — x=64 y=70 w=1148 h=172, Archivo Black 96/86.4lh/-6.72ls/#F5F8F6 */
.forma--figma .forma__title {
	position: absolute;
	left: 5%;
	top: 3.5%;            /* 70/1997 */
	width: 89.69%;
	margin: 0;
	color: #F5F8F6 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 7.5cqw;    /* 96/1280 */
	line-height: 90%;
	letter-spacing: -0.07em;
	text-transform: uppercase;
	z-index: 2;
}

/* Intro — x=64 y=292 w=775, Cygre 32/35.7lh/700w */
.forma--figma .forma__intro {
	position: absolute;
	left: 5%;
	top: 14.62%;          /* 292/1997 */
	width: 60.55%;        /* 775/1280 */
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;    /* 32/1280 */
	line-height: 1.115;
	z-index: 2;
}

/* Big translucent bubbles — sits at viewport level (right edge touches viewport).
   Slow spin around its own axis. */
.forma--figma > .forma__cube {
	position: absolute;
	right: 0;
	top: 48.47%;
	width: 50vw;
	max-width: 1000px;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	pointer-events: none;
	z-index: 1;
	transform-origin: center center;
	animation: forma-cube-spin 28s linear infinite;
	filter: drop-shadow(0 24px 80px rgba(193, 154, 72, 0.18));
	will-change: transform;
}
@keyframes forma-cube-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.forma--figma > .forma__cube { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	.forma--figma > .forma__cube { animation: none; }
}

/* FORMA ROWS — each row has huge letter (left) + heading+sub (right offset x=237) */
.forma--figma .forma__row {
	position: absolute;
	display: block;
	z-index: 2;
}
.forma--figma .forma__letter {
	position: absolute;
	left: 5%;             /* 64/1280 */
	top: 0;
	color: #C19A48;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 10cqw;     /* 128/1280 */
	line-height: 90%;
	letter-spacing: -0.07em;
}
.forma--figma .forma__body {
	position: absolute;
	left: 18.52%;         /* 237/1280 */
}
.forma--figma .forma__body h3 {
	margin: 0;
	color: #F5F8F6;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 3.75cqw;   /* 48/1280 */
	line-height: 90%;
	letter-spacing: -0.07em;
}
.forma--figma .forma__body p {
	margin-top: 0.08cqw;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 2.5cqw;    /* 32/1280 */
	line-height: 115%;
	letter-spacing: -0.07em;
}

/* Row Y positions:
   F: letter y=504, body y=523
   o: letter y=676, body y=695
   r: letter y=830, body y=849
   m: letter y=1012, body y=1031
   a: letter y=1185, body y=1204
*/
.forma--figma .forma__row--f { top: 25.24%; width: 100%; height: 5.77%; }   /* 504/1997 */
.forma--figma .forma__row--o { top: 33.85%; width: 100%; height: 5.77%; }   /* 676/1997 */
.forma--figma .forma__row--r { top: 41.56%; width: 100%; height: 5.77%; }   /* 830/1997 */
.forma--figma .forma__row--m { top: 50.68%; width: 100%; height: 5.77%; }   /* 1012/1997 */
.forma--figma .forma__row--a { top: 59.34%; width: 100%; height: 5.77%; }   /* 1185/1997 */

.forma--figma .forma__row .forma__body { top: 0.95cqw; }  /* slight offset 19px ≈ 1.5% of 1280 */

/* Outro "So entstehen Systeme..." — x=126 y=1455 w=433 h=67 */
.forma--figma .forma__outro {
	position: absolute;
	left: 9.84%;          /* 126/1280 */
	top: 72.86%;          /* 1455/1997 */
	width: 33.83%;        /* 433/1280 */
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.8125cqw; /* 36/1280 */
	line-height: 90%;
	z-index: 2;
}

/* Arrow icon — x=203 y=1480 w=234 */
.forma--figma .forma__arrow {
	position: absolute;
	left: 15.86%;         /* 203/1280 */
	top: 74.11%;          /* 1480/1997 */
	width: 18.28%;        /* 234/1280 */
	aspect-ratio: 1;
	z-index: 2;
}
.forma--figma .forma__arrow svg { width: 100%; height: 100%; display: block; }

/* Hint under arrow — x=129 y=1814 */
.forma--figma .forma__hint {
	position: absolute;
	left: 10.08%;         /* 129/1280 */
	top: 90.84%;          /* 1814/1997 */
	width: 29.84%;        /* 382/1280 */
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 1.5625cqw; /* 20/1280 */
	line-height: 158%;
	z-index: 2;
}

/* CTA button — x=71 y=1693 w=500 h=110, bg #C19A48, radius 24, text Cygre 40/700/#FFF */
.forma--figma .forma__cta {
	position: absolute;
	left: 5.55%;          /* 71/1280 */
	top: 84.78%;          /* 1693/1997 */
	width: 39.06%;        /* 500/1280 */
	height: 5.51%;        /* 110/1997 */
	background: #C19A48;
	color: #FFFFFF;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 3.125cqw;  /* 40/1280 */
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
	z-index: 3;
}
.forma--figma .forma__cta:hover { background: #a88336; transform: translateY(-2px); }

/* "Meine Methode: FORMA" small line bottom-right — x=912 y=1823 w=276
   Anchored ABOVE the tagline as one stacked block on the right side. */
.forma--figma .forma__method {
	position: absolute;
	right: 5%;
	bottom: 9%;           /* sits just above the tagline */
	width: auto;
	margin: 0;
	color: #C19A48;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 1.875cqw;
	line-height: 1.2;
	text-align: right;
	z-index: 2;
}

/* Tagline bottom-right "Alles greift ineinander..." — full tagline anchored at bottom-right */
.forma--figma .forma__tagline {
	position: absolute;
	right: 5%;
	bottom: 4%;
	width: 35.31%;
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;
	line-height: 1.15;
	text-align: right;
	z-index: 2;
}

/* Mobile fallback */
@media (max-width: 768px) {
	.forma--figma .forma__frame { aspect-ratio: auto; padding: 56px 20px; min-height: auto; }
	.forma--figma .forma__title,
	.forma--figma .forma__intro,
	.forma--figma .forma__cube,
	.forma--figma .forma__row,
	.forma--figma .forma__letter,
	.forma--figma .forma__body,
	.forma--figma .forma__outro,
	.forma--figma .forma__arrow,
	.forma--figma .forma__hint,
	.forma--figma .forma__cta,
	.forma--figma .forma__method,
	.forma--figma .forma__tagline {
		position: static; width: auto; height: auto; left: auto; top: auto; margin: 0 0 16px;
	}
	.forma--figma .forma__cube { width: 240px; margin: 24px auto; opacity: 0.6; }
	.forma--figma .forma__title { font-size: 40px; }
	.forma--figma .forma__row { display: grid; grid-template-columns: 80px 1fr; gap: 16px; margin-bottom: 24px; }
	.forma--figma .forma__letter { font-size: 80px; }
	.forma--figma .forma__body h3 { font-size: 24px; }
	.forma--figma .forma__body p { font-size: 16px; }
	.forma--figma .forma__cta { display: inline-flex; padding: 16px 32px; font-size: 18px; }
	.forma--figma .forma__tagline { text-align: left; font-size: 18px; }
}

/* ============================================================
   04 — CASES
   ============================================================ */
.cases {
	background: var(--light);
	padding: 160px 0;
}
.cases__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 80px;
}
.cases__list {
	display: flex;
	flex-direction: column;
	gap: 64px;
}
.case {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 480px;
	background: var(--white);
}
.case:nth-child(even) { grid-template-columns: 1fr 1fr; direction: rtl; }
.case:nth-child(even) > * { direction: ltr; }
.case--green { background: var(--green); color: var(--light); }
.case--cream { background: var(--cream); color: var(--ink); }
.case--burgundy { background: var(--burgundy); color: var(--light); }
.case--ink { background: var(--ink); color: var(--light); }
.case--light { background: var(--white); color: var(--ink); }

.case__visual {
	position: relative;
	overflow: hidden;
	min-height: 480px;
}
.case__visual img:first-of-type {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s;
}
.case:hover .case__visual img:first-of-type { transform: scale(1.04); }
.case__logo {
	position: absolute;
	left: 24px;
	top: 24px;
	width: 64px;
	height: auto;
	z-index: 2;
	filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

.case__body { padding: 64px 48px; }
.case__tags { display: flex; gap: 8px; margin-bottom: 24px; }
.case__tags span {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	font-size: 13px;
	opacity: 0.8;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.case h3 {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.case__sub { font-size: 18px; opacity: 0.7; margin-bottom: 24px; }
.case__lead {
	font-family: 'Archivo Black', sans-serif;
	font-size: 24px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-bottom: 32px;
}
.case__lead em { color: var(--gold); font-style: normal; }
.case__cols { display: grid; gap: 24px; }
.case__cols b {
	display: block;
	font-family: 'Archivo Black', sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
	opacity: 0.6;
}
.case__cols p { font-size: 17px; line-height: 1.45; opacity: 0.9; }

/* ============================================================
   05 — TESTIMONIALS
   ============================================================ */
.testimonials {
	background: var(--white);
	padding: 160px 0;
}
.testimonials__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 80px;
}
.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.testimonial {
	background: var(--light);
	border-radius: var(--radius);
	padding: 40px;
	border-left: 4px solid var(--gold);
}
.testimonial p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink);
	margin-bottom: 24px;
}
.testimonial footer {
	font-family: 'Archivo Black', sans-serif;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-transform: uppercase;
}
.testimonial footer span {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--gold);
	text-transform: none;
	margin-top: 4px;
}

/* ============================================================
   06 — CTA-BIG
   ============================================================ */
.cta-big {
	background: var(--gold);
	color: var(--ink);
	padding: 200px 0;
	text-align: center;
}
.cta-big__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 8vw, 112px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 32px;
}
.cta-big__title .text-gold { color: var(--ink); opacity: 0.65; }
.cta-big__lead { font-size: 24px; line-height: 1.4; max-width: 800px; margin: 0 auto 16px; }
.cta-big__sub { font-size: 20px; margin-bottom: 48px; opacity: 0.8; }
.cta-big .btn-cta { background: var(--ink); color: var(--light); }
.cta-big .btn-cta:hover { background: var(--ink); opacity: 0.85; }
.cta-big__note { margin-top: 24px; font-size: 14px; opacity: 0.7; }

/* ============================================================
   07 — ABOUT
   ============================================================ */
.about {
	background: var(--light);
	padding: 160px 0;
}
.about__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 80px;
}
.about__layout {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 80px;
	align-items: start;
}
.about__photo {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.about__photo img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 15%;
}
.about__body { display: flex; flex-direction: column; gap: 24px; }
.about__stat { font-size: 22px; line-height: 1.4; color: var(--ink); }
.about__stat strong {
	font-family: 'Archivo Black', sans-serif;
	font-size: 32px;
	color: var(--gold);
	margin-right: 12px;
	letter-spacing: -0.03em;
}
.about__partners { font-size: 18px; color: rgba(19,21,21,0.7); padding: 24px 0; border-top: 1px solid rgba(19,21,21,0.1); border-bottom: 1px solid rgba(19,21,21,0.1); }
.about__triad {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}
.about__triad b:nth-child(1) { color: var(--ink); }
.about__triad b:nth-child(2) { color: var(--gold); }
.about__triad b:nth-child(3) { color: var(--green); }

/* ============================================================
   08 — SERVICES
   ============================================================ */
.services {
	background: var(--white);
	padding: 160px 0;
}
.services__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.services__intro { font-size: 22px; color: rgba(19,21,21,0.7); margin-bottom: 64px; max-width: 800px; }
.services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}
.service {
	background: var(--light);
	border-radius: var(--radius);
	padding: 48px;
	transition: background .3s;
}
.service:hover { background: var(--ink); color: var(--light); }
.service:hover h3 { color: var(--gold); }
.service:hover p { color: rgba(245,248,246,0.8); }
.service h3 {
	font-family: 'Archivo Black', sans-serif;
	font-size: 32px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin-bottom: 16px;
	color: var(--ink);
}
.service p { font-size: 18px; line-height: 1.5; color: rgba(19,21,21,0.7); }
.service--wide { grid-column: 1 / -1; background: var(--gold); color: var(--ink); }
.service--wide:hover { background: var(--gold-2); color: var(--ink); }
.service--wide h3 { color: var(--ink); }
.services__outro { font-size: 20px; margin-bottom: 24px; }
.services__note { font-size: 14px; margin-top: 16px; opacity: 0.7; }

/* ============================================================
   09 — ABLAUF
   ============================================================ */
.ablauf {
	background: var(--green);
	color: var(--light);
	padding: 160px 0;
}
.ablauf__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.ablauf__intro { font-size: 22px; color: rgba(245,248,246,0.8); margin-bottom: 80px; }
.ablauf__list { list-style: none; padding: 0; }
.ablauf__list li {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 48px;
	padding: 40px 0;
	border-top: 1px solid rgba(245,248,246,0.15);
	align-items: center;
}
.ablauf__list li:last-child { border-bottom: 1px solid rgba(245,248,246,0.15); }
.ablauf__num {
	font-family: 'Archivo Black', sans-serif;
	font-size: 96px;
	line-height: 1;
	color: var(--gold);
	letter-spacing: -0.04em;
}
.ablauf__list h3 {
	font-family: 'Archivo Black', sans-serif;
	font-size: 32px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.ablauf__list p { font-size: 18px; line-height: 1.45; opacity: 0.85; max-width: 720px; }
.ablauf__outro { font-size: 20px; margin: 64px 0 24px; opacity: 0.9; max-width: 720px; }

/* ============================================================
   10 — FAQ
   ============================================================ */
.faq {
	background: var(--light);
	padding: 160px 0;
}
.faq__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 64px;
}
.faq__list { display: flex; flex-direction: column; margin-bottom: 48px; border-top: 1px solid rgba(19,21,21,0.1); }
.faq__item { border-bottom: 1px solid rgba(19,21,21,0.1); }
.faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 32px 0;
	font-family: 'Archivo Black', sans-serif;
	font-size: 24px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: '+';
	font-family: 'Archivo Black', sans-serif;
	font-size: 32px;
	color: var(--gold);
	transition: transform .3s;
}
.faq__item[open] summary { color: var(--gold); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 0 32px; font-size: 18px; line-height: 1.6; color: rgba(19,21,21,0.7); max-width: 800px; }
.faq__note { margin-top: 16px; font-size: 14px; opacity: 0.7; }

/* ============================================================
   11 — ANFRAGE FORM
   ============================================================ */
.anfrage {
	background: var(--ink);
	color: var(--light);
	padding: 160px 0;
}
.anfrage__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.anfrage__lead { font-size: 24px; color: var(--gold); margin-bottom: 64px; }
.anfrage__form { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.anfrage__form label { display: flex; flex-direction: column; gap: 8px; }
.anfrage__form label > span {
	font-family: 'Archivo Black', sans-serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
}
.anfrage__form label em { font-style: normal; color: rgba(245,248,246,0.5); text-transform: none; letter-spacing: 0; font-family: 'Space Grotesk', sans-serif; }
.anfrage__form input,
.anfrage__form select,
.anfrage__form textarea {
	padding: 16px 20px;
	background: rgba(245,248,246,0.06);
	border: 1px solid rgba(245,248,246,0.15);
	border-radius: var(--radius);
	color: var(--light);
	font-family: 'Space Grotesk', sans-serif;
	font-size: 18px;
	outline: none;
	transition: border-color .2s, background .2s;
}
.anfrage__form input:focus,
.anfrage__form select:focus,
.anfrage__form textarea:focus { border-color: var(--gold); background: rgba(245,248,246,0.1); }
.anfrage__form button { align-self: flex-start; margin-top: 16px; }
.anfrage__note { margin-top: 24px; font-size: 14px; opacity: 0.6; }
.anfrage__reply { margin-top: 16px; font-size: 16px; opacity: 0.8; }

/* ============================================================
   12 — FINALE / FOOTER
   ============================================================ */
.finale {
	background: var(--green);
	color: var(--light);
	padding: 120px 0 48px;
}
.finale__title {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(48px, 8vw, 112px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin-bottom: 80px;
	max-width: 1000px;
}
.finale__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(245,248,246,0.15);
	margin-bottom: 32px;
}
.finale__nav, .finale__contact { display: flex; flex-direction: column; gap: 12px; }
.finale__nav strong, .finale__contact strong {
	font-family: 'Archivo Black', sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 12px;
}
.finale__nav a, .finale__contact a {
	color: var(--light);
	font-size: 18px;
	opacity: 0.85;
	transition: opacity .2s;
}
.finale__nav a:hover, .finale__contact a:hover { opacity: 1; color: var(--gold); }
.finale__phone {
	font-family: 'Archivo Black', sans-serif !important;
	font-size: 36px !important;
	color: var(--gold) !important;
	opacity: 1 !important;
	letter-spacing: -0.02em;
	margin: 8px 0;
}
.finale__legal { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; font-size: 14px; opacity: 0.7; }
.finale__legal a { color: var(--light); }
.finale__legal a:hover { color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.container { padding: 0 32px; }
	.nav { padding: 20px 32px; }
	.hero__body { grid-template-columns: 1fr; gap: 48px; padding: 40px 32px 60px; }
	.hero__visual { max-width: 100%; justify-self: stretch; }
	.pain__grid { grid-template-columns: 1fr; }
	.case { grid-template-columns: 1fr; }
	.case__visual { min-height: 300px; }
	.case__body { padding: 48px 32px; }
	.testimonials__grid { grid-template-columns: repeat(2, 1fr); }
	.about__layout { grid-template-columns: 1fr; }
	.about__photo { max-width: 380px; margin: 0 auto; }
	.services__grid { grid-template-columns: 1fr; }
	.ablauf__list li, .forma__row { grid-template-columns: 100px 1fr; gap: 24px; }
	.forma__letter { font-size: 80px; }
	.ablauf__num { font-size: 64px; }
}

@media (max-width: 768px) {
	.nav__menu { display: none; }
	.nav { padding: 16px 24px; }
	.container { padding: 0 24px; }
	.pain, .forma, .cases, .testimonials, .cta-big, .about, .services, .ablauf, .faq, .anfrage, .finale { padding-top: 100px; padding-bottom: 100px; }
	.testimonials__grid { grid-template-columns: 1fr; }
	.finale__row { grid-template-columns: 1fr; gap: 32px; }
	.finale__phone { font-size: 28px !important; }
	.case__cols { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.hero { padding-bottom: 40px; }
	.chip { padding: 6px 14px; font-size: 13px; }
	.btn-cta { padding: 14px 28px; font-size: 14px; }
	.btn-nav { padding: 8px 16px; font-size: 13px; }
}

/* ============================================================
   04b — FIGMA-STYLE CASE STACK (full-width zebra rows, inline expand)
   ============================================================ */

/* Override old .cases__list / .case styles to not collide */
.cases__list { display: none !important; }

.cases {
	background: var(--green);
	color: var(--light);
	padding: 120px 0 0;
	overflow: hidden;
}
.cases__title {
	color: var(--light);
	margin-bottom: 64px;
}
.cases__title .text-gold { color: var(--gold); }

.case-stack {
	display: flex;
	flex-direction: column;
}

.case-row {
	width: 100%;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	transition: background .3s ease, color .3s ease;
}
.case-row--green {
	background: var(--green);
	color: var(--light);
}
.case-row--cream {
	background: var(--cream);
	color: var(--ink);
}

.case-row__head {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 32px;
	align-items: start;
	width: 100%;
	padding: 56px 64px;
	background: transparent;
	border: 0;
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	position: relative;
}
.case-row__head:hover .case-row__title { opacity: 0.85; }
.case-row__head:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: -6px;
}

.case-row__tags {
	grid-column: 1 / 2;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.case-row__tag {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.85;
}

.case-row__title {
	grid-column: 1 / 2;
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(64px, 12vw, 160px);
	line-height: 0.9;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: opacity .25s ease;
}
.case-row__brand { color: var(--gold); display: block; }
.case-row__kind  { color: inherit;     display: block; }

.case-row__toggle {
	grid-column: 2 / 3;
	align-self: end;
	display: inline-grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: inherit;
	transition: transform .35s ease, background .25s ease;
}
.case-row--cream .case-row__toggle { background: rgba(19,21,21,0.06); }
.case-row.is-open .case-row__toggle { transform: rotate(180deg); background: var(--gold); color: var(--ink); }

/* ---- expanding body via grid trick (smooth, no JS-height-hack) ---- */
.case-row__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .55s cubic-bezier(.22,.9,.32,1);
}
.case-row.is-open .case-row__body { grid-template-rows: 1fr; }
.case-row__body-inner {
	min-height: 0;
	overflow: hidden;
	padding: 0 64px;
}
.case-row.is-open .case-row__body-inner { padding: 0 64px 80px; }

.case-row__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: end;
	margin-top: 24px;
}
.case-row__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 220px;
	gap: 16px;
}
.case-row__gallery .case-row__shot:first-child {
	grid-column: 1 / span 2;
	grid-row: span 2;
}
.case-row__shot {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	background: rgba(0,0,0,0.08);
	height: 100%;
}
.case-row__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.case-row__shot:hover img { transform: scale(1.04); }

.case-row__hero {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.case-row__sub {
	font-size: 18px;
	opacity: 0.85;
	margin: 0;
	letter-spacing: 0.02em;
}
.case-row__lead {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(28px, 3vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0;
}
.case-row__lead em { color: var(--gold); font-style: normal; }

.case-row__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid currentColor;
}
.case-row__cols h4 {
	font-family: 'Archivo Black', sans-serif;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.55;
	margin: 0 0 12px;
}
.case-row__cols p {
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
	opacity: 0.95;
}

/* Sticky nav state — kept from earlier */
.nav.is-scrolled {
	background: rgba(245, 248, 246, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

/* Form feedback */
.anfrage__feedback {
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: var(--radius-pill);
	font-size: 15px;
}
.anfrage__feedback.is-success { background: var(--green); color: var(--light); }
.anfrage__feedback.is-error   { background: var(--burgundy); color: var(--light); }

/* Generic reveal states (legacy) */
.is-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .7s ease, transform .7s ease;
}
.is-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* ===================== UNIVERSAL REVEAL CHOREOGRAPHY ===================== */
/* Applied via main.js to all section content for synchronized scroll-in.
   Hero is excluded — it has its own intro animations. */

.rv {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity 0.95s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		transform 0.95s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		filter 0.95s ease var(--rv-d, 0ms);
	will-change: opacity, transform;
}
.rv.rv-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Headings — dramatic slide with letter-spacing breath */
.rv--head {
	opacity: 0;
	transform: translate3d(0, 48px, 0);
	letter-spacing: -0.04em;
	transition:
		opacity 1.15s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		transform 1.15s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		letter-spacing 1.15s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		filter 1.15s ease var(--rv-d, 0ms);
	filter: blur(6px);
}
.rv--head.rv-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	letter-spacing: -0.07em;       /* matches brand default */
	filter: blur(0);
}

/* Cards — soft tilt + lift */
.rv--card {
	opacity: 0;
	transform: translate3d(0, 36px, 0) scale(0.97);
	transition:
		opacity 0.9s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		transform 0.9s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms);
}
.rv--card.rv-in {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* Media (images, illustrations, decorative SVG) — gentle zoom-in */
.rv--media {
	opacity: 0;
	transform: translate3d(0, 24px, 0) scale(0.94);
	filter: blur(8px);
	transition:
		opacity 1.05s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		transform 1.05s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0ms),
		filter 1.05s ease var(--rv-d, 0ms);
}
.rv--media.rv-in {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0);
}

/* Buttons — pop-in with mini bounce */
.rv--btn {
	opacity: 0;
	transform: translate3d(0, 20px, 0) scale(0.94);
	transition:
		opacity 0.7s cubic-bezier(.34, 1.56, .64, 1) var(--rv-d, 0ms),
		transform 0.7s cubic-bezier(.34, 1.56, .64, 1) var(--rv-d, 0ms);
}
.rv--btn.rv-in {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.case-row__body,
	.case-row__toggle,
	.case-row__shot img,
	.is-reveal,
	.rv, .rv--head, .rv--card, .rv--media, .rv--btn {
		transition: none;
		opacity: 1;
		transform: none;
		filter: none;
		letter-spacing: inherit;
	}
}

/* ===================== BACK-TO-TOP FLOATING BUTTON ===================== */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1B4136;
	color: #ffffff;
	border: 3px solid #C19A48;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35),
	            0 6px 16px rgba(0, 0, 0, 0.28);
	opacity: 0;
	transform: translateY(20px) scale(0.85);
	pointer-events: none;
	transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1),
	            background .25s ease, border-color .25s ease, box-shadow .25s ease;
	z-index: 9998;
}
.back-to-top[hidden] { display: flex !important; }
.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.back-to-top svg {
	width: 36px;
	height: 36px;
	transition: transform .25s ease;
}
.back-to-top svg path {
	stroke: #ffffff;
	transition: stroke .25s ease;
}
.back-to-top:hover svg { transform: translateY(-2px); }

/* === DEFAULT / OVER DARK SECTIONS === */
.back-to-top,
.back-to-top.on-dark {
	background: #1B4136;
	border-color: #C19A48;
}
.back-to-top.on-dark svg path,
.back-to-top svg path { stroke: #ffffff; }

.back-to-top.on-dark:hover {
	background: #C19A48;
	border-color: #1B4136;
}
.back-to-top.on-dark:hover svg path { stroke: #1B4136; }

/* === OVER LIGHT (CREAM / WHITE) SECTIONS === */
.back-to-top.on-light {
	background: #1B4136;
	border-color: #C19A48;
}
.back-to-top.on-light svg path { stroke: #C19A48 !important; }

.back-to-top.on-light:hover {
	background: #C19A48;
	border-color: #1B4136;
}
.back-to-top.on-light:hover svg path { stroke: #1B4136 !important; }
.back-to-top:focus-visible {
	outline: 3px solid #1B4136;
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}
	.back-to-top svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top { transition: opacity .2s; transform: none; }
	.back-to-top.is-visible { transform: none; }
	.back-to-top:hover svg { transform: none; }
}

/* ===================== COOKIE BANNER ===================== */
.cookie-banner {
	position: fixed;
	bottom: 20px;
	left: 20px;
	right: 20px;
	z-index: 9999;
	background: #1B4136;
	color: #F5F8F6;
	border: 1px solid rgba(193, 154, 72, 0.35);
	border-radius: 18px;
	padding: 26px 28px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35),
	            0 8px 20px rgba(0, 0, 0, 0.18);
	transform: translateY(140%);
	opacity: 0;
	transition: transform .55s cubic-bezier(.22,.61,.36,1),
	            opacity .35s ease;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
}
.cookie-banner__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 248, 246, 0.06);
	border: 1px solid rgba(245, 248, 246, 0.12);
	border-radius: 50%;
	color: #F5F8F6;
	cursor: pointer;
	padding: 0;
	z-index: 2;
	transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.cookie-banner__close:hover {
	background: #C19A48;
	border-color: #C19A48;
	color: #1B4136;
	transform: rotate(90deg);
}
.cookie-banner__close:focus-visible {
	outline: 2px solid #C19A48;
	outline-offset: 2px;
}
.cookie-banner__close svg { display: block; }
.cookie-banner.is-visible {
	transform: translateY(0);
	opacity: 1;
}
.cookie-banner h4 {
	margin: 0;
	padding-right: 44px;          /* leave space for close button */
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: #C19A48;
	text-transform: uppercase;
}
.cookie-banner p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(245, 248, 246, 0.85);
}
.cookie-banner p a {
	color: #C19A48;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cookie-banner p a:hover { color: #F5F8F6; }

.cookie-banner__buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.cookie-banner__btn {
	flex: 1 1 auto;
	min-width: 140px;
	padding: 13px 22px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.005em;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cookie-banner__btn--ghost {
	background: transparent;
	color: #F5F8F6;
	border: 1px solid rgba(245, 248, 246, 0.3);
}
.cookie-banner__btn--ghost:hover {
	background: rgba(245, 248, 246, 0.08);
	border-color: rgba(245, 248, 246, 0.5);
}
.cookie-banner__btn--primary {
	background: #C19A48;
	color: #F5F8F6;
}
.cookie-banner__btn--primary:hover {
	background: #a88336;
	transform: translateY(-1px);
}
.cookie-banner__btn:focus-visible {
	outline: 2px solid #C19A48;
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.cookie-banner {
		left: auto;
		right: 24px;
		bottom: 24px;
		max-width: 460px;
	}
}
@media (max-width: 480px) {
	.cookie-banner__buttons { flex-direction: column; }
	.cookie-banner__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.cookie-banner { transition: opacity .2s; transform: none; }
}

/* Screen reader helper */
.screen-reader-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1100px) {
	.case-row__top { grid-template-columns: 1fr; gap: 32px; }
	.case-row__cols { gap: 32px; }
}
@media (max-width: 768px) {
	.case-row__head { padding: 40px 24px; }
	.case-row__body-inner,
	.case-row.is-open .case-row__body-inner { padding-left: 24px; padding-right: 24px; }
	.case-row.is-open .case-row__body-inner { padding-bottom: 56px; }
	.case-row__gallery { grid-template-columns: 1fr; grid-auto-rows: 180px; }
	.case-row__gallery .case-row__shot:first-child { grid-column: 1; grid-row: span 1; height: 240px; }
	.case-row__cols { grid-template-columns: 1fr; gap: 24px; }
	.case-row__toggle { width: 44px; height: 44px; }
}

/* ============================================================
   04 — CASES  ·  Pixel-perfect from Figma (1280×4041)
   Each card 1153×1820, radius 59px, shadow rgba(0,0,0,.4) -27/-17/64
   ============================================================ */
.cases--figma {
	background: #F5F8F6;
	color: #1B4136;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 80px 0 160px;
}
.cases--figma .cases__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}
@media (min-width: 1280px) { .cases--figma .cases__inner { max-width: 1200px; padding: 0 32px; } }

/* Section H2 — smaller scale to fit container 2 lines */
.cases--figma .cases__title {
	margin: 0 0 56px;
	color: #1B4136 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 5.2vw, 56px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.case-stack {
	display: flex !important;
	flex-direction: column;
	--space-card-overlap: 24px;         /* small overlap = more space between cards */
	--space-card-gap-expanded: 0px;     /* opened card keeps same overlap → equal spacing */
}

.case-card {
	position: relative;
	width: 100%;
	border-radius: 32px;
	margin-top: calc(-1 * var(--space-card-overlap));
	transition: margin-top 0.55s cubic-bezier(0.4,0,0.2,1), box-shadow 0.55s cubic-bezier(0.4,0,0.2,1);
	box-shadow: 0 -16px 48px rgba(0,0,0,0.18);
}
.case-card:first-child {
	margin-top: 0;
	box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}
.case-card:nth-child(1) { z-index: 1; }
.case-card:nth-child(2) { z-index: 2; }
.case-card:nth-child(3) { z-index: 3; }
.case-card:nth-child(4) { z-index: 4; }
.case-card:nth-child(5) { z-index: 5; }
.case-card[data-state="expanded"] {
	/* same overlap as collapsed — equal spacing between every card */
	margin-top: calc(-1 * var(--space-card-overlap));
	z-index: 10;
}
.case-card[data-state="expanded"]:first-child { margin-top: 0; }

.case-card--green { background: #1B4136; color: #F5F8F6; }
.case-card--cream { background: #F0EEEC; color: #1B4136; }

/* HEAD: layout = TITLE on TOP (always peeks above next card), TAGS BELOW (hidden when collapsed) */
.case-card__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	min-height: 240px;            /* every closed card head reserves the same height */
	padding: 36px 36px 32px;      /* tags-top — normal top padding */
	background: none;
	border: 0;
	text-align: left;
	color: inherit;
	font: inherit;
	cursor: pointer;
	border-radius: 32px;
	-webkit-tap-highlight-color: transparent;
	justify-content: flex-start;
}
.case-card__head:focus-visible {
	outline: 2px solid #C19A48;
	outline-offset: -6px;
}

/* ORDER: tags appear FIRST (top of head), then title BELOW them */
.case-card__tags  { order: 1; }
.case-card__title-row,
.case-card__title { order: 2; }

/* TAGS — flex row, BRANDING left / PRINT right */
.case-card__tags {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.case-card--green {
	background: #1B4136;
	color: #F5F8F6;
}
.case-card--cream {
	background: #F0EEEC;
	color: #1B4136;
}

/* On cream cards, swap title colours: brand=dark green, kind=ink */
.case-card--cream .case-card__brand { color: #1B4136; }
.case-card--cream .case-card__kind  { color: #1B4136; }
.case-card--cream .case-card__tag   { color: #1B4136; border-color: #C19A48; }
.case-card--cream .case-card__toggle { color: #1B4136; border-color: #1B4136; background: transparent; }
.case-card--cream .case-card__sub    { color: #1B4136; }
.case-card--cream .case-card__lead   { color: #1B4136; }
.case-card--cream .case-card__col h4 { color: #1B4136; }
.case-card--cream .case-card__col p  { color: #1B4136; }

/* On green cards, brand = gold, all other text = cream */
.case-card--green .case-card__brand { color: #C19A48; }
.case-card--green .case-card__kind  { color: #F5F8F6; }
.case-card--green .case-card__sub   { color: #F5F8F6; }
.case-card--green .case-card__lead  { color: #F5F8F6; }
.case-card--green .case-card__tag   { color: #C19A48; border-color: #C19A48; }

/* Tag pill — used inside .case-card__tags flex row */
.case-card__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	background: transparent;
	border: 1.5px solid #C19A48;
	border-radius: 999px;
	color: #C19A48 !important;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Title row = title (flex 1) + chevron arrow right */
.case-card__title-row {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	width: 100%;
}
.case-card__title {
	margin: 0;
	flex: 1 1 auto;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 7.5vw, 48px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}
/* AW kind = two long words ("PSYCHOLOGISCHE BERATUNG") — shrink on narrow viewports */
.case-card--aw .case-card__kind {
	font-size: clamp(20px, 5.5vw, 36px);
	line-height: 1;
	letter-spacing: -0.025em;
}
.case-card__brand,
.case-card__kind { display: block; }

/* Chevron arrow (open/close indicator) — rotates 180° when expanded */
.case-card__chev {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	display: grid;
	place-items: center;
	color: var(--color-gold, #C19A48);
	transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), background 0.2s ease;
	opacity: 0.85;
	margin-bottom: 4px;
}
.case-card__chev svg { width: 18px; height: 18px; display: block; }
.case-card__head:hover .case-card__chev { opacity: 1; background: rgba(193,154,72,0.12); }
.case-card[data-state="expanded"] .case-card__chev {
	transform: rotate(180deg);
	background: #C19A48;
	color: #1B4136;
	border-color: #C19A48;
	opacity: 1;
}
.case-card--cream .case-card__chev { color: #1B4136; border-color: #1B4136; }
.case-card--cream[data-state="expanded"] .case-card__chev { background: #1B4136; color: #F0EEEC; }
.case-card--green .case-card__brand { color: #C19A48; }
.case-card--green .case-card__kind  { color: #F5F8F6; }
.case-card--cream .case-card__brand { color: #1B4136; }
.case-card--cream .case-card__kind  { color: #1B4136; }

/* BODY (collapsible with grid-rows trick) */
.case-card__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.55s cubic-bezier(0.4,0,0.2,1);
}
.case-card__body-inner { overflow: hidden; }
.case-card__body-content {
	padding: 0 24px 32px;
}
.case-card[data-state="expanded"] .case-card__body {
	grid-template-rows: 1fr;
}

.case-card__full {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	margin-top: 4px;
}

/* Toggle button — bottom-right circle inside head */
.case-card__head { position: relative; }
.case-card__toggle {
	position: absolute;
	bottom: -8px;
	right: 0;
	width: 56px;
	height: 56px;
	background: transparent;
	border: 2px solid #C19A48;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: #C19A48;
	transition: transform 0.4s ease, background 0.25s ease;
	z-index: 4;
}
.case-card__toggle:hover { background: rgba(193, 154, 72, 0.2); }
.case-card.is-open .case-card__toggle { transform: rotate(180deg); background: #C19A48; color: #1B4136; }
.case-card__toggle svg { width: 28px; height: 28px; }

/* Legacy body rules REMOVED — prototype uses grid-template-rows trick above */

/* GALLERY — left column, custom Figma layout (3 photos stacked vertically) */
.case-card__gallery {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: grid;
	grid-template-rows: auto auto;
	gap: 24px;
	margin-top: 40px;
	align-self: start;
}
.case-card__shot {
	margin: 0;
	overflow: hidden;
	border-radius: 39px;
	background: rgba(255, 255, 255, 0.06);
	aspect-ratio: 4 / 3;
}
.case-card__shot--2 { aspect-ratio: 5 / 3; }
.case-card__shot img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.case-card__shot:hover img { transform: scale(1.04); }

/* Three text blocks */
.case-card__col {
	margin: 0;
}
.case-card__col h4 {
	margin: 0 0 12px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1;
	letter-spacing: -0.02em;
}
.case-card__col p {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.45;
}

.case-card__col--before { grid-column: 2; }
.case-card__col--do     { grid-column: 1; margin-top: 12px; }
.case-card__col--result { grid-column: 2; }

/* Hide screen reader text */
.screen-reader-only {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px); padding: 0; margin: -1px; overflow: hidden;
	width: 1px; height: 1px; border: 0;
}

/* Mobile */
@media (max-width: 768px) {
	.cases--figma .cases__inner { padding: 0 16px; }
	.cases--figma .cases__title { font-size: 40px; margin-bottom: 40px; }
	.case-card { padding: 32px 24px; border-radius: 24px; }
	.case-card__tag { position: static; display: inline-flex; margin-right: 8px; margin-bottom: 8px; font-size: 14px; padding: 6px 18px; }
	.case-card__tag--left, .case-card__tag--right { left: auto; right: auto; top: auto; }
	.case-card__title { margin-top: 16px; font-size: 40px; max-width: 100%; }
	.case-card__toggle { top: 16px; right: 16px; width: 48px; height: 48px; }
	.case-card__sub { font-size: 28px; max-width: 100%; }
	.case-card__lead { font-size: 18px; max-width: 100%; }
	.case-card__gallery { grid-template-columns: 1fr; }
	.case-card__shot--2 { aspect-ratio: 16 / 9; }
	.case-card__col { float: none !important; max-width: 100% !important; }
}

/* ============================================================
   VR CASE — pixel-perfect (Figma 0:187, card 1153×1820)
   Title: VR 150px / Trockenbau 96px. Body layout 1153×1280 (after head 540).
   ============================================================ */

/* VR-specific title sizes — REMOVED to match other cards */

.case-card--vr.is-open .case-card__head { padding-bottom: 0; }

.case-card__layout--vr {
	position: relative;
	width: 100%;
	aspect-ratio: 1153 / 1280;
	container-type: inline-size;
	margin-top: 32px;
}
.case-card--vr .case-card__body { padding: 0 !important; }
.case-card--vr.is-open .case-card__body {
	max-height: 9999px !important;
	overflow: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Coordinates: card BG is 1153 wide × 1820 tall.
   Head (tags+title) occupies y=0..560. Body content starts at y=540.
   We treat layout container = body area = 1153 × 1280 (540..1820).
   Therefore subtract 540 from Figma Y values. */

/* T-shirts photo — Figma x=-73 y=540 w=725 h=484 → local y=0 */
.case-card__layout--vr .vrl-tshirts {
	position: absolute;
	left: -6.33%;            /* -73/1153 */
	top: 0;
	width: 62.88%;           /* 725/1153 */
	height: 37.81%;          /* 484/1280 */
	object-fit: cover;
	border-radius: 39px;
}

/* Business cards photo — Figma x=-184 y=1196 (local y=656) w=949 h=633 */
.case-card__layout--vr .vrl-cards {
	position: absolute;
	left: -15.96%;           /* -184/1153 */
	top: 51.25%;             /* 656/1280 */
	width: 82.31%;           /* 949/1153 */
	height: 49.45%;          /* 633/1280 */
	object-fit: cover;
	border-radius: 39px;
}

/* Sub heading "Trockenbau Unternehmen" — x=627 y=578 (local y=38) */
.case-card__layout--vr .vrl-sub {
	position: absolute;
	left: 54.38%;            /* 627/1153 */
	top: 2.97%;              /* 38/1280 */
	width: 41.55%;           /* 479/1153 */
	margin: 0;
	color: #F5F8F6;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 3.75cqw;      /* 48/1280 */
	line-height: 1.05;
	letter-spacing: -0.03em;
}

/* Lead "Vom Handwerk zur klaren Marke" — x=624 y=690 (local y=150) */
.case-card__layout--vr .vrl-lead {
	position: absolute;
	left: 54.12%;
	top: 11.72%;             /* 150/1280 */
	width: 45.88%;
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;
	line-height: 1.15;
}

/* Ausgangslage — x=626 y=841 (local y=301) */
.case-card__layout--vr .vrl-block--before {
	position: absolute;
	left: 54.29%;
	top: 23.52%;             /* 301/1280 */
	width: 41.55%;
}
/* Was wir gemacht haben — x=35 y=1128 (local y=588) */
.case-card__layout--vr .vrl-block--do {
	position: absolute;
	left: 3.03%;
	top: 45.94%;             /* 588/1280 */
	width: 41.55%;
}
/* Ergebnis — x=626 y=1519 (local y=979) */
.case-card__layout--vr .vrl-block--result {
	position: absolute;
	left: 54.29%;
	top: 76.48%;             /* 979/1280 */
	width: 43.28%;
}

.case-card__layout--vr .vrl-block h4 {
	margin: 0 0 12px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;       /* 32/1280 */
	line-height: 1;
	color: #F5F8F6;
}
.case-card__layout--vr .vrl-block p {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 1.875cqw;     /* 24/1280 */
	line-height: 1.45;
	color: #F5F8F6;
}

/* Roleders logo — x=592 y=1060 (local y=520) w=396 h=396 */
.case-card__layout--vr .vrl-logo {
	position: absolute;
	left: 51.34%;            /* 592/1153 */
	top: 40.62%;             /* 520/1280 */
	width: 34.34%;           /* 396/1153 */
	height: auto;
	aspect-ratio: 1;
	pointer-events: none;
	z-index: 2;
}

/* Hide tags/title from .case-card__body — they live in .case-card__head now */
.case-card__body > .case-card__sub,
.case-card__body > .case-card__lead {
	/* keep only for non-VR generic body */
}

/* The new head wraps tags + title + toggle (always visible) */
.case-card__head { position: relative; padding-bottom: 32px; }

/* Mobile fallback for VR */
@media (max-width: 768px) {
	.case-card__layout--vr {
		padding-bottom: 0;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.case-card__layout--vr > * {
		position: static !important;
		width: 100% !important;
		left: auto !important; top: auto !important;
		height: auto !important;
	}
	.case-card__layout--vr .vrl-tshirts,
	.case-card__layout--vr .vrl-cards { aspect-ratio: 3 / 2; }
	.case-card__layout--vr .vrl-logo { max-width: 200px; align-self: center; }
}

/* ============================================================
   CASE LAYOUT — VR (pixel-perfect from Figma 0:187)
   Container = card body content area. Card BG = 1153×1820.
   Head (tags + title in flow) takes y=0..440 of card.
   Body = y=440..1820 = 1380 tall. Aspect-ratio 1153/1380 ≈ 0.835.
   All children positioned absolutely as % of body (1153 wide × 1380 tall).
   Figma Y values minus 440 = local Y.
   ============================================================ */
.case-layout--vr {
	position: relative;
	width: 100%;
	aspect-ratio: 1153 / 1380;
	overflow: visible;
	container-type: inline-size;
	margin-top: 8px;
}

/* T-shirts photo: x=-73 y=540 → local y=100, w=725 h=484 */
.case-layout--vr .cl-tshirts {
	position: absolute;
	left: -6.33%;       /* -73/1153 */
	top: 7.25%;         /* 100/1380 */
	width: 62.88%;      /* 725/1153 */
	height: 35.07%;     /* 484/1380 */
	object-fit: cover;
	border-radius: 39px;
}

/* Business cards photo: x=-184 y=1196 → local y=756, w=949 h=633 */
.case-layout--vr .cl-cards {
	position: absolute;
	left: -15.96%;      /* -184/1153 */
	top: 54.78%;        /* 756/1380 */
	width: 82.31%;      /* 949/1153 */
	height: 45.87%;     /* 633/1380 */
	object-fit: cover;
	border-radius: 39px;
}

/* Roleders logo: x=592 y=1060 → local y=620, w=396 h=396 */
.case-layout--vr .cl-logo {
	position: absolute;
	left: 51.34%;       /* 592/1153 */
	top: 44.93%;        /* 620/1380 */
	width: 34.34%;      /* 396/1153 */
	height: auto;
	aspect-ratio: 1;
	z-index: 2;
	pointer-events: none;
}

/* Sub "Trockenbau Unternehmen": x=627 y=578 → local y=138, Archivo Black 48px white */
.case-layout--vr .cl-sub {
	position: absolute;
	left: 54.38%;       /* 627/1153 */
	top: 10%;           /* 138/1380 */
	width: 41.55%;      /* 479/1153 */
	margin: 0;
	color: #F5F8F6;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 3.75cqw; /* 48/1280 base */
	line-height: 1.05;
	letter-spacing: -0.03em;
}

/* Lead "Vom Handwerk zur klaren Marke": x=624 y=690 → local y=250, Manrope 32/700 white */
.case-layout--vr .cl-lead {
	position: absolute;
	left: 54.12%;
	top: 18.12%;        /* 250/1380 */
	width: 45.88%;
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;
	line-height: 1.15;
}

/* Ausgangslage block: x=626 y=841 → local y=401 */
.case-layout--vr .cl-block--before {
	position: absolute;
	left: 54.29%;
	top: 29.06%;        /* 401/1380 */
	width: 41.55%;
}
/* Was wir gemacht haben: x=35 y=1128 → local y=688 */
.case-layout--vr .cl-block--do {
	position: absolute;
	left: 3.03%;
	top: 49.86%;        /* 688/1380 */
	width: 41.55%;
}
/* Ergebnis: x=626 y=1519 → local y=1079 */
.case-layout--vr .cl-block--result {
	position: absolute;
	left: 54.29%;
	top: 78.19%;        /* 1079/1380 */
	width: 43.28%;
}

.case-layout--vr .cl-block h4 {
	margin: 0 0 12px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;
	line-height: 1;
	color: #F5F8F6;
}
.case-layout--vr .cl-block p {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 1.875cqw;
	line-height: 1.45;
	color: #F5F8F6;
}

/* Mobile fallback for VR — stack everything */
@media (max-width: 640px) {
	.case-layout--vr {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.case-layout--vr > * {
		position: static !important;
		width: 100% !important;
		left: auto !important; top: auto !important;
		height: auto !important;
	}
	.case-layout--vr .cl-tshirts,
	.case-layout--vr .cl-cards { aspect-ratio: 5 / 3; }
	.case-layout--vr .cl-logo { max-width: 240px; align-self: center; }
	.case-layout--vr .cl-sub  { font-size: 28px; }
	.case-layout--vr .cl-lead { font-size: 20px; }
	.case-layout--vr .cl-block h4 { font-size: 20px; }
	.case-layout--vr .cl-block p  { font-size: 14px; }
}

/* ============================================================
   CASE LAYOUTS — Timeless / AW / Si / Laser (pixel-perfect)
   All inherit base structure: aspect-ratio body 1153/1380.
   Color overrides per case (cream cards use dark text, green use light).
   ============================================================ */

/* Shared base for cl-* layouts */
.case-layout--timeless,
.case-layout--aw,
.case-layout--si,
.case-layout--laser {
	position: relative;
	width: 100%;
	aspect-ratio: 1153 / 1380;
	overflow: visible;
	container-type: inline-size;
	margin-top: 8px;
}

/* Shared text-block typography */
.case-layout--timeless .cl-block,
.case-layout--aw .cl-block,
.case-layout--si .cl-block,
.case-layout--laser .cl-block { position: absolute; }
.case-layout--timeless .cl-block h4,
.case-layout--aw .cl-block h4,
.case-layout--si .cl-block h4,
.case-layout--laser .cl-block h4 {
	margin: 0 0 12px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;
	line-height: 1;
}
.case-layout--timeless .cl-block p,
.case-layout--aw .cl-block p,
.case-layout--si .cl-block p,
.case-layout--laser .cl-block p {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 1.875cqw;
	line-height: 1.45;
}
.case-layout--timeless .cl-sub,
.case-layout--aw .cl-sub,
.case-layout--si .cl-sub,
.case-layout--laser .cl-sub {
	position: absolute;
	margin: 0;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 3.75cqw;
	line-height: 1.05;
	letter-spacing: -0.03em;
}
.case-layout--timeless .cl-lead,
.case-layout--aw .cl-lead,
.case-layout--si .cl-lead,
.case-layout--laser .cl-lead {
	position: absolute;
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;
	line-height: 1.15;
}

/* TIMELESS — cream card, dark text (Figma: IG-grid left-top, 2 phone-videos right-bottom) */
.case-layout--timeless * { color: #131515; }
.case-layout--timeless .cl-grid        { position: absolute; left: 4%;  top: 4%;  width: 36%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; }
.case-layout--timeless .cl-vid-wrap--1 { position: absolute; left: 46%; top: 48%; width: 25%; aspect-ratio: 9 / 19.5; }
.case-layout--timeless .cl-vid-wrap--2 { position: absolute; left: 73%; top: 48%; width: 25%; aspect-ratio: 9 / 19.5; }
.case-layout--timeless .cl-vid-wrap {
	border-radius: 24px;
	overflow: hidden;
	background: #000;
}
.case-layout--timeless .cl-vid-wrap .cl-vid {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.case-layout--timeless .cl-sub          { left: 48%; top: 4%;  width: 48%; }
.case-layout--timeless .cl-lead         { left: 48%; top: 18%; width: 48%; }
.case-layout--timeless .cl-block--before{ left: 48%; top: 30%; width: 48%; }
.case-layout--timeless .cl-block--do    { left: 4%;  top: 72%; width: 38%; }
.case-layout--timeless .cl-block--result{ left: 4%;  top: 88%; width: 38%; }

/* Per-video mute button — bottom-right inside each video wrapper */
.cl-vid-wrap { position: absolute; }
.cl-vid-wrap .cl-mute {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,0.65);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 3;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.cl-vid-wrap .cl-mute:hover { background: rgba(0,0,0,0.85); transform: scale(1.08); }
.cl-vid-wrap .cl-mute svg { display: block; }
.cl-vid-wrap .cl-mute .cl-mute__on  { display: none; }
.cl-vid-wrap .cl-mute .cl-mute__off { display: block; }
.cl-vid-wrap .cl-mute[aria-pressed="true"] .cl-mute__on  { display: block; }
.cl-vid-wrap .cl-mute[aria-pressed="true"] .cl-mute__off { display: none; }
.cl-vid-wrap .cl-mute[aria-pressed="true"] { background: #C19A48; color: #1B4136; }

/* Remove the old global cl-sound styles (no longer used) */
.case-layout--timeless .cl-sound { display: none !important; }

/* AW — green card, light text */
.case-layout--aw,
.case-layout--aw * { color: #F5F8F6 !important; }
.case-layout--aw {
	aspect-ratio: 1156 / 1820;
}
.case-layout--aw .cl-block h4,
.case-layout--aw .cl-sub,
.case-layout--aw .cl-lead { color: #F5F8F6 !important; }

/* Big gold title "AW / Psychologische Beratung" — inside expanded body, top-left */
.case-layout--aw .cl-title {
	position: absolute;
	left: 3%;
	top: 2%;
	width: 70%;
	margin: 0;
	color: #C19A48 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	z-index: 1;
	pointer-events: none;
}
.case-layout--aw .cl-title .cl-title__1 {
	display: block;
	color: #C19A48 !important;
	font-size: 11.72cqw;   /* 150/1280 */
}
.case-layout--aw .cl-title .cl-title__2 {
	display: block;
	color: #C19A48 !important;
	font-size: 7.5cqw;     /* 96/1280 */
	line-height: 0.95;
}
/* Broschüre 1 (closed booklet) — Figma top=calc(33.33%+397) at parent 1947 → 1046; local 1046-868=178 → 9.78% */
.case-layout--aw .cl-bro1 {
	position: absolute;
	left: -6.49%;
	top: 9.78%;
	width: 60%;
	aspect-ratio: 810 / 540;
	object-fit: cover;
	border-radius: 24px;
}
/* Broschüre 2 (open booklet) — Figma top=calc(50%+451.5) at parent 1947 → 1425; local 1425-868=557 → 30.6% */
.case-layout--aw .cl-bro2 {
	position: absolute;
	left: -3.11%;
	top: 60%;
	width: 60%;
	aspect-ratio: 810 / 540;
	object-fit: cover;
	border-radius: 24px;
}
/* AW Logo — Figma top=calc(50%+295.5) at 1947 → 1269; local 1269-868=401 → 22% */
.case-layout--aw .cl-logo {
	position: absolute;
	left: 53.46%;
	top: 38%;
	width: 36.07%;
	aspect-ratio: 417 / 250;
	object-fit: contain;
	pointer-events: none;
}
/* Text columns — pixel-mapped to bg-rect 1820 */
.case-layout--aw .cl-sub          { left: 54.29%; top: 12.50%; width: 41.55%; }   /* y=228 */
.case-layout--aw .cl-lead         { left: 54.29%; top: 19.00%; width: 41.55%; }   /* y=346 */
.case-layout--aw .cl-block--before{ left: 54.29%; top: 26.50%; width: 41.55%; }   /* y=482 */
.case-layout--aw .cl-block--do    { left:  3.20%; top: 50.00%; width: 41.55%; }   /* y=910 */
.case-layout--aw .cl-block--result{ left: 54.29%; top: 76.00%; width: 41.55%; }   /* y=1383 */

/* SI — cream card */
.case-layout--si * { color: #131515; }
.case-layout--si .cl-bag     { position: absolute; left: 3%;   top: 4%;  width: 42%; aspect-ratio: 3 / 4;   object-fit: cover; border-radius: 24px; }
.case-layout--si .cl-hangtag { position: absolute; left: -3%;  top: 70%; width: 55%; aspect-ratio: 3 / 2;   object-fit: cover; border-radius: 24px; }
.case-layout--si .cl-logo    { position: absolute; left: 60%;  top: 50%; width: 28%; aspect-ratio: 1.5 / 1; object-fit: contain; }
.case-layout--si .cl-sub          { left: 54.29%; top: 4%;  width: 41.55%; }
.case-layout--si .cl-lead         { left: 54.29%; top: 16%; width: 41.55%; }
.case-layout--si .cl-block--before{ left: 54.29%; top: 28%; width: 41.55%; }
.case-layout--si .cl-block--do    { left: 3%;     top: 50%; width: 41.55%; }
.case-layout--si .cl-block--result{ left: 54.29%; top: 80%; width: 41.55%; }

/* LASER — green card (Figma: portrait left, 2 phone-videos right, texts разнесены) */
.case-layout--laser,
.case-layout--laser * { color: #F5F8F6 !important; }
.case-layout--laser .cl-block h4,
.case-layout--laser .cl-sub,
.case-layout--laser .cl-lead { color: #F5F8F6 !important; }

.case-layout--laser .cl-portrait     { position: absolute; left: 4%;  top: 4%;  width: 36%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; }
.case-layout--laser .cl-vid-wrap--1  { position: absolute; left: 46%; top: 48%; width: 25%; aspect-ratio: 9 / 19.5; }
.case-layout--laser .cl-vid-wrap--2  { position: absolute; left: 73%; top: 48%; width: 25%; aspect-ratio: 9 / 19.5; }
.case-layout--laser .cl-vid-wrap {
	border-radius: 24px;
	overflow: hidden;
	background: #000;
}
.case-layout--laser .cl-vid-wrap .cl-vid {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.case-layout--laser .cl-sub          { left: 48%; top: 4%;  width: 48%; }
.case-layout--laser .cl-lead         { left: 48%; top: 18%; width: 48%; }
.case-layout--laser .cl-block--before{ left: 48%; top: 30%; width: 48%; }
.case-layout--laser .cl-block--do    { left: 4%;  top: 68%; width: 38%; }   /* было 72% — поднял */
.case-layout--laser .cl-block--result{ left: 4%;  top: 80%; width: 38%; }   /* было 88% — поднял (отрыв от низа) */

/* Mobile fallback for all 4 */
@media (max-width: 640px) {
	.case-layout--timeless, .case-layout--aw, .case-layout--si, .case-layout--laser {
		aspect-ratio: auto; display: flex; flex-direction: column; gap: 20px;
	}
	.case-layout--timeless > *, .case-layout--aw > *, .case-layout--si > *, .case-layout--laser > * {
		position: static !important; width: 100% !important; left: auto !important; top: auto !important; height: auto !important;
	}
	.case-layout--timeless img, .case-layout--aw img, .case-layout--si img, .case-layout--laser img {
		aspect-ratio: 4 / 3;
	}
	.case-layout--aw .cl-logo, .case-layout--si .cl-logo { max-width: 200px; align-self: center; }
}

/* Sound toggle button (Timeless videos) */
.case-layout--timeless .cl-sound {
	position: absolute;
	left: 48%;
	bottom: 4%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: rgba(27, 65, 54, 0.92);
	color: #F0EEEC;
	border: 0;
	border-radius: 999px;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 5;
}
.case-layout--timeless .cl-sound:hover { background: #1B4136; transform: translateY(-2px); }
.case-layout--timeless .cl-sound svg { display: block; }
.case-layout--timeless .cl-sound .cl-sound__on  { display: none; }
.case-layout--timeless .cl-sound .cl-sound__off { display: block; }
.case-layout--timeless .cl-sound[aria-pressed="true"] .cl-sound__on  { display: block; }
.case-layout--timeless .cl-sound[aria-pressed="true"] .cl-sound__off { display: none; }
.case-layout--timeless .cl-sound[aria-pressed="true"] { background: #C19A48; color: #1B4136; }

/* ============================================================
   05 — TESTIMONIALS · MARQUEE (Figma 0:542, pixel tokens)
   ============================================================ */
.testimonials--marquee {
	background: #F5F8F6;
	color: #1B4136;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 100px 0 120px;
	overflow: hidden;
	position: relative;
}
.testimonials--marquee .testimonials__inner {
	max-width: 1280px;
	margin: 0 auto 56px;
	padding: 0 64px;
}
.testimonials--marquee .testimonials__title {
	margin: 0;
	color: #1B4136 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(32px, 6vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	max-width: 1000px;
}

/* Marquee container */
.marquee {
	width: 100%;
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
	display: flex;
	gap: 32px;
	width: max-content;
	animation: marqueeScroll 60s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
}

/* Testimonial card */
.testi-card {
	flex: 0 0 auto;
	width: 569px;
	min-height: 235px;
	padding: 32px 36px 28px;
	background: linear-gradient(252.4deg, #F5F5F3 4.3%, #EAE6DF 96.7%);
	border: 1px solid #1B4136;
	border-radius: 24px;
	box-shadow: 6px 8px 2.4px rgba(0,0,0,0.25);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	margin: 8px 0;        /* room for shadow */
}
.testi-card__label {
	position: absolute;
	top: 24px;
	right: 32px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 12px;
	line-height: 1.115;
	color: #C19A48;
}
.testi-card__text {
	margin: 32px 0 0;
	color: #131515;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	max-width: 438px;
}
.testi-card__author {
	margin-top: 16px;
	text-align: right;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 16px;
	line-height: 1.115;
	color: #131515;
}

/* Hide the OLD testimonials grid (still in DOM elsewhere? — no, replaced) */
.testimonials__grid { display: none !important; }

@media (max-width: 768px) {
	.testimonials--marquee { padding: 56px 0 64px; }
	.testimonials--marquee .testimonials__inner { padding: 0 20px; margin-bottom: 32px; }
	.marquee__track { gap: 20px; animation-duration: 50s; }
	.testi-card { width: 320px; padding: 56px 22px 22px; min-height: 200px; }
	.testi-card__label {
		position: static;
		display: inline-block;
		width: auto;
		align-self: flex-start;
		margin: 0 0 14px;
		padding: 3px 10px;
		border: 1px solid rgba(193, 154, 72, 0.5);
		border-radius: 999px;
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		font-style: normal;
		white-space: nowrap;
	}
	.testi-card__text {
		margin: 0;
		font-size: 15px;
		max-width: 100%;
	}
	.testi-card__author { font-size: 13px; }
}

/* ============================================================
   06 — CTA BIG · pixel-perfect Figma 0:99 (1280×789 dark green)
   ============================================================ */
.cta-big--figma {
	background: #1B4136;
	color: #F5F8F6;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
}
.cta-big--figma .cta-big__frame {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	aspect-ratio: 1280 / 789;
	container-type: inline-size;
}

/* Glass spinning top — at x=834 y=335, 392×392
   Real precession: the tip stays anchored, the top traces a cone in 3D. */
.cta-big--figma {
	/* container for 3D perspective */
	perspective: 1600px;
	perspective-origin: center 90%;
}
.cta-big--figma .cta-big__art {
	position: absolute;
	left: 65.16%;     /* 834/1280 */
	top: 42.46%;      /* 335/789 */
	width: 30.66%;    /* 392/1280 */
	aspect-ratio: 1;
	pointer-events: none;
	display: block;
	transform-origin: 50% 95%;           /* anchor at the tip */
	transform-style: preserve-3d;
	animation: cta-top-precession 3s linear infinite;
	will-change: transform;
}
.cta-big--figma .cta-big__art-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 24px 64px rgba(0,0,0,0.35));
}
/* Real spinning-top precession: top of the figure traces a CONE around the tip.
   X-axis tilt = front/back lean, Z-axis tilt = left/right lean.
   When they cycle 90° apart the top describes a circle. */
@keyframes cta-top-precession {
	0%   { transform: rotateZ(8deg)  rotateX(0deg); }
	25%  { transform: rotateZ(0deg)  rotateX(-8deg); }
	50%  { transform: rotateZ(-8deg) rotateX(0deg); }
	75%  { transform: rotateZ(0deg)  rotateX(8deg); }
	100% { transform: rotateZ(8deg)  rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce) {
	.cta-big--figma .cta-big__art { animation: none; }
}

/* H2: x=64 y=70, Archivo Black 96/0.9lh/-6.71ls/#F5F8F6 */
.cta-big--figma .cta-big__title {
	position: absolute;
	left: 5%;
	top: 8.87%;       /* 70/789 */
	width: 89.55%;    /* 1146/1280 */
	margin: 0;
	color: #F5F8F6 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 7.49cqw;     /* 96/1280 */
	line-height: 0.9;
	letter-spacing: -0.07em;
	text-transform: uppercase;
	text-align: left !important;
}

/* Lead "Ein klarer Blick..." — x=64 y=282, Cygre Bold 32/1.115lh uppercase */
.cta-big--figma .cta-big__lead {
	position: absolute;
	left: 5%;
	top: 35.74%;      /* 282/789 */
	width: 60.45%;    /* 774/1280 */
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 2.5cqw;
	line-height: 1.115;
	text-transform: uppercase;
	text-align: left !important;
}

/* Hint "Genau hier setzt der Unterschied an." — Figma: centered around x=27%, one line */
.cta-big--figma .cta-big__hint {
	position: absolute;
	left: 27%;
	top: 51%;
	width: auto;
	margin: 0;
	color: #F5F8F6;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 1.875cqw;
	line-height: 1.1;
	white-space: nowrap;
}

/* Arrow — Figma: BELOW hint, points DOWN-LEFT (↙) toward "Projekt besprechen" button */
.cta-big--figma .cta-big__arrow {
	position: absolute;
	left: 30%;
	top: 60%;
	width: 5%;
	aspect-ratio: 1;
	display: block;
}
.cta-big--figma .cta-big__arrow svg { width: 100%; height: 100%; display: block; }

/* CTA button: x=64 y=574 w=499 h=110, radius 24, bg #C19A48 */
.cta-big--figma .cta-big__btn {
	position: absolute;
	left: 5%;
	top: 72.75%;      /* 574/789 */
	width: 39%;       /* 499/1280 */
	height: 13.94%;   /* 110/789 */
	background: #C19A48;
	color: #FFFFFF;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 3.12cqw;     /* 40/1280 */
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
}
.cta-big--figma .cta-big__btn:hover { background: #a88336; transform: translateY(-2px); }

/* Note italic "Klares Feedback...": x=121 y=695, Cygre RegIt 20 #F7F9F8 */
.cta-big--figma .cta-big__note {
	position: absolute;
	left: 9.45%;      /* 121/1280 */
	top: 88.09%;      /* 695/789 */
	margin: 0;
	color: #F7F9F8;
	font-family: 'Manrope', sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.56cqw;
	line-height: 1.2;
	white-space: nowrap;
}

/* Mobile fallback */
@media (max-width: 768px) {
	.cta-big--figma .cta-big__frame {
		aspect-ratio: auto;
		padding: 48px 20px 64px;
	}
	.cta-big--figma .cta-big__art,
	.cta-big--figma .cta-big__title,
	.cta-big--figma .cta-big__lead,
	.cta-big--figma .cta-big__hint,
	.cta-big--figma .cta-big__arrow,
	.cta-big--figma .cta-big__btn,
	.cta-big--figma .cta-big__note {
		position: static; width: auto; height: auto; left: auto; top: auto; margin: 0 0 16px;
	}
	.cta-big--figma .cta-big__title { font-size: 36px; }
	.cta-big--figma .cta-big__lead  { font-size: 18px; }
	.cta-big--figma .cta-big__hint  { font-size: 16px; }
	.cta-big--figma .cta-big__arrow { width: 56px; }
	.cta-big--figma .cta-big__btn   { display: inline-flex; padding: 16px 32px; font-size: 18px; height: auto; }
	.cta-big--figma .cta-big__art   { width: 60%; margin: 16px auto; }
	.cta-big--figma .cta-big__note  { white-space: normal; font-size: 14px; }
}

/* ============================================================
   07 — ABOUT · pixel-perfect Figma 0:575 (1280×1537 light)
   ============================================================ */
.about--figma {
	background: #F5F8F6;
	color: #131515;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 0 96px;     /* extra white space below ribbon */
	overflow: hidden;
}
.about--figma .about__frame {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	aspect-ratio: 1280 / 1537;
	container-type: inline-size;
}

/* H2 — x=67 y=70, Archivo Black 96/0.9lh/-6.71ls/#1B4136 */
.about--figma .about__title {
	position: absolute;
	left: 5.23%;
	top: 4.55%;        /* 70/1537 */
	width: 89.55%;     /* 1146/1280 */
	margin: 0;
	color: #1B4136 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 7.49cqw;
	line-height: 0.9;
	letter-spacing: -0.07em;
	text-transform: uppercase;
}

/* Stats — 3 absolutely positioned at exact Figma y-coords (1537 frame) */
.about--figma .about__stats {
	list-style: none;
	margin: 0;
	padding: 0;
}
.about--figma .about__stat {
	position: absolute;
	width: 42%;
	padding-left: 67px;     /* text column starts 67px after dot column (Figma x=134 vs dot x=67) */
}
.about--figma .about__stat--1 { left: 5.23%; top: 24.85%; }  /* text y=382 */
.about--figma .about__stat--2 { left: 5.23%; top: 38.39%; }  /* text y=590 */
.about--figma .about__stat--3 { left: 5.23%; top: 51.92%; }  /* text y=798 */

.about--figma .about__dot {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 33px;
	height: 33px;
	background: #C19A48;
	border-radius: 50%;
	display: block;
}
.about--figma .about__stat p {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 2.34cqw;   /* 30/1280 */
	line-height: 1.15;
	letter-spacing: -0.06em;
	color: #131515;
	text-transform: uppercase;
}
.about--figma .about__stat strong {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
}

/* Partners line — x=67 y=1020 */
.about--figma .about__partners {
	position: absolute;
	left: 5.23%;
	top: 66.36%;       /* 1020/1537 */
	width: 52.11%;     /* 667/1280 */
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 2.34cqw;
	line-height: 1.15;
	letter-spacing: -0.06em;
	color: #131515;
}

/* Photo — x=630 y=184 w=731 h=1302 */
.about--figma .about__photo {
	position: absolute;
	left: 49.22%;      /* 630/1280 */
	top: 11.97%;       /* 184/1537 */
	width: 57.11%;     /* 731/1280 */
	height: 84.71%;    /* 1302/1537 */
	object-fit: contain;
	object-position: bottom right;
	pointer-events: none;
}

/* Gold marquee ribbon — slim, sits UNDER photo edge */
.about--figma .about__ribbon {
	width: 100vw;
	max-width: 100vw;
	background: #C19A48;
	padding: 10px 0;
	overflow: hidden;
	position: relative;
	margin-top: -150px;
	z-index: 1;
}
.about--figma .about__photo { z-index: 2; }
.about--figma .about__ribbon-track {
	display: flex;
	gap: 73px;
	align-items: center;
	width: max-content;
	animation: aboutRibbonScroll 28s linear infinite;
	padding-left: 73px;
}
.about--figma .about__ribbon:hover .about__ribbon-track {
	animation-play-state: paused;
}
.about--figma .about__ribbon span {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: #131515;
	flex-shrink: 0;
	white-space: nowrap;
}
@keyframes aboutRibbonScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
	.about--figma .about__ribbon-track { animation: none; }
}

/* Mobile fallback */
@media (max-width: 768px) {
	.about--figma { padding: 0 0 56px; }
	.about--figma .about__frame {
		aspect-ratio: auto !important;
		container-type: normal !important;
		padding: 56px 20px 32px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}
	.about--figma .about__title,
	.about--figma .about__stats,
	.about--figma .about__partners,
	.about--figma .about__photo {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		left: auto !important; top: auto !important; right: auto !important;
		margin: 0 !important;
	}
	.about--figma .about__title { font-size: 36px !important; line-height: 0.95 !important; }

	/* Stats as flex list with golden dots */
	.about--figma .about__stats {
		display: flex !important;
		flex-direction: column !important;
		gap: 18px !important;
		margin: 8px 0 !important;
	}
	.about--figma .about__stat {
		position: relative !important;
		padding: 0 0 0 42px !important;
		margin: 0 !important;
		width: 100% !important;
		left: auto !important; top: auto !important;
	}
	.about--figma .about__dot {
		position: absolute !important;
		left: 0 !important;
		top: 8px !important;
		transform: none !important;
		width: 22px !important;
		height: 22px !important;
	}
	.about--figma .about__stat p { font-size: 17px !important; line-height: 1.3 !important; letter-spacing: -0.02em !important; }
	.about--figma .about__partners { font-size: 16px !important; line-height: 1.5 !important; max-width: 100% !important; }

	/* Photo — zoomed transparent PNG, top hugs text, bottom kisses ribbon */
	.about--figma { overflow: visible !important; }
	.about--figma .about__frame { overflow: visible !important; }
	.about--figma .about__photo {
		display: block !important;
		width: 110% !important;
		max-width: none !important;
		max-height: none !important;
		height: auto !important;
		margin: -12px auto -50px !important;
		margin-left: -5% !important;
		margin-right: -5% !important;
		object-fit: contain !important;
		object-position: bottom center !important;
		position: relative !important;
		z-index: 10 !important;
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* Ribbon — keep single-row marquee on mobile, just smaller */
	.about--figma .about__ribbon {
		position: static !important;
		margin: 0 !important;
		padding: 14px 0 !important;
		width: 100vw !important;
		overflow: hidden !important;
	}
	.about--figma .about__ribbon-track {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 36px !important;
		padding-left: 36px !important;
		animation-duration: 22s !important;
	}
	.about--figma .about__ribbon span {
		font-size: 16px !important;
		letter-spacing: -0.02em !important;
		flex-shrink: 0 !important;
		white-space: nowrap !important;
	}
}

/* ============================================================
   08 — SERVICES · pixel-perfect Figma 0:112 (1280×1795 dark green)
   ============================================================ */
.services--figma {
	background: #1B4136;
	color: #F5F8F6;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 96px 0 96px;
	overflow: hidden;
}
.services--figma .services__frame {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 70px 0 0;
	container-type: inline-size;
}

/* H2 */
.services--figma .services__title {
	margin: 0 5.54% 32px;
	color: #F5F8F6 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 7.49cqw, 96px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	text-transform: uppercase;
}

/* Intro */
.services--figma .services__intro {
	margin: 0 5.39% 56px;
	max-width: 60.55%;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 2.5cqw, 32px);
	line-height: 1.115;
	text-transform: uppercase;
}

/* Cards grid — CSS grid 2 cols, тонкие gaps. Stadium-shape corners на outer cards */
.services--figma .services__grid {
	margin: 0 5% 56px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
	row-gap: 10px;
}
.service-card {
	background: linear-gradient(257deg, #F5F5F3 4%, #EAE6DF 97%);
	padding: 40px 38px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 200px;
}
.service-card h3 {
	margin: 0;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(20px, 2.3cqw, 30px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: #131515;
}
.service-card p {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 1.55cqw, 20px);
	line-height: 1.3;
	color: #131515;
}
.service-card--tl { border-top-left-radius: 60px; }
.service-card--tr { border-top-right-radius: 60px; }
.service-card--wide {
	grid-column: 1 / -1;
	align-items: center;
	text-align: center;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
}
.service-card--wide p { max-width: 700px; }

/* Footer: 2-col grid (button+note left, arrow+outro right) */
.services--figma .services__footer {
	margin: 8px 5% 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: end;
}
.services--figma .services__footer-left {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}
.services--figma .services__footer-right {
	display: flex;
	align-items: center;
	gap: 24px;
	justify-content: flex-end;
}

.services--figma .services__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 28px 56px;
	background: #C19A48;
	color: #FFFFFF;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 3.12cqw, 40px);
	line-height: 1;
	border-radius: 24px;
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
	width: min(500px, 100%);
}
.services--figma .services__btn:hover { background: #a88336; transform: translateY(-2px); }

.services--figma .services__note {
	margin: 0;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.2;
	text-align: center;
	width: min(500px, 100%);
}

.services--figma .services__arrow {
	display: inline-block;
	width: 72px;
	aspect-ratio: 1;
	flex-shrink: 0;
}
.services--figma .services__arrow svg { width: 100%; height: 100%; }

.services--figma .services__outro {
	margin: 0;
	max-width: 420px;
	color: #F5F8F6;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 1.875cqw, 24px);
	line-height: 1;
	text-align: left;
}

@media (max-width: 768px) {
	.services--figma .services__footer { grid-template-columns: 1fr; }
	.services--figma .services__footer-right { justify-content: flex-start; }
}

/* Mobile */
@media (max-width: 768px) {
	.services--figma .services__frame { aspect-ratio: auto; padding: 48px 20px 0; }
	.services--figma .services__title,
	.services--figma .services__intro,
	.services--figma .services__grid,
	.services--figma .services__arrow,
	.services--figma .services__outro,
	.services--figma .services__btn,
	.services--figma .services__note {
		position: static; width: auto; height: auto; left: auto; top: auto; right: auto; margin: 0 0 16px;
	}
	.services--figma .services__title { font-size: 36px; }
	.services--figma .services__intro { font-size: 18px; margin-bottom: 32px; }
	.services--figma .services__grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
	.service-card { position: static; width: 100% !important; padding: 24px; height: auto; }
	.service-card--tl, .service-card--tr, .service-card--bl, .service-card--br, .service-card--wide { border-radius: 24px; }
	.service-card h3 { font-size: 22px; }
	.service-card p { font-size: 15px; }
	.services--figma .services__btn { display: inline-flex; padding: 16px 32px; font-size: 18px; height: auto; }
	.services--figma .services__outro { font-size: 18px; text-align: left; }
	.services--figma .services__arrow { width: 56px; align-self: flex-start; transform: none; }
}

/* ============================================================
   09 — ABLAUF · pixel-perfect Figma 0:61 (1280×1979 light)
   ============================================================ */
.ablauf--figma {
	background: #F5F8F6;
	color: #131515;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 70px 0 80px;
	overflow: hidden;
}
.ablauf--figma .ablauf__frame {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 5.54%;
	container-type: inline-size;
}

/* H2: Archivo Black 96 / 0.9lh / -6.71ls / #1B4136 */
.ablauf--figma .ablauf__title {
	margin: 0 0 32px;
	color: #1B4136 !important;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 7.49cqw, 96px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	text-transform: uppercase;
}

/* Intro: Cygre Bold 32 uppercase #131515 */
.ablauf--figma .ablauf__intro {
	margin: 0 0 64px;
	color: #131515;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 2.5cqw, 32px);
	line-height: 1.115;
	text-transform: uppercase;
	max-width: 1019px;
}

/* Steps list */
.ablauf--figma .ablauf__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.ablauf--figma .ablauf__step {
	display: grid;
	grid-template-columns: 242px 1fr;     /* number column 71→313 = 242 */
	align-items: center;
	gap: 0;
}
.ablauf--figma .ablauf__num {
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(64px, 10cqw, 128px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	color: rgba(193, 154, 72, 0.5);
	text-transform: uppercase;
}
.ablauf--figma .ablauf__body h3 {
	margin: 0 0 12px;
	color: #131515;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.75cqw, 48px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	text-transform: uppercase;
}
.ablauf--figma .ablauf__body p {
	margin: 0;
	color: #131515;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: clamp(16px, 2.5cqw, 32px);
	line-height: 1.15;
	letter-spacing: -0.07em;
	max-width: 909px;
}

/* CTA row: gold arrow ↙ + outro text */
.ablauf--figma .ablauf__cta-row {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 64px 0 32px;
}
.ablauf--figma .ablauf__arrow {
	display: inline-block;
	width: 96px;
	flex-shrink: 0;
}
.ablauf--figma .ablauf__arrow svg { width: 100%; height: auto; display: block; }
/* Rotate same arrow 90° clockwise → points DOWN (specificity-safe + !important) */
.ablauf--figma .ablauf__arrow.ablauf__arrow--down,
.ablauf--figma .ablauf__arrow--down {
	transform: rotate(90deg) !important;
	transform-origin: center center !important;
}
.ablauf--figma .ablauf__arrow.ablauf__arrow--down svg,
.ablauf--figma .ablauf__arrow--down svg {
	transform: rotate(0deg) !important;       /* reset child transform — rotation on span only */
}
.ablauf--figma .ablauf__outro {
	margin: 0;
	color: #131515;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 2.5cqw, 32px);
	line-height: 0.9;
	max-width: 702px;
}

.ablauf--figma .ablauf__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 28px 56px;
	background: #C19A48;
	color: #FFFFFF;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 3.12cqw, 40px);
	line-height: 1;
	border-radius: 24px;
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
	width: min(500px, 100%);
}
.ablauf--figma .ablauf__btn:hover { background: #a88336; transform: translateY(-2px); }

.ablauf--figma .ablauf__note {
	margin: 16px 0 0;
	color: #131515;
	font-family: 'Manrope', sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.2;
	max-width: 500px;
	text-align: center;
}

@media (max-width: 768px) {
	.ablauf--figma .ablauf__frame { padding: 0 20px; }
	.ablauf--figma .ablauf__title { font-size: 36px; }
	.ablauf--figma .ablauf__intro { font-size: 18px; margin-bottom: 40px; }
	.ablauf--figma .ablauf__step { grid-template-columns: 100px 1fr; }
	.ablauf--figma .ablauf__num   { font-size: 64px; }
	.ablauf--figma .ablauf__body h3 { font-size: 24px; }
	.ablauf--figma .ablauf__body p { font-size: 15px; }
	.ablauf--figma .ablauf__cta-row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   10 — FAQ · pixel-perfect Figma 0:590 (1280x1334 dark green)
   ============================================================ */
.faq--figma {
	background: #1B4136;
	color: #F5F8F6;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	padding: 70px 0 80px;
}

.faq--figma .faq__frame {
	max-width: 1152px;        /* 1280 - 2×64 padding */
	margin: 0 auto;
	padding: 0 64px;
	box-sizing: content-box;
}

.faq--figma .faq__title {
	margin: 0 0 50px;
	font-family: 'Archivo Black', 'Anton', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 7.5vw, 96px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	color: #F5F8F6;
	text-transform: uppercase;
}

.faq--figma .faq__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.faq--figma .faq__left {
	display: flex;
	flex-direction: column;
}

/* 6 FAQ pills */
.faq--figma .faq__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.faq--figma .faq__item {
	background: linear-gradient(230.6deg, #F5F5F3 4.33%, #EAE6DF 96.69%);
	border-radius: 24px;
	color: #131515;
	overflow: hidden;
	transition: box-shadow .25s ease;
}
.faq--figma .faq__item[open] { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

.faq--figma .faq__item summary {
	list-style: none;
	list-style-type: none;
	cursor: pointer;
	height: 80px;
	padding: 0 76px 0 36px;
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
.faq--figma .faq__item summary::-webkit-details-marker,
.faq--figma .faq__item summary::marker {
	display: none;
	content: '';
}
.faq--figma .faq__item summary::before,
.faq--figma .faq__item summary::after {
	content: none !important;
	display: none !important;
}
.faq--figma .faq__item[open] summary { color: #131515; }
.faq--figma .faq__item[open] summary::after { transform: none !important; }

.faq--figma .faq__q {
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 1.35vw, 19px);
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: #131515;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.faq--figma .faq__chev {
	position: absolute;
	right: 22px;
	top: 50%;
	flex-shrink: 0;
	width: 35px;
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.faq--figma .faq__item[open] .faq__chev { transform: translateY(-50%) rotate(-90deg); }

.faq--figma .faq__a {
	padding: 0 36px 24px;
	color: #1B4136;
}
.faq--figma .faq__a p {
	margin: 0;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: -0.003em;
}

/* CTA below pills */
.faq--figma .faq__cta {
	margin-top: 48px;
}
.faq--figma .faq__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 110px;
	padding: 24px 32px;
	background: #C19A48;
	color: #F5F8F6;
	border-radius: 24px;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.5vw, 40px);
	line-height: 1;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
}
.faq--figma .faq__btn:hover { background: #a88336; transform: translateY(-2px); }

.faq--figma .faq__note {
	margin: 24px 0 0;
	color: #F5F8F6;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
}

/* RIGHT COLUMN — photo */
.faq--figma .faq__right {
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.faq--figma .faq__photo {
	width: 100%;
	aspect-ratio: 521 / 928;
	overflow: hidden;
}
.faq--figma .faq__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* MOBILE */
@media (max-width: 900px) {
	.faq--figma { padding: 56px 0; }
	.faq--figma .faq__frame { padding: 0 20px; }
	.faq--figma .faq__title { font-size: 36px; margin-bottom: 32px; }
	.faq--figma .faq__grid { grid-template-columns: 1fr; gap: 32px; }
	.faq--figma .faq__list { gap: 12px; }
	.faq--figma .faq__item summary { padding: 16px 20px; min-height: 72px; }
	.faq--figma .faq__q { font-size: 17px; }
	.faq--figma .faq__chev { width: 28px; height: 28px; }
	.faq--figma .faq__a { padding: 0 20px 20px; }
	.faq--figma .faq__a p { font-size: 15px; }
	.faq--figma .faq__cta { margin-top: 32px; }
	.faq--figma .faq__btn { min-height: 64px; font-size: 20px; padding: 16px 24px; }
	.faq--figma .faq__note { font-size: 16px; }
	.faq--figma .faq__photo { max-width: 480px; margin: 0 auto; }
}

/* ============================================================
   11 — ANFRAGE FORM · pixel-perfect Figma 0:36 (1280x1287 light)
   ============================================================ */
.anfrage--figma {
	background: #F5F8F6;
	color: #131515;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	padding: 65px 0 80px;
	position: relative;
}

.anfrage--figma .anfrage__frame {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 64px;
	box-sizing: content-box;
	position: relative;
}

.anfrage--figma .anfrage__title {
	margin: 0;
	font-family: 'Archivo Black', 'Anton', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 7.5vw, 96px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	color: #1B4136;
	text-transform: uppercase;
}

.anfrage--figma .anfrage__lead {
	margin: 32px 0 56px;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(22px, 3.12vw, 40px);
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: #131515;
	text-transform: uppercase;
	max-width: 700px;
}

.anfrage--figma .anfrage__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.anfrage--figma .anfrage__left { min-width: 0; }

.anfrage--figma .anfrage__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 568px;
}

.anfrage--figma .anfrage__field {
	display: block;
	background: linear-gradient(229.9deg, #F5F5F3 4.33%, #EAE6DF 96.69%);
	border: 1px solid #1B4136;
	border-radius: 24px;
	overflow: hidden;
	transition: box-shadow .25s ease, border-color .25s ease;
}
.anfrage--figma .anfrage__field:focus-within {
	border-color: #C19A48;
	box-shadow: 0 4px 16px rgba(193, 154, 72, 0.2);
}

.anfrage--figma .anfrage__field input,
.anfrage--figma .anfrage__field textarea,
.anfrage--figma .anfrage__field select {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0 32px;
	height: 78px;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.115;
	letter-spacing: -0.005em;
	color: #131515;
	text-transform: uppercase;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.anfrage--figma .anfrage__field--ta textarea {
	height: 156px;
	padding: 28px 32px;
	resize: vertical;
	min-height: 100px;
}

.anfrage--figma .anfrage__field input::placeholder,
.anfrage--figma .anfrage__field textarea::placeholder {
	color: #131515;
	opacity: 1;
	font-weight: 700;
	text-transform: uppercase;
}
.anfrage--figma .anfrage__field input:focus::placeholder,
.anfrage--figma .anfrage__field textarea:focus::placeholder {
	opacity: 0.4;
}

/* Select field — keeps same look as input, with custom caret */
.anfrage--figma .anfrage__field--select {
	position: relative;
}
.anfrage--figma .anfrage__field--select select {
	padding-right: 64px;
	cursor: pointer;
}
.anfrage--figma .anfrage__field--select select:invalid,
.anfrage--figma .anfrage__field--select select option[value=""] {
	color: #131515;
}
.anfrage--figma .anfrage__field--select select option {
	color: #131515;
	background: #ffffff;
	font-weight: 600;
	text-transform: none;
	padding: 8px;
}
.anfrage--figma .anfrage__field-caret {
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform .25s ease;
}
.anfrage--figma .anfrage__field--select:focus-within .anfrage__field-caret {
	transform: translateY(-50%) rotate(180deg);
}

/* Consent checkbox — DSGVO Pflichtfeld (slim, aligned with input padding) */
.anfrage--figma .anfrage__consent {
	position: relative;
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 14px;
	align-items: center;
	margin: 4px 4px 0;
	padding: 8px 4px;
	cursor: pointer;
	user-select: none;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(19, 21, 21, 0.72);
}
.anfrage--figma .anfrage__consent input {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
	pointer-events: none;
}
.anfrage--figma .anfrage__consent-box {
	width: 20px;
	height: 20px;
	background: #ffffff;
	border: 1.5px solid rgba(27, 65, 54, 0.4);
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.anfrage--figma .anfrage__consent-box svg {
	opacity: 0;
	transform: scale(0.5);
	transition: opacity .2s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.anfrage--figma .anfrage__consent:hover .anfrage__consent-box {
	border-color: #C19A48;
}
.anfrage--figma .anfrage__consent input:checked ~ .anfrage__consent-box {
	background: #C19A48;
	border-color: #C19A48;
	box-shadow: 0 2px 8px rgba(193, 154, 72, 0.3);
}
.anfrage--figma .anfrage__consent input:checked ~ .anfrage__consent-box svg {
	opacity: 1;
	transform: scale(1);
}
.anfrage--figma .anfrage__consent input:focus-visible ~ .anfrage__consent-box {
	outline: 2px solid #C19A48;
	outline-offset: 3px;
}
.anfrage--figma .anfrage__consent-text {
	font-weight: 400;
}
.anfrage--figma .anfrage__consent-text a {
	color: #C19A48;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.anfrage--figma .anfrage__consent-text a:hover { color: #1B4136; }

.anfrage--figma .anfrage__btn {
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 110px;
	padding: 24px 32px;
	background: #C19A48;
	color: #F5F8F6;
	border: 0;
	border-radius: 24px;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.5vw, 40px);
	line-height: 0.8;
	letter-spacing: -0.01em;
	cursor: pointer;
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
}
.anfrage--figma .anfrage__btn:hover { background: #a88336; transform: translateY(-2px); }

.anfrage--figma .anfrage__note {
	margin: 12px 0 0;
	color: #131515;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
}

.anfrage--figma .anfrage__right {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
}
.anfrage--figma .anfrage__glass {
	width: 100%;
	max-width: 620px;
	aspect-ratio: 1 / 1;
	filter: drop-shadow(0 24px 64px rgba(193, 154, 72, 0.15));
	animation: anfrage-float 6s ease-in-out infinite;
}
.anfrage--figma .anfrage__glass-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
@keyframes anfrage-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-16px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
	.anfrage--figma .anfrage__glass { animation: none; }
}

/* Reply row — sparkle + text */
.anfrage--figma .anfrage__reply-row {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 48px;
	max-width: 700px;
}
.anfrage--figma .anfrage__spark {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	animation: anfrage-spark-spin 18s linear infinite;
}
.anfrage--figma .anfrage__spark svg { width: 100%; height: 100%; display: block; }
@keyframes anfrage-spark-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.anfrage--figma .anfrage__spark { animation: none; }
}

.anfrage--figma .anfrage__reply {
	margin: 0;
	color: #131515;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.5vw, 32px);
	line-height: 0.95;
	letter-spacing: -0.005em;
	max-width: 486px;
}

/* MOBILE */
@media (max-width: 900px) {
	.anfrage--figma { padding: 56px 0; }
	.anfrage--figma .anfrage__frame { padding: 0 20px; }
	.anfrage--figma .anfrage__title { font-size: 36px; }
	.anfrage--figma .anfrage__lead { font-size: 22px; margin: 20px 0 32px; }
	.anfrage--figma .anfrage__grid { grid-template-columns: 1fr; gap: 32px; }
	.anfrage--figma .anfrage__form { max-width: 100%; gap: 14px; }
	.anfrage--figma .anfrage__field input,
	.anfrage--figma .anfrage__field textarea {
		height: 64px; padding: 0 20px; font-size: 16px;
	}
	.anfrage--figma .anfrage__field--ta textarea { height: 130px; padding: 18px 20px; }
	.anfrage--figma .anfrage__btn { min-height: 64px; font-size: 22px; padding: 16px 24px; }
	.anfrage--figma .anfrage__note { font-size: 16px; }
	.anfrage--figma .anfrage__right { min-height: auto; order: -1; }
	.anfrage--figma .anfrage__glass { max-width: 320px; }
	.anfrage--figma .anfrage__reply-row { gap: 16px; margin-top: 32px; }
	.anfrage--figma .anfrage__spark { width: 64px; height: 64px; }
	.anfrage--figma .anfrage__reply { font-size: 18px; }
}

/* ============================================================
   12 — FOOTER · pixel-perfect Figma 0:19 (1280x647 dark green)
   ============================================================ */
.footer--figma {
	background: #1B4136;
	color: #F5F8F6;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 70px 0 90px;
	overflow: visible;
}

.footer--figma .footer__frame {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 64px;
	box-sizing: content-box;
	position: relative;
}

.footer--figma .footer__title {
	margin: 0 0 80px;
	font-family: 'Archivo Black', 'Anton', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 7.5vw, 96px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	color: #C19A48;
	text-transform: uppercase;
}

.footer--figma .footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 64px;
}

/* Navigation column */
.footer--figma .footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	padding: 16px 30px;
	border-radius: 8px;
	backdrop-filter: blur(35px);
	-webkit-backdrop-filter: blur(35px);
	background: rgba(255, 255, 255, 0.03);
	width: max-content;
}
.footer--figma .footer__nav-h {
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: #F5F8F6;
	text-transform: none;
}
.footer--figma .footer__nav a {
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: #F5F8F6;
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}
.footer--figma .footer__nav a:hover {
	color: #C19A48;
	transform: translateX(4px);
}

/* Contact card */
.footer--figma .footer__card {
	background: linear-gradient(244.6deg, #F5F5F3 4.33%, #EAE6DF 96.69%);
	border-radius: 24px;
	padding: 36px 48px;
	width: 100%;
	max-width: 566px;
	justify-self: end;
	min-height: 156px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.footer--figma .footer__avail {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 1.45vw, 19px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: #1B4136;
	text-transform: none;
	white-space: nowrap;
}
.footer--figma .footer__avail > span:last-child { white-space: nowrap; }
.footer--figma .footer__dot {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #C19A48;
}
.footer--figma .footer__phone {
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.75vw, 48px);
	line-height: 0.9;
	letter-spacing: -0.07em;
	color: #1B4136;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s ease;
}
.footer--figma .footer__phone:hover { color: #C19A48; }

/* Legal row */
.footer--figma .footer__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px 85px;
	margin-top: 32px;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: #F5F8F6;
}
.footer--figma .footer__legal a {
	color: #C19A48;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.footer--figma .footer__legal a:hover {
	color: #F5F8F6;
	text-decoration-color: #F5F8F6;
}

/* MOBILE */
@media (max-width: 900px) {
	.footer--figma { padding: 56px 0 48px; }
	.footer--figma .footer__frame { padding: 0 20px; }
	.footer--figma .footer__title { font-size: 36px; margin-bottom: 40px; }
	.footer--figma .footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-bottom: 40px;
	}
	.footer--figma .footer__nav { width: 100%; padding: 24px; }
	.footer--figma .footer__nav-h { font-size: 18px; }
	.footer--figma .footer__nav a { font-size: 16px; }
	.footer--figma .footer__card {
		justify-self: stretch;
		max-width: 100%;
		padding: 24px;
		min-height: auto;
	}
	.footer--figma .footer__avail { font-size: 16px; }
	.footer--figma .footer__phone { font-size: 32px; }
	.footer--figma .footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		font-size: 14px;
	}
}

/* ============================================================
   LEGAL PAGES — Impressum / Datenschutz · brand-style
   ============================================================ */
.legal {
	background: #F5F8F6;
	color: #131515;
}

/* HERO — dark green, gold display title (analog Footer / FAQ) */
.legal__hero {
	background: #1B4136;
	color: #F5F8F6;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 96px 0 80px;
	position: relative;
	overflow: hidden;
}
.legal__hero::before {
	content: '';
	position: absolute;
	top: 50%; left: -200px;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(193, 154, 72, 0.12) 0%, transparent 70%);
	transform: translateY(-50%);
	pointer-events: none;
}
.legal__hero::after {
	content: '';
	position: absolute;
	bottom: -150px; right: -100px;
	width: 500px; height: 500px;
	background: radial-gradient(circle, rgba(86, 21, 25, 0.18) 0%, transparent 70%);
	pointer-events: none;
}
.legal__hero-inner {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 64px;
	box-sizing: content-box;
	position: relative;
	z-index: 1;
}
.legal h1.legal__title,
.legal .legal__title,
h1.legal__title {
	margin: 0 !important;
	font-family: 'Archivo Black', 'Anton', Impact, sans-serif !important;
	font-weight: 400 !important;
	font-size: clamp(36px, 5.5vw, 72px) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.05em !important;
	color: #F5F8F6 !important;
	text-transform: uppercase !important;
	word-break: break-word;
}
.legal__lead {
	margin: 48px 0 0 !important;
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(20px, 2.5vw, 32px);
	line-height: 1.25 !important;
	letter-spacing: -0.01em;
	color: #F5F8F6 !important;
	text-transform: uppercase;
	max-width: 700px;
}

/* CONTENT — cream card on light background */
.legal__content {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #F5F8F6;
	padding: 80px 0 96px;
	position: relative;
}
.legal__content-inner {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 64px;
	box-sizing: content-box;
}

.legal__card {
	background: linear-gradient(244.6deg, #F5F5F3 4.33%, #EAE6DF 96.69%);
	border-radius: 24px;
	padding: 64px 72px;
	box-shadow: 0 24px 64px rgba(27, 65, 54, 0.08);
	margin-top: -160px;
	position: relative;
	z-index: 2;
}

.legal__body {
	font-family: 'Cygre', 'Manrope', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #1f1f1f;
	max-width: 820px;
}
.legal__body h2 {
	margin: 56px 0 20px;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: clamp(22px, 2.5vw, 32px);
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: #1B4136;
	text-transform: uppercase;
	position: relative;
	padding-top: 24px;
}
.legal__body h2::before {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: #C19A48;
	margin-bottom: 16px;
	border-radius: 2px;
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; }

.legal__body h3 {
	margin: 32px 0 12px;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #1B4136;
}

.legal__body p { margin: 0 0 18px; }
.legal__body p:last-child { margin-bottom: 0; }
.legal__body strong { color: #131515; font-weight: 700; }
.legal__body em { color: #561519; font-style: italic; font-weight: 700; }

.legal__body a {
	color: #C19A48;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 600;
	transition: color .2s ease;
	word-break: break-word;
}
.legal__body a:hover { color: #1B4136; }

.legal__body ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.legal__body li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	line-height: 1.55;
}
.legal__body li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.55em;
	width: 8px;
	height: 8px;
	background: #C19A48;
	border-radius: 50%;
}

.legal__body hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid rgba(27, 65, 54, 0.15);
}

/* Inset address blocks — white pill inside cream card */
.legal__body .legal-block {
	background: #ffffff;
	border: 1px solid rgba(27, 65, 54, 0.18);
	border-left: 4px solid #C19A48;
	border-radius: 18px;
	padding: 24px 32px;
	margin: 24px 0 28px;
	box-shadow: 0 4px 16px rgba(27, 65, 54, 0.04);
}
.legal__body .legal-block p { margin-bottom: 12px; }
.legal__body .legal-block p:last-child { margin-bottom: 0; }
.legal__body .legal-block strong {
	display: block;
	margin-bottom: 8px;
	font-family: 'Archivo Black', sans-serif;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -0.02em;
	color: #1B4136;
	text-transform: uppercase;
}

/* Back link — pill with arrow icon */
.legal__back {
	margin: 56px 0 0;
}
.legal__back a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 28px 16px 16px;
	background: #1B4136;
	color: #F5F8F6;
	border-radius: 999px;
	font-family: 'Cygre', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}
.legal__back a:hover {
	background: #0F2C22;
	transform: translateX(-4px);
}
.legal__back-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.legal__hero { padding: 64px 0 48px; }
	.legal__hero-inner { padding: 0 20px; }
	.legal__title { font-size: 48px; }
	.legal__lead { font-size: 18px; margin-top: 20px; }
	.legal__content { padding: 48px 0 64px; }
	.legal__content-inner { padding: 0 20px; }
	.legal__card { padding: 32px 24px; margin-top: -80px; border-radius: 20px; }
	.legal__body { font-size: 15px; line-height: 1.6; }
	.legal__body h2 { margin: 36px 0 12px; padding-top: 18px; }
	.legal__body h2::before { width: 36px; margin-bottom: 12px; }
	.legal__body .legal-block { padding: 20px 22px; }
	.legal__back { margin-top: 40px; }
	.legal__back a { padding: 12px 22px 12px 12px; font-size: 15px; }
	.legal__back-arrow { width: 28px; height: 28px; }
}

/* =====================================================================
   📱 GLOBAL MOBILE OVERRIDES — final pass for tablets and phones
   Order: 1024px tablet → 768px tablet-portrait → 480px phone → 360px small
   ===================================================================== */

/* ====== MOBILE MENU — clean, simple, like autoservice-freital.de ====== */
@media (max-width: 1024px) {
	.one225-header__inner {
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.one225-header__cta { display: none; }

	/* Burger */
	.one225-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		cursor: pointer;
		padding: 0;
		margin-left: auto;
		z-index: 200;
		position: relative;
	}
	.one225-burger span {
		width: 26px;
		height: 2px;
		background: #131515;
		display: block;
		transition: transform .3s ease, opacity .25s ease, background .25s ease;
	}
	body.nav-open .one225-burger { position: fixed; top: 28px; right: 20px; }
	body.nav-open .one225-burger span { background: #F5F8F6; }
	body.nav-open .one225-burger span:nth-child(1) { transform: translate(0, 7px) rotate(45deg); }
	body.nav-open .one225-burger span:nth-child(2) { opacity: 0; }
	body.nav-open .one225-burger span:nth-child(3) { transform: translate(0, -7px) rotate(-45deg); }

	/* Drawer — full screen sliding panel */
	.one225-header__nav {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: stretch !important;
		gap: 8px !important;
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 96px 32px 48px !important;
		background: #1B4136 !important;
		z-index: 150 !important;
		transform: translateX(100%) !important;
		transition: transform .4s ease !important;
		overflow-y: auto;
	}
	body.nav-open .one225-header__nav { transform: translateX(0) !important; }

	.one225-header__nav a {
		display: block !important;
		padding: 16px 0 !important;
		font-family: 'Archivo Black', sans-serif !important;
		font-size: 28px !important;
		color: #F5F8F6 !important;
		text-decoration: none !important;
		text-transform: uppercase !important;
		letter-spacing: -0.03em !important;
		border-bottom: 1px solid rgba(245, 248, 246, 0.2) !important;
		text-align: center !important;
	}
	.one225-header__nav a:hover,
	.one225-header__nav a:active { color: #C19A48 !important; }

	.one225-header__nav .one225-header__nav-cta {
		margin-top: 24px !important;
		padding: 18px 32px !important;
		background: #C19A48 !important;
		color: #F5F8F6 !important;
		border: 0 !important;
		border-radius: 999px !important;
		font-size: 18px !important;
		text-align: center !important;
	}

	body.nav-open { overflow: hidden; }
}
@media (min-width: 1025px) {
	.one225-burger { display: none; }
	.one225-header__nav-cta { display: none; }
}

/* ----- HERO ----- */
@media (max-width: 768px) {
	.hero--figma .hero__frame {
		aspect-ratio: auto;
		min-height: auto;
		padding: 100px 20px 64px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.hero--figma .hero__pillars-bar { display: none; }
	.hero--figma .hero__pillars {
		position: static;
		display: flex;
		flex-wrap: wrap;
		gap: 8px 16px;
		transform: none;
		order: 1;
	}
	.hero--figma .hero__pillars span {
		position: static;
		font-size: 14px;
		letter-spacing: 0;
	}
	.hero--figma .hero__eyebrow {
		position: static;
		font-size: 13px;
		order: 0;
		text-align: left;
	}
	.hero--figma .hero__title {
		position: static;
		width: auto;
		font-size: clamp(40px, 13vw, 64px);
		line-height: 0.92;
		letter-spacing: -0.05em;
		order: 2;
	}
	.hero--figma .hero__cube {
		position: static;
		width: 70%;
		max-width: 320px;
		margin: 8px auto 0;
		order: 3;
		animation-duration: 18s;
	}
	.hero--figma .hero__sub {
		position: static;
		width: auto;
		font-size: 16px;
		line-height: 1.3;
		order: 4;
	}
	.hero--figma .hero__btn {
		position: static;
		width: 100%;
		height: auto;
		min-height: 64px;
		font-size: 18px;
		border-radius: 16px;
		order: 5;
	}
	.hero--figma .hero__note {
		position: static;
		width: auto;
		font-size: 14px;
		order: 6;
	}
	.hero--figma .hero__tag {
		position: static;
		width: auto;
		font-size: 16px;
		order: 7;
		text-align: left;
		margin-top: 16px;
	}
}

/* ----- PAIN ----- */
@media (max-width: 768px) {
	.pain--figma .pain__frame {
		aspect-ratio: auto;
		padding: 56px 20px 64px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.pain--figma .pain__title,
	.pain--figma .pain__eyebrow,
	.pain--figma .pain__cards,
	.pain--figma .pain__card,
	.pain--figma .pain__statement,
	.pain--figma .pain__hint,
	.pain--figma .pain__hint-text,
	.pain--figma .pain__hint-arrow {
		position: static;
		width: auto;
		height: auto;
		left: auto; top: auto; right: auto;
	}
	.pain--figma .pain__title { font-size: 32px; line-height: 0.95; }
	.pain--figma .pain__eyebrow { font-size: 22px; line-height: 1; }
	.pain--figma .pain__cards { display: flex; flex-direction: column; gap: 14px; }
	.pain--figma .pain__card {
		padding: 24px;
		border-radius: 20px !important;
		border-top-left-radius: 20px !important;
		border-top-right-radius: 20px !important;
		border-bottom-left-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}
	.pain--figma .pain__card h3 { font-size: 18px; letter-spacing: -0.03em; }
	.pain--figma .pain__card p { font-size: 14px; }
	.pain--figma .pain__statement { font-size: 18px; line-height: 1.3; margin-top: 8px; }
	.pain--figma .pain__hint { display: flex; flex-direction: row; gap: 16px; align-items: center; margin-top: 16px; }
	.pain--figma .pain__hint-text { font-size: 16px; flex: 1; }
	.pain--figma .pain__hint-arrow { width: 64px; height: 64px; flex-shrink: 0; }
}

/* ----- FORMA ----- */
@media (max-width: 768px) {
	.forma--figma > .forma__cube {
		position: absolute;
		right: -25%;
		top: 35%;
		width: 80%;
		opacity: 0.35;
		animation-duration: 36s;
	}
}

/* ----- CASES, TESTIMONIALS, CTA BIG, ABOUT, SERVICES, ABLAUF ----- */
@media (max-width: 768px) {
	/* CTA BIG */
	.cta-big--figma .cta-big__frame {
		aspect-ratio: auto;
		padding: 56px 20px 64px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.cta-big--figma .cta-big__art,
	.cta-big--figma .cta-big__title,
	.cta-big--figma .cta-big__lead,
	.cta-big--figma .cta-big__hint,
	.cta-big--figma .cta-big__btn,
	.cta-big--figma .cta-big__note,
	.cta-big--figma .cta-big__arrow {
		position: static; width: auto; height: auto;
		left: auto; top: auto; right: auto;
	}
	.cta-big--figma .cta-big__art {
		width: 55%;
		max-width: 260px;
		margin: 0 auto 12px;
		aspect-ratio: 1;
	}
	.cta-big--figma .cta-big__title { font-size: 36px; line-height: 0.95; }
	.cta-big--figma .cta-big__lead { font-size: 17px; line-height: 1.4; }
	.cta-big--figma .cta-big__hint { font-size: 16px; }
	.cta-big--figma .cta-big__btn {
		width: 100%; min-height: 64px; font-size: 18px;
		padding: 16px 24px; border-radius: 16px;
		display: flex; align-items: center; justify-content: center;
	}
	.cta-big--figma .cta-big__note { font-size: 14px; text-align: center; }
	.cta-big--figma .cta-big__arrow { width: 64px; height: 64px; align-self: center; }
	.cta-big--figma h2.cta-big__title,
	.cta-big--figma p.cta-big__lead { text-align: left !important; }
}

/* ============= FINAL OVERRIDE — кthrow center anywhere it leaked ============= */
.cta-big,
.cta-big--figma,
.cta-big--figma .cta-big__frame { text-align: left !important; }
.cta-big--figma h2.cta-big__title,
.cta-big--figma p.cta-big__lead,
.cta-big--figma p.cta-big__hint {
	text-align: left !important;
}

/* Desktop section padding — kept as original from per-section CSS */

/* =====================================================================
   📱 FINAL MOBILE TWEAKS (14.05.2026 — feedback)
   ===================================================================== */
@media (max-width: 768px) {

	/* (1) Compact section padding — minimize gap between blocks */
	.hero--figma .hero__frame,
	.pain--figma .pain__frame,
	.forma--figma .forma__frame,
	.cta-big--figma .cta-big__frame,
	.about--figma .about__frame,
	.services--figma .services__frame,
	.ablauf--figma .ablauf__frame,
	.faq--figma .faq__frame,
	.anfrage--figma .anfrage__frame,
	.footer--figma .footer__frame {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		gap: 12px !important;
	}
	/* Section wrappers — no extra outer padding */
	.hero--figma,
	.pain--figma,
	.forma--figma,
	.cta-big--figma,
	.about--figma,
	.services--figma,
	.ablauf--figma,
	.faq--figma,
	.anfrage--figma,
	.footer--figma {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* (2) HERO cube — spin on mobile (uses CSS `rotate` property to bypass `transform: none !important` from .hero__frame > * rule) */
	.hero--figma .hero__cube {
		animation: hero-cube-mobile-rotate 22s linear infinite !important;
	}
	@keyframes hero-cube-mobile-rotate {
		from { rotate: 0deg; }
		to   { rotate: 360deg; }
	}

	/* (3) FORMA arrow — smaller on mobile */
	.forma--figma .forma__arrow {
		width: 56px !important;
		height: 56px !important;
		max-width: 56px !important;
	}
	.forma--figma .forma__arrow svg { width: 100%; height: 100%; }

	/* ABLAUF arrow — force NO rotation (must point DOWN) */
	.ablauf--figma .ablauf__arrow {
		width: 64px !important;
		height: 64px !important;
		transform: none !important;
	}
	.ablauf--figma .ablauf__arrow svg {
		transform: none !important;
	}

	/* (4) Case header — AW title doesn't overflow / break second word */
	.case-card__title-row {
		flex-wrap: wrap !important;
	}
	.case-card__brand {
		font-size: 26px !important;
	}
	.case-card__kind {
		font-size: 18px !important;
		line-height: 1.05 !important;
		letter-spacing: -0.02em !important;
		white-space: normal !important;
	}
	.case-card__title {
		font-size: 22px !important;
		line-height: 1 !important;
	}

	/* (5) Photo-grids inside video cases — full width, not cropped */
	.case-layout--timeless .cl-grid,
	.case-layout--laser .cl-portrait {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		display: block !important;
	}
	/* Video phone mockups — wider on mobile, fully visible */
	.case-layout--timeless .cl-vid-wrap,
	.case-layout--laser .cl-vid-wrap {
		width: 80% !important;
		max-width: 320px !important;
		aspect-ratio: 9 / 16 !important;
		margin: 12px auto !important;
		border-radius: 22px !important;
		overflow: hidden !important;
	}
	.case-layout--timeless .cl-vid,
	.case-layout--laser .cl-vid {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}
	/* Container fix — let video cases stack naturally */
	.case-layout--timeless,
	.case-layout--laser {
		aspect-ratio: auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		padding: 8px 12px !important;
	}
	.case-layout--timeless > *,
	.case-layout--laser > * {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ----- ANFRAGE FORM (re-tune for very small viewports) ----- */
@media (max-width: 480px) {
	.anfrage--figma .anfrage__field input,
	.anfrage--figma .anfrage__field textarea {
		font-size: 16px; /* prevent iOS zoom-on-focus */
	}
	.anfrage--figma .anfrage__consent { font-size: 12.5px; }
	.anfrage--figma .anfrage__glass { max-width: 240px; }
}

/* ----- FAQ (re-tune) ----- */
@media (max-width: 480px) {
	.faq--figma .faq__q { white-space: normal; line-height: 1.25; }
	.faq--figma .faq__item summary { min-height: 64px; padding: 14px 56px 14px 18px; }
	.faq--figma .faq__chev { right: 14px; width: 28px; height: 28px; }
}

/* ----- FOOTER ----- */
@media (max-width: 768px) {
	.footer--figma .footer__nav { width: 100%; }
	.footer--figma .footer__legal a { display: inline-block; }
}

/* ----- BACK-TO-TOP on small screens ----- */
@media (max-width: 480px) {
	.back-to-top { right: 14px; bottom: 14px; width: 52px; height: 52px; border-width: 2px; }
	.back-to-top svg { width: 28px; height: 28px; }
}

/* ----- REDUCE ANIMATIONS on mobile for performance ----- */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
	.forma--figma > .forma__cube,
	.hero--figma .hero__cube,
	.anfrage--figma .anfrage__glass,
	.cta-big--figma .cta-big__art,
	.cta-big--figma .cta-big__art-img {
		will-change: auto;
	}
}

/* ----- iOS Safari fixes ----- */
@supports (-webkit-touch-callout: none) {
	input, textarea, select { font-size: 16px !important; }
	.cookie-banner__btn,
	.anfrage__btn,
	.hero__btn,
	.cta-big__btn,
	.services__btn,
	.ablauf__btn,
	.faq__btn { -webkit-tap-highlight-color: transparent; }
}

/* =====================================================================
   📱 FINAL MOBILE OVERRIDE — kills all aspect-ratio + cqw on phones
   This block MUST stay last in the file to win cascade against all
   earlier per-section rules.
   ===================================================================== */
@media (max-width: 768px) {
	/* Kill aspect-ratio + container queries on every figma section */
	.hero--figma .hero__frame,
	.pain--figma .pain__frame,
	.forma--figma .forma__frame,
	.cases--figma .cases__frame,
	.testimonials--figma .testimonials__frame,
	.cta-big--figma .cta-big__frame,
	.about--figma .about__frame,
	.services--figma .services__frame,
	.ablauf--figma .ablauf__frame,
	.faq--figma .faq__frame,
	.anfrage--figma .anfrage__frame,
	.footer--figma .footer__frame {
		aspect-ratio: auto !important;
		container-type: normal !important;
		max-width: 100% !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
	}

	/* All absolutely-positioned children become normal flow */
	.hero--figma .hero__frame > *,
	.pain--figma .pain__frame > *,
	.forma--figma .forma__frame > *,
	.cta-big--figma .cta-big__frame > *,
	.services--figma .services__frame > *,
	.ablauf--figma .ablauf__frame > *,
	.anfrage--figma .anfrage__frame > *,
	.footer--figma .footer__frame > *,
	.pain--figma .pain__cards > *,
	.services--figma .services__grid > *,
	.ablauf--figma .ablauf__list > * {
		position: static !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		transform: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Keep brand-cube/glass/photo decorative */
	.hero--figma .hero__cube,
	.forma--figma > .forma__cube,
	.anfrage--figma .anfrage__glass,
	.cta-big--figma .cta-big__art,
	.faq--figma .faq__photo {
		max-width: 100% !important;
	}

	/* Body / text base — bigger and readable */
	body { font-size: 16px; line-height: 1.55; }

	/* All H1/H2 — explicit px sizes, never cqw on mobile */
	.hero--figma .hero__title { font-size: 48px !important; line-height: 0.92 !important; }
	.pain--figma .pain__title,
	.forma--figma .forma__title,
	.cases--figma .cases__title,
	.testimonials--figma .testimonials__title,
	.cta-big--figma .cta-big__title,
	.about--figma .about__title,
	.services--figma .services__title,
	.ablauf--figma .ablauf__title,
	.faq--figma .faq__title,
	.anfrage--figma .anfrage__title,
	.footer--figma .footer__title {
		font-size: 36px !important;
		line-height: 0.95 !important;
		letter-spacing: -0.04em !important;
	}

	/* Eyebrows / leads / intros */
	.hero--figma .hero__eyebrow,
	.pain--figma .pain__eyebrow,
	.forma--figma .forma__intro,
	.cta-big--figma .cta-big__lead,
	.about--figma .about__lead,
	.services--figma .services__intro,
	.ablauf--figma .ablauf__intro,
	.anfrage--figma .anfrage__lead {
		font-size: 18px !important;
		line-height: 1.3 !important;
	}

	/* Body paragraphs in cards / general content */
	.pain--figma .pain__card p,
	.services--figma .service-card p,
	.ablauf--figma .ablauf__body p,
	.forma--figma .forma__body p,
	.about--figma .about__body p,
	.cta-big--figma .cta-big__hint,
	.faq--figma .faq__a p {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}

	/* Card titles in sections */
	.pain--figma .pain__card h3,
	.services--figma .service-card h3,
	.ablauf--figma .ablauf__body h3,
	.forma--figma .forma__body h3,
	.cases--figma .case-card__title {
		font-size: 22px !important;
		line-height: 1.05 !important;
		letter-spacing: -0.03em !important;
	}

	/* Statement / Outro / Tag — secondary headings */
	.hero--figma .hero__sub,
	.hero--figma .hero__tag,
	.pain--figma .pain__statement,
	.pain--figma .pain__hint-text,
	.forma--figma .forma__outro,
	.services--figma .services__outro,
	.ablauf--figma .ablauf__outro,
	.anfrage--figma .anfrage__reply {
		font-size: 20px !important;
		line-height: 1.25 !important;
	}

	/* Buttons — explicit, full-width pill */
	.hero--figma .hero__btn,
	.cta-big--figma .cta-big__btn,
	.services--figma .services__btn,
	.ablauf--figma .ablauf__btn,
	.faq--figma .faq__btn,
	.anfrage--figma .anfrage__btn,
	.forma--figma .forma__cta {
		font-size: 18px !important;
		min-height: 64px !important;
		padding: 16px 24px !important;
		border-radius: 16px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Cards — full width, generous padding, soft radius */
	.pain--figma .pain__card,
	.services--figma .service-card,
	.faq--figma .faq__item,
	.anfrage--figma .anfrage__field,
	.testimonials--figma .testimonial,
	.cases--figma .case-card,
	.ablauf--figma .ablauf__step {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 20px !important;
		box-sizing: border-box !important;
	}

	/* Wide cards on mobile — match siblings: left-aligned, not centered */
	.pain--figma .pain__card--wide,
	.services--figma .service-card--wide {
		align-items: flex-start !important;
		text-align: left !important;
	}
	.pain--figma .pain__card--wide h3,
	.pain--figma .pain__card--wide p,
	.services--figma .service-card--wide h3,
	.services--figma .service-card--wide p {
		text-align: left !important;
		max-width: 100% !important;
	}

	/* Notes / italics — readable */
	.hero--figma .hero__note,
	.cta-big--figma .cta-big__note,
	.services--figma .services__note,
	.ablauf--figma .ablauf__note,
	.faq--figma .faq__note,
	.anfrage--figma .anfrage__note,
	.forma--figma .forma__hint,
	.pain--figma .pain__hint-text {
		font-size: 15px !important;
		line-height: 1.45 !important;
	}

	/* Section vertical rhythm */
	.hero--figma .hero__frame,
	.pain--figma .pain__frame,
	.forma--figma .forma__frame,
	.cta-big--figma .cta-big__frame,
	.about--figma .about__frame,
	.services--figma .services__frame,
	.ablauf--figma .ablauf__frame,
	.faq--figma .faq__frame,
	.anfrage--figma .anfrage__frame,
	.footer--figma .footer__frame {
		padding-top: 56px !important;
		padding-bottom: 64px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
	}

	/* === CASES — stacked 5-card section, full-bleed on mobile === */
	.cases--figma { padding-left: 0 !important; padding-right: 0 !important; }
	.cases--figma .cases__inner,
	.cases--figma .cases__frame {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}
	.cases--figma .cases__title {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.cases--figma .case-stack {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.case-card {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 56px 20px 32px !important;
		border-radius: 36px 36px 0 0 !important;
		box-sizing: border-box !important;
		margin-top: -48px !important;
		/* Layered shadow — depth + soft glow + crisp top line */
		box-shadow:
			0 -2px 0 rgba(255, 255, 255, 0.10),            /* tiny highlight on top edge */
			0 -16px 36px rgba(0, 0, 0, 0.32),              /* main drop above */
			0 -6px 14px rgba(0, 0, 0, 0.22),               /* closer crisp shadow */
			0 4px 24px rgba(0, 0, 0, 0.16),                /* glow below for depth */
			0 0 60px rgba(193, 154, 72, 0.05) !important;  /* faint gold halo */
		transition: transform .4s cubic-bezier(.22,.61,.36,1),
		            box-shadow .4s cubic-bezier(.22,.61,.36,1) !important;
	}
	.case-card[data-state="expanded"] {
		box-shadow:
			0 -2px 0 rgba(255, 255, 255, 0.14),
			0 -20px 48px rgba(0, 0, 0, 0.42),
			0 -8px 18px rgba(0, 0, 0, 0.30),
			0 8px 32px rgba(0, 0, 0, 0.22),
			0 0 80px rgba(193, 154, 72, 0.10) !important;
	}
	@media (hover: hover) {
		.case-card:hover {
			transform: translateY(-2px) !important;
			box-shadow:
				0 -2px 0 rgba(255, 255, 255, 0.14),
				0 -22px 48px rgba(0, 0, 0, 0.40),
				0 -8px 18px rgba(0, 0, 0, 0.28),
				0 6px 28px rgba(0, 0, 0, 0.20),
				0 0 80px rgba(193, 154, 72, 0.10) !important;
		}
	}
	/* Dark cards get a slightly stronger shadow (more contrast on cream below) */
	.case-card--green {
		box-shadow:
			0 -2px 0 rgba(245, 248, 246, 0.06),
			0 -18px 40px rgba(0, 0, 0, 0.45),
			0 -6px 14px rgba(0, 0, 0, 0.30),
			0 4px 24px rgba(0, 0, 0, 0.18),
			0 0 60px rgba(193, 154, 72, 0.08) !important;
	}
	.case-card:first-child { margin-top: 0 !important; }
	.cases--figma .case-stack > .case-card:nth-child(1) { z-index: 1; }
	.cases--figma .case-stack > .case-card:nth-child(2) { z-index: 2; }
	.cases--figma .case-stack > .case-card:nth-child(3) { z-index: 3; }
	.cases--figma .case-stack > .case-card:nth-child(4) { z-index: 4; }
	.cases--figma .case-stack > .case-card:nth-child(5) { z-index: 5; }
	.case-card[data-state="expanded"] { margin-top: -48px !important; }
	.case-card[data-state="expanded"]:first-child { margin-top: 0 !important; }
	.case-card[data-state="collapsed"] { margin-top: -48px !important; }
	.case-card[data-state="collapsed"]:first-child { margin-top: 0 !important; }

	/* Case header — text always readable */
	.case-card__title,
	.case-card__brand,
	.case-card__kind {
		font-size: 28px !important;
		line-height: 1 !important;
		letter-spacing: -0.04em !important;
	}
	.case-card__sub {
		font-size: 18px !important;
		line-height: 1.25 !important;
		max-width: 100% !important;
	}
	.case-card__lead {
		font-size: 15px !important;
		line-height: 1.55 !important;
		max-width: 100% !important;
	}
	.case-card__tag { font-size: 12px !important; padding: 5px 14px !important; }
	.case-card__toggle { width: 44px !important; height: 44px !important; top: 14px !important; right: 14px !important; }

	/* === VIDEO / IMAGE LAYOUTS — kill container queries, force normal flow === */
	.case-layout--vr,
	.case-layout--timeless,
	.case-layout--aw,
	.case-layout--si,
	.case-layout--laser,
	.case-card__layout--vr {
		container-type: normal !important;
		aspect-ratio: auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 20px !important;
		margin-top: 16px !important;
	}
	.case-layout--vr > *,
	.case-layout--timeless > *,
	.case-layout--aw > *,
	.case-layout--si > *,
	.case-layout--laser > *,
	.case-card__layout--vr > * {
		position: static !important;
		left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	/* Media inside cases — full width photo grids (no crop) */
	.case-layout--timeless .cl-grid,
	.case-layout--laser .cl-portrait {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		display: block !important;
		border-radius: 18px !important;
	}
	.case-layout--aw .cl-grid,
	.case-layout--si .cl-grid,
	.case-card__layout--vr .vrl-tshirts,
	.case-card__layout--vr .vrl-cards {
		aspect-ratio: 4/3 !important;
		border-radius: 16px !important;
		object-fit: cover !important;
	}
	/* Videos — wider phone mockups, fully visible */
	.case-layout--timeless .cl-vid-wrap,
	.case-layout--laser .cl-vid-wrap {
		position: relative !important;
		aspect-ratio: 9/16 !important;
		width: 80% !important;
		max-width: 320px !important;
		margin: 12px auto !important;
		border-radius: 22px !important;
		overflow: hidden !important;
	}
	.case-layout--timeless .cl-vid,
	.case-layout--laser .cl-vid { width: 100% !important; height: 100% !important; object-fit: cover !important; }

	/* Mute button stays pinned to bottom-right of the video itself */
	.case-layout--timeless .cl-vid-wrap .cl-mute,
	.case-layout--laser .cl-vid-wrap .cl-mute {
		position: absolute !important;
		bottom: 10px !important;
		right: 10px !important;
		left: auto !important;
		top: auto !important;
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: rgba(19, 21, 21, 0.78) !important;
		color: #F5F8F6 !important;
		border-radius: 50% !important;
		border: 0 !important;
		z-index: 5 !important;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
	.case-layout--timeless .cl-vid-wrap .cl-mute svg,
	.case-layout--laser .cl-vid-wrap .cl-mute svg {
		width: 18px !important;
		height: 18px !important;
	}

	/* === FORCED TEXT SIZES — for ALL case-layout text/blocks === */
	.case-layout--vr .cl-sub,
	.case-layout--timeless .cl-sub,
	.case-layout--aw .cl-sub,
	.case-layout--si .cl-sub,
	.case-layout--laser .cl-sub,
	.case-card__layout--vr .vrl-sub {
		font-size: 24px !important;
		line-height: 1.1 !important;
		letter-spacing: -0.03em !important;
	}
	.case-layout--vr .cl-lead,
	.case-layout--timeless .cl-lead,
	.case-layout--aw .cl-lead,
	.case-layout--si .cl-lead,
	.case-layout--laser .cl-lead,
	.case-card__layout--vr .vrl-lead {
		font-size: 17px !important;
		line-height: 1.45 !important;
	}
	.case-layout--vr .cl-block h4,
	.case-layout--timeless .cl-block h4,
	.case-layout--aw .cl-block h4,
	.case-layout--si .cl-block h4,
	.case-layout--laser .cl-block h4,
	.case-card__layout--vr .vrl-block h4 {
		font-size: 18px !important;
		line-height: 1.1 !important;
		margin-bottom: 6px !important;
	}
	.case-layout--vr .cl-block p,
	.case-layout--timeless .cl-block p,
	.case-layout--aw .cl-block p,
	.case-layout--si .cl-block p,
	.case-layout--laser .cl-block p,
	.case-card__layout--vr .vrl-block p {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}
	/* Sound toggle button on videos */
	.case-layout--timeless .cl-sound,
	.cl-vid-wrap .cl-mute {
		font-size: 14px !important;
	}
}

/* =====================================================================
   📱 EXTRA-FINAL MOBILE — overrides any earlier rule (Kundenstimme, About)
   ===================================================================== */
@media (max-width: 768px) {

	/* === TESTIMONIALS — pill только вокруг слова === */
	.testi-card {
		padding: 24px 22px 22px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.testi-card__label {
		position: static !important;
		display: inline-block !important;
		width: auto !important;
		max-width: max-content !important;
		flex: 0 0 auto !important;
		align-self: flex-start !important;
		margin: 0 0 14px !important;
		padding: 3px 11px !important;
		border: 1px solid rgba(193, 154, 72, 0.55) !important;
		border-radius: 999px !important;
		font-family: 'Manrope', sans-serif !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		font-style: normal !important;
		letter-spacing: 0.08em !important;
		text-transform: uppercase !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		color: #C19A48 !important;
		background: transparent !important;
	}
	.testi-card__text {
		margin: 0 0 12px !important;
		font-size: 15px !important;
		line-height: 1.5 !important;
		max-width: 100% !important;
	}
	.testi-card__author {
		margin-top: auto !important;
		text-align: left !important;
		font-size: 13px !important;
	}

	/* === ABOUT — proper mobile layout === */
	.about--figma .about__frame {
		padding: 56px 20px 32px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}
	.about--figma .about__title {
		position: static !important;
		width: 100% !important;
		font-size: 32px !important;
		line-height: 0.95 !important;
		letter-spacing: -0.04em !important;
		margin: 0 !important;
	}
	.about--figma .about__stats {
		position: static !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.about--figma .about__stat {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 0 0 40px !important;
		margin: 0 !important;
	}
	.about--figma .about__dot {
		position: absolute !important;
		left: 0 !important;
		top: 6px !important;
		transform: none !important;
		width: 20px !important;
		height: 20px !important;
	}
	.about--figma .about__stat p {
		font-size: 16px !important;
		line-height: 1.35 !important;
		letter-spacing: -0.02em !important;
		text-transform: none !important;
		margin: 0 !important;
	}
	.about--figma .about__partners {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		font-size: 15px !important;
		line-height: 1.5 !important;
		letter-spacing: -0.01em !important;
		margin: 0 !important;
	}
	.about--figma .about__photo {
		position: relative !important;
		display: block !important;
		width: 110% !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: -12px auto -50px !important;
		margin-left: -5% !important;
		margin-right: -5% !important;
		object-fit: contain !important;
		object-position: bottom center !important;
		left: auto !important; top: auto !important;
		z-index: 10 !important;
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	.about--figma .about__ribbon {
		margin: 0 !important;
		padding: 12px 0 !important;
	}
	.about--figma .about__ribbon-track {
		flex-wrap: nowrap !important;
		gap: 32px !important;
		padding-left: 32px !important;
		animation-duration: 22s !important;
	}
	.about--figma .about__ribbon span {
		font-size: 14px !important;
		flex-shrink: 0 !important;
		white-space: nowrap !important;
	}

	/* === FOOTER — phone card fits viewport === */
	.footer--figma .footer__card {
		padding: 20px 18px !important;
		max-width: 100% !important;
		justify-self: stretch !important;
		gap: 10px !important;
		min-height: auto !important;
	}
	.footer--figma .footer__avail {
		font-size: clamp(11px, 3.2vw, 14px) !important;
		line-height: 1.2 !important;
		letter-spacing: -0.02em !important;
		white-space: normal !important;
		gap: 8px !important;
	}
	.footer--figma .footer__avail > span:last-child { white-space: normal !important; }
	.footer--figma .footer__dot {
		width: 11px !important;
		height: 11px !important;
	}
	.footer--figma .footer__phone {
		font-size: clamp(22px, 7.2vw, 30px) !important;
		line-height: 1 !important;
		letter-spacing: -0.05em !important;
		white-space: nowrap !important;
		overflow-wrap: normal !important;
	}

	/* === Force-show decorative images on mobile (reveal anims sometimes stuck) === */
	.anfrage--figma .anfrage__right,
	.anfrage--figma .anfrage__glass,
	.anfrage--figma .anfrage__glass-img,
	.faq--figma .faq__right,
	.faq--figma .faq__photo,
	.faq--figma .faq__photo img {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		visibility: visible !important;
		display: block !important;
	}
	.anfrage--figma .anfrage__right {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		min-height: auto !important;
		width: 100% !important;
	}
	.anfrage--figma .anfrage__glass {
		width: 80% !important;
		max-width: 280px !important;
		margin: 0 auto !important;
		aspect-ratio: 1 / 1 !important;
	}
	.anfrage--figma .anfrage__glass-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}
	.faq--figma .faq__photo {
		width: 100% !important;
		max-width: 360px !important;
		margin: 0 auto !important;
		aspect-ratio: 521 / 928 !important;
		overflow: hidden !important;
		border-radius: 20px !important;
	}
	.faq--figma .faq__photo img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}