/* max2-apple: Tokens, Basis, Komponenten, Muster a bis j, Responsive, Reduced-Motion.
   Farben ausschliesslich aus dem Brand-Kit (Allowlist in :root), Alpha nur als rgba von Schwarz/Weiss. */

@property --p {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

:root {
	--c-bg: #000000;
	--c-bg-alt: #0a0a0a;
	--c-card: #111111;
	--c-divider: #1a1a1a;
	--c-card-border: #222222;
	--c-dark: #212934;
	--c-text: #ffffff;
	--c-text-lead: #c9ccd3;
	--c-text-body: #b9bcc4;
	--c-text-muted: #8d919a;
	--c-orange: #ff8800;
	--c-orange-2: #ff8039;
	--c-light-bg: #f9f9fb;
	--c-light-text: #000000;
	--c-light-muted: #4a4e57;
	--c-light-border: #e2e2e2;
	--g-orange: linear-gradient(135deg, #ff8800, #ff8039);

	--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-hero: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
	--fs-display: clamp(2.25rem, 1rem + 4.6vw, 4.5rem);
	--fs-h2: clamp(2rem, 1.1rem + 3vw, 3.5rem);
	--fs-h3: clamp(1.375rem, 1rem + 1.2vw, 2rem);
	--fs-h4: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
	--fs-stat: clamp(3rem, 1.5rem + 5vw, 5.5rem);
	--fs-lead: clamp(1.1875rem, 1rem + .7vw, 1.5rem);
	--fs-body: clamp(1rem, .95rem + .2vw, 1.125rem);
	--fs-eyebrow: clamp(.8125rem, .78rem + .15vw, .9375rem);
	--fs-small: .875rem;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-section: clamp(80px, 6vw + 48px, 160px);

	--container: 980px;
	--container-wide: 1440px;
	--gutter: clamp(20px, 5vw, 48px);

	--radius-s: 12px;
	--radius-m: 18px;
	--radius-l: 28px;
	--radius-pill: 980px;

	--nav-h: 48px;
	--localnav-h: 52px;
	--stick-top: var(--nav-h);

	--ease: cubic-bezier(.4, 0, .6, 1);
	--dur-xs: 160ms;
	--dur-s: 320ms;
	--dur-m: 600ms;
	--dur-l: 1000ms;
	--dur-count: 1400ms;
	--stagger: 80ms;

	interpolate-size: allow-keywords;
	color-scheme: dark;
}

body.has-localnav {
	--stick-top: calc(var(--nav-h) + var(--localnav-h));
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--stick-top) + 12px);
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text-body);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

body.nav-open {
	overflow: hidden;
}

img,
picture {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
address {
	margin: 0;
	font-style: normal;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4 {
	color: var(--c-text);
	font-weight: 600;
	overflow-wrap: break-word;
	hyphens: auto;
}

p {
	max-width: 68ch;
	font-variant-numeric: tabular-nums;
}

p + p {
	margin-top: var(--space-4);
}

a {
	color: var(--c-orange);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur-xs) var(--ease);
}

a:hover {
	color: var(--c-orange-2);
}

:focus-visible {
	outline: 2px solid var(--c-orange);
	outline-offset: 3px;
	border-radius: 4px;
}

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.container--wide {
	width: min(100% - 2 * var(--gutter), var(--container-wide));
}

/* ---------- Typografie ---------- */
.hero__h1 {
	font-size: var(--fs-hero);
	letter-spacing: -.025em;
	line-height: 1.04;
}

.display {
	font-size: var(--fs-display);
	letter-spacing: -.02em;
	line-height: 1.07;
}

.h2 {
	font-size: var(--fs-h2);
	letter-spacing: -.015em;
	line-height: 1.1;
}

.h3 {
	font-size: var(--fs-h3);
	letter-spacing: -.01em;
	line-height: 1.2;
}

.h4 {
	font-size: var(--fs-h4);
	letter-spacing: -.005em;
	line-height: 1.3;
}

.lead {
	max-width: 40ch;
	color: var(--c-text-lead);
	font-size: var(--fs-lead);
	font-weight: 400;
	letter-spacing: -.005em;
	line-height: 1.45;
}

.eyebrow {
	color: var(--c-orange);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.3;
}

.small {
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

/* ---------- Sektionen ---------- */
.sec {
	position: relative;
	padding-block: var(--space-section);
	background: var(--c-bg);
}

.sec--alt {
	background: var(--c-bg-alt);
}

.sec--tight {
	padding-block: var(--space-8);
}

.sec--light {
	background: var(--c-light-bg);
	color: var(--c-light-muted);
}

.sec--light h2,
.sec--light h3,
.sec--light h4 {
	color: var(--c-light-text);
}

.sec--light .lead,
.sec--light p {
	color: var(--c-light-muted);
}

.sec--light .eyebrow {
	color: var(--c-light-text);
}

.sec--light a:not(.btn) {
	color: var(--c-light-text);
	text-decoration-color: var(--c-orange);
}

.shead {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.shead .h2 {
	max-width: 20ch;
}

.sec--bg {
	overflow: clip;
	isolation: isolate;
}

.bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: clip;
}

.bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .66);
}

