/* ==========================================================================
   House of Liberty Fahrzeugpflege – Theme-Styles
   Dunkles, ruhiges Design mit Eisblau als Akzent (Trockeneis).
   ========================================================================== */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #0a0c0f;
	--bg-2: #101318;
	--surface: #151920;
	--surface-2: #1b2029;
	--line: rgba(255, 255, 255, 0.09);
	--text: #eef1f5;
	--muted: #9aa3b2;

	--paper: #f4f5f7;
	--white: #ffffff;
	--ink: #0d1116;
	--ink-2: #4b5563;
	--line-l: #e2e5ea;

	/* Schwarz-Weiß, Akzent: WhatsApp-Grün */
	--ice: #ffffff;
	--ice-strong: #ffffff;
	--ice-ink: #0a0c0f;
	--ice-soft: rgba(255, 255, 255, 0.08);
	--accent: #ffffff;
	--accent-hover: #e6e8eb;
	--accent-ink: #0a0c0f;
	--star: #fbbc04;

	--radius: 20px;
	--radius-sm: 12px;
	--shadow: 0 1px 2px rgba(13, 17, 22, 0.04), 0 8px 24px rgba(13, 17, 22, 0.06);
	--font-head: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--container: 1200px;
	--header-h: 72px;
	--section-y: clamp(64px, 8vw, 112px);
}

/* Basis ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1.0625rem/1.65 var(--font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.5em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ice-strong); outline-offset: 3px; border-radius: 6px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ice); color: var(--ice-ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.center { text-align: center; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 32px, 820px); }
@media (min-width: 720px) { .container, .container--narrow { width: min(100% - 64px, var(--container)); } .container--narrow { max-width: 820px; } }

.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font: 600 0.8rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
	color: #b8bfca; margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.section--light .eyebrow { color: var(--ink-2); }

/* Buttons --------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 24px; border-radius: 10px; border: 1px solid transparent;
	font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer;
	transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--ice); color: var(--ice-ink); }
.btn--primary:hover { background: #e6e8eb; }
.btn--ghost { border-color: rgba(255, 255, 255, 0.22); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.04); }
.section--light .btn--ghost { border-color: var(--line-l); color: var(--ink); }
.section--light .btn--ghost:hover { border-color: var(--ink); background: transparent; }
.section--light .btn--primary { background: var(--ink); color: var(--white); }
.section--light .btn--primary:hover { background: #262d38; }
.btn--wa, .section--light .btn--wa { background: #fff; color: var(--accent-ink); box-shadow: none; }
.btn--wa:hover, .section--light .btn--wa:hover { background: #e6e8eb; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.94rem; border-radius: 8px; }
.btn--block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--ice); }
.section--light .link-arrow { color: var(--ink-2); }
.link-arrow .icon { transition: transform 0.2s ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Header ---------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10, 12, 15, 0.82);
	-webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__logo { max-height: 44px; width: auto; }
.brand__mark {
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
	background: linear-gradient(140deg, var(--ice), var(--ice-strong)); color: var(--ice-ink);
	font: 800 0.8rem/1 var(--font-head); letter-spacing: 0.04em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font: 800 1.02rem/1.15 var(--font-head); letter-spacing: -0.01em; }
.brand__text small { color: var(--muted); font-size: 0.78rem; }

.nav__list { list-style: none; display: flex; gap: 4px; }
.nav__list > li { position: relative; }
.nav__list a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 0.97rem; color: #d7dce4; }
.nav__list a:hover, .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: 0.7; }
.nav__list .sub-menu {
	list-style: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; padding: 8px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.18s ease;
}
.nav__list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav__mobile-cta { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 14px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--text); }
.header-phone .icon { color: var(--ice); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); width: 44px; height: 44px; border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 1080px) {
	.header-phone span { display: none; }
}
@media (max-width: 960px) {
	/* backdrop-filter würde das fixierte Menü auf die Header-Höhe begrenzen */
	.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
	.site-header__actions .btn { display: none; }
	.nav-toggle { display: inline-flex; }
	.nav {
		position: fixed; inset: var(--header-h) 0 0 0; background: var(--bg); padding: 16px 16px 120px; overflow-y: auto;
		opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; visibility: hidden;
	}
	.nav.is-open { opacity: 1; transform: none; visibility: visible; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__list > li { border-bottom: 1px solid var(--line); }
	.nav__list a { padding: 16px 4px; font-size: 1.1rem; border-radius: 0; }
	.nav__list a:hover { background: none; }
	.nav__list .menu-item-has-children > a::after { display: none; }
	.nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 12px 12px; min-width: 0; }
	.nav__list .sub-menu a { padding: 8px 4px; font-size: 1rem; color: var(--muted); }
	.nav__mobile-cta { display: grid; gap: 10px; margin-top: 24px; }
	body.nav-open { overflow: hidden; }
}

/* Hero ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.hero__glow {
	position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.072), transparent 70%); pointer-events: none;
}
.hero__grid { position: relative; display: grid; gap: 48px; align-items: center; }
.hero--page .hero__grid { grid-template-columns: 1fr; }
@media (min-width: 960px) {
	.hero--home .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
	.hero--page .hero__grid:has(.hero__media) { grid-template-columns: 1.2fr 0.8fr; }
}
.hero__title { font-size: clamp(2.4rem, 5.6vw, 4.4rem); margin-bottom: 20px; }
.hero--page .hero__title { font-size: clamp(2.1rem, 4.4vw, 3.5rem); max-width: 18ch; }
.hero__intro { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: #c3cad5; max-width: 58ch; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; color: var(--muted); font-size: 0.95rem; }
.hero__chips li { display: inline-flex; align-items: center; gap: 8px; }
.hero__chips .icon { color: var(--accent); width: 1.1em; height: 1.1em; }
.hero__media { position: relative; }
.hero__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 28px; border: 1px solid var(--line); background: var(--surface); }
.hero--page .hero__img { aspect-ratio: 4 / 3; }
.hero__img--illustration { object-fit: contain; border: 0; background: none; }

/* Breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.88rem; color: var(--muted); margin-bottom: 22px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* Platzhalter für fehlende Fotos */
.media__placeholder, .split__img.media__placeholder, .hero__img.media__placeholder, .post-card__img.media__placeholder {
	display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; border: 1px solid var(--line);
	background:
		radial-gradient(120% 80% at 80% 10%, rgba(255, 255, 255, 0.112), transparent 60%),
		radial-gradient(90% 70% at 10% 100%, rgba(255, 255, 255, 0.12), transparent 60%),
		linear-gradient(160deg, #1a2029, #0e1116);
}

/* Trust-Leiste ---------------------------------------------------------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: flex; flex-direction: column; gap: 4px; padding: 26px 20px; border-left: 1px solid var(--line); }
.trust__item:first-child { border-left: 0; }
@media (max-width: 859px) { .trust__item:nth-child(3) { border-left: 0; } .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); } }
.trust__value { display: inline-flex; align-items: center; gap: 6px; font: 800 1.45rem/1.1 var(--font-head); letter-spacing: -0.02em; }
.trust__label { color: var(--muted); font-size: 0.92rem; }

/* Sections -------------------------------------------------------------- */
.section { padding: var(--section-y) 0; }
.section--dark { background: var(--bg); color: var(--text); }
.section--dark + .section--dark { padding-top: 0; }
.section--light { background: var(--paper); color: var(--ink); }
.section--light + .section--light { padding-top: 0; }
.section__head { max-width: 760px; margin-bottom: 48px; }
.section__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.section__lead { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
.section--light .section__lead { color: var(--ink-2); }
.fineprint { margin-top: 24px; font-size: 0.9rem; color: var(--muted); }

/* Karten ---------------------------------------------------------------- */
.cards { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card__link {
	display: flex; flex-direction: column; height: 100%; padding: 28px; border-radius: var(--radius);
	text-decoration: none; background: var(--white); border: 1px solid var(--line-l); box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card__link:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13, 17, 22, 0.05), 0 18px 40px rgba(13, 17, 22, 0.1); border-color: #cfd5dd; }
.section--dark .card__link { background: var(--surface); border-color: var(--line); box-shadow: none; }
.section--dark .card__link:hover { border-color: rgba(255, 255, 255, 0.35); }
.card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #eceef1; color: var(--ink); margin-bottom: 22px; }
.section--dark .card__icon { background: var(--ice-soft); color: var(--ice); }
.card__title { font-size: 1.22rem; margin-bottom: 8px; }
.card__text { color: var(--ink-2); font-size: 0.98rem; margin-bottom: 22px; }
.section--dark .card__text { color: var(--muted); }
.card__meta { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-l); font-size: 0.9rem; font-weight: 600; }
.section--dark .card__meta { border-color: var(--line); }
.card__meta > span:first-child { color: var(--ink-2); font-weight: 500; }
.section--dark .card__meta > span:first-child { color: var(--muted); }
.card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; }
.section--dark .card__more { color: var(--ice); }
.card__more .icon { width: 1em; height: 1em; transition: transform 0.2s ease; }
.card__link:hover .card__more .icon { transform: translateX(3px); }

/* Split ----------------------------------------------------------------- */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 0.9fr 1.1fr; gap: 72px; } }
.split__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }

/* Prose ----------------------------------------------------------------- */
.prose { font-size: 1.08rem; color: #2b3340; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); color: var(--ink); margin: 1.8em 0 0.6em; }
.prose h3 { color: var(--ink); margin: 1.5em 0 0.5em; }
.prose p, .prose li { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 0; margin: 0 0 1.4em; list-style: none; }
.prose ul li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 12px; height: 7px; border-left: 2px solid #1ea838; border-bottom: 2px solid #1ea838; transform: rotate(-45deg); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-left: 44px; margin-bottom: 14px; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--white); font: 700 0.85rem/30px var(--font-head); text-align: center; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose--dark { color: #c3cad5; }
.prose--dark h2, .prose--dark h3, .prose--dark strong { color: var(--text); }
.prose--dark a { color: var(--ice); }
.prose--dark ul li::before { border-color: var(--accent); }
.split__text.prose h2 { margin-top: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* Layout mit Seitenleiste */
.layout-aside { display: grid; gap: 40px; }
@media (min-width: 1000px) { .layout-aside { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: start; } }
.facts {
	background: var(--white); border: 1px solid var(--line-l); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
	display: grid; gap: 12px;
}
@media (min-width: 1000px) { .facts { position: sticky; top: calc(var(--header-h) + 24px); } }
.facts__title { font: 800 1.15rem/1.2 var(--font-head); margin: 0 0 4px; }
.facts dl { margin: 0 0 8px; }
.facts dl > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line-l); }
.facts dt { font-size: 0.82rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.facts dd { margin: 0; font-weight: 600; }

/* Pakete ---------------------------------------------------------------- */
.packages { display: grid; gap: 16px; }
@media (min-width: 900px) { .packages { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.package { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.package--featured { background: linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.008) 60%), var(--surface); border-color: rgba(255, 255, 255, 0.45); }
.package__badge { position: absolute; top: -13px; left: 32px; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.package__name { font-size: 1.3rem; margin-bottom: 6px; }
.package__price { font: 800 2.3rem/1.1 var(--font-head); letter-spacing: -0.03em; margin-bottom: 10px; }
.package__lead { color: var(--muted); }
.ticks { list-style: none; display: grid; gap: 10px; margin: 8px 0 28px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { color: var(--accent); margin-top: 3px; width: 1.1em; height: 1.1em; }
.package .btn { margin-top: auto; }

/* Ablauf ---------------------------------------------------------------- */
.steps { list-style: none; display: grid; gap: 16px; counter-reset: none; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-l); }
.step__num { display: block; font: 800 2.2rem/1 var(--font-head); color: #c9ced6; margin-bottom: 18px; letter-spacing: -0.03em; }
.step__title { font-size: 1.15rem; }
.step p { color: var(--ink-2); margin: 0; font-size: 0.98rem; }

/* Bewertungen ----------------------------------------------------------- */
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .icon { width: 18px; height: 18px; }
.stars--sm .icon { width: 15px; height: 15px; }
.rating-badge { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--white); border: 1px solid var(--line-l); }
.rating-badge__value { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--ink); color: var(--white); font: 800 1.2rem/1 var(--font-head); }
.rating-badge__label { display: block; font-size: 0.88rem; color: var(--ink-2); }
.reviews { display: grid; gap: 16px; }
@media (min-width: 720px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 719px) {
	.reviews { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; }
	.review { scroll-snap-align: start; }
}
.review { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; font-size: 1.04rem; color: var(--ink); }
.review blockquote p { margin: 0; }
.review figcaption { margin-top: auto; font-size: 0.9rem; color: var(--ink-2); font-weight: 600; }
.rating-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; }

/* Einzugsgebiet --------------------------------------------------------- */
.areas { display: grid; gap: 40px; }
@media (min-width: 960px) { .areas { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; } }
.areas__address { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0; }
.areas__address .icon { color: var(--ice); margin-top: 3px; }
.section--light .areas__address .icon { color: var(--ink); }
.areas__list { list-style: none; border-top: 1px solid var(--line); }
.section--light .areas__list { border-color: var(--line-l); }
.areas__list a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding 0.2s ease, color 0.2s ease; }
.section--light .areas__list a { border-color: var(--line-l); }
.areas__list a:hover { padding-left: 12px; }
.areas__city { font: 700 1.2rem/1.2 var(--font-head); letter-spacing: -0.01em; }
.areas__dist { color: var(--muted); font-size: 0.95rem; }
.section--light .areas__dist { color: var(--ink-2); }
.areas__list .icon { color: var(--ice); }
.section--light .areas__list .icon { color: var(--ink); }

/* FAQ ------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-l); }
.section--dark .faq { border-color: var(--line); }
.faq__item { border-bottom: 1px solid var(--line-l); }
.section--dark .faq__item { border-color: var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: 1.12rem; }
.faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-l); }
.section--dark .faq__icon { border-color: var(--line); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.2s ease; }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer { padding: 0 52px 22px 0; color: var(--ink-2); }
.section--dark .faq__answer { color: var(--muted); }
.faq__answer p { margin: 0; }

/* Kontakt --------------------------------------------------------------- */
.contact { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; } }
.contact__ways { list-style: none; display: grid; gap: 10px; margin-top: 28px; }
.contact__ways a { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; text-decoration: none; border: 1px solid var(--line); transition: border-color 0.2s ease, background 0.2s ease; }
.contact__ways a:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.02); }
.section--light .contact__ways a { border-color: var(--line-l); background: var(--white); }
.section--light .contact__ways a:hover { border-color: #b9c2cd; }
.contact__ways strong { display: block; font-weight: 600; }
.contact__ways span span, .contact__ways a > span:last-child { color: var(--muted); font-size: 0.93rem; }
.section--light .contact__ways a > span:last-child { color: var(--ink-2); }
.contact__ways strong { color: var(--text); font-size: 1rem; }
.section--light .contact__ways strong { color: var(--ink); }
.contact__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ice-soft); color: var(--ice); flex: none; }
.section--light .contact__icon { background: #eceef1; color: var(--ink); }
.contact__form { padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--white); color: var(--ink); border: 1px solid var(--line-l); box-shadow: var(--shadow); }
.section--dark .contact__form { border-color: transparent; }

/* Formular */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
	width: 100%; font: 400 1rem/1.4 var(--font); color: var(--ink); background: var(--paper);
	border: 1px solid var(--line-l); border-radius: 12px; padding: 13px 14px; transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(13, 17, 22, 0.12); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-2); }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.check a { color: var(--ink); }