.bg picture,
.bg img,
.zoom picture,
.zoom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- (a) Glas-Header und Local-Nav ---------- */
.gh,
.localnav {
	background: rgba(0, 0, 0, .72);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.gh,
	.localnav {
		background: rgba(0, 0, 0, .92);
	}
}

.gh {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--nav-h);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.gh__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 2 * var(--gutter), var(--container-wide));
	height: 100%;
	margin-inline: auto;
}

.gh__logo {
	display: flex;
	align-items: center;
	color: var(--c-text);
	font-weight: 700;
	text-decoration: none;
}

.gh__logo img {
	width: auto;
	height: 24px;
}

.gh__nav {
	display: none;
	align-items: center;
	gap: var(--space-6);
}

.gh__nav a:not(.btn) {
	color: var(--c-text-body);
	font-size: var(--fs-small);
	text-decoration: none;
}

.gh__nav a:not(.btn):hover {
	color: var(--c-text);
}

.gh__burger {
	display: grid;
	place-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.gh__burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--c-text);
	transition: transform var(--dur-s) var(--ease);
}

.gh__burger[aria-expanded="true"] span:first-child {
	transform: translateY(4px) rotate(45deg);
}

.gh__burger[aria-expanded="true"] span:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

.menu {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: calc(var(--nav-h) + var(--space-7)) var(--gutter) var(--space-7);
	background: var(--c-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-s) var(--ease), visibility 0s linear var(--dur-s);
}

.menu.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.menu a {
	color: var(--c-text);
	font-size: var(--fs-h3);
	font-weight: 600;
	text-decoration: none;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}

.menu.is-open a {
	opacity: 1;
	transform: none;
}

.localnav {
	position: sticky;
	top: var(--nav-h);
	z-index: 90;
	height: var(--localnav-h);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.localnav__in {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: min(100% - 2 * var(--gutter), var(--container-wide));
	height: 100%;
	margin-inline: auto;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) calc(100% - 32px), rgba(0, 0, 0, 0));
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) calc(100% - 32px), rgba(0, 0, 0, 0));
}

.localnav__in::-webkit-scrollbar {
	display: none;
}

.localnav__title {
	flex: none;
	color: var(--c-text);
	font-weight: 600;
}

.localnav__label {
	flex: none;
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

.localnav a {
	flex: none;
	padding-block: 15px 13px;
	color: var(--c-text-body);
	font-size: var(--fs-small);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0);
	transition: color var(--dur-xs) var(--ease), box-shadow var(--dur-xs) var(--ease);
}

.localnav a:hover,
.localnav a[aria-current="true"] {
	color: var(--c-text);
}

.localnav a[aria-current="true"] {
	box-shadow: inset 0 -2px 0 var(--c-orange);
}

.localnav__n {
	color: var(--c-orange);
	font-variant-numeric: tabular-nums;
}

section[id] {
	scroll-margin-top: calc(var(--stick-top) + 12px);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .7em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--dur-xs) var(--ease), color var(--dur-xs) var(--ease), border-color var(--dur-xs) var(--ease);
}

.btn--s {
	min-height: 36px;
	padding: .45em 1em;
	font-size: var(--fs-small);
}

.btn--primary {
	background: var(--c-orange);
	color: var(--c-bg);
}

.btn--primary:hover {
	background-image: var(--g-orange);
	color: var(--c-bg);
}

.btn--ghost {
	border-color: rgba(255, 255, 255, .4);
	color: var(--c-text);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--c-text);
}

.btn--dark {
	background: var(--c-bg);
	color: var(--c-text);
}

.btn--dark:hover {
	background: var(--c-dark);
	color: var(--c-text);
}

.btn--outline-dark {
	border-color: var(--c-bg);
	color: var(--c-bg);
}

.btn--outline-dark:hover {
	background: rgba(0, 0, 0, .12);
	color: var(--c-bg);
}

/* ---------- Reveal (Basis) ---------- */
.js .rv {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}

.js .rv.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- (b) Hero ---------- */
.hero {
	--p: 0;
	position: relative;
	display: grid;
	align-items: end;
	min-height: 100svh;
	padding: calc(var(--nav-h) + var(--space-8)) 0 var(--space-8);
	overflow: clip;
	isolation: isolate;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__bg picture,
.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__bg img {
	transform: scale(calc(1.12 - .12 * var(--p, 0)));
	transform-origin: 50% 40%;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 1) 100%);
}

.hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 1);
	opacity: calc(.6 * var(--p, 0));
	pointer-events: none;
}

.hero__in {
	display: grid;
	gap: var(--space-5);
	justify-items: start;
}

.hero__h1 {
	max-width: 22ch;
}

.ln {
	display: block;
	padding-bottom: .1em;
	margin-bottom: -.1em;
	overflow: hidden;
}

.ln__i {
	display: block;
}

.js .ln__i {
	transform: translateY(105%);
	transition: transform var(--dur-l) var(--ease);
	transition-delay: calc(var(--i, 0) * 120ms);
}

.js .hero.is-ready .ln__i {
	transform: none;
}

.hero__lead {
	max-width: 44ch;
}

.hero__b {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* ---------- (g) Kennzahlen ---------- */
.stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-7) var(--space-5);
}

.stat__n {
	color: var(--c-text);
	font-size: var(--fs-stat);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}

.stat__n span {
	color: var(--c-orange);
}

.stat__l {
	margin-top: var(--space-2);
	color: var(--c-text-body);
	font-size: var(--fs-small);
}

.stat__l + .stat__l {
	margin-top: 0;
	color: var(--c-text-muted);
}

.stats--hero {
	width: 100%;
	margin-top: var(--space-6);
	padding: var(--space-6);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius-l);
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.stats--hero .stat__n {
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}

/* ---------- (d) scroll-gesteuerte Animation ---------- */
.sa {
	transform: translate(calc((1 - var(--p, 1)) * var(--dx, 0px)), calc((1 - var(--p, 1)) * 48px));
	opacity: calc(.6 + .4 * var(--p, 1));
}

.sa--l {
	--dx: -90px;
}

.sa--r {
	--dx: 90px;
}

.zoom img {
	transform: translateY(calc((.5 - var(--p, 1)) * 8%)) scale(calc(1.22 - .1 * var(--p, 1)));
}

.float {
	transform: translateY(calc((.5 - var(--p, 1)) * 120px));
}

@keyframes p-in {
	from {
		--p: 0;
	}
	to {
		--p: 1;
	}
}