.form .btn--primary { background: var(--ink); color: var(--white); min-height: 56px; }
.form .btn--primary:hover { background: #262d38; }
.form__note { margin: 0; font-size: 0.88rem; color: var(--ink-2); text-align: center; }
.form__note a { color: var(--ink); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: flex; gap: 16px; align-items: flex-start; padding: 8px; color: var(--ink); }
.form-success .icon { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #dff5e7; color: #137a3a; }
.form-success p { color: var(--ink-2); margin: 4px 0 0; }
.form-error { padding: 12px 14px; border-radius: 12px; background: #fdecec; color: #8a1c1c; font-size: 0.95rem; }

/* CTA ------------------------------------------------------------------- */
.cta { padding: 0 0 var(--section-y); background: var(--bg); }
.section--light + .cta { padding-top: var(--section-y); }
.cta__box {
	position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center;
	padding: clamp(32px, 5vw, 64px); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.25);
	background: radial-gradient(80% 140% at 100% 0%, rgba(255, 255, 255, 0.1), transparent 60%), var(--surface);
}
@media (min-width: 900px) { .cta__box { grid-template-columns: 1.3fr auto; } }
.cta__text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.cta__text p { color: #c3cad5; margin: 0; max-width: 56ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Ratgeber -------------------------------------------------------------- */
.posts { list-style: none; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card a { display: block; height: 100%; text-decoration: none; background: var(--white); border: 1px solid var(--line-l); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.post-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__img.media__placeholder { border-radius: 0; border: 0; aspect-ratio: 16 / 10; }
.post-card__body { padding: 24px; }
.post-card__body time { font-size: 0.85rem; color: var(--ink-2); }
.post-card__title { font-size: 1.25rem; margin: 6px 0 8px; }
.post-card__body p { color: var(--ink-2); margin: 0; font-size: 0.97rem; }
.byline { font-size: 0.92rem; color: var(--ink-2); margin-bottom: 28px; }
.post-figure { margin: 0 0 32px; }
.post-figure img { border-radius: 20px; }
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-l); text-decoration: none; }

/* Footer ---------------------------------------------------------------- */
.site-footer { background: #06080a; color: var(--muted); padding: 72px 0 0; border-top: 1px solid var(--line); font-size: 0.97rem; }
.site-footer__grid { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.site-footer__name { font: 800 1.15rem/1.2 var(--font-head); color: var(--text); }
.site-footer__title { font-weight: 600; color: var(--text); margin-bottom: 14px; }
.site-footer__links { list-style: none; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer address { font-style: normal; display: grid; gap: 12px; }
.site-footer address a, .site-footer__hours { display: flex; gap: 10px; align-items: flex-start; }
.site-footer address .icon { color: var(--ice); margin-top: 2px; width: 1.1em; height: 1.1em; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__legal { list-style: none; display: flex; gap: 20px; }

/* Mobile-Leiste --------------------------------------------------------- */
.mobile-bar { display: none; }
@media (max-width: 899px) {
	body { padding-bottom: 76px; }
	.mobile-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 12, 15, 0.94);
		-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
	}
	.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border-radius: 12px; text-decoration: none; font-size: 0.78rem; font-weight: 600; color: var(--text); background: var(--surface); }
	.mobile-bar a.is-primary { background: var(--accent); color: var(--accent-ink); }
	.mobile-bar--2 { grid-template-columns: 1fr 1fr; }
	.mobile-bar--2 a { flex-direction: row; gap: 8px; font-size: 0.95rem; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Gutenberg-Basics, falls Blöcke genutzt werden */
.prose .wp-block-image img { border-radius: 16px; }
.prose figure { margin: 1.6em 0; }
.alignwide { max-width: none; }

/* Galerie (Ergebnisse) -------------------------------------------------- */
.gallery { overflow: hidden; }
.gallery .section__head { margin-bottom: 36px; }
.gallery__nav { display: flex; gap: 10px; }
.gallery__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.gallery__btn:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.04); }
.gallery__btn[data-gallery-prev] .icon { transform: rotate(180deg); }
.gallery__track {
	list-style: none; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	padding: 0 max(16px, calc((100vw - var(--container)) / 2)); scroll-padding: 0 max(16px, calc((100vw - var(--container)) / 2));
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { flex: 0 0 auto; scroll-snap-align: start; }
.gallery__img { height: clamp(280px, 38vw, 440px); width: auto; max-width: 82vw; object-fit: cover; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.gallery__cta { margin-top: 36px; }

/* Neukunden-Popup ------------------------------------------------------- */
/* Willkommensangebot: kleiner Kasten unten links */
.promo { position: fixed; left: 20px; bottom: 20px; z-index: 70; width: min(340px, calc(100% - 24px)); box-sizing: border-box; padding: 20px 20px 18px; border-radius: 16px; background: #0a0c0f; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.promo[hidden] { display: none; }
.promo.is-in { animation: promo-in 0.3s ease; }
@keyframes promo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.promo__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.promo__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.promo__close .icon { width: 18px; height: 18px; }
.promo__title { margin: 0 32px 8px 0; font: 800 1.15rem/1.3 var(--font-head); color: #fff; }
.promo__badge { display: inline-block; margin-right: 4px; padding: 3px 9px; border-radius: 999px; background: #fff; color: #0a0c0f; font-size: 0.95rem; }
.promo__lead { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.promo .promo__btn { min-height: 46px; background: #fff; color: #0a0c0f; }
.promo .promo__btn:hover { background: #e6e8eb; }
@media (max-width: 899px) { .promo { left: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   Luxus-Dunkel: Alle Bereiche dunkel wie beim bisherigen Auftritt.
   „section--light“ ist hier eine etwas hellere Dunkelstufe.
   ========================================================================== */
.section--light { background: #0e1115; color: var(--text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--light + .section--light { border-top: 0; }
.section--light .eyebrow { color: #b8bfca; }
.section--light .section__lead { color: var(--muted); }
.section--light .btn--primary, .btn--primary { background: #fff; color: #0a0c0f; }
.section--light .btn--primary:hover, .btn--primary:hover { background: #e6e8eb; }
.section--light .btn--ghost { border-color: rgba(255, 255, 255, 0.22); color: var(--text); }
.section--light .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.04); }
.section--light .link-arrow, .link-arrow { color: #fff; }

.card__link, .section--dark .card__link { background: linear-gradient(180deg, #171b22, #12151a); border-color: var(--line); box-shadow: none; }
.card__link:hover, .section--dark .card__link:hover { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
.card__icon, .section--dark .card__icon { background: rgba(255, 255, 255, 0.07); color: #fff; }
.card__text, .card__meta > span:first-child { color: var(--muted); }
.card__meta { border-color: var(--line); }
.card__more { color: #fff; }

.prose { color: #c3cad5; }
.prose h2, .prose h3, .prose strong { color: var(--text); }
.prose a { color: #fff; }
.prose ul li::before { border-color: var(--accent); }
.prose ol li::before { background: #fff; color: #0a0c0f; }

.facts { background: linear-gradient(180deg, #171b22, #12151a); border-color: var(--line); box-shadow: none; color: var(--text); }
.facts dl > div { border-color: var(--line); }
.facts dt { color: var(--muted); }

.step { background: #13161c; border-color: var(--line); }
.step p { color: var(--muted); }
.step__num { color: rgba(255, 255, 255, 0.22); }

.review { background: #13161c; border-color: var(--line); }
.review blockquote { color: var(--text); }
.review figcaption { color: var(--muted); }
.rating-badge { background: #13161c; border-color: var(--line); }
.rating-badge__value { background: #fff; color: #0a0c0f; }
.rating-badge__label { color: var(--muted); }

.faq, .faq__item, .section--light .faq__icon { border-color: var(--line); }
.faq__answer { color: var(--muted); }

.section--light .areas__list, .section--light .areas__list a { border-color: var(--line); }
.section--light .areas__dist { color: var(--muted); }
.section--light .areas__list .icon, .section--light .areas__address .icon { color: #fff; }

.section--light .contact__ways a { background: #13161c; border-color: var(--line); }
.section--light .contact__ways strong { color: var(--text); }
.section--light .contact__ways a > span:last-child { color: var(--muted); }
.section--light .contact__icon { background: rgba(255, 255, 255, 0.07); color: #fff; }

.contact__form, .section--dark .contact__form { background: linear-gradient(180deg, #171b22, #111419); color: var(--text); border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }
.field { color: var(--text); }
.field input, .field select, .field textarea { background: #0b0d11; border-color: var(--line); color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: #6b7380; }
.field input:focus, .field select:focus, .field textarea:focus { background: #0d1014; border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.check { color: var(--muted); }
.check a, .form__note a { color: #fff; }
.check input { accent-color: var(--accent); }
.form .btn--primary { background: #fff; color: #0a0c0f; }
.form .btn--primary:hover { background: #e6e8eb; }
.form__note { color: var(--muted); }
.form-success { color: var(--text); }
.form-success .icon { background: rgba(223, 227, 232, 0.15); color: var(--accent); }
.form-success p { color: var(--muted); }
.form-success a { color: #fff; }

.post-card a { background: #13161c; border-color: var(--line); }
.post-card__body time, .post-card__body p, .byline { color: var(--muted); }
.pagination a, .pagination span { border-color: var(--line); }

/* Hero mit Foto-Collage ------------------------------------------------- */
.hero--home { padding-top: clamp(40px, 5vw, 64px); }
.hero--home .hero__title { font-size: clamp(2.6rem, 6vw, 4.9rem); letter-spacing: -0.035em; }
.hero__glow { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent 70%); }
.collage { position: relative; padding: 0 0 48px 48px; }
.collage__main { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55); }
.collage__small { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; border: 4px solid var(--bg); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); }
.collage__badge {
	position: absolute; right: -12px; top: 28px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
	border-radius: 16px; background: rgba(16, 19, 24, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}
.collage__badge strong { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #0a0c0f; font: 800 1.05rem/1 var(--font-head); }
.collage__badge span { font-size: 0.85rem; color: var(--muted); line-height: 1.3; }
.collage__badge .stars .icon { width: 13px; height: 13px; }
@media (max-width: 959px) { .collage { padding: 0 0 36px 28px; } .collage__main { aspect-ratio: 4 / 4.2; } .collage__badge { right: 8px; } }

/* Firmenkunden ---------------------------------------------------------- */
.business { background: radial-gradient(60% 80% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 60%), var(--bg); border-top: 1px solid var(--line); }
.business__intro { display: grid; gap: 40px; align-items: center; margin-bottom: 56px; }
@media (min-width: 960px) { .business__intro { grid-template-columns: 1fr 1fr; gap: 72px; } }
.business__media { position: relative; }
.business__img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 28px; border: 1px solid var(--line); }
.business__tag { position: absolute; left: 20px; bottom: 20px; padding: 10px 16px; border-radius: 999px; background: rgba(10, 12, 15, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.16); font-weight: 600; font-size: 0.9rem; }
.business__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .business__grid { grid-template-columns: repeat(3, 1fr); } .business--compact .business__grid { grid-template-columns: repeat(2, 1fr); } }
.business__card { display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: linear-gradient(180deg, #171b22, #12151a); border: 1px solid var(--line); transition: border-color 0.2s ease, transform 0.2s ease; }
.business__card:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-3px); }
.business__card h3 { font-size: 1.3rem; }
.business__card h3 a { text-decoration: none; }
.business__card > p { color: var(--muted); }
.business__card .ticks { margin: 4px 0 24px; }
.business__card .link-arrow { margin-top: auto; }

/* Mehrstufiges Formular ------------------------------------------------- */
.wizard__head { margin-bottom: 4px; }
.wizard__title { font: 800 1.5rem/1.2 var(--font-head); letter-spacing: -0.02em; margin: 0 0 6px; }
.wizard__intro { color: var(--muted); margin-bottom: 18px; }
.wizard__progress { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.wizard__bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.wizard__bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s ease; }
.wizard:not(.is-js) .wizard__progress, .wizard:not(.is-js) [data-wizard-next], .wizard:not(.is-js) [data-wizard-prev] { display: none; }
.wizard__step { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.wizard:not(.is-js) .wizard__step + .wizard__step { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.wizard__step legend { font: 700 1.15rem/1.3 var(--font-head); margin-bottom: 14px; padding: 0; }
.wizard__step legend small { font: 400 0.85rem var(--font); color: var(--muted); }
.wizard__step .field__label { font: 600 0.95rem/1.3 var(--font); margin: 8px 0 0; }
.wizard__step .field__label small { font-weight: 400; color: var(--muted); }
.choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; min-height: 54px; padding: 12px 16px 12px 44px; border-radius: 14px; border: 1px solid var(--line); background: #0b0d11; font-weight: 500; font-size: 0.97rem; transition: border-color 0.15s ease, background 0.15s ease; position: relative; }
.choice span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); }
.choice input[type=checkbox] + span::before { border-radius: 5px; }
.choice input:checked + span { border-color: var(--accent); background: rgba(223, 227, 232, 0.08); }
.choice input:checked + span::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px #0b0d11; }
.choice input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.choice:hover span { border-color: rgba(255, 255, 255, 0.3); }
.wizard__nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 6px; }
.wizard__nav .btn { flex: 1; }
.wizard__nav [hidden] { display: none; }
.wizard__step[hidden] { display: none; }
.brand__logo { max-height: 58px; width: auto; }

/* Startseiten-Hero: ein Hintergrundbild, unscharf, Text mittig ---------- */
.cover { position: relative; overflow: hidden; isolation: isolate; min-height: min(88vh, 820px); display: grid; align-items: center; padding: clamp(72px, 10vw, 128px) 0; text-align: center; }
.cover__bg { position: absolute; inset: 0; z-index: -2; }
.cover__img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.06); }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 48%, rgba(10, 12, 15, 0.62), rgba(10, 12, 15, 0.38) 100%), linear-gradient(180deg, rgba(10, 12, 15, 0.25) 0%, rgba(10, 12, 15, 0.15) 55%, rgba(10, 12, 15, 1) 100%); }
.cover__inner { display: flex; flex-direction: column; align-items: center; }
.cover__rating {
	display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
	background: rgba(10, 12, 15, 0.55); border: 1px solid rgba(255, 201, 77, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: border-color 0.2s ease;
}
.cover__rating:hover { border-color: rgba(255, 201, 77, 0.7); }
.cover__stars { display: inline-flex; gap: 2px; color: var(--star); }
.cover__stars .icon { width: 18px; height: 18px; }
.cover__rating strong { font: 800 1.05rem/1 var(--font-head); color: var(--star); }
.cover__rating-text { font-size: 0.92rem; color: #e7e2d4; }
.eyebrow--center::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.cover__title { font-size: clamp(2.8rem, 7vw, 5.6rem); letter-spacing: -0.035em; margin-bottom: 22px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); }
.cover__intro { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: #d2d7df; max-width: 60ch; margin: 0 auto 34px; }
.cover__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cover__chips { justify-content: center; }
.cover .btn--ghost { background: rgba(10, 12, 15, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.collage__badge .stars { color: var(--star); }

/* Untermenü-Icons und Pfeile ------------------------------------------- */
.nav__sub-toggle { display: none; }
.nav__list .sub-menu a { display: flex; align-items: center; gap: 12px; }
.nav__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: #fff; transition: background 0.2s ease, border-color 0.2s ease; }
.nav__icon .icon { width: 17px; height: 17px; }
.nav__list .sub-menu a:hover .nav__icon { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
.nav__list .sub-menu { min-width: 380px; }
@media (max-width: 960px) {
	.nav__list > li { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.nav__list > li > a { font-weight: 600; }
	.nav__sub-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
	.nav__sub-toggle .icon { transition: transform 0.2s ease; }
	.nav__sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
	.nav__list .sub-menu { grid-column: 1 / -1; display: none; padding: 0 0 12px; }
	.nav__list li.is-open > .sub-menu { display: block; }
	.nav__list .sub-menu a { padding: 9px 4px; color: #d7dce4; }
	.nav { padding-bottom: 110px; }
}
@media (max-width: 600px) {
	.cover__rating { gap: 8px; padding: 9px 14px; }
	.cover__stars .icon { width: 15px; height: 15px; }
	.cover__rating-text { font-size: 0.82rem; white-space: nowrap; }
	.cover .eyebrow::before, .cover .eyebrow::after { display: none; }
	.cover { min-height: 0; }
}

/* Bewertungs-Badge im Hero (überarbeitet) ------------------------------- */
.cover__rating {
	gap: 16px; padding: 12px 22px 12px 18px; border-radius: 18px;
	background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cover__rating:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.11); }
.cover__rating .cover__score { font: 800 2rem/1 var(--font-head); color: #fff; letter-spacing: -0.03em; }
.cover__divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.2); }
.cover__rating-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cover__stars { gap: 3px; color: var(--star); filter: drop-shadow(0 0 6px rgba(251, 188, 4, 0.35)); }
.cover__stars .icon { width: 19px; height: 19px; }
.cover__rating-text { font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.cover__rating-text b { color: #fff; font-weight: 700; }
@media (max-width: 600px) {
	.cover__rating { gap: 12px; padding: 10px 16px 10px 14px; }
	.cover__rating .cover__score { font-size: 1.6rem; }
	.cover__stars .icon { width: 16px; height: 16px; }
	.cover__rating-text { font-size: 0.8rem; }
}

/* Desktop: immer nur ein Untermenü offen (Fokus vom letzten Klick schließt sich, sobald ein anderes gehovert wird) */
@media (min-width: 961px) {
	.nav__list:hover > li:not(:hover) > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); }
}

@media (max-width: 960px) {
	.nav { top: var(--header-h); bottom: 0; inset-inline: 0; z-index: 49; }
}

/* Header beim Scrollen: weiß -------------------------------------------- */
.brand__logo--dark { display: none; }
.site-header { transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
body:not(.nav-open) .site-header.is-scrolled { background: rgba(255, 255, 255, 0.96); border-bottom-color: rgba(13, 17, 22, 0.08); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
body:not(.nav-open) .site-header.is-scrolled .brand__logo--light { display: none; }
body:not(.nav-open) .site-header.is-scrolled .brand__logo--dark { display: block; }
body:not(.nav-open) .site-header.is-scrolled .brand__text strong { color: var(--ink); }
body:not(.nav-open) .site-header.is-scrolled .brand__text small { color: var(--ink-2); }
body:not(.nav-open) .site-header.is-scrolled .brand__mark { background: var(--ink); color: #fff; }
body:not(.nav-open) .site-header.is-scrolled .nav__list > li > a { color: var(--ink); }
body:not(.nav-open) .site-header.is-scrolled .nav__list > li > a:hover,
body:not(.nav-open) .site-header.is-scrolled .nav__list > .current-menu-item > a,
body:not(.nav-open) .site-header.is-scrolled .nav__list > .current-menu-ancestor > a { background: rgba(13, 17, 22, 0.06); color: var(--ink); }
body:not(.nav-open) .site-header.is-scrolled .header-phone,
body:not(.nav-open) .site-header.is-scrolled .header-phone .icon { color: var(--ink); }
body:not(.nav-open) .site-header.is-scrolled .site-header__actions .btn--primary { background: var(--ink); color: #fff; }
body:not(.nav-open) .site-header.is-scrolled .site-header__actions .btn--primary:hover { background: #262d38; }
body:not(.nav-open) .site-header.is-scrolled .nav-toggle { color: var(--ink); border-color: rgba(13, 17, 22, 0.15); }
@media (max-width: 960px) {
	body:not(.nav-open) .site-header.is-scrolled { background: #fff; }
}

/* Galerie: langsamer Autoplay ------------------------------------------- */
.gallery__track.is-auto { scroll-snap-type: none; scroll-behavior: auto; }

/* Hero: ein Foto, Kamerafahrt links/rechts + Dampf (nur transform/opacity = flüssig) */
.cover__bg .cover__img--anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.cover__bg .cover__img--cam { transform-origin: 40% 50%; animation: hol-cam 14s ease-in-out infinite alternate, hol-sway 5.5s ease-in-out infinite; will-change: transform; }
@keyframes hol-cam {
	0%   { transform: scale(1.16) translate3d(-3.5%, 0.8%, 0); }
	50%  { transform: scale(1.19) translate3d(0.5%, -0.6%, 0); }
	100% { transform: scale(1.17) translate3d(3.5%, 0.4%, 0); }
}
/* zweite, leichte „Handkamera“-Bewegung über ein eigenes Element */
.cover__bg { animation: hol-sway 6s ease-in-out infinite; }
@keyframes hol-sway { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 33% { transform: translate3d(4px, -3px, 0) rotate(0.15deg); } 66% { transform: translate3d(-3px, 2px, 0) rotate(-0.12deg); } }
.cover__bg .cover__img--cam { animation: hol-cam 14s ease-in-out infinite alternate; }

/* Dampf (Trockeneis) */
.cover__steam { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cover__steam span {
	position: absolute; left: 34%; bottom: 0; width: 42%; height: 62%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(235, 240, 245, 0.38), rgba(235, 240, 245, 0.14) 55%, transparent 78%);
	opacity: 0; will-change: transform, opacity; animation: hol-steam 9s ease-out infinite;
}
.cover__steam span:nth-child(2) { left: 46%; width: 36%; animation-delay: 3s; animation-duration: 10s; }
.cover__steam span:nth-child(3) { left: 24%; width: 38%; animation-delay: 6s; animation-duration: 11s; }
@keyframes hol-steam {
	0%   { opacity: 0; transform: translate3d(0, 10%, 0) scale(0.8); }
	20%  { opacity: 0.9; }
	70%  { opacity: 0.35; }
	100% { opacity: 0; transform: translate3d(8%, -45%, 0) scale(1.5); }
}
.cover__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
	.cover__bg, .cover__bg .cover__img--cam, .cover__steam span { animation: none; }
	.cover__bg .cover__img--cam { transform: scale(1.12); }
}
/* Keine Glas-Effekte über dem animierten Hintergrund (spart viel Rechenleistung) */
.cover__rating { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(16, 19, 24, 0.72); }
.cover .btn--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 12, 15, 0.45); }
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 12, 15, 0.94); }
@media (prefers-reduced-motion: reduce) {
	.cover__bg .cover__img--anim { animation: none; }
}

@media (max-width: 960px) { .nav__list .sub-menu { min-width: 0; } }

/* Anfrage-Popup ---------------------------------------------------------- */
.form-modal { width: min(100% - 24px, 640px); max-height: calc(100% - 24px); padding: 0; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, #171b22, #111419); color: var(--text); overflow: auto; }
.form-modal::backdrop { background: rgba(0, 0, 0, 0.72); }
.form-modal[open] { animation: promo-in 0.22s ease; }
.form-modal__body { padding: clamp(22px, 4vw, 36px); padding-top: clamp(26px, 4vw, 40px); }
.form-modal__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 16px 20px 20px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.form-modal__alt a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; }
.form-modal__alt .icon { width: 1.1em; height: 1.1em; }
.form-modal .wizard__title { padding-right: 40px; }
@media (max-width: 600px) { .form-modal { width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; max-width: none; } }

/* Hero: Hexagon-Lichtdecke ---------------------------------------------- */
.hex { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #1a1f27 0%, #0c0e12 55%, #08090c 100%); }
.hex__plane { position: absolute; left: -30%; right: -30%; top: -8%; height: 95%; transform-origin: 50% 0; transform: perspective(900px) rotateX(58deg); }
.hex__svg { width: 100%; height: 100%; display: block; }
.hex__grid { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 3; }
.hex__glow path { fill: none; stroke: #fff; stroke-width: 4; opacity: 0.08; animation: hol-hex 7s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); }
@keyframes hol-hex { 0%, 100% { opacity: 0.08; } 45%, 60% { opacity: 1; } }
.hex__plane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 12, 0) 0%, rgba(8, 9, 12, 0.2) 55%, #08090c 100%); }
.hex__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(60% 70% at 50% 100%, rgba(255, 255, 255, 0.07), transparent 70%), linear-gradient(180deg, transparent, #0a0c0f 85%); }
.cover:has(.hex)::before { background: radial-gradient(55% 45% at 50% 52%, rgba(8, 9, 12, 0.75), rgba(8, 9, 12, 0) 100%); }
.cover:has(.hex) .cover__bg { animation: none; }
@media (max-width: 700px) { .hex__plane { left: -70%; right: -70%; height: 80%; } .hex__grid { stroke-width: 4; } }
@media (prefers-reduced-motion: reduce) { .hex__glow path { animation: none; opacity: 0.5; } }

/* Header: am Seitenanfang transparent über dem Hero ---------------------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); background: transparent; border-bottom-color: transparent; }
body:not(.nav-open) .site-header:not(.is-scrolled) { background: linear-gradient(180deg, rgba(8, 9, 12, 0.55), rgba(8, 9, 12, 0)); box-shadow: none; }
body.nav-open .site-header { background: var(--bg); }
.site-main { padding-top: var(--header-h); }
.home .site-main { padding-top: 0; }
.home .cover { padding-top: calc(var(--header-h) + clamp(56px, 8vw, 104px)); }

/* Vertrauensleiste unter dem Hero: schwarz, weicher Übergang aus dem Hero */
.trust { background: linear-gradient(180deg, #0a0c0f 0%, #0d1014 100%); color: var(--text); border-top: 0; border-bottom: 1px solid var(--line); position: relative; }
.trust::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); }
.trust__item { border-color: rgba(255, 255, 255, 0.07); }
@media (max-width: 859px) { .trust__item:nth-child(n+3) { border-top-color: rgba(255, 255, 255, 0.07); } }
.trust__value { color: #fff; }
.trust__label { color: var(--muted); }
.trust .stars { color: var(--star); }

/* Auto im Studio unter der Lichtdecke */
.cover__car { position: absolute; left: 50%; bottom: 0; width: min(980px, 92%); height: auto; transform: translateX(-50%); opacity: 0.6; pointer-events: none; }
.hex__plane { height: 70%; }
@media (max-width: 700px) { .cover__car { width: 150%; opacity: 0.45; } }

/* Hero-Hintergrund: Foto ohne Effekte, nur Abdunkelung für die Lesbarkeit */
.cover__bg { animation: none; }
.cover__bg .cover__img--plain { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: none; transform: none; animation: none; }
.cover:has(.cover__img--plain)::before { background: linear-gradient(180deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0.5) 45%, rgba(8, 9, 12, 0.75) 80%, #0a0c0f 100%); }

/* Header am Seitenanfang: schwarzer Verlauf hinter dem Menü (läuft weich in den Hero aus) */
body:not(.nav-open) .site-header:not(.is-scrolled) { background: transparent; }
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #060709 0%, rgba(6, 7, 9, 0.97) 30%, rgba(6, 7, 9, 0.85) 50%, rgba(6, 7, 9, 0.45) 75%, rgba(6, 7, 9, 0) 100%); transition: opacity 0.25s ease; }
.site-header.is-scrolled::before, body.nav-open .site-header::before { opacity: 0; }

/* Agentur-Credit im Footer (silberner Glanz) ----------------------------- */
.site-footer__bottom { align-items: center; }
.credit { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--muted); font-size: 0.85rem; }
.credit__mark { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12)); transition: transform 0.4s ease; }
.credit:hover .credit__mark { transform: rotate(-20deg) scale(1.08); }
.credit__name {
	font: 700 0.95rem/1 var(--font-head); letter-spacing: 0.01em;
	background: linear-gradient(100deg, #7d838b 0%, #c3c8ce 30%, #ffffff 45%, #c3c8ce 60%, #7d838b 100%);
	background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
	animation: gd-shine 5s ease-in-out infinite;
}
@keyframes gd-shine { 0% { background-position: 100% 0; } 50% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .credit__name { animation: none; } }
@media (min-width: 760px) { .site-footer__bottom { display: flex; justify-content: space-between; } }


/* Gruppe-Digital-Icon: Silber mit wanderndem Glanz (Form über Maske) */
.credit__mark {
	display: inline-block; flex: none; width: 28px; height: 28px; filter: none;
	background: linear-gradient(120deg, #7d838b 0%, #c3c8ce 30%, #ffffff 45%, #c3c8ce 60%, #7d838b 100%);
	background-size: 250% 250%; animation: gd-shine-mark 5s ease-in-out infinite;
	-webkit-mask: var(--gd-mark) center / contain no-repeat; mask: var(--gd-mark) center / contain no-repeat;
}
@keyframes gd-shine-mark { 0% { background-position: 100% 100%; } 50% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .credit__mark { animation: none; } }

/* Icon: dunkler Kreis, silbernes „G“ */
.credit__badge { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1d2128, #08090b 70%); box-shadow: 0 0 0 1px rgba(210, 215, 222, 0.35), 0 0 10px rgba(255, 255, 255, 0.08); transition: transform 0.4s ease; }
.credit__badge .credit__mark { width: 30px; height: 30px; }
.credit:hover .credit__badge { transform: rotate(-20deg) scale(1.08); }
.credit:hover .credit__mark { transform: none; }

/* Mobil: Telefon-Icon oben ausblenden (steht unten in der Schnellkontakt-Leiste) */
@media (max-width: 899px) { .header-phone { display: none; } }

/* Mobil: größeres Hamburger-Menü */
@media (max-width: 960px) {
	.nav-toggle { width: 52px; height: 52px; border-radius: 14px; }
	.nav-toggle .icon { width: 30px; height: 30px; stroke-width: 2.2; }
}

/* Bewertungen mobil: Testimonial-Slider (eine Karte, automatisch weiter) */
.reviews__dots { display: none; }
@media (max-width: 719px) {
	.reviews { grid-auto-columns: 100%; gap: 12px; margin-inline: 0; padding-inline: 0; scrollbar-width: none; scroll-behavior: smooth; }
	.reviews::-webkit-scrollbar { display: none; }
	.review { padding: 28px 24px; min-height: 230px; }
	.review blockquote { font-size: 1.12rem; line-height: 1.6; }
	.review blockquote p::before { content: "\201E"; display: block; font: 800 3rem/0.6 var(--font-head); color: rgba(255, 255, 255, 0.18); margin-bottom: 14px; }
	.reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
	.reviews__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: width 0.3s ease, background 0.3s ease; }
	.reviews__dots span.is-active { width: 22px; border-radius: 4px; background: #fff; }
}

/* Firmenkunden-Bereich: immer voller Abstand oben (hat eigene Trennlinie) */
.section--dark + .business, .business { padding-top: var(--section-y); }

/* Lange deutsche Wörter in Überschriften sauber trennen statt überlaufen lassen */
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
.hero__grid > * { min-width: 0; }

/* Desktop: Klick auf Hauptpunkt öffnet nur das Untermenü */
@media (min-width: 961px) {
	.nav__list li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
}

.nav__list > li.menu-item-has-children > a { cursor: pointer; user-select: none; }

/* ==========================================================================
   Hell-Variante: Text-Bereiche hell, Bilder/Galerie/Preise/Bewertungen/
   Firmenkunden dunkel als Akzente. Alles über „section--light“ gesteuert.
   ========================================================================== */
.section--light {
	--text: #0d1116; --muted: #5b6472; --line: #e2e5ea; --surface: #ffffff;
	--accent: #0d1116; --accent-hover: #262d38; --accent-ink: #ffffff;
	background: #f5f6f8; color: var(--ink); border-top: 0; border-bottom: 0;
}
.section--light + .section--light { padding-top: 0; }
.section--light h2, .section--light h3 { color: var(--ink); }
.section--light .eyebrow { color: var(--ink-2); }
.section--light .section__lead { color: var(--ink-2); }
.section--light .btn--wa, .section--light .btn--primary { background: var(--ink); color: #fff; }
.section--light .btn--wa:hover, .section--light .btn--primary:hover { background: #262d38; }
.section--light .btn--ghost { border-color: #cfd4db; color: var(--ink); }
.section--light .btn--ghost:hover { border-color: var(--ink); background: transparent; }
.section--light .link-arrow { color: var(--ink); }
.section--light .ticks .icon { color: var(--ink); }

.section--light .card__link { background: #fff; border-color: var(--line-l); box-shadow: 0 1px 2px rgba(13,17,22,.04), 0 10px 30px rgba(13,17,22,.06); }
.section--light .card__link:hover { border-color: #c9ced6; box-shadow: 0 2px 4px rgba(13,17,22,.05), 0 22px 44px rgba(13,17,22,.12); }
.section--light .card__icon { background: #0d1116; color: #fff; }
.section--light .card__text, .section--light .card__meta > span:first-child { color: var(--ink-2); }
.section--light .card__meta { border-color: var(--line-l); }
.section--light .card__more { color: var(--ink); }

.section--light .prose { color: #2b3340; }
.section--light .prose h2, .section--light .prose h3, .section--light .prose strong, .section--light .prose a { color: var(--ink); }
.section--light .prose ul li::before { border-color: var(--ink); }
.section--light .prose ol li::before { background: var(--ink); color: #fff; }

.section--light .facts { background: #0d1116; border-color: #0d1116; color: #eef1f5; box-shadow: 0 24px 48px rgba(13,17,22,.18); --line: rgba(255,255,255,.1); --muted: #9aa3b2; }
.section--light .facts dl > div { border-color: rgba(255,255,255,.1); }
.section--light .facts dt { color: #9aa3b2; }
.section--light .facts .btn--wa { background: #fff; color: #0a0c0f; }
.section--light .facts .btn--wa:hover { background: #e6e8eb; }
.section--light .facts .btn--ghost { border-color: rgba(255,255,255,.22); color: #eef1f5; }

.section--light .step { background: #fff; border-color: var(--line-l); }
.section--light .step p { color: var(--ink-2); }
.section--light .step__num { color: #c4c9d1; }

.section--light .faq, .section--light .faq__item, .section--light .faq__icon { border-color: var(--line-l); }
.section--light .faq__answer { color: var(--ink-2); }

.section--light .areas__list, .section--light .areas__list a { border-color: var(--line-l); }
.section--light .areas__dist { color: var(--ink-2); }
.section--light .areas__list .icon, .section--light .areas__address .icon { color: var(--ink); }

.section--light .contact__ways a { background: #fff; border-color: var(--line-l); }
.section--light .contact__ways a:hover { border-color: var(--ink); background: #fff; }
.section--light .contact__ways strong { color: var(--ink); }
.section--light .contact__ways a > span:last-child { color: var(--ink-2); }
.section--light .contact__icon { background: #0d1116; color: #fff; }

.section--light .contact__form { background: #fff; color: var(--ink); border: 1px solid var(--line-l); box-shadow: 0 1px 2px rgba(13,17,22,.04), 0 24px 60px rgba(13,17,22,.10); }
.section--light .field { color: var(--ink); }
.section--light .field input, .section--light .field select, .section--light .field textarea { background: #f5f6f8; border-color: var(--line-l); color: var(--ink); }
.section--light .field input::placeholder, .section--light .field textarea::placeholder { color: #8a929e; }
.section--light .field input:focus, .section--light .field select:focus, .section--light .field textarea:focus { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13,17,22,.08); }
.section--light .wizard__bar { background: #e6e9ed; }
.section--light .choice span { background: #f5f6f8; border-color: var(--line-l); color: var(--ink); }
.section--light .choice span::before { border-color: #9aa1ab; }
.section--light .choice:hover span { border-color: #9aa1ab; }
.section--light .choice input:checked + span { border-color: var(--ink); background: #fff; }
.section--light .choice input:checked + span::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.section--light .choice input:focus-visible + span { outline-color: var(--ink); }
.section--light .check, .section--light .form__note { color: var(--ink-2); }
.section--light .check a, .section--light .form__note a, .section--light .form-success a { color: var(--ink); }
.section--light .form .btn--primary { background: var(--ink); color: #fff; }
.section--light .form .btn--ghost { border-color: #cfd4db; color: var(--ink); }
.section--light .form-success { color: var(--ink); }
.section--light .form-success .icon { background: #0d1116; color: #fff; }
.section--light .form-success p { color: var(--ink-2); }
.section--light .wizard__nav .btn--wa { background: var(--ink); color: #fff; }

/* Bewertungen hell (wie Ablauf-Kästchen) */
.section--light .review { background: #fff; border-color: var(--line-l); }
.section--light .review blockquote { color: var(--ink); }
.section--light .review figcaption { color: var(--ink-2); }
.section--light .rating-badge { background: #fff; border-color: var(--line-l); box-shadow: 0 1px 2px rgba(13,17,22,.04), 0 10px 30px rgba(13,17,22,.06); }
.section--light .rating-badge__value { background: var(--ink); color: #fff; }
.section--light .rating-badge__label { color: var(--ink-2); }
.section--light .reviews__dots span { background: #c9ced6; }
.section--light .reviews__dots span.is-active { background: var(--ink); }
.section--light .review blockquote p::before { color: rgba(13, 17, 22, 0.15); }

/* Desktop: Menü mittig zwischen Logo und Button */
@media (min-width: 961px) {
	.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
	.brand { margin-right: 0; justify-self: start; }
	.site-header__actions { justify-self: end; }
}

/* Smartphone: Hero-Bild unten stärker ins Schwarz verlaufen lassen */
@media (max-width: 720px) {
	.cover:has(.cover__img--plain)::before { background: linear-gradient(180deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0.55) 30%, rgba(8, 9, 12, 0.82) 55%, rgba(8, 9, 12, 0.96) 75%, #0a0c0f 90%); }
}

/* Drei Töne: Weiß, helles Grau, Schwarz */
.section--light { background: #ffffff; }
.section--gray { background: #eef0f3; }
.section--light + .section--gray, .section--gray + .section--light:not(.section--gray) { padding-top: var(--section-y); }
.section--light:not(.section--gray) .step, .section--light:not(.section--gray) .review { background: #f6f7f9; }
.section--gray .card__link, .section--gray .step, .section--gray .review, .section--gray .rating-badge, .section--gray .contact__ways a { background: #ffffff; }
.section--gray .field input, .section--gray .field select, .section--gray .field textarea, .section--gray .choice span { background: #f5f6f8; }
.section--gray + .section--gray { padding-top: 0; }

/* Smartphone: mehr Luft zwischen Header und Überschrift */
@media (max-width: 720px) {
	.home .cover { padding-top: calc(var(--header-h) + 96px); }
	.hero { padding-top: 72px; }
}

/* Mobile-Leiste: „Anrufen“ transparent mit weißem Rahmen */
@media (max-width: 899px) {
	.mobile-bar a:not(.is-primary) { background: transparent; border: 1px solid rgba(255, 255, 255, 0.85); color: #fff; }
}

/* Animierte Icons: Telefon klingelt, WhatsApp pulsiert (dezent, alle paar Sekunden) */
@keyframes hol-ring {
	0%, 70%, 100% { transform: rotate(0); }
	74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-10deg); }
	86% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } 94% { transform: rotate(0); }
}
@keyframes hol-pulse {
	0%, 60%, 100% { transform: scale(1); }
	70% { transform: scale(1.22); } 80% { transform: scale(0.94); } 88% { transform: scale(1.08); }
}
.btn[data-track="call"] .icon, .mobile-bar a[data-track="call"] .icon { animation: hol-ring 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
.btn[data-track="whatsapp"] .icon, .mobile-bar a[data-track="whatsapp"] .icon { animation: hol-pulse 3.2s ease-in-out 1.6s infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
	.btn[data-track] .icon, .mobile-bar a[data-track] .icon { animation: none; }
}

/* Anfrageformular: Privat/Gewerbe-Kacheln und Plus/Minus-Zähler */
.choices--big .choice span { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 76px; }
.choices--big .choice strong { font-size: 1.05rem; }
.choices--big .choice small { font-weight: 400; font-size: 0.86rem; opacity: 0.75; }
.counters { display: grid; gap: 10px; }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 14px; }
.counter__label { font-weight: 500; }
.counter__ctrl { display: flex; align-items: center; gap: 6px; }
.counter__btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; font: 600 1.3rem/1 var(--font); cursor: pointer; }
.counter__btn:hover { border-color: currentColor; }
.counter input { width: 58px; height: 40px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font: 600 1.05rem var(--font); -moz-appearance: textfield; }
.counter input::-webkit-outer-spin-button, .counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.counter__total { margin: 4px 0 0; font-size: 0.92rem; color: var(--muted); }
.counter__total.is-error { color: #e5484d; font-weight: 600; }
[data-branch-field][hidden] { display: none; }

/* Desktop: mehr Abstand zwischen Header und Hero-Überschrift */
@media (min-width: 721px) {
	.home .cover { padding-top: calc(var(--header-h) + clamp(96px, 10vw, 150px)); }
	.hero { padding-top: clamp(80px, 8vw, 120px); }
}

/* Desktop: Kontaktbereich – Kontaktwege direkt unter dem Text, linke Spalte bleibt beim Scrollen stehen */
@media (min-width: 960px) {
	.contact { align-items: start; }
	.contact__direct { position: sticky; top: calc(var(--header-h, 72px) + 24px); }
	.contact__direct .contact__ways { margin-top: 28px; padding-top: 0; }
}

/* Menü ohne Hover-Kästchen; Header beim Scrollen rein weiß */
@media (min-width: 961px) {
	.nav__list > li > a,
	.nav__list > li > a:hover,
	.nav__list > li > a:focus-visible,
	.nav__list > .current-menu-item > a,
	.nav__list > .current-menu-ancestor > a,
	body:not(.nav-open) .site-header.is-scrolled .nav__list > li > a:hover,
	body:not(.nav-open) .site-header.is-scrolled .nav__list > .current-menu-item > a,
	body:not(.nav-open) .site-header.is-scrolled .nav__list > .current-menu-ancestor > a { background: transparent; }
	.nav__list > li > a:hover, .nav__list > li:focus-within > a { opacity: 0.7; }
}
body:not(.nav-open) .site-header.is-scrolled { background: #ffffff; }

/* Smartphone/Tablet: Start-Hero füllt den ganzen ersten Bildschirm */
@media (max-width: 960px) {
	.home .cover { min-height: calc(100vh - 180px); min-height: calc(100svh - 180px); align-content: center; padding-bottom: 40px; }
}

/* ==========================================================================
   Mega-Menü (Desktop): volle Breite unter dem Header, einheitlich für alle
   Dropdowns – Raster mit Icon, Titel und Kurzbeschreibung, rechts Kontakt.
   ========================================================================== */
.nav__desc, .nav__aside { display: none; }
@media (min-width: 961px) {
	.site-header__inner, .nav, .nav__list, .nav__list > li { position: static; }
	.nav__list .sub-menu {
		position: absolute; left: 0; right: 0; top: 100%; min-width: 0;
		display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; grid-auto-rows: min-content; gap: 6px 14px; align-items: start;
		padding: 28px max(24px, calc((100vw - var(--container)) / 2 + 24px)) 32px;
		background: #ffffff; color: var(--ink); border: 0; border-top: 1px solid #e6e8ec; border-radius: 0 0 22px 22px;
		box-shadow: 0 30px 60px rgba(8, 9, 12, 0.22);
	}
	.nav__list .sub-menu::before { top: -24px; height: 24px; }
	.nav__list .sub-menu a { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; color: var(--ink); white-space: normal; background: transparent; }
	.nav__list .sub-menu a:hover, .nav__list .sub-menu a:focus-visible { background: #f2f4f6; }
	.nav__list .sub-menu .nav__icon { width: 42px; height: 42px; border-radius: 12px; background: #0d1116; border-color: #0d1116; color: #fff; }
	.nav__list .sub-menu a:hover .nav__icon { background: #262d38; border-color: #262d38; }
	.nav__text { display: grid; gap: 3px; padding-top: 1px; }
	.nav__list .sub-menu .nav__label { font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink); }
	.nav__desc { display: block; font-size: 0.86rem; line-height: 1.45; color: #5b6472; font-weight: 400; }
	.nav__aside { display: grid; gap: 10px; align-content: start; grid-column: 4; grid-row: 1 / span 3; margin-left: 10px; padding: 22px; border-radius: 16px; background: #0d1116; color: #eef1f5; list-style: none; }
	.nav__aside-title { margin: 0; font: 800 1.1rem/1.25 var(--font-head); color: #fff; }
	.nav__aside-text { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.5; color: #aab1bc; }
	.nav__list .sub-menu .nav__aside .btn { display: inline-flex; justify-content: center; padding: 0 18px; background: #fff; color: #0a0c0f; }
	.nav__list .sub-menu .nav__aside .btn:hover { background: #e6e8eb; }
	.nav__list .sub-menu .nav__aside .nav__aside-tel { display: block; padding: 4px 0 0; font-size: 0.88rem; color: #cfd4db; background: none; }
	.nav__list .sub-menu .nav__aside .nav__aside-tel:hover { color: #fff; background: none; }
	/* Hauptpunkt mit offenem Menü leicht hervorheben */
	.nav__list > li.menu-item-has-children:hover > a, .nav__list > li.menu-item-has-children.is-open > a { opacity: 1; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
}
@media (min-width: 961px) {
	.nav__list .sub-menu .nav__aside .btn { align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 10px; margin-top: 4px; }
}
.nav__icon--min { flex-direction: column; gap: 0; line-height: 1; }
.nav__icon--min b { font: 800 0.98rem/1 var(--font-head); letter-spacing: -0.02em; }
.nav__icon--min small { font-size: 0.56rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-top: 2px; }
@media (min-width: 961px) { .nav__list .sub-menu .nav__icon--min { display: flex; align-items: center; justify-content: center; } }
@media (max-width: 960px) { .nav__icon--min { display: flex; align-items: center; justify-content: center; } }
@media (min-width: 961px) { .nav__list .sub-menu .nav__icon .icon { width: 21px; height: 21px; } }

/* Header immer weiß: Schatten erst beim Scrollen */
body:not(.nav-open) .site-header.is-scrolled { background: #ffffff; box-shadow: none; border-bottom-color: rgba(13, 17, 22, 0.08); }
body:not(.nav-open) .site-header.is-scrolled.has-shadow { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10); }
@media (min-width: 961px) {
	.nav__list .sub-menu .nav__aside .nav__aside-tel { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 0; font-size: 0.95rem; font-weight: 600; color: #fff; text-align: center; }
	.nav__list .sub-menu .nav__aside .nav__aside-tel .icon { width: 17px; height: 17px; }
}

/* Unterseiten-Hero: Bild randlos im Hintergrund, weich in den dunklen Grund verlaufend */
.hero--page:has(.hero__media) .hero__grid { position: static; }
.hero--page:has(.hero__media) .hero__text { position: relative; z-index: 2; }
.hero--page .hero__media { position: absolute; z-index: 0; inset: 0; margin: 0; pointer-events: none; }
.hero--page .hero__media .hero__img { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; object-fit: cover; object-position: 50% 40%; }
.hero--page .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 15, 0.72) 0%, rgba(10, 12, 15, 0.82) 45%, rgba(10, 12, 15, 0.97) 80%, #0a0c0f 100%); }
.hero--page .hero__glow { display: none; }
@media (min-width: 961px) {
	.hero--page .hero__grid:has(.hero__media) { grid-template-columns: minmax(0, 0.56fr); }
	.hero--page .hero__media { inset: 0 0 0 auto; width: 58%; }
	.hero--page .hero__media::after {
		background:
			linear-gradient(90deg, #0a0c0f 0%, rgba(10, 12, 15, 0.9) 14%, rgba(10, 12, 15, 0.45) 45%, rgba(10, 12, 15, 0.12) 100%),
			linear-gradient(0deg, #0a0c0f 0%, rgba(10, 12, 15, 0) 28%),
			linear-gradient(180deg, rgba(10, 12, 15, 0.55) 0%, rgba(10, 12, 15, 0) 22%);
	}
}

/* Kästchen auf dunklem Grund: weiß mit schwarzer Schrift */
.section--dark .card__link { background: #ffffff; border-color: #ffffff; color: #0d1116; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.28); }
.section--dark .card__link:hover { background: #ffffff; border-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 28px 56px rgba(0,0,0,.4); }
.section--dark .card__icon { background: #0d1116; color: #ffffff; }
.section--dark .card__title, .section--dark .card__link h3 { color: #0d1116; }
.section--dark .card__text, .section--dark .card__meta > span:first-child { color: #4b5563; }
.section--dark .card__meta { border-color: #e2e5ea; }
.section--dark .card__more { color: #0d1116; }
.section--dark .business__card { background: #ffffff; border-color: #ffffff; color: #0d1116; }
.section--dark .business__card:hover { border-color: #ffffff; box-shadow: 0 28px 56px rgba(0,0,0,.4); }
.section--dark .business__card h3, .section--dark .business__card h3 a, .section--dark .business__card .link-arrow { color: #0d1116; }
.section--dark .business__card > p { color: #4b5563; }
.section--dark .business__card .card__icon { background: #0d1116; color: #ffffff; }
.section--dark .ticks .icon { color: inherit; }
.section--dark .package { background: #ffffff; border-color: #ffffff; color: #0d1116; }
.section--dark .package--featured { background: #ffffff; border: 2px solid #0d1116; box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 28px 56px rgba(0,0,0,.4); }
.section--dark .package__badge { background: #0d1116; color: #ffffff; }
.section--dark .package__name, .section--dark .package__price { color: #0d1116; }
.section--dark .package__lead { color: #4b5563; }
.section--dark .package .btn--ghost { border-color: #cfd4db; color: #0d1116; background: transparent; }
.section--dark .package .btn--ghost:hover { border-color: #0d1116; background: transparent; }
.section--dark .package .btn--primary { background: #0d1116; color: #ffffff; }
.section--dark .package .btn--primary:hover { background: #262d38; }
.section--dark .step { background: #ffffff; border-color: #ffffff; }
.section--dark .step__title { color: #0d1116; }
.section--dark .step p { color: #4b5563; }
.section--dark .step__num { color: #c4c9d1; }
.section--dark .review { background: #ffffff; border-color: #ffffff; }
.section--dark .review blockquote { color: #0d1116; }
.section--dark .review figcaption { color: #4b5563; }
.section--dark .review blockquote p::before { color: rgba(13,17,22,.15); }
.section--dark .rating-badge { background: #ffffff; border-color: #ffffff; }
.section--dark .rating-badge__value { background: #0d1116; color: #ffffff; }
.section--dark .rating-badge__label { color: #4b5563; }
.section--dark .contact__ways a { background: #ffffff; border-color: #ffffff; }
.section--dark .contact__ways a:hover { background: #ffffff; border-color: #ffffff; box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.section--dark .contact__ways strong { color: #0d1116; }
.section--dark .contact__ways a > span:last-child { color: #4b5563; }
.section--dark .contact__icon { background: #0d1116; color: #ffffff; }

/* Unterschrift mit Schreib-Animation und Stempel ([hol_signatur]) */
@font-face { font-family: "HOL Signature"; src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.signature { position: relative; display: flex; align-items: center; gap: clamp(16px, 4vw, 48px); flex-wrap: wrap; margin: 28px 0 8px; max-width: 640px; }
.signature__sign { flex: 1 1 260px; min-width: 0; }
.signature__svg { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; color: inherit; }
.signature__text { font-family: "HOL Signature", "Brush Script MT", cursive; font-size: 96px; fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1.1; stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.signature__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0.55; }
.signature__meta { margin: 6px 0 0; font-size: 0.9rem; letter-spacing: 0.02em; opacity: 0.7; }
.signature__stamp { flex: none; width: 150px; height: 150px; opacity: 0; transform: scale(1.9) rotate(-28deg); color: inherit; }
.signature__stamp svg { width: 100%; height: 100%; display: block; overflow: visible; }
.signature__ring { fill: none; stroke: currentColor; stroke-width: 2.4; }
.signature__ring--thin { stroke-width: 1.3; }
.signature__stamp-text { font: 800 9.4px/1 var(--font-head); letter-spacing: 0.08em; fill: currentColor; }
.signature__stamp-big { font: 800 30px/1 var(--font-head); letter-spacing: 0.04em; fill: currentColor; }
.signature__stamp-small { font: 700 8.5px/1 var(--font-head); letter-spacing: 0.22em; fill: currentColor; opacity: 0.8; }
.signature.is-visible .signature__text { animation: hol-sign-draw 2.6s cubic-bezier(.45,.05,.3,1) forwards, hol-sign-fill .7s ease 2.1s forwards; }
.signature.is-visible .signature__line { animation: hol-sign-line .9s ease 2.3s forwards; }
.signature.is-visible .signature__stamp { animation: hol-stamp .55s cubic-bezier(.2,1.4,.4,1) 2.9s forwards; }
@keyframes hol-sign-draw { to { stroke-dashoffset: 0; } }
@keyframes hol-sign-fill { to { fill-opacity: 1; stroke-width: 0.4; } }
@keyframes hol-sign-line { to { stroke-dashoffset: 0; } }
@keyframes hol-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-28deg); } 70% { opacity: 0.95; transform: scale(0.94) rotate(-10deg); } 100% { opacity: 0.88; transform: scale(1) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
	.signature__text { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; }
	.signature__line { stroke-dashoffset: 0; animation: none !important; }
	.signature__stamp { opacity: 0.88; transform: rotate(-12deg); animation: none !important; }
}
@media (max-width: 600px) {
	.signature { flex-wrap: nowrap; gap: 12px; }
	.signature__sign { flex: 1 1 0; }
	.signature__stamp { width: 104px; height: 104px; }
	.signature__meta { font-size: 0.8rem; }
}
.split__img[src*="motorraum.webp"] { object-position: 12% 50%; }

/* Preisliste (Seite „Preise“) */
.pricelist { display: grid; gap: 10px; }
.pricelist__row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 22px; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: #ffffff; border: 1px solid #e2e5ea; color: #0d1116; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pricelist__row:hover { border-color: #0d1116; box-shadow: 0 14px 30px rgba(13,17,22,.08); transform: translateY(-1px); }
.pricelist__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #0d1116; color: #fff; }
.pricelist__icon .icon { width: 20px; height: 20px; }
.pricelist__name { display: grid; gap: 2px; min-width: 0; }
.pricelist__name strong { font: 700 1.05rem/1.3 var(--font-head); }
.pricelist__name small { color: #5b6472; font-size: 0.88rem; }
.pricelist__price { font: 800 1.15rem/1.2 var(--font-head); white-space: nowrap; }
.pricelist__arrow .icon { width: 18px; height: 18px; opacity: .5; }
@media (max-width: 600px) {
	.pricelist__row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
	.pricelist__icon { width: 40px; height: 40px; }
	.pricelist__arrow { display: none; }
	.pricelist__price { font-size: 1rem; }
}
.section--dark .pricelist__row { border-color: #ffffff; }
.packages__more { margin-top: 18px; }
@media (max-width: 600px) {
	.pricelist__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; }
	.pricelist__icon { grid-row: span 2; align-self: start; }
	.pricelist__price { grid-column: 2; white-space: normal; font-size: 0.98rem; }
}

/* Startseite: Studio-Innenansicht als Hintergrund mit schwarzem Overlay */
.cover__bg .cover__img--studio { object-position: 50% 45%; transform: none; filter: none; }
.cover:has(.cover__img--studio)::before { background: linear-gradient(180deg, rgba(8, 9, 12, 0.5) 0%, rgba(8, 9, 12, 0.5) 45%, rgba(8, 9, 12, 0.8) 82%, #0a0c0f 100%); }
.trust__stars { display: inline-flex; gap: 3px; margin-left: 10px; vertical-align: middle; } .trust__stars .icon { width: 18px; height: 18px; color: var(--star); }

/* Fließtext: auf dunklem Grund weiß, auf hellem Grund schwarz */
.section--dark p, .section--dark li, .section--dark .section__lead, .section--dark .faq__answer, .section--dark .areas__dist, .section--dark .prose, .section--dark .prose p, .section--dark .prose li, .section--dark .check, .section--dark .form__note, .section--dark .wizard__intro, .hero p, .hero li, .hero .section__lead, .hero .faq__answer, .hero .areas__dist, .hero .prose, .hero .prose p, .hero .prose li, .hero .check, .hero .form__note, .hero .wizard__intro, .cover p, .cover li, .cover .section__lead, .cover .faq__answer, .cover .areas__dist, .cover .prose, .cover .prose p, .cover .prose li, .cover .check, .cover .form__note, .cover .wizard__intro, .business p, .business li, .business .section__lead, .business .faq__answer, .business .areas__dist, .business .prose, .business .prose p, .business .prose li, .business .check, .business .form__note, .business .wizard__intro { color: #ffffff; }
.section--light p, .section--light li, .section--light .section__lead, .section--light .faq__answer, .section--light .areas__dist, .section--light .prose, .section--light .prose p, .section--light .prose li, .section--light .check, .section--light .form__note, .section--light .wizard__intro, .section--white p, .section--white li, .section--white .section__lead, .section--white .faq__answer, .section--white .areas__dist, .section--white .prose, .section--white .prose p, .section--white .prose li, .section--white .check, .section--white .form__note, .section--white .wizard__intro { color: #0d1116; }
.card__link p, .card__link li, .card__link .card__text, .card__link .card__meta > span:first-child, .card__link .package__lead, .card__link blockquote, .card__link figcaption, .card__link .contact__ways a > span:last-child, .card__link .rating-badge__label, .card__link small, .card__link dt, .card__link .check, .card__link .form__note, .card__link .wizard__intro, .business__card p, .business__card li, .business__card .card__text, .business__card .card__meta > span:first-child, .business__card .package__lead, .business__card blockquote, .business__card figcaption, .business__card .contact__ways a > span:last-child, .business__card .rating-badge__label, .business__card small, .business__card dt, .business__card .check, .business__card .form__note, .business__card .wizard__intro, .package p, .package li, .package .card__text, .package .card__meta > span:first-child, .package .package__lead, .package blockquote, .package figcaption, .package .contact__ways a > span:last-child, .package .rating-badge__label, .package small, .package dt, .package .check, .package .form__note, .package .wizard__intro, .review p, .review li, .review .card__text, .review .card__meta > span:first-child, .review .package__lead, .review blockquote, .review figcaption, .review .contact__ways a > span:last-child, .review .rating-badge__label, .review small, .review dt, .review .check, .review .form__note, .review .wizard__intro, .step p, .step li, .step .card__text, .step .card__meta > span:first-child, .step .package__lead, .step blockquote, .step figcaption, .step .contact__ways a > span:last-child, .step .rating-badge__label, .step small, .step dt, .step .check, .step .form__note, .step .wizard__intro, .contact__ways a p, .contact__ways a li, .contact__ways a .card__text, .contact__ways a .card__meta > span:first-child, .contact__ways a .package__lead, .contact__ways a blockquote, .contact__ways a figcaption, .contact__ways a .contact__ways a > span:last-child, .contact__ways a .rating-badge__label, .contact__ways a small, .contact__ways a dt, .contact__ways a .check, .contact__ways a .form__note, .contact__ways a .wizard__intro, .rating-badge p, .rating-badge li, .rating-badge .card__text, .rating-badge .card__meta > span:first-child, .rating-badge .package__lead, .rating-badge blockquote, .rating-badge figcaption, .rating-badge .contact__ways a > span:last-child, .rating-badge .rating-badge__label, .rating-badge small, .rating-badge dt, .rating-badge .check, .rating-badge .form__note, .rating-badge .wizard__intro, .pricelist__row p, .pricelist__row li, .pricelist__row .card__text, .pricelist__row .card__meta > span:first-child, .pricelist__row .package__lead, .pricelist__row blockquote, .pricelist__row figcaption, .pricelist__row .contact__ways a > span:last-child, .pricelist__row .rating-badge__label, .pricelist__row small, .pricelist__row dt, .pricelist__row .check, .pricelist__row .form__note, .pricelist__row .wizard__intro, .contact__form p, .contact__form li, .contact__form .card__text, .contact__form .card__meta > span:first-child, .contact__form .package__lead, .contact__form blockquote, .contact__form figcaption, .contact__form .contact__ways a > span:last-child, .contact__form .rating-badge__label, .contact__form small, .contact__form dt, .contact__form .check, .contact__form .form__note, .contact__form .wizard__intro { color: #0d1116; }
.hero__chips li, .cover__chips li { color: #ffffff; }
.site-footer p, .site-footer li, .site-footer address, .site-footer a { color: #ffffff; }
.section--light .facts p, .section--light .facts dt, .section--light .facts dd { color: #ffffff; }
.section .business__card > p, .section .card__link .card__text, .section .card__link .card__meta > span:first-child, .section .package .package__lead, .section .review blockquote, .section .review figcaption, .section .step p, .section .contact__ways a > span:last-child, .section .rating-badge__label, .section .pricelist__name small { color: #0d1116; }

/* Preise-Seite: Pakete auf Weiß, Pakete-Boxen schwarz */
.section--pk-light { background: #ffffff; }
.section--pk-light .package { background: #0d1116; border-color: #0d1116; color: #ffffff; box-shadow: 0 24px 48px rgba(13,17,22,.16); }
.section--pk-light .package--featured { background: #0d1116; border: 2px solid #0d1116; box-shadow: 0 0 0 4px rgba(13,17,22,.12), 0 28px 56px rgba(13,17,22,.25); }
.section--pk-light .package__name, .section--pk-light .package__price { color: #ffffff; }
.section .section--pk-light .package .package__lead, .section--pk-light .package .package__lead, .section--pk-light .package li, .section--pk-light .package p { color: #e6e9ee; }
.section--pk-light .package .ticks .icon { color: #ffffff; }
.section--pk-light .package .btn--ghost { border-color: rgba(255,255,255,.35); color: #ffffff; background: transparent; }
.section--pk-light .package .btn--ghost:hover { border-color: #ffffff; }
.section--pk-light .package .btn--primary { background: #ffffff; color: #0a0c0f; }
.section--pk-light .package .btn--primary:hover { background: #e6e8eb; }
.section--pk-light .fineprint { color: #4b5563; }
.faq-gray > .section { background: #eef0f3; }

/* Auswahl-Kästchen in einer Reihe immer gleich hoch (auch wenn ein Text umbricht) */
.choice { display: flex; }
.choice span { flex: 1 1 auto; box-sizing: border-box; }