@supports (animation-timeline: view()) {
	[data-anim-scroll-group="rise"] {
		animation: p-in linear both;
		animation-timeline: view();
		animation-range: entry calc(5% + var(--i, 0) * 4%) cover calc(30% + var(--i, 0) * 4%);
	}

	[data-anim-scroll-group="par"],
	[data-anim-scroll-group="fill"] {
		animation: p-in linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	[data-anim-scroll-group="fill"] {
		animation-range: entry 30% cover 70%;
	}

	[data-anim-scroll-group="hero"] {
		animation: p-in linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 100vh;
	}
}

/* ---------- (e) Bento ---------- */
.bentos {
	display: grid;
	gap: var(--space-5);
}

.bento {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-height: 240px;
	padding: var(--space-6);
	border: 1px solid var(--c-card-border);
	border-radius: var(--radius-l);
	background: var(--c-card);
	overflow: hidden;
	isolation: isolate;
}

.tile--img {
	justify-content: flex-end;
}

.tile__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .9) 100%);
}

.tile__media picture,
.tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile__media img {
	transition: transform var(--dur-m) var(--ease);
}

.tile:hover .tile__media img {
	transform: scale(1.04);
}

.tile__label {
	color: var(--c-orange);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .08em;
}

.tile__num {
	align-self: flex-start;
	color: var(--c-orange);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.tile__num--new {
	padding: .15em .8em;
	border-radius: var(--radius-pill);
	background: var(--c-orange);
	color: var(--c-bg);
}

.tile h3,
.tile h4 {
	color: var(--c-text);
}

.tile p {
	color: var(--c-text-lead);
}

.tile__a {
	color: inherit;
	text-decoration: none;
}

.tile__a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tile a:not(.tile__a) {
	position: relative;
	z-index: 2;
}

.tile .btn {
	align-self: flex-start;
	margin-top: auto;
}

.tile--cta {
	background: var(--c-dark);
}

/* ---------- (c) Sticky-Story ---------- */
.story__item {
	display: grid;
	gap: var(--space-6);
	width: min(100% - 2 * var(--gutter), 1200px);
	margin: 0 auto var(--space-9);
}

.story__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-l);
	overflow: hidden;
}

.story__media picture,
.story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.story__num {
	color: var(--c-orange);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: .08em;
}

.story__text .h3 {
	margin: var(--space-2) 0 var(--space-4);
	font-size: var(--fs-h2);
	line-height: 1.1;
}

.story__bar {
	display: none;
}

@media (min-width: 735px) and (prefers-reduced-motion: no-preference) {
	.js .story__track {
		position: relative;
		height: calc(var(--n) * 100svh);
	}

	.js .story__sticky {
		position: sticky;
		top: var(--stick-top);
		display: grid;
		align-items: center;
		height: calc(100svh - var(--stick-top));
	}

	.js .story__item {
		grid-area: 1 / 1;
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		gap: var(--space-8);
		justify-self: center;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur-m) var(--ease), visibility 0s linear var(--dur-m);
	}

	.js .story__item.is-active {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.js .story__bar {
		position: absolute;
		right: var(--gutter);
		bottom: var(--space-6);
		left: var(--gutter);
		display: block;
		height: 3px;
		background: var(--c-divider);
	}

	.js .story__bar::after {
		content: "";
		display: block;
		height: 100%;
		background: var(--c-orange);
		transform: scaleX(var(--sp, 0));
		transform-origin: left;
	}
}

/* ---------- (f) Scroll-Snap-Galerie ---------- */
.rail-wrap {
	position: relative;
}

.rail {
	display: flex;
	gap: var(--space-5);
	padding: 0 var(--gutter) var(--space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rail::-webkit-scrollbar {
	display: none;
}

.rail > * {
	flex: 0 0 85vw;
	scroll-snap-align: start;
}

.rail-ctrl {
	display: flex;
	gap: var(--space-3);
	justify-content: flex-end;
	width: min(100% - 2 * var(--gutter), var(--container-wide));
	margin: var(--space-5) auto 0;
}

.rail-ctrl button {
	position: relative;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	cursor: pointer;
	transition: background-color var(--dur-xs) var(--ease);
}

.rail-ctrl button:hover {
	background: rgba(255, 255, 255, .2);
}

.rail-ctrl button[aria-disabled="true"] {
	opacity: .35;
}

.rail-ctrl button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--c-text);
	border-right: 2px solid var(--c-text);
	transform: translate(-65%, -50%) rotate(45deg);
}

.rail-ctrl button[data-rail-prev]::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.rev {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	border: 1px solid var(--c-card-border);
	border-radius: var(--radius-l);
	background: var(--c-card);
}

.rev__h {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.rev__av {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
}

.rev__av picture,
.rev__av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rev__n {
	color: var(--c-text);
	font-weight: 600;
	text-decoration: none;
}

.rev__d {
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

.rev__h p + p {
	margin-top: 0;
}

.gal {
	border-radius: var(--radius-l);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.gal picture,
.gal img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rating {
	display: grid;
	gap: var(--space-2);
	margin-bottom: var(--space-7);
}

.rating__l {
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

.rating__n {
	color: var(--c-text);
	font-size: var(--fs-stat);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}

.rating__a {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.refs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-7);
}

.refimg {
	border-radius: var(--radius-m);
	overflow: hidden;
}

/* ---------- (i) FAQ ---------- */
.faq__i {
	border-top: 1px solid var(--c-divider);
}

.faq__i:last-child {
	border-bottom: 1px solid var(--c-divider);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-block: var(--space-5);
	list-style: none;
	cursor: pointer;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq__q {
	font-size: var(--fs-h4);
	letter-spacing: -.005em;
	line-height: 1.3;
}

.plus {
	position: relative;
	flex: none;
	width: 28px;
	height: 28px;
	transition: transform var(--dur-s) var(--ease);
}

.plus::before,
.plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background: var(--c-orange);
}

.plus::after {
	transform: rotate(90deg);
}

details[open] .plus {
	transform: rotate(45deg);
}

.faq__a {
	padding-bottom: var(--space-5);
}

@supports selector(::details-content) {
	.faq__i::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--dur-s) var(--ease), content-visibility var(--dur-s) var(--ease) allow-discrete;
	}

	.faq__i[open]::details-content {
		block-size: auto;
	}
}

/* ---------- Karten und Layout-Bausteine ---------- */
.card {
	padding: var(--space-7);
	border: 1px solid var(--c-light-border);
	border-radius: var(--radius-l);
	background: var(--c-text);
}

.sec--light .card h3 {
	margin-bottom: var(--space-3);
}

.sec--light .card .btn {
	margin-top: var(--space-5);
}

.card--dark {
	border-color: var(--c-card-border);
	background: var(--c-card);
}

.card--dark h3,
.card--dark h4 {
	margin-bottom: var(--space-3);
	color: var(--c-text);
}

.card--glass {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(0, 0, 0, .5);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.card--glass h3 {
	margin-bottom: var(--space-3);
}

.card--media {
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--space-6);
	overflow: hidden;
}

.card--media > :not(.card__img) {
	margin-inline: var(--space-6);
}

.card__img {
	aspect-ratio: 16 / 10;
	margin-bottom: var(--space-5);
	overflow: hidden;
}

.card__img picture,
.card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card .eyebrow {
	margin-bottom: var(--space-3);
}

.duo,
.trio,
.quad {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: minmax(0, 1fr);
}

.duo--plain h3 {
	margin-bottom: var(--space-3);
}

.split {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}

.ticks {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.ticks li {
	position: relative;
	padding-left: 1.4em;
}

.ticks li::before {
	content: "";
	position: absolute;
	top: .7em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-orange);
}

.card--media .ticks {
	margin-top: var(--space-4);
}

.addr {
	padding: var(--space-7);
	border: 1px solid var(--c-card-border);
	border-radius: var(--radius-l);
	background: var(--c-card);
}

.addr h3,
.addr address {
	margin-bottom: var(--space-4);
}

.addr address {
	color: var(--c-text-lead);
}

.addr .btn {
	margin-top: var(--space-5);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

.chip {
	padding: .5em 1.1em;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, .55);
	color: var(--c-text);
}

.warum {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

.warum__text > p {
	margin-top: var(--space-5);
}

.warum__text .btn {
	margin-top: var(--space-5);
}

.warum__fig {
	justify-self: center;
	width: min(100%, 520px);
}

.banner {
	height: clamp(220px, 40vw, 480px);
	border-radius: var(--radius-l);
	overflow: clip;
}

.person {
	display: grid;
	gap: var(--space-6);
	margin: var(--space-8) 0 var(--space-7);
	padding: var(--space-7);
	border: 1px solid var(--c-card-border);
	border-radius: var(--radius-l);
	background: var(--c-card);
}

.person__img {
	width: 150px;
	border-radius: var(--radius-m);
	overflow: hidden;
}

.person__r {
	margin-bottom: var(--space-4);
	color: var(--c-orange);
	font-weight: 600;
}

.toolline {
	margin-top: var(--space-4);
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

/* ---------- WP Performance, Ablauf, Preise ---------- */
.lcp-box {
	margin-bottom: var(--space-7);
	padding: var(--space-7);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius-l);
	background: rgba(0, 0, 0, .55);
}

.lcp {
	max-width: none;
	margin: var(--space-3) 0 var(--space-5);
	color: var(--c-text);
	font-size: var(--fs-stat);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}

.lcp__from {
	opacity: calc(.35 + .65 * (1 - var(--p, 1)));
}

.lcp__to {
	color: var(--c-orange);
	opacity: calc(.35 + .65 * var(--p, 1));
}

.lcp__bar {
	height: 6px;
	margin-bottom: var(--space-5);
	border-radius: 3px;
	background: var(--c-divider);
}

.lcp__bar::after {
	content: "";
	display: block;
	width: calc(100% - 64% * var(--p, 1));
	height: 100%;
	border-radius: inherit;
	background: var(--g-orange);
}

.quad {
	margin-block: var(--space-7);
}

.steps {
	position: relative;
	margin-bottom: var(--space-9);
}

.steps ol {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.steps__line {
	display: none;
}

.step__n {
	color: var(--c-orange);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.step .h4 {
	margin: var(--space-2) 0 var(--space-3);
}

.maint {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
	margin-top: var(--space-8);
}

.mt {
	padding-top: var(--space-4);
	border-top: 1px solid var(--c-card-border);
}

.mt .h4 {
	margin-bottom: var(--space-2);
}

.price {
	padding: var(--space-7);
	border-radius: var(--radius-l);
	background: var(--c-dark);
}

.price .eyebrow {
	margin-bottom: var(--space-3);
}

.price__n {
	margin-bottom: var(--space-3);
	color: var(--c-text);
	font-size: var(--fs-stat);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}

/* ---------- (j) CTA-Abschluss ---------- */
.cta {
	background-image: var(--g-orange);
	color: var(--c-bg);
}

.cta h2,
.cta .lead,
.cta p {
	color: var(--c-bg);
}

.cta__in {
	display: grid;
	gap: var(--space-5);
	justify-items: start;
}

.cta__in .display {
	max-width: 14ch;
}

.cta__b {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* ---------- Footer ---------- */
.gf {
	padding-block: var(--space-8);
	border-top: 1px solid var(--c-divider);
	background: var(--c-bg);
	color: var(--c-text-body);
	font-size: var(--fs-small);
}

.gf__in {
	display: grid;
	gap: var(--space-5);
}

.gf__l {
	display: flex;
	gap: var(--space-5);
}

.gf a {
	color: var(--c-text-body);
}

.gf a:hover {
	color: var(--c-text);
}

.prose {
	color: var(--c-text-body);
}

/* ---------- Responsive ---------- */
@media (min-width: 735px) {
	.stats {
		grid-template-columns: repeat(4, 1fr);
	}

	.rail > * {
		flex-basis: 420px;
	}

	.refs {
		grid-template-columns: repeat(4, 1fr);
	}

	.bento {
		grid-template-columns: repeat(6, 1fr);
	}

	.bento > .tile--s,
	.bento--wp > .tile {
		grid-column: span 3;
	}

	.bento > .tile--big,
	.bento > .tile--s:nth-of-type(4),
	.bento--wp > .t01,
	.bento--wp > .tile--cta {
		grid-column: span 6;
	}

	.duo,
	.quad {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.trio,
	.maint {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.steps ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.person {
		grid-template-columns: 150px 1fr;
	}

	.gf__in {
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
	}

	.hero__in {
		padding-bottom: var(--space-5);
	}
}

@media (min-width: 1069px) {
	.gh__nav {
		display: flex;
	}

	.gh__burger,
	.menu {
		display: none;
	}

	.bento {
		grid-template-columns: repeat(12, 1fr);
	}

	.bento > .tile--big {
		grid-column: 1 / span 6;
		grid-row: 1 / span 2;
	}

	.bento > .tile--s:nth-of-type(2) {
		grid-column: 7 / span 3;
		grid-row: 1;
	}

	.bento > .tile--s:nth-of-type(3) {
		grid-column: 10 / span 3;
		grid-row: 1;
	}

	.bento > .tile--s:nth-of-type(4) {
		grid-column: 7 / span 6;
		grid-row: 2;
	}

	.bento--flip > .tile--big {
		grid-column: 7 / span 6;
	}

	.bento--flip > .tile--s:nth-of-type(2) {
		grid-column: 1 / span 3;
	}

	.bento--flip > .tile--s:nth-of-type(3) {
		grid-column: 4 / span 3;
	}

	.bento--flip > .tile--s:nth-of-type(4) {
		grid-column: 1 / span 6;
	}

	.bento--wp > .tile {
		grid-column: span 4;
		grid-row: auto;
	}

	.bento--wp > .t01 {
		grid-column: span 8;
		grid-row: span 2;
		min-height: 520px;
	}

	.bento--wp > .tile--cta {
		grid-column: span 4;
	}

	.trio,
	.maint {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.maint {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.quad {
		grid-template-columns: repeat(4, 1fr);
	}

	.steps ol {
		grid-template-columns: repeat(4, 1fr);
	}

	.steps__line {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: block;
		height: 2px;
		background: var(--c-divider);
	}

	.steps__line::after {
		content: "";
		display: block;
		height: 100%;
		background: var(--c-orange);
		transform: scale(var(--p, 1));
		transform-origin: left;
	}

	.steps ol {
		padding-top: var(--space-6);
	}

	.split {
		grid-template-columns: 1.3fr 1fr;
		align-items: start;
	}

	.warum {
		grid-template-columns: 1.2fr 1fr;
	}
}

@media (max-width: 734px) {
	.hero {
		min-height: 100svh;
	}

	.localnav__title {
		display: none;
	}

	.hero__h1 {
		max-width: none;
	}

	.stats--hero {
		padding: var(--space-5);
	}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: .01ms !important;
	}

	[data-anim-scroll-group] {
		animation: none !important;
	}

	.hero,
	.sa {
		--p: 1;
	}

	.js .rv {
		opacity: 1;
		transform: none;
	}

	.js .ln__i {
		transform: none;
	}

	.hero__bg img {
		transform: none;
	}

	.zoom img {
		transform: scale(1.05);
	}

	.float {
		transform: none;
	}
}


/* ---------- Runde 1: Fixes ---------- */
html,
body {
	overflow-x: clip;
}

.sec {
	overflow-x: clip;
}

.price__n {
	font-size: clamp(2.25rem, 1.2rem + 3vw, 3.5rem);
	overflow-wrap: anywhere;
}

.tile .tile__num--new {
	color: #000;
}

.rev:not(:has(> p)) {
	align-self: start;
}

.addr__route {
	margin-top: var(--space-3);
}

.localnav__in {
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 24px, #000 calc(100% - 32px), rgba(0, 0, 0, 0));
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 24px, #000 calc(100% - 32px), rgba(0, 0, 0, 0));
}

@media (min-width: 1069px) {
	.localnav__in {
		gap: var(--space-4);
	}

	.localnav a,
	.localnav__label {
		font-size: .8125rem;
	}
}

/* ---------- Runde 2: Fixes ---------- */
.warum__fig picture,
.warum__fig .max2a-img {
	border-radius: var(--radius-l);
	overflow: hidden;
